/* ==========================================================================
   theme.css — jedinstveni izvor dizajn tokena (design tokens) za TouchLink.
   Ovde žive SVE boje, radius/senka/fokus vrednosti i osnovni easing/keyframes
   koje stranice dele. Ranije je svaka HTML stranica (index/control/admin,
   public i mobile-kiosk/www kopije) imala sopstveni, ručno duplirani
   :root{...}/body.dark-mode{...} blok — pet kopija istih tokena koje su
   vremenom počele da se razilaze (npr. --accent u tamnoj temi je u jednoj
   kopiji ostao hardkodovan na staru zelenu #10B981 umesto na olive-hi).

   Ovaj fajl je SADA jedini izvor istine. Sve 5 HTML stranica (public/index,
   public/control, public/admin, mobile-kiosk/www/index, mobile-kiosk/www/
   control) ga linkuju identično preko <link rel="stylesheet" href="theme.css">
   PRE svog inline <style> bloka. mobile-kiosk/www/theme.css je bukvalna
   kopija ovog fajla (kopira se automatski u build-www.js koraku).

   Baza vrednosti je preuzeta iz control.html (najkompletniji token skup u
   projektu), a dopunjena tokenima koje su imale samo index.html/admin.html
   (--ease-tactile, --border-strong, --track, --input-bg*, --panel-bg,
   --danger-bg, --split-left-*) tako da nijedna stranica ne izgubi ništa
   nakon uklanjanja sopstvenog inline token bloka.

   NE stavljati ovde layout-specifične stvari koje koristi samo jedna
   stranica (npr. --sidebar-w/--sidebar-rail-w koristi samo control.html) —
   te ostaju inline u toj stranici.
   ========================================================================== */

:root {
    --bg-color: #CAD2C5; /* Ash Grey */
    --card-bg: rgba(255,255,255,0.55);
    --card-bg-raised: rgba(250,250,250,0.6);
    --border-subtle: rgba(53,79,82,0.15); /* Dark Slate Grey (tint) */
    --accent: #4E5C2B; /* Olive */
    --accent-dim: rgba(78,92,43,0.18); /* Olive (tint) */
    --olive-hi: #839C49; /* svetlija varijanta za tamnu pozadinu */
    --text-color: #2F3E46; /* Charcoal Blue */
    --muted-text: #465C57;
    --text-on-accent: #FFFFFF;
    --danger: #A63D3D;
    --success: #3D8168;
    --warning: #B45309;

    /* Stara imena promenljivih ostaju kao aliasi — ostatak CSS-a/JS-a u fajlovima
       i dalje referencira --sand/--olive/--accent-orange/itd., ne treba menjati svako pravilo. */
    --sand: var(--bg-color);
    --olive: var(--accent);
    --text-on-olive: var(--text-on-accent);
    --accent-orange: var(--accent);
    --accent-blue: var(--accent);
    --accent-green: var(--success);
    --danger-text: var(--danger);
    --brand-ink: #14150F; /* boja "TouchLink" natpisa u topbaru — usklađeno sa marketing sajtom (TouchLink.rs) */

    /* Log tab — prati temu umesto fiksne crne konzole (svetla tema = svetla ploča) */
    --log-bg: var(--card-bg-raised);
    --log-text: #4a4a42;
    --log-error: #a83e3e;
    --log-success: #2f8a4f;
    --log-system: #2d6fa3;

    /* ===== shadcn/ui-inspirisani tokeni — radius/senka/fokus skala, da kartice/dugmad/modali
       budu uniformni umesto raštrkanih magic-broj radius vrednosti (7px/8px/9px/10px). ===== */
    --radius: 0.65rem;
    --radius-sm: calc(var(--radius) - 4px);
    --radius-lg: 1rem;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.05);
    --ring: var(--accent);

    /* Zajednički easing — koriste ga i index.html i control.html (i www kopije) na više mesta. */
    --ease-tactile: cubic-bezier(0.22, 1, 0.36, 1);

    /* Ivice: --border-subtle za mirne linije, --border-strong za interaktivne obrise
       (secondary dugmad), --track za "prazne" šine (wizard tačkice, progres). */
    --border-strong: rgba(53,79,82,0.28);
    --track: rgba(53,79,82,0.18);

    /* Pozadina za input polja/panele — koriste index.html/admin.html forme. */
    --input-bg: var(--card-bg-raised);
    --input-bg-focus: var(--card-bg);
    --panel-bg: var(--card-bg);
    --danger-bg: rgba(166,61,61,0.12);

    /* Split-screen login ekran (index.html) — levi panel gradijent/glow/tekst. */
    --split-left-bg: linear-gradient(155deg, #4E5C2B 0%, #354025 48%, #2F3E46 100%);
    --split-left-glow: rgba(131, 156, 73, 0.20); /* olive-hi tint */
    --split-left-text: #EAF0EC;
}
body.dark-mode {
    --bg-color: #121212;
    --card-bg: rgba(28,28,31,0.55);
    --card-bg-raised: rgba(35,35,38,0.6);
    --border-subtle: rgba(255,255,255,0.08);
    --accent: var(--olive-hi);
    --accent-dim: rgba(131,156,73,0.20);
    --text-color: #F4F4F5;
    --muted-text: #9A9AA2;
    --text-on-accent: #0A0A0A;
    --danger: #EF4444;
    --success: #10B981;
    --warning: #F59E0B;

    --sand: var(--bg-color);
    --olive: var(--accent);
    --text-on-olive: var(--text-on-accent);
    --accent-orange: var(--accent);
    --accent-blue: var(--accent);
    --accent-green: var(--success);
    --danger-text: var(--danger);
    --brand-ink: var(--text-color);

    /* Log tab — u tamnoj temi ostaje klasičan tamni konzolni izgled */
    --log-bg: #0A0A0A;
    --log-text: #C7C7CC;
    --log-error: #e08a8a;
    --log-success: #7c9468;
    --log-system: #7ab2d8;

    /* Senke su tamnije/jače u dark modu (na tamnoj pozadini blaga svetla senka se ne vidi) */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.20);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.30);

    --border-strong: rgba(255,255,255,0.20);
    --track: rgba(255,255,255,0.16);

    --input-bg: var(--card-bg-raised);
    --input-bg-focus: #232326;
    --panel-bg: var(--card-bg);
    --danger-bg: rgba(239,68,68,0.12);

    --split-left-bg: radial-gradient(130% 130% at 25% 15%, #14342a 0%, #16181a 55%, #0a0b0a 100%);
    --split-left-glow: rgba(16, 185, 129, 0.18);
    --split-left-text: #F4F4F5;
}

/* Fade-in pri učitavanju stranice — sprečava "bljesak" sirovog HTML-a pre nego što se
   stilovi/podaci prikažu. Deli ga index.html i control.html (public + www). */
@keyframes dtPageFadeIn { from { opacity: 0; } to { opacity: 1; } }