/* Analysverktygets mörka utseende (2026-11-05, ARCHITECTURE §9). Laddas bara av static/index.html, efter tokens.css och
   style.css, så att hubben och inloggningen behåller sitt ljusa utseende. Menyn och sidan har samma nästan svarta färg,
   korten är bara lite ljusare med en tunn ljus kant, och kontrasten kommer av vit text och vita valda saker.
   Kartornas färger läses med css() och måste vara hex-värden (core.js).

   .light-scope är det ljusa utseendet för det som ska förbli ljust: 3D-vyn (.view3d) och utskriften (#printReport).
   core.js withLight() och view3d.js läser kanvasfärgerna därifrån. */
:root {
  --bg-page: #121212; --bg-card: #1E1E1E; --bg-field: #2A2A2A; --bg-rail: #121212; --bg-base: #161616;
  --bg-surface: #1A1A1A; --bg-raised: #2E2E2E;
  --border-card: #2E2E2E; --line: #2E2E2E; --line-strong: #474747; --line-soft: #262626;
  --shadow-card: 0 0 0 0 transparent;  /* no light edges: a box stands out by its fill only (Sameh 2026-11-06) */
  --text: #FFFFFF; --text-2: #DEDEDE; --text-3: #C4C4C4; --text-on-selected: #141414; --on-color: #FFFFFF;
  --selected: #FFFFFF; --pressed: #D9D9D9;
  --nav-active: #FFFFFF;
  --signal: #5B8CFF; --signal-dim: #2F3D5C; --ok: #3DDC84; --warn: #F2B23E; --error: #FF6B6B; --error-text: #FF8A82;
  --ok-bg: rgba(61, 220, 132, .14); --error-bg: rgba(255, 107, 107, .14); --warn-bg: #4A3A17; --warn-ink: #F3CE85;
  --heat-ramp: linear-gradient(90deg, #22345E 0%, #2F6BFF 40%, #FFC999 72%, #F76707 100%);
  --radius-surface: 7px; --radius-control: 7px; --radius-button: 7px;
  --rail-w: 208px; --chart-prev: #6E6E6E;
  --map-grid: #242424; --map-shelf: #FF4D4D;
  --plan-blue-fill: #1E3047; --plan-blue-line: #7FB0EA;
  --plan-green-fill: #17352B; --plan-green-line: #5CC79B;
  --plan-orange-fill: #40301A; --plan-orange-line: #EDA65B;
  --plan-purple-fill: #2D2545; --plan-purple-line: #A98FE8;
  --plan-grey-fill: #333333; --plan-grey-line: #A8A8A8;
  --plan-wall: #8C8C8C; --plan-floor: #1A1A1A; --plan-floor-line: #4A4A4A;
  --plan-camera-fov: #40301A; --plan-marker: #6E6E6E; --plan-dim: #A8A8A8;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7l4 4 4-4'/%3E%3C/svg%3E");
  color-scheme: dark;
}
.light-scope {
  --bg-page: #FAFAFA; --bg-card: #FFFFFF; --bg-field: #F7F7F7; --bg-rail: #FFFFFF; --bg-base: #FFFFFF;
  --bg-surface: #FAFAFA; --bg-raised: #F0F0F0;
  --border-card: #E0E0E0; --line: #EBEBEB; --line-strong: #D7D7D7; --line-soft: #EFEFEF;
  --shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.035);
  --text: #141414; --text-2: #525252; --text-3: #6B6B6B; --text-on-selected: #FFFFFF;
  --selected: #141414; --pressed: #333333; --chart-prev: #BDBDBD;
  --signal: #2F6BFF; --signal-dim: #D6E2FF; --ok: #12A150; --warn: #D98E04; --error: #E03131; --error-text: #C92A2A;
  --ok-bg: rgba(18,161,80,0.10); --error-bg: rgba(224,49,49,0.08); --warn-bg: #FAEFD8; --warn-ink: #8A5A10;
  --heat-ramp: linear-gradient(90deg, #DCE6FF 0%, #2F6BFF 40%, #FFC999 72%, #F76707 100%);
  --map-grid: #F2F2F2; --map-shelf: #E60000;
  --plan-blue-fill: #E4EFFA; --plan-blue-line: #2F68B0;
  --plan-green-fill: #E1F3EC; --plan-green-line: #1F7A55;
  --plan-orange-fill: #FDF0E1; --plan-orange-line: #D9822B;
  --plan-purple-fill: #EEE8FA; --plan-purple-line: #6B4FB8;
  --plan-grey-fill: #F1EFEC; --plan-grey-line: #8A8580;
  --plan-wall: #4A4A4A; --plan-floor: #F4F1EA; --plan-floor-line: #BDB6A8;
  --plan-camera-fov: #FDF0E1; --plan-marker: #B5B5B5; --plan-dim: #8C8C8C;
  color: var(--text);
  color-scheme: light;
}

/* ─── MENYN ─── */
.rail { border-right: var(--border-w) solid var(--line); gap: 2px; }
.logo { gap: 11px; padding: 0 8px 18px; }
.logo img { width: 27px; filter: invert(1); }
.logo-name { font-size: 23px; line-height: 1; font-weight: 700; }
.rail-block .rail-label { padding: 0 4px 0; }
.rail-block { gap: 4px; }
.store-select select { height: 44px; padding-left: 28px; background: var(--bg-field); border-color: transparent; }
.store-select .status-dot { left: 12px; }
.rail-nav { gap: 2px; }
.rail-label { color: var(--text-3); padding: 20px 12px 6px; }
.rail-nav a { min-height: 44px; padding: 0 12px; font-size: 14.5px; color: var(--text-2); }
.rail-nav a svg.i { width: 19px; height: 19px; color: currentColor; }
.rail-nav a:hover { background: var(--bg-raised); color: var(--text); }
.rail-nav a[aria-current="page"] { background: #FFFFFF; color: #141414; font-weight: 700; }
.rail-nav a[aria-current="page"]::before { display: none; }
.rail-foot { margin-top: var(--s-2); border-top-color: var(--line); }

/* ─── SIDORNA ─── */
.page-head { padding-top: 20px; }
.segmented, .insight-filters button { border-color: transparent; }
.steps {
  display: inline-flex; flex-wrap: wrap; gap: 2px; width: fit-content; padding: 3px; border: 0;
  background: var(--bg-field); border-radius: var(--radius-button);
}
.steps button { height: 36px; padding: 0 16px; margin: 0; border: 0; border-radius: var(--radius-button); }
.steps button:hover { background: var(--bg-raised); }
.steps .num { display: none; }
.steps button.active, .steps button.active:hover { background: var(--selected); color: var(--text-on-selected); }
.danger-zone { border-top: 0; padding-top: 0; }
.legend { background: transparent; border: 0; padding: 0; }
.map-surface, #camCanvas { border-color: transparent; }

/* Live: tre frågor, och resten under Fler lager */
.map-panel .panel-head { position: relative; z-index: 10; }  /* Fler lager opens over the 3D view's labels */
.more-layers { margin-left: auto; position: relative; }
.more-layers > summary { height: 36px; padding: 0 14px; border-radius: var(--radius-button); background: var(--bg-field); font-size: 12.5px; font-weight: 500; }
.more-layers > summary:hover { background: var(--bg-raised); }
.more-layers[open] > summary { background: var(--selected); color: var(--text-on-selected); }
.more-layers .layers {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; width: 280px; margin: 0; padding: var(--s-3);
  flex-direction: row; align-items: flex-start; background: var(--bg-card); border-radius: var(--radius-surface);
  box-shadow: var(--shadow-card), 0 10px 30px rgba(0, 0, 0, .5);
}
.more-layers .layers label.inline { width: 100%; justify-content: space-between; }
.map-panel .layers label.check, .map-panel label.check.scan3d { border-radius: var(--radius-button); }
.map-panel .segmented { flex-wrap: nowrap; }

/* Hyllor: klicka på en kolumn för att sortera */
#shelfTable th[data-sort] { cursor: pointer; user-select: none; }
#shelfTable th[data-sort]:hover { color: var(--text); }
#shelfTable th[aria-sort="descending"] { color: var(--text); }
#shelfTable th[aria-sort="descending"]::after { content: " ↓"; }

/* 3D-vyn är ljus på den mörka sidan */
.view3d { border-radius: var(--radius-surface); overflow: hidden; }
.view3d .zoom-ctrl .icon-btn { background: var(--bg-card); color: var(--text); }

@media (max-width: 760px) {
  .rail { border-right: 0; flex-direction: row; flex-wrap: wrap; }
  .logo, .rail-block { width: 100%; }
  .logo { padding-bottom: 8px; }
  .rail-nav { width: 100%; flex-wrap: wrap; }
  .rail-nav .rail-label { display: none; }
  .rail-nav a { flex: 1 1 30%; justify-content: flex-start; }
  .rail-add { margin-top: 0; }
  .more-layers .layers { width: min(280px, 80vw); }
}

/* ─── ENKELHETEN (2026-11-05): kartan först, det viktigaste framme, resten ett klick bort ─── */
.panel { padding: 20px; }
.kpi-note, .page-sub:empty, .logo-sub { display: none; }
#mapSub { display: none; }
.soft-pill { margin-left: 6px; padding: 2px 8px; border-radius: var(--radius-button); background: var(--warn-bg); color: var(--warn-ink); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0; vertical-align: 3px; }

/* veckade delar: bara rubrik och pil */
details.panel.fold { padding: var(--s-2) 20px; }
details.panel.fold .fold-btn { padding: 0; border: 0; margin-left: auto; }
details.panel.fold > summary .meta { margin-left: var(--s-2); }
details.panel.fold > summary .meta + .fold-btn { margin-left: auto; }
details.panel.fold > summary:hover .fold-btn { background: transparent; }

/* Live och Översikt: kartan stor, en smal spalt bredvid */
.live-grid { grid-template-columns: minmax(0, 1fr) 220px; }
.live-side { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.more-actions { position: relative; }
.more-actions > summary { height: var(--control-h); padding: 0 16px; border-radius: var(--radius-button); background: var(--bg-field); color: var(--text-2); font-size: var(--fs-note); }
.more-actions > summary:hover { background: var(--bg-raised); }
.more-actions > div { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-2); background: var(--bg-card); border-radius: var(--radius-surface); box-shadow: var(--shadow-card), 0 10px 30px rgba(0, 0, 0, .5); }
.more-actions:not(:has(> div > :not([hidden]))) { display: none; }
.legend { width: 200px; }
.bar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.bar-list button { display: block; width: 100%; height: auto; padding: 8px 0; border: 0; background: transparent; color: var(--text); text-align: left; font-weight: 400; white-space: normal; }
.bar-list button:hover { background: transparent; color: var(--text); }
.bl-top { display: flex; justify-content: space-between; gap: var(--s-3); margin-bottom: 5px; font-size: var(--fs-note); }
.bl-track { display: block; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.bl-track i { display: block; height: 100%; border-radius: 4px; background: var(--heat); }
#shelfTable .swatch { display: none !important; }

/* insikter: bara rubriken, tre stycken, resten bakom Visa alla; ett klick öppnar förslaget */
.insight-list { max-height: none !important; overflow: visible; gap: 0; }
.insight { border: 0; border-top: var(--border-w) solid var(--line); background: transparent; }
.insight:first-child { border-top: 0; }
.insight-head { padding: var(--s-3) 0; }
.insight-head:hover { background: transparent; }
.insight-top { display: none; }
.insight:not(.open) .insight-head > :nth-child(n+3) { display: none; }
.insight-body { padding: 0 0 var(--s-3); }
.insight-list:not(.all) > li:nth-child(n+4) { display: none; }
.insight-more { display: none; align-self: flex-start; padding: 0; }
.insight-more:hover { background: transparent; color: var(--text); }
.insight-list:has(> li:nth-child(4)) + .insight-more { display: inline-flex; }

#ovCharts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ov-bottom { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--s-4); align-items: start; }

/* Butiken: kartan och en spalt. Under Kameror, eller med Kamerabild på, står bilden bredvid kartan och panelerna under */
#tab-map .fold-chev { flex: none; }
#camToggle.active { background: var(--selected); color: var(--text-on-selected); }
#tab-map.show-cam[data-step] #camPane { display: flex !important; }
@media (min-width: 1280px) {
  #tab-map .map-layout { flex-direction: row; align-items: flex-start; }
  #tab-map .work { display: flex; }
  #tab-map .map-side { width: 320px; display: flex; columns: auto; }
  #tab-map .map-side > * { margin-bottom: 0; }
  #tab-map #zoneList { display: flex; columns: auto; }
  #tab-map:is([data-step="2"], .show-cam) .map-layout { flex-direction: column; align-items: stretch; }
  #tab-map:is([data-step="2"], .show-cam) .work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #tab-map:is([data-step="2"], .show-cam) .map-side { width: auto; display: block; columns: 400px; }
  #tab-map:is([data-step="2"], .show-cam) .map-side > * { margin-bottom: var(--s-4); }
  #tab-map:is([data-step="2"], .show-cam) #zoneList { display: block; columns: 2; }
}
@media (max-width: 960px) { .live-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { #ovCharts { grid-template-columns: 1fr; } }

/* ─── NAVIGERINGEN: menyn, sedan flikar överst på varje sida (main.js setSub) ─── */
.subtabs, .page-head .steps { display: inline-flex; flex-wrap: wrap; gap: 2px; width: fit-content; padding: 3px; background: var(--bg-field); border: 0; border-radius: var(--radius-button); }
.subtabs button { height: 36px; padding: 0 16px; border: 0; background: transparent; color: var(--text-2); font-size: var(--fs-note); font-weight: 500; }
.subtabs button:hover { background: var(--bg-raised); color: var(--text); }
.subtabs button.active, .subtabs button.active:hover { background: var(--selected); color: var(--text-on-selected); font-weight: 600; }
.page-head { gap: var(--s-4) var(--s-6); }
.page-head h1 { white-space: nowrap; }
.page-head .steps button { font-size: var(--fs-note); }
.page-head .steps b { font-weight: 500; }
.page-head .steps button.active b { font-weight: 600; }
.page-body { padding-top: var(--s-3); }

/* en del i en flik är öppen och utan pil */
details.as-panel > summary { cursor: default; pointer-events: none; }
details.panel.fold.as-panel > summary .fold-btn { display: none; }
details.as-panel.notitle > summary { display: none; }
details.panel.fold.as-panel { padding: 20px; gap: var(--s-4); }
details.as-panel:has(> .insights:empty) { display: none; }
#tab-live.wall .streams-fold[hidden] { display: contents !important; }
#tab-live.wall .live-grid[hidden] { display: block !important; }
.cam-alert { background: var(--warn-bg); color: var(--warn-ink); }
.cam-alert:hover { background: var(--warn-bg); color: var(--warn-ink); filter: brightness(1.2); }

/* Live: nyckeltalen i spalten bredvid kartan, och kartan fyller fönstret */
.view3d { height: max(360px, calc(100vh - 230px)); }
.map-panel { gap: var(--s-3); padding: 14px; }
.legend { flex-direction: row; align-items: center; width: auto; gap: var(--s-3); }
.legend .eyebrow { display: none; }
.legend .ramp { width: 140px; flex: none; }
.legend-ends { gap: var(--s-3); }
.sr-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ov-period { min-width: 88px; }

/* ─── OMBYGGNADEN 2026-11-06: som skissen. Menyn har platserna, flikar bara där en plats har flera delar ─── */
/* menyn: Inställningar längst ner */
.rail { padding: 18px 12px 12px; }
.logo { padding: 2px 8px 14px; gap: 9px; }
.logo img { width: 22px; }
.logo-name { font-size: 20px; font-weight: 500; letter-spacing: 0; }
.rail-block { margin-bottom: 14px; }
.store-select select { height: 40px; background: var(--bg-card); }
.rail-nav { flex: 1; gap: 6px; }
.rail-nav a { min-height: 42px; padding: 0 11px; font-size: 15px; color: var(--text); }
.rail-nav a[aria-current="page"] { font-weight: 500; }
.rail-nav .rail-end { margin-top: auto; }
.rail-foot { border-top: 0; padding-top: 0; margin-top: 0; }
.rail-foot:not(:has(.rail-user:not([hidden]))):has(#saveState:empty) { display: none; }

/* rubriken: namnet till vänster, perioden och flikarna till höger */
.page-head { padding: 24px var(--page-pad) 0; }
.page-head h1 { font-size: 28px; line-height: 34px; font-weight: 500; }
.page-head > .subtabs, .head-right { margin-left: auto; }
.head-right { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.page-sub { font-size: 14px; color: var(--text-2); font-weight: 400; }
.page-body { padding-top: var(--s-6); }
.subtabs, .page-head .steps { background: var(--bg-card); }
.subtabs button { font-size: 14px; }
.map-row { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.more-actions > div { min-width: 170px; }
.more-actions > div > button { width: 100%; }
.period-ctl { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); }
.notice-slot:empty { display: none; }
#ovNotices p[hidden] { display: none; }

/* två lika stora rutor bredvid varandra */
.half-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); align-items: stretch; }
.half-grid[hidden] { display: none; }
.half-grid > .panel { min-width: 0; }
.map-card { justify-content: center; gap: var(--s-3); padding: var(--s-4); }
.map-card .segmented { align-self: flex-start; }
.map-hint { font-size: 14px; color: var(--text-2); margin: 0; }
.map-hint b { color: var(--text); font-weight: 500; }
.map-hint .delta { margin-left: 0; }

/* nyckeltalen: fyra lika breda */
.ov-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.ov-kpis .kpi, #trendKpis .kpi { gap: 2px; padding: var(--s-4) 18px; }
.ov-kpis .eyebrow, #trendKpis .eyebrow, .live-side .eyebrow { font-size: 14px; color: var(--text-2); font-weight: 400; letter-spacing: 0; text-transform: none; }
.ov-kpis .kpi-value { font-size: 36px; line-height: 42px; font-weight: 500; letter-spacing: -.02em; }
#trendKpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ov-kpis .delta, #trendKpis .delta, .paper-kpis .delta { align-self: flex-start; margin: 0; padding: 0; background: transparent; font-size: 14px; }
.ov-kpis .arr, #trendKpis .arr, .paper .arr { display: none; }

/* insikterna: en prick, rubriken, och den öppna med sitt förslag */
.ov-insights { gap: var(--s-2); }
.ov-insights h2 { font-size: 17px; font-weight: 500; }
#ovInsights .insight-head { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 11px; align-items: baseline; width: 100%; padding: var(--s-3) 0; white-space: normal; text-align: left; }
#ovInsights .insight-head b { font-weight: 400; font-size: 15px; }
#ovInsights .insight-head:hover b { text-decoration: underline; text-underline-offset: 3px; }
#ovInsights .insight-body { display: flex; flex-direction: column; gap: 6px; padding: 0 0 14px 21px; font-size: 14px; }
#ovInsights .insight-body p { font-size: 14px; color: var(--text-2); margin: 0; }
#ovInsights .insight-body b { color: var(--text); font-weight: 500; }
.tone { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--text-3); }
.tone.warn { background: #F2B23E; }
.tone.ok { background: #3DDC84; }

/* Live: kartan och tre siffror utan rutor */
.live-side { gap: 18px; }
.live-side .kpis { display: flex; flex-direction: column; gap: 18px; }
.live-side .kpi { background: transparent; padding: 0; gap: 0; }
.live-side .kpi-value { font-size: 36px; line-height: 42px; font-weight: 500; letter-spacing: -.02em; }
.live-side .kpi:nth-child(2) .kpi-value { font-size: 30px; line-height: 36px; }
.live-side .kpi-text .kpi-value { font-size: 17px; line-height: 24px; letter-spacing: 0; }
.more-layers .layers .segmented { width: 100%; }
.more-layers .layers > button, .more-layers .layers > a { width: 100%; justify-content: flex-start; }
.more-layers .layers > button[hidden], .more-layers .layers > a[hidden] { display: none; }

/* tabeller */
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
.row-btn { all: unset; cursor: pointer; }
.row-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
tr.pick.sel td, tr.pick.sel .row-btn { font-weight: 500; }
.nowrap { white-space: nowrap; }
.camp-note { display: block; color: var(--text-2); margin-top: 2px; }
.camp-del { width: 1%; }
.camp-del .icon-btn { width: var(--control-h-compact); height: var(--control-h-compact); }
.settings-body > .panel { max-width: 720px; }
.runs-part { display: flex; flex-direction: column; gap: var(--s-4); }
.runs-part[hidden] { display: none; }
.runs-part h2 .meta { font-size: 14px; font-weight: 400; color: var(--text-2); margin-left: var(--s-2); }
.runs-part .panel-head { flex-wrap: wrap; }
.runs-part .page-sub { margin-top: 2px; }
.runs-part .period-slot { margin-left: auto; }

/* Utveckling: staplarna sida vid sida */
.chart-head { display: flex; flex-direction: column; gap: 6px; }
.chart-head h2 { font-size: 17px; font-weight: 500; }
.chart-head .ov-legend, .paper .ov-legend { margin-left: 0; color: var(--text-2); font-size: 13px; }
.sw.cur { background: var(--text); }
.sw.prev { width: 10px; height: 10px; border-radius: 2px; background: var(--chart-prev); }
.ov-chart .col { fill: var(--text); }
.ov-chart .col-prev { fill: var(--chart-prev); }
.ov-chart .tick { fill: var(--text-2); }
.ov-chart .tick.strong { fill: var(--text); font-weight: 500; }
.ov-chart .axis { stroke: var(--line); }

/* Rapporter: listan och ett vitt papper på en mörk yta */
.reports { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.rep-list { display: flex; flex-direction: column; gap: var(--s-1); }
.rep-group { font-size: 13px; color: var(--text-2); padding: var(--s-3) var(--s-3) var(--s-1); }
.rep-group:first-child { padding-top: 0; }
.rep-item { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; width: 100%; height: auto; padding: 11px var(--s-3); border: 0; border-radius: var(--radius-button); background: transparent; color: var(--text); font-weight: 400; text-align: left; white-space: normal; }
.rep-item:hover { background: var(--bg-card); color: var(--text); }
.rep-item small { display: block; font-size: 13px; color: var(--text-2); }
.rep-item .amt { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rep-item[aria-pressed="true"], .rep-item[aria-pressed="true"]:hover { background: var(--selected); color: var(--text-on-selected); font-weight: 500; }
.rep-item[aria-pressed="true"] small { color: #525252; font-weight: 400; }
.rep-view { background: var(--bg-card); border-radius: var(--radius-surface); padding: var(--s-4); min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.rep-bar { display: flex; justify-content: flex-end; }
.paper { background: #FFFFFF; color: #141414; border-radius: 3px; padding: 36px 40px; width: 100%; max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--s-6); }
.paper-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); font-size: 13px; color: #525252; }
.paper-logo { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 500; color: #141414; }
.paper-logo img { height: 20px; width: auto; }
.paper h2 { font-size: 30px; line-height: 1.15; font-weight: 500; letter-spacing: -.01em; margin: 0; padding: 0; border: 0; color: #141414; }
.paper .soft-pill { font-size: 12px; font-weight: 500; letter-spacing: 0; vertical-align: 7px; }
.paper .dates { font-size: 14px; color: #525252; margin: 3px 0 0; }
.paper .lead { font-size: 16px; margin: 0; }
.paper-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid #E0E0E0; }
.paper-kpis > div { display: flex; flex-direction: column; padding: 13px var(--s-3); min-width: 0; border-left: 1px solid #E0E0E0; }
.paper-kpis > div:first-child { border-left: 0; padding-left: 0; }
.paper-kpis > div > span:first-child { font-size: 12px; color: #525252; }
.paper-kpis b { font-size: 20px; font-weight: 500; margin: 2px 0; font-variant-numeric: tabular-nums; }
.paper-kpis .delta { font-size: 12px; }
.paper-kpis .delta.good { color: #12A150; }
.paper-kpis .delta.bad { color: #C92A2A; }
.paper-kpis .delta.flat { color: #525252; }
.paper h3 { font-size: 14px; font-weight: 500; margin: 0 0 9px; padding: 0; color: #141414; text-transform: none; letter-spacing: 0; }
.paper .ov-legend { margin-bottom: 6px; color: #525252; }
.paper-ins { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.paper-ins li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 11px; align-items: baseline; padding: 10px 0; border-top: 1px solid #E0E0E0; font-size: 14px; }
.paper-ins li:first-child { border-top: 0; padding-top: 0; }
.paper-ins b { display: block; font-weight: 500; }
.paper-ins .a { color: #525252; }
.paper-foot { font-size: 12px; color: #525252; }
@media print {
  .print-report .paper { max-width: none; padding: 0; border-radius: 0; gap: 16pt; }
  .print-report .paper h2 { font-size: 24pt; border: 0; padding: 0; margin: 0; }
  .print-report .paper h3 { font-size: 11pt; margin: 0 0 6pt; text-transform: none; letter-spacing: 0; }
  .print-report .paper p { margin: 0; }
}

@media (max-width: 960px) {
  .half-grid, .reports { grid-template-columns: minmax(0, 1fr); }
  .ov-kpis, #trendKpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-side .kpis { flex-direction: row; flex-wrap: wrap; gap: var(--s-6); }
}
@media (max-width: 760px) {
  .rail-nav .rail-end { margin-top: 0; }
  .page-head > .subtabs, .head-right { margin-left: 0; }
  .ov-kpis .kpi-value { font-size: 28px; line-height: 34px; }
  .paper { padding: 22px 18px; }
  .paper h2 { font-size: 24px; }
  .paper-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paper-kpis > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .rep-view { padding: var(--s-2); }
}

/* vald rad i menyn: ikonen som texten; Live har sin röda signal */
.rail-nav a[aria-current="page"] svg.i { color: currentColor; }
.rail-nav a[data-tab="live"] svg.i { color: #F2552C; }
.ov-kpis .delta.good, #trendKpis .delta.good { color: var(--ok); }
.ov-kpis .delta.bad, #trendKpis .delta.bad { color: var(--error-text); }
.ov-kpis .delta.flat, #trendKpis .delta.flat { color: var(--text-2); }
.rep-item small { margin-top: 2px; line-height: 18px; }
#tab-live .page-actions { margin-left: 0; }
.map-hint .arr { display: none; }
#tab-live .page-actions:not(:has(> :not([hidden]))) { display: none; }

/* utskriften är ljus ända ut i marginalerna, och nyckeltalen står på en rad oavsett pappersbredd */
@media print {
  :root { color-scheme: light; }
  .print-report .paper-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .print-report .paper-kpis > div:nth-child(odd):not(:first-child) { border-left: 1px solid #E0E0E0; padding-left: var(--s-3); }
}

/* ─── NÄR DET INTE FINNS NÅGOT ATT VISA: sidan säger det tydligt, i stället för nollor och streck (2026-11-06) ─── */
.empty-state { background: var(--bg-card); border-radius: var(--radius-surface); padding: 28px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.empty-state[hidden] { display: none; }
.empty-state b { font-size: 17px; font-weight: 500; }
.empty-state p { margin: 0; font-size: 14px; color: var(--text-2); max-width: 62ch; }
.empty-state button { margin-top: var(--s-2); }
.demo-note { background: var(--warn-bg); color: var(--warn-ink); border-radius: var(--radius-surface); padding: var(--s-3) var(--s-4); font-size: 14px; }
.demo-note[hidden] { display: none; }
.demo-note b { font-weight: 500; }
#ovNotices { display: flex; flex-direction: column; gap: var(--s-3); }
#ovNotices:not(:has(> :not([hidden], #ovLoading))) { gap: 0; }
#ovLoading { display: none; margin: 0; }
body:not([data-ov]) #ovLoading { display: block; }
body:not([data-ov="ok"]) .ov-needs { display: none !important; }
.runs-part #ovEmpty { display: none; }
body[data-ov="error"] #ovRuns, body[data-ov="error"] #ovRunsMeta { display: none; }
.rep-view[hidden] { display: none; }
.reports:has(.rep-view[hidden]) { grid-template-columns: minmax(0, 1fr); }
#liveEmpty { display: none; }
#tab-live[data-run="no"] #liveEmpty { display: flex; }
#tab-live[data-run="no"] .page-body > :not(#liveEmpty) { display: none !important; }
#streams:empty::before { content: "Kamerabilderna visas medan en analys körs."; font-size: 14px; color: var(--text-2); }
#report:not([hidden]) + .report-empty { display: none; }
.report-empty { gap: var(--s-2); }
.public .not-public { display: none; }