/* Maklersky portal - jeden CSS subor, ziadny build step.
   Farby: primarna #0C4375, akcent #FFD240. Font: Inter (self-hosted). */

@font-face {
    font-family: 'Inter';
    src: url('../fonts/InterVariable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --primary: #0C4375;
    --primary-dark: #093357;
    --primary-soft: #EDF4FB;
    --accent: #FFD240;
    --bg: #F4F6FA;
    --surface: #FFFFFF;
    --text: #0F172A;
    --muted: #5B6B80;            /* min. 4,7:1 na vsetkych podkladoch (WCAG AA) */
    --border: #E5EAF1;
    --danger: #BE123C;
    --success: #047857;
    --radius: 10px;
    --radius-lg: 14px;
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-pill: 999px;
    /* Typograficka skala - kazda velkost pisma v portali je jedna z tychto */
    --fs-xs: .75rem;     /* 12px - popisky, hlavicky tabuliek, poznamky */
    --fs-sm: .8125rem;   /* 13px - sekundarny text, male tlacidla */
    --fs-base: .875rem;  /* 14px - text, polia, tlacidla */
    --fs-md: 1rem;       /* 16px - nadpisy kariet */
    --fs-lg: 1.125rem;   /* 18px - zvyraznene hodnoty */
    --fs-xl: 1.5rem;     /* 24px - nadpis stranky, hlavne sumy */
    --fs-2xl: 1.75rem;   /* 28px */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
    --shadow-md: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px -12px rgba(15, 23, 42, .18);
    --shadow-lg: 0 24px 60px -20px rgba(9, 51, 87, .35);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* atribut hidden vzdy vyhra nad display z komponentov (.btn, .field...) */
/* Formularove prvky dedia pismo portalu (prehliadac inak pouzije Arial/system) */
button, input, select, textarea { font-family: inherit; font-size: inherit; }
b, strong { font-weight: 700; }   /* nie "bolder" - vnorene <b> v tucnom texte by dalo 900 */

body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'cv02', 'cv11';
}

h1, h2, h3 { line-height: 1.25; letter-spacing: -.02em; font-weight: 700; }
h1 { font-size: var(--fs-xl); margin: 0 0 2px; }
h2 { font-size: var(--fs-md); margin: 0 0 14px; }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ---- Layout: sidebar + obsah ---- */

.shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 250px;
    flex-shrink: 0;
    background: var(--primary-dark);
    color: #fff;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}
.sidebar__logo { padding: 20px 24px 12px; }
/* Logo (biela znacka) ako ticha plocha zarovnana s polozkami menu - bez tazkeho tiena */
.sidebar__logo img {
    width: 132px; display: block; border-radius: var(--radius-xs);
}
.sidebar__nav { flex: 1; padding: 4px 12px; overflow-y: auto; }
.sidebar__section {
    font-size: var(--fs-xs); font-weight: 600;
    color: rgba(255, 255, 255, .6); margin: 20px 12px 8px;   /* min. 5:1 na navy paneli */
}
.sidebar__link {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px; margin-bottom: 2px; border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, .78); text-decoration: none;
    font-weight: 500; font-size: var(--fs-base);
    transition: background .15s, color .15s;
}
.sidebar__link svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .75; }
.sidebar__link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sidebar__link--active {
    background: rgba(255, 255, 255, .12); color: #fff; font-weight: 600;
}
.sidebar__link--active svg { opacity: 1; color: var(--accent); }
.sidebar__footer {
    padding: 14px 20px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: var(--fs-xs);
}
.sidebar__footer a { color: rgba(255, 255, 255, .55); text-decoration: none; }
.sidebar__footer a:hover { color: #fff; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    padding: 10px 28px;
    display: flex; align-items: center; justify-content: flex-end; gap: 14px;
    position: sticky; top: 0; z-index: 20;
}
.topbar__user { display: flex; align-items: center; gap: 12px; font-size: var(--fs-base); }
.topbar__user a { text-decoration: none; }
.avatar {
    width: 34px; height: 34px; border-radius: var(--radius-pill);
    background: var(--primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: var(--fs-sm); letter-spacing: .02em;
}
.topbar__meta { line-height: 1.25; }
.topbar__meta b { display: block; color: var(--text); font-weight: 600; }
.topbar__meta span { color: var(--muted); font-size: var(--fs-xs); }

.content { padding: 30px 32px; max-width: 1180px; width: 100%; margin: 0 auto; }

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.page-head p { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-base); }
/* Tlacidla zarovnane na spodok - vedla pola s popisom (napr. pobocka v editore planu) sa nenatiahnu. */
.page-head__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }

/* ---- Komponenty ---- */

.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    padding: 22px 24px; margin-bottom: 20px;
    transition: box-shadow .2s;
}
.card:hover { box-shadow: var(--shadow-md); }
.card h2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }


.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 15px; border-radius: var(--radius); border: 1px solid transparent;
    background: var(--primary); color: #fff; font: inherit; font-weight: 600; font-size: var(--fs-base);
    cursor: pointer; text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: background .15s, transform .1s, box-shadow .15s;
}
.btn:hover { background: var(--primary-dark); box-shadow: var(--shadow-md); }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn--secondary:hover { background: var(--bg); }
.btn--danger { background: transparent; color: var(--danger); border-color: transparent; box-shadow: none; }
.btn--danger:hover { background: #FFF1F2; box-shadow: none; }
.btn--sm { padding: 5px 10px; font-size: var(--fs-sm); border-radius: var(--radius-sm); }
.btn--accent { background: var(--accent); color: var(--primary-dark); }
.btn--accent:hover { background: #F5C41B; }

.badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 10px 2px 8px; border-radius: var(--radius-pill);
    font-size: var(--fs-xs); font-weight: 600; border: 1px solid transparent;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; }
.badge--rozpracovany { background: #F1F5F9; color: #475569; border-color: #E2E8F0; }
.badge--aktivny { background: #ECFDF5; color: #047857; border-color: #D1FAE5; }
.badge--uzavrety { background: #EFF6FF; color: #1D4ED8; border-color: #DBEAFE; }
.badge--archivovany { background: #F8FAFC; color: #94A3B8; border-color: #E2E8F0; }
.badge--klient { background: #EFF6FF; color: #1D4ED8; border-color: #DBEAFE; }
.badge--partner { background: #FFFBEB; color: #B45309; border-color: #FEF3C7; }
.badge--dieta { background: #FAF5FF; color: #7E22CE; border-color: #F3E8FF; }

/* ---- Pipeline navigacny bar (detail klienta) ---- */

.pipeline { padding: 6px 4px 2px; }
.pipeline__steps { display: flex; position: relative; }
.pipeline__steps::before {
    content: ''; position: absolute; top: 13px; left: 5%; right: 5%; height: 3px;
    background: var(--border); border-radius: var(--radius-xs); z-index: 0;
}
.pipeline__fill {
    position: absolute; top: 13px; left: 5%; height: 3px; max-width: 90%;
    background: var(--primary); border-radius: var(--radius-xs); z-index: 1;
    transition: width .25s ease-out;
}
.pipeline__step-form {
    flex: 1; position: relative; z-index: 2; margin: 0; padding: 0; background: none; border: 0;
}
.pipeline__step {
    width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px;
    background: none; border: 0; padding: 4px; cursor: pointer; font: inherit;
}
.pipeline__dot {
    width: 22px; height: 22px; border-radius: var(--radius-pill); background: #fff;
    border: 3px solid var(--border); transition: all .2s;
}
.pipeline__step--done .pipeline__dot { background: var(--primary); border-color: var(--primary); }
.pipeline__step--current .pipeline__dot {
    border-color: var(--primary); box-shadow: 0 0 0 4px rgba(12, 67, 117, .15);
}
.pipeline__label { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); text-align: center; }
.pipeline__step--done .pipeline__label, .pipeline__step--current .pipeline__label { color: var(--text); }
.pipeline__step:hover .pipeline__label { color: var(--primary); }

/* ---- Tooltip (napr. datum/kto/trvanie kroku pipeline pri hoveri) ---- */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--text); color: #fff; font-size: var(--fs-xs); font-weight: 500;
    padding: 6px 10px; border-radius: var(--radius-sm); white-space: nowrap;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .15s, transform .15s; z-index: 10;
}
[data-tooltip]::before {
    content: ''; position: absolute; bottom: 100%; left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 5px solid transparent; border-top-color: var(--text);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .15s, transform .15s; z-index: 10;
}
[data-tooltip]:hover::after, [data-tooltip]:hover::before,
[data-tooltip]:focus-visible::after, [data-tooltip]:focus-visible::before {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

.table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.table th {
    text-align: left; padding: 8px 12px; font-size: var(--fs-xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
    border-bottom: 1px solid var(--border);
}
.table td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: #F8FAFD; }
.table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table .actions { text-align: right; white-space: nowrap; width: 1%; }
.table .actions .btn, .table .actions .inline-form { margin-left: 6px; }

.empty { text-align: center; padding: 40px 20px; color: var(--muted); font-size: var(--fs-base); }
/* V dvojstlpcovom rozlozeni by plna vyska nechala medzi zoznamom a formularom dieru. */
.budget-cols .empty { padding: 16px; }
.empty b { display: block; font-size: var(--fs-md); color: var(--text); margin-bottom: 4px; font-weight: 600; }

.flash {
    padding: 11px 16px; border-radius: var(--radius); margin-bottom: 18px;
    font-weight: 500; font-size: var(--fs-base); border: 1px solid transparent;
    animation: flash-in .25s ease-out;
}
@keyframes flash-in { from { opacity: 0; transform: translateY(-6px); } }
.flash--success { background: #ECFDF5; color: #065F46; border-color: #A7F3D0; }
.flash--success::before { content: "✓ "; font-weight: 700; }
.flash--error { background: #FFF1F2; color: #9F1239; border-color: #FECDD3; }

.autosave-status--saved { color: #159A74; font-weight: 600; }
.autosave-status--pulse { animation: autosave-pulse .6s ease-out; }
@keyframes autosave-pulse { from { opacity: 0; transform: translateY(-2px); } }

/* ---- Formulare ---- */

.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 16px; }
.form-grid--2 { grid-template-columns: repeat(2, 1fr); }
.field { display: flex; flex-direction: column; gap: 5px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-xs); font-weight: 600; color: #475569; letter-spacing: .01em; }
.field label .lock { color: var(--danger); }
.field input, .field select, .field textarea {
    padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius);
    font: inherit; font-size: var(--fs-base); background: var(--surface); color: var(--text);
    box-shadow: var(--shadow-sm);
    transition: border-color .15s, box-shadow .15s;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: #CBD5E1; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(12, 67, 117, .12);
}
.field .hint { font-size: var(--fs-xs); color: var(--muted); }
.field--error input, .field--error select, .field--error textarea {
    border-color: var(--danger); box-shadow: 0 0 0 3px rgba(225, 29, 72, .1);
}
.field__error { font-size: var(--fs-xs); color: var(--danger); font-weight: 600; }
.form-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; align-items: center; }

.radio-row { display: flex; gap: 16px; padding: 8px 0; }
.radio-row label { font-size: var(--fs-base); font-weight: 500; color: var(--text); display: flex; gap: 6px; align-items: center; }
input[type=checkbox], input[type=radio] { accent-color: var(--primary); width: 15px; height: 15px; }

/* ---- Wizard analyzy ---- */

.wizard { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.wizard__step {
    flex: 1; min-width: 150px; text-align: center; padding: 11px 10px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    color: var(--muted); text-decoration: none; font-size: var(--fs-sm); font-weight: 600;
    box-shadow: var(--shadow-sm);
    transition: border-color .15s, color .15s;
}
.wizard__step:hover { border-color: #CBD5E1; color: var(--text); }
.wizard__step--active {
    border-color: var(--primary); color: var(--primary); background: var(--primary-soft);
    box-shadow: inset 0 -3px 0 var(--accent), var(--shadow-sm);
}

/* Zbalitelny blok osoby v kroku 1 analyzy - <details>/<summary>, bez JS.
   Hlavny klient je otvoreny, partner a deti zrolovane (vyplnaju sa len niekedy). */
/* Rovnaky vzhlad ako .card - inak by cez blok presvitalo sive pozadie stranky
   a krok 1 by vyzeral inak nez kroky 2-4. */
.person-block {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    margin-bottom: 18px; transition: box-shadow .2s;
}
.person-block:hover { box-shadow: var(--shadow-md); }
.person-block > summary {
    display: flex; align-items: center; gap: 10px; padding: 16px 20px;
    font-size: var(--fs-md); font-weight: 600; cursor: pointer;
    list-style: none; border-radius: var(--radius-lg);
}
.person-block > summary::-webkit-details-marker { display: none; }
.person-block > summary::after {
    content: ''; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); margin-left: auto; transform: rotate(45deg);
    flex-shrink: 0; margin-top: -4px;
    transition: transform .15s;
}
.person-block[open] > summary::after { transform: rotate(225deg); margin-top: 4px; }
.person-block > summary:hover { background: var(--primary-soft); }
.person-block > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.person-block[open] > summary { border-bottom: 1px solid var(--border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.person-block__name { font-weight: 600; }
.person-block__flag { font-size: var(--fs-xs); font-weight: 600; color: var(--danger); }
.person-block__body { padding: 18px 20px 20px; }
.person-block h4 { font-size: var(--fs-xs); font-weight: 600; }

.checkbox-row { display: flex; gap: 8px; align-items: center; padding: 8px 0 0; font-size: var(--fs-base); font-weight: 500; color: var(--text); cursor: pointer; }

/* ---- Karty vnutri osoby (krok 1 analyzy) - cisty CSS, bez JS ----
   Poradie prepinacov a panelov si zodpoveda cez :nth-of-type, takze selektory
   nezavisia od id konkretnej osoby. Bez CSS sa zobrazia vsetky panely naraz. */

.ptabs > .ptab { position: absolute; opacity: 0; pointer-events: none; }
.ptabs__nav {
    display: flex; gap: 4px; flex-wrap: wrap;
    border-bottom: 1px solid var(--border); margin-bottom: 18px;
}
.ptabs__nav label {
    padding: 9px 16px; cursor: pointer; font-size: var(--fs-base); font-weight: 600;
    color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color .15s, border-color .15s;
}
.ptabs__nav label:hover { color: var(--text); }
.ptabs > div { display: none; }
.ptabs > .ptab:nth-of-type(1):checked ~ div:nth-of-type(1),
.ptabs > .ptab:nth-of-type(2):checked ~ div:nth-of-type(2),
.ptabs > .ptab:nth-of-type(3):checked ~ div:nth-of-type(3) { display: block; }
.ptabs > .ptab:nth-of-type(1):checked ~ .ptabs__nav label:nth-of-type(1),
.ptabs > .ptab:nth-of-type(2):checked ~ .ptabs__nav label:nth-of-type(2),
.ptabs > .ptab:nth-of-type(3):checked ~ .ptabs__nav label:nth-of-type(3) {
    color: var(--primary); border-bottom-color: var(--primary);
}
.ptabs > .ptab:focus-visible ~ .ptabs__nav { outline: 2px solid var(--primary); outline-offset: 3px; }

/* ---- Strankovanie zoznamov ---- */

.pager {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px;
    border-top: 1px solid var(--border); font-size: var(--fs-sm);
}
.pager__pages { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pager__page {
    min-width: 32px; padding: 6px 9px; text-align: center;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text); text-decoration: none; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.pager__page:hover { border-color: var(--primary); }
.pager__page--current { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ---- Upozornenie pred odhlasenim pri necinnosti ---- */

.idle-warn {
    position: fixed; right: 20px; bottom: 20px; z-index: 50; max-width: calc(100vw - 40px);
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--danger);
    border-left: 4px solid var(--danger); border-radius: var(--radius-lg);
    padding: 14px 18px; box-shadow: var(--shadow-lg);
}
/* Bez tohto by display:flex prebil predvolene [hidden]{display:none} a box
   by bol vidiet stale - aj ked ho JS "skryje". */
.idle-warn[hidden] { display: none; }
.idle-warn__text { display: flex; flex-direction: column; gap: 2px; }
.idle-warn__text b { font-size: var(--fs-md); }
.idle-warn__text span { font-size: var(--fs-sm); color: var(--muted); }
.idle-warn .js-idle-left { font-variant-numeric: tabular-nums; }

/* ---- Tyzdenny pondelkovy report na dashboarde ---- */

.report {
    background: var(--surface); border: 1px solid var(--primary);
    border-left: 4px solid var(--primary); border-radius: var(--radius-lg);
    padding: 18px 22px; margin-bottom: 22px; box-shadow: var(--shadow-md);
}
.report__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.report__head h2 { margin: 0; font-size: var(--fs-md); }
.report__head p { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.report__empty { margin: 12px 0 0; font-size: var(--fs-base); color: var(--muted); }
.report__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px; margin-top: 16px; }
.report__block h3 {
    margin: 0 0 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--muted);
}
.report__block h3.neg { color: var(--danger); }
.report__block ul { margin: 0; padding-left: 18px; }
.report__block li { font-size: var(--fs-base); margin-bottom: 3px; }
.report__block li span { font-size: var(--fs-sm); }
.report__days { white-space: nowrap; color: var(--primary); }

/* ---- Servis a ulohy: jedna casova os + prepinac pridavania (cisty CSS, bez JS) ---- */

/* Nadpis podsekcie vnutri karty - jednotny naprieč celym portalom. */
.section-title {
    margin: 18px 0 8px; font-size: var(--fs-xs); font-weight: 600;
}
.section-title .muted { font-weight: 500; text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); }
.section-title:first-of-type { margin-top: 4px; }

/* Odsadeny blok pre formular "pridat" - oddeli zadavanie od zoznamu. */
/* Zapustený blok v bielej karte - farbu berie z pozadia stranky, aby bolo
   na prvy pohlad vidiet, kde konci prehlad a kde sa zadava. */
.subpanel {
    margin-top: 18px; padding: 16px 18px 6px;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--bg);
}
.subpanel .section-title { margin-top: 0; }

.activity-add { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
.activity-mode { position: absolute; opacity: 0; pointer-events: none; }
.activity-tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.activity-tabs label {
    display: flex; align-items: baseline; gap: 7px; cursor: pointer;
    padding: 7px 14px; border: 1px solid var(--border); border-radius: var(--radius-pill);
    font-size: var(--fs-sm); font-weight: 600; background: var(--surface);
    transition: border-color .15s, background .15s, color .15s;
}
.activity-tabs label span { font-weight: 500; font-size: var(--fs-xs); color: var(--muted); }
.activity-tabs label:hover { border-color: #CBD5E1; }
#activity-plan:checked ~ .activity-tabs label[for="activity-plan"],
#activity-done:checked ~ .activity-tabs label[for="activity-done"] {
    background: var(--primary); border-color: var(--primary); color: #fff;
}
#activity-plan:checked ~ .activity-tabs label[for="activity-plan"] span,
#activity-done:checked ~ .activity-tabs label[for="activity-done"] span { color: #C7DCF0; }
#activity-plan:focus-visible ~ .activity-tabs label[for="activity-plan"],
#activity-done:focus-visible ~ .activity-tabs label[for="activity-done"] { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Bez CSS (alebo ak sa nenacita) sa zobrazia oba formulare - stranka zostane funkcna. */
.activity-form { display: none; gap: 8px; flex-wrap: wrap; }
#activity-plan:checked ~ .activity-form--plan,
#activity-done:checked ~ .activity-form--done { display: flex; }

.budget-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
/* Predel medzi stlpcami - inak prijmy a vydaje opticky splyvaju do jednej plochy. */
.budget-cols > div + div { border-left: 1px solid var(--border); padding-left: 32px; }
/* Polozka vyradena z mesacneho zostatku - suma zostava vidiet, ale prescrtnuta. */
.budget-row--excluded .budget-amount { text-decoration: line-through; color: var(--muted); }
.budget-balance {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--primary-soft); border: 1px solid #D5E3F2;
    border-radius: var(--radius-lg); padding: 14px 18px; margin-top: 20px;
    font-weight: 600; font-size: var(--fs-base);
}
.budget-balance b { font-size: var(--fs-xl); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pos { color: var(--success); }
.neg { color: var(--danger); }

.goals-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.goal-card {
    border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 14px;
    display: flex; gap: 10px; align-items: center; cursor: pointer;
    font-weight: 600; font-size: var(--fs-base); background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: border-color .15s, background .15s, transform .1s;
}
.goal-card:hover { border-color: #CBD5E1; transform: translateY(-1px); }
.goal-card:has(input:checked) {
    border-color: var(--primary); background: var(--primary-soft); color: var(--primary);
}

/* ---- Editor planu (accordion) ---- */

/* Kazda oblast planu ma vlastnu farbu (ikona, pasik otvorenej sekcie) - rychla orientacia. */
.acc { --sec: var(--primary); --sec-soft: #E8F0F9; }

.acc {
    border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 10px;
    background: var(--surface); overflow: hidden; box-shadow: var(--shadow-sm);
    transition: box-shadow .2s, border-color .2s;
}
.acc summary {
    cursor: pointer; padding: 12px 18px 12px 14px; font-size: var(--fs-base);
    display: flex; align-items: center; gap: 14px; list-style: none;
    transition: background .15s;
}
.acc summary:hover { background: #F8FAFD; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ''; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); margin-left: 8px; transform: rotate(45deg); transition: transform .2s; }
.acc[open] { border-color: color-mix(in srgb, var(--sec) 35%, var(--border)); box-shadow: var(--shadow-md); }
.acc[open] summary { background: var(--sec-soft); border-bottom: 1px solid color-mix(in srgb, var(--sec) 20%, var(--border)); }
.acc[open] summary::after { transform: rotate(225deg); margin-top: 4px; }
.acc__icon {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--radius);
    background: var(--sec-soft); color: var(--sec);
    display: inline-flex; align-items: center; justify-content: center;
}
.acc__icon svg { width: 20px; height: 20px; }
.acc[open] .acc__icon { background: var(--sec); color: #fff; }
.acc__head { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.acc__title { font-weight: 700; font-size: var(--fs-md); color: var(--text); }
.acc__summary { font-size: var(--fs-sm); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc__body { padding: 20px 22px 22px; }

/* Stav sekcie: pasik priebehu + slovo, ponuky zvlast (zlaty stitok) */
.acc__status { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; gap: 10px; font-size: var(--fs-xs); font-weight: 600; }
.acc__progress { width: 54px; height: 6px; border-radius: var(--radius-pill); background: #E9EEF5; overflow: hidden; }
.acc__progress i { display: block; height: 100%; border-radius: var(--radius-pill); background: #F59E0B; transition: width .3s; }
.acc__state { min-width: 88px; }
.acc__status--empty .acc__state { color: var(--muted); }
.acc__status--part .acc__state { color: #B45309; }
.acc__status--done .acc__state { color: var(--success); }
.acc__status--done .acc__progress i { background: var(--success); }
.acc__offers { background: var(--primary-soft); color: var(--primary); padding: 3px 9px; border-radius: var(--radius-pill); min-width: 74px; text-align: center; }
.acc__offers--none { visibility: hidden; }

/* Rastuce textove polia (veta = 1 riadok, odsek = 3) */
textarea.js-grow { resize: vertical; overflow: hidden; line-height: 1.45; min-height: 38px; }

/* Ponuky: zapnuta = karta so zlatym okrajom, vypnuta = nenapadny riadok */
.slot { border: 1px solid #C9D9EC; border-radius: var(--radius);
    padding: 12px 16px; margin-top: 12px; background: #FAFCFE; transition: opacity .15s, background .15s; }
.slot__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-weight: 700; font-size: var(--fs-base); }
.slot--off { background: var(--surface); border-color: var(--border); border-style: dashed; padding-top: 9px; padding-bottom: 9px; }
.slot--off .slot__head { margin-bottom: 0; font-weight: 600; color: var(--muted); }
.slot--off .slot__body { display: none; }

/* Editor planu: formular + panel "Z analýzy" */
.plan-editor { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; align-items: start; }
.plan-aside {
    position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; scrollbar-width: thin;
    background: #F1F5FA; border: 1px solid #DCE5F0; border-radius: var(--radius-lg);
    padding: 0 0 12px; font-size: var(--fs-sm);
}
.plan-aside__head {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    background: var(--primary); color: #fff; padding: 12px 16px; position: sticky; top: 0; z-index: 1;
}
.plan-aside__head b { font-size: var(--fs-md); letter-spacing: .01em; }
.plan-aside__head .link-btn { color: #FFE38A; }
.plan-aside__hint { color: var(--muted); margin: 10px 16px 4px; font-size: var(--fs-xs); }
.plan-aside__links { color: var(--muted); font-size: var(--fs-xs); margin: 10px 16px 0; }
.aside-group { background: var(--surface); border-radius: var(--radius); margin: 8px 10px 0; padding: 10px 12px; box-shadow: var(--shadow-sm); }
.aside-group h3 { margin: 0 0 8px; font-size: var(--fs-xs); color: var(--primary); }
.aside-group p { margin: 0; }
/* Cisla: popis vlavo, suma vpravo */
.aside-row { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.aside-row span { color: var(--muted); }
.aside-row b { font-weight: 600; text-align: right; white-space: nowrap; }
.aside-row b.plus { color: var(--success); }
.aside-row b.minus { color: var(--danger); }
.aside-row--total { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 6px; }
/* Texty: nazov nad popisom (dlhe hodnoty sa nelamu po slovach pri pravom okraji) */
.aside-item { padding: 4px 0; }
.aside-item + .aside-item { border-top: 1px dashed #E5EAF1; }
.aside-item b { display: block; font-weight: 600; }
.aside-item span { color: var(--muted); font-size: var(--fs-sm); }
.aside-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.aside-chips span { background: var(--primary-soft); color: var(--primary); border-radius: var(--radius-pill); padding: 2px 9px; font-size: var(--fs-xs); font-weight: 600; }
.aside-group blockquote { margin: 6px 0 0; padding: 7px 10px; background: #F8FAFC; border-left: 3px solid #CBD5E1; border-radius: 0 8px 8px 0; line-height: 1.45; }
.aside-group blockquote span { display: block; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.link-btn { font-family: inherit; background: none; border: 0; padding: 0; color: var(--primary); cursor: pointer; font-size: var(--fs-sm); text-decoration: underline; }

.branch-pick { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.branch-pick select {
    min-width: 190px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius);
    font: inherit; font-size: var(--fs-base); font-weight: 500; background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm);
}

/* Spodna lista: tmava, aby sa nezlievala s kartami sekcii */
.plan-bar {
    position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; gap: 16px;
    background: var(--primary-dark); color: #fff; border-radius: var(--radius-lg);
    padding: 10px 12px 10px 18px; margin-top: 14px; box-shadow: 0 12px 30px -12px rgba(9, 51, 87, .55);
}
.plan-bar__saved { color: rgba(255, 255, 255, .75); font-size: var(--fs-base); }
.plan-bar__saved.autosave-status--saved { color: #9FE3C7; }
.plan-bar__final { display: flex; gap: 8px; align-items: center; font-weight: 600; font-size: var(--fs-base); cursor: pointer; }
.plan-bar__final input { accent-color: var(--accent); }
.plan-bar .btn--secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.plan-bar .btn--secondary:hover { background: rgba(255, 255, 255, .1); }

@media (max-width: 1200px) {
    .plan-editor { grid-template-columns: 1fr; }
    .plan-aside { position: static; max-height: none; order: -1; }
}
@media (max-width: 768px) {
    .acc__state, .acc__progress { display: none; }
    .acc__summary { white-space: normal; }
}

/* ---- Auth layout ---- */

.auth {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: var(--primary-dark);
    padding: 20px;
}
.auth__card {
    background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    padding: 38px 36px; width: 100%; max-width: 396px;
}
.auth__logo { text-align: center; margin-bottom: 22px; }
.auth__logo img { max-width: 190px; border-radius: var(--radius-sm); }

/* ---- Ostatne ---- */

.muted { color: var(--muted); font-size: var(--fs-sm); }
.mono textarea, textarea.mono { font-family: 'Cascadia Code', Consolas, monospace; font-size: var(--fs-sm); line-height: 1.55; }
.inline-form { display: inline; }
code { background: var(--primary-soft); color: var(--primary); padding: 1px 6px; border-radius: var(--radius-sm); font-size: var(--fs-sm); }

/* ---- Responzivita ---- */

@media (max-width: 1024px) {
    .form-grid { grid-template-columns: repeat(2, 1fr); }
    .goals-grid { grid-template-columns: repeat(2, 1fr); }
    .grid--4 { grid-template-columns: repeat(2, 1fr); }
    .grid--5 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .shell { flex-direction: column; }
    .sidebar { width: 100%; height: auto; position: static; }
    .sidebar__nav { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 10px; }
    .sidebar__section { display: none; }
    .sidebar__footer { display: none; }
    .content { padding: 16px; }
    .form-grid, .form-grid--2, .budget-cols, .grid--2, .report__cols { grid-template-columns: 1fr; }
    /* V jednom stlpci uz predel nedava zmysel - oddel sekcie zhora. */
    .budget-cols { gap: 24px; }
    .budget-cols > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 24px; }
    .goals-grid, .grid--4 { grid-template-columns: 1fr; }
    .table { display: block; overflow-x: auto; }
}

/* ---- Majetok klienta v kroku 3: vozidla a nehnutelnosti ---- */

.asset { padding: 14px 0; border-top: 1px solid var(--border); scroll-margin-top: 20px; }
.asset:first-of-type { border-top: 0; padding-top: 4px; }
.asset__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.asset__head b { font-size: var(--fs-md); }
.asset__facts {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 8px 18px; margin: 10px 0 0;
}
.asset__facts dt { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; letter-spacing: .01em; }
.asset__facts dd { margin: 1px 0 0; font-size: var(--fs-base); }
.asset__note { margin: 8px 0 0; font-size: var(--fs-base); color: #475569; }
.asset__edit { margin-top: 10px; }
.asset__edit > summary {
    cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--primary); width: fit-content;
}
.asset__edit[open] > summary { margin-bottom: 12px; }
.asset__edit > form { padding: 14px 16px 4px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); }
.asset__add { margin: 16px 0 0; }
/* Polia nehnutelnosti podla typu - app.js prepina [hidden]; display:flex z .field by ho inak prebil. */
.field[hidden] { display: none; }

/* ---- Majetok v kroku 3: dlazdice s ikonou (auto / dom / budova) ---- */

.asset-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 12px; }
.asset-tile { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
    scroll-margin-top: 20px; transition: border-color .15s, box-shadow .15s; }
.asset-tile:hover { border-color: #CBD5E1; }
/* Rozbalena dlazdica zaberie celu sirku - detaily a formular maju miesto. */
.asset-tile[open] { grid-column: 1 / -1; box-shadow: var(--shadow-sm); }
.asset-tile > summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; list-style: none; }
.asset-tile > summary::-webkit-details-marker { display: none; }
.asset-tile[open] > summary { border-bottom: 1px solid var(--border); }
.asset-tile__icon { flex: none; width: 42px; height: 42px; border-radius: var(--radius); display: grid; place-items: center; }
.asset-tile__icon svg { width: 22px; height: 22px; }
.asset-tile__icon--vehicle { background: #EDF4FB; color: var(--primary); }
.asset-tile__icon--property { background: #FFF7DC; color: #8A6D00; }
.asset-tile__text { display: flex; flex-direction: column; min-width: 0; }
.asset-tile__text b { font-size: var(--fs-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asset-tile__text span { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asset-tile[open] .asset-tile__text b, .asset-tile[open] .asset-tile__text span { white-space: normal; }
.asset-tile__body { padding: 12px 16px 14px; }
.asset-tile__body .asset__facts { margin-top: 0; }
.asset-tile__actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 10px; }
.asset-tile__actions .asset__edit { margin-top: 0; flex: 1; }
/* Pridanie: prerusovana dlazdica */
.asset-tile--add { border-style: dashed; background: transparent; }
.asset-tile--add > summary b { color: var(--primary); }
.asset-tile--add[open] { border-style: solid; background: var(--surface); }

/* Editor planu - vypocitane hodnoty (renta, pokrytie cielu dochodku) */
.retire-calc { padding: 9px 12px; border-radius: var(--radius); background: var(--bg); border: 1px dashed var(--border);
    font-size: var(--fs-base); font-weight: 600; color: var(--text); min-height: 40px; display: flex; align-items: center; }
.retire-calc--ok { color: var(--success, #0E8F6C); }

/* ---- Pristupnost a ovladanie (critique 2026-10-29) ---- */

.icon { width: 16px; height: 16px; flex-shrink: 0; }
.btn--icon { padding: 6px; min-width: 32px; min-height: 32px; }
.btn--danger:focus-visible { outline-color: var(--danger); }
.budget-toggle {
    margin-top: 3px; padding: 2px 8px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface);
    font: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--success); cursor: pointer; white-space: nowrap;
}
.budget-toggle:hover { border-color: #CBD5E1; }
.budget-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.budget-toggle[aria-pressed="false"] { color: var(--muted); border-style: dashed; }

/* Klavesnica: viditelny fokus aj na odkazoch a navigacii (predtym len prehliadacovy default). */
a:focus-visible, summary:focus-visible, .wizard__step:focus-visible {
    outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-xs);
}
.sidebar a:focus-visible, .sidebar button:focus-visible { outline-color: var(--accent); }
::selection { background: rgba(255, 210, 64, .45); color: var(--text); }

.skip-link {
    position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--radius);
    background: var(--accent); color: var(--primary-dark); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }
.content:focus { outline: none; }

.wizard__step[aria-current="step"] { color: var(--primary); }

/* Nevratne akcie (GDPR) - zbalene, aby sa na ne neklikalo omylom */
.danger-zone > summary { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; cursor: pointer; list-style: none; }
.danger-zone > summary::-webkit-details-marker { display: none; }
.danger-zone > summary::after {
    content: ''; margin-left: auto; align-self: center; width: 7px; height: 7px;
    border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s;
}
.danger-zone[open] > summary::after { transform: rotate(45deg); }
.danger-zone > summary h2 { margin: 0; }
.danger-zone[open] { border-color: #FBCFD8; }
.danger-zone__list { margin: 8px 0 4px; padding-left: 20px; font-size: var(--fs-base); line-height: 1.6; }

/* Potvrdzovaci dialog (app.js) - nahrada window.confirm */
.confirm-dialog {
    border: 0; border-radius: var(--radius-lg); padding: 0; width: min(440px, calc(100vw - 32px));
    box-shadow: var(--shadow-lg); color: var(--text);
}
.confirm-dialog::backdrop { background: rgba(7, 31, 56, .55); }
.confirm-dialog form { padding: 22px 22px 18px; }
.confirm-dialog h2 { font-size: var(--fs-md); margin: 0 0 8px; }
.confirm-dialog p { margin: 0 0 14px; line-height: 1.55; }
.confirm-dialog .field { margin-bottom: 14px; }
.confirm-dialog .form-actions { justify-content: flex-end; margin: 0; flex-wrap: wrap; }
.confirm-dialog .btn--danger { background: var(--danger); color: #fff; }
.confirm-dialog .btn--danger:hover { background: #9F1239; }
.confirm-dialog .btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Prepinac mobilnej navigacie - na desktope skryty */
.sidebar__toggle { display: none; }

/* Gridy formularov: polia sa nesmu roztiahnut cez okraj karty (tablet). */
.form-grid > *, .budget-cols > *, .grid > * { min-width: 0; }
.field input, .field select, .field textarea { max-width: 100%; }

@media (max-width: 768px) {

    /* Dotykove plochy min. 44 px */
    .btn { min-height: 44px; }
    .btn--sm, .btn--icon { min-height: 40px; min-width: 40px; }
    .field input, .field select { min-height: 44px; font-size: 16px; }   /* 16px = iOS nezoomuje */
    .field textarea { font-size: 16px; }

    /* Zoznamy rozpoctu a zmlUv: suma pod nazvom, akcie v jednom riadku - ziadny posun do strany */
    .budget-cols .table, .budget-cols .table tbody, .budget-cols .table tr, .budget-cols .table td { display: block; }
    .budget-cols .table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; padding: 10px 0; border-bottom: 1px solid var(--border); }
    .budget-cols .table td { padding: 0; border: 0; width: auto !important; }
    .budget-cols .table td:first-child { grid-column: 1 / -1; }
    .budget-cols .table td.num { text-align: left; }
    .budget-toggle { min-height: 36px; padding: 4px 12px; }
    .budget-balance { flex-direction: column; align-items: flex-start; gap: 4px; }
    .topbar { padding: 10px 16px; }
}

/* Tablet aj mobil: bocny panel sa zbali do hornej listy s Menu - obsah dostane celu sirku. */
@media (max-width: 1024px) {
    .shell { flex-direction: column; }
    .sidebar { width: 100%; height: auto; position: static; }
    .sidebar__footer { display: none; }
    .sidebar { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
    .sidebar__logo { padding: 10px 14px; }
    .sidebar__logo img { max-height: 40px; width: auto; }
    .sidebar__toggle {
        display: inline-flex; align-items: center; gap: 8px; margin-right: 12px; min-height: 44px; padding: 0 14px;
        background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .25);
        border-radius: var(--radius); font: inherit; font-weight: 600; cursor: pointer;
    }
    .sidebar__toggle .icon { width: 20px; height: 20px; }
    .sidebar__nav { display: none; flex-basis: 100%; padding: 4px 10px 12px; }
    .sidebar--open .sidebar__nav { display: block; }
    .sidebar--open .sidebar__section { display: block; }
    .sidebar__link { min-height: 44px; }
    .table { display: block; overflow-x: auto; }
}
.budget-balance--top { margin: 0 0 22px; }
.subpanel--add > summary { cursor: pointer; list-style: none; width: fit-content; color: var(--primary); margin-bottom: 0; }
.subpanel--add > summary::-webkit-details-marker { display: none; }
.subpanel--add[open] > summary { margin-bottom: 12px; }

/* Krok 2: akcie riadku (upravit, zmazat) a formular upravy priamo pod polozkou */
.budget-actions { width: 1%; white-space: nowrap; }
.budget-actions .inline-form { margin-left: 2px; }
.btn--icon[aria-current="true"] { border-color: var(--primary); color: var(--primary); }
.budget-row--editing > td { background: var(--primary-soft); }
.budget-edit-row > td { padding-top: 0; }
.budget-edit-row .subpanel { margin-top: 6px; background: var(--surface); border-color: var(--primary); }
@media (max-width: 768px) {
    .budget-cols .table tr.budget-edit-row { display: block; }
    .budget-actions { display: flex !important; gap: 4px; }
}

/* Lista planu: stav "Finálny" ako text, zmena stavu len tlacidlom */
.plan-bar__state { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--fs-base); color: #9FE3C7; }
.plan-bar .btn--accent { box-shadow: none; }

/* Sprievodca analyzy: cislo / fajka a stav kroku (aj pre citacky - text, nie len farba) */
.wizard__step { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.wizard__mark {
    display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-pill); flex-shrink: 0;
    border: 1.5px solid var(--border); font-size: var(--fs-xs); font-weight: 700; color: var(--muted); background: var(--surface);
}
.wizard__mark .icon { width: 13px; height: 13px; }
.wizard__step--done .wizard__mark { background: var(--success); border-color: var(--success); color: #fff; }
.wizard__step--active .wizard__mark { border-color: var(--primary); color: var(--primary); }
.wizard__step--done.wizard__step--active .wizard__mark { background: var(--primary); border-color: var(--primary); color: #fff; }
.wizard__state { flex-basis: 100%; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); margin-top: -4px; }
.wizard__step--done .wizard__state { color: var(--success); }

/* Sumy: cislice rovnakej sirky - stlpce suctov sa daju porovnavat pohladom */
.num, .budget-amount, .budget-balance b, .summary__value { font-variant-numeric: tabular-nums; }

/* Krok 2: skupiny vydavkov s medzisuctom */
.budget-group > th {
    padding: 14px 0 6px; border-bottom: 1px solid var(--border); text-align: left;
    font-size: var(--fs-xs); font-weight: 700; color: var(--primary); letter-spacing: .02em;
}
.budget-group > th { display: flex; justify-content: space-between; gap: 12px; }
.budget-group__sum { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 768px) {
    .budget-cols .table tr.budget-group { display: block; padding: 0; border: 0; }
}

/* Detail klienta: suhrn domacnosti (zostatok, analyza, plan, najblizsia uloha) */
.summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.summary__item {
    display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 14px 16px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); text-decoration: none; color: var(--text);
    transition: border-color .15s, box-shadow .15s;
}
.summary__item:hover { border-color: #CBD5E1; box-shadow: var(--shadow-md); }
.summary__label { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.summary__value { font-size: var(--fs-md); font-weight: 700; letter-spacing: -.01em; }
.summary__value--text { font-size: var(--fs-base); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summary__value--empty { color: var(--muted); font-weight: 600; }
.summary__hint { font-size: var(--fs-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summary__item:hover .summary__hint { color: var(--primary); }
#plany, #servis { scroll-margin-top: 80px; }
@media (max-width: 1024px) { .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .summary { grid-template-columns: 1fr; } }

/* Editor planu: panel analyzy zbaleny nad editorom (do 1200 px), lista neprekryva posledny obsah */
.plan-aside__toggle { display: none; }
#plan-form { padding-bottom: 8px; }
.plan-delete { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.plan-delete .muted { margin: 0; }
@media (max-width: 1200px) {
    .plan-aside__toggle { display: inline-flex; }
    .plan-aside:not(.plan-aside--open) > :not(.plan-aside__head) { display: none; }
    .plan-aside:not(.plan-aside--open) .js-aside-all { display: none; }
}
/* Lepiaca lista planu nesmie zakryt pole, na ktore sa presunie fokus (WCAG 2.2 focus-not-obscured) */
html:has(.plan-bar) { scroll-padding-bottom: 96px; }
/* "+ Pridať príjem" ako akcia, nie verzalkovy nadpis sekcie */
.subpanel--add > summary { text-transform: none; letter-spacing: 0; font-size: var(--fs-base); font-weight: 700; }
.plan-row__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
@media (max-width: 600px) {
    .plan-bar { gap: 8px; padding: 8px 8px 8px 12px; bottom: 8px; }
    .plan-bar__saved { font-size: var(--fs-xs); line-height: 1.3; }
    .plan-bar .btn { white-space: nowrap; padding-left: 12px; padding-right: 12px; }
}

/* Prepinac ulohy: splnena = zelena fajka */
.task-toggle[aria-pressed="true"] { color: var(--success); }

/* Tablet (dotykove zariadenia do 1024 px): ovladacie prvky min. 40-44 px */
@media (max-width: 1024px) {
    .btn { min-height: 44px; }
    .btn--sm, .btn--icon { min-height: 40px; min-width: 40px; }
    .budget-toggle { min-height: 32px; padding: 4px 12px; }
    .field input, .field select { min-height: 44px; }
}
.plan-aside__toggle { align-items: center; min-height: 36px; padding: 0 8px; margin: -8px -8px; }

/* Filtre zoznamov (audit log) - polia s popiskom v jednom riadku, na mobile pod sebou */
.filters {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 12px;
    align-items: end; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.filters .field { margin: 0; }
.filters__actions { display: flex; gap: 8px; flex-wrap: nowrap; grid-column: span 2; }
@media (max-width: 600px) { .filters__actions { grid-column: auto; flex-wrap: wrap; } }

/* Audit log: bezpecnostne udalosti a pristupy k osobnym udajom su na prvy pohlad odlisene */
.audit-table__time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.audit-table__ip { font-variant-numeric: tabular-nums; white-space: nowrap; }
.audit-row--alert > td { background: #FFF5F6; }
/* osobne udaje: len stitok, bez podfarbenia (pri filtri by bol podfarbeny takmer kazdy riadok) */
.audit-flag {
    display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: var(--radius-xs);
    font-size: var(--fs-xs); font-weight: 700; vertical-align: 1px;
}
.audit-flag--alert { background: #FFE4E8; color: #9F1239; }
.audit-flag--sensitive { background: #FEF3C7; color: #7A4B00; }

/* Dashboard: pruh terminov a provizie - jeden pas s delenim, nie samostatne KPI dlazdice */
.pulse {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); margin-bottom: 22px; overflow: hidden;
}
.pulse__item {
    display: flex; flex-direction: column; gap: 2px; padding: 16px 20px; min-width: 0;
    color: var(--text); text-decoration: none; border-left: 1px solid var(--border);
}
.pulse__item:first-child { border-left: 0; }
a.pulse__item:hover { background: var(--bg); }
.pulse__value { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pulse__label { font-size: var(--fs-sm); color: var(--muted); }
.pulse__item--alert .pulse__value, .pulse__item--alert .pulse__label { color: var(--danger); }
.pulse__item--alert { background: #FFF5F6; }
.pulse__item--money .pulse__value { color: var(--primary); }
@media (max-width: 768px) {
    .pulse { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pulse__item { padding: 12px 14px; }
    .pulse__item--money { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--border); }
    .pulse__value { font-size: var(--fs-lg); }
}
.pulse--5 { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.3fr); }
@media (max-width: 1024px) { .pulse--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pulse--5 .pulse__item { border-top: 1px solid var(--border); } }

/* Zoraditelne hlavicky tabuliek (app.js) */
.sort-btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font: inherit; color: inherit; }
.sort-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-xs); }
th[aria-sort] .sort-btn { color: var(--primary); }
th[aria-sort] .sort-btn::after {
    content: ''; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
}
th[aria-sort="ascending"] .sort-btn::after { transform: rotate(180deg); }
.perf-table td { vertical-align: top; }
.perf-table tfoot th, .perf-table tfoot td { border-top: 2px solid var(--border); padding-top: 12px; }
.table-wrap { overflow-x: auto; }
.table-wrap > .table { min-width: 100%; }
.perf-table th { vertical-align: bottom; line-height: 1.3; }
.perf-table .muted { font-size: var(--fs-xs); white-space: nowrap; }
.perf-table tfoot th { text-transform: none; letter-spacing: 0; font-size: inherit; color: var(--text); text-align: left; }

/* Sekcia planu: progress len kym nie je vyplnena (pri 100 % staci text "Vyplnené") */
.acc__status--done .acc__progress { display: none; }

/* Typove oznacenie (zmluva, OP, typ kontaktu, rola) - tichy text; pilulka s bodkou je len pre stav */
.tag { display: inline-block; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); white-space: nowrap; }
.tag--strong, .tag--klient { color: var(--primary); }@media (max-width: 1024px) { .sort-btn { min-height: 36px; } }