/* ============================================================
   OMS Dashboard Themes — WBS 6B Color Palettes
   5 palettes: Ocean, Sunset, Forest, Arctic, Midnight
   
   Usage:
     document.documentElement.setAttribute('data-theme', 'ocean');
     localStorage.setItem('oms-theme', 'ocean');
   
   Fallback: Ocean (default) if no theme set
   ============================================================ */

/* ── Default: Ocean (matches original dashboard) ─────────── */
:root,
[data-theme="ocean"] {
  --oms-panel-bg: #1e3c72;
  --oms-panel-border: #2a5298;
  --oms-gauge-fill-start: #667eea;
  --oms-gauge-fill-end: #5a67d8;
  --oms-text-primary: #ffffff;
  --oms-text-secondary: #b0c4de;
  --oms-warning: #f59e0b;
  --oms-critical: #ef4444;
  --oms-accent: #667eea;
  --oms-theme-name: "Ocean";
}

/* ── Sunset ─────────────────────────────────────────────── */
[data-theme="sunset"] {
  --oms-panel-bg: #1a1412;
  --oms-panel-border: #3d2c1e;
  --oms-gauge-fill-start: #f97316;
  --oms-gauge-fill-end: #dc2626;
  --oms-text-primary: #fef3c7;
  --oms-text-secondary: #fdba74;
  --oms-warning: #fbbf24;
  --oms-critical: #dc2626;
  --oms-accent: #d97706;
  --oms-theme-name: "Sunset";
}

/* ── Forest ─────────────────────────────────────────────── */
[data-theme="forest"] {
  --oms-panel-bg: #0d1f17;
  --oms-panel-border: #1e5f3d;
  --oms-gauge-fill-start: #22c55e;
  --oms-gauge-fill-end: #15803d;
  --oms-text-primary: #ffffff;
  --oms-text-secondary: #86efac;
  --oms-warning: #f59e0b;
  --oms-critical: #ff4444;
  --oms-accent: #10b981;
  --oms-theme-name: "Forest";
}

/* ── Arctic ─────────────────────────────────────────────── */
[data-theme="arctic"] {
  --oms-panel-bg: #ffffff;
  --oms-panel-border: #cbd5e1;
  --oms-gauge-fill-start: #3b82f6;
  --oms-gauge-fill-end: #1d4ed8;
  --oms-text-primary: #0f172a;
  --oms-text-secondary: #64748b;
  --oms-warning: #b45309;
  --oms-critical: #dc2626;
  --oms-accent: #2563eb;
  --oms-theme-name: "Arctic";
}

/* ── Midnight ───────────────────────────────────────────── */
[data-theme="midnight"] {
  --oms-panel-bg: #000000;
  --oms-panel-border: #ffffff;
  --oms-gauge-fill-start: #60a5fa;
  --oms-gauge-fill-end: #3b82f6;
  --oms-text-primary: #ffffff;
  --oms-text-secondary: #67e8f9;
  --oms-warning: #facc15;
  --oms-critical: #ff4444;
  --oms-accent: #a5b4fc;
  --oms-theme-name: "Midnight";
}

/* ============================================================
   Theme-Driven Component Styles
   ============================================================ */

/* ── Panels ──────────────────────────────────────────────── */
.oms-panel,
.dashboard-panel,
.asset-panel,
.gauge-card {
  background-color: var(--oms-panel-bg);
  border: 1px solid var(--oms-panel-border);
  color: var(--oms-text-primary);
}

.oms-panel h2, .oms-panel h3,
.dashboard-panel h2, .dashboard-panel h3,
.gauge-card h2, .gauge-card h3 {
  color: var(--oms-text-primary);
}

.oms-panel .secondary-text,
.dashboard-panel .secondary-text {
  color: var(--oms-text-secondary);
}

/* ── Gauges ──────────────────────────────────────────────── */
.gauge-fill {
  background: linear-gradient(180deg, var(--oms-gauge-fill-start), var(--oms-gauge-fill-end));
}

