/* ═══════════════════════════════════════════════════════════════
   GENERISANO iz itt/design-tokens v0.9.1 — NE EDITUJ RUČNO.
   Izvor istine = tokens/*.json u tom repou; ovde je samo izlaz.
   Ručna izmena preživi do sledećeg builda, pa nestane bez traga.

   Sloj 2 (semantika) — 5 blokova iz 3 seta; `auto` = light/dark pod media query-jem.
   Sloj 3 (komponente) — JEDNOM; prati temu preko var(--semantika).
   ═══════════════════════════════════════════════════════════════ */

/* ═══ DEFAULT (indigo) ═══ */
:root,
[data-theme="default"] {
    --bg:                 #0a0a0f;
    --surface:            #12121a;
    --surface-2:          #1a1a2e;
    --surface-3:          #232342;
    --border:             rgba(99, 102, 241, 0.14);
    --border-strong:      rgba(99, 102, 241, 0.3);
    --text:               #e0e0e8;
    --text-dim:           #8888aa;
    --text-bright:        #f0f0f8;
    --accent:             #6366f1;
    --accent-hover:       #818cf8;
    --accent-dim:         rgba(99, 102, 241, 0.14);
    --neon-lime:          #22c55e;
    --neon-lime-dim:      rgba(34, 197, 94, 0.14);
    --deco-1-rgb:         0 229 255;
    --deco-2-rgb:         178 255 0;
    --status-ok:          #22c55e;
    --status-warning:     #f59e0b;
    --status-critical:    #ef4444;
    --status-info:        #6366f1;
    --status-ok-bg:       rgba(34, 197, 94, 0.1);
    --status-warning-bg:  rgba(245, 158, 11, 0.1);
    --status-critical-bg: rgba(239, 68, 68, 0.1);
    --status-info-bg:     rgba(99, 102, 241, 0.1);
    --surface-hover:      #12121a;
    --surface-chip:       rgba(255, 255, 255, 0.03);
    --surface-chip-hover: rgba(255, 255, 255, 0.05);
    --text-normal:        #f0f0f8;
    --danger:             #e5484d;
    --status-unknown:     #94a3b8;
    --section-monitoring: #3d63f4;
    --section-management: #9c3d6e;
    --section-admin:      #23e80c;
    --section-aplikacije: #ffa319;
    --card-bg:            rgba(10, 10, 15, 0.92);
    --mono:               'JetBrains Mono', monospace;
    --sans:               'Outfit', sans-serif;
    --shadow:             0 2px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg:          0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-neon:        0 0 15px rgba(99, 102, 241, 0.18);
    --shadow-neon-lime:   0 0 15px rgba(34, 197, 94, 0.15);
    --scrollbar-track:    #0a0a0f;
    --scrollbar-thumb:    #2a2a3e;
    --scrollbar-hover:    #3a3a52;
    --sidebar-bg:         #08080d;
    --sidebar-hover:      rgba(99, 102, 241, 0.07);
    --sidebar-active:     rgba(99, 102, 241, 0.14);
    --topbar-bg:          rgba(10, 10, 15, 0.92);
    --overlay:            rgba(0, 0, 0, 0.7);
    --input-bg:           #14141f;
    --input-border:       rgba(99, 102, 241, 0.2);
    --input-focus:        rgba(99, 102, 241, 0.45);
    --code-bg:            #12121a;
    --badge-bg:           rgba(99, 102, 241, 0.12);
    --badge-text:         #818cf8;
    --table-stripe:       rgba(99, 102, 241, 0.03);
    --table-hover:        rgba(99, 102, 241, 0.06);
    --accent-strong:      #4338ca;
    --accent-solid:       #4f46e5;
    --accent-fg:          #ffffff;
}

