/* =====================================================================
   Kosmos+ Enterprise demo — inventory + drill-down page components (Scorpion).
   ADDITIVE ONLY. Loaded AFTER Johnny's canonical styles.css. Contains only
   the page-component styles his shared shell stylesheet does not define
   (toolbar, tabs, pager, breadcrumb, entity header, state banners, and the
   slide animation layered on his .drawer/.backdrop). Reuses his tokens +
   kit components (table.et, .badge/.b-*, .drawer, .kv, .metric). No rule
   here overrides a shared-shell rule.
   ===================================================================== */

/* breadcrumb (the drill-down trail) */
.crumbs { display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:13px; color:var(--ink-3); margin:0 0 4px; }
.crumbs a { color:var(--link); text-decoration:none; }
.crumbs a:hover { text-decoration:underline; }
.crumbs .sep { color:var(--border-strong); }
.crumbs b { color:var(--ink); font-weight:650; }

/* page heading */
.page-h { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.page-h h1 { font-size:clamp(21px,3vw,27px); line-height:1.1; letter-spacing:-.02em; margin:0; font-weight:720; }
.page-h .desc { color:var(--ink-2); font-size:14px; margin:4px 0 0; max-width:70ch; line-height:1.5; }

/* entity header (detail pages) */
.ent-head { display:flex; align-items:flex-start; gap:14px; }
.ent-head .mk { width:46px; height:46px; border-radius:11px; background:var(--brand); color:var(--on-brand); display:grid; place-items:center; font-weight:750; font-size:17px; flex:none; }
.ent-head .who h1 { font-size:20px; font-weight:700; margin:0; line-height:1.2; }
.ent-head .who .meta { color:var(--ink-2); font-size:13px; margin-top:3px; display:flex; flex-wrap:wrap; gap:6px 12px; }

/* two-column detail grid (kit's .chart-grid is analytics-only; this is the
   inventory detail equivalent — defined here so agent/project detail pages
   render two columns instead of a single stacked block). */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); }
@media (max-width:720px){ .grid-2 { grid-template-columns:1fr; } }

/* tabs */
.tabs { display:flex; gap:2px; flex-wrap:wrap; border-bottom:1px solid var(--border); margin-top:2px; }
.tab { font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; background:none; border:0; padding:9px 13px; color:var(--ink-2); border-bottom:2px solid transparent; margin-bottom:-1px; border-radius:6px 6px 0 0; }
.tab:hover { color:var(--ink); background:var(--surface-sunken); }
.tab[aria-selected="true"] { color:var(--brand); border-bottom-color:var(--brand); }
.tab:focus-visible { outline:2px solid var(--focus); outline-offset:-2px; }
.tabpane[hidden] { display:none; }

/* toolbar: search + filters + column select */
.toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:2px; }
.toolbar .search { position:relative; flex:1 1 220px; min-width:180px; }
.toolbar .search input { width:100%; font:inherit; font-size:13.5px; padding:8px 12px 8px 32px; border:1px solid var(--border-strong); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); }
.toolbar .search input:focus { outline:2px solid var(--focus); outline-offset:1px; border-color:var(--focus); }
.toolbar .search .mag { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--ink-3); font-size:14px; }
.toolbar select, .toolbar .colbtn { font:inherit; font-size:13px; font-weight:500; padding:8px 11px; border:1px solid var(--border-strong); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); cursor:pointer; }
.toolbar select:focus, .toolbar .colbtn:focus-visible { outline:2px solid var(--focus); outline-offset:1px; }
.toolbar .grow { flex:1; }
.toolbar .count { font-size:12.5px; color:var(--ink-3); }

/* column-select dropdown */
.coldd { position:relative; }
.coldd .menu { position:absolute; right:0; top:calc(100% + 6px); z-index:20; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow-2); padding:8px; min-width:200px; display:flex; flex-direction:column; gap:2px; }
.coldd .menu[hidden] { display:none; }
.coldd .menu label { display:flex; align-items:center; gap:8px; font-size:13px; padding:6px 8px; border-radius:6px; cursor:pointer; }
.coldd .menu label:hover { background:var(--surface-sunken); }

/* sortable headers + clickable-row affordance (table.et is the kit's) */
table.et th.sortable { cursor:pointer; user-select:none; }
table.et th.sortable:hover { color:var(--ink-2); }
table.et th .ar { font-size:9px; opacity:.5; margin-left:4px; }
table.et th[aria-sort="ascending"] .ar, table.et th[aria-sort="descending"] .ar { opacity:1; color:var(--brand); }
table.et tbody tr:focus-visible { outline:2px solid var(--focus); outline-offset:-2px; }
table.et .chev { color:var(--ink-3); font-size:12px; }
table.et tbody tr:hover .chev, table.et tbody tr.sel .chev { color:var(--brand); }

/* pagination */
.pager { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-top:4px; font-size:13px; color:var(--ink-2); }
.pager .grow { flex:1; }
.pager button { font:inherit; font-size:13px; padding:6px 11px; border:1px solid var(--border-strong); background:var(--surface); color:var(--ink); border-radius:var(--r-sm); cursor:pointer; }
.pager button:hover:not([disabled]) { background:var(--surface-sunken); }
.pager button[disabled] { opacity:.45; cursor:not-allowed; }
.pager .pg { font-variant-numeric:tabular-nums; }

/* slide animation layered on the shared shell's fixed .drawer + .backdrop */
.drawer-wrap[hidden] { display:none; }
.drawer-wrap .backdrop { opacity:0; transition:opacity .16s; }
.drawer-wrap .drawer { transform:translateX(100%); transition:transform .18s ease; }
.drawer-wrap.open .backdrop { opacity:1; }
.drawer-wrap.open .drawer { transform:translateX(0); }
.drawer header .x { margin-left:auto; background:none; border:0; font-size:20px; line-height:1; color:var(--ink-3); cursor:pointer; padding:2px 6px; border-radius:6px; }
.drawer header .x:hover { background:var(--surface-sunken); color:var(--ink); }
.drawer .body .btns { display:flex; flex-wrap:wrap; gap:8px; }
@media (prefers-reduced-motion:reduce){ .drawer-wrap .drawer, .drawer-wrap .backdrop { transition:none; } }

/* state banners (empty / loading / stale / partial / no-access / failed) */
.statebanner { display:flex; align-items:flex-start; gap:11px; padding:12px 14px; border-radius:var(--r); border:1px solid; font-size:13.5px; line-height:1.5; }
.statebanner .g { font-size:13px; margin-top:1px; }
.statebanner.s-warn { background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn); }
.statebanner.s-unknown { background:var(--unknown-bg); border-color:var(--unknown-line); color:var(--unknown); }
.statebanner.s-fail { background:var(--fail-bg); border-color:var(--fail-line); color:var(--fail); }
.statebanner.s-info { background:var(--info-bg); border-color:var(--info-line); color:var(--info); }
.statebanner .d { color:var(--ink-2); }
.empty { text-align:center; padding:40px 20px; color:var(--ink-3); }
.empty b { display:block; color:var(--ink-2); font-size:15px; margin-bottom:4px; }

/* small helpers */
.muted { color:var(--ink-3); }
.mono { font-family:var(--mono); font-size:12px; }
.rowsub { display:block; font-size:11.5px; color:var(--ink-3); font-weight:400; margin-top:1px; }