/* ===================================================================
   Kućni budžet — paleta, sidebar navigacija i opšti raspored.
   Bootstrap 5.3 komponente (dugmad, bedževi, kartice) po pravilu ne
   nasleđuju --bs-primary/--bs-success/--bs-warning/--bs-danger sa
   :root nivoa (Sass mixin-i im ugrađuju sopstvene, fiksne vrednosti u
   generisanom CSS-u), pa se ovde eksplicitno predefinišu klase koje
   se stvarno koriste u template-ima, umesto da se pretpostavi da je
   dovoljno predefinisati samo koren-promenljive.
   =================================================================== */

:root {
    /* Osnovna paleta */
    --budz-bg: #f6f3ec;
    --budz-surface: #ffffff;
    --budz-surface-border: #e7e0d2;
    --budz-ink: #23302b;
    --budz-muted: #6b7268;

    /* Sidebar */
    --budz-sidebar-bg: #1e2e29;
    --budz-sidebar-bg-hover: #29403a;
    --budz-sidebar-bg-active: #2f4941;
    --budz-sidebar-text: #c9d2cb;
    --budz-sidebar-text-muted: #8fa096;
    --budz-sidebar-border: #2c4038;

    /* Mesing akcenat — markeri, linije, ikonice (ne tekst na beloj pozadini) */
    --budz-accent: #b8863b;
    --budz-accent-soft: rgba(184, 134, 59, 0.16);

    /* Tamnija nijansa mesinga za dugmad/linkove sa dovoljnim kontrastom */
    --budz-accent-strong: #6b4a1e;
    --budz-accent-strong-hover: #5a3d18;
    --budz-accent-strong-active: #4d3414;
    --budz-accent-strong-rgb: 107, 74, 30;

    /* Statusi: plaćeno / neplaćeno / kasni — dosledno svuda u aplikaciji */
    --budz-status-placeno-bg: #3c7a5a;
    --budz-status-placeno-text: #2e6449;
    --budz-status-neplaceno-bg: #56707d;
    --budz-status-neplaceno-text: #3f5560;
    --budz-status-kasni-bg: #b3432b;
    --budz-status-kasni-text: #96371f;

    --budz-sidebar-width: 264px;
    --budz-sidebar-width-collapsed: 72px;
    --budz-topbar-height: 56px;
}

/* ------------------------------------------------------------------
   Osnova
   ------------------------------------------------------------------ */

body {
    background-color: var(--budz-bg);
    color: var(--budz-ink);
}

.budz-skip-link {
    position: absolute;
    top: -3rem;
    left: 0.5rem;
    z-index: 2000;
    padding: 0.5rem 1rem;
    background-color: var(--budz-accent-strong);
    color: #fff;
    border-radius: 0.375rem;
    text-decoration: none;
}

.budz-skip-link:focus {
    top: 0.5rem;
}

.budz-main a:not(.btn):not(.budz-nav-link):not(.dropdown-item):not(.badge) {
    color: var(--budz-accent-strong);
}

.budz-main a:not(.btn):not(.budz-nav-link):not(.dropdown-item):not(.badge):hover {
    color: var(--budz-accent-strong-hover);
}

/* ------------------------------------------------------------------
   Dugmad — eksplicitno predefinisano jer .btn-primary u Bootstrap 5.3
   koristi sopstvene, fiksne --bs-btn-* vrednosti (ne koren promenljive).
   ------------------------------------------------------------------ */

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--budz-accent-strong);
    --bs-btn-border-color: var(--budz-accent-strong);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--budz-accent-strong-hover);
    --bs-btn-hover-border-color: var(--budz-accent-strong-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--budz-accent-strong-active);
    --bs-btn-active-border-color: var(--budz-accent-strong-active);
    --bs-btn-disabled-bg: var(--budz-accent-strong);
    --bs-btn-disabled-border-color: var(--budz-accent-strong);
    --bs-btn-focus-shadow-rgb: var(--budz-accent-strong-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--budz-accent-strong);
    --bs-btn-border-color: var(--budz-accent-strong);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--budz-accent-strong);
    --bs-btn-hover-border-color: var(--budz-accent-strong);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--budz-accent-strong-active);
    --bs-btn-active-border-color: var(--budz-accent-strong-active);
    --bs-btn-disabled-color: var(--budz-accent-strong);
    --bs-btn-disabled-border-color: var(--budz-accent-strong);
    --bs-btn-focus-shadow-rgb: var(--budz-accent-strong-rgb);
}

