/* ═══════════════════════════════════════════════════════════════
   AI Server Dashboard v5 — Core CSS
   VERSION: 1.0.0

   PRAVILA:
   1. Moduli NIKAD ne koriste hardkodirane boje — SAMO var(--)
   2. Sve klase su globalne utility ili theme-aware
   3. Module-specific CSS živi u modules/X/style.css
   4. Font face deklaracije su ovde (jednom, globalno)
   ═══════════════════════════════════════════════════════════════ */

/* Font tokeni koriste lokalno dostupne fallback-e; nema third-party zahteva. */

/* ═══ DIZAJN-TOKENI — NISU VIŠE OVDE ═══
   Boje, mere, tipografija i senke dolaze iz `itt/design-tokens` (zakon D1: izvor
   istine je PODATAK, ne stil). Ovaj fajl ih SAMO KORISTI, preko var(--…).

   ⚠ UGOVOR PREMA POTROŠAČU — obavezno, inače nema boja:
       <link rel="stylesheet" href="/static/lib/tokens.css">   ← PRE core.css
   Servira ga postojeća ruta `/static/lib/<filename>` iz ovog paketa; nije potrebna
   nijedna nova ruta. Ako link izostane, stranica ostaje bez boja — GLASNO, odmah
   vidljivo. To je namerno: tiho vraćanje na podrazumevano je ono što nas je i dovelo
   ovde (nepostojeća `.input` klasa koju je browser ćutke progutao).

   Definisati boju ovde = drift: postojala bi na dva mesta, a React/Vue app sutra ne
   bi mogao da je dobije — morao bi da je prepiše.

   Izvor:  itt/design-tokens · tokens/{primitive,semantic,component}/*.json
   Izlaz:  dist/tokens.css → vendorovan ovde kao static/lib/tokens.css
   Sync:   scripts/sync-tokens.sh (drift-gate u testu: test_tokens.py)
   ═══════════════════════════════════════════════════════════════ */

/* ═══ RESET & BASE ═══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 14px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ═══ SCROLLBAR ═══ */
/* Firefox (standardni scrollbar-*): FF ignoriše ::-webkit-scrollbar U CELOSTI i čita SAMO
   scrollbar-width/-color. Bez globalnog scrollbar-color FF vraća OS-native belo/sivo na
   SVAKOM skrol kontejneru — nezavisno od aktivne teme (D3 rupa: skrol traka „ispadne iz
   teme", isto kao .card u anti-obrascu). Isti --scrollbar-* tokeni kao webkit dole, sa
   fallbackom na semantiku (D4: bez hardkoda; nijedna tema ne mora ništa da nabraja).
   Chrome, kad postoji ::-webkit-scrollbar (dole), ignoriše standardne scrollbar-* — pa
   6px bar ostaje bajt-identičan; nema regresije na webkit-u. */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb, var(--border)) var(--scrollbar-track, var(--surface));
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track, var(--surface)); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb, var(--border)); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover, var(--text-dim)); }

/* ═══ LAYOUT — Three-panel SPA ═══ */
.app-layout {
    min-height: 100vh;
}

/* ─── Sidebar ─── */
.sidebar {
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--shell-sidebar-width);
    z-index: 100;
}

.sidebar-brand {
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--text-bright);
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    position: sticky;
    top: 0;
    background: var(--sidebar-bg);
    z-index: 5;
    flex-shrink: 0;
}

.sidebar-brand img {
    width: 28px;
    height: 28px;
    border-radius: 6px;
}

.sidebar-brand-logo {
    width: 47px;
    height: 47px;
}

/* Shine sweep preko "AI Server" teksta — boja usklađena sa logom */
.sidebar-brand span {
    background: linear-gradient(
        90deg,
        var(--text-bright) 0%,
        var(--text-bright) 44%,
        #00E5FF 50%,
        var(--text-bright) 56%,
        var(--text-bright) 100%
    );
    background-size: 300% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: brand-shine 16s ease-in-out infinite;
}

/* Sa leva ka desno, odbije se o desnu ivicu, vrati se u levo i nestane */
@keyframes brand-shine {
    0%   { background-position: 100% 0; }   /* pre ulaska — off-screen levo */
    45%  { background-position: 0% 0; }     /* dostiže desnu ivicu */
    90%  { background-position: 100% 0; }   /* vratio se na levu — nestao */
    100% { background-position: 100% 0; }   /* kratka pauza pre novog ciklusa */
}

/* Home stavka — identično styling kao ostale nav stavke, sa razmakom iznad MONITORING labele jednakim inter-item razmaku */
.sidebar-nav:not([data-nav-section]) {
    padding: 4px 8px;
}

.sidebar-section {
    padding: 4px 12px 0;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
}
.sidebar-section[data-nav-section="monitoring"]  { color: var(--section-monitoring); }
.sidebar-section[data-nav-section="management"]  { color: var(--section-management); }
.sidebar-section[data-nav-section="admin"]       { color: var(--section-admin); }
.sidebar-section[data-nav-section="aplikacije"]  { color: var(--section-aplikacije); }

.sidebar-nav { list-style: none; padding: 0 8px; }

.sidebar-nav li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
    font-size: 0.85rem;
    transition: background 0.15s, color 0.15s;
    cursor: pointer;
}

.sidebar-nav li a:hover {
    background: var(--sidebar-hover);
    color: var(--text-bright);
}

.sidebar-nav li a.active {
    background: var(--sidebar-active);
    color: var(--accent);
    font-weight: 500;
    border-left: 3px solid var(--accent);
}
.sidebar-nav[data-nav-section="monitoring"] li a.active  { border-left-color: var(--section-monitoring); color: var(--section-monitoring); }
.sidebar-nav[data-nav-section="management"] li a.active  { border-left-color: var(--section-management); color: var(--section-management); }
.sidebar-nav[data-nav-section="admin"] li a.active       { border-left-color: var(--section-admin); color: var(--section-admin); }
.sidebar-nav[data-nav-section="aplikacije"] li a.active  { border-left-color: var(--section-aplikacije); color: var(--section-aplikacije); }

.sidebar-nav li a .nav-icon {
    font-size: 1.4rem;
    width: 25px;
    text-align: center;
    flex-shrink: 0;
}

/* ─── Topbar ─── */
.topbar {
    background: var(--topbar-bg);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--shell-content-pad);
    position: fixed;
    top: 0;
    left: var(--shell-sidebar-width);
    right: 0;
    height: var(--shell-topbar-height);
    z-index: 99;
}
.topbar::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0;
    height: 2px; background: var(--section-color, transparent);
    transition: background 0.2s;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    max-width: 420px;
    overflow: hidden;
}

