/* ============================================================
   Restaurantio — vizuelni sistem
   ------------------------------------------------------------
   Učitava se POSLE style.css i style-extra.css i redefiniše iste
   promenljive, pa ceo zatečeni program dobija novi izgled i tamnu
   temu bez prepravljanja pojedinačnih stranica.

   Boje su izvedene iz znaka programa: mastilo-plava #16203a i
   zlatna #c8a030. Plava nosi podatke, zlatna ističe ono što je
   trenutno u fokusu — ozbiljno, ali ne hladno.

   Sadržaj
     1. Tokeni — svetla tema
     2. Tokeni — tamna tema
     3. Osnova i tipografija
     4. Raspored: bočni meni
     5. Raspored: meni pri vrhu
     6. Gornja traka
     7. Kartice, pokazatelji, tabele
     8. Dugmad, polja, oznake
     9. Karnet — kalendar i matrica
    10. Dopune za tamnu temu (ugrađene boje iz starih stranica)
    11. Pristupačnost i štampa
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENI — SVETLA TEMA
   ------------------------------------------------------------ */
:root {
    color-scheme: light;

    /* Osnovna paleta */
    --ink-900: #0d1526;
    --ink-800: #16203a;
    --ink-700: #1f2c4c;
    --ink-600: #2b3a60;

    --blue-700: #1d4ed8;
    --blue-600: #2563eb;
    --blue-500: #3b82f6;
    --blue-50:  #eff6ff;

    --gold-600: #a97f16;
    --gold-500: #c8a030;
    --gold-400: #dcbb5c;
    --gold-50:  #fdf7e6;

    /* Semantika — imena su ista kao u style.css, pa se nasleđuje ceo program */
    --bg:            #eef1f6;
    --surface:       #ffffff;
    --surface-2:     #f6f8fb;
    --surface-hover: #eef2f8;
    --border:        #dde3ec;
    --border-strong: #c6cfdd;

    --text:      #101828;
    --text-2:    #344054;
    --muted:     #5b6779;
    --muted-2:   #8593a8;

    --primary:    var(--blue-700);
    --primary-d:  #1a3fb5;
    --primary-bg: var(--blue-50);
    --on-primary: #ffffff;

    --accent:     var(--gold-600);
    --accent-bg:  var(--gold-50);

    --success:    #087443;
    --success-bg: #e3f7ec;
    --danger:     #c02626;
    --danger-bg:  #fdecec;
    --warning:    #a45b06;
    --warning-bg: #fdf1e0;
    --info:       #0369a1;
    --info-bg:    #e4f3fc;

    --sidebar-bg:     var(--ink-800);
    --sidebar-bg-2:   var(--ink-700);
    --sidebar-text:   #b7c2d6;
    --sidebar-title:  #ffffff;
    --sidebar-active: var(--gold-500);
    --sidebar-border: rgba(255, 255, 255, .08);

    /* Oblik i dubina */
    --radius:     10px;
    --radius-sm:  7px;
    --radius-lg:  14px;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow:    0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, .09), 0 2px 4px rgba(16, 24, 40, .05);
    --shadow-lg: 0 18px 40px rgba(16, 24, 40, .16);
    --ring:      0 0 0 3px rgba(29, 78, 216, .28);

    /* Ritam — gusto, jer je ovo radni program a ne prezentacija */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

    /* Tipografska skala */
    --fs-xs: 11.5px; --fs-sm: 12.5px; --fs-base: 13.5px;
    --fs-md: 15px;   --fs-lg: 17px;   --fs-xl: 20px;  --fs-2xl: 25px;

    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-num: 'Inter', ui-monospace, 'SF Mono', Consolas, monospace;

    --dur: 170ms;
    --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------------------------------------
   2. TOKENI — TAMNA TEMA
   ------------------------------------------------------------
   Tamna tema nije obrnuta svetla: površine su tople-tamne, a boje
   razblažene, jer zasićena boja na tamnoj podlozi „vibrira".
   Definiše se dva puta — jednom za izbor sistema, jednom za
   izričit izbor korisnika — da prekidač radi u oba smera.
   ------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"] { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:            #0b1120;
        --surface:       #141c2e;
        --surface-2:     #1a2338;
        --surface-hover: #1f2942;
        --border:        #26314a;
        --border-strong: #35425f;

        --text:    #e8eef8;
        --text-2:  #c3cddd;
        --muted:   #94a2b8;
        --muted-2: #6e7d95;

        --primary:    #6f9bff;
        --primary-d:  #8db0ff;
        --primary-bg: #17233f;
        --on-primary: #08111f;

        --accent:     #e0bd5c;
        --accent-bg:  #2a2413;

        --success:    #4ade80;  --success-bg: #10261c;
        --danger:     #f98080;  --danger-bg:  #2c1618;
        --warning:    #f0b357;  --warning-bg: #2b2011;
        --info:       #6cc4f5;  --info-bg:    #10222f;

        --sidebar-bg:     #0d1424;
        --sidebar-bg-2:   #141c2e;
        --sidebar-text:   #9aa8bf;
        --sidebar-title:  #f1f5fb;
        --sidebar-active: #e0bd5c;
        --sidebar-border: rgba(255, 255, 255, .06);

        --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
        --shadow:    0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3);
        --shadow-md: 0 6px 16px rgba(0, 0, 0, .5);
        --shadow-lg: 0 20px 44px rgba(0, 0, 0, .6);
        --ring:      0 0 0 3px rgba(111, 155, 255, .35);
    }
}

