/* =====================================================================
   Table Styles — tokenized, styled to match the Page design system.
   Works with KyteTable (DataTables). Neutralises Bootstrap/DataTables
   defaults so the design tokens win in both light and dark.
   ===================================================================== */

.table-container{ background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow); border:1px solid var(--border); overflow:hidden; margin-bottom:32px; }
.table-header{ padding:20px 26px; border-bottom:1px solid var(--border); background:var(--surface-2); display:flex; align-items:center; gap:12px; }
.table-title{ font-family:var(--serif); font-size:17px; font-weight:700; color:var(--ink); margin:0; display:flex; align-items:center; gap:10px; }
.table-title i{ color:var(--accent); font-size:15px; }

/* ---- DataTables wrapper ---- */
.dataTables_wrapper{ background:var(--surface); color:var(--ink-2); padding:0; }

/* top controls */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter{ padding:16px 26px 6px; font-size:13px; color:var(--muted); }
.dataTables_wrapper .dataTables_filter{ text-align:right; }
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label{ display:inline-flex; align-items:center; gap:8px; font-weight:500; color:var(--muted); }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
    width:auto; display:inline-block; margin:0;
    background:var(--field); color:var(--ink);
    border:1px solid var(--border); border-radius:var(--r-sm);
    padding:9px 13px; font-size:13.5px; transition:border-color .15s, box-shadow .15s;
}
.dataTables_wrapper .dataTables_filter input{ min-width:240px; }
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.dataTables_wrapper .dataTables_filter input::placeholder{ color:var(--faint); }

/* ---- the table ---- */
.table-container table.table,
.table-container table.dataTable{
    --bs-table-bg:transparent; --bs-table-color:var(--ink-2);
    --bs-table-striped-bg:transparent; --bs-table-hover-bg:var(--surface-2);
    --bs-table-border-color:var(--border);
    background-color:transparent !important; color:var(--ink-2);
    border-collapse:collapse; width:100% !important; margin:0 !important;
    font-variant-numeric:tabular-nums;
}
.table-container table.dataTable thead th{
    text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
    color:var(--faint); font-weight:700; padding:14px 20px;
    border-bottom:1px solid var(--border); background:transparent; white-space:nowrap;
}
.table-container table.dataTable tbody td{
    padding:15px 20px; border-bottom:1px solid var(--border);
    font-size:14px; color:var(--ink-2); background:transparent; vertical-align:middle;
}
.table-container table.dataTable tbody tr{ background:transparent; transition:background .12s; }
.table-container table.dataTable tbody tr:hover{ background:var(--surface-2); cursor:pointer; }
.table-container table.dataTable tbody tr:last-child td{ border-bottom:0; }
/* comfortable edge padding so content isn't flush to the card */
.table-container table.dataTable thead th:first-child,
.table-container table.dataTable tbody td:first-child{ padding-left:26px; }
.table-container table.dataTable thead th:last-child,
.table-container table.dataTable tbody td:last-child{ padding-right:26px; }
/* subdue DataTables sort arrows */
table.dataTable thead th.sorting:before, table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:before, table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:before, table.dataTable thead th.sorting_desc:after{ opacity:.3; }

/* ---- bottom controls ---- */
.dataTables_wrapper .dataTables_info{ padding:14px 26px; color:var(--muted); font-size:12.5px; }
.dataTables_wrapper .dataTables_paginate{ padding:12px 22px; }
.dataTables_wrapper .dataTables_paginate .paginate_button{
    color:var(--ink-2) !important; background:transparent !important; border:1px solid transparent !important;
    border-radius:var(--r-sm) !important; padding:6px 12px !important; margin:0 2px !important; font-size:13px; min-width:36px; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
    background:var(--surface-3) !important; border-color:var(--border) !important; color:var(--ink) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
    background:var(--brand) !important; border-color:var(--brand) !important; color:var(--brand-ink) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover{ opacity:.4; background:transparent !important; border-color:transparent !important; color:var(--faint) !important; }

/* =====================================================================
   Reusable cell helpers — mirror the mockup. Use inside DataTables
   column render() callbacks.
   ===================================================================== */
.t-lead{ display:flex; align-items:center; gap:12px; }
.t-badge{ width:40px; height:40px; border-radius:11px; background:var(--accent-soft); color:var(--accent-strong);
    display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; font-size:15px; flex:none; }
.t-info b{ font-weight:600; color:var(--ink); display:block; line-height:1.25; }
.t-info span{ font-size:12px; color:var(--faint); }
.t-sub{ color:var(--faint); font-size:12px; }
.num{ text-align:right; font-variant-numeric:tabular-nums; }
.pos{ color:var(--good); font-weight:600; }
.neg{ color:var(--crit); font-weight:600; }

.chip{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:20px; letter-spacing:.02em; }
.chip--accent{ background:var(--accent-soft); color:var(--accent-strong); }
.chip--good{ background:var(--good-soft); color:var(--good); }
.chip--warn{ background:var(--warn-soft); color:var(--warn); }
.chip--crit{ background:var(--crit-soft); color:var(--crit); }
.chip--muted{ background:var(--surface-3); color:var(--muted); }

.t-bar{ display:inline-block; width:70px; height:6px; border-radius:5px; background:var(--surface-3); overflow:hidden; vertical-align:middle; margin-right:8px; }
.t-bar > span{ display:block; height:100%; background:var(--accent); border-radius:5px; }