/* Wiman Insight. Colours, type size and side menu follow the ERP's theme; every colour is a token so the dark theme holds. */
:root {
  --brand: #ea5b1f; --brand-dark: #c2410c; --brand-tint: #fff4ed;
  --side: #212529; --side-line: rgba(255,255,255,.08); --side-fg: #e9ecef; --side-muted: #adb5bd;
  --bg: #f3f4f6; --card: #ffffff; --head: #f8f9fa; --text: #212529; --muted: #6c757d; --border: #dee2e6; --row: #eef0f2; --hover: #f8f9fa;
  --ok: #1b7f3b; --ok-bg: #e3f4e8; --warn: #805a00; --warn-bg: #fff3cd; --bad: #b02a37; --bad-bg: #fbe3e5; --info: #334e68; --info-bg: #e6edf3;
  --input: #ffffff; --grid: #e9ecef; --axis: #6c757d; --on-brand: #ffffff;
  --s-profit: #eb6834; --s-components: #2a78d6; --s-ems: #1baf7a; --s-accessories: #eda100; --s-bought: #4a3aa7; --s-salaries: #e87ba4; --s-other: #008300;
  --s-sales: #2a78d6; --s-margin: #eb6834; --s-net: #2a78d6;
  color-scheme: light;
}
[data-bs-theme="dark"] {
  --brand: #ef6c2d; --brand-dark: #d95a1f; --brand-tint: #3a2417;
  --side: #16181b;
  --bg: #16181b; --card: #212529; --head: #2b3035; --text: #dee2e6; --muted: #a2abb4; --border: #3a4047; --row: #2e3338; --hover: #2b3035;
  --ok: #75d695; --ok-bg: #17352a; --warn: #f2c14e; --warn-bg: #3a2f12; --bad: #f28b95; --bad-bg: #3d1d22; --info: #a9c1d9; --info-bg: #22303d;
  --input: #2b3035; --grid: #343a40; --axis: #a2abb4;
  --s-profit: #d95926; --s-components: #3987e5; --s-ems: #199e70; --s-accessories: #c98500; --s-bought: #9085e9; --s-salaries: #d55181; --s-other: #008300;
  --s-sales: #3987e5; --s-margin: #d95926; --s-net: #3987e5;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { font-size: 14px; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); line-height: 1.45;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; }
.ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.muted { color: var(--muted); }
.small { font-size: .78rem; }
.nowrap { white-space: nowrap; }
.mono { font-variant-numeric: tabular-nums; }

/* side menu: dark in both themes, brand on the active item, as the ERP */
.side { position: fixed; inset: 0 auto 0 0; width: 224px; background: var(--side); color: var(--side-fg); display: flex; flex-direction: column; z-index: 40;
  transform: translateX(-100%); transition: transform .18s ease; overflow-y: auto; }
.side-open .side { transform: none; }
.side-brand { display: flex; align-items: center; gap: 8px; padding: 14px 18px; font-weight: 600; font-size: 1.05rem; color: var(--brand); border-bottom: 1px solid var(--side-line); }
.side-brand .ic { width: 20px; height: 20px; fill: var(--brand); stroke: none; }
.side-section { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--side-muted); padding: 14px 18px 4px; font-weight: 600; }
.side a.nav { display: flex; align-items: center; gap: 10px; padding: 8px 18px; color: var(--side-fg); text-decoration: none; font-size: .92rem; }
.side a.nav:hover { background: rgba(255,255,255,.06); color: #fff; }
.side a.nav.on { background: #ea5b1f; color: #fff; }
.side a.nav:focus-visible, .btn:focus-visible, .tabs a:focus-visible, select:focus-visible, input:focus-visible, .ibtn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.side-src { padding: 3px 18px; font-size: .76rem; color: var(--side-muted); display: flex; justify-content: space-between; gap: 8px; }
.side-src.bad { color: #f6a5ad; }
.side-foot { margin-top: auto; padding: 12px 18px; border-top: 1px solid var(--side-line); font-size: .78rem; color: var(--side-muted); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.side-foot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-foot button { background: none; border: 0; padding: 0; color: var(--side-muted); cursor: pointer; display: flex; }
.side-foot button:hover { color: #fff; }
.side-refresh { padding: 8px 18px 2px; }
.side-refresh .btn { width: 100%; justify-content: center; }
.scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 30; }
.side-open .scrim { display: block; }

.main { min-height: 100vh; display: flex; flex-direction: column; }
@media (min-width: 992px) { .main { margin-left: 224px; } .side { transform: none; } .ibtn.menu-btn { display: none; } .scrim { display: none !important; } }

/* top bar + the brand-underlined company tabs, flush with the page */
.top { position: sticky; top: 0; z-index: 20; background: var(--card); }
.top-row { display: flex; align-items: center; gap: 12px; padding: 8px 16px; min-height: 48px; flex-wrap: wrap; }
.top-row h1 { font-size: 1.1rem; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ibtn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text); cursor: pointer; text-decoration: none; }
.ibtn:hover { background: var(--hover); }
.ibtn.off { opacity: .35; pointer-events: none; }
.menu-btn { border: 0; }
select.pick { height: 30px; border: 1px solid var(--border); border-radius: 6px; background: var(--input); color: var(--text); padding: 0 8px; font: inherit; min-width: 170px; }
.tabs { display: flex; gap: 4px; padding: 0 16px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tabs a { padding: 7px 14px 8px; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; font-weight: 500; }
.tabs a:hover { color: var(--text); }
.tabs a.on { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.page { padding: 16px; display: flex; flex-direction: column; gap: 14px; flex: 1; }

/* tiles */
.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1320px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; min-width: 0; }
.tile .k { font-size: .8rem; color: var(--muted); }
.tile .v { font-size: 1.45rem; font-weight: 650; font-variant-numeric: tabular-nums; margin-top: 3px; white-space: nowrap; }
.tile .s { font-size: .76rem; color: var(--muted); margin-top: 3px; }
.tile.hero { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.tile.hero .k, .tile.hero .s { color: rgba(255,255,255,.9); }
.neg { color: var(--bad); }
.tile.hero .neg { color: inherit; }

/* cards and tables */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; min-width: 0; }
.card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 14px 8px; flex-wrap: wrap; }
.card-h h2 { font-size: 1rem; }
.card-h .sub, .sub { font-size: .78rem; color: var(--muted); }
.card-b { padding: 0 14px 14px; }
.cols { display: grid; gap: 14px; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
.cols.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stack-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 1100px) { .cols, .cols.even { grid-template-columns: minmax(0, 1fr); } }
.tw { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: .86rem; }
.t th { text-align: left; font-weight: 600; font-size: .76rem; color: var(--muted); background: var(--head); padding: 7px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.t td { padding: 7px 10px; border-bottom: 1px solid var(--row); vertical-align: middle; }
.t tbody tr:last-child td { border-bottom: 0; }
.t .n, .t th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.t tr.total td { font-weight: 650; background: var(--head); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.t tr.key td { font-weight: 700; background: var(--brand-tint); }
.t tr.sub-row td { color: var(--muted); }
.t tfoot td { font-weight: 650; background: var(--head); border-top: 1px solid var(--border); }
.t td a { text-decoration: none; }
.t td a:hover { color: var(--brand); text-decoration: underline; }
.t .sno { color: var(--muted); font-size: .76rem; display: block; }
.t .ind { padding-left: 24px; }
.t.dense th { white-space: normal; vertical-align: bottom; line-height: 1.2; padding: 6px; }
.t.dense td { padding: 5px 6px; }
.t.dense td:first-child, .t.dense th:first-child { padding-left: 12px; min-width: 260px; }
.t.dense input.in { width: 70px; }
.t.dense input.in.wide { width: 104px; }

/* state chips */
.chip { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.no_ems, .chip.group_price, .chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.no_cost, .chip.bad { background: var(--bad-bg); color: var(--bad); }
.chip.service, .chip.info { background: var(--info-bg); color: var(--info); }

/* notes above the figures */
.notes { display: flex; flex-direction: column; gap: 6px; }
.note { display: flex; gap: 10px; align-items: baseline; padding: 8px 12px; border-radius: 6px; font-size: .86rem; }
.note.warn { background: var(--warn-bg); color: var(--warn); }
.note.bad { background: var(--bad-bg); color: var(--bad); }
.note.info { background: var(--info-bg); color: var(--info); }
.note.ok { background: var(--ok-bg); color: var(--ok); }
.note a { font-weight: 600; white-space: nowrap; }
.note .go { margin-left: auto; }

/* buttons and boxes */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--card); color: var(--text); font: inherit; font-size: .86rem; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--hover); }
.btn.brand { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 600; }
.btn.brand:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.side .btn { background: transparent; border-color: var(--side-line); color: var(--side-fg); }
.side .btn:hover { background: rgba(255,255,255,.06); }
input.in { width: 88px; height: 28px; padding: 0 6px; text-align: right; border: 1px solid var(--border); border-radius: 4px; background: var(--input); color: var(--text); font: inherit; font-size: .86rem; font-variant-numeric: tabular-nums; }
input.in.wide { width: 124px; text-align: left; }
input.in.changed { border-color: var(--brand); }
input.in::placeholder { color: var(--muted); opacity: .75; }
.savebar { position: sticky; top: 90px; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; flex-wrap: wrap; }
.savebar .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; cursor: pointer; }
.only-open tr.done, .only-open .card.all-done { display: none; }
.family-ems { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--muted); }
details.bom { border-top: 1px solid var(--row); }
details.bom summary { padding: 9px 14px; cursor: pointer; font-weight: 600; font-size: .88rem; }
details.bom .tw { border-top: 1px solid var(--row); }
tr.gap td { background: var(--bad-bg); }

/* graphs: thin marks, hairline grid, the data is the only loud thing */
.chart { position: relative; min-height: 240px; }
.chart[data-kind="stack"] { min-height: 0; }
.chart[data-kind="hbars"] { min-height: 0; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart text { fill: var(--axis); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart text.end { fill: var(--text); font-weight: 600; }
.grid-line { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.base-line { stroke: var(--axis); stroke-width: 1; shape-rendering: crispEdges; opacity: .55; }
.band { fill: transparent; }
.band.on { fill: var(--hover); }
.cross { stroke: var(--axis); stroke-width: 1; opacity: .5; }
.f-s-sales { fill: var(--s-sales); } .f-s-margin { fill: var(--s-margin); } .f-s-net { fill: var(--s-net); }
.l-s-sales { stroke: var(--s-sales); } .l-s-margin { stroke: var(--s-margin); } .l-s-net { stroke: var(--s-net); }
.line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dot { stroke: var(--card); stroke-width: 2; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .78rem; color: var(--muted); margin-bottom: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.s-profit { background: var(--s-profit); } .s-components { background: var(--s-components); } .s-ems { background: var(--s-ems); }
.s-accessories { background: var(--s-accessories); } .s-bought { background: var(--s-bought); } .s-salaries { background: var(--s-salaries); }
.s-other { background: var(--s-other); } .s-sales { background: var(--s-sales); } .s-margin { background: var(--s-margin); } .s-net { background: var(--s-net); }
.tip { position: absolute; z-index: 5; pointer-events: none; background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; font-size: .78rem; box-shadow: 0 4px 14px rgba(0,0,0,.16); white-space: nowrap; display: none; }
.tip b { display: block; margin-bottom: 3px; }
.tip div { display: flex; align-items: center; gap: 6px; }
.tip i { font-style: normal; margin-left: auto; padding-left: 14px; font-variant-numeric: tabular-nums; font-weight: 600; }
.stackbar { position: relative; display: flex; gap: 2px; height: 26px; margin-bottom: 10px; }
.stackbar div.part { min-width: 2px; }
.stackbar div.part:first-child { border-radius: 4px 0 0 4px; }
.stackbar div.part:last-child { border-radius: 0 4px 4px 0; }
.empty { padding: 28px 12px; text-align: center; color: var(--muted); font-size: .86rem; }

/* sign in */
.gate { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.gate-card { width: 100%; max-width: 360px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 12px; }
.gate-brand { display: flex; align-items: center; gap: 8px; color: var(--brand); font-weight: 650; font-size: 1.2rem; }
.gate-brand .ic { width: 22px; height: 22px; fill: var(--brand); stroke: none; }
.gate-card label { display: flex; flex-direction: column; gap: 4px; font-size: .84rem; color: var(--muted); }
.gate-card input { height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--input); color: var(--text); font: inherit; }
.gate-card .btn { justify-content: center; height: 38px; }