/* ------------------------------------------------------------------
   Kartice
   ------------------------------------------------------------------ */

.card {
    background-color: var(--budz-surface);
    border-color: var(--budz-surface-border);
}

/* ------------------------------------------------------------------
   Statusi — plaćeno / neplaćeno / kasni. Eksplicitno predefinisane
   Bootstrap klase koje template-i već koriste (bg-success/bg-warning/
   bg-danger na bedževima, text-success/text-danger/text-warning-emphasis
   i border-success/border-warning/border-danger na karticama), da bi
   izgled bio dosledan svuda u aplikaciji bez izmene tih template-a.
   ------------------------------------------------------------------ */

.badge.bg-success,
.badge.text-bg-success {
    background-color: var(--budz-status-placeno-bg) !important;
    color: #fff !important;
}

.badge.bg-warning,
.badge.text-bg-warning {
    background-color: var(--budz-status-neplaceno-bg) !important;
    color: #fff !important;
}

.badge.bg-danger,
.badge.text-bg-danger {
    background-color: var(--budz-status-kasni-bg) !important;
    color: #fff !important;
}

.text-success {
    color: var(--budz-status-placeno-text) !important;
}

.text-danger {
    color: var(--budz-status-kasni-text) !important;
}

.text-warning-emphasis {
    color: var(--budz-status-neplaceno-text) !important;
}

.border-success {
    border-color: var(--budz-status-placeno-bg) !important;
}

.border-warning {
    border-color: var(--budz-status-neplaceno-bg) !important;
}

.border-danger {
    border-color: var(--budz-status-kasni-bg) !important;
}

.alert-success {
    background-color: rgba(60, 122, 90, 0.12);
    border-color: rgba(60, 122, 90, 0.35);
    color: var(--budz-status-placeno-text);
}

.alert-danger {
    background-color: rgba(179, 67, 43, 0.12);
    border-color: rgba(179, 67, 43, 0.35);
    color: var(--budz-status-kasni-text);
}

.alert-warning {
    background-color: rgba(86, 112, 125, 0.12);
    border-color: rgba(86, 112, 125, 0.35);
    color: var(--budz-status-neplaceno-text);
}

.alert-info {
    background-color: var(--budz-accent-soft);
    border-color: rgba(184, 134, 59, 0.35);
    color: var(--budz-accent-strong);
}

/* ------------------------------------------------------------------
   Novčani iznosi — tabularne cifre, čitljivo poravnanje u kolonama.
   ------------------------------------------------------------------ */

.novcani-iznos {
    font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, "Roboto Mono", monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* ------------------------------------------------------------------
   Raspored — sidebar + glavni sadržaj
   ------------------------------------------------------------------ */

.budz-app-shell {
    display: flex;
    min-height: 100vh;
    background-color: var(--budz-bg);
}

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

.budz-main {
    flex: 1 1 auto;
    width: 100%;
    max-width: 1400px;
    margin-inline: auto;
    padding: 1.5rem clamp(1rem, 3vw, 2rem);
    min-width: 0;
}

.budz-main-guest {
    max-width: 640px;
}

/* ------------------------------------------------------------------
   Gornja traka
   ------------------------------------------------------------------ */

.budz-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: var(--budz-topbar-height);
    padding: 0.5rem 1rem;
    background-color: var(--budz-surface);
    border-bottom: 1px solid var(--budz-surface-border);
    position: sticky;
    top: 0;
    z-index: 1020;
}

/* Gornja traka za neulogovane (npr. stranica za prijavu) - tamnija,
   usklađena sa sidebarom koji se u tom slučaju ne prikazuje. Definisano
   posle .budz-topbar da bi eksplicitno prevagnulo nad njim bez obzira
   na redosled klasa u markupu. */
