/* ============================================================
   data-table.css — Shared table system
   Three table contexts, one visual language:
     .dt       — list page table (min-width 860px, mobile → .dt-mobile cards)
     .dt-sm    — compact detail/dashboard (no min-width, always visible)
     .dt-line  — form entry table (min-width 960px, mobile → .dt-line-card)
   ============================================================ */


/* ── Wrappers — shared horizontal scroll ─────────────────── */
.dt-wrap,
.dt-sm-wrap,
.dt-line-wrap {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--neutral-stroke-rest, #d1d1d1) transparent;
}


/* ── Table elements ───────────────────────────────────────── */
.dt,
.dt-sm,
.dt-line {
    font-size: small;
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.dt      { min-width: 860px; }
.dt-line { min-width: 960px; }
/* .dt-sm: no min-width — compact, always fits container */


/* ── Header cells ─────────────────────────────────────────── */
.dt thead th,
.dt-sm thead th,
.dt-line thead th {
    padding: 8px 10px;
    text-align: start;
    font-size: smaller;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.45px;
    color: var(--neutral-foreground-hint, #717171);
    background: var(--neutral-layer-1, #fbfbfb);
    border-bottom: 1px solid var(--neutral-stroke-rest, #d1d1d1);
    white-space: nowrap;
    user-select: none;
}

/* Right-aligned header */
.dt thead th.dt-end,
.dt-sm thead th.dt-end,
.dt-line thead th.dt-end { text-align: end; }

.dt thead td.dt-end,
.dt-sm thead td.dt-end,
.dt-line thead td.dt-end,
.dt tfoot td.dt-end,
.dt-sm tfoot td.dt-end,
.dt-line tfoot td.dt-end { text-align: end; }


/* ── Sortable column header (list tables only) ────────────── */
.dt-sortable {
    cursor: pointer;
    transition: background 80ms ease, color 80ms ease;
}

.dt-sortable:hover {
    background: var(--neutral-fill-stealth-hover, #ebebeb);
    color: var(--neutral-foreground-rest, #242424);
}

.dt-sort-icon {
    display: inline-block;
    margin-left: 4px;
    font-size: 12px;
    opacity: 0.35;
    vertical-align: middle;
    line-height: 1;
}

.dt-sortable.dt-sorted .dt-sort-icon {
    opacity: 1;
    color: var(--accent-fill-rest, #0078d4);
}


/* ── Body rows ────────────────────────────────────────────── */
.dt tbody tr,
.dt-sm tbody tr,
.dt-line-row {
    border-bottom: 1px solid var(--neutral-stroke-rest, #e8e8e8);
    transition: background 60ms ease;
}

.dt tbody tr:last-child,
.dt-sm tbody tr:last-child,
.dt-line-row:last-child { border-bottom: none; }

.dt tbody tr:hover,
.dt-sm tbody tr:hover,
.dt-line-row:hover { background: var(--neutral-fill-stealth-hover, #f5f5f5); }


/* ── Body cells ───────────────────────────────────────────── */
.dt tbody td,
.dt-sm tbody td,
.dt-line-row td {
    padding: 7px 10px;
    vertical-align: middle;
    white-space: nowrap;
}

.dt tbody td.dt-end,
.dt-sm tbody td.dt-end,
.dt-line-row td.dt-end { text-align: end; }

.dt tbody td.dt-wrap-text,
.dt-sm tbody td.dt-wrap-text {
    white-space: normal;
    min-width: 120px;
}


/* ── Monospace for numbers ────────────────────────────────── */
.dt-mono { letter-spacing: -0.03em; }


/* ── Links ────────────────────────────────────────────────── */
.dt-link {
    color: var(--accent-fill-rest, #0078d4);
    text-decoration: none;
    letter-spacing: -0.03em;
}

.dt-link:hover {
    text-decoration: underline;
    opacity: 0.88;
}


/* ── Status badges ────────────────────────────────────────── */
.dt-badge {
    display: inline-block;
    white-space: nowrap;
    line-height: 1.5;
}

.dt-badge-ok { color: var(--colorPaletteGreenForeground1, #107c10); }
.dt-badge-ok::before { content: "✓ "; font-size: 12px; }

.dt-badge-pending { color: var(--neutral-foreground-hint, #9a9a9a); }
.dt-badge-pending::before { content: "· "; font-weight: 700; }


/* ── Amount & semantic color helpers ─────────────────────── */
.dt-tax  { color: var(--colorPaletteYellowForeground1, #c57a00); }
.dt-wht  { color: var(--colorPaletteRedForeground1, #d13438); }
.dt-hint { color: var(--neutral-foreground-hint, #898989); }
.dt-bold { font-weight: 500; }

.dt tbody td.dt-success,
.dt-sm tbody td.dt-success { color: var(--colorPaletteGreenForeground1, #107c10); }

.dt tbody td.dt-error,
.dt-sm tbody td.dt-error   { color: var(--colorPaletteRedForeground1, #d13438); }

.dt tbody td.dt-warn,
.dt-sm tbody td.dt-warn    { color: var(--colorPaletteYellowForeground1, #c57a00); }


/* ── Subtotal row ─────────────────────────────────────────── */
.dt .dt-subtotal-row td,
.dt-sm .dt-subtotal-row td {
    border-top: 2px solid var(--neutral-stroke-rest);
    background: var(--neutral-fill-subtle);
    font-weight: 600;
    padding: 8px 10px;
}

/* Sub-row (expanded detail inside aging / GL tables) */
.dt tr.dt-sub-row > td {
    background: var(--neutral-fill-subtle);
    color: var(--neutral-foreground-hint);
    font-size: 13px;
}

.dt-sub-indent { padding-left: 24px !important; }
.dt-italic      { font-style: italic; }


/* ── Action button strip ──────────────────────────────────── */
.dt-actions {
    display: flex;
    gap: 3px;
    justify-content: flex-end;
    align-items: center;
}


/* ============================================================
   PAGINATION BAR  (.dt list tables)
   ============================================================ */
.dt-pager {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 16px 8px 6px;
    flex-wrap: wrap;
}

.dt-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 24px;
    padding: 0 7px;
    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
    border-radius: 4px;
    background: transparent;
    color: var(--neutral-foreground-rest, #242424);
    font-size: 13px;
    cursor: pointer;
    transition: background 80ms ease, color 80ms ease;
    line-height: 1;
}

.dt-pager-btn:hover:not(:disabled) { background: var(--neutral-fill-stealth-hover, #ebebeb); }
.dt-pager-btn:disabled { opacity: 0.35; cursor: default; }

.dt-pager-btn.dt-pager-active {
    background: var(--accent-fill-rest, #0078d4);
    color: var(--foreground-on-accent-rest, #fff);
    border-color: var(--accent-fill-rest, #0078d4);
    font-weight: 600;
}

.dt-pager-info {
    margin-left: 8px;
    font-size: 13px;
    color: var(--neutral-foreground-hint, #717171);
}

/* Mobile pager: full width, prev/info/next spread across the bar */
.dt-pager-mobile {
    width: 100%;
    justify-content: space-between;
    padding: 8px 0 4px;
}

.dt-pager-mobile .dt-pager-btn {
    flex: 1;
    max-width: 90px;
}

.dt-pager-mobile .dt-pager-info {
    margin-left: 0;
    text-align: center;
    flex: 1;
}

.dt-pager-size {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--neutral-foreground-hint, #717171);
}

    .dt-pager-size select {
        font-size: 13px;
        border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
        border-radius: 4px;
        padding: 2px 6px;
        background: var(--neutral-fill-input-rest, #fff);
        color: var(--neutral-foreground-rest, #242424);
        color-scheme: inherit;
        cursor: pointer;
    }

.dt-pager-size select option {
    background: var(--neutral-layer-1, #fff);
    color: var(--neutral-foreground-rest, #242424);
}


/* ============================================================
   RESPONSIVE — .dt list tables
   Wide: HTML table. Narrow (< 960px): stacked .dt-mobile cards.
   ============================================================ */
@media (max-width: 959px) {
    .dt-wrap          { display: none; }
    .dt-pager-desktop { display: none; }
    .dt-mobile        { display: flex; }
}

@media (min-width: 960px) {
    .dt-pager-mobile { display: none; }
    .dt-mobile       { display: none; }
}

/* Mobile cards container */
.dt-mobile {
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
}

/* Individual card */
.dt-card {
    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
    border-radius: 6px;
    padding: 11px 13px;
}

.dt-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 5px;
}

.dt-card-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex-shrink: 0;
}

.dt-card-meta  { color: var(--neutral-foreground-rest, #242424); margin-bottom: 2px; }
.dt-card-hint  { color: var(--neutral-foreground-hint, #898989); margin-bottom: 2px; }

/* Label-value grid for amounts */
.dt-card-amounts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 12px;
    margin-top: 8px;
    align-items: baseline;
}

.dt-card-alabel { color: var(--neutral-foreground-hint, #898989); white-space: nowrap; }
.dt-card-aval   { text-align: end; }

.dt-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
    margin-top: 10px;
}


/* ============================================================
   RESPONSIVE — .dt-line form entry tables
   Wide: HTML table. Narrow (< 960px): stacked .dt-line-card.
   NOTE: .dt-line-cards base rule must come BEFORE the media query
   so the min-width:960px { display:none } wins in the cascade.
   ============================================================ */

/* Mobile entry cards container — default visible, hidden on wide by media query below */
.dt-line-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@media (max-width: 959px) {
    .dt-line-wrap  { display: none; }
}

@media (min-width: 960px) {
    .dt-line-cards { display: none; }
}

/* Stacked text helpers inside table cells */
.dt-line-name {
    display: block;
    font-weight: 500;
}

.dt-line-desc {
    display: block;
    font-size: 12px;
    color: var(--neutral-foreground-hint, #898989);
    line-height: 1.3;
    margin-top: 2px;
}

.dt-line-narration {
    display: block;
    font-size: 12px;
    color: var(--neutral-foreground-hint, #898989);
    font-style: italic;
    margin-top: 2px;
}

.dt-line-fcy {
    display: block;
    font-size: 12px;
    color: var(--neutral-foreground-hint, #898989);
    text-align: end;
}

/* Individual entry card */
.dt-line-card {
    border: 1px solid var(--neutral-stroke-rest, #d1d1d1);
    border-radius: 6px;
    padding: 12px 14px;
    font-size: small;
}

/* Card header: index · code · actions */
.dt-lc-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--neutral-stroke-rest, #e8e8e8);
}

.dt-lc-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--neutral-fill-stealth-rest, #f0f0f0);
    font-size: 12px;
    font-weight: 500;
    color: var(--neutral-foreground-hint, #898989);
    flex-shrink: 0;
}

.dt-lc-code {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dt-lc-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    margin-left: auto;
}

.dt-lc-name {
    font-weight: 500;
    margin: 6px 0 2px;
    line-height: 1.35;
    word-break: break-word;
}

.dt-lc-desc {
    font-size: 12px;
    color: var(--neutral-foreground-hint, #898989);
    margin: 0 0 8px;
    line-height: 1.35;
}

/* 2-col label/value grid for amounts */
.dt-lc-grid {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 4px 12px;
    margin-bottom: 8px;
    align-items: baseline;
}

.dt-lc-label { color: var(--neutral-foreground-hint, #898989); padding-top: 1px; }
.dt-lc-val   { word-break: break-word; }

/* Total row at card bottom */
.dt-lc-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid var(--neutral-stroke-rest, #e8e8e8);
}

.dt-lc-total .dt-lc-label {
    font-weight: 500;
    color: var(--neutral-foreground-rest, #242424);
}

/* Line narration (italic footer) */
.dt-lc-narration {
    font-size: 12px;
    color: var(--neutral-foreground-hint, #898989);
    font-style: italic;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--neutral-stroke-rest, #d1d1d1);
}

/* Tax / WHT section box */
.dt-lc-tax-section {
    margin: 8px 0;
    padding: 8px 10px;
    background: var(--neutral-fill-stealth-rest, #f5f5f5);
    border-radius: 4px;
    border: 1px solid var(--neutral-stroke-rest, #d1d1d1);
}

.dt-lc-section-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--neutral-foreground-hint, #898989);
    margin-bottom: 3px;
    margin-top: 6px;
}

.dt-lc-tax-section .dt-lc-section-title:first-child { margin-top: 0; }

.dt-lc-section-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
}


/* ============================================================
   SUMMARY TABLE  (dt-summary)
   Right-aligned totals, body font — no monospace.
   ============================================================ */
.dt-summary {
    width: 100%;
    max-width: 500px;
    margin-inline-start: auto;
    border-collapse: collapse;
}

.dt-summary td           { padding: 4px 0; vertical-align: baseline; }
.dt-sum-label            { color: var(--neutral-foreground-hint, #898989); text-align: start; padding-inline-end: 16px; }
.dt-sum-val              { text-align: end; }
.dt-sum-note             { font-size: 12px; color: var(--neutral-foreground-hint, #898989); font-style: italic; padding: 3px 0; }
.dt-sum-total-row        { border-top: 1px solid var(--neutral-stroke-rest, #d1d1d1); font-weight: 600; }
.dt-sum-total-label      { text-align: start; padding: 8px 0 4px; padding-inline-end: 16px; }
.dt-sum-total-val        { text-align: end; font-weight: 600; color: var(--accent-fill-rest, #0078d4); padding: 8px 0 4px; }
.dt-sum-fcy              { font-size: 12px; font-weight: 400; color: var(--neutral-foreground-hint, #898989); }
.dt-sum-net-row          { border-top: 1px solid var(--neutral-stroke-rest, #e8e8e8); }
.dt-sum-disclaimer       { font-size: 12px; color: var(--neutral-foreground-hint, #898989); margin: 8px 0 0; text-align: end; }