/* UNNO Business Plan — follows the UNNO workspace style guide (Outfit, ink #16211E, lime #E8FF3A). */
:root {
  --ink: #16211E; --ink2: #33443F; --muted: #4A5C58; --ph: #7A8985;
  --lime: #E8FF3A; --lime-soft: #EEF8B5; --sage: #6F8580; --warn: #C77A2A; --error: #B4382E;
  --glass: rgba(255,255,255,.55); --glass-border: rgba(255,255,255,.8); --divider: rgba(22,33,30,.08); --thead: rgba(22,33,30,.04);
  --r-card: 24px; --r-ctl: 16px; --r-chip: 10px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font: 400 15px/1.5 Outfit, system-ui, sans-serif; color: var(--ink); background: linear-gradient(160deg, #A7BDBC 0%, #B6CCC4 55%, #C3D4C0 100%) fixed; }
a { color: var(--ink); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; }
.loading { padding: 80px; text-align: center; color: var(--muted); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.muted { color: var(--muted); } .small { font-size: 13px; } .mono { font-family: ui-monospace, Menlo, monospace; word-break: break-all; }
.bad-text { color: var(--error); } .right { text-align: right; white-space: nowrap; } .center { text-align: center; }
.eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); font-weight: 500; }
.stack { display: flex; flex-direction: column; gap: 20px; }
.cols-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 20px; align-items: start; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---------- shell ---------- */
.shell { max-width: 1440px; margin: 0 auto; padding: 24px 28px 64px; }
.masthead { display: grid; grid-template-columns: 92px 1fr auto; gap: 24px; align-items: start; }
.logo { width: 92px; height: 92px; border-radius: 20px; overflow: hidden; background: #030607; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(22,33,30,.12); }
.logo img { width: 74px; height: auto; display: block; filter: brightness(0) invert(1); }
.navs { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
nav.top { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
nav.top a { height: 44px; display: flex; align-items: center; padding: 0 18px; border-radius: 15px; text-decoration: none; color: var(--ink2); font-size: 16px; }
nav.top a.on { background: var(--ink); color: #fff; }
nav.top a:not(.on):hover { background: rgba(255,255,255,.45); }
@media (max-width: 1600px) { nav.top { gap: 2px; } nav.top a { padding: 0 11px; font-size: 15px; } }
nav.sub { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; background: rgba(255,255,255,.4); border: 1px solid rgba(255,255,255,.6); border-radius: 18px; padding: 5px; max-width: 100%; }
nav.sub a { display: flex; align-items: center; padding: 0 16px; height: 40px; border-radius: 13px; font-size: 14px; color: var(--ink2); text-decoration: none; white-space: nowrap; }
nav.sub a.on { background: #fff; color: var(--ink); font-weight: 500; box-shadow: 0 2px 8px rgba(40,60,55,.1); }
.mast-right { display: flex; gap: 12px; align-items: center; justify-content: flex-end; }
.scenario-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.75); background: rgba(255,255,255,.5); cursor: pointer; max-width: 220px; font: inherit; font-size: 13px; color: var(--ink); }
.scenario-btn:hover { background: rgba(255,255,255,.75); }
.scenario-btn i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); flex: none; }
.scenario-btn.main i { background: var(--sage); }
.scenario-btn b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scenario-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--lime-soft); color: var(--ink); white-space: nowrap; align-self: center; }
.scenario-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.bell { position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--ink); text-decoration: none; border: 1px solid rgba(255,255,255,.75); background: rgba(255,255,255,.5); }
.bell:hover { background: rgba(255,255,255,.75); }
.bell.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.bell-count { position: absolute; top: -5px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; background: var(--sage); color: #fff; font-size: 11px; font-weight: 600; box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.bell-count.urgent { background: var(--error); }
.bell-count[hidden] { display: none; }
.avatar { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--lime); box-shadow: 0 0 0 4px rgba(255,255,255,.45); font-weight: 600; cursor: pointer; }
.banner { margin-top: 16px; padding: 12px 18px; border-radius: 16px; background: var(--lime-soft); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.banner a { margin-left: auto; } .banner.warn { background: rgba(240,170,90,.25); }
.page { margin-top: 24px; }
.page-head { margin-bottom: 20px; }
.page-head h1 { margin-top: 6px; font-size: 40px; font-weight: 300; letter-spacing: -.02em; line-height: 1.1; }
.page-head .lead { color: var(--ink2); margin: 6px 0 0; max-width: 780px; }

/* ---------- cards ---------- */
.card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--r-card); padding: 24px 28px; box-shadow: 0 10px 40px rgba(40,60,55,.06); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card h2 { font-size: 22px; font-weight: 500; }
.card > p { margin: 0; }
.card-foot { display: flex; justify-content: flex-end; align-items: center; gap: 12px; border-top: 1px solid var(--divider); padding-top: 14px; }
.card-foot .muted { margin-right: auto; }
.card.soon h2 { font-weight: 300; font-size: 28px; }
.facts { display: flex; gap: 28px; flex-wrap: wrap; }
.fact span { display: block; font-size: 12px; color: var(--muted); }
.fact b { font-size: 22px; font-weight: 300; letter-spacing: -.01em; }

/* ---------- buttons & pills ---------- */
.btn { border: 0; height: 44px; padding: 0 20px; border-radius: 999px; font: 500 14px Outfit, sans-serif; background: rgba(255,255,255,.85); color: var(--ink); display: inline-flex; gap: 8px; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { background: #fff; }
.btn.dk { background: var(--ink); color: #fff; } .btn.dk:hover { background: #24332f; }
.btn.lm { background: var(--lime); } .btn.ol { background: transparent; border: 1px solid rgba(22,33,30,.22); }
.btn.danger { background: rgba(180,56,46,.12); color: #8E2A22; } .btn.left { margin-right: auto; }
.btn.sm { height: 36px; padding: 0 14px; font-size: 13px; }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .5; cursor: default; }
.btn:focus-visible, nav a:focus-visible, .scenario-btn:focus-visible, .bell:focus-visible, .avatar:focus-visible, tr[tabindex]:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.x { width: 46px; height: 46px; border-radius: 50%; border: 0; background: #fff; font-size: 22px; cursor: pointer; box-shadow: 0 2px 10px rgba(22,33,30,.08); flex: none; }
.pill { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; padding: 4px 12px; border-radius: 999px; background: #fff; white-space: nowrap; }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.pill.lm { background: var(--lime); } .pill.g { background: rgba(22,33,30,.07); color: var(--muted); } .pill.g i { background: #8A9995; }
.pill.w { background: rgba(240,170,90,.22); color: #7A4A16; } .pill.w i { background: var(--warn); }
.pill.r { background: rgba(180,56,46,.12); color: #8E2A22; } .pill.r i { background: var(--error); }

/* ---------- tables ---------- */
.toolbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.toolbar .count { color: var(--muted); font-size: 13px; margin-left: auto; }
.search { height: 40px; border-radius: 13px; border: 1px solid rgba(22,33,30,.12); background: #fff; padding: 0 14px; min-width: 240px; }
.table-wrap { overflow: auto; border-radius: 16px; background: rgba(255,255,255,.6); max-height: 70vh; }
table.grid { width: 100%; border-collapse: collapse; font-size: 14px; }
table.grid th { text-align: left; font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--ink2); background: #f3f6f4; padding: 10px 12px; position: sticky; top: 0; z-index: 1; white-space: nowrap; }
table.grid td { padding: 9px 12px; border-top: 1px solid var(--divider); vertical-align: middle; }
table.grid tbody th { position: sticky; left: 0; background: #f7f9f8; z-index: 1; font-weight: 500; font-size: 13px; white-space: nowrap; border-top: 1px solid var(--divider); }
table.grid tbody th small { display: block; font-weight: 400; color: var(--muted); font-size: 11px; }
table.grid thead th:first-child { left: 0; z-index: 2; }
table.grid .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.grid tbody tr[tabindex], table.grid tr.clickable { cursor: pointer; }
table.grid tbody tr[tabindex]:hover td, table.grid tr.clickable:hover td { background: rgba(232,255,58,.18); }
table.grid tr.inactive td { color: var(--ph); }
table.grid tr.changed td { background: rgba(232,255,58,.2); }
table.grid td.empty { color: var(--muted); text-align: center; padding: 28px; }
table.grid tfoot td, table.grid tfoot th { border-top: 2px solid rgba(22,33,30,.15); font-weight: 500; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: rgba(22,33,30,.15); }
.dot.on { background: var(--ink); }
table.grid.matrix { width: auto; min-width: 360px; }
table.matrix td { padding: 4px 6px; }
table.matrix input.cell { width: 86px; height: 32px; border-radius: 9px; border: 1px solid transparent; background: transparent; text-align: right; padding: 0 6px; font-variant-numeric: tabular-nums; }
table.matrix input.cell:hover:not(:disabled) { border-color: rgba(22,33,30,.15); background: #fff; }
table.matrix input.cell:focus { outline: none; border-color: var(--ink); background: #fff; box-shadow: 0 0 0 3px rgba(232,255,58,.6); }
table.matrix input.cell.saving { opacity: .5; } table.matrix input.cell.saved { background: var(--lime-soft); } table.matrix input.cell.bad { border-color: var(--error); }
table.matrix .u { color: var(--muted); font-size: 12px; margin-left: 2px; }

/* ---------- forms ---------- */
.form-grid { display: grid; gap: 16px 20px; }
.form-grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > label { font-size: 13px; font-weight: 500; color: var(--ink2); }
.field small.help { font-size: 12px; color: var(--muted); }
.field small.err { font-size: 12px; color: #9A3412; min-height: 0; }
.field.has-error .in { border-color: var(--error); box-shadow: 0 0 0 4px rgba(180,56,46,.12); }
.in { height: 48px; border-radius: var(--r-ctl); border: 1px solid rgba(22,33,30,.12); background: #fff; padding: 0 14px; font-size: 15px; width: 100%; }
textarea.in { height: auto; padding: 12px 14px; resize: vertical; }
.in:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(232,255,58,.6); }
.in:disabled { background: rgba(22,33,30,.05); color: var(--muted); }
.in.num { text-align: right; font-variant-numeric: tabular-nums; }
.with-unit { display: flex; align-items: center; gap: 8px; } .with-unit .unit { color: var(--muted); font-size: 14px; width: 14px; }
.field.check { flex-direction: row; align-items: center; gap: 12px; cursor: pointer; font-size: 14px; align-self: end; min-height: 48px; }
.switch { appearance: none; width: 44px; height: 26px; border-radius: 99px; background: rgba(22,33,30,.18); position: relative; cursor: pointer; flex: none; transition: background .15s; margin: 0; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.switch:checked { background: var(--ink); } .switch:checked::after { left: 21px; background: var(--lime); }
.switch:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* ---------- modal ---------- */
.overlay { position: fixed; inset: 0; background: linear-gradient(160deg, rgba(124,143,140,.75), rgba(141,160,152,.75)); display: grid; place-items: center; padding: 24px; z-index: 50; }
.modal { background: rgba(250,252,249,.97); border-radius: 36px; width: min(560px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(22,33,30,.25); }
.modal.wide { width: min(920px, 100%); }
.modal.wide.xwide { width: min(1280px, 100%); }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 32px 36px 16px; }
.modal-head h2 { font-size: 28px; font-weight: 500; letter-spacing: -.01em; margin-top: 4px; }
.modal-body { padding: 4px 36px 20px; overflow: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 36px 28px; border-top: 1px solid var(--divider); }
.menu-list { display: flex; flex-direction: column; gap: 4px; }
.menu-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 0; background: transparent; text-decoration: none; color: var(--ink); cursor: pointer; text-align: left; font-size: 15px; }
.menu-item:hover, .menu-item.on { background: rgba(22,33,30,.06); }

/* ---------- toasts ---------- */
#toasts { position: fixed; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 10px; z-index: 80; }
.toast { background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 14px; box-shadow: 0 10px 30px rgba(22,33,30,.25); max-width: 420px; transition: opacity .4s, transform .4s; }
.toast.error { background: var(--error); }
.toast.out { opacity: 0; transform: translateY(8px); }

/* ---------- misc ---------- */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; background: rgba(255,255,255,.4); border: 1px solid rgba(255,255,255,.6); border-radius: 18px; padding: 5px; width: fit-content; max-width: 100%; }
.tabs button { border: 0; background: transparent; height: 40px; padding: 0 16px; border-radius: 13px; cursor: pointer; color: var(--ink2); }
.tabs button.on { background: #fff; color: var(--ink); font-weight: 500; box-shadow: 0 2px 8px rgba(40,60,55,.1); }
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 140px; border: 2px dashed rgba(22,33,30,.25); border-radius: 20px; background: rgba(255,255,255,.45); cursor: pointer; text-align: center; padding: 20px; }
.dropzone.over { background: var(--lime-soft); border-color: var(--ink); }
.warnings { margin: 0; padding: 12px 16px 12px 32px; border-radius: 16px; background: rgba(240,170,90,.18); color: #5f3a12; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.progress { height: 6px; border-radius: 6px; background: rgba(22,33,30,.12); overflow: hidden; position: relative; }
.progress::after { content: ''; position: absolute; inset: 0; width: 30%; background: var(--ink); animation: slide 1.1s infinite ease-in-out; border-radius: 6px; }
@keyframes slide { from { left: -30%; } to { left: 100%; } }
.scenario-list { display: flex; flex-direction: column; gap: 10px; }
.scenario { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,.6); flex-wrap: wrap; }
.scenario.archived { opacity: .65; }
.scenario h3 { font-size: 18px; font-weight: 500; }
.scenario p { margin: 4px 0 0; }
.scenario .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.signin { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.signin-card { width: min(440px, 100%); align-items: stretch; text-align: center; padding: 40px; }
.signin-card h1 { font-size: 40px; font-weight: 300; }
.logo-big { width: 96px; height: 96px; border-radius: 20px; background: #030607; margin: 0 auto 8px; padding: 0 14px; object-fit: contain; filter: none; }
.error-card { margin: 80px auto; max-width: 560px; }

@media (max-width: 900px) {
  .shell { padding: 16px 16px 48px; }
  .masthead { grid-template-columns: 64px 1fr; }
  .logo { width: 64px; height: 64px; }
  .mast-right { grid-column: 1 / -1; justify-content: space-between; }
  .navs { grid-column: 1 / -1; order: 3; align-items: stretch; }
  nav.top, nav.sub { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .page-head h1 { font-size: 30px; }
  .card { padding: 18px; }
  .cols-2 { grid-template-columns: 1fr; }
  .modal-head, .modal-body, .modal-foot { padding-left: 20px; padding-right: 20px; }
}

/* ---------- phase 2 ---------- */
.field.wide { grid-column: 1 / -1; }
.kv { display: flex; flex-direction: column; gap: 8px; }
.kv-row { display: grid; grid-template-columns: 110px 16px 1fr 110px 40px; gap: 8px; align-items: center; }
.grid-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 12px; }
.kv-cell { display: grid; grid-template-columns: 52px 1fr 14px; gap: 6px; align-items: center; font-size: 13px; font-weight: 500; }
.in.sm { height: 38px; border-radius: 12px; font-size: 14px; padding: 0 10px; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filters select, .filters input { height: 40px; border-radius: 13px; border: 1px solid rgba(22,33,30,.12); background: #fff; padding: 0 12px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 9px; background: rgba(22,33,30,.07); font-size: 12px; font-weight: 500; white-space: nowrap; }
.chip.lm { background: var(--lime); } .chip.dk { background: var(--ink); color: #fff; } .chip.w { background: rgba(240,170,90,.25); color: #7A4A16; }
.big { font-size: 34px; font-weight: 300; letter-spacing: -.02em; line-height: 1; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.kpi { background: rgba(255,255,255,.6); border-radius: 18px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.kpi span { font-size: 12px; color: var(--muted); }
.model-group { display: flex; flex-direction: column; gap: 10px; }
.model-group h3 { font-size: 20px; font-weight: 500; display: flex; gap: 10px; align-items: baseline; }
.bom-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.bom-card { text-align: left; border: 1px solid rgba(255,255,255,.8); background: rgba(255,255,255,.6); border-radius: 18px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; font: inherit; color: inherit; }
.bom-card:hover { background: #fff; } .bom-card.inactive, .bom-card.draft { opacity: .75; }
.bom-card .row { justify-content: space-between; }
.bom-card b { font-size: 16px; font-weight: 500; }
.sub-head td { background: rgba(22,33,30,.05); font-weight: 500; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
td.wrap { white-space: normal; min-width: 260px; }
.picker-list { max-height: 52vh; overflow: auto; border-radius: 14px; background: rgba(255,255,255,.7); }
.picker-list table.grid th { top: 0; }
.diff-pos { color: var(--error); } .diff-neg { color: #2c6a3a; }

/* ---------- pricing ---------- */
.grow { flex: 1; min-width: 0; }
.stack.tight { gap: 10px; }
.price-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 24px; align-items: start; }
.price-cols h3 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--ink2); margin-bottom: 8px; }
table.grid.compact td { padding-top: 6px; padding-bottom: 6px; }
table.grid.compact td.wrap { min-width: 0; }
.price-cols .in.num.sm { width: 120px; }
.country-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.country { background: rgba(255,255,255,.6); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.country span { font-size: 12px; color: var(--muted); } .country b { font-weight: 500; font-size: 17px; }
table.pricelist th.group { text-align: center; border-left: 1px solid var(--divider); }
table.pricelist td, table.pricelist th { padding-left: 10px; padding-right: 10px; }
.menu-item input[type=checkbox] { width: 18px; height: 18px; }

/* ---------- plan ---------- */
.gantt { overflow-x: auto; background: rgba(255,255,255,.55); border-radius: 16px; padding: 12px; }
.gantt svg { min-width: 760px; display: block; font-family: Outfit, system-ui, sans-serif; }
.gantt.tall { max-height: 72vh; overflow: auto; }
.gantt a text:hover { text-decoration: underline; }
table.grid.months td, table.grid.months th { padding-left: 8px; padding-right: 8px; }
table.grid.months .past { color: var(--muted); background: rgba(22,33,30,.02); }
table.grid.months td.typed { background: rgba(232,255,58,.35); font-weight: 600; }
table.grid.months td.short { box-shadow: inset 0 -2px 0 var(--error); }
table.grid.months td[tabindex] { cursor: pointer; }
table.grid.months td[tabindex]:hover { background: #fff; }
table.grid tfoot th { position: sticky; bottom: 0; background: #eef2ef; }
.bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; height: 180px; align-items: end; padding: 8px 4px; }
.bar-col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.bar-col .bar { width: 70%; background: var(--ink); border-radius: 8px 8px 3px 3px; min-height: 2px; }
.bar-col small { color: var(--muted); font-size: 11px; }
.bars.cap { height: 220px; }
.bars.cap .bar-col { cursor: pointer; padding-bottom: 36px; }
.bars.cap .bar-col small, .bars.cap .bar-col b { position: absolute; bottom: 0; } .bars.cap .bar-col small { bottom: 18px; }
.bars.cap .bar { background: #9BB0AB; }
.bars.cap .over .bar { background: var(--error); }
.cap-line { position: absolute; left: 4%; right: 4%; border-top: 2px dashed var(--ink); margin-bottom: 36px; }

/* ---------- org chart & loans ---------- */
.org { overflow-x: auto; padding: 8px 0 16px; }
.org ul { display: flex; justify-content: center; gap: 14px; padding: 18px 0 0; margin: 0; list-style: none; position: relative; }
.org li { display: flex; flex-direction: column; align-items: center; position: relative; padding: 0 4px; }
.org > ul { padding-top: 0; width: max-content; margin: 0 auto; }
.org li li::before { content: ''; position: absolute; top: -18px; left: 50%; height: 18px; border-left: 1px solid rgba(22,33,30,.25); }
.org ul ul::before { content: ''; position: absolute; top: 0; left: 8%; right: 8%; border-top: 1px solid rgba(22,33,30,.25); }
.org-node { background: #fff; border-radius: 14px; padding: 10px 12px; min-width: 150px; max-width: 190px; display: flex; flex-direction: column; gap: 3px; border-top: 4px solid var(--ink); box-shadow: 0 2px 10px rgba(22,33,30,.08); text-align: center; }
.org-node small { color: var(--muted); font-size: 12px; } .org-node .chip { align-self: center; font-size: 10px; height: 20px; }
.org-node.future { opacity: .55; }
.loan { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.loan h3 { font-size: 17px; font-weight: 500; }

/* ---------- reports ---------- */
.chart { background: rgba(255,255,255,.55); border-radius: 16px; padding: 10px; }
.chart svg { display: block; font-family: Outfit, system-ui, sans-serif; }
.kpi.bad b { color: var(--error); }
.big-kpis .kpi b.big { font-size: 30px; }
.warn-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
table.grid.pnl tr.strong td { font-weight: 600; background: rgba(232,255,58,.12); }
table.grid.pnl tr.growth td { border-top: 0; padding-top: 0; }
table.grid.pnl tr.muted td { color: var(--muted); }
.pairs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; height: 200px; align-items: end; }
.pair { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.pbars { display: flex; gap: 3px; align-items: flex-end; height: 100%; width: 100%; justify-content: center; }
.pbars i { width: 38%; border-radius: 6px 6px 2px 2px; min-height: 2px; display: block; }
.pbars .pa { background: var(--ink); } .pbars .pb { background: #9BB0AB; }
.pair small { font-size: 11px; color: var(--muted); }
.kv-row.pay { grid-template-columns: 170px 110px 16px 40px; }
.loan-off { opacity: .7; } .loan + .loan { border-top: 1px solid var(--divider); padding-top: 14px; } details summary { cursor: pointer; color: var(--ink2); margin: 6px 0; }

/* ---------- headcount ---------- */
.kpis-4 { grid-template-columns: repeat(4, 1fr); }
.kpis-4 + .kpis-4 { margin-top: 12px; }
@media (max-width: 760px) { .kpis-4 { grid-template-columns: repeat(2, 1fr); } }
.count-badge { display: inline-flex; margin-left: 10px; font-size: 13px; font-weight: 500; background: rgba(22,33,30,.08); border-radius: 999px; padding: 2px 10px; vertical-align: middle; }
table.grid.hc td.actions { white-space: nowrap; text-align: right; width: 1%; }
.icon-btn { position: relative; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(22,33,30,.15); background: #fff; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; margin-left: 6px; }
.icon-btn:hover, .icon-btn:focus-visible { background: var(--lime); }
.icon-btn[data-tip]:hover::after, .icon-btn[data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; font-size: 12px; padding: 4px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none; z-index: 5; }
.icon-btn[data-tip]:hover::before, .icon-btn[data-tip]:focus-visible::before { content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--ink); border-bottom: 0; z-index: 5; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.fact { background: rgba(22,33,30,.04); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.fact span { font-size: 12px; color: var(--muted); }
.checklist { display: flex; flex-wrap: wrap; gap: 6px; max-height: 260px; overflow: auto; padding: 4px 0; }
.check-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 10px; background: rgba(22,33,30,.06); font-size: 13px; cursor: pointer; }
.check-chip.on { background: var(--lime); }
.check-chip input { margin: 0; }
td.wrap-tags { white-space: normal; }
.sim { border-top: 1px solid var(--divider); margin-top: 18px; padding-top: 16px; display: flex; flex-direction: column; gap: 10px; } .sim h3 { font-size: 17px; font-weight: 500; } .sim .field { max-width: 320px; } .sim-out { display: flex; flex-direction: column; gap: 10px; }
details.sim > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
details.sim > summary::-webkit-details-marker { display: none; }
details.sim > summary::before { content: '▸'; font-size: 14px; color: var(--ink2); transition: transform .15s; }
details.sim[open] > summary::before { transform: rotate(90deg); }
details.sim:not([open]) { gap: 0; }
details.sim > :not(summary) { margin-top: 10px; }
.in::placeholder { color: #9AA7A3; }
.section-head h2 { font-size: 22px; font-weight: 500; margin: 8px 0 -4px; }
.form-grid.cols-3 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } table.grid.matrix.ro td { padding: 9px 12px; } table.grid td.inherited { color: #9AA7A3; } table.grid.matrix td.actions { width: 1%; }
/* keep the row pencil visible on wide tables */
table.grid td.actions { position: sticky; right: 0; z-index: 1; background: #EEF2F0; box-shadow: -8px 0 8px -8px rgba(0,0,0,.15); width: 1%; white-space: nowrap; }
/* market cards: header row always visible, details on open */
.mcards { display: flex; flex-direction: column; gap: 10px; }
.mcards .toolbar { margin-bottom: 2px; }
details.mcard { background: rgba(255,255,255,.55); border: 1px solid var(--divider); border-radius: 16px; }
details.mcard.inactive { opacity: .65; }
details.mcard > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 18px minmax(140px,1.4fr) repeat(4, minmax(90px,1fr)) minmax(80px,.7fr) auto; align-items: center; gap: 14px; padding: 12px 16px; margin: 0; color: inherit; }
details.mcard > summary::-webkit-details-marker { display: none; }
details.mcard > summary::before { content: '▸'; color: var(--ink2); transition: transform .15s; }
details.mcard[open] > summary::before { transform: rotate(90deg); }
.mcard .mc-name b { display: block; font-weight: 500; } .mcard .mc-name small, .mcard .mc-f small { display: block; color: var(--muted); font-size: 11px; }
.mcard .mc-f.num { text-align: right; }
.mcard .mc-act { justify-self: end; }
.mcard .mc-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; padding: 4px 16px 16px 48px; border-top: 1px solid var(--divider); padding-top: 14px; }
.mcard dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; margin: 8px 0 0; font-size: 14px; }
.mcard dt { color: var(--ink2); } .mcard dd { margin: 0; text-align: right; }
@media (max-width: 800px) { details.mcard > summary { grid-template-columns: 18px 1fr 1fr auto; } .mcard .mc-f.num { display: none; } .mcard .mc-body { padding-left: 16px; } }
/* model profitability cards */
.pcards { display: flex; flex-direction: column; gap: 10px; }
details.pcard { background: rgba(255,255,255,.55); border: 1px solid var(--divider); border-radius: 16px; }
details.pcard > summary { list-style: none; cursor: pointer; display: grid; align-items: center; gap: 14px; padding: 12px 16px; margin: 0; color: inherit; }
details.pcard > summary::-webkit-details-marker { display: none; }
details.pcard > summary::before { content: '▸'; color: var(--ink2); transition: transform .15s; }
details.pcard[open] > summary::before { transform: rotate(90deg); }
.pcard .pc-name b { display: block; font-weight: 500; } .pcard .pc-name small, .pcard .pc-f small { display: block; color: var(--muted); font-size: 11px; }
.pcard .pc-year { background: var(--lime); border-radius: 999px; padding: 3px 8px; font-size: 12px; font-weight: 500; text-align: center; }
.pcard .pc-f { text-align: right; } .pcard .pc-f > span { font-variant-numeric: tabular-nums; }
.pcard .pc-body { border-top: 1px solid var(--divider); padding: 10px 16px 16px 48px; }
.pcard tr.cur td { background: rgba(228,255,58,.25); } .pcard tr.past td { color: var(--muted); }
.gmbar { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.gmbar::before { content: ''; order: 0; }
.gmbar i { display: inline-block; height: 6px; border-radius: 3px; background: #16211E; max-width: 54px; min-width: 2px; position: relative; }
.gmbar { background: linear-gradient(rgba(22,33,30,.08), rgba(22,33,30,.08)) no-repeat left center / 54px 6px; padding-left: 0; }
.gmbar i.neg { background: var(--error); }
.gmbar b { font-weight: 400; min-width: 52px; text-align: right; }
.ubars { display: inline-flex; align-items: flex-end; gap: 3px; height: 28px; justify-self: end; }
.ubars i { width: 7px; background: rgba(22,33,30,.22); border-radius: 2px; } .ubars i.on { background: #16211E; }
@media (max-width: 900px) { details.pcard > summary { grid-template-columns: 18px 1fr auto auto !important; } .pcard .pc-f:nth-of-type(n+3), .pcard .ubars { display: none; } .pcard .pc-body { padding-left: 16px; } }
/* instalments editor: first row always visible, + on the last row */
.kv-row.inst { grid-template-columns: 90px 16px 1fr 80px 40px 40px; }
.kv-row.inst .icon-btn { margin-left: 0; font-size: 18px; line-height: 1; }
.kv-row.inst .icon-btn.add { background: var(--ink); color: #fff; border-color: var(--ink); }
.kv-row.inst .icon-btn.add:hover { background: var(--lime); color: var(--ink); }
.kv-row.inst input:disabled { opacity: .35; }
/* supplier cards */
.section-title { display: flex; align-items: baseline; gap: 10px; } .section-title h2 { margin: 0; } .section-title .count { background: rgba(22,33,30,.07); border-radius: 999px; padding: 2px 10px; font-size: 12px; }
.scards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin-top: 6px; }
.scard { background: rgba(255,255,255,.6); border: 1px solid var(--divider); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.scard.off { opacity: .6; }
.scard header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.scard h3 { margin: 0; font-size: 18px; font-weight: 500; } .scard header small { color: var(--muted); font-size: 12px; }
.scard .chips { display: flex; flex-wrap: wrap; gap: 6px; } .scard .chips:empty { display: none; }
.sc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sc-stats > div { background: rgba(22,33,30,.04); border-radius: 12px; padding: 8px 10px; }
.sc-stats b { display: block; font-size: 20px; font-weight: 500; } .sc-stats small { color: var(--muted); font-size: 11px; }
.sc-terms > small { display: block; color: var(--muted); font-size: 11px; margin-bottom: 4px; }
.terms { display: flex; flex-wrap: wrap; gap: 6px; }
.term { display: inline-flex; gap: 4px; align-items: center; padding: 4px 10px; border-radius: 999px; background: rgba(228,255,58,.45); font-size: 12px; } .term b { font-weight: 600; }
.sc-contact { font-size: 12px; color: var(--ink2); border-top: 1px solid var(--divider); padding-top: 10px; word-break: break-word; }
/* components by category */
details.ccat { background: rgba(255,255,255,.5); border: 1px solid var(--divider); border-radius: 16px; }
details.ccat > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin: 0; color: inherit; }
details.ccat > summary::-webkit-details-marker { display: none; }
details.ccat > summary::before { content: '▸'; color: var(--ink2); transition: transform .15s; }
details.ccat[open] > summary::before { transform: rotate(90deg); }
details.ccat > summary b { font-weight: 500; font-size: 16px; } details.ccat > summary small { color: var(--muted); }
.cc-count { margin-left: auto; background: rgba(22,33,30,.07); border-radius: 999px; padding: 3px 10px; font-size: 12px; }
.cc-old { display: inline-flex; align-items: center; gap: 6px; background: rgba(180,56,46,.1); color: #8E2A22; border-radius: 999px; padding: 3px 10px; font-size: 12px; }
.cc-old i, .my.old i { width: 8px; height: 8px; border-radius: 50%; background: var(--error); display: inline-block; }
.cc-ok { color: var(--muted); font-size: 12px; padding: 3px 10px; }
.parts { border-top: 1px solid var(--divider); padding: 6px 10px 10px; }
.prow { display: grid; grid-template-columns: minmax(220px, 2.6fr) minmax(90px, 1fr) 76px minmax(90px, 1fr) 110px 100px 110px 92px; gap: 12px; align-items: center; padding: 9px 8px; border-radius: 12px; font-size: 14px; }
.prow + .prow { border-top: 1px solid var(--divider); }
.prow:not(.head):hover { background: rgba(255,255,255,.7); }
.prow.head { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; padding-bottom: 4px; }
.prow .num { text-align: right; font-variant-numeric: tabular-nums; }
.prow.inactive { opacity: .55; }
.p-desc b { font-weight: 500; display: block; } .p-desc small { color: var(--muted); font-size: 12px; } .p-desc .chip { margin-top: 4px; height: 20px; font-size: 11px; }
.my { display: inline-flex; align-items: center; gap: 6px; } .my.old { color: #8E2A22; font-weight: 500; }
.p-act { display: flex; justify-content: flex-end; }
.pview { display: flex; flex-direction: column; gap: 14px; }
.pv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 26px; }
.pv-grid dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; margin: 8px 0 0; font-size: 14px; }
.pv-grid dt { color: var(--ink2); } .pv-grid dd { margin: 0; text-align: right; }
.pv-grid .terms { justify-content: flex-end; }
@media (max-width: 900px) { .prow { grid-template-columns: 1fr auto auto; } .prow > :nth-child(2), .prow > :nth-child(4), .prow > :nth-child(5), .prow > :nth-child(7) { display: none; } .pv-grid { grid-template-columns: 1fr; } }
/* frames */
.fcard > summary .f-stat { display: inline-flex; flex-direction: column; align-items: flex-end; font-size: 14px; min-width: 76px; font-variant-numeric: tabular-nums; }
.fcard > summary .f-stat small { color: var(--muted); font-size: 11px; }
.fcard > summary .icon-btn { margin-left: 4px; }
.prow.frow { grid-template-columns: minmax(200px, 2.4fr) 56px minmax(80px, 1fr) 70px minmax(70px, .9fr) 50px 90px 90px 176px; }
.f-add { padding: 10px 8px 2px; }
@media (max-width: 900px) { .prow.frow { grid-template-columns: 1fr auto; } .prow.frow > :not(:first-child):not(:last-child) { display: none; } .fcard > summary .f-stat { display: none; } }
/* pricing by model */
details.price-line > summary { display: grid; align-items: center; gap: 14px; }
details.price-line > summary .pc-f { text-align: right; } details.price-line > summary .pc-f small { display: block; color: var(--muted); font-size: 11px; }
details.price-line > summary .pc-f b { font-size: 17px; font-weight: 500; } details.price-line > summary .pc-f .chip { margin-left: 6px; height: 20px; font-size: 11px; }
.pl-name b { display: block; font-weight: 500; font-size: 16px; } .pl-name .row { margin-top: 4px; gap: 6px; }
.pl-body { border-top: 1px solid var(--divider); padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.pl-body tr.past td { color: var(--muted); }
@media (max-width: 900px) { details.price-line > summary { grid-template-columns: 18px 1fr auto !important; } details.price-line > summary .pc-f { display: none; } }
.field.locked { opacity: .5; }
/* expenses */
table.grid.exp td.actions { white-space: nowrap; text-align: right; width: 1%; }
table.grid.exp td:first-child { width: 1%; }
table.grid.exp td.wrap.muted { max-width: 360px; font-size: 13px; }
table.grid.compact td, table.grid.compact th { padding: 6px 10px; }
table.grid.compact input.in.sm { width: 110px; }
table.grid tr.changed td { background: rgba(228,255,58,.18); }
/* headcount chart */
.hc-chart-wrap { position: relative; margin-top: 8px; }
.hc-chart { width: 100%; height: auto; display: block; }
.hc-chart .g { stroke: rgba(22,33,30,.08); }
.hc-chart .q { stroke: rgba(22,33,30,.18); stroke-dasharray: 2 4; }
.hc-chart .yr { stroke: rgba(22,33,30,.35); }
.hc-chart .now { stroke: #D9F23A; stroke-width: 3; }
.hc-chart .hover { stroke: rgba(22,33,30,.5); stroke-dasharray: 3 3; }
.hc-chart .ax { font-size: 11px; fill: #6F8580; font-family: inherit; } .hc-chart .ax.l { text-anchor: end; } .hc-chart .ax.yl { fill: #16211E; font-weight: 500; font-size: 12px; } .hc-chart .ax.ql { font-size: 10px; }
.hc-chart .ln { fill: none; stroke-width: 2.2; stroke-linejoin: round; } .hc-chart .ln.hc { stroke: #16211E; } .hc-chart .ln.cost { stroke: #3E6B8A; }
.hc-chart .pt.hc { fill: #16211E; } .hc-chart .pt.cost { fill: #3E6B8A; }
.hc-tip { position: absolute; top: 8px; background: #16211E; color: #fff; border-radius: 10px; padding: 8px 12px; font-size: 12px; pointer-events: none; min-width: 170px; }
.hc-tip b { display: block; margin-bottom: 4px; } .hc-tip .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; } .hc-tip .dot.hc { background: #fff; } .hc-tip .dot.cost { background: #8FB8D6; }
.legend { display: flex; gap: 16px; font-size: 13px; } .legend .lg::before { content: ''; display: inline-block; width: 18px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; } .legend .lg.hc::before { background: #16211E; } .legend .lg.cost::before { background: #3E6B8A; }
/* expense years in the edit window */
.years-edit { margin-top: 18px; border-top: 1px solid var(--divider); padding-top: 14px; }
.years-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 8px; }
.yr-cell { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink2); } .yr-cell input { width: 100%; }
.yr-cell.set input { background: rgba(228,255,58,.25); }
/* investments */
.inv-list { display: flex; flex-direction: column; gap: 10px; }
.inv { background: rgba(255,255,255,.55); border: 1px solid var(--divider); border-radius: 16px; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.inv.off { opacity: .6; }
.inv-main { display: grid; grid-template-columns: 44px minmax(200px, 1.6fr) 110px minmax(170px, 1fr) minmax(200px, 1.3fr) 84px; gap: 14px; align-items: center; }
.inv-name b { display: block; font-weight: 500; } .inv-name small, .inv-f small, .inv-years > small { display: block; color: var(--muted); font-size: 11px; }
.inv-f.num { text-align: right; } .inv-f > span { font-size: 14px; }
.inv-years { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border-top: 1px solid var(--divider); padding-top: 8px; }
.inv-years > small { margin-right: 6px; }
.inv-years .term { background: rgba(22,33,30,.06); } .inv-years .term.now { background: rgba(228,255,58,.55); }
@media (max-width: 900px) { .inv-main { grid-template-columns: 44px 1fr auto; } .inv-main .inv-f { display: none; } }
/* collapsible sections: expenses per company, investments per category */
details.card.co-sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; margin: -4px 0; }
details.card.co-sec > summary::-webkit-details-marker { display: none; }
details.card.co-sec > summary::before { content: '▸'; color: var(--ink2); transition: transform .15s; font-size: 16px; }
details.card.co-sec[open] > summary::before { transform: rotate(90deg); }
details.card.co-sec > summary h2 { margin: 0; }
details.card.co-sec[open] > summary { margin-bottom: 14px; }
details.card.co-sec .grow { flex: 1; }
details.card.co-sec > summary .count { background: rgba(22,33,30,.07); border-radius: 999px; padding: 2px 10px; font-size: 12px; }
details.ccat.sub > summary .f-stat { display: inline-flex; flex-direction: column; align-items: flex-end; font-size: 14px; min-width: 90px; }
details.ccat.sub > summary .f-stat small { color: var(--muted); font-size: 11px; }
details.ccat.sub > .table-wrap { padding: 0 10px 10px; }
.row.nowrap { flex-wrap: nowrap; flex-shrink: 0; }
.cat-list { margin-top: 10px; } .cat-list > summary { cursor: pointer; color: var(--ink2); font-size: 13px; }
.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cat-chip { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.6); border: 1px solid var(--divider); border-radius: 12px; padding: 6px 6px 6px 12px; }
.cat-chip b { font-weight: 500; font-size: 14px; } .cat-chip small { color: var(--muted); font-size: 11px; }
.cat-chip .icon-btn { width: 28px; height: 28px; }
.inv-sum { flex-wrap: wrap; }
.inv-sum-name { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 220px; }
.yr5 { display: grid; grid-template-columns: repeat(5, minmax(96px, 1fr)); gap: 6px; }
.yr5 .y { background: rgba(255,255,255,.55); border-radius: 10px; padding: 6px 10px; text-align: right; font-variant-numeric: tabular-nums; }
.yr5 .y.now { background: rgba(228,255,58,.45); }
.yr5 .y small { display: block; color: var(--muted); font-size: 11px; } .yr5 .y b { display: block; font-weight: 500; font-size: 14px; } .yr5 .y span { display: block; font-size: 11px; color: var(--ink2); }
@media (max-width: 900px) { .yr5 { grid-template-columns: repeat(3, 1fr); } }
/* sales */
.seg { display: inline-flex; background: rgba(22,33,30,.06); border-radius: 12px; padding: 3px; gap: 2px; }
.seg.wrap { flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 9px; font: inherit; font-size: 13px; cursor: pointer; color: var(--ink2); }
.seg button.on { background: var(--ink); color: #fff; }
.seg button:not(.on):hover { background: rgba(255,255,255,.7); }
table.grid.sales { font-size: 13px; }
table.grid.sales .tot { background: rgba(22,33,30,.04); font-weight: 500; }
table.grid.sales tr.model-head { cursor: pointer; background: rgba(22,33,30,.05); }
table.grid.sales tr.model-head th { font-size: 14px; white-space: nowrap; }
table.grid.sales tr.model-head .caret { display: inline-block; width: 14px; color: var(--ink2); }
table.grid.sales tr.model-head td { font-weight: 600; }
table.grid.sales th.bname { vertical-align: top; font-weight: 500; white-space: nowrap; padding-top: 10px; border-right: 1px solid var(--divider); }
table.grid.sales th.bname .chip { margin-left: 6px; height: 18px; font-size: 10px; }
table.grid.sales td.mname { color: var(--muted); font-size: 11px; white-space: nowrap; }
table.grid.sales tr.mrow td, table.grid.sales tr.mrow th { padding-top: 3px; padding-bottom: 3px; border-top: 0; }
table.grid.sales tr.mrow.first td, table.grid.sales tr.mrow.first th { border-top: 1px solid var(--divider); padding-top: 8px; }
table.grid.sales tr.mrow.sold td { font-weight: 600; font-size: 14px; }
table.grid.sales tr.mrow.arrived td.num { color: #3E6B8A; }
table.grid.sales tr.mrow.stock td.num { color: var(--ink2); }
table.grid.sales tr.mrow.revenue td.num { color: var(--muted); font-size: 12px; }
table.grid.sales tbody.totals tr th, table.grid.sales tbody.totals tr td { border-top: 1px solid var(--divider); }
table.grid.sales tbody.totals tr.tot1 th, table.grid.sales tbody.totals tr.tot1 td { border-top: 2px solid rgba(22,33,30,.25); }
table.grid.sales tbody.totals tr.tot3 { font-weight: 600; background: rgba(228,255,58,.18); }
table.grid.sales tbody.totals tr.tot4 td { color: var(--muted); }
table.grid.ptot th.group { text-align: center; border-left: 1px solid var(--divider); }
/* sales: no inner scroll, clear editable "Sold" */
.sales-wrap { border-radius: 16px; background: rgba(255,255,255,.6); overflow-x: auto; }
.toolbar .grow { flex: 1; }
.sales-legend { flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; font-size: 12px; color: var(--ink2); }
.sales-legend .sw { display: inline-block; width: 22px; height: 14px; border-radius: 4px; margin-right: 6px; vertical-align: middle; border: 1px solid rgba(22,33,30,.25); background: #fff; }
.sales-legend .sw.hand { background: rgba(228,255,58,.8); border-color: #B8CC2A; }
.sales-legend .sw.adjusted { background: rgba(240,170,90,.35); border-color: #D9893A; }
.sales-legend .sw.real { background: rgba(47,93,80,.14); border-color: #2F5D50; }
.sales-legend .mv, table.grid.sales .mv { font-size: 10px; font-weight: 700; color: #2F5D50; margin-right: 4px; }
table.grid.sales td .mv { display: block; text-align: right; line-height: 1.1; }
table.grid.sales .mv.neg { color: #9A5B00; }
table.grid.sales td.sold-cell.real .v { background: rgba(47,93,80,.12); border-color: #2F5D50; }
table.grid.sales th.real-col { background: rgba(47,93,80,.07); }
table.grid.sales th.real-col.review { background: rgba(230,160,40,.12); }
table.grid.sales th .real-tag { display: block; font-size: 10px; font-weight: 600; color: #2F5D50; }
table.grid.sales th .real-tag.review { color: #9A5B00; }
table.grid.sales td.mname { font-style: normal; }
table.grid.sales tr.mrow.sold td.mname { color: var(--ink); font-weight: 600; font-size: 12px; }
table.grid.sales tr.mrow:not(.sold) td.num { font-weight: 400; }
table.grid.sales td.sold-cell { padding: 3px 4px; }
table.grid.sales td.sold-cell .v { display: block; min-width: 38px; padding: 4px 6px; border-radius: 7px; border: 1px solid rgba(22,33,30,.18); background: #fff; font-weight: 600; font-size: 14px; text-align: right; min-height: 26px; }
table.grid.sales td.sold-cell.past .v { background: rgba(255,255,255,.55); }
table.grid.sales td.sold-cell.hand .v { background: rgba(228,255,58,.8); border-color: #B8CC2A; }
table.grid.sales td.sold-cell.adjusted .v { background: rgba(240,170,90,.35); border-color: #D9893A; }
table.grid.sales td.sold-cell[tabindex] { cursor: pointer; }
table.grid.sales td.sold-cell[tabindex]:hover .v, table.grid.sales td.sold-cell[tabindex]:focus-visible .v { border-color: var(--ink); box-shadow: 0 0 0 2px rgba(228,255,58,.9); }
table.grid.sales tr.mrow.stock td.zero { color: var(--error); }
table.grid.sales tr.mrow.revenue td, table.grid.sales tr.mrow.revenue td.mname { font-size: 11px; }
table.grid.sales td.sold-cell.empty .v { background: transparent; border-style: dashed; border-color: rgba(22,33,30,.12); cursor: not-allowed; }
/* orders grid */
table.grid.orders-grid th.bname { border-right: 1px solid var(--divider); font-weight: 500; }
table.grid.orders-grid td.ord-cell { padding: 3px 4px; cursor: pointer; }
table.grid.orders-grid td.ord-cell .v { display: block; min-width: 38px; min-height: 26px; padding: 4px 6px; border-radius: 7px; border: 1px solid rgba(22,33,30,.18); font-weight: 600; font-size: 14px; text-align: right; background: #fff; }
table.grid.orders-grid td.ord-cell .v small { font-weight: 400; color: var(--muted); }
table.grid.orders-grid td.ord-cell.empty .v { border-style: dashed; border-color: rgba(22,33,30,.15); background: transparent; color: rgba(22,33,30,.25); text-align: center; font-weight: 400; }
table.grid.orders-grid td.ord-cell.empty:hover .v { color: var(--ink); background: rgba(228,255,58,.5); border-style: solid; }
table.grid.orders-grid td.ord-cell:not(.empty):hover .v { box-shadow: 0 0 0 2px rgba(228,255,58,.9); border-color: var(--ink); }
.st-planned .v, .sw.st-planned { background: #fff !important; }
.st-placed .v, .sw.st-placed { background: #CFE0EC !important; border-color: #8FB8D6 !important; }
.st-shipped .v, .sw.st-shipped { background: #B9D3E6 !important; border-color: #6F9CC0 !important; }
.st-received .v, .sw.st-received { background: rgba(228,255,58,.55) !important; border-color: #B8CC2A !important; }
.st-assembled .v, .sw.st-assembled { background: #16211E !important; color: #fff; border-color: #16211E !important; }
.st-mixed .v { background: linear-gradient(90deg, #fff 50%, #CFE0EC 50%) !important; }
.sales-legend .sw.empty { border-style: dashed; background: transparent; }
table.grid.orders-grid td.ord-cell .v small.split { display: block; font-size: 9px; font-weight: 400; color: var(--ink2); line-height: 1.1; white-space: nowrap; }
.st-assembled .v small.split { color: #cfd8d5; }
.big-total { font-size: 24px; padding: 6px 0; }
/* orders grid: only Simulation / Ready to order */
.st-sim .v, .sw.st-sim { background: #fff !important; border-color: rgba(22,33,30,.2) !important; color: var(--ink2) !important; }
.st-ready .v, .sw.st-ready { background: #E4FF3A !important; border-color: #B8CC2A !important; color: #16211E !important; }
.st-partready .v, .sw.st-partready { background: linear-gradient(90deg, #E4FF3A 50%, #fff 50%) !important; border-color: #B8CC2A !important; color: #16211E !important; }
.st-ready .v small.split, .st-partready .v small.split { color: #16211E; }
.ready-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 500; border: 1px solid rgba(22,33,30,.2); background: #fff; color: var(--ink2); white-space: nowrap; }
.ready-pill.ready { background: #E4FF3A; border-color: #B8CC2A; color: #16211E; }
.ready-row { margin-top: 6px; gap: 10px; }
/* purchase orders page */
.po-month { background: rgba(255,255,255,.55); border: 1px solid var(--divider); border-radius: 16px; padding: 8px 12px; }
.po-month-head { display: flex; align-items: center; gap: 14px; padding: 6px 4px 8px; border-bottom: 1px solid var(--divider); }
.po-all { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink2); cursor: pointer; }
.po-row { display: grid; grid-template-columns: 24px minmax(220px, 1.6fr) 70px minmax(200px, 1.3fr) minmax(170px, 1fr) 110px 44px; gap: 14px; align-items: center; padding: 8px 4px; }
.po-row + .po-row { border-top: 1px solid var(--divider); }
.po-row.late { background: rgba(180,56,46,.05); border-radius: 10px; }
.po-bike { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .po-bike b { font-size: 15px; letter-spacing: .02em; }
.po-f small { display: block; color: var(--muted); font-size: 11px; } .po-f.num { text-align: right; } .po-f.num b { font-size: 18px; font-weight: 500; }
.po-row input[type=checkbox], .po-all input { width: 18px; height: 18px; accent-color: #16211E; }
@media (max-width: 900px) { .po-row { grid-template-columns: 24px 1fr auto 44px; } .po-row > :nth-child(4), .po-row > :nth-child(5), .po-row > :nth-child(6) { display: none; } }
.seg.tabs button { font-weight: 500; padding: 7px 14px; }
/* PO window */
.po-orders { display: flex; flex-direction: column; gap: 6px; }
.po-order { display: grid; grid-template-columns: minmax(200px, 1fr) 50px 1fr auto; gap: 12px; align-items: center; background: rgba(22,33,30,.04); border-radius: 12px; padding: 6px 10px; }
.po-order b { letter-spacing: .02em; }
.po-foot { border-top: 1px solid var(--divider); padding-top: 12px; align-items: center; gap: 10px; }
.po-foot .grow { flex: 1; }
td.nowrap { white-space: nowrap; }
/* one scroll only: tables never get their own vertical scroll */
.table-wrap { max-height: none; overflow-y: visible; }
/* PO groups */
details.po-group { background: rgba(255,255,255,.55); border: 1px solid var(--divider); border-radius: 16px; }
details.po-group.locked { border-color: #B8CC2A; }
details.po-group > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px 16px; flex-wrap: wrap; }
details.po-group > summary::-webkit-details-marker { display: none; }
details.po-group > summary::before { content: '▸'; color: var(--ink2); transition: transform .15s; }
details.po-group[open] > summary::before { transform: rotate(90deg); }
.pg-name { flex: 1; min-width: 260px; } .pg-name b { display: block; font-size: 15px; letter-spacing: .02em; } .pg-name small { color: var(--muted); font-size: 12px; }
.pg-act { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pg-body { border-top: 1px solid var(--divider); padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
/* seasons gantt */
.season-gantt { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 4px; }
.sg-years { position: relative; height: 22px; margin-left: 200px; border-bottom: 1px solid var(--divider); }
.sg-years > div { position: absolute; top: 0; font-size: 11px; color: var(--ink2); border-left: 1px solid var(--divider); padding-left: 4px; height: 100%; }
.sg-row { display: grid; grid-template-columns: 190px 1fr; gap: 10px; align-items: center; }
.sg-label b { display: block; font-weight: 500; font-size: 14px; } .sg-label small { color: var(--muted); font-size: 11px; }
.sg-track { position: relative; height: 28px; background: rgba(22,33,30,.04); border-radius: 8px; }
.sg-bar { position: absolute; top: 3px; bottom: 3px; background: #fff; border: 1px solid rgba(22,33,30,.2); border-radius: 6px; font-size: 11px; display: flex; align-items: center; padding: 0 8px; white-space: nowrap; overflow: hidden; }
.sg-bar.locked { background: #E4FF3A; border-color: #B8CC2A; font-weight: 600; }
.sg-now { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #B4382E; z-index: 2; }
/* timeline */
.gantt { position: relative; }
.gantt.tall { max-height: none; overflow: visible; }
.gantt rect.tl { cursor: help; }
.gantt rect.tl.order, .sw.tl-order { fill: rgba(22,33,30,.18); background: rgba(22,33,30,.18); }
.gantt rect.tl.order.late, .sw.tl-late { fill: rgba(180,56,46,.4); background: rgba(180,56,46,.4); }
.gantt rect.tl.transport, .sw.tl-transport { fill: #8FB8D6; background: #8FB8D6; }
.gantt rect.tl.buffer, .sw.tl-buffer { fill: #4A5C58; background: #4A5C58; }
.gantt rect.tl.transit, .sw.tl-transit { fill: #16211E; background: #16211E; }
.gantt rect.tl.selling, .sw.tl-selling { fill: #C7DA4A; background: #C7DA4A; }
.gantt rect.tl:hover { stroke: #16211E; stroke-width: 1.5; }
.tl-tip { min-width: 240px; max-width: 320px; z-index: 5; }
.tl-tip div { color: #DDE5E2; margin-top: 2px; }
/* "?" explanations */
.info-btn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 6px; border-radius: 50%; border: 1px solid rgba(22,33,30,.3); background: #fff; font-size: 11px; font-weight: 600; cursor: pointer; vertical-align: middle; color: var(--ink); padding: 0; }
.info-btn:hover { background: var(--lime); }
.info-text { background: rgba(228,255,58,.18); border: 1px solid rgba(184,204,42,.6); border-radius: 10px; padding: 8px 10px; font-size: 12px; line-height: 1.45; margin-top: 6px; }
.page-head .head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.sc-buffer { font-size: 13px; } .sc-buffer > small { display: block; color: var(--muted); font-size: 11px; margin-bottom: 2px; }
.sc-buffer.extra { background: rgba(240,170,90,.18); border-radius: 10px; padding: 6px 10px; }

/* order lifecycle */
.step-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 500; border: 1px solid rgba(22,33,30,.2); white-space: nowrap; background: #fff; color: var(--ink2); }
.sp-ready.step-pill, .sw.sp-ready, .sp-ready .v { background: #E4FF3A !important; border-color: #B8CC2A !important; color: #16211E !important; }
.sp-pos.step-pill, .sw.sp-pos, .sp-pos .v { background: #F3FFB0 !important; border-color: #C9D86A !important; color: #16211E !important; }
.sp-placed.step-pill, .sw.sp-placed, .sp-placed .v { background: #16211E !important; border-color: #16211E !important; color: #fff !important; }
.sp-confirmed.step-pill, .sw.sp-confirmed, .sp-confirmed .v { background: #2F5D50 !important; border-color: #2F5D50 !important; color: #fff !important; }
.sp-partsIn.step-pill, .sw.sp-partsIn, .sp-partsIn .v { background: #8FB8D6 !important; border-color: #6E9CBE !important; color: #16211E !important; }
.sp-assembled.step-pill, .sw.sp-assembled, .sp-assembled .v { background: #C7DA4A !important; border-color: #A9BC2E !important; color: #16211E !important; }
.sp-placed .v small.split, .sp-confirmed .v small.split { color: rgba(255,255,255,.8) !important; }
.ord-cell.none .v { background: transparent !important; border: 0 !important; }
.done-sec .ord-cell { cursor: pointer; }
.all-orders th, .all-orders td { border-top: 2px solid rgba(22,33,30,.25); }
.track { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 16px 0 6px; padding: 0; counter-reset: s; }
.track li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; font-size: 12px; color: var(--ink2); }
.track li::before { content: ''; position: absolute; top: 13px; left: -50%; width: 100%; height: 3px; background: rgba(22,33,30,.12); z-index: 0; }
.track li:first-child::before { display: none; }
.track li.done::before, .track li.now::before { background: #16211E; }
.track .dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid rgba(22,33,30,.2); font-weight: 600; font-size: 12px; }
.track li.done .dot { background: #16211E; border-color: #16211E; color: #E4FF3A; }
.track li.now .dot { background: #E4FF3A; border-color: #16211E; color: #16211E; box-shadow: 0 0 0 4px rgba(228,255,58,.35); }
.track li.now b { color: #16211E; }
.track small { color: var(--ink2); min-height: 14px; }
@media (max-width: 700px) { .track { grid-template-columns: repeat(4, 1fr); row-gap: 12px; } .track li::before { display: none; } }
.placed-banner { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; padding: 14px 20px; border-radius: 16px; background: #16211E; color: #fff; font-size: 15px; }
.placed-banner b { color: #E4FF3A; letter-spacing: .02em; }
.placed-banner .muted { color: rgba(255,255,255,.7); margin-left: auto; }
.po-st { white-space: nowrap; font-size: 12px; font-weight: 500; }
.ps-draft { color: var(--ink2); } .ps-sent { color: #3B6E96; } .ps-confirmed { color: #2F5D50; } .ps-shipped { color: #3B6E96; } .ps-received { color: #4E7A12; }
.delay-text { color: #D9822B; font-weight: 500; }
.gantt rect.tl.delay, .sw.tl-delay { fill: #F0A040; background: #F0A040; }
.gantt .tl-mark { cursor: default; fill: #16211E; }
.tl-mark.m-order { color: #16211E; fill: #16211E; }
.tl-mark.m-arrive { color: #3B6E96; fill: #3B6E96; } .tl-mark.m-arrive.late { color: #D9822B; fill: #D9822B; }
.tl-mark.m-assembly { color: #16211E; fill: #E4FF3A; stroke: #16211E; stroke-width: .6; }
.tl-mark.m-available { color: #4E7A12; fill: #4E7A12; }
.tl-mark.m-cancel { color: #B4382E; fill: #B4382E; font-weight: 700; }
.legend b.tl-mark.m-assembly { color: #16211E; text-shadow: 0 0 0 #E4FF3A; }
.gantt tspan.po-ico { cursor: default; font-weight: 700; }
.gantt tspan.ps-sent, .gantt tspan.ps-shipped { fill: #3B6E96; } .gantt tspan.ps-confirmed { fill: #2F5D50; } .gantt tspan.ps-received { fill: #4E7A12; } .gantt tspan.ps-draft { fill: #8A9995; }
.next-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.na-col { display: flex; flex-direction: column; gap: 6px; }
.na-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(22,33,30,.12); background: #fff; cursor: pointer; font: inherit; font-size: 13px; }
.na-item:hover { border-color: #16211E; }
.ord-cell.sp-mixed .v { outline: 2px dashed rgba(22,33,30,.35); outline-offset: -4px; }
.list-sec { border-top: 1px solid rgba(22,33,30,.1); padding: 10px 0 4px; }
.list-sec > summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; padding: 4px 0; }
.list-sec > summary::-webkit-details-marker { display: none; }
.list-sec > summary::before { content: '▸'; color: var(--ink2); }
.list-sec[open] > summary::before { content: '▾'; }
.list-sec > summary h3 { margin: 0; font-size: 16px; }
.list-sec.ls-ready > summary h3::after { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: #E4FF3A; border: 1px solid #B8CC2A; margin-left: 8px; }
.list-sec.ls-placed > summary h3::after { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: #16211E; margin-left: 8px; }
.gantt rect.tl.sim { opacity: .35; stroke: #16211E; stroke-width: 1; stroke-dasharray: 3 2; }
.gantt rect.tl.locked { stroke: #16211E; stroke-width: 1.2; }
.sw.sim-sw { opacity: .4; border: 1px dashed #16211E !important; }
.sw.locked-sw { background: #16211E !important; }
.handover { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 14px; padding: 12px 16px; border-radius: 14px; background: rgba(22,33,30,.05); font-size: 13px; }
.handover a { margin-left: auto; }
.list-sec > summary .btn { margin-left: auto; }
.tab-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px; background: #B4382E; color: #fff; font-size: 11px; font-weight: 600; }
.tab-badge.calm { background: var(--sage); }
.tab-badge[hidden] { display: none; }
.note-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.note-row { display: grid; grid-template-columns: 120px 28px 1fr auto auto; gap: 14px; align-items: center; padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid rgba(22,33,30,.1); color: inherit; text-decoration: none; }
.note-row:hover { border-color: #16211E; }
.note-row.late { border-left: 4px solid #B4382E; }
.note-row.info { background: rgba(255,255,255,.6); }
.note-date { display: flex; flex-direction: column; } .note-date small { color: var(--ink2); }
.note-row.late .note-date small { color: #B4382E; font-weight: 600; }
.note-ico { font-size: 16px; text-align: center; }
.note-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.note-go { font-size: 12px; color: var(--ink2); white-space: nowrap; }
.notes.late > summary h2 { color: #B4382E; }
a.notes-link { text-decoration: none; color: inherit; margin-top: 0; }
a.notes-link span:last-child { margin-left: auto; font-weight: 600; }
@media (max-width: 760px) { .note-row { grid-template-columns: 90px 1fr; } .note-ico, .note-go { display: none; } }
.warn-card { border: 2px solid rgba(217,130,43,.6); }
.warn-line { padding: 10px 0; border-top: 1px solid rgba(22,33,30,.08); display: flex; flex-direction: column; gap: 4px; }
.warn-line.late b { color: #B4382E; }
.warn-text { color: #D9822B; font-weight: 500; }
.co-sec .banner { align-items: center; } .co-sec .banner .btn { margin-left: auto; }
td.actions .row.nowrap { gap: 6px; }
nav.sub .sub-sep { width: 1px; align-self: stretch; margin: 6px 6px; background: rgba(22,33,30,.25); }
.warn-btn { background: #FFE9CC; border: 1px solid #E0A458; color: #7A4A10; }
.warn-btn:hover { background: #FFDDAF; }
.pos-text { color: #4E7A12; font-weight: 500; }
tr.after-row td { background: rgba(228,255,58,.18); }
.sel-bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: 8px 0; border-radius: 12px; background: #fff; border: 1px solid rgba(22,33,30,.12); }
tr.selected td { background: rgba(228,255,58,.22); }
/* placements */
.pl-card { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid rgba(22,33,30,.1); color: inherit; text-decoration: none; }
.pl-card:hover { border-color: #16211E; }
.pl-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pl-side { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.po-month.off { opacity: .45; }
.track.six { grid-template-columns: repeat(6, 1fr); }
.place-list { padding: 12px 16px; border-radius: 14px; }
.place-list ul { margin: 6px 0 0 18px; padding: 0; }
.place-list.err { background: rgba(180,56,46,.1); border: 1px solid rgba(180,56,46,.35); } .place-list.err b { color: #B4382E; }
.place-list.warn { background: rgba(240,170,90,.18); border: 1px solid rgba(217,130,43,.4); }
.place-tick { padding: 12px 16px; border-radius: 14px; background: rgba(228,255,58,.3); }
@media (max-width: 760px) { .pl-card { flex-direction: column; align-items: flex-start; } .track.six { grid-template-columns: repeat(3, 1fr); } }
/* size ratios */
.sizes-box { padding: 12px 16px; border-radius: 14px; background: rgba(22,33,30,.04); }
.sizes-row { display: flex; gap: 14px; flex-wrap: wrap; }
.size-cell { display: flex; flex-direction: column; gap: 2px; }
.size-cell input.pct { width: 64px; }
.ratio-box { margin: 8px 0 12px; padding: 10px 14px; border-radius: 14px; background: rgba(22,33,30,.04); }
.ratio-box > summary { cursor: pointer; }
.ratio-row { display: grid; grid-template-columns: 180px 1fr 120px auto; gap: 12px; align-items: center; padding: 6px 0; border-top: 1px solid rgba(22,33,30,.06); }
@media (max-width: 760px) { .ratio-row { grid-template-columns: 1fr auto; } }
/* finance reports */
.period-bar { gap: 10px; flex-wrap: wrap; }
.big-kpis .kpi.big-kpi b.big { font-size: 34px; }
.big-kpis .kpi.big-kpi small { display: block; }
.kpis.linked a.kpi { color: inherit; text-decoration: none; } .kpis.linked a.kpi:hover { outline: 2px solid #16211E; }
.cols-2.wide-left { grid-template-columns: 1.15fr 1fr; }
@media (max-width: 1100px) { .cols-2.wide-left { grid-template-columns: 1fr; } }
.rep-chart { position: relative; }
.rep-chart rect.bar:hover, .rep-chart circle:hover { opacity: .8; }
.b-turn, .sw.b-turn { fill: #16211E; background: #16211E; }
.b-gm, .sw.b-gm { fill: #C7DA4A; background: #C7DA4A; }
.b-ebit, .sw.b-ebit { fill: #8FB8D6; background: #8FB8D6; }
.wf-total { fill: #16211E; } .wf-neg-total { fill: #B4382E; } .wf-cost { fill: #E7A79F; } .wf-plus { fill: #C7DA4A; }
.io-collections, .sw.io-collections { fill: #4E7A12; background: #4E7A12; }
.io-financingIn, .sw.io-financingIn { fill: #A9C97A; background: #A9C97A; }
.io-parts, .sw.io-parts { fill: #B4382E; background: #B4382E; }
.io-people, .sw.io-people { fill: #D9822B; background: #D9822B; }
.io-costs, .sw.io-costs { fill: #F0B87A; background: #F0B87A; }
.io-tax, .sw.io-tax { fill: #7A4A10; background: #7A4A10; }
.io-investments, .sw.io-investments { fill: #8FB8D6; background: #8FB8D6; }
.io-financingOut, .sw.io-financingOut { fill: #4A5C58; background: #4A5C58; }
.bk-high { fill: #2F5D50; stroke: #fff; stroke-width: 2; cursor: default; } .bk-low { fill: #B4382E; stroke: #fff; stroke-width: 2; cursor: default; }
.rep-table tr.cost td { color: var(--ink2); }
.rep-table td.picked, .rep-table th.picked { background: rgba(228,255,58,.22); }
/* R7b: closed months come from the books */
.rep-table td.real-col, .rep-table th.real-col { background: rgba(47,93,80,.07); }
.rep-table td.real-col.review, .rep-table th.real-col.review { background: rgba(230,160,40,.12); }
.rep-table th .real-tag { display: block; font-size: 10px; font-weight: 600; color: #2F5D50; letter-spacing: .02em; }
.rep-table th .real-tag.review { color: #9A5B00; }
.rep-table td.in-text { color: #4E7A12; } .rep-table td.out-text { color: #A2483F; }
td.bank-cell { position: relative; } td.bank-cell .bk-bar { position: absolute; left: 4px; bottom: 4px; height: 4px; border-radius: 2px; background: #C7DA4A; max-width: calc(100% - 8px); } td.bank-cell .bk-bar.neg { background: #B4382E; }
details.pcard.mcard > summary { display: grid; grid-template-columns: 18px minmax(130px,1.2fr) repeat(7, minmax(78px,1fr)) 110px; align-items: center; gap: 8px; }
.share-bar { display: inline-block; width: 120px; height: 8px; border-radius: 4px; background: rgba(22,33,30,.08); overflow: hidden; } .share-bar i { display: block; height: 100%; background: #16211E; }
@media (max-width: 900px) { details.pcard.mcard > summary { grid-template-columns: 18px 1fr 1fr 1fr; } }
/* Change / History (dated values) */
.from-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.warn-text { color: #9A5A12; }
.dated { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dated .icon-btn { width: 26px; height: 26px; }
.chip.next { background: rgba(240,170,90,.22); color: #7A4A16; height: 20px; font-size: 11px; }
.chip.dh { height: 20px; font-size: 11px; }
.chip.dh.current { background: var(--lime); } .chip.dh.future { background: rgba(240,170,90,.25); color: #7A4A16; } .chip.dh.past { color: var(--muted); }
.dated-history tr.dh-past td { color: var(--muted); }
td .next-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #E0A050; margin-left: 5px; vertical-align: middle; }
.sc-dated-foot { display: flex; align-items: center; justify-content: space-between; gap: 2px; } .sc-dated .dated { gap: 0; } .sc-dated .dated .icon-btn { width: 22px; height: 22px; } .sc-dated .chip.next { margin-top: 4px; }
dd .dated { justify-content: flex-end; }
.field label .icon-btn { width: 20px; height: 20px; margin: -4px 0 -4px 6px; vertical-align: middle; } .field label .icon-btn svg { width: 16px; height: 16px; }
.sc-terms-head { display: flex; justify-content: space-between; align-items: center; } .sc-terms-head small { margin: 0; } .sc-terms .chip.next { margin-top: 6px; }
.dated-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 24px; margin-bottom: 14px; }
.dated-grid .dated-v { font-size: 17px; font-weight: 500; min-width: 60px; }
.fact .dated { margin-top: 4px; } .fact .dated .dated-v { font-size: 22px; font-weight: 400; }
.sc-price { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .sc-price small { display: block; color: var(--muted); font-size: 11px; } .sc-price b { font-weight: 500; font-size: 13px; }
.pinc td .in.sm { width: 120px; } .pinc tr.inactive td { opacity: .5; }
/* Pricing: price lists, drift, model view */
.pricing-switch { margin-bottom: 4px; }
.chip.drift { height: 20px; font-size: 11px; } .chip.drift.ok { background: rgba(94,158,58,.18); color: #2F6A1C; } .chip.drift.up { background: rgba(220,90,70,.12); color: #9A3A2A; } .chip.drift.bad { background: #C8452F; color: #fff; }
.grid.board td.bcell { white-space: nowrap; } .grid.board tr.warn-row td:first-child { box-shadow: inset 3px 0 0 #C8452F; }
.pl-bar.frozen rect { fill: #16211E; } .pl-bar.frozen text { fill: #fff; } .pl-bar.draft rect { fill: rgba(240,170,90,.55); stroke: #C98A3A; stroke-dasharray: 5 3; } .pl-bar.draft text { fill: #5A3510; }
.pl-bar:hover rect { opacity: .85; }
.sw.pl-frozen { background: #16211E; } .sw.pl-draft { background: rgba(240,170,90,.55); }
.sw.mv-cog { background: #9AA8A4; height: 3px; } .sw.mv-frozen { background: #16211E; height: 4px; } .sw.mv-live { background: repeating-linear-gradient(90deg, #16211E 0 4px, transparent 4px 8px); height: 2px; } .sw.mv-margin { background: #5E9E3A; height: 3px; }
.mv-build h3 { margin: 6px 0 0; font-size: 15px; font-weight: 500; }
.pl-table .in.sm { width: 84px; padding: 0 8px; } .pl-table td, .pl-table th { padding-left: 6px; padding-right: 6px; } .in.saved { box-shadow: 0 0 0 2px rgba(94,158,58,.6); }
.pl-end { gap: 8px; flex-wrap: wrap; }
.sales-legend .sw.mv-cog, .sales-legend .sw.mv-frozen, .sales-legend .sw.mv-live, .sales-legend .sw.mv-margin { border: 0; border-radius: 2px; } .sales-legend .sw.pl-frozen, .sales-legend .sw.pl-draft { border: 0; }
.pl-end .in.sm { width: 190px; } .pl-end { display: flex; align-items: center; }
.chip.old { background: rgba(200,69,47,.12); color: #9A3A2A; height: 20px; font-size: 11px; }
.pn-row { grid-template-columns: 1fr auto; }

/* Pricing area: list table, compare, versions */
.seg a { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 9px; font-size: 13px; color: var(--ink2); text-decoration: none; }
.seg a.on { background: var(--ink); color: #fff; } .seg a.on small { color: rgba(255,255,255,.7); }
.seg.sm button { padding: 4px 10px; font-size: 12px; }
.pl-bar.notChosen rect { fill: rgba(22,33,30,.12); stroke: rgba(22,33,30,.25); stroke-dasharray: 3 3; } .pl-bar.notChosen text { fill: #4A5C58; }
.sw.pl-notChosen { background: rgba(22,33,30,.15); }
.pl-table td.pl-cell { vertical-align: top; min-width: 128px; padding-top: 8px; padding-bottom: 8px; }
.pl-table .pl-in { width: 100%; max-width: 118px; height: 34px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pl-table .pl-in.typed, .pl-table td.typed .pl-val { background: #FFF27A; border-color: #D9C200; }
.pl-table td.typed .pl-val { border-radius: 8px; padding: 2px 6px; display: inline-block; }
.pl-info { margin-top: 5px; display: flex; flex-direction: column; gap: 1px; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--muted); }
.pl-info .ln { display: flex; gap: 6px; justify-content: flex-end; align-items: baseline; white-space: nowrap; }
.pl-info .lb { color: var(--ph); }
.pl-info .mg { color: var(--ink2); }
.dpct { font-weight: 600; font-size: 11.5px; } .dpct.up { color: #2F6A1C; } .dpct.down { color: #B4382E; } .dpct.zero { color: var(--ph); font-weight: 400; }
.th-sub { font-size: 11px; font-weight: 400; letter-spacing: 0; color: var(--muted); margin-top: 2px; min-height: 14px; }
.pl-summary { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 4px 0 10px; font-size: 14px; }
.chip.edited-chip { background: #FFF27A; color: #5A4C00; }
.cmp-table td.ccell { white-space: nowrap; } .cmp-table td.ccell .small.muted { display: inline; }
.cmp-bar { flex-wrap: wrap; gap: 12px; margin-bottom: 12px; } .cmp-bar select.in, select.in.pick-list { width: auto; min-width: 300px; max-width: 100%; }
.modal-foot { flex-wrap: wrap; }
.cmp-table td.chg { border-radius: 0; } .cmp-table td.chg.up { background: rgba(94,158,58,.16); box-shadow: inset 0 0 0 1px rgba(94,158,58,.35); } .cmp-table td.chg.down { background: rgba(180,56,46,.10); box-shadow: inset 0 0 0 1px rgba(180,56,46,.3); }
.build-chips { flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.bchip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(22,33,30,.15); background: #fff; font: 500 13px Outfit, sans-serif; cursor: pointer; color: var(--ink); }
.bchip i, .bdot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .bdot { margin-right: 8px; }
.bchip.off { background: transparent; color: var(--ph); } .bchip.off i { opacity: .25; }
.season-table th.now, .season-table td.now { background: rgba(232,255,58,.22); }
.season-table td.scell { white-space: nowrap; vertical-align: top; } .season-table .typed-val { background: #FFF27A; border-radius: 6px; padding: 0 4px; }
details.card.mk-sec > summary { flex-wrap: wrap; } details.card.mk-sec > summary .big { font-size: 22px; }
.build-sec { background: rgba(255,255,255,.5); border: 1px solid var(--divider); border-radius: 20px; padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.build-head { gap: 10px; } .build-head h3 { margin: 0; font-size: 20px; font-weight: 500; } .build-head .grow { flex: 1; }
.build-sec details.card.mk-sec { background: rgba(255,255,255,.75); padding: 14px 18px; } .build-sec details.card.mk-sec > summary h2 { font-size: 18px; }
.build-sec .stack { gap: 10px; }
.build-sec details.card.mk-sec { padding: 8px 18px; } .build-sec details.card.mk-sec > summary { margin: 0; min-height: 44px; } .build-sec details.card.mk-sec[open] { padding-bottom: 18px; }
details.card.co-sec:not([open]) { gap: 0; }
/* Pricing → Duties */
.duty-nav { flex-wrap: wrap; gap: 10px; } .duty-nav .grow { flex: 1; }
.duty-fact b.big { font-size: 26px; font-weight: 400; } .duty-fact small { font-size: 11.5px; }
.duty-note { background: rgba(255,255,255,.55); border-radius: 12px; padding: 8px 12px; color: var(--ink2); margin: 0; }
.duty-grid { display: grid; grid-template-columns: minmax(340px, 1fr) minmax(0, 2fr); gap: 16px; align-items: start; }
@media (max-width: 1360px) { .duty-grid { grid-template-columns: 1fr !important; } }
.dated.compact { gap: 6px; }
.dated-link { border: 0; background: transparent; padding: 0; font: inherit; color: inherit; cursor: pointer; border-bottom: 1px dashed rgba(22,33,30,.45); line-height: 1.2; }
.dated-link:hover { border-bottom-color: var(--ink); background: var(--lime-soft); }
.dated-link:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.duty-fact .dated-link { font-size: 26px; font-weight: 400; } .duty-fact .dated { margin-top: 0; }
.duty-grid { grid-template-columns: minmax(400px, 1fr) minmax(0, 2fr); }
/* landed cost simulator */
.sim-card .sim-inputs .help { font-size: 11.5px; }
.sim-whatif { background: rgba(255,255,255,.5); border: 1px solid var(--divider); border-radius: 16px; padding: 10px 16px; }
.sim-whatif > summary { cursor: pointer; display: flex; gap: 8px; align-items: center; list-style: none; } .sim-whatif > summary::-webkit-details-marker { display: none; }
.sim-whatif > summary::before { content: '▸'; color: var(--ink2); transition: transform .15s; } .sim-whatif[open] > summary::before { transform: rotate(90deg); }
.sim-whatif[open] > summary { margin-bottom: 12px; } .sim-whatif .form-grid { margin-bottom: 10px; }
.form-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1100px) { .form-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sim-h { margin: 6px 0 8px; font-size: 15px; font-weight: 500; }
.sim-table th.sim-step { font-weight: 400; font-size: 13px; color: var(--ink); background: transparent; position: static; white-space: normal; letter-spacing: 0; }
.sim-table td, .sim-table thead th { color: rgba(22,33,30,.42); }
.sim-table td .rate { font-size: 11px; color: inherit; opacity: .9; }
.sim-table thead th.hl { background: var(--ink); color: #fff; } .sim-table thead th.hl .th-sub { color: rgba(255,255,255,.7); }
.sim-table td.hl { color: var(--ink); background: rgba(232,255,58,.28); font-weight: 600; }
.sim-table tr.sim-total th.sim-step { font-weight: 600; } .sim-table tr.sim-total td { border-top: 1px solid rgba(22,33,30,.12); }
.sim-table .sv.strong { font-size: 15px; } .sim-table td.hl .sv.strong { font-size: 16px; }
.sim-was { font-size: 11px; font-weight: 400; color: var(--muted); } .sim-was .up { color: #B4382E; } .sim-was .down { color: #2F6A1C; }
.form-grid.sim-inputs { grid-template-columns: 1fr 1.4fr 0.9fr 1.1fr 1.2fr 0.85fr 0.95fr; } @media (max-width: 1200px) { .form-grid.sim-inputs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
details.sim-form > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; } details.sim-form > summary::-webkit-details-marker { display: none; }
details.sim-form > summary::before { content: '▸'; color: var(--ink2); transition: transform .15s; } details.sim-form[open] > summary::before { transform: rotate(90deg); }
.sim-table th.grp { text-align: center; color: var(--ink2); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 11px; background: rgba(22,33,30,.05); }
.sim-table .form-start { border-left: 2px solid rgba(22,33,30,.18); }
.sim-card .build-chips .grow { flex: 1; }
/* pricing overview per model: same column widths in every section */
table.board-fixed { table-layout: fixed; width: 100%; } table.board-fixed col.c-bike { width: 190px; }
/* Pricing → Duties: duties tables side by side inside one card */
.duty-mx { display: flex; flex-direction: column; gap: 12px; }
/* simulator inputs: one-line labels and help, so the row never jumps */
.form-grid.sim-inputs { grid-template-columns: 1.5fr 0.9fr 1.3fr 1.1fr 0.9fr 1fr !important; }
.sim-inputs .field > label, .sim-inputs .field > .help { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* settings as a list */
.set-group { display: flex; flex-direction: column; }
.set-group + .set-group { margin-top: 10px; }
.set-group h3 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--ink2); margin: 6px 0 4px; }
.set-row { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: center; padding: 12px 0; border-top: 1px solid var(--divider); }
.set-text label { display: block; font-weight: 500; font-size: 15px; } .set-text small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; max-width: 720px; }
.set-ctrl { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .set-ctrl > .in, .set-ctrl > .with-unit { width: 100%; } .set-ctrl .err { color: var(--error); font-size: 12px; }
@media (max-width: 760px) { .set-row { grid-template-columns: 1fr; } .set-ctrl { align-items: stretch; } }
.set-ctrl .with-unit { display: flex; align-items: center; gap: 6px; } .set-ctrl .with-unit > .in { flex: 1; min-width: 0; }
.duty-mx table { table-layout: fixed; width: 100%; } .duty-mx tr > :first-child { width: 66%; } .duty-mx tr > :last-child { width: 64px; }

/* ---------- help panel (the ? next to the page title) ---------- */
.page-head .title-row { display: flex; align-items: center; gap: 12px; }
.help-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(22,33,30,.22); background: rgba(255,255,255,.6); font: 600 16px Outfit, sans-serif; color: var(--ink); cursor: pointer; flex: none; margin-top: 8px; }
.help-btn:hover { background: var(--lime); border-color: var(--lime); }
.help-panel { position: fixed; top: 16px; right: 16px; bottom: 16px; width: min(440px, calc(100vw - 32px)); background: rgba(250,252,249,.98); border-radius: 28px; box-shadow: 0 30px 80px rgba(22,33,30,.25); z-index: 60; display: flex; flex-direction: column; }
.help-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 26px 28px 12px; border-bottom: 1px solid var(--divider); }
.help-head h2 { font-size: 24px; font-weight: 500; margin-top: 4px; }
.help-body { padding: 16px 28px 28px; overflow: auto; display: flex; flex-direction: column; gap: 18px; font-size: 14px; }
.help-body h3 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); font-weight: 500; margin-bottom: 8px; }
.help-guide { border-radius: 14px; background: rgba(22,33,30,.04); padding: 10px 14px; margin-bottom: 8px; }
.help-guide summary { cursor: pointer; font-weight: 500; }
.help-guide ol { margin: 8px 0 2px; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.help-rules { padding-left: 18px; display: flex; flex-direction: column; gap: 6px; margin: 0; }

/* ---------- components: library status, missing data, duplicate codes ---------- */
.prow.comp { grid-template-columns: minmax(240px, 2.8fr) minmax(64px, .9fr) 70px minmax(64px, .9fr) 60px 56px 110px 100px 110px 92px; }
.prow.comp .p-spare { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
/* phone: the part, Spare / Crash, cost and the buttons (the general .prow phone rule does not reach these 10 columns) */
@media (max-width: 900px) { .prow.comp { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 6px; } .prow.comp > :first-child { grid-column: 1 / -1; } .prow.comp .p-spare { flex-direction: row; } .prow.comp.head > :not(:first-child) { display: none !important; } .prow.comp > :nth-child(2), .prow.comp > :nth-child(3), .prow.comp > :nth-child(4), .prow.comp > :nth-child(6), .prow.comp > :nth-child(8), .prow.comp > :nth-child(9) { display: none; } .prow.comp > :nth-child(7) { display: block; } }
.prow .p-desc .chips { margin-top: 4px; }
.chip.bad { background: rgba(180,56,46,.12); color: #8E2A22; }
.ccat.flat { padding: 8px 12px; }
.seg button small { color: var(--muted); font-size: 12px; }
.seg button.on small { color: inherit; }
.dup-set { border-radius: 18px; background: rgba(255,255,255,.55); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.radio-row { display: flex; gap: 10px; align-items: center; padding: 4px 0; cursor: pointer; }
.conflict { padding: 8px 12px; border-radius: 12px; background: rgba(240,170,90,.15); display: flex; flex-direction: column; gap: 2px; }
.kv-row.torque { grid-template-columns: 1fr 100px 30px 40px; }

/* ---------- product structure: assembly flow, BOM grouping ---------- */
.flow { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.5); }
.flow-step { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.flow-arrow { color: var(--muted); font-weight: 600; padding: 0 4px; }
.banner.info { background: rgba(255,255,255,.6); }

/* ---------- BOM versions and the gates ---------- */
.problem { padding: 10px 14px; border-radius: 14px; background: rgba(180,56,46,.07); }
.problem-items { margin: 6px 0 0; padding-left: 18px; font-size: 13px; columns: 2; column-gap: 24px; }
.problem.warn { background: rgba(240,170,90,.13); }
.chip-btn { border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 500; }
.version-note { padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.55); font-size: 14px; }
.problem.ok { background: rgba(200,230,120,.3); }
.problem.plain { background: none; padding: 8px 0 0; }
details.problem > summary { cursor: pointer; }
.check-box { margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: rgba(240,170,90,.12); }
.check-box select.in { max-width: 320px; }

/* ---------- BOM generator ---------- */
.gen-head { display: flex; gap: 20px; align-items: flex-start; }
.gen-pic { width: 132px; height: 96px; border-radius: 16px; border: 1px dashed rgba(22,33,30,.25); background: rgba(255,255,255,.6); display: grid; place-items: center; overflow: hidden; padding: 0; cursor: pointer; flex: none; }
.gen-pic.sm { width: 96px; height: 70px; }
.gen-pic img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.gen-pic:disabled { cursor: default; }
.gen-cost { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.gen-grid { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: start; }
.gen-steps { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 20px; background: rgba(255,255,255,.55); }
.gen-step { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 9px 10px; border-radius: 12px; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.gen-step .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(22,33,30,.08); font-size: 12px; }
.gen-step small { color: var(--muted); font-size: 12px; }
.gen-step.on { background: var(--ink); color: #fff; } .gen-step.on small { color: rgba(255,255,255,.75); } .gen-step.on .n { background: var(--lime); color: var(--ink); }
.gen-step.bad small { color: #B4382E; } .gen-step.on.bad small { color: #FFB4AA; }
.gen-slots { display: flex; flex-direction: column; gap: 8px; }
.gen-slot { padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.7); display: flex; flex-direction: column; gap: 6px; }
.gen-slot.empty.req { box-shadow: inset 3px 0 0 #B4382E; } .gen-slot.skipped { opacity: .6; }
.gen-slot-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gen-line { display: flex; gap: 10px; align-items: center; padding: 6px 0 0; border-top: 1px solid rgba(22,33,30,.06); font-size: 14px; }
.pic-box { display: flex; align-items: center; gap: 12px; } .pic-box img { width: 120px; height: 84px; object-fit: contain; border-radius: 12px; background: #fff; }
.bom-thumb { width: 100%; height: 90px; object-fit: contain; border-radius: 12px; background: #fff; margin-bottom: 6px; }
@media (max-width: 900px) { .gen-grid { grid-template-columns: 1fr; } .gen-steps { position: static; flex-direction: row; flex-wrap: wrap; } .gen-head { flex-wrap: wrap; } }

/* ---------- Assembly ---------- */
.flow-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.flow-step { display: flex; flex-direction: column; align-items: center; padding: 8px 12px; border-radius: 14px; background: #fff; text-decoration: none; color: inherit; min-width: 64px; }
.flow-step small { color: var(--muted); font-size: 12px; } .flow-step.partner { background: rgba(240,170,90,.22); }
.flow-strip .arrow { color: var(--muted); }
.qc-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.qc-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qc-box { width: 14px; height: 14px; border: 1.5px solid rgba(22,33,30,.5); border-radius: 4px; flex: none; } .qc-box.value { border-radius: 50%; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
.stage-row { padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.6); }
.chip.mono, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* Production: scanning and sheets */
.scan-in { min-width: 320px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.scan-msg { margin: 0; padding: 8px 12px; border-radius: 12px; font-weight: 600; }
.scan-msg.ok { background: rgba(120,170,60,.18); color: #2F5A12; } .scan-msg.bad { background: rgba(180,56,46,.12); color: #8E2A22; }
.scan-video { width: 100%; max-height: 60vh; border-radius: 14px; background: #000; }
.sheet h3 { margin: 16px 0 6px; font-size: 15px; }
.sheet-code { font-size: 15px; margin-top: 4px; }
.sheet-table td, .sheet-table th { vertical-align: middle; }
@media print {
  @page { margin: 12mm; }
  body { background: #fff !important; }
  .masthead, nav.top, nav.sub, .page-head, .no-print, .help-panel { display: none !important; }
  .card { box-shadow: none !important; background: #fff !important; border: 1px solid #ccc; break-inside: avoid; }
  .card.sheet { break-after: page; break-inside: auto; }
  .chip, .table-wrap { background: transparent !important; }
}
.qc-box { display: inline-block; vertical-align: middle; }
.scan-in { flex: 1 1 320px; max-width: 560px; width: auto; }
/* Goods in and batch steps */
.sp-receiving.step-pill, .sw.sp-receiving, .sp-receiving .v { background: #CFE3F0 !important; border-color: #8FB8D6 !important; color: #16211E !important; }
.sp-shipped.step-pill, .sw.sp-shipped, .sp-shipped .v { background: #E3ECEF !important; border-color: #3B6E96 !important; color: #16211E !important; }
.sp-inAssembly.step-pill, .sw.sp-inAssembly, .sp-inAssembly .v { background: #E9F3A6 !important; border-color: #C7DA4A !important; color: #16211E !important; }
.ps-receiving { color: #3B6E96; } .gantt tspan.ps-receiving { fill: #3B6E96; }
.track { grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.step-chip { display: inline-flex; flex-direction: column; align-items: center; min-width: 52px; padding: 5px 8px; border-radius: 12px; border: 1.5px solid rgba(22,33,30,.25); background: transparent; font: inherit; cursor: pointer; line-height: 1.15; }
.step-chip b { font-size: 13px; } .step-chip small { font-size: 11px; color: var(--muted); }
.step-chip.st-waiting { background: rgba(22,33,30,.06); border-color: transparent; color: rgba(22,33,30,.55); }
.step-chip.st-ready { background: #fff; border-color: #16211E; }
.step-chip.st-picked { background: rgba(240,170,90,.25); border-color: rgba(200,130,50,.6); }
.step-chip.st-done { background: #C7DA4A; border-color: #A9BC2E; }
.step-chip.st-done small, .step-chip.st-picked small { color: #16211E; }
.good-text { color: #4E7A12; }

/* ---------- capacity: Gantt, weekly bars, legends ---------- */
.gantt { display: flex; flex-direction: column; gap: 2px; }
.g-row { display: grid; grid-template-columns: 230px 1fr; gap: 12px; align-items: center; min-height: 34px; }
.g-row.g-head { min-height: 22px; }
.g-label { display: flex; flex-direction: column; line-height: 1.2; font-size: 13px; min-width: 0; }
.g-label b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-label small { font-size: 11.5px; }
.g-track { position: relative; height: 28px; }
.g-head .g-track { height: 22px; }
.g-tick { position: absolute; top: 2px; transform: translateX(-50%); font-size: 11px; color: var(--muted); white-space: nowrap; }
.g-mark { position: absolute; top: 2px; transform: translateX(-100%); padding-right: 6px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.g-grid { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--divider); }
.g-markline { position: absolute; top: -2px; bottom: -2px; border-left: 2px dashed var(--ink); opacity: .5; }
.g-bar { position: absolute; top: 4px; height: 20px; border-radius: 5px; background: #9BB0AB; border: 1px solid #7E9590; font-size: 11px; line-height: 18px; text-align: center; color: var(--ink); overflow: hidden; white-space: nowrap; }
.g-bar.pick { background: #C9D6D2; border-color: #9BB0AB; }
.g-bar.crit { background: var(--lime); border-color: #B9CC1F; }
.g-bar.temp { background: #F3D9B8; border-color: var(--warn); }
.g-bar.wait { background: repeating-linear-gradient(45deg, transparent 0 4px, rgba(22,33,30,.15) 4px 6px); border-style: dashed; }
.g-bar.buf { opacity: .45; border-style: dashed; }
.g-bar.ok { background: #9BB0AB; }
.g-bar.bad { background: rgba(180,56,46,.75); border-color: var(--error); color: #fff; }
.g-bar.due { background: var(--ink); border-color: var(--ink); width: 3px !important; top: 0; height: 28px; border-radius: 2px; }
.g-row.late .g-label b { color: var(--error); }
.g-row.bottle .g-label b { font-weight: 700; }
.legend { gap: 6px 10px; align-items: center; }
.legend .lg { display: inline-block; width: 16px; height: 10px; border-radius: 3px; background: #9BB0AB; border: 1px solid #7E9590; margin-left: 6px; }
.legend .lg.crit { background: var(--lime); border-color: #B9CC1F; } .legend .lg.pick { background: #C9D6D2; } .legend .lg.buf { opacity: .45; border-style: dashed; }
.legend .lg.temp { background: #F3D9B8; border-color: var(--warn); } .legend .lg.wait { background: repeating-linear-gradient(45deg, transparent 0 3px, rgba(22,33,30,.2) 3px 5px); border-style: dashed; }
.legend .lg-line { display: inline-block; width: 22px; border-top: 2px dashed var(--ink); margin-left: 6px; }
.legend .lg-line.potential { border-top: 2px dotted var(--sage); }
.cap-line { opacity: .35; } .cap-line.on { opacity: 1; }
.cap-line.potential { border-top: 2px dotted var(--sage); opacity: .8; }
.wk-bars { display: grid; grid-template-columns: repeat(26, 1fr); gap: 4px; height: 150px; align-items: end; padding-bottom: 36px; }
.wk { position: relative; height: 100%; background: rgba(255,255,255,.55); border-radius: 6px; display: flex; flex-direction: column; justify-content: flex-end; }
.wk-fill { background: #9BB0AB; border-radius: 6px; }
.wk.full .wk-fill { background: var(--ink); }
.wk small { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--muted); }
.wk b { position: absolute; bottom: -36px; left: 0; right: 0; text-align: center; font-size: 11px; }
@media (max-width: 760px) { .g-row { grid-template-columns: 120px 1fr; } .wk-bars { gap: 2px; } }

/* ---------- competitor benchmark ---------- */
.chip.good { background: var(--lime-soft); color: var(--ink); }
td.thumb { width: 72px; } td.thumb img { width: 64px; height: 44px; object-fit: contain; background: #fff; border-radius: 8px; display: block; }
.linklike { background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline; cursor: pointer; font-size: inherit; }
table.bench th[scope=row] { text-align: left; font-weight: 500; white-space: nowrap; vertical-align: top; width: 150px; }
table.bench td { vertical-align: top; min-width: 190px; }
table.bench td.ours, table.bench th.ours { background: rgba(232,255,58,.14); max-width: 380px; }
.bench-col { vertical-align: top; text-align: left; }
.bench-pic { width: 100%; max-width: 220px; height: 110px; object-fit: contain; background: #fff; border-radius: 12px; display: block; margin-bottom: 8px; }
.bench-pic.empty { background: rgba(255,255,255,.5); border: 1px dashed rgba(22,33,30,.2); }
table.bench tr.big-row td { font-size: 17px; font-weight: 500; }
table.bench tr.total-row td, table.bench tr.total-row th { border-top: 2px solid var(--divider); font-weight: 600; }

/* ---------- Purchasing: supplier invoices and payments (R3) ---------- */
.inv-totals { display: grid; gap: 6px; justify-content: end; margin-top: 12px; }
.inv-totals > div { display: grid; grid-template-columns: 140px 160px; align-items: center; gap: 12px; text-align: right; }
.inv-totals > div.grand { border-top: 1px solid var(--divider); padding-top: 6px; font-size: 18px; }
.inv-totals input { justify-self: end; width: 140px; }
.attach-list { margin: 0 0 10px; padding-left: 18px; }
.attach-list li { margin: 4px 0; }
.wrap-row { flex-wrap: wrap; gap: 10px; align-items: center; }
/* a button that reads as a link (serial numbers, small actions in a line) */
button.linkish { border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.toolbar input[type="month"] { width: 180px; flex: 0 0 auto; }
/* tabs of a page with two sides (e.g. Expenses: Plan · Real; Payroll: of the month · Rules) */
.page-tabs { margin-top: 14px; }
.seg a { padding: 7px 16px; border-radius: 9px; font-size: 14px; color: var(--ink2); text-decoration: none; }
.seg a.on { background: var(--ink); color: #fff; }
.seg a:not(.on):hover { background: rgba(255,255,255,.7); }
/* month close: what must be done before the month closes */
.todo-list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 4px; font-size: 13px; }
.todo-list a { color: inherit; }
/* the department switch (top left of the menus) and the Settings gear (next to the bell) */
.dept-btn { height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 15px; border: 1px solid rgba(255,255,255,.75); background: rgba(255,255,255,.55); font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; }
.dept-btn:hover { background: rgba(255,255,255,.8); }
.dept-btn .caret { font-size: 11px; opacity: .7; }
nav.top { align-items: center; }

/* ---------- M1: users, permissions, activity log, backups, View as ---------- */
.table-flat { border-radius: 16px; background: rgba(255,255,255,.6); overflow-x: auto; }
.table-flat table.grid th { position: static; }
.who { display: flex; align-items: center; gap: 10px; }
.who small { display: block; }
.avatar-sm { width: 32px; height: 32px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; letter-spacing: .04em; flex: none; box-shadow: 0 0 0 1px var(--divider); }
small.block, .block { display: block; }
.check-list { display: flex; flex-direction: column; gap: 6px; }
.check-row { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; padding: 6px 8px; border-radius: 10px; }
.check-row:hover { background: rgba(255,255,255,.6); }
.check-row input { margin-top: 3px; accent-color: var(--ink); }
.perm-modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.perm-module { background: rgba(255,255,255,.55); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.perm-module .eyebrow { margin: 2px 8px 6px; }
details.grants summary { cursor: pointer; font-weight: 500; font-size: 14px; margin-bottom: 10px; }
.profile-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.profile-card h2 { font-size: 26px; font-weight: 400; }
.profile-card { display: flex; flex-direction: column; }
.profile-card p { margin: 6px 0 0; }
.profile-card .card-foot { margin-top: auto; }
.inline-form { display: flex; gap: 10px; align-items: center; }
.inline-form .in { flex: 1; }
.banner.lime { background: rgba(232,255,58,.55); margin-top: 0; }
.banner.viewas { background: var(--ink); color: #fff; gap: 4px; }
.banner.viewas .btn { margin-left: auto; background: var(--lime); color: var(--ink); }
.banner.viewas b { color: var(--lime); }
.filters-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.filters-row .in { width: auto; min-width: 200px; }
.filters-row input[type=search] { flex: 1 1 280px; }
.recovery-key { font-size: 18px; letter-spacing: .06em; background: #fff; border-radius: 14px; padding: 16px; line-height: 1.6; }
/* ---------- M2: dealers, payment terms ---------- */
.kpi-btn { border: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; align-items: flex-start; }
.kpi-btn:hover { background: rgba(255,255,255,.8); }
.kpi-btn.on { box-shadow: 0 0 0 2px var(--ink); background: #fff; }
.dealer-kpis .kpi b.big { font-size: 34px; font-weight: 400; }
.dealer-grid td { vertical-align: middle; }
a.pill { text-decoration: none; color: inherit; }
/* ---------- M3: allocation ---------- */
.season-row { display: flex; gap: 12px; flex-wrap: wrap; }
.season-chip { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,.65); border-radius: 18px; padding: 12px 16px; }
.season-chip.open { box-shadow: 0 0 0 2px var(--lime) inset; }
.chip.size-chip { background: #fff; min-width: 34px; justify-content: center; }
td.big-num { font-size: 20px; }
.pct-bar { display: flex; flex-direction: column; gap: 4px; min-width: 110px; }
.pct-bar b { font-size: 18px; font-weight: 400; }
.pct-bar i { display: block; height: 4px; border-radius: 4px; background: rgba(22,33,30,.12); overflow: hidden; }
.pct-bar i span { display: block; height: 100%; background: var(--ink); }
.alloc-kpis .kpi b.big, .modal .kpi b.big { font-size: 40px; font-weight: 400; line-height: 1.1; }
.kpi.remaining { background: var(--lime); }
.mode-card { background: #fff; padding: 16px 20px; }
.mode-card .row { align-items: flex-end; gap: 16px; }
.mode-card .field { min-width: 220px; }
.share-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.share-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--divider); border-radius: 999px; padding: 4px 10px 4px 4px; font-size: 13px; }
.share-chip input { width: 64px; border: 0; font: inherit; text-align: right; background: transparent; }
.dist-grid .qty-in { width: 84px; height: 40px; text-align: center; font-size: 17px; border-radius: 12px; padding: 0 6px; }
.dist-grid .qty-in.on { background: var(--lime); border-color: transparent; }
.dist-grid tr.group-row td { background: rgba(22,33,30,.03); padding: 8px 12px; }
.dist-grid tfoot th { background: #f3f6f4; padding: 10px 12px; }
/* ---------- M4: allocation planner ---------- */
.planner-bar { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.field.compact { gap: 4px; } .field.compact label { font-size: 12px; } .field.compact .in { height: 44px; min-width: 160px; }
.field.grow { flex: 1 1 320px; }
.quota-box { margin-left: auto; display: flex; flex-direction: column; gap: 6px; min-width: 230px; font-size: 13px; }
.quota-box i { display: block; height: 5px; border-radius: 5px; background: rgba(22,33,30,.12); overflow: hidden; }
.quota-box i span { display: block; height: 100%; background: var(--ink); }
.model-card { display: flex; flex-direction: column; gap: 14px; }
div.model-head { display: flex; align-items: center; gap: 20px; }
.model-chip { background: var(--lime); border-radius: 999px; padding: 8px 20px; font-size: 20px; font-weight: 500; }
.big-stat { display: flex; flex-direction: column; } .big-stat b { font-size: 42px; font-weight: 400; line-height: 1; } .big-stat small { font-size: 12px; color: var(--ink2); }
.avail-box { margin-left: auto; background: var(--lime); border-radius: 20px; padding: 12px 26px; text-align: center; display: flex; flex-direction: column; }
.avail-box b { font-size: 38px; font-weight: 400; line-height: 1.1; } .avail-box small { font-size: 12px; }
.build-block { background: rgba(255,255,255,.55); border-radius: 20px; padding: 16px 20px; }
.build-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.build-head h3 { font-size: 18px; font-weight: 500; margin: 0; }
.alloc-chips { background: var(--lime); border-radius: 999px; padding: 3px 12px; font-size: 11px; font-weight: 600; white-space: pre; }
.prices { display: flex; gap: 26px; } .prices small { display: block; font-size: 10.5px; letter-spacing: .1em; color: var(--ink2); }
.prices b { font-weight: 400; font-size: 14px; } .prices b.big-price { font-size: 22px; }
.weeks-btn { margin: 10px 0; height: 32px; font-size: 12px; }
.plan-grid { display: grid; gap: 10px; margin-top: 12px; overflow-x: auto; }
.plan-grid .week-head { font-size: 11px; letter-spacing: .1em; color: var(--ink2); padding: 0 4px; }
.plan-grid .size-head { font-size: 13px; font-weight: 500; display: flex; align-items: center; }
.plan-grid .cell { border: 0; text-align: left; font: inherit; color: inherit; background: rgba(255,255,255,.75); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; min-height: 96px; width: 100%; }
.plan-grid .cell:hover { background: #fff; }
.plan-grid .cell.on { background: var(--lime); }
.plan-grid .cell.warn { box-shadow: 0 0 0 2px var(--warn) inset; }
.plan-grid .cell.empty { background: rgba(255,255,255,.35); align-items: center; justify-content: center; color: var(--muted); cursor: default; }
.plan-grid .cell-stack { display: flex; flex-direction: column; gap: 8px; }
.plan-grid .cell-top { display: flex; align-items: baseline; gap: 8px; } .plan-grid .cell-top b { font-size: 34px; font-weight: 400; line-height: 1; }
.plan-grid .cell small { font-size: 11px; } .plan-grid .cell-issue { color: #8E2A22; }
.kpis-3 { grid-template-columns: repeat(3, 1fr); }
.qty-row { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); padding: 14px 0; }
.stepper { display: flex; align-items: center; gap: 10px; } .qty-big { width: 90px; text-align: center; font-size: 20px; }
/* M4: extra discount row on the dealer order card */
.order-card .extra-row { gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.order-card .extra-row small { flex: 1 1 260px; }
.order-card .table-flat { margin-top: 10px; }
/* M6: two cards side by side (Boxed this week / last week) */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }
/* M7: Sales overview */
.prod-bars { display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); gap: 6px; align-items: end; height: 180px; margin: 6px 0 14px; }
.prod-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.prod-col i { display: block; width: 100%; min-height: 2px; background: var(--ink); border-radius: 6px 6px 2px 2px; }
.prod-col small { font-size: 11px; color: var(--ink2); }
.prod-col span { font-size: 10px; color: var(--ink2); white-space: nowrap; }
tr.click { cursor: pointer; } .indent { padding-left: 18px; display: inline-block; } .indent2 { padding-left: 36px; display: inline-block; }
/* M8: Development, framed as in the Planner */
.development-wrap { margin: 0 -8px; }
.development-frame { display: block; width: 100%; min-height: 600px; border: 0; background: transparent; }
/* U11: guides per profile */
.guide-when { margin-top: 18px; scroll-margin-top: 80px; } .guide-when > h3 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin: 0 0 4px; }
.guide-block { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(22,33,30,.04); } .guide-block h4 { font-size: 15px; font-weight: 500; margin: 0 0 6px; }
.guide-block ol, .guide-cols ul, .guide-bell, .guide-perms ul { margin: 0; padding-left: 20px; } .guide-block li, .guide-cols li, .guide-bell li { margin: 3px 0; line-height: 1.45; }
.guide-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 8px; }
.guide-pages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; } .guide-pages li { display: flex; align-items: center; gap: 6px; }
.guide-q { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(22,33,30,.22); background: rgba(255,255,255,.7); font: 600 12px Outfit, sans-serif; color: var(--ink); cursor: pointer; flex: none; padding: 0; } .guide-q:hover { background: var(--lime); border-color: var(--lime); }
.guide-toc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .guide-toc a { text-decoration: none; color: var(--ink); }
.guide-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .guide-cols h3 { font-size: 15px; margin: 0 0 6px; } @media (max-width: 600px) { .guide-cols { grid-template-columns: 1fr; } }
.guide-perms summary { cursor: pointer; font-weight: 500; } .guide-perms h4 { font-size: 13px; margin: 10px 0 2px; color: var(--muted); font-weight: 500; }
/* Design review (6 Nov): numbers right-aligned in tables (headers too), big numbers in tables at body scale */
table.grid th.right, table.grid td.right { text-align: right; }
table.grid th.center, table.grid td.center { text-align: center; }
table.grid td .big-num, table.grid td.big-num { font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; }
table.grid tfoot th { background: rgba(22,33,30,.04); font-size: 13px; }
.chip.on { background: var(--lime, #E8FF3A); color: var(--ink, #16211E); }
/* many tabs: one row (Planner sub-nav), tighter */
nav.sub.dense { flex-wrap: nowrap; gap: 2px; }
nav.sub.dense a { padding: 0 11px; font-size: 13.5px; }
@media (max-width: 1280px) { nav.sub.dense { overflow-x: auto; justify-content: flex-start; scrollbar-width: none; } nav.sub.dense::-webkit-scrollbar { display: none; } }
/* S13: tablet (planner and dealers) — one row of tabs that slides, tables without inner scroll */
@media (max-width: 1280px) { nav.sub { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; } nav.sub::-webkit-scrollbar { display: none; } nav.sub a { padding: 0 12px; } }
@media (max-width: 1100px) {
  table.dealer-grid th:nth-child(3), table.dealer-grid td:nth-child(3), table.dealer-grid th:nth-child(7), table.dealer-grid td:nth-child(7) { display: none; }
  .prod-table { display: none; }
  .prod-bars span { font-size: 9px; } .prod-col small { font-size: 10px; }
}

/* ---------- polish 7 Nov: motion (Emil Kowalski's rules) and details from the UNNO Planner ---------- */
:root { --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1); --ease-drawer: cubic-bezier(.32, .72, 0, 1); }
/* pressables answer the press: a small scale on :active, colours ease on hover; never `transition: all` */
.btn, .x, .help-btn, .bell, .avatar, .scenario-btn, .dept-btn, nav.top a, nav.sub a, .tabs button, .menu-item, .kpi-btn, .bom-card, .chip-btn, .icon-btn {
  transition: transform 160ms var(--ease-out), background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, border-color 150ms ease; }
.btn:active:not(:disabled), .x:active, .help-btn:active, .bell:active, .avatar:active, .scenario-btn:active, .dept-btn:active, .kpi-btn:active, .bom-card:active, .icon-btn:active, .tabs button:active, nav.sub a:active, nav.top a:active { transform: scale(.97); }
/* modals: the backdrop fades, the window rises a little from 96 % (never from 0) */
.overlay { transition: opacity 200ms ease; }
.modal { transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }
@starting-style { .overlay { opacity: 0; } .overlay .modal { opacity: 0; transform: translateY(8px) scale(.96); } }
.overlay.closing { opacity: 0; transition-duration: 140ms; pointer-events: none; }
.overlay.closing .modal { opacity: 0; transform: scale(.98); transition-duration: 140ms; }
/* menus scale out of their button */
/* the help panel slides in like a drawer */
.help-panel { transition: transform 300ms var(--ease-drawer), opacity 200ms ease; }
@starting-style { .help-panel { transform: translateX(32px); opacity: 0; } }
/* toasts come up from where they sit and leave faster than they came */
.toast { transition: opacity 200ms ease, transform 200ms var(--ease-out); }
@starting-style { .toast { opacity: 0; transform: translateY(12px); } }
/* expandable rows: the chevron turns with the same curve */
details > summary::before { transition-timing-function: var(--ease-out); transition-duration: 200ms; }
/* tables: Planner headings (small capitals), figures that line up */
table.grid thead th { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ink2); }
table.grid td, .kpi b, .fact b, .big { font-variant-numeric: tabular-nums; }
/* long names never break the layout (break-ui): wrap anywhere inside cells and cards, ellipsis in pills and chips */
table.grid td { overflow-wrap: anywhere; }
.card h2, .card h3, .kpi b, .kpi span, .modal-head h2 { overflow-wrap: anywhere; }
.pill, .chip, .scenario-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* page footer as in the Planner */
.app-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding-top: 16px; border-top: 1px solid rgba(22,33,30,.1); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
/* hover lifts only where a real pointer hovers */
@media (hover: hover) and (pointer: fine) { .bom-card:hover, .kpi-btn:hover { box-shadow: 0 8px 24px rgba(40,60,55,.08); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-property: opacity, background-color, color !important; animation-duration: 1ms !important; }
  .btn:active, .x:active, .bom-card:active, .kpi-btn:active { transform: none; }
}

/* ---------- dealer map ---------- */
.dmap-card { gap: 16px; }
.dmap-filters .dmap-gap { flex: 1; }
.dmap-filters .in.sm { width: auto; min-width: 150px; }
.dmap-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.dmap-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dmap { height: min(68vh, 680px); min-height: 420px; border-radius: 20px; overflow: hidden; background: #dfe6e2; box-shadow: inset 0 0 0 1px rgba(22,33,30,.08); }
.dmap .leaflet-tile-pane { filter: grayscale(1) sepia(.18) hue-rotate(110deg) saturate(.55) brightness(1.04) contrast(.92); }
.dmap.placing, .dmap.placing .leaflet-interactive { cursor: crosshair; }
.dmap .leaflet-control-zoom a { border-radius: 10px; color: var(--ink); }
.dmap .leaflet-bar { border: 0; box-shadow: 0 4px 14px rgba(22,33,30,.15); border-radius: 12px; overflow: hidden; }
.dmap .leaflet-control-attribution { font-size: 10px; background: rgba(255,255,255,.7); border-radius: 8px 0 0 0; }
.dmap-popup .leaflet-popup-content-wrapper { border-radius: 20px; box-shadow: 0 18px 50px rgba(22,33,30,.22); }
.dmap-popup .leaflet-popup-content { margin: 16px 18px; font: 14px/1.45 Outfit, system-ui, sans-serif; color: var(--ink); }
.dmap-pop { display: flex; flex-direction: column; gap: 8px; min-width: 260px; }
.dmap-pop h3 { font-size: 18px; font-weight: 500; overflow-wrap: anywhere; }
.dmap-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.dmap-facts span { background: rgba(22,33,30,.04); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; }
.dmap-facts b { font-size: 20px; font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1.1; }
.dmap-facts small { font-size: 11px; color: var(--muted); }
.dmap-legend { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--ink2); }
.dmap-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dmap-legend i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(22,33,30,.15); }
.dmap-legend i.ring { background: transparent; box-shadow: 0 0 0 3px var(--lime), 0 0 0 4px rgba(22,33,30,.2); }
.dmap-legend i.sq { border-radius: 3px; box-shadow: none; width: 14px; }
.dmap-km { display: inline-flex; align-items: center; gap: 6px; }
.dmap-km input { width: 64px; height: 28px; padding: 0 8px; }
.dmap-overlaps { display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--divider); padding-bottom: 12px; }
.dmap-overlaps p { margin: 0; }
.dmap-ramp { width: 120px; height: 10px; border-radius: 6px; background: linear-gradient(90deg, rgba(179,196,191,.5), #c9de2a, #e8ff3a, #162723); }
.dmap-count span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--ink); font: 600 12px Outfit, sans-serif; box-shadow: 0 2px 8px rgba(22,33,30,.25); }
.dmap-side { display: flex; flex-direction: column; gap: 14px; background: rgba(255,255,255,.55); border-radius: 20px; padding: 16px; }
.dmap-side-head b { font-size: 22px; font-weight: 300; }
.dmap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.dmap-list button { width: 100%; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 0; background: transparent; padding: 8px 8px; border-radius: 12px; cursor: pointer; text-align: left; font: inherit; color: inherit; transition: background-color 150ms ease; }
.dmap-list button:hover { background: rgba(255,255,255,.8); }
.dmap-list i { width: 10px; height: 10px; border-radius: 50%; }
.dmap-list span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.dmap-list small { display: block; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.dmap-list b { font-variant-numeric: tabular-nums; font-weight: 500; }
.dmap-missing { border-top: 1px solid var(--divider); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.dmap-missing p { margin: 0; }
.dmap-missing-list { margin: 0; padding-left: 16px; font-size: 13px; display: flex; flex-direction: column; gap: 3px; }
.dmap-missing-list small { color: var(--muted); margin-left: 6px; }
.progress-bar { height: 6px; border-radius: 6px; background: rgba(22,33,30,.12); overflow: hidden; }
.progress-bar i { display: block; height: 100%; background: var(--ink); border-radius: 6px; transition: width 300ms var(--ease-out); }
@media (max-width: 1100px) { .dmap-body { grid-template-columns: 1fr; } }
.dmap-pop a.btn { color: var(--ink); } .dmap-pop a.btn.dk { color: #fff; }
.dmap-list b small { text-align: right; }

/* ---------- guided tours ---------- */
.tour-ring { position: fixed; z-index: 90; border-radius: 16px; pointer-events: none; box-shadow: 0 0 0 3px var(--lime), 0 0 0 9999px rgba(22,33,30,.32); transition: left 260ms var(--ease-in-out), top 260ms var(--ease-in-out), width 260ms var(--ease-in-out), height 260ms var(--ease-in-out); }
.tour-ring[hidden] { display: none; }
.tour-shade { position: fixed; inset: 0; z-index: 89; pointer-events: none; }
.tour-shade.full { background: rgba(22,33,30,.32); }
.tour-bubble { position: fixed; z-index: 95; width: 360px; max-width: calc(100vw - 32px); background: #fff; border-radius: 22px; padding: 16px 18px 14px; box-shadow: 0 24px 60px rgba(22,33,30,.28); display: flex; flex-direction: column; gap: 8px; transition: left 260ms var(--ease-in-out), top 260ms var(--ease-in-out), opacity 200ms ease; }
@starting-style { .tour-bubble { opacity: 0; } }
.tour-bubble h3 { font-size: 18px; font-weight: 500; }
.tour-bubble p { margin: 0; font-size: 14px; }
.tour-step { display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tour-x { border: 0; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; color: var(--ink2); padding: 0 2px; }
.tour-do { background: var(--lime-soft); border-radius: 12px; padding: 8px 10px; }
.tour-foot { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 4px; }
.tour-dots { display: flex; gap: 5px; margin-right: auto; }
.tour-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(22,33,30,.15); transition: background-color 200ms ease, transform 200ms var(--ease-out); }
.tour-dots i.done { background: var(--sage); } .tour-dots i.on { background: var(--ink); transform: scale(1.3); }
.tour-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.tour-card { background: rgba(255,255,255,.6); border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.tour-card h3 { font-size: 17px; font-weight: 500; }
.tour-card p { margin: 0; }
.tour-flow { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 4px; counter-reset: step; }
.tour-flow li { counter-increment: step; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; background: #fff; border-radius: 10px; padding: 5px 9px; }
.tour-flow li::before { content: counter(step); display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 10px; font-weight: 600; }
.tour-flow li:not(:last-child)::after { content: '→'; color: var(--ph); margin-left: 4px; }
.help-tours { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.row.spread { justify-content: space-between; }
/* break-ui: the headcount legend's text labels were squeezed by the Gantt legend's 16 px swatch rule */
.legend .lg.hc, .legend .lg.cost { width: auto; height: auto; border: 0; background: none; margin-left: 0; white-space: nowrap; }
.overview-chevron { flex: none; }

/* ---------- polish 7 Nov (impeccable "Operate" floor): browser surfaces, reading measure, heading rhythm ---------- */
::selection { background: var(--lime); color: var(--ink); }
html { accent-color: var(--ink); caret-color: var(--ink); scrollbar-color: rgba(22,33,30,.28) transparent; }
input[type=checkbox], input[type=radio] { accent-color: var(--ink); }
a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.in:focus-visible, .search:focus-visible, select:focus-visible { outline: none; }
/* explanatory text reads at a comfortable line length instead of running the full 1400 px */
.card > p, .card > p.muted, .card > .muted.small, .page-head .lead, .help-how, .tour-card p { max-width: 96ch; }
/* a heading sits closer to what it introduces than to what came before it */
.card > h2 + p, .card > h2 + .muted { margin-top: -6px; }
.card + .card { scroll-margin-top: 16px; }
/* numbers in cards and facts line up while they change */
.kpi b, .big, .fact b, .dmap-facts b { font-feature-settings: 'tnum' 1; }

/* ---------- HR (7 Nov) ---------- */
.hr-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.hr-today { gap: 8px; }
.hr-today .big { font-size: 40px; }
.hr-link { text-decoration: none; color: inherit; transition: box-shadow 150ms ease, transform 160ms var(--ease-out); }
.hr-link:active { transform: scale(.98); }
.btn.hr-clock { height: 56px; padding: 0 28px; font-size: 16px; }
.hr-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink2); }
.hr-legend span { display: inline-flex; align-items: center; gap: 6px; }
.hr-legend i, .hr-cell { display: inline-block; width: 14px; height: 14px; border-radius: 4px; }
.hr-cal { display: flex; flex-direction: column; gap: 3px; background: rgba(255,255,255,.6); border-radius: 16px; padding: 12px; }
.hr-cal-row { display: grid; grid-template-columns: minmax(140px, 200px) repeat(var(--days), minmax(18px, 1fr)); gap: 3px; align-items: center; }
.hr-cal-head span { font-size: 11px; text-align: center; color: var(--ink2); font-variant-numeric: tabular-nums; line-height: 1.1; }
.hr-cal-head span small { display: block; color: var(--ph); font-size: 9px; }
.hr-cal-head span:first-child { text-align: left; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.hr-cal-head span.today { color: var(--ink); font-weight: 700; }
.hr-cal-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 8px; }
.hr-cal-name small { color: var(--muted); }
.hr-cell { width: auto; height: 22px; border-radius: 5px; background: rgba(22,33,30,.04); }
.hr-cell.today, .hr-legend i.today { box-shadow: inset 0 0 0 1.5px var(--ink); }
.hr-cell.rest, .hr-legend i.rest { background: rgba(22,33,30,.12); }
.hr-cell.holiday, .hr-legend i.holiday { background: #b3c4bf; }
.hr-cell.off, .hr-legend i.off { background: var(--lime); }
.hr-cell.off.half { background: linear-gradient(135deg, var(--lime) 50%, rgba(22,33,30,.04) 50%); }
.hr-cell.waiting, .hr-legend i.waiting { background: repeating-linear-gradient(45deg, rgba(201,222,42,.9) 0 3px, rgba(255,255,255,.6) 3px 6px); }
.hr-legend i { background: rgba(22,33,30,.04); }

/* ---------- Ask UNNO (7 Nov) ---------- */
.ask { display: flex; flex-direction: column; gap: 8px; background: rgba(232,255,58,.18); border-radius: 18px; padding: 14px 16px; }
.ask-row { display: flex; gap: 8px; align-items: flex-end; }
.ask-row textarea { min-height: 48px; resize: vertical; font-size: 14px; }
.ask-out { display: flex; flex-direction: column; gap: 12px; }
.ask-item { background: #fff; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
@starting-style { .ask-item { opacity: 0; transform: translateY(6px); } }
.ask-item { transition: opacity 200ms ease, transform 200ms var(--ease-out); }
.ask-q { font-weight: 500; }
.ask-answer p, .ask-answer ol, .ask-answer ul { margin: 0 0 6px; }
.ask-answer ol, .ask-answer ul { padding-left: 20px; display: flex; flex-direction: column; gap: 3px; }
.ask-answer a { font-weight: 500; }
.ask-answer .btn { margin: 4px 0; }
.ask-meta { display: flex; gap: 8px; align-items: center; font-size: 11px; color: var(--muted); }
.ask-meta span { margin-right: auto; font-variant-numeric: tabular-nums; }
.ask-rate { border: 0; background: rgba(22,33,30,.05); border-radius: 8px; cursor: pointer; padding: 2px 6px; font-size: 13px; transition: background-color 150ms ease; }
.ask-rate.on { background: var(--lime); } .ask-rate:disabled:not(.on) { opacity: .4; cursor: default; }
.ask-wait { display: flex; gap: 4px; padding: 4px 0; }
.ask-wait i { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); animation: askdot 900ms ease-in-out infinite; }
.ask-wait i:nth-child(2) { animation-delay: 150ms; } .ask-wait i:nth-child(3) { animation-delay: 300ms; }
@keyframes askdot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
/* a long sub-menu (Settings has 14 tabs) stays on one line and never clips its first tab */
nav.sub.dense { justify-content: safe center; }
nav.sub.dense a { padding: 0 6px; font-size: 13px; } /* 6 px (7 Nov): Notifications' 14 tabs fit at 1400 px */
nav.sub.dense .sub-sep { margin: 6px 3px; }
/* page check (7 Nov): Notifications grew to 20 tabs and ran off the screen (2.089 px at 1.440): on a wide screen a
   long tab row wraps onto a second line; up to 1.280 px it still slides sideways as before */
@media (min-width: 1281px) { nav.sub.dense { flex-wrap: wrap; row-gap: 2px; } }

/* ---------- phone (7 Nov): the header on one row; HR tables become rows you read top to bottom ---------- */
@media (max-width: 600px) {
  .shell { padding: 12px 12px 40px; }
  .masthead { grid-template-columns: 48px 1fr; gap: 12px; align-items: center; }
  .logo { width: 48px; height: 48px; border-radius: 14px; }
  .mast-right { grid-column: 2; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
  .page-head h1 { font-size: 26px; }
  .card { padding: 16px; border-radius: 22px; }
  .hr-top { grid-template-columns: 1fr; gap: 12px; }
  .hr-today .big { font-size: 34px; }
  .btn.hr-clock { height: 52px; padding: 0 22px; }
  .modal .form-grid.cols-2 { grid-template-columns: 1fr; }
  table.grid.stack-sm, table.grid.stack-sm tbody, table.grid.stack-sm tfoot { display: block; }
  table.grid.stack-sm thead { display: none; }
  table.grid.stack-sm tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; position: relative; padding: 12px 4px; border-top: 1px solid var(--divider); }
  table.grid.stack-sm tr:has(> td.act > *) { padding-right: 104px; }
  table.grid.stack-sm tr.changed td, table.grid.stack-sm td { background: transparent; }
  table.grid.stack-sm tbody tr:first-child { border-top: 0; }
  table.grid.stack-sm td { display: block; padding: 0; border: 0; text-align: left; font-size: 13px; color: var(--ink2); white-space: normal; min-width: 0; max-width: 100%; }
  table.grid.stack-sm td:first-child { flex-basis: 100%; font-size: 15px; font-weight: 500; color: var(--ink); }
  table.grid.stack-sm td[data-label]:not(:first-child)::before { content: attr(data-label) " "; color: var(--muted); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; margin-right: 6px; }
  table.grid.stack-sm td:empty, table.grid.stack-sm td.blank { display: none; }
  table.grid.stack-sm td.act { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); text-align: right; white-space: nowrap; }
  table.grid.stack-sm td.act .btn + .btn { margin-left: 6px; }
  table.grid.stack-sm tr.changed { background: rgba(201,222,42,.16); border-radius: 12px; padding-left: 10px; padding-right: 10px; }
  table.grid.stack-sm tfoot tr { font-weight: 600; }
  table.grid.stack-sm tfoot td { color: var(--ink); }
  .table-wrap:has(> table.stack-sm) { overflow: visible; padding: 2px 12px; }
}
@media (max-width: 600px) {
  /* two actions (Approve · Reject): a row of their own under the details, easy to hit */
  table.grid.stack-sm tr:has(> td.act > * + *) { padding-right: 4px; }
  table.grid.stack-sm td.act:has(> * + *) { position: static; transform: none; flex-basis: 100%; display: flex; gap: 8px; margin-top: 10px; }
  table.grid.stack-sm td.act:has(> * + *) > .btn { flex: 1; height: 44px; }
  table.grid.stack-sm td.act .btn + .btn { margin-left: 0; }
  /* the same when the two actions sit in one row (Confirm… · Not paid… in Real expenses) */
  table.grid.stack-sm tr:has(> td.act > .row > * + *) { padding-right: 4px; }
  table.grid.stack-sm td.act:has(> .row > * + *) { position: static; transform: none; flex-basis: 100%; margin-top: 10px; }
  table.grid.stack-sm td.act > .row:has(> * + *) { display: flex; gap: 8px; width: 100%; }
  table.grid.stack-sm td.act > .row:has(> * + *) > .btn { flex: 1; height: 44px; }
}
.hr-offlist { display: none; }
@media (max-width: 600px) {
  .hr-cal { display: none; }
  .hr-offlist { display: flex; flex-direction: column; gap: 2px; }
  .hr-off-row { display: grid; grid-template-columns: 14px 1fr; gap: 12px; align-items: center; padding: 10px 2px; border-top: 1px solid var(--divider); }
  .hr-off-row:first-child { border-top: 0; }
  .hr-off-row .hr-cell { width: 14px; height: 14px; }
}
@media (max-width: 600px) { .hr-legend span:nth-child(n+3) { display: none; } }

/* ---------- Development → New project from template (7 Nov) ---------- */
.tpl-comp { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--divider); }
.tpl-comp:first-of-type { border-top: 0; }
.tpl-gantt { display: flex; flex-direction: column; gap: 4px; background: rgba(255,255,255,.6); border-radius: 16px; padding: 14px; }
.tpl-row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; min-height: 22px; }
.tpl-head { min-height: 18px; }
.tpl-name { font-size: 13px; white-space: nowrap; } .tpl-name small { color: var(--muted); font-size: 11px; }
.tpl-lane { position: relative; height: 16px; background: rgba(22,33,30,.03); border-radius: 5px; }
.tpl-head .tpl-lane { background: none; }
.tpl-month { position: absolute; top: 0; font-size: 10.5px; color: var(--ink2); padding-left: 3px; border-left: 1px solid rgba(22,33,30,.15); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tpl-bar { position: absolute; top: 2px; height: 12px; border-radius: 4px; background: #9fb3ad; display: inline-block; }
.tpl-bar.design { background: #b8c9e8; } .tpl-bar.tool { background: #9fb3ad; } .tpl-bar.test { background: #f0c47a; } .tpl-bar.sample { background: #e8a7b8; }
.tpl-bar.pilot { background: #a8d0c4; } .tpl-bar.prod { background: var(--lime); } .tpl-bar.gen { background: #cfd6d3; }
.tpl-bar.ms { box-shadow: inset 0 0 0 1px rgba(22,33,30,.18); }
.tpl-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink2); margin-top: 6px; }
.tpl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tpl-legend .tpl-bar { position: static; width: 18px; height: 10px; }
@media (max-width: 600px) { .tpl-row { grid-template-columns: 64px 1fr; } .tpl-name small { display: none; } }
.tpl-lane { height: 24px; } .tpl-bar { top: 1px; height: 10px; } .tpl-bar.low { top: 13px; }
.tpl-check { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; cursor: pointer; }
.tpl-comp > .tpl-check { font-size: 15px; }
.tpl-tests { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: start; }
.tpl-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px 24px; padding-top: 26px; }
@media (max-width: 600px) { .tpl-tests { grid-template-columns: 1fr; } .tpl-checks { padding-top: 0; } }

/* ---------- Production → Workshop (7 Nov): the moving picture ---------- */
.ws-wrap { gap: 14px; }
.ws-scroll { border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(240,245,243,.9)); padding: 6px 4px 0; }
.ws-svg { width: 100%; height: auto; display: block; }
.ws-belt { fill: #2b3532; } .ws-roller { fill: #59665f; }
.ws-zone { fill: rgba(22,33,30,.035); stroke: rgba(22,33,30,.08); transition: fill 200ms ease, stroke 200ms ease, opacity 200ms ease; }
.ws-station { cursor: pointer; outline: none; transition: opacity 200ms ease; }
.ws-station:hover .ws-zone, .ws-station:focus-visible .ws-zone { fill: rgba(22,33,30,.06); }
.ws-station.on .ws-zone { fill: rgba(201,222,42,.16); stroke: rgba(130,150,20,.5); }
.ws-svg.focus .ws-station:not(.on) { opacity: .45; }
.ws-station.busy .ws-zone { animation: ws-pulse 900ms var(--ease-out); }
@keyframes ws-pulse { 0% { fill: rgba(201,222,42,.28); } 100% { fill: rgba(22,33,30,.035); } }
.ws-step { font-size: 12px; font-weight: 600; fill: var(--muted); text-anchor: middle; letter-spacing: .08em; }
.ws-name { font-size: 17px; font-weight: 500; fill: var(--ink); text-anchor: middle; }
.ws-badge rect { fill: #16211e; } .ws-count { fill: #fff; font-size: 15px; font-weight: 600; text-anchor: middle; font-variant-numeric: tabular-nums; } .ws-unit { fill: rgba(255,255,255,.7); font-size: 9.5px; text-anchor: middle; letter-spacing: .02em; }
.ws-station.on .ws-badge rect { fill: var(--lime); } .ws-station.on .ws-count { fill: #16211e; } .ws-station.on .ws-unit { fill: rgba(22,33,30,.7); }
.ws-shelf, .ws-bench { fill: #9aa7a3; } .ws-leg, .ws-stand { stroke: #9aa7a3; stroke-width: 4; stroke-linecap: round; fill: none; }
.ws-bin { fill: #cfd9d5; }
.ws-crate { fill: #d9c49a; stroke: #a88c55; stroke-width: 1.2; } .ws-line { stroke: #a88c55; stroke-width: 1.2; fill: none; }
.ws-wheel { fill: none; stroke: #16211e; stroke-width: 2.6; } .ws-hub { fill: #16211e; } .ws-part { fill: #b8c9e8; stroke: #6b7f9f; stroke-width: 1.2; }
.ws-frame { fill: none; stroke: #16211e; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.ws-frame { stroke: #16211e; } .ws-token .ws-frame { stroke: #5c7d12; }
.ws-box { fill: #c9a46b; stroke: #8a6a37; stroke-width: 1.2; } .ws-tape { stroke: #f2ead8; stroke-width: 3; fill: none; }
.ghost { opacity: .22; }
.ws-panel { min-height: 60px; }
.ws-card { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.ws-card-head { display: flex; align-items: center; gap: 12px; }
.ws-card-head h3 { margin: 0; font-size: 20px; font-weight: 500; }
.ws-num { width: 30px; height: 30px; border-radius: 50%; background: var(--lime); display: inline-grid; place-items: center; font-weight: 600; font-size: 14px; }
.ws-list { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink2); }
@media (max-width: 600px) { .ws-scroll { overflow-x: auto; } .ws-svg { min-width: 760px; } }
.ws-wrap > .row.spread { flex-wrap: nowrap; align-items: center; } .ws-wrap > .row.spread > .row { flex-wrap: nowrap; flex-shrink: 0; }
.ws-wrap select.in.sm { width: auto; }

/* ---------- Product → Generations (7 Nov) ---------- */
.gen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.gen-model { gap: 10px; }
.gen-card { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.7); color: inherit; text-decoration: none; transition: box-shadow 150ms ease, transform 160ms var(--ease-out); }
.gen-card:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .gen-card:hover { box-shadow: 0 8px 24px rgba(40,60,55,.08); } }
.gen-flags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.gen-flags .chip.ok { background: rgba(201,222,42,.35); }
.gen-chart { width: 100%; max-width: 640px; height: auto; display: block; }
.gen-chart .grid { stroke: rgba(22,33,30,.08); } .gen-chart .tick { font-size: 11px; fill: var(--ink2); font-variant-numeric: tabular-nums; }
.gen-chart .curve { fill: none; stroke: #16211e; stroke-width: 2; } .gen-chart .pt { fill: var(--lime); stroke: #16211e; stroke-width: 1; }
.gen-calc { display: flex; gap: 12px; flex-wrap: wrap; }
.gen-calc:empty { display: none; }
.gen-ex-body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; }
.gen-stage { position: relative; border-radius: 16px; overflow: hidden; background: #fff; }
.gen-stage img { display: block; width: 100%; height: auto; user-select: none; }
.gen-stage.editing { cursor: crosshair; outline: 2px dashed rgba(130,150,20,.6); outline-offset: -2px; }
.gen-dot { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; background: #16211e; color: #fff; font-size: 12px; font-weight: 600; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform 160ms var(--ease-out), background-color 150ms ease; }
.gen-dot:hover, .gen-dot.on { background: var(--lime); color: #16211e; transform: translate(-50%, -50%) scale(1.15); }
.gen-dot.static { position: static; transform: none; display: inline-grid; flex-shrink: 0; }
.gen-side { position: sticky; top: 16px; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.7); min-height: 120px; }
.gen-torques { margin: 4px 0 0; padding-left: 18px; font-size: 13px; }
.gen-results { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow: auto; }
.gen-res { text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(22,33,30,.1); background: #fff; cursor: pointer; }
.gen-res.on { border-color: #16211e; background: rgba(201,222,42,.25); }
@media (max-width: 900px) { .gen-ex-body { grid-template-columns: 1fr; } .gen-side { position: static; } }
@media (max-width: 600px) { .ws-wrap > .row.spread { flex-wrap: wrap; } }

/* ---------- search (7 Nov) ---------- */
.search-in { font-size: 16px; height: 48px; }
.search-out { display: flex; flex-direction: column; gap: 12px; max-height: min(60vh, 520px); overflow: auto; }
.search-group { display: flex; flex-direction: column; gap: 2px; }
.search-item { display: flex; align-items: baseline; gap: 10px; text-align: left; padding: 9px 12px; border-radius: 12px; border: 0; background: none; cursor: pointer; color: inherit; font: inherit; }
.search-item b { font-weight: 500; }
.search-item.on { background: rgba(201,222,42,.28); }
@media (max-width: 600px) { .search-item { flex-direction: column; gap: 2px; } }
@media (max-width: 600px) {
  /* Dealers on a phone: one row per dealer, name first, then level, terms and data status as chips */
  table.dealer-grid thead { display: none; }
  table.dealer-grid, table.dealer-grid tbody { display: block; }
  table.dealer-grid tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 12px 2px; border-top: 1px solid var(--divider); }
  table.dealer-grid tbody tr:first-child { border-top: 0; }
  table.dealer-grid td { padding: 0; border: 0; display: block; }
  table.dealer-grid td:nth-child(2) { flex: 1 1 calc(100% - 52px); min-width: 0; }
  table.dealer-grid td:nth-child(2) b { overflow-wrap: normal; word-break: normal; }
  table.dealer-grid td:nth-child(3), table.dealer-grid td:nth-child(7) { display: none; }
  table.dealer-grid td:nth-child(4) { margin-left: 44px; }
}
@media (max-width: 600px) { table.dealer-grid td:nth-child(8) { margin-left: 44px; } }

/* ---------- Knowledge base (7 Nov) ---------- */
.kb-list { display: flex; flex-direction: column; gap: 8px; }
.kb-item { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.7); color: inherit; text-decoration: none; transition: box-shadow 150ms ease, transform 160ms var(--ease-out); }
.kb-item:active { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) { .kb-item:hover { box-shadow: 0 8px 24px rgba(40,60,55,.08); } }
.kb-title { font-size: 30px; font-weight: 400; letter-spacing: -.02em; margin: 6px 0 0; }
.kb-body { max-width: 760px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.6; }
.kb-body h3 { font-size: 20px; font-weight: 500; margin: 14px 0 0; } .kb-body h4 { font-size: 16px; font-weight: 600; margin: 8px 0 0; }
.kb-body p, .kb-body ul, .kb-body ol { margin: 0; } .kb-body ul, .kb-body ol { padding-left: 22px; }
.kb-embed { max-width: none; margin: 8px 0; }
.kb-text { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.55; min-height: 320px; }

/* ---------- Logistics: boxes in transit (7 Nov) ---------- */
.lg-body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.lg-scroll { border-radius: 16px; background: rgba(255,255,255,.7); padding: 4px; }
.lg-lanes { width: 100%; height: auto; display: block; }
.lg-stage { font-size: 12px; fill: var(--ink2); } .lg-name { font-size: 14px; fill: var(--ink); font-weight: 500; }
.lg-track { stroke: rgba(22,33,30,.1); stroke-width: 8; stroke-linecap: round; }
.lg-customs { fill: none; stroke: #839b94; stroke-width: 1.4; } .lg-end { fill: none; stroke: #839b94; stroke-width: 1.4; }
.lg-dot { cursor: pointer; outline: none; } .lg-dot circle, .lg-dot rect { stroke: #fff; stroke-width: 2; transition: transform 160ms var(--ease-out); transform-box: fill-box; transform-origin: center; }
.lg-dot:hover circle, .lg-dot:hover rect, .lg-dot:focus-visible circle, .lg-dot:focus-visible rect { transform: scale(1.3); }
.lg-side { padding: 14px; border-radius: 16px; background: rgba(255,255,255,.7); min-height: 140px; position: sticky; top: 16px; }
.lg-map { height: 420px; border-radius: 16px; overflow: hidden; background: #e6ece9; }
.lg-pipe { display: grid; grid-template-columns: repeat(7, minmax(140px, 1fr)); gap: 10px; overflow-x: auto; }
.lg-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lg-card { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px; border-radius: 12px; border: 1px solid rgba(22,33,30,.08); background: #fff; cursor: pointer; font: inherit; color: inherit; }
.lg-card.late { border-color: #c98a1b; }
.kpi.warn b { color: #9c702a; }
@media (max-width: 900px) { .lg-body { grid-template-columns: 1fr; } .lg-side { position: static; } .lg-pipe { grid-template-columns: repeat(7, 160px); } }
@media (max-width: 600px) { .lg-scroll { overflow-x: auto; } .lg-lanes { min-width: 760px; } .lg-map { height: 320px; }
  .lg-pipe { grid-template-columns: 1fr; overflow-x: visible; } .lg-col.empty { display: none; } }

/* Knowledge base on paper (7 Nov): the parts list of an exploded view shows only when printed */
.print-only { display: none; }
@media print { .print-only { display: block; } .kb-parts { font-size: 11px; columns: 2; padding-left: 18px; } .kb-parts li { break-inside: avoid; margin-bottom: 2px; } }
/* long words and links in articles wrap instead of widening the page (7 Nov) */
.kb-list, .kb-item, .kb-body, .kb-title, .kb-preview, .page .lead { overflow-wrap: anywhere; min-width: 0; }
/* phone sweep (7 Nov): nothing wider than the screen on any page */
.pairs { grid-auto-columns: minmax(0, 1fr); }
@media (max-width: 600px) {
  .seg { flex-wrap: wrap; max-width: 100%; }
  .page .in { min-width: 0 !important; max-width: 100%; }
  .page select.in { width: 100%; }
  table.stack-sm td.act, table.stack-sm td.actions { white-space: normal; flex-wrap: wrap; position: static; box-shadow: none; width: auto; }
  .pairs .row { flex-wrap: wrap; min-width: 0; }
}
@media (max-width: 600px) { nav.top a, nav.sub a { white-space: nowrap; flex: none; } }
.phone-scroll { overflow-x: auto; max-width: 100%; }
@media (max-width: 600px) { .kpi b.big, .big-kpis .kpi b.big, .big-kpis .kpi.big-kpi b.big { font-size: clamp(20px, 5.6vw, 34px); } .kpis { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }
@media (max-width: 600px) { .row > .kpis, .kpis { flex: 1 1 100%; min-width: 0 !important; } .kpi { min-width: 0; } }
.warn-list a.warn-link { color: inherit; text-decoration: underline; text-decoration-color: rgba(22,33,30,.3); text-underline-offset: 3px; }
.warn-list a.warn-link:hover { text-decoration-color: currentColor; }

/* Workshop clock (7 Nov): a tablet in the workshop, read from a distance */
.kiosk { display: flex; justify-content: center; }
.kiosk-card { width: 100%; max-width: 720px; text-align: center; gap: 18px; }
.kiosk-result { min-height: 180px; display: flex; align-items: center; justify-content: center; }
.kiosk-result > p { font-size: 22px; }
.kiosk-ok { display: grid; gap: 6px; }
.kiosk-name { font-size: 40px; font-weight: 600; line-height: 1.1; }
.kiosk-what { font-size: 56px; font-weight: 700; letter-spacing: -0.02em; }
.kiosk-ok.is-in .kiosk-what { color: #2c6a3a; } .kiosk-ok.is-out .kiosk-what { color: var(--ink); }
.kiosk-err { font-size: 22px; color: var(--error); max-width: 560px; }
.kiosk-row { justify-content: center; flex-wrap: wrap; }
.kiosk-in { max-width: 280px; height: 52px; font-size: 20px; text-align: center; }
@media (max-width: 600px) { .kiosk-name { font-size: 30px; } .kiosk-what { font-size: 42px; } }
/* Generations placeholders (7 Nov): what still waits for UNNO's files */
.gen-wait { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 14px; background: rgba(240,170,90,.1); }
.gen-wait .chip { flex-shrink: 0; }
table.grid.gen-empty td.num { color: var(--muted); }
.gen-ph-box { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px; border-radius: 16px; border: 1px dashed rgba(22,33,30,.22); background: rgba(255,255,255,.55); }
.gen-ph { width: 100%; max-width: 380px; height: auto; }
.gen-ph circle, .gen-ph path { fill: none; stroke: rgba(22,33,30,.22); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 10; }
/* Sales → My shipments (FedEx, 7 Nov): one card per shipment, opened for its boxes */
.ms-card > summary { list-style: none; cursor: pointer; }
.ms-card > summary::-webkit-details-marker { display: none; }
.ms-card[open] > summary { margin-bottom: 10px; }
/* Help → Errors and issues (FedEx, 7 Nov) */
.help-error summary { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.help-error summary .pill { flex: none; }
.help-error p { margin: 6px 0 0; }
.help-error:target { outline: 2px solid var(--lime, #e8ff3a); }
/* Logistics → Simulator (7 Nov) */
.form-grid.cols-5 { grid-template-columns: 2fr 2fr 1fr 1fr auto; align-items: end; } @media (max-width: 900px) { .form-grid.cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sim-json { white-space: pre-wrap; word-break: break-all; max-height: none; margin: 8px 0 0; }
/* Knowledge base sources and facts (phase 1, 7 Nov) */
.kb-src-title { font-size: 18px; overflow-wrap: anywhere; }
.kb-fact { border-bottom: 1px dotted currentColor; }
.kb-quote { font-style: italic; overflow-wrap: anywhere; }
.kb-markdown { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; background: var(--thead); padding: 12px; border-radius: var(--r-chip); margin-top: 8px; }
/* Knowledge base phase 2 (7 Nov): sources that disagree, and Ask */
.kb-warning { border-top: 1px solid var(--divider); padding-top: 12px; display: grid; gap: 8px; }
.kb-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kb-side { background: var(--thead); border-radius: var(--r-chip); padding: 10px 12px; display: grid; gap: 4px; overflow-wrap: anywhere; }
@media (max-width: 720px) { .kb-sides { grid-template-columns: 1fr; } }
.kb-answer { display: grid; gap: 10px; }
.kb-answer p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.kb-ref { font-size: 11px; vertical-align: super; margin-left: 2px; text-decoration: none; font-weight: 600; }
.kb-sources { display: grid; gap: 6px; margin: 0; padding-left: 20px; }
.kb-sources li { overflow-wrap: anywhere; }
.kb-q { font-weight: 600; }
/* File organizer (7 Nov): where a file goes, before it is filed */
.file-plan { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 16px; background: rgba(22,33,30,.04); margin-bottom: 12px; }
code.file-path { font-size: 13px; word-break: break-all; background: #fff; padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(22,33,30,.1); }
textarea.in.sm.kinds-in { min-width: 280px; height: auto; padding: 8px 10px; line-height: 1.4; resize: vertical; overflow: hidden; }
/* the workshop clock screen alone, without menus (security audit, finding 4) */
.kiosk-screen { max-width: 760px; margin: 0 auto; padding: 32px 16px; display: grid; gap: 16px; }

/* Guided tours for every page (7 Nov, Cesar): ▶ Tour this page in the help, the first-visit line, "Was this clear?" */
.help-tour { align-self: flex-start; }
.tour-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 0; padding: 8px 12px; border-radius: 14px; background: var(--lime-soft); font-size: 13.5px; width: fit-content; max-width: 100%; }
.tour-hint .linklike.muted { color: var(--muted); font-size: 12.5px; }
.tour-hint .x.sm { width: 24px; height: 24px; font-size: 16px; }
.help-btn.pulse { animation: tourpulse 1.4s var(--ease-out) 2; }
@keyframes tourpulse { 0% { box-shadow: 0 0 0 0 rgba(232,255,58,.9); } 100% { box-shadow: 0 0 0 14px rgba(232,255,58,0); } }
@media (prefers-reduced-motion: reduce) { .help-btn.pulse { animation: none; box-shadow: 0 0 0 3px var(--lime); } }
.tour-list-points { margin: 0; padding-left: 18px; font-size: 13.5px; display: grid; gap: 4px; }
.tour-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 12px; background: rgba(22,33,30,.05); }
.tour-feedback .in { flex: 1 1 180px; min-width: 0; height: 32px; }
.tour-kind { display: grid; gap: 12px; }
.card ol.steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; line-height: 1.5; }
.card ol.steps code { word-break: break-all; }
/* Feedback from every page (8 Nov): the button beside the page's "?" */
.feedback-btn { height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(22,33,30,.18); background: rgba(255,255,255,.6); color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.feedback-btn:hover { background: #fff; }
.feedback-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.fb-note { padding: 14px 0; border-top: 1px solid rgba(22,33,30,.1); }
.fb-note:first-child { border-top: 0; padding-top: 0; }
.fb-answer { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fb-answer .fb-status { width: 170px; flex: none; }
.fb-answer .fb-reply { flex: 1 1 280px; width: auto; min-width: 0; }
/* Brainstorming (8 Nov): topic cards, the board (a column per status; the page grows, no inner scrollbars), idea cards */
.brain-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
a.brain-topic { color: inherit; text-decoration: none; gap: 10px; }
a.brain-topic:hover { box-shadow: 0 10px 40px rgba(40,60,55,.14); }
a.brain-topic h2 { font-size: 19px; }
a.brain-topic.general { background: rgba(255,255,255,.35); }
.brain-board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: start; }
.brain-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.brain-col h3 { font-size: 14px; font-weight: 600; margin: 0 0 2px; }
.brain-folded { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 12px; }
.brain-card { text-align: left; border: 1px solid var(--glass-border); background: var(--glass); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; font: inherit; color: var(--ink); min-width: 0; }
.brain-card b { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.brain-card:hover { background: #fff; }
.brain-card.mine { box-shadow: inset 3px 0 0 var(--lime); }
.brain-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.brain-summary { font-size: 16px; margin: 0; }
.brain-text { white-space: pre-wrap; margin: 6px 0 0; }
.brain-hint { border: 1px dashed rgba(22,33,30,.3); border-radius: 12px; padding: 8px 12px; }
.brain-reply { background: var(--lime-soft); border-radius: 12px; padding: 8px 12px; }
.brain-comments li { padding: 6px 0; border-bottom: 1px solid var(--divider); }
.brain-admin { background: rgba(22,33,30,.04); box-shadow: none; padding: 16px 18px; }
.brain-admin h3, .brain-idea h3 { font-size: 15px; font-weight: 600; margin: 4px 0 0; }
.brain-links { gap: 16px; }
.brain-file, .brain-mine { padding: 10px 0; border-bottom: 1px solid var(--divider); }
@media (max-width: 900px) { .brain-board { grid-template-columns: 1fr; } }
ul.brain-comments, ul.plain-list:has(> li.brain-mine), ul.plain-list:has(> li.brain-file) { list-style: none; padding: 0; margin: 0; }
.brain-admin .row .in, .brain-file .row .in { width: auto; min-width: 200px; }

/* Marketing → Our fleet (8 Nov): the check points in columns; the agreement signed */
.fleet-check { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2px 18px; }
.fleet-check .field.check { min-height: 36px; align-self: start; }
.ok-text { color: #2F6A1C; }

/* ==========================================================================================================
   Redesign (Cesar, 8–9 Nov): the look agreed on the design canvas's "Look & feel and menus" page.
   One side menu on the left (logo, departments with their icon, the one you are in open on its menus,
   Settings and My guide at the foot), the row of pages on top with scenario, search, ideas, bell and initials,
   footer A (dark) at the end of every page. Buttons, chips, fields, number tiles and the switch between views
   follow the canvas's parts. The menu itself does not change.
   ========================================================================================================== */
.shell { max-width: 1720px; display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 28px; align-items: start; padding: 0 28px 0 0; }
.main-col { min-width: 0; padding: 24px 0 32px; display: flex; flex-direction: column; }
.rail { position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: none; padding: 24px 16px; display: flex; flex-direction: column; gap: 4px; }
.rail::-webkit-scrollbar { display: none; }
.rail .logo { width: 64px; height: 64px; border-radius: 16px; margin-bottom: 18px; flex: none; }
.rail .logo img { width: 50px; }
.rail .depts { display: flex; flex-direction: column; gap: 4px; }
.rail .dept-btn { height: auto; border: 0; background: transparent; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; color: var(--ink2); text-decoration: none; font-size: 15px; font-weight: 400; }
.rail .dept-btn:hover { background: rgba(255,255,255,.45); }
.rail .dept-btn.on { background: var(--ink); color: #fff; }
.rail .dept-btn .ico { flex: none; }
.rail nav.top { display: flex; flex-direction: column; align-items: stretch; text-align: left; gap: 2px; flex-wrap: nowrap; justify-content: flex-start; margin: 4px 0 8px 22px; padding-left: 12px; border-left: 1px solid rgba(22,33,30,.2); }
.rail nav.top a { height: auto; display: block; padding: 8px 12px; border-radius: 11px; font-size: 14px; color: var(--ink2); }
.rail nav.top a.on { background: #fff; color: var(--ink); font-weight: 500; }
.rail nav.top a:not(.on):hover { background: rgba(255,255,255,.45); }
.rail-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(22,33,30,.12); display: flex; flex-direction: column; gap: 2px; }
.rail-x { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 12px; color: var(--ink2); text-decoration: none; font-size: 14px; }
.rail-x:hover { background: rgba(255,255,255,.45); }
.rail-x.on { background: var(--ink); color: #fff; }
.rail .dept-btn:focus-visible, .rail-x:focus-visible, .foot-link:focus-visible, .foot-toggle:focus-visible, .app-foot a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* the top bar: the pages of the menu you are in, then the tools */
.masthead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; grid-template-columns: none; }
.masthead .navs { flex: 1 1 auto; align-items: flex-start; min-width: 0; }
nav.sub { justify-content: flex-start; background: rgba(255,255,255,.45); border-color: rgba(255,255,255,.7); }
nav.sub.dense { justify-content: flex-start; }
.mast-right { gap: 10px; }
.bell, .avatar { width: 44px; height: 44px; }
.bell { background: rgba(255,255,255,.6); border-color: transparent; }
.scenario-btn { height: 44px; padding: 0 16px; border-color: rgba(22,33,30,.15); background: rgba(255,255,255,.6); font-size: 14px; }

/* the page header: title, "?" and Feedback, the main button on the right */
.page-head h1 { font-weight: 400; letter-spacing: -.01em; }
.help-btn { margin-top: 0; }

/* number tiles, chips, fields (the canvas's parts) */
.kpi { background: rgba(255,255,255,.7); border-radius: 20px; padding: 18px; gap: 4px; }
.kpi span { font-size: 13px; }
.kpi b { font-size: 32px; font-weight: 400; line-height: 1.15; }
.in { background: rgba(255,255,255,.85); }
.search { height: 48px; border-radius: 16px; background: rgba(255,255,255,.85); }
.pill { font-size: 13px; padding: 0 12px; height: 26px; }
.chip { border-radius: 9px; }

/* footer A: dark, at the end of every page */
.app-foot { margin-top: 48px; padding: 28px 32px 22px; border: 0; border-radius: 28px; background: var(--ink); color: #fff; display: flex; flex-direction: column; gap: 22px; font-size: 13px; letter-spacing: 0; text-transform: none; }
.foot-top { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.foot-here { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.foot-logo { width: 44px; height: 44px; border-radius: 12px; background: #030607; display: grid; place-items: center; flex: none; }
.foot-logo img { width: 34px; filter: brightness(0) invert(1); }
.foot-chip { display: inline-flex; flex-direction: column; padding: 6px 14px; border-radius: 14px; background: rgba(255,255,255,.08); }
.foot-chip small { font-size: 11px; color: #B9C7C3; }
.foot-chip b { font-size: 14px; font-weight: 500; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px; }
.foot-link { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; border: 0; background: rgba(255,255,255,.1); color: #fff; text-decoration: none; font: 500 13px Outfit, sans-serif; cursor: pointer; }
.foot-link:hover { background: rgba(255,255,255,.18); }
.foot-link.lime { background: var(--lime); color: var(--ink); }
.foot-all { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); }
.foot-all[hidden] { display: none; }
.foot-dept { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.foot-dept-name { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.foot-dept.on .foot-dept-name { color: var(--lime); }
.foot-area { display: flex; flex-direction: column; gap: 3px; }
.foot-area p { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #8FA39E; }
.foot-area a { font-size: 13px; line-height: 1.35; color: #D7E0DD; text-decoration: none; }
.foot-area a:hover { color: #fff; text-decoration: underline; }
.foot-area a.on { color: var(--lime); font-weight: 600; }
.foot-status { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12px; color: #B9C7C3; }
.foot-notes { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.foot-notes span { display: inline-flex; align-items: center; gap: 7px; }
.foot-notes i { width: 7px; height: 7px; border-radius: 50%; background: #6F8580; }
.foot-notes i.ok { background: #9BCB6A; }
.foot-toggle { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; font: inherit; font-size: 12px; cursor: pointer; }
.foot-toggle:hover { background: rgba(255,255,255,.1); }

/* tablet and phone: the side menu becomes a band on top (logo and departments side by side, the menus under them) */
@media (max-width: 1100px) {
  .shell { display: block; padding: 0 20px; }
  .rail { position: static; height: auto; overflow: visible; padding: 16px 0 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  .rail .logo { width: 48px; height: 48px; border-radius: 14px; margin: 0; }
  .rail .logo img { width: 38px; }
  .rail .depts { flex-direction: row; flex: 1 1 0; min-width: 0; overflow-x: auto; scrollbar-width: none; gap: 4px; align-items: center; }
  .rail .depts::-webkit-scrollbar { display: none; }
  .rail .dept-group { display: contents; }
  .rail .dept-btn { flex: none; padding: 9px 12px; white-space: nowrap; }
  .rail nav.top { order: 10; flex-direction: row; overflow-x: auto; margin: 0; padding: 0; border: 0; }
  .rail .dept-group.open nav.top { position: absolute; }
  .rail-foot { margin: 0; padding: 0; border: 0; flex-direction: row; }
  .rail-x { padding: 9px 12px; white-space: nowrap; }
  .main-col { padding-top: 12px; }
}
@media (max-width: 1100px) { .rail .dept-group.open nav.top { position: static; width: 100%; flex-basis: 100%; } .rail .depts { flex-wrap: nowrap; } }
@media (max-width: 600px) {
  .shell { padding: 0 12px; }
  .rail-x { font-size: 0; gap: 0; } /* only the gear and the book on a phone */
  .masthead { display: flex; }
  .mast-right { flex-wrap: wrap; justify-content: flex-end; }
  .app-foot { padding: 20px; border-radius: 22px; }
  .foot-chip { flex: 1 1 100%; }
}
@media print { .rail, .app-foot { display: none !important; } .shell { display: block; padding: 0; } }

/* ---------- Redesign · general changes of every board (Cesar, 8–9 Nov) ----------
   Tables in one style: small grey column names, numbers right-aligned (alignHeaders), one white line per row,
   totals in a dark row. Number tiles: a tile that opens a page has a dark outline. Warnings: one coloured line. */
table.grid th { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); background: #EEF2F0; }
table.grid tbody td { background: #fff; border-top: 1px solid rgba(22,33,30,.06); }
table.grid tbody tr:first-child td { border-top: 0; }
table.grid tfoot td, table.grid tfoot th { background: var(--ink); color: #fff; border-top: 0; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 14px; }
table.grid tfoot td .muted, table.grid tfoot th .muted { color: #B9C7C3; }
table.grid tr.inactive td { background: rgba(255,255,255,.6); }
table.grid tr.changed td, table.grid tbody tr[tabindex]:hover td, table.grid tr.clickable:hover td { background: #F4FBD3; }
table.matrix td { background: #fff; }
.kpis.linked a.kpi, a.kpi { outline: 2px solid var(--ink); outline-offset: -2px; }
.kpi-btn { outline: 2px solid var(--ink); outline-offset: -2px; }
.warnings { padding: 12px 18px 12px 34px; border-radius: 16px; background: rgba(240,170,90,.24); color: #7A4A16; }
.banner { border-radius: 16px; }
/* short cards side by side (Spare part rules and the boards that ask for it) */
.cols-3.cards-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; align-items: start; }
.cols-3.cards-row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); }
.cards-row table.grid td { overflow-wrap: normal; }
@media (max-width: 1250px) { .cols-3.cards-row { grid-template-columns: 1fr; } }
/* cards as tabs: the switch of the Look & feel page, the count beside each name */
.card-tabs-wrap > [hidden] { display: none !important; }
.tabs.card-tabs .tab-count { margin-left: 6px; font-size: 12px; color: var(--muted); }
.tabs.card-tabs button.on .tab-count { color: var(--ink); }
.side-by-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.side-by-side.main-narrow { grid-template-columns: minmax(0, 1fr) 340px; }
@media (max-width: 1100px) { .side-by-side, .side-by-side.main-narrow { grid-template-columns: 1fr; } }
/* the top bar stays one row: a long row of pages scrolls sideways, the tools keep their place on the right */
@media (min-width: 1101px) {
  .masthead { flex-wrap: nowrap; }
  .masthead .navs { flex: 1 1 0; min-width: 0; }
  .masthead nav.sub { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .masthead nav.sub::-webkit-scrollbar { display: none; }
  .masthead nav.sub a { flex: none; }
  .mast-right { flex: none; }
}

/* ---------- Supplier papers against the PO (I2) ---------- */
.pill.ok { background: rgba(94,158,58,.2); color: #2F6A1C; } .pill.ok i { background: #4C8A2E; }
.banner.bad { background: #B4382E; color: #fff; } .banner.bad b { color: #fff; }
.banner.grey { background: rgba(22,33,30,.07); color: var(--ink2); }
.banner.okd { background: rgba(94,158,58,.18); color: #244F15; }
.pp-banners { display: flex; flex-direction: column; gap: 8px; } .pp-banners .banner { margin-top: 0; flex-direction: column; align-items: flex-start; gap: 2px; }
.grid tr.pp-red td { background: #FBECEA; } .grid tr.pp-amb td { background: #FDF1E2; } .grid tr.pp-gry td { color: var(--muted); }
.pp-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; vertical-align: middle; }
.pp-table td:first-child { min-width: 200px; } .pp-table td:first-child b { white-space: normal; } .pp-table .mono { white-space: nowrap; }
.pp-tick { display: flex; gap: 10px; align-items: flex-start; } .pp-tick input { margin-top: 3px; flex: none; }

/* Workflow tutorials T1 (9 Nov): the practice app's band, My guide → Workflow tutorials, the Practice outbox */
.banner.practice-band { background: #B4540F; color: #fff; gap: 4px; }
.banner.practice-band b { letter-spacing: .08em; }
.banner.practice-band .practice-links { margin-left: auto; display: flex; flex-wrap: wrap; gap: 14px; }
.banner.practice-band .practice-links a { margin-left: 0; color: #fff; text-decoration: underline; }
.tut-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(22,33,30,.1); }
.mail-text { white-space: pre-wrap; font: inherit; background: #fff; border-radius: 12px; padding: 14px 16px; margin: 0; }

/* Workflow tutorials T2 (9 Nov): the step panel docked on the right of the practice app */
.tut-panel { position: fixed; top: 16px; right: 16px; bottom: 16px; width: 360px; z-index: 60; box-sizing: border-box; overflow-y: auto; padding: 20px; border-radius: 20px;
  background: #fff; box-shadow: 0 10px 40px rgba(22,33,30,.18); display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.tut-panel h3 { margin: 0; font-size: 21px; font-weight: 500; }
.tut-panel p { margin: 0; line-height: 1.45; }
.tut-panel .eye { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
body.with-tut .shell { padding-right: 392px; }
.tut-dots { display: flex; flex-wrap: wrap; gap: 4px; } .tut-dots i { width: 10px; height: 10px; border-radius: 50%; background: #D5DBD9; }
.tut-dots i.d { background: #5E9E3A; } .tut-dots i.o { background: var(--ink); }
.tut-panel .ban-ok, .tut-panel .ban-amb, .tut-panel .ban-gry { border-radius: 12px; padding: 10px 12px; line-height: 1.4; }
.tut-panel .ban-ok { background: rgba(94,158,58,.2); color: #244F15; } .tut-panel .ban-amb { background: #FCE3C4; color: #5E3810; } .tut-panel .ban-gry { background: #EEF1F0; color: #33443F; }
.tut-miss { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-top: 1px solid rgba(22,33,30,.1); }
.tut-miss .in { width: 90px; }
.tut-glow { outline: 3px solid #E8FF3A !important; outline-offset: 3px; box-shadow: 0 0 0 7px rgba(22,33,30,.85) !important; transition: outline-color .2s; }
@media (max-width: 1100px) { body.with-tut .shell { padding-right: 0; padding-bottom: 46vh; } .tut-panel { top: auto; left: 8px; right: 8px; width: auto; max-height: 44vh; } }
.tut-panel > .row.spread { flex-wrap: nowrap; align-items: flex-start; gap: 10px; } .tut-panel > .row.spread b { line-height: 1.35; }
/* a window opened during a tutorial leaves the step panel in view */
body.with-tut .overlay { right: 392px; }
@media (max-width: 1100px) { body.with-tut .overlay { right: 0; bottom: 46vh; } }
.tut-panel.folded { top: auto; bottom: 16px; width: auto; max-width: 520px; padding: 0; overflow: visible; }
.tut-unfold { border: 0; background: var(--ink); color: #fff; border-radius: 999px; padding: 12px 18px; font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.tut-unfold .muted { color: #E8FF3A; }
.tut-panel > .row.spread > .row { flex-wrap: nowrap; gap: 6px; }
.tut-panel table td:first-child { width: 52%; }
/* the end summary: long values (Training 3: dealer, serials, insurance) wrap inside the panel */
.tut-panel table td { white-space: normal; overflow-wrap: anywhere; vertical-align: top; }

/* On the floor, a phone with a Bluetooth scanner (assembly orders phase A, 10 Nov) */
.floor { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.fl-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: #16211E; color: #fff; }
.fl-head .btn { color: #16211E; background: #fff; }
.fl-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fl-tile { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: left; min-height: 110px; padding: 16px; border-radius: 14px; border: 2px solid #16211E; background: #fff; color: #16211E; font: inherit; cursor: pointer; }
.fl-tile b { font-size: 20px; } .fl-tile small { color: var(--ink2); }
.fl-tile.off { border-style: dashed; opacity: .6; cursor: default; }
.fl-scanrow { display: flex; gap: 8px; } .fl-scanrow .in { flex: 1; }
.fl-scan { height: 52px; font-size: 18px; border: 2px dashed #16211E; border-radius: 10px; }
.fl-scan:focus { border-style: solid; background: #F8FFD0; }
.fl-num { height: 48px; font-size: 20px; }
.fl-btn { height: 52px; font-size: 17px; width: 100%; }
.fl-info { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.fl-info b { font-size: 13px; color: var(--ink2); word-break: break-word; }
.fl-go { display: flex; flex-direction: column; padding: 14px; border-radius: 12px; background: #16211E; color: #fff; }
.fl-go small { color: #C9D7C3; } .fl-go b { font-size: 34px; letter-spacing: .04em; }
.fl-list { display: flex; flex-direction: column; gap: 6px; }
.fl-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: #16211E; font: inherit; text-align: left; }
button.fl-row { cursor: pointer; }
.fl-qty { font-weight: 700; font-size: 18px; }
.fl-msg { padding: 12px 14px; border-radius: 10px; }
.fl-msg.ok { background: #DCE4E1; color: #2F5D50; } .fl-msg.warn { background: #F3E5CC; color: #8A5A1F; } .fl-msg.bad { background: #F6DCD8; color: #9A2E24; }

/* Shelf labels: one per shelf, QR and big code, cut out after printing */
.shelf-labels { display: grid; grid-template-columns: repeat(auto-fill, minmax(70mm, 1fr)); gap: 4mm; }
.sl { display: flex; align-items: center; gap: 4mm; height: 35mm; padding: 3mm; border: 1px dashed #8A9995; break-inside: avoid; background: #fff; }
.sl-qr { width: 29mm; height: 29mm; flex: none; } .sl-qr svg { width: 100%; height: 100%; }
.sl-text { display: flex; flex-direction: column; gap: 1mm; } .sl-text b { font-size: 26px; color: #16211E; } .sl-text small { color: #4A5C58; }
.shelf-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.shelf-cell { display: flex; flex-direction: column; align-items: flex-start; font: inherit; font-size: 12px; color: #16211E; text-align: left; min-width: 74px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: #fff; font-size: 12px; }
.shelf-cell.used { border-color: #2F5D50; background: #EEF4F1; } .shelf-cell.off { opacity: .45; border-style: dashed; }
button.shelf-cell { cursor: pointer; } button.shelf-cell:hover { border-color: #16211E; }
.shelf-cell b { display: block; font-family: var(--mono, monospace); }

/* Assembly (phase B, 10 Nov): Start's order columns, the phase tiles of Overview and the level bars of Stock */
.ao-cols { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1100px) { .ao-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ao-col { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 14px; background: rgba(255,255,255,.45); min-width: 0; }
.ao-col-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 13px; }
.ao-card { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: #16211E; font: inherit; font-size: 12.5px; cursor: pointer; }
.ao-card:hover { border-color: #16211E; }
.ao-waiting .ao-card { border-color: #E3C48A; background: #FBF5EA; }
.ao-stock .ao-card { border-color: #9FC0A8; }
.warn-text { color: #8A5A1F; }
.big-num { font-size: 20px; }
.kpis.phases { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1100px) { .kpis.phases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
a.kpi.phase { text-decoration: none; color: inherit; } a.kpi.phase:hover { outline: 2px solid #16211E; }
a.kpi.phase .go { margin-top: 4px; font-weight: 600; }
.lvl-row { display: grid; grid-template-columns: 180px 1fr 110px; gap: 12px; align-items: center; }
.lvl { height: 14px; border-radius: 7px; background: rgba(22,33,30,.08); overflow: hidden; }
.lvl i { display: block; height: 100%; background: #2F5D50; border-radius: 7px; }
.lvl.mid i { background: #C98A2E; } .lvl.low i { background: #B5473C; }

/* Pick lists (phase C) */
.pk-qr-box { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pk-qr { width: 96px; height: 96px; } .pk-qr svg { width: 100%; height: 100%; }
tr.muted-row td { color: var(--ink2); }

/* Pre-assembly (phase D): station buttons and the 30 × 15 mm tags printed from the browser */
.station .big-btn { height: 52px; font-size: 16px; padding: 0 22px; }
.pa-print { display: none; }
@media print {
  body.printing-tags > *:not(.pa-print) { display: none !important; }
  body.printing-tags .pa-print { display: block; }
  @page { margin: 0; }
}
.pa-tag { width: 30mm; height: 15mm; box-sizing: border-box; padding: 1mm; display: flex; gap: 1mm; align-items: center; break-after: page; overflow: hidden; font-family: Helvetica, Arial, sans-serif; color: #000; }
.pa-qr { width: 12.5mm; height: 12.5mm; flex: none; } .pa-qr svg { width: 100%; height: 100%; }
.pa-text { display: flex; flex-direction: column; min-width: 0; font-size: 5.5pt; line-height: 1.15; } .pa-text b { font-size: 5.6pt; font-family: Menlo, monospace; white-space: nowrap; letter-spacing: -0.02em; }

/* Final assembly (phase E): the 10 × 15 cm box label printed from the browser, as today's label */
.bx-print { display: none; }
@media print {
  body.printing-label > *:not(.bx-print) { display: none !important; }
  body.printing-label .bx-print { display: block; }
}
.bx-label { width: 100mm; height: 150mm; box-sizing: border-box; padding: 6mm; display: flex; flex-direction: column; gap: 2.4mm; font-family: Helvetica, Arial, sans-serif; color: #000; background: #fff; }
.bx-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2mm; }
.bx-qr { width: 34mm; height: 34mm; } .bx-qr svg { width: 100%; height: 100%; }
.bx-logo { width: 42mm; filter: brightness(0); }
.bx-f { display: flex; flex-direction: column; border-bottom: 0.3mm solid #000; padding-bottom: 1mm; }
.bx-f small { font-size: 7pt; letter-spacing: .08em; } .bx-f b { font-size: 15pt; }
.bx-foot { margin-top: auto; font-size: 10pt; font-weight: 600; }

/* Selling a bike (10 Nov): trade credit insurance, next 4 weeks, OK to ship. Filter bars: one row, every control 38 px (Cesar's comment on the board). */
.filterbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.filterbar .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filterbar .seg, .filterbar .in, .filterbar select { height: 38px; box-sizing: border-box; }
.filterbar .seg { border-radius: 999px; align-items: center; }
.filterbar .seg button { height: 32px; border-radius: 999px; padding: 0 14px; }
.filterbar .in { border-radius: 999px; padding: 0 14px; min-width: 220px; }
.seg button.on { background: #fff; font-weight: 600; box-shadow: 0 1px 3px rgba(22,33,30,.12); color: var(--ink, #16211E); }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.cc-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.cc-open > td { background: rgba(255,255,255,.7); padding: 14px 16px; }
.cc-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: rgba(22,33,30,.08); min-width: 80px; margin-top: 4px; }
.cc-bar i { background: #33443F; } .cc-bar b { background: #2F5D50; } .cc-bar b.w { background: #D9A441; } .cc-bar b.r { background: #C0605A; }
.sage { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: #DCE4E1; }
.sage b { font-size: 16px; }
.cc-warn { margin: 8px 0 0; padding: 10px 14px; border-radius: 12px; background: #F3E5CC; color: #8A5A1F; font-size: 12.5px; line-height: 1.45; }
.in.ro { display: flex; align-items: center; background: rgba(22,33,30,.04); }
b.neg { color: #9A2E24; }
@media (max-width: 720px) { .cc-grid, .grid2 { grid-template-columns: 1fr; } }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } @media (max-width: 720px) { .grid3 { grid-template-columns: 1fr; } }
.cc-table button.link { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.row.between { justify-content: space-between; }
.filterbar .in, .filterbar select.in { width: auto; flex: 0 0 auto; } .filterbar input.in { width: 240px; } .filterbar .row { flex-wrap: nowrap; }

/* Shipment A (10 Nov): Logistics → Ready to ship and the booking card of a shipment */
.pill.dk { background: var(--ink); color: #fff; } .pill.dk i { background: var(--lime); }
.rts-head { gap: 8px; align-items: center; } .rts-head h3 { margin: 0 6px 0 0; font-size: 17px; font-weight: 600; }
.rts-dealer .table-flat { margin-top: 10px; }
.rts-dealer:not(.open) .linkish { margin-top: 6px; }
.rts-checks { display: flex; flex-direction: column; }
.rts-check { display: grid; grid-template-columns: 96px 200px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid rgba(22,33,30,.08); }
.rts-check:last-child { border-bottom: 0; }
@media (max-width: 700px) { .rts-check { grid-template-columns: 90px minmax(0, 1fr); } .rts-check > span { grid-column: 1 / -1; } }
.rts-invs.one { grid-template-columns: minmax(0, 1fr); }
.rts-inv { display: flex; flex-direction: column; gap: 6px; background: #F7FAF8; border-radius: 16px; padding: 14px 16px; }
.rts-line { border-bottom: 1px solid #EEF2F0; padding: 4px 0; gap: 12px; flex-wrap: nowrap; } .rts-line span { min-width: 0; } .rts-line b { font-weight: 500; white-space: nowrap; }
.card.inner { background: #F7FAF8; box-shadow: none; padding: 12px 14px; border-radius: 14px; display: flex; flex-direction: column; gap: 4px; }
/* Training mode (I4, 10 Nov) */
.tut-confirm { height: 46px; font-size: 15px; width: 100%; }
.tut-train { align-items: flex-start; }
.tut-train .seg button[disabled] { opacity: .4; cursor: not-allowed; }
.lbl { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* Shipment B (10 Nov): Warehouse → To label */
iframe.lb-print { position: fixed; right: 0; bottom: 0; width: 1px; height: 1px; border: 0; opacity: 0; pointer-events: none; }
.tl-next { display: flex; flex-direction: column; gap: 4px; } .tl-next .tl-place { font-size: 40px; font-weight: 600; line-height: 1; }
.tl-scan .fl-scan { height: 60px; font-size: 20px; }
.tl-last { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }