/* ══════════════════════════════════════════════════════════════
   CC Web — Dark Neon Theme
   CSS custom properties (colors, fonts, spacing, glows)
   Ported from Electron version
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── Background scale (darkest → lightest) ── */
  --bg-void:     #02050a;
  --bg-deepest:  #05080c;
  --bg-deep:     #0a0f16;
  --bg-surface:  #0e1520;
  --bg-raised:   #131c2a;
  --bg-hover:    #1a2636;
  --bg-active:   #1e2d42;

  /* ── Borders ── */
  --border-dim:    #1a2536;
  --border-mid:    #243347;
  --border-bright: #2d4460;

  /* ── Text scale ── */
  --text-max:      #e8edf5;
  --text-high:     #b8c4d6;
  --text-mid:      #7d90aa;   /* WCAG: 4.57→5.89 on bg-deep (was #6b7d96) */
  --text-low:      #54677f;   /* WCAG: 2.33→3.32 (was #3d5068) */
  --text-ghost:    #243347;

  /* ── Neon accents ── */
  --neon-green:    #00ff9d;
  --neon-blue:     #00c3ff;
  --neon-purple:   #a855f7;
  --neon-pink:     #ff2d8a;
  --neon-red:      #ff3b4f;
  --neon-amber:    #ffb800;
  --neon-yellow:   #ffd666;
  --neon-cyan:     #22d3ee;
  --neon-teal:     #2dd4bf;

  /* ── Glows ── */
  --glow-green:  0 0 20px rgba(0,255,157,0.15), 0 0 4px rgba(0,255,157,0.3);
  --glow-blue:   0 0 20px rgba(0,195,255,0.12), 0 0 4px rgba(0,195,255,0.25);
  --glow-red:    0 0 12px rgba(255,59,79,0.2);
  --glow-purple: 0 0 16px rgba(168,85,247,0.15);
  --glow-amber:  0 0 12px rgba(255,184,0,0.2);
  --glow-cyan:   0 0 12px rgba(34,211,238,0.2);

  /* ── RGB companions (for rgba() usage in other files) ── */
  --neon-green-rgb:  0,255,157;
  --neon-blue-rgb:   0,195,255;
  --neon-purple-rgb: 168,85,247;
  --neon-pink-rgb:   255,45,138;
  --neon-red-rgb:    255,59,79;
  --neon-amber-rgb:  255,184,0;
  --neon-yellow-rgb: 255,214,102;
  --neon-cyan-rgb:   34,211,238;
  --neon-teal-rgb:   45,212,191;
  --text-max-rgb:    232,237,245;
  --bg-void-rgb:     2,5,10;

  /* ── Category colors ── */
  --cat-infra:    var(--neon-red);
  --cat-webshop:  var(--neon-green);
  --cat-2klika:   var(--neon-blue);
  --cat-clients:  var(--neon-amber);

  /* ── Fonts ── */
  --mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
  --sans: 'Inter', -apple-system, system-ui, sans-serif;

  /* ── Spacing ── */
  --sidebar-width: 280px;   /* CC-6 (2026-08-17): jedini izvor širine sidebara — resize je live-syncira */
  --topbar-height: 44px;
  --term-bar-height: 32px;

  /* ── Transitions ── */
  --t-fast: 0.12s ease;
  --t-normal: 0.2s ease;
}

/* ══════════════════════════════════════════════════════════════
   Phosphor — Matrix/CRT hacker (warm green phosphor)
   ══════════════════════════════════════════════════════════════ */
