/* Raamat – hele tööala tumeda raamiga, sinakas-lilla rõhk */
:root {
  --frame: #0c0c0d;
  --frame-2: #1b1b1d;
  --frame-text: #8d8d93;
  --panel: #ffffff;
  --card: #f2f2f4;
  --card-2: #e8e8ec;
  --line: #e4e4e8;
  --text: #111113;
  --muted: #6b6b74;
  --faint: #a8a8b0;
  --dark: #141416;
  --dark-2: #232326;
  --indigo: #3f3fa8;
  --lilac: #e6dcff;
  --ok: #1f8a54;
  --ok-bg: #e2f5ea;
  --warn: #9a6400;
  --warn-bg: #fff1d6;
  --bad: #c23a3a;
  --bad-bg: #fde5e5;
  --info: #3f3fa8;
  --info-bg: #e7e7fb;
  --radius: 26px;
  --radius-sm: 16px;
  --font: "Google Sans Flex", "Google Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hero: radial-gradient(120% 140% at 85% 10%, #c9b8e6 0%, rgba(201,184,230,0) 45%),
          radial-gradient(90% 120% at 55% 60%, #9c6fa8 0%, rgba(156,111,168,0) 55%),
          linear-gradient(125deg, #10183a 0%, #2b2a68 35%, #6e5a9c 65%, #b7a8d6 100%);
  /* tööde staatused (Doris 14.11.2026) */
  --st-paring-bg: #e6dcff; --st-paring: #4b3a8a; --st-paring-dot: #8a6fd1;
  --st-kinnitatud-bg: #e7e7fb; --st-kinnitatud: #3f3fa8; --st-kinnitatud-dot: #3f3fa8;
  --st-pildistatud-bg: #e8e8ec; --st-pildistatud: #3a3a40; --st-pildistatud-dot: #7b7b84;
  --st-yleantud-bg: #fff1d6; --st-yleantud: #7a4f00; --st-yleantud-dot: #e0a326;
  --st-arve-bg: #141416; --st-arve: #ffffff; --st-arve-dot: #141416;
  --st-makstud-bg: #e2f5ea; --st-makstud: #17693f; --st-makstud-dot: #2e9e6b;
  --st-hilineb-bg: #fde5e5; --st-hilineb: #a82e2e; --st-hilineb-dot: #d6455d;
  --st-loobutud-bg: #f2f2f4; --st-loobutud: #6b6b74; --st-loobutud-dot: #a8a8b0;
  --focus: 0 0 0 3px rgba(63,63,168,.35);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--frame); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.45; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--indigo); }
h1, h2, h3 { font-weight: 400; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: 32px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; font-weight: 500; }
.muted { color: var(--muted); }
.faint { color: var(--muted); }
.small { font-size: 13px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }

/* ---------- Raam ja navigatsioon ---------- */
.topbar { display: flex; align-items: center; gap: 18px; padding: 14px max(44px, calc((100% - 1500px) / 2)) 0; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 19px; color: #fff; font-weight: 500; min-width: 150px; }
.brand-mark { width: 30px; height: 30px; border-radius: 9px; background: var(--hero); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 16px; }
.nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.nav a { display: flex; align-items: center; gap: 8px; padding: 12px 16px 14px; white-space: nowrap; color: var(--frame-text); border-radius: 14px 14px 0 0; }
.nav a svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.nav a:hover { color: #fff; }
.nav a.active { color: #fff; }
.nav a.active svg { stroke: #c9b8e6; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.icon-btn { width: 42px; height: 42px; border-radius: 50%; background: var(--frame-2); display: grid; place-items: center; border: 0; color: #fff; cursor: pointer; position: relative; }
.icon-btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.icon-btn:hover { background: #2c2c30; color: #fff; }
.icon-btn .dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: #c9b8e6; }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--hero); color: #fff; display: grid; place-items: center; font-weight: 600; overflow: hidden; flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* valge paneel täidab kogu akna laiuse; sisu jääb keskele kuni 1500px laiuseni */
.workspace { margin: 8px 0 0; padding: 0 10px 10px; }
.panel { background: var(--panel); border-radius: 30px; padding: 30px max(34px, calc((100% - 1500px) / 2)) 50px; min-height: calc(100vh - 82px); }
.subnav { display: flex; gap: 6px; margin: -6px 0 24px; flex-wrap: wrap; }
.subnav a { padding: 8px 15px; border-radius: 999px; color: var(--muted); font-size: 14px; background: var(--card); }
.subnav a:hover { color: var(--text); background: var(--card-2); }
.subnav a.active { color: #fff; background: var(--dark); }

/* ---------- Kaardid ja ruudustik ---------- */
.page-head { display: flex; align-items: center; gap: 16px; margin: 0 0 22px; flex-wrap: wrap; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.grid { display: grid; gap: 16px; }
.g-dash { grid-template-columns: 1.75fr 1fr; }
.g-2 { grid-template-columns: 1fr 1fr; }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.stack { display: grid; gap: 16px; align-content: start; }
.card { background: var(--card); border-radius: var(--radius); padding: 24px 26px; position: relative; min-width: 0; }
.card.white { background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.card.tight { padding: 18px 20px; }
.card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.card-head h2, .card-head h3 { margin-right: auto; }
.card-link { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--text); }
.card-link svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.card-link:hover { background: var(--card-2); }
.hero { background: var(--hero); color: #fff; overflow: hidden; }
.hero .muted { color: rgba(255,255,255,.7); }
.hero .card-link { background: var(--dark); color: #fff; }
.hero .card-link:hover { background: #000; color: #fff; }
.hero .pill { background: rgba(10,10,20,.75); color: #fff; }
.hero a:hover { color: #fff; }
.dark { background: var(--dark); color: #fff; }
.dark .muted { color: #8d8d93; }
.dark .card-link { color: #fff; }
.dark .card-link:hover { background: var(--dark-2); }
.dark a:hover { color: #c9b8e6; }
.stat-label { font-size: 16px; }
.big { font-size: 40px; letter-spacing: -0.02em; margin-top: 18px; font-variant-numeric: tabular-nums; line-height: 1.05; }
.huge { font-size: 68px; letter-spacing: -0.03em; line-height: 1; margin: 22px 0 18px; font-variant-numeric: tabular-nums; }
.cents { font-size: 0.5em; color: var(--muted); letter-spacing: 0; }
.hero .cents, .dark .cents { color: rgba(255,255,255,.6); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--card-2); font-size: 13px; white-space: nowrap; }
.pills { display: flex; gap: 6px; flex-wrap: wrap; }
.stat-link { position: absolute; right: 18px; bottom: 16px; }

/* graafikud (SVG) */
.chart { width: 100%; height: auto; display: block; }
.chart text { font-family: var(--font); font-size: 11px; }
.hero .chart text { fill: rgba(255,255,255,.75); }
.dark .chart text { fill: #8d8d93; }

/* ---------- Nupud ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; border: 0; background: var(--card); color: var(--text); font: inherit; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--card-2); color: var(--text); }
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.btn-primary { background: var(--dark); color: #fff; }
.btn-primary:hover { background: #000; color: #fff; }
.btn-accent { background: var(--indigo); color: #fff; }
.btn-accent:hover { background: #2f2f8a; color: #fff; }
.btn-danger { background: transparent; color: var(--bad); box-shadow: inset 0 0 0 1px #f0c4c4; }
.btn-danger:hover { background: var(--bad-bg); color: var(--bad); }
.btn-sm { padding: 6px 13px; font-size: 13px; }
.btn-ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
form.inline { display: inline; }

/* ---------- Segmendid ---------- */
.seg { display: inline-flex; gap: 2px; background: var(--card); padding: 4px; border-radius: 999px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg a { padding: 7px 16px; border-radius: 999px; color: var(--muted); font-size: 14px; white-space: nowrap; }
.seg a.active { background: var(--dark); color: #fff; }
.seg a:hover:not(.active) { color: var(--text); }

/* ---------- Tabelid ---------- */
.table-wrap { overflow-x: auto; margin: 0 -8px; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 400; color: var(--muted); font-size: 13px; padding: 10px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 13px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover td { background: #f7f7f9; }
.card tbody tr.clickable:hover td { background: #e9e9ee; }
tfoot td { font-weight: 500; border-top: 1px solid #d6d6dc; border-bottom: 0; }
td.sub { padding-left: 28px; color: var(--muted); font-size: 14px; }
tr.subtotal td { font-weight: 500; }
tr.total td { font-weight: 600; font-size: 16px; border-top: 1px solid #d6d6dc; }
.empty { color: var(--muted); padding: 30px 0; text-align: center; }

.list-item { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.dark .list-item { border-color: var(--dark-2); }
.list-item:last-child { border-bottom: 0; }
.list-icon { width: 42px; height: 42px; border-radius: 50%; background: var(--card-2); display: grid; place-items: center; flex: none; font-weight: 600; font-size: 14px; color: var(--text); }
.dark .list-icon { background: var(--dark-2); color: #fff; }
.list-main { min-width: 0; flex: 1; }
.list-title, .list-sub { display: block; }
.list-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-sub { color: var(--muted); font-size: 13px; }
.list-amount { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos { color: var(--ok); }
.dark .pos { color: #8fe3b0; }

/* ---------- Märgised ---------- */
.badge { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 12px; white-space: nowrap; background: var(--card-2); color: var(--muted); }
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-bad { background: var(--bad-bg); color: var(--bad); }
.badge-info { background: var(--indigo); color: #fff; }
.badge-lilac { background: var(--lilac); color: #4b3a8a; }

/* ---------- Vormid ---------- */
label { display: block; color: var(--muted); font-size: 13px; margin-bottom: 6px; }
input, select, textarea { width: 100%; font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 11px 14px; outline: none; }
.panel > form input, .panel > form select, .panel > form textarea { background: var(--panel); }
.card input, .card select, .card textarea { background: var(--panel); }
input:focus, select:focus, textarea:focus { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(63,63,168,.12); }
input[type=checkbox] { width: auto; accent-color: var(--indigo); }
input[type=file] { padding: 9px; }
textarea { min-height: 84px; resize: vertical; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237b7b84' fill='none' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px 16px; }
.c2 { grid-column: span 2; } .c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; }
.c6 { grid-column: span 6; } .c8 { grid-column: span 8; } .c12 { grid-column: span 12; }
.check { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 15px; margin: 0; }
.form-actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; align-items: center; }
.filters { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin-bottom: 16px; }
.filters > div { min-width: 150px; }
.filters input, .filters select { padding: 9px 13px; }
.search-field { position: relative; }
.search-field input { padding-right: 40px; }
.search-field input::-webkit-search-cancel-button { display: none; }
.search-clear { position: absolute; right: 8px; bottom: 7px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--card); color: inherit; font-size: 18px; line-height: 1; cursor: pointer; opacity: .7; }
.search-clear:hover { opacity: 1; background: #e4e4e8; }
.match-hint { font-size: 12px; opacity: .6; margin-top: 2px; max-width: 420px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lines td { padding: 6px 4px; border: 0; }
.lines th { padding: 6px 4px; }
.lines input, .lines select { padding: 9px 11px; border-radius: 11px; }
.lines .rm { background: none; border: 0; color: var(--faint); cursor: pointer; font-size: 20px; padding: 4px 8px; }
.lines .rm:hover { color: var(--bad); }
.totals-box { display: flex; justify-content: flex-end; gap: 30px; margin-top: 12px; font-size: 18px; }

/* äriregistri automaatne soovitus */
.ac { position: relative; }
.ac-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; background: var(--panel); border-radius: 18px; box-shadow: 0 18px 50px rgba(17,17,19,.16), 0 0 0 1px var(--line); padding: 6px; max-height: 360px; overflow-y: auto; }
.ac-item { display: flex; gap: 12px; align-items: center; width: 100%; padding: 10px 12px; border: 0; background: none; border-radius: 12px; text-align: left; font: inherit; color: var(--text); cursor: pointer; }
.ac-item:hover, .ac-item.active { background: var(--card); }
.ac-item .list-icon { width: 36px; height: 36px; font-size: 12px; }
.ac-main { flex: 1; min-width: 0; }
.ac-name { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-sub { display: block; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-empty { padding: 12px; color: var(--muted); font-size: 14px; }
.filled { animation: filled 1.4s ease; }
@keyframes filled { 0% { background: var(--lilac); } 100% { background: var(--panel); } }

.flash { padding: 13px 18px; border-radius: var(--radius-sm); margin-bottom: 18px; background: var(--card); }
.flash-ok { background: var(--ok-bg); color: #145c38; }
.flash-error { background: var(--bad-bg); color: #8a2323; }
.flash-info { background: var(--info-bg); color: var(--indigo); }

.doc-preview { width: 100%; height: 72vh; border: 0; border-radius: var(--radius-sm); background: #fff; }
.doc-preview-img { max-width: 100%; border-radius: var(--radius-sm); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.progress { height: 6px; border-radius: 6px; background: var(--card-2); overflow: hidden; margin-top: 12px; }
.progress span { display: block; height: 100%; background: var(--dark); border-radius: 6px; }
.tok { font-family: ui-monospace, Menlo, monospace; background: var(--card); padding: 12px 14px; border-radius: 12px; word-break: break-all; }

/* sisselogimine */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: var(--hero); }
.login-card { width: 100%; max-width: 420px; text-align: center; padding: 44px 36px; background: var(--panel); border-radius: 34px; }
.login-card .brand { justify-content: center; min-width: 0; min-height: 0; padding: 0; margin: 0 0 22px; color: var(--text); }
.login-card .brand-text { align-items: center; gap: 6px; }
.login-card .wordmark { font-size: 44px; letter-spacing: -0.03em; color: var(--text); }
.login-card .wordmark .oo { color: #6e5a9c; }
.login-card .brand-text .company { font-size: 14px; color: var(--muted); }
.login-title { font-size: 20px; font-weight: 400; margin: 0 0 6px; }
.login-lead { margin: 0 0 26px; }
@media (max-width: 480px) {
  .login-card { padding: 36px 24px; border-radius: 28px; }
  .login-card .wordmark { font-size: 40px; }
}
.gbtn { display: flex; justify-content: center; align-items: center; gap: 12px; width: 100%; padding: 14px; border-radius: 999px; background: var(--dark); color: #fff; font-weight: 500; border: 0; font: inherit; cursor: pointer; }
.gbtn:hover { background: #000; color: #fff; }

@media (max-width: 1150px) {
  .g-dash { grid-template-columns: 1fr; }
  .g-4 { grid-template-columns: repeat(2, 1fr); }
  .brand { min-width: 0; }
}
@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; padding: 12px 16px 0; }
  .nav { order: 3; width: 100%; }
  .workspace { padding: 0 6px 6px; }
  .panel { padding: 22px 16px 40px; border-radius: 24px; min-height: calc(100vh - 120px); }
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .huge { font-size: 48px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid > * { grid-column: auto !important; }
  .card { padding: 20px; border-radius: 22px; }
  .lines thead { display: none; }
  .lines tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .lines td:first-child { grid-column: span 2; }
}
@media print {
  body { background: #fff; }
  .topbar, .subnav, .actions, .filters, .btn { display: none !important; }
  .panel { padding: 0; }
}

/* sisend + nupp ühel real */
.field-row { display: flex; gap: 8px; align-items: stretch; }
.field-row > input, .field-row > select { flex: 1; min-width: 0; }
.field-row > .btn { flex: none; }
.label-row { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; color: var(--indigo); cursor: pointer; white-space: nowrap; }
.link-btn:hover { text-decoration: underline; }
/* päis: ainult Looka sõnamärk (sisselogimiskaardil ka ettevõtte nimi) */
.brand { flex: none; min-height: 44px; padding: 4px 8px; margin-left: -8px; border-radius: 12px; }
.brand-text { display: flex; flex-direction: column; gap: 4px; white-space: nowrap; }
.wordmark { font-size: 24px; font-weight: 600; line-height: 1; letter-spacing: -0.025em; color: #fff; }
.wordmark .oo { color: #c9b8e6; }
.brand-text .company { font-weight: 400; line-height: 1.2; }
a.brand:hover { color: #fff; }
.brand:focus-visible { outline: 2px solid #c9b8e6; outline-offset: 2px; }
@media (max-width: 760px) {
  .wordmark { font-size: 22px; }
}
.seg-sm a { padding: 6px 14px; font-size: 13px; }
/* töölaud: panga ja raamatupidamise saldo kõrvuti */
.balance-pair { display: flex; align-items: flex-end; gap: 40px; flex-wrap: wrap; margin: 18px 0 16px; }
.balance-pair .huge { margin: 6px 0 0; }
.balance-pair .big { margin-top: 6px; }
.hero .pill-warn { background: #ffd58a; color: #3d2a00; }
@media (max-width: 760px) { .balance-pair { gap: 18px; } }
.pill-warn { background: var(--warn-bg); color: var(--warn); }

/* ---------- kalender ---------- */
.dp-input, .card input.dp-input, .filters input.dp-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237b7b84' stroke-width='1.8'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 42px; cursor: pointer; }
.dp { position: absolute; z-index: 100; width: 300px; background: var(--panel); border-radius: 22px; padding: 14px; box-shadow: 0 22px 60px rgba(17,17,19,.18), 0 0 0 1px var(--line); font-family: var(--font); animation: dp-in .12s ease-out; }
@keyframes dp-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dp-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.dp-title { flex: 1; text-align: center; font-weight: 500; font-size: 15px; text-transform: capitalize; }
.dp-nav { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--card); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; }
.dp-nav:hover { background: var(--card-2); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-dow { text-align: center; font-size: 12px; color: var(--muted); padding: 6px 0; }
.dp-day { height: 36px; border: 0; background: none; border-radius: 12px; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; font-variant-numeric: tabular-nums; }
.dp-day:hover { background: var(--card); }
.dp-we { color: var(--muted); }
.dp-out { color: var(--faint); }
.dp-today { box-shadow: inset 0 0 0 1.5px var(--indigo); font-weight: 600; }
.dp-sel, .dp-sel:hover { background: var(--dark); color: #fff; box-shadow: none; }
.dp-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.dp-link { border: 0; background: none; font: inherit; font-size: 14px; color: var(--indigo); cursor: pointer; padding: 6px 10px; border-radius: 10px; }
.dp-link:hover { background: var(--card); }
.dp-muted { color: var(--muted); }
.dp-months { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.dp-month { height: 44px; font-size: 14px; }
.dp-mp .dp-title { text-transform: none; }
@media print { .dp { display: none; } }
/* sorteeritavad veerud */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); }
th.sortable::after { content: '↕'; margin-left: 6px; opacity: .3; font-size: 11px; }
th.sorted { color: var(--text); }
th.sorted[data-dir="asc"]::after { content: '↑'; opacity: .9; }
th.sorted[data-dir="desc"]::after { content: '↓'; opacity: .9; }
.dp-quick { display: flex; align-items: center; gap: 4px; }
.dp-chip { border: 0; background: var(--card); color: var(--text); font: inherit; font-size: 13px; padding: 6px 11px; border-radius: 999px; cursor: pointer; }
.dp-chip:hover { background: var(--dark); color: #fff; }
/* graafikute kohtsildid */
svg.chart .hit { cursor: pointer; }
svg.chart .bar { transition: fill .12s; }
svg.chart:not(.chart-light) .bar.hover { fill: #fff; }
svg.chart-light .bar { transition: opacity .12s; }
svg.chart-light:hover .bar:not(.hover) { opacity: .35; }
svg.chart-light text { fill: var(--muted); font-size: 12px; }
svg.chart-light .grid-line { stroke: var(--line); stroke-dasharray: 3 4; }
.ie-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: -4px 0 12px; font-size: 14px; color: var(--muted); }
.ie-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: 0; }
.ie-legend strong { color: var(--text); font-weight: 600; margin-left: 4px; font-variant-numeric: tabular-nums; }
.ie-legend strong.neg { color: #c43d54; }
.chart-pin.multi { align-items: stretch; gap: 3px; padding: 7px 11px; min-width: 170px; }
.chart-pin.multi .cp-date { text-align: center; margin-bottom: 2px; }
.cp-row { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.cp-row i { width: 8px; height: 8px; border-radius: 2px; }
.cp-row b { margin-left: auto; font-weight: 600; padding-left: 14px; }
.cp-sub { font-size: 11.5px; opacity: .6; }
.cp-sub b { font-weight: 500; }
.cp-total { border-top: 1px solid rgba(0,0,0,.1); padding-top: 3px; margin-top: 1px; }

.chart-readout { display: flex; align-items: baseline; gap: 10px; min-height: 24px; margin: 4px 0 6px; font-variant-numeric: tabular-nums; }
.chart-readout .cr-value { font-size: 16px; font-weight: 600; }
.chart-readout .cr-title { font-size: 13px; opacity: .65; }
.chart-pin { position: absolute; z-index: 90; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 4px 9px; border-radius: 9px; background: rgba(255,255,255,.82); color: #141416; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0,0,0,.12); white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1.2; }
.chart-pin::after { content: ''; position: absolute; left: var(--arrow-x, 50%); bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.chart-pin.below::after { bottom: auto; top: -5px; }
.chart-pin.on-dark { background: rgba(255,255,255,.9); }
.chart-pin .cp-value { font-size: 13px; font-weight: 600; }
.chart-pin .cp-date { font-size: 11px; opacity: .65; }

/* Arve ajalugu */
.timeline { list-style: none; margin: 4px 0 0; padding: 0; }
.tl-item { display: grid; grid-template-columns: 96px 1fr; gap: 16px; position: relative; padding: 0 0 18px; }
.tl-item::before { content: ''; position: absolute; left: 107px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--faint); box-shadow: 0 0 0 4px var(--panel); z-index: 1; }
.tl-item::after { content: ''; position: absolute; left: 111.5px; top: 12px; bottom: -6px; width: 1px; background: var(--line); }
.tl-item:last-child::after { display: none; }
.tl-ok::before { background: #2e9e6b; } .tl-bad::before { background: #d6455d; } .tl-warn::before { background: #e0a326; }
.tl-info::before { background: var(--indigo); } .tl-accent::before { background: #8a6fd1; }
.tl-when { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--muted); }
.tl-when span { display: block; font-size: 12px; color: var(--faint); }
.tl-body { padding-left: 18px; min-width: 0; }
.tl-title { font-weight: 500; }
.tl-meta, .tl-details { font-size: 13px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.tl-mail { margin-top: 8px; }
.tl-mail summary { cursor: pointer; font-size: 13px; color: var(--indigo); width: max-content; }
.tl-mail[open] { background: var(--card); border-radius: 14px; padding: 12px 14px; }
.tl-mail .kv { margin: 10px 0; }
.tl-text { white-space: pre-wrap; font-family: var(--font); font-size: 14px; background: var(--panel); border-radius: 10px; padding: 12px 14px; margin: 0; }
.mono { font-family: ui-monospace, Menlo, monospace; overflow-wrap: anywhere; }
@media (max-width: 640px) { .tl-item { grid-template-columns: 70px 1fr; gap: 10px; } .tl-item::before { left: 76px; } .tl-item::after { left: 80.5px; } }
@media print { .tl-mail { display: block; } .tl-mail > summary { display: none; } }


/* =====================================================================
   CRM 1. etapp: raam (külgmenüü + pillid, mobiilis alumine riba + sahtel), tööd, kliendid.
   Allikas: disain/looka-crm/visand.html („siit edasi: uued rakenduse komponendid"), Doris 14.11.2026.
   Kõrvalekalded: globaalsed reeglid (.check, .page-head mobiilis) on piiratud uute lehtedega,
   et olemasolevad raamatupidamise lehed ei muutuks.
   ===================================================================== */
:where(svg.ic) { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; width: 18px; height: 18px; flex: none; }
:focus-visible { outline: none; box-shadow: var(--focus); }
.side :focus-visible, .mtop :focus-visible, .tabbar :focus-visible, .drawer :focus-visible { box-shadow: 0 0 0 2px #c9b8e6; }
.text-link { color: var(--indigo); }
.pre-line { white-space: pre-line; }

.shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; padding: 16px 12px 16px 14px; scrollbar-width: none; }
.side .brand { margin: 0 0 14px; padding: 6px 10px; }
.side-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8d8d93; padding: 16px 12px 6px; }
.side .item, .drawer .item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: 14px; color: #a8a8b0; font-size: 15px; width: 100%; border: 0; background: none; font-family: inherit; cursor: pointer; text-align: left; }
.side .item svg, .drawer .item svg { width: 19px; height: 19px; }
.side a.item:hover, .side .item-btn:hover, .drawer a.item:hover, .drawer .item-btn:hover { color: #fff; background: #161618; }
.side .item.active, .drawer .item.active { color: #fff; background: var(--frame-2); }
.side .item.active svg, .drawer .item.active svg { stroke: #c9b8e6; }
.item-soon { cursor: default !important; }
.item .cnt { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #c9b8e6; color: #141416; font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.soon { margin-left: auto; font-size: 11px; color: #8d8d93; border: 1px solid #2c2c30; border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.side-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid #1f1f22; display: grid; gap: 2px; }
.side-foot form.inline { display: block; }
.side-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; color: #a8a8b0; font-size: 13px; line-height: 1.3; min-width: 0; }
.side-user .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.side-user .avatar { width: 34px; height: 34px; font-size: 14px; }
.main { min-width: 0; padding: 10px 10px 10px 0; }
.mtop { display: flex; align-items: center; gap: 12px; padding: 4px 6px 10px 8px; min-height: 58px; }
.mtop .brand { display: none; }
.tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a, .tab-soon { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 9px 17px; border-radius: 999px; background: var(--frame-2); color: #c4c4ca; font-size: 14px; white-space: nowrap; }
.tabs a:hover { color: #fff; background: #26262a; }
.tabs a.active { background: #fff; color: var(--text); }
.tabs .cnt { font-size: 12px; font-weight: 600; color: #c9b8e6; }
.tabs a.active .cnt { color: #4b3a8a; }
.tab-soon { background: none; color: #8d8d93; padding: 9px 10px; }
.tab-soon .soon { margin-left: 0; }
.mtop .topbar-right { margin-left: auto; }
.main .panel { min-height: calc(100vh - 78px); padding: 30px 34px 50px; }
.report-seg { margin: -6px 0 22px; }
.tabbar { display: none; }
.drawer { display: none; }
@media (max-width: 1150px) {
  .shell { grid-template-columns: 76px minmax(0, 1fr); }
  .side { padding: 16px 10px; align-items: center; }
  .side .brand .wordmark { font-size: 0; }
  .side .brand .wordmark::before { content: 'L'; font-size: 24px; }
  .side .brand .oo { display: none; }
  .side .item { width: 52px; justify-content: center; padding: 10px; position: relative; }
  .side .item .lbl, .side-label, .side .item .soon, .side-user .nm { display: none; }
  .side .item .cnt { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; font-size: 11px; padding: 0 5px; }
  .side-user { justify-content: center; padding: 8px 0; }
  .main .panel { padding: 26px 26px 44px; }
}
@media (max-width: 760px) {
  .shell { display: block; }
  .side { display: none; }
  .main { padding: 0 6px 6px; }
  .mtop { flex-wrap: wrap; padding: 10px 8px; gap: 10px; }
  .mtop .brand { display: flex; }
  .mtop .tabs { order: 3; margin: 0 -8px; padding: 0 8px; width: calc(100% + 16px); }
  .hide-m { display: none !important; }
  .main .panel { padding: 22px 16px 100px; border-radius: 24px; min-height: calc(100vh - 120px); }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; background: var(--frame); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid #1f1f22; }
  .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 52px; justify-content: center; color: var(--frame-text); font: inherit; font-size: 11.5px; border-radius: 14px; position: relative; background: none; border: 0; cursor: pointer; }
  .tabbar svg { width: 22px; height: 22px; }
  .tabbar .active { color: #fff; }
  .tabbar .active svg { stroke: #c9b8e6; }
  .tabbar .count { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #c9b8e6; color: #141416; font-size: 11px; font-weight: 600; display: grid; place-items: center; }
  h1 { font-size: 26px; }
  .drawer[open] { display: block; position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: 100%; max-height: 85vh; overflow-y: auto; border: 0; border-radius: 24px 24px 0 0; background: var(--frame); color: #fff; padding: 12px 14px calc(18px + env(safe-area-inset-bottom)); }
  .drawer::backdrop { background: rgba(0,0,0,.55); }
  .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 10px; }
  .drawer-nav { display: grid; gap: 2px; }
  .drawer-foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid #1f1f22; display: grid; gap: 2px; }
  .drawer form.inline { display: block; }
}
@media print {
  .side, .mtop, .tabbar, .mobile-actions, .drawer { display: none !important; }
  .shell { display: block; }
  .main { padding: 0; }
}

/* staatused */
.st { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.st::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; }
.st-paring { background: var(--st-paring-bg); color: var(--st-paring); } .st-kinnitatud { background: var(--st-kinnitatud-bg); color: var(--st-kinnitatud); }
.st-pildistatud { background: var(--st-pildistatud-bg); color: var(--st-pildistatud); } .st-yleantud { background: var(--st-yleantud-bg); color: var(--st-yleantud); }
.st-arve { background: var(--st-arve-bg); color: var(--st-arve); } .st-makstud { background: var(--st-makstud-bg); color: var(--st-makstud); }
.st-hilineb { background: var(--st-hilineb-bg); color: var(--st-hilineb); } .st-loobutud { background: var(--st-loobutud-bg); color: var(--st-loobutud); text-decoration: line-through; }
.sdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.sdot.paring { background: var(--st-paring-dot); } .sdot.kinnitatud { background: var(--st-kinnitatud-dot); } .sdot.pildistatud { background: var(--st-pildistatud-dot); }
.sdot.yleantud { background: var(--st-yleantud-dot); } .sdot.arve { background: var(--st-arve-dot); } .sdot.makstud { background: var(--st-makstud-dot); } .sdot.loobutud { background: var(--st-loobutud-dot); }
.age { font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: var(--card); color: var(--muted); white-space: nowrap; }
.age-warn { background: var(--st-yleantud-bg); color: var(--st-yleantud); } .age-bad { background: var(--st-hilineb-bg); color: var(--st-hilineb); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; padding: 7px 13px; border-radius: 999px; background: var(--card); color: var(--muted); border: 0; font: inherit; font-size: 13px; cursor: pointer; min-height: 34px; }
.chip:hover { color: var(--text); }
.chip.active { background: var(--dark); color: #fff; }
.chip-row { margin: -4px 0 16px; }
.pill-lilac { background: var(--lilac); color: #4b3a8a; }

/* tööriistariba ja filtrid */
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar .search { flex: 1; min-width: 220px; max-width: 360px; }
.toolbar input, .toolbar select { padding: 9px 13px; }
.toolbar select { width: auto; }
.toolbar .check { font-size: 14px; color: var(--muted); }
.filter-btn { display: none; }
@media (max-width: 760px) {
  .toolbar { flex-wrap: wrap; }
  .toolbar .search { max-width: none; min-width: 0; flex: 1; }
  .toolbar[data-toolbar] select, .toolbar[data-toolbar] .tb-check { display: none; }
  .toolbar[data-toolbar].open select, .toolbar[data-toolbar].open .tb-check { display: flex; width: 100%; }
  .filter-btn { display: inline-flex; min-height: 44px; }
  .page-head.ph-tight { flex-wrap: nowrap; }
  .page-head.ph-tight .seg { display: none; }
  .page-head.ph-tight .actions { flex: none; }
  .chip-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: -4px -16px 16px; padding: 0 16px; }
  .chip { flex: none; min-height: 40px; }
}

/* toru */
.board { display: grid; grid-template-columns: repeat(6, minmax(172px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.board.board-7 { grid-template-columns: repeat(7, minmax(172px, 1fr)); }
.col { background: var(--card); border-radius: 22px; padding: 12px; min-width: 0; }
.col-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 10px; flex-wrap: wrap; }
.col-head h3 { font-size: 15px; font-weight: 500; }
.col-head .n { color: var(--muted); font-size: 14px; }
.col-head .sum { flex-basis: 100%; margin: 0 0 0 18px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.col-group { font-size: 11.5px; color: var(--muted); padding: 8px 6px 6px; text-transform: uppercase; letter-spacing: .04em; }
.col-empty { color: var(--muted); text-align: center; padding: 18px 0; font-size: 14px; }
.col-more { display: block; text-align: center; font-size: 13px; color: var(--muted); padding: 8px; }
.jcard { display: block; background: var(--panel); border-radius: 16px; padding: 12px 14px; margin-bottom: 8px; }
.jcard:hover { box-shadow: inset 0 0 0 1px #d6d6dc; color: var(--text); }
.jcard.flag { box-shadow: inset 3px 0 0 #8a6fd1; }
.jcard.flag:hover { box-shadow: inset 3px 0 0 #8a6fd1, inset 0 0 0 1px #d6d6dc; }
.jcard.lost .jc-title { text-decoration: line-through; color: var(--muted); }
.jc-title { font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.jc-client { font-size: 13px; color: var(--muted); margin-top: 2px; }
.jc-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; margin-top: 8px; }
.jc-meta span { display: inline-flex; align-items: center; gap: 4px; }
.jc-meta svg { width: 14px; height: 14px; stroke: var(--muted); }
.jc-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.jc-price { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; }
.jc-flag { font-size: 12px; color: #4b3a8a; background: var(--lilac); padding: 3px 9px; border-radius: 999px; }
.stage-tabs { display: none; }
@media (max-width: 1150px) { .board { grid-template-columns: repeat(6, minmax(200px, 1fr)); } .board.board-7 { grid-template-columns: repeat(7, minmax(200px, 1fr)); } }
@media (max-width: 760px) {
  .board, .board.board-7 { display: block; overflow: visible; }
  .board .col { display: none; background: none; padding: 0; }
  .board .col.current { display: block; }
  .board .col-head { display: none; }
  .stage-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px 14px; padding: 0 16px; scrollbar-width: none; }
  .stage-tabs a { flex: none; display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 14px; border-radius: 999px; background: var(--card); color: var(--muted); font-size: 14px; }
  .stage-tabs a.active { background: var(--dark); color: #fff; }
  .stage-tabs b { font-weight: 600; }
  .jcard { background: var(--card); padding: 14px 16px; }
}

/* nimekiri: laual tabel, mobiilis read */
.list-mob { display: none; }
.list-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
@media (max-width: 760px) { .list-desk { display: none; } .list-mob { display: block; } }

/* töö kaart */
.crumb { font-size: 14px; color: var(--muted); margin-bottom: 6px; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.job-head { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 18px; }
.job-head > div:first-child { min-width: 0; flex: 1 1 320px; }
.job-head h1 { line-height: 1.15; overflow-wrap: anywhere; }
.job-head .sub { color: var(--muted); margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.job-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.btn svg.ext { width: 13px; height: 13px; }
.btn-white { background: #fff; }
/* mitteaktiivne nupp: ilma läbipaistvuseta, tekst #6b6b74 taustal #f2f2f4 = 4,7:1 (AA) */
.btn-disabled, .btn-disabled:hover { background: var(--card); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); cursor: default; }
.stepper { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin: 0 0 18px; list-style: none; padding: 0; }
.stepper li { font-size: 12px; color: var(--muted); padding-top: 12px; position: relative; }
.stepper li::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; border-radius: 5px; background: var(--card-2); }
.stepper li.done::before { background: var(--dark); }
.stepper li.now { color: var(--text); font-weight: 600; }
.stepper li.now::before { background: var(--indigo); }
.stepper li span { display: block; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.stepper.lost li::before { background: var(--card-2) !important; }
.decision-box { display: flex; gap: 14px; align-items: center; background: var(--lilac); color: #2f2560; border-radius: 18px; padding: 14px 18px; margin-bottom: 16px; flex-wrap: wrap; }
.decision-box .who { width: 36px; height: 36px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-weight: 600; color: #4b3a8a; flex: none; }
.decision-box .txt { flex: 1; min-width: 200px; }
.decision-box .txt b { display: block; }
.need-field { margin-bottom: 16px; max-width: 560px; }
.svc { display: flex; gap: 6px; flex-wrap: wrap; }
.svc .pill { background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.price-table td { padding: 9px 0; }
.price-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 12px; }
.price-table tr.total td { font-size: 18px; font-weight: 500; border-top: 1px solid #d6d6dc; }
.empty-box { color: var(--muted); padding: 14px; border: 1.5px dashed #d6d6dc; border-radius: 16px; }
.links { display: grid; gap: 8px; }
.link-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: var(--panel); min-height: 56px; }
a.link-row:hover { box-shadow: inset 0 0 0 1px #d6d6dc; color: var(--text); }
.link-row .ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--card-2); flex: none; }
.link-row .l-main { flex: 1; min-width: 0; }
.link-row .l-main span { display: block; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-row.empty-link { background: none; border: 1.5px dashed #d6d6dc; color: var(--muted); }
.link-add summary { list-style: none; cursor: pointer; }
.link-add summary::-webkit-details-marker { display: none; }
.link-add[open] summary { margin-bottom: 8px; }
.more-actions summary { cursor: pointer; color: var(--muted); }
.tl-future::before { background: var(--card) !important; box-shadow: 0 0 0 4px var(--card), inset 0 0 0 2px #c8c8ce !important; }
.tl-future .tl-title { color: var(--muted); font-weight: 400; }
.mobile-actions { display: none; }
@media (max-width: 760px) {
  .stepper { display: flex; overflow-x: auto; gap: 6px; scrollbar-width: none; margin: 0 -16px 16px; padding: 0 16px; }
  .stepper li { flex: 0 0 96px; }
  .job-head .actions { display: none; }
  .job-grid { display: flex; flex-direction: column; }
  .job-grid > .stack { display: contents; }
  .mobile-actions { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 8px; position: fixed; z-index: 49; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); padding: 10px 12px; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(17,17,19,.06); }
  .mobile-actions .btn, .mobile-actions form, .mobile-actions form .btn { justify-content: center; min-height: 48px; padding: 12px 10px; width: 100%; }
  .mobile-actions .btn { white-space: normal; text-align: center; line-height: 1.15; }
  .main .panel.has-actions { padding-bottom: 170px; }
}

/* uus töö */
.svc-pick { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px 16px; }
.svc-pick legend { color: var(--muted); font-size: 13px; margin-bottom: 8px; padding: 0; }
.svc-pick .check { font-size: 14px; min-height: 36px; }
.price-live { font-size: 26px; font-variant-numeric: tabular-nums; padding-top: 4px; }
@media (max-width: 760px) {
  .svc-pick .check { min-height: 44px; }
  .sticky-actions { position: sticky; bottom: calc(64px + env(safe-area-inset-bottom)); background: var(--card); padding: 10px 0; margin-bottom: -10px; }
}

/* kliendi kaart */
.client-head { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.client-head > div:nth-child(2) { min-width: 0; flex: 1 1 280px; }
.client-head .pills { margin-top: 8px; }
.client-head > .list-icon { width: 64px; height: 64px; font-size: 22px; background: var(--hero); color: #fff; }
.client-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px 0; }
.kpi { background: var(--card); border-radius: 20px; padding: 16px 18px; min-width: 0; }
.kpi .lbl { font-size: 13px; color: var(--muted); }
.kpi .val { font-size: 26px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.kpi .sub { font-size: 12px; color: var(--muted); }
.contact { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.contact:last-child { border-bottom: 0; }
.contact .list-icon { background: #fff; }
.contact .c-name { font-weight: 500; }
.contact .c-act { display: flex; gap: 6px; }
.round-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.round-btn:hover { background: var(--card-2); }
@media (max-width: 760px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi .val { font-size: 22px; }
  .client-head .actions { width: 100%; }
  .round-btn { width: 44px; height: 44px; }
  .tbl-m-hide { display: none; }
}

/* päevakava */
.agenda { max-width: 760px; }
.am-day { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 18px 0 8px; }
.am-day:first-child { margin-top: 0; }
.am-day.today { color: var(--text); font-weight: 600; }
.am-item { display: grid; grid-template-columns: 54px 4px minmax(0, 1fr) auto; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--card); margin-bottom: 8px; min-height: 64px; align-items: center; }
.am-item:hover { color: var(--text); box-shadow: inset 0 0 0 1px #d6d6dc; }
.am-item.offered { background: var(--panel); border: 1.5px dashed var(--st-paring-dot); }
.am-item .t { font-size: 17px; font-variant-numeric: tabular-nums; }
.am-item .bar { align-self: stretch; border-radius: 4px; }
.am-item .ttl { font-weight: 500; display: block; }
.am-item .loc { font-size: 13px; color: var(--muted); display: block; }
@media (max-width: 760px) { .am-item { grid-template-columns: 46px 4px minmax(0, 1fr); } .am-item .st { grid-column: 3; justify-self: start; } }
.kv dd { min-width: 0; overflow-wrap: anywhere; }
.svc .pill { white-space: normal; }
@media (max-width: 760px) { .card-head { flex-wrap: wrap; } }
@media (max-width: 760px) {
  .mobile-actions > * { min-width: 0; }
  .mobile-actions .btn { font-size: 14px; padding: 10px 8px; gap: 6px; }
}

/* ---------- 2. etapp: töölaud „Täna", „Ootab sinu otsust" ---------- */
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: #fff; color: var(--text); padding: 10px 16px; border-radius: 12px; }
.skip:focus { top: 12px; }
.main .panel:focus { outline: none; }
.icon-btn .count { position: absolute; top: -2px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #c9b8e6; color: #141416; font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.mtop .topbar-right { display: flex; gap: 8px; }
.greet .muted { margin-top: 4px; }
.g-home { grid-template-columns: minmax(340px, 1fr) minmax(0, 1.45fr); }
@media (max-width: 1150px) { .g-home { grid-template-columns: 1fr; } }
.calhero { display: flex; flex-direction: column; }
.cal-top { display: flex; align-items: center; gap: 16px; }
.cal-day { font-size: 64px; line-height: .9; letter-spacing: -.04em; font-weight: 500; font-variant-numeric: tabular-nums; }
.cal-wd { font-size: 20px; line-height: 1.2; }
.cal-mon { font-size: 13px; color: rgba(255,255,255,.8); }
.cal-top .card-link { margin-left: auto; }
.wstrip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 18px 0 14px; background: rgba(10,10,30,.32); border-radius: 18px; padding: 6px; }
.wstrip a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 0 6px; border-radius: 13px; color: #fff; min-height: 60px; justify-content: center; }
.wstrip a:hover { background: rgba(255,255,255,.14); color: #fff; }
.wstrip a:focus-visible { box-shadow: 0 0 0 2px #fff; outline: none; }
.wstrip .wd { font-size: 12px; color: rgba(255,255,255,.8); }
.wstrip .d { font-size: 17px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.wstrip .dt { width: 5px; height: 5px; border-radius: 50%; }
.wstrip a.has .dt { background: #fff; }
.wstrip a.sel { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.85); }
.wstrip a.today { background: #fff; color: var(--text); }
.wstrip a.today .wd { color: var(--muted); }
.wstrip a.today .dt { background: #6e5a9c; }
.wstrip a.today:hover { color: var(--text); }
.ev { display: flex; align-items: center; gap: 8px; border-radius: 16px; background: rgba(255,255,255,.93); color: var(--text); margin-bottom: 8px; min-height: 56px; padding-right: 12px; }
.ev:hover { background: #fff; }
.ev-link { flex: 1; min-width: 0; display: grid; grid-template-columns: 50px 4px minmax(0, 1fr); gap: 12px; align-items: center; padding: 11px 0 11px 14px; color: var(--text); border-radius: 16px; }
.hero .ev-link:hover { color: var(--text); }
.ev .t { font-variant-numeric: tabular-nums; font-weight: 500; }
.ev .bar { width: 4px; align-self: stretch; border-radius: 4px; }
.ev-main { min-width: 0; }
.ev .ttl { font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev .loc { font-size: 13px; color: var(--muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev .tag { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--dark); color: #fff; white-space: nowrap; border: 0; font-family: inherit; }
.ev .tag.q { background: var(--st-yleantud-bg); color: var(--st-yleantud); cursor: pointer; min-height: 32px; padding: 6px 12px; font-weight: 500; }
.ev .tag.q:hover { box-shadow: inset 0 0 0 1px var(--st-yleantud-dot); }
.ev .tag.tag-offer { background: var(--st-paring-bg); color: var(--st-paring); }
.ev.past { background: rgba(255,255,255,.62); }
.ev.past .t, .ev.past .ttl { color: #3a3a40; }
.ev.past .loc { color: #4a4a52; }
.ev-act { flex: none; }
.ev-more { display: block; color: #fff; font-size: 14px; padding: 2px 4px 8px; }
.cal-empty { color: rgba(255,255,255,.9); padding: 6px 2px 12px; }
.cal-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; font-size: 14px; color: rgba(255,255,255,.9); flex-wrap: wrap; }
.cal-foot b { font-weight: 500; color: #fff; }
.decide .card-head h2 { display: flex; align-items: center; gap: 10px; }
.n-badge { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 9px; border-radius: 999px; background: var(--dark); color: #fff; font-size: 14px; font-weight: 600; }
.decide .chips { margin: -4px 0 4px; }
.chip b { font-weight: 600; margin-left: 4px; }
.agent-warn { margin: 0 0 10px; padding: 10px 14px; font-size: 14px; }
.todo-list { list-style: none; margin: 0; padding: 0; }
.todo { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 6px 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); }
.todo:last-child { border-bottom: 0; }
.todo[hidden] { display: none; }
.todo .who { width: 40px; height: 40px; border-radius: 50%; background: var(--lilac); color: #4b3a8a; display: grid; place-items: center; font-weight: 600; font-size: 14px; }
.todo .who.sys { background: var(--card-2); color: var(--text); }
.todo-main { min-width: 0; }
.todo-kind { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.todo-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-sub { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-actions { display: flex; gap: 6px; }
.todo-actions .btn-sm { min-height: 36px; }
.todo-actions form.inline { display: inline-flex; }
.todo.urgent .todo-kind::before { content: 'Kiire · '; color: var(--st-hilineb); font-weight: 600; }
.todo.done .todo-title { color: var(--muted); }
.todo-more { display: block; text-align: center; padding: 12px; margin-top: 6px; border-radius: 14px; background: var(--card); font-size: 14px; }
.todo-more[hidden] { display: none; }
.decide-full .todo-sub, .decide-full .todo-title { white-space: normal; }
@media (max-width: 760px) {
  .todo { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .todo .who { width: 36px; height: 36px; }
  .todo-title, .todo-sub { white-space: normal; }
  .todo .age { grid-column: 3; grid-row: 1; align-self: start; }
  .todo-actions { grid-column: 2 / 4; }
  .todo-actions > a, .todo-actions > form { flex: 1; }
  .todo-actions .btn-sm { min-height: 44px; padding: 10px 16px; font-size: 14px; width: 100%; justify-content: center; }
  .decide .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .decide .chip { flex: none; min-height: 40px; }
  .ev-link { grid-template-columns: 46px 4px minmax(0, 1fr); padding: 11px 0 11px 12px; }
  .ev .ttl, .ev .loc { white-space: normal; }
  .ev { flex-wrap: wrap; padding: 0 12px 0 0; }
  .ev-act, .ev > .tag { margin: -6px 0 10px 74px; }
  .ev-link { flex-basis: 100%; }
  .cal-day { font-size: 56px; }
  .greet { flex-wrap: nowrap; align-items: flex-start; }
  .greet .actions { flex: none; }
}
.pipe-card { margin-top: 16px; }
.pipe { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.pipe-step { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 18px; background: var(--panel); min-width: 0; }
.pipe-step:hover { box-shadow: inset 0 0 0 1px #d6d6dc; color: var(--text); }
.pipe-top { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.pipe-n { font-size: 30px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; margin-top: 6px; }
.pipe-sum { font-size: 14px; font-variant-numeric: tabular-nums; }
.pipe-note { font-size: 12px; color: var(--muted); margin-top: 2px; }
.pipe-note.warn { color: var(--st-yleantud); }
.pipe-note.bad { color: var(--st-hilineb); }
.pipe-foot { display: flex; gap: 6px 22px; flex-wrap: wrap; margin-top: 14px; font-size: 14px; color: var(--muted); }
.pipe-foot b { color: var(--text); font-weight: 500; }
@media (max-width: 1150px) { .pipe { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  .pipe { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 0 20px 4px; scrollbar-width: none; }
  .pipe-step { flex: 0 0 136px; scroll-snap-align: start; }
  .pipe-n { font-size: 26px; }
}
.home-money { margin-top: 16px; }
.money-meta { font-size: 13px; color: #a8a8b0; }
.money-meta a { color: #ffd58a; }
.ok-text { color: #8fe3b0; }
.dark .big { margin-top: 6px; }
.money-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.money-mini { display: block; background: var(--dark-2); border-radius: 18px; padding: 14px 16px; color: #fff; min-width: 0; }
.money-mini:hover { color: #fff; box-shadow: inset 0 0 0 1px #3a3a40; }
.money-mini .lbl, .money-mini .sub { font-size: 13px; color: #a8a8b0; }
.money-mini .sub { font-size: 12px; margin-top: 2px; }
.money-mini .val { font-size: 22px; font-variant-numeric: tabular-nums; margin-top: 4px; white-space: nowrap; }
@media (max-width: 760px) { .money-row { grid-template-columns: 1fr 1fr; } .money-row .money-mini:last-child { grid-column: span 2; } }
.card-note { margin-top: 10px; }
.undo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.undo span { flex: 1; min-width: 180px; }
.lost-box { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lost-box span { flex: 1; }
.no-contact b { font-weight: 600; }
.pill-bad { background: var(--st-hilineb-bg); color: var(--st-hilineb); }
.more-actions .card-head { margin-bottom: 8px; }
.lose { margin-top: 12px; }
.lose summary { list-style: none; cursor: pointer; display: inline-flex; }
.lose summary::-webkit-details-marker { display: none; }
.lose[open] summary { margin-bottom: 10px; }
.field-row .grow { flex: 1; min-width: 0; }
.field-row .w-time { width: 130px; }
.nf-check { align-self: flex-end; min-height: 44px; }
.check-row { display: flex; gap: 22px; flex-wrap: wrap; }
div.label { display: block; color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.dispute-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.inv-jobs { margin-top: 16px; }
.inv-jobs .list-item { gap: 10px; }
.inv-link { margin-top: 12px; max-width: 560px; }
.list-mob .list-title { white-space: normal; }
.list-title .badge { margin-left: 4px; vertical-align: 1px; }