/* ═══ DARK (BPD Neon) ═══ */
[data-theme="dark"] {
    --bg:                 #111520;
    --surface:            #151b25;
    --surface-2:          #1a2230;
    --surface-3:          #212a38;
    --border:             rgba(0, 229, 255, 0.12);
    --border-strong:      rgba(0, 229, 255, 0.25);
    --text:               #c4d2e0;
    --text-dim:           #6a7a8a;
    --text-bright:        #e8f4ff;
    --accent:             #19baff;
    --accent-hover:       #47caff;
    --accent-dim:         rgba(25, 186, 255, 0.12);
    --neon-lime:          #b2ff00;
    --neon-lime-dim:      rgba(178, 255, 0, 0.12);
    --deco-1-rgb:         0 229 255;
    --deco-2-rgb:         178 255 0;
    --status-ok:          #b2ff00;
    --status-warning:     #ffb800;
    --status-critical:    #ff3355;
    --status-info:        #19baff;
    --status-ok-bg:       rgba(178, 255, 0, 0.08);
    --status-warning-bg:  rgba(255, 184, 0, 0.08);
    --status-critical-bg: rgba(255, 51, 85, 0.08);
    --status-info-bg:     rgba(0, 229, 255, 0.08);
    --surface-hover:      #151b25;
    --surface-chip:       rgba(255, 255, 255, 0.03);
    --surface-chip-hover: rgba(255, 255, 255, 0.05);
    --text-normal:        #e8f4ff;
    --danger:             #e5484d;
    --status-unknown:     #94a3b8;
    --section-monitoring: #3d63f4;
    --section-management: #9c3d6e;
    --section-admin:      #23e80c;
    --section-aplikacije: #ffa319;
    --card-bg:            rgba(14, 19, 28, 0.92);
    --mono:               'JetBrains Mono', monospace;
    --sans:               'Outfit', sans-serif;
    --shadow:             0 2px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg:          0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-neon:        0 0 15px rgba(0, 229, 255, 0.15);
    --shadow-neon-lime:   0 0 15px rgba(178, 255, 0, 0.15);
    --scrollbar-track:    #111520;
    --scrollbar-thumb:    #2a3a4a;
    --scrollbar-hover:    #3a4a5a;
    --sidebar-bg:         #0e1318;
    --sidebar-hover:      rgba(0, 229, 255, 0.06);
    --sidebar-active:     rgba(0, 229, 255, 0.12);
    --topbar-bg:          rgba(14, 19, 28, 0.92);
    --overlay:            rgba(0, 0, 0, 0.7);
    --input-bg:           #161e2a;
    --input-border:       rgba(0, 229, 255, 0.18);
    --input-focus:        rgba(0, 229, 255, 0.4);
    --code-bg:            #111820;
    --badge-bg:           rgba(0, 229, 255, 0.1);
    --badge-text:         #19baff;
    --table-stripe:       rgba(0, 229, 255, 0.02);
    --table-hover:        rgba(0, 229, 255, 0.06);
    --accent-strong:      #00b8d4;
    --accent-solid:       #19baff;
    --accent-fg:          #111520;
}

