/* Admini disainisüsteem — üks fail, ilma build-sammuta.

   Tokenid on ainus tõeallikas: komponendid EI kasuta kõvakodeeritud
   värve ega juhuslikke vahesid. Spacing käib 4 px sammuga (--sp-*),
   värvidel on kolm rolli: pind, tekst, semantiline olek. Sügav sinine
   on E-Tehno põhivärv; roheline = valmis, oranž = vajab tähelepanu,
   punane = probleem. Värv ei ole kunagi AINUS eristaja — kaasas käib
   märgis, ikoon või tekst. */

:root {
    /* Pinnad ja jooned */
    --c-bg: #f5f6f8;
    --c-surface: #ffffff;
    --c-border: #e4e7ec;
    --c-border-strong: #cfd4dd;

    /* Tekst */
    --c-text: #131b2e;
    --c-text-soft: #4a5468;
    --c-text-faint: #8e97a8;

    /* Bränd: sügav sinine */
    --c-primary: #1e40af;
    --c-primary-hover: #1a3696;
    --c-primary-soft: #eef3fe;
    --c-primary-border: #b9ccf5;

    /* Külgriba tume pind */
    --c-side-bg: #152357;
    --c-side-line: rgba(255, 255, 255, .12);
    --c-side-text: rgba(255, 255, 255, .78);
    --c-side-faint: rgba(255, 255, 255, .58);
    --c-side-hover: rgba(255, 255, 255, .07);
    --c-side-active: rgba(255, 255, 255, .12);
    --c-side-accent: #7ba3f7;

    /* Semantilised olekud */
    --c-success: #067647;
    --c-success-soft: #ecfdf3;
    --c-success-border: #abefc6;
    --c-warning: #b54708;
    --c-warning-soft: #fffaeb;
    --c-warning-border: #fedf89;
    --c-danger: #b42318;
    --c-danger-soft: #fef3f2;
    --c-danger-border: #fda29b;

    /* Graafikud */
    --c-chart: #5b8def;
    --c-chart-soft: #b9ccf5;
    --c-chart-faint: #dde7fb;
    /* Eelmine kuu töölaua kuugraafikul (kasutaja 30.09): neutraalne hall taust. */
    --c-chart-ref: #c5cad3;

    /* Spacing: 4 px baas */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;

    /* Kuju */
    --radius: 8px;
    --radius-sm: 6px;
    --shadow: 0 1px 2px rgba(16, 24, 40, .05);
    --focus-ring: 0 0 0 3px rgba(30, 64, 175, .22);
}

* { box-sizing: border-box; margin: 0; }

body {
    /* Süsteemifondid: Google Fonts lekitaks töötajate IP-d ja nõuaks
       CSP-s välist päritolu. */
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background: var(--c-bg);
    color: var(--c-text);
    font-size: 14.5px;
    line-height: 1.55;
}

.container { max-width: 1080px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }

/* ── Külgmenüüga raam ── */
.shell { display: flex; min-height: 100vh; }

/* Külgriba on tume sügavsinine pind: eristab navigatsiooni tööalast
   ja kannab E-Tehno põhivärvi. Menüü on rühmitatud (igapäevane töö /
   haldus / ülevaade / süsteem), et 13+ punkti ei loeks ühe pika reana. */
.sidebar {
    width: 232px;
    flex-shrink: 0;
    background: var(--c-side-bg);
    color: var(--c-side-text);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.sidebar__brand {
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -.01em;
    color: #fff;
    padding: var(--sp-4) var(--sp-4) var(--sp-3);
}

/* Üldine rahulolu ettevõtte nimega samal real (ainult üldõigustega
   adminile). Ikoon sama keel mis kommentaariridadel. */
.sidebar__brand--row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.sidebar__score {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #6ee7a8;
    font-size: .82rem;
    text-decoration: none;
    white-space: nowrap;
}
.sidebar__score:hover { text-decoration: none; }
.sidebar__score:hover strong { text-decoration: underline; }
.sidebar__score strong { font-weight: 700; }
.sidebar__score-icon {
    width: 22px; height: 22px;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(110, 231, 168, .14); color: #6ee7a8;
    flex: 0 0 auto;
}
.sidebar__score--neg { color: #fda29b; }
.sidebar__score--neg .sidebar__score-icon { background: rgba(253, 162, 155, .14); color: #fda29b; }

.sidebar__nav { flex: 1; padding: 0 var(--sp-2) var(--sp-2); overflow-y: auto; }

/* Rühma pealkiri: vaikne suurtähtsilt, esimesel rühmal pealkirja pole. */
.side-group { margin-top: var(--sp-4); }
.side-group:first-child { margin-top: var(--sp-1); }
.side-group__title {
    display: block;
    font-size: .66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--c-side-faint);
    padding: 0 var(--sp-3) var(--sp-1);
}

.sidebar__nav a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .42rem var(--sp-3);
    border-radius: var(--radius-sm);
    color: var(--c-side-text);
    font-weight: 500;
    font-size: .89rem;
    margin-bottom: 1px;
    position: relative;
}

.sidebar__nav a svg { flex-shrink: 0; opacity: .65; width: 17px; height: 17px; }
.sidebar__nav a:hover { background: var(--c-side-hover); color: #fff; text-decoration: none; }
.sidebar__nav a:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .4); }
/* Aktiivne: heledam pind + õhuke aktsentriba vasakul — selge, aga vaikne. */
.sidebar__nav a.is-active { background: var(--c-side-active); color: #fff; font-weight: 600; }
.sidebar__nav a.is-active svg { opacity: 1; }
.sidebar__nav a.is-active::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--c-side-accent);
}

/* Profiiliala all: nimi + roll, seejärel konto lingid ja väljalogimine. */
.sidebar__footer { padding: var(--sp-3) var(--sp-4) var(--sp-4); border-top: 1px solid var(--c-side-line); }
.sidebar__user { display: block; font-weight: 600; font-size: .85rem; margin-bottom: var(--sp-2); color: #fff; }
.sidebar__user:hover { text-decoration: none; color: #fff; }
.sidebar__user:hover strong { text-decoration: underline; }
.sidebar__user small { color: var(--c-side-faint); font-weight: 400; }
.sidebar__account { display: block; font-size: .78rem; margin-bottom: .55rem; color: var(--c-side-text); }
.sidebar__account:hover { color: #fff; }

.main { flex: 1; min-width: 0; }
.content { max-width: 1400px; padding: var(--sp-5) var(--sp-6) var(--sp-8); }

/* Mobiilipäis: nähtav ainult kitsal ekraanil, avab külgriba sahtlina. */
.topbar-m { display: none; }

.nav-backdrop { display: none; }

@media (max-width: 900px) {
    .shell { flex-direction: column; }
    .nav-backdrop {
        /* Baasreegel peidab; siin peab display tagasi tulema, muidu ei
           saa x-show teda kunagi nähtavale (inline none eemaldatakse,
           aga CSS-i none jääks kehtima). */
        display: block;
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(16, 24, 40, .45);
        border: 0;
        padding: 0;
        cursor: default;
    }
    .topbar-m {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        position: sticky;
        top: 0;
        z-index: 50;
        background: var(--c-side-bg);
        color: #fff;
        padding: .55rem var(--sp-4);
    }
    .topbar-m__brand { font-weight: 700; font-size: .98rem; }
    .topbar-m__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px; height: 38px;
        margin-left: -8px;
        border: 0;
        border-radius: var(--radius-sm);
        background: transparent;
        color: #fff;
        cursor: pointer;
    }
    .topbar-m__btn:hover { background: var(--c-side-hover); }

    /* Külgriba muutub vasakult avanevaks sahtliks. */
    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 60;
        width: min(280px, 85vw);
        height: 100dvh;
        transform: translateX(-100%);
        transition: transform .18s ease;
        box-shadow: none;
    }
    .shell.nav-open .sidebar { transform: none; }
    .content { padding: var(--sp-4) var(--sp-3) var(--sp-6); }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar { transition: none; }
}

h1 { font-size: 1.45rem; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.005em; }
h3 { font-size: .95rem; font-weight: 600; }

a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Päis ── */
header.topbar {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    position: sticky;
    top: 0;
    z-index: 40;
}

header.topbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 3.4rem;
}

.brand { font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em; margin-right: .75rem; }

nav.mainnav { display: flex; align-items: center; gap: .15rem; flex-wrap: wrap; }

nav.mainnav a {
    color: var(--c-text-soft);
    padding: .45rem .7rem;
    border-radius: var(--radius-sm);
    font-weight: 500;
}

nav.mainnav a:hover { background: var(--c-bg); color: var(--c-text); text-decoration: none; }
nav.mainnav a.is-active { background: var(--c-primary-soft); color: var(--c-primary); font-weight: 600; }

/* ── Kaardid ── */
.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--sp-5);
    box-shadow: var(--shadow);
    margin-bottom: var(--sp-4);
}

.card > h1:first-child, .card > h2:first-child { margin-bottom: .9rem; }


.page-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }

/* ── Vormid ── */
.field { margin-bottom: .9rem; }
.field label { display: block; margin-bottom: .3rem; font-weight: 600; font-size: .82rem; color: var(--c-text-soft); }

input, select, textarea {
    width: 100%;
    padding: .5rem .7rem;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-sm);
    font: inherit;
    color: var(--c-text);
    background: var(--c-surface);
    transition: border-color .12s, box-shadow .12s;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .12);
}

input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--c-primary); }

.form-row { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; }
.form-row .field { margin-bottom: 0; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }

.check { display: inline-flex; gap: .45rem; align-items: center; font-weight: 500; }

.error { color: var(--c-danger); font-size: .82rem; margin-top: .3rem; }

/* ── Nupud ── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1rem;
    background: var(--c-primary);
    color: #fff;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .12s;
    white-space: nowrap;
}

.btn:hover { background: var(--c-primary-hover); text-decoration: none; }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.btn--secondary { background: var(--c-surface); color: var(--c-text); border-color: var(--c-border-strong); }
.btn--secondary:hover { background: var(--c-bg); }

/* Reatoimingud on VAIKSED: hele taustatoon + tume tekst, sama keel
   mis olekumärgistel — tabel loeb rahulikult, värv on vihje. Täisvärv
   on ainult lehe põhitegevustel (Salvesta, Uus broneering) ja päriselt
   hävitaval tegevusel (--danger-strong). */
.btn--danger { background: #fef3f2; color: var(--c-danger); border-color: #fda29b; }
.btn--danger:hover { background: #fee4e2; }

.btn--ok { background: #ecfdf3; color: #067647; border-color: #abefc6; }
.btn--ok:hover { background: #d1fadf; }

.btn--danger-strong { background: var(--c-danger); color: #fff; border-color: transparent; }
.btn--danger-strong:hover { background: #912018; }

.btn--success { background: var(--c-success); }
.btn--success:hover { background: #05603a; }

.btn--sm { padding: .3rem .7rem; font-size: .82rem; }

/* ── Tabelid ── */
table { width: 100%; border-collapse: collapse; }

thead tr { border-bottom: 1px solid var(--c-border) !important; }

th {
    text-align: left;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--c-text-faint);
    padding: .5rem .6rem !important;
    white-space: nowrap;
}

td { padding: .55rem .6rem !important; border-bottom: 1px solid #f0f2f5; vertical-align: middle; }

tbody tr:hover { background: #f8f9fb; }
tbody tr:last-child td { border-bottom: 0; }

/* Kontrollitud horisontaalne kerimine: tabel kerib OMA konteineris,
   mitte kogu leht. Kitsal ekraanil peidetakse teisejärgulised veerud
   (.col-sec) enne, kui kerima peab. */
.table-wrap { overflow-x: auto; margin: 0 calc(-1 * var(--sp-2)); padding: 0 var(--sp-2); }
@media (max-width: 720px) {
    .col-sec { display: none; }
    /* Pikk makselabel tohib kitsal ekraanil murduda — muidu venitab
       tabeli asjatult laiaks. */
    td .status-dot { white-space: normal; }
}

/* Numbriveerud joonduvad ja loetakse kiiresti. */
.num, .tab-nums { font-variant-numeric: tabular-nums; }

/* ── Märgised ── */
.badge {
    display: inline-block;
    padding: .1rem .55rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
    white-space: nowrap;
}

.badge--ok { background: var(--c-success-soft); color: var(--c-success); }
.badge--warn { background: var(--c-warning-soft); color: var(--c-warning); }
.badge--danger { background: var(--c-danger-soft); color: var(--c-danger); }
.badge--muted { background: #f2f4f7; color: var(--c-text-soft); }
.badge--info { background: var(--c-primary-soft); color: var(--c-primary); }

/* ── Vahekaardid ──
   Segmenteeritud "päris tabide" stiil: hall alus, aktiivne valgel
   padjal kerge varjuga. Jagatud punkti lehe ja seadete vahel — kaks
   eri tabikuju loetaks kahe eri asjana. */
.tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    background: #f2f4f7;
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 1.25rem;
}

.tabs button {
    background: transparent;
    border: 0;
    border-radius: 7px;
    padding: .45rem .95rem;
    font: inherit;
    font-weight: 500;
    color: var(--c-text-soft);
    cursor: pointer;
    width: auto;
    white-space: nowrap;
    transition: background .12s, color .12s;
}

.tabs button:hover { color: var(--c-text); }

.tabs button.is-active {
    background: var(--c-surface);
    color: var(--c-primary);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .12), 0 1px 2px rgba(16, 24, 40, .06);
}

.tabs .dirty-dot { color: #d97706; }

/* ── Korduvad soodustused ── */
.disc-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
}
.disc-item {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--c-border);
}
.disc-item:first-of-type { border-top: 0; }
.disc-item__body { flex: 1; min-width: 0; }
/* Aeg, teenus ja olekumärgis ühel real; kitsal ekraanil murdub. */
.disc-item__meta {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    font-size: .88rem;
}
/* Suur protsendimärk vasakul: soodustuse suurus loeb kohe välja. */
.disc-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.4rem;
    padding: .5rem .3rem;
    border-radius: var(--radius);
    background: var(--c-ok-bg);
    color: var(--c-ok-text);
    font-weight: 700;
    font-size: 1.05rem;
}
.disc-item[style*="opacity"] .disc-chip { background: var(--c-bg); color: var(--c-text-soft); }

/* Nädalapäeva lülitid: segmentnupud, valitu täidetud primaarvärviga. */
.disc-days { display: flex; gap: 6px; flex-wrap: wrap; }
.disc-day {
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.disc-day:hover { border-color: var(--c-primary); }
.disc-day.is-on {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}

/* Punkti soodusaja vorm: kattub automaatreegliga (25.09), ainult hoiatus. */
.disc-hoiatus {
    margin-top: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius);
    background: var(--c-warning-soft);
    border: 1px solid var(--c-warning-border);
    color: var(--c-warning);
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: .88rem;
}

.disc-preview {
    margin-top: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-primary-soft, #eef3fb);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* flex-wrap: telefonis ei mahu reegli vormi kolm nuppu ühte ritta (audit 25.09:
   'Tühista' jäi vasakult ekraanist välja), siis murduvad nupud järgmisele reale. */
.disc-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
}
/* Peata/eemalda muutmisvaate all: eraldi vormid, taandjoonega eraldi. */
.disc-edit-actions {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--c-border);
}

/* ── Tööpäevade kompaktne rida ── */
.workday {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .55rem .25rem;
    border-bottom: 1px solid #f2f4f7;
    flex-wrap: wrap;
}

.workday:last-of-type { border-bottom: 0; }
.workday__name { width: 6.6rem; font-weight: 600; flex-shrink: 0; }
.workday__meta { color: var(--c-text-soft); font-size: .82rem; }

.time-select { display: inline-flex; align-items: center; gap: .15rem; }
.time-select select { width: auto; padding: .38rem .3rem; font-variant-numeric: tabular-nums; }

.break-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: #f2f4f7;
    border-radius: 999px;
    padding: .15rem .3rem .15rem .6rem;
    font-size: .82rem;
}

.break-chip button {
    width: auto;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--c-text-soft);
    font-weight: 700;
    padding: 0 .3rem;
}

.break-chip button:hover { color: var(--c-danger); }

/* ── Loendiread (nt teenused, kasutajad) ── */
.row-item { border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: .8rem 1rem; margin-bottom: .6rem; }
.row-item__head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.row-item__meta { color: var(--c-text-soft); font-size: .85rem; }


/* ── Statistikakaardid ── */
/* Kaks astet: esmased KPI-d suurte kaartidena (max 4 reas), teisesed
   ühe kompaktse ribana — kaheksa võrdset kasti muutis kõik ühtviisi
   tähtsusetuks. Kitsamal ekraanil langeb 2 ja 1 peale. */
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-3); }
@media (max-width: 1100px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .stat-grid { grid-template-columns: 1fr; } }
.stat-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); box-shadow: var(--shadow); }
.stat-card__label { color: var(--c-text-soft); font-size: .78rem; font-weight: 500; }
.stat-card__value { font-size: 1.55rem; font-weight: 700; letter-spacing: -.015em; font-variant-numeric: tabular-nums; line-height: 1.25; }
.stat-card__hint { font-size: .76rem; color: var(--c-text-soft); }