.budz-topbar.budz-guest-topbar {
    background-color: var(--budz-sidebar-bg);
    border-bottom-color: var(--budz-sidebar-border);
    justify-content: center;
}

.budz-guest-topbar .budz-topbar-brand {
    color: #fff;
}

.budz-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--budz-surface-border);
    background-color: var(--budz-surface);
    color: var(--budz-ink);
    border-radius: 0.375rem;
    padding: 0.35rem 0.75rem;
    font-weight: 500;
}

.budz-menu-btn:hover {
    border-color: var(--budz-accent);
    color: var(--budz-accent-strong);
}

.budz-topbar-brand {
    font-weight: 600;
    color: var(--budz-ink);
}

.budz-topbar-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.budz-user-name {
    color: var(--budz-muted);
    font-size: 0.9rem;
}

.budz-badge-role {
    background-color: var(--budz-accent-soft) !important;
    color: var(--budz-accent-strong) !important;
}

/* ------------------------------------------------------------------
   Sidebar
   ------------------------------------------------------------------ */

.budz-sidebar {
    --bs-offcanvas-bg: var(--budz-sidebar-bg);
    background-color: var(--budz-sidebar-bg);
    color: var(--budz-sidebar-text);
    width: min(85vw, 300px);
}

.budz-sidebar .offcanvas-header,
.budz-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--budz-sidebar-border);
}

.budz-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    font-size: 1.05rem;
}

.budz-sidebar-brand-mark {
    flex: 0 0 auto;
    color: var(--budz-accent);
}

.budz-rail-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background-color: transparent;
    color: var(--budz-sidebar-text);
    flex: 0 0 auto;
}

.budz-rail-toggle:hover {
    background-color: var(--budz-sidebar-bg-hover);
    color: #fff;
}

.budz-rail-toggle .budz-icon-chevron {
    transition: transform 0.15s ease;
    transform: rotate(180deg);
}

.budz-sidebar-body {
    padding: 0.75rem 0.6rem 1.5rem;
    overflow-x: hidden;
}

.budz-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.budz-nav-eyebrow {
    margin: 1rem 0.65rem 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--budz-sidebar-text-muted);
}

.budz-nav-item:first-child .budz-nav-eyebrow {
    margin-top: 0.25rem;
}

.budz-nav-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.55rem 0.65rem;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 0.375rem;
    background-color: transparent;
    color: var(--budz-sidebar-text);
    text-decoration: none;
    font-size: 0.925rem;
    font-weight: 500;
    text-align: left;
}

.budz-nav-link:hover {
    background-color: var(--budz-sidebar-bg-hover);
    color: #fff;
}

.budz-nav-link:hover .budz-nav-icon {
    color: #fff;
}

.budz-nav-link:focus-visible {
    outline: 2px solid var(--budz-accent);
    outline-offset: 2px;
}

.budz-nav-link.active {
    background-color: var(--budz-sidebar-bg-active);
    border-left-color: var(--budz-accent);
    color: #fff;
    font-weight: 600;
}

.budz-nav-link.active .budz-nav-icon {
    color: var(--budz-accent);
}

.budz-nav-icon {
    flex: 0 0 auto;
    color: var(--budz-sidebar-text);
}