[data-theme="phosphor"] {
  --bg-void:     #050a05;
  --bg-deepest:  #081008;
  --bg-deep:     #0a120a;
  --bg-surface:  #0f1a0f;
  --bg-raised:   #142014;
  --bg-hover:    #1a2a1a;
  --bg-active:   #203420;

  --border-dim:    #1a3a1a;
  --border-mid:    #244a24;
  --border-bright: #2e5c2e;

  --text-max:      #d4e8d4;
  --text-high:     #a8cca8;
  --text-mid:      #6a9a6a;   /* WCAG: 5.84 on bg-deep — already AA, kept */
  --text-low:      #4d804d;   /* WCAG: 2.99→4.09 (was #3a6a3a) */
  --text-ghost:    #1a3a1a;

  --neon-green:    #33ff88;
  --neon-blue:     #44aaff;
  --neon-purple:   #cc66ff;
  --neon-pink:     #ff66aa;
  --neon-red:      #ff4444;
  --neon-amber:    #ffb627;
  --neon-yellow:   #ffd666;
  --neon-cyan:     #22ddbb;
  --neon-teal:     #22bb99;

  --glow-green:  0 0 20px rgba(51,255,136,0.15), 0 0 4px rgba(51,255,136,0.3);
  --glow-blue:   0 0 20px rgba(68,170,255,0.12), 0 0 4px rgba(68,170,255,0.25);
  --glow-red:    0 0 12px rgba(255,68,68,0.2);
  --glow-purple: 0 0 16px rgba(204,102,255,0.15);
  --glow-amber:  0 0 12px rgba(255,182,39,0.2);
  --glow-cyan:   0 0 12px rgba(34,221,187,0.2);

  --cat-infra:    var(--neon-red);
  --cat-webshop:  var(--neon-green);
  --cat-2klika:   var(--neon-blue);
  --cat-clients:  var(--neon-amber);

  --neon-green-rgb:  51,255,136;
  --neon-blue-rgb:   68,170,255;
  --neon-purple-rgb: 204,102,255;
  --neon-pink-rgb:   255,102,170;
  --neon-red-rgb:    255,68,68;
  --neon-amber-rgb:  255,182,39;
  --neon-yellow-rgb: 255,214,102;
  --neon-cyan-rgb:   34,221,187;
  --neon-teal-rgb:   34,187,153;
  --text-max-rgb:    212,232,212;
  --bg-void-rgb:     5,10,5;
}

/* ══════════════════════════════════════════════════════════════
   Tokyo Drift — Cyberpunk night city (deep indigo + purple)
   ══════════════════════════════════════════════════════════════ */
[data-theme="tokyo"] {
  --bg-void:     #13141f;
  --bg-deepest:  #171826;
  --bg-deep:     #1a1b26;
  --bg-surface:  #1f2233;
  --bg-raised:   #24283b;
  --bg-hover:    #292e42;
  --bg-active:   #2f3549;

  --border-dim:    #24283b;
  --border-mid:    #2f3549;
  --border-bright: #3b4261;

  --text-max:      #c0caf5;
  --text-high:     #a9b1d6;
  --text-mid:      #828bb0;   /* WCAG: 2.76(FAIL)→5.10 on bg-deep (was #565f89) */
  --text-low:      #666f94;   /* WCAG: 1.74→3.47 (was #3b4261) */
  --text-ghost:    #24283b;

  --neon-green:    #9ece6a;
  --neon-blue:     #7aa2f7;
  --neon-purple:   #bb9af7;
  --neon-pink:     #ff007c;
  --neon-red:      #f7768e;
  --neon-amber:    #e0af68;
  --neon-yellow:   #e8c480;
  --neon-cyan:     #2ac3de;
  --neon-teal:     #73daca;

  --glow-green:  0 0 20px rgba(158,206,106,0.15), 0 0 4px rgba(158,206,106,0.3);
  --glow-blue:   0 0 20px rgba(122,162,247,0.12), 0 0 4px rgba(122,162,247,0.25);
  --glow-red:    0 0 12px rgba(247,118,142,0.2);
  --glow-purple: 0 0 16px rgba(187,154,247,0.15);
  --glow-amber:  0 0 12px rgba(224,175,104,0.2);
  --glow-cyan:   0 0 12px rgba(42,195,222,0.2);

  --cat-infra:    var(--neon-red);
  --cat-webshop:  var(--neon-green);
  --cat-2klika:   var(--neon-blue);
  --cat-clients:  var(--neon-amber);

  --neon-green-rgb:  158,206,106;
  --neon-blue-rgb:   122,162,247;
  --neon-purple-rgb: 187,154,247;
  --neon-pink-rgb:   255,0,124;
  --neon-red-rgb:    247,118,142;
  --neon-amber-rgb:  224,175,104;
  --neon-yellow-rgb: 232,196,128;
  --neon-cyan-rgb:   42,195,222;
  --neon-teal-rgb:   115,218,202;
  --text-max-rgb:    192,202,245;
  --bg-void-rgb:     19,20,31;
}

