/* ============================================================
   goud999safe — pagina-CSS: Opslagkosten order-detail
   Afgesplitst uit de oude pagina-CSS (fase 2). Alleen deze pagina('s).
   ============================================================ */

  /* ============ ORDER HEADER ROW ============ */
  .order-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }
  .order-heading {
    font-size: var(--fs-20);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  /* ============ INVOICE LAYOUT ============ */
  .invoice-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--grey-line);
  }
  .invoice-address {
    font-size: var(--fs-14);
    line-height: 1.8;
  }
  .invoice-address strong {
    display: block;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 2px;
  }
  .invoice-meta { display: flex; flex-direction: column; gap: 8px; }
  .invoice-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: var(--fs-14);
  }
  .invoice-meta-label {
    font-weight: 700;
    color: var(--text-soft);
    font-size: var(--fs-12);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
  .invoice-meta-value { color: var(--ink); font-weight: 500; }

  /* Invoice table */
  /* Order/factuur-tabel: horizontaal scrollbaar op smalle schermen */
  .invoice-table-wrap { overflow-x: auto; margin-bottom: 24px; }
  .invoice-table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
  }
  .invoice-table thead th {
    text-align: left;
    font-size: var(--fs-11);
    font-weight: 700;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 12px 14px;
    background: var(--grey-soft);
    border-bottom: 1px solid var(--grey-line);
  }
  .invoice-table thead th:not(:first-child):not(:nth-child(2)) { text-align: right; }
  .invoice-table td {
    padding: 13px 14px;
    font-size: var(--fs-14);
    color: var(--ink);
    border-bottom: 1px solid var(--grey-line);
    vertical-align: top;
  }
  .invoice-table td:not(:first-child):not(:nth-child(2)) {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;   /* "€ 142,64" niet afbreken */
  }
  .invoice-table tr:last-child td { border-bottom: none; }
  .invoice-table .article-code { font-size: var(--fs-12); color: var(--text-muted); font-weight: 600; }

  /* Totals block */
  .invoice-totals {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
  }
  .totals-block {
    min-width: 280px;
    border-top: 2px solid var(--grey-line);
    padding-top: 16px;
  }
  .totals-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    font-size: var(--fs-14);
    padding: 5px 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;   /* "€ ..." niet afbreken */
  }
  .totals-row .label { color: var(--text-soft); font-weight: 600; font-size: var(--fs-13); }
  .totals-row.is-total {
    border-top: 1px solid var(--grey-line);
    margin-top: 8px;
    padding-top: 12px;
    font-size: var(--fs-16);
  }
  .totals-row.is-total .label { color: var(--ink); font-weight: 700; }
  .totals-row.is-total .value { font-weight: 700; color: var(--forest); }
  /* Desktop: som-waarden uitlijnen met de "Prijs incl."-kolom erboven
     (tabelcellen hebben 14px rechter-celpadding, het totalen-blok niet) */
  @media (min-width: 769px) {
    .totals-block { padding-right: 14px; }
  }

  /* Payment block */
  .payment-block {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--grey-line);
  }
  .payment-details {
    min-width: 280px;
    font-size: var(--fs-14);
  }
  .payment-details .payment-label {
    font-size: var(--fs-11);
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
  }
  .payment-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0;
  }
  .payment-row dt { color: var(--text-soft); font-weight: 600; font-size: var(--fs-13); }
  .payment-row dd { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
  /* ============ ACCORDION ============ */
  .accordion { display: flex; flex-direction: column; gap: 8px; padding: 24px 28px 28px; }
  .accordion-item {
    border: 1.5px solid var(--grey-line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color var(--t-med);
  }
  .accordion-item.is-open { border-color: var(--forest); }
  .accordion-trigger {
    width: 100%;
    padding: 14px 20px;
    background: var(--paper);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    border: none;
    font-family: inherit;
    text-align: left;
    transition: background var(--t-med);
  }
  .accordion-trigger:hover { background: var(--grey-soft); }
  .accordion-item.is-open .accordion-trigger { background: var(--forest-tint); }
  .accordion-trigger-left { display: flex; align-items: center; gap: 10px; }
  .accordion-code {
    font-size: var(--fs-11);
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    background: var(--grey-soft);
    padding: 2px 8px;
    border-radius: 3px;
  }
  .accordion-item.is-open .accordion-code { background: rgba(22,46,37,0.1); color: var(--forest); }
  .accordion-name { font-size: var(--fs-14); font-weight: 600; color: var(--ink); }
  .accordion-trigger-right { display: flex; align-items: center; gap: 16px; }
  .accordion-amount {
    font-size: var(--fs-14);
    font-weight: 400;
    color: var(--forest);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .accordion-chevron {
    width: 16px; height: 16px;
    color: var(--text-muted);
    transition: transform var(--t-med);
    flex-shrink: 0;
  }
  .accordion-item.is-open .accordion-chevron { transform: rotate(180deg); color: var(--forest); }
  .accordion-body {
    display: none;
    border-top: 1px solid var(--grey-line);
    background: var(--paper);
  }
  .accordion-item.is-open .accordion-body { display: block; }

  /* Item metadata inside accordion */
  .item-meta {
    display: flex;
    gap: 24px;
    padding: 14px 20px;
    background: var(--grey-soft);
    border-bottom: 1px solid var(--grey-line);
  }
  .item-meta-cell { text-align: center; }
  .item-meta-cell strong { display: block; font-size: var(--fs-11); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 3px; }
  .item-meta-cell span { font-size: var(--fs-14); font-weight: 600; color: var(--ink); }
  .metal-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: var(--r-pill);
    font-size: var(--fs-11);
    font-weight: 700;
  }
  .metal-badge.gold   { background: rgba(249,218,71,0.18); color: #7a5c00; }
  .metal-badge.silver { background: rgba(213,213,213,0.35); color: #5a5a5a; }
  .metal-badge-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
  .metal-badge.gold .metal-badge-dot   { background: #f9da47; border: 1px solid rgba(0,0,0,0.1); }
  .metal-badge.silver .metal-badge-dot { background: #d5d5d5; }

  /* Daily cost table inside accordion */
  .daily-table-wrap { overflow-x: auto; padding: 0 20px 20px; }
  .daily-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    min-width: 520px;
  }
  .daily-table thead th {
    text-align: left;
    font-size: var(--fs-11);
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 10px 8px;
    border-bottom: 1px solid var(--grey-line);
    white-space: nowrap;
  }
  .daily-table thead th:not(:first-child):not(:nth-child(2)) { text-align: right; }
  .daily-table td {
    padding: 7px 10px;
    border-bottom: 1px solid rgba(228,225,232,0.5);
    color: var(--ink);
  }
  .daily-table td:not(:first-child):not(:nth-child(2)) { text-align: right; white-space: nowrap; }
  .daily-table tr:last-child td { border-bottom: none; }
  .daily-table tr:hover td { background: rgba(22,46,37,0.02); }
  /* Rate change rows */
  .daily-table .rate-row td {
    background: rgba(22,46,37,0.04);
    font-size: 11px;
    color: var(--forest);
    border-bottom: 1px solid rgba(22,46,37,0.1);
    padding: 6px 10px;
  }
  .daily-table .rate-row td strong { font-weight: 700; }

  /* Truncation note */
  .table-truncation-note {
    font-size: var(--fs-12);
    color: var(--text-muted);
    padding: 8px 10px;
    border-top: 1px dashed var(--grey-line);
    font-style: italic;
  }
  /* ============ ACCENT RULE ============ */
  .accent-rule {
    display: block; height: 2px; width: 100%; border: none;
    background: linear-gradient(90deg,
      var(--forest) 0, var(--forest) 48px,
      var(--grey-line) 48px, var(--grey-line) 100%);
    margin: 0 0 20px;
  }

  /* Opslagkosten order-detail: responsive */
  @media (max-width: 900px) {
    .invoice-header { grid-template-columns: 1fr; gap: 18px; }
  }

  /* Opslagkosten order-detail: verticale ritmiek in de content */
  .ok-order { display: flex; flex-direction: column; gap: 20px; }