/*
 * Pere Eelarve – Tableri täiendused.
 * Põhivärv tuleb Tableri teemast: <html data-bs-theme-primary="green">.
 * Hoia värvid CSS-muutujatena, et hilisem teema saaks muuta ainult muutujaid.
 */

/* ---------- Roheline tekst (otsus 2026-11-05) ----------
   Põhiroheline #2fb344 annab valgel ainult 2,74:1. Heledas režiimis on roheline TEKST 25 % tumedam
   (5,5:1 valgel, ~4,8:1 heledal rohelisel märgisel bg-green-lt, WCAG AA; 20 % jäi märgisel 4,2:1 peale): summad, muutused, rohelised märgised, lingid ja kummitusnupud.
   Nupud, ribad, ikoonitaustad ja graafikud jäävad põhivärviks; tumedas režiimis tekst ei muutu. */
:root {
    --pe-green-text: light-dark(color-mix(in oklab, var(--tblr-green) 75%, var(--tblr-black)), var(--tblr-green));
    --tblr-link-color: light-dark(color-mix(in oklab, var(--tblr-primary) 75%, var(--tblr-black)), color-mix(in oklab, var(--tblr-white) 40%, var(--tblr-primary)));
}
.text-success,
.text-green,
.bg-green-lt,
.bg-success-lt {
    color: var(--pe-green-text) !important;
}
.btn-ghost-primary {
    --tblr-btn-color: light-dark(color-mix(in oklab, var(--tblr-primary) 75%, var(--tblr-black)), var(--tblr-primary));
}

/* ---------- Logo ---------- */
.pe-brand {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    font-size: 1.125rem;
    font-weight: var(--tblr-font-weight-bold);
    color: var(--tblr-body-color);
    text-decoration: none;
}
/* Rõhtne logo (web/img/logo.svg, kahel real, 247.62 x 64.36): kõrgus määrab suuruse */
.pe-brand-logo {
    display: block;
    height: 2.5rem;
    width: auto;
    max-width: 100%;
}
.pe-brand-logo-lg {
    height: 3rem;
}
/* Tumedas režiimis negatiivlogo (web/img/logo-dark.svg = docs/brand/logo/svg/pe-logo-rohtne-negatiiv-tumedal.svg):
   vahetus Tableri klassidega hide-theme-dark (hele logo) ja hide-theme-light (tume logo) märgistuses */

/* ---------- Külgmenüü (kujundus E) ---------- */
/* Laius on Tableri --tblr-sidebar-width (16rem), kokkuvolditult --tblr-sidebar-folded-width (4rem). */
.pe-sidebar .navbar-brand {
    padding-left: .5rem;
}
.pe-sidebar .navbar-nav {
    gap: 2px;
}
/* Menüü reeglid on #sidebar-menu all, sest Tableri navbar-vertical reeglid on väga spetsiifilised.
   Rühma pealkiri on Tableri .nav-section-title (widgets/Menu.php). */
#sidebar-menu .nav-link {
    min-height: 2.5rem;
    padding: 0 .75rem;
    border-radius: var(--tblr-border-radius);
    color: var(--tblr-body-color);
    background: transparent;
}
#sidebar-menu .nav-link-icon {
    color: var(--tblr-secondary);
    font-size: 1.125rem;
}
#sidebar-menu .nav-link:hover,
#sidebar-menu .nav-link.active {
    background: var(--tblr-bg-surface-secondary);
}
#sidebar-menu .nav-link.active {
    font-weight: var(--tblr-font-weight-bold);
    color: var(--tblr-emphasis-color, var(--tblr-body-color));
}
#sidebar-menu .nav-link.active .nav-link-icon {
    color: var(--tblr-primary);
}
/* Avatud alammenüü ülemine punkt: paks kiri ja roheline ikoon, aga ilma taustata (kujundus E) */
#sidebar-menu .nav-link.active:has(+ .pe-nav-sub) {
    background: transparent;
}
#sidebar-menu .pe-nav-sub {
    display: none;
}
#sidebar-menu .pe-nav-sub.show {
    display: block;
}
#sidebar-menu .nav-link.pe-nav-sublink {
    min-height: 2.25rem;
    padding-left: 2.75rem;
}
/* Logo real lõpus kiirlisamise "+" (Tableri .navbar-brand on space-between) */
.pe-sidebar .navbar-brand {
    gap: .25rem;
}
.pe-sidebar .navbar-brand .pe-brand {
    min-width: 0;
    gap: .5rem;
    font-size: 1rem;
    white-space: nowrap;
}
/* Telefonis on logo rida tihe: "+" ja kasutaja avatar navbari ülemises reas */
@media (max-width: 991.98px) {
    .pe-sidebar .navbar-brand {
        flex: 1 1 auto;
        min-width: 0;
    }
}
.pe-google-play {
    max-width: 9rem;
}

/* ---------- Kokkuvolditud külgmenüü ---------- */
/* Tableri oma: <html data-bs-sidebar="folded-hover">, nupp [data-bs-toggle="sidebar-folded"] päiseribas
   (views/layouts/_header.php, tabler.min.js, localStorage "tabler-sidebar"; taastamine _themeHead.php).
   Tabler peidab nimed, teeb rühma pealkirjast joone ja laiendab menüü hiirega. Siin ainult logo asemel
   märk, kuni menüü on kitsas, ja nupu ikoon vastavalt olekule. */
.pe-brand-mark,
.pe-when-folded,
html[data-bs-sidebar^=folded] .pe-when-expanded {
    display: none;
}
html[data-bs-sidebar^=folded] .pe-when-folded {
    display: inline-block;
}
@media (min-width: 992px) {
    :is(html[data-bs-sidebar=folded] .pe-sidebar, html[data-bs-sidebar=folded-hover] .pe-sidebar:not(:hover):not(:has(:focus-visible))) .navbar-brand {
        justify-content: center;
        padding-inline: 0;
    }
    :is(html[data-bs-sidebar=folded] .pe-sidebar, html[data-bs-sidebar=folded-hover] .pe-sidebar:not(:hover):not(:has(:focus-visible))) .pe-brand .pe-brand-logo {
        display: none;
    }
    :is(html[data-bs-sidebar=folded] .pe-sidebar, html[data-bs-sidebar=folded-hover] .pe-sidebar:not(:hover):not(:has(:focus-visible))) .pe-brand .pe-brand-mark {
        display: block;
    }
}

/* ---------- Kalkulaatori nupp sisendgrupis ---------- */
.calc-group .calc-trigger {
    cursor: pointer;
}

/* ---------- Kuu vahetaja lehe pealkirjas (widgets/MonthSwitcher) ----------
   Üks raamiga nupugrupp [‹] [Oktoober 2026 ▾] [›]: valge taust, Tableri ääris ja vari nagu .btn,
   kõrgus 40 px (telefonis 44 px). Silt on poolpaksus kirjas peaaegu lehe pealkirja suuruses. */
/* Lehe päise veerg: kui vahetaja ja nupud ühele reale ei mahu, lähevad nupud järgmisele reale */
.page-header .page-title-col {
    flex: 1 0 auto;
    width: auto;
    max-width: 100%;
}
.month-switcher {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: .75rem;
    row-gap: .375rem;
    margin-top: .25rem;
}
/* Kujundus TL1: kaks eraldi raamiga noolenuppu, nende vahel kuu nimi ilma raamita */
.month-switcher-group {
    --pe-ms-height: 2.5rem;
    display: flex;
    align-items: center;
    gap: .375rem;
    max-width: 100%;
}
.month-switcher-group .btn {
    --tblr-btn-hover-bg: var(--tblr-bg-surface-secondary);
    --tblr-btn-hover-color: var(--tblr-body-color);
    --tblr-btn-active-bg: var(--tblr-bg-surface-tertiary);
    --tblr-btn-active-color: var(--tblr-body-color);
    min-height: var(--pe-ms-height);
}
.month-switcher-arrow {
    flex: 0 0 var(--pe-ms-height);
    width: var(--pe-ms-height);
    color: var(--tblr-secondary);
}
.month-switcher-label {
    --tblr-btn-bg: transparent;
    --tblr-btn-border-color: transparent;
    --tblr-btn-box-shadow: none;
    --tblr-btn-hover-border-color: transparent;
    --tblr-btn-hover-bg: var(--tblr-bg-surface-secondary);
    --tblr-btn-active-bg: var(--tblr-bg-surface-secondary);
    --tblr-btn-active-border-color: transparent;
    --tblr-btn-active-color: var(--tblr-body-color);
    gap: .25rem;
    padding-inline: .5rem;
    font-size: 1.25rem;
    font-weight: var(--tblr-font-weight-bold);
    color: var(--tblr-body-color);
    white-space: nowrap;
}
/* Perioodi nimi (ilma kuu valikuta) võib kitsal ekraanil minna kahele reale */
.month-switcher-static {
    min-width: 0;
    white-space: normal;
    text-wrap: balance;
    cursor: default;
    pointer-events: none;
}
/* Pikk periood ("November 2025 – oktoober 2026") võib kitsal ekraanil minna kahele reale, nooled jäävad nähtavale */
.month-switcher-dropdown {
    min-width: 0;
}
.month-switcher-dropdown .month-switcher-label {
    min-width: 0;
    white-space: normal;
    text-wrap: balance;
    text-align: start;
}
.month-switcher-caret {
    color: var(--tblr-secondary);
}
.month-switcher-label[aria-expanded="true"] {
    background: var(--tblr-bg-surface-secondary);
}
/* Tagasi jooksvasse kuusse: heleroheline nupp (TL1) */
.month-switcher-today {
    --tblr-btn-bg: var(--tblr-green-lt);
    --tblr-btn-color: var(--tblr-green-darken, oklch(45% 0.14 145.43deg));
    --tblr-btn-border-color: transparent;
    --tblr-btn-box-shadow: none;
    --tblr-btn-hover-bg: color-mix(in srgb, var(--tblr-green) 20%, var(--tblr-bg-surface));
    --tblr-btn-hover-color: var(--tblr-green-darken, oklch(45% 0.14 145.43deg));
    --tblr-btn-hover-border-color: transparent;
    font-weight: var(--tblr-font-weight-medium);
}
.month-switcher-group .btn:focus-visible {
    z-index: 2;
}
.month-picker {
    width: 17rem;
    padding: .5rem;
}
.month-picker-year {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem;
}
.month-picker-year .btn {
    width: 2.5rem;
    height: 2.5rem;
}
.month-picker-year-label {
    font-weight: var(--tblr-font-weight-bold);
}
.month-picker-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .25rem;
}
.month-picker-month {
    min-height: 2.5rem;
}
.month-picker-month:not(.btn-primary) {
    --tblr-btn-bg: transparent;
    --tblr-btn-border-color: transparent;
    --tblr-btn-box-shadow: none;
    --tblr-btn-hover-bg: var(--tblr-bg-surface-secondary);
    --tblr-btn-hover-border-color: transparent;
}
/* Kiirvalikud ja vaba vahemik (Tehingud): kuu valiku kohal ja all */
.month-picker-presets {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .25rem;
    padding-bottom: .5rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid var(--tblr-border-color);
}
.month-picker-preset {
    --tblr-btn-bg: var(--tblr-bg-surface-secondary);
    --tblr-btn-border-color: transparent;
    --tblr-btn-box-shadow: none;
    --tblr-btn-hover-bg: var(--tblr-bg-surface-tertiary, var(--tblr-border-color-light));
    --tblr-btn-hover-border-color: transparent;
}
.month-picker-preset.active {
    background: var(--tblr-primary);
    color: var(--tblr-primary-fg, #fff);
}
.month-picker-range {
    padding-top: .5rem;
    margin-top: .5rem;
    border-top: 1px solid var(--tblr-border-color);
}
.month-picker-range-title {
    margin-bottom: .25rem;
    font-weight: var(--tblr-font-weight-medium);
}
/* Jooksev kuu: roheline raam (valitud kuu on täidetud roheline) */
.month-picker-month.month-picker-current:not(.btn-primary) {
    --tblr-btn-border-color: var(--tblr-primary);
    --tblr-btn-hover-border-color: var(--tblr-primary);
    color: var(--tblr-primary);
    font-weight: var(--tblr-font-weight-bold);
}
@media (max-width: 575.98px) {
    .month-switcher-group {
        --pe-ms-height: 2.75rem;
    }
    .month-switcher-label {
        padding-inline: .625rem;
    }
    .month-picker-year .btn {
        width: 2.75rem;
        height: 2.75rem;
    }
    .month-picker-month {
        min-height: 2.75rem;
    }
}

/* ---------- Töölaud (views/dashboard/index.php, TL15 arvutis / TL16 telefonis) ---------- */
/* Klikitav summa: punktiirjoon all, viib Tehingutesse */
.db-link {
    text-decoration: underline dotted;
    text-decoration-color: var(--tblr-border-active-color);
    text-underline-offset: .25em;
}
.db-link:hover {
    text-decoration-style: solid;
}
/* Segmentnupuga päis sama kõrge kui kõrvalkaardi pealkirjaga päis (65 px) */
.db-tabs-header {
    --tblr-card-cap-padding-y: .75rem;
}
.db-ring-col,
.db-budget-col,
.db-attention-col {
    padding: 1.25rem;
}
/* Eelarve ja "Vajab tähelepanu" samas paremas veerus üksteise all (.db-side-col); eelarveta pere grupid col-md-8 */
.db-side-col > .db-attention-col {
    border-top: 1px solid var(--tblr-border-color);
}
@media (min-width: 768px) {
    .db-side-col,
    .row > .db-budget-col {
        border-left: 1px solid var(--tblr-border-color);
    }
}
@media (max-width: 767.98px) {
    .db-side-col,
    .row > .db-budget-col {
        border-top: 1px solid var(--tblr-border-color);
    }
}
/* Rõngas: conic-gradient grupi värvidest, keskel kulud kokku */
.db-ring {
    position: relative;
    display: block;
    width: 11rem;
    height: 11rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    color: inherit;
}
/* Legend rõnga kõrval ja rõngas väiksem: arvutis on vasak veerg sama madal kui eelarve + tähelepanu veerg,
   telefonis jääb eelarve osa esimesele ekraanile lähemale */
.db-ring-col:has(.db-legend) {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.db-ring-col:has(.db-legend) .db-ring {
    flex: 0 0 8.5rem;
    width: 8.5rem;
    height: 8.5rem;
    margin: 0;
}
.db-ring-col:has(.db-legend) .db-ring-hole {
    inset: 1.125rem;
}
.db-ring-col .db-legend {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0 !important;
}
/* Pikk grupinimi lõigatakse, protsent jääb samale reale */
.db-ring-col .db-legend li > a {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.db-ring-col .db-legend li > :last-child {
    white-space: nowrap;
}
.db-ring-hole {
    position: absolute;
    /* Rõngas: 176 px, paksus 24 px */
    inset: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--tblr-bg-surface);
    line-height: 1.3;
}
.db-legend li {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .125rem 0;
}
.db-dot {
    display: inline-block;
    flex-shrink: 0;
    width: .625rem;
    height: .625rem;
    margin-right: .25rem;
    border-radius: 2px;
}
.db-attention-row,
.db-group-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--tblr-border-color-translucent, var(--tblr-border-color));
}
.db-group-row {
    border-bottom: 0;
}
.db-attention-row:hover .fw-medium,
.db-group-row:hover .fw-medium {
    text-decoration: underline;
}
/* Eelarveta: väike viide eelarve koostamisele */
.db-no-budget {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border: 1px dashed var(--tblr-border-active-color);
    border-radius: var(--tblr-border-radius);
    color: var(--tblr-secondary);
}
/* 12 kuu rahavoog: tulbad CSS-iga, kuu all vahe ja säästumäär numbrina */
.db-flow {
    display: flex;
    gap: .25rem;
}
.db-flow-month {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: .25rem .125rem;
    border: 1px solid transparent;
    border-radius: var(--tblr-border-radius);
    color: inherit;
    font-size: .75rem;
    line-height: 1.3;
    text-align: center;
}
.db-flow-month:hover {
    background: var(--tblr-bg-surface-secondary);
}
.db-flow-month.active {
    border-color: var(--tblr-primary);
    background: var(--tblr-green-lt);
}
.db-flow-bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    width: 100%;
    height: 11rem;
    margin-bottom: .25rem;
}
.db-flow-bar {
    width: 40%;
    max-width: .875rem;
    min-height: 1px;
    border-radius: 2px 2px 0 0;
}
/* Pooleli kuu: viirutatud tulbad */
.db-flow-month.running .db-flow-bar {
    background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .55) 0 3px, transparent 3px 6px);
}
.db-flow-name {
    font-weight: var(--tblr-font-weight-medium);
}
.db-flow-diff {
    font-weight: var(--tblr-font-weight-medium);
    white-space: nowrap;
}
.db-flow-note {
    color: var(--tblr-secondary);
    white-space: nowrap;
}