/* Teisesed mõõdikud: üks vaikne riba, silt ja väärtus kõrvuti. */
/* Tihedam (kasutaja 21.10): üheksa näitajat mahuvad laial ekraanil ühele reale. */
.stat-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1) 1.25rem;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: .55rem .9rem;
    margin-bottom: var(--sp-5);
}
.stat-strip__item { display: inline-flex; align-items: baseline; gap: .35rem; font-size: .8rem; color: var(--c-text-soft); padding: .2rem 0; position: relative; }
.stat-strip__item strong { color: var(--c-text); font-size: .9rem; font-variant-numeric: tabular-nums; }
/* Vertikaalne eraldaja mõõdikute vahel: joon elab gap'i keskel, laiust
   ei lisa. Kitsal ekraanil (read murduvad) jääb ära. */
.stat-strip__item + .stat-strip__item::before {
    content: '';
    position: absolute;
    left: calc(-1.25rem / 2 - 0.5px);
    top: 18%;
    height: 64%;
    width: 1px;
    background: var(--c-border);
}
@media (max-width: 720px) {
    .stat-strip__item + .stat-strip__item::before { display: none; }
}

/* ── Muu ── */
/* .muted = summutatud tekst rea sees (tabelilahter, span).
   .help-text = selgitav lõik vormi või kaardi all.
   Selgitava lõigu jaoks kasuta ALATI .help-text: .muted lõigul jääks
   kere fondisuurus ja kõrvuti kaardid näeksid erinevad välja. */
.muted { color: var(--c-text-soft); }
.help-text { color: var(--c-text-soft); font-size: .85rem; line-height: 1.5; margin-bottom: .75rem; }
.help-text:last-child { margin-bottom: 0; }

[x-cloak] { display: none !important; }

@media (max-width: 720px) {
    .form-grid-2 { grid-template-columns: 1fr; }
    .container { padding: 1rem .75rem 2rem; }
}

/* ── Parooliväljad (kasutajahaldus) ── */
.pw-input { position: relative; display: flex; align-items: center; }
.pw-input input { padding-right: 4.2rem; }
.pw-toggle {
    position: absolute; right: .4rem; border: 0; background: transparent;
    color: var(--c-text-soft); font-size: .78rem; cursor: pointer; padding: .25rem .4rem;
}
.pw-toggle:hover { color: var(--c-primary); }

