/* ============================================================================
   Cross Plains Inventory — module-specific components. Built ONLY on
   design-tokens.css. The shared chrome (header, tabs, toolbar, table, buttons,
   inputs) lives in app-shell.css and is consumed as-is; this file never
   restyles those classes, it only adds what the shell does not ship.
   ============================================================================ */

/* ---- Sticky header (module owns the page; list pages sit on white) -------- */
body { background: var(--color-list-bg); }
.app-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--color-list-bg);
  margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-8)) 0;
  padding: var(--space-4) var(--space-8) var(--space-3);
}
/* Inside the sticky block the toolbar's own bottom margin would sit outside it
   (rows would show through); the block's padding gives the spacing instead. */
.app-header .toolbar { margin-bottom: 0; }
.app-header .toolbar-slot:empty { display: none; }
.app-header:has(.toolbar-slot:empty) > .tab-row { margin-bottom: 0; }
/* Workbench views keep their toolbar in the main pane: the header is title + tabs only. */
.app-header:not(:has(.toolbar-slot)) { padding-bottom: 0; }
.app-header:not(:has(.toolbar-slot)) > .tab-row { margin-bottom: 0; }
/* The tab underline bleeds to the page edges, as app-shell.css does for .content > .tab-row. */
.app-header > .tab-row {
  margin-left: calc(-1 * var(--space-8)); margin-right: calc(-1 * var(--space-8));
  padding-left: var(--space-8); padding-right: var(--space-8);
  margin-top: var(--space-2); margin-bottom: var(--space-3);
}
.whoami { color: var(--color-label); font-size: var(--fs-sm); margin-right: var(--space-1); white-space: nowrap; }
.boot-error { padding-top: var(--space-4); max-width: 720px; }

/* Toolbar groups may wrap on narrower screens (five filters + search). */
.toolbar--wrap { flex-wrap: wrap; align-items: flex-start; }
.toolbar-actions--wrap { flex-wrap: wrap; }
.toolbar-actions--end { justify-content: flex-end; margin-left: auto; }

/* ---- Buttons the shell does not ship --------------------------------------- */
.btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.btn--danger { background: var(--color-danger-text); color: var(--btn-primary-text); box-shadow: var(--shadow-sm); }
/* White title-row action (the Deplete button, per the Cross Plains team): white fill, hairline, dark text. */
.btn--white { background: var(--color-bg); color: var(--color-text); border-color: var(--color-border); box-shadow: var(--shadow-sm); }
.btn--white:hover:not(:disabled) { background: var(--color-hover); }
.btn--danger:hover:not(:disabled) { filter: brightness(1.1); }
.icon-ghost:disabled { opacity: .4; cursor: not-allowed; }
.link-btn {
  appearance: none; background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--color-accent); font-weight: var(--fw-medium);
}
.link-btn { display: inline-flex; align-items: center; gap: 4px; }
.link-btn .icon { width: 13px; height: 13px; }
.link-btn:hover:not(:disabled) { text-decoration: underline; }
.link-btn:disabled { color: var(--color-muted); cursor: default; }
.link-btn--muted { color: var(--color-label); }

/* ---- Pills ------------------------------------------------------------------ */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px var(--space-2); border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap; }
.pill--blue { background: var(--pill-blue-bg); color: var(--pill-blue-text); }
.pill--gray { background: var(--pill-gray-bg); color: var(--pill-gray-text); }
.pill--green { background: var(--pill-green-bg); color: var(--pill-green-text); }
.pill--red { background: var(--pill-red-bg); color: var(--pill-red-text); }
.pill--amber { background: var(--pill-amber-bg); color: var(--pill-amber-text); }
.pill--yellow { background: var(--pill-yellow-bg); color: var(--pill-yellow-text); }
.pill--violet { background: var(--pill-violet-bg); color: var(--pill-violet-text); }