/* ═══ LIGHT ═══ */
[data-theme="light"] {
    --bg:                 #f0f4f8;
    --surface:            #ffffff;
    --surface-2:          #f5f8fa;
    --surface-3:          #eaeff4;
    --border:             rgba(0, 140, 160, 0.12);
    --border-strong:      rgba(0, 140, 160, 0.22);
    --text:               #0a1628;
    --text-dim:           #4a5a6a;
    --text-bright:        #071020;
    --accent:             #0e8fd4;
    --accent-hover:       #0b78b5;
    --accent-dim:         rgba(14, 143, 212, 0.08);
    --neon-lime:          #5a8c00;
    --neon-lime-dim:      rgba(90, 140, 0, 0.08);
    --deco-1-rgb:         0 151 167;
    --deco-2-rgb:         90 140 0;
    --status-ok:          #4a8c00;
    --status-warning:     #b88600;
    --status-critical:    #cc1133;
    --status-info:        #0097a7;
    --status-ok-bg:       rgba(74, 140, 0, 0.06);
    --status-warning-bg:  rgba(184, 134, 0, 0.06);
    --status-critical-bg: rgba(204, 17, 51, 0.06);
    --status-info-bg:     rgba(0, 151, 167, 0.06);
    --surface-hover:      #ffffff;
    --surface-chip:       rgba(255, 255, 255, 0.03);
    --surface-chip-hover: rgba(255, 255, 255, 0.05);
    --text-normal:        #071020;
    --danger:             #e5484d;
    --status-unknown:     #94a3b8;
    --section-monitoring: #3d63f4;
    --section-management: #9c3d6e;
    --section-admin:      #23e80c;
    --section-aplikacije: #ffa319;
    --card-bg:            rgba(255, 255, 255, 0.92);
    --shadow:             0 1px 4px rgba(0, 0, 0, 0.08);
    --shadow-lg:          0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-neon:        none;
    --shadow-neon-lime:   none;
    --scrollbar-track:    #f0f4f8;
    --scrollbar-thumb:    #b8c8d4;
    --scrollbar-hover:    #90a4b2;
    --sidebar-bg:         #ffffff;
    --sidebar-hover:      rgba(0, 151, 167, 0.05);
    --sidebar-active:     rgba(0, 151, 167, 0.1);
    --topbar-bg:          rgba(255, 255, 255, 0.92);
    --overlay:            rgba(0, 0, 0, 0.3);
    --input-bg:           #f5f8fa;
    --input-border:       rgba(0, 140, 160, 0.15);
    --input-focus:        rgba(0, 151, 167, 0.35);
    --code-bg:            #f0f4f8;
    --badge-bg:           rgba(0, 151, 167, 0.08);
    --badge-text:         #0097a7;
    --table-stripe:       rgba(0, 140, 160, 0.02);
    --table-hover:        rgba(0, 151, 167, 0.05);
    --accent-strong:      #095f90;
    --accent-solid:       #0b78b5;
    --accent-fg:          #ffffff;
}

/* ═══ AUTO (prati OS) → light ═══ */
@media (prefers-color-scheme: light) {
    [data-theme="auto"] {
        --bg:                 #f0f4f8;
        --surface:            #ffffff;
        --surface-2:          #f5f8fa;
        --surface-3:          #eaeff4;
        --border:             rgba(0, 140, 160, 0.12);
        --border-strong:      rgba(0, 140, 160, 0.22);
        --text:               #0a1628;
        --text-dim:           #4a5a6a;
        --text-bright:        #071020;
        --accent:             #0e8fd4;
        --accent-hover:       #0b78b5;
        --accent-dim:         rgba(14, 143, 212, 0.08);
        --neon-lime:          #5a8c00;
        --neon-lime-dim:      rgba(90, 140, 0, 0.08);
        --deco-1-rgb:         0 151 167;
        --deco-2-rgb:         90 140 0;
        --status-ok:          #4a8c00;
        --status-warning:     #b88600;
        --status-critical:    #cc1133;
        --status-info:        #0097a7;
        --status-ok-bg:       rgba(74, 140, 0, 0.06);
        --status-warning-bg:  rgba(184, 134, 0, 0.06);
        --status-critical-bg: rgba(204, 17, 51, 0.06);
        --status-info-bg:     rgba(0, 151, 167, 0.06);
        --surface-hover:      #ffffff;
        --surface-chip:       rgba(255, 255, 255, 0.03);
        --surface-chip-hover: rgba(255, 255, 255, 0.05);
        --text-normal:        #071020;
        --danger:             #e5484d;
        --status-unknown:     #94a3b8;
        --section-monitoring: #3d63f4;
        --section-management: #9c3d6e;
        --section-admin:      #23e80c;
        --section-aplikacije: #ffa319;
        --card-bg:            rgba(255, 255, 255, 0.92);
        --shadow:             0 1px 4px rgba(0, 0, 0, 0.08);
        --shadow-lg:          0 4px 16px rgba(0, 0, 0, 0.12);
        --shadow-neon:        none;
        --shadow-neon-lime:   none;
        --scrollbar-track:    #f0f4f8;
        --scrollbar-thumb:    #b8c8d4;
        --scrollbar-hover:    #90a4b2;
        --sidebar-bg:         #ffffff;
        --sidebar-hover:      rgba(0, 151, 167, 0.05);
        --sidebar-active:     rgba(0, 151, 167, 0.1);
        --topbar-bg:          rgba(255, 255, 255, 0.92);
        --overlay:            rgba(0, 0, 0, 0.3);
        --input-bg:           #f5f8fa;
        --input-border:       rgba(0, 140, 160, 0.15);
        --input-focus:        rgba(0, 151, 167, 0.35);
        --code-bg:            #f0f4f8;
        --badge-bg:           rgba(0, 151, 167, 0.08);
        --badge-text:         #0097a7;
        --table-stripe:       rgba(0, 140, 160, 0.02);
        --table-hover:        rgba(0, 151, 167, 0.05);
        --accent-strong:      #095f90;
        --accent-solid:       #0b78b5;
        --accent-fg:          #ffffff;
    }
}

