/**
 * ITMDesk Design System Variables
 * Centralized design tokens for consistency
 */

:root {
  /* Primary Colors (Blue v3.2: richer navy-leaning blue; less generic admin) */
  --primary-color: #1e4ed8;
  --primary-hover: #3b65e0;
  --primary-active: #1740b8;

  /* Brand accent — lime/neon yellow from the ITMDesk logo.
     Shared brand color between light and dark modes. Best suited to dark
     surfaces (as used in code.php installer); on light surfaces the
     contrast is poor — reach for `--primary-color` instead. Introduced
     2026-04-22 after the installer refactor promoted it to global. */
  --accent-lime: #d4ff3a;

  /* Background Colors */
  --active-bg: #e0e9fc;
  --light-bg: #f8f9fa;
  --dark-bg: #2c3e50;
  --hover-bg: rgba(0, 0, 0, 0.04);

  /* Surface tiers - layered depth for cards, panels, inactive tabs */
  --surface-0: #fafaf9;
  --surface-1: #ffffff;
  --surface-2: #f4f4f5;

  /* Text Colors */
  --text-primary: #18181b;
  --text-secondary: #52525b;
  --text-muted: #a1a1aa;
  --text-white: #ffffff;

  /* Status Colors (Blue v3.2: ~15% desaturated for calmer daily use) */
  --success-color: #15803d;
  --warning-color: #d97706;
  --danger-color: #b91c1c;
  --info-color: #0284c7;

  /* Hardware-type icon tones — used by the form-factor icon on the
     Dashboard (desktop / notebook). Two distinct blue tones so the icon
     is scannable at a glance even when the shape difference (fa-desktop
     vs fa-laptop) is small. Server stays on --primary-color implicitly. */
  --hw-icon-desktop:  #1e4ed8; /* deep navy — matches --primary-color */
  --hw-icon-notebook: #38bdf8; /* sky blue — distinctly lighter */

  /* OS-brand chip tones — used by .os-chip on the Infrastructure list to
     differentiate Linux vs Windows servers. Picked OUTSIDE the project's
     status palette (no overlap with warning/danger/info) so the chip
     never reads as a status signal. Violet for Linux, project-blue for
     Windows: dichromatic, instantly distinguishable. */
  --os-icon-linux:   #7c3aed; /* violet-600 — Tux/Linux Foundation tone */
  --os-icon-windows: #1e4ed8; /* deep blue — matches --primary-color */

  /* Border Colors */
  --border-color: #dee2e6;
  --border-light: #e9ecef;
  --border-dark: #adb5bd;

  /* Layout Dimensions */
  --navbar-height: 60px;
  --sidebar-width: 200px;
  --sidebar-collapsed-width: 50px;
  --detail-panel-width: 680px;
  --content-max-width: 1400px;

  /* Common control sizing — used by dropdowns and toolbar inputs across views.
     Centralizing here so a single tweak affects every consumer (Dashboard
     person suggestions, DeviceTab autocomplete, Infrastructure search, etc). */
  --dropdown-max-height: 200px;
  --toolbar-search-width: 300px;

  /* Spacing Scale */
  --spacing-xs: 0.25rem;  /* 4px */
  --spacing-sm: 0.5rem;   /* 8px */
  --spacing-md: 1rem;     /* 16px */
  --spacing-lg: 1.5rem;   /* 24px */
  --spacing-xl: 2rem;     /* 32px */
  --spacing-xxl: 3rem;    /* 48px */

  /* Border Radius */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.375rem;  /* 6px */
  --radius-lg: 0.5rem;    /* 8px */
  --radius-xl: 1rem;      /* 16px */

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Z-index Scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* Font Families (Blue v3.2 design) */
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Font Sizes */
  --font-xs: 0.75rem;     /* 12px */
  --font-sm: 0.875rem;    /* 14px */
  --font-base: 1rem;      /* 16px */
  --font-lg: 1.125rem;    /* 18px */
  --font-xl: 1.25rem;     /* 20px */
  --font-2xl: 1.5rem;     /* 24px */

  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* AI Footer Colors */
  --ai-bg: #f8f9fa;
  --ai-header-bg: rgba(63, 106, 216, 0.05);
  --ai-message-bg: #ffffff;
  --ai-status-good: #4caf50;
  --ai-status-warning: #ff9800;
  --ai-status-critical: #f44336;
  --ai-error-security: #f44336;
  --ai-error-auth: #ff9800;
  --ai-error-network: #2196f3;
  --ai-error-system: #9c27b0;
  --ai-error-performance: #4caf50;
  --ai-error-security-bg: rgba(244, 67, 54, 0.15);
  --ai-error-auth-bg: rgba(255, 152, 0, 0.15);
  --ai-error-network-bg: rgba(33, 150, 243, 0.15);
  --ai-error-system-bg: rgba(156, 39, 176, 0.15);
  --ai-error-performance-bg: rgba(76, 175, 80, 0.15);
  --ai-error-security-text: #c62828;
  --ai-error-auth-text: #e65100;
  --ai-error-network-text: #1565c0;
  --ai-error-system-text: #6a1b9a;
  --ai-error-performance-text: #2e7d32;
  --ai-scrollbar-track: rgba(0, 0, 0, 0.05);
  --ai-scrollbar-thumb: rgba(0, 0, 0, 0.2);
  --ai-scrollbar-thumb-hover: rgba(0, 0, 0, 0.3);
  --ai-highlight-bg: rgba(63, 106, 216, 0.2);
  --ai-item-bg: rgba(63, 106, 216, 0.03);
  --ai-copy-hover-bg: rgba(63, 106, 216, 0.1);

  /* Company Selector Colors */
  --company-card-gradient-start: #e3f2fd;
  --company-card-gradient-end: #bbdefb;
  --company-card-selected-bg: #e3f2fd;
  --company-card-default-bg: #ffffff;

  /* Button Hover Colors */
  --btn-secondary-hover-bg: #5a6268;
  --btn-secondary-hover-border: #545b62;
  --btn-success-hover-bg: #157347;
  --btn-danger-hover-bg: #bb2d3b;
  --btn-warning-hover-bg: #ffca2c;
  --btn-info-hover-bg: #31d2f2;

  /* Focus Ring Colors */
  --focus-ring-primary: rgba(30, 78, 216, 0.25);
  --focus-ring-secondary: rgba(82, 82, 91, 0.25);

  /* Skeleton Loading Colors */
  --skeleton-light: #f0f0f0;
  --skeleton-mid: #e0e0e0;

  /* Loading Overlay Colors */
  --loading-overlay-bg: rgba(0, 0, 0, 0.3);
  --loading-bar-gradient-end: #60a5fa;
  --loading-content-overlay: rgba(0, 0, 0, 0.05);

  /* Table Colors */
  --table-header-bg: #f1f3f5;
  --table-striped-bg: rgba(0, 0, 0, 0.025);
  --table-hover-bg: rgba(0, 0, 0, 0.04);
  --table-border-color: var(--border-color);

  /* Bootstrap 5.3+ Compatibility */
  --bs-body-bg: var(--light-bg);
  --bs-body-color: var(--text-primary);
  --bs-border-color: var(--border-color);
  --bs-border-color-translucent: rgba(0, 0, 0, 0.1);
  --bs-primary: var(--primary-color);
  --bs-secondary: var(--text-secondary);
  --bs-success: var(--success-color);
  --bs-danger: var(--danger-color);
  --bs-warning: var(--warning-color);
  --bs-info: var(--info-color);
  --bs-primary-bg-subtle: #e3f2fd;
  --bs-secondary-bg: #e9ecef;
  --bs-light-bg: var(--light-bg);
  --bs-modal-bg: #ffffff;
  --bs-link-color: var(--primary-color);
}