:root[data-theme="dark"] {
    --bg:            #0b1120;
    --surface:       #141c2e;
    --surface-2:     #1a2338;
    --surface-hover: #1f2942;
    --border:        #26314a;
    --border-strong: #35425f;

    --text:    #e8eef8;
    --text-2:  #c3cddd;
    --muted:   #94a2b8;
    --muted-2: #6e7d95;

    --primary:    #6f9bff;
    --primary-d:  #8db0ff;
    --primary-bg: #17233f;
    --on-primary: #08111f;

    --accent:     #e0bd5c;
    --accent-bg:  #2a2413;

    --success:    #4ade80;  --success-bg: #10261c;
    --danger:     #f98080;  --danger-bg:  #2c1618;
    --warning:    #f0b357;  --warning-bg: #2b2011;
    --info:       #6cc4f5;  --info-bg:    #10222f;

    --sidebar-bg:     #0d1424;
    --sidebar-bg-2:   #141c2e;
    --sidebar-text:   #9aa8bf;
    --sidebar-title:  #f1f5fb;
    --sidebar-active: #e0bd5c;
    --sidebar-border: rgba(255, 255, 255, .06);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow:    0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, .5);
    --shadow-lg: 0 20px 44px rgba(0, 0, 0, .6);
    --ring:      0 0 0 3px rgba(111, 155, 255, .35);
}

/* ------------------------------------------------------------
   3. OSNOVA I TIPOGRAFIJA
   ------------------------------------------------------------ */
html, body {
    background: var(--bg);
    color: var(--text);
    font-size: var(--fs-base);
    -webkit-font-smoothing: antialiased;
}
body { transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }

h1 { font-size: var(--fs-2xl); letter-spacing: -.022em; font-weight: 650; }
h2 { font-size: var(--fs-lg);  letter-spacing: -.014em; font-weight: 640; }
h3 { font-size: var(--fs-md);  letter-spacing: -.01em;  font-weight: 630; }
h4 { font-size: var(--fs-base); font-weight: 620; }
small, .text-sm { font-size: var(--fs-sm); }
.muted { color: var(--muted); }

/* Brojevi u tabelama moraju da stoje jedan ispod drugog */
.num, .stat-value, td.num, th.num,
table td:has(> .money), .tabular { font-variant-numeric: tabular-nums; }

/* Ikonice nasleđuju boju i poravnavaju se sa tekstom */
.ico { flex: 0 0 auto; vertical-align: -.18em; }

/* ------------------------------------------------------------
   4. RASPORED — OKVIR STRANICE
   ------------------------------------------------------------
   Trake stoje, sadržaj se skroluje. Prozor sam ne skroluje: visina
   okvira je tačno visina ekrana, a jedina površina koja klizi je
   .content. Tako meni pri vrhu i gornja traka (restoran, tema, nalog)
   ostaju na mestu, a lepljiva zaglavlja tabela se lepe za vrh sadržaja.
   ------------------------------------------------------------ */
.app {
    grid-template-columns: 232px 1fr;
    height: 100vh;
    height: 100dvh;          /* na telefonu adresna traka menja visinu prozora */
    min-height: 0;
    overflow: hidden;
}
.main { height: 100%; min-height: 0; overflow: hidden; }
.topnav, .topbar { flex: 0 0 auto; }
.content {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain;
}

.sidebar {
    width: 232px;
    height: 100%;
    background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%);
    border-right: 1px solid var(--sidebar-border);
}
.sidebar .nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.sidebar-footer { flex: 0 0 auto; }

/* ------------------------------------------------------------
   4a. KAPIJA — IZBOR RESTORANA
   ------------------------------------------------------------
   Zasebna stranica, bez menija i traka: jedina odluka na ekranu
   je u koji lokal se ulazi.
   ------------------------------------------------------------ */
.gate-body {
    background: var(--bg);
    min-height: 100vh; min-height: 100dvh;
    display: flex; align-items: center; justify-content: center;
    padding: var(--sp-6) var(--sp-4);
}
.gate-wrap { width: 100%; max-width: 940px; }
.gate-head { text-align: center; margin-bottom: var(--sp-6); }
.gate-head h1 { font-size: var(--fs-2xl); margin: var(--sp-4) 0 var(--sp-2); }
.gate-head p { color: var(--muted); font-size: var(--fs-md); margin: 0; }

.gate-grid {
    display: grid; gap: var(--sp-4);
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.gate-card {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 6px; padding: var(--sp-5) var(--sp-4);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
    cursor: pointer; font-family: inherit; color: var(--text); position: relative;
    transition: transform .12s var(--ease), box-shadow .12s var(--ease), border-color .12s var(--ease);
}
.gate-card:hover {
    transform: translateY(-2px); border-color: var(--primary); box-shadow: var(--shadow-lg);
}
.gate-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.gate-card.is-current { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }

.gate-logo {
    width: 64px; height: 64px; border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-2); border: 1px solid var(--border); overflow: hidden;
    margin-bottom: var(--sp-2);
}
.gate-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gate-initial { font-size: 24px; font-weight: 700; color: var(--muted); display: flex; }
.gate-card-all .gate-logo { background: var(--primary-bg); border-color: var(--primary); }
.gate-card-all .gate-initial { color: var(--primary); }

.gate-name { font-weight: 650; font-size: var(--fs-md); }
.gate-sub  { color: var(--muted); font-size: var(--fs-sm); }
.gate-badge {
    position: absolute; top: 8px; right: 8px;
    background: var(--primary-bg); color: var(--primary);
    font-size: var(--fs-xs); font-weight: 700; padding: 2px 7px; border-radius: 999px;
}

.gate-foot {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
    gap: var(--sp-2); margin-top: var(--sp-6); font-size: var(--fs-sm);
}

/* Traka: izabrani restoran je natpis, ne padajući spisak.
   Promena ide kroz kapiju, pa se ne može desiti slučajno. */
.rest-current {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface-2); max-width: 320px;
}
.rest-current img { height: 24px; width: 24px; object-fit: contain; border-radius: 4px; flex-shrink: 0; }
.rest-current .rc-name {
    font-weight: 650; font-size: var(--fs-base);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rest-current .rc-all { color: var(--primary); }

/* ------------------------------------------------------------
   4b. RASPORED — BOČNI MENI
   ------------------------------------------------------------ */
.brand {
    padding: var(--sp-4) var(--sp-4) var(--sp-3);
    border-bottom: 1px solid var(--sidebar-border);
    gap: var(--sp-3);
}
.brand span { color: var(--sidebar-title); font-size: var(--fs-md); letter-spacing: -.015em; }

.nav { padding: var(--sp-3) var(--sp-2); gap: 1px; }

.nav-group-label {
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--muted-2);
    padding: var(--sp-4) var(--sp-3) var(--sp-1);
}