.budz-nav-text {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.budz-nav-group-toggle {
    justify-content: flex-start;
}

.budz-nav-caret {
    flex: 0 0 auto;
    margin-left: auto;
    transition: transform 0.15s ease;
    color: var(--budz-sidebar-text);
}

.budz-nav-group-toggle[aria-expanded="true"] .budz-nav-caret {
    transform: rotate(90deg);
}

.budz-nav-subnav {
    list-style: none;
    margin: 0.15rem 0 0.2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.budz-nav-sublink {
    padding-left: 2.35rem;
    font-size: 0.875rem;
}

/* ------------------------------------------------------------------
   Rail sidebar (skupljen prikaz) — dozvoljeno samo na desktopu (≥ 992px)
   ------------------------------------------------------------------ */

@media (min-width: 992px) {
    /* Bootstrap-ov offcanvas-lg treba sam da vrati vidljivo/statično stanje
       na ovoj širini, ali se to ovde eksplicitno forsira - ne oslanjamo se
       na pretpostavku da će kaskada uvek pobediti nad bazičnim .offcanvas
       pravilima (position: fixed; visibility: hidden; transform: translateX(...)),
       jer bi sidebar u suprotnom ostao nevidljiv i na desktopu.
       Bootstrap na ovoj širini TAKOĐE eksplicitno postavlja
       background-color: transparent !important na .offcanvas-lg (da bi se
       offcanvas kao statični sidebar "spojio" sa stranicom) - to je tačan
       uzrok skoro bele pozadine koju je ručna provera pokazala, jer taj
       !important pobeđuje običan (ne-!important) background-color u
       osnovnom .budz-sidebar pravilu iznad. Zato se ovde tamna pozadina
       mora ponovo eksplicitno nametnuti sopstvenim !important, koji - pošto
       je stil.css učitan posle Bootstrap-a - na kraju pobeđuje.

       Sidebar postaje sticky (ne fixed) da ostane u toku flex layout-a: bez
       ovoga .budz-app-shell (display:flex, min-height:100vh, bez gornje
       granice visine) prirodno naraste iznad 100vh čim je glavni sadržaj
       duži od ekrana, a sidebar se (kao rastegnut flex item) rasteže isto
       toliko i samo se skroluje zajedno sa stranicom. position: sticky uz
       top:0 ga umesto toga lepi za vrh viewporta tokom skrola, dok
       transform: none ostaje obavezan jer bilo koji transform (uključujući
       Bootstrap-ov translateX za skriveno offcanvas stanje) prekida sticky
       pozicioniranje. Zaglavlje (.budz-sidebar-header) ostaje van skrola
       (flex-shrink: 0 ispod) - unutrašnji vertikalni skrol dobija samo
       .budz-sidebar-body, da naziv aplikacije uvek ostane vidljiv. */
    .budz-sidebar {
        position: sticky !important;
        top: 0 !important;
        visibility: visible !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column;
        align-self: flex-start;
        height: 100vh !important;
        max-height: 100vh !important;
        width: var(--budz-sidebar-width) !important;
        flex: 0 0 var(--budz-sidebar-width) !important;
        background-color: var(--budz-sidebar-bg) !important;
        --bs-offcanvas-bg: var(--budz-sidebar-bg) !important;
        transition: flex-basis 0.15s ease, width 0.15s ease;
    }

    .budz-sidebar-header {
        flex-shrink: 0;
    }

    .budz-sidebar-body {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
    }

    .budz-app-shell.budz-sidebar-collapsed .budz-sidebar {
        width: var(--budz-sidebar-width-collapsed) !important;
        flex-basis: var(--budz-sidebar-width-collapsed) !important;
    }

    .budz-app-shell.budz-sidebar-collapsed .budz-sidebar-body .budz-nav-text,
    .budz-app-shell.budz-sidebar-collapsed .budz-nav-eyebrow,
    .budz-app-shell.budz-sidebar-collapsed .budz-sidebar-brand-text,
    .budz-app-shell.budz-sidebar-collapsed .budz-nav-caret {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .budz-app-shell.budz-sidebar-collapsed .budz-nav-link,
    .budz-app-shell.budz-sidebar-collapsed .budz-nav-group-toggle {
        justify-content: center;
    }

    .budz-app-shell.budz-sidebar-collapsed .budz-nav-sublink {
        padding-left: 0.65rem;
    }

    .budz-app-shell.budz-sidebar-collapsed .budz-sidebar-header {
        justify-content: center;
    }

    .budz-app-shell:not(.budz-sidebar-collapsed) .budz-rail-toggle .budz-icon-chevron {
        transform: rotate(180deg);
    }

    .budz-app-shell.budz-sidebar-collapsed .budz-rail-toggle .budz-icon-chevron {
        transform: rotate(0deg);
    }
}

@media (max-width: 991.98px) {
    .budz-rail-toggle {
        display: none;
    }
}

/* ------------------------------------------------------------------
   Pristupačnost — poštovanje prefers-reduced-motion
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .budz-sidebar,
    .budz-rail-toggle .budz-icon-chevron,
    .budz-nav-caret,
    .offcanvas,
    .collapsing {
        transition: none !important;
    }
}

/* ------------------------------------------------------------------
   Dashboard — hero kartica "Razlika"
   ------------------------------------------------------------------ */

.budz-hero-razlika {
    border: 1px solid var(--budz-surface-border);
    border-left: 6px solid var(--budz-accent);
    background-color: var(--budz-surface);
}

.budz-hero-razlika.budz-hero-negativno {
    border-left-color: var(--budz-status-kasni-bg);
}

.budz-hero-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--budz-muted);
    margin-bottom: 0.35rem;
}

.budz-hero-iznos {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--budz-ink);
}