.pw-meter { display: inline-block; width: 120px; height: 6px; background: #e5e7eb; border-radius: 999px; overflow: hidden; }
.pw-meter__bar { display: block; height: 100%; border-radius: 999px; transition: width .15s ease; }
.pw-meter__bar--weak { background: var(--c-danger); }
.pw-meter__bar--fair { background: var(--c-warning); }
.pw-meter__bar--good { background: #10b981; }
.pw-meter__bar--strong { background: var(--c-success); }

/* 2FA hoiatus külgpaanis: ilma teise tegurita on konto ainult parooli
   taga — see peab silma jääma, mitte olema väike hall märgis. */
.sidebar__account { display: flex; align-items: center; gap: .45rem; }
.sidebar__account svg { width: 14px; height: 14px; flex-shrink: 0; }

.sidebar__2fa-warn {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    padding: .55rem .65rem;
    margin-bottom: .6rem;
    background: rgba(247, 144, 9, .14);
    border: 1px solid rgba(247, 144, 9, .45);
    border-radius: var(--radius-sm);
    color: #fdb022;
    font-size: .76rem;
    line-height: 1.35;
}
.sidebar__2fa-warn:hover { background: rgba(247, 144, 9, .22); text-decoration: none; }
.sidebar__2fa-warn svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: .05em; }
.sidebar__2fa-warn strong { display: block; font-weight: 700; margin-bottom: .1rem; }

/* Kasutajatugi ja autoriõigus külgpaani jalus. */
.sidebar__support {
    /* Külgriba jaluse joon tuleb .sidebar__footer pealt; oma joont enam ei
       ole, sest kasutaja plokk kolis üles paremale (klient 12.09). */
    font-size: .74rem;
    line-height: 1.5;
    color: var(--c-side-faint);
}
.sidebar__support-title {
    display: block;
    font-weight: 600;
    color: var(--c-side-text);
    margin-bottom: .2rem;
}
.sidebar__support-name { display: block; margin-bottom: .15rem; }
.sidebar__support a {
    display: flex;
    align-items: center;
    gap: .35rem;
    color: var(--c-side-faint);
    word-break: break-all;
}
.sidebar__support a svg { width: 13px; height: 13px; flex-shrink: 0; opacity: .7; }
.sidebar__support a:hover { color: #fff; }

.sidebar__copyright {
    margin-top: .7rem;
    font-size: .68rem;
    color: var(--c-side-faint);
    line-height: 1.4;
}

/* Tegevuslogi muudatuste kuva. */
.audit-diff { margin-bottom: .5rem; }
.audit-diff__label { display: block; font-size: .7rem; font-weight: 600; color: var(--c-text-faint); text-transform: uppercase; letter-spacing: .04em; }
/* Tõlgitud muudatuseread: silt + väärtus veergudes, pikad väärtused murduvad. */
.audit-diff__list {
    margin: .15rem 0 0;
    padding: .5rem .6rem;
    background: var(--c-bg);
    border-radius: var(--radius-sm);
    font-size: .78rem;
    line-height: 1.5;
    max-width: 32rem;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 2px .75rem;
}
.audit-diff__list dt { color: var(--c-text-soft); }
.audit-diff__list dd { margin: 0; overflow-wrap: anywhere; }
.audit-diff pre {
    margin: .15rem 0 0;
    padding: .5rem .6rem;
    background: var(--c-bg);
    border-radius: var(--radius-sm);
    font-size: .75rem;
    line-height: 1.45;
    max-width: 32rem;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Lehitseja. Laraveli vaikevaade eeldab Tailwindi: ilma selleta
   renderdusid nooleikoonid ekraanisuuruste SVG-dena. */
.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1rem;
}

.pager__nav {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.pager__pos {
    font-size: .88rem;
    color: var(--c-text-soft);
    font-variant-numeric: tabular-nums;
}

.pager__count {
    margin: 0;
    font-size: .88rem;
    color: var(--c-text-soft);
    font-variant-numeric: tabular-nums;
}

.pager__disabled {
    opacity: .45;
    cursor: default;
}

/* Ridade järjestamine lohistamisega (public/js/reorder.js) */
.drag-handle {
    cursor: grab;
    color: var(--c-muted, #6b7280);
    user-select: none;
    width: 2rem;
}

tr.dragging {
    opacity: .4;
}

/* — Sisselogimisleht: vorm vasakul, tutvustav sinine paneel paremal — */
/* Leht tervikuna keskele: külalise sisu on main.container sees. */
main.container:has(> .login) {
    display: flex;
    min-height: 100vh;
    padding: 2rem 1.5rem;
    max-width: none;
}
/* Sinine paneel on kaardi SEES oma ümarusega (kliendi makett 11.09):
   kaardil on õhuke polster, mis jätab paneeli ümber valge raami. */
.login {
    display: flex;
    gap: 12px;
    width: 100%;
    max-width: 1040px;
    margin: auto;
    background: var(--c-surface, #fff);
    border: 1px solid var(--c-border);
    border-radius: 22px;
    box-shadow: 0 24px 50px rgba(15, 23, 42, .09);
    padding: 14px;
}
/* Ühe veeruga autentimislehed (parooli taastamine): ilma parema
   paneelita venib kaart muidu terve laiuse. */
.login--narrow { max-width: 460px; padding: 0; }
.login__form {
    flex: 1;
    min-width: 0;
    position: relative;
    padding: 5.25rem 3.25rem 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Vorm ise jääb kitsaks ka laial kaardil: pikk sisestusväli on
   ebamugav sihtida ja rikub keskjoonduse rütmi. */
.login__form > * { width: 100%; max-width: 25rem; margin-left: auto; margin-right: auto; }

/* Päis keskel: märk, ettevõtte nimi, juhis. */
.login__head { text-align: center; margin-bottom: 2rem; }
.login__form h1 { margin: 0 0 .45rem; font-size: 1.5rem; letter-spacing: -.015em; }
.login__lead { color: var(--c-text-soft); margin: 0 0 1.5rem; }
.login__head .login__lead { margin: 0 auto; max-width: 23rem; font-size: .92rem; line-height: 1.55; }

/* Toote märk vasakul üleval (kliendi makett 11.09). */
.login__logo { position: absolute; top: 2.5rem; left: 3.25rem; }
.login__logo img { height: 24px; width: auto; display: block; }

/* Vana päis (parooli taastamise lehed): logo ja nimi reana vasakul. */
.login__brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 2rem;
}
.login__brand svg { width: 34px; height: 34px; }
.login__brand img { max-height: 44px; max-width: 200px; display: block; }

/* Parooliväli koos nähtavuse lülitiga. */
.login__pw { position: relative; }
.login__pw input { padding-right: 2.7rem; }
.login__pw button {
    position: absolute;
    right: .45rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    padding: .3rem;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--c-text-faint);
    cursor: pointer;
}
.login__pw button svg { width: 19px; height: 19px; }
.login__pw button:hover { color: var(--c-text-soft); }
.login__pw button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.login__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .6rem;
    font-size: .88rem;
    margin: .15rem 0 1.35rem;
}
.login__remember {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-weight: 500;
    color: var(--c-text-soft);
}
.login__remember input { width: auto; margin: 0; }

.login__submit {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .72rem 1.1rem;
    font-size: .95rem;
}
.login__submit svg { width: 17px; height: 17px; }
/* Kitsal kaardil mõjub täislaiuses nupp ülekaalukalt: laius sisu järgi. */
.login--narrow .login__submit { width: auto; }
.login__foot { margin: 2rem 0 0; text-align: center; font-size: .78rem; color: var(--c-text-faint); }

.login__aside {
    flex: 1;
    min-width: 0;
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(165deg, #1e40af, #1d4ed8 58%, #2153e0);
    color: #fff;
    display: flex;
}
/* Kaks suurt ümarat kuju taustal: vaikne motiiv, mitte muster. */
.login__aside::before,
.login__aside::after {
    content: "";
    position: absolute;
    pointer-events: none;
    background: rgba(255, 255, 255, .07);
}
.login__aside::before { top: -80px; right: -70px; width: 300px; height: 300px; border-radius: 0 0 0 100%; }
.login__aside::after { bottom: -110px; left: -80px; width: 340px; height: 340px; border-radius: 0 100% 0 0; background: rgba(255, 255, 255, .05); }
/* Tekst algab ülevalt, servades on õhku (kliendi täpsustus 11.09). */
.login__aside-inner {
    position: relative;
    z-index: 1;
    padding: 4rem 3.5rem;
    max-width: 26rem;
}
/* Töölaua pilt paneeli alaosas, tervikuna näha. Absoluutne, et pilt
   EI kasvataks kaardi kõrgust. */
.login__shot {
    position: absolute;
    /* Pildi vasak serv joondub tekstiga, nagu maketil. */
    left: 3.5rem;
    bottom: 4rem;
    /* Pilti ei lõigata: laius tuleb paneelist ja kogu kuvatõmmis on näha
       (kliendi soov 11.09). left+right ei venita <img>-i, seega calc. */
    width: calc(100% - 5.25rem);
    max-width: none;
    height: auto;
}
.login__shot img { display: block; width: 100%; height: auto; }
/* Aeglane valgusriba üle pildi. Kuju tuleb pildi enda läbipaistvusest
   (mask), muidu paistaks ristkülik üle sinise paneeli. */
.login__shine {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(104deg, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, .72) 50%, rgba(255, 255, 255, 0) 64%);
    background-size: 280% 100%;
    background-repeat: no-repeat;
    background-position: 200% 0;
    -webkit-mask-image: url("../img/toolaud.webp");
    mask-image: url("../img/toolaud.webp");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    animation: login-shine 7s ease-in-out 1.5s infinite;
}
@keyframes login-shine {
    0% { background-position: 200% 0; }
    30%, 100% { background-position: -80% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .login__shine { animation: none; background-position: 62% 0; opacity: .5; }
}
.login__aside h2 {
    margin: 0 0 1rem;
    font-size: 2.05rem;
    line-height: 1.14;
    letter-spacing: -.02em;
    font-weight: 700;
    text-wrap: balance;
}
.login__aside p {
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: 1rem;
    line-height: 1.55;
}
@media (max-width: 980px) {
    .login__form { padding: 4.75rem 2.25rem 2.75rem; }
    .login__logo { top: 2rem; left: 2.25rem; }
    .login__aside-inner { padding: 3rem 2.25rem; }
    .login__shot { left: 2.25rem; width: calc(100% - 3.75rem); }
    .login__aside h2 { font-size: 1.75rem; }
}
@media (max-width: 860px) {
    .login { max-width: 440px; padding: 0; }
    .login__aside { display: none; }
    .login__form { padding: 4.5rem 1.75rem 2.5rem; }
    .login__logo { top: 1.75rem; left: 1.75rem; }
}

/* ── Tagasiside koondvaade ── */
/* Loetavus ennekõike: punktiskoorid ridadena koos visuaalse ribaga,
   kommentaarid selgete kaartidena — tabel jäi liiga kribuks. */
.fb-scores { display: flex; flex-direction: column; }
.fb-score {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) minmax(9rem, auto) minmax(7rem, 14rem) 6.5rem auto;
    align-items: center;
    gap: 1rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--c-bg);
    font-size: .95rem;
}
.fb-score:last-child { border-bottom: 0; }
.fb-score__name { font-weight: 600; color: var(--c-text); text-decoration: none; }
.fb-score__name:hover { text-decoration: underline; }
.fb-score__meta { color: var(--c-text-soft); font-size: .85rem; }
.fb-score__bar {
    height: 8px;
    background: var(--c-bg);
    border-radius: 999px;
    overflow: hidden;
}
.fb-score__fill { height: 100%; background: var(--c-success, #16a34a); border-radius: 999px; }
/* Hall edenemine läveni: punkt kogub hinnanguid, rahulolu veel ei väida. */
.fb-score__fill--progress { background: #cbd5e1; }
.fb-score__progress { font-weight: 600; font-size: .85rem; }
.fb-score__value { text-align: right; font-weight: 700; font-size: 1.05rem; }
.fb-score__few { color: var(--c-text-soft); font-weight: 500; font-size: .85rem; }
@media (max-width: 720px) {
    .fb-score { grid-template-columns: 1fr auto; }
    .fb-score__meta, .fb-score__bar { display: none; }
}

/* Punkti vaate päis: pealkiri vasakul, skoor kompaktselt paremas
   nurgas (kliendi soov 03.09). */
.fb-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.fb-corner { text-align: right; }
.fb-corner__value { font-size: 1.5rem; font-weight: 700; color: #16a34a; line-height: 1.15; }
.fb-corner__value--neg { color: #dc2626; }
.fb-corner__label { color: var(--c-text-soft); font-size: .78rem; white-space: nowrap; }

/* Tööriistariba: hinnangu sakid vasakul, periood + otsing paremal. */
.fb-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.fb-tabs { display: flex; gap: .35rem; flex-wrap: wrap; }
.fb-tab {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .8rem;
    border: 1px solid var(--c-border-strong);
    border-radius: 8px;
    background: var(--c-surface);
    font-size: .85rem;
    font-weight: 600;
    color: var(--c-text-soft);
    text-decoration: none;
}
.fb-tab:hover { text-decoration: none; background: var(--c-bg); }
.fb-tab svg { width: 14px; height: 14px; flex: 0 0 auto; }
.fb-tab__count { font-weight: 700; }
.fb-tab.is-active { background: #eff4ff; border-color: #b2ccff; color: var(--c-primary); }
.fb-tab--pos { color: #067647; }
.fb-tab--pos.is-active { background: #ecfdf5; border-color: #abefc6; color: #067647; }
.fb-tab--neg { color: #b42318; }
.fb-tab--neg.is-active { background: #fef3f2; border-color: #fda29b; color: #b42318; }

.fb-tools { display: flex; align-items: center; gap: .5rem; }
.fb-period { position: relative; display: inline-flex; align-items: center; }
.fb-period svg { position: absolute; left: .6rem; color: var(--c-text-soft); pointer-events: none; }
.fb-period select { padding-left: 2rem; }
.fb-search { max-width: 15rem; }
.fb-searchbtn {
    width: 34px; height: 34px;
    border: 1px solid var(--c-border-strong);
    border-radius: 8px;
    background: var(--c-surface);
    color: var(--c-text-soft);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.fb-searchbtn:hover { background: var(--c-bg); }

/* Kommentaariread: värviline serv + toon hinnangu järgi. */
.fb-rows { display: flex; flex-direction: column; gap: .5rem; }
.fb-row {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .6rem .9rem;
    border-radius: 8px;
    border-left: 4px solid;
    flex-wrap: wrap;
}
.fb-row--pos { border-left-color: #16a34a; background: #fafdfb; }
.fb-row--neg { border-left-color: #dc2626; background: #fef2f2; }
.fb-row__icon {
    width: 32px; height: 32px;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}
.fb-row--pos .fb-row__icon { background: #ecfdf5; color: #16a34a; }
.fb-row--neg .fb-row__icon { background: #fee2e2; color: #dc2626; }
.fb-row__text { flex: 1; min-width: 12rem; font-weight: 600; line-height: 1.45; }
.fb-row__date { color: var(--c-text-soft); font-size: .85rem; white-space: nowrap; }


/* ── Päevade tulbajoonis (töölaud + aruanded) ── */
/* Kliendi näidise järgi (04.09): y-telg, tipptulba silt, tänane
   oranžilt, tume vihjekast. Ilma teegita — 31 tulpa ei vaja
   charting-raamistikku; iga tulp on link päeva nimekirja. */
/* Ülavaru: tipusilt elab ploti kohal ega tohi pealkirja alla jääda. */
.dchart__wrap { display: flex; gap: .5rem; padding-top: 1.1rem; }
.dchart__y {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    height: 132px;
    font-size: .7rem;
    color: var(--c-text-faint);
    min-width: 1.4rem;
    /* Sildid joonduvad ruudujoontega, mitte tulpade servadega. */
    transform: translateY(-.5em);
    padding-top: .5em;
}

.dchart__plot {
    position: relative;
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 132px;
    border-bottom: 1px solid var(--c-border-strong);
    background:
        linear-gradient(to top, transparent calc(33.33% - 1px), var(--c-bg) 33.33%, transparent calc(33.33% + 1px)),
        linear-gradient(to top, transparent calc(66.66% - 1px), var(--c-bg) 66.66%, transparent calc(66.66% + 1px)),
        linear-gradient(to top, transparent calc(100% - 1px), var(--c-bg) 100%);
}

.dchart__bar {
    position: relative;
    flex: 1;
    min-width: 5px;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-decoration: none;
    border-radius: 4px 4px 0 0;
}
.dchart__bar:hover { background: rgba(16, 24, 40, .05); }
.dchart__fill {
    position: relative;
    z-index: 1;
    width: 100%;
    background: var(--c-chart);
    border-radius: 4px 4px 0 0;
}
.dchart__bar:hover .dchart__fill { background: var(--c-primary); }
.dchart__bar--weekend .dchart__fill { background: var(--c-chart-soft); }
.dchart__bar--future .dchart__fill { background: var(--c-chart-faint); }
/* Tänane päev: vertikaalne oranž joon läbi joonise (kliendi näidis),
   mitte raam tulba ümber. Joon on tulba taga, paistab tühjas osas. */
.dchart__bar--today::after {
    content: '';
    position: absolute;
    top: -.5rem;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: #f79009;
    transform: translateX(-50%);
    z-index: 0;
    border-radius: 1px;
}
.dchart__bar--today .dchart__fill { background: var(--c-primary); }

/* Tipp-päeva arv on alati nähtav; ülejäänud tulevad hõljutusel. */
.dchart__peak {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-size: .74rem;
    font-weight: 700;
    color: var(--c-text);
    padding-bottom: 3px;
    z-index: 1;
}

.dchart__tip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #101828;
    color: #fff;
    font-size: .76rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    white-space: nowrap;
    display: none;
    z-index: 2;
    pointer-events: none;
}
.dchart__bar:hover .dchart__tip { display: block; }
.dchart__bar:hover .dchart__peak { display: none; }
/* Servmised vihjed ei tohi kaardist välja joosta. */
.dchart__plot .dchart__bar:nth-child(-n+3) .dchart__tip { left: 0; transform: none; }
.dchart__plot .dchart__bar:nth-last-child(-n+3) .dchart__tip { left: auto; right: 0; transform: none; }

.dchart__axis {
    display: flex;
    gap: 4px;
    margin-top: .25rem;
    padding-left: calc(1.4rem + .5rem);
}
.dchart__tick {
    flex: 1;
    min-width: 5px;
    text-align: center;
    font-size: .7rem;
    color: var(--c-text-faint);
    white-space: nowrap;
}

/* Töölaua kuugraafik võrdluses eelmise kuuga (kasutaja 30.09, variant B):
   iga kuupäev on paar, hall eelmine kuu ja sinine jooksev kuu kõrvuti. */
.dchart--vordlus .dchart__plot, .dchart--vordlus .dchart__axis { gap: 2px; }
.dchart--vordlus .dchart__tick { min-width: 6px; }
.dchart__paar {
    position: relative; flex: 1; min-width: 6px; height: 100%;
    display: flex; align-items: flex-end; gap: 1px; border-radius: 4px 4px 0 0;
}
.dchart__paar:hover { background: rgba(16, 24, 40, .05); }
.dchart__osa { position: relative; z-index: 1; flex: 1; min-width: 2px; height: 100%; display: flex; align-items: flex-end; text-decoration: none; }
.dchart__osa--eelmine .dchart__fill { background: var(--c-chart-ref); }
.dchart__paar:hover .dchart__osa--jooksev .dchart__fill { background: var(--c-primary); }
.dchart__paar--future .dchart__osa--jooksev .dchart__fill { background: var(--c-chart-faint); }
.dchart__paar--today .dchart__osa--jooksev .dchart__fill { background: var(--c-primary); }
/* Tänase päeva oranž joon paari keskel (tulpade vahel), tipu arv tulba peal:
   mõlemad tulba küljes, et telefonis võiks vihje olla graafiku suhtes. */
.dchart__paar--today .dchart__osa--jooksev::after {
    content: ''; position: absolute; top: -.5rem; bottom: 0; left: -1.5px; width: 2px;
    background: #f79009; z-index: 0; border-radius: 1px;
}
.dchart--vordlus .dchart__fill .dchart__peak { bottom: 100%; }
.dchart__paar:hover .dchart__tip { display: block; }
.dchart__paar:hover .dchart__peak { display: none; }
/* Vihje: vasaku poole päevadel paremale, parema poole päevadel vasakule. */
.dchart--vordlus .dchart__plot .dchart__paar:nth-child(n) .dchart__tip { left: 0; right: auto; transform: none; }
.dchart--vordlus .dchart__plot .dchart__paar--parem:nth-child(n) .dchart__tip { left: auto; right: 0; }
/* Telefonis on paar kitsas: vihje on graafiku kohal keskel ja murdub vajadusel. */
@media (max-width: 720px) {
    .dchart--vordlus .dchart__paar { position: static; }
    .dchart--vordlus .dchart__plot .dchart__paar:nth-child(n) .dchart__tip {
        left: 50%; right: auto; transform: translateX(-50%);
        white-space: normal; width: max-content; max-width: 100%; text-align: center; border-radius: 12px;
    }
}
.dchart-vordlus {
    display: flex; justify-content: space-between; align-items: center; gap: .4rem 1rem; flex-wrap: wrap;
    font-size: .8rem; color: var(--c-text-soft); margin: -.25rem 0 .25rem;
}
.dchart-vordlus__legend { display: flex; gap: .9rem; flex-wrap: wrap; }
.dchart-vordlus__chip { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--c-chart); margin-right: .35rem; vertical-align: -1px; }
.dchart-vordlus__chip--eelmine { background: var(--c-chart-ref); }
/* Kokkuvõtte arvud kuu värvi taustaga nagu legendis (kasutaja 02.10); tume kiri on mõlemal AA. */
.dchart-vordlus__arv { display: inline-block; min-width: 1.8em; padding: 0 .4em; border-radius: 4px; background: var(--c-chart); color: var(--c-text); font-weight: 600; line-height: 1.45; text-align: center; }
.dchart-vordlus__arv--eelmine { background: var(--c-chart-ref); }
.dchart-vordlus__kokku { color: var(--c-text); font-variant-numeric: tabular-nums; margin-left: auto; }
/* Kokkuvõte on kaardi paremas servas: vihjemull joondub kokkuvõtte paremasse
   serva, mitte ikooni järgi, et jääks ekraanile ka siis, kui kitsal ekraanil
   murdub kokkuvõte kahele reale ja ikoon on vasakul (kasutaja ja ülevaatus 02.10). */
.dchart-vordlus__kokku { position: relative; }
.dchart-vordlus__kokku .vihje { position: static; }
.dchart-vordlus__kokku .vihje::after { left: auto; right: 0; }

/* ── Lehepäis: pealkiri + kontekst vasakul, tegevused paremal ── */
.page-title { display: flex; flex-direction: column; gap: 2px; }
.page-title .page-sub { color: var(--c-text-soft); font-size: .85rem; }
.page-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.page-actions .page-search { display: flex; gap: var(--sp-2); }
.page-actions .page-search input { width: clamp(14rem, 26vw, 22rem); }
@media (max-width: 720px) {
    /* Otsing võtab oma rea (flex-basis 100%, mitte flex:1 — see nullib
       basise ja pressiks kõik ühte ritta), Uus broneering järgmisele. */
    .page-actions { width: 100%; }
    .page-actions .page-search { flex-basis: 100%; }
    .page-actions .page-search input { width: 100%; flex: 1; }
}

/* ── Teated (hoiatus/probleem/info) ── */
/* Ikoon + sisu; värv EI ole ainus eristaja — ikoon ja pealdis kannavad
   sama sõnumit. Asendab senise "card + värviline vasak serv" mustri. */
.alert {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
    margin-bottom: var(--sp-3);
    font-size: .9rem;
    line-height: 1.5;
}
.alert svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: .1em; }
.alert--warn { background: var(--c-warning-soft); border-color: var(--c-warning-border); }
.alert--warn svg { color: var(--c-warning); }
.alert--danger { background: var(--c-danger-soft); border-color: var(--c-danger-border); }
.alert--danger svg { color: var(--c-danger); }
.alert--success { background: var(--c-success-soft); border-color: var(--c-success-border); color: var(--c-success); font-weight: 500; }
.alert--success svg { color: var(--c-success); }
.alert strong { font-weight: 700; }

.alert__close {
    border: 0;
    background: none;
    color: inherit;
    opacity: .6;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 .2rem;
    align-self: flex-start;
}
.alert__close:hover { opacity: 1; }
.alert__close:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 3px; }

/* ── Olekutäpp: värv + tekst koos ── */
.status-dot { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.status-dot::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--c-text-faint); flex: 0 0 auto; }
.status-dot--ok::before { background: #12b76a; }
.status-dot--warn::before { background: #f79009; }
.status-dot--danger::before { background: #f04438; }
.status-dot--off::before { background: var(--c-text-faint); }

/* ── Reamenüü: kolm punkti, teisesed toimingud ── */
.menu { position: relative; display: inline-block; }
.menu__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-sm);
    background: var(--c-surface);
    color: var(--c-text-soft);
    cursor: pointer;
}
.menu__btn:hover { background: var(--c-bg); color: var(--c-text); }
.menu__btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Fikseeritud asukoht (top/right või bottom/right tulevad avamisel
   JS-ist, vt js/rea-menyy.js): absoluutse nimekirja lõikaks tabeli
   kerimiskast ära. */
.menu__list {
    position: fixed;
    min-width: 11rem;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: 0 6px 18px rgba(16, 24, 40, .12);
    padding: var(--sp-1);
    z-index: 30;
    text-align: left;
}
.menu__list a,
.menu__list button {
    display: block;
    width: 100%;
    text-align: left;
    padding: .45rem .65rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--c-text);
    font: inherit;
    font-size: .88rem;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.menu__list a:hover, .menu__list button:hover { background: var(--c-bg); text-decoration: none; }
.menu__list a:focus-visible, .menu__list button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Negatiivne toiming on menüüs eraldatud joonega ja punase tekstiga —
   seda ei saa kogemata vajutada põhitegevuse kõrvalt. */
.menu__list .menu__danger { color: var(--c-danger); }
.menu__list .menu__danger:hover { background: var(--c-danger-soft); }
.menu__sep { border-top: 1px solid var(--c-border); margin: var(--sp-1) 0; }

/* ── Väärtusread ja miniribad (jaotused, süsteemi tervis) ── */
.kv-line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); padding: .3rem 0; font-size: .89rem; }
.kv-line + .kv-line { border-top: 1px solid #f0f2f5; }
.kv-line strong { font-variant-numeric: tabular-nums; }
.kv-line .muted { font-size: .84rem; }

.bar-row { display: flex; align-items: center; gap: var(--sp-2); padding: .18rem 0; font-size: .84rem; }
.bar-row__label { flex: 0 0 2.6rem; color: var(--c-text-soft); font-variant-numeric: tabular-nums; }
.bar-row__track { flex: 1; background: var(--c-bg); border-radius: 3px; height: .85rem; overflow: hidden; }
.bar-row__fill { height: 100%; background: var(--c-chart); border-radius: 3px; min-width: 2px; }
.bar-row__value { flex: 0 0 2rem; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* Reatoimingud: üks kontekstipõhine põhitegevus + kolme punkti menüü. */
.row-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }

/* Jaotuste plokid: võrdse laiusega miniplokid, mis on omavahel
   võrreldavad (sama kõrgusrütm, samad ribad). */
.break-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}

/* ── Kaardi sisene päisrida: h2 vasakul, link/nupp paremal ── */
.toolbar { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.toolbar h1, .toolbar h2 { margin: 0; }

/* ── Lisafiltrid: nupp loenduriga avab paneeli; aktiivsed filtrid
      paistavad eemaldatavate kiipidena ka siis, kui paneel on kinni. ── */
.filter-pop { position: relative; }
.filter-panel {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 30;
    width: min(30rem, calc(100vw - 4rem));
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(16, 24, 40, .14);
    padding: var(--sp-4);
}
.filter-panel .form-grid-2 { gap: var(--sp-2) var(--sp-3); }
.filter-panel__foot { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-3); }
@media (max-width: 720px) {
    /* Kitsal ekraanil voolab paneel vormi sisse täislaiuses. */
    .filter-panel {
        position: static;
        width: 100%;
        box-shadow: none;
        border: 0;
        border-top: 1px dashed var(--c-border);
        border-radius: 0;
        padding: var(--sp-3) 0 0;
        margin-top: var(--sp-2);
    }
}

.btn__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--c-primary);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
}

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--c-primary-soft);
    color: var(--c-primary);
    border: 1px solid var(--c-primary-border);
    border-radius: 999px;
    padding: .16rem .3rem .16rem .7rem;
    font-size: .82rem;
    font-weight: 500;
    white-space: nowrap;
}
.chip a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    color: inherit;
    font-weight: 700;
    line-height: 1;
}
.chip a:hover { background: rgba(30, 64, 175, .14); text-decoration: none; }

/* ── Detailvaate silt + väärtus read ── */
.detail-list { display: grid; grid-template-columns: 10rem 1fr; row-gap: .45rem; column-gap: var(--sp-4); margin: 0; }
.detail-list dt { color: var(--c-text-soft); }
.detail-list dd { margin: 0; min-width: 0; }
@media (max-width: 560px) {
    .detail-list { grid-template-columns: 1fr; row-gap: .1rem; }
    .detail-list dt { margin-top: .5rem; }
}

/* ── Kalender: FullCalendar disainisüsteemi tokenitele ── */
#calendar {
    --fc-border-color: var(--c-border);
    --fc-page-bg-color: var(--c-surface);
    --fc-today-bg-color: var(--c-primary-soft);
    --fc-event-bg-color: var(--c-primary);
    --fc-event-border-color: var(--c-primary);
    --fc-button-bg-color: var(--c-surface);
    --fc-button-border-color: var(--c-border-strong);
    --fc-button-text-color: var(--c-text);
    --fc-button-hover-bg-color: var(--c-bg);
    --fc-button-hover-border-color: var(--c-border-strong);
    --fc-button-active-bg-color: var(--c-primary);
    --fc-button-active-border-color: var(--c-primary);
    font-size: .85rem;
}
#calendar .fc-toolbar-title { font-size: 1.05rem; font-weight: 600; }
#calendar .fc-button {
    border-radius: var(--radius-sm);
    padding: .4rem .8rem;
    font-weight: 500;
    box-shadow: none !important;
}
#calendar .fc-button:focus-visible { box-shadow: var(--focus-ring) !important; }

/* Nupugrupid (Päev/Nädal/Kuu, eelmine/järgmine) on ÜKS segment samas
   keeles mis halduse vahekaardid: hall alus, aktiivne valgel padjal —
   kolm kokkusurutud eraldi nuppu lugesid halvasti. */
#calendar .fc-button-group {
    background: #f2f4f7;
    border-radius: 10px;
    padding: 3px;
    gap: 3px;
}
#calendar .fc-button-group .fc-button {
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: var(--c-text-soft);
    margin: 0 !important;
    padding: .32rem .8rem;
}
#calendar .fc-button-group .fc-button:hover { color: var(--c-text); background: transparent; }
#calendar .fc-button-group .fc-button-active {
    background: var(--c-surface);
    color: var(--c-primary);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .12), 0 1px 2px rgba(16, 24, 40, .06) !important;
}
#calendar .fc-timegrid-slot-label,
#calendar .fc-col-header-cell-cushion { color: var(--c-text-soft); font-variant-numeric: tabular-nums; }
#calendar .fc-event { border-radius: 4px; font-size: .78rem; }

