/* ==========================================================================
   vBol console — shared stylesheet.

   Every colour token below is copied verbatim from web/identity.html
   (the design system) so the console never hand-copies a hex value: this
   file is the *only* place in the console that names a colour. If the
   identity system changes a token, update it here and nowhere else.

   The one rule that matters more than any other: marigold is what a
   person said (a transcript), indigo is what the company keeps (a
   confirmed field value). They never blend into one another and a colour
   is never used decoratively -- see identity.html section 04.

   Mobile first: the manager's primary use is a phone in the evening.
   Every rule below applies at the narrowest width by default; the
   min-width media query at the bottom is what *adds* the laptop layout,
   not the other way round.
   ========================================================================== */

:root{
  --ink:        #14161F;
  --ink-2:      #2E3346;
  --ink-3:      #5B6178;
  --rule:       #D8DBE6;
  --rule-soft:  #E7E9F1;
  --paper:      #F2F3F8;
  --paper-2:    #FFFFFF;

  --indigo:     #2D3BA8;
  --indigo-lt:  #5566DA;
  --indigo-wash:#E3E6F8;

  --marigold:   #E08308;
  --marigold-lt:#F5A937;
  --marigold-wash:#FBEBD4;

  --panel:      #14161F;
  --panel-2:    #1D2130;
  --panel-3:    #2A2F42;
  --panel-ink:  #F1F2F7;
  --panel-dim:  #8E95AC;
  --panel-rule: #333850;

  --danger:     #B3261E;
  --danger-wash:#F8E3E1;

  --f-display: "Anek Latin", "Segoe UI", system-ui, sans-serif;
  --f-deva:    "Anek Devanagari", "Nirmala UI", system-ui, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  --tap: 44px; /* minimum comfortable touch target */
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#EDEFF6; --ink-2:#C2C7D8; --ink-3:#8D94AC;
    --rule:#2E3346; --rule-soft:#232739;
    --paper:#0D0F17; --paper-2:#161926;
    --indigo:#8494F0; --indigo-lt:#A7B2F6; --indigo-wash:#1C2142;
    --marigold:#F5A937; --marigold-lt:#FFC469; --marigold-wash:#3A2A10;
    --danger:#F2A199; --danger-wash:#3A1512;
  }
}
:root[data-theme="dark"]{
  --ink:#EDEFF6; --ink-2:#C2C7D8; --ink-3:#8D94AC;
  --rule:#2E3346; --rule-soft:#232739;
  --paper:#0D0F17; --paper-2:#161926;
  --indigo:#8494F0; --indigo-lt:#A7B2F6; --indigo-wash:#1C2142;
  --marigold:#F5A937; --marigold-lt:#FFC469; --marigold-wash:#3A2A10;
  --danger:#F2A199; --danger-wash:#3A1512;
}

*{ box-sizing:border-box; }

html, body{ margin:0; padding:0; }

body.console{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-display);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-bottom:32px;
}

a{ color:inherit; }

/* ---------------------------- app chrome ---------------------------- */

.appbar{
  position:sticky; top:0; z-index:10;
  background:var(--panel); color:var(--panel-ink);
  padding:12px 14px;
}
.appbar-top{ display:flex; align-items:center; gap:10px; }
.appbar .wordmark{ font-weight:800; font-size:19px; letter-spacing:-0.02em; }
.appbar .role{
  margin-left:auto; font-family:var(--f-mono); font-size:10.5px;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--panel-dim);
}
.appbar form.logout{ margin:0; }
.appbar .logout-btn{
  font-family:var(--f-mono); font-size:11px; color:var(--panel-dim);
  background:transparent; border:1px solid var(--panel-rule); border-radius:6px;
  padding:6px 10px; cursor:pointer;
}

.tabs{
  display:flex; gap:2px; overflow-x:auto; margin-top:10px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  flex:1; text-align:center; font-family:var(--f-mono); font-size:11px; letter-spacing:0.02em;
  color:var(--panel-dim); text-decoration:none; padding:8px 6px;
  border-radius:8px 8px 0 0; white-space:nowrap;
}
.tab.active{ color:var(--panel-ink); background:var(--panel-2); }

/* All five tabs must be visible without a horizontal scroll a manager has
   no reason to expect -- "Settings" scrolled out of view is exactly the
   kind of thing a distributor's owner would never find on their own. */
@media (max-width:400px){
  .tab{ font-size:9.5px; padding:8px 3px; }
}

main.console-main{ max-width:960px; margin:0 auto; padding:16px 14px 40px; }

h1.page-title{
  font-size:22px; font-weight:800; letter-spacing:-0.01em; margin:4px 0 16px;
}

/* ---------------------------- cards & rows ---------------------------- */

.card{
  background:var(--paper-2); border:1px solid var(--rule);
  border-radius:12px; padding:16px;
}
.card + .card{ margin-top:12px; }

.stack{ display:flex; flex-direction:column; gap:12px; }
.row{ display:flex; align-items:center; gap:10px; }
.row.wrap{ flex-wrap:wrap; }
.row.between{ justify-content:space-between; }

/* ---------------------------- the colour rule ---------------------------- */

/* What the company keeps: a confirmed field, a stored value. */
.kept{ color:var(--indigo); font-weight:600; }
.kept-wash{ background:var(--indigo-wash); color:var(--ink); border-radius:8px; padding:12px 14px; }

/* What a person said: a transcript, raw voice content. Always labelled. */
.said{
  font-family:var(--f-deva); color:var(--ink); background:var(--marigold-wash);
  border-left:3px solid var(--marigold); border-radius:0 10px 10px 0;
  padding:12px 14px; line-height:1.6; overflow-wrap:anywhere;
}
.said-label{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--marigold); margin-bottom:6px; display:block;
}

/* ---------------------------- status pills ---------------------------- */

.pill{
  display:inline-block; font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.06em;
  text-transform:uppercase; padding:3px 9px; border-radius:999px; line-height:1.5;
}
.pill-draft{ background:var(--marigold-wash); color:var(--marigold); }
.pill-confirmed{ background:var(--indigo-wash); color:var(--indigo); }
.pill-corrected{ background:var(--indigo-wash); color:var(--indigo); }
.pill-discarded{ background:var(--rule-soft); color:var(--ink-3); }
/* Phase 1 Unit 7/8: an assigned job a worker reported as not completed --
   the danger tint is deliberate (unlike the neutral pill-discarded), since
   this is the one status on a batch's job list an owner needs to notice. */
.pill-not_done{ background:var(--danger-wash); color:var(--danger); }
/* A built-in seed with no company row yet -- a read-only starter (see
   app.api.console_admin.RecordTypeOut.builtin's docstring). */
.pill-builtin{ background:var(--rule-soft); color:var(--ink-3); margin-left:8px; vertical-align:middle; }

/* ---------------------------- record list ---------------------------- */

.record-row{
  display:block; text-decoration:none; color:inherit;
  background:var(--paper-2); border:1px solid var(--rule); border-radius:12px;
  padding:14px; min-height:var(--tap);
}
.record-row + .record-row{ margin-top:10px; }
.record-row .top{ display:flex; align-items:baseline; gap:8px; }
.record-row .reporter{ font-weight:700; }
.record-row .time{
  margin-left:auto; font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3);
  white-space:nowrap;
}
.record-row .type{ font-family:var(--f-mono); font-size:11px; letter-spacing:0.06em; color:var(--ink-3); text-transform:uppercase; margin-top:2px; }
.record-row .values{ margin-top:8px; display:flex; flex-wrap:wrap; gap:6px 14px; max-width:100%; }
.record-row .fv{ font-size:14.5px; max-width:100%; }
.record-row .fv .k{ color:var(--ink-3); margin-right:4px; }
/* A field value is attacker-influenced text a worker spoke into a voice
   note (see app.api.console_web's escaping rule) -- it can be one long
   run with no spaces (a pasted URL, a code, a name typed with no gaps),
   and normal word-wrap only breaks at whitespace. Without this, one such
   value pushes the whole row (and the page) thousands of pixels wide on
   a 375px phone; overflow-wrap:anywhere lets it break mid-word instead. */