.budz-hero-razlika.budz-hero-pozitivno .budz-hero-iznos {
    color: var(--budz-status-placeno-text);
}

.budz-hero-razlika.budz-hero-negativno .budz-hero-iznos {
    color: var(--budz-status-kasni-text);
}

.budz-hero-sub {
    color: var(--budz-muted);
    font-size: 0.875rem;
    margin-top: 0.35rem;
}

/* ------------------------------------------------------------------
   Računi — lista (Faza A vizuelnog usklađivanja modula Računi)
   ------------------------------------------------------------------ */

/* Neutralan "pill" za vidljivost (lično/zajedničko) - namerno odvojen
   od .badge jezika koji nosi status plaćanja (plaćeno/neplaćeno/kasni),
   da se dva različita značenja nikad ne mešaju na prvi pogled. */
.budz-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
    border: 1px solid var(--budz-surface-border);
    background-color: transparent;
    color: var(--budz-muted);
    white-space: nowrap;
}

.budz-pill-licno {
    border-color: transparent;
    background-color: var(--budz-accent-soft);
    color: var(--budz-accent-strong);
}

/* Sekundarni red u ćeliji (npr. mesec/godina ispod datuma). */
.budz-cell-sub {
    display: block;
    color: var(--budz-muted);
    font-size: 0.8rem;
}

/* Vizuelno prigušene, ali i dalje potpuno čitljive kolone (Konto, Opis). */
.budz-cell-muted {
    color: var(--budz-muted);
}

/* Sprečava da predug naziv dobavljača ili opis razvuku celu tabelu -
   .table-responsive i dalje ostaje kao krajnja bezbednosna mreža ako
   i posle skraćivanja nešto ne stane. */
.budz-cell-truncate {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Rok plaćanja kod računa koji kasne (status_boja == 'danger', isti
   podatak koji već boji status bedž - ovde se samo ponovo koristi). */
.budz-rok-kasni {
    color: var(--budz-status-kasni-text);
    font-weight: 600;
}

.budz-filter-blok {
    background-color: var(--budz-surface);
    border: 1px solid var(--budz-surface-border);
    border-radius: 0.5rem;
    padding: 0.85rem 1rem 1rem;
}

.budz-filter-eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--budz-muted);
}

/* Suptilan hover reda - koristi Bootstrap-ov .table-hover mehanizam
   (box-shadow tehnika) umesto ručnog background-color, da ostane
   ispravno naslagano preko postojećeg .table-striped efekta. */
.budz-tabela {
    --bs-table-hover-bg: var(--budz-accent-soft);
}

/* ------------------------------------------------------------------
   Računi — detalj (Faza B vizuelnog usklađivanja modula Računi)
   ------------------------------------------------------------------ */

/* Isti hero jezik kao dashboard-ova kartica "Razlika" (.budz-hero-label/
   .budz-hero-iznos) - ovde bez pozitivno/negativno modifikatora jer iznos
   računa nije predznačen kao razlika, samo treba da bude najistaknutiji
   podatak na stranici. */
.budz-detalj-hero {
    border: 1px solid var(--budz-surface-border);
    border-left: 6px solid var(--budz-accent);
    background-color: var(--budz-surface);
}

/* Fiskalna sekcija se vizuelno razlikuje (tačkasta ivica, umesto bele
   pozadina u tonu stranice - podseća na perforiranu ivicu fiskalnog
   računa), ali ostaje ista veličina/težina kartice kao glavni podaci -
   ne dominira nad njima. */
.budz-fiskalna-kartica {
    background-color: var(--budz-bg);
    border-style: dashed;
}

/* Zbir stavki jasno odvojen od pojedinačnih redova iznad njega. */
.budz-zbir-stavki {
    border-top: 3px solid var(--budz-accent);
}

.budz-zbir-stavki dt,
.budz-zbir-stavki dd {
    font-weight: 600;
}

/* ------------------------------------------------------------------
   Korisničko uputstvo (Faza 2A)
   ------------------------------------------------------------------ */

/* !important na color je namerno: .budz-main a:not(.btn):not(.budz-nav-link)...
   (opšta boja linkova u glavnom sadržaju, definisana ranije u ovom fajlu) ima
   veću specifičnost (pet :not() klasa + element) od ovih pravila i inače bi
   prepisala boju teksta - .nav-link nije isto što i .budz-nav-link (sidebar),
   pa ta :not() lista ove linkove ne isključuje. Ne oslanjamo se na nasleđivanje
   niti na slučajno poklapanje boja - boja teksta je uvek eksplicitno postavljena. */
.uputstvo-poglavlja-nav .nav-link,
.uputstvo-poglavlja-nav .nav-link:visited {
    border-radius: 999px;
    color: var(--budz-accent-strong) !important;
    background-color: transparent;
    border: 1px solid var(--budz-surface-border);
    padding: 0.3rem 0.85rem;
    font-weight: 500;
}

.uputstvo-poglavlja-nav .nav-link:hover {
    background-color: var(--budz-accent-soft);
}

.uputstvo-poglavlja-nav .nav-link:focus-visible {
    outline: 2px solid var(--budz-accent);
    outline-offset: 2px;
}

/* Trenutno poglavlje: tamna mesing pozadina ZAHTEVA eksplicitno svetao tekst.
   Ponovljeno za :visited/:hover/:active/:focus na aktivnoj stavci da nijedno
   od tih stanja ne vrati tamnu boju iz opštijeg pravila iznad u kaskadi. */
.uputstvo-poglavlja-nav .nav-link.active,
.uputstvo-poglavlja-nav .nav-link[aria-current="page"],
.uputstvo-poglavlja-nav .nav-link.active:visited,
.uputstvo-poglavlja-nav .nav-link.active:hover,
.uputstvo-poglavlja-nav .nav-link.active:active,
.uputstvo-poglavlja-nav .nav-link.active:focus {
    background-color: var(--budz-accent-strong);
    border-color: var(--budz-accent-strong);
    color: #fff !important;
}

/* Fokus prsten na aktivnoj stavci mora biti svetao - tamni var(--budz-accent)
   prsten iz pravila iznad bio bi slabo vidljiv na već tamnoj pozadini. */
.uputstvo-poglavlja-nav .nav-link.active:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    color: #fff !important;
}

/* Callout blokovi (Napomena je podrazumevani oblik, Važno/Primer/Najvažnije
   su modifikatori iste osnovne klase - isti obrazac kao .budz-hero-razlika
   sa .budz-hero-pozitivno/negativno). */
.uputstvo-callout {
    border-left: 4px solid var(--budz-accent);
    background-color: var(--budz-accent-soft);
    border-radius: 0.375rem;
    padding: 0.85rem 1rem;
    margin: 1.25rem 0;
}

.uputstvo-callout-vazno {
    border-left-color: var(--budz-status-kasni-bg);
    background-color: rgba(179, 67, 43, 0.08);
}

.uputstvo-callout-primer {
    border-left-color: var(--budz-status-placeno-bg);
    background-color: rgba(60, 122, 90, 0.08);
}

.uputstvo-callout-najvaznije {
    border: 1px solid var(--budz-surface-border);
    border-left: 4px solid var(--budz-accent-strong);
    background-color: var(--budz-surface);
}

.uputstvo-callout-label {
    display: block;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
    color: var(--budz-muted);
    margin-bottom: 0.25rem;
}