/* ============================================================
   Prijevoz radnika — app.css
   ============================================================ */

/* ── VARIJABLE ──────────────────────────────────────────────── */
:root {
    --blue:   #1e3a5f;
    --blue2:  #2d5a8e;
    --orange: #e8621a;
    --or2:    #f07940;
    --green:  #2d7d46;
    --red:    #c0392b;
    --yellow: #b7770d;
    --gray:   #64748b;
    --bg:     #f1f5f9;
    --border: #e2e8f0;
    --text:   #1e293b;
    --r:      8px;
    --sh:     0 1px 8px rgba(0,0,0,.08);
    --sh2:    0 4px 20px rgba(0,0,0,.13);
    --sw:     258px;
    --th:     58px;
}

/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body {
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
    background:var(--bg); color:var(--text);
    font-size:14px; line-height:1.6;
}
a { color:inherit; text-decoration:none; }
button, input, select, textarea {
    font-family:inherit;
}
img { max-width:100%; }

/* ── LOGIN ──────────────────────────────────────────────────── */
.login-wrap {
    min-height:100vh; display:flex;
    align-items:center; justify-content:center;
    padding:20px;
    background:linear-gradient(135deg,#0d1f33 0%,#1e3a5f 60%,#2d5a8e 100%);
}
.login-card {
    background:#fff; border-radius:16px; padding:36px;
    width:100%; max-width:400px;
    box-shadow:0 24px 64px rgba(0,0,0,.3);
}
.login-logo { text-align:center; margin-bottom:26px; }
.app-name   { font-size:24px; font-weight:800; color:var(--blue); }
.app-name span { color:var(--orange); }
.login-logo p  { color:var(--gray); font-size:13px; margin-top:4px; }

/* ── SIDEBAR ────────────────────────────────────────────────── */
.sidebar {
    position:fixed; top:0; left:0;
    width:var(--sw); height:100vh;
    background:var(--blue); color:#fff;
    display:flex; flex-direction:column;
    z-index:200; transition:transform .25s ease;
}
.sb-head { padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.1); flex-shrink:0; }
.sb-logo-img {
    max-height:48px; max-width:180px;
    object-fit:contain; border-radius:4px;
    display:block; margin-bottom:6px;
}
.sb-app { font-size:17px; font-weight:800; }
.sb-app span { color:var(--or2); }
.sb-school {
    font-size:11px; opacity:.55; margin-top:2px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sb-user {
    padding:12px 18px; display:flex; align-items:center; gap:10px;
    border-bottom:1px solid rgba(255,255,255,.08); flex-shrink:0;
}
.sb-avatar {
    width:34px; height:34px; border-radius:50%;
    background:var(--orange);
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:13px; flex-shrink:0;
}
.sb-uname { font-size:12.5px; font-weight:600; }
.sb-urole { font-size:11px; opacity:.5; }
.sb-nav   { flex:1; padding:6px 0; overflow-y:auto; min-height:0; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.15) transparent; }
.sb-nav::-webkit-scrollbar { width:4px; }
.sb-nav::-webkit-scrollbar-track { background:transparent; }
.sb-nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.15); border-radius:2px; }
.sb-sec   {
    padding:10px 18px 3px; font-size:10px; font-weight:700;
    text-transform:uppercase; letter-spacing:.8px; opacity:.35;
}
.sb-link {
    display:flex; align-items:center; gap:9px; padding:11px 18px;
    font-size:13px; color:rgba(255,255,255,.7);
    border-left:3px solid transparent; transition:all .15s;
}
.sb-link:hover  { background:rgba(255,255,255,.08); color:#fff; }
.sb-link.active {
    background:rgba(232,98,26,.22); color:#fff;
    border-left-color:var(--orange);
    border-radius:0 8px 8px 0;
    margin-right:10px;
    font-weight:700;
}
.sb-link .ico   { font-size:15px; width:20px; text-align:center; flex-shrink:0; }
.sb-foot {
    padding:12px 16px;
    border-top:1px solid rgba(255,255,255,.12);
    flex-shrink:0;
}

/* ── TOPBAR ─────────────────────────────────────────────────── */
.topbar {
    position:fixed; top:0; left:var(--sw); right:0; height:var(--th);
    background:#fff; border-bottom:1px solid var(--border);
    display:flex; align-items:center; padding:0 22px; gap:10px;
    z-index:100; box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.tb-title {
    font-size:15px; font-weight:700; color:var(--blue);
    flex:1; min-width:0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tb-right  { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.hamburger {
    display:none; background:none; border:none; cursor:pointer;
    padding:6px; border-radius:var(--r); color:var(--blue);
    font-size:22px; flex-shrink:0; line-height:1;
}

/* ── MAIN CONTENT ───────────────────────────────────────────── */
.main {
    margin-left:var(--sw);
    padding-top:calc(var(--th) + 24px);
    padding-right:24px; padding-left:24px; padding-bottom:40px;
    min-height:100vh;
}
.overlay {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,.45); z-index:150;
}

/* ── ALERTS ─────────────────────────────────────────────────── */
.alert {
    padding:10px 14px; border-radius:var(--r);
    margin-bottom:12px; font-size:13px;
    font-weight:500; border-left:4px solid;
}
.alert.ok   { background:#ecfdf5; color:#166534; border-color:#22c55e; }
.alert.err  { background:#fef2f2; color:#991b1b; border-color:#ef4444; }
.alert.info { background:#eff6ff; color:#1e40af; border-color:#3b82f6; }
.alert.warn { background:#fffbeb; color:#92400e; border-color:#f59e0b; }

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn {
    display:inline-flex; align-items:center; justify-content:center;
    gap:6px; padding:8px 16px; border-radius:var(--r);
    font-size:13.5px; font-weight:600; cursor:pointer;
    border:2px solid transparent; transition:all .15s;
    white-space:nowrap; flex-shrink:0;
    text-decoration:none; line-height:1.4;
}
.btn-p  { background:var(--blue);    color:#fff; border-color:var(--blue); }
.btn-p:hover  { background:var(--blue2); border-color:var(--blue2); }
.btn-o  { background:var(--orange);  color:#fff; border-color:var(--orange); }
.btn-o:hover  { background:var(--or2);   border-color:var(--or2); }
.btn-g  { background:var(--green);   color:#fff; border-color:var(--green); }
.btn-g:hover  { filter:brightness(1.12); }
.btn-r  { background:var(--red);     color:#fff; border-color:var(--red); }
.btn-r:hover  { filter:brightness(1.12); }
.btn-gh { background:transparent; border-color:var(--border); color:var(--text); }
.btn-gh:hover { border-color:var(--blue2); color:var(--blue); }
.btn-sm  { padding:5px 12px; font-size:12px; }
.btn-block { width:100%; justify-content:center; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn:active:not(:disabled) { transform:scale(.97); }
.btn-ico {
    background:none; border:none; cursor:pointer; padding:6px;
    border-radius:var(--r); color:var(--gray);
    font-size:15px; transition:all .15s;
    flex-shrink:0; line-height:1; display:inline-flex;
    align-items:center; justify-content:center;
}
.btn-ico:hover { background:var(--bg); color:var(--blue); }

/* ── CARDS ──────────────────────────────────────────────────── */
.card { background:#fff; border-radius:var(--r); box-shadow:var(--sh); }
.card-head {
    padding:12px 18px; border-bottom:1px solid var(--border);
    display:flex; align-items:center; gap:10px;
    flex-wrap:wrap; min-height:50px;
}
.card-title {
    font-size:13.5px; font-weight:700; color:var(--blue);
    flex:1; min-width:120px;
}
.card-head > .btn,
.card-head > a.btn,
.card-head > button.btn { flex-shrink:0; }
.card-body { padding:20px; }

/* ── FORMS ──────────────────────────────────────────────────── */
.fg { margin-bottom:13px; }
.fg label {
    display:block; font-size:12px; font-weight:600;
    color:var(--text); margin-bottom:4px;
}
.fg input:not([type=checkbox]):not([type=radio]),
.fg select,
.fg textarea {
    width:100%; padding:8px 11px;
    border:2px solid var(--border); border-radius:var(--r);
    font-size:14px; color:var(--text); background:#fff;
    transition:border-color .15s; outline:none;
}
.fg input:not([type=checkbox]):not([type=radio]):focus,
.fg select:focus,
.fg textarea:focus { border-color:var(--blue2); }
.fg .hint { font-size:11.5px; color:var(--gray); margin-top:3px; }
.fg-row2  { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fg-row3  { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.fg-check {
    display:flex; align-items:center; gap:10px;
    cursor:pointer; font-size:13.5px; font-weight:500;
    min-height:36px;
}
.fg-check input[type=checkbox],
.fg-check input[type=radio] {
    width:18px; height:18px; flex-shrink:0;
    cursor:pointer; accent-color:var(--blue); margin:0;
}

/* ── TABLES ─────────────────────────────────────────────────── */
.tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tbl { width:100%; border-collapse:collapse; min-width:480px; }
.tbl th {
    padding:9px 13px; text-align:left;
    font-size:11px; font-weight:700;
    text-transform:uppercase; letter-spacing:.4px;
    color:var(--gray); background:#f8fafc;
    border-bottom:2px solid var(--border);
}
.tbl td {
    padding:10px 13px; border-bottom:1px solid var(--border);
    font-size:13.5px; vertical-align:middle;
}
.tbl tr:last-child td { border-bottom:none; }
.tbl tr:hover td     { background:#f4f6f8; }
.tbl tfoot td { background:#f1f5f9; font-weight:700; padding:10px 13px; }
.tr { text-align:right; }

/* ── MODALS ─────────────────────────────────────────────────── */
.modal-bg {
    position:fixed; inset:0; background:rgba(15,25,45,.65);
    z-index:500; display:flex;
    align-items:center; justify-content:center;
    padding:16px; backdrop-filter:blur(3px);
}
.modal {
    background:#fff; border-radius:14px;
    width:100%; max-width:520px; max-height:90vh;
    display:flex; flex-direction:column;
    box-shadow:0 24px 64px rgba(0,0,0,.25);
    animation:mIn .2s ease;
}
.modal.lg { max-width:700px; }
@keyframes mIn {
    from { transform:translateY(16px); opacity:0; }
    to   { transform:none; opacity:1; }
}
.modal-head {
    padding:14px 18px; border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
    flex-shrink:0;
}
.modal-head h3 { font-size:15px; font-weight:700; color:var(--blue); }
.modal-body    { padding:18px; overflow-y:auto; flex:1; }
.modal-foot    {
    padding:12px 18px; border-top:1px solid var(--border);
    display:flex; gap:8px; justify-content:flex-end; flex-shrink:0;
}

/* ── BADGES ─────────────────────────────────────────────────── */
.badge {
    display:inline-block; padding:2px 8px;
    border-radius:20px; font-size:10.5px;
    font-weight:700; text-transform:uppercase;
    letter-spacing:.3px; white-space:nowrap;
}
.badge-blue   { background:#dbeafe; color:#1e40af; }
.badge-green  { background:#dcfce7; color:#166534; }
.badge-orange { background:#fff7ed; color:#c2410c; }
.badge-gray   { background:#f1f5f9; color:#475569; }
.badge-red    { background:#fef2f2; color:#991b1b; }
.badge-pro    { background:var(--orange); color:#fff; }
.badge-free   { background:var(--gray);   color:#fff; }

/* ── STATS GRID ─────────────────────────────────────────────── */
.stats {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px; margin-bottom:18px;
}
.stat {
    background:#fff; border-radius:var(--r);
    padding:14px 16px; box-shadow:var(--sh);
    display:flex; align-items:center; gap:12px;
}
.stat-ico { font-size:24px; flex-shrink:0; }
.stat-val { font-size:20px; font-weight:800; color:var(--blue); line-height:1.1; }
.stat-lbl { font-size:11px; color:var(--gray); margin-top:2px; }
.stat.or  { border-left:3px solid var(--orange); }
.stat.gr  { border-left:3px solid var(--green); }
.stat.ye  { border-left:3px solid var(--yellow); }
.stat     { border-left:3px solid var(--blue); }
.stat.or .stat-val { color:var(--orange); }
.stat.gr .stat-val { color:var(--green); }
.stat.ye .stat-val { color:var(--yellow); }

/* ── PAGE HEADER ────────────────────────────────────────────── */
.ph {
    display:flex; align-items:center;
    gap:12px; flex-wrap:wrap;
    margin-bottom:20px;
    padding-bottom:16px; border-bottom:1px solid var(--border);
}
.ph-left { flex:1; min-width:0; }
.ph h1   { font-size:22px; font-weight:800; color:var(--blue); line-height:1.2; }
.ph p    { font-size:12.5px; color:var(--gray); margin-top:3px; }
.ph > .btn,
.ph > a.btn,
.ph > button,
.ph > div.flex { flex-shrink:0; }

/* ── MISC UTILITIES ─────────────────────────────────────────── */
.sep      { height:1px; background:var(--border); margin:14px 0; }
.muted    { color:var(--gray); }
.flex     { display:flex; }
.gap2     { gap:8px; }
.items-c  { align-items:center; }
.mt2      { margin-top:8px; }
.mt4      { margin-top:16px; }
.mb4      { margin-bottom:16px; }
.sec-label {
    font-size:10.5px; font-weight:700;
    text-transform:uppercase; letter-spacing:.7px; color:var(--gray);
    margin:14px 0 9px; padding-bottom:5px;
    border-bottom:1px solid var(--border);
}
.empty    { text-align:center; padding:40px 20px; color:var(--gray); }
.empty .ei { font-size:40px; margin-bottom:8px; display:block; }
.grid2    { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }

/* ── TOAST ──────────────────────────────────────────────────── */
#toast {
    position:fixed; bottom:20px; right:20px;
    padding:10px 18px; border-radius:var(--r);
    font-size:13.5px; font-weight:600; color:#fff;
    box-shadow:var(--sh2);
    transform:translateY(60px); opacity:0;
    transition:all .22s ease;
    z-index:9999; pointer-events:none; max-width:300px;
}

/* ── KALENDAR ───────────────────────────────────────────────── */
.kal-nav {
    display:flex; align-items:center; gap:10px;
    margin-bottom:12px; flex-wrap:wrap;
}
.kal-nav h2 {
    font-size:17px; font-weight:700; color:var(--blue);
    min-width:170px; text-align:center;
}
.kal-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.kal { width:100%; border-collapse:collapse; min-width:560px; }
.kal th {
    padding:7px 3px; text-align:center;
    font-size:11px; font-weight:700;
    text-transform:uppercase; letter-spacing:.3px; color:var(--gray);
    border-bottom:2px solid var(--border);
}
.kal td { padding:2px; }
.kd {
    border-radius:var(--r); padding:6px 5px; min-height:76px;
    position:relative; border:2px solid var(--border);
    background:#fff; transition:all .15s; user-select:none;
}
.kd.klik          { cursor:pointer; }
.kd.klik:hover    { border-color:var(--blue2); box-shadow:0 2px 8px rgba(30,58,95,.12); }
.kd.vikend        { background:#f8fafc; border-color:#e8edf2; opacity:.6; }
.kd.praznik       { background:#fffbeb; border-color:#fde68a; }
.kd.aktivan       { background:#f0fdf4; border:2px dashed var(--green); }
.kd.rodsat        { background:#eff6ff; border:2px dashed #3b82f6; }
.kd-br            { font-size:12px; font-weight:700; margin-bottom:2px; }
.kd.vikend .kd-br { color:var(--gray); }
.kd.aktivan .kd-br { color:var(--green); }
.kd.rodsat .kd-br  { color:#3b82f6; }
.kd-ruta  { font-size:10px; color:var(--gray); line-height:1.3; word-break:break-word; }
.kd-badge { display:inline-block; padding:1px 5px; border-radius:10px; font-size:9px; font-weight:700; text-transform:uppercase; margin-top:2px; }
.kb-ok    { background:var(--green);  color:#fff; }
.kb-rod   { background:#3b82f6;       color:#fff; }
.kb-pra   { background:var(--yellow); color:#fff; }
.kb-vkd   { background:var(--gray);   color:#fff; }
.kd-cest  { font-size:9.5px; color:var(--orange); font-weight:600; margin-top:1px; }
.btn-tjd  {
    width:26px; height:26px; border-radius:5px;
    border:2px solid var(--border); background:#fff; color:var(--gray);
    font-size:9px; font-weight:700; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:all .15s; flex-shrink:0;
}
.btn-tjd:hover { background:var(--blue); border-color:var(--blue); color:#fff; }
.kal-leg {
    display:flex; gap:10px; flex-wrap:wrap; padding:9px 13px;
    background:#fff; border-radius:var(--r);
    border:1px solid var(--border);
    margin-bottom:12px; font-size:11.5px; color:var(--gray);
}
.leg-i { display:flex; align-items:center; gap:5px; }
.leg-d { width:12px; height:12px; border-radius:3px; flex-shrink:0; }

/* ── BOTTOM NAV (mobitel) ───────────────────────────────────── */
.bnav {
    display:none; position:fixed;
    bottom:0; left:0; right:0; height:60px;
    background:#fff; border-top:1px solid var(--border);
    box-shadow:0 -2px 8px rgba(0,0,0,.08); z-index:190;
}
.bnav-inner { display:flex; height:100%; }
.bnav-item  {
    flex:1; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:2px;
    text-decoration:none; color:var(--gray);
    font-size:9.5px; font-weight:600;
    text-transform:uppercase; letter-spacing:.3px;
    border:none; background:none; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}
.bnav-item.active { color:var(--orange); }
.bnav-item .bnav-ico { font-size:21px; line-height:1; }

/* ── ORS AUTOCOMPLETE ───────────────────────────────────────── */
.ors-ac-wrap { position:relative; }
.ors-ac-drop {
    display:none; position:absolute; top:100%; left:0; right:0;
    background:#fff; border:2px solid var(--blue2); border-top:none;
    border-radius:0 0 var(--r) var(--r);
    z-index:600; max-height:220px; overflow-y:auto; box-shadow:var(--sh2);
}
.ors-ac-item  { padding:9px 12px; font-size:13px; cursor:pointer; border-bottom:1px solid var(--border); line-height:1.3; }
.ors-ac-item:hover  { background:var(--bg); }
.ors-ac-item strong { display:block; color:var(--text); }
.ors-ac-item small  { color:var(--gray); font-size:11px; }
.ors-ac-ok    { border-color:var(--green) !important; }

/* ── TABLET ≤900px ──────────────────────────────────────────── */
@media (max-width:900px) {
    :root { --sw:0px; }
    .sidebar { transform:translateX(-270px); width:270px; }
    .sidebar.open { transform:translateX(0); box-shadow:4px 0 24px rgba(0,0,0,.3); }
    .topbar   { left:0; padding:0 16px; }
    .main     { margin-left:0; padding:calc(var(--th) + 18px) 16px 30px; }
    .hamburger { display:flex; }
    .overlay.on { display:block; }
    .stats    { grid-template-columns:1fr 1fr; gap:10px; }
    .grid2    { grid-template-columns:1fr; }
    .fg-row2, .fg-row3 { grid-template-columns:1fr; }
    .kal-nav h2 { min-width:auto; font-size:15px; }
}

/* ── MOBITEL ≤480px ─────────────────────────────────────────── */
@media (max-width:480px) {
    :root { --th:52px; }

    /* Bottom nav */
    .bnav  { display:flex; }
    .main  { padding-bottom:calc(24px + 60px); }
    #toast { bottom:calc(16px + 60px); right:12px; left:12px; max-width:none; text-align:center; }

    /* Topbar */
    .topbar    { height:52px; padding:0 14px; }
    .tb-title  { font-size:14px; }
    .tb-right .badge { display:none; }
    .tb-right .muted { display:none; }

    /* Stats */
    .stats    { grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
    .stat     { padding:10px; gap:8px; }
    .stat-ico { font-size:20px; }
    .stat-val { font-size:16px; }
    .stat-lbl { font-size:10px; }

    /* Cards */
    .card-body  { padding:14px; }
    .card-head  { padding:10px 14px; min-height:44px; }
    .card-title { font-size:13px; }

    /* Page header */
    .ph   { margin-bottom:14px; padding-bottom:10px; }
    .ph h1 { font-size:18px; }

    /* Modal — bottom sheet */
    .modal-bg { align-items:flex-end; padding:0; }
    .modal, .modal.lg {
        border-radius:18px 18px 0 0; max-width:100%;
        max-height:92vh; animation:mInSheet .25s ease;
    }
    @keyframes mInSheet {
        from { transform:translateY(100%); }
        to   { transform:none; }
    }
    .modal-head::before {
        content:''; display:block; width:36px; height:4px;
        background:var(--border); border-radius:2px; margin:0 auto 12px;
    }
    .modal-foot .btn { flex:1; justify-content:center; }
    .modal-foot { padding-bottom:18px; }

    /* Inputi — 16px da ne zoomira iOS */
    .fg input:not([type=checkbox]):not([type=radio]),
    .fg select,
    .fg textarea { font-size:16px; padding:10px 11px; }

    /* Login */
    .login-card { padding:24px 20px; border-radius:14px; }

    /* Kalendar */
    .kal       { min-width:340px; }
    .kd        { min-height:48px; padding:4px 3px; }
    .kd-br     { font-size:11px; }
    .kd-ruta   { display:none; }
    .btn-tjd   { width:24px; height:24px; font-size:8px; }
    .kal-nav h2 { font-size:14px; }

    /* Tablica */
    .tbl    { min-width:380px; }
    .tbl th, .tbl td { padding:8px 10px; font-size:12.5px; }
}

/* Multi-select za brisanje dana */
.kd-chk {
    position:absolute; top:3px; right:3px;
    width:14px; height:14px;
    cursor:pointer; z-index:2;
    accent-color:#dc2626;
}
.kd.sel-dan { outline:2px solid #dc2626 !important; background:#fef2f2 !important; }

/* ── PRISTUPAČNOST — TOOLBAR ────────────────────────────────── */
.a11y-bar {
    display:flex; align-items:center; gap:4px;
    border-right:1px solid var(--border); padding-right:10px; margin-right:2px;
}
.a11y-btn {
    background:none; border:1px solid var(--border);
    border-radius:6px; cursor:pointer; color:var(--gray);
    padding:4px 7px; font-size:12px; font-weight:700;
    transition:all .15s; line-height:1.4;
}
.a11y-btn:hover { background:var(--bg); color:var(--blue); border-color:var(--blue2); }
.a11y-btn.active { background:var(--blue); color:#fff; border-color:var(--blue); }

/* ── FONT SIZE ──────────────────────────────────────────────── */
body.fs-md {
    font-size:16px;
}
body.fs-md .sb-link     { font-size:15px; }
body.fs-md .tbl th      { font-size:13px; }
body.fs-md .tbl td      { font-size:15px; }
body.fs-md .btn         { font-size:15px; }
body.fs-md .card-title  { font-size:15px; }
body.fs-md .ph h1       { font-size:24px; }
body.fs-md .badge       { font-size:12px; }
body.fs-md .stat-val    { font-size:22px; }
body.fs-md .fg label    { font-size:14px; }
body.fs-md .fg input:not([type=checkbox]):not([type=radio]),
body.fs-md .fg select,
body.fs-md .fg textarea { font-size:16px; }

body.fs-lg {
    font-size:19px;
}
body.fs-lg .sb-link     { font-size:17px; }
body.fs-lg .tbl th      { font-size:15px; }
body.fs-lg .tbl td      { font-size:17px; }
body.fs-lg .btn         { font-size:17px; padding:10px 20px; }
body.fs-lg .card-title  { font-size:17px; }
body.fs-lg .ph h1       { font-size:28px; }
body.fs-lg .badge       { font-size:13px; }
body.fs-lg .stat-val    { font-size:26px; }
body.fs-lg .fg label    { font-size:16px; }
body.fs-lg .fg input:not([type=checkbox]):not([type=radio]),
body.fs-lg .fg select,
body.fs-lg .fg textarea { font-size:18px; }

/* ── DARK MODE ──────────────────────────────────────────────── */
body.dark {
    --bg:     #0f172a;
    --border: #1e293b;
    --text:   #e2e8f0;
    --gray:   #94a3b8;
    --blue:   #60a5fa;
    --blue2:  #93c5fd;
    --green:  #4ade80;
    --orange: #fb923c;
    --or2:    #fdba74;
    --red:    #f87171;
    --yellow: #fbbf24;
    --sh:     0 1px 8px rgba(0,0,0,.4);
    --sh2:    0 4px 20px rgba(0,0,0,.6);
}
body.dark .card           { background:#1e293b; }
body.dark .topbar         { background:#1e293b; }
body.dark .bnav           { background:#1e293b; }
body.dark .tbl th         { background:#162032; }
body.dark .tbl tr:hover td { background:#162032; }
body.dark .tbl tfoot td   { background:#0f172a; }
body.dark .modal          { background:#1e293b; }
body.dark .login-card     { background:#1e293b; }
body.dark .fg input:not([type=checkbox]):not([type=radio]),
body.dark .fg select,
body.dark .fg textarea    { background:#0f172a; color:var(--text); border-color:var(--border); }
body.dark input:not([type=checkbox]):not([type=radio]),
body.dark select,
body.dark textarea        { background:#0f172a; color:var(--text); }
body.dark .kd             { background:#1e293b; border-color:#1e293b; }
body.dark .kd.vikend      { background:#162032; border-color:#1e293b; }
body.dark .kd.praznik     { background:#292307; border-color:#4a3a0a; }
body.dark .kd.aktivan     { background:#052e16; border-color:#166534; }
body.dark .kd.rodsat      { background:#0c1a4a; border-color:#1e40af; }
body.dark .alert.ok       { background:#052e16; color:#4ade80; }
body.dark .alert.err      { background:#2a0a0a; color:#f87171; }
body.dark .alert.info     { background:#0c1a4a; color:#93c5fd; }
body.dark .alert.warn     { background:#292307; color:#fbbf24; }
body.dark .badge-blue     { background:#1e3a8a; color:#93c5fd; }
body.dark .badge-green    { background:#052e16; color:#4ade80; }
body.dark .badge-orange   { background:#431407; color:#fdba74; }
body.dark .badge-gray     { background:#1e293b; color:#94a3b8; }
body.dark .badge-red      { background:#2a0a0a; color:#f87171; }
body.dark .ors-ac-drop    { background:#1e293b; }
body.dark .ors-ac-item:hover { background:#0f172a; }
body.dark #cookieBanner   { background:#1e293b; }
body.dark .stat           { background:#1e293b; }
body.dark .tbl tr:hover td { background:#162032; }

/* Sidebar u dark modu treba biti tamna, ne plava */
body.dark .sidebar        { background:#1e293b; }
body.dark .sb-link.active { background:rgba(251,146,60,.15); }

/* ── FOCUS VISIBLE ──────────────────────────────────────────── */
:focus-visible {
    outline:2px solid var(--blue2);
    outline-offset:2px;
}
.btn:focus-visible {
    outline:2px solid var(--blue2);
    outline-offset:3px;
    box-shadow:0 0 0 4px rgba(45,90,142,.18);
}
.fg input:focus-visible,
.fg select:focus-visible,
.fg textarea:focus-visible {
    outline:none; /* border-color već pokazuje fokus */
}
a:focus-visible {
    outline:2px solid var(--blue2);
    border-radius:3px;
}