.record-row .fv .v{ color:var(--indigo); font-weight:600; overflow-wrap:anywhere; }

.empty{ color:var(--ink-3); padding:24px 4px; text-align:center; }

/* ---------------------------- filters ---------------------------- */

.filters{
  display:flex; flex-direction:column; gap:10px; margin-bottom:14px;
}
.filters .filter-row{ display:flex; gap:8px; flex-wrap:wrap; }
.filters select, .filters input[type="date"]{ flex:1; min-width:130px; }

/* ---------------------------- forms ---------------------------- */

label{ display:block; font-size:13px; color:var(--ink-2); margin-bottom:5px; font-weight:600; }
.field{ margin-bottom:14px; }
.hint{ font-size:12.5px; color:var(--ink-3); margin-top:5px; }

input[type="text"], input[type="tel"], input[type="number"], input[type="date"],
input[type="file"], select, textarea{
  width:100%; font-family:var(--f-display); font-size:16px; color:var(--ink);
  background:var(--paper-2); border:1px solid var(--rule); border-radius:8px;
  padding:11px 12px; min-height:var(--tap);
}
textarea{ min-height:160px; font-family:var(--f-mono); font-size:14px; resize:vertical; }
input:focus, select:focus, textarea:focus{
  outline:2px solid var(--indigo-lt); outline-offset:1px; border-color:var(--indigo-lt);
}
input:disabled, select:disabled, textarea:disabled, button:disabled{
  opacity:.55; cursor:not-allowed;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-family:var(--f-display); font-size:15px; font-weight:600;
  border-radius:8px; padding:11px 18px; min-height:var(--tap);
  border:1px solid var(--rule); background:var(--paper-2); color:var(--ink);
  cursor:pointer; text-decoration:none;
}
.btn-primary{ background:var(--indigo); border-color:var(--indigo); color:#fff; }
.btn-primary:hover{ background:var(--indigo-lt); border-color:var(--indigo-lt); }
.btn-danger{ background:transparent; border-color:var(--danger); color:var(--danger); }
.btn-block{ width:100%; }
.btn-sm{ padding:7px 12px; font-size:13px; min-height:34px; }
.btn-link{
  background:none; border:none; color:var(--indigo); font-weight:600; padding:4px 0;
  cursor:pointer; font-size:14px; text-decoration:underline;
}

/* ---------------------------- messages ---------------------------- */

.banner{ border-radius:10px; padding:12px 14px; font-size:14.5px; margin-bottom:14px; }
.banner-warn{ background:var(--marigold-wash); color:#6b4a09; border:1px solid var(--marigold); }
.banner-error{ background:var(--danger-wash); color:var(--danger); border:1px solid var(--danger); }
.banner-ok{ background:var(--indigo-wash); color:var(--indigo); border:1px solid var(--indigo); }
:root[data-theme="dark"] .banner-warn, .banner-warn{ color:#7a5710; }

.msg{ font-size:13.5px; margin-top:6px; }
.msg-error{ color:var(--danger); }
.msg-ok{ color:var(--indigo); }

/* ---------------------------- sign-in ---------------------------- */

.signin-wrap{
  max-width:400px; margin:8vh auto 0; padding:0 20px;
}
.signin-wrap .wordmark{
  font-weight:800; font-size:34px; letter-spacing:-0.02em; text-align:center; margin-bottom:28px;
}
.signin-wrap .wordmark .o{ color:var(--indigo); }

/* ---------------------------- record detail ---------------------------- */

/* Stacked (label above value), not side-by-side: a right-aligned value
   column reads fine for a short number but turns unreadable the moment a
   free-text field (notes, next action) wraps to more than one line --
   see the Phase 1 Unit 8/9 mobile self-review. Label, value and the edit
   control all left-align on their own lines instead. */
.field-row{
  display:flex; flex-direction:column; gap:4px;
  padding:12px 0; border-bottom:1px solid var(--rule-soft);
}
.field-row:last-child{ border-bottom:0; }
.field-row .label{ font-size:12.5px; color:var(--ink-3); font-weight:600; }
.field-row .value-line{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; max-width:100%; }
/* Same reason as .record-row .fv .v above: a corrected field's value is
   still attacker/worker-influenced free text, and a single unbroken run
   of it must not be able to force the whole detail page wider than the
   viewport. */
.field-row .value{ text-align:left; flex:1; min-width:0; overflow-wrap:anywhere; }
.field-row .edit-btn{ flex:none; }

.events{ list-style:none; margin:0; padding:0; }
.events li{ display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--rule-soft); font-size:13.5px; }
.events li:last-child{ border-bottom:0; }
.events .ekind{ font-family:var(--f-mono); font-size:11px; text-transform:uppercase; color:var(--indigo); flex:none; min-width:90px; }
.events .etime{ margin-left:auto; font-family:var(--f-mono); font-size:11px; color:var(--ink-3); white-space:nowrap; }

.photo-frame{ border-radius:12px; overflow:hidden; border:1px solid var(--rule); background:var(--rule-soft); }
.photo-frame img{ display:block; width:100%; height:auto; }
.photo-broken{ padding:28px; text-align:center; color:var(--ink-3); font-size:13.5px; }

/* ---------------------------- tables (desktop-friendly, still stack) ---------------------------- */

table.plain{ width:100%; border-collapse:collapse; }
table.plain th, table.plain td{ text-align:left; padding:10px 8px; border-bottom:1px solid var(--rule-soft); font-size:14px; }
table.plain th{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-3); }

/* A table wider than the viewport (many columns, on a phone) scrolls
   sideways inside this wrapper only -- the page body itself must never
   gain a horizontal scrollbar. */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.plain td, table.plain th{ white-space:nowrap; }
/* The "details" column is the one place a table row is allowed to hold
   free-flowing text (field values); it wraps and breaks unbroken runs the
   same way .record-row .fv .v already does, instead of forcing the whole
   table wider still. */
table.plain td.wrap-cell{ white-space:normal; overflow-wrap:anywhere; min-width:200px; }
/* The same "field value" chip as .record-row .fv below, generalised for
   the Details column's plain table cell (not wrapped in .record-row) --
   kept as separate rules rather than renaming the .record-row-scoped ones,
   which an existing test pins by their exact selector text. */
.fv{ font-size:14.5px; }
.fv .k{ color:var(--ink-3); margin-right:4px; }
.fv .v{ color:var(--indigo); font-weight:600; }
table.plain .select-col{ width:1%; white-space:nowrap; padding-right:2px; }
table.plain input[type="checkbox"]{
  width:20px; height:20px; min-height:0; margin:0; cursor:pointer;
}

/* A sortable header is a link, not a button: clicking it is a plain GET
   navigation carrying the current filters (see console_web.py's
   `_sort_href`), consistent with every other filter/pager control in this
   console -- never a client-side re-sort of rows already on the page. */
.sort-link{
  color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:4px;
  white-space:nowrap;
}
.sort-link:hover{ color:var(--indigo); }
.sort-link .arrow{ font-size:9px; color:var(--indigo); }

.selection-bar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--indigo-wash); border:1px solid var(--indigo-lt); border-radius:10px;
  padding:10px 14px; margin-top:10px;
}
.selection-bar .selection-count{ font-weight:700; color:var(--indigo); font-size:13.5px; }
.selection-bar .selection-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; }
/* Unit 9: the same "N selected" bar now appears on staff (card list) and
   reference-list (entry list) pages, not just the records table -- neither
   is a table.plain, so its [data-select-row]/[data-select-all] checkboxes
   need this sizing spelled out here rather than inheriting
   `table.plain input[type="checkbox"]` above. Selector by attribute, not
   by page, so any future selectable list gets the same touch-friendly
   size (`--tap`) for free. */