/* Health baner: fiksni status + skrolujući detalji */
@keyframes topbar-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.topbar-health {
    display: flex;
    align-items: center;
    overflow: hidden;
    flex: 1;
    min-width: 0;
    gap: 6px;
    height: 100%;
}

.topbar-health-fixed {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: .82rem;
    cursor: pointer;
    line-height: 1;
}

.topbar-health-scroll {
    overflow: hidden;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    height: 100%;
}

.topbar-health-scroll-inner {
    display: block;
    white-space: nowrap;
    font-size: .82rem;
    cursor: pointer;
    line-height: 1;
}

.topbar-health-scroll-inner.marquee {
    animation: topbar-marquee 25s linear infinite;
}

.topbar-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-bright);
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

/* ─── Topbar Health + Stats ─── */
.topbar-health { display: flex; align-items: center; }
/* Health pill: obojena tačka (CSS krug, boja iz severity klase preko currentColor) + naslov + podnaslov. */
.topbar-health-fixed { display: inline-flex; align-items: center; gap: 6px; }
.topbar-health-dot {
    flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%;
    background: currentColor; box-shadow: 0 0 6px currentColor;
}
.topbar-health-sub { color: var(--text-dim); font-weight: 400; }
.topbar-health-alert { color: var(--status-critical); }
.topbar-health-warning { color: var(--status-warning); }
.topbar-health-ok { color: #22c55e; }
.topbar-health-unknown { color: var(--status-unknown, #94a3b8); }

.topbar-stats {
    display: flex; align-items: center; gap: 2px;
}
.topbar-stat {
    display: flex; flex-direction: column; align-items: center;
    padding: 2px 10px; border-left: 1px solid var(--border);
}
.topbar-stat:last-child { border-right: 1px solid var(--border); }
.topbar-stat-val {
    font-family: var(--mono); font-size: .78rem; font-weight: 700;
    color: var(--text-bright); line-height: 1.2; white-space: nowrap;
}
.topbar-stat-lbl {
    font-size: .55rem; text-transform: uppercase; letter-spacing: 1px;
    color: var(--text-dim); line-height: 1;
}
/* Per-čip prag (spec: boja se menja SAMO na tom čipu, ne ceo bar). Value nosi boju. */
.topbar-stat--warning .topbar-stat-val { color: var(--status-warning); }
.topbar-stat--critical .topbar-stat-val { color: var(--status-critical); }
.topbar-stat--warning, .topbar-stat--critical { position: relative; }
.topbar-stat--warning .topbar-stat-lbl { color: var(--status-warning); }
.topbar-stat--critical .topbar-stat-lbl { color: var(--status-critical); }

/* Sat (zona [D]) — ČVRSTA širina: mono + tabular-nums + min-width 8ch (HH:MM:SS = 8 znakova) +
   inline-block. Garantuje da otkucaj sekunde ne menja širinu → ne gura susede (fleet/SSE) levo-desno. */
.topbar-clock { font-family: var(--mono); font-variant-numeric: tabular-nums;
    display: inline-block; min-width: 8ch; text-align: center; }

/* ─── Theme Switcher ─── */
.theme-switcher {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--surface-2);
    border-radius: 6px;
    padding: 2px;
    border: 1px solid var(--border);
}

.theme-switcher button {
    background: none;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-dim);
    transition: all 0.15s;
    line-height: 1;
}

.theme-switcher button:hover {
    color: var(--text);
    background: var(--border);
}

.theme-switcher button.active {
    background: var(--accent-dim);
    color: var(--accent);
}

/* ─── Font Sizer ─── */
.font-sizer {
    display: flex;
    align-items: center;
    gap: 4px;
}

.font-sizer button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: var(--mono);
    transition: all 0.15s;
    line-height: 1.4;
    border: 1px solid var(--accent);
    background: var(--accent-dim);
    color: var(--accent);
}

.font-sizer button:hover {
    background: var(--accent);
    color: var(--bg);
}

/* ─── Popup Button ─── */
.btn-popup {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--accent);
    background: var(--accent-dim);
    color: var(--accent);
    font-family: var(--mono);
    transition: all 0.15s;
    line-height: 1.4;
}

.btn-popup:hover {
    background: var(--accent);
    color: var(--bg);
}

/* ─── Icon Action Button (popup stil za sve akcije) ─── */
.btn-icon-action,
.btn.btn-icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--accent);
    background: var(--accent-dim);
    color: var(--accent);
    font-family: var(--mono);
    transition: all 0.15s;
    line-height: 1.4;
}

.btn-icon-action:hover,
.btn.btn-icon-action:hover {
    background: var(--accent);
    color: var(--bg);
}

/* Varijante: success (zeleno), danger (crveno), warning (žuto) */
.btn-icon-action.btn-icon-success {
    border-color: var(--status-ok);
    background: var(--status-ok-bg);
    color: var(--status-ok);
}
.btn-icon-action.btn-icon-success:hover {
    background: var(--status-ok);
    color: var(--bg);
}

.btn-icon-action.btn-icon-danger {
    border-color: var(--status-critical);
    background: var(--status-critical-bg);
    color: var(--status-critical);
}
.btn-icon-action.btn-icon-danger:hover {
    background: var(--status-critical);
    color: var(--bg);
}

.btn-icon-action.btn-icon-warning {
    border-color: var(--status-warning);
    background: var(--status-warning-bg);
    color: var(--status-warning);
}
.btn-icon-action.btn-icon-warning:hover {
    background: var(--status-warning);
    color: var(--bg);
}

.btn-icon-action.btn-icon-info {
    border-color: var(--status-info);
    background: var(--status-info-bg);
    color: var(--status-info);
}
.btn-icon-action.btn-icon-info:hover {
    background: var(--status-info);
    color: var(--bg);
}

.btn-icon-action.btn-icon-purple {
    border-color: #19BAFF;
    background: rgba(0, 229, 255, 0.1);
    color: #19BAFF;
}
.btn-icon-action.btn-icon-purple:hover {
    background: #19BAFF;
    color: var(--bg);
}

/* ─── User dropdown ─── */
.user-dropdown {
    position: relative;
}

.user-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-dim);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}

.user-badge:hover {
    background: var(--surface-2);
    color: var(--text-bright);
}

.user-badge .role {
    background: var(--badge-bg);
    color: var(--badge-text);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
}

.user-caret {
    font-size: 0.65rem;
    opacity: 0.5;
    transition: transform 0.15s;
}

.user-dropdown .user-menu.open ~ .user-badge .user-caret,
.user-dropdown:has(.user-menu.open) .user-caret {
    transform: rotate(180deg);
}

.user-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    padding: 6px 0;
    z-index: 1000;
}

.user-menu.open {
    display: block;
}

.user-menu-item {
    display: block;
    padding: 8px 16px;
    font-size: 0.8rem;
    color: var(--text);
    text-decoration: none;
    transition: background 0.1s;
    white-space: nowrap;
}

.user-menu-item:hover {
    background: var(--surface-2);
    color: var(--text-bright);
}

/* Menu item kao <button> (akcija, ne navigacija) — reset UA stila da prati <a> stavke
   (bez sive kutije/ivice/centriranja/tuđeg fonta). */
button.user-menu-item {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.user-menu-logout:hover {
    color: var(--status-critical);
}

.user-menu-sep {
    height: 1px;
    background: var(--border);
    margin: 4px 12px;
}

/* ─── User menu: mod + tema sekcije ─── */
.user-menu-label {
    padding: 4px 16px 2px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.user-menu-row {
    display: flex;
    gap: 4px;
    padding: 4px 12px 6px;
}

/* Dropdown izbora fonta (Font sekcija menija) */
.um-select {
    width: 100%;
    padding: 5px 8px;
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}
.um-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.um-chip {
    flex: 1;
    padding: 5px 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 0.85rem;
    font-family: var(--sans);
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}

.um-chip:hover {
    background: var(--border);
    border-color: var(--border-strong);
    color: var(--text-bright);
}

.um-chip.active {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--accent);
}

/* Font chipovi — mono font, fiksna širina */
#um-font-row .um-chip {
    font-family: var(--mono);
    font-size: 0.8rem;
    font-weight: 600;
}

.user-menu-themes {
    display: flex;
    flex-direction: column;
    padding: 2px 6px 4px;
}

.um-theme-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    background: transparent;
    font-size: 0.78rem;
    font-family: var(--sans);
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: background 0.1s;
}

.um-theme-opt:hover {
    background: var(--surface-2);
    color: var(--text-bright);
}

.um-theme-opt.active {
    background: var(--accent-dim);
    color: var(--accent);
    font-weight: 600;
}