/* ── Vihjeikoon päris tooltip'iga ── */
/* Väike "i" ring sildi järel; mull avaneb hõljumisel JA
   klaviatuurifookusel (tabindex=0). Sisu tuleb data-vihje atribuudist,
   nii et JS-i pole vaja. */
.vihje {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: .35rem;
    color: var(--c-text-faint);
    cursor: help;
    vertical-align: -1px;
}
.vihje svg { width: 14px; height: 14px; }
.vihje:hover, .vihje:focus { color: var(--c-primary); outline: none; }
/* Peidetud mull on display: none, mitte ainult nähtamatu: nähtamatu,
   aga paigutuses olev mull venitas kitsal ekraanil lehe laiemaks. */
.vihje::after {
    content: attr(data-vihje);
    display: none;
    position: absolute;
    left: 0;
    top: calc(100% + 7px);
    z-index: 40;
    width: max-content;
    max-width: min(22rem, 70vw);
    background: var(--c-text);
    color: #fff;
    font-size: .78rem;
    font-weight: 400;
    line-height: 1.5;
    padding: .5rem .75rem;
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 18px rgba(16, 24, 40, .25);
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transition: opacity .1s;
    pointer-events: none;
}
.vihje:hover::after, .vihje:focus::after { display: block; opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) {
    .vihje::after { transition: none; }
}

/* ── Tühi seis ── */
.empty {
    padding: var(--sp-5) var(--sp-4);
    text-align: center;
    color: var(--c-text-soft);
    font-size: .9rem;
}

/* Väljalogimine tumedal külgribal: vaikne punakas kontuurnupp. */
.sidebar__footer .btn--danger {
    background: rgba(253, 162, 155, .1);
    border-color: rgba(253, 162, 155, .35);
    color: #fda29b;
}
.sidebar__footer .btn--danger:hover { background: rgba(253, 162, 155, .18); }

/* Sissekukkuvad fookused ka linkidel sisualas. */
.content a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 2px; }


/* Accordioni nool: tekstimärk oli liiga kribu (klient 10.09). Sama
   kuju mis kliendivaates. */
.acc-chevron {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    transition: transform .15s ease;
}
/* Ikoon on pluss; avatuna pöördub 45° ristiks (klient 10.09). */
.acc-chevron.is-open { transform: rotate(45deg); }

/* Sorditav veerupäis: link näeb välja nagu päis, mitte nagu link. */
th a.th-sort { color: inherit; text-decoration: none; white-space: nowrap; }
th a.th-sort:hover { text-decoration: underline; }
/* Sorditav veerg peab sorditav VÄLJA nägema (klient 10.09): passiivsel
   veerul hallikas ⇅, aktiivsel nool tekstis, hõljutamisel sinine. */
th a.th-sort:not(.is-active)::after {
    content: '⇅';
    margin-left: .3em;
    font-size: .85em;
    opacity: .4;
}
th a.th-sort:hover { color: var(--c-primary); text-decoration: none; }
th a.th-sort:hover::after { opacity: .9; }
th a.th-sort.is-active { color: var(--c-text); }

/* Teenuste loend (kliendi makett 10.09): hind paremal, kiip, Muuda. */
.svc-price {
    min-width: 6.5rem;
    text-align: right;
    white-space: nowrap;
    line-height: 1.3;
}
.svc-price s { color: var(--c-text-faint); margin-right: .25rem; }
/* Hulgirežiimi väljad rea all, veidi taandatult. */
.svc-bulk { margin: -.25rem 0 .75rem 0; padding-left: .25rem; }

/* Nädalagraafiku koondrea ikoon: kell avatud päeval, kuu suletud päeval. */
.wd-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--c-bg);
    color: var(--c-text-faint);
    flex: 0 0 auto;
}
.wd-icon--open { background: var(--c-success-soft); color: var(--c-success); }
.wd-icon svg { width: 18px; height: 18px; }

/* Teenuse muutmispaneel rea all: sisemine plokk, mitte eraldi kaart. */
.svc-editor {
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-bg);
    padding: var(--sp-4);
    margin: .25rem 0 .9rem;
}

/* ══════════════════════════════════════════════════════════════════
   Mobiil: tabelid kaartideks (≤768 px). Kliendi tellimus 10.09.2026.

   Üks lahendus kõigile tabelitele. Markup jääb tavaliseks <table>-iks;
   public/js/mobiil-tabel.js lisab tabelile klassi m-cards ja igale
   lahtrile data-label (veerupäise tekst) ning rollid:
     td.m-primary   peamine väärtus (reg-märk, nimi, kellaaeg), rasvane
     td.m-status    olekumärgis, kaardi paremas ülanurgas
     td.m-actions   tegevusnupud, kaardi lõpus
     td.drag-handle lohistamispide, peamise ees
   Rollid võib vaates ka ise kirjutada. Kaardi rida:
     [pide] [peamine .............] [olek]
     silt     väärtus
     silt     väärtus
     [nupud]
   Tabel, mis peab mobiilis külgsuunas kerima (võrdlusaruanne): ümbrisele
   .table-wrap--scroll (esimene veerg kleepuv, servavarjud näitavad, et
   saab kerida). Kogu leht ei liigu kunagi külgsuunas.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Kaartidena tabel ei vaja kerimiskasti; kasti negatiivne veeris
       tekitaks külgsuunalise ülevoolu. */
    .table-wrap:not(.table-wrap--scroll) { overflow: visible; margin: 0; padding: 0; }

    table.m-cards, table.m-cards > tbody { display: block; width: 100%; }
    table.m-cards > thead { display: none; }
    /* Sildiveerg: --m-silt on osa kaardi laiusest, --m-vahe vahe väärtuseni
       (kitsal ekraanil laiem, vt @media 480 px). */
    table.m-cards { --m-silt: .3; --m-vahe: .6rem; }

    table.m-cards > tbody > tr {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        column-gap: 0;
        row-gap: .3rem;
        padding: .85rem 0;
        border-bottom: 1px solid var(--c-border);
    }
    table.m-cards > tbody > tr:last-child { border-bottom: 0; }
    table.m-cards > tbody > tr:hover { background: transparent; }

    /* Iga lahter on kaardi rida: hall silt vasakul, väärtus paremal.
       Inline white-space/text-align (desktopi jaoks) ei kehti kaardil. */
    table.m-cards > tbody > tr > td {
        display: flow-root;
        grid-column: 1 / -1;
        padding: 0 0 0 calc(var(--m-silt) * 100% + var(--m-vahe)) !important;
        border: 0;
        min-width: 0;
        white-space: normal !important;
        text-align: left !important;
        font-size: .9rem;
        line-height: 1.4;
    }
    /* Silt ujub vasakusse veerisesse; väärtus koos oma reavahetustega
       (nt kliendi nimi + ettevõte) jääb tervenisti paremasse veergu.
       Silt täidab kogu vasakveeru (audit 25.09: silt oli veerust 30–40 px kitsam,
       murdus keset sõna "BRONEERIN|GUID" ja väärtused ei olnud ühes veerus).
       Lahtri padding-left protsent arvutatakse kaardi reast (100% = rida), sildi
       width ja margin-left protsent aga lahtri sisukastist, mis on vasakveeru
       võrra kitsam: sisu = rida × (1 − osa) − vahe, seega vasakveerg =
       (sisu + vahe) × osa / (1 − osa). Silt algab kaardi servast ja väärtus
       algab igal real samast kohast. Veerust pikem üksik sõna poolitatakse
       (hyphens, lang="et"), muidu murdub silt ainult sõnavahedest. */
    table.m-cards > tbody > tr > td::before {
        content: attr(data-label);
        float: left;
        width: calc((100% + var(--m-vahe)) * var(--m-silt) / (1 - var(--m-silt)));
        margin-left: calc((100% + var(--m-vahe)) * var(--m-silt) / (var(--m-silt) - 1) - var(--m-vahe));
        margin-right: var(--m-vahe);
        padding-top: .1em;
        font-size: .72rem;
        font-weight: 600;
        letter-spacing: .03em;
        text-transform: uppercase;
        color: var(--c-text-soft);
        line-height: 1.5;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    /* Sildita lahter (nt tühi veerupäis ilma nupata) võtab kogu rea. */
    table.m-cards > tbody > tr > td:not([data-label]) { display: block; padding-left: 0 !important; }
    table.m-cards > tbody > tr > td:empty { display: none; }

    /* Peamine väärtus: esimesel real, rasvane ja suurem; märgised
       (nt "korduv") jäävad kõrvale. */
    table.m-cards > tbody > tr > td.m-primary {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .2rem .5rem;
        grid-column: 2;
        grid-row: 1;
        padding-left: 0 !important;
        font-size: 1.02rem;
        font-weight: 600;
        margin-bottom: .15rem;
    }
    table.m-cards > tbody > tr > td.m-primary::before { display: none; }
    table.m-cards > tbody > tr > td.m-primary strong { font-weight: 700; }

    table.m-cards > tbody > tr > td.m-status {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: .15rem;
        grid-column: 3;
        grid-row: 1;
        padding-left: 0 !important;
        margin-left: .6rem;
    }
    table.m-cards > tbody > tr > td.m-status::before { display: none; }

    table.m-cards > tbody > tr > td.drag-handle {
        display: flex;
        align-items: center;
        grid-column: 1;
        grid-row: 1;
        width: auto;
        padding-left: 0 !important;
        margin-right: .55rem;
        font-size: 1.1rem;
    }
    table.m-cards > tbody > tr > td.drag-handle::before { display: none; }

    /* Tegevusnupud kaardi lõpus, vasakult; menüü avaneb nagu enne. */
    table.m-cards > tbody > tr > td.m-actions {
        display: block;
        grid-column: 1 / -1;
        padding-left: 0 !important;
        margin-top: .35rem;
    }
    table.m-cards > tbody > tr > td.m-actions::before { display: none; }
    table.m-cards > tbody > tr > td.m-actions .row-actions { justify-content: flex-start; flex-wrap: wrap; }
    table.m-cards > tbody > tr > td.m-actions form { display: inline-block; }
    table.m-cards > tbody > tr > td.m-actions .btn { min-height: 2.35rem; }

    /* Kaardil on ruumi: desktopil peidetud teisejärgulised veerud
       (kood, punkt, loomise aeg) tulevad tagasi. */
    table.m-cards > tbody > tr > td.col-sec { display: flow-root; }
    table.m-cards > tbody > tr > td.col-sec.m-actions { display: block; }

    /* Pikad väärtused murduvad loomulikult; e-post ja saaja tohivad
       murduda ka keset sõna, aga ei ulatu kaardist välja. */
    table.m-cards > tbody > tr > td > *,
    table.m-cards > tbody > tr > td { overflow-wrap: break-word; }
    table.m-cards > tbody > tr > td[data-label="E-post"],
    table.m-cards > tbody > tr > td[data-label="Saaja"],
    table.m-cards > tbody > tr > td[data-label="IP"] { overflow-wrap: anywhere; }
    table.m-cards td .status-dot { white-space: normal; align-items: flex-start; }
    table.m-cards td .status-dot::before { margin-top: .45em; }

    /* Sortimiskiipe mobiilis ei ole (klient 10.09): loend on päevade
       kaupa, sortimine on desktopi asi. Päis jääb peitu. */
    table.m-cards.m-sort > thead { display: none; }
    table.m-cards.m-sort--kiibid > thead { display: block; margin-bottom: .6rem; }
    table.m-cards.m-sort > thead > tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .35rem;
        border: 0 !important;
    }
    table.m-cards.m-sort > thead > tr::before {
        content: 'Järjesta';
        flex: 0 0 100%;
        font-size: .72rem;
        font-weight: 600;
        letter-spacing: .03em;
        text-transform: uppercase;
        color: var(--c-text-soft);
    }
    table.m-cards.m-sort > thead th { display: none; }
    table.m-cards.m-sort > thead th:has(a.th-sort) { display: inline-block; padding: 0 !important; border: 0; }
    table.m-cards.m-sort > thead th.col-sec { display: inline-block; }
    table.m-cards.m-sort th a.th-sort {
        display: inline-flex;
        align-items: center;
        gap: .2rem;
        padding: .3rem .7rem;
        border: 1px solid var(--c-border-strong);
        border-radius: 999px;
        background: var(--c-surface);
        font-size: .8rem;
        font-weight: 600;
        text-transform: none;
        letter-spacing: 0;
        color: var(--c-text);
    }
    table.m-cards.m-sort th a.th-sort.is-active {
        background: var(--c-primary-soft);
        border-color: var(--c-primary);
        color: var(--c-primary);
    }
    table.m-cards.m-sort th a.th-sort:not(.is-active)::after { display: none; }

    /* Külgsuunas keritav tabel: piiratud kast, kleepuv esimene veerg,
       servavarjud (background-attachment: local) näitavad, et sisu jätkub. */
    .table-wrap--scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0;
        padding: 0;
        background:
            linear-gradient(to right, var(--c-surface) 30%, rgba(255, 255, 255, 0)) left / 2.5rem 100% no-repeat local,
            linear-gradient(to left, var(--c-surface) 30%, rgba(255, 255, 255, 0)) right / 2.5rem 100% no-repeat local,
            linear-gradient(to right, rgba(16, 24, 40, .12), rgba(16, 24, 40, 0)) left / 1rem 100% no-repeat scroll,
            linear-gradient(to left, rgba(16, 24, 40, .12), rgba(16, 24, 40, 0)) right / 1rem 100% no-repeat scroll;
    }
    .table-wrap--scroll table { min-width: 40rem; }
    .table-wrap--scroll th:first-child,
    .table-wrap--scroll td:first-child {
        position: sticky;
        left: 0;
        background: var(--c-surface);
        z-index: 1;
    }

    /* ── Filtrid ja tegevusnupud ── */
    /* Väljad üksteise alla täislaiuses, nupud kahes veerus. */
    .form-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .6rem;
        align-items: end;
    }
    .form-row > .field, .form-row > .filter-pop, .form-row > .chips { grid-column: 1 / -1; min-width: 0; }
    .form-row .field { min-width: 0 !important; flex: none !important; }
    .form-row .field input, .form-row .field select { width: 100% !important; min-width: 0; }
    .form-row > .btn, .form-row > form > .btn {
        width: 100%;
        justify-content: center;
        min-width: 0;
        white-space: normal;
    }
    .form-row > .btn:first-of-type:last-of-type { grid-column: 1 / -1; }
    .filter-pop > .btn { width: 100%; justify-content: center; }
    .filter-panel .form-grid-2 { grid-template-columns: 1fr; }

    /* ── Väärtusread ── */
    /* Pika väärtusega read (töölaua tervis, .kv-stack-m): nimetus oma
       real, olek koos täpiga järgmisel, pikk kirjeldus murdub
       loomulikult. Lühikesed read (nt sõidukikategooriad) jäävad reaks. */
    .kv-line { flex-wrap: wrap; row-gap: .1rem; }
    .kv-stack-m .kv-line > *:first-child { flex: 1 1 100%; }
    .kv-line .status-dot { white-space: normal; align-items: flex-start; }
    .kv-line .status-dot::before { margin-top: .45em; }

    /* ── Punkti lehe loendid (teenused, tööajad, soodusajad, piirangud) ── */
    /* Sisu täislaiuses, hind, märgis ja nupud järgmisel real. */
    .disc-item { flex-wrap: wrap; gap: .5rem .75rem; align-items: center; }
    .disc-item__body { flex: 1 1 60%; }
    .disc-item .svc-price { text-align: left; min-width: 0; white-space: normal; }
    .disc-item > .badge { margin-left: 0; }
    .disc-item > [style*="inline-flex"], .disc-item > .btn { margin-left: auto; }

    /* Kaardid ja pealkirjad kitsamal ekraanil ruumi hoidma. */
    .card { padding: var(--sp-4); --card-pad: var(--sp-4); }
    .page-head > .btn, .toolbar > .btn { white-space: normal; }
}