/* ---- Select (shadcn-style; DESIGN.md golden rule 5) ------------------------- */
.sel { position: relative; display: inline-block; }
.sel-trigger {
  width: 100%; height: var(--control-height); display: inline-flex; align-items: center;
  gap: var(--space-2); padding: 0 var(--space-2) 0 var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-input);
  background: var(--color-bg); color: var(--color-text); font: var(--fs-base)/1 var(--font-sans); cursor: pointer;
}
.sel-trigger:hover { border-color: var(--color-muted); }
.sel-trigger:focus-visible { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--pill-blue-bg); }
.sel-lead { width: 15px; height: 15px; color: var(--color-label); }
.sel-label { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-placeholder { color: var(--color-label); }
.sel-chevron { width: 15px; height: 15px; color: var(--color-label); }
.sel-menu {
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%; z-index: 60;
  background: var(--color-bg); border: 1px solid var(--color-border-faint); border-radius: var(--radius-input);
  box-shadow: var(--shadow-md); padding: var(--space-1); max-height: 300px; overflow-y: auto;
}
.sel-opt {
  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2);
  border-radius: 6px; font-size: var(--fs-base); cursor: pointer; white-space: nowrap;
}
.sel-opt--active { background: var(--color-hover); }
.sel-check { width: 15px; flex: none; color: var(--color-text); display: inline-flex; }
.sel-check .icon { width: 15px; height: 15px; }
.sel-opt-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.sel-opt-hint { color: var(--color-muted); font-size: var(--fs-xs); }
.sel-sep { height: 1px; background: var(--color-border-faint); margin: var(--space-1) 0; }
.sel-note { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); color: var(--color-label); font-size: var(--fs-sm); white-space: normal; }
.sel-note--error { color: var(--color-danger-text); }
/* A filter dropdown that is set reads as "on". */
.sel--set .sel-trigger { border-color: var(--color-accent); background: var(--pill-blue-bg); }
.sel--set .sel-lead { color: var(--color-accent); }
/* Searchable menus: type-to-filter box on top, scrolling rows below. */
.sel-menu--search { min-width: 260px; max-height: none; overflow: visible; display: flex; flex-direction: column; gap: var(--space-1); }
.sel-search { width: 100%; }
.sel-list { max-height: 300px; overflow-y: auto; }

/* ---- Text fields: shared focus ring --------------------------------------- */
.input:focus, .search:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--pill-blue-bg); }

/* ---- Live search box with icon + clear (DESIGN.md golden rule 8) ------------ */
.search-wrap { position: relative; display: inline-flex; align-items: center; }
.search-icon { position: absolute; left: var(--space-3); width: 15px; height: 15px; color: var(--color-muted); pointer-events: none; }
.search--with-icon { padding-left: calc(var(--space-3) + 22px); padding-right: 30px; }
.search-clear {
  position: absolute; right: 4px; display: none; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: none; background: none; cursor: pointer; color: var(--color-label); border-radius: 5px;
}
.search-clear:hover { background: var(--color-hover); color: var(--color-text); }
.search-clear .icon { width: 14px; height: 14px; }
.search-wrap--has .search-clear { display: inline-flex; }

/* ---- Scan box -------------------------------------------------------------- */
.scan-wrap { position: relative; display: inline-flex; align-items: center; }
.scan-icon { position: absolute; left: var(--space-3); width: 16px; height: 16px; color: var(--color-label); pointer-events: none; }
.scan-input { width: 190px; padding-left: calc(var(--space-3) + 24px); }

/* ---- Checkbox (shadcn-style) ------------------------------------------------ */
.cbx { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; cursor: pointer; vertical-align: middle; }
.cbx-input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cbx-box {
  width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--color-muted); background: var(--color-bg);
  display: inline-flex; align-items: center; justify-content: center; color: transparent; pointer-events: none;
}
.cbx-box .icon { width: 12px; height: 12px; stroke-width: 3; }
.cbx--on .cbx-box, .cbx--mixed .cbx-box { background: var(--btn-primary-bg); border-color: var(--btn-primary-bg); color: var(--btn-primary-text); }
.cbx-input:focus-visible + .cbx-box { box-shadow: 0 0 0 3px var(--pill-blue-bg); border-color: var(--color-accent); }
.cbx--disabled { cursor: not-allowed; }
.cbx--disabled .cbx-box { background: var(--color-surface-alt); border-color: var(--color-border); }
.cbx--disabled .cbx-input { cursor: not-allowed; }