/* ══════════════════════════════════════════════════════════════
   Amber — IBM retro terminal (warm golden, minimal eye strain)
   ══════════════════════════════════════════════════════════════ */
[data-theme="amber"] {
  --bg-void:     #0a0804;
  --bg-deepest:  #0e0b06;
  --bg-deep:     #120e08;
  --bg-surface:  #1a1510;
  --bg-raised:   #211c15;
  --bg-hover:    #2a2318;
  --bg-active:   #332c1f;

  --border-dim:    #2a2318;
  --border-mid:    #3d3526;
  --border-bright: #504730;

  --text-max:      #e8d8b8;
  --text-high:     #bba878;
  --text-mid:      #9c8a60;   /* WCAG: 3.65→5.69 on bg-deep (was #7a6a4a) */
  --text-low:      #7a6640;   /* WCAG: 1.76→3.48 (was #4a3a22) */
  --text-ghost:    #2a2318;

  --neon-green:    #44bb77;
  --neon-blue:     #5599dd;
  --neon-purple:   #cc77dd;
  --neon-pink:     #dd6699;
  --neon-red:      #ff6633;
  --neon-amber:    #ffb627;
  --neon-yellow:   #ffd666;
  --neon-cyan:     #44ccaa;
  --neon-teal:     #33aa88;

  --glow-green:  0 0 20px rgba(68,187,119,0.15), 0 0 4px rgba(68,187,119,0.3);
  --glow-blue:   0 0 20px rgba(85,153,221,0.12), 0 0 4px rgba(85,153,221,0.25);
  --glow-red:    0 0 12px rgba(255,102,51,0.2);
  --glow-purple: 0 0 16px rgba(204,119,221,0.15);
  --glow-amber:  0 0 12px rgba(255,182,39,0.2);
  --glow-cyan:   0 0 12px rgba(68,204,170,0.2);

  --cat-infra:    var(--neon-red);
  --cat-webshop:  var(--neon-green);
  --cat-2klika:   var(--neon-blue);
  --cat-clients:  var(--neon-amber);

  --neon-green-rgb:  68,187,119;
  --neon-blue-rgb:   85,153,221;
  --neon-purple-rgb: 204,119,221;
  --neon-pink-rgb:   221,102,153;
  --neon-red-rgb:    255,102,51;
  --neon-amber-rgb:  255,182,39;
  --neon-yellow-rgb: 255,214,102;
  --neon-cyan-rgb:   68,204,170;
  --neon-teal-rgb:   51,170,136;
  --text-max-rgb:    232,216,184;
  --bg-void-rgb:     10,8,4;
}

/* ══════════════════════════════════════════════════════════════
   Carbon — high-contrast neutral charcoal (brand-green signature)
   Very dark neutral bg + very bright neutral text; single green accent
   keeps CC identity. text-mid lifted to AAA (7.83:1) — the max-legibility
   option. Bg is near-black but deliberately NOT #000 (pure black causes
   halation / eye-strain per WCAG dark-mode research).
   ══════════════════════════════════════════════════════════════ */
