/* The command palette (public/js/palette.js) and the header search chip.
   The palette is a sheet, so it takes the sheet material from stockflow.css and glass.css.
   Rows are opaque ink on that material. Colours read tokens only. */
.sf-find { gap: 6px; }
.sf-find .nm { font-weight: 600; }
.sf-find .pal-kbd { font: inherit; font-size: var(--type-cap-size); color: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 0 6px; line-height: 1.5; }
@media (max-width: 860px) { .sf-find .nm, .sf-find .pal-kbd { display: none; } }

dialog.sf-palette { top: 10vh; margin-top: 0; }
.sf-palette .sheet-in { padding: 12px 12px 10px; }
.pal-in { display: flex; align-items: center; gap: 10px; padding: 0 6px 10px; border-bottom: 1px solid var(--line); }
.pal-in .ic { width: 20px; height: 20px; color: var(--ink-3); flex: 0 0 20px; }
.pal-in input { flex: 1; min-height: 44px; border: 0; background: transparent; box-shadow: none; font-size: var(--type-title-size); color: var(--ink); outline: none; padding: 0; }
.pal-list { list-style: none; margin: 8px 0 0; padding: 0; max-height: min(56vh, 460px); overflow-y: auto; }
.pal-list li[data-i] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border-radius: var(--r-ctl); cursor: pointer; color: var(--ink); }
.pal-list li[data-i].on, .pal-list li[data-i]:hover { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
.pal-k { font-size: var(--type-cap-size); font-weight: 700; color: var(--ink-3); min-width: 76px; }
.pal-l { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-s { font-size: var(--type-cap-size); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; }
.pal-list .t-action .pal-k { color: var(--accent-text); }
.pal-head { font-size: var(--type-cap-size); font-weight: 700; color: var(--ink-3); padding: 6px 10px 2px; }
.pal-none { color: var(--ink-3); padding: 14px 10px; }
.pal-hint { margin: 8px 6px 0; font-size: var(--type-cap-size); color: var(--ink-3); }
@media (max-width: 560px) {
  dialog.sf-palette { top: auto; }
  .pal-k { min-width: 0; }
  .pal-s { display: none; }
  .pal-hint { display: none; }
}

/* inline row actions, shared by tables that offer them (CRM list, invoices, orders) */
.row-acts { display: inline-flex; gap: 4px; margin-top: 4px; opacity: 0; transition: opacity .16s var(--ease); }
tr:hover .row-acts, tr:focus-within .row-acts { opacity: 1; }
@media (hover: none) { .row-acts { opacity: 1; } }
.row-acts .btn.sm { min-height: 32px; padding: 4px 9px; }
.row-acts .btn .ic { width: 16px; height: 16px; }
a.cust-link { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a.cust-link:hover { color: var(--accent-text); text-decoration-color: currentColor; }

/* visually hidden, still read aloud (also in planning.css for its own pages) */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* batch selection: a checkbox column and a bar that appears under the table once rows are picked */
.tbl th.pick, .tbl td.pick { width: 36px; padding-right: 0; }
.tbl td.pick input, .tbl th.pick input { width: 20px; height: 20px; min-height: 0; margin: 0; accent-color: var(--accent); }
.batch-bar { position: sticky; bottom: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 12px 12px; padding: 10px 12px; border-radius: var(--r-card); background: var(--paper); border: 1px solid var(--line-strong); box-shadow: var(--shadow-card); z-index: 5; }
.batch-bar[hidden] { display: none; }
.batch-bar b { flex: 1 1 160px; }
.batch-bar select, .batch-bar input[type=date] { flex: 0 1 170px; min-height: 40px; }

/* inline edit inside a table cell: the value is the summary, the small form opens under it */
button.cost-cell { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; min-height: 0; text-decoration: underline dotted var(--line-strong); text-underline-offset: 3px; font-variant-numeric: tabular-nums; }
button.cost-cell:hover { color: var(--accent-text); }
.inline-form { display: flex; gap: 6px; align-items: center; justify-content: flex-end; margin-top: 6px; }
.inline-form input { width: 110px; min-height: 36px; }

/* a phone header has room for the search chip once the language chip steps back:
   the language switch stays in the user menu */
@media (max-width: 430px) { .sf-hpill .sf-hchip[hreflang] { display: none; } }