/* datatable.css — the Filament 5 "skin" for the shared SSR datatable widget.
*
* Plan of record: _plan/2026-06-15-datatable-filament-parity.md (Phase 1, §4, S-8).
* Visual target: _doc/datatable/ screenshots (Filament 5 Tables overview).
*
* SCOPING — the whole sheet is scoped under `.datatable-skin`, a wrapper class
* the handler opts INTO (dt_region($html, $id, true) → adds it to #dt-region).
* A page that does NOT opt in renders byte-identical to before, even though this
* file is loaded globally: every rule below needs the `.datatable-skin` ancestor
* to match, so the 5 un-converted live pages are untouched. The `#content`
* prefix (+ the extra `.datatable-skin` class) gives these rules higher
* specificity than cms.css's `#content .foo` table/btn/tag rules, so they win;
* loaded AFTER cms.css, unlayered, so equal-specificity ties also go to us.
*
* THEME — the shell drives light/dark via a class on (html.dark /
* html.light, set by the FOUC script in shell.html). The Filament look is a
* FIXED amber-on-slate palette that stays inside the table and never repaints
* the blue OKLCH shell: dark slate is the base (the screenshots are dark);
* `html.light .datatable-skin` flips the few tokens that differ. The shell's
* accent scheme (Ocean/Crimson/…) does NOT bleed in — these tokens override it
* locally. Tailwind values per the plan §4 (amber-500 / slate-900 / emerald /
* rose / sky / orange), marked there for later demo-tuning (D-2).
*
* CLASS VOCABULARY — this ships the FULL canonical class set now (S-8),
* including the modal / filter-popover / column-toggle / drag-handle / row-tint
* classes that Phases 2–5 will emit, so those phases are pure handler work
* against a ready skin and never re-invent a class name. Phase 1 emits the
* header / toolbar / table / badge / ring / action / footer / pager subset.
*/
/* ───────────────────────────── tokens ───────────────────────────── */
#content .datatable-skin{
--dt-accent:#f59e0b; /* amber-500 — primary, active page, edit, "New" pill */
--dt-accent-hover:#d97706; /* amber-600 */
--dt-accent-fg:#451a03; /* amber-950 — dark text ON the amber pill */
--dt-card:#0f172a; /* slate-900 — card / panel bg */
--dt-page:#020617; /* slate-950 — page bg behind the card */
--dt-strip:#1e293b; /* slate-800 — header / toolbar / thead strip */
--dt-row-hover:rgba(255,255,255,.03);
--dt-border:rgba(255,255,255,.08);
--dt-text:#f8fafc; /* slate-50 */
--dt-muted:#94a3b8; /* slate-400 */
--dt-info:#0ea5e9; /* sky-500 */
--dt-success:#10b981; /* emerald-500 */
--dt-warning:#f97316; /* orange-500 */
--dt-danger:#f43f5e; /* rose-500 */
--dt-r-lg:.75rem; --dt-r-md:.5rem; --dt-r-sm:.375rem;
}
/* .datatable-skin is the TOKEN SCOPE only (it rides the persistent #dt-region so
the skin survives partial swaps). The card chrome lives on .dt-card below, which
dt_render wraps around ONLY the datatable — so a handler can append other content
to the region (inline edit forms, a gallery's image tiles) and it keeps its own
styling, outside the card. */
html.light #content .datatable-skin{
--dt-accent:#d97706; /* amber-600 reads better on white */
--dt-accent-hover:#b45309; /* amber-700 */
--dt-accent-fg:#ffffff;
--dt-card:#ffffff;
--dt-page:#f8fafc;
--dt-strip:#f1f5f9; /* slate-100 */
--dt-row-hover:rgba(2,6,23,.03);
--dt-border:rgba(2,6,23,.09);
--dt-text:#0f172a;
--dt-muted:#64748b; /* slate-500 */
--dt-info:#0284c7;
--dt-success:#059669;
--dt-warning:#ea580c;
--dt-danger:#e11d48;
}
/* The datatable's Filament card — dt_render (skin path) wraps its whole output in
.dt-card, so the card chrome is scoped to the TABLE, never the whole region. */
#content .datatable-skin .dt-card{
background:var(--dt-card);
color:var(--dt-text);
border:1px solid var(--dt-border);
border-radius:var(--dt-r-lg);
overflow:hidden;
box-shadow:0 1px 3px rgba(0,0,0,.35),0 8px 28px -12px rgba(0,0,0,.45);
}
html.light #content .datatable-skin .dt-card{
box-shadow:0 1px 2px rgba(2,6,23,.06),0 8px 24px -16px rgba(2,6,23,.18);
}
/* Neutralise ONLY the inner table's .card scroll wrapper (never other .card
content a handler appends to the region) so the table sits flush in .dt-card. */
#content .datatable-skin .datatable-scroll-wrapper{
background:none;border:0;border-radius:0;box-shadow:none;
-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;overflow-x:auto;
}
#content .datatable-skin a{color:var(--dt-accent);text-decoration:none}
#content .datatable-skin a:hover{color:var(--dt-accent-hover);text-decoration:none}
#content .datatable-skin svg{width:1.05em;height:1.05em;vertical-align:-.15em;flex:none}
/* ───────────────────────────── header band ───────────────────────────── */
#content .datatable-skin .dt-header{
display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
padding:1.15rem 1.35rem;
}
#content .datatable-skin .dt-title{
font-size:1.4rem;line-height:1.2;font-weight:700;letter-spacing:-.01em;
color:var(--dt-text);margin:0;
}
/* .dt-count — a forward-declared hook (S-8). Filament's header (the visual
target) shows NO count chip; the row count lives in the footer range label
("Showing X to Y of Z results"). dt_header_band deliberately omits it; a
handler that wants an inline count can emit . */
#content .datatable-skin .dt-count{
font-size:.8rem;font-weight:600;color:var(--dt-muted);
margin-inline-start:.5rem;vertical-align:.1em;
}
#content .datatable-skin .dt-subtitle{
margin:.3rem 0 0;font-size:.9rem;color:var(--dt-muted);
}
#content .datatable-skin .dt-header-actions{display:flex;gap:.5rem;align-items:center;flex:none}
/* ───────────────────────────── buttons ───────────────────────────── */
#content .datatable-skin .dt-btn{
display:inline-flex;align-items:center;gap:.4rem;
font:inherit;font-size:.86rem;font-weight:600;line-height:1;
padding:.5rem .85rem;border-radius:var(--dt-r-md);
border:1px solid transparent;cursor:pointer;white-space:nowrap;
transition:background .14s ease,border-color .14s ease,color .14s ease,filter .14s ease;
}
#content .datatable-skin .dt-btn-primary{background:var(--dt-accent);color:var(--dt-accent-fg);border-color:var(--dt-accent)}
#content .datatable-skin .dt-btn-primary:hover{background:var(--dt-accent-hover);color:var(--dt-accent-fg);filter:brightness(1.02)}
#content .datatable-skin .dt-btn-ghost{background:transparent;color:var(--dt-text);border-color:var(--dt-border)}
#content .datatable-skin .dt-btn-ghost:hover{background:var(--dt-strip);color:var(--dt-text)}
#content .datatable-skin .dt-btn-danger{background:var(--dt-danger);color:#fff;border-color:var(--dt-danger)}
#content .datatable-skin .dt-btn-danger:hover{filter:brightness(1.06);color:#fff}
/* ───────────────────────────── toolbar band ───────────────────────────── */
/* The widget's search form (class .datatable-toolbar) becomes the toolbar band:
a strip with the search box + icon buttons (filter funnel / column toggle)
right-aligned. .dt-toolbar is the skin-emitted wrapper; .datatable-toolbar is
the historic form class — both styled so either renders correctly. */
#content .datatable-skin .dt-toolbar,
#content .datatable-skin form.datatable-toolbar{
display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
margin:0;padding:.7rem 1.35rem;
background:var(--dt-strip);border-top:1px solid var(--dt-border);
}
#content .datatable-skin .dt-toolbar-left{display:flex;align-items:center;gap:.5rem}
#content .datatable-skin .dt-toolbar-right{display:flex;align-items:center;gap:.5rem;margin-inline-start:auto}
/* search box: a pill with a leading magnifier. Under the skin the widget wraps
the in .dt-search-wrap; on the historic form the bare input is styled
to match so a non-wrapped search still looks right. */
#content .datatable-skin .dt-search-wrap{position:relative;display:inline-flex;align-items:center;min-width:13rem}
#content .datatable-skin .dt-search-wrap svg{position:absolute;left:.6rem;color:var(--dt-muted);pointer-events:none}
#content .datatable-skin .dt-search-wrap input,
#content .datatable-skin form.datatable-toolbar input[type=search],
#content .datatable-skin form.datatable-toolbar input:not([type]){
width:100%;background:var(--dt-card);color:var(--dt-text);
border:1px solid var(--dt-border);border-radius:var(--dt-r-md);
padding:.5rem .7rem .5rem 2rem;font:inherit;font-size:.88rem;
}
#content .datatable-skin .dt-search-wrap input:focus,
#content .datatable-skin form.datatable-toolbar input:focus{
outline:none;border-color:var(--dt-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--dt-accent) 22%,transparent);
}
/* search submit + clear sit quietly next to the box */
#content .datatable-skin form.datatable-toolbar .btn{font-size:.84rem}
/* icon buttons (funnel / column-toggle); count badge on the funnel */
#content .datatable-skin .dt-iconbtn{
position:relative;display:inline-flex;align-items:center;justify-content:center;
width:2.1rem;height:2.1rem;border-radius:var(--dt-r-md);
background:transparent;border:1px solid transparent;color:var(--dt-muted);cursor:pointer;
}
#content .datatable-skin .dt-iconbtn:hover{background:var(--dt-card);color:var(--dt-text);border-color:var(--dt-border)}
#content .datatable-skin .dt-badge-count{
position:absolute;top:-.3rem;right:-.3rem;min-width:1.05rem;height:1.05rem;
padding:0 .28rem;border-radius:999px;background:var(--dt-accent);color:var(--dt-accent-fg);
font-size:.66rem;font-weight:700;line-height:1.05rem;text-align:center;
}
/* ───────────────────────────── table ───────────────────────────── */
#content .datatable-skin table.datatable{width:100%;border-collapse:collapse;font-size:.9rem}
#content .datatable-skin .datatable thead tr{background:var(--dt-strip)}
#content .datatable-skin .datatable th{
text-align:left;padding:.7rem .9rem;color:var(--dt-muted);
font-size:.78rem;font-weight:700;text-transform:none;letter-spacing:0;
border-top:1px solid var(--dt-border);border-bottom:1px solid var(--dt-border);
white-space:nowrap;opacity:1;
}
#content .datatable-skin .datatable th.sortable-th{padding:0}
#content .datatable-skin .datatable th.sortable-th a{
display:inline-flex;align-items:center;gap:.3rem;color:var(--dt-muted);
padding:.7rem .9rem;font-weight:700;
}
#content .datatable-skin .datatable th.sortable-th a:hover{color:var(--dt-text)}
#content .datatable-skin .datatable th[aria-sort] a{color:var(--dt-text)}
#content .datatable-skin .datatable .dt-caret{color:var(--dt-accent);font-size:.9em}
#content .datatable-skin .datatable td{
padding:.72rem .9rem;border-bottom:1px solid var(--dt-border);color:var(--dt-text);vertical-align:middle;
}
#content .datatable-skin .datatable tbody tr{transition:background .12s ease}
#content .datatable-skin .datatable tbody tr:hover{background:var(--dt-row-hover)}
#content .datatable-skin .datatable tbody tr:last-child td{border-bottom:0}
#content .datatable-skin .datatable td .muted,
#content .datatable-skin .datatable .dt-desc{color:var(--dt-muted)}
#content .datatable-skin .datatable .dt-desc{display:block;font-size:.8rem;margin-top:.1rem}
#content .datatable-skin .datatable td strong{font-weight:600;color:var(--dt-text)}
/* alignment helpers — forward-declared hooks (S-8) for a future `align` col opt
(deferred; the screenshots are all left-aligned). Emit on