/* ============================================================================
   Hub Data-Table design system  —  ONE reusable listing skin for the whole app.
   Consolidates the ~40-line txn/ledger skin that was copy-pasted inline across
   every seller/buyer report page (and the admin/partials/txn_table_style.php
   partial) into a single cached stylesheet. Tokens derive from the EXISTING
   global DataTable skin in custom.css (the "BSNL SIM-table" aesthetic) so the
   server-GET report pages and the DataTables pages read as one product.

   No new brand. No gradients. Accent colour is reserved for status + amount
   semantics only. Pairs with the money() / fmtDateTime() / status_badge()
   PHP presenters and the shared dt_empty partial.
   ============================================================================ */

:root {
    --dt-surface:      #ffffff;
    --dt-border:       #e6ebf1;   /* card / table outer hairline           */
    --dt-border-soft:  #eef1f5;   /* row separators                        */
    --dt-radius:       10px;
    --dt-head-bg:      #f7f9fc;
    --dt-head-color:   #7b8593;
    --dt-body-color:   #47525f;
    --dt-muted:        #98a2b3;
    --dt-hover:        #f8fafd;
    --dt-control-bd:   #dfe3e8;
    --dt-font:         13px;
    --dt-font-compact: 12px;
    --dt-pad-y:        9px;
    --dt-pad-x:        12px;

    /* status semantics — single source of truth (AA-contrast dot+label) */
    --st-success:  #0f7a4d;
    --st-danger:   #c5342c;
    --st-warning:  #a76500;
    --st-info:     #2563c4;
    --st-muted:    #6b7480;
    --st-primary:  #1457a3;
}

/* ---- page header ---------------------------------------------------------- */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.page-header__titles { min-width: 0; }
.page-header__title {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    color: #1f2733;
}
.page-header__crumb {
    font-size: 12px;
    color: var(--dt-muted);
    margin-top: 3px;
}
.page-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.page-header__count {
    font-size: 12px;
    font-weight: 600;
    color: #4f5662;
    background: #eef2f7;
    border-radius: 999px;
    padding: 4px 11px;
}

