/* Noida raam: järgib visandit ui/01-raam.html (Noida-UI.md ptk 1.6). Bootstrap jääb vormide ja tabelite aluseks. */
/* Värvid: hele ja tume teema (Noida-funktsionaalsus.md ptk 38, Noida-UI.md ptk 7). Tume teema on Bootstrapi
   data-bs-theme="dark" koos allpool oleva plokiga. Mõlemas plokis on samad muutujad (test T49.10) ja reeglid
   kasutavad muutujaid, mitte värve: nii saab ka pesastatud hele ala (trükivaade tumeda teema all) heledad väärtused.
   Heledad väärtused on need, mis olid enne teemat; Bootstrapi sillad (--danger, --sec, --row-*) on Bootstrapi omad. */
:root, [data-bs-theme=light] {
    --bg: #f4f5f7; --card: #fff; --head: #fafbfc; --line: #e2e5ea; --line-hover: rgba(0,0,0,.25); --txt: #1b1f24; --mut: #6b7280;
    --acc: #2e7d32; --acc-txt: #2e7d32; --acc-hover: #1b5e20; --focus: #9ccc9f; --focus-ring: rgba(46,125,50,.2);
    --on: #e8f3e9; --on-line: #b9dcbc; --hover: #f6faf6; --mark: #fff8e1; --tag: #eef2f6; --av: #c8d1dc; --av-txt: #334;
    --bad: #c62828; --bad-bg: #fdecea; --warn: #b26a00; --warn-bg: #fff3e0; --info: #1565c0; --info-bg: #e3f2fd; --idle: #546e7a; --idle-bg: #eceff1;
    --danger: #dc3545; --success: #198754; --sec: #6c757d; --sec-line: #6c757d; --sec-hover: #6c757d;
    --row-ok: #d1e7dd; --row-warn: #fff3cd; --row-bad: #f8d7da; --row-txt: #000; --row-line: rgba(0,0,0,.2);
    --chart-a: #2e7d32; --chart-b: #1565c0; --swatch-line: rgba(0,0,0,.2); --shade: rgba(0,0,0,.35); --tint: rgba(0,0,0,.04); --qr-pad: 0;
    --side: #1f2a37; --side2: #2b3745; --side-sub: #18212c; --side-line: #35424f; --side-edge: transparent;
    --bs-body-bg: var(--bg); --bs-body-color: var(--txt); --bs-primary: var(--acc); --bs-primary-rgb: 46, 125, 50;
    --bs-link-color: var(--acc-txt); --bs-link-hover-color: var(--acc-hover); --bs-border-color: var(--line);
}
[data-bs-theme=dark] {
    --bg: #0f141a; --card: #171d25; --head: #1c232d; --line: #2a3340; --line-hover: rgba(255,255,255,.3); --txt: #e2e7ed; --mut: #97a3b0;
    --acc: #2e7d32; --acc-txt: #6fbf73; --acc-hover: #8fd293; --focus: #4f9a54; --focus-ring: rgba(111,191,115,.3);
    --on: #1b3320; --on-line: #2f5f35; --hover: #1b2620; --mark: #3a3214; --tag: #253040; --av: #2d3947; --av-txt: #d7dde5;
    --bad: #f07b78; --bad-bg: #3e1a1a; --warn: #ffb74d; --warn-bg: #3d2a0d; --info: #64b5f6; --info-bg: #102a43; --idle: #b0bec5; --idle-bg: #263238;
    --danger: #ea868f; --success: #75b798; --sec: #adb5bd; --sec-line: #56606c; --sec-hover: #4a5562;
    --row-ok: #1b3320; --row-warn: #3a3214; --row-bad: #3e1a1a; --row-txt: #e2e7ed; --row-line: rgba(255,255,255,.12);
    --chart-a: #4caf50; --chart-b: #42a5f5; --swatch-line: rgba(255,255,255,.3); --shade: rgba(0,0,0,.6); --tint: rgba(255,255,255,.04); --qr-pad: 6px;
    --side: #0b1015; --side2: #19222c; --side-sub: #070a0e; --side-line: #1d2631; --side-edge: #1d2631;
    --bs-body-bg: var(--bg); --bs-body-color: var(--txt);
    --bs-link-color: var(--acc-txt); --bs-link-hover-color: var(--acc-hover); --bs-border-color: var(--line);
    --bs-secondary-bg: #243040; --bs-secondary-bg-rgb: 36, 48, 64; --bs-tertiary-bg: #1c232d; --bs-tertiary-bg-rgb: 28, 35, 45;
}
html, body { height: 100%; }
body { margin: 0; font: 14px/1.4 -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--txt); background: var(--bg); }
h1:focus { outline: none; }
.btn-primary, .btn-success { --bs-btn-bg: var(--acc); --bs-btn-border-color: var(--acc); --bs-btn-hover-bg: #256b29; --bs-btn-hover-border-color: #256b29; --bs-btn-active-bg: #1b5e20; --bs-btn-active-border-color: #1b5e20; }
.btn-outline-primary { --bs-btn-color: var(--acc-txt); --bs-btn-border-color: var(--acc-txt); --bs-btn-hover-bg: var(--acc); --bs-btn-hover-border-color: var(--acc); --bs-btn-active-bg: var(--acc); --bs-btn-disabled-color: var(--acc-txt); --bs-btn-disabled-border-color: var(--acc-txt); }
.form-control:focus, .form-select:focus { border-color: var(--focus); box-shadow: 0 0 0 .2rem var(--focus-ring); }
/* Bootstrap 5.3 ei kohanda neid tumedale teemale; heledas on väärtused Bootstrapi omad. */
.btn-outline-secondary { --bs-btn-color: var(--sec); --bs-btn-border-color: var(--sec-line); --bs-btn-hover-bg: var(--sec-hover); --bs-btn-hover-border-color: var(--sec-hover); --bs-btn-active-bg: var(--sec-hover); --bs-btn-active-border-color: var(--sec-hover); --bs-btn-disabled-color: var(--sec); --bs-btn-disabled-border-color: var(--sec-line); }
.btn-outline-danger { --bs-btn-color: var(--danger); --bs-btn-border-color: var(--danger); --bs-btn-disabled-color: var(--danger); --bs-btn-disabled-border-color: var(--danger); }
.btn-outline-dark { --bs-btn-color: var(--bs-emphasis-color); --bs-btn-border-color: var(--bs-emphasis-color); --bs-btn-hover-color: var(--bs-body-bg); --bs-btn-hover-bg: var(--bs-emphasis-color); --bs-btn-hover-border-color: var(--bs-emphasis-color); --bs-btn-active-color: var(--bs-body-bg); --bs-btn-active-bg: var(--bs-emphasis-color); --bs-btn-active-border-color: var(--bs-emphasis-color); }
.text-danger { color: var(--danger) !important; }
.text-success { color: var(--success) !important; }
.table-success, .table-warning, .table-danger { --bs-table-color: var(--row-txt); --bs-table-border-color: var(--row-line); }
.table-success { --bs-table-bg: var(--row-ok); }
.table-warning { --bs-table-bg: var(--row-warn); }
.table-danger { --bs-table-bg: var(--row-bad); }

/* --- Raam --- */
.app { display: grid; grid-template-columns: 240px 1fr; grid-template-rows: 52px 1fr; height: 100vh; }
.app.collapsed { grid-template-columns: 56px 1fr; }
.side { grid-row: 1 / 3; background: var(--side); color: #d7dde5; display: flex; flex-direction: column; border-right: 1px solid var(--side-edge); }
.brand { height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 14px; font-weight: 700; letter-spacing: .5px; color: #fff; border-bottom: 1px solid var(--side-line); }
.brand .logo { width: 28px; height: 28px; border-radius: 6px; background: var(--acc); display: grid; place-items: center; font-size: 13px; flex: none; }
.brand .tgl { margin-left: auto; opacity: .7; font-size: 16px; cursor: pointer; background: none; border: 0; color: inherit; }
.side nav { padding: 8px 0; overflow: auto; flex: 1; }
.grp { display: flex; align-items: center; gap: 10px; padding: 9px 14px; color: #d7dde5; cursor: pointer; white-space: nowrap; text-decoration: none; width: 100%; background: none; border: 0; text-align: left; font: inherit; }
.grp:hover { color: #fff; }
.grp .ic { width: 22px; text-align: center; font-size: 15px; opacity: .9; }
.grp .chev { margin-left: auto; opacity: .5; font-size: 11px; }
.grp.act { background: var(--side2); color: #fff; border-left: 3px solid var(--acc); padding-left: 11px; }
.sub { background: var(--side-sub); }
.sub a { display: block; padding: 7px 14px 7px 46px; color: #b6c0cc; text-decoration: none; white-space: nowrap; }
.sub a:hover { color: #fff; }
.sub a.act { color: #fff; font-weight: 600; }
.sub a.soon { color: #6b7686; cursor: default; }
.sub a.soon small { font-size: 10px; margin-left: 6px; opacity: .8; }
.sep { margin: 6px 14px; border-top: 1px solid var(--side-line); }
.role { font-size: 10px; background: #3b4b5c; color: #cfd8e3; border-radius: 3px; padding: 1px 5px; margin-left: 6px; }
/* Kokkupandud külgriba (ptk 40): ikooniriba. ☰ on logo kohal; grupi nimi jääb vihjeks ja ekraanilugejale; alampunktid
   avanevad ikooniriba kõrvale hüpikmenüüna, eraldaja järel ülespoole, et mahuks ka madalale ekraanile. */
.collapsed .grp .chev, .collapsed .grp .role { display: none; }
.collapsed .grp span.t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.collapsed .grp { justify-content: center; padding: 11px 0; }
.collapsed .grp.act { padding-left: 0; border-left: none; box-shadow: inset 3px 0 0 var(--acc); }
.collapsed .brand { justify-content: center; padding: 0; }
.collapsed .brand .tgl { margin-left: 0; opacity: .85; font-size: 18px; }
.collapsed .side .brand, .collapsed .side nav { position: relative; z-index: 1015; }
.collapsed .side nav { overflow: visible; }
.collapsed .dd { position: relative; }
.collapsed .dd .sub { position: absolute; top: 0; left: 100%; min-width: 220px; padding: 0 0 6px; background: var(--side2); border: 1px solid var(--side-line); border-left: 0; border-radius: 0 8px 8px 0; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.collapsed .sep ~ .dd .sub { top: auto; bottom: 0; }
.collapsed .sub .ttl { display: flex; align-items: center; padding: 11px 16px; margin-bottom: 6px; color: #fff; font-weight: 600; white-space: nowrap; border-bottom: 1px solid var(--side-line); }
.collapsed .sub a { padding: 7px 16px; }
.top { grid-column: 2; background: var(--card); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 14px; padding: 0 20px; }
.search { flex: 0 1 460px; min-width: 0; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; color: var(--mut); background: var(--head); }
.search input { border: 0; background: transparent; flex: 1; min-width: 0; outline: none; font: inherit; color: var(--txt); }
.search kbd { margin-left: auto; font: 11px monospace; border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; color: var(--mut); background: none; }
/* Vahetäide viib järgnevad nupud paremasse serva; kaardi päises ka veeruvaliku nupu (ptk 46.2). */
.top .sp, .head .sp, .foot .sp, .card-header .sp { flex: 1; }
.lang { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; display: flex; font-size: 12px; flex: none; white-space: nowrap; }
.lang a, .lang button { padding: 4px 8px; color: var(--mut); text-decoration: none; background: none; border: 0; font: inherit; }
.lang a.on, .lang button.on { background: var(--txt); color: var(--card); }
.user { display: flex; align-items: center; gap: 8px; flex: none; }
.user .av { width: 30px; height: 30px; border-radius: 50%; background: var(--av); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--av-txt); }
.user small { display: block; color: var(--mut); font-size: 11px; }
.main { grid-column: 2; padding: 20px 24px; overflow: auto; }

/* --- UX 2.0: peamenüü üleval (ptk 39). Üks veerg: külgriba laius läheb tööalale; menüüriba on ülariba all. --- */
.app.menu-top { grid-template-columns: 1fr; grid-template-rows: 52px auto 1fr; }
.menu-top .top, .menu-top .main { grid-column: 1; }
.menu-top .top .brand { height: auto; padding: 0; border: 0; color: var(--txt); text-decoration: none; flex: none; }
.topnav { position: relative; z-index: 1015; display: flex; flex-wrap: wrap; align-items: stretch; padding: 0 12px; background: var(--card); border-bottom: 1px solid var(--line); }
.topnav .grp { width: auto; gap: 4px; padding: 10px 12px 8px; color: var(--mut); border-bottom: 2px solid transparent; }
.topnav .grp:hover, .topnav .grp[aria-expanded=true] { color: var(--txt); }
.topnav .grp.act { background: none; color: var(--txt); border-left: 0; padding-left: 12px; border-bottom-color: var(--acc); font-weight: 600; }
.topnav .grp .chev { margin-left: 2px; }
.topnav .sp { flex: 1; }
.topnav .dd { position: relative; display: flex; }
.topnav .sub { position: absolute; top: 100%; left: 0; min-width: 220px; padding: 6px 0; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.topnav .sp ~ .dd .sub { left: auto; right: 0; }
.topnav .sub a { padding: 7px 14px; color: var(--txt); }
.topnav .sub a:hover { color: var(--txt); background: var(--hover); }
.topnav .sub a.act { color: var(--acc-txt); }
.topnav .sub a.soon { color: var(--mut); }
.topnav .sub a.soon:hover { background: none; }
.menu-backdrop { position: fixed; inset: 0; z-index: 1010; }

/* --- Tööala muster --- */
.crumb { color: var(--mut); font-size: 12px; margin-bottom: 6px; }
.crumb a { color: var(--mut); text-decoration: none; }
/* Pealkiri jääb ühele reale, nupud murduvad vajadusel järgmisele (ptk 46.1). */
.head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.head h1 { font-size: 20px; margin: 0; }
.filters { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.chip { border: 1px solid var(--line); background: var(--card); border-radius: 20px; padding: 5px 12px; font-size: 12px; color: var(--mut); cursor: pointer; font: inherit; }
.chip.on { background: var(--on); border-color: var(--on-line); color: var(--acc-txt); font-weight: 600; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.card .table { margin-bottom: 0; font-size: 13px; }
.card .table th { font-weight: 600; color: var(--mut); font-size: 12px; background: var(--head); }
.card .table td, .card .table th { padding: 10px 12px; }
.card-header { background: var(--head); font-weight: 600; }
tr.row-link { cursor: pointer; }
tr.row-link:hover td { background: var(--hover); }
.st { display: inline-block; border-radius: 4px; padding: 2px 7px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.st.a { background: var(--on); color: var(--acc-txt); } .st.b { background: var(--warn-bg); color: var(--warn); } .st.c { background: var(--info-bg); color: var(--info); } .st.d { background: var(--idle-bg); color: var(--idle); } .st.e { background: var(--bad-bg); color: var(--bad); }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: -2px; margin-right: 6px; border: 1px solid var(--swatch-line); }
.foot { display: flex; align-items: center; padding: 8px 12px; color: var(--mut); font-size: 12px; border-top: 1px solid var(--line); }
.overdue { color: var(--bad); font-weight: 600; }
.muted { color: var(--mut); }
.meta { font-size: 12px; color: var(--mut); }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
dl.kv dt { color: var(--mut); font-weight: 500; }
dl.kv dd { margin: 0; }
tr.highlight td { background: var(--mark) !important; }
.nw { white-space: nowrap; }

/* Eksemplari kaardi ajajoon (ptk 8) */
.timeline td { vertical-align: top; }
tr.tl-row.voided td { text-decoration: line-through; color: var(--mut); }
tr.tl-row.voided [data-testid="timeline-voided"] { text-decoration: none; }
.share { display: inline-block; background: var(--tag); border-radius: 4px; padding: 1px 6px; margin-right: 6px; font-size: 12px; }
.share.voided { text-decoration: line-through; opacity: .6; }
/* QRCoder annab ainult viewBox'i; mõõt tuleb siit (sildil teeb sama labels.css). Tumedas teemas valge äär, et skänner loeks ekraanilt. */
.qr svg { width: 96px; height: 96px; display: block; box-sizing: content-box; padding: var(--qr-pad); background: #fff; }
tr.cancelled td { text-decoration: line-through; color: var(--mut); }

#blazor-error-ui { color-scheme: light only; background: lightyellow; color: #1b1f24; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }
.blazor-error-boundary { background: #c62828; padding: 1rem 1rem 1rem 3.7rem; color: white; }
.validation-message { color: var(--bad); }

/* Trükivaade (PrintLayout) on paber: alati hele (ptk 38), ka siis, kui leht ise stiililehte ei too. labels.css teeb sildilehe valgeks. */
.print-page { background: var(--bg); color: var(--txt); }
@media screen { .print-page { min-height: 100vh; } }

/* Lihtne dialoog (kinnitused) */
.dialog-backdrop { position: fixed; inset: 0; background: var(--shade); z-index: 1040; }
.dialog { position: fixed; top: 20vh; left: 50%; transform: translateX(-50%); width: min(520px, 92vw); z-index: 1050; box-shadow: 0 10px 30px rgba(0,0,0,.25); }

/* Uue tellimuse tääbid (ptk 44): üks Excel = üks tellimus; pealkiri on failinimi, pikk nimi lüheneb */
.order-tabs { --bs-nav-tabs-border-color: var(--line); --bs-nav-tabs-link-active-bg: var(--card); --bs-nav-tabs-link-active-color: var(--txt);
  --bs-nav-tabs-link-active-border-color: var(--line) var(--line) var(--card); --bs-nav-link-color: var(--mut); --bs-nav-link-hover-color: var(--acc-txt); }
.order-tabs .nav-item { display: flex; align-items: center; }
.order-tabs .tab-title { display: inline-block; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.order-tabs .tab-close { font-size: .55rem; margin: 0 .5rem 0 -.2rem; opacity: .45; }
.order-tabs .tab-close:hover, .order-tabs .tab-close:focus-visible { opacity: 1; }

/* Jooniste lohistamisala (ptk 6): nähtav ainult lohistamise ajal */
.drop-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.dropzone{position:fixed;inset:12px;z-index:1030;display:none;place-items:center;pointer-events:none;
  background:var(--tint);border:2px dashed var(--acc-txt);border-radius:10px}
.dropzone.on{display:grid}
.dropzone .hint{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:12px 18px;
  color:var(--acc-txt);font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.15)}
.drawing-notes{margin:-4px 0 10px}
.drawing-pending+.drawing-pending{border-top:1px solid var(--line);padding-top:10px;margin-top:10px}

/* ---- Tellimus kirjast (Noida-funktsionaalsus.md ptk 41, visand ui/02-tellimus-kirjast.html) */
.src { display: block; color: var(--mut); font-size: 11.5px; margin-top: 2px; }
.mail-card { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.mail-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mail-file { border: 1px solid var(--line); border-radius: 4px; padding: 2px 8px; font-size: 12px; background: var(--head); }
.mail-file.skip { color: var(--mut); text-decoration: line-through; }
.mail-text { flex: 1 1 320px; border-left: 3px solid var(--line); padding: 2px 10px; }
.mail-text summary { color: var(--mut); font-size: 12px; cursor: pointer; }
.mail-text pre { white-space: pre-wrap; font: inherit; margin: 6px 0 0; max-height: 240px; overflow: auto; }
.checks { list-style: none; margin: 0; padding: 6px 12px; }
.checks li { display: flex; gap: 8px; padding: 4px 0; }
.checks .i { width: 18px; flex: 0 0 18px; text-align: center; font-weight: 700; }
.checks .ok .i { color: var(--acc-txt); }
.checks .q .i { color: var(--warn); }


/* ---- Töölaud (Noida-funktsionaalsus.md ptk 20) */
.tiles { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.tiles .tile { flex: 1 1 160px; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 10px; text-decoration: none; background: var(--card); border: 1px solid var(--line); color: inherit; }
.tiles .tile:hover { border-color: var(--line-hover); }
.tiles .tile .n { font-size: 28px; font-weight: 700; line-height: 1; }
.tiles .tile .t { font-size: 13px; color: var(--mut); }
.tiles .tile .s { font-size: 12px; color: var(--mut); }
.tiles .tile.warn .n { color: var(--bad); }
.tiles .tile.ok .n { color: var(--acc-txt); }
td.warn { color: var(--bad); font-weight: 600; }
tr.overdue td:first-child { border-left: 3px solid var(--bad); }
.chart { width: 100%; height: 140px; }
.chart .bar-produced { fill: var(--chart-a); }
.chart .bar-loaded { fill: var(--chart-b); }
.legend { display: flex; gap: 16px; align-items: center; font-size: 12px; margin-top: 6px; }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: 4px; }
.legend i.bar-produced { background: var(--chart-a); }
.legend i.bar-loaded { background: var(--chart-b); }

.swatch { display: inline-block; width: 28px; height: 16px; border: 1px solid var(--swatch-line); border-radius: 3px; vertical-align: middle; }

/* ---- Ekraanivormid (Noida-funktsionaalsus.md ptk 46) */
/* Tunnus (number, tähis, kood, detaili nimi) ei murdu kunagi kahele reale; Bootstrap lubaks code-elemendi sõna keskelt murda. */
.ident, code { white-space: nowrap; }
/* Tabel, mis tunnuste tõttu kaardi laiusesse ei mahu, kerib kaardi sees ja lehe päis jääb paigale. */
.table-scroll { overflow-x: auto; }

/* Veeruvalik (ptk 46.2): nupp ja loend käituvad nagu ülemise menüü rippmenüü (ptk 39). */
.col-picker { position: relative; display: inline-block; }
.col-picker-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 1016; min-width: 240px; max-height: 70vh; overflow: auto;
  padding: 6px 0; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.18);
  text-align: left; font-size: 13px; font-weight: normal; color: var(--txt); }
.col-picker-menu:focus { outline: none; }
.col-picker-menu .ttl { padding: 4px 14px 6px; color: var(--mut); font-size: 12px; }
.col-picker-menu .sub-ttl { padding: 8px 14px 2px; margin-top: 4px; font-weight: 600; border-top: 1px solid var(--line); }
.col-picker-item { display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 14px; cursor: pointer; white-space: nowrap; }
.col-picker-item:hover { background: var(--hover); }
.col-picker-item.locked { cursor: default; color: var(--mut); }
.col-picker-item .form-check-input { margin: 0; flex: none; }
.col-picker-item .meta { margin-left: auto; padding-left: 12px; font-size: 11px; }
.col-picker-menu .btn-link { padding: 6px 14px 2px; }

/* Põhiandmed (ptk 46.5): päis on nupp, väljad kahes tulbas (vasakul tähtsamad), kitsal ekraanil üksteise all. */
.basics-toggle { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; border-bottom: 1px solid var(--line);
  text-align: left; font: inherit; font-weight: 600; color: inherit; cursor: pointer; }
.basics:not(.open) .basics-toggle { border-bottom: 0; border-radius: var(--bs-card-inner-border-radius); }
.basics-toggle .chev { width: 12px; color: var(--mut); font-size: 12px; }
.basics-toggle:hover .chev, .basics-toggle:focus-visible .chev { color: var(--acc-txt); }
.basics-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 40px; }
.basics-body dl.kv { align-content: start; }
.basics.form dl.kv { gap: 8px 16px; align-items: center; }
.basics-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.basics-foot:empty { display: none; }
.basics-foot .sp { flex: 1; }
@media (max-width: 767.98px) { .basics-body { grid-template-columns: 1fr; } }

/* Tellimuse kokkuvõte ühel real põhiandmete all (ptk 46.5). */
.kv-inline { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0; }
.kv-inline > div { display: flex; align-items: baseline; gap: 6px; }
.kv-inline dt { color: var(--mut); font-weight: 500; }
.kv-inline dd { margin: 0; font-weight: 600; }

/* Detailide loendi „Etapp" on link, mis avab diagrammi (ptk 46.3); suurus nagu kõrval olev silt. */
.stage-link { --bs-btn-font-size: inherit; --bs-btn-line-height: inherit; vertical-align: baseline; }

/* Seisude ja etappide diagramm (ptk 46.3). Värvid on olekumärkide omad (--idle, --warn …), nii et see on loetav ka tumedas
   teemas. Klõps ükskõik kuhu sulgeb, seepärast on kursor käsi ka dialoogi peal. */
.stage-dialog { width: min(1000px, 96vw); top: 8vh; cursor: pointer; }
.stage-dialog:focus { outline: none; }
.stage-svg { display: block; width: 100%; height: auto; }
.stage-svg text { fill: var(--txt); font-family: inherit; font-size: 14px; }
.stage-svg .band text { font-size: 13px; font-weight: 600; }
.stage-svg .band.prep rect { fill: var(--idle-bg); } .stage-svg .band.prep text { fill: var(--idle); }
.stage-svg .band.wait rect { fill: var(--warn-bg); } .stage-svg .band.wait text { fill: var(--warn); }
.stage-svg .band.repair rect { fill: var(--bad-bg); } .stage-svg .band.repair text { fill: var(--bad); }
.stage-svg .band.ready rect { fill: var(--info-bg); } .stage-svg .band.ready text { fill: var(--info); }
.stage-svg .band.done rect { fill: var(--on); } .stage-svg .band.done text { fill: var(--acc-txt); }
.stage-svg .state rect { fill: var(--card); stroke: var(--line-hover); stroke-width: 1.5; }
.stage-svg .state.optional rect { stroke-dasharray: 5 4; }
.stage-svg .state.cancelled rect { stroke: var(--bad); }
.stage-svg .code { fill: var(--mut); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.stage-svg .note { fill: var(--mut); font-size: 12px; }
.stage-svg .arrow { fill: none; stroke: var(--mut); stroke-width: 1.5; }
.stage-svg .arrow.dashed { stroke-dasharray: 5 4; }
.stage-svg .arrow-head { fill: var(--mut); }