.nav-item {
    gap: var(--sp-3); padding: 8px 10px; font-size: var(--fs-base); font-weight: 500;
    color: var(--sidebar-text); border-radius: var(--radius-sm);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav-item.active {
    /* Aktivna stavka se prepoznaje po zlatnoj traci, ne samo po boji —
       boja sama nikad ne sme biti jedini nosilac značenja */
    background: rgba(255, 255, 255, .10);
    color: #fff; font-weight: 600; box-shadow: none;
    position: relative;
}
.nav-item.active::before {
    content: ''; position: absolute; left: -2px; top: 6px; bottom: 6px;
    width: 3px; border-radius: 0 3px 3px 0; background: var(--sidebar-active);
}
.nav-item .nav-icon {
    width: 26px; height: 26px; background: rgba(255, 255, 255, .05);
    border-radius: var(--radius-sm); font-size: 15px;
}
.nav-item.active .nav-icon { background: rgba(255, 255, 255, .12); color: var(--sidebar-active); }
.nav-sub-item { padding-left: 14px; font-size: var(--fs-sm); }

.nav-group-header {
    color: var(--sidebar-text); font-size: var(--fs-base); font-weight: 500;
    gap: var(--sp-3); padding: 8px 10px; border-radius: var(--radius-sm);
}
.nav-group-header:hover { background: rgba(255, 255, 255, .06); color: #fff; }

.sidebar-footer { border-top: 1px solid var(--sidebar-border); }
.user-chip .u-name { color: var(--sidebar-title); }
.user-chip .u-role { color: var(--muted-2); }
.user-chip .avatar { background: var(--gold-500); color: var(--ink-900); font-weight: 700; }

/* ------------------------------------------------------------
   5. RASPORED — MENI PRI VRHU
   ------------------------------------------------------------ */
.app.app-top { grid-template-columns: 1fr; }
.app.app-top .sidebar { display: none; }

/* Traka menija stoji na mestu — ne skroluje se vodoravno.
   Kada nema dovoljno širine, stavke prelaze u novi red, pa su sve
   vidljive odjednom i položaj im se ne pomera pod rukom. */
.topnav {
    display: flex; align-items: center; gap: var(--sp-2) 4px;
    background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%);
    padding: 4px var(--sp-4); min-height: 46px;
    flex-wrap: wrap; overflow: visible;
    border-bottom: 1px solid var(--sidebar-border);
    /* Iznad sloja za zatvaranje: dok je jedan spisak otvoren, ostala dugmad
       moraju da ostanu dohvatljiva, da se do sledeće grupe stigne jednim klikom */
    position: sticky; top: 0; z-index: 1150;
}

.topnav-brand {
    display: flex; align-items: center; gap: var(--sp-2);
    color: var(--sidebar-title); font-weight: 700; font-size: var(--fs-md);
    padding-right: var(--sp-4); margin-right: var(--sp-2);
    border-right: 1px solid var(--sidebar-border); white-space: nowrap;
}
.topnav-brand:hover { text-decoration: none; color: #fff; }

.topnav-item {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    padding: 7px 11px; border-radius: var(--radius-sm); font-size: var(--fs-base);
    font-weight: 500; color: var(--sidebar-text); border: none; background: none;
    cursor: pointer; font-family: inherit;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.topnav-item:hover { background: rgba(255, 255, 255, .09); color: #fff; text-decoration: none; }
.topnav-item.active { background: rgba(255, 255, 255, .12); color: #fff; font-weight: 600; }
.topnav-item.active { box-shadow: inset 0 -2px 0 var(--sidebar-active); }

/* Padajući spisak se ne crta unutar trake — traka vodoravno skroluje,
   pa bi je spisak dodirnuo i bio odsečen. Zato stoji fiksno u odnosu na
   prozor, a položaj mu se računa pri otvaranju. */
.topnav-drop { position: relative; }
.topnav-menu {
    position: fixed; z-index: 1200; min-width: 224px; max-height: 72vh; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); padding: var(--sp-1); display: none;
}
.topnav-drop.open .topnav-menu { display: block; }
.topnav-scrim {
    position: fixed; inset: 0; z-index: 1100; background: transparent; display: none;
}
.topnav-scrim.on { display: block; }
.topnav-menu a {
    display: flex; align-items: center; gap: var(--sp-2); padding: 7px 10px;
    border-radius: var(--radius-sm); color: var(--text); font-size: var(--fs-base);
}
.topnav-menu a:hover { background: var(--surface-hover); text-decoration: none; }

/* Duga grupa: širok pravougaonik sa stavkama u kolonama (redosled ide
   odozgo nadole pa u sledeću kolonu). Na užem prozoru kolona je manje,
   a na telefonu ostaje jedna, kao običan spisak. */
.topnav-menu--wide {
    width: min(720px, calc(100vw - 16px));
    columns: 210px 3; column-gap: var(--sp-1);
}
.topnav-menu--wide a { break-inside: avoid; }
.topnav-menu a.active { background: var(--primary-bg); color: var(--primary); font-weight: 600; }

/* ------------------------------------------------------------
   6. GORNJA TRAKA
   ------------------------------------------------------------ */
.topbar {
    background: var(--surface); border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-xs); gap: var(--sp-3);
}
.topbar-right { gap: var(--sp-2); align-items: center; }

.icon-btn {
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--muted); cursor: pointer; padding: 0;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-strong); }

/* Prekidač teme — tri stanja: sistem, svetla, tamna */
.theme-switch { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.theme-switch button {
    width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
    border: none; background: var(--surface); color: var(--muted-2); cursor: pointer; padding: 0;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.theme-switch button + button { border-left: 1px solid var(--border); }
.theme-switch button:hover { background: var(--surface-hover); color: var(--text); }
.theme-switch button.active { background: var(--primary-bg); color: var(--primary); }

.lang-switch { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.lang-btn {
    background: var(--surface); color: var(--muted); border: none; padding: 6px 10px;
    font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.lang-btn.active { background: var(--primary-bg); color: var(--primary); }

.rest-picker select, .topbar select {
    background: var(--surface); color: var(--text); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 6px 9px; font-size: var(--fs-base); font-family: inherit;
}
.rest-picker-lbl { color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }

/* ------------------------------------------------------------
   7. KARTICE, POKAZATELJI, TABELE
   ------------------------------------------------------------ */
.content { padding: var(--sp-5) var(--sp-6); }

.page-head { margin-bottom: var(--sp-5); align-items: flex-start; gap: var(--sp-4); }
.page-head h1 { display: flex; align-items: center; gap: var(--sp-2); }

.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-xs);
}
.card-head {
    border-bottom: 1px solid var(--border); padding: var(--sp-3) var(--sp-4);
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border-radius: var(--radius) var(--radius) 0 0;
}
.card-head h3 { margin: 0; display: flex; align-items: center; gap: var(--sp-2); }
.card-body { padding: var(--sp-4); }

/* Pokazatelji: zlatna nit na vrhu daje dubinu bez šarenila */
.stats-grid { gap: var(--sp-3); }
.stat-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-xs); padding: var(--sp-4); position: relative; overflow: hidden;
    transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.stat-card::after {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
    background: linear-gradient(90deg, var(--primary), transparent 65%); opacity: .5;
}
a.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); text-decoration: none; }
.stat-label { color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .055em; font-weight: 700; }
.stat-value { font-size: var(--fs-2xl); font-weight: 680; letter-spacing: -.024em; color: var(--text); }
.stat-icon { border-radius: var(--radius-sm); }
.stat-icon-primary { background: var(--primary-bg); color: var(--primary); }
.stat-icon-success { background: var(--success-bg); color: var(--success); }
.stat-icon-warning { background: var(--warning-bg); color: var(--warning); }
.stat-icon-danger  { background: var(--danger-bg);  color: var(--danger); }
.stat-icon-info    { background: var(--info-bg);    color: var(--info); }
.stat-icon-accent  { background: var(--accent-bg);  color: var(--accent); }
.stat-icon-muted   { background: var(--surface-2);  color: var(--muted); }

/* ------------------------------------------------------------
   Ispravke za elemente kojima je boja bila upisana u style.css
   ------------------------------------------------------------
   Osnovni stil je nastao pre tamne teme, pa je na više mesta imao
   #fff i #f8fafc upisano pravo u pravilo. Bez ovoga tabele, polja
   i dugmad ostaju svetli i u tamnoj temi.
   ------------------------------------------------------------ */
.table { background: var(--surface); }
.table th {
    background: var(--surface-2); color: var(--muted);
    border-bottom: 1px solid var(--border);
}
.table td { color: var(--text-2); border-bottom-color: var(--border); }
.table tfoot th, .table tfoot td { background: var(--surface-2); color: var(--text); }
.table-hover tbody tr:hover td { background: var(--surface-2); }

.btn-ghost { background: var(--surface); color: var(--text-2); }
.rest-picker select { background: var(--surface); color: var(--text); }
.tabs, .period-picker { background: var(--surface); border-color: var(--border); }
.tab { color: var(--muted); }
.tab.active, .period-btn.active { background: var(--primary-bg); color: var(--primary); }
.auth-card { background: var(--surface); }
.auth-body { background: var(--bg); }
.modal-body, .modal-head, .modal-close { color: var(--text); }
.dl dt { color: var(--muted); }
.details-pre, pre, code { background: var(--surface-2); color: var(--text-2); border-color: var(--border); }
.empty { color: var(--muted); }
.timeline { border-color: var(--border); }
input[type=checkbox], input[type=radio] { accent-color: var(--primary); }
hr { border-color: var(--border); }

/* Grafikoni: mreža i natpisi moraju da se vide i na tamnoj podlozi */
canvas { color-scheme: normal; }

/* Tabele: lepljivo zaglavlje, tanke linije, red se ističe pri prelasku */
.data-table, .table, .pr-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.data-table thead th, .table thead th, .pr-table thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--surface-2); color: var(--muted);
    font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .055em; font-weight: 700;
    border-bottom: 1px solid var(--border); padding: 9px 12px; text-align: left; white-space: nowrap;
}
.data-table tbody td, .table tbody td, .pr-table tbody td {
    border-bottom: 1px solid var(--border); padding: 9px 12px; color: var(--text-2);
}
.data-table tbody tr:hover, .table tbody tr:hover, .pr-table tbody tr:hover { background: var(--surface-2); }
.pr-table tfoot td { background: var(--surface-2); border-top: 2px solid var(--border-strong); color: var(--text); }

/* ------------------------------------------------------------
   8. DUGMAD, POLJA, OZNAKE
   ------------------------------------------------------------ */
.btn {
    display: inline-flex; align-items: center; gap: 7px; justify-content: center;
    border-radius: var(--radius-sm); font-weight: 560; font-size: var(--fs-base);
    padding: 8px 14px; border: 1px solid transparent; cursor: pointer; font-family: inherit;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
                color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(.5px); }

.btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-xs); }
.btn-primary:hover { background: var(--primary-d); }
.btn-ghost { background: var(--surface); color: var(--text-2); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface-hover); border-color: var(--border-strong); color: var(--text); }
.btn-success { background: var(--success); color: #fff; }
.btn-danger  { background: var(--danger);  color: #fff; }
.btn-sm { padding: 6px 11px; font-size: var(--fs-sm); }
.btn-xs { padding: 4px 9px;  font-size: var(--fs-xs); }
.btn-lg { padding: 11px 20px; font-size: var(--fs-md); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

input[type=text], input[type=number], input[type=date], input[type=time], input[type=email],
input[type=password], input[type=search], select, textarea, .w-input {
    background: var(--surface); color: var(--text); border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-family: inherit; font-size: var(--fs-base);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
input:focus, select:focus, textarea:focus, .w-input:focus {
    outline: none; border-color: var(--primary); box-shadow: var(--ring);
}
::placeholder { color: var(--muted-2); }

.badge {
    display: inline-flex; align-items: center; gap: 5px; border-radius: var(--radius-pill);
    padding: 2px 9px; font-size: var(--fs-xs); font-weight: 650; line-height: 1.6;
}
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-info    { background: var(--info-bg);    color: var(--info); }
.badge-accent  { background: var(--accent-bg);  color: var(--accent); }
.badge-muted   { background: var(--surface-2);  color: var(--muted); border: 1px solid var(--border); }

.flash {
    border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); border: 1px solid transparent;
    display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-base);
}
.flash-success { background: var(--success-bg); color: var(--success); border-color: color-mix(in srgb, var(--success) 28%, transparent); }
.flash-error   { background: var(--danger-bg);  color: var(--danger);  border-color: color-mix(in srgb, var(--danger) 28%, transparent); }
.flash-warning { background: var(--warning-bg); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 28%, transparent); }
.flash-info    { background: var(--info-bg);    color: var(--info);    border-color: color-mix(in srgb, var(--info) 28%, transparent); }

/* Prozori se otvaraju po sredini ekrana.
   Osnovni stil ih je lepio uz vrh (`align-items: flex-start`), pa su na
   visokim ekranima izgledali kao da su odlutali gore. Uspravno preklapanje
   se rešava skrolom same podloge, a `margin: auto` drži kratke prozore
   na sredini i kad sadržaj stane bez skrola. */
.modal-overlay {
    background: rgba(8, 13, 24, .55); backdrop-filter: blur(3px);
    align-items: center; justify-content: center;
    padding: 24px 16px; overflow-y: auto; overscroll-behavior: contain;
}
.modal {
    background: var(--surface); border: 1px solid var(--border);
    box-shadow: var(--shadow-lg); border-radius: var(--radius-lg);
    margin: auto; max-height: none;
}
.modal-body { max-height: min(66vh, 620px); overflow-y: auto; }
.modal-head {
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 2;
    background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.modal .form-actions {
    position: sticky; bottom: 0; z-index: 2;
    background: var(--surface); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
}

@media (max-width: 640px) {
    .modal-overlay { padding: 12px 10px; align-items: flex-start; }
    .modal-body { max-height: none; }
}

.desk-tile, .wdg, .card { transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }

/* ------------------------------------------------------------
   9. KARNET — KALENDAR I MATRICA
   ------------------------------------------------------------ */
.cal { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--border); }
.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; }
.cal-head { background: var(--border); }
.cal-dow {
    background: var(--surface-2); padding: 7px 8px; text-align: center;
    font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--muted);
}
.cal-dow.we { color: var(--danger); }

.cday {
    background: var(--surface); min-height: 96px; padding: 7px 8px; display: flex;
    flex-direction: column; gap: 3px; color: var(--text); position: relative;
    transition: background-color var(--dur) var(--ease);
}
a.cday:hover { background: var(--surface-hover); text-decoration: none; }
.cday-out { background: var(--surface-2); opacity: .5; }
.cday-we { background: color-mix(in srgb, var(--danger-bg) 45%, var(--surface)); }
.cday-holiday { background: color-mix(in srgb, var(--warning-bg) 60%, var(--surface)); }
.cday-today { box-shadow: inset 0 0 0 2px var(--primary); }
.cday-num { font-size: var(--fs-md); font-weight: 650; letter-spacing: -.02em; }
.cday-today .cday-num { color: var(--primary); }
.cday-hours {
    align-self: flex-start; background: var(--primary-bg); color: var(--primary);
    border-radius: var(--radius-pill); padding: 1px 8px; font-size: var(--fs-xs); font-weight: 700;
}
.cday-hol { font-size: var(--fs-xs); color: var(--warning); font-weight: 600; line-height: 1.3; }
.cday-stat { display: flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--muted); }
.cday-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }

.legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); color: var(--muted); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-box { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--border); }

/* Matrica: radnici u redovima, dani u kolonama */
.matrix-wrap { overflow: auto; max-height: 74vh; border: 1px solid var(--border); border-radius: var(--radius); }
.matrix { border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.matrix th, .matrix td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 5px 6px; }
.matrix thead th { position: sticky; top: 0; z-index: 3; background: var(--surface-2); text-align: center; min-width: 34px; }
.matrix .m-name {
    position: sticky; left: 0; z-index: 2; background: var(--surface); text-align: left;
    min-width: 190px; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.matrix thead .m-name { z-index: 4; background: var(--surface-2); }
.matrix td { text-align: center; font-variant-numeric: tabular-nums; }
.matrix .m-we { background: color-mix(in srgb, var(--danger-bg) 35%, var(--surface)); }
.matrix .m-hol { background: color-mix(in srgb, var(--warning-bg) 45%, var(--surface)); }
.matrix .m-sum { background: var(--surface-2); font-weight: 700; color: var(--text); }
.matrix tbody tr:hover td { background: var(--surface-hover); }
.matrix tbody tr:hover .m-name { background: var(--surface-hover); }

/* Stavka blagajne iz pazara koji još nije evidentiran — privremena je,
   pa se vidi na prvi pogled. Uz boju ide i natpis u samom redu. */
tr.cash-pending > td { background: color-mix(in srgb, var(--danger-bg) 45%, var(--surface)); }
tr.cash-pending:hover > td { background: color-mix(in srgb, var(--danger-bg) 65%, var(--surface)); }

/* ------------------------------------------------------------
   Pozajmica — pregled jedne pozajmice
   ------------------------------------------------------------ */

/* Traka otplate: koliko je vraćeno u odnosu na ceo iznos */
.loan-bar {
    height: 22px; border-radius: 999px; overflow: hidden;
    background: var(--surface-2); border: 1px solid var(--border);
}
.loan-bar-fill {
    height: 100%; min-width: 6px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--primary) 100%);
    display: flex; align-items: center; justify-content: flex-end;
    padding-right: 8px; transition: width var(--dur) var(--ease);
}
.loan-bar-fill.is-done { background: var(--success); }
.loan-bar-fill span {
    color: #fff; font-size: var(--fs-xs); font-weight: 700;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Tok pozajmice — nastanak, povrati, zatvaranje */
.loan-tl { list-style: none; margin: 0; padding: 0 0 0 6px; position: relative; }
.loan-tl > li { position: relative; padding: 0 0 var(--sp-4) 26px; }
.loan-tl > li::before {
    content: ''; position: absolute; left: 6px; top: 14px; bottom: -2px;
    width: 2px; background: var(--border);
}
.loan-tl > li:last-child { padding-bottom: 0; }
.loan-tl > li:last-child::before { display: none; }
.loan-tl .tl-dot {
    position: absolute; left: 0; top: 4px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--surface); border: 3px solid var(--muted-2);
}
.loan-tl .tl-start       .tl-dot { border-color: var(--primary); }
.loan-tl .tl-payment     .tl-dot { border-color: var(--success); }
.loan-tl .tl-settled     .tl-dot { border-color: var(--success); background: var(--success); }
.loan-tl .tl-written_off .tl-dot { border-color: var(--danger);  background: var(--danger); }
.loan-tl .tl-body { font-size: var(--fs-base); line-height: 1.45; }

/* Red pozajmice u spisku vodi na njen pregled */
tr.loan-row { cursor: pointer; }
tr.loan-row:hover > td { background: var(--surface-hover); }

/* Lokal u unosu pazara — prikazuje se, ne bira se */
.pe-rest-fixed {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface-2); min-height: 40px;
}
.pe-rest-fixed .rc-name { font-weight: 650; font-size: var(--fs-md); }

/* Stanje AI-ja uz naslov — vidi se pre nego što se predlog zatraži */
.ai-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px;
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .01em;
    text-transform: none;
}
.ai-chip.ai-on  { background: var(--success-bg); color: var(--success); }
.ai-chip.ai-off { background: var(--surface-2);  color: var(--muted); border: 1px solid var(--border); }

/* Red kome je AI predložio kategoriju — vidi se šta treba proveriti */
tr.ai-picked > td { background: color-mix(in srgb, var(--info-bg) 55%, var(--surface)); }
tr.ai-picked .cat-select { border-color: var(--info); }

/* Mesec je glavni podatak na stranici karneta — piše se krupno */
.month-title {
    display: flex; align-items: baseline; gap: var(--sp-3);
    font-size: 30px; letter-spacing: -.02em; line-height: 1.15;
}
.month-title .ico { align-self: center; color: var(--muted); }
.month-title .mt-name { font-weight: 750; }
.month-title .mt-year { font-weight: 400; color: var(--muted); font-size: 22px; }

/* Krupniji mesečni pregled — u njega se i unosi, pa ćelija mora da bude
   dovoljno velika da se u nju pogodi mišem bez zagledanja */