@media (max-width: 480px) {
    .card { padding: var(--sp-3); --card-pad: var(--sp-3); }
    .container { padding: .75rem .6rem 2rem; }
    table.m-cards { --m-silt: .34; --m-vahe: .5rem; }
}

/* ── Akordionipäis (töölaua tervis, mobiili filtrikaardid) ── */
.acc-toggle {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    cursor: pointer;
    font-weight: 600;
    color: var(--c-text);
}
.acc-toggle:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; border-radius: 4px; }
/* Filtrikaardi lüliti on ainult mobiilis; desktopil on vorm alati lahti. */
.acc-toggle--m { display: none; }
@media (max-width: 768px) {
    .acc-toggle--m { display: flex; padding: .1rem 0; }
    .acc-toggle--m[aria-expanded="true"] { margin-bottom: var(--sp-3); }
    .acc-toggle--m .badge { margin-left: auto; }
}

/* ══════════════════════════════════════════════════════════════════
   Äpilik loend (mobiil ≤768 px). Kliendi soov 10.09: sildita read nagu
   telefoni loendis, kogu rida on link, täislaiuses, tihe rütm.
   Markup: <x-m-row> (resources/views/components/m-row.blade.php);
   desktop näeb sama andmeid tabelis (.table-wrap--desk), mobiil tabelit
   ei näe. .m-only = ainult mobiilis (otsing, kiibid); .desk-only =
   ainult desktopil (nt lohistamise vihje).
   ══════════════════════════════════════════════════════════════════ */
.m-list, .m-only { display: none; }
/* Mobiiliriba (.topbar-m) kõrgus: kleepuvad päised ja otsing jäävad selle alla. */
:root { --topbar-h: 56px; }
@media (max-width: 768px) {
    .table-wrap--desk, .desk-only { display: none !important; }
    .m-only { display: block; }

    .m-list { display: block; margin: 0 calc(-1 * var(--card-pad)); }
    .m-list:last-child { margin-bottom: calc(-1 * var(--card-pad) + .1rem); }
    .m-list:not(:first-child) { margin-top: .4rem; border-top: 1px solid var(--c-border); }

    .m-row {
        position: relative;
        display: flex;
        align-items: center;
        gap: .6rem;
        min-height: 3.4rem;
        padding: .65rem var(--card-pad);
    }
    .m-row + .m-row { border-top: 1px solid var(--c-border); }
    /* Kattev link: sisu jääb tavaliseks tekstiks, tegevused on lingi peal. */
    .m-row__link { position: absolute; inset: 0; z-index: 1; }
    .m-row:has(.m-row__link:active) { background: var(--c-bg); }
    .m-row__main { flex: 1 1 auto; min-width: 0; }
    .m-row__top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
    .m-row__title {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: .1rem .45rem;
        min-width: 0;
        font-size: .98rem;
        font-weight: 600;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }
    .m-row__title strong { font-weight: 700; }
    .m-row__title .badge { align-self: center; }
    .m-row__time { color: var(--c-text-soft); font-weight: 500; font-variant-numeric: tabular-nums; }
    .m-row__time--lead { color: var(--c-text); font-weight: 700; }
    .m-row__status { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; padding-top: .05rem; }
    .m-row__meta { margin-top: .15rem; font-size: .84rem; line-height: 1.4; color: var(--c-text-soft); overflow-wrap: anywhere; }
    .m-row__extra { margin-top: .2rem; font-size: .84rem; line-height: 1.4; overflow-wrap: anywhere; }
    .m-row__extra .status-dot { white-space: normal; }
    .m-row__actions { position: relative; z-index: 2; flex: 0 0 auto; display: flex; align-items: center; gap: .35rem; }
    /* Põhinupp ja ⋯ üksteise all: kõrvuti võtaksid pealkirjalt liiga palju laiust. */
    .m-row__actions .row-actions { flex-direction: column; align-items: flex-end; justify-content: center; gap: .3rem; }
    .m-row__actions form { display: inline-block; }
    .m-row__chev { flex: 0 0 auto; margin-right: -.15rem; color: var(--c-text-faint); font-size: 1.5rem; line-height: 1; }

    /* Päevapäis: kleepub mobiiliriba alla. */
    .m-list__group {
        position: sticky;
        top: var(--topbar-h, 3.25rem);
        z-index: 3;
        padding: .3rem var(--card-pad);
        background: var(--c-bg);
        border-top: 1px solid var(--c-border);
        border-bottom: 1px solid var(--c-border);
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--c-text-soft);
    }
    .m-list__group + .m-row { border-top: 0; }

    /* Kleepuv otsing ja horisontaalselt keritav kiibirida. */
    .m-search {
        position: sticky;
        top: var(--topbar-h, 3.25rem);
        z-index: 4;
        display: flex;
        gap: .5rem;
        padding: .45rem 0;
        background: var(--c-bg);
    }
    .m-search input { flex: 1 1 auto; min-width: 0; }
    .m-search .btn { flex: 0 0 auto; }
    .m-chips {
        display: flex;
        gap: .4rem;
        overflow-x: auto;
        padding: .15rem 0 .7rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .m-chips::-webkit-scrollbar { display: none; }
    .m-chip {
        flex: 0 0 auto;
        padding: .38rem .85rem;
        border: 1px solid var(--c-border-strong);
        border-radius: 999px;
        background: var(--c-surface);
        color: var(--c-text);
        font: inherit;
        font-size: .82rem;
        font-weight: 600;
        line-height: 1.2;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
    }
    .m-chip.is-on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
}

/* ══════════════════════════════════════════════════════════════════
   Alumine ribamenüü ja "+" nupp (mobiil ≤768 px). Kliendi soov 10.09.
   Neli igapäevast kohta + "Rohkem" (avab sahtli). Sisu saab alt lisaruumi,
   et viimane rida ei jääks riba alla; rea ⋯-menüü arvestab ribaga
   (--bottom-inset, vt js/rea-menyy.js). Desktopil peidus.
   ══════════════════════════════════════════════════════════════════ */
.bottom-nav, .fab { display: none; }
@media (max-width: 768px) {
    :root { --bottom-nav-h: 3.6rem; --bottom-inset: calc(3.6rem + env(safe-area-inset-bottom, 0px)); }
    .bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        display: flex;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--c-surface);
        border-top: 1px solid var(--c-border);
        box-shadow: 0 -4px 16px rgba(16, 24, 40, .06);
    }
    .bottom-nav__item {
        flex: 1 1 0;
        min-width: 0;
        height: var(--bottom-nav-h);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .2rem;
        padding: 0 .15rem;
        border: 0;
        background: none;
        font: inherit;
        font-size: .64rem;
        font-weight: 600;
        letter-spacing: .01em;
        color: var(--c-text-soft);
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .bottom-nav__item svg { width: 22px; height: 22px; stroke-width: 1.8; }
    .bottom-nav__item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .bottom-nav__item.is-active { color: var(--c-primary); }
    .bottom-nav__item:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -3px; border-radius: 6px; }

    /* Sisu ei tohi jääda riba alla. */
    .content { padding-bottom: calc(var(--bottom-inset) + var(--sp-5)); }

    /* Ujuv "+" nupp riba kohal paremas servas. */
    .fab {
        position: fixed;
        right: 1rem;
        bottom: calc(var(--bottom-inset) + .9rem);
        z-index: 49;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3.4rem;
        height: 3.4rem;
        border-radius: 50%;
        background: var(--c-primary);
        color: #fff;
        box-shadow: 0 8px 20px rgba(29, 78, 216, .35);
        text-decoration: none;
    }
    .fab svg { width: 26px; height: 26px; }
    .fab:active { transform: scale(.96); }
}

/* ══════════════════════════════════════════════════════════════════
   Mobiili päis (≤768 px). Kliendi valik 2 maketist 10.09: hamburger
   asendub alumise riba "Rohkem"-iga; ribas on tagasinool või ettevõtte
   nimi, lehe pealkiri ja kasutaja initsiaalid tähelepanu täpiga.
   Sisu H1 on mobiilis peidus (pealkiri on ribas), v.a kui H1 kannab
   olekumärgist (broneering, punkt), siis jääb väiksemana.
   769 kuni 900 px: hamburger ja ettevõtte nimi nagu enne.
   ══════════════════════════════════════════════════════════════════ */