.gauge-value {
  color: var(--oms-text-primary);
  font-family: 'Courier New', monospace;
}

/* ── Accent Elements ────────────────────────────────────── */
.oms-accent,
.accent-text,
.accent-link {
  color: var(--oms-accent);
}

.oms-accent-bg,
.accent-button {
  background-color: var(--oms-accent);
  color: var(--oms-panel-bg);
}

/* ── Alert Banners ──────────────────────────────────────── */
/* Warning: ≥80% capacity — amber + ⚠ CAUTION label */
.oms-alert-warning,
.alert-warning,
.capacity-warning {
  background-color: var(--oms-warning);
  color: var(--oms-panel-bg);
  border: 2px solid var(--oms-warning);
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.oms-alert-warning::before,
.alert-warning::before {
  content: "⚠ CAUTION";
  font-weight: 700;
  margin-right: 4px;
}

/* Critical: ≥95% capacity — red + 🚨 CRITICAL label + blinking */
.oms-alert-critical,
.alert-critical,
.capacity-critical {
  background-color: var(--oms-critical);
  color: #ffffff;
  border: 2px solid var(--oms-critical);
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: pulse-border 1s ease-in-out infinite;
}

.oms-alert-critical::before,
.alert-critical::before {
  content: "🚨 CRITICAL";
  font-weight: 700;
  margin-right: 4px;
}

@keyframes pulse-border {
  0%, 100% { border-color: var(--oms-critical); opacity: 1; }
  50% { border-color: transparent; opacity: 0.85; }
}

/* ── Theme Picker ───────────────────────────────────────── */
.theme-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 8px;
  background: var(--oms-panel-bg);
  border: 1px solid var(--oms-panel-border);
  color: var(--oms-text-primary);
  font-size: 14px;
  cursor: pointer;
}

/* ── Gear Button ────────────────────────────────────────── */
/* ── Gear Button ────────────────────────────────────────── */
.theme-picker-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
}