/* ═══ AUTO (prati OS) → dark ═══ */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        --bg:                 #111520;
        --surface:            #151b25;
        --surface-2:          #1a2230;
        --surface-3:          #212a38;
        --border:             rgba(0, 229, 255, 0.12);
        --border-strong:      rgba(0, 229, 255, 0.25);
        --text:               #c4d2e0;
        --text-dim:           #6a7a8a;
        --text-bright:        #e8f4ff;
        --accent:             #19baff;
        --accent-hover:       #47caff;
        --accent-dim:         rgba(25, 186, 255, 0.12);
        --neon-lime:          #b2ff00;
        --neon-lime-dim:      rgba(178, 255, 0, 0.12);
        --deco-1-rgb:         0 229 255;
        --deco-2-rgb:         178 255 0;
        --status-ok:          #b2ff00;
        --status-warning:     #ffb800;
        --status-critical:    #ff3355;
        --status-info:        #19baff;
        --status-ok-bg:       rgba(178, 255, 0, 0.08);
        --status-warning-bg:  rgba(255, 184, 0, 0.08);
        --status-critical-bg: rgba(255, 51, 85, 0.08);
        --status-info-bg:     rgba(0, 229, 255, 0.08);
        --surface-hover:      #151b25;
        --surface-chip:       rgba(255, 255, 255, 0.03);
        --surface-chip-hover: rgba(255, 255, 255, 0.05);
        --text-normal:        #e8f4ff;
        --danger:             #e5484d;
        --status-unknown:     #94a3b8;
        --section-monitoring: #3d63f4;
        --section-management: #9c3d6e;
        --section-admin:      #23e80c;
        --section-aplikacije: #ffa319;
        --card-bg:            rgba(14, 19, 28, 0.92);
        --shadow:             0 2px 12px rgba(0, 0, 0, 0.5);
        --shadow-lg:          0 8px 32px rgba(0, 0, 0, 0.6);
        --shadow-neon:        0 0 15px rgba(0, 229, 255, 0.15);
        --shadow-neon-lime:   0 0 15px rgba(178, 255, 0, 0.15);
        --scrollbar-track:    #111520;
        --scrollbar-thumb:    #2a3a4a;
        --scrollbar-hover:    #3a4a5a;
        --sidebar-bg:         #0e1318;
        --sidebar-hover:      rgba(0, 229, 255, 0.06);
        --sidebar-active:     rgba(0, 229, 255, 0.12);
        --topbar-bg:          rgba(14, 19, 28, 0.92);
        --overlay:            rgba(0, 0, 0, 0.7);
        --input-bg:           #161e2a;
        --input-border:       rgba(0, 229, 255, 0.18);
        --input-focus:        rgba(0, 229, 255, 0.4);
        --code-bg:            #111820;
        --badge-bg:           rgba(0, 229, 255, 0.1);
        --badge-text:         #19baff;
        --table-stripe:       rgba(0, 229, 255, 0.02);
        --table-hover:        rgba(0, 229, 255, 0.06);
        --accent-strong:      #00b8d4;
        --accent-solid:       #19baff;
        --accent-fg:          #111520;
    }
}