/* ---- Toolbar status (inside the sticky header) ------------------------------- */
.toolbar-status { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--color-label); }
.toolbar-status:empty { display: none; }
.toolbar-count { white-space: nowrap; font-variant-numeric: tabular-nums; }
.toolbar-loading { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
.toolbar-loading .icon { width: 14px; height: 14px; }

/* ---- Frozen table header + pager ---------------------------------------------
   Table headers stick at --sticky-top (js/state.js measures the sticky header and,
   on the Labels tab, the pane toolbar above the table).

   border-collapse: separate (spacing 0) on tables with a sticky head. Chrome
   mis-paints sticky cells in COLLAPSED tables: row text and lines bleed through
   the header's border area while scrolling. The shell's grid is single-sided
   (each cell draws only its bottom/right edge, plus the header's top edge), so
   separate borders look identical and each stuck header cell keeps its own lines. */
.content #tab-body .table, .peek-body .table { border-collapse: separate; border-spacing: 0; }
.content #tab-body .table thead th {
  position: sticky; top: var(--sticky-top, 0); z-index: 5; background: var(--color-bg);
}
.peek-body .table thead th {
  position: sticky; top: calc(-1 * var(--space-4)); z-index: 5; background: var(--color-bg);
}
.pager--sticky {
  position: sticky; bottom: 0; z-index: 6; background: var(--color-bg);
  border-top: 1px solid var(--color-border-faint);
  margin: 0 calc(-1 * var(--space-8)); padding: var(--space-2) var(--space-8);
}
.content { padding-bottom: 0; }
.labels-body { min-height: calc(100vh - var(--sticky-top, 0px) - var(--space-4)); display: flex; flex-direction: column; }
.labels-body .pager--sticky { margin-top: auto; }
.table-empty { display: flex; gap: var(--space-3); justify-content: center; align-items: center; padding: var(--space-8) var(--space-4); color: var(--color-label); }

/* ---- Workbench: Items rail + labels ------------------------------------------
   DESIGN.md's two-pane workbench: the left rail is the Items pane only, sticky
   right under the title + tabs (--header-top) and full height. The main pane
   holds the toolbar (sticky under the tabs, above the column headers) and the
   labels table, which still bleeds to the pane's edges (the pane carries the
   32px inset). Table headers stick under the toolbar (--sticky-top). */
.workbench { display: grid; grid-template-columns: 312px minmax(0, 1fr); margin: 0 calc(-1 * var(--space-8)); }
.workbench-main { padding: 0 var(--space-8); min-width: 0; }
/* Solid, edge to edge: the table bleeds into the pane's 32px gutters, so the
   toolbar's background must too, or rows show through beside it on scroll. Bottom
   padding is tight so the column headers sit right under the filters. */