.theme-gear-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid rgba(102,126,234,0.5);
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.theme-gear-btn:hover {
  background: linear-gradient(135deg, #764ba2, #667eea);
  border-color: rgba(102,126,234,0.8);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

/* Arctic (light theme) — lighter pill on white bg */
[data-theme="arctic"] .theme-gear-btn {
  border-color: rgba(37,99,235,0.4);
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #ffffff;
}

[data-theme="arctic"] .theme-gear-btn:hover {
  background: linear-gradient(135deg, #1d4ed8, #3b82f6);
  border-color: #2563eb;
}

.theme-gear-icon {
  font-size: 16px;
  line-height: 1;
}

.theme-gear-label {
  line-height: 1;
}

/* ── Dropdown ──────────────────────────────────────────── */
.theme-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 220px;
  background: #1a1a2e;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 10000;
  animation: theme-dropdown-in 0.15s ease;
}

.theme-dropdown.open {
  display: block;
}

@keyframes theme-dropdown-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Theme Options ─────────────────────────────────────── */
.theme-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease;
  white-space: nowrap;
}

.theme-option:hover {
  background: rgba(255,255,255,0.12);
}

.theme-option.active {
  background: rgba(102,126,234,0.4);
  color: #fff;
}

.theme-option-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.theme-option.active .theme-option-swatch {
  border-color: #fff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

.theme-option-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.theme-option-label {
  font-weight: 500;
  font-size: 14px;
  color: #ffffff;
  overflow: visible;
}

/* ── Legacy swatch support (still works if used) ───────── */
.theme-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--oms-panel-border);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.theme-swatch:hover {
  transform: scale(1.2);
}

.theme-swatch.active {
  border-color: var(--oms-accent);
  transform: scale(1.15);
  box-shadow: 0 0 6px var(--oms-accent);
}

.theme-swatch[data-swatch="ocean"]    { background: linear-gradient(135deg, #667eea, #764ba2); }
.theme-swatch[data-swatch="sunset"]   { background: linear-gradient(135deg, #f97316, #dc2626); }
.theme-swatch[data-swatch="forest"]   { background: linear-gradient(135deg, #22c55e, #15803d); }
.theme-swatch[data-swatch="arctic"]   { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.theme-swatch[data-swatch="midnight"] { background: linear-gradient(135deg, #60a5fa, #3b82f6); }

/* ============================================================
   Print Overrides — All Themes
   ============================================================ */
@media print {
  [data-theme] {
    --oms-panel-bg: #ffffff !important;
    --oms-panel-border: #cccccc !important;
    --oms-gauge-fill-start: #666666 !important;
    --oms-gauge-fill-end: #333333 !important;
    --oms-text-primary: #000000 !important;
    --oms-text-secondary: #555555 !important;
    --oms-warning: #8b6914 !important;
    --oms-critical: #8b0000 !important;
    --oms-accent: #333333 !important;
  }

  .theme-picker,
  .no-print,
  .oms-accent-bg,
  button[data-action="theme"] {
    display: none !important;
  }

  .gauge-value {
    font-family: 'Courier New', monospace !important;
  }

  .oms-panel,
  .dashboard-panel,
  .gauge-card {
    break-inside: avoid;
    box-shadow: none !important;
  }

  /* Ensure gauges render as solid fills in print */
  .gauge-fill {
    background: #555 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ============================================================
   Accessibility: Prefers Contrast / Prefers Color Scheme
   ============================================================ */
@media (prefers-contrast: more) {
  :root,
  [data-theme="ocean"],
  [data-theme="sunset"],
  [data-theme="forest"],
  [data-theme="midnight"] {
    --oms-panel-border: #ffffff;
  }

  [data-theme="arctic"] {
    --oms-panel-border: #000000;
  }
}

@media (prefers-color-scheme: light) {
  /* If user prefers light and no explicit theme set, default to Arctic */
  :root:not([data-theme]) {
    --oms-panel-bg: #ffffff;
    --oms-panel-border: #cbd5e1;
    --oms-gauge-fill-start: #3b82f6;
    --oms-gauge-fill-end: #1d4ed8;
    --oms-text-primary: #0f172a;
    --oms-text-secondary: #64748b;
    --oms-warning: #b45309;
    --oms-critical: #dc2626;
    --oms-accent: #2563eb;
  }
}

/* ============================================================
   Theme JavaScript (inline for easy integration)
   ============================================================ */
/*
  // Apply saved theme or detect preference
  (function() {
    const saved = localStorage.getItem('oms-theme');
    const adminDefault = document.querySelector('meta[name="oms-default-theme"]')?.content;
    const prefersLight = window.matchMedia('(prefers-color-scheme: light)').matches;
    
    let theme = saved || adminDefault || (prefersLight ? 'arctic' : 'ocean');
    document.documentElement.setAttribute('data-theme', theme);
    
    // Theme picker interaction
    document.querySelectorAll('.theme-swatch').forEach(swatch => {
      swatch.addEventListener('click', () => {
        theme = swatch.dataset.swatch;
        document.documentElement.setAttribute('data-theme', theme);
        localStorage.setItem('oms-theme', theme);
        // Update active swatch
        document.querySelectorAll('.theme-swatch').forEach(s => s.classList.remove('active'));
        swatch.classList.add('active');
      });
      
      // Mark active on load
      if (swatch.dataset.swatch === theme) {
        swatch.classList.add('active');
      }
    });
    
    // Dropdown picker (alternative)
    const select = document.querySelector('.theme-picker select');
    if (select) {
      select.value = theme;
      select.addEventListener('change', (e) => {
        theme = e.target.value;
        document.documentElement.setAttribute('data-theme', theme);
        localStorage.setItem('oms-theme', theme);
      });
    }
  })();
*/