/* ═══ SLOJ 3 — KOMPONENTNI TOKENI (komponenta čita SAMO ovo, nikad hex) ═══ */
:root {
    --button-bg:                 var(--surface-2);
    --button-border:             var(--border);
    --button-text:               var(--text);
    --button-bg-hover:           var(--surface-3);
    --button-border-hover:       var(--border-strong);
    --button-radius:             6px;
    --button-padding-y:          6px;
    --button-padding-x:          14px;
    --button-gap:                6px;
    --button-border-w:           1px;
    --button-font:               var(--mono);
    --button-font-size:          0.82rem;
    --button-weight:             500;
    --button-transition:         0.15s;
    --button-sm-padding-y:       4px;
    --button-sm-padding-x:       10px;
    --button-sm-font-size:       0.75rem;
    --button-sm-gap:             4px;
    --button-primary-bg:         linear-gradient(135deg, var(--accent-strong), var(--accent-solid));
    --button-primary-text:       var(--accent-fg);
    --button-primary-weight:     600;
    --button-primary-font:       var(--sans);
    --button-primary-glow:       var(--shadow-neon);
    --button-danger-text:        var(--status-critical);
    --button-danger-border:      var(--status-critical-bg);
    --button-danger-bg-hover:    var(--status-critical-bg);
    --field-bg:                  var(--input-bg);
    --field-border:              var(--input-border);
    --field-border-focus:        var(--input-focus);
    --field-text:                var(--text);
    --field-placeholder:         var(--text-dim);
    --field-radius:              6px;
    --field-padding-y:           6px;
    --field-padding-x:           10px;
    --field-border-w:            1px;
    --field-font:                var(--sans);
    --field-font-size:           0.85rem;
    --field-height:              32px;
    --field-transition:          0.15s;
    --field-invalid-border:      var(--status-critical);
    --field-invalid-bg:          var(--status-critical-bg);
    --field-disabled-bg:         var(--surface-2);
    --field-disabled-text:       var(--text-dim);
    --field-label-text:          var(--text-dim);
    --field-label-font-size:     0.82rem;
    --field-label-weight:        500;
    --field-hint-text:           var(--text-dim);
    --field-error-text:          var(--status-critical);
    --field-row-gap:             8px;
    --shell-sidebar-width:       220px;
    --shell-sidebar-rail:        60px;
    --shell-topbar-height:       48px;
    --shell-content-pad:         20px;
    --shell-bp-mobile:           768px;
    --shell-bp-collapse:         900px;
    --stepper-gap:               12px;
    --stepper-line:              var(--border);
    --stepper-line-w:            2px;
    --stepper-transition:        0.15s;
    --stepper-dot-size:          32px;
    --stepper-dot-bg:            var(--surface-2);
    --stepper-dot-border:        var(--border-strong);
    --stepper-dot-text:          var(--text-dim);
    --stepper-dot-font-size:     0.82rem;
    --stepper-dot-weight:        600;
    --stepper-label-text:        var(--text-dim);
    --stepper-label-font-size:   0.82rem;
    --stepper-label-weight:      500;
    --stepper-active-dot-bg:     var(--accent);
    --stepper-active-dot-border: var(--accent);
    --stepper-active-dot-text:   var(--accent-fg);
    --stepper-active-label-text: var(--text-bright);
    --stepper-done-dot-bg:       var(--status-ok-bg);
    --stepper-done-dot-border:   var(--status-ok);
    --stepper-done-dot-text:     var(--status-ok);
    --stepper-done-label-text:   var(--text);
    --stepper-done-line:         var(--status-ok);
    --stepper-error-dot-bg:      var(--status-critical-bg);
    --stepper-error-dot-border:  var(--status-critical);
    --stepper-error-dot-text:    var(--status-critical);
    --stepper-error-label-text:  var(--status-critical);
}