/* ---- filter bar ----------------------------------------------------------- */
.filter-bar { margin-bottom: 16px; }
.filter-bar .form-label {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--dt-head-color);
    margin-bottom: 5px;
}
.filter-bar .form-control,
.filter-bar .form-select {
    height: 38px;
    border-radius: 8px;
    border: 1px solid var(--dt-control-bd);
    font-size: 13px;
}
.filter-bar .form-control:focus,
.filter-bar .form-select:focus {
    border-color: var(--role-accent, #2b8fc7);
    box-shadow: 0 0 0 3px rgba(43, 143, 199, .12);
}
.filter-bar__actions {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.filter-bar__actions .btn { height: 38px; border-radius: 8px; }
/* active-filter indicator */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--role-accent-text, #1457a3);
    background: var(--role-accent-soft, #edf5ff);
    border: 1px solid var(--role-accent-border, #bcd8ff);
    border-radius: 999px;
    padding: 3px 10px;
}
.filter-chip__x { cursor: pointer; opacity: .7; text-decoration: none; }
.filter-chip__x:hover { opacity: 1; }

/* ---- the table ------------------------------------------------------------ */
.data-table {
    border: 1px solid var(--dt-border);
    border-radius: var(--dt-radius);
    overflow-x: auto;               /* wide money tables scroll inside their box */
    background: var(--dt-surface);
}
.data-table > table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}
.data-table thead th {
    background: var(--dt-head-bg);
    border: 0;
    border-bottom: 1px solid #dfe4ea;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .035em;
    color: var(--dt-head-color);
    white-space: nowrap;
    padding: var(--dt-pad-y) var(--dt-pad-x);
    position: sticky;               /* header stays visible on tall lists */
    top: 0;
    z-index: 2;
}
.data-table tbody td {
    vertical-align: middle;
    padding: var(--dt-pad-y) var(--dt-pad-x);
    border: 0;
    border-top: 1px solid var(--dt-border-soft);
    font-size: var(--dt-font);
    line-height: 1.4;
    color: var(--dt-body-color);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.data-table tbody tr:first-child td { border-top: 0; }
.data-table tbody tr:hover td { background: var(--dt-hover); }

.data-table--compact thead th,
.data-table--compact tbody td { font-size: var(--dt-font-compact); padding: 7px 9px; }

/* semantic cell helpers */
.cell-id     { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; color: #364152; }
.cell-amount { text-align: right; font-weight: 600; white-space: nowrap; }
.cell-amount--neg { color: var(--st-danger); }
.cell-time   { display: inline-flex; flex-direction: column; line-height: 1.25; }
.cell-time__d { font-weight: 600; color: #3a4552; }
.cell-time__t { font-size: 11px; color: var(--dt-muted); font-variant-numeric: tabular-nums; }
.cell-wrap   { white-space: normal; max-width: 260px; }
.cell-muted  { color: var(--dt-muted); }

/* soft row tints for at-a-glance state (kept very subtle) */
.row-success td { background: rgba(15, 122, 77, .035); }
.row-danger  td { background: rgba(197, 52, 44, .035); }
.row-warning td { background: rgba(167, 101, 0, .05); }

/* ---- status badge (dot + label, one vocabulary everywhere) ---------------- */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1;
    white-space: nowrap;
}
.status-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}
.status-badge--success { color: var(--st-success); }
.status-badge--danger  { color: var(--st-danger); }
.status-badge--warning { color: var(--st-warning); }
.status-badge--info    { color: var(--st-info); }
.status-badge--muted   { color: var(--st-muted); }
.status-badge--primary { color: var(--st-primary); }

/* ---- row action menu (kebab) — replaces 3-5 button sprays ----------------- */
.dt-actions { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dt-actions .btn-kebab {
    --bs-btn-padding-x: .4rem;
    --bs-btn-padding-y: .25rem;
    border: 1px solid var(--dt-control-bd);
    border-radius: 8px;
    background: #fff;
    color: #566072;
    line-height: 1;
}
.dt-actions .btn-kebab:hover { background: #f4f6f9; color: #2b3442; }
.dt-actions .dropdown-menu {
    --bs-dropdown-min-width: 190px;
    border: 1px solid var(--dt-border);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(20, 30, 48, .12);
    padding: 6px;
}
.dt-actions .dropdown-item { border-radius: 7px; font-size: 13px; padding: 7px 10px; }
.dt-actions .dropdown-item .ti { width: 16px; }
.dt-actions .dropdown-divider { margin: 5px 2px; }
.dt-actions .dropdown-item--danger { color: var(--st-danger); }
.dt-actions .dropdown-item--danger:hover { background: #fdecea; color: var(--st-danger); }

/* ---- states: empty / no-results / error / loading ------------------------- */
.dt-state { text-align: center; padding: 40px 16px; color: var(--dt-muted); }
.dt-state__icon { font-size: 30px; line-height: 1; opacity: .55; margin-bottom: 8px; display: block; }
.dt-state__title { font-size: 14px; font-weight: 600; color: #566072; }
.dt-state__msg { font-size: 13px; margin-top: 3px; }
.dt-state__cta { margin-top: 12px; }
.dt-state--error .dt-state__icon,
.dt-state--error .dt-state__title { color: var(--st-danger); }

/* skeleton loading rows — no layout shift, no spinner jump */
.dt-skel td { padding: var(--dt-pad-y) var(--dt-pad-x); }
.dt-skel span {
    display: block;
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, #eef1f5 25%, #e3e8ee 37%, #eef1f5 63%);
    background-size: 400% 100%;
    animation: dt-shimmer 1.2s ease-in-out infinite;
}
@keyframes dt-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .dt-skel span { animation: none; } }

/* ---- responsive: no blind desktop-shrink ---------------------------------- */
@media (max-width: 992px) {
    .filter-bar .filter-bar__col { margin-bottom: 8px; }
    .data-table--compact thead th,
    .data-table--compact tbody td { font-size: 11px; }
    /* secondary columns fold away on narrow screens; primary columns stay */
    .dt-col-secondary { display: none; }
    .page-header { margin-bottom: 12px; }
}
@media (max-width: 576px) {
    .page-header__actions { width: 100%; }
    .filter-bar__actions { width: 100%; }
    .filter-bar__actions .btn { flex: 1 1 auto; }
}