[data-select-row], [data-select-all]{
  width:20px; height:20px; min-height:0; margin:0; cursor:pointer; flex:none;
}
/* A scrollable box of individually-selectable reference-list entries
   (Unit 9) -- a list can hold hundreds of customer/site names, and this
   keeps that from pushing the rest of the page (and the paste box above
   it) far down the screen on a phone. */
.entry-list{
  max-height:260px; overflow-y:auto; border:1px solid var(--rule); border-radius:8px;
  padding:6px 10px; margin-top:10px; background:var(--paper-2);
}
.entry-row{
  display:flex; align-items:center; gap:8px; padding:6px 0;
  border-bottom:1px solid var(--rule-soft);
}
.entry-row:last-child{ border-bottom:none; }
.entry-row .entry-text{ overflow-wrap:anywhere; font-size:14px; }

/* ---------------------------- toasts ---------------------------- */

.toast-region{
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:14px; pointer-events:none;
}
.toast{
  pointer-events:auto; cursor:pointer; max-width:420px; width:100%;
  background:var(--panel-2); color:var(--panel-ink); border-radius:10px;
  padding:12px 16px; font-size:14px; box-shadow:0 6px 20px rgba(0,0,0,.25);
  border:1px solid var(--panel-rule);
}
.toast-error{ background:var(--danger-wash); color:var(--danger); border-color:var(--danger); }
.toast-warn{ background:var(--marigold-wash); color:#6b4a09; border-color:var(--marigold); }
.toast-ok{ background:var(--indigo); color:#fff; border-color:var(--indigo); }

/* ---------------------------- confirm modal ---------------------------- */

.modal-overlay{
  position:fixed; inset:0; z-index:110; background:rgba(20,22,31,.55);
  display:flex; align-items:flex-end; justify-content:center; padding:16px;
}
.modal-dialog{
  background:var(--paper-2); border-radius:14px; padding:20px; width:100%; max-width:420px;
  box-shadow:0 10px 40px rgba(0,0,0,.3);
}
.modal-title{ font-size:17px; font-weight:800; margin:0 0 8px; }
.modal-body{ font-size:14.5px; color:var(--ink-2); margin:0 0 18px; line-height:1.5; }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; }

/* ---------------------------- focus rings ---------------------------- */

/* Every interactive element gets a visible ring on keyboard focus (not on
   a mouse click, via :focus-visible) -- buttons and links don't inherit
   the input/select/textarea focus rule above on their own. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--indigo-lt); outline-offset:2px;
}

/* Wraps, rather than a strict single row: an ordinary longer Indian name
   (not adversarial input -- just a name with more characters than a demo
   "Ganesh Pawar") otherwise squeezes the role badge and the Deactivate
   button off the right edge of the card. `.who` and `.staff-actions` are
   each allowed their own line so the one destructive action this screen
   has is never the part that gets clipped. */
.staff-card{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; }
.staff-card .who{ flex:1 1 200px; min-width:0; }
.staff-card .name{ font-weight:700; overflow-wrap:anywhere; }
.staff-card .phone{ font-family:var(--f-mono); font-size:12.5px; color:var(--ink-3); }
.staff-card .staff-actions{ display:flex; align-items:center; gap:10px; flex:none; }
/* Not scoped to .staff-card: staff_detail.html (Unit 6b) reuses the same
   badge in its own page header, outside any staff-card. */
.role-badge{
  font-family:var(--f-mono); font-size:10px; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--ink-3); border:1px solid var(--rule); border-radius:5px; padding:2px 6px;
}
.staff-card.inactive{ opacity:.5; }

/* ---------------------------- field editor (record types) ---------------------------- */

.field-editor-row{
  display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--rule-soft);
}
.field-editor-row input[type="text"]{ flex:1; }
.reorder-btn{
  flex:none; width:36px; height:36px; border-radius:6px; border:1px solid var(--rule);
  background:var(--paper-2); font-size:15px; cursor:pointer;
}

/* ---------------------------- laptop layout (secondary case) ---------------------------- */

@media (min-width:820px){
  .appbar{ padding:14px 24px; }
  .appbar-top .wordmark{ font-size:21px; }
  .tabs{ margin-top:14px; }
  main.console-main{ padding:28px 24px 60px; }
  .filters .filter-row{ flex-wrap:nowrap; }
  .filters select, .filters input[type="date"]{ min-width:0; }
  .record-row .values{ gap:8px 22px; }
  .modal-overlay{ align-items:center; }
}