.um-theme-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.um-theme-dot.vtp-default { background: var(--surface-2); }
.um-theme-dot.vtp-bpd { background: linear-gradient(135deg, #0a1628, #1a3a5c); }
.um-theme-dot.vtp-neon { background: linear-gradient(135deg, #0a0a2e, #00e5ff); }
.um-theme-dot.vtp-neonp { background: linear-gradient(135deg, #1a0a2e, #e040fb); }
.um-theme-dot.vtp-neond { background: linear-gradient(135deg, #0a2e1a, #00e676); }
.um-theme-dot.vtp-neonb { background: linear-gradient(135deg, #0a1a2e, #2979ff); }

/* ─── Main content ─── */
.main-content {
    padding: var(--shell-content-pad);
    margin-left: var(--shell-sidebar-width);
    margin-top: var(--shell-topbar-height);
    overflow-y: auto;
}

/* ─── Page containers ─── */
.page { display: none; }
.page.active { display: block; }

/* ═══ COMPONENTS — Reusable across modules ═══ */

/* Cards */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    box-shadow: var(--shadow);
}

.card:hover {
    border-color: var(--border-strong);
}

.card.full { grid-column: 1 / -1; }

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    min-height: 38px;   /* uniformna visina zaglavlja u px (rem-baza varira): pokriva status badge → header sa/bez badge isti, vrednosti poravnate po horizontali */
}

.card-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-bright);
}

/* v3-compatible card header */
.ch {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.ch .ci { font-size: 0.77rem; }
.ch h3 { font-size: 0.85rem; font-weight: 600; color: var(--text-bright); }

.ch .badge {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 0.68rem;
    padding: 4px 16px;
    border-radius: 4px;
}

.badge { padding: 4px 16px; border-radius: 4px; font-size: 0.72rem; font-family: var(--mono); }
.badge-g { background: var(--status-ok-bg); color: var(--status-ok); border: 1px solid rgba(178, 255, 0, 0.25); }
.badge-y { background: var(--status-warning-bg); color: var(--status-warning); border: 1px solid rgba(255, 184, 0, 0.25); }
.badge-r { background: var(--status-critical-bg); color: var(--status-critical); border: 1px solid rgba(255, 51, 85, 0.25); }
.badge-a { background: var(--accent-dim); color: var(--accent); border: 1px solid rgba(0, 229, 255, 0.2); }

/* Grid layouts */
/* align-items: stretch (eksplicitno) → kartice u istom redu iste visine (grid ćelija se rasteže) */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; align-items: stretch; }
.grid-1 { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: stretch; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: stretch; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; align-items: stretch; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

@media (max-width: 1200px) { .grid-5 { grid-template-columns: repeat(3, 1fr); } .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .grid-5, .grid-4, .grid-3, .grid-2, .grid { grid-template-columns: 1fr; } }

/* Stat boxes (v3 compatible) */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat-box {
    text-align: center;
    padding: 16px 8px;
    background: var(--surface-2);
    border-radius: 8px;
    border: 1px solid var(--border);
    min-width: 0;
    overflow: hidden;
}
.stat-box .v {
    font-family: var(--mono);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-bright);
    display: block;
    white-space: nowrap;   /* vrednost UVEK u jednom redu (RAM/VRAM/uptime '125 / 251') */
}
.stat-box .l {
    font-size: 0.68rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}

@media (max-width: 900px) { .stat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .stat-grid { grid-template-columns: 1fr; } }

/* Tables */
/* Max visina panela ≈ 10 redova: duge tabele/liste skroluju UNUTAR panela (snapshot-i itd.). */
.table-wrap {
    max-height: 360px;
    overflow: auto;
}
.data-table, table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.data-table th, table th {
    text-align: left;
    padding: 8px 12px;
    background: var(--surface-2);
    color: var(--text-dim);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--border-strong);
}

.data-table td, table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-family: var(--mono);
    font-size: 0.78rem;
}

.data-table tr:nth-child(even), table tr:nth-child(even) { background: var(--table-stripe); }
.data-table tr:hover, table tr:hover { background: var(--table-hover); }
table tr:last-child td { border-bottom: none; }

/* Status badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-ok       { background: var(--status-ok-bg); color: var(--status-ok); }
.status-warning  { background: var(--status-warning-bg); color: var(--status-warning); }
.status-critical { background: var(--status-critical-bg); color: var(--status-critical); }
.status-info     { background: var(--status-info-bg); color: var(--status-info); }

/* Progress bars */
.bar { width: 100%; height: 7px; background: var(--surface-3); border-radius: 4px; overflow: hidden; margin-top: 3px; }
.bar-f { height: 100%; border-radius: 4px; transition: width 0.5s; }
.bg { background: linear-gradient(90deg, #6aaa00, var(--status-ok)); }
.by { background: linear-gradient(90deg, #cc9400, var(--status-warning)); }
.br { background: linear-gradient(90deg, #cc1133, var(--status-critical)); }
.bp { background: linear-gradient(90deg, #00a0b8, #19BAFF); }
.bc { background: linear-gradient(90deg, #0097a7, var(--status-info)); }

.progress-bar {
    height: 6px;
    background: var(--surface-3);
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar .progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Stat row (v3 compatible) */
.sr { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; }
.sl { font-size: 0.78rem; color: var(--text-dim); }
.sv { font-family: var(--mono); font-size: 0.82rem; font-weight: 500; color: var(--text-bright); }

/* Tags (v3 compatible) */
.tag {
    font-family: var(--mono);
    font-size: 0.7rem;
    padding: 2px 7px;
    background: var(--accent-dim);
    border: 1px solid rgba(0, 229, 255, 0.2);
    border-radius: 4px;
    color: var(--accent);
    display: inline-block;
    margin: 1px 2px;
}

/* Chips / tagovi */
.chip {
    font-family: var(--mono);
    font-size: 0.73rem;
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Dots (v3 compatible) */
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot-g { background: var(--status-ok); box-shadow: 0 0 6px rgba(178, 255, 0, 0.5); }
.dot-r { background: var(--status-critical); box-shadow: 0 0 6px rgba(255, 51, 85, 0.5); }
.dot-d { background: var(--text-dim); }

/* SSE live indikator — topbar pulse animacija */
.dot-live {
    background: var(--status-ok);
    box-shadow: 0 0 6px rgba(178, 255, 0, 0.6);
    animation: pulse-green 2s ease-in-out infinite;
}
@keyframes pulse-green {
    0%, 100% { box-shadow: 0 0 4px rgba(178, 255, 0, 0.4); }
    50%      { box-shadow: 0 0 10px rgba(178, 255, 0, 0.8); }
}

/* Mono text */
.mono { font-family: var(--mono); font-size: 0.82rem; }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    transition: all 0.15s;
    font-family: var(--mono);
}

.btn:hover { background: var(--surface-3); border-color: var(--border-strong); }

/* Primarno dugme PRATI AKCENAT TEME (CTO 2026-07-14). Ranije: fiksni cyan gradijent
   `linear-gradient(135deg, #00b8d4, #19BAFF)` + tekst `#0a0a0f` — hardkodovano, isto u
   SVIM temama, pa je i indigo tema imala cyan dugme.
   Tekst je token, ne konstanta, jer akcenat nije jednake svetline kroz teme: beli u
   default/light, tamni u dark. Kontrast MEREN (WCAG AA na oba kraja gradijenta):
   default 6.29 · dark 7.65 · light 4.81. */
/* KANON DUGME (CTO 2026-07-21): default = OUTLINE (accent obris + accent-dim; popuni na hover),
   kao „✎ Uredi". Brisanje = FILLED (.btn-danger, dole). Dva tipa dugmeta na celom sajtu. */
.btn-primary, .btn-solid {
    background: var(--accent-dim);
    color: var(--accent);
    border-color: var(--accent);
    font-family: var(--button-primary-font);
    font-weight: var(--button-primary-weight);
    text-shadow: none;
}

.btn-primary:hover, .btn-solid:hover {
    background: var(--accent);
    color: var(--button-primary-text);
    box-shadow: var(--button-primary-glow);
}

/* ON/pressed toggle stanje (CTO 2026-07-16). Trajno dok je aria-pressed="true". Sjaj deli sa
   :hover (--button-primary-glow → --shadow-neon, prati temu). brightness = tema-neutralan cue
   da je ON JASAN i kad tema nema sjaj (light: shadow-neon:none) — hover je namerno nežan, trajni
   toggle mora da se vidi. Toggle = modul prebacuje aria-pressed na klik; primitiv daje izgled
   (atribut, ne klasa → lint ga ne dira; čitač ekrana zna stanje). */
.btn-primary[aria-pressed="true"], .btn-solid[aria-pressed="true"] {
    background: var(--accent);
    color: var(--button-primary-text);
    box-shadow: var(--button-primary-glow);
    filter: brightness(1.18);
}

/* v3-compatible button variants */
.btn-p { color: var(--accent); border-color: rgba(0, 229, 255, 0.3); }
.btn-p:hover { background: var(--accent-dim); }
.btn-d { color: var(--status-critical); border-color: rgba(255, 51, 85, 0.3); }
.btn-d:hover { background: var(--status-critical-bg); }
.btn-g { color: var(--status-ok); border-color: rgba(178, 255, 0, 0.3); }
.btn-g:hover { background: var(--status-ok-bg); }
.btn-y { color: var(--status-warning); border-color: rgba(255, 184, 0, 0.3); }
.btn-y:hover { background: var(--status-warning-bg); }

/* Brisanje = FILLED (solid danger) — destruktivno JASNO odskače od outline default-a. */
.btn-danger { background: var(--status-critical); color: #fff; border-color: var(--status-critical); }
.btn-danger:hover { opacity: 0.9; box-shadow: var(--button-primary-glow); }

.btn-cancel { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); }
.btn-del { background: linear-gradient(135deg, #cc1133, #990022); border: none; color: #fff; }

/* Inputs */
input[type="text"], input[type="password"], input[type="number"],
input[type="search"], select, textarea {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--text);
    font-family: var(--sans);
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.15s;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--input-focus);
}

/* Modal inputs (v3 compatible) */
.modal input, .modal select {
    width: 100%;
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-bright);
    font-family: var(--mono);
    font-size: 0.85rem;
    margin-bottom: 12px;
    outline: none;
}

.modal input:focus, .modal select:focus {
    border-color: var(--input-focus);
}

/* Toast notifications */
.toast-container, .toast-area {
    position: fixed;
    top: 60px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: var(--shadow-lg);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: toast-in 0.3s ease;
    max-width: 360px;
}

.toast.toast-success, .toast-ok { border-left: 3px solid var(--status-ok); background: var(--status-ok-bg); color: var(--status-ok); }
.toast.toast-error, .toast-err { border-left: 3px solid var(--status-critical); background: var(--status-critical-bg); color: var(--status-critical); }
.toast.toast-warning { border-left: 3px solid var(--status-warning); }
.toast.toast-info    { border-left: 3px solid var(--status-info); }

@keyframes toast-in { from { opacity: 0; transform: translateX(40px); } }

/* Modal */
.modal-overlay, .modal-bg {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-bg { display: none; }
.modal-bg.on { display: flex; }

.modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 24px;
    box-shadow: var(--shadow-lg);
    min-width: 400px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
}

.modal h3 { color: var(--text-bright); margin-bottom: 10px; font-size: 1rem; }
.modal p { font-size: 0.82rem; color: var(--text-dim); margin-bottom: 16px; }
.modal .btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.modal .btns button {
    padding: 8px 18px;
    font-size: 0.82rem;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--sans);
    font-weight: 600;
}

.modal-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-bright);
    margin-bottom: 16px;
}

/* Log viewer */
.log-box {
    background: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--text-dim);
    max-height: 400px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.6;
}

/* Loading/spinner */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Error card (fail-safe display) */
.error-card {
    background: var(--status-critical-bg);
    border: 1px solid var(--status-critical);
    color: var(--status-critical);
    border-radius: 8px;
    padding: 16px;
    font-size: 0.85rem;
    margin: 20px 0;
}

/* Overview layout — flex kolona za banner+stats, grid samo za 4 kartice */
.overview-cards { display: flex; flex-direction: column; gap: 16px; }
.overview-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }@media (max-width: 1200px) { .overview-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .overview-card-grid { grid-template-columns: 1fr; } }

/* Overview welcome baner */
.overview-welcome {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    padding: 0 16px 6px;
}
.overview-welcome-icon {
    font-size: 2rem; color: var(--text-dim); margin: 0; flex-shrink: 0; line-height: 1;
}
.overview-welcome-text { text-align: center; }
.overview-welcome-title {
    font-size: 1.3rem; font-weight: 700; color: var(--text-bright); line-height: 1.15;
}
.overview-welcome-subtitle {
    font-size: 0.9rem; color: var(--text-dim); margin-top: 1px;
}

/* Overview 2x2 kvadrant layout */
.overview-quad {
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
    grid-column: span 2;
}
.overview-nav-group {
    background: transparent; border: none; border-radius: 0;
    padding: 0; min-height: 0;
}
.overview-nav-group-title {
    font-size: 1.12rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px;
    color: var(--text-bright); margin-bottom: 12px; text-align: center;
    padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.overview-nav-group[data-section="monitoring"] .nav-link-card { border-left: 3px solid var(--section-monitoring); }
.overview-nav-group[data-section="management"] .nav-link-card { border-left: 3px solid var(--section-management); }
.overview-nav-group[data-section="admin"] .nav-link-card { border-left: 3px solid var(--section-admin); }
.overview-nav-group[data-section="aplikacije"] .nav-link-card { border-left: 3px solid var(--section-aplikacije); }
.overview-nav-grid {
    display: grid; grid-template-columns: repeat(auto-fill, 156px); justify-content: center; gap: 10px;
}
.nav-link-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px;
    padding: 8px 6px; border-radius: 8px; cursor: pointer;
    background: var(--surface-chip); border: 1px solid var(--border);
    transition: all .2s ease; text-align: center;
    width: 156px; height: 156px;
    overflow: hidden;
}
.nav-link-card:hover {
    border-color: var(--accent); background: var(--surface-hover, var(--surface));
    transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.nav-link-card-icon { font-size: 2rem; line-height: 1; flex-shrink: 0; }
.nav-link-card-name { font-size: 0.92rem; font-weight: 600; color: var(--text-bright); line-height: 1.2; }
.nav-link-card-desc { font-size: .75rem; color: var(--text-dim); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Tab badge iznad ikonice za favorite tabove */
.nav-link-card-tab-badge {
    font-size: 0.65rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--accent);
    border: 1px solid var(--accent); border-radius: 4px;
    padding: 1px 6px; line-height: 1.3; flex-shrink: 0;
}
@media (max-width: 900px) { .overview-quad { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .overview-nav-grid { grid-template-columns: repeat(auto-fill, 100px); } .nav-link-card { width: 100px; height: 100px; } }

/* ═══ LAYOUT ENGINE — prilagodljiv raspored panela ═══ */

/* Edit mode — vizuelni indikatori na panelima */
.layout-edit-mode .card[data-panel-id] {
    outline: 2px dashed rgba(99, 102, 241, 0.5);
    outline-offset: -2px;
    position: relative;
}
.layout-edit-mode .card[data-panel-id][data-layout="none"] {
    outline: none;
}

/* Drag handle — gornji deo kartice postaje drag zona */
.layout-drag-handle {
    position: absolute; top: 0; left: 0; right: 0; height: 36px;
    cursor: grab; z-index: 10;
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.08) 0%, transparent 100%);
    border-radius: 8px 8px 0 0;
    display: flex; align-items: center; justify-content: center;
}
.layout-drag-handle:active { cursor: grabbing; }
.layout-drag-handle::after {
    content: '⠿'; font-size: 1.1rem; color: rgba(99, 102, 241, 0.6);
    letter-spacing: 2px;
}

/* Resize handle — donji desni ugao */
.layout-resize-handle {
    position: absolute; bottom: 0; right: 0;
    width: 20px; height: 20px; cursor: nwse-resize; z-index: 10;
    background: linear-gradient(135deg, transparent 50%, rgba(99, 102, 241, 0.4) 50%);
    border-radius: 0 0 8px 0;
}

/* Panel tokom prevlačenja */
.layout-dragging {
    opacity: 0.6; z-index: 100;
    outline-color: var(--accent) !important;
    outline-style: solid !important;
}

/* Drop target indikator */
.layout-drop-target {
    outline: 2px solid var(--accent) !important;
    outline-offset: -2px;
    background: rgba(99, 102, 241, 0.06) !important;
}

/* Grid layout za prilagodljive stranice */
.layout-grid {
    display: grid;
    /* Broj kolona je per-stranica/tab: modul postavi --layout-cols (npr. 3 za 3 servera).
       Default 2 → backward-compat sa postojećim sačuvanim rasporedima (col-2 = puna širina). */
    grid-template-columns: repeat(var(--layout-cols, 2), 1fr);
    gap: 16px;
}
.layout-grid > .card { margin-bottom: 0 !important; }
.layout-col-1 { grid-column: span 1; }
.layout-col-2 { grid-column: span 2; }
.layout-col-3 { grid-column: span 3; }
.layout-col-4 { grid-column: span 4; }
.layout-row-2 { grid-row: span 2; }

/* Layout toolbar — floating bar tokom edit mode-a */
.layout-toolbar {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 8px 16px;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    z-index: 200;
    font-size: 0.85rem;
}
.layout-toolbar button {
    padding: 6px 14px; border-radius: 6px; border: 1px solid var(--border);
    background: transparent; color: var(--text-bright); cursor: pointer;
    font-size: 0.82rem; font-weight: 500; transition: all 0.15s;
}
.layout-toolbar button:hover { background: var(--sidebar-hover); }
.layout-toolbar .layout-btn-save {
    background: var(--accent); color: #fff; border-color: var(--accent);
}
.layout-toolbar .layout-btn-save:hover { opacity: 0.85; }
.layout-toolbar .layout-btn-reset {
    color: #ef4444; border-color: #ef4444;
}

/* Preset dropdown */
.layout-preset-wrap { position: relative; }
.layout-preset-dropdown {
    position: absolute; bottom: 100%; left: 0; margin-bottom: 6px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 8px; min-width: 200px; overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    display: none;
}
.layout-preset-dropdown.open { display: block; }
.layout-preset-item {
    padding: 8px 14px; cursor: pointer; font-size: 0.82rem;
    color: var(--text); transition: background 0.1s;
}
.layout-preset-item:hover {
    background: var(--sidebar-hover); color: var(--text-bright);
}
.layout-preset-item-name { font-weight: 600; }
.layout-preset-item-desc { font-size: 0.72rem; color: var(--text-dim); margin-top: 2px; }

/* ═══ Tabs / kartice — bazna komponenta (ADR-084 baseline) ═══
   Standardni markup: .tabs > (.tab-bar > .tab-btn) + .tab-panel. Tematizovano
   preko CSS varijabli → radi u svim vizuelnim temama.
   Dizajn = segmentirani „pill" (kanonski, prema legacy topology referenci):
   .tab-bar = pill-traka (surface okvir), .tab-btn = pill dugme, aktivni izdignut.
   Inactive border = transparent (rezerviše prostor → bez layout-jitter-a na active). */
.tabs { display: block; }
.tab-bar {
    display: flex; gap: 4px; padding: 4px; overflow-x: auto;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 10px; margin-bottom: 18px;
}
.tab-btn {
    flex: 1; padding: 10px 16px; background: transparent;
    border: 1px solid transparent; border-radius: 7px;
    color: var(--text-dim); font-family: var(--mono);
    font-size: 0.78rem; font-weight: 500; cursor: pointer;
    transition: all 0.2s; white-space: nowrap;
}
.tab-btn:hover { color: var(--text); background: var(--surface-2); }
.tab-btn.active {
    color: var(--text-bright); background: var(--surface-3);
    border-color: var(--border-strong); font-weight: 600;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: tab-fadeIn 0.25s ease; }
@keyframes tab-fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
    .tab-bar { flex-wrap: wrap; }
    .tab-btn { flex: unset; }
}

/* ═══ Layout sekcija/panel (render_layout, ADR-084 baseline) ═══ */
.layout-section { margin-bottom: 22px; }
.layout-section-title { font-size: 0.95rem; font-weight: 600; color: var(--text-bright); margin: 0 0 12px; }
.panel-body { min-height: 1px; }

/* Topbar edit dugme */
/* Topbar center — favorites ikone */
.topbar-center {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
}
.topbar-favorites { display: flex; align-items: center; gap: 4px; }
.topbar-fav-icon {
    font-size: 1.3rem; cursor: pointer; padding: 2px 4px;
    border-radius: 6px; transition: all 0.15s; line-height: 1;
}
.topbar-fav-icon:hover {
    background: var(--sidebar-hover); transform: scale(1.15);
}

/* Overview — favorites kolona + grid wrapper */
.overview-with-favs {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px;
    max-width: 1800px; margin: 0 auto; width: 100%;
    align-items: start;
    padding: 0 24px;
}
.overview-fav-panel {
    display: flex; flex-direction: column; gap: 10px;
}
.overview-fav-header {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding-bottom: 8px; border-bottom: 1px solid var(--border);
    min-height: 28px;
}
.overview-fav-title {
    font-size: 1.12rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 1.5px; color: var(--text-bright);
}
.overview-fav-edit-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 12px; border-radius: 6px;
    font-size: 0.78rem !important; font-weight: 600;
    font-family: var(--mono);
    color: var(--accent) !important; border: 1px solid var(--accent) !important;
    background: var(--accent-dim) !important; cursor: pointer;
    transition: all 0.15s; line-height: 1.4;
    margin-left: 12px;
}
.overview-fav-edit-btn:hover {
    background: var(--accent) !important; color: var(--bg) !important;
}
.overview-fav-empty {
    font-size: 1.1rem; text-align: center; color: var(--text-dim);
    padding: 24px 8px; line-height: 1.5;
    grid-column: 1 / -1;
}
.overview-fav-list {
    display: grid; grid-template-columns: repeat(auto-fill, 156px); justify-content: center; gap: 10px;
}
.overview-fav-card {
    width: 156px !important; height: 156px !important;
}
/* Levi + desni border u boji sekcije za favorites kartice */
.overview-fav-card[data-fav-section="monitoring"]  { border-left: 3px solid var(--section-monitoring); border-right: 3px solid var(--section-monitoring); }
.overview-fav-card[data-fav-section="management"]  { border-left: 3px solid var(--section-management); border-right: 3px solid var(--section-management); }
.overview-fav-card[data-fav-section="admin"]       { border-left: 3px solid var(--section-admin); border-right: 3px solid var(--section-admin); }
.overview-fav-card[data-fav-section="aplikacije"]  { border-left: 3px solid var(--section-aplikacije); border-right: 3px solid var(--section-aplikacije); }

/* KANON — kompaktna početna (CTO 2026-07-21; iz preview themes.css): pločice 140, 3 kolone svuda,
   manji razmak → više stane, manje skrola. */
.overview-with-favs { gap: 16px; }
.overview-col { display: flex; flex-direction: column; gap: 16px; }
.overview-nav-grid  { grid-template-columns: repeat(3, 140px); gap: 8px; }
.overview-fav-list  { grid-template-columns: repeat(3, 140px); gap: 8px; }
.nav-link-card, .overview-fav-card { width: 140px !important; height: 140px !important; }
@media (max-width: 600px) {
    .overview-nav-grid, .overview-fav-list { grid-template-columns: repeat(auto-fill, 104px); }
    .nav-link-card, .overview-fav-card { width: 104px !important; height: 104px !important; }
}

/* KANON — naslov-pločica zaglavlja (pageHeader): pun okvir u boji tekuće sekcije (loadPage postavlja
   .page[data-nav-section]); default neutralno. Reuse .nav-link-card izgled (surface-chip + radius). */
.ph-title-tile {
    display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0;
    padding: 8px 14px; border-radius: 8px;
    background: var(--surface-chip); border: 1px solid var(--border-strong);
}
.ph-title-tile .ph-title { white-space: nowrap; }
.page[data-nav-section="monitoring"] .ph-title-tile { border-color: var(--section-monitoring); }
.page[data-nav-section="management"] .ph-title-tile { border-color: var(--section-management); }
.page[data-nav-section="admin"]      .ph-title-tile { border-color: var(--section-admin); }
.page[data-nav-section="aplikacije"] .ph-title-tile { border-color: var(--section-aplikacije); }
@media (max-width: 1200px) {
    .overview-with-favs { grid-template-columns: 1fr; }
    .overview-quad { grid-column: span 1; }
    .overview-fav-list { grid-template-columns: repeat(auto-fill, 156px); justify-content: center; }
}

/* Favorites modal — selekcija */
.fav-modal { min-width: 700px; }
.fav-modal-filter {
    display: flex; gap: 10px; margin-bottom: 16px; align-items: baseline;
    justify-content: center;
}
.fav-modal-filter select {
    padding: 7px 14px; border-radius: 6px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text-bright); font-size: 1.05rem;
    vertical-align: middle;
}
.fav-modal-filter span { font-size: 1.05rem; line-height: 1; }
.fav-modal-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    max-height: 520px; overflow-y: auto;
}
.fav-modal-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--border); transition: all 0.15s;
    min-height: 60px;
}
.fav-modal-item:hover { border-color: var(--accent); }
.fav-modal-item.selected {
    border-color: var(--accent); background: rgba(99, 102, 241, 0.1);
}
.fav-modal-item input[type=checkbox] { width: 20px; height: 20px; flex-shrink: 0; margin: 0; padding: 0; }
.fav-modal-item-icon { font-size: 1.7rem; flex-shrink: 0; line-height: 1; margin-left: 12px; }
.fav-modal-item-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fav-modal-item-name { font-weight: 600; font-size: 1.2rem; color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav-modal-item-tab { font-size: 0.82rem; color: var(--text-dim); font-weight: 500; }
/* Dugmad u favorites modalu — btn-popup stil */
.fav-modal-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.fav-modal-btns button {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 12px; border-radius: 6px;
    font-size: 0.78rem; font-weight: 600;
    cursor: pointer; border: 1px solid var(--accent);
    background: var(--accent-dim); color: var(--accent);
    font-family: var(--mono); transition: all 0.15s; line-height: 1.4;
}
.fav-modal-btns button:hover {
    background: var(--accent); color: var(--bg);
}

.topbar-layout-btn {
    padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border);
    background: transparent; color: var(--text-dim); cursor: pointer;
    font-size: 0.78rem; transition: all 0.18s; display: none;
    position: relative; z-index: 10001;
}
.topbar-layout-btn:hover { color: var(--text-bright); border-color: var(--accent); }
.topbar-layout-btn.visible { display: inline-flex; }
.topbar-layout-btn.active {
    background: var(--accent); color: var(--bg); border-color: var(--accent);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.35);
}
.topbar-layout-btn.active:hover {
    opacity: 0.85;
}

/* ═══ VIEWER ROLE — read-only mod za viewer grupu ═══
   Viewer vidi SVE ali ne može da klikne ni na jedno dugme.
   Dugmad ostaju vidljiva ali su vizuelno i funkcionalno disabled.
   Layout se NE menja — ništa ne nestaje. */
/* Viewer dugmad — kontroliše se isključivo kroz UI restrikcije.
   Jedini izuzetak: dugmad za brisanje/uklanjanje su uvek disabled za viewere.
   Pokriva: ✕ delete dugmad (btn-icon-danger) */
body[data-user-role="viewer"] .main-content .btn-icon-danger {
    opacity: 0.3 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
}

/* ═══ UI RESTRIKCIJE — blur + prohibited overlay za zabranjene panele ═══ */
.restricted-tab {
    position: relative;
}
.restricted-tab a {
    filter: blur(2px);
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}
.restricted-tab::after {
    content: '\1F6AB';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    pointer-events: none;
    z-index: 5;
}

.restricted-tab-btn {
    position: relative;
    filter: blur(2px);
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}
.restricted-tab-btn::after {
    content: '\1F6AB';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    filter: blur(0);
    pointer-events: none;
    z-index: 5;
}

.restricted-panel {
    position: relative;
    overflow: hidden;
}
.restricted-panel > *:not(.restricted-overlay) {
    filter: blur(6px);
    pointer-events: none;
    user-select: none;
}
.restricted-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 8px;
}
.restricted-overlay img {
    width: 48px;
    height: 48px;
    opacity: 0.7;
}
.restricted-section-blur {
    position: relative;
    overflow: hidden;
}
.restricted-section-blur > *:not(.restricted-overlay) {
    filter: blur(6px);
    pointer-events: none;
    user-select: none;
}

/* Utility classes */
.text-ok       { color: var(--status-ok); }
.text-warning  { color: var(--status-warning); }
.text-critical { color: var(--status-critical); }
.text-info     { color: var(--status-info); }
.text-dim      { color: var(--text-dim); }
.text-bright   { color: var(--text-bright); }
.text-accent   { color: var(--accent); }
.text-right    { text-align: right; }
.text-center   { text-align: center; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.gap-1 { gap: 8px; }
.gap-2 { gap: 16px; }
.flex  { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.hidden { display: none !important; }

/* ─── Responsive sidebar collapse (RAIL) — SAMO 769–900px; ≤768 → off-canvas drawer (ui-kit shell.css).
       Donja granica 769 = --shell-bp-mobile (768) + 1: rail i drawer se NE preklapaju. ─── */
@media (min-width: 769px) and (max-width: 900px) {
    .sidebar { width: var(--shell-sidebar-rail); }
    .sidebar-brand span, .sidebar-section, .sidebar-nav li a span:not(.nav-icon) { display: none; }
    .sidebar-nav li a { justify-content: center; padding: 12px; }
    .topbar { left: var(--shell-sidebar-rail); }
    .main-content { margin-left: var(--shell-sidebar-rail); }
    .app-layout { grid-template-columns: var(--shell-sidebar-rail) 1fr; }
}

/* ═══ POPUP SELECT MODE ═══ */
#btn-popup.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* ═══ FLOATING PANEL (popup bez browser chrome-a) ═══ */
#floating-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
}

#floating-panel {
    position: fixed;
    top: 3%;
    left: 5%;
    width: 90%;
    height: 92%;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.fp-header {
    display: flex;
    align-items: center;
    height: 28px;
    padding: 0 6px 0 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    cursor: grab;
    flex-shrink: 0;
    user-select: none;
    -webkit-user-select: none;
}

.fp-header:active {
    cursor: grabbing;
}

.fp-title {
    flex: 1;
    font-size: 0.72rem;
    font-family: var(--mono);
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fp-fullscreen,
.fp-close {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 0.78rem;
    cursor: pointer;
    border-radius: 4px;
    flex-shrink: 0;
    transition: all 0.15s;
}

.fp-fullscreen:hover {
    background: var(--surface-3);
    color: var(--text-bright);
}

.fp-close:hover {
    background: #ef4444;
    color: #fff;
}

/* Fullscreen (maximized) mode */
#floating-panel.fp-maximized {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0;
    transform: none !important;
}

.fp-body {
    flex: 1;
    overflow: auto;
    min-height: 0;
    padding: 0;
}

body.popup-select-mode {
    cursor: crosshair;
}

body.popup-select-mode .popup-target {
    outline: 2px dashed var(--accent);
    outline-offset: 4px;
    cursor: pointer;
    transition: outline-color 0.2s, box-shadow 0.2s;
    animation: popup-pulse 1.5s ease-in-out infinite;
}

body.popup-select-mode .popup-target:hover {
    outline-color: #60a5fa;
    box-shadow: 0 0 20px rgba(96, 165, 250, 0.3);
}

@keyframes popup-pulse {
    0%, 100% { outline-color: var(--accent); }
    50% { outline-color: #60a5fa; }
}

/* ═══════════════════════════════════════════════════════════
   ANNOUNCEMENT SPLASH OVERLAY
   Fullscreen overlay sa progress bar i countdown.
   4 tipa: info (plava), warning (narandžasta), success (zelena), maintenance (ljubičasta)
   ═══════════════════════════════════════════════════════════ */

.ann-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    display: flex; justify-content: center; align-items: center;
    z-index: 99999;
    opacity: 0; visibility: hidden;
    overflow: hidden;
    animation: annFadeInOverlay 0.5s ease forwards;
    pointer-events: all;
}
.ann-overlay.ann-type-info        { background: rgba(15, 23, 42, 0.92); }
.ann-overlay.ann-type-warning     { background: rgba(30, 20, 10, 0.92); }
.ann-overlay.ann-type-success     { background: rgba(10, 30, 20, 0.92); }
.ann-overlay.ann-type-maintenance { background: rgba(25, 15, 35, 0.92); }

.ann-modal {
    background: var(--surface, #12121c);
    padding: 50px 40px;
    border-radius: 20px;
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.5);
    max-width: 480px; width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    text-align: center;
    position: relative;
    font-family: var(--sans, 'Outfit', sans-serif);
    transform: translateY(30px) scale(0.9);
    opacity: 0;
    animation: annSlideUpModal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
    border: 1px solid var(--border, rgba(80,80,120,0.2));
}
/* Sandbox iframe za šablon-sadržaj (TD S-06): pun modal, bez okvira;
   pointer-events:none → klik zatvara preko overlay-a; color-scheme:normal
   sprečava neprozirnu (belu) pozadinu iframe-a u dark temama. */
.ann-sandbox-frame {
    border: 0; display: block; width: 100%; height: 200px;
    background: transparent; pointer-events: none; color-scheme: normal;
}

/* Obojeni gornji border po tipu — neon zelena (#39ff14) za info */
.ann-type-info .ann-modal        { border-top: 3px solid #39ff14; }
.ann-type-warning .ann-modal     { border-top: 3px solid #ffb800; }
.ann-type-success .ann-modal     { border-top: 3px solid #39ff14; }
.ann-type-maintenance .ann-modal { border-top: 3px solid #00b8d4; }

/* Progress bar boja po tipu — neon zelena za info */
.ann-type-info .ann-progress-bar        { background: linear-gradient(90deg, #39ff14, #00e5cc); }
.ann-type-warning .ann-progress-bar     { background: linear-gradient(90deg, #ffb800, #ef4444); }
.ann-type-success .ann-progress-bar     { background: linear-gradient(90deg, #39ff14, #00e5cc); }
.ann-type-maintenance .ann-progress-bar { background: linear-gradient(90deg, #00b8d4, #19BAFF); }

/* Fadeout animacija */
.ann-overlay.ann-fadeout {
    animation: annFadeOutOverlay 0.5s ease forwards;
}
.ann-overlay.ann-fadeout .ann-modal {
    animation: annSlideDownModal 0.5s ease forwards;
}

/* Animacije */
@keyframes annFadeInOverlay {
    to { opacity: 1; visibility: visible; }
}
@keyframes annFadeOutOverlay {
    from { opacity: 1; visibility: visible; }
    to   { opacity: 0; visibility: hidden; }
}
@keyframes annSlideUpModal {
    to { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes annSlideDownModal {
    from { transform: translateY(0) scale(1); opacity: 1; }
    to   { transform: translateY(-30px) scale(0.9); opacity: 0; }
}
@keyframes annPopIn {
    0%   { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes annPulseRing {
    0%   { transform: scale(0.8); opacity: 0.8; }
    100% { transform: scale(3.5); opacity: 0; }
}
@keyframes annFloatIcon {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}
@keyframes annFadeSlideUp {
    0%   { opacity: 0; transform: translateY(15px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ═══ BPD NEON ENHANCEMENTS ═══ */

/* Neon glow na kartice pri hoveru */
.card:hover {
    border-color: rgba(0, 229, 255, 0.3);
    box-shadow: var(--shadow-neon);
}

/* Sidebar brand neon glow na logo */
.sidebar-brand img {
    filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.3));
}

.sidebar-brand:hover img {
    filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.5));
}

/* Topbar donja linija neon */
.topbar::after {
    background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.3), rgba(178, 255, 0, 0.2), transparent) !important;
    height: 1px;
}

/* Sidebar border neon accent */
.sidebar {
    border-right-color: rgba(0, 229, 255, 0.1);
}

/* Active nav neon glow */
.sidebar-nav li a.active {
    text-shadow: 0 0 8px currentColor;
}

/* Neon dugmad — univerzalni hover glow */
.btn:hover {
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.15);
}

.btn-icon-action:hover,
.btn.btn-icon-action:hover {
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
}

.btn-icon-action.btn-icon-success:hover {
    box-shadow: 0 0 10px rgba(178, 255, 0, 0.3);
}

.btn-icon-action.btn-icon-danger:hover {
    box-shadow: 0 0 10px rgba(255, 51, 85, 0.3);
}

.btn-icon-action.btn-icon-warning:hover {
    box-shadow: 0 0 10px rgba(255, 184, 0, 0.3);
}

.btn-icon-action.btn-icon-info:hover {
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
}

/* Stat box neon border hover */
.stat-box:hover {
    border-color: rgba(0, 229, 255, 0.25);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.1);
}

/* Input focus neon glow */
input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.2);
}

/* Modal neon border */
.modal {
    border-color: rgba(0, 229, 255, 0.2);
    box-shadow: var(--shadow-lg), 0 0 30px rgba(0, 229, 255, 0.08);
}

/* Toast neon accent */
.toast {
    border-color: rgba(0, 229, 255, 0.15);
}

/* Status badge neon glow */
.status-ok { text-shadow: 0 0 6px rgba(178, 255, 0, 0.3); }
.status-critical { text-shadow: 0 0 6px rgba(255, 51, 85, 0.3); }
.status-warning { text-shadow: 0 0 6px rgba(255, 184, 0, 0.3); }

/* Popup/Font sizer dugmad neon glow hover */
.btn-popup:hover, .font-sizer button:hover {
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.3);
}