/* ==========================================================================
   CHIQUE Production — theme v4 (loaded after styles.css, overrides it).

   Simple and calm, in the spirit of Apple's own apps: a light grey page,
   white rounded surfaces, one clean typeface, large clear titles, segmented
   switches. Whatever is selected turns black — the tab, the month, the
   filter. The sheets look and move like Numbers / Excel: row numbers and
   headings, gridlines, and the selected cell's whole row and column lit in
   blue. Each stage keeps a quiet colour on its small icon only; status colours
   (done green, late red, due amber, part-done blue) mean the same everywhere.
   ========================================================================== */

:root {
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display: var(--sans);
  --mono: "Inter", -apple-system, "Segoe UI", sans-serif;   /* codes read best in the same face, tabular */

  --page:   #f5f6f8;
  --surface:#ffffff;
  --ink:    #111318;
  --ink-2:  #3b3f4a;
  --ink-3:  #6b7080;
  --ink-4:  #a0a5b2;
  --line:   rgba(15, 23, 42, .08);
  --line-strong: rgba(15, 23, 42, .14);
  --grid:   #eceef2;
  --sheet-line: #d4d4d4;   /* the sheets' cell lines: Excel's own grey */
  --sheet-edge: #b9b9b9;   /* heading row, row numbers and frozen columns */
  --fill:   #f1f2f5;
  --fill-2: #e6e8ee;
  --black:  #111318;
  --blue:   #0a84ff;

  --production: #5b5bd6; --planning: #0f8a7e; --adda: #d6336c; --fabric: #c2620a; --wip: #8b4fd0; --images: #0b7fc0;
  --accent: var(--production);

  /* the sheet's selection, as in Numbers */
  --sel-line: #0a84ff;
  --sel-row:  #e8f1ff;
  --sel-head: #cfe2ff;
  --sel-ink:  #0a64d6;

  /* status (never themed) */
  --st-done: #1f8a46;  --st-done-bg: #e9f7ef;  --st-done-line: #b9e3c6;
  --st-late: #d92d20;  --st-late-bg: #fef1f0;  --st-late-line: #fecdca;
  --st-due:  #b54708;  --st-due-bg:  #fff6e6;  --st-due-line:  #fedf89;
  --st-part: #0a64d6;  --st-part-bg: #eef5ff;  --st-part-line: #c2dbff;
  --st-check:#6b7080;  --st-check-bg:#f1f2f5;  --st-check-line:#d0d5dd;

  --r-sm: 9px; --r-md: 11px; --r-lg: 16px; --r-xl: 20px;
  --sh-card: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .05);
  --sh-hover: 0 10px 28px rgba(16, 24, 40, .09), 0 2px 6px rgba(16, 24, 40, .05);
  --sh-pop: 0 18px 50px rgba(16, 24, 40, .16), 0 3px 10px rgba(16, 24, 40, .07);

  /* motion: one ease for things arriving, one spring for things that move */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.32, .72, 0, 1);

  /* chart series + status (dataviz reference palette, validated) */
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a;
  --good: #34c759; --warning: #ffb340; --serious: #ff8a5c; --critical: #ff3b30; --none: #c7c7cc;
}
body[data-section="planning"] { --accent: var(--planning); }
body[data-section="adda"]     { --accent: var(--adda); }
body[data-section="fabric"]   { --accent: var(--fabric); }
body[data-section="wip"]      { --accent: var(--wip); }
body[data-section="photos"]   { --accent: var(--images); }

body {
  font-family: var(--sans); font-size: 14px; color: var(--ink); letter-spacing: -.006em;
  background: var(--page); background-image: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01", "ss03"; text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-family: var(--display); letter-spacing: -.022em; font-weight: 700; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
input:focus, select:focus, .fs-field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(10, 132, 255, .16);
}
input[type=text], input[type=search], input[type=password], input:not([type]) { border-radius: var(--r-sm); }
::selection { background: #cfe2ff; }
.ico { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: middle; }
.ico-sm { width: 15px; height: 15px; }
.ico-lg { width: 30px; height: 30px; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
button { -webkit-tap-highlight-color: transparent; }
.ghost, .tb-btn {
  background: #fff; border: 1px solid var(--line-strong); color: var(--ink);
  padding: 7px 13px; border-radius: var(--r-sm); font-size: 13px; font-weight: 550;
  transition: background .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease;
  box-shadow: 0 1px 1px rgba(16, 24, 40, .03);
}
.ghost:hover, .tb-btn:hover { background: #fafbfc; border-color: rgba(15, 23, 42, .2); }
.primary, .primary.go {
  background: var(--black); color: #fff; border: 0;
  padding: 8px 15px; border-radius: var(--r-sm); font-size: 13px; font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.primary:hover, .primary.go:hover { background: #2a2d35; filter: none; }
.ghost:active, .primary:active, .tb-btn:active, .btn-edit:active, .month-step:active:not(:disabled) { transform: scale(.97); }
.has-ico { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* ── Header: brand, one segmented switch for the stages, sign-in ─────── */
.topbar {
  position: sticky; top: 0; z-index: 100; min-height: 60px;
  padding: 10px 24px; gap: 18px; border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
.brand { display: inline-flex; flex-direction: row; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); flex: none; }
.brand-mark { height: 25px; width: auto; display: block; }
.brand-word { height: 14px; width: auto; display: block; margin-top: 1px; }
.brand-sub {
  font-size: 12px; font-weight: 500; color: var(--ink-3); padding-left: 10px; margin-left: 2px;
  border-left: 1px solid var(--line-strong); line-height: 16px;
}
.brand .mark, .brand .sub { display: none; }
.stage-sep, .step { display: none; }

/* the stages: a toggle — the black pill slides to the one picked (motion.js) */
.stage-tabs {
  position: relative; gap: 2px; background: rgba(15, 23, 42, .055); padding: 4px; border-radius: 13px;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .03);
}
.stage-tabs .tab {
  position: relative; display: inline-flex; align-items: center; gap: 7px; border: 0;
  background: transparent; color: var(--ink-2); padding: 7px 14px; border-radius: 9px; height: 34px;
  font-weight: 550; font-size: 13.5px; box-shadow: none; transition: color .25s ease, background .2s ease;
}
.stage-tabs .tab .tab-ico { width: 16px; height: 16px; opacity: .85; transition: opacity .2s ease; }
.stage-tabs .tab:hover { color: var(--ink); background: rgba(255, 255, 255, .65); }
.stage-tabs .tab::before, .stage-tabs .tab.is-on::after { display: none; }
.stage-tabs .tab.is-on { background: var(--black); color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.stage-tabs .tab.is-on .tab-ico { opacity: 1; }
.who { gap: 8px; align-items: center; }
.who-text { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; color: var(--ink-3); }
body.signed-in .who-text { color: var(--st-done); }
.who-name { width: 120px !important; padding: 6px 9px !important; font-size: 13px !important; }
#btn-logout, #btn-history { display: inline-flex; align-items: center; gap: 6px; }
#btn-logout[hidden] { display: none; }
.t-short { display: none; }

/* "Saving… / All changes saved", like a document editor */
.save-state {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 550; color: var(--ink-3);
  padding: 4px 10px; border-radius: 999px; background: var(--fill); transition: opacity .6s ease, background .2s ease;
  animation: fade-in .2s ease both;
}
.save-state[hidden] { display: none; }
.save-state.is-saving .ico { animation: bob 1s ease-in-out infinite; }
.save-state.is-saved { color: var(--st-done); background: var(--st-done-bg); }
.save-state.is-saved.is-fade { opacity: 0; }
.save-state.is-offline { color: var(--st-late); background: var(--st-late-bg); }
.save-state.is-error { color: var(--st-late); background: var(--st-late-bg); font-weight: 650; }
.save-state.is-unsaved { color: #8a5a00; background: #fff4d6; }

main, .wide-main, #view-fabric.is-table { max-width: 1760px; padding: 18px 24px 26px; }

/* ── Page title row (each stage) ──────────────────────────────────────── */
.strip-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  background: transparent; border: 0; padding: 2px 0 0; margin: 0 0 14px; min-height: 44px;
}
.sh-icon {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex: none;
  color: var(--accent); background: #fff; box-shadow: var(--sh-card);
  background: color-mix(in srgb, var(--accent) 11%, #fff);
}
.sh-icon .ico { width: 20px; height: 20px; }
.sh-icon .doodle { width: 32px; height: 20px; }
.sh-title { font-size: 26px; font-weight: 700; letter-spacing: -.03em; margin: 0 4px 0 0; white-space: nowrap; }
.sh-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.sh-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--ink-3); font-size: 13px; margin-left: auto; }
.sh-fact b { color: var(--ink); font-weight: 650; margin-right: 4px; font-variant-numeric: tabular-nums; }
.sh-fact.is-late b { color: var(--st-late); }
.sh-right { display: flex; gap: 8px; }
.sh-editing { font-size: 12px; color: var(--ink-3); }
.picker {
  appearance: none; font: inherit; font-weight: 600; font-size: 13px; color: var(--ink);
  height: 34px; padding: 0 30px 0 12px; border-radius: var(--r-sm); border: 1px solid var(--line-strong);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%233b3f4a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center;
  cursor: pointer; max-width: 100%;
}
.btn-edit {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: #fff; color: var(--ink); font-weight: 600; font-size: 13px;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .12s ease;
}
.btn-edit:hover { background: #fafbfc; }
.btn-edit.is-on { background: var(--black); color: #fff; border-color: var(--black); }

/* ── Segmented switches (months, show-filters) ─────────────────────────── */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: rgba(15, 23, 42, .055); }
.seg-btn {
  display: inline-flex; align-items: baseline; gap: 6px; border: 0; background: transparent; color: var(--ink-2);
  padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 550; white-space: nowrap;
  transition: color .25s ease, background .2s ease;
}
.seg-btn:hover { background: rgba(255, 255, 255, .7); color: var(--ink); }
.seg-btn.is-on { background: var(--black); color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.seg-sub { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; transition: color .25s ease; }
.seg-sub.is-late { color: var(--st-late); }
.seg-btn.is-on .seg-sub { color: rgba(255, 255, 255, .72); }
.seg-btn.is-on .seg-sub.is-late { color: #ffb3b3; }

/* the sliding pill behind the chosen tab of any toggle group (motion.js) */
.has-pill { isolation: isolate; }
.has-pill:not(.stage-tabs) { position: relative; }
.has-pill > :not(.pill-bg) { position: relative; z-index: 1; }
.has-pill > .is-on, .has-pill > label:has(input:checked) { background: transparent !important; box-shadow: none !important; }
.pill-bg {
  position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; border-radius: 9px;
  background: var(--black); box-shadow: 0 1px 2px rgba(0, 0, 0, .22), 0 6px 14px rgba(17, 19, 24, .16);
  transition: transform .45s var(--spring), width .45s var(--spring), height .45s var(--spring), opacity .2s ease;
  will-change: transform, width;
}
.seg .pill-bg, .subtabs .pill-bg, .filters .pill-bg { border-radius: 8px; }

/* ── Filter row above a sheet ─────────────────────────────────────────── */
.sheet-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.tb-search-wrap { position: relative; display: inline-flex; align-items: center; margin: 0; }
.tb-search-wrap > .ico { position: absolute; left: 11px; color: var(--ink-4); pointer-events: none; }
.tb-search {
  height: 34px; width: 250px !important; padding: 0 12px 0 33px !important; font-size: 13px !important;
  border: 1px solid var(--line-strong) !important; border-radius: var(--r-sm) !important; background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease, width .3s var(--ease-out);
}
.tb-search:focus { width: 300px !important; }
.tb-select {
  position: relative; display: inline-flex; align-items: center; height: 34px; margin: 0; border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); background: #fff; overflow: hidden; font-size: 13px; color: var(--ink-3);
  transition: border-color .15s ease;
}
.tb-select:hover { border-color: rgba(15, 23, 42, .22); }
.tb-label { padding: 0 2px 0 11px; white-space: nowrap; }
.tb-select select {
  appearance: none; border: 0; background: transparent;
  font: inherit; font-weight: 600; color: var(--ink); padding: 0 28px 0 4px; height: 100%; cursor: pointer;
}
.tb-caret { position: absolute; right: 9px; color: var(--ink-3); pointer-events: none; }
.tb-select select:focus { box-shadow: none; }
.tb-select:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(10, 132, 255, .14); }
.sheet-bar .check { font-size: 13px; color: var(--ink-2); display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.sheet-tip { font-size: 12px; color: var(--ink-4); margin-left: auto; }
.tb-btn { height: 34px; }

/* ── The sheet ──────────────────────────────────────────────────────── */
.gsheet-wrap {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-card);
  overflow: auto; position: relative; max-height: none;
  scroll-padding: 40px 0 44px 0;      /* rows scrolled into view clear the pinned heading and new row */
}
.gsheet-wrap.is-editing { border-color: rgba(10, 132, 255, .45); box-shadow: 0 0 0 3px rgba(10, 132, 255, .10); }
table.gsheet { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 13px; }
table.gsheet th {
  position: sticky; top: 0; z-index: 3; background: #fafafb; color: var(--ink-2);
  font-weight: 600; font-size: 12px; text-align: left; white-space: nowrap;
  padding: 9px 9px; border-bottom: 1px solid var(--sheet-edge); border-right: 1px solid var(--sheet-line);
}
table.gsheet td {
  padding: 4px 9px; border-bottom: 1px solid var(--sheet-line); border-right: 1px solid var(--sheet-line);
  vertical-align: middle; background: #fff; white-space: nowrap; height: 34px;
}
table.gsheet th.num, table.gsheet td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.gsheet .gutter {
  position: sticky; left: 0; z-index: 2; width: 44px; text-align: center; color: var(--ink-4);
  background: #fafafb; font-size: 11px; font-variant-numeric: tabular-nums; cursor: default;
  border-right: 1px solid var(--sheet-edge); padding: 0 4px;
}
table.gsheet th.gutter { z-index: 5; }
table.gsheet .sticky { position: sticky; z-index: 2; }
table.gsheet th.sticky { z-index: 4; }
table.gsheet .s0 { left: 44px; box-shadow: 1px 0 0 var(--sheet-edge); }
table.gsheet tbody tr:hover td { background: #fbfbfd; }
table.gsheet tbody tr:hover td.gutter { background: #f1f1f4; }
table.gsheet tbody td.rc-alt { background-color: #fbfbfd; }

/* selection: the cell, its whole row and column, and their number and heading light up
   (after the hover rules, and as specific, so the mouse never hides them) */
table.gsheet tbody tr.is-row td, table.gsheet tbody tr td.is-col, table.gsheet tbody tr:hover td.is-col { background: var(--sel-row); }
table.gsheet tbody tr.is-row td.gutter, table.gsheet tbody tr.is-row:hover td.gutter { background: var(--sel-head); color: var(--sel-ink); font-weight: 700; }
table.gsheet th.is-col { background: var(--sel-head); color: var(--sel-ink); box-shadow: inset 0 -2px 0 var(--sel-line); }
table.gsheet td.is-sel { outline: 2px solid var(--sel-line); outline-offset: -2px; background: #fff !important; }
table.gsheet td:focus { outline: 2px solid var(--sel-line); outline-offset: -2px; }
.gsheet-wrap.is-editing td.is-editable { cursor: cell; }
.gsheet-wrap.is-editing td.is-editable:hover { background: #f4f8ff; }
td.is-open { outline: 2px solid var(--sel-line); outline-offset: -2px; }
td.is-saving { opacity: .55; }
td.is-saved { background: #e9f7ee !important; transition: background 1.2s ease; }
td.is-error { outline: 2px solid var(--st-late); outline-offset: -2px; background: var(--st-late-bg) !important; }
.gsheet-empty { padding: 40px 16px; text-align: center; color: var(--ink-3); }
.gsheet-empty.is-under-draft { padding: 18px 16px; }

/* the empty row pinned at the bottom: where a new entry is typed, always in reach */
table.gsheet tr.is-draft td {
  position: sticky; bottom: 0; z-index: 2; background: #f7faff; border-bottom: 0;
  box-shadow: inset 0 1px 0 #c9dcff;
}
table.gsheet tr.is-draft td.gutter, table.gsheet tr.is-draft td.sticky { z-index: 3; }
table.gsheet tr.is-draft td.gutter { color: var(--blue); font-weight: 700; font-size: 15px; background: #eaf2ff; }
.draft-hint { color: var(--ink-4); font-style: italic; font-size: 12.5px; }
.draft-hint.is-req { font-size: 11.5px; color: #8ab4f0; }
table.gsheet tr.is-draft td.is-editable:hover { background: #e6f0ff; }
table.gsheet td.is-need { box-shadow: inset 0 0 0 2px var(--st-due-line); background: var(--st-due-bg); }
table.gsheet tr.is-new td { animation: arrive 1.6s ease; }
@keyframes arrive { from { background: #e3f6e8; } }

/* the green Save stays at the right edge, wherever the sheet is scrolled */
table.gsheet .c-save { position: sticky; right: 0; z-index: 2; padding: 3px 6px; background: #fff;
  box-shadow: -1px 0 0 var(--sheet-edge); white-space: nowrap; text-align: center; }
table.gsheet th.c-save { z-index: 4; background: #fafbfc; }
table.gsheet tr.is-draft td.c-save { z-index: 3; }
/* Phones: the frozen columns slim down (row number, style code and photo,
   Save as a tick) so the cell being changed has room beside them. */
@media (max-width: 760px) {
  table.gsheet col.col-gutter { width: 26px !important; }
  table.gsheet .gutter { width: 26px; padding: 0 2px; font-size: 10px; }
  table.gsheet .s0 { left: 26px; }
  table.gsheet col.col-sticky { width: 124px !important; }
  table.gsheet td.sticky .cell-name { display: none; }
  table.gsheet td.sticky .cell-code, table.gsheet td.sticky .draft-hint {
    display: block; max-width: 84px; overflow: hidden; text-overflow: ellipsis;
  }
  table.gsheet col.col-save { width: 78px !important; }
  table.gsheet .btn-save { padding: 0 9px; }
  table.gsheet .btn-save span { display: none; }
}

/* cells */
.cell-style { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cell-style .ph { width: 20px; height: 26px; border-radius: 5px; border: 0; }
.cell-code { font-weight: 600; font-size: 13px; display: block; line-height: 1.25; }
.cell-name { color: var(--ink-3); font-size: 11.5px; display: block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.cell-date { display: flex; align-items: baseline; gap: 6px; line-height: 1.2; }
.cell-date .d { font-weight: 500; font-variant-numeric: tabular-nums; }
.cell-date .d.note { font-weight: 500; text-transform: capitalize; font-size: 12px; display: inline-block; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.cell-date .why { font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
td.s-done .d { color: var(--ink-3); } td.s-done .why { color: var(--st-done); }
td.s-late { background: #fff6f6; } td.s-late .d, td.s-late .why { color: var(--st-late); font-weight: 600; }
td.s-due { background: #fffaf0; } td.s-due .why, td.s-due .v { color: var(--st-due); font-weight: 600; }
td.s-partial .why { color: var(--st-part); }
/* the date has passed and nothing can confirm it yet: quiet, not alarming */
td.s-check .d, .legend-check { color: var(--ink-3); font-style: italic; font-weight: 400; }
.cell-muted { color: var(--ink-4); }
.cell-now { white-space: nowrap; display: flex; align-items: center; gap: 7px; max-width: 290px; overflow: hidden; font-size: 12.5px; }
.cell-now .block { display: inline; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.cell-notes { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; color: var(--ink-2); font-size: 12.5px; }
.row-tools { display: inline-flex; gap: 2px; }
.row-tools button { border: 0; background: none; color: var(--ink-3); padding: 4px 6px; border-radius: 6px; font-size: 13px; }
.row-tools button:hover { background: var(--fill); color: var(--ink); }
.ov { padding: 2px 8px; font-size: 11px; font-weight: 600; border-radius: 6px; }
.ov-late { background: var(--st-late-bg); color: var(--st-late); }
.ov-watch { background: var(--st-due-bg); color: var(--st-due); border: 0; }
.ov-on_track { background: var(--st-part-bg); color: var(--st-part); }
.ov-done { background: var(--st-done-bg); color: var(--st-done); }

/* adda: the received pairs read as one group per receipt */
table.gsheet td.rc-empty.is-editable { background-image: linear-gradient(transparent calc(100% - 1px), #c2dbff 0); }
table.gsheet td.bal-out { font-weight: 700; }
table.gsheet td.bal-zero { color: var(--ink-4); }
.ad-st { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; margin-left: 0; }
.ad-received { background: var(--st-done-bg); color: var(--st-done); }
.ad-overdue { background: var(--st-late-bg); color: var(--st-late); }
.ad-due { background: var(--st-due-bg); color: var(--st-due); }
.ad-open { background: var(--st-part-bg); color: var(--st-part); }
.ad-few_left { background: var(--fill); color: var(--ink-3); }

/* the vendor strip: analysis at a glance, and the vendor filter */
.vendor-strip { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 12px; scrollbar-width: thin; }
.vcard {
  flex: none; display: flex; flex-direction: column; gap: 3px; min-width: 158px; text-align: left;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: #fff;
  box-shadow: var(--sh-card); font: inherit; color: inherit; transition: transform .12s ease;
}
.vcard:hover { transform: translateY(-1px); }
.vcard.is-on { background: var(--black); color: #fff; border-color: var(--black); }
.vcard-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.vcard-name { font-weight: 600; font-size: 13px; white-space: nowrap; }
.vcard-late { font-size: 11px; font-weight: 700; color: var(--st-late); white-space: nowrap; }
.vcard.is-on .vcard-late { color: #ffb3b3; }
.vcard-num { font-size: 17px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.vcard-bar { display: block; height: 4px; border-radius: 2px; background: var(--fill-2); overflow: hidden; }
.vcard-bar > span { display: block; height: 100%; background: var(--st-done); border-radius: 2px; }
.vcard.is-on .vcard-bar { background: rgba(255, 255, 255, .2); }
.vcard-sub { font-size: 11.5px; color: var(--ink-3); }
.vcard.is-on .vcard-sub { color: rgba(255, 255, 255, .7); }

/* the editor that drops down from a cell */
.cell-pop {
  position: absolute; z-index: 500; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--sh-pop); padding: 6px; max-width: 340px; animation: pop .1s ease;
}
.cell-input {
  width: 100%; border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 10px;
  font: inherit; font-size: 14px; color: var(--ink); background: #fff;
}
.cell-list { max-height: 290px; overflow-y: auto; margin-top: 6px; display: flex; flex-direction: column; }
.cell-opt {
  display: flex; justify-content: space-between; gap: 10px; text-align: left; border: 0; background: none;
  padding: 7px 10px; border-radius: 7px; font-size: 13.5px; color: var(--ink);
}
.cell-opt:hover { background: var(--fill); }
.cell-opt.is-active { background: var(--blue); color: #fff; }
.cell-opt.is-active .cell-sub { color: rgba(255, 255, 255, .8); }
.cell-opt.is-current { font-weight: 600; }
.cell-opt.is-current::after { content: "✓"; }
.cell-opt.is-clear { color: var(--ink-3); font-style: italic; }
.cell-opt.is-add { color: var(--blue); font-weight: 600; border-top: 1px solid var(--line); margin-top: 4px; justify-content: flex-start; border-radius: 0 0 7px 7px; }
.cell-opt.is-add.is-active { color: #fff; }
.cell-opt .plus {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--blue); color: #fff; font-size: 13px; line-height: 1;
}
.cell-opt.is-add.is-active .plus { background: #fff; color: var(--blue); }
.cell-sub { color: var(--ink-3); font-size: 12px; }
.cell-none { padding: 10px; color: var(--ink-3); font-size: 13px; }
.cell-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip { border: 0; background: var(--fill); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12px; color: var(--ink); }
.cell-msg { font-size: 12px; color: var(--ink-3); padding: 5px 2px 0; min-height: 0; max-width: 300px; white-space: normal; }
.cell-msg:empty { display: none; }
.cell-msg.is-bad { color: var(--st-late); }
.cell-msg.is-warn { color: var(--st-due); font-weight: 600; }
.cell-pop:focus { outline: none; }
.chip:hover { background: var(--black); color: #fff; }
/* the calendar under a date box (grid.js): a click picks the day */
.cell-pop.is-date { width: 272px; }
.cal { margin-top: 8px; user-select: none; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 4px; }
.cal-title { font-size: 13.5px; font-weight: 650; color: var(--ink); }
.cal-nav {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink-2); cursor: pointer;
}
.cal-nav:hover { background: var(--fill); color: var(--ink); }
.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-wd { text-align: center; font-size: 11px; font-weight: 600; color: var(--ink-3); padding: 2px 0 4px; }
.cal-wd.is-sun { color: var(--st-late); }
.cal-day {
  height: 32px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 13px;
  color: var(--ink); font-variant-numeric: tabular-nums; cursor: pointer;
}
.cal-day:hover { background: var(--fill); }
.cal-day.is-sun { color: var(--st-late); }
.cal-day.is-out { color: var(--ink-4); }
.cal-day.is-out.is-sun { color: color-mix(in srgb, var(--st-late) 45%, #fff); }
.cal-day.is-today { box-shadow: inset 0 0 0 1.5px var(--blue); font-weight: 650; }
.cal-day.is-on, .cal-day.is-on:hover { background: var(--black); color: #fff; font-weight: 650; }
.cal-day:focus-visible, .cal-nav:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.cell-pop.is-date .cell-chips { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 6px; flex-wrap: nowrap; gap: 5px; }
.cell-pop.is-date .chip { padding: 4px 9px; white-space: nowrap; }
.cell-pop.is-date .chip:last-child { margin-left: auto; color: var(--ink-3); }
@media (max-width: 560px) { .cal-day { height: 38px; } }

/* ── Production home ─────────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.kpi {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-card);
  padding: 14px 16px; text-align: left; font: inherit; color: inherit;
}
button.kpi:hover { background: #fcfcfd; }
.kpi-label { display: block; font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
.kpi-value { display: block; font-size: 26px; font-weight: 700; line-height: 1.2; margin-top: 2px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi-sub { display: block; font-size: 12px; color: var(--ink-3); }
.kpi.is-late .kpi-value { color: var(--st-late); }
.kpi.is-done .kpi-value { color: var(--st-done); }
.home-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.home-card {
  grid-column: span 6; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-card); padding: 16px 18px; min-width: 0;
}
.home-card.wide { grid-column: span 12; }
.home-card h2 { font-size: 15px; margin-bottom: 2px; letter-spacing: -.01em; }
.home-card .sub { color: var(--ink-3); font-size: 12.5px; margin-bottom: 12px; }
.month-pick { display: inline-flex; align-items: center; gap: 4px; }
.month-step {
  width: 32px; height: 32px; border-radius: var(--r-sm); border: 1px solid var(--line-strong);
  background: #fff; color: var(--ink); font-size: 17px; line-height: 1;
}
.month-step:hover:not(:disabled) { background: var(--black); color: #fff; border-color: var(--black); }
.month-step:disabled { opacity: .35; cursor: default; }
.stations { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.station { padding: 2px 14px 6px; border-right: 1px solid var(--line); min-width: 0; }
.station:last-child { border-right: 0; }
.station-label { font-size: 12.5px; color: var(--ink-3); font-weight: 500; }
.station-num { font-size: 26px; font-weight: 700; line-height: 1.2; display: block; letter-spacing: -.02em; }
.station-sub { font-size: 12px; color: var(--ink-3); }
.station-bar { height: 5px; border-radius: 3px; background: var(--fill-2); margin-top: 8px; overflow: hidden; }
.station-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--production); }
.hbars { display: flex; flex-direction: column; gap: 9px; }
.hbar { display: grid; grid-template-columns: minmax(90px, 150px) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 12.5px; }
.hbar-label { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { display: flex; gap: 2px; height: 10px; }
.hbar-seg { height: 100%; border-radius: 0; min-width: 2px; }
.hbar-seg:last-child { border-radius: 0 5px 5px 0; }
.hbar-val { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; min-width: 56px; text-align: right; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -2px 0 10px; font-size: 12px; color: var(--ink-2); }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.stack100 { display: flex; height: 16px; border-radius: 8px; overflow: hidden; gap: 2px; margin: 4px 0 12px; }
.stack100 > span { height: 100%; }
.plan-bar-name { font-size: 12.5px; font-weight: 600; margin: 8px 0 6px; color: var(--ink); }
.fab-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px 16px; }
.fab-legend-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.fab-legend-row i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.fab-legend-row b { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; }
.attn { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.attn-card {
  display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 10px; font: inherit; color: inherit;
  border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--sh-card);
}
.attn-card:hover { background: #fcfcfd; }
.attn-card .ph { width: 40px; height: 54px; border-radius: 8px; }
.attn-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.attn-why { color: var(--st-late); font-weight: 600; font-size: 12.5px; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.week-day { display: flex; flex-direction: column; gap: 5px; padding: 9px; min-height: 100px; border-radius: 12px; background: var(--fill); min-width: 0; }
.week-day.is-today { background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong); }
.week-day.is-today .week-head { color: var(--ink); font-weight: 700; }
.week-head { font-weight: 600; font-size: 12.5px; color: var(--ink); }
.week-item { display: flex; flex-direction: column; text-align: left; border: 0; border-radius: 8px; background: #fff; padding: 6px 8px; font: inherit; font-size: 11.5px; color: var(--ink-2); box-shadow: var(--sh-card); }
.week-item b { font-size: 12px; color: var(--ink); }
.week-item:hover { box-shadow: inset 0 0 0 1.5px var(--blue); }
.week-none { color: var(--ink-4); }
.viz-tip { position: fixed; z-index: 600; pointer-events: none; background: rgba(29, 29, 31, .92); color: #fff; padding: 6px 10px; border-radius: 8px; font-size: 12px; max-width: 260px; line-height: 1.35; }
@media (max-width: 1100px) { .home-card { grid-column: span 12; } .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .week { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Other stages ─────────────────────────────────────────────────────── */
.stat { border-radius: var(--r-lg); box-shadow: var(--sh-card); border: 1px solid var(--line); padding: 13px 15px; }
.stat dt { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.stat dd { font-family: var(--sans); font-size: 24px; letter-spacing: -.02em; }
.subtabs { background: rgba(118, 118, 128, .12); border-radius: 10px; padding: 3px; margin-bottom: 12px; }
.subtab { padding: 5px 13px; font-size: 13px; font-weight: 500; border-radius: 8px; color: var(--ink); }
.subtab.is-on { background: var(--black); color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.filters { background: rgba(118, 118, 128, .12); border-radius: 10px; padding: 3px; }
.filters label:has(input:checked) { background: var(--black); color: #fff; box-shadow: none; }
.filters label:has(input:checked) .pill { background: rgba(255, 255, 255, .2); color: #fff; }
.panel, .viz-card, .table-wrap { border-radius: var(--r-lg); box-shadow: var(--sh-card); border-color: var(--line); }
table.prod thead th, table.fab thead th {
  background: #fafafb; color: var(--ink-2); font-family: var(--sans); font-size: 12px;
  letter-spacing: 0; text-transform: none; border-bottom: 1px solid #dcdce0;
}
td.prod-jc { font-family: var(--sans); font-size: 13px; }
.fresh {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line-strong); font-size: 12.5px; font-weight: 500; color: var(--ink-2);
}
.fresh::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.fresh.is-old { border-color: var(--st-due-line); background: var(--st-due-bg); color: var(--st-due); }
.fresh.is-old::before { background: var(--st-due); }
.finder {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: end;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-card); padding: 14px 16px; margin-bottom: 12px;
}
.finder label { margin: 0 0 4px; font-size: 12.5px; }
.finder-result { grid-column: 1 / -1; display: flex; gap: 14px; align-items: center; }
.finder-result:empty { display: none; }
.finder-result img { width: 80px; height: 106px; object-fit: cover; border-radius: 10px; }
.finder-msg { font-weight: 600; margin: 0 0 8px; }
.finder-msg.ok { color: var(--st-done); } .finder-msg.warn { color: var(--st-due); } .finder-msg.err { color: var(--st-late); }
.finder-next { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.show-more { grid-column: 1 / -1; justify-self: center; margin: 12px 0; }
.fs-sub { font-size: 14px; margin: 16px 0 6px; }
.sheet-inner { border-radius: 18px; }
body:not(.wip-editing) #prod-table input, body:not(.wip-editing) #prod-table textarea {
  border-color: transparent; background: transparent; box-shadow: none; padding-left: 0;
}
body:not(.wip-editing) #savebar { display: none !important; }
body:not(.can-images) .st-add,
body:not(.can-images) .card .foot .ph-act { display: none; }
body:not(.signed-in) #fab-checks-panel { display: none; }
.hist-label { font-family: var(--sans); font-weight: 600; }
.empty-state { text-align: center; padding: 60px 20px; background: #fff; border-radius: var(--r-xl); box-shadow: var(--sh-card); display: flex; flex-direction: column; align-items: center; gap: 8px; }

/* phone cards (Planning, Adda) */
.card-list { display: flex; flex-direction: column; gap: 8px; }
.style-card {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  width: 100%; text-align: left; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--line); background: #fff; box-shadow: var(--sh-card); font: inherit; color: inherit;
}
.style-card .ph { width: 42px; height: 56px; border-radius: 8px; }
.style-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.style-card-body .cell-name { max-width: none; }
.style-card-now { font-size: 12.5px; color: var(--ink-2); }
.style-card-next { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.style-card.ov-row-late { box-shadow: inset 3px 0 0 var(--st-late), var(--sh-card); }
.style-card.ov-row-late .style-card-next { color: var(--st-late); }
.style-card.ov-row-done { box-shadow: inset 3px 0 0 var(--st-done), var(--sh-card); }

.card-wrap { display: flex; flex-direction: column; gap: 0; }
.quick-rcv {
  margin: -6px 6px 4px; padding: 14px 12px 10px; background: #fff; border: 1px solid var(--line);
  border-top: 0; border-radius: 0 0 12px 12px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.quick-row { display: flex; gap: 8px; width: 100%; }
.quick-row .cell-input { flex: 1; font-size: 17px; padding: 10px 12px; }
.quick-row .primary { min-width: 56px; font-size: 18px; border-radius: 10px; }

/* ── Phones ──────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body { padding-bottom: 80px; }
  main, .wide-main { padding: 12px 12px 20px; }
  .topbar { flex-wrap: nowrap; padding: 8px 12px; -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; }
  .stage-tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; order: 0; width: auto; border-radius: 0;
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px;
    background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .stage-tabs .tab { flex-direction: column; justify-content: center; gap: 4px; padding: 6px 2px; font-size: 10.5px; min-height: 50px; }
  .t-long { display: none; } .t-short { display: inline; }
  #btn-history, .who-text { display: none; }
  .sh-title { font-size: 22px; }
  .sh-facts { margin-left: 0; width: 100%; }
  .sh-controls { width: 100%; }
  .month-pick { width: 100%; }
  .month-pick .picker { flex: 1; min-width: 0; }
  .month-pick .picker.pl-year { flex: none; }
  .tb-search { width: 100% !important; }
  .sheet-tip { display: none; }
  .gsheet-wrap { max-height: 70vh; }
  .stations { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; }
  .station:nth-child(3) { border-right: 0; }
  .finder { grid-template-columns: 1fr; }
  .sh-facts { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; }
}

/* ==========================================================================
   v4 — motion and finish (11 Oct 2026)
   Everything that moves animates only transform and opacity, so it stays at
   60 fps on a phone; all of it stops for "reduce motion".
   ========================================================================== */

/* a page slides in from the side of the tab that was picked */
@keyframes v-in   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes v-in-r { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes v-in-l { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.v-in   { animation: v-in .34s var(--ease-out) both; }
.v-in-r { animation: v-in-r .38s var(--ease-out) both; }
.v-in-l { animation: v-in-l .38s var(--ease-out) both; }

/* cards rise in one after another */
@keyframes m-rise { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.m-rise { animation: m-rise .5s var(--ease-out) both; }

/* bars grow from the left the first time a page is drawn */
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.animate-in .hbar-seg, .animate-in .station-bar > span, .animate-in .stack100 > span, .animate-in .vcard-bar > span {
  transform-origin: left center; animation: grow .9s var(--ease-out) both; animation-delay: .12s;
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* cards that open something lift a little under the mouse */
button.kpi, .vcard, .attn-card, .week-item, .style-card {
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .2s ease;
}
button.kpi:hover, .attn-card:hover, .style-card:hover { transform: translateY(-2px); box-shadow: var(--sh-hover); }
.vcard:hover { transform: translateY(-2px); box-shadow: var(--sh-hover); }
.week-item:hover { transform: translateY(-1px); }
button.kpi:active, .vcard:active, .attn-card:active, .style-card:active { transform: scale(.985); }

/* cards: softer corners, hairline borders */
.kpi, .home-card, .panel, .viz-card, .table-wrap, .finder, .empty-state, .stat { border-radius: var(--r-lg); }
.kpi { padding: 15px 17px; }
.kpi-value { font-size: 28px; letter-spacing: -.03em; }
.home-card { padding: 18px 20px; }
.home-card h2 { font-size: 15px; font-weight: 650; }
.vcard { border-radius: 14px; }
.vcard-num { font-size: 18px; letter-spacing: -.02em; }
.vcard-num b { font-weight: 700; }
.gsheet-wrap { border-radius: var(--r-lg); scrollbar-width: thin; scrollbar-color: #c9cdd6 transparent; }
.gsheet-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.gsheet-wrap::-webkit-scrollbar-thumb { background: #cfd3db; border-radius: 10px; border: 3px solid #fff; }
.gsheet-wrap::-webkit-scrollbar-thumb:hover { background: #b5bac5; }
table.gsheet th { background: #fafbfc; }

/* the row tools: line icons, quiet until hovered */
.row-tools { gap: 1px; }
.row-tools button { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 7px; color: var(--ink-3); transition: background .15s ease, color .15s ease, transform .12s ease; }
.row-tools button:hover { background: var(--fill); color: var(--ink); }
.row-tools button:active { transform: scale(.92); }
.row-tools button.is-zap:hover { color: #b54708; background: var(--st-due-bg); }
.row-tools button.is-danger:hover { color: var(--st-late); background: var(--st-late-bg); }
.month-step { display: inline-grid; place-items: center; }

/* the cell editor pops, the dropdown list breathes */
@keyframes pop-in { from { opacity: 0; transform: translateY(-3px) scale(.985); } to { opacity: 1; transform: none; } }
.cell-pop { animation: pop-in .16s var(--ease-out) both; border-radius: 13px; }
.cell-opt { transition: background .12s ease, color .12s ease; }
td[data-unsaved] { box-shadow: inset 0 0 0 2px var(--st-late-line); }
td.is-saved { transition: background 1.2s var(--ease-out); }

/* messages drop in at the top and float away */
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -14px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes toast-out { to { opacity: 0; transform: translate(-50%, -8px) scale(.98); } }
.toast {
  top: 72px; bottom: auto; background: rgba(17, 19, 24, .92); border-radius: 14px; padding: 11px 14px 11px 16px;
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 16px 40px rgba(16, 24, 40, .24), 0 2px 8px rgba(16, 24, 40, .12);
  animation: toast-in .32s var(--spring) both; font-size: 13.5px; gap: 12px;
}
.toast.bad { background: rgba(185, 28, 28, .94); }
.toast.is-out { animation: toast-out .18s ease both; }
.toast-btn { background: #fff; color: var(--ink); border-radius: 9px; padding: 5px 11px; font-weight: 650; }
.toast-btn:hover { background: #eef0f3; }

/* sign-in, forms and the style drawer open with a spring */
.sheet { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); background: rgba(15, 23, 42, .32); }
@media (min-width: 640px) { .sheet-inner { animation: pop-in .3s var(--spring) both; border-radius: 20px; } }
.drawer-inner { animation: drawer-in .42s var(--spring) both; }
@keyframes drawer-in { from { transform: translateX(48px); opacity: 0; } to { transform: none; opacity: 1; } }
.login-brand { display: flex; align-items: center; gap: 10px; }
.login-logo { height: 34px; width: auto; }

/* loading: shimmering blocks in the shape of what is coming */
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.skel {
  background: linear-gradient(90deg, #eceef2 0%, #f6f7f9 45%, #eceef2 90%); background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite; border-radius: 12px;
}
.skel-page { display: flex; flex-direction: column; gap: 14px; animation: fade-in .25s ease both; }
.skel-head { display: flex; align-items: center; gap: 12px; }
.skel-icon { width: 40px; height: 40px; border-radius: 12px; }
.skel-title { width: 180px; height: 26px; }
.skel-chip { width: 120px; height: 30px; border-radius: 999px; margin-left: auto; }
.skel-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.skel-kpi { height: 104px; border-radius: var(--r-lg); }
.skel-vcard { height: 92px; border-radius: 14px; }
.skel-card { height: 220px; border-radius: var(--r-lg); }
.skel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.skel-bar { height: 34px; width: 60%; border-radius: var(--r-sm); }
.skel-table { display: flex; flex-direction: column; gap: 6px; background: #fff; border-radius: var(--r-lg); padding: 14px; box-shadow: var(--sh-card); }
.skel-line { height: 26px; border-radius: 7px; }
.skel-line:nth-child(3n) { width: 92%; } .skel-line:nth-child(4n) { width: 97%; }
p[id$="loading"]:not([hidden])::before {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px;
  border: 2px solid var(--fill-2); border-top-color: var(--ink-3); border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#ov-body.is-loading, #pl-body.is-loading { opacity: .55; transition: opacity .2s ease; }

/* empty and error states */
.empty-state { gap: 10px; }
.empty-state h2 { font-size: 18px; margin: 4px 0 0; }
.empty-state.is-error .ico-lg { color: var(--st-late); }

@media (max-width: 1100px) { .skel-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .topbar { min-height: 54px; padding: 8px 14px; }
  .brand-sub { display: none; }
  .brand-mark { height: 22px; } .brand-word { height: 12px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi-value { font-size: 24px; }
  .stage-tabs { border-radius: 0; box-shadow: 0 -1px 0 var(--line); background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
  .stage-tabs .tab { height: auto; color: var(--ink-3); }
  .stage-tabs .tab .tab-ico { width: 20px; height: 20px; }
  .stage-tabs .pill-bg { border-radius: 12px; }
  .save-state span { display: none; }
  .skel-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skel-grid { grid-template-columns: 1fr; }
  .toast { top: 62px; max-width: calc(100% - 24px); }
}

/* ── Editing like a register: change cells, then the green Save ─────────── */
table.gsheet td.is-changed, table.gsheet tbody tr td.is-changed.is-col { background: #fff7d6; box-shadow: inset 0 0 0 1px #f5d36a; }
table.gsheet td.is-changed .v { font-weight: 650; color: #6b4e00; }
table.gsheet tr.has-changes td.gutter { background: #fff1b8; color: #6b4e00; font-weight: 700; }
table.gsheet tr.has-problem td.c-save { background: var(--st-late-bg); }
table.gsheet tr.is-saving td { opacity: .6; transition: opacity .2s ease; }
@keyframes saved-glow { from { background: #dcf5e5; } }
table.gsheet tr.just-saved td { animation: saved-glow 1.6s var(--ease-out); }
.btn-save {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 12px; border: 0; border-radius: 8px;
  background: #16a34a; color: #fff; font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer;
  box-shadow: 0 1px 2px rgba(22, 101, 52, .3), inset 0 1px 0 rgba(255, 255, 255, .15);
  transition: background .15s ease, transform .12s ease; animation: pop-in .2s var(--ease-out) both;
}
.btn-save:hover { background: #15803d; }
.btn-save:active { transform: scale(.96); }
.btn-discard {
  display: inline-grid; place-items: center; width: 26px; height: 28px; margin-left: 3px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink-3); cursor: pointer;
}
.btn-discard:hover { background: var(--fill); color: var(--ink); }
.pending-bar { display: none; }
.pending-bar.is-on {
  display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 8px 10px 8px 14px; border-radius: 12px;
  background: #fffbea; border: 1px solid #f5d36a; color: #6b4e00; font-size: 13px; font-weight: 550;
  animation: pop-in .25s var(--ease-out) both;
}
.pending-bar .pb-dot { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; }
.pending-bar .pb-text { margin-right: auto; }
.pending-bar .btn-save { height: 30px; }
/* the photo frame: empty asks for a photo, a new one waits for Save */
.cell-style .ph.none { display: inline-grid; place-items: center; color: var(--ink-4); background: var(--fill); }
.gsheet-wrap.is-editing .ph.ph-add { cursor: pointer; border: 1.5px dashed #b9bfca; background: #fff; color: var(--ink-3); }
.gsheet-wrap.is-editing .ph.ph-add:hover { border-color: var(--blue); color: var(--blue); }
.ph.ph-new { box-shadow: 0 0 0 2px #f5d36a; overflow: hidden; }
.ph.ph-new img { width: 100%; height: 100%; object-fit: cover; }

/* WIP job cards, view mode: an empty date reads as nothing, not dd-mm-yyyy */
body:not(.wip-editing) #prod-table input[type=date].is-empty::-webkit-datetime-edit { color: transparent; }
body:not(.wip-editing) #prod-table input[type=date].is-empty { background: transparent; }
body:not(.wip-editing) #prod-table input::placeholder { color: transparent; }
body:not(.wip-editing) #prod-table input[type=date]::-webkit-calendar-picker-indicator { display: none; }
#prod-table td.prod-article { font-family: var(--sans); font-weight: 600; letter-spacing: -.01em; }
@media (max-width: 760px) {
  .tb-search-wrap { width: 100%; }
  .tb-search, .tb-search:focus { width: 100% !important; }
}

/* ── Review fixes (11 Oct, night) ─────────────────────────────────────── */
html, body { overflow-x: clip; }                   /* a sliding page never widens the screen */
@keyframes drawer-out { to { transform: translateX(48px); opacity: 0; } }
.drawer.is-closing { animation: fade-in .2s ease reverse both; }
.drawer.is-closing .drawer-inner { animation: drawer-out .2s ease both; }
.ov { white-space: nowrap; }
/* one look for every table heading and search box, old screens included */
.st-table thead th, .drawer th, table.st-table th {
  background: #fafbfc !important; color: var(--ink-2) !important; text-transform: none !important;
  letter-spacing: 0 !important; font-size: 12px !important; font-weight: 600 !important;
}
#prod-search, #fab-search, #style-search, #jobs-search, #search {
  height: 38px; font-size: 13.5px; border-radius: var(--r-sm); border: 1px solid var(--line-strong);
  padding-left: 36px !important; background: #fff no-repeat 12px center
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23a0a5b2' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7.5'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
}
.finder input::placeholder { color: var(--ink-4); }
#prod-body tr { content-visibility: auto; contain-intrinsic-size: auto 60px; }   /* 1,900 job cards stay quick */
.prod-shot { width: 30px; height: 40px; }
@media (hover: none) {                              /* a tap leaves no grey ghost behind */
  .stage-tabs .tab:hover, .seg-btn:hover, .subtab:hover { background: transparent; }
  button.kpi:hover, .vcard:hover, .attn-card:hover, .style-card:hover { transform: none; box-shadow: var(--sh-card); }
}
@media (max-width: 760px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .stat dd { font-size: clamp(18px, 5.6vw, 22px); white-space: nowrap; }
  .subtabs, .filters, .seg { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .subtabs::-webkit-scrollbar, .filters::-webkit-scrollbar, .seg::-webkit-scrollbar { display: none; }
  .subtab, .filters label, .seg-btn { flex: none; }
  .sh-facts { -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); }
  .vendor-strip { scroll-snap-type: x proximity; }
  .vcard { scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ── View / Edit switch (12 Oct 2026) ────────────────────────────────────
 * View: clicks only look. Edit: cells, row buttons and uploads respond.
 * In Edit a thin amber line runs under the top bar, so nobody forgets. */
.mode {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; flex: none;
  background: rgba(15, 23, 42, .055); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .03);
}
.mode-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border: 0; border-radius: 8px; background: transparent; box-shadow: none;
  color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.mode-btn:hover { color: var(--ink); background: rgba(255, 255, 255, .7); }
.mode-btn.is-on { background: var(--black); color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
#mode-edit.is-on { background: var(--st-due); }
body.edit-mode .topbar { box-shadow: inset 0 -3px 0 var(--warning); }

/* ── Hide / show the top bar ─────────────────────────────────────────── */
.top-toggle {
  display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; flex: none;
  border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface);
  color: var(--ink-2); box-shadow: none; cursor: pointer;
}
.top-toggle:hover { color: var(--ink); background: var(--fill); }
.top-min-label {
  display: none; align-items: center; gap: 6px; padding: 4px 10px; border: 0; border-radius: 8px;
  background: transparent; box-shadow: none; color: var(--ink); font-size: 14px; font-weight: 650; cursor: pointer;
}
.top-min-label:hover { background: var(--fill); }
body.top-min .topbar { min-height: 0; padding-top: 3px; padding-bottom: 3px; row-gap: 0; }
body.top-min .mode { padding: 2px; }
body.top-min .mode-btn { height: 26px; }
body.top-min .top-toggle { width: 28px; height: 28px; }
body.top-min .topbar .brand,
body.top-min #who-text,
body.top-min #who-name,
body.top-min #btn-history,
body.top-min #btn-logout { display: none !important; }
body.top-min .top-min-label { display: inline-flex; }
@media (min-width: 761px) {
  body.top-min .stage-tabs { display: none !important; }    /* on phones they are the bottom bar: kept */
}
/* Each stage's banner keeps only its working controls (month tabs, Download,
 * how old the data is); the big title and the figures go. */
body.top-min .strip-head { min-height: 0; margin-bottom: 8px; padding-top: 0; }
body.top-min .strip-head .sh-icon,
body.top-min .strip-head .sh-title,
body.top-min .strip-head .sh-facts { display: none; }
body.top-min .strip-head:not(:has(.sh-controls, .sh-right)) { display: none; }

/* ── "Are you sure?" before a delete ─────────────────────────────────── */
.ask { z-index: 300; }
#login.sheet { z-index: 250; }      /* a sign-in asked for mid-form opens on top of the form, which stays */
.ask .sheet-inner { max-width: 440px; padding-top: 22px; padding-bottom: 22px; }
.ask-title { font-size: 18px; margin: 0 0 8px; }
.ask-text { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; margin: 0; }
.ask .sheet-actions { margin-top: 20px; }
.ask .sheet-actions .primary { min-width: 0; }
.primary.is-danger { background: var(--st-late); color: #fff; }
.primary.is-danger:hover { background: var(--st-late); filter: brightness(.94); }

/* Signed in, the bar keeps to one line on a laptop: History and Sign out
   become icons (their names show on hover) and "Signed in" goes, since Sign
   out already says so. Narrower still, the stage tabs drop their icons. */
@media (min-width: 761px) and (max-width: 1800px) {
  body.signed-in #who-text { display: none; }
  body.signed-in #btn-history, body.signed-in #btn-logout { font-size: 0; gap: 0; padding: 6px 9px; }
  body.signed-in #btn-history .ico, body.signed-in #btn-logout .ico { width: 16px; height: 16px; }
}
@media (min-width: 761px) and (max-width: 1600px) {
  body.signed-in .brand-sub { display: none; }
  body.signed-in .stage-tabs .tab .tab-ico { display: none; }
  body.signed-in .stage-tabs .tab { padding: 7px 11px; }
}
@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; row-gap: 6px; }
  .who { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
}
@media (max-width: 560px) {
  .mode-btn { padding: 0 10px; }
  #btn-logout { font-size: 0; gap: 0; padding: 6px 9px; }        /* icon only: the row has to fit */
  #btn-logout .ico { width: 16px; height: 16px; }
  .ask .sheet-actions { flex-direction: column-reverse; }
  .ask .sheet-actions button { width: 100%; }
}

/* ══ Colour (20 Oct): each stage keeps its own colour wherever it is "you are
   here" — its tab, its pills, its heading icon, its selected vendor — and the
   status colours (late red, due amber, done green) tint whole rows. Text on a
   colour uses a deeper shade of it, so it stays readable (AA). ═══════════════ */
body { --accent-ink: color-mix(in srgb, var(--accent) 82%, #000); }   /* on body: where each stage sets --accent */

/* the stage tabs: every icon in its stage's colour; the chosen one filled */
.stage-tabs .tab[data-view="overview"] { --tab: var(--production); }
.stage-tabs .tab[data-view="planning"] { --tab: var(--planning); }
.stage-tabs .tab[data-view="adda"]     { --tab: var(--adda); }
.stage-tabs .tab[data-view="fabric"]   { --tab: var(--fabric); }
.stage-tabs .tab[data-view="wip"]      { --tab: var(--wip); }
.stage-tabs .tab[data-view="photos"]   { --tab: var(--images); }
.stage-tabs .tab .tab-ico { color: var(--tab, currentColor); opacity: 1; }
.stage-tabs .tab.is-on .tab-ico { color: #fff; }
.stage-tabs .tab.is-on { background: var(--accent-ink); }
.pill-bg {
  background: var(--accent-ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 6px 14px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* the heading icon of each stage: solid colour */
.sh-icon {
  color: #fff;
  background: linear-gradient(140deg, var(--accent), var(--accent-ink));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 6px 16px color-mix(in srgb, var(--accent) 28%, transparent);
}

/* Adda: the chosen vendor card and the month arrows take the stage colour */
.vcard.is-on { background: var(--accent-ink); border-color: var(--accent-ink); }
.month-step:hover:not(:disabled) { background: var(--accent-ink); border-color: var(--accent-ink); }

/* Production home: a strip of colour says what each figure is about */
.kpi { position: relative; overflow: hidden; }
.kpi::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--kpi, transparent); }
.kpi.kpi-planned  { --kpi: var(--planning); }
.kpi.kpi-cut      { --kpi: var(--wip); }
.kpi.kpi-dispatch { --kpi: var(--st-done); }
.kpi.kpi-late     { --kpi: var(--st-late); }
.kpi.kpi-adda     { --kpi: var(--adda); }
.kpi.kpi-nojc     { --kpi: var(--st-due); }

/* "Where the styles are now": each step in its stage's colour */
.station.st-planned     .station-bar > span { background: var(--planning); }
.station.st-fabric_ready .station-bar > span { background: var(--fabric); }
.station.st-adda        .station-bar > span { background: var(--adda); }
.station.st-stitching   .station-bar > span { background: var(--wip); }
.station.st-dispatching .station-bar > span { background: var(--production); }
.station.st-dispatched  .station-bar > span { background: var(--st-done); }

/* Sheets: late rows faintly red, due-soon rows faintly amber, the row number
   in the status colour. Low specificity on purpose: the selection, the hover
   and a yellow unsaved cell still show on top. */
table.gsheet :where(tr.ov-row-late, tr.ad-row-overdue) > td:not(.is-changed) { background-color: #fff6f5; }
table.gsheet :where(tr.ov-row-watch, tr.ad-row-due) > td:not(.is-changed) { background-color: #fffaeb; }
table.gsheet :where(tr.ov-row-late, tr.ad-row-overdue) > td.gutter { color: var(--st-late); font-weight: 700; box-shadow: inset 3px 0 0 var(--st-late); }
table.gsheet :where(tr.ov-row-watch, tr.ad-row-due) > td.gutter { color: var(--st-due); font-weight: 700; box-shadow: inset 3px 0 0 #f5b23d; }

/* Fabric / WIP: a report more than two weeks old is a red flag, not amber */
.fresh.is-stale { border-color: var(--st-late-line); background: var(--st-late-bg); color: var(--st-late); font-weight: 600; }
.fresh.is-stale::before { background: var(--st-late); }

/* ══ Column filters, like Excel's (grid.js), and the totals row ═════════════ */
table.gsheet th .th-label { vertical-align: middle; }
.th-filter {
  display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 4px; padding: 0;
  border: 0; border-radius: 5px; background: transparent; color: var(--ink-4); vertical-align: middle; cursor: pointer;
}
.th-filter .ico { width: 12px; height: 12px; }
.th-filter:hover { background: var(--fill-2); color: var(--ink); }
table.gsheet th.is-filtered { color: var(--accent-ink); }
.th-filter.is-on, .th-filter.is-on:hover { background: var(--accent-ink); color: #fff; }

table.gsheet tr.gsum th {
  top: var(--head-h, 34px); background: #f3f5fa; color: var(--ink); font-weight: 700; font-size: 12.5px;
  font-variant-numeric: tabular-nums; border-bottom: 2px solid var(--sheet-edge);
}
table.gsheet tr.gsum th.sticky { z-index: 4; }
table.gsheet tr.gsum th.gutter { color: var(--ink-3); }

.filter-bar { display: none; }
.filter-bar.is-on {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 6px 8px 6px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 9%, #fff); color: var(--accent-ink); font-size: 13px; font-weight: 550;
}
.filter-bar.is-on .ghost { margin-left: auto; height: 28px; }

.filter-pop {
  position: absolute; z-index: 520; width: 270px; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--sh-pop); padding: 10px; animation: pop-in .14s var(--ease-out) both;
}
.fp-title { font-weight: 650; font-size: 13px; color: var(--ink); margin: 0 2px 8px; }
.fp-all, .fp-item { display: flex; align-items: center; gap: 8px; padding: 5px 10px; font-size: 13px; color: var(--ink); cursor: pointer; margin: 0; }
.fp-all { margin-top: 6px; font-weight: 600; }
.fp-item[hidden] { display: none; }
.fp-item:hover, .fp-all:hover { background: var(--fill); border-radius: 7px; }
.fp-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-n { margin-left: auto; color: var(--ink-4); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.fp-list { max-height: 260px; overflow: auto; margin: 2px 0 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px 0; }
.fp-foot { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.fp-foot .fp-clear { margin-right: auto; }
.fp-foot button { height: 32px; }

/* the photo viewer: the fabric line, and its "also …" */
.lb-meta .lb-sub { display: block; font-size: 12px; font-weight: 500; opacity: .7; margin-top: 1px; }
.lb-meta .lb-fabric dd { font-weight: 650; }