:root {
  /* TOOLPORT corporate identity: orange, black, white, light grey */
  --brand: #f49614;
  --brand-dark: #1c1e1c;
  --bg: #f2f2f1;
  --surface: #ffffff;
  --surface-2: #f8f8f7;
  --ink: #1c1e1c;
  --ink-2: #4c4e4c;
  --ink-3: #7e807e;
  --line: #e1e1df;
  --line-2: #ececea;
  --accent: #f49614;          /* fills: buttons, bars, active markers */
  --accent-ink: #1c1e1c;      /* text on orange */
  --accent-soft: #fdf0dc;
  --link: #a35c00;            /* orange dark enough to read as text on white */
  --focus: #a35c00;
  --crit: #b93a2c;  --crit-bg: #fbe9e6;
  --warn: #8a5a00;  --warn-bg: #fbf1d9;
  --good: #2c7a4b;  --good-bg: #e5f3ea;
  --info: #3f4a9e;  --info-bg: #e9eafa;
  --mute-bg: #eeeeec;
  --c-hist: #1c1e1c;
  --c-final: #f49614;
  --c-stat: #9a9c9a;
  --c-corr: #1c1e1c;
  --radius: 8px;
  --shadow: 0 1px 2px rgba(28, 30, 28, .06), 0 2px 8px rgba(28, 30, 28, .04);
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
h1 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: 15px; font-weight: 600; }
h3 { font-size: 13px; font-weight: 600; }
.num, td.num, th.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.muted { color: var(--ink-3); }
.small { font-size: 12.5px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ── shell ─────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: 224px 1fr; min-height: 100%; }
.sidebar {
  background: var(--brand-dark); color: #d6d6d4; padding: 20px 14px; display: flex; flex-direction: column; gap: 22px;
  position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: 10px; color: #fff; padding: 0 6px; }
.brand svg { flex: none; }
.brand b { font-weight: 600; font-size: 15px; letter-spacing: .01em; display: block; }
.brand-logo { display: block; width: 100%; max-width: 176px; height: auto; margin-bottom: 7px; }
.byline { display: inline-flex; align-items: center; gap: 6px; color: #8a8c8a; font-size: 11px; letter-spacing: .04em; }
.byline img { height: 11px; width: auto; display: block; }
.brand span { font-size: 11px; color: #9a9c9a; letter-spacing: .06em; text-transform: uppercase; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav .group { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: #8a8c8a; padding: 14px 10px 6px; }
.nav a {
  color: #d6d6d4; padding: 8px 10px; border-radius: 6px; display: flex; align-items: center; gap: 10px; font-size: 13.5px;
}
.nav a:hover { background: rgba(255,255,255,.06); text-decoration: none; color: #fff; }
.nav a.active { background: rgba(244, 150, 20, .14); color: #fff; box-shadow: inset 3px 0 0 var(--brand); }
.nav a .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; }
.nav a.active .dot { background: var(--brand); opacity: 1; }
.secondary-nav { margin-top: -10px; padding: 0 10px; font-size: 12px; }
.secondary-nav summary { color: #9a9c9a; cursor: pointer; padding: 6px 0; }
.secondary-nav a { display: block; color: #b8bab8; padding: 5px 0; }
.sidebar .foot { margin-top: auto; font-size: 12px; color: #9a9c9a; display: flex; flex-direction: column; gap: 10px; padding: 0 6px; }
.sidebar .foot form { margin: 0; }
.linkbtn { background: none; border: 0; padding: 0; color: #d6d6d4; cursor: pointer; font: inherit; text-decoration: underline; }
.lang { display: flex; gap: 4px; }
.lang button {
  background: transparent; border: 1px solid #4a4c4a; color: #d6d6d4; border-radius: 5px; padding: 2px 8px;
  font: 600 11px var(--font); letter-spacing: .05em; cursor: pointer;
}
.lang button[aria-pressed="true"] { background: var(--brand); color: var(--brand-dark); border-color: var(--brand); }

.main { min-width: 0; padding: 22px 28px 48px; display: flex; flex-direction: column; gap: 18px; }
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pagehead .sub { color: var(--ink-3); margin-top: 3px; font-size: 13px; }
.asof {
  font-size: 12px; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 11px; white-space: nowrap;
}
.orientation { color: var(--ink-2); font-size: 12.5px; margin-top: 5px; }
.cockpit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.action-list { display: grid; gap: 4px; }
.action-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 18px; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 6px; color: inherit; border: 1px solid transparent; }
.action-row:hover { background: var(--surface-2); border-color: var(--line); text-decoration: none; }
.action-row strong, .action-row small { display: block; }
.action-row small { color: var(--ink-2); margin-top: 2px; }
.action-icon, .step { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--mute-bg); color: var(--ink-2); font-weight: 600; }
.action-row.critical .action-icon { color: var(--crit); background: var(--crit-bg); }
.action-row.warning .action-icon { color: var(--warn); background: var(--warn-bg); }
.action-arrow { color: var(--link); font-size: 18px; }
.secondary-insight { margin-top: -8px; text-align: right; }
.text-button { border: 0; background: transparent; color: var(--link); cursor: pointer; font: inherit; padding: 0; }
.text-button:hover { text-decoration: underline; }
.detail-drawer { position: fixed; z-index: 20; right: 0; top: 0; bottom: 0; width: min(420px, 92vw); padding: 28px; background: var(--surface); box-shadow: -8px 0 24px rgba(28,30,28,.16); transform: translateX(105%); transition: transform .2s ease; }
.detail-drawer.open { transform: translateX(0); }
.detail-drawer h2 { margin: 20px 0 12px; }
.drawer-close { position: absolute; right: 18px; top: 14px; border: 0; background: transparent; font-size: 26px; color: var(--ink-2); cursor: pointer; }
.drawer-backdrop { display: none; position: fixed; z-index: 19; inset: 0; background: rgba(28,30,28,.28); }
.drawer-open .drawer-backdrop { display: block; }
.demo-banner { background: var(--accent-soft); border: 1px solid #f4d39d; color: #6f4600; border-radius: 6px; padding: 7px 11px; font-size: 12px; font-weight: 500; letter-spacing: .02em; }

/* home / planning workspace */
.home-hero { background: var(--brand-dark); color: #fff; border-radius: 10px; padding: 28px 30px 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; min-height: 176px; position: relative; overflow: hidden; }
.home-hero::after { content: ''; position: absolute; width: 230px; height: 230px; border: 1px solid rgba(244,150,20,.28); border-radius: 50%; right: -48px; top: -104px; box-shadow: 0 0 0 22px rgba(244,150,20,.05), 0 0 0 44px rgba(244,150,20,.04); }
.home-hero-copy, .home-hero-meta { position: relative; z-index: 1; }
.home-hero-copy { max-width: 620px; }
.eyebrow { display: block; color: var(--brand); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.home-hero h2 { font-size: clamp(25px, 3vw, 34px); line-height: 1.12; margin: 8px 0 8px; letter-spacing: -.02em; }
.home-hero p { color: #c5c7c5; max-width: 500px; margin: 0; font-size: 14px; }
.home-hero-meta { color: #c5c7c5; font-size: 11.5px; display: flex; align-items: center; gap: 7px; white-space: nowrap; padding-bottom: 2px; }
.home-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #65bd82; box-shadow: 0 0 0 3px rgba(101,189,130,.16); }
.home-meta-separator { color: #737673; }
.home-section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.home-section-head h2 { margin-top: 3px; font-size: 20px; }
.home-hint { color: var(--ink-3); font-size: 12px; }
.module-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.module-tile { min-height: 218px; display: flex; flex-direction: column; gap: 12px; padding: 18px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); position: relative; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.module-tile:hover { text-decoration: none; color: var(--ink); transform: translateY(-2px); border-color: #c7c8c5; border-top-color: var(--brand); box-shadow: 0 7px 18px rgba(28,30,28,.1); }
.module-tile:focus-visible { outline-offset: 4px; }
.module-tile--demand { border-top-color: #e19a2c; }.module-tile--inventory { border-top-color: #4f8b68; }.module-tile--supply { border-top-color: #6570b5; }.module-tile--catalog { border-top-color: #8b8d8b; }
.module-number { font: 500 11px var(--mono); color: var(--ink-3); letter-spacing: .04em; }
.module-icon { position: absolute; right: 18px; top: 15px; color: var(--brand); font: 24px/1 var(--font); }
.module-tile h3 { font-size: 19px; margin: 16px 0 6px; }.module-tile p { color: var(--ink-2); margin: 0; max-width: 220px; font-size: 13px; line-height: 1.45; }
.module-link { margin-top: auto; color: var(--link); font-size: 12.5px; font-weight: 600; }.module-link span { font-size: 17px; margin-left: 4px; vertical-align: -1px; }
.home-footer-note { display: flex; align-items: center; gap: 9px; color: var(--ink-2); font-size: 12.5px; padding: 12px 2px 0; border-top: 1px solid var(--line); }.home-footer-note a { margin-left: auto; white-space: nowrap; }.home-footer-mark { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--accent-soft); color: var(--link); font-weight: 600; }

/* ── building blocks ───────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card > .hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 0; flex-wrap: wrap; }
.card > .bd { padding: 14px 16px 16px; }
.card > .bd.flush { padding: 8px 0 4px; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 15px; display: flex; flex-direction: column; gap: 3px; }
.kpi .lbl { font-size: 11.5px; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; }
.kpi .val { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kpi .cmp { font-size: 12.5px; color: var(--ink-2); }
.kpi.alert .val { color: var(--crit); }
.kpis-small { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.up { color: var(--good); } .down { color: var(--crit); }

.pill {
  display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 1px 9px 1px 7px;
  font-size: 12px; font-weight: 500; white-space: nowrap; line-height: 20px;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.crit { color: var(--crit); background: var(--crit-bg); }
.pill.warn { color: var(--warn); background: var(--warn-bg); }
.pill.good { color: var(--good); background: var(--good-bg); }
.pill.info { color: var(--info); background: var(--info-bg); }
.pill.mute { color: var(--ink-3); background: var(--mute-bg); }
.tag { display: inline-block; font-size: 11.5px; border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; color: var(--ink-2); background: var(--surface-2); white-space: nowrap; }

.tablewrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th {
  text-align: left; font-weight: 500; color: var(--ink-3); font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase;
  padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface);
}
table.data td { padding: 8px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover td { background: var(--surface-2); }
table.data tfoot td { font-weight: 600; border-top: 1px solid var(--line); border-bottom: 0; }
table.data td.name { min-width: 180px; }
/* period table: many columns; the row names stay visible while scrolling */
table.periods td.name { position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 200px; }
table.periods th:first-child { position: sticky; left: 0; z-index: 1; }
table.periods th.fc { color: var(--link); background: var(--accent-soft); }
table.periods tr.total td { border-top: 1px solid var(--line); }
/* product catalogue: one card per family */
.fam-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 8px; }
.fam-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; color: inherit; }
.fam-card:hover { text-decoration: none; border-color: var(--accent); }
.fam-card .fam-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.fam-card h2 { margin: 0; font-size: 15px; }
.fam-card dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: 13px; }
.fam-card dt { color: var(--ink-3); }
.fam-card dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.fam-card .go { color: var(--link); margin-top: auto; }
h2.section { font-size: 15px; margin: 8px 0 -4px; }
table.data td.name .muted a, table.data td.name a.muted { color: inherit; }
table.catalog th { white-space: normal; vertical-align: bottom; }
table.catalog td.name { min-width: 260px; }
@media (max-width: 900px) { .fam-cards { grid-template-columns: 1fr; } }
/* AI explanation under a chart */
.btn.ai { border-color: var(--accent); color: var(--link); }
.explain { margin-top: 12px; padding: 12px 14px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 4px; font-size: 13.5px; }
.explain .headline { font-weight: 600; margin: 0 0 6px; }
.explain ul { margin: 0 0 8px; padding-left: 18px; }
.explain li { margin: 2px 0; }
.explain .watch { margin: 0 0 6px; }
.explain p:last-child { margin-bottom: 0; }
.explain .error { color: var(--crit); margin: 0; }
table.data .bar { position: relative; height: 6px; background: var(--line-2); border-radius: 3px; min-width: 60px; }
table.data .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 3px; }

.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.filters label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--ink-3); letter-spacing: .03em; text-transform: uppercase; }
select, input[type=text], input[type=email], input[type=password], input[type=number], textarea {
  font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px; min-width: 0;
}
select { padding-right: 26px; }
input[type=number] { font-variant-numeric: tabular-nums; }
.btn {
  display: inline-flex; align-items: center; gap: 6px; font: 500 13px var(--font); border-radius: 6px; padding: 7px 13px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); white-space: nowrap;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: #e38608; border-color: #e38608; }
.btn.danger { color: var(--crit); }
.btn.sm { padding: 4px 9px; font-size: 12.5px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--surface); }
.seg a { padding: 5px 11px; font-size: 12.5px; color: var(--ink-2); border-right: 1px solid var(--line); }
.seg a:last-child { border-right: 0; }
.seg a.on { background: var(--accent-soft); color: var(--link); font-weight: 600; }
.seg a:hover { text-decoration: none; background: var(--surface-2); }

.crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.crumbs a, .crumbs span { padding: 3px 9px; border-radius: 5px; background: var(--surface); border: 1px solid var(--line); }
.crumbs span.cur { background: var(--accent-soft); border-color: transparent; color: var(--link); font-weight: 600; }
.crumbs .sep { border: 0; background: none; padding: 0; color: var(--ink-3); }

.flash { border-radius: 6px; padding: 9px 13px; font-size: 13px; border: 1px solid transparent; }
.flash.success { background: var(--good-bg); color: var(--good); }
.flash.error { background: var(--crit-bg); color: var(--crit); }
.flash.info { background: var(--info-bg); color: var(--info); }

.chartbox { position: relative; height: 300px; }
.chartbox.tall { height: 340px; }
.chartbox.short { height: 220px; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--ink-2); }
.legend i { display: inline-block; width: 16px; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: 6px; }
.legend i.dash { border-top-style: dashed; }
.legend i.box { height: 10px; border: 0; border-radius: 2px; }

/* Geographic-style supplier network: deliberately lightweight and tile-free. */
.geographic-map-wrap { padding-top: 8px; }
.geographic-map { width: 100%; min-height: 360px; display: block; background: #f7faf9; border: 1px solid var(--line); border-radius: 8px; }
.geographic-map .continents path { fill: #e8eee9; stroke: #cbd7cf; stroke-width: 2; }
.geographic-map .network-route { stroke: #67726d; stroke-width: 2; opacity: .48; fill: none; cursor: pointer; transition: opacity .15s, stroke-width .15s; }
.geographic-map .network-route.sea { stroke: #277f89; stroke-dasharray: 5 7; }
.geographic-map .network-route.truck { stroke: #8f6d2e; }
.geographic-map .network-route.rail { stroke: #725b8f; stroke-dasharray: 2 5; }
.geographic-map .network-route:hover, .geographic-map .network-route:focus { opacity: 1; stroke-width: 4; outline: none; }
.geographic-map .dimmed { opacity: .08 !important; }
.map-point { cursor: pointer; outline: none; }
.map-point circle { stroke: #fff; stroke-width: 3; }
.supplier-point circle { fill: var(--orange); }
.warehouse-point circle { fill: #111827; }
.warehouse-point text { fill: #111827; text-anchor: middle; font: 700 11px sans-serif; }
.map-point:focus circle, .map-point:hover circle { stroke: var(--orange); stroke-width: 5; }
.network-legend { display:flex; flex-wrap:wrap; gap:16px; padding:12px 2px 0; color:var(--ink-2); font-size:12px; }
.legend-line, .legend-dot { display:inline-block; vertical-align:middle; margin-right:5px; }
.legend-line { width:20px; border-top:2px solid #67726d; }
.legend-line.sea { border-top-color:#277f89; border-top-style:dashed; }
.legend-dot { width:9px; height:9px; border-radius:50%; background:var(--orange); }
.legend-dot.warehouse { background:#111827; }
.route-detail-grid { display:grid; grid-template-columns:minmax(110px, .35fr) 1fr; gap:8px 18px; max-width:700px; }
.route-detail-grid strong { color:var(--ink-2); font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.adjustment-grid-wrap { max-height: 650px; overflow: auto; }
.adjustment-grid { min-width: 1500px; }
.adjustment-grid th, .adjustment-grid td { white-space: nowrap; }
.adjustment-grid .history-col { background: rgba(90,92,90,.04); }
.adjustment-grid .forecast-col { background: rgba(244,150,20,.06); }
.adjustment-grid .family-row td { background: var(--surface); font-weight: 700; position: sticky; left: 0; z-index: 1; }
.family-toggle { border:0; background:transparent; color:var(--ink); cursor:pointer; font:inherit; padding:4px 0; }
.product-row td:first-child { position:sticky; left:0; background:var(--paper); z-index:1; }
.adjustment-cell input { width:76px; border:1px solid transparent; background:transparent; text-align:right; padding:4px; }
.adjustment-cell input:focus { border-color:var(--orange); background:#fff; outline:2px solid rgba(244,150,20,.2); }
.cell-change { display:block; color:var(--orange-dark, #a96200); font-size:10px; min-height:13px; }
.adjustment-actions { margin-top:14px; }
.adjustment-filters { margin:0 0 14px; padding:10px; background:var(--surface); }
.adjustment-history { margin-top:18px; border-top:1px solid var(--line); padding-top:12px; }
.adjustment-history summary { cursor:pointer; font-weight:700; }
.adjustment-key { display:flex; flex-wrap:wrap; gap:12px 18px; margin:0 0 12px; color:var(--ink-2); font-size:12px; }
.key-swatch { display:inline-block; width:11px; height:11px; margin-right:5px; vertical-align:-1px; border:1px solid var(--line-2); border-radius:2px; }
.key-swatch.history { background:rgba(90,92,90,.10); }
.key-swatch.planned { background:rgba(244,150,20,.16); }
.key-swatch.changed { background:rgba(244,150,20,.34); border-color:var(--orange); }
.adjustment-cell input { cursor:not-allowed; }
.adjustment-cell input[readonly] { color:var(--ink); }
.adjustment-cell.has-adjustment input { font-weight:700; }
.demand-adjustments.editing .adjustment-cell input { border-color:var(--line-2); cursor:text; }
@media (max-width:700px) { .geographic-map { min-height:250px; } .route-detail-grid { grid-template-columns:1fr; gap:3px; } .route-detail-grid strong { margin-top:8px; } }

.note { font-size: 12.5px; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 9px 12px; }
.explain { font-size: 13px; color: var(--ink-2); max-width: 75ch; }
.explain b { color: var(--ink); }
dl.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 13px; }
dl.facts dt { color: var(--ink-3); }
dl.facts dd { margin: 0; font-variant-numeric: tabular-nums; }

.edit-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.edit-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--ink-3); }
.edit-grid label .stat { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.edit-grid input { width: 100%; }
.edit-grid.wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.edit-grid label.adj input { border-color: var(--c-final); background: #fff8ec; }

.capacity-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.capacity-summary { display:grid; gap:6px; padding:12px; border:1px solid var(--line); border-radius:8px; color:inherit; text-decoration:none; }
.capacity-summary:hover { border-color:var(--orange); text-decoration:none; }
.capacity-summary strong { font-size:20px; }
.capacity-bar { height:7px; background:var(--line-2); border-radius:999px; overflow:hidden; }
.capacity-bar i { display:block; height:100%; background:var(--orange); border-radius:inherit; }
.warehouse-capacity-detail .note { margin:0; }
.warehouse-capacity-intro { display:none; }
.warehouse-capacity-detail:not(.weekly-capacity-detail) { display:none; }
.weekly-capacity-detail { margin-bottom:16px; }
.weekly-capacity-detail summary { display:flex; justify-content:space-between; align-items:center; gap:16px; cursor:pointer; list-style:none; padding:14px 16px; }
.weekly-capacity-detail summary::-webkit-details-marker { display:none; }
.weekly-capacity-detail summary::after { content:'+'; color:var(--orange); font-size:20px; }
.weekly-capacity-detail[open] summary::after { content:'−'; }
.warehouse-timeline-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.warehouse-timeline-card { border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.warehouse-timeline-title { display:flex; justify-content:space-between; align-items:center; padding:12px; background:var(--surface-2); }
.warehouse-timeline-card .tablewrap { overflow-x:auto; }
.warehouse-timeline-card table { min-width:520px; }
.capacity-inline { display:inline-block; vertical-align:middle; width:54px; height:7px; margin-right:6px; background:var(--line-2); border-radius:99px; overflow:hidden; }
.capacity-inline i { display:block; height:100%; background:var(--orange); }
.supply-order-grid { margin-top:16px; }
.supply-order-grid { display:none; }
.supply-weekly-plan { margin-top:16px; }
.supply-weekly-plan:not(.improved-weekly-plan) { display:none; }
.supply-legend { display:flex; flex-wrap:wrap; gap:14px; padding:10px 16px; color:var(--ink-2); font-size:11px; border-bottom:1px solid var(--line); }
.supply-legend span { display:inline-flex; align-items:center; gap:5px; }
.supply-legend i { display:inline-block; width:10px; height:10px; border-radius:2px; border:1px solid var(--line); }
.legend-editable { background:#fffaf1; }
.legend-locked { width:auto !important; border:0 !important; }
.legend-invalid { border:2px solid var(--crit) !important; }
.legend-valid { background:#eef7f0; border-color:var(--good) !important; }
.improved-weekly-plan table { min-width:1700px; }
.improved-weekly-plan .supply-context { position:sticky; left:0; z-index:2; background:var(--paper); }
.improved-weekly-plan .week-cell { min-width:82px; background:#fffaf1; }
.improved-weekly-plan .week-cell.locked-week { background:var(--surface-2); color:var(--ink-3); }
.improved-weekly-plan .weekly-qty { width:70px; text-align:right; }
.improved-weekly-plan .weekly-qty.invalid { border-color:var(--crit); background:#fff0ef; box-shadow:0 0 0 1px var(--crit); }
.improved-weekly-plan .weekly-qty.valid { border-color:var(--good); background:#f4fbf5; }
.improved-weekly-plan .cell-validation { display:block; color:var(--crit); font-size:9px; line-height:11px; white-space:nowrap; }
.lock-marker { white-space:nowrap; font-size:11px; }
.coverage-cell { font-size:11px; white-space:nowrap; }
.coverage-risk { color:var(--crit); font-weight:600; }
.coverage-ok { color:var(--good); }
.tiny { font-size:9px; }
.supply-order-grid .tablewrap { overflow:auto; }
.supply-order-grid table { min-width:1500px; }
.supply-order-grid .week-col { min-width:76px; background:var(--surface-2); }
.supply-order-grid .week-cell { background:#fffaf1; }
.supply-order-grid .week-cell input { width:68px; text-align:right; }
.supply-order-actions { display:flex; align-items:center; gap:12px; }
.planning-switcher { display:flex; gap:6px; margin:0 0 16px; border-bottom:1px solid var(--line); }
.planning-switcher a { display:inline-flex; align-items:center; gap:8px; padding:9px 12px; color:var(--ink-2); border-bottom:3px solid transparent; text-decoration:none; }
.planning-switcher a:hover { color:var(--ink); background:var(--surface-2); text-decoration:none; }
.planning-switcher a.active { color:var(--ink); border-color:var(--orange); font-weight:600; }
.planning-switcher a.future.active { border-color:#5d7f87; }
.planning-switcher .tag { font-size:10px; }
.simulation-banner { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; margin-bottom:16px; border:1px solid #c7d9dc; border-left:4px solid #5d7f87; background:#f2f8f9; color:var(--ink-2); }
.simulation-banner strong { color:var(--ink); }
.simulation-layout { align-items:start; }
.simulation-controls { display:grid; gap:14px; }
.simulation-controls label { display:grid; gap:6px; color:var(--ink-2); font-size:12px; }
.simulation-controls input:disabled, .simulation-controls select:disabled { opacity:.65; cursor:not-allowed; }
.simulation-controls button:disabled { opacity:.5; cursor:not-allowed; }
.simulation-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:14px; }
.simulation-kpis .kpi { min-width:0; }
.cadence-switcher { margin-top:-10px; border-bottom:0; }
.monthly-order-plan .tablewrap, .cargo-panel .tablewrap { overflow:auto; }
.monthly-order-plan table { min-width:1100px; }
.monthly-order-plan input { width:100px; text-align:right; }
.monthly-order-plan table { min-width:1450px; }
.monthly-order-plan .month-col, .monthly-order-plan .month-cell { min-width:112px; }
.monthly-order-plan .month-cell { background:#fffaf1; }
.cargo-panel table { min-width:900px; }
.cargo-panel { display:none !important; }
.collapsible-panel { overflow:hidden; }
.collapsible-panel > summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 18px; color:var(--ink); }
.collapsible-panel > summary::-webkit-details-marker { display:none; }
.collapsible-panel > summary::before { content:'+'; flex:0 0 22px; width:22px; height:22px; display:grid; place-items:center; border:1px solid var(--line-2); border-radius:50%; color:var(--orange); font-weight:700; order:2; }
.collapsible-panel[open] > summary::before { content:'–'; }
.collapsible-panel > summary > span:first-child { display:grid; gap:4px; flex:1; }
.collapsible-panel > summary:focus-visible { outline:2px solid var(--orange); outline-offset:-2px; }
.weekly-detail-panel { padding:0; }
.weekly-detail-panel > form { margin:0; border:0; box-shadow:none; border-radius:0; }
.weekly-detail-panel > summary { display:flex; }
.weekly-detail-panel .improved-weekly-plan > .hd { display:none; }
.planning-quality .bd { display:grid; gap:10px; }
.quality-chart-wrap { height:300px; position:relative; }
.health-check-page { border-top:3px solid var(--orange); }
.health-check-page { display:none; }
.health-action-view { border-top:3px solid var(--orange); }
.health-action-view .bd { display:grid; gap:18px; }
.health-action-view .health-chart-section { order:3; }
.health-action-view .health-queue { order:4; }
.health-action-view .health-explain { order:5; }
.health-kpi-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.health-kpi-grid > a { display:grid; gap:5px; min-height:92px; padding:14px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:inherit; text-decoration:none; }
.health-kpi-grid > a:hover { border-color:var(--orange); transform:translateY(-1px); }
.health-kpi-grid strong { font-size:25px; letter-spacing:-.03em; }
.health-kpi-action { border-left:4px solid var(--orange) !important; }
.health-queue, .health-chart-section { display:grid; gap:12px; }
.health-queue.is-compact .tablewrap { max-height:390px; overflow:auto; }
.health-queue .queue-toggle { justify-self:start; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:12px; }
.section-heading h3 { margin:0 0 3px; }
.health-table { min-width:1250px; }
.health-table tbody tr:hover { background:#fff8ed; }
.health-priority { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; color:#fff; font-weight:700; font-size:11px; background:var(--ink-3); }
.health-priority.p1 { background:var(--crit); }.health-priority.p2 { background:#c66a18; }.health-priority.p3 { background:var(--orange); }.health-priority.p4 { background:var(--warn); }
.health-method-note { display:flex; gap:10px; padding:12px 14px; border-left:3px solid var(--orange); background:var(--surface-2); color:var(--ink-2); font-size:12px; }
.health-method-note strong { color:var(--ink); white-space:nowrap; }
.health-more summary, .health-explain summary { cursor:pointer; padding:10px 0; color:var(--ink-2); font-size:12px; }
.health-explain { border-top:1px solid var(--line); padding-top:4px; color:var(--ink-2); font-size:12px; }
.health-explain p { max-width:850px; }
.health-action-view .health-chart-section > .quality-legend { display:none; }
.warehouse-kpis { display:none !important; }
.weekly-capacity-detail > summary { display:none; }
.weekly-capacity-detail > .bd { display:block; }
.product-inventory-kpis { margin-top:0; }
.health-chart-note { display:flex; gap:10px; margin:12px 0; padding:11px 14px; border-left:3px solid var(--orange); background:var(--surface-2); color:var(--ink-2); font-size:12px; }
.health-chart-note strong { color:var(--ink); white-space:nowrap; }
.demand-secondary-card .hd { align-items:center; }
.demand-secondary-card .hd h2 { margin:0; }
.demand-secondary-card.is-collapsed .bd { display:none; }
.demand-section-toggle { margin-left:auto; }
.health-visual-legend { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; padding:12px 0 2px; border-top:1px solid var(--line); }
.health-visual-legend .legend-item { display:grid; grid-template-columns:24px minmax(0,1fr); column-gap:8px; align-items:center; min-height:40px; color:var(--ink-2); font-size:11px; }
.health-visual-legend .legend-item b { color:var(--ink); font-size:11px; }
.health-visual-legend .legend-item small { grid-column:2; color:var(--ink-3); line-height:1.25; }
.legend-bubble { width:18px; height:18px; border-radius:50%; display:block; border:2px solid transparent; grid-row:span 2; }
.legend-bubble.below { background:#c65a3b; }.legend-bubble.aligned { background:#4f8058; }.legend-bubble.above { background:#a2762a; }
.legend-symbol { grid-row:span 2; width:22px; text-align:center; font-size:20px; line-height:22px; }
.legend-symbol.triangle { color:#b93a2c; }.legend-symbol.circle { color:#4f8058; font-size:22px; }.legend-symbol.outlined { color:#111; font-size:25px; }
.legend-border { grid-row:span 2; width:22px; height:14px; display:block; border:2px solid #111; border-radius:50%; box-shadow:0 0 0 2px rgba(185,58,44,.7); }
.health-check-page .hd { align-items:flex-start; }
.health-check-page .bd { gap:16px; }
.health-filters { display:flex; flex-wrap:wrap; align-items:end; gap:12px; padding:14px 16px; }
.health-filters label { display:grid; gap:5px; min-width:170px; color:var(--ink-2); font-size:12px; }
.quality-kpis { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.quality-kpis > div { display:grid; gap:5px; min-height:92px; padding:14px; border:1px solid var(--line); border-radius:8px; background:var(--paper); }
.quality-kpis strong { font-size:25px; letter-spacing:-.03em; }
.quality-kpi-risk { border-left:4px solid var(--crit) !important; }.quality-kpi-risk strong,.crit-text { color:var(--crit); }
.quality-kpi-balanced { border-left:4px solid var(--good) !important; }.quality-kpi-balanced strong,.good-text { color:var(--good); }
.quality-kpi-excess { border-left:4px solid var(--warn) !important; }.quality-kpi-excess strong,.warn-text { color:var(--warn); }
.health-explanation { display:flex; gap:10px; padding:12px 14px; border-left:3px solid var(--orange); background:var(--surface-2); color:var(--ink-2); font-size:12px; }
.health-explanation strong { color:var(--ink); white-space:nowrap; }
.health-footer { padding-top:2px; }
.health-chart { height:390px; }
.quality-legend { display:flex; flex-wrap:wrap; gap:14px; font-size:12px; color:var(--ink-2); }
.quality-legend span { display:inline-flex; align-items:center; gap:6px; }
.quality-dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.quality-dot.shortage { background:var(--crit); }.quality-dot.balanced { background:var(--good); }.quality-dot.excess { background:var(--warn); }
.quality-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 14px; max-height:170px; overflow:auto; }
.quality-list a { display:grid; grid-template-columns:12px minmax(0,1fr) auto; gap:6px; align-items:center; padding:6px 8px; border-radius:5px; color:inherit; font-size:11px; }
.quality-list a:hover { background:var(--surface-2); text-decoration:none; }.quality-list a span:last-child { grid-column:2 / -1; color:var(--ink-3); }
@media (max-width:700px) { .quality-list { grid-template-columns:1fr; } }
@media (max-width:900px) { .quality-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:900px) { .health-kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:600px) { .quality-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } .health-explanation { display:grid; } .health-filters label { min-width:140px; flex:1; } }
@media (max-width:600px) { .health-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .health-method-note { display:grid; } }
@media (max-width:900px) { .health-visual-legend { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .health-visual-legend { grid-template-columns:1fr; } }
.simulation-hints { display:grid; gap:10px; }
.simulation-hints p { margin:0; padding:12px 14px; border-left:3px solid var(--orange); background:var(--surface-2); }
.parameter-list { display:grid; gap:0; }
.parameter-list > div { display:grid; grid-template-columns:minmax(180px,.35fr) 1fr; gap:20px; padding:13px 0; border-bottom:1px solid var(--line); }
.parameter-list > div:last-child { border-bottom:0; }
.parameter-list span { color:var(--ink-2); }
.parameter-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.parameter-grid label { display:grid; gap:6px; color:var(--ink-2); font-size:12px; }
.parameter-grid input:disabled { opacity:.7; background:var(--surface-2); }
.parameter-grid small { color:var(--ink-3); }
@media (max-width:700px) { .parameter-list > div { grid-template-columns:1fr; gap:4px; } .parameter-grid { grid-template-columns:1fr 1fr; } }

/* login */
.login-wrap { min-height: 100%; display: grid; place-items: center; padding: 24px 16px;
  background: var(--brand-dark); border-top: 4px solid var(--brand); }
.login { width: 100%; max-width: 380px; background: var(--surface); border-radius: 12px; padding: 28px; box-shadow: 0 20px 60px rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 16px; }
.login h1 { font-size: 20px; }
.login label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--ink-2); }
.login input[type=email], .login input[type=password] { padding: 9px 11px; }
.login .btn { justify-content: center; padding: 10px; }

.hide-sm { }
@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-main, .g3 { grid-template-columns: 1fr; }
  .edit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cockpit-grid { grid-template-columns: 1fr; }
  .warehouse-timeline-grid { grid-template-columns:1fr; }
  .simulation-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .module-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 12px 16px; gap: 10px; }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .nav a { padding: 6px 8px; }
  .nav .group { display: none; }
  .sidebar .foot { margin: 0; flex-direction: row; align-items: center; }
  .main { padding: 16px 16px 40px; }
  .g2 { grid-template-columns: 1fr; }
  .edit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hide-sm { display: none; }
}
@media (max-width: 560px) {
  .kpis, .kpis-small { grid-template-columns: 1fr 1fr; }
  .capacity-summary-grid { grid-template-columns:1fr; }
  .main { padding-left: 12px; padding-right: 12px; }
  .planning-switcher { overflow-x:auto; }
  .simulation-banner { display:grid; }
  .simulation-kpis { grid-template-columns:1fr 1fr; }
  .home-hero { min-height:0; padding:22px 20px; display:block; }
  .home-hero-meta { margin-top:18px; flex-wrap:wrap; white-space:normal; }
  .home-hero h2 { font-size:26px; }
  .home-section-head { align-items:start; flex-direction:column; gap:5px; }
  .module-grid { grid-template-columns:1fr; }
  .module-tile { min-height:170px; }
  .home-footer-note { align-items:flex-start; flex-wrap:wrap; }
  .home-footer-note a { margin-left:28px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }