/* ============================================================
   Ticket Raise — Theme System
   Dark theme variable set (aligned to ui.sh's "Dark Professional
   Theme" token spec) + the handful of literal (non-var()) colors
   in app.css that need an explicit dark counterpart, plus a
   light[data-theme] block, a navy/purple ambient background,
   density, and reduced-motion support.
   Loaded after app.css; the [data-theme="..."] attribute selector
   out-specifies app.css's plain :root rules, so this file is the
   single source of truth for theming and never requires editing
   app.css itself.
   ============================================================ */

/* New tokens (not defined by app.css) for the handful of inline literal
   colors across the app that don't exactly match an existing app.css
   token value — defined here with their current light value as the
   default so wrapping them in var() cannot shift light-mode rendering. */
:root {
  --color-text-strong: #1e293b;
  --color-text-faint:  #94a3b8;
  --motion-fast: 150ms;
  --motion-base: 200ms;
  --motion-slow: 300ms;
  --motion-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Explicit light block — mirrors app.css's bare :root defaults so an
   explicit "Light" choice and the unthemed default always agree, and so
   there's a clear place for the accent-color picker to reason about. */
:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-text-strong: var(--color-text-primary);
  --color-text-faint:  #64748B;

  /* Dark Professional Palette — matches ui.sh (PRIMARY_DARK/PRIMARY_DARK_SECONDARY/ACCENT_PRIMARY/ACCENT_SECONDARY) */
  --color-bg:               #0F172A;
  --color-surface:          #1E293B;
  --color-surface-hover:    #283449;
  --color-accent:           #14B8A6;   /* teal — ui.sh ACCENT_PRIMARY */
  --color-accent-2:         #06B6D4;   /* cyan — ui.sh ACCENT_SECONDARY */
  --color-accent-rgb:       20, 184, 166;
  --color-text-primary:     #F1F5F9;
  --color-text-secondary:   #CBD5E1;
  --color-text-muted:       #94A3B8;
  --color-border:           #334155;
  --color-success:          #10B981;
  --color-warning:          #F59E0B;
  --color-danger:           #EF4444;
  --color-danger-dark:      #DC2626;
  --color-purple:           #8B5CF6;

  /* Glow effects */
  --glow-teal:  0 0 20px rgba(20, 184, 166, 0.3);
  --glow-cyan:  0 0 20px rgba(6, 182, 212, 0.3);

  /* Shadows — higher opacity so they read against a dark background */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.35);
  --shadow:     0 4px 12px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.35);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.4);
  --shadow-lg:  0 16px 40px rgba(0,0,0,0.6), 0 4px 10px rgba(0,0,0,0.45);
  --shadow-2xl: 0 25px 50px rgba(0,0,0,0.65);

  /* Short-name aliases */
  --color-text:             var(--color-text-primary);
  --color-muted:            var(--color-text-muted);
  --color-bg-secondary:     #1E293B;

  /* Backward-compat aliases */
  --color-background:       var(--color-bg);
  --color-primary:          var(--color-accent);
  --color-primary-dark:     #0F766E;
  --color-primary-light:    #5EEAD4;
  --color-secondary:        var(--color-accent-2);
  --color-secondary-dark:   #0E7490;
  --color-secondary-light:  #67E8F9;
  --color-tertiary:         var(--color-success);
  --color-tertiary-dark:    #059669;
  --color-tertiary-light:   #6EE7B7;
  --color-white:            #FFFFFF;
  --color-gray-50:          #1E293B;
  --color-gray-100:         #283449;
  --color-gray-200:         var(--color-border);
  --color-gray-300:         #475569;
  --color-gray-400:         #64748B;
  --color-gray-500:         #94A3B8;
  --color-gray-600:         #9DAABF;
  --color-gray-700:         #C3CCDC;
  --color-gray-800:         #DCE3EE;
  --color-gray-900:         #F1F4F9;
}

/* app.css hardcodes html/body's background+text instead of using var(),
   so it won't pick up the variables above on its own. Dark mode gets a
   subtle navy/purple ambient gradient (fixed, behind content) instead of
   a flat fill — Linear/Height/Notion-style depth without being loud. */
:root[data-theme="dark"],
[data-theme="dark"] body {
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  background-image:
    radial-gradient(ellipse 900px 600px at 8% -10%, rgba(139, 92, 246, 0.16), transparent 60%),
    radial-gradient(ellipse 800px 500px at 100% 0%, rgba(20, 184, 166, 0.12), transparent 55%),
    radial-gradient(ellipse 1000px 700px at 50% 110%, rgba(6, 182, 212, 0.08), transparent 60%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* ── Reduced motion — driven by the OS setting (prefers-reduced-motion)
   and by the in-app "Enable animations" toggle (data-motion="reduced"
   on <html>, set by user-settings.js). Neutralizes hover lifts, pulses,
   transitions, and keyframe animations app-wide. ── */
[data-motion="reduced"] *,
[data-motion="reduced"] *::before,
[data-motion="reduced"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="on"]) *,
  :root:not([data-motion="on"]) *::before,
  :root:not([data-motion="on"]) *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Density — "Compact" tightens card/board spacing app-wide.
   Component-specific compact rules (board cards, columns) live in
   board.css; this covers the generic .card/.form-group spacing. ── */
[data-density="compact"] .card { padding: 0.85rem 1rem; }
[data-density="compact"] .form-group { margin-bottom: 0.65rem; }

/* app.css hardcodes these instead of using var() */
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #33415C; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #47597C; }

[data-theme="dark"] .sidebar {
  background: linear-gradient(180deg, #0E1728 0%, #121B2E 55%, #0B1220 100%);
}

[data-theme="dark"] select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23AEBBD0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ── Admin > Organization Chart — page-local <style> block in
   org-chart.blade.php hardcodes its own light palette (not var()-based).
   Scoped overrides here leave that block's light-mode rules completely
   untouched and only apply once [data-theme="dark"] is set. Microsoft
   brand colors (Teams blue, 365 Groups green, the 365-purple accent used
   throughout this page) and semantic status/danger/success colors are
   intentionally left as-is in both themes. ── */
[data-theme="dark"] .org-search-wrap input,
[data-theme="dark"] .org-search-results,
[data-theme="dark"] .org-card,
[data-theme="dark"] .org-reports-wrap,
[data-theme="dark"] .org-modal,
[data-theme="dark"] .org-edit-modal,
[data-theme="dark"] .org-edit-form-group input,
[data-theme="dark"] .org-edit-form-group select,
[data-theme="dark"] .org-sync-btn,
[data-theme="dark"] .org-edit-icon {
  background: var(--color-surface);
  border-color: var(--color-border);
}
[data-theme="dark"] .org-search-wrap input,
[data-theme="dark"] .org-card-name,
[data-theme="dark"] .org-bc-item.current,
[data-theme="dark"] .org-rp-name,
[data-theme="dark"] .org-modal h3,
[data-theme="dark"] .org-edit-modal h3,
[data-theme="dark"] .org-edit-form-group input,
[data-theme="dark"] .org-edit-form-group select {
  color: var(--color-text-primary);
}
[data-theme="dark"] .org-search-icon,
[data-theme="dark"] .org-bc-sep,
[data-theme="dark"] .av-circle,
[data-theme="dark"] .org-card-arrow,
[data-theme="dark"] .org-reports-hdr,
[data-theme="dark"] .org-empty,
[data-theme="dark"] .org-btn-cancel,
[data-theme="dark"] .org-edit-form-group label,
[data-theme="dark"] .org-edit-btn-cancel {
  color: var(--color-text-muted);
}
[data-theme="dark"] .org-sync-btn { color: var(--color-text-secondary); }
[data-theme="dark"] .av-circle,
[data-theme="dark"] .org-btn-cancel,
[data-theme="dark"] .org-edit-btn-cancel { background: var(--color-surface-hover); }
[data-theme="dark"] .av-img,
[data-theme="dark"] .av-circle,
[data-theme="dark"] .org-reports-hdr,
[data-theme="dark"] .org-rp-cell { border-color: var(--color-border); }
[data-theme="dark"] .av-dot { border-color: var(--color-surface); }
[data-theme="dark"] .org-conn-line { background: var(--color-border); }
[data-theme="dark"] .org-sr-item:hover,
[data-theme="dark"] .org-rp-cell:hover,
[data-theme="dark"] .org-modal-item:hover,
[data-theme="dark"] .org-edit-btn-cancel:hover { background: var(--color-surface-hover); }

/* ── Seat Booking > Seat Map — seat-map.blade.php's inline <style> block
   hardcodes its own light palette (not var()-based), matching the org-chart
   pattern above. The room-floor SVG rects (the "seat gap" area behind each
   cube's seats) are the one bit that stays light-blue in dark mode; scope
   an override to just those two rects here. ── */
[data-theme="dark"] .sm-room-floor-outer { fill: var(--color-bg); }
[data-theme="dark"] .sm-room-floor-inner { fill: var(--color-surface); }
[data-theme="dark"] .sm-cube-card,
[data-theme="dark"] .sm-bottom-panel { border-color: var(--color-border); }
[data-theme="dark"] .sm-cube-card-label,
[data-theme="dark"] .sm-room-label { color: var(--color-text-muted); }

/* ── Theme toggle button — reuses .icon-btn, only the icon swap is new ── */
#theme-toggle-btn .theme-icon-sun { display: none; }
#theme-toggle-btn .theme-icon-moon { display: inline-flex; }
[data-theme="dark"] #theme-toggle-btn .theme-icon-sun { display: inline-flex; }
[data-theme="dark"] #theme-toggle-btn .theme-icon-moon { display: none; }