/* ============================================
   GLOBAL CSS VARIABLES
   Централізована система кольорів та стилів
   ============================================ */

:root {
  /* ============================================
     COLORS - Backgrounds
     ============================================ */
  
  /* Загальний фон застосунку */
  /* Використання: body, main-content */
  --color-bg-app: #080808;
  
  /* Основний фон для input полів, контейнерів */
  /* Використання: login.css (input fields) */
  --color-bg-primary: #080808;
  
  /* Вторинний фон для панелей, контейнерів */
  /* Використання: login.css (login-container) */
  --color-bg-secondary: #212726;
  
  /* Фон для list меню та попапів (як Логін) */
  /* Використання: app.css (.dropdown-menu), login.css (.login-container) */
  --color-bg-popup: #212726;
  
  /* Фон поверхонь: ліва навігація */
  /* Використання: app.css (.left-nav) */
  --color-bg-surface: #1E2121;
  
  /* Фон при hover на поверхнях: кнопки навігації, logo button, nav-item hover, тости */
  /* Використання: app.css (.nav-logo-btn:hover, .nav-item:hover, .nav-collapse-btn:hover, .toast) */
  --color-bg-surface-hover: #1A1C1C;
  
  /* Фон для scanner-menu-btn та right side panel */
  /* Використання: app.css (.scanner-menu-btn, .right-panel) */
  --color-bg-panel: #161717;
  
  /* Фон для підказок по hover (як на лівій панелі) */
  /* Використання: app.css (tooltip ::after) */
  --color-bg-tooltip: #27403C;
  
  /* Чорний фон: video контейнери */
  /* Використання: app.css (.video-container, .video-player) */
  --color-bg-black: #000000;
  
  /* Рамка відео-вікон */
  /* Використання: app.css (.video-window border) */
  --color-border-video: #1E2C2A;

  /* ============================================
     COLORS - Text
     ============================================ */
  
  /* Основний текст: FPVTV в лівій панелі, заголовки правої панелі, тост isVideo, заголовки попапів, текст на Primary button */
  /* Використання: app.css (.nav-title, .panel-title, .toast.isVideo), login.css (h2, button text) */
  --color-text-primary: #E9F8F6;
  
  /* Вторинний текст: за замовчуванням для всіх написів, текст на тостах, підказки по hover, вміст правої панелі, текст list-menu-item, назва станції */
  /* Використання: app.css (body, .toast, tooltip, .panel-content, .dropdown-item, .nav-station), login.css (input placeholder, .register text) */
  --color-text-secondary: #CBDAD8;
  
  /* Неактивний/вимкнений текст: color-text-secondary з 60% opacity */
  /* Використання: app.css (.scanner-label, .scanner-frequency) */
  --color-text-disabled: rgba(203, 218, 216, 0.6);
  
  /* Приглушений текст: timestamp в логах, напис поверх відео-фрейма про стан відео, текст "забув пароль" */
  /* Використання: app.css (.video-placeholder, .logs-table .log-timestamp), login.css (.forgot-password-link, .forgot-password-message) */
  --color-text-muted: #7C928F;
  
  /* Текст навігації (назви пунктів меню) */
  /* Використання: app.css (.nav-item-text) */
  --color-text-nav: #A7C9C4;
  
  /* ============================================
     COLORS - Icons
     ============================================ */
  
  /* Колір іконок за замовчуванням: навігація, dropdown, video refresh */
  /* Використання: app.css (i[data-lucide], .nav-item i, .dropdown-item svg, .chevron-icon, .video-refresh-btn i) */
  --color-icon-default: #A7C9C4;
  
  /* Колір іконок при hover: dropdown items, video refresh (навігація hover тепер не змінює колір іконок) */
  /* Використання: app.css (.dropdown-item:hover svg, .video-refresh-btn:hover i) */
  --color-icon-hover: #74D7CB;
  
  /* Колір іконок та тексту активного стану: активний пункт навігації */
  /* Використання: app.css (.nav-item.active i, .nav-item.active .nav-item-text, .nav-item.active) */
  --color-icon-active: #45BEA1;
  
  /* Вторинний колір іконок: кнопка згортання навігації */
  /* Використання: app.css (.nav-collapse-btn, .nav-collapse-btn i) */
  --color-icon-secondary: #7C928F;
  
  /* Вторинний колір іконок при hover: кнопка згортання */
  /* Використання: app.css (.nav-collapse-btn:hover, .nav-collapse-btn:hover i) */
  --color-icon-secondary-hover: #A7C9C4;
  
  /* Колір для disabled стану іконок */
  /* Використання: app.css (.chevron-icon.disabled) */
  --color-disabled: #627573;

  /* ============================================
     COLORS - Accents & Semantic
     ============================================ */
  
  /* Основний акцентний колір: кнопка "УВІЙТИ" (primary button), кнопка "ТАК" в logout modal, текстова кнопка Експорт CSV */
  /* Використання: login.css (.login-container button), app.css (.panel-export-btn, .logout-btn-confirm) */
  --color-accent-primary: #45BEA1;
  
  /* Темніший відтінок основного акценту: hover в list menu, фон secondary buttons */
  /* Використання: app.css (.dropdown-item:hover, secondary buttons) */
  --color-accent-primary-dark: #003732;
  
  /* Синій акцент: scanner indicator, semantic colors */
  /* Використання: app.css (.scanner-indicator-blue) */
  --color-accent-blue: #2196F3;
  
  /* Зелений акцент: scanner indicator, success states, links */
  /* Використання: app.css (.scanner-indicator-green), login.css (focus border, .register a) */
  --color-accent-green: #4CAF50;
  
  /* Червоний акцент: scanner indicator, error messages */
  /* Використання: app.css (.scanner-indicator-red), login.css (.error) */
  --color-accent-red: #F44336;
  
  /* Жовтий акцент: scanner indicator, warning states */
  /* Використання: app.css (.scanner-indicator-yellow, .toast-warning .toast-icon) */
  --color-accent-yellow: #FFC107;

  /* ============================================
     COLORS - States
     ============================================ */
  
  /* Текст активного стану: посилання в login.css */
  /* Використання: login.css (.register a:hover) */
  --color-state-active-text: #45BEA1;
  
  /* Фон при hover на dropdown items */
  /* Використання: app.css (.dropdown-item:hover:not(:disabled)) */
  --color-state-dropdown-hover: #003732;

  /* ============================================
     COLORS - Borders & Outlines
     ============================================ */
  
  /* Основний border: login container, panel borders */
  /* Використання: login.css (.login-container), app.css (.right-panel border-left) */
  --color-border-primary: #1E2C2A;
  
  /* Вторинний border: dropdown menu */
  /* Використання: app.css (.dropdown-menu) */
  --color-border-secondary: #1D1C1D;
  
  /* Border для input полів: незаповнене, не в фокусі */
  /* Використання: login.css (input fields) */
  --color-border-input: #27403C;
  
  /* Border для input полів: в фокусі */
  /* Використання: login.css (input:focus) */
  --color-border-input-focus: #45BEA1;
  
  /* Placeholder текст для input полів */
  /* Використання: login.css (input::placeholder) */
  --color-text-input-placeholder: #27403C;

  /* ============================================
     LAYOUT & SPACING
     ============================================ */
  
  /* Ширина згорнутої лівої навігації */
  /* Використання: app.css (.left-nav) */
  --nav-width-collapsed: 68px;
  
  /* Ширина розгорнутої лівої навігації */
  /* Використання: app.css (.left-nav.expanded) */
  --nav-width-expanded: 220px;
  
  /* Ширина правої панелі (logs, archive, etc.) */
  /* Використання: app.css (.right-panel.open) */
  --panel-width: 420px;
  
  /* Швидкість transition анімацій */
  /* Використання: app.css (.left-nav transition, .right-panel transition, .nav-header transition) */
  --transition-speed: 0.3s;
  
  /* Розмір елементів навігації (кнопки) */
  /* Використання: app.css (.nav-item width/height, .nav-header width/height) */
  --nav-item-size: 52px;
  
  /* Розмір іконок в навігації */
  /* Використання: app.css (.nav-item i width/height, .nav-collapse-btn i width/height) */
  --nav-icon-size: 24px;

  /* ============================================
     LEGACY COMPATIBILITY (deprecated)
     Використовуйте нові змінні вище
     ============================================ */
  --bg-primary: var(--color-bg-primary);
  --bg-secondary: var(--color-bg-secondary);
  --bg-tertiary: var(--color-border-video);
  --border-color: var(--color-accent-primary);
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-nav-default: var(--color-text-disabled);
  --accent-blue: var(--color-accent-blue);
  --accent-green: var(--color-accent-green);
  --accent-red: var(--color-accent-red);
  --accent-yellow: var(--color-accent-yellow);
  --nav-hover-bg: var(--color-bg-surface-hover);
  --nav-active-color: var(--color-state-active-text);
}