/*
 * nikana-ui.css — zajednički izgled svih srpskih stranica panela (19.10.2026).
 *
 * Inbox i ostale stranice izgledaju kao Nikana Ticketing (tickets.aisensis.rs):
 * Tailwind 4 paleta (gray + indigo akcenat), Instrument Sans, Lucide ikonice,
 * svetli i tamni prikaz (klasa .dark na <html>, izbor u localStorage 'theme').
 * Vrednosti boja su prepisane iz Tailwind 4 palete koju koristi ticketing.
 *
 * Stranice koriste semantičke promenljive ispod (--bg, --surface, --accent…).
 * Nova boja ide OVDE, ne kao hex u stranici — inače tamni prikaz puca.
 *
 * Engleski prikaz (graph_inbox_panel_en.html, login_en.html) NE učitava ovaj
 * fajl — zamrznut je zbog Meta review-a.
 */

:root {
  /* ── Tailwind 4 paleta (ista kao ticketing) ── */
  --gray-50: oklch(98.5% .002 247.839);
  --gray-100: oklch(96.7% .003 264.542);
  --gray-200: oklch(92.8% .006 264.531);
  --gray-300: oklch(87.2% .01 258.338);
  --gray-400: oklch(70.7% .022 261.325);
  --gray-500: oklch(55.1% .027 264.364);
  --gray-600: oklch(44.6% .03 256.802);
  --gray-700: oklch(37.3% .034 259.733);
  --gray-800: oklch(27.8% .033 256.848);
  --gray-900: oklch(21% .034 264.665);
  --gray-950: oklch(13% .028 261.692);
  /* Glavna boja panela = Tailwind blue (19.10.2026, na zahtev: „ova plava svuda" =
     blue-400 oklch(0.707 0.165 254.624)). Imena --indigo-* su zadržana da se stilovi
     ne prepisuju; vrednosti su plava skala. */
  --indigo-50: oklch(97% .014 254.604);
  --indigo-100: oklch(93.2% .032 255.585);
  --indigo-200: oklch(88.2% .059 254.128);
  --indigo-300: oklch(80.9% .105 251.813);
  --indigo-400: oklch(70.7% .165 254.624);
  --indigo-500: oklch(70.7% .165 254.624);
  --indigo-600: oklch(70.7% .165 254.624);
  --indigo-700: oklch(62.3% .214 259.815);
  --indigo-950: oklch(28.2% .091 267.935);
  --emerald-50: oklch(97.9% .021 166.113);
  --emerald-200: oklch(90.5% .093 164.15);
  --emerald-300: oklch(84.5% .143 164.978);
  --emerald-600: oklch(59.6% .145 163.225);
  --emerald-700: oklch(50.8% .118 165.612);
  --emerald-950: oklch(26.2% .051 172.552);
  --red-50: oklch(97.1% .013 17.38);
  --red-200: oklch(88.5% .062 18.334);
  --red-300: oklch(80.8% .114 19.571);
  --red-400: oklch(70.4% .191 22.216);
  --red-500: oklch(63.7% .237 25.331);
  --red-600: oklch(57.7% .245 27.325);
  --red-700: oklch(50.5% .213 27.518);
  --red-950: oklch(25.8% .092 26.042);
  --amber-50: oklch(98.7% .022 95.277);
  --amber-200: oklch(92.4% .12 95.746);
  --amber-300: oklch(87.9% .169 91.605);
  --amber-500: oklch(76.9% .188 70.08);
  --amber-600: oklch(66.6% .179 58.318);
  --amber-700: oklch(55.5% .163 48.998);
  --amber-950: oklch(27.9% .077 45.635);
  --sky-50: oklch(97.7% .013 236.62);
  --sky-200: oklch(90.1% .058 230.902);
  --sky-300: oklch(82.8% .111 230.318);
  --sky-700: oklch(50% .134 242.749);
  --sky-950: oklch(29.3% .066 243.157);
  --violet-50: oklch(96.9% .016 293.756);
  --violet-200: oklch(89.4% .057 293.283);
  --violet-300: oklch(81.1% .111 293.571);
  --violet-600: oklch(54.1% .281 293.009);
  --violet-950: oklch(28.3% .141 291.089);
  --pink-600: oklch(59.2% .249 .584);

  /* ── Semantičke promenljive (imena su ista kao ranije u stranicama) ── */
  --bg: #fff;
  --surface: #fff;
  --surface2: var(--gray-50);
  --surface3: var(--gray-100);
  --border: var(--gray-200);
  --border2: var(--gray-300);
  --border-soft: var(--gray-100);
  --accent: var(--indigo-600);
  --accent-hover: var(--indigo-700);
  --accent-light: var(--indigo-50);
  --accent-text: var(--indigo-600);
  --accent-ring: var(--indigo-100);
  --accent2: var(--emerald-600);
  --accent2-light: var(--emerald-50);
  --accent-fb: #1877f2;
  --accent-ig: #e1306c;
  --text: var(--gray-900);
  --text2: var(--gray-600);
  --text3: var(--gray-400);
  --on-accent: #fff;
  --green: var(--emerald-600);
  --green-light: var(--emerald-50);
  --orange: var(--amber-600);
  --orange-light: var(--amber-50);
  --red: var(--red-600);
  --red-light: var(--red-50);
  --blue: var(--indigo-600);
  --purple: var(--violet-600);
  --purple-light: var(--violet-50);

  /* Obojene oznake (chip/baner): pozadina · ivica · tekst — u tamnom se menjaju zajedno. */
  --danger-bg: var(--red-50);
  --danger-border: var(--red-200);
  --danger-text: var(--red-600);
  --warn-bg: var(--amber-50);
  --warn-border: var(--amber-200);
  --warn-text: var(--amber-700);
  --ok-bg: var(--emerald-50);
  --ok-border: var(--emerald-200);
  --ok-text: var(--emerald-700);
  --info-bg: var(--sky-50);
  --info-border: var(--sky-200);
  --info-text: var(--sky-700);
  --violet-bg: var(--violet-50);
  --violet-border: var(--violet-200);
  --violet-text: var(--violet-600);
  --neutral-bg: var(--gray-100);
  --neutral-text: var(--gray-600);

  /* Oblačići poruka */
  --bubble-in: #fff;
  --bubble-in-border: var(--gray-200);
  /* Odlazni oblačić = poslata poruka u ticketingu (border-indigo-100 bg-indigo-50/50), ne pun indigo */
  --bubble-out: color-mix(in oklab, var(--indigo-50) 50%, #fff);
  --bubble-out-border: var(--indigo-100);
  --bubble-out-text: var(--gray-900);
  /* Avatar sa inicijalima (neutralan kao u ticketingu; jak indigo samo za nalog agenta) */
  --avatar-bg: var(--gray-200);
  --avatar-text: var(--gray-600);

  --overlay: rgb(3 7 18 / .45);
  --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
  --shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
  --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
  --radius: 8px;
  --radius-sm: 6px;
  --radius-xl: 12px;
  --sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --dyn-safe-bottom: 0px;
  --ui-zoom: 1;

  /* Lucide ikonice za CSS (::before/::after preko mask-a, boja = currentColor). */
  --icon-bot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8V4H8'/%3E%3Crect width='16' height='12' x='4' y='8' rx='2'/%3E%3Cpath d='M2 14h2'/%3E%3Cpath d='M20 14h2'/%3E%3Cpath d='M15 13v2'/%3E%3Cpath d='M9 13v2'/%3E%3C/svg%3E");
  --icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ── Tamni prikaz — iste nijanse kao ticketing (gray-900 trake, gray-950 sadržaj,
   sav sivi tekst jedna svetla boja #c3c8d1). ── */
.dark {
  color-scheme: dark;
  --bg: var(--gray-950);
  --surface: var(--gray-900);
  --surface2: var(--gray-950);
  --surface3: var(--gray-800);
  --border: var(--gray-800);
  --border2: var(--gray-700);
  --border-soft: rgb(30 41 57 / .6);
  --accent: var(--indigo-600);
  --accent-hover: var(--indigo-700);
  --accent-light: color-mix(in oklab, var(--indigo-400) 12%, transparent);
  --accent-text: var(--indigo-400);
  --accent-ring: color-mix(in oklab, var(--indigo-400) 25%, transparent);
  --accent2-light: rgb(0 188 125 / .12);
  --text: #c3c8d1;
  --text2: #c3c8d1;
  --text3: #c3c8d1;
  --green: oklch(76.5% .177 163.223);
  --green-light: rgb(0 188 125 / .12);
  --orange: var(--amber-500);
  --orange-light: rgb(254 154 0 / .12);
  --red: var(--red-400);
  --red-light: rgb(251 44 54 / .12);
  --blue: var(--indigo-400);
  --purple: var(--violet-300);
  --purple-light: rgb(142 81 255 / .14);

  --danger-bg: rgb(251 44 54 / .12);
  --danger-border: rgb(251 44 54 / .3);
  --danger-text: var(--red-300);
  --warn-bg: rgb(254 154 0 / .12);
  --warn-border: rgb(254 154 0 / .3);
  --warn-text: var(--amber-300);
  --ok-bg: rgb(0 188 125 / .12);
  --ok-border: rgb(0 188 125 / .3);
  --ok-text: var(--emerald-300);
  --info-bg: rgb(0 166 244 / .14);
  --info-border: rgb(0 166 244 / .3);
  --info-text: var(--sky-300);
  --violet-bg: rgb(142 81 255 / .14);
  --violet-border: rgb(142 81 255 / .3);
  --violet-text: var(--violet-300);
  --neutral-bg: var(--gray-800);
  --neutral-text: #c3c8d1;

  --bubble-in: var(--gray-900);
  --bubble-in-border: var(--gray-800);
  --bubble-out: color-mix(in oklab, var(--indigo-400) 10%, transparent);
  --bubble-out-border: color-mix(in oklab, var(--indigo-400) 25%, transparent);
  --bubble-out-text: #c3c8d1;
  --avatar-bg: var(--gray-700);
  --avatar-text: #c3c8d1;

  --overlay: rgb(0 0 0 / .6);
  --shadow-sm: 0 1px 3px 0 #0000004d;
  --shadow: 0 4px 6px -1px #0000004d, 0 2px 4px -2px #0000004d;
  --shadow-lg: 0 10px 15px -3px #00000066, 0 4px 6px -4px #00000066;
}

html { -webkit-text-size-adjust: 100%; }

/* Tamni prikaz: trake za skrol skoro nevidljive (kao ticketing). */
.dark * {
  scrollbar-width: thin;
  scrollbar-color: rgb(255 255 255 / .09) transparent;
}
.dark ::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
.dark ::-webkit-scrollbar-thumb { border-radius: 4px; background: rgb(255 255 255 / .09); }
.dark ::-webkit-scrollbar-track,
.dark ::-webkit-scrollbar-corner { background: transparent; }

/* Lucide ikonice: ista debljina linije kao u ticketingu. */
svg.lucide { stroke-width: 2; }

/* Polja u tamnom prikazu bez sistemske bele pozadine. */
.dark :is(input, textarea, select) { color-scheme: dark; }