.workbench-main > .toolbar-slot {
  position: sticky; top: var(--header-top, 0); z-index: 20; background: var(--color-bg);
  margin: 0 calc(-1 * var(--space-8));
  padding: var(--space-3) var(--space-8) var(--space-2);
}
.workbench-main > .toolbar-slot .toolbar { margin-bottom: 0; }
.rail {
  position: sticky; top: var(--header-top, 0); align-self: start;
  height: calc(100vh - var(--header-top, 0px)); display: flex; flex-direction: column;
  border-right: 1px solid var(--color-border-faint);
  background: var(--color-bg);
}
.rail-head { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-faint); }
.rail-head .search-wrap, .rail-head .search { width: 100%; }
.rail-title { display: flex; flex-direction: column; gap: 2px; }
.rail-title > span:first-child { font-weight: var(--fw-semibold); }
.rail-hint { color: var(--color-label); font-size: var(--fs-sm); }
.rail-list { flex: 1; overflow-y: auto; padding: var(--space-1) 0 var(--space-4); }
.rail-summary { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-4); color: var(--color-label); font-size: var(--fs-sm); }
.rail-item {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4); cursor: pointer; border-left: 2px solid transparent;
}
.rail-item:hover { background: var(--color-hover); }
.rail-item--picked { background: var(--pill-blue-bg); border-left-color: var(--color-accent); }
.rail-item--picked:hover { background: var(--pill-blue-bg); }
.rail-item-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.rail-item-name > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-item-sku { color: var(--color-label); font-size: var(--fs-xs); }
.rail-item-meta { display: flex; flex-direction: column; align-items: flex-end; font-size: var(--fs-sm); color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rail-item-qty { color: var(--color-label); font-size: var(--fs-xs); }
.rail-empty { padding: var(--space-4); color: var(--color-label); }
/* Pinned to the rail's bottom (outside the scrolling list), the same height and
   hairline as the labels pager so the two read as one bottom bar. */
.rail-foot {
  flex: none; display: flex; align-items: center; gap: var(--space-2);
  min-height: 45px; padding: var(--space-2) var(--space-4);   /* = the pager: 8px + 28px button + 8px + 1px line */
  border-top: 1px solid var(--color-border-faint); background: var(--color-bg);
  color: var(--color-label); font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
}
.rail-foot:empty { display: none; }
.rail-foot .icon { width: 14px; height: 14px; }
.rail .loading { padding: var(--space-6) var(--space-4); }
/* Inside the workbench the sticky pager spans the main pane only. */
/* Side margins only: the shorthand would cancel .labels-body's margin-top: auto,
   which keeps the pager at the window bottom when the list is short. */
.workbench-main .pager--sticky { margin-left: calc(-1 * var(--space-8)); margin-right: calc(-1 * var(--space-8)); }

/* ---- Sortable column headers -------------------------------------------------
   The whole header cell is the sort button: pointer cursor, a soft hover tint,
   and the sort arrows appear on hover (solid arrow once a column is sorted). */
.table th.th-sort-cell { padding: 0; }
.th-sort {
  appearance: none; background: none; border: none; cursor: pointer;
  width: 100%; height: 100%; min-height: var(--row-height); padding: 0 var(--space-2);
  display: flex; align-items: center; gap: 4px; font: inherit; color: inherit; white-space: nowrap; text-align: left;
}
.th-sort--num { justify-content: flex-end; }
.th-sort:hover { background: var(--color-hover); }
.th-sort:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--pill-blue-bg); }
.th-sort-icon { width: 13px; height: 13px; color: var(--color-muted); opacity: 0; transition: opacity .12s; }
.th-sort:hover .th-sort-icon, .th-sort:focus-visible .th-sort-icon { opacity: 1; }
.th-sort--on { font-weight: var(--fw-medium); }
.th-sort--on .th-sort-icon { opacity: 1; color: var(--color-text); }
/* Outer cells pad back to the page inset, as app-shell.css does for plain cells. */
.content #tab-body .table th.th-sort-cell:last-child .th-sort { padding-right: var(--space-8); }

/* ---- Tables ----------------------------------------------------------------- */
.table .col-check { width: 44px; text-align: center; }
.content #tab-body .table th.col-check:first-child,
.content #tab-body .table td.col-check:first-child { padding-left: var(--space-6); }
.table .col-act { width: 48px; text-align: center; }
.row--selected { background: var(--pill-blue-bg); }
.row--selected.row--clickable:hover { background: var(--pill-blue-bg); filter: brightness(.98); }
.row--blocked td { color: var(--color-muted); }
.label-no { font-variant-numeric: tabular-nums; }
.cell-sku { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cell-empty { color: var(--color-label); text-align: center; height: 64px; }
.cell-detail { color: var(--color-label); white-space: normal; min-width: 180px; }
.is-loading .table tbody, .table.is-loading tbody { opacity: .55; transition: opacity .15s; }

/* ---- Selection summary (toolbar) -------------------------------------------- */
.selbar-sel { color: var(--color-text); font-weight: var(--fw-medium); white-space: nowrap; }

/* ---- Banner / empty / loading ---------------------------------------------- */
.banner { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-input); font-size: var(--fs-base); margin-bottom: var(--space-3); }
.banner > .icon { margin-top: 1px; }
.banner-body { flex: 1; }
.banner--info { background: var(--banner-bg); border: 1px solid var(--banner-border); color: var(--banner-text); }
.banner--danger { background: var(--pill-red-bg); color: var(--pill-red-text); }
.banner--warn { background: var(--pill-amber-bg); color: var(--pill-amber-text); }
.banner--success { background: var(--pill-green-bg); color: var(--pill-green-text); }
.empty { text-align: center; padding: var(--space-8) var(--space-4); color: var(--color-label); }
.empty-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--color-surface-alt); display: grid; place-items: center; margin: 0 auto var(--space-3); }
.empty-icon .icon { width: 22px; height: 22px; color: var(--color-muted); }
.empty-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--color-text); }
.empty-detail { margin: var(--space-1) auto var(--space-4); max-width: 460px; }
.loading { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-8); justify-content: center; color: var(--color-label); }
.icon--spin { animation: cpi-spin 1s linear infinite; }
@keyframes cpi-spin { to { transform: rotate(360deg); } }

