/* Kartimi CVI (mini-CVI v0.3): punane F93822, roheline 7ACC00, hele hall C8C9C7, tume hall 63666A;
   pealkirjad DM Mono, sisutekst DM Sans (SIL Open Font License, fonts/OFL.txt). */
@font-face { font-family: "DM Sans"; font-weight: 400; font-display: swap; src: url(/fonts/dm-sans-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "DM Sans"; font-weight: 400; font-display: swap; src: url(/fonts/dm-sans-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-weight: 700; font-display: swap; src: url(/fonts/dm-sans-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "DM Sans"; font-weight: 700; font-display: swap; src: url(/fonts/dm-sans-latin-ext-700-normal.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Mono"; font-weight: 400; font-display: swap; src: url(/fonts/dm-mono-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "DM Mono"; font-weight: 400; font-display: swap; src: url(/fonts/dm-mono-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Mono"; font-weight: 500; font-display: swap; src: url(/fonts/dm-mono-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "DM Mono"; font-weight: 500; font-display: swap; src: url(/fonts/dm-mono-latin-ext-500-normal.woff2) format("woff2");
  unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light;
  --brand-red: #F93822;
  --brand-green: #7ACC00;
  --brand-gray: #63666A;
  --brand-gray-light: #C8C9C7;
  --bg: #f4f4f3;
  --surface: #ffffff;
  --surface-2: #f7f7f6;
  --border: #dcdddb;
  --text: #2e3033;
  --text-2: #63666A;
  --muted: #85888c;
  --accent: #F93822;
  --accent-ink: #ffffff;
  --accent-soft: #feebe8;
  --link: #3f4245;
  --link-line: #C8C9C7;
  --info: #4f5256;
  --info-soft: #eeefed;
  --danger: #b0201f;
  --danger-soft: #fbe6e4;
  --ok: #3f7d00;
  --ok-soft: #eef8e0;
  --warn: #8a5a00;
  --warn-soft: #fff3d6;
  --sidebar: #63666A;
  --sidebar-text: #f1f1f0;
  --sidebar-group: #dcdddb;
  --sidebar-active: rgba(255, 255, 255, .16);
  --series-1: #5fa300;
  --series-2: #F93822;
  --heading-font: "DM Mono", ui-monospace, Menlo, Consolas, monospace;
  --shadow: 0 1px 2px rgba(46, 48, 51, .06), 0 1px 3px rgba(46, 48, 51, .08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1c1d1f; --surface: #26282b; --surface-2: #2d2f33; --border: #3a3d41;
    --text: #ecedeb; --text-2: #C8C9C7; --muted: #9a9da1;
    --accent: #F93822; --accent-ink: #ffffff; --accent-soft: #3d2422; --link: #ecedeb; --link-line: #6b6e72;
    --info: #C8C9C7; --info-soft: #33363a;
    --danger: #ff7a70; --danger-soft: #3d2220; --ok: #8fdb1f; --ok-soft: #26331a;
    --warn: #f0b44c; --warn-soft: #3a2d14;
    --sidebar: #2a2c2f; --sidebar-text: #e2e3e1; --sidebar-group: #9a9da1; --sidebar-active: rgba(255, 255, 255, .1);
    --series-1: #8fdb1f; --series-2: #F93822; --shadow: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1c1d1f; --surface: #26282b; --surface-2: #2d2f33; --border: #3a3d41;
  --text: #ecedeb; --text-2: #C8C9C7; --muted: #9a9da1;
  --accent: #F93822; --accent-ink: #ffffff; --accent-soft: #3d2422; --link: #ecedeb; --link-line: #6b6e72;
    --info: #C8C9C7; --info-soft: #33363a;
  --danger: #ff7a70; --danger-soft: #3d2220; --ok: #8fdb1f; --ok-soft: #26331a;
  --warn: #f0b44c; --warn-soft: #3a2d14;
  --sidebar: #2a2c2f; --sidebar-text: #e2e3e1; --sidebar-group: #9a9da1; --sidebar-active: rgba(255, 255, 255, .1);
  --series-1: #8fdb1f; --series-2: #F93822; --shadow: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 14px/1.45 "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  min-height: 100vh;
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--accent); text-decoration: underline; }
td a, p a, .hint a, li a, summary a { text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 2px; }
td a.btn, td a:hover { text-decoration-color: currentColor; }
td a.btn { text-decoration: none; }
a.btn:hover, a.alert:hover { color: var(--text); }
a.btn.primary:hover { color: var(--accent-ink); }
.sidebar nav a:hover, .sidebar a:hover { color: #fff; }
h1 { font: 500 23px/1.25 var(--heading-font); margin: 0; letter-spacing: -.01em; }
h2 { font: 500 16px/1.3 var(--heading-font); margin: 0 0 12px; }
h3 { font-family: var(--heading-font); font-weight: 500; }
h1 .hint, h1 .muted, h1 .badge, h2 .hint, h2 .muted, h2 .badge, h3 .hint, h3 .badge { font-family: "DM Sans", system-ui, sans-serif; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--muted); }

/* ---------- külgmenüü ---------- */
.sidebar {
  width: 220px; flex-shrink: 0; background: var(--sidebar); color: var(--sidebar-text);
  padding: 16px 10px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: #fff; padding: 4px 8px 16px; }
.logo { width: 24px; height: 32px; flex-shrink: 0; display: block; }
.sidebar nav a {
  display: block; padding: 7px 10px; color: var(--sidebar-text); border-radius: 6px; margin: 1px 0;
}
.sidebar nav a:hover { background: rgba(255, 255, 255, .06); text-decoration: none; }
.sidebar nav a.active { background: var(--sidebar-active); color: #fff; box-shadow: inset 3px 0 0 var(--brand-red); }
.nav-badge { background: var(--brand-red); color: #fff; border-radius: 99px; font-size: 11px; padding: 1px 7px; margin-left: 6px; font-weight: 700; }
.dropzone { border: 2px dashed var(--border); border-radius: 10px; padding: 22px; text-align: center; color: var(--text-2); margin-bottom: 14px; }
.dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.preview { position: sticky; top: 16px; }
.preview iframe, .preview img { width: 100%; height: 62vh; border: 1px solid var(--border); border-radius: 8px; background: #fff; object-fit: contain; }
.doc-list { list-style: none; padding: 0; margin: 0; }
.doc-list li { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); }
.doc-list li:last-child { border-bottom: none; }
.choice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.nav-group { font: 500 11px var(--heading-font); text-transform: uppercase; letter-spacing: .08em; color: var(--sidebar-group); padding: 14px 10px 4px; }
.menu-toggle { display: none; }

main { flex: 1; min-width: 0; padding: 24px 28px 60px; border-top: 4px solid; border-image: linear-gradient(90deg, var(--brand-green) 0 50%, var(--brand-red) 50% 100%) 1; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- komponendid ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 18px; box-shadow: var(--shadow); }
.card + .card { margin-top: 16px; }
.grid { display: grid; gap: 16px; }
.grid > .card + .card { margin-top: 0; }
.kpis { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 16px; }
.kpi .label { color: var(--text-2); font-size: 12.5px; }
.kpi .value { font: 500 24px/1.25 var(--heading-font); margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi .sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.two-col { grid-template-columns: 1fr 1fr; align-items: start; }

.btn {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); padding: 7px 13px; border-radius: 7px; font: inherit; cursor: pointer; 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); font-weight: 700; }
.btn.primary:hover { box-shadow: 0 0 0 3px var(--accent-soft); }
.btn.danger { color: var(--danger); }
.btn.small { padding: 3px 8px; font-size: 12.5px; }
.btn.icon { padding: 3px 8px; border: none; background: none; color: var(--muted); }
.btn.icon:hover { color: var(--danger); }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
th { font: 500 11.5px var(--heading-font); text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); background: var(--surface-2); }
tbody tr.click { cursor: pointer; }
tbody tr.click:hover { background: var(--surface-2); }
tfoot td { font-weight: 650; border-bottom: none; }
.table-wrap { overflow-x: auto; }
.empty { text-align: center; color: var(--muted); padding: 32px; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.badge.info { background: var(--info-soft); color: var(--info); }

.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; margin-bottom: 14px; }
label.field { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-2); }
input, select, textarea {
  font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 9px; min-width: 0;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
textarea { resize: vertical; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; }
.form-grid .wide { grid-column: 1 / -1; }

.lines-table input, .lines-table select { width: 100%; padding: 5px 7px; }
.lines-table td { padding: 4px 4px; border-bottom: none; }
.lines-table .c-desc { min-width: 200px; }
.lines-table .c-num { width: 90px; }
.lines-table .c-sm { width: 70px; }
.totals { margin-left: auto; width: 300px; max-width: 100%; margin-top: 14px; }
.totals td { padding: 5px 10px; }
.totals tr.grand td { font-size: 17px; font-weight: 700; border-top: 2px solid var(--text); border-bottom: none; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; flex-wrap: wrap; }
.tabs a { padding: 8px 14px; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a.active { color: var(--accent); border-color: var(--accent); font-weight: 600; }
.tabs a:hover { text-decoration: none; color: var(--text); }

.report-section td.section { font-weight: 650; background: var(--surface-2); }
.report-section tr.total td { font-weight: 700; border-top: 2px solid var(--text-2); }

.alert { display: block; padding: 10px 14px; border-radius: 8px; margin-bottom: 10px; border: 1px solid transparent; color: var(--text); }
.alert:hover { text-decoration: none; filter: brightness(.98); }
.alert::before { font-weight: 700; margin-right: 8px; }
.alert.info { background: var(--info-soft); border-color: var(--brand-gray-light); }
.alert.info::before { content: "ℹ"; color: var(--info); }
.alert.warn { background: var(--warn-soft); border-color: var(--warn); }
.alert.warn::before { content: "⚠"; color: var(--warn); }
.alert.danger { background: var(--danger-soft); border-color: var(--danger); }
.alert.danger::before { content: "⚠"; color: var(--danger); }
.hint { font-size: 12px; color: var(--muted); }
.kmd td.sub { padding-left: 28px; color: var(--text-2); }

body.login-mode .sidebar, body.login-mode .menu-toggle { display: none; }
body.login-mode main { display: grid; place-items: center; min-height: 100vh; }
.card.login { width: 380px; max-width: 100%; display: grid; gap: 14px; }
.brand-login { display: flex; align-items: center; gap: 12px; font: 500 20px var(--heading-font); color: var(--brand-gray); }
.brand-login .logo { width: 30px; height: 40px; }
body.login-mode { background: #fff url(/pattern.svg) 0 0 / 285px auto repeat; }
body.login-mode main { border: 0; }
body.login-mode .card.login { box-shadow: 0 10px 40px rgba(46, 48, 51, .25); }
.user-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 18px 8px 0; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.1); color: #fff; }
.user-chip .hint { color: var(--sidebar-text); }
.timeline { list-style: none; padding: 0; margin: 0 0 12px; }
.timeline li { padding: 6px 0 6px 18px; border-left: 2px solid var(--border); position: relative; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 11px; width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.timeline li.kinnitatud::before { background: var(--ok); }
.timeline li.tagasi::before { background: var(--danger); }
.approval-card { margin-bottom: 16px; }

/* ---------- modaal ja teated ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(10, 14, 20, .5); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal { background: var(--surface); border-radius: 12px; width: 640px; max-width: 100%; max-height: 92vh; overflow-y: auto; padding: 22px; border: 1px solid var(--border); }
.modal h2 { font-size: 18px; margin-bottom: 16px; }
.modal .foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
#toast {
  position: fixed; bottom: 20px; right: 20px; z-index: 60; padding: 11px 16px; border-radius: 8px;
  background: var(--text); color: var(--bg); opacity: 0; transform: translateY(10px); transition: .2s; pointer-events: none; max-width: 420px;
}
#toast.show { opacity: 1; transform: none; }
#toast.error { background: var(--danger); color: #fff; }

/* ---------- graafik ---------- */
.chart { position: relative; }
.chart svg { width: 100%; height: 240px; display: block; }
.chart .grid-line { stroke: var(--border); stroke-width: 1; }
.chart .axis-label { fill: var(--muted); font-size: 11px; }
.chart .bar-inc { fill: var(--series-1); }
.chart .bar-exp { fill: var(--series-2); }
.chart .hit { fill: transparent; }
.chart .hit:hover { fill: var(--text); fill-opacity: .05; }
.legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--text-2); margin-bottom: 8px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.tooltip {
  position: absolute; pointer-events: none; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 4px 14px rgba(0,0,0,.15);
  border-radius: 8px; padding: 8px 10px; font-size: 12.5px; white-space: nowrap; display: none; z-index: 5;
}
.tooltip b { display: block; margin-bottom: 2px; }

/* ---------- arve vaade / print ---------- */
.invoice-doc { background: #fff; color: #1b1f24; max-width: 820px; margin: 0 auto; padding: 48px; border-radius: 6px; box-shadow: var(--shadow); }
.invoice-doc table th { background: #f4f5f7; color: #59606b; }
.invoice-doc th, .invoice-doc td { border-color: #e1e4e8; }
.invoice-doc .head { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.invoice-doc .title { font-size: 28px; font-weight: 700; }
.invoice-doc .meta td { border: none; padding: 2px 0 2px 16px; }
.invoice-doc .meta td:first-child { color: #59606b; padding-left: 0; }
.invoice-doc .parties { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.invoice-doc .footer { margin-top: 40px; padding-top: 14px; border-top: 1px solid #e1e4e8; font-size: 12px; color: #59606b; display: flex; gap: 24px; flex-wrap: wrap; }
.invoice-doc .totals tr.grand td { border-color: #1b1f24; }
body.print-mode .sidebar, body.print-mode .menu-toggle { display: none; }
body.print-mode main { padding: 20px; }
@media print {
  body { background: #fff; }
  .sidebar, .menu-toggle, .no-print { display: none !important; }
  main { padding: 0; }
  .invoice-doc { box-shadow: none; padding: 0; max-width: none; }
}

@media (max-width: 860px) {
  body { display: block; }
  .sidebar { position: fixed; left: 0; top: 0; z-index: 40; transform: translateX(-100%); transition: transform .2s; }
  body.nav-open .sidebar { transform: none; }
  .menu-toggle {
    display: block; position: fixed; top: 10px; left: 10px; z-index: 41; border: 1px solid var(--border);
    background: var(--surface); color: var(--text); border-radius: 8px; width: 38px; height: 38px; font-size: 18px; cursor: pointer;
  }
  main { padding: 60px 16px 40px; }
  .two-col, .split { grid-template-columns: 1fr; }
  .preview { position: static; }
  .preview iframe, .preview img { height: 60vh; }
  .invoice-doc { padding: 20px; }
  .invoice-doc .head, .invoice-doc .parties { flex-direction: column; }
}

/* pangaväljavõtted */
.amt-in { color: var(--ok); font-weight: 600; }
.amt-out { color: var(--text); }
.warn-text { color: var(--warn); }
.bank-tx td { vertical-align: top; }
.bank-tx-info { padding: 10px 12px; background: var(--info-soft); border-radius: 8px; margin-bottom: 12px; }
.sugg-list { display: grid; gap: 6px; margin-bottom: 12px; }
.sugg { display: block; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.sugg .hint { display: block; margin: 2px 0 0 22px; }
.alloc-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.alloc-row select { flex: 1 1 220px; min-width: 0; }
.alloc-row .alloc-acc { display: flex; gap: 6px; flex: 1 1 320px; }
.alloc-row .alloc-acc[hidden], .alloc-row [hidden] { display: none; }
.alloc-row input[data-k=amount] { width: 110px; text-align: right; }
.alloc-foot { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
#bank-acc { width: auto; display: inline-block; margin-left: 4px; }
.danger-text { color: var(--danger); }
.pay-amt { width: 100px; text-align: right; }
.pay-foot { margin-top: 14px; align-items: end; }
.pay-cands td { vertical-align: top; }
.payroll-table td { vertical-align: top; }
.payroll-table select { min-width: 140px; }
.payroll-table select[data-k=payment_type] { max-width: 210px; }
input[type=month].btn { padding: 6px 10px; }
.calc-preview { margin-top: 10px; padding: 10px 12px; background: var(--info-soft); border-radius: 8px; }
.calc-preview:empty { display: none; }
.card.notice { border-left: 4px solid var(--warn); }
.card.notice table { margin-top: 8px; }

.budget-grid input { width: 100%; min-width: 64px; text-align: right; }
.budget-grid td:first-child select { min-width: 220px; }
td.neg { color: var(--danger, #c0392b); }
.cf-table th.done { color: var(--text, inherit); }
.cf-table td, .cf-table th { white-space: nowrap; }
.chart .line-1, .chart .line-2 { fill: none; stroke-width: 2; }
.chart .line-1 { stroke: var(--series-1); }
.chart .line-2 { stroke: var(--series-2); stroke-dasharray: 2 4; }
.chart polyline.line-1.dashed { stroke-dasharray: 6 4; opacity: .7; }
.chart circle.line-1 { fill: var(--series-1); stroke: none; }
.chart circle.line-2 { fill: var(--series-2); stroke: none; }
.chart .grid-line.zero { stroke: var(--muted, #888); }
.value.neg, .neg { color: var(--danger); }
.pos { color: var(--ok); }
.bud-card h2 .muted { font-weight: 400; font-size: .85em; }
.bud-row { display: grid; grid-template-columns: 80px 1fr auto; gap: 12px; align-items: center; margin: 8px 0; }
.bud-bar { height: 10px; background: var(--border, #e5e7eb); border-radius: 5px; overflow: hidden; }
.bud-bar span { display: block; height: 100%; border-radius: 5px; }
.bud-bar .ok { background: var(--ok); }
.bud-bar .bad { background: var(--danger); }
.bud-val { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bud-foot { margin-top: 8px; color: var(--muted, #666); }
@media (max-width: 640px) { .bud-row { grid-template-columns: 1fr; gap: 4px; } }
table.compact th, table.compact td { padding-left: 6px; padding-right: 6px; font-size: 13px; }
table.compact th { font-size: 11px; }
tr.old-version td { opacity: .6; }
th.base, td.base { background: var(--surface-2, #f6f7f9); }
.card.versions { padding: 10px 16px; }
.appr-steps { margin: 6px 0 0 18px; padding: 0; }
.split-row { display: flex; gap: 8px; align-items: center; margin: 4px 0; }
.split-row select { flex: 1; max-width: 320px; }
.split-row input { width: 80px; text-align: right; }
.hist-list { margin: 4px 0 0 18px; padding: 0; font-size: 13px; }
#histcard details summary { cursor: pointer; color: var(--accent); font-size: 13px; }
.chart .line-3 { fill: none; stroke-width: 2; stroke: var(--ok); }
.chart circle.line-3 { fill: var(--ok); stroke: none; }
.chart polyline.line-2.dashed { stroke-dasharray: 2 4; }
.bud-bar .neutral { background: var(--muted); }
.mini-bar { display: inline-block; width: 48px; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-right: 6px; vertical-align: middle; }
.mini-bar span { display: block; height: 100%; background: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.res-grid input.plan { width: 64px; text-align: right; }
.res-grid tr.emp td { background: var(--surface-2); }
.res-grid td.indent { padding-left: 24px; }
.small { font-size: 11px; }
.load { display: inline-block; min-width: 44px; padding: 1px 6px; border-radius: 99px; font-weight: 600; font-size: 12px; text-align: center; }
.load.low { background: var(--surface-2); color: var(--muted); }
.load.mid { background: var(--info-soft); color: var(--info); }
.load.full { background: var(--ok-soft); color: var(--ok); }
.load.over { background: var(--danger-soft); color: var(--danger); }
body.employee-mode .sidebar nav > a:not([data-nav="time"]), body.employee-mode .sidebar nav .nav-group { display: none; }

/* krediit ja laekumiste prognoos */
.credit-sum { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.credit-sum .label { color: var(--text-2); font-size: 12.5px; }
.credit-sum .kpis { gap: 12px; }
.fc-bars { display: flex; gap: 10px; align-items: flex-end; overflow-x: auto; padding: 8px 0; }
.fc-col { flex: 1 0 56px; text-align: center; font-size: 12px; }
.fc-pair { height: 120px; display: flex; gap: 3px; align-items: flex-end; justify-content: center; background: var(--surface-2, transparent); border-radius: 4px; }
.fc-pair span { display: block; width: 40%; border-radius: 3px 3px 0 0; min-height: 1px; }
.fc-v { font-weight: 600; margin-top: 4px; }

/* e-pood (Figma: „Raamat – E-pood“) */
.split2 { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .split2 { grid-template-columns: 1fr; } }
.drawer { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 18px;
  box-shadow: 0 10px 30px rgba(46, 48, 51, .12); position: sticky; top: 16px; }
.drawer h2 { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.thumb { width: 44px; height: 44px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--muted); font: 10px var(--heading-font); overflow: hidden; flex-shrink: 0; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.lg { width: 96px; height: 96px; position: relative; cursor: grab; }
.thumb.lg .x { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,.55); color: #fff; border: 0; border-radius: 4px;
  width: 20px; height: 20px; line-height: 18px; cursor: pointer; font-size: 12px; }
.thumb.add { border: 2px dashed var(--border); background: var(--surface); font-size: 24px; cursor: pointer; }
.imgs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.toggle { display: inline-block; width: 34px; height: 20px; border-radius: 99px; background: var(--brand-gray-light);
  position: relative; border: 0; cursor: pointer; flex-shrink: 0; padding: 0; }
.toggle::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; top: 2px; left: 2px; transition: left .15s; }
.toggle.on { background: var(--brand-green); }
.toggle.on::after { left: 16px; }
.attr { display: grid; grid-template-columns: 1fr 1fr 28px; gap: 6px; margin-bottom: 6px; }
.preview-box { background: var(--surface-2); border-radius: 8px; padding: 12px; font-size: 13px; }
.preview-box s { color: var(--muted); }
.preview-box b { color: var(--brand-red); font: 500 18px var(--heading-font); }
tr.sel td { background: var(--accent-soft); }
.sumpanel { background: var(--surface-2); border-radius: 10px; padding: 16px; position: sticky; top: 16px; }
.sumrow { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 14px; gap: 10px; }
.sumrow.total { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 10px; font: 500 18px var(--heading-font); }
.match { border: 1px solid var(--ok); background: var(--ok-soft); border-radius: 8px; padding: 10px 12px; font-size: 13px; margin: 10px 0; }
.match.bad { border-color: var(--danger); background: var(--danger-soft); }
.flow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--text-2); margin-bottom: 10px; }
.flow .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-green); }
.drawer .field { margin-bottom: 12px; }
.drawer .form-grid.sale { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.drawer input, .drawer textarea, .drawer select { min-width: 0; width: 100%; box-sizing: border-box; }
.drawer .attr input { width: 100%; }
/* e-pood: saatmine, kliendid, teavitused (Figma: „E-pood – saatmine, kliendid, teavitused“) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 99px; padding: 4px 10px;
  background: var(--surface); font-size: 12.5px; cursor: pointer; }
.chip:has(input:checked) { border-color: var(--brand-green); background: var(--ok-soft); }
pre.code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font: 12px/1.5 var(--heading-font);
  white-space: pre-wrap; word-break: break-all; margin: 6px 0 10px; }
.split2.wh { grid-template-columns: minmax(0, 1fr) 380px; }
@media (max-width: 1100px) { .split2.wh { grid-template-columns: 1fr; } }
[data-shcode] { font-family: var(--heading-font); }
.drawer table.compact select, .drawer table.compact input { width: 100%; }
.drawer .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
.drawer .kpi { box-shadow: none; background: var(--surface-2); border: 0; }
#whform .field { margin-bottom: 12px; }
/* e-pood: vedajad, ärikliendid, aruanne (Figma: „E-pood – vedajad, B2B, aruanne“) */
.bar { height: 10px; border-radius: 5px; background: var(--brand-green); min-width: 2px; }
.bar.r { background: var(--brand-red); }
.mono { font-family: var(--heading-font); }
#byrows input { width: 100%; margin-bottom: 3px; }
#carform h3 { font-size: 14px; }
#carform .field { margin-bottom: 8px; }
#repf input, #repf select { width: auto; }
.drawer input[type=checkbox] { width: auto; margin-right: 6px; }
#byrows select { width: 84px; }
/* e-pood: töölaud (Figma: „E-pood – ülevaade, kuller ja saateleht“) */
a.card.kpi { color: inherit; text-decoration: none; }
a.card.kpi:hover { border-color: var(--brand-gray-light); }
.ovgrid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 1000px) { .ovgrid { grid-template-columns: 1fr; } }
.wkbars { display: flex; align-items: flex-end; gap: 8px; height: 160px; padding-top: 8px; }
.wk { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.wkb { width: 60%; background: var(--brand-gray-light); border-radius: 3px 3px 0 0; }
.wkb.cur { background: var(--brand-green); }
.wkv { font: 11px var(--heading-font); color: var(--text-2); }
.mini { font-size: 11px; color: var(--muted); }
.card.login h2 { text-align: center; }
.card.login .btn.primary { justify-content: center; }

/* ---------- mobiil (telefon) ---------- */
@media (max-width: 860px) {
  input, select, textarea { font-size: 16px; }                 /* iOS ei suumi välja sisestamisel */
  .btn { min-height: 40px; }
  .btn.small, .btn.icon { min-height: 36px; min-width: 36px; justify-content: center; }
  .page-head h1 { font-size: 22px; }
  .page-head .actions { width: 100%; }
  .page-head .actions > .btn, .page-head .actions > select, .page-head .actions > input { flex: 1 1 auto; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { white-space: nowrap; padding: 10px 12px; }
  .filters > *, .filters > label.field { flex: 1 1 140px; min-width: 0; }
  .filters input, .filters select, .actions select, .actions input { min-width: 0; max-width: 100%; }
  label.field input, label.field select, label.field textarea { width: 100%; min-width: 0; }
  .card { padding: 14px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi .value { font-size: 19px; overflow-wrap: anywhere; }
  .grid:not(.kpis), .split2, .ovgrid, .split2.wh { grid-template-columns: minmax(0, 1fr) !important; }
  .drawer, .sumpanel { position: static; box-shadow: none; }
  th, td { padding-left: 8px; padding-right: 8px; }
  .modal-bg { padding: 0; place-items: end center; }
  .modal { width: 100% !important; max-height: 94vh; border-radius: 14px 14px 0 0; padding: 18px 16px; }
  .modal .foot { position: sticky; bottom: -18px; background: var(--surface); padding: 12px 0; margin-bottom: -18px; }
  .modal .foot .btn { flex: 1; justify-content: center; }
  .invoice-doc { overflow-x: auto; }
  .wkbars { gap: 4px; }
  .wkv { font-size: 9px; }
}
@media (max-width: 340px) {
  .kpis { grid-template-columns: minmax(0, 1fr); }
}
/* nimekirjatabelid kaartidena (app.js cardTables → data-rt="1", lahtril data-label) */
@media (max-width: 640px) {
  table[data-rt="1"], table[data-rt="1"] tbody { display: block; width: 100%; }
  table[data-rt="1"] thead { display: none; }
  table[data-rt="1"] tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--border); }
  table[data-rt="1"] tr.sel, table[data-rt="1"] tr.sel td { background: var(--accent-soft); }
  table[data-rt="1"] td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 3px 4px; border: 0; text-align: right; min-height: 0; }
  table[data-rt="1"] td::before { content: attr(data-label); color: var(--muted); font-size: 12px; text-align: left;
    flex: 0 0 auto; max-width: 45%; }
  table[data-rt="1"] td[data-label=""]::before, table[data-rt="1"] td:not([data-label])::before { content: none; }
  table[data-rt="1"] td:first-child { font-size: 15px; font-weight: 600; text-align: left; }
  table[data-rt="1"] td:first-child::before { content: none; }
  table[data-rt="1"] td:empty { display: none; }
  table[data-rt="1"] td > .hint, table[data-rt="1"] td > div { text-align: right; }
  table[data-rt="1"] td.num { font-variant-numeric: tabular-nums; }
  table[data-rt="1"] tfoot { display: block; }
  table[data-rt="1"] tfoot tr { display: flex; flex-wrap: wrap; justify-content: space-between; font-weight: 600; }
  table[data-rt="1"] tfoot td { border: 0; }
  .table-wrap:has(> table[data-rt="1"]) { overflow-x: visible; }
}
@media (max-width: 860px) {
  .sidebar { padding-top: 62px; box-shadow: 0 0 30px rgba(0, 0, 0, .3); width: min(280px, 82vw); }
  body.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(10, 14, 20, .45); z-index: 39; }
  body.nav-open .menu-toggle { background: var(--sidebar); color: var(--sidebar-text); border-color: transparent; }
  .sidebar nav a { padding-top: 10px; padding-bottom: 10px; }
}
@media (max-width: 860px) {
  .btn { white-space: normal; max-width: 100%; text-align: center; }
}
@media (max-width: 640px) {
  table[data-rt="1"] td { flex-wrap: wrap; overflow-wrap: anywhere; }
  table[data-rt="1"] td > * { max-width: 100%; }
  .badge { white-space: normal; }
}