.topbar-m__back, .topbar-m__brand-s, .topbar-m__title, .topbar-m__user { display: none; }
@media (max-width: 768px) {
    .topbar-m { display: grid; grid-template-columns: 1fr auto 1fr; gap: .5rem; min-height: var(--topbar-h); box-sizing: border-box; padding: .4rem var(--sp-3); }
    .topbar-m__btn, .topbar-m__brand { display: none; }
    .topbar-m__back, .topbar-m__brand-s { display: flex; align-items: center; gap: .15rem; min-width: 0; font-size: .82rem; color: rgba(255, 255, 255, .85); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .topbar-m__back svg { width: 20px; height: 20px; flex: 0 0 auto; margin-left: -.35rem; }
    .topbar-m__back span { overflow: hidden; text-overflow: ellipsis; }
    .topbar-m__title { display: block; font-weight: 700; font-size: 1rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55vw; }
    .topbar-m__user { display: flex; justify-content: flex-end; position: relative; }
    .topbar-m__avatar {
        position: relative;
        width: 36px;
        height: 36px;
        border: 0;
        border-radius: 50%;
        background: var(--c-side-accent);
        color: #0b1a4a;
        font: inherit;
        font-size: .82rem;
        font-weight: 700;
        cursor: pointer;
    }
    .topbar-m__avatar[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }
    .topbar-m__dot { position: absolute; top: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%; background: #f04438; border: 2px solid var(--c-side-bg); }


    /* Pealkiri on ribas: sisu H1 peitu, olekumärgisega H1 jääb väiksemana. */
    .page-head h1:not(:has(.badge)) { display: none; }
    .page-head h1:has(.badge) { font-size: 1.1rem; }
    .page-head { margin-bottom: .6rem; }

    /* Kalender: toolbar kahel real, nupud puutesõbralikud, päevakava
       loend samas keeles mis mobiililoendid. */
    #calendar .fc-toolbar { flex-wrap: wrap; gap: .4rem; }
    #calendar .fc-header-toolbar { margin-bottom: .5rem !important; }
    #calendar .fc-footer-toolbar { margin-top: .6rem !important; justify-content: center; }
    #calendar .fc-toolbar-title { font-size: 1rem; }
    #calendar .fc-button { padding: .45rem .7rem; }
    #calendar .fc-timegrid-slot { height: 2.4rem; }
    #calendar .fc-event { font-size: .84rem; border-radius: 6px; }
    #calendar .fc-list { border: 1px solid var(--c-border); border-radius: 10px; overflow: hidden; }
    #calendar .fc-list-day-cushion { padding: .3rem .85rem; background: var(--c-bg); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--c-text-soft); }
    #calendar .fc-list-event td { padding: .55rem .85rem; font-size: .92rem; }
    #calendar .fc-list-event-time { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
    #calendar .fc-list-empty { background: var(--c-surface); color: var(--c-text-soft); }
}

/* Broneeringu vaate olek pealkirja kõrval: märgis peab olema pealkirjaga
   samas kaalus, mitte hall miniatuur, mis kaob ära (klient 10.09). */
.page-head h1 .badge {
    font-size: .95rem;
    padding: .28rem .85rem;
    margin-left: .5rem;
    vertical-align: middle;
}

/* Varukoopiad (Süsteem → Varukoopiad), kliendi makett 10.09: nupp
   üleval, olekukaardid, koopiate tabel liigifiltriga, ajakava ja
   toimingute loend. Värvid ja raadiused disainisüsteemist. */
.vk-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.vk-stat {
    display: flex; align-items: center; gap: var(--sp-3);
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
    padding: var(--sp-3) var(--sp-4); box-shadow: var(--shadow); min-width: 0;
}
.vk-stat__ico, .vk-row__ico, .vk-sched__ico, .vk-log__ico {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 36px; height: 36px; border-radius: var(--radius-sm);
    background: var(--c-primary-soft); color: var(--c-primary);
}
.vk-stat__ico--ok, .vk-log__ico--ok { background: var(--c-success-soft); color: var(--c-success); }
.vk-stat__ico--viga, .vk-log__ico--viga { background: var(--c-danger-soft); color: var(--c-danger); }
.vk-stat__label, .vk-sched__desc, .vk-log__desc, .vk-row__file { color: var(--c-text-soft); font-size: .8rem; }
.vk-stat__value { font-weight: 600; margin-top: .1rem; }
.vk-toolbar { align-items: flex-start; }
.vk-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-3); }
.vk-chip {
    border: 1px solid var(--c-border-strong); background: var(--c-surface); color: var(--c-text);
    border-radius: var(--radius-sm); padding: .35rem .8rem; font: inherit; font-size: .85rem; font-weight: 500; cursor: pointer;
}
.vk-chip.is-on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.vk-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.vk-table td { vertical-align: middle; }
.vk-row { display: flex; align-items: center; gap: var(--sp-3); }
.vk-row__ico, .vk-sched__ico, .vk-log__ico { width: 32px; height: 32px; }
.vk-row__name, .vk-sched__name, .vk-log__name { font-weight: 600; }
.vk-date { white-space: nowrap; line-height: 1.3; }
.vk-dl { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.vk-sched { margin-top: var(--sp-3); }
.vk-sched__row, .vk-log__row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--c-border); }
.vk-log__main { flex: 1; min-width: 0; }
.vk-log__time { color: var(--c-text-soft); font-size: .85rem; white-space: nowrap; }
.vk-info { display: flex; gap: .5rem; align-items: flex-start; color: var(--c-text-soft); font-size: .85rem; margin: var(--sp-3) 0 0; }
.vk-info svg { flex-shrink: 0; margin-top: .15rem; }
@media (max-width: 900px) { .vk-stats { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
    .vk-dl__txt { display: none; }
    .vk-dl { padding: .4rem .5rem; }
}
@media (max-width: 768px) { .vk-table { min-width: 620px; } }

/* ── Analüütika → Broneerimislehter (kliendi makett 12.09) ── */
.lehter-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--sp-4); }
.lehter-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
/* Asukohad (klient 12.09): maakonnad ja linnad kõrvuti, kitsal üksteise all. */
.lehter-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.lehter-h3 { font-size: .95rem; font-weight: 700; margin: 0 0 .4rem; }
.lehter-grid > .card, .lehter-grid3 > .card { margin-bottom: var(--sp-4); }
.lehter-hea { color: var(--c-success); font-weight: 600; }
.lehter-halb { color: var(--c-warning); font-weight: 600; }
.lehter-legend { font-size: .82rem; color: var(--c-text-soft); margin: -.25rem 0 .9rem; line-height: 1.5; }
.lehter-legend__bar { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--c-chart); margin-right: .35rem; vertical-align: -1px; }
.lehter-legend__bar--warn { background: #f0a35a; }
/* Legend kiipidena: värviline ruut "i"-ga, lühike silt, pikem lause vihjemullis (klient 12.09). */
.lehter-legend--chips { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.lehter-legend__chip { margin-left: 0; gap: .4rem; color: var(--c-text-soft); }
.lehter-legend__chip:hover, .lehter-legend__chip:focus { color: var(--c-text); }
.lehter-legend__chip .lehter-legend__bar { width: 16px; height: 16px; margin-right: 0; border-radius: 4px; color: #fff; font: 700 10px/16px system-ui, sans-serif; font-style: normal; text-align: center; }
.lehter__h .vihje { margin-left: .2rem; }
.lehter__h .vihje::after { text-transform: none; letter-spacing: normal; font-weight: 400; }
.lehter-esialgne { font-size: .82rem; color: var(--c-text-soft); margin: 0 0 .6rem; }
.lehter-esialgne .badge { margin-right: .3rem; }
/* Analüütika KPI-plaadid kaardi sees, lüliti, virnriba ja hoiatus (kliendi makett 12.09). */
.ana-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.ana-kpi--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; align-content: start; }
.ana-kpi--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ana-kpi__tile { border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: .6rem .8rem; background: var(--c-bg); }
.ana-kpi__label { font-size: .78rem; color: var(--c-text-soft); margin-bottom: .15rem; }
.ana-kpi__value { font-size: 1.35rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ana-kpi__value small { font-size: .8rem; font-weight: 600; margin-left: .15rem; }
/* Arvu asemel lühike tekst (nt "Kontrollrühma ei ole"): väiksem, et mahuks. Pärast .ana-kpi__value, muidu see kirjutaks üle. */
.ana-kpi__value--tekst { font-size: 1rem; font-weight: 600; }
.ana-kpi__hint { font-size: .76rem; color: var(--c-text-faint); margin-top: .15rem; }
.seg { display: inline-flex; border: 1px solid var(--c-border); border-radius: 999px; padding: 2px; background: var(--c-bg); }
.seg button { border: 0; background: transparent; padding: .25rem .75rem; border-radius: 999px; font: inherit; font-size: .8rem; font-weight: 600; color: var(--c-text-soft); cursor: pointer; }
.seg button.is-active { background: var(--c-text); color: #fff; }
.virn { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--c-chart-faint); margin: .4rem 0 .6rem; }
.virn i { display: block; height: 100%; }
.virn__leitud { background: var(--c-success); }
.virn__ei { background: #f0a35a; }
.virn__viga { background: var(--c-danger); }
.virn-legend { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: .82rem; color: var(--c-text-soft); }
.virn-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .35rem; }
.virn-legend strong { margin-left: .3rem; color: var(--c-text); }
.ana-hoiatus { display: flex; gap: .55rem; align-items: flex-start; margin-top: var(--sp-3); padding: .6rem .8rem; border-radius: var(--radius-sm); background: var(--c-warning-soft); color: var(--c-text); font-size: .85rem; line-height: 1.45; }
.ana-hoiatus svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--c-warning); margin-top: 1px; }
@media (max-width: 900px) { .ana-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) and (min-width: 701px) { .ana-kpi--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .ana-kpi--3 { grid-template-columns: 1fr; } }
/* Kaardi päis pealkirja, alapealkirja ja paremal suure numbriga (kliendi makett 12.09, aruanne). */
.kaart-pais { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.kaart-pais h2 { margin: 0 0 .1rem; }
.kaart-pais__all { font-size: .82rem; color: var(--c-text-soft); margin: 0; }
.kaart-num { text-align: right; white-space: nowrap; }
.kaart-num strong { display: block; font-size: 1.35rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kaart-num span { font-size: .78rem; color: var(--c-text-soft); }
/* Katkenud katsete põhjused plaatidena: number värvilises ruudus, silt ja selgitus. */
.pohjus-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); }
.pohjus-tile { display: flex; gap: .8rem; align-items: flex-start; padding: .6rem .8rem; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-bg); }
.pohjus-tile__n { flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--c-warning-soft); color: var(--c-warning); font-weight: 700; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.pohjus-tile__silt { font-weight: 700; font-size: .92rem; margin-bottom: .1rem; }
.pohjus-tile__selgitus { font-size: .82rem; color: var(--c-text-soft); line-height: 1.45; }
.kategooria-kood { display: inline-block; min-width: 2.4rem; padding: .1rem .45rem; border-radius: var(--radius-sm); background: var(--c-bg); border: 1px solid var(--c-border); font-weight: 700; font-size: .85rem; text-align: center; }
/* Punkti "Veebilehe seaded" kaart (kliendi makett 12.09): kaks veergu, jaotised, aadressi eesliide, sammud. */
.veeb-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--sp-6); }
.veeb-h3 { font-size: .95rem; font-weight: 700; margin: 0 0 .15rem; }
.veeb-hint { font-size: .82rem; color: var(--c-text-soft); margin: 0 0 .8rem; }
.veeb-divider { border-top: 1px solid var(--c-border); margin: .4rem 0 1rem; }
.field label.veeb-label { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.veeb-prefix { display: flex; align-items: stretch; }
.veeb-prefix span { display: flex; align-items: center; padding: 0 .6rem; border: 1px solid var(--c-border); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); background: var(--c-bg); font-size: .85rem; color: var(--c-text-soft); white-space: nowrap; }
.veeb-prefix input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.veeb-avalik { margin: .4rem 0 0; padding: .4rem .6rem; border-radius: var(--radius-sm); background: var(--c-bg); font-size: .85rem; }
.veeb-steps { list-style: none; margin: .5rem 0; padding: 0; font-size: .85rem; }
.veeb-steps li { display: flex; align-items: flex-start; gap: .55rem; margin-bottom: .4rem; }
.veeb-steps i { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--c-primary-soft); color: var(--c-primary); font: 700 .74rem/20px system-ui, sans-serif; font-style: normal; text-align: center; }
.veeb-note { margin: .6rem 0 0; padding: .6rem .8rem; border-radius: var(--radius-sm); background: var(--c-primary-soft); font-size: .82rem; line-height: 1.45; }
@media (max-width: 900px) { .veeb-grid { grid-template-columns: 1fr; } }
/* Süsteemiseaded (kliendi makett 12.09): plokid kaardi sees, väljad ühikuga, hoiatuskast. */
.sead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: start; }
.sead-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-4); }
.sead-plokk { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 1rem 1.1rem .4rem; }
.sead-plokk .field { margin-bottom: .9rem; }
.sead-h3 { font-size: .95rem; font-weight: 700; margin: 0 0 .7rem; }
.sead-hint { font-size: .82rem; color: var(--c-text-soft); margin: -.4rem 0 .8rem; line-height: 1.45; }
.sead-info { font-size: .8rem; margin-top: .3rem; }
.yhik { display: flex; align-items: stretch; }
.yhik input { border-radius: var(--radius-sm) 0 0 var(--radius-sm); min-width: 0; }
.yhik span { display: flex; align-items: center; padding: 0 .65rem; border: 1px solid var(--c-border); border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--c-surface); font-size: .82rem; color: var(--c-text-soft); white-space: nowrap; }
.sead-danger { display: flex; gap: .5rem; align-items: flex-start; margin: 0 0 .9rem; padding: .6rem .8rem; border-radius: var(--radius-sm); background: var(--c-danger-soft); border: 1px solid var(--c-danger-border); color: var(--c-danger); font-size: .82rem; line-height: 1.45; }
.sead-danger svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }
@media (max-width: 900px) { .sead-grid, .sead-grid2 { grid-template-columns: 1fr; } }
/* Süsteemi tervis töölaual (kliendi makett 12.09): koondnumbrid, tähelepanu
   plaadid, kontrollide read kahes veerus, jalus. */
.tervis-pais { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.tervis-pais .acc-toggle { width: auto; flex: 1 1 auto; margin: 0; }
.tervis-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.tervis-chip svg { width: 14px; height: 14px; }
.tervis-chip--ok { background: var(--c-success-soft); color: var(--c-success); }
.tervis-chip--warn { background: var(--c-warning-soft); color: var(--c-warning); }
.tervis-chip--off { background: var(--c-bg); color: var(--c-text-soft); border: 1px solid var(--c-border); }
.tervis-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-3); }
.tervis-kpi .ana-kpi__label { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.tervis-kpi .ana-kpi__label svg { width: 15px; height: 15px; color: var(--c-text-faint); flex: 0 0 auto; }
.tervis-tahelepanu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.tervis-tile { padding: .6rem .8rem; border-radius: var(--radius-sm); border: 1px solid var(--c-border); background: var(--c-bg); border-left-width: 4px; }
.tervis-tile--danger { border-left-color: var(--c-danger); }
.tervis-tile--warn { border-left-color: var(--c-warning); }
.tervis-tile--off, .tervis-tile--none { border-left-color: var(--c-text-faint); }
.tervis-tile__silt { font-weight: 700; font-size: .9rem; margin-bottom: .15rem; }
.tervis-tile__tekst { font-size: .8rem; color: var(--c-text-soft); line-height: 1.45; }
.tervis-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .2rem; }
.tervis-h h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.tervis-h span { font-size: .78rem; color: var(--c-text-soft); }
.tervis-rida { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: .45rem 0; border-top: 1px solid #f0f2f5; }
.tervis-rida__silt { font-weight: 600; font-size: .89rem; }
.tervis-rida__all { font-size: .8rem; color: var(--c-text-soft); margin-top: .1rem; }
.tervis-rida__olek { font-size: .82rem; font-weight: 600; flex: 0 0 auto; }
.tervis-jalus { display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); padding-top: var(--sp-2); border-top: 1px solid var(--c-border); font-size: .78rem; color: var(--c-text-soft); }
@media (max-width: 900px) { .tervis-kpi, .tervis-tahelepanu { grid-template-columns: 1fr; } }
/* Analüütika tabelid sama suurusega kui kv-read kestuste kastis (klient 12.09). */
.lehter-tabel { font-size: .89rem; }
.lehter-tabel td { padding: .45rem .6rem !important; }
/* Allika platvormid ja kampaania jaotus ("73 sotsiaalmeediast, 6 otse") oma real kogu laiuses (kasutaja 02.10). */
.lehter-tabel tr.lehter-pea td { border-bottom: 0; padding-bottom: .1rem !important; }
.lehter-tabel tr.lehter-jaotus td { padding-top: 0 !important; font-size: .8rem; color: var(--c-text-soft); }
/* Telefonis teeb mobiil-tabel.js igast reast kaardi: jaotus põhirea kaardi sisse, eraldi rida peitu (ülevaatus 02.10).
   Klass m-cards on tabelil igal laiusel, kaardid ainult kuni 768 px (nagu m-cards reeglid). */
.lehter-jaotus__mob { display: none; }
@media (max-width: 768px) {
    table.m-cards > tbody > tr.lehter-jaotus { display: none; }
    table.m-cards .lehter-jaotus__mob { display: block; flex-basis: 100%; font-size: .8rem; font-weight: 400; color: var(--c-text-soft); }
}
/* Lehter: samm, riba, arvud. Riba laius on osakaal lehe avanuist. */
/* Numbriveerud sisu järgi (auto), et pealkirjad "Seansse" ja "Katkestas"
   mahuksid ära (klient 12.09). Neli veergu: samm, riba, seansse, katkestas. */
