/* =========================================================================
   sales.css - Argus Sales, Night Desk.

   The screens carry the approved canvas's own styles (style attributes, as
   designed); this file holds only what sits around them: the faces, the
   tokens (the same values as Argus Accounting's night-desk.css), the page,
   the band, the foot, focus rings, alerts and toasts, and the few rules the
   designs kept in their own <style> (disabled buttons).
   ========================================================================= */

@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 200; font-display: swap;
  src: url('fonts/inter-tight-latin-200-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('fonts/inter-tight-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/inter-tight-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/inter-tight-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/inter-tight-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }

:root {
  color-scheme: dark;
  --nd-bg: #0E1013;
  --nd-panel: #1B1E24;
  --nd-ink: #EEF0F4;
  --nd-ink-2: #AEB4C2;
  --nd-muted: #9198A6;
  --nd-brass: #D8BC82;
  --nd-brass-deep: #C9A45C;
  --nd-steel: #4A6EAA;
  --nd-steel-2: #6E93D6;
  --nd-teal: #7FC8C2;
  --nd-amber: #F0B866;
  --nd-red: #E58A80;
  --nd-green: #8FD3A6;
  --nd-line: rgba(255,255,255,0.10);
  --nd-font: 'Inter Tight', system-ui, sans-serif;
  /* the shared list, its pick-lists and dialogs (11-03): surfaces, lines and the picked row */
  --nd-fill: rgba(255,255,255,0.05);          /* a field or card on the page */
  --nd-fill-2: rgba(255,255,255,0.06);        /* a panel a row opens */
  --nd-line-2: rgba(255,255,255,0.08);        /* a quiet rule between rows */
  --nd-line-field: rgba(255,255,255,0.12);    /* a field's edge */
  --nd-line-panel: rgba(255,255,255,0.14);    /* a panel's edge */
  --nd-line-strong: rgba(255,255,255,0.18);   /* a resize grip, an icon button */
  --nd-line-btn: rgba(255,255,255,0.24);      /* a secondary button's edge */
  --nd-field: #16191E;                        /* a select's own background (its options inherit it) */
  --nd-on-brass: #0E1013;                     /* text on a brass button */
  --nd-brass-ink: #E8D3A8;                    /* brass words: "yours", G&G */
  --nd-brass-soft: rgba(216,188,130,0.14);    /* a highlighted choice */
  --nd-brass-mark: rgba(216,188,130,0.30);    /* the typed words in a pick-list */
  --nd-picked: rgba(216,188,130,0.08);        /* the row that is open */
  --nd-picked-line: rgba(216,188,130,0.45);
  --nd-scrim: rgba(5,6,8,0.66);
  --nd-shadow: 0 12px 30px rgba(0,0,0,0.45);
  /* the design's company pills, and status tones (green good, amber look, red bad) */
  --nd-tag-revive-bg: rgba(127,200,194,0.14);
  --nd-tag-revive-ink: #9FDCD6;
  --nd-tag-gg-bg: rgba(216,188,130,0.16);
  --nd-tag-gg-ink: #E8D3A8;
  --nd-tag-both-bg: rgba(255,255,255,0.08);
  --nd-tag-other-bg: rgba(255,255,255,0.07);
  --nd-good-soft: rgba(143,211,166,0.14);
  --nd-warn-soft: rgba(240,184,102,0.14);
  --nd-bad-soft: rgba(229,138,128,0.14);
  --nd-steel-soft: rgba(110,147,214,0.22);
  --nd-steel-ink: #A9C1EE;
  /* text sizes and layers the list uses */
  --nd-fs-10: 10px;
  --nd-fs-12: 12px;
  --nd-fs-13: 13px;
  --nd-fs-14: 14px;
  --nd-fs-16: 16px;                           /* also every phone input: the phone never zooms */
  --nd-fs-18: 18px;
  --nd-fs-22: 22px;
  --nd-z-grip: 1;                             /* a heading's resize edge, over the next heading */
  --nd-z-pick: 30;                            /* a pick-list's choices, over the page */
  --nd-z-sheet: 40;                           /* the phone's row sheet */
  --nd-z-layer: 50;                           /* a dialog or sheet, over everything */
  --nd-tap: 44px;                             /* the smallest control on a phone */
}

html { background: var(--nd-bg); }
body { margin: 0; background: var(--nd-bg); color: var(--nd-ink); font-family: var(--nd-font); -webkit-font-smoothing: antialiased; }
a { color: var(--nd-brass); }
a:hover { color: #FFFFFF; }
button { -webkit-tap-highlight-color: transparent; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
.is-phone button:disabled { cursor: default; }
/* NightPhoneClaim's own rule */
.is-phone [data-route="claim"] button:disabled { opacity: 0.4; }

:focus-visible { outline: 2px solid var(--nd-brass); outline-offset: 2px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: 0; }
/* the page itself takes focus after a route change (for screen readers); it is not a control, so no ring */
[tabindex="-1"]:focus { outline: none; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 20; padding: 10px 16px; border-radius: 999px; background: var(--nd-ink); color: var(--nd-bg); text-decoration: none; font-weight: 600; }
.skip-link:focus { top: 12px; }

.boot-wait { margin: 0; padding: 48px 16px; text-align: center; color: var(--nd-muted); font-family: var(--nd-font); }
.boot-fail { max-width: 560px; margin: 64px auto; padding: 0 16px; font-family: var(--nd-font); color: var(--nd-ink); }
.boot-fail h1 { font-weight: 400; }
.boot-fail p { color: var(--nd-ink-2); line-height: 1.5; }

/* the band at the top: TEST, and "sample data" until a screen reads the database */
.env-band { flex: 0 0 auto; padding: 6px 16px; text-align: center; font-size: 11px; font-weight: 500; letter-spacing: 0.14em; color: #0E1013; background: linear-gradient(90deg, var(--nd-brass), var(--nd-brass-deep)); }

/* the desk foot: version, team, who is signed in, Sign out */
.nd-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 0 32px 24px; font-size: 12px; color: var(--nd-muted); }
.link-btn { padding: 0; border: 0; background: none; font: inherit; color: var(--nd-brass); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.link-btn:hover { color: #FFFFFF; }

/* the phone: the band, then the screen filling the rest of the height */
.nd-phone { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: var(--nd-bg); }
.nd-phone-screen { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.nd-phone-screen > div { padding-bottom: env(safe-area-inset-bottom, 0); }
/* a phone screen's scrolling part keeps each piece at its own height (the artboards were drawn at
   390 x 844; on a shorter screen, or under the TEST band, flexbox would squash them instead of scrolling) */
.nd-phone-screen [style*="overflow-y: auto"] > * { flex-shrink: 0; }

/* sign-in, on a narrow window: the big team name steps down */
@media (max-width: 720px) {
  .signin-main { padding: 16px !important; gap: 28px !important; }
  .signin-team { font-size: 44px !important; }
  .nd-page header, .nd-page footer { padding-left: 16px !important; padding-right: 16px !important; }
  .nd-foot { padding: 0 16px 20px; }
}

/* alerts (sign-in cards) and toasts (ui.js) */
.alert { padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.45; border: 1px solid var(--nd-line); background: rgba(255,255,255,0.04); color: var(--nd-ink); }
.alert-error { border-color: rgba(229,138,128,0.55); background: rgba(229,138,128,0.10); color: #F4C7C1; }
.alert-warn { border-color: rgba(240,184,102,0.55); background: rgba(240,184,102,0.10); color: #F6D9A8; }
.alert-success { border-color: rgba(143,211,166,0.55); background: rgba(143,211,166,0.10); color: #CDEFD8; }
.alert-info { border-color: rgba(110,147,214,0.45); background: rgba(110,147,214,0.08); color: #D5E0F6; }
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 30; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.toast { padding: 12px 16px; border-radius: 16px; background: var(--nd-panel); border: 1px solid rgba(255,255,255,0.14); color: var(--nd-ink); font-size: 14px; box-shadow: 0 12px 40px rgba(0,0,0,0.45); }
.toast-error { border-color: rgba(229,138,128,0.6); }
.toast-success { border-color: rgba(143,211,166,0.6); }
.toast-warn { border-color: rgba(240,184,102,0.6); }

/* ── the shared list (screens/list.js): Sagar's six list features, Night Desk ─ */
.list { display: flex; flex-direction: column; gap: 12px; min-width: 0; font-size: var(--nd-fs-14); }
.list-tools, .list-tools-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field-label { font-size: var(--nd-fs-12); color: var(--nd-muted); }
.input, .select, .pick-input { box-sizing: border-box; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--nd-line-field); background: var(--nd-fill); color: var(--nd-ink); font: inherit; font-size: var(--nd-fs-14); }
.select { padding-right: 30px; background: var(--nd-field); }
.select option, .select optgroup { background: var(--nd-field); color: var(--nd-ink); }
.list-search { flex: 1 1 220px; max-width: 340px; }
.list-search .input { width: 100%; }
.btn { min-height: 40px; padding: 0 16px; border-radius: 999px; font: inherit; font-size: var(--nd-fs-14); cursor: pointer; border: 1px solid var(--nd-line-btn); background: transparent; color: var(--nd-ink); }
.btn-primary { border: 0; background: var(--nd-brass); color: var(--nd-on-brass); font-weight: 600; }
.btn-primary:hover { background: var(--nd-brass-ink); }
.btn-secondary:hover, .btn-quiet:hover { background: var(--nd-fill-2); }
.btn-quiet { border-color: transparent; color: var(--nd-ink-2); text-decoration: underline; text-underline-offset: 2px; }
.icon-btn { width: 40px; height: 40px; flex-shrink: 0; border-radius: 999px; border: 1px solid var(--nd-line-strong); background: transparent; color: var(--nd-ink); font: inherit; font-size: var(--nd-fs-18); line-height: 1; cursor: pointer; display: inline-grid; place-items: center; }
.icon-btn:hover:not(:disabled) { background: var(--nd-line-2); }
.list-body { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.list-wrap { flex: 2 1 560px; min-width: 0; overflow-x: auto; }
.list-table { border-collapse: separate; border-spacing: 0; table-layout: fixed; width: max-content; }   /* never stretched: a dragged width is the width */
.list-table th { position: relative; text-align: left; font-weight: 400; font-size: var(--nd-fs-12); color: var(--nd-muted); padding: 0 10px 8px; border-bottom: 1px solid var(--nd-line-2); white-space: nowrap; }
.list-table th.num, .list-table td.num { text-align: right; }
.list-sort { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.list-sort:hover, th[aria-sort="ascending"] .list-sort, th[aria-sort="descending"] .list-sort { color: var(--nd-ink); }
.list-arrow { font-size: var(--nd-fs-10); color: var(--nd-brass); }
.list-grip { position: absolute; z-index: var(--nd-z-grip); right: -3px; top: 0; bottom: 6px; width: 7px; cursor: col-resize; touch-action: none; }
.list-grip::after { content: ""; position: absolute; left: 2px; top: 2px; bottom: 2px; width: 2px; border-radius: 2px; background: var(--nd-line-strong); }
.list-grip:hover::after, .list-grip:focus-visible::after { background: var(--nd-brass); }
.list-table td { padding: 10px; color: var(--nd-ink-2); border-bottom: 1px solid var(--nd-fill); overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.list-table td:first-child { color: var(--nd-ink); }
.list-table tr.is-picked td { background: var(--nd-picked); }
.list-table tr.is-picked td:first-child { box-shadow: inset 2px 0 0 var(--nd-brass); }
.list-pick { color: var(--nd-ink); text-decoration: none; font-weight: 500; text-align: left; }
.list-pick:hover { color: var(--nd-brass); }
.fig, .mono { font-variant-numeric: tabular-nums; }
.muted, .hint { color: var(--nd-muted); }
.hint { margin: 0; font-size: var(--nd-fs-12); }
.list-none { margin: 12px 10px; font-size: var(--nd-fs-14); }
.list-side { flex: 1 1 340px; min-width: 0; box-sizing: border-box; border-radius: 26px; padding: 18px; background: var(--nd-fill-2); border: 1px solid var(--nd-line-panel); display: flex; flex-direction: column; gap: 12px; }
.list-nav { display: flex; align-items: center; gap: 8px; font-size: var(--nd-fs-13); color: var(--nd-muted); }
.list-nav-gap { flex: 1; }
.lt-pill { display: inline-block; font-size: var(--nd-fs-12); font-weight: 500; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.lt-sub { display: block; font-size: var(--nd-fs-12); font-weight: 400; color: var(--nd-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-bar { display: block; height: 8px; border-radius: 999px; background: var(--nd-line-2); overflow: hidden; }
.lt-bar > span { display: block; height: 100%; border-radius: 999px; }
.lt-bar > span { background: var(--nd-steel-2); }
.lt-bar-brass > span { background: var(--nd-brass); }
.lt-avatar { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 8px; border-radius: 10px; vertical-align: middle; background: var(--nd-ink-2); color: var(--nd-on-brass); font-size: var(--nd-fs-12); font-weight: 600; }
.lt-avatar-top { background: var(--nd-brass); }
.lt-detail { display: flex; flex-direction: column; gap: 10px; }
.lt-detail-title { margin: 0; font-size: var(--nd-fs-22); font-weight: 400; letter-spacing: -0.01em; color: var(--nd-ink); }
.lt-facts { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.lt-facts > div { display: flex; justify-content: space-between; gap: 12px; font-size: var(--nd-fs-14); padding-bottom: 8px; border-bottom: 1px solid var(--nd-line-2); }
.lt-facts dt { color: var(--nd-muted); }
.lt-facts dd { margin: 0; text-align: right; color: var(--nd-ink); }
.lt-decide { display: flex; flex-direction: column; gap: 8px; }
.lt-decide .btn { min-height: 46px; }
.lt-done { margin: 0; padding: 12px 14px; border-radius: 16px; background: var(--nd-brass-soft); border: 1px solid var(--nd-picked-line); font-size: var(--nd-fs-14); }
/* the phone: cards, a Sort picker, and a full-screen sheet for the row a card opens */
.list-phone .list-tools { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.list-phone .list-search { max-width: none; flex: 0 0 auto; }
.list-phone .list-tools-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
.list-phone .list-tools-row .field { flex: 0 0 auto; }
.list-phone .btn { flex: 0 0 auto; align-self: flex-end; white-space: nowrap; }
.list-cards { display: flex; flex-direction: column; gap: 10px; }
.list-group-head { margin: 0; padding: 10px 2px 0; font-size: var(--nd-fs-14); font-weight: 500; }
.list-card { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 14px 16px; border-radius: 22px; background: var(--nd-fill); border: 1px solid var(--nd-line); color: var(--nd-ink); font: inherit; font-size: var(--nd-fs-14); text-align: left; cursor: pointer; }
.list-card.is-picked { border-color: var(--nd-picked-line); }
/* the board look (spec.board): cards in stage columns, the same list underneath */
.list-board { flex: 1 1 100%; min-width: 0; display: grid; gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.list-col { display: flex; flex-direction: column; gap: 10px; min-width: 220px; border-radius: 24px; padding: 12px; background: var(--nd-fill); border: 1px solid var(--nd-line-2); }
.list-col-head { display: flex; flex-direction: column; gap: 6px; padding: 4px 4px 2px; font-size: var(--nd-fs-14); font-weight: 500; }
.list-col-head .lc-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lc-name { font-size: var(--nd-fs-16); font-weight: 500; }
.lc-value { font-size: var(--nd-fs-16); font-weight: 300; }
.lc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.lc-foot { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--nd-line-2); font-size: var(--nd-fs-12); }
.lc-foot .lc-next { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-card-title { font-size: var(--nd-fs-16); font-weight: 500; }
.list-card-line { font-size: var(--nd-fs-13); color: var(--nd-ink-2); }
.list-card-k { color: var(--nd-muted); }
.list-sheet { position: fixed; inset: 0; z-index: var(--nd-z-sheet); box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; padding: calc(18px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); background: var(--nd-bg); overflow-y: auto; }
.list-sheet-body { display: flex; flex-direction: column; gap: 12px; }
/* type to search on a long pick-list (screens/pick.js) */
.pick { position: relative; display: inline-flex; min-width: 180px; }
.pick-input { width: 100%; }
.pick-list { position: absolute; z-index: var(--nd-z-pick); top: calc(100% + 4px); left: 0; min-width: 100%; max-height: 300px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; border-radius: 16px; background: var(--nd-panel); border: 1px solid var(--nd-line-strong); box-shadow: var(--nd-shadow); }
.pick-opt { padding: 8px 10px; border-radius: 10px; cursor: pointer; white-space: nowrap; }
.pick-opt.is-active, .pick-opt:hover { background: var(--nd-brass-soft); }
.pick-opt[aria-selected="true"] { color: var(--nd-brass); }
.pick-group { padding: 8px 10px 4px; font-size: var(--nd-fs-12); color: var(--nd-muted); }
.pick-none { padding: 8px 10px; color: var(--nd-muted); }
.pick mark { background: var(--nd-brass-mark); color: inherit; border-radius: 3px; }
/* dialogs (desk) and bottom sheets (phone): ui.js openLayerView; only the X or Cancel closes one */
.scrim { position: fixed; inset: 0; z-index: var(--nd-z-layer); display: grid; place-items: center; padding: 16px; background: var(--nd-scrim); }
.scrim-sheet { place-items: end stretch; padding: 0; }
.dialog, .sheet { box-sizing: border-box; width: min(480px, 100%); max-height: calc(100% - 32px); overflow-y: auto; border-radius: 26px; padding: 20px; background: var(--nd-panel); border: 1px solid var(--nd-line-panel); color: var(--nd-ink); display: flex; flex-direction: column; gap: 14px; }
.sheet { width: 100%; border-radius: 26px 26px 0 0; padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
.layer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.layer-title { margin: 0; font-size: var(--nd-fs-18); font-weight: 500; }
.layer-body { display: flex; flex-direction: column; gap: 10px; font-size: var(--nd-fs-14); }
.layer-body p { margin: 0; }
.layer-body .input { width: 100%; }
.layer-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }

/* the phone (Sagar's phone rules): every control at least 44px, every input 16px so the phone never zooms */
.is-phone .input, .is-phone .select, .is-phone .pick-input { min-height: var(--nd-tap); font-size: var(--nd-fs-16); }
.is-phone .btn { min-height: var(--nd-tap); }
.is-phone .icon-btn { width: var(--nd-tap); height: var(--nd-tap); }
.is-phone .list-card { min-height: var(--nd-tap); }
/* the company and status pills a list shows: the design's colours, as tokens */
.lt-tag-revive { background: var(--nd-tag-revive-bg); color: var(--nd-tag-revive-ink); }
.lt-tag-gg { background: var(--nd-tag-gg-bg); color: var(--nd-tag-gg-ink); }
.lt-tag-both { background: var(--nd-tag-both-bg); color: var(--nd-ink); }
.lt-tag-other { background: var(--nd-tag-other-bg); color: var(--nd-ink-2); }
.lt-tone-good { background: var(--nd-good-soft); color: var(--nd-green); }
.lt-tone-warn { background: var(--nd-warn-soft); color: var(--nd-amber); }
.lt-tone-bad { background: var(--nd-bad-soft); color: var(--nd-red); }
.lt-tone-steel { background: var(--nd-steel-soft); color: var(--nd-steel-ink); }
.lt-tone-quiet { background: transparent; color: var(--nd-muted); border: 1px dashed var(--nd-line-strong); }
.lt-tone-done { background: var(--nd-fill-2); color: var(--nd-ink); }
.lt-late { color: var(--nd-amber); }
.lt-mine { color: var(--nd-brass-ink); }
.lt-quiet { color: var(--nd-muted); }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}