.matrix-lg { max-height: 78vh; }
.matrix-lg .matrix { font-size: var(--fs-base); }
.matrix-lg .matrix th, .matrix-lg .matrix td { padding: 8px 6px; }
.matrix-lg .matrix thead th { min-width: 44px; }
.matrix-lg .matrix .m-name { min-width: 220px; max-width: 260px; }
.matrix-lg .matrix tbody td { height: 40px; }
.matrix-lg .m-daynum { font-size: var(--fs-md); font-weight: 700; line-height: 1.1; }
.matrix-lg .m-dow { font-size: 10px; opacity: .6; font-weight: 500; }
.matrix-lg .m-role {
    font-size: 11px; color: var(--muted); font-weight: 400;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.matrix-lg .m-name a { color: var(--text); font-weight: 600; }

/* Dan koji se može uneti — vidi se da je ćelija živa */
.matrix .m-click { cursor: pointer; transition: background-color .12s, box-shadow .12s; }
.matrix .m-click:hover {
    background: var(--primary-bg) !important;
    box-shadow: inset 0 0 0 2px var(--primary);
}
.matrix .m-empty { color: var(--muted-2); opacity: .45; }
.matrix .m-click:hover .m-empty { opacity: 1; color: var(--primary); }
.matrix .m-ot { color: var(--warning); font-weight: 700; }
.matrix .m-today { box-shadow: inset 0 0 0 2px var(--primary); }
.matrix .m-locked { opacity: .55; cursor: not-allowed; }

/* ------------------------------------------------------------
   Kadrovska evidencija
   ------------------------------------------------------------ */
.emp-th {
    padding: 10px 16px; font-size: var(--fs-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
    background: var(--surface-2); white-space: nowrap;
}
.emp-avatar {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 13px; font-weight: 700;
}
/* Privremeno-povremeni imaju drugačiji avatar — ne meša se sa stalnim */
.emp-avatar.is-pp {
    background: var(--surface-2); color: var(--accent);
    border: 2px dashed var(--accent);
}
tr.emp-pp > td { background: color-mix(in srgb, var(--accent-bg) 22%, var(--surface)); }
tr.emp-pp:hover > td { background: color-mix(in srgb, var(--accent-bg) 38%, var(--surface)); }

/* Izabrana kartica pokazatelja */
.stat-card.is-active { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }

/* Zaposleni koji se prečesto plaća iz pazara — red se vidi na prvi pogled.
   Boja nije jedini nosilac značenja: uz ime stoji i znak uzvika. */
tr.emp-temp-alert > td { background: color-mix(in srgb, var(--danger-bg) 55%, var(--surface)); }
tr.emp-temp-alert:hover > td { background: color-mix(in srgb, var(--danger-bg) 75%, var(--surface)); }
.emp-temp-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 17px; height: 17px; margin-right: 5px; border-radius: 50%;
    background: var(--danger); color: #fff; font-size: 11px; font-weight: 800;
    vertical-align: -.16em;
}
.data-table tbody tr:not(.emp-temp-alert):hover > td { background: var(--surface-hover); }

/* Dan van perioda angažovanja — čoveka tad nije ni bilo, pa se ne otvara */
.matrix .m-off {
    background: repeating-linear-gradient(
        -45deg, transparent, transparent 4px,
        color-mix(in srgb, var(--muted-2) 22%, transparent) 4px,
        color-mix(in srgb, var(--muted-2) 22%, transparent) 8px);
    cursor: not-allowed;
}
.matrix .m-off .m-empty { opacity: .35; }

/* Oznake statusa u karnetu — uz slovnu oznaku, ne samo boju */
.st { display: inline-block; min-width: 22px; border-radius: 4px; padding: 1px 4px; font-size: var(--fs-xs); font-weight: 700; }
.st-prisutan  { background: var(--success-bg); color: var(--success); }
.st-godisnji  { background: var(--info-bg);    color: var(--info); }
.st-bolovanje { background: var(--warning-bg); color: var(--warning); }
.st-placeno   { background: var(--accent-bg);  color: var(--accent); }
.st-neplaceno { background: var(--danger-bg);  color: var(--danger); }
.st-praznik   { background: var(--warning-bg); color: var(--warning); }
.st-slobodan  { background: var(--surface-2);  color: var(--muted); }
.st-odsutan   { background: var(--danger-bg);  color: var(--danger); }
/* Dan privremeno-povremenog radnika — preuzet iz pazara, ne unosi se */
.st-pp        { background: var(--accent-bg);  color: var(--accent); font-weight: 800; }
a.st-pp:hover { text-decoration: none; filter: brightness(.94); }

/* Segmentirani prekidač — za ovlašćenja (kao uloga / dozvoli / zabrani) */
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span {
    display: block; padding: 5px 12px; font-size: var(--fs-sm); font-weight: 600;
    color: var(--muted); cursor: pointer; white-space: nowrap; background: var(--surface);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.seg label + label span { border-left: 1px solid var(--border); }
.seg span:hover { background: var(--surface-hover); }
.seg input:checked + span { background: var(--surface-2); color: var(--text); }
.seg .seg-allow input:checked + span { background: var(--success-bg); color: var(--success); }
.seg .seg-deny  input:checked + span { background: var(--danger-bg);  color: var(--danger); }
.seg input:focus-visible + span { box-shadow: inset var(--ring); }

/* Transakcije: prikaz po kategorijama.
   Sažeti red grupe i proširene stavke prate temu; ranije su bili upisani
   kao #fafafa i ostajali svetli i u tamnoj temi. */
:root { --bg2: var(--surface-2); }
tr.cat-summary-row > td { background: var(--surface-2); }
tr.cat-summary-row:hover > td { background: var(--surface-hover); }
tr.cat-detail > td { background: var(--surface); }
tr.cat-detail:hover > td { background: var(--surface-2); }

/* Red na koji je korisnik doveden vezom iz drugog modula */
tr.is-open-target > td {
    background: color-mix(in srgb, var(--accent-bg) 70%, var(--surface)) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* Red ovlašćenja */
.perm-row {
    display: flex; align-items: center; gap: var(--sp-4); padding: 10px var(--sp-4);
    border-bottom: 1px solid var(--border);
}
.perm-row:last-child { border-bottom: none; }
.perm-row.has-override { background: color-mix(in srgb, var(--accent-bg) 55%, var(--surface)); }
.perm-info { flex: 1; min-width: 0; }
.perm-name { font-weight: 600; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.perm-desc { color: var(--muted); font-size: var(--fs-sm); margin: 2px 0 0; }
.perm-slug { font-family: var(--font-num); font-size: var(--fs-xs); color: var(--muted-2); }
.perm-from { font-size: var(--fs-xs); font-weight: 600; padding: 1px 7px; border-radius: var(--radius-pill); }
.perm-from-yes { background: var(--success-bg); color: var(--success); }
.perm-from-no  { background: var(--surface-2);  color: var(--muted); }

/* ------------------------------------------------------------
   10. DOPUNE ZA TAMNU TEMU
   ------------------------------------------------------------
   Starije stranice imaju boje upisane pravo u `style` atribut.
   Te vrednosti ne mogu da prate temu, pa se ovde preslikavaju.
   Novi kod treba da koristi promenljive, a ne ugrađene boje.
   ------------------------------------------------------------ */
:root[data-theme="dark"] [style*="background:#dcfce7"],
:root[data-theme="dark"] [style*="background:#f0fdf4"] { background: var(--success-bg) !important; color: var(--success) !important; }
:root[data-theme="dark"] [style*="background:#fef2f2"],
:root[data-theme="dark"] [style*="background:#fff5f5"],
:root[data-theme="dark"] [style*="background:#fff1f1"] { background: var(--danger-bg) !important; color: var(--danger) !important; }
:root[data-theme="dark"] [style*="background:#fef3c7"],
:root[data-theme="dark"] [style*="background:#fffbeb"],
:root[data-theme="dark"] [style*="background:#fef9c3"],
:root[data-theme="dark"] [style*="background:#fff9f0"],
:root[data-theme="dark"] [style*="background:#fef9ec"] { background: var(--warning-bg) !important; color: var(--warning) !important; }
:root[data-theme="dark"] [style*="background:#e0f2fe"],
:root[data-theme="dark"] [style*="background:#eff6ff"] { background: var(--info-bg) !important; color: var(--info) !important; }
:root[data-theme="dark"] [style*="background:#f5f3ff"],
:root[data-theme="dark"] [style*="background:#faf5ff"],
:root[data-theme="dark"] [style*="background:#ede9fe"] { background: var(--primary-bg) !important; color: var(--primary) !important; }
:root[data-theme="dark"] [style*="background:#f8fafc"],
:root[data-theme="dark"] [style*="background:#f9fafb"],
:root[data-theme="dark"] [style*="background:#fafafa"],
:root[data-theme="dark"] [style*="background:#f3f4f6"],
:root[data-theme="dark"] [style*="background:#f1f5f9"] { background: var(--surface-2) !important; }
:root[data-theme="dark"] [style*="background:#fff"]:not([style*="background:#fff5f5"]):not([style*="background:#fff1f1"]):not([style*="background:#fff9f0"]) { background: var(--surface) !important; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) [style*="background:#dcfce7"],
    :root:not([data-theme="light"]) [style*="background:#f0fdf4"] { background: var(--success-bg) !important; color: var(--success) !important; }
    :root:not([data-theme="light"]) [style*="background:#fef2f2"],
    :root:not([data-theme="light"]) [style*="background:#fff5f5"],
    :root:not([data-theme="light"]) [style*="background:#fff1f1"] { background: var(--danger-bg) !important; color: var(--danger) !important; }
    :root:not([data-theme="light"]) [style*="background:#fef3c7"],
    :root:not([data-theme="light"]) [style*="background:#fffbeb"],
    :root:not([data-theme="light"]) [style*="background:#fef9c3"],
    :root:not([data-theme="light"]) [style*="background:#fff9f0"],
    :root:not([data-theme="light"]) [style*="background:#fef9ec"] { background: var(--warning-bg) !important; color: var(--warning) !important; }
    :root:not([data-theme="light"]) [style*="background:#e0f2fe"],
    :root:not([data-theme="light"]) [style*="background:#eff6ff"] { background: var(--info-bg) !important; color: var(--info) !important; }
    :root:not([data-theme="light"]) [style*="background:#f5f3ff"],
    :root:not([data-theme="light"]) [style*="background:#faf5ff"],
    :root:not([data-theme="light"]) [style*="background:#ede9fe"] { background: var(--primary-bg) !important; color: var(--primary) !important; }
    :root:not([data-theme="light"]) [style*="background:#f8fafc"],
    :root:not([data-theme="light"]) [style*="background:#f9fafb"],
    :root:not([data-theme="light"]) [style*="background:#fafafa"],
    :root:not([data-theme="light"]) [style*="background:#f3f4f6"],
    :root:not([data-theme="light"]) [style*="background:#f1f5f9"] { background: var(--surface-2) !important; }
    :root:not([data-theme="light"]) [style*="background:#fff"]:not([style*="background:#fff5f5"]):not([style*="background:#fff1f1"]):not([style*="background:#fff9f0"]) { background: var(--surface) !important; }
}

/* Tamna tema: ugrađene tamne boje teksta postaju nečitke */
:root[data-theme="dark"] [style*="color:#166534"] { color: var(--success) !important; }
:root[data-theme="dark"] [style*="color:#991b1b"] { color: var(--danger)  !important; }
:root[data-theme="dark"] [style*="color:#92400e"],
:root[data-theme="dark"] [style*="color:#b45309"] { color: var(--warning) !important; }
:root[data-theme="dark"] [style*="color:#6b7280"],
:root[data-theme="dark"] [style*="color:#9ca3af"] { color: var(--muted) !important; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) [style*="color:#166534"] { color: var(--success) !important; }
    :root:not([data-theme="light"]) [style*="color:#991b1b"] { color: var(--danger)  !important; }
    :root:not([data-theme="light"]) [style*="color:#92400e"],
    :root:not([data-theme="light"]) [style*="color:#b45309"] { color: var(--warning) !important; }
    :root:not([data-theme="light"]) [style*="color:#6b7280"],
    :root:not([data-theme="light"]) [style*="color:#9ca3af"] { color: var(--muted) !important; }
}

/* ------------------------------------------------------------
   Zbijena gustina — više redova na ekranu, isti raspored
   ------------------------------------------------------------ */
body.is-compact {
    --fs-base: 12.5px; --fs-sm: 11.5px; --fs-xs: 10.5px;
    --fs-md: 14px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 22px;
    --sp-3: 9px; --sp-4: 12px; --sp-5: 15px; --sp-6: 18px;
}
body.is-compact .content { padding: 14px 16px; }
body.is-compact .card-body { padding: 12px; }
body.is-compact .data-table tbody td,
body.is-compact .table tbody td,
body.is-compact .pr-table tbody td { padding: 5px 9px; }
body.is-compact .data-table thead th,
body.is-compact .table thead th,
body.is-compact .pr-table thead th { padding: 6px 9px; }
body.is-compact .nav-item { padding: 6px 9px; }
body.is-compact .stat-card { padding: 11px 12px; }
body.is-compact .btn { padding: 6px 11px; }
body.is-compact .cday { min-height: 78px; }

/* ------------------------------------------------------------
   11. PRISTUPAČNOST I ŠTAMPA
   ------------------------------------------------------------ */
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }
a:focus-visible, button:focus-visible, .nav-item:focus-visible, .topnav-item:focus-visible { box-shadow: var(--ring); }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    background: var(--primary); color: var(--on-primary); padding: 10px 16px;
    border-radius: 0 0 var(--radius) 0; font-weight: 600;
}
.skip-link:focus { left: 0; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important; scroll-behavior: auto !important;
    }
}

@media print {
    :root { --surface: #fff; --bg: #fff; --text: #000; --border: #ccc; }
    .sidebar, .topbar, .topnav, .page-actions, .no-print { display: none !important; }
    /* Na štampi okvir prestaje da bude ekran — sve mora da se izlije na papir */
    .app { display: block; height: auto; overflow: visible; }
    .main { height: auto; overflow: visible; }
    .content { overflow: visible; }
    .card { box-shadow: none; border: 1px solid #ccc; }
}

/* ------------------------------------------------------------
   Uski ekrani
   ------------------------------------------------------------ */
@media (max-width: 900px) {
    .app { grid-template-columns: 1fr; }
    .sidebar { display: none; }
    .content { padding: var(--sp-4); }
    .topbar { flex-wrap: wrap; row-gap: var(--sp-2); }
}