.lehter { display: grid; grid-template-columns: minmax(150px, 190px) minmax(0, 1fr) auto auto; gap: 8px 18px; align-items: center; font-size: .89rem; }
.lehter__h { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-faint); font-weight: 600; padding-bottom: 4px; border-bottom: 1px solid var(--c-border); white-space: nowrap; }
.lehter__samm { font-weight: 500; }
.lehter__samm--suurim { font-weight: 700; }
.lehter__bar { height: 20px; background: var(--c-chart-faint); border-radius: 4px; overflow: hidden; }
.lehter__bar i { display: block; height: 100%; min-width: 2px; background: var(--c-chart); border-radius: 4px; }
.lehter__bar--warn i { background: #f0a35a; }
.lehter-note { display: inline-flex; flex-wrap: wrap; gap: .35rem; margin-top: var(--sp-3); padding: .5rem .8rem; border-radius: var(--radius-sm); background: var(--c-warning-soft); color: var(--c-warning); font-size: .85rem; }
.lehter-note a { color: inherit; }
.lehter-selgitus { background: #fffdf5; border-color: #fbe3b5; }
.lehter-selgitus__pealkiri { font-size: 1.05rem; font-weight: 700; color: var(--c-warning); margin: 0 0 .5rem; line-height: 1.3; }
.lehter-selgitus p { font-size: .89rem; line-height: 1.5; margin: 0 0 .75rem; }
.lehter-selgitus__loend { margin: 0 0 var(--sp-4); padding-left: 1.1rem; font-size: .86rem; line-height: 1.5; }
.lehter-pikim { background: var(--c-warning-soft); margin: 0 calc(-1 * var(--sp-2)); padding-left: var(--sp-2); padding-right: var(--sp-2); border-radius: var(--radius-sm); }
.lehter-pikim .badge { margin-left: .35rem; }
.lehter-mini { display: inline-block; width: 52px; height: 8px; vertical-align: middle; margin-right: .4rem; background: var(--c-chart-faint); border-radius: 4px; overflow: hidden; }
.lehter-mini i { display: block; height: 100%; background: var(--c-chart); border-radius: 4px; }
.lehter-donut { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-3); }
.lehter-donut svg { flex: 0 0 auto; color: var(--c-text); }
.lehter-donut__legend { font-size: .85rem; display: flex; flex-direction: column; gap: .35rem; }
.lehter-donut__legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .4rem; vertical-align: -1px; }
.lehter-donut__legend strong { margin-left: .35rem; }
@media (max-width: 1100px) {
    .lehter-grid, .lehter-grid3, .lehter-grid2 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .lehter { grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 10px; }
    .lehter__bar, .lehter__h:nth-child(2) { display: none; }
}

/* Konto rippmenüü: sama mobiili päises ja arvuti päises (klient 12.09). */
.acct-sheet {
    position: absolute;
    top: calc(100% + .55rem);
    right: 0;
    z-index: 70;
    width: min(18rem, calc(100vw - 1.5rem));
    padding: .35rem 0;
    background: var(--c-surface);
    color: var(--c-text);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(16, 24, 40, .18);
    text-align: left;
}
.acct-sheet__who { padding: .6rem .95rem .55rem; border-bottom: 1px solid var(--c-border); }
.acct-sheet__who strong { display: block; }
.acct-sheet__who small { color: var(--c-text-soft); font-size: .8rem; overflow-wrap: anywhere; }
.acct-sheet__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    padding: .65rem .95rem;
    border: 0;
    background: none;
    font: inherit;
    font-size: .92rem;
    color: var(--c-text);
    text-decoration: none;
    text-align: left;
    cursor: pointer;
}
.acct-sheet__item:hover { background: var(--c-bg); text-decoration: none; }
.acct-sheet__item--danger { color: var(--c-danger); }
.acct-sheet__sep { border-top: 1px solid var(--c-border); margin: .3rem 0; }
.acct-sheet form { margin: 0; }
/* ── Arvuti päis: teated ja kasutaja üleval paremal (klient 12.09) ── */
/* Päriselt riba (klient 12.09: nurgas hõljuv plokk oli halb): valge
   taust, alumine joon, sisu joondub sisuveeru parema servaga, mitte
   ekraani servaga. */
.topbar-d {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    padding: 0 var(--sp-6);
}
.topbar-d__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-4);
    max-width: calc(1400px - 2 * var(--sp-6));
    height: 56px;
}
.topbar-d__title { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.topbar-d__right { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }
/* Tee ribal (klient 12.09): jaotise link, nool, lehe nimi, olekumärgis. */
.topbar-d__tee { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.topbar-d__parent { color: var(--c-text-soft); font-weight: 500; font-size: .95rem; white-space: nowrap; text-decoration: none; flex: 0 0 auto; }
.topbar-d__parent:hover { color: var(--c-primary); text-decoration: underline; }
.topbar-d__sep { width: 16px; height: 16px; color: var(--c-text-faint); flex: 0 0 auto; }
.topbar-d__olek { display: inline-flex; gap: .35rem; flex: 0 0 auto; }
.topbar-d__olek .badge { font-size: .8rem; padding: .22rem .7rem; }
/* Variant A (klient 12.09): pealkiri ja olek on ribal, sisus jääb
   alapealkiri ja nupud. Otse .page-head lapsena olev h1 jääb nähtamatu
   nullsuuruses kohatäiteks, et nupud püsiksid paremas servas. */
@media (min-width: 901px) {
    .page-head > h1 { visibility: hidden; width: 0; height: 0; margin: 0; padding: 0; overflow: hidden; }
    .page-title > h1 { display: none; }
}
.topbar-d__item { position: relative; }
.topbar-d__bell {
    position: relative;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 50%;
    background: none;
    color: var(--c-text-soft);
    cursor: pointer;
}
.topbar-d__bell:hover, .topbar-d__bell[aria-expanded="true"] { background: var(--c-bg); border-color: var(--c-border); color: var(--c-text); }
.topbar-d__dot { position: absolute; top: 7px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: #f04438; border: 2px solid var(--c-surface); }
.topbar-d__avatar { position: relative; }
/* Numbrimärk kellukese nurgas, mitte ikooni peal. */
.topbar-d__count {
    position: absolute;
    top: -2px;
    right: -4px;
    min-width: 10px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #f04438;
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    border: 2px solid var(--c-surface);
    box-sizing: content-box;
}
.acct-sheet--teated { width: min(22rem, calc(100vw - 1.5rem)); }
.teated__ryhm { padding: .55rem .95rem .25rem; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-faint); font-weight: 600; }
.teated__aeg { color: var(--c-text-faint); font-size: .76rem; white-space: nowrap; }
.teated__tyhi { padding: .8rem .95rem; color: var(--c-text-soft); font-size: .9rem; }
.teated__koik { color: var(--c-primary); font-size: .85rem; }
.topbar-d__dot--2fa { top: -1px; right: -1px; background: var(--c-warning); }
.topbar-d__user {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .25rem .55rem .25rem .3rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: none;
    font: inherit;
    color: var(--c-text);
    cursor: pointer;
}
.topbar-d__user:hover, .topbar-d__user[aria-expanded="true"] { background: var(--c-bg); border-color: var(--c-border); }
.topbar-d__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--c-primary-soft);
    color: var(--c-primary);
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .02em;
}
.topbar-d__who { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.topbar-d__who strong { font-size: .9rem; font-weight: 600; }
.topbar-d__who small { font-size: .76rem; color: var(--c-text-soft); }
.topbar-d__chev { width: 16px; height: 16px; color: var(--c-text-faint); }
.topbar-d + .content { padding-top: var(--sp-5); }
@media (max-width: 900px) {
    .topbar-d { display: none; }
}

/* ── Automaatreeglid (soodustuste reeglid, etapp A3, kliendi maketid 13.09) ── */
.tabs a {
    display: inline-block;
    border-radius: 7px;
    padding: .45rem .95rem;
    font-weight: 500;
    color: var(--c-text-soft);
    white-space: nowrap;
    text-decoration: none;
}
.tabs a:hover { color: var(--c-text); text-decoration: none; }
.tabs a.is-active {
    background: var(--c-surface);
    color: var(--c-primary);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .12), 0 1px 2px rgba(16, 24, 40, .06);
}
/* Automaatreeglite nimekiri (kliendi makett 23.09): kokkuvõtteriba, otsing,
   kiibid ja read, klõps avab detaili rea alla. */
.rule-sum { display: flex; flex-wrap: wrap; align-items: center; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); font-size: .9rem; color: var(--c-text-soft); row-gap: var(--sp-2); }
.rule-sum span { padding: 0 var(--sp-4); }
.rule-sum span:first-child { padding-left: 0; }
.rule-sum span + span { border-left: 1px solid var(--c-border); }
.rule-sum b { color: var(--c-text); font-size: 1rem; }
.rule-sum__warn { color: var(--c-warning); font-weight: 600; }
.rule-list { padding: 0; overflow: hidden; }
.rule-list__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4) var(--sp-2); }
.rule-list__head h2 { margin: 0; font-size: 1rem; }
.rule-list__head .muted { font-size: .84rem; }
.rule-list__head--flush { padding: 0 0 var(--sp-3); }
.rule-list > .empty { padding: var(--sp-4); }
.rule-seg { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 var(--sp-4) var(--sp-3); }
.rule-seg button { width: auto; border: 1px solid var(--c-border-strong); background: var(--c-surface); color: var(--c-text-soft); border-radius: var(--radius-sm); padding: .3rem .7rem; font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
.rule-seg button:hover { color: var(--c-text); }
.rule-seg button.is-active { border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-primary); }
.rule-seg button b { font-variant-numeric: tabular-nums; }
/* Rühma pealkiri (kasutaja 24.09, variant "Ikoon ja selgitus"): olekuikoon ringis,
   nimi ja arv, teisel real selgitus. Ootab otsust on kõige valjem, Kehtib ja Jälgib
   toonitud, Peatatud hall ja paremal Näita/Peida nupp. */
.rule-grp { display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-4); border-top: 1px solid var(--c-border); background: var(--c-bg); font-size: .9rem; font-weight: 700; line-height: 1.3; color: var(--c-text); }
.rule-grp .rg-ik { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--c-border-strong); background: var(--c-surface); color: var(--c-text-soft); }
.rule-grp .rg-ik svg { display: block; width: 16px; height: 16px; }
.rule-grp .rg-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rule-grp .rg-rida { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.rule-grp .rg-arv { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; border: 1px solid var(--c-border-strong); background: var(--c-surface); color: var(--c-text-soft); font-size: .75rem; font-variant-numeric: tabular-nums; line-height: 1; }
.rule-grp .rg-abi { font-size: .82rem; font-weight: 500; color: var(--c-text-soft); overflow-wrap: anywhere; }
.rule-grp--ootab { background: var(--c-warning-soft); border-top-color: var(--c-warning-border); box-shadow: inset 4px 0 0 var(--c-warning); }
.rule-grp--ootab .rg-ik { background: var(--c-warning); border-color: var(--c-warning); color: var(--c-surface); box-shadow: 0 0 0 3px var(--c-warning-border); }
.rule-grp--ootab .rg-arv { background: var(--c-warning); border-color: var(--c-warning); color: var(--c-surface); }
.rule-grp--ootab .rg-abi { color: var(--c-warning); font-weight: 600; }
.rule-grp--kehtib { background: var(--c-success-soft); border-top-color: var(--c-success-border); }
.rule-grp--kehtib .rg-ik, .rule-grp--kehtib .rg-arv { border-color: var(--c-success-border); color: var(--c-success); }
.rule-grp--jalgib { background: var(--c-primary-soft); border-top-color: var(--c-primary-border); }
.rule-grp--jalgib .rg-ik, .rule-grp--jalgib .rg-arv { border-color: var(--c-primary-border); color: var(--c-primary); }
.rule-grp--peatatud { padding-block: var(--sp-2); color: var(--c-text-soft); }
.rule-grp--peatatud .rg-ik { width: 26px; height: 26px; }
.rule-grp .rg-nool { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--sp-1); padding: 4px var(--sp-2) 4px 10px; border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm); background: var(--c-surface); color: var(--c-text-soft); font-size: .8rem; font-weight: 600; }
.rule-grp .rg-nool svg { display: block; width: 16px; height: 16px; transition: transform .15s ease; }
.rule-grp .rg-nool__peida { display: none; }
.rule-grp-kinni[open] > summary .rg-nool__naita { display: none; }
.rule-grp-kinni[open] > summary .rg-nool__peida { display: inline; }
.rule-grp-kinni[open] > summary .rg-nool svg { transform: rotate(180deg); }
.rule-grp-kinni > summary:hover .rg-nool { border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-primary); }
@media (prefers-reduced-motion: reduce) { .rule-grp .rg-nool svg { transition: none; } }
@media (max-width: 720px) {
    .rule-grp { gap: 10px; }
    .rule-grp .rg-abi { font-size: .8rem; }
    .rule-grp .rg-nool { padding: 4px 6px 4px 8px; }
}
.rrow { border-top: 1px solid var(--c-border); }
.rrow__head { display: flex; width: 100%; gap: var(--sp-3); align-items: stretch; padding: var(--sp-3) var(--sp-4); border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.rrow__head:hover { background: var(--c-bg); }
.rrow__head:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; }
.rrow.is-open .rrow__head { background: var(--c-primary-soft); box-shadow: inset 3px 0 0 var(--c-primary); }
.rrow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rrow__name { font-weight: 700; color: var(--c-text); }
.rrow__tag { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; font-size: .7rem; font-weight: 600; vertical-align: 2px; white-space: nowrap; }
.rrow__tag--dynamic { background: var(--c-primary-soft); color: var(--c-primary); }
.rrow__tag--fixed { background: var(--c-bg); color: var(--c-text-soft); border: 1px solid var(--c-border); }
.rrow--vaikne .rrow__name, .rrow--vaikne .rrow__meta, .rrow--vaikne .rrow__time, .rrow--vaikne .rrow__pct { color: var(--c-text-faint); }
.rule-grp-kinni > summary { list-style: none; cursor: pointer; user-select: none; }
.rule-grp-kinni > summary::-webkit-details-marker { display: none; }
.rule-grp-kinni > summary:hover { color: var(--c-text); }
.rule-grp-kinni > summary:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; }
.rrow__meta, .rrow__time { color: var(--c-text-soft); font-size: .84rem; }
.rrow__time { margin-top: var(--sp-2); font-variant-numeric: tabular-nums; }
.rrow__side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: var(--sp-2); flex: 0 0 auto; }
.rrow__pct { font-size: 1.3rem; font-weight: 700; color: var(--c-success); font-variant-numeric: tabular-nums; line-height: 1; }
.rrow__open { border-top: 1px solid var(--c-border); padding: var(--sp-4); }