/* ---------- Telefonis tabelid kaartidena (GridView: tableOptions class "eelarve-responsive",
   iga lahter data-label atribuudiga) ---------- */
@media (max-width: 600px) {
    .card-table-responsive {
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    .card-table-responsive .resp-pagination {
        display: flex;
        justify-content: center;
        margin-left: 0;
    }
    table.eelarve-responsive,
    .eelarve-responsive tbody,
    .eelarve-responsive tfoot {
        display: block;
        width: 100%;
    }
    .eelarve-responsive thead tr:first-of-type {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        border: 0;
    }
    .eelarve-responsive thead,
    .eelarve-responsive .filters {
        display: block;
        background: var(--tblr-bg-surface);
    }
    .eelarve-responsive .filters td {
        display: block;
        text-align: left;
    }
    .eelarve-responsive .filters td .select2-container,
    .eelarve-responsive .filters td .form-select,
    .eelarve-responsive .filters td .form-control {
        width: 100% !important;
    }
    /* Kaardis on kõigil lahtritel sama vahe (Tableri card-table annab esimesele lahtrile suurema) */
    .eelarve-responsive td,
    .eelarve-responsive td:first-child,
    .eelarve-responsive td:last-child {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .eelarve-responsive tr {
        display: block;
        margin-bottom: .625rem;
        border: var(--tblr-border-width) solid var(--tblr-border-color);
        border-radius: var(--tblr-border-radius);
        background: var(--tblr-bg-surface);
        box-shadow: var(--tblr-shadow-card, none);
    }
    .eelarve-responsive td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        width: 100% !important;
        min-height: 2.75rem;
        text-align: right;
    }
    .eelarve-responsive td::before {
        content: attr(data-label);
        font-weight: var(--tblr-font-weight-bold);
        text-align: left;
    }
    .eelarve-responsive td:last-child {
        border-bottom: 0;
    }
    .eelarve-responsive tbody > tr > td:last-of-type::before {
        content: none;
    }
    .eelarve-responsive.table-batch td {
        display: block;
        text-align: left;
    }
    .eelarve-responsive.table-batch td:last-of-type {
        display: flex;
        justify-content: flex-end;
    }
}

/* Summad tabelites ühelaiuste numbritega, et komakohad jääksid veergu üksteise alla */
/* ---------- Abiklassid (Bootstrapis ja Tableris vastet pole) ---------- */
/* Ühelaiused numbrid (summad, kalkulaator, graafiku telg). Omadus pärandub, kuid nupud ja sisendid
   lähtestavad selle: neile klass otse. Tabelite paremjoondatud lahtrid saavad selle automaatselt. */
.pe-tabular-nums,
.table td.text-end,
.table th.text-end {
    font-variant-numeric: tabular-nums;
}
/* Avatava rea või ploki noolikoon (ti-chevron-right): avatuna pööratud alla. Nupp või link
   aria-expanded="true" (Bootstrapi collapse või oma JS) või avatud <details>. */
.pe-chevron {
    flex: none;
    transition: transform .15s ease;
}
[aria-expanded="true"] .pe-chevron,
details[open] > summary .pe-chevron {
    transform: rotate(90deg);
}
@media (prefers-reduced-motion: reduce) {
    .pe-chevron {
        transition: none;
    }
}

/* Telefonis puuteala vähemalt ~44 px (Apple HIG / Material). Väikesed kummitusnupud (rea ⋮ menüü,
   kaardi päise "Kõik ›") ja üksik ikoonlink (.pe-hit) näevad välja samad, puuteala laiendab nähtamatu
   ::before (::after on dropdown-toggle noole jaoks). Menüünupp ja segmentnupud on lihtsalt suuremad. */
@media (max-width: 767.98px) {
    .btn-sm[class*="btn-ghost"],
    .pe-hit {
        position: relative;
    }
    .btn-sm[class*="btn-ghost"]::before,
    .pe-hit::before {
        position: absolute;
        inset: -.5rem;
        content: "";
    }
    .pe-hit::before {
        inset: -.75rem;
    }
    .navbar-toggler {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }
    .nav-segmented {
        --tblr-nav-height: 2.75rem;
    }
}

/* Tableri .empty-icon suurendab ainult SVG ikoone; sama suurus ka Tabler Icons fondile */
.empty-icon .ti {
    font-size: var(--tblr-empty-icon-size, 3rem);
    line-height: 1;
}

/* ---------- Kalkulaator (web/js/calculator.js) ---------- */
.pe-calc {
    position: absolute;
    /* küpsiste teavituse (9999) kohal, et telefonis alt avanev paneel jääks nähtavale */
    z-index: 10000;
    display: none;
    width: 16rem;
    box-shadow: var(--tblr-box-shadow-dropdown, 0 .5rem 1rem rgba(0, 0, 0, .15));
}
.pe-calc.show {
    display: block;
}
.pe-calc-display {
    padding: .375rem .5rem .5rem;
    margin-bottom: .5rem;
    border-radius: var(--tblr-border-radius);
    background: var(--tblr-bg-surface-secondary);
    text-align: right;
}
.pe-calc-expr {
    min-height: 1.25rem;
    font-size: .8125rem;
}
.pe-calc-result {
    font-size: 1.5rem;
    font-weight: var(--tblr-font-weight-bold);
    line-height: 1.3;
}
.pe-calc-keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .375rem;
}
.pe-calc-keys .btn {
    height: 2.5rem;
    padding: 0;
    font-size: 1rem;
}
.pe-calc-keys .pe-calc-op {
    color: var(--tblr-primary);
    font-weight: var(--tblr-font-weight-bold);
}
.pe-calc-hint {
    margin-top: .25rem;
    font-size: .75rem;
    color: var(--tblr-secondary);
}
/* Telefonis alt üles tõusev paneel suurte nuppudega */
@media (max-width: 575.98px) {
    .pe-calc {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        border-radius: var(--tblr-border-radius-lg, .5rem) var(--tblr-border-radius-lg, .5rem) 0 0;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .pe-calc-keys .btn {
        height: 3.25rem;
        font-size: 1.25rem;
    }
    .pe-calc-result {
        font-size: 2rem;
    }
}

/* ---------- Select2 (kartik, teema krajee-bs5) Tableri värvides ----------
   Kartiku teemas on Bootstrapi vaikesinine (#0d6efd) kõvasti sees; siin samad kohad Tableri
   muutujatega. "html" eesliide teeb reeglid teema omadest tugevamaks. */
html .select2-container--krajee-bs5 .select2-selection {
    border-color: var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    background-color: var(--tblr-bg-forms);
    box-shadow: var(--tblr-shadow-input);
    color: var(--tblr-body-color);
    font-size: .875rem;
}
html .select2-container--krajee-bs5 .select2-selection--multiple {
    /* sama kõrgus nagu üherealisel valikul ja tavalisel väljal (40 px) */
    min-height: calc(1.25rem + 1.125rem + calc(var(--tblr-border-width) * 2));
}
html .select2-container--krajee-bs5 .select2-selection--single {
    min-height: calc(1.25rem + 1.125rem + calc(var(--tblr-border-width) * 2));
    /* sama sisemine vahe nagu Tableri form-select'il, et tekst oleks teiste väljadega joonel */
    padding: .5625rem 3.5rem .5625rem 1rem;
    line-height: 1.25rem;
}
/* Nool nagu Tableri .form-select'il (hall, näha ka tumedas); kartiku oma on #343a40, tumedal taustal ~1,5:1 */
html .select2-container--krajee-bs5 .select2-selection--single,
html .select2-container--krajee-bs5.select2-container--open .select2-selection--single {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='oklch%2871.55%25 0 0deg%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
html .select2-container--krajee-bs5 .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: 1.25rem;
    /* kartiku teema paneb siia #212529, mis tumedas režiimis kaob tausta sisse */
    color: var(--tblr-body-color);
}
html .select2-container--krajee-bs5 .select2-selection--single .select2-selection__placeholder,
html .select2-container--krajee-bs5 .select2-search__field::placeholder {
    color: var(--tblr-secondary);
}
html .select2-container--krajee-bs5.select2-container--focus:not(.select2-container--disabled) .select2-selection,
html .select2-container--krajee-bs5.select2-container--open:not(.select2-container--disabled) .select2-selection,
html .select2-container--krajee-bs5:not(.select2-container--disabled) .select2-selection:focus {
    border-color: color-mix(in oklab, var(--tblr-white) 50%, var(--tblr-primary));
    box-shadow: 0 0 0 var(--tblr-focus-ring-width, .25rem) var(--tblr-focus-ring-color);
    outline: 0;
}
html .select2-container--krajee-bs5 .select2-dropdown,
html .select2-container--krajee-bs5:not(.select2-container--disabled) .select2-dropdown {
    border-color: var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    background-color: var(--tblr-bg-surface);
    box-shadow: var(--tblr-shadow-dropdown);
    overflow: hidden;
}
html .select2-container--krajee-bs5.select2-container--open .select2-dropdown--below {
    margin-top: 2px;
    border-top: var(--tblr-border-width) solid var(--tblr-border-color);
}
html .select2-container--krajee-bs5.select2-container--open .select2-dropdown--above {
    margin-top: -2px;
    border-bottom: var(--tblr-border-width) solid var(--tblr-border-color);
}
html .select2-container--krajee-bs5 .select2-search--dropdown .select2-search__field {
    border: var(--tblr-border-width) solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    background-color: var(--tblr-bg-forms);
    color: var(--tblr-body-color);
    box-shadow: none;
}
html .select2-container--krajee-bs5 .select2-search--dropdown .select2-search__field:focus {
    border-color: color-mix(in oklab, var(--tblr-white) 50%, var(--tblr-primary));
    box-shadow: 0 0 0 var(--tblr-focus-ring-width, .25rem) var(--tblr-focus-ring-color);
    outline: 0;
}
/* iOS suumib lehe sisse, kui puudutatud välja kiri on alla 16 px: telefonis Select2 valik ja otsing 1rem */
@media (max-width: 575.98px) {
    html .select2-container--krajee-bs5 .select2-selection--single .select2-selection__rendered,
    html .select2-container--krajee-bs5 .select2-selection--multiple .select2-search__field,
    html .select2-container--krajee-bs5 .select2-search--dropdown .select2-search__field {
        font-size: 1rem;
    }
}
/* Teemas on valikute taust kollane (#fff3cd); Tableris läbipaistev */
html .select2-container--krajee-bs5 li.select2-results__option {
    background-color: transparent;
}
html .select2-container--krajee-bs5 .select2-results__option {
    padding: .4375rem .875rem;
    font-size: .875rem;
    color: var(--tblr-body-color);
}
/* Klaviatuuri või hiirega esile tõstetud valik: Tableri rippmenüü hover */
html .select2-container--krajee-bs5 li.select2-results__option--highlighted,
html .select2-container--krajee-bs5 li.select2-results__option--highlighted[aria-selected] {
    background-color: color-mix(in oklab, var(--tblr-body-color) 6%, transparent);
    color: var(--tblr-body-color);
}
/* Valitud väärtus: Tableri aktiivne rippmenüü punkt (õrn roheline taust, roheline tekst) */
html .select2-container--krajee-bs5 li.select2-results__option--selected,
html .select2-container--krajee-bs5 li.select2-results__option[aria-selected=true] {
    background-color: color-mix(in oklab, var(--tblr-primary) 8%, transparent);
    color: var(--tblr-primary);
    font-weight: var(--tblr-font-weight-medium);
}
/* Grupi pealkiri: Tableri dropdown-header */
html .select2-container--krajee-bs5 .select2-results__group {
    padding: .75rem .875rem .25rem;
    background: transparent;
    color: var(--tblr-secondary);
    font-size: .75rem;
    font-weight: var(--tblr-font-weight-medium);
    letter-spacing: .04em;
    text-transform: uppercase;
}
/* Mitme valikuga väli (sildid): valikud Tableri märgiste kujul */
html .select2-container--krajee-bs5 .select2-selection--multiple .select2-selection__choice {
    border: var(--tblr-border-width) solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius-sm, 4px);
    background-color: var(--tblr-bg-surface-secondary);
    color: var(--tblr-body-color);
    font-size: .8125rem;
}
html .select2-container--krajee-bs5 .select2-selection__choice__remove,
html .select2-container--krajee-bs5 .select2-selection__clear {
    color: var(--tblr-secondary);
}
html .select2-container--krajee-bs5 .select2-selection__choice__remove:hover,
html .select2-container--krajee-bs5 .select2-selection__clear:hover {
    color: var(--tblr-danger);
    background: transparent;
}

/* Telefoni kaardis ei näidata tühje lahtreid (näiteks sildid puuduvad) */
@media (max-width: 600px) {
    .eelarve-responsive td:empty {
        display: none;
    }
}
/* kartik kuupäevavahemiku tekst ei jookse noole alla */
.kv-drp-dropdown .range-value {
    padding-right: 2.5rem;
}
/* Periood on kohustuslik: tühjendusnuppu (×) pole, muidu kleepus see noolega kokku */
.kv-drp-dropdown .kv-clear {
    display: none;
}
/* Kalendri ikoon teksti kõrgusel (kartik paneb top: .4rem) */
.kv-drp-dropdown .left-ind {
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
}
/* Kartiku täidetud kolmnurga asemel sama nool nagu kõrvalolevatel valikuväljadel (Tableri .form-select) */
.kv-drp-dropdown .caret {
    display: none;
}
.kv-drp-dropdown {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='oklch%2871.55%25 0 0deg%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
}

/* ---------- Aruanded (views/reports/index.php) ---------- */
/* Grupi avamise nupp ja selle koht ridadel, millel alamkategooriaid pole */
.report-toggle-space {
    display: inline-block;
    flex: none;
    width: calc(1.5rem + 2px);
}
.report-child-name {
    padding-left: calc(1.5rem + 2px + 1.25rem);
}
.report-table .progress {
    min-width: 4rem;
}

/* Segmentvalik (Tableri .nav-segmented): hall rööbas ja valitud kirje valgena pehme varjuga, ilma ääriseta.
   Rööbas on poolläbipaistev, nii et lehe taustal on see tumedam ja valgel kaardil heledam.
   Toonid tulevad --tblr-body-color'ist (teema alus), mitte --tblr-body-color-rgb'st, mis on Tableris kõvasti neutraalne. */
.nav-segmented {
    --tblr-nav-bg: color-mix(in oklab, var(--tblr-body-color) 7%, transparent);
    --tblr-nav-padding: 3px;
    box-shadow: none;
    font-weight: 600;
}
.card .nav-segmented {
    --tblr-nav-bg: color-mix(in oklab, var(--tblr-body-color) 5%, transparent);
}
.nav-segmented .nav-link {
    color: color-mix(in oklab, var(--tblr-body-color) 78%, transparent);
}
.nav-segmented .nav-link:hover {
    color: var(--tblr-body-color);
    background: color-mix(in oklab, var(--tblr-body-color) 5%, transparent);
}
.nav-segmented .nav-link.active,
.nav-segmented .nav-link-input:checked + .nav-link {
    color: var(--tblr-body-color);
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 1px 3px rgba(16, 24, 40, .06);
}
/* Tumedas on Tableri aktiivse kirje taust sama tume kui rööbas: valitud kirje heledamaks */
[data-bs-theme="dark"] .nav-segmented .nav-link.active,
[data-bs-theme="dark"] .nav-segmented .nav-link-input:checked + .nav-link {
    background: color-mix(in oklab, var(--tblr-body-color) 16%, transparent);
}

/* ---------- Kaardi päis: vahelehed ja üks valik (views/budgets/index.php, views/budgets/plan.php) ----------
   Tableri card-header-tabs värvib halliks ainult vahelehtede osa ja eeldab üherealist päist, seega paremal
   oleva valiku (periood, filter) alla jäi valge riba. Hall on nüüd kogu päis, vahelehed päise alaservas
   (aktiivne liitub sisuga). Telefonis on valik üleval omal real ja vahelehed selle all. */
.pe-tabs-header {
    padding: 0 var(--tblr-card-cap-padding-x) 0 0;
    background: var(--tblr-bg-surface-tertiary);
    border-radius: var(--tblr-card-border-radius) var(--tblr-card-border-radius) 0 0;
}
/* Hallil päisel jääb Tableri mitteaktiivse vahelehe hall tumedas liiga tuhmiks (~3:1) */
.pe-tabs-header .nav-link:not(.active) {
    color: color-mix(in oklab, var(--tblr-body-color) 78%, transparent);
}
.pe-tabs-header > .card-header-tabs {
    flex: 0 1 auto;
    align-self: flex-end;
    margin: 0;
    background: transparent;
}
@media (max-width: 767.98px) {
    .pe-tabs-header > .ms-auto {
        order: -1;
        width: 100%;
        margin-left: 0 !important;
        padding-top: .75rem !important;
        padding-left: var(--tblr-card-cap-padding-x);
    }
    .pe-tabs-header > .card-header-tabs {
        flex-basis: 100%;
    }
}

/* ---------- Tehingud (views/transactions/index.php) ---------- */
/* Telefonis kompaktsed kokkuvõtte kaardid, et nimekiri algaks esimesel ekraanil */
@media (max-width: 575.98px) {
    .tx-summary {
        --tblr-gutter-y: .5rem;
        --tblr-gutter-x: .5rem;
    }
    .tx-summary .card-body {
        padding: .5rem .75rem;
    }
    .tx-summary .h3 {
        font-size: 1rem;
    }
    .tx-summary .text-secondary {
        font-size: .75rem;
    }
}

/* ---------- Kontod (views/accounts) ---------- */
/* Tüübi grupi vahepealkiri nagu tabeli päis */
.accounts-table .accounts-group-row > th {
    background: var(--tblr-bg-surface-tertiary);
    color: var(--tblr-secondary);
    font-size: .75rem;
    font-weight: var(--tblr-font-weight-medium);
    letter-spacing: .04em;
    text-transform: uppercase;
    padding-top: .5rem;
    padding-bottom: .5rem;
}
.accounts-table .accounts-group-row > th.text-end {
    color: var(--tblr-body-color);
    font-size: .75rem;
    letter-spacing: 0;
}
.accounts-table td:first-child {
    max-width: 22rem;
}
.accounts-table .accounts-last {
    max-width: 16rem;
}
/* Rea menüü jääb nime lingi (stretched-link) peale */
.accounts-table .dropdown {
    position: relative;
    z-index: 2;
}
/* Konto tüübi valik kaartidena (vorm) */
.accounts-type-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
}
@media (max-width: 575.98px) {
    .accounts-type-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.accounts-type-grid .form-selectgroup-label {
    height: 100%;
}
/* Koondatud väikesed ülekanded: avatud read taandega, lüliti väljas näitab kõik read */
.accounts-tx-children > .list-group-item {
    padding-left: 2.5rem;
    background: var(--tblr-bg-surface-secondary);
}
.accounts-tx-toggle .when-open,
.accounts-tx-toggle[aria-expanded="true"] .when-closed {
    display: none;
}
.accounts-tx-toggle[aria-expanded="true"] .when-open {
    display: inline;
}
.accounts-tx-flat .accounts-tx-group {
    display: none;
}
.accounts-tx-flat .accounts-tx-children {
    display: block !important;
    height: auto !important;
}
.accounts-tx-flat .accounts-tx-children > .list-group-item {
    padding-left: var(--tblr-list-group-item-padding-x);
    background: none;
}

/* Keritav modaal, mille päis, sisu ja jalus on <form> sees (vorm modaalis): vorm venib nagu
   .modal-content, kerib ainult .modal-body, päis ja nupud jäävad nähtavale. */
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}
.modal-dialog-scrollable .modal-content > form > .modal-body {
    overflow-y: auto;
}

/* ---------- Eelarve jälgimine (views/budgets/index.php, EEL19 arvutis / EEL20 telefonis) ----------
   Iga rida on oma grid: telefonis ikoon | nimi + summa | olek ja riba all, arvutis
   ikoon | kategooria | summa | riba | olek. Tänase päeva joon on iga riba peal (.bt-today). */
.bt-bar {
    position: relative;
    display: block;
}
.bt-bar .progress {
    height: 6px;
    background: var(--tblr-border-color);
}
.bt-bar-lg .progress {
    height: 10px;
}
.bt-today {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 2px;
    margin-left: -1px;
    border-radius: 1px;
    background: var(--tblr-body-color);
    opacity: .4;
    pointer-events: none;
}
.bt-bar-lg .bt-today {
    top: -5px;
    bottom: -5px;
}
.bt-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-weight: var(--tblr-font-weight-medium);
    white-space: nowrap;
}
.bt-chip .ti {
    font-size: .875rem;
    line-height: 1;
}
/* Ikooniga ja ikoonita märgis sama kõrged, et kulude ja tulude veerg oleksid kokkuvõttes samal joonel */
.bt-chip {
    min-height: 1.25rem;
}
.bt-count {
    margin-left: .25rem;
}
.bt-extras {
    --tblr-datagrid-padding: .75rem;
    /* telefonis kaks näitajat kõrvuti, et kategooriad algaksid esimesel ekraanil */
    --tblr-datagrid-item-width: 9rem;
}
/* Arvutis sama vahe nagu ülemises reas (row g-4), et teine näitaja algaks tulude veeruga samalt kohalt */
@media (min-width: 992px) {
    .bt-extras {
        --tblr-datagrid-padding: 1.5rem;
    }
}
.bt-row {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    grid-template-areas:
        "icon name state"
        "icon amount state"
        ". usage usage";
    align-items: center;
    column-gap: .5rem;
    padding: .625rem 1rem;
    border-top: var(--tblr-border-width) solid var(--tblr-border-color-light, var(--tblr-border-color));
}
.bt-icon {
    grid-area: icon;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .25rem;
}
/* Tumedas režiimis kaob kategooria ikoon (bg-*-lt märk) tumedasse toonitud ringi: ikoon ise heledam, ring ja toon jäävad.
   currentColor on lapsel vanema (märgi) värv. */
[data-bs-theme="dark"] .cat-icon > .ti {
    color: color-mix(in oklab, currentColor 55%, var(--tblr-white));
}
/* Kategooria ikoon: grupil ja kategoorial sama 2rem ring, ikoon ise 1rem (avatari vaikimisi .75rem oli kribu).
   Sama suurus tehingute nimekirjas, töölaua loendites ja aruande tabelis. */
.bt-icon .cat-icon .ti,
.list-group-item .cat-icon .ti,
.report-table .cat-icon .ti {
    font-size: 1rem;
}
.bt-name {
    grid-area: name;
    display: flex;
    align-items: baseline;
    gap: .25rem;
    min-width: 0;
    white-space: nowrap;
}
.bt-amount {
    grid-area: amount;
    font-size: .875rem;
    color: var(--tblr-secondary);
    white-space: nowrap;
}
.bt-usage {
    grid-area: usage;
    margin-top: .5rem;
}
.bt-state {
    grid-area: state;
    justify-self: end;
}
.bt-group-row {
    width: 100%;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    background: var(--tblr-bg-surface-secondary);
    color: var(--tblr-body-color);
    font: inherit;
    font-weight: var(--tblr-font-weight-bold);
    text-align: start;
    cursor: pointer;
}
.bt-group-row:hover {
    background: var(--tblr-bg-surface-tertiary);
}
.bt-group-row:focus-visible {
    outline: 2px solid var(--tblr-primary);
    outline-offset: -2px;
}
.bt-group-row .bt-amount {
    font-weight: var(--tblr-font-weight-normal);
}
.bt-section-title {
    padding: .625rem 1rem;
    border-top: var(--tblr-border-width) solid var(--tblr-border-color);
    background: var(--tblr-bg-surface-secondary);
    font-weight: var(--tblr-font-weight-bold);
}
.bt-group:first-of-type .bt-group-row {
    border-top: 0;
}
@media (min-width: 768px) {
    .bt-row {
        grid-template-columns: 3.75rem minmax(0, 2.2fr) minmax(8rem, 1fr) minmax(9rem, 2fr) minmax(9.5rem, 1.2fr);
        grid-template-areas: "icon name amount usage state";
        column-gap: .75rem;
        padding: .5rem 1.25rem .5rem .75rem;
    }
    .bt-amount {
        font-size: inherit;
        color: var(--tblr-body-color);
        text-align: end;
    }
    .bt-usage {
        margin-top: 0;
    }
    .bt-state {
        justify-self: start;
    }
    .bt-head {
        border-top: 0;
        background: var(--tblr-bg-surface-tertiary);
        color: var(--tblr-secondary);
        /* nagu Tableri .table thead th */
        font-size: .75rem;
        font-weight: var(--tblr-font-weight-medium);
        letter-spacing: .04em;
        text-transform: uppercase;
    }
    .bt-head .bt-name {
        grid-column: icon-start / name-end;
        padding-left: .5rem;
    }
    /* "Kulutatud / plaan" päis hall nagu teised päised, mitte summa tume värv */
    .bt-head .bt-amount {
        color: inherit;
    }
}
@media (max-width: 767.98px) {
    .bt-filter {
        width: 100%;
    }
    .bt-filter .nav-link {
        flex: 1 1 auto;
        justify-content: center;
        min-height: 2.5rem;
    }
}

/* ---------- Pangaimpordi eelvaade (views/imports/preview.php) ---------- */
/* Fikseeritud paigutus: brauser ei pea 1000+ rea järgi veergude laiust arvutama (suur fail laeb kiiresti) */
.imp-table {
    table-layout: fixed;
    min-width: 62rem;
}
.imp-table .imp-c-check { width: 2.75rem; }
.imp-table .imp-c-date { width: 7.5rem; }
.imp-table .imp-c-amount { width: 9rem; }
.imp-table .imp-c-category { width: 15rem; }
.imp-table .imp-c-tags { width: 10rem; }
.imp-table .imp-c-split { width: 3.25rem; }
.imp-table td {
    padding-top: .375rem;
    padding-bottom: .375rem;
}
/* Välja jäetud rida (märkeruut maas, nt võimalik topeltkirje) */
.imp-table .imp-off > td:not(:first-child) {
    opacity: .45;
}
.imp-divide-table .imp-c-amount { width: 9rem; }
.imp-divide-table .imp-c-category { width: 15rem; }
.imp-table .ts-wrapper,
.imp-divide-table .ts-wrapper {
    min-width: 0;
}
/* Otsinguga üksikvalik (initSearchSelect): otsinguväli valitud väärtuse kõrval, mitte uuel real
   (Tom Selecti min-width 7rem murraks kitsas veerus rea) */
.ts-wrapper.single .ts-control {
    flex-wrap: nowrap;
}
.ts-wrapper.single .ts-control > input {
    min-width: 0;
}
/* Kohatäide ("Kõik kategooriad", "Kõik kontod") on päris valik: sama hall nagu Select2 kohatäitel, mitte helehall 2,6:1 */
.ts-wrapper .ts-control > input::placeholder {
    color: var(--tblr-secondary);
    opacity: 1;
}
.ts-wrapper.single .ts-control > .item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Tühjendamise rist (clear_button, tomSelectPlugins): mitmikvalikus kehtiks sellele Tableri märgi kujundus
   (.ts-wrapper.multi .ts-control > div, tabler-vendors.css) */
.ts-wrapper.multi .ts-control > .clear-button {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
}
/* Tom Selecti rippmenüü on body all (dropdownParent, nagu Tableri juhendis), modaali kohal */
body > .ts-dropdown {
    z-index: 1060;
}

/* Tableri teisene ja kolmas taust (bg-body-secondary, bg-body-tertiary, nt päevade päised) on :root'is kõvasti
   neutraalsed. Siin teema hallidest, et teema alus (data-bs-theme-base) kehtiks ka neile. Neutral'iga on
   väärtused samad mis Tableris (hele: gray-200 / gray-100, tume: gray-800 / gray-800 ja gray-900 keskmine). */
:root {
    --tblr-secondary-bg: light-dark(var(--tblr-gray-200), var(--tblr-gray-800));
    --tblr-tertiary-bg: light-dark(var(--tblr-gray-100), color-mix(in oklab, var(--tblr-gray-800) 50%, var(--tblr-gray-900)));
}

/* ---------- Fondid: pealkirjad Montserrat, põhitekst Inter ----------
   Ise serveeritud (web/fonts, @fontsource-variable 5.3.0, SIL OFL 1.1, litsents samas kaustas), muutuva paksusega.
   latin katab eesti täpitähed, latin-ext š ja ž; brauser laeb ainult vajaliku faili (unicode-range). */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/montserrat-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/montserrat-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
    --tblr-body-font-family: "Inter", var(--tblr-font-sans-serif);
}
:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .page-title, .card-title, .modal-title, .offcanvas-title) {
    font-family: "Montserrat", var(--tblr-body-font-family);
}
/* Pealkirja suurusega summad (.h1–.h3 + pe-tabular-nums) on Interis nagu summad nimekirjades: ühelaiused numbrid,
   üks numbrikiri igal pool (otsus 2026-11-05). Pealkirjad jäävad Montserrati. */
:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6).pe-tabular-nums {
    font-family: var(--tblr-body-font-family);
}

/* ---------- Kujunduse katsetus (views/layouts/_themeSettings.php, ainult admin) ----------
   Teema alus, põhivärv ja ümarus on Tableri omad (data-bs-theme-*); režiim on kasutaja seade (UserSettings theme).
   Vaikefondist erineva fondi nime paneb skript muutujasse --pe-font-heading / --pe-font-body
   (views/layouts/_themeHead.php, web/js/theme-settings.js) ja laeb selle katsetuseks Google Fontsist. */
:root[data-pe-font-body] {
    --tblr-body-font-family: var(--pe-font-body), var(--tblr-font-sans-serif);
}
:root[data-pe-font-heading] :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .page-title, .card-title, .modal-title, .offcanvas-title) {
    font-family: var(--pe-font-heading), var(--tblr-body-font-family);
}
.pe-theme-bases {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pe-theme-swatches {
    display: flex;
    gap: 3px;
}
.pe-theme-swatches span {
    flex: 1;
    height: 1.25rem;
    border-radius: var(--tblr-border-radius-sm);
}

/* ---------- Kuud ja prognoos (views/reports/months.php, kujundus ARU2/ARU3) ----------
   Iga kuu on veerg: ülemine pool tulud (alt üles), alumine kulud (ülevalt alla), mõlemas grupi lõigud
   (--mo-c on grupi värv). Prognoos viirutatud, jooksev kuu kergelt viirutatud. Joon SVG-s samades
   koordinaatides (veeru keskkoht = (i + 0,5) / kuude arv). Telefonis keritav. */
.mo-scroll {
    overflow-x: auto;
}
.mo-chart {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) 4.5rem;
    column-gap: .5rem;
    min-width: calc(var(--mo-n) * 2.25rem + 9rem);
}
.mo-forecast-head,
.mo-cols,
.mo-labels {
    display: grid;
    grid-template-columns: repeat(var(--mo-n), minmax(0, 1fr));
}
.mo-forecast-head {
    height: 1.5rem;
}
.mo-forecast-head span {
    margin: 0 .25rem;
    border-top: 2px dashed var(--tblr-border-active-color);
    padding-top: 2px;
    text-align: center;
    font-size: .75rem;
    font-weight: var(--tblr-font-weight-medium);
    color: var(--tblr-secondary);
}
.mo-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 18rem;
    text-align: right;
    font-size: .6875rem;
    color: var(--tblr-secondary);
    line-height: 1;
}
.mo-axis-right {
    text-align: left;
    color: var(--tblr-azure);
    font-weight: var(--tblr-font-weight-medium);
}
.mo-plot {
    position: relative;
    height: 18rem;
}
.mo-grid {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}
.mo-grid span {
    border-top: 1px dashed var(--tblr-border-color);
}
.mo-cols {
    position: absolute;
    inset: 0;
}
.mo-col {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: var(--tblr-border-radius);
    text-decoration: none;
}
.mo-col:hover {
    background: color-mix(in oklab, var(--tblr-body-color) 4%, transparent);
}
.mo-col.active {
    background: color-mix(in oklab, var(--tblr-body-color) 8%, transparent);
}
.mo-half {
    display: flex;
    align-items: center;
    height: 50%;
}
.mo-up {
    flex-direction: column-reverse;
    border-bottom: 1px solid var(--tblr-gray-400);
}
.mo-down {
    flex-direction: column;
}
.mo-seg {
    flex: none;
    width: 56%;
    background: var(--mo-c);
}
.mo-cur .mo-seg {
    background: repeating-linear-gradient(135deg, var(--mo-c) 0 6px, color-mix(in oklab, var(--mo-c) 75%, transparent) 6px 8px);
}
.mo-fc .mo-seg {
    background: repeating-linear-gradient(135deg, var(--mo-c) 0 3px, color-mix(in oklab, var(--mo-c) 35%, transparent) 3px 7px);
}
.mo-line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}
.mo-line polyline {
    fill: none;
    stroke: var(--tblr-body-color);
    stroke-width: 2.5;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
.mo-line-balance polyline {
    stroke: var(--tblr-azure);
}
.mo-line .mo-line-fc {
    stroke-dasharray: 6 5;
}
.mo-dot {
    position: absolute;
    left: 50%;
    width: .5625rem;
    height: .5625rem;
    margin: -.28rem 0 0 -.28rem;
    border-radius: 50%;
    border: 2px solid var(--tblr-body-color);
    background: var(--tblr-body-color);
    z-index: 1;
}
.mo-dot-balance {
    border-color: var(--tblr-azure);
    background: var(--tblr-azure);
}
.mo-fc .mo-dot,
.mo-cur .mo-dot {
    background: var(--tblr-bg-surface);
}
.mo-labels {
    margin-top: .375rem;
    text-align: center;
    font-size: .75rem;
    line-height: 1.1;
}
.mo-labels small {
    display: block;
    min-height: .8rem;
    font-size: .625rem;
    opacity: .8;
}
.mo-swatch {
    display: inline-block;
    width: .625rem;
    height: .625rem;
    margin-right: .375rem;
    border-radius: 3px;
    vertical-align: baseline;
}
.mo-swatch-line {
    display: inline-block;
    width: 1.25rem;
    height: 0;
    border-top: 2.5px solid var(--tblr-body-color);
    vertical-align: middle;
}
.mo-swatch-line.mo-line-balance {
    border-top-color: var(--tblr-azure);
}
.mo-legend .btn.mo-off {
    opacity: .5;
    text-decoration: line-through;
}
.mo-table .mo-total td {
    background: var(--tblr-bg-surface-tertiary);
    font-weight: var(--tblr-font-weight-bold);
}

/* Rahavoo graafiku valikud telefonis (views/reports/months.php): kaks esimest rühma ühel real, prognoos
   täislaiuses all, nupud jagavad laiuse */
@media (max-width: 575.98px) {
    .pe-chart-options {
        width: 100%;
        margin: 0;
        padding-left: 0;
    }
    .pe-chart-options > .nav-segmented {
        flex: 1 1 auto;
    }
    .pe-chart-options > .nav-segmented:last-child {
        flex-basis: 100%;
    }
    .pe-chart-options .nav-link {
        flex: 1 1 0;
        justify-content: center;
        padding-inline: .5rem;
    }
}

/* ---------- Tagasiside ujuv nupp (views/feedback/_modal.php, params feedbackButton) ----------
   All paremas nurgas. Lehe põhja jääb nupu jagu ruumi, et viimase rea summa (paremal) ei jääks nupu alla.
   Peidus, kui modaal on lahti, küpsiste valik on tegemata (teade, layouts/cookieconsent.php data-pe-pending, juba enne
   skripti, et nupp ei vilguks) või telefonis on väli fookuses (klaviatuur). */
.pe-feedback-fab {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 1030;
    transition: transform .2s ease-out, opacity .2s ease-out, visibility 0s;
}
/* Telefonis allapoole kerimisel peidus (web/js/feedback.js); visibility, et peidetud nupp poleks fookuses */
.pe-feedback-fab.is-hidden {
    transform: translateY(calc(100% + 1.5rem));
    opacity: 0;
    visibility: hidden;
    transition: transform .15s ease-in, opacity .15s ease-in, visibility 0s .15s;
}
@media (prefers-reduced-motion: reduce) {
    .pe-feedback-fab,
    .pe-feedback-fab.is-hidden {
        transition: none;
    }
}
body:has(.pe-feedback-fab) .page-wrapper {
    padding-bottom: 4.5rem;
}
body.modal-open .pe-feedback-fab,
body:has(.offcanvas.show) .pe-feedback-fab,
body:has(#cookie-banner[data-pe-pending]) .pe-feedback-fab {
    display: none;
}
@media (max-width: 767.98px) {
    body:has(:is(input, textarea, select):focus) .pe-feedback-fab {
        display: none;
    }
}

/* Kohustusliku välja tärn: kartiku oma (tomato, monospace) samaks nagu Tableri .form-label.required */
html .required .has-star:not(.custom-control-label):not(.custom-file-label)::after,
html .is-required::after {
    margin-left: var(--tblr-form-label-required-gap, .25rem);
    color: var(--tblr-red);
    font-family: inherit;
}

/* Lehe sisu vahetus ilma täislaadimiseta (web/js/page-pjax.js): vana sisu tuhmub, kuni uus tuleb */
#page-pjax.pjax-loading .page-body {
    opacity: .55;
    pointer-events: none;
    transition: opacity .15s ease-in .1s;
}