[data-theme="carbon"] {
  --bg-void:     #050608;
  --bg-deepest:  #07090d;
  --bg-deep:     #0b0e13;
  --bg-surface:  #11151c;
  --bg-raised:   #181d26;
  --bg-hover:    #1f2530;
  --bg-active:   #262d3a;

  --border-dim:    #232a35;
  --border-mid:    #354150;
  --border-bright: #46586c;

  --text-max:      #f5f8fc;
  --text-high:     #d2dae6;
  --text-mid:      #9aa6b6;   /* WCAG 7.83:1 (AAA) on bg-deep */
  --text-low:      #67768a;   /* WCAG 4.17:1 */
  --text-ghost:    #2c3542;

  --neon-green:    #00ff9d;
  --neon-blue:     #4cc9ff;
  --neon-purple:   #b98cff;
  --neon-pink:     #ff5fa2;
  --neon-red:      #ff5566;
  --neon-amber:    #ffc233;
  --neon-yellow:   #ffe066;
  --neon-cyan:     #4fe3f0;
  --neon-teal:     #44e0c8;

  --glow-green:  0 0 20px rgba(0,255,157,0.15), 0 0 4px rgba(0,255,157,0.3);
  --glow-blue:   0 0 20px rgba(76,201,255,0.12), 0 0 4px rgba(76,201,255,0.25);
  --glow-red:    0 0 12px rgba(255,85,102,0.2);
  --glow-purple: 0 0 16px rgba(185,140,255,0.15);
  --glow-amber:  0 0 12px rgba(255,194,51,0.2);
  --glow-cyan:   0 0 12px rgba(79,227,240,0.2);

  --cat-infra:    var(--neon-red);
  --cat-webshop:  var(--neon-green);
  --cat-2klika:   var(--neon-blue);
  --cat-clients:  var(--neon-amber);

  --neon-green-rgb:  0,255,157;
  --neon-blue-rgb:   76,201,255;
  --neon-purple-rgb: 185,140,255;
  --neon-pink-rgb:   255,95,162;
  --neon-red-rgb:    255,85,102;
  --neon-amber-rgb:  255,194,51;
  --neon-yellow-rgb: 255,224,102;
  --neon-cyan-rgb:   79,227,240;
  --neon-teal-rgb:   68,224,200;
  --text-max-rgb:    245,248,252;
  --bg-void-rgb:     5,6,8;
}

/* ══════════════════════════════════════════════════════════════
   Ice — high-contrast cool electric blue/cyan
   Deep cool slate bg + bright cool-white text + electric blue accent.
   Crisper & brighter than Tokyo (text-mid AAA 7.47:1). Bg avoids pure black.
   ══════════════════════════════════════════════════════════════ */
/* ══ LINEAR (CC-7 faza 2, 2026-08-16) ══
   Skin "Linear" — V1 "Linear Bento" smjer iz redizajna (design-demos/
   v1-linear-bento.html): neutralni grafitni near-black (NE plavo-navy),
   desaturirani akcenti, brand ljubičasta #5E6AD2 obitelj, tiši glowovi.
   Status semantika netaknuta (zelena/cijan/amber/crvena). Uz varijable,
   na dnu fajla je [data-theme="linear"] MATERIJAL blok (staklo za plutajuće
   površine) — jedini skin s glassom, po V1 pravilu "glass elevates only
   what floats". */
[data-theme="linear"] {
  --bg-void:     #060708;
  --bg-deepest:  #08090a;
  --bg-deep:     #0f1115;
  --bg-surface:  #14171c;
  --bg-raised:   #191d24;
  --bg-hover:    #20252e;
  --bg-active:   #262c37;

  --border-dim:    #1f232b;
  --border-mid:    #2a2f39;
  --border-bright: #3a4150;

  --text-max:      #f2f4f8;
  --text-high:     #c9cfda;
  --text-mid:      #9aa3b2;
  --text-low:      #6b7480;
  --text-ghost:    #2a2f39;

  --neon-green:    #3ddc84;
  --neon-blue:     #4ea7fc;
  --neon-purple:   #8b95f0;
  --neon-pink:     #e86bb3;
  --neon-red:      #f26560;
  --neon-amber:    #f0b429;
  --neon-yellow:   #f5d061;
  --neon-cyan:     #58c4dc;
  --neon-teal:     #4ed0b8;

  /* Linear je tih: glowovi na pola alfe dark-neona */
  --glow-green:  0 0 14px rgba(61,220,132,0.10), 0 0 3px rgba(61,220,132,0.20);
  --glow-blue:   0 0 14px rgba(78,167,252,0.10), 0 0 3px rgba(78,167,252,0.18);
  --glow-red:    0 0 10px rgba(242,101,96,0.15);
  --glow-purple: 0 0 12px rgba(139,149,240,0.12);
  --glow-amber:  0 0 10px rgba(240,180,41,0.15);
  --glow-cyan:   0 0 10px rgba(88,196,220,0.14);

  --cat-infra:    var(--neon-red);
  --cat-webshop:  var(--neon-green);
  --cat-2klika:   var(--neon-blue);
  --cat-clients:  var(--neon-amber);

  --neon-green-rgb:  61,220,132;
  --neon-blue-rgb:   78,167,252;
  --neon-purple-rgb: 139,149,240;
  --neon-pink-rgb:   232,107,179;
  --neon-red-rgb:    242,101,96;
  --neon-amber-rgb:  240,180,41;
  --neon-yellow-rgb: 245,208,97;
  --neon-cyan-rgb:   88,196,220;
  --neon-teal-rgb:   78,208,184;
  --text-max-rgb:    242,244,248;
  --bg-void-rgb:     6,7,8;
}

[data-theme="ice"] {
  --bg-void:     #04070d;
  --bg-deepest:  #060a12;
  --bg-deep:     #0a0f1a;
  --bg-surface:  #0f1626;
  --bg-raised:   #152033;
  --bg-hover:    #1c2942;
  --bg-active:   #243352;

  --border-dim:    #1d2b42;
  --border-mid:    #2c425f;
  --border-bright: #3d597f;

  --text-max:      #eaf2ff;
  --text-high:     #c4d4ec;
  --text-mid:      #8fa3c2;   /* WCAG 7.47:1 (AAA) on bg-deep */
  --text-low:      #5d7095;   /* WCAG 3.85:1 */
  --text-ghost:    #243350;

  --neon-green:    #5eead4;
  --neon-blue:     #38bdf8;
  --neon-purple:   #a78bfa;
  --neon-pink:     #f472b6;
  --neon-red:      #fb6a82;
  --neon-amber:    #fbbf45;
  --neon-yellow:   #fde047;
  --neon-cyan:     #22d3ee;
  --neon-teal:     #2dd4bf;

  --glow-green:  0 0 20px rgba(94,234,212,0.15), 0 0 4px rgba(94,234,212,0.3);
  --glow-blue:   0 0 20px rgba(56,189,248,0.14), 0 0 4px rgba(56,189,248,0.28);
  --glow-red:    0 0 12px rgba(251,106,130,0.2);
  --glow-purple: 0 0 16px rgba(167,139,250,0.15);
  --glow-amber:  0 0 12px rgba(251,191,69,0.2);
  --glow-cyan:   0 0 12px rgba(34,211,238,0.2);

  --cat-infra:    var(--neon-red);
  --cat-webshop:  var(--neon-green);
  --cat-2klika:   var(--neon-blue);
  --cat-clients:  var(--neon-amber);

  --neon-green-rgb:  94,234,212;
  --neon-blue-rgb:   56,189,248;
  --neon-purple-rgb: 167,139,250;
  --neon-pink-rgb:   244,114,182;
  --neon-red-rgb:    251,106,130;
  --neon-amber-rgb:  251,191,69;
  --neon-yellow-rgb: 253,224,71;
  --neon-cyan-rgb:   34,211,238;
  --neon-teal-rgb:   45,212,191;
  --text-max-rgb:    234,242,255;
  --bg-void-rgb:     4,7,13;
}