.rule-pct { font-weight: 700; color: var(--c-success); font-variant-numeric: tabular-nums; }
.rule-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.rule-label { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-soft); font-weight: 600; margin-bottom: var(--sp-1); }
.rule-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px var(--sp-3); margin: 0; font-size: .88rem; }
.rule-dl dt { color: var(--c-text-soft); }
.rule-dl dd { margin: 0; font-weight: 500; }
.rule-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.rule-actions form { margin: 0; }
.occ { display: flex; align-items: center; gap: var(--sp-2); min-width: 150px; font-variant-numeric: tabular-nums; }
.occ__track { flex: 1; height: 8px; border-radius: 4px; background: #eef1f5; overflow: hidden; position: relative; }
.occ__fill { display: block; height: 100%; border-radius: 4px; background: var(--c-success); }
.occ__fill--low { background: #f79009; }
.occ__mark { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--c-text-faint); }
.occ__value { flex: 0 0 3.2rem; text-align: right; font-size: .84rem; font-weight: 600; }
.rule-form { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-4); align-items: start; }
.rule-step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-4) 0; border-top: 1px solid var(--c-border); }
.rule-step:first-child { border-top: 0; padding-top: 0; }
.rule-step__nr { width: 26px; height: 26px; border-radius: 50%; background: var(--c-primary); color: #fff; font-weight: 600; font-size: .8rem; display: grid; place-items: center; }
.rule-step h2 { font-size: 1.08rem; margin: 2px 0; }
/* Sildid tumedamad (makett 21.10); ainult välja enda silt, mitte valikute sildid. */
.rule-step .field > label { color: var(--c-text); font-size: .86rem; }
.rule-form input[type="checkbox"], .rule-form input[type="radio"] { accent-color: var(--c-primary); }
.rule-step .help-text { margin: 0 0 var(--sp-3); }
.rule-picks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rule-pick { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 14px; background: var(--c-primary-soft); color: var(--c-primary); font-size: .84rem; font-weight: 500; }
.rule-pick button { border: 0; background: transparent; color: inherit; cursor: pointer; width: auto; padding: 0 5px; font-size: 1rem; line-height: 1; border-radius: 10px; }
.rule-pick button:hover { background: rgba(30, 64, 175, .12); }
.rule-picks select { width: auto; max-width: 100%; border-style: dashed; color: var(--c-text-soft); }
/* Periood kuus (25.09): sama lüliti mis nädalapäeval, aga tekstiga. */
.disc-day--lai { width: auto; padding: 0 var(--sp-3); font-weight: 500; }
/* Rakendumise valik (25.09): kaks valikut kaardina koos kirjeldusega. */
/* Neli rakendumist (21.10) kahes veerus: kolm ühes reas jättis neljanda üksi. */
.rule-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-1); }
@media (max-width: 640px) {
    .rule-choice { grid-template-columns: 1fr; }
    .rule-choice label { gap: .6rem; padding: var(--sp-3); }
}
/* Kaart (kasutaja makett 21.10): raadionupp, ikoon ruudus, pealkiri ja kirjeldus. */
.rule-choice label {
    display: grid; grid-template-columns: auto 40px minmax(0, 1fr); gap: .75rem; align-items: start;
    padding: var(--sp-3) var(--sp-4); border: 1px solid var(--c-border-strong); border-radius: var(--radius);
    background: var(--c-surface); cursor: pointer; transition: border-color .15s, background-color .15s;
}
.rule-choice label:hover { border-color: var(--c-primary); }
.rule-choice label.is-on { border-color: var(--c-primary); box-shadow: 0 0 0 1px var(--c-primary); background: var(--c-primary-soft); }
.rule-choice input[type="radio"] { width: 18px; height: 18px; margin: 3px 0 0; }
/* Hiireklõpsuga valitud kaardil fookusraami pole (kaart ise näitab valikut), klaviatuuriga on. */
.rule-choice input[type="radio"]:focus:not(:focus-visible) { box-shadow: none; outline: none; }
.rule-choice label:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.rule-choice__ikoon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--c-bg); color: var(--c-text-soft); }
.rule-choice label.is-on .rule-choice__ikoon { background: var(--c-surface); color: var(--c-primary); }
.rule-choice__ikoon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rule-choice b { display: block; margin-top: 1px; font-size: .95rem; }
.rule-choice__kirjeldus { display: block; margin-top: 4px; font-size: .85rem; line-height: 1.5; color: var(--c-text-soft); font-weight: 400; }
/* Infokast ja julgustuse märge rakendumise all (makett 21.10). */
.rule-alert { margin: var(--sp-3) 0; color: var(--c-text-soft); font-size: .86rem; }
.rule-alert strong { color: var(--c-text); }
.rule-alert svg { width: 20px; height: 20px; margin-top: 0; }
.alert--info { background: var(--c-primary-soft); border-color: #d5e0fb; }
.alert--info svg { color: var(--c-primary); }
/* Pakkumise ja julgustuse tulemuse tabel: jaotuse pealkirjarida (23.10). */
/* th padding on !important (tabelite põhistiil), seega ka siin. */
tr.tulemus-ryhm > th { padding-top: var(--sp-3) !important; color: var(--c-text-soft); white-space: normal; }
tbody tr.tulemus-ryhm:first-child > th { padding-top: var(--sp-2) !important; }
@media (max-width: 768px) {
    table.m-cards > tbody > tr.tulemus-ryhm { display: block; padding: var(--sp-3) 0 0; border-bottom: 0; }
    table.m-cards > tbody > tr.tulemus-ryhm > th { display: block; padding: 0 !important; }
}
/* Pakkumisel joon seadete ja sammude vahel. */
.rule-eraldaja { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-border); }
.rule-radio { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }
.rule-radio label { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
/* Pakkumisreegli kliendirühmad (20.10): üks valik reas, selgitus samas reas.
   Kitsal ekraanil murdub tekst linnukese kõrvale, linnuke jääb esimese rea kõrgusele. */
.rule-radio--veerg { flex-direction: column; gap: var(--sp-1); }
.rule-radio--veerg label { align-items: flex-start; }
.rule-radio--veerg input { margin-top: 3px; }
.rule-radio--veerg .muted { font-weight: 400; }
.rule-note { margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); background: var(--c-bg); font-size: .84rem; color: var(--c-text-soft); }
.rule-preview { position: sticky; top: var(--sp-4); }
.rule-preview__loc + .rule-preview__loc { margin-top: var(--sp-3); }
.rule-preview__msg { font-size: .8rem; color: var(--c-text-soft); margin-top: 2px; }
.rule-price { margin-top: var(--sp-3); padding: var(--sp-3); border-radius: var(--radius-sm); background: var(--c-success-soft); border: 1px solid var(--c-success-border); color: var(--c-success); font-size: .86rem; }
.rule-price b { font-size: 1.25rem; }
.rule-price s { color: var(--c-text-soft); }
.rule-log { list-style: none; margin: 0; padding: 0; }
.rule-log li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-2) 0; border-top: 1px solid var(--c-border); font-size: .88rem; }
.rule-log li:first-child { border-top: 0; }
.rule-log time { color: var(--c-text-soft); font-variant-numeric: tabular-nums; font-size: .82rem; }
.rule-log .kes { color: var(--c-text-soft); }
.rule-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--sp-2); }
.rule-time-cell { border: 1.5px solid var(--c-success-border); background: var(--c-success-soft); border-radius: var(--radius-sm); padding: 8px 6px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.rule-time-cell small { display: block; font-weight: 500; font-size: .74rem; color: var(--c-success); }
.rule-time-cell--busy { border-color: var(--c-border); background: var(--c-surface); color: var(--c-text-faint); }
.rule-time-cell--busy small { color: var(--c-text-faint); }
.rule-time-cell--plain { border-color: var(--c-border); background: var(--c-surface); }
.rule-time-cell--plain small { color: var(--c-text-soft); }
@media (max-width: 900px) {
    .rule-cols, .rule-form { grid-template-columns: 1fr; }
    .rule-preview { position: static; }
}
/* Reegli vorm: eelvaate kõrval jääb vorm alla 1100 px liiga kitsaks (teenuse silt ja
   kellavahemik ei mahtunud), siis eelvaade vormi alla. */
@media (max-width: 1100px) {
    .rule-form { grid-template-columns: minmax(0, 1fr); }
    .rule-preview { position: static; }
}
/* Reegli vormi veerud ei tohi paisuda pikima teenusenime järgi (audit 25.09: "+ Teenused"
   valik ulatus kaardist välja, 390 px juures keris leht külgsuunas). 1fr = minmax(auto, 1fr),
   seega miinimum oli selecti sisu laius; minmax(0, 1fr) laseb selectil kahaneda. */
.rule-form .form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) {
    .rule-form .form-grid-2 { grid-template-columns: minmax(0, 1fr); }
}
/* Soodusega päevad (soodustus päeva kaupa, 23.09). */
.day-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.day-chip { font-size: .74rem; padding: 1px 7px; border-radius: 10px; background: var(--c-success-soft); color: var(--c-success); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.day-chip--warn { background: var(--c-warning-soft); color: var(--c-warning); }
/* Reegli detail rea all (kliendi makett 23.09). */
.rdet__top { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.rdet__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-border); }
.rdet__facts small { display: block; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-soft); font-weight: 600; margin-bottom: 4px; }
.rdet__facts b { font-size: .92rem; }
.rdet__pct { font-size: 1.1rem; }
.rdet__banner { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); background: var(--c-warning-soft); border: 1px solid var(--c-warning-border); }
.rdet__banner strong { display: block; }
.rdet__banner small { color: var(--c-text-soft); }
.rdet h3 { font-size: .95rem; margin: var(--sp-5) 0 var(--sp-2); }
.rdet__table td { vertical-align: middle; }
.rdet__cell-act { text-align: right; white-space: nowrap; }
.rdet__cond { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-5); margin: 0; }
.rdet__cond > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-border); font-size: .88rem; }
.rdet__cond dt { color: var(--c-text-soft); }
.rdet__cond dd { margin: 0; font-weight: 600; }
.rdet__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--c-border); }
.rdet__log { font-size: .88rem; font-weight: 600; }
@media (max-width: 700px) {
    .rdet__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rdet__cond { grid-template-columns: 1fr; }
    .rdet__cond > div { grid-template-columns: 8rem minmax(0, 1fr); }
    .rule-sum span { padding: 0 var(--sp-3); }
}
@media (max-width: 600px) {
    .rule-sum { flex-direction: column; align-items: flex-start; }
    .rule-sum span, .rule-sum span:first-child { padding: 0; }
    .rule-sum span + span { border-left: 0; }
}

/* Täituvuse reegel punkti vahelehel (kliendi makett 23.09). */
/* Kaardi täidis muutub kitsal ekraanil (--card-pad), kaart ulatub selle võrra servani. */
.prule { border-top: 1px solid var(--c-border); margin: 0 calc(-1 * var(--card-pad, var(--sp-5))); }
.prule:last-child { margin-bottom: calc(-1 * var(--card-pad, var(--sp-5))); }
.prule__head { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) var(--card-pad, var(--sp-5)); border-bottom: 1px solid var(--c-border); }
.prule__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.prule__name { font-weight: 700; font-size: 1.02rem; }
.prule__tag { font-size: .74rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--c-border-strong); color: var(--c-text-soft); }
.prule__facts { display: flex; flex-wrap: wrap; gap: 4px var(--sp-4); margin-top: var(--sp-2); font-size: .86rem; }
.prule__side { display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; }
.prule__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* "Alati" reegli kaart (kasutaja 25.09): selgitus kaardi sees faktide all, ikoon näitab olekut. */
.prule__desc { display: flex; align-items: flex-start; gap: 6px; margin: var(--sp-2) 0 0; font-size: .86rem; color: var(--c-text-soft); }
.prule__desc svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; }
.prule__desc--ok svg { color: var(--c-success); }
.prule__desc--info svg { color: var(--c-primary); }
.prule__why, .prule__days { padding: var(--sp-4) var(--card-pad, var(--sp-5)) var(--sp-5); }
.prule__avg { font-size: .8rem; margin-top: calc(-1 * var(--sp-2)); }
.prule__days { border-left: 1px solid var(--c-border); }
.prule__big { display: flex; align-items: baseline; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-3); }
.prule__big b { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.prule__count { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-2) 0 var(--sp-3); }
.prule__count b { font-size: 1.05rem; }
.prule__count .muted { font-size: .84rem; }
.prule__chips .day-chip { font-size: .8rem; padding: 3px 9px; border-radius: var(--radius-sm); }
.prule__more { width: auto; margin-top: var(--sp-3); border: 0; background: none; padding: 0; font: inherit; font-size: .86rem; font-weight: 600; color: var(--c-primary); cursor: pointer; }
.prule__more:hover { text-decoration: underline; }
.prule__note { margin: var(--sp-3) 0 0; padding: var(--sp-3); border-radius: var(--radius-sm); background: var(--c-bg); color: var(--c-text-soft); font-size: .86rem; }
.prule__note--ok { background: var(--c-success-soft); border: 1px solid var(--c-success-border); color: var(--c-success); }
.prule__note--warn { background: var(--c-warning-soft); border: 1px solid var(--c-warning-border); color: var(--c-warning); }
.lavi__track { position: relative; height: 8px; border-radius: 4px; background: #eef1f5; margin: var(--sp-3) 0 0; }
.lavi__low { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px 0 0 4px; background: var(--c-success-soft); box-shadow: inset 0 0 0 1px var(--c-success-border); }
.lavi__mid { position: absolute; top: 0; bottom: 0; background: var(--c-warning-soft); box-shadow: inset 0 0 0 1px var(--c-warning-border); }
.lavi__dot { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--c-success); border: 2px solid var(--c-surface); box-shadow: 0 0 0 1px var(--c-success); }
.lavi__tick { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; }
.lavi__tick--in { background: var(--c-success); }
.lavi__tick--out { background: var(--c-warning); }
.lavi__legend { display: flex; flex-wrap: wrap; gap: 4px var(--sp-4); margin-top: var(--sp-2); font-size: .78rem; font-weight: 600; }
.lavi__legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lavi__legend span::before { content: ""; width: 2px; height: 12px; border-radius: 1px; background: currentColor; }
.lavi__in { color: var(--c-success); }
.lavi__out { color: var(--c-warning); }
@media (max-width: 700px) {
    .prule__head { flex-direction: column; }
    .prule__cols { grid-template-columns: 1fr; }
    .prule__days { border-left: 0; border-top: 1px solid var(--c-border); }
}

/* Sooduskoodid (kliendi makett 23.09): tabel ja uue koodi aken. */
.code-table__act { width: 1%; text-align: right; }
.dlg { border: 0; border-radius: var(--radius); padding: 0; margin: auto; max-height: calc(100vh - 2rem); overflow: auto; width: min(640px, calc(100vw - 2rem)); box-shadow: 0 20px 50px rgba(15, 23, 42, .25); color: var(--c-text); }
.dlg::backdrop { background: rgba(15, 23, 42, .45); }
.dlg form { padding: var(--sp-5); }
.dlg__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-4); }
.dlg__head h2 { margin: 0; font-size: 1.1rem; }
.dlg__close { width: auto; border: 0; background: transparent; color: var(--c-text-soft); cursor: pointer; padding: 4px; border-radius: var(--radius-sm); }
.dlg__close:hover { background: var(--c-bg); color: var(--c-text); }
.dlg__foot { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-2); }
@media (max-width: 560px) { .dlg .form-grid-2 { grid-template-columns: 1fr; } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Vahelehe pealkiri lehe sees (soodustused, kliendi makett 23.09): ülariba näitab jaotise nime. */
.page-title__h { margin: 0; font-size: 1.35rem; font-weight: 700; }
/* Hinna liik (kasutaja 23.09): makse lahter töölaual ja nimekirjas, märk kalendris. */
.makse-hind { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.makse-hind__rida { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* Hind makse oleku teksti joonele (kasutaja 23.09): taane = olekupunkt + vahe (.status-dot). */
.status-dot + .makse-hind__rida { padding-left: calc(8px + .45rem); }
.makse-hind__summa { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hinnamark { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ev-mark { display: inline-block; padding: 0 5px; border-radius: 8px; font-size: .72rem; font-weight: 700; line-height: 1.35; white-space: nowrap; background: var(--c-warning-soft); color: var(--c-warning); vertical-align: 1px; }
.ev-hind--tasuta .ev-mark { background: var(--c-success-soft); color: var(--c-success); }
/* Triip sündmuse vasakus servas: liik on näha ka siis, kui kõrvuti lahter lõikab teksti. */
#calendar .ev-hind--soodus:not(.fc-list-event) { box-shadow: inset 4px 0 0 #f79009; }
#calendar .ev-hind--tasuta:not(.fc-list-event) { box-shadow: inset 4px 0 0 #12b76a; }

/* Märkimata broneeringu registri märge sõiduki all (kasutaja 06.11): kas auto käis
   pärast broneerimist ülevaatusel. Lahter on nowrap, märge murdub oma real;
   mitmerealine märge väiksema raadiusega, ümar pill läheks kohmakaks. */
.jargne-marge { margin-top: .25rem; white-space: normal; }
.jargne-marge .badge { white-space: normal; border-radius: 6px; line-height: 1.35; padding: .15rem .5rem; }
.jargne-marge .muted { font-size: .8rem; }