/* Narrow-laptop breakpoint: at 1280x800 the 680px detail panel eats 53% of the
   viewport, truncating table columns (Status/ITMDesk). Drop to 560px so the
   table keeps ~120px extra. 1366px is the most common laptop width where the
   issue manifests. */
@media (max-width: 1366px) {
  :root {
    --detail-panel-width: 560px;
  }
}

/* Dark Mode Theme - Bootstrap 5.3+ Compatible */
[data-bs-theme="dark"] {
  /* Primary Colors - Adjusted for dark mode */
  --primary-color: #60a5fa;
  --primary-hover: #93c5fd;
  --primary-active: #3b82f6;

  /* Background Colors */
  --active-bg: #1e3a5f;
  --light-bg: #18181b;
  --dark-bg: #09090b;
  --hover-bg: rgba(255, 255, 255, 0.04);

  /* Surface tiers - dark mode */
  --surface-0: #09090b;
  --surface-1: #18181b;
  --surface-2: #27272a;

  /* Text Colors */
  --text-primary: #fafafa;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --text-white: #ffffff;

  /* Status Colors - Adjusted for dark backgrounds */
  --success-color: #4ade80;
  --warning-color: #fbbf24;
  --danger-color: #f87171;
  --info-color: #38bdf8;

  /* Hardware-type icon tones — dark mode shifts both up (more luminous)
     while keeping the desktop/notebook contrast clearly visible. */
  --hw-icon-desktop:  #60a5fa; /* light sky — matches dark --primary-color */
  --hw-icon-notebook: #bae6fd; /* very light azure — clearly lighter */

  /* OS-brand chip tones — dark mode bumps both up for legibility. */
  --os-icon-linux:   #a78bfa; /* violet-400 — luminous on dark surfaces */
  --os-icon-windows: #60a5fa; /* light sky — matches dark --primary-color */

  /* Border Colors */
  --border-color: #343a40;
  --border-light: #495057;
  --border-dark: #6c757d;

  /* AI Footer Colors - Dark Mode */
  --ai-bg: #1a1a1a;
  --ai-header-bg: rgba(99, 153, 255, 0.1);
  --ai-message-bg: #2a2a2a;
  --ai-status-good: #66bb6a;
  --ai-status-warning: #ffa726;
  --ai-status-critical: #ef5350;
  --ai-error-security: #ef5350;
  --ai-error-auth: #ffa726;
  --ai-error-network: #42a5f5;
  --ai-error-system: #ab47bc;
  --ai-error-performance: #66bb6a;
  --ai-error-security-bg: rgba(239, 83, 80, 0.2);
  --ai-error-auth-bg: rgba(255, 167, 38, 0.2);
  --ai-error-network-bg: rgba(66, 165, 245, 0.2);
  --ai-error-system-bg: rgba(171, 71, 188, 0.2);
  --ai-error-performance-bg: rgba(102, 187, 106, 0.2);
  --ai-error-security-text: #ff8a80;
  --ai-error-auth-text: #ffd180;
  --ai-error-network-text: #82b1ff;
  --ai-error-system-text: #ea80fc;
  --ai-error-performance-text: #b9f6ca;
  --ai-scrollbar-track: rgba(255, 255, 255, 0.05);
  --ai-scrollbar-thumb: rgba(255, 255, 255, 0.2);
  --ai-scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);
  --ai-highlight-bg: rgba(99, 153, 255, 0.2);
  --ai-item-bg: rgba(99, 153, 255, 0.05);
  --ai-copy-hover-bg: rgba(99, 153, 255, 0.15);

  /* Company Selector Colors - Dark Mode */
  --company-card-gradient-start: #1e3a5f;
  --company-card-gradient-end: #2a4a7f;
  --company-card-selected-bg: #1e3a5f;
  --company-card-default-bg: #2a2a2a;

  /* Button Hover Colors - Dark Mode */
  --btn-secondary-hover-bg: #99a3ad;
  --btn-secondary-hover-border: #adb5bd;
  --btn-success-hover-bg: #66d98e;
  --btn-danger-hover-bg: #f98a94;
  --btn-warning-hover-bg: #fcd34d;
  --btn-info-hover-bg: #5fd4f4;

  /* Focus Ring Colors - Dark Mode */
  --focus-ring-primary: rgba(99, 153, 255, 0.4);
  --focus-ring-secondary: rgba(173, 181, 189, 0.4);

  /* Skeleton Loading Colors - Dark Mode */
  --skeleton-light: #2a2a2a;
  --skeleton-mid: #3a3a3a;

  /* Loading Overlay Colors - Dark Mode */
  --loading-overlay-bg: rgba(0, 0, 0, 0.5);
  --loading-bar-gradient-end: #3b82f6;
  --loading-content-overlay: rgba(255, 255, 255, 0.05);

  /* Table Colors - Dark Mode */
  --table-header-bg: #2a2a2a;
  --table-striped-bg: rgba(255, 255, 255, 0.03);
  --table-hover-bg: rgba(255, 255, 255, 0.05);
  --table-border-color: var(--border-color);

  /* Shadows - Dark Mode */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.5);

  /* Bootstrap 5.3+ Compatibility - Dark Mode */
  --bs-body-bg: #121212;
  --bs-body-color: #f8f9fa;
  --bs-border-color: #343a40;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.1);
  --bs-primary-bg-subtle: #1e3a5f;
  --bs-secondary-bg: #2c3e50;
  --bs-light-bg: #1e1e1e;
  --bs-modal-bg: #2a2a2a;
  --bs-link-color: #6399ff;
}