/* ══ LINEAR — materijal (staklo) ══ CC-7 faza 2 (2026-08-16)
   Skin-specifična pravila IZNAD varijabli: plutajuće površine (dropdown,
   flyout, paleta, host-menu, modal, upload kartica, usage panel, ctx-menu)
   dobivaju glass (translucencija + backdrop blur). SAMO za data-theme
   "linear" — ostale teme bajt-identične. Fallback: browser bez
   backdrop-filtera zadrži solidnu var() pozadinu (rgba pada na ~solid). */
[data-theme="linear"] .topbar-menu-dropdown,
[data-theme="linear"] .theme-submenu,
[data-theme="linear"] .ctx-menu,
[data-theme="linear"] .host-menu,
[data-theme="linear"] .palette,
[data-theme="linear"] .modal,
[data-theme="linear"] .usage-panel,
[data-theme="linear"] .upload-progress {
  background: rgba(15, 17, 21, 0.84);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
  border-color: rgba(58, 65, 80, 0.7);
}
/* Aktivni tab kao staklena pločica (V1 bento signature) */
[data-theme="linear"] .topbar-tab.active {
  background: rgba(25, 29, 36, 0.75);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

/* ══ MASTER CONTROL (CC-7 faza 3, 2026-08-16) ══
   Skin "Master Control" — V4 broadcast-režija smjer iz redizajna
   (design-demos/v4-mastercontrol.html): true broadcast blacks, inženjerski
   sivi tekst, tally boje kao okviri/rubovi (status semantika netaknuta),
   kvadratne LED točkice, uppercase UMD labele, amber sat. Materijal blok
   (tally okviri po [data-status] atributu koji postavlja app.js) je ispod. */
[data-theme="mastercontrol"] {
  --bg-void:     #08090a;
  --bg-deepest:  #0a0b0d;
  --bg-deep:     #0c0d0f;
  --bg-surface:  #121417;
  --bg-raised:   #17181b;
  --bg-hover:    #1e2024;
  --bg-active:   #24272c;

  --border-dim:    #202328;
  --border-mid:    #2b2f36;
  --border-bright: #3a404a;

  --text-max:      #f0f2f4;
  --text-high:     #c6cbd2;
  --text-mid:      #98a0aa;
  --text-low:      #6a7280;
  --text-ghost:    #2b2f36;

  --neon-green:    #3ddc84;
  --neon-blue:     #4a9df0;
  --neon-purple:   #9b8cf0;
  --neon-pink:     #e070a8;
  --neon-red:      #f0524d;
  --neon-amber:    #ffb224;
  --neon-yellow:   #f5d061;
  --neon-cyan:     #4fc3dc;
  --neon-teal:     #45c9ab;

  /* Broadcast je matter-of-fact: glow gotovo nula — tally je RUB, ne sjaj */
  --glow-green:  0 0 6px rgba(61,220,132,0.12);
  --glow-blue:   0 0 6px rgba(74,157,240,0.10);
  --glow-red:    0 0 6px rgba(240,82,77,0.14);
  --glow-purple: 0 0 6px rgba(155,140,240,0.10);
  --glow-amber:  0 0 8px rgba(255,178,36,0.16);
  --glow-cyan:   0 0 6px rgba(79,195,220,0.10);

  --cat-infra:    var(--neon-red);
  --cat-webshop:  var(--neon-green);
  --cat-2klika:   var(--neon-blue);
  --cat-clients:  var(--neon-amber);

  --neon-green-rgb:  61,220,132;
  --neon-blue-rgb:   74,157,240;
  --neon-purple-rgb: 155,140,240;
  --neon-pink-rgb:   224,112,168;
  --neon-red-rgb:    240,82,77;
  --neon-amber-rgb:  255,178,36;
  --neon-yellow-rgb: 245,208,97;
  --neon-cyan-rgb:   79,195,220;
  --neon-teal-rgb:   69,201,171;
  --text-max-rgb:    240,242,244;
  --bg-void-rgb:     8,9,10;
}

/* ══ MASTER CONTROL — materijal (tally grammar) ══ CC-7 faza 3
   Sve iza [data-theme="mastercontrol"] → ostale teme bajt-identične.
   Tally = STATUS KAO RUB/OKVIR: tab dobiva lijevi tally rub, aktivni
   (PROGRAM) terminal dobiva okvir u boji statusa (data-status postavlja
   app.js — theme-agnostic). LED točkice kvadratne, labele inženjerske. */
/* Kvadratne LED-ice (broadcast signature) — tabovi + sidebar + pulse.
   .topbar-tab .dot mora biti u selektoru: tabs.css ima (0,2,0) pravilo s
   border-radius:50% koje se učitava POSLIJE theme.css → treba (0,3,0). */
[data-theme="mastercontrol"] .topbar-tab .dot,
[data-theme="mastercontrol"] .dot,
[data-theme="mastercontrol"] .s-item .s-dot,
[data-theme="mastercontrol"] .topbar-pulse .pulse-dot { border-radius: 1px; }
/* Oštriji kutovi svuda gdje je chrome */
[data-theme="mastercontrol"] .topbar-tab,
[data-theme="mastercontrol"] .topbar-action-btn,
[data-theme="mastercontrol"] .tb-btn,
[data-theme="mastercontrol"] .ctx-menu,
[data-theme="mastercontrol"] .topbar-menu-dropdown,
[data-theme="mastercontrol"] .upload-progress { border-radius: 2px; }
/* Tab tally: lijevi rub u boji statusa (uz postojeći dot+glif+riječ) */
[data-theme="mastercontrol"] .topbar-tab { border-left-width: 3px; }
[data-theme="mastercontrol"] .topbar-tab[data-status="running"]     { border-left-color: var(--neon-green); }
[data-theme="mastercontrol"] .topbar-tab[data-status="ai_thinking"] { border-left-color: var(--neon-cyan); }
[data-theme="mastercontrol"] .topbar-tab[data-status="ai_waiting"]  { border-left-color: var(--neon-amber); }
[data-theme="mastercontrol"] .topbar-tab[data-status="error"]       { border-left-color: var(--neon-red); }
/* PROGRAM tally okvir: aktivni terminal uokviren bojom statusa */
[data-theme="mastercontrol"] .term-view.active[data-status="ai_waiting"] .term-container {
  outline: 1px solid var(--neon-amber);
  outline-offset: -1px;
}
[data-theme="mastercontrol"] .term-view.active[data-status="error"] .term-container {
  outline: 1px solid var(--neon-red);
  outline-offset: -1px;
}
[data-theme="mastercontrol"] .term-view.active[data-status="ai_thinking"] .term-container {
  outline: 1px solid rgba(var(--neon-cyan-rgb), 0.45);
  outline-offset: -1px;
}
/* UMD/inženjerske labele: uppercase + tracking na term-baru i hostu */
[data-theme="mastercontrol"] .term-bar .tb-host,
[data-theme="mastercontrol"] .term-bar .tb-status {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
}
[data-theme="mastercontrol"] .topbar-tab .tab-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 10px;
}
/* Gušća router host-lista (V4 gustoća) */
[data-theme="mastercontrol"] .s-item { padding: 3px 14px; }
[data-theme="mastercontrol"] .s-item .s-name { font-size: 12px; }
/* Master traka = srce skina: jači rub, amber sat, crveni MASTER */
[data-theme="mastercontrol"] .master-strip { border-top: 2px solid var(--border-bright); }
[data-theme="mastercontrol"] .master-strip .ms-clock { color: var(--neon-amber); font-size: 12px; }
[data-theme="mastercontrol"] .master-strip .ms-label { color: var(--neon-red); }