/* ---- Meter ------------------------------------------------------------------- */
.meter { height: 6px; background: var(--color-surface-alt); border-radius: var(--radius-pill); overflow: hidden; width: 120px; }
.meter-fill { height: 100%; background: var(--color-accent); transition: width .3s; }
.meter--run { width: 100%; height: 8px; margin: var(--space-3) 0 var(--space-4); }

/* ---- Toasts ------------------------------------------------------------------ */
.toasts { position: fixed; bottom: var(--space-4); right: var(--space-4); z-index: 200; display: flex; flex-direction: column; gap: var(--space-2); }
.toast { display: flex; align-items: center; gap: var(--space-2); background: var(--color-text); color: var(--btn-primary-text); padding: var(--space-2) var(--space-3); border-radius: var(--radius-input); box-shadow: var(--shadow-md); font-size: var(--fs-sm); max-width: 420px; }
.toast .icon { width: 16px; height: 16px; }
.toast .icon-ghost { color: inherit; opacity: .75; width: 24px; height: 24px; }
.toast .icon-ghost:hover { background: transparent; color: inherit; opacity: 1; }
.toast--error { background: var(--color-danger-text); }
.toast--success { background: var(--color-golive-live); }
.toast-body { flex: 1; }

/* ---- Modal ------------------------------------------------------------------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(12, 10, 9, .45); z-index: 100; display: grid; place-items: center; padding: var(--space-4); }
.modal { background: var(--color-bg); border-radius: var(--radius-card); box-shadow: var(--shadow-md); width: 500px; max-width: 100%; max-height: 90vh; display: flex; flex-direction: column; }
.modal--wide { width: 640px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-faint); }
.modal-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.modal-body { padding: var(--space-4) var(--space-5); overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border-faint); }
.modal-foot:empty { display: none; }
.modal-text { margin: 0 0 var(--space-4); line-height: 1.5; }
.modal-hint { color: var(--color-label); font-size: var(--fs-sm); margin: var(--space-3) 0 0; line-height: 1.45; }
.form-row { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-3); }
.form-label { color: var(--color-label); font-size: var(--fs-sm); }
.form-row .input { width: 100%; }

/* ---- Stats ------------------------------------------------------------------- */
.field-label { color: var(--color-label); font-size: var(--fs-sm); }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.stat-row--modal { padding: var(--space-3) var(--space-4); background: var(--color-surface-alt); border-radius: var(--radius-input); margin-bottom: 0; }
.stat-value { font-size: var(--fs-lg); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; margin-top: 2px; }
.stat--danger .stat-value { color: var(--color-danger-text); }

/* ---- Runner ------------------------------------------------------------------ */
.run-head { display: flex; align-items: center; gap: var(--space-2); }
.run-headline { font-weight: var(--fw-semibold); flex: 1; }
.run-count { color: var(--color-label); font-variant-numeric: tabular-nums; }
.run-icon--ok { color: var(--pill-green-text); }
.run-icon--warn { color: var(--pill-amber-text); }
.run-issues { margin-top: var(--space-4); }
.run-issues ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--fs-sm); }

/* ---- Peek (right slide-over): batch detail ------------------------------------ */
.peek-scrim { position: fixed; inset: 0; background: rgba(12, 10, 9, .25); z-index: 90; }
.peek {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(880px, 100vw); background: var(--color-bg);
  box-shadow: var(--shadow-md); display: flex; flex-direction: column; transform: translateX(24px); opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}
.peek--open { transform: none; opacity: 1; }
.peek-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-faint); }
.peek-title { flex: 1; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.peek-body { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-5) var(--space-8); }
/* Full-bleed table inside the peek (DESIGN.md golden rule 6): cancel the padding, pad the outer cells back. */
.peek-body .table { margin-left: calc(-1 * var(--space-5)); margin-right: calc(-1 * var(--space-5)); width: calc(100% + 2 * var(--space-5)); }
.peek-body .table th:first-child, .peek-body .table td:first-child { padding-left: var(--space-5); }
.peek-body .table th:last-child, .peek-body .table td:last-child { padding-right: var(--space-5); }
.detail-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.detail-meta { color: var(--color-label); }
.detail-note { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin-bottom: var(--space-4); }
.detail-actions { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }
.detail-filter { margin-bottom: var(--space-3); }

/* ---- Slim scrollbars (app-wide) ---------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }