/* ══════════════════════════════════════════════════════════
   DOMALIZA — DAYLIGHT THEME
   Zamenjuje: wwwroot/app.css

   FONTOVI — self-hostovani (Inter + JetBrains Mono), @font-face u wwwroot/fonts.css,
   woff2 subseti (latin + latin-ext) u wwwroot/fonts/. Linkovano iz App.razor.
   ══════════════════════════════════════════════════════════ */

:root {
    /* ── Žurnal editorial paleta — SVETLA (krem novinski papir) ───────────────
       Semantički tokeni; ispod se legacy imena (--primary-blue itd.) mapiraju
       na njih da postojeće komponente odmah preuzmu novi izgled. */
    --z-bg: #f6f3ec;          /* pozadina strane (topli papir) */
    --z-card: #fffdf8;        /* kartice */
    --z-hair: #e4dccb;        /* osnovna hairline linija */
    --z-hair2: #efe9da;       /* mekša unutrašnja linija / suptilna traka */
    --z-dot: #d9d0bc;         /* tačkaste/leader linije */
    --z-dbl: #d8cfba;         /* duple novinske linije (header/footer) */
    --z-ink: #232a38;         /* primarni tekst */
    --z-ink2: #5b5647;        /* sekundarni tekst */
    --z-mut: #98917d;         /* prigušeni labeli / caption */
    --z-navy: #1e3a5f;        /* brend / naglašeni tekst / dugmad */
    --z-accent: #b26205;      /* ćilibar — akcenat, brojevi sekcija, aktivno, hover */
    --z-pos: #177a4c;
    --z-neg: #b3261e;
    /* grafikoni / bar skale (koristi Chart.js + inline SVG u kasnijim fazama) */
    --line: #1e3a5f; --line2: #8a3033; --line3: #5b5a8f;
    --bar-lo: #cdc4ad; --bar-md: #b3aa90; --bar-hi: #7d89a3; --bar-x: #46608a; --bar-top: #1e3a5f;
    --band: #1e3a5f; --band-ink: #f6f3ec; --band-mut: #9fb2d8;
    --tip-bg: #232a38; --tip-ink: #f6f3ec;

    /* ── Legacy aliasi → Žurnal (moraju postojati i u [data-theme="dark"] bloku,
       jer se var() supstituiše po elementu na kom je tema postavljena) ──────── */
    --primary-blue: var(--z-accent);
    --primary-blue-dark: #8f4e04;
    --primary-blue-light: #cf7a1e;
    --accent-blue: var(--z-navy);
    --background-light: var(--z-bg);
    --background-white: var(--z-card);
    --background-surface2: var(--z-hair2);
    --text-primary: var(--z-ink);
    --text-secondary: var(--z-ink2);
    --text-muted: var(--z-mut);
    --label-accent: var(--z-mut); /* naslovi KPI kartica + contact tekst */
    --border-color: var(--z-hair);
    --border-highlight: var(--z-dot);
    --shadow-sm: 0 1px 0 rgba(35, 42, 56, 0.03);
    --shadow-md: 0 1px 2px rgba(35, 42, 56, 0.05);
    --shadow-lg: 0 6px 20px rgba(35, 42, 56, 0.12);
    --positive: var(--z-pos);
    --positive-dim: rgba(23, 122, 76, 0.10);
    --negative: var(--z-neg);
    --negative-dim: rgba(179, 38, 30, 0.09);
    --neutral: var(--z-mut);
    --accent-dim: rgba(178, 98, 5, 0.10);
    --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
    --font-sans: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Courier New', monospace;
    --radius: 2px;
}

/* ── Dark mode override (opcionalno — koristi Terminal temu) ─────────────── */
[data-theme="dark"] {
    /* ── Žurnal editorial paleta — TAMNA (duboko ponoćno plava) ── */
    --z-bg: #0a0f1c;
    --z-card: #101827;
    --z-hair: #1d2941;
    --z-hair2: #182338;
    --z-dot: #253352;
    --z-dbl: #22304e;
    --z-ink: #ece7db;
    --z-ink2: #aeb8ce;
    --z-mut: #5d719a;
    --z-navy: #8ab4f8;
    --z-accent: #f5a623;
    --z-pos: #35d49a;
    --z-neg: #ff6b6b;
    --line: #f5a623; --line2: #ff8f8f; --line3: #9d8cff;
    --bar-lo: #22304e; --bar-md: #2d3f66; --bar-hi: #46608a; --bar-x: #6f8fc4; --bar-top: #f5a623;
    --band: #16233c; --band-ink: #ece7db; --band-mut: #8fa3c8;
    --tip-bg: #f5a623; --tip-ink: #0a0f1c;

    /* legacy aliasi (dark) — ponovo definisani da se var() reši na tamne vrednosti */
    --primary-blue: var(--z-accent);
    --primary-blue-dark: #d4891f;
    --primary-blue-light: #f7c06b;
    --accent-blue: var(--z-navy);
    --background-light: var(--z-bg);
    --background-white: var(--z-card);
    --background-surface2: var(--z-hair2);
    --text-primary: var(--z-ink);
    --text-secondary: var(--z-ink2);
    --text-muted: var(--z-mut);
    --label-accent: var(--z-mut);
    --border-color: var(--z-hair);
    --border-highlight: var(--z-dot);
    --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.7);
    --positive: var(--z-pos);
    --positive-dim: rgba(53, 212, 154, 0.12);
    --negative: var(--z-neg);
    --negative-dim: rgba(255, 107, 107, 0.12);
    --neutral: var(--z-mut);
    --accent-dim: rgba(245, 166, 35, 0.13);
}

/* ── Reset — preuzima ulogu Bootstrap Reboot-a nakon uklanjanja Bootstrap CSS-a.
   box-sizing je presudan: ceo layout se oslanja na border-box (Bootstrap ga je
   ranije postavljao globalno). Naslovi, paragrafi, body margina i osnovni
   line-height zadržavaju Reboot podrazumevane vrednosti da render ostane isti. */
*, *::before, *::after {
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

html, body {
    margin: 0;
    line-height: 1.5;
    font-family: var(--font-sans);
    background-color: var(--background-light);
    color: var(--text-primary);
    transition: background-color 0.2s ease, color 0.2s ease;
    overflow-x: hidden; /* prevent horizontal scroll on mobile when popovers/charts overflow temporarily */
}

/* Ensure media stays inside containers — important when chart canvases
   are larger than their wrapper on narrow viewports. */
img, canvas, svg {
    max-width: 100%;
}

::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--border-highlight);
    }

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--positive);
}

.invalid {
    outline: 1px solid var(--negative);
}

.validation-message {
    color: var(--negative);
}

input:focus, select:focus, textarea:focus {
    border-color: var(--primary-blue) !important;
    box-shadow: 0 0 0 2px var(--accent-dim) !important;
    outline: none;
}

.blazor-error-boundary {
    background: #fef2f2;
    border: 1px solid var(--negative);
    padding: 1rem;
    color: var(--negative);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 14px;
}

    .blazor-error-boundary::after {
        content: "Greška — An error has occurred."
    }

.text-muted {
    color: var(--text-muted) !important;
}

.text-success {
    color: var(--positive) !important;
}

.text-danger {
    color: var(--negative) !important;
}

.text-accent {
    color: var(--primary-blue) !important;
}

/* Pristupačno skrivanje (zamenjuje Bootstrap .visually-hidden).
   Koristi se za SEO/screen-reader <h1> na dashboardu. */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Žurnal: brojčane vrednosti u serifu (Newsreader), sa tabelarnim ciframa
   da kolone u tabelama i dalje poravnavaju decimalne tačke. */
.mono, .kpi-value, .listing-price, .price-cell,
.price-cell-green, .size-cell, .rank-badge {
    font-family: var(--font-serif) !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ══════════════════════════════════════════════════════════
   GLOBAL TYPOGRAPHY — terminal theme, single source of truth
   Section headers se koriste u više komponenti (Pages, Analytics/*).
   Definisano ovde da bi font, veličina i boja bili identični
   na svim mestima (KPI sekcija, trend, distribucije, rankingi…).
   ══════════════════════════════════════════════════════════ */

.section-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 7px;
    /* Žurnal: novinska linija ispod naslova sekcije. */
    border-bottom: 1px solid var(--z-dbl);
}

    .section-header h2,
    .section-header h3 {
        font-size: 11px;
        font-weight: 700;
        font-family: var(--font-sans);
        color: var(--z-accent);
        letter-spacing: 0.13em;
        text-transform: uppercase;
        margin: 0;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        line-height: 1;
    }

        /* Žurnal: ikone u naslovima sekcija zamenjuje redni broj (dole). */
        .section-header h2 i,
        .section-header h3 i {
            display: none;
        }

    /* Žurnal: redni broj sekcije (01 ·, 02 · …) u ćilibaru, na PRIMARNOM headeru
       svake sekcije (prvi .section-header). Brojač se resetuje po panelu
       (.main-content u single / .comparison-column u uporednom) da A i B budu
       numerisani nezavisno. Pod-headeri (npr. „Najpovoljnije" h3) se ne broje. */
    .analytics-section > .section-header:first-child h2::before {
        content: counter(zsec, decimal-leading-zero) "\00a0·\00a0";
        color: var(--z-accent);
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }

/* Tamna tema: naslovi SEKCIJA rangiranja ostaju u amber (--primary-blue), kao
   podrazumevano — bez override-a na svetloplavu. */

    .section-header .section-subtitle {
        font-size: 11px;
        font-family: var(--font-sans);
        color: var(--text-secondary);
        margin: 0 0 0 auto; /* Žurnal: podnaslov na desnom kraju reda */
        letter-spacing: 0.01em;
    }

    .section-header .section-number {
        font-size: 11px;
        font-family: var(--font-mono);
        font-weight: 700;
        color: var(--text-muted);
    }

/* ── Vizuelna segmentacija analitičkih grupa ───────────────────────────────
   Žurnal: čiste sekcije bez leve akcent-trake i bez tonirane trake iza naslova
   — segmentaciju nose numerisani/serifni section header + novinska linija.
   Globalno: radi i u single i u comparison modu, i kroz child komponente. */
/* Žurnal: brojač sekcija se resetuje po panelu — single (.main-content) i svaka
   uporedna kolona (.comparison-column) numerišu od 01 nezavisno. */
.main-content,
.comparison-column {
    counter-reset: zsec;
}

.analytics-section {
    counter-increment: zsec;
    margin-top: 26px;
}

    /* Sekcija sa overview graficima ("Struktura ponude") postaje CSS container,
       da @container breakpoint-ovi u Analytics.razor.css reaguju na širinu panela
       (comparison kolone), a ne viewporta. :has() pogađa samo tu sekciju. */
    .analytics-section:has(.overview-charts-row) {
        container-type: inline-size;
    }

    /* Prva sekcija u koloni — nalepljena uz traku iznad, bez gornje margine. */
    .analytics-section--flush {
        margin-top: 0;
    }

    /* Žurnal: naslov sekcije bez tonirane pozadine — samo novinska linija ispod. */
    .analytics-section .section-header {
        margin: 0 0 12px 0;
    }

/* Jedinstveni naslov grafika. <h3> radi SEO (sekcije iznad su <h2>).
   Zamenjuje pojedinačne *-label klase u chart komponentama. */
.chart-title {
    /* Žurnal: serifni naslov kartice (Newsreader), rečenični oblik — ne uppercase. */
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-primary);
    line-height: 1.2;
    margin: 0;
}

/* Mobilni: malo manji serifni naslov da se duži naslovi (npr. „Novogradnja vs
   Starogradnja — €/m²") ne prelamaju u previše redova u uskoj kartici. */
@media (max-width: 640px) {
    .chart-title {
        font-size: 14px;
    }
}

/* ══════════════════════════════════════════════════════════
   CONTENT PAGES (O nama, Kontakt, Privatnost, Uslovi)
   Centrirana max-width kolona, Inter za body, mono akcent.
   ══════════════════════════════════════════════════════════ */

.content-page {
    width: 100%;
    max-width: 760px;
    background: var(--background-white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 32px 36px;
    font-family: var(--font-sans);
    color: var(--text-primary);
    line-height: 1.65;
}

/* Žurnal: sadržajne strane su editorial — serifni naslovi, ćilibar eyebrow,
   čitljiv ink2 za telo (posle remapa --label-accent→mut telo bi bilo presvetlo). */
.content-page .content-eyebrow {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    color: var(--z-accent);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 10px;
}

.content-page h1 {
    font-family: var(--font-serif);
    font-size: 32px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    margin: 0 0 10px;
    line-height: 1.15;
}

.content-page .content-lead {
    font-size: 16px;
    color: var(--text-secondary);
    margin: 0 0 24px;
}

.content-page h2 {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0;
    margin: 30px 0 12px;
    line-height: 1.25;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--z-dbl);
}

/* Theme toggle na statičkim (SSR) stranama: ikona/labela prate body[data-theme]
   bez Blazor stanja. U svetloj temi dugme nudi prelaz na tamnu (mesec, „Tamna
   tema"); u tamnoj nudi prelaz na svetlu (sunce, „Svetla tema"). Globalno (ne
   scoped) jer zavisi od body[data-theme]. */
[data-theme="light"] .theme-when-dark { display: none; }
[data-theme="dark"] .theme-when-light { display: none; }

.content-page h3 {
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 20px 0 6px;
    line-height: 1.3;
}

.content-page p {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0 0 12px;
}

.content-page ul,
.content-page ol {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0 0 14px;
    padding-left: 20px;
}

    .content-page li {
        margin-bottom: 4px;
    }

.content-page a {
    color: var(--primary-blue);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
}

    .content-page a:hover {
        border-bottom-color: var(--primary-blue);
    }

/* Breadcrumbs na sadržajnim stranama (LocationLanding, PriceHub). Globalno jer
   ih dele dve strane; prati obe teme preko varijabli. */
.content-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    margin: 0 0 14px;
    color: var(--text-muted);
}

.content-page .content-breadcrumbs a {
    color: var(--text-secondary);
    font-weight: 500;
}

.content-breadcrumbs .sep {
    color: var(--text-muted);
}

.content-breadcrumbs .current {
    color: var(--text-primary);
    font-weight: 600;
}

.content-page code,
.content-page .mono {
    font-family: var(--font-mono);
    font-size: 0.92em;
    color: var(--text-primary);
    background: var(--background-surface2);
    padding: 1px 6px;
    border-radius: var(--radius);
}

.content-page .updated-on {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.3px;
}

/* ── Mesečni izveštaji (/izvestaji, /izvestaji/{slug}) ────────────────────
   Globalno (kao .content-page) jer dele ga indeks + strana izveštaja. Sve boje
   iz varijabli → obe teme. Nije comparison mode (samo dashboard je). */
.mr-kpis {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 4px 0 8px;
}

.mr-kpi {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 16px;
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}

.mr-kpi-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
}

.mr-kpi-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.mr-kpi-value .mr-unit {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    font-family: var(--font-sans, inherit);
}

.mr-delta {
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-mono);
    white-space: nowrap;
}

    .mr-delta.up { color: var(--positive); }
    .mr-delta.down { color: var(--negative); }
    .mr-delta.flat { color: var(--text-muted); }

/* Dve kolone (pomerači, rang) — na uzak ekran se slažu. */
.mr-cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 28px;
    margin: 4px 0 8px;
}

.mr-note {
    font-size: 13px !important;
    color: var(--text-muted) !important;
    margin: 0 0 10px !important;
}

/* „Šta za 100.000 €" — kartice grad → m². Grid se sam prelama. */
.mr-afford {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    margin: 4px 0 10px;
}

.content-page .mr-afford-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-weight: 600;
    text-align: center;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

    .content-page .mr-afford-item:hover {
        border-color: var(--primary-blue);
        background: var(--background-white);
        border-bottom-color: var(--primary-blue);
    }

.mr-afford-m2 {
    font-family: var(--font-mono);
    font-size: 26px;
    font-weight: 700;
    color: var(--primary-blue);
    line-height: 1.1;
}

.mr-afford-unit {
    font-size: 14px;
    color: var(--text-muted);
}

.mr-afford-city {
    font-size: 13px;
    color: var(--text-secondary);
}

.content-page .mr-movers,
.content-page .mr-rank {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.content-page .mr-rank {
    counter-reset: mr;
}

.content-page .mr-movers li,
.content-page .mr-rank li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
}

.content-page .mr-rank li::before {
    counter-increment: mr;
    content: counter(mr) ".";
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 12px;
    min-width: 20px;
}

.content-page .mr-movers li a,
.content-page .mr-rank li a {
    flex: 1;
}

.mr-mover-val {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Rentabilnost — tabela. */
.mr-table {
    width: 100%;
    border-collapse: collapse;
    margin: 4px 0 10px;
    font-size: 14px;
}

    .mr-table th,
    .mr-table td {
        text-align: right;
        padding: 8px 10px;
        border-bottom: 1px solid var(--border-color);
        font-family: var(--font-mono);
    }

    .mr-table th {
        font-family: var(--font-sans, inherit);
        font-size: 12px;
        color: var(--text-secondary);
        font-weight: 600;
    }

    .mr-table th:first-child,
    .mr-table td:first-child {
        text-align: left;
    }

    .mr-table .mr-yield {
        font-weight: 700;
        color: var(--primary-blue);
    }

/* CTA-i + navigacija između izveštaja. */
.mr-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 8px 0 4px !important;
}

.content-page .mr-cta {
    display: inline-block;
    padding: 9px 16px;
    background: var(--primary-blue);
    color: #fff;
    border: 0;
    border-radius: var(--radius);
    font-weight: 600;
}

    .content-page .mr-cta:hover {
        background: var(--primary-blue-dark);
        border-bottom-color: transparent;
    }

.content-page .mr-cta--ghost {
    background: transparent;
    color: var(--primary-blue);
    border: 1px solid var(--border-color);
}

    .content-page .mr-cta--ghost:hover {
        background: var(--background-light);
    }

/* ── /podaci (OpenData) ──────────────────────────────────────────────────
   Klase žive ovde, a ne u scoped .razor.css-u, jer se naslanjaju na .content-page
   .mr-* obrazac koji je već globalan. Boje idu isključivo kroz varijable, pa
   svetla i tamna tema rade bez zasebnog override-a. */
.content-page .od-downloads {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Gotova rečenica za citiranje — vizuelno odvojena da se prepozna kao nešto
   što se kopira, a ne kao običan pasus. */
.content-page .od-cite {
    border-left: 3px solid var(--primary-blue);
    background: var(--background-light);
    padding: 10px 14px;
    border-radius: var(--radius);
    color: var(--text-primary);
}

.mr-prev {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: 14px;
}

/* Indeks izveštaja — lista meseci kao kartice. */
.content-page .mr-index {
    list-style: none;
    padding: 0;
    margin: 4px 0 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.content-page .mr-index li {
    margin: 0;
}

.content-page .mr-index a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-weight: 600;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

    .content-page .mr-index a:hover {
        border-color: var(--primary-blue);
        background: var(--background-white);
    }

.mr-index-title {
    color: var(--text-primary);
    font-size: 16px;
}

.mr-index-sub {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
}

@media (max-width: 640px) {
    .mr-kpis,
    .mr-cols {
        grid-template-columns: 1fr;
    }

    .content-page {
        padding: 24px 20px;
    }

    .content-page h1 { font-size: 24px; }
    .content-page h2 { font-size: 15px; }
    .content-page .content-eyebrow { font-size: 15px; }
}

/* ══════════════════════════════════════════════════════════
   TOPBAR ACTION BUTTONS — shared by the dashboard and content
   topbars. They are slotted into <SiteHeader>, so they carry the
   parent page's CSS scope and must be styled globally here.
   Outline chip when idle; filled primary CTA when .active.
   ══════════════════════════════════════════════════════════ */
.btn-sidebar-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-sans);
    text-transform: uppercase;
    line-height: 1.4;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid var(--border-color);
    background: var(--background-light);
    color: var(--text-secondary);
    white-space: nowrap;
    text-decoration: none;
}

.btn-sidebar-action:hover {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
    background: var(--accent-dim);
}

.btn-sidebar-action.active {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: #fff;
    font-weight: 700;
}

.btn-sidebar-action i {
    font-size: 15px;
    flex-shrink: 0;
}

/* Tamna tema: neaktivna dugmad u --label-accent (kao KPI naslovi); aktivno = crn tekst. */
[data-theme="dark"] .btn-sidebar-action:not(.active) {
    color: var(--label-accent);
}

[data-theme="dark"] .btn-sidebar-action.active {
    color: #000;
}

/* Topbar sa punim tekstom dugmadi traži ~890px (brend + 3 nav linka + uporedni
   + tema) — na užem ekranu sadržaj se prelivao van headera (brend sečen, dugme
   teme van ekrana, a fokus je mogao horizontalno da „otklizi" ceo shell).
   Zato ispod 920px sva dugmad postaju kompaktne ikone bez tekstualnih labela. */
@media (max-width: 920px) {
    .btn-sidebar-action {
        padding: 7px 11px;
        min-width: 40px;
        justify-content: center;
    }

    .btn-sidebar-action .btn-label {
        display: none;
    }

    .btn-sidebar-action i {
        font-size: 18px;
    }
}

@media (max-width: 640px) {
    /* Sekundarni navigacioni linkovi (Cene, Izdavanje) su redundantni sa
       footerom i logo-brendom → sakrij ih na mobilnom da topbar ostane čist.
       Ostaju samo funkcionalna dugmad: tema i uporedni pregled. */
    .btn-sidebar-action--secondary {
        display: none;
    }
}