/* ============================================
   ModereX Control Panel - Theme System
   ============================================
   Themes override :root variables via [data-theme]
   Default theme requires no attribute (uses base styles.css)
   ============================================ */

/* =============================================
   THEME PICKER UI
   ============================================= */

.theme-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.theme-card {
  position: relative;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition);
  background: var(--card-bg);
}

.theme-card:hover {
  border-color: var(--border-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.theme-card.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-glow), var(--shadow-sm);
}

.theme-card-preview {
  height: 80px;
  position: relative;
  overflow: hidden;
}

.theme-card-label {
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.theme-card.active .theme-card-label {
  color: var(--primary-light);
}

/* --- Theme Preview Miniatures --- */

.theme-card-preview.preview-default {
  background: linear-gradient(135deg, #080c14 0%, #101828 100%);
}
.theme-card-preview.preview-default::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 28%;
  background: linear-gradient(180deg, rgba(8,12,20,0.95), rgba(6,9,16,0.92));
  border-right: 1px solid rgba(255,255,255,0.08);
}
.theme-card-preview.preview-default::after {
  content: '';
  position: absolute;
  left: 32%; top: 8px; right: 8px;
  height: 10px;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.05);
}

.theme-card-preview.preview-apple-light {
  background: linear-gradient(180deg, #f5f5f7 0%, #e8e8ed 100%);
}
.theme-card-preview.preview-apple-light::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 28%;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px);
  border-right: 1px solid rgba(0,0,0,0.08);
}
.theme-card-preview.preview-apple-light::after {
  content: '';
  position: absolute;
  left: 32%; top: 8px; right: 8px;
  height: 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(0,0,0,0.06);
}

.theme-card-preview.preview-apple-dark {
  background: linear-gradient(180deg, #000000 0%, #1c1c1e 100%);
}
.theme-card-preview.preview-apple-dark::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 28%;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
  border-right: 1px solid rgba(255,255,255,0.08);
}
.theme-card-preview.preview-apple-dark::after {
  content: '';
  position: absolute;
  left: 32%; top: 8px; right: 8px;
  height: 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.06);
}

.theme-card-preview.preview-operagx {
  background: #0b0b0f;
}
.theme-card-preview.preview-operagx::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 28%;
  background: #0d0d12;
  border-right: 1px solid rgba(255,56,100,0.4);
}
.theme-card-preview.preview-operagx::after {
  content: '';
  position: absolute;
  left: 32%; top: 8px; right: 8px;
  height: 10px;
  border-radius: 2px;
  background: rgba(255,56,100,0.08);
  border: 1px solid rgba(255,56,100,0.25);
  box-shadow: 0 0 8px rgba(255,56,100,0.15);
}

.theme-card-preview.preview-oldschool {
  background: #d4d0c8;
}
.theme-card-preview.preview-oldschool::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 28%;
  background: #ece9d8;
  border-right: 2px solid #808080;
}
.theme-card-preview.preview-oldschool::after {
  content: '';
  position: absolute;
  left: 32%; top: 8px; right: 8px;
  height: 10px;
  border-radius: 0;
  background: #ffffff;
  border: 2px inset #808080;
}


/* =============================================
   APPLE GLASS LIGHT THEME
   ============================================= */

[data-theme="apple-light"] {
  --theme-h: 215;

  /* Backgrounds */
  --bg0: #f5f5f7;
  --bg1: #e8e8ed;
  --bg2: #dcdce2;
  --surface: rgba(255, 255, 255, 0.72);
  --surface2: rgba(255, 255, 255, 0.55);

  /* Borders */
  --border: rgba(0, 0, 0, 0.1);
  --border-light: rgba(0, 0, 0, 0.15);

  /* Text */
  --text: #1d1d1f;
  --text-secondary: #424245;
  --muted: #86868b;
  --muted2: #aeaeb2;

  /* Primary (keeps user accent but ensures contrast) */
  --primary-dark: hsl(var(--theme-h), 78%, 38%);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.12);

  /* Radii - more rounded for Apple feel */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;

  /* Glass */
  --glass: rgba(255, 255, 255, 0.72);
  --glass2: rgba(255, 255, 255, 0.55);

  /* Component Backgrounds */
  --sidebar-bg: rgba(255, 255, 255, 0.65);
  --topbar-bg: rgba(255, 255, 255, 0.72);
  --panel-bg: rgba(255, 255, 255, 0.6);
  --card-bg: rgba(255, 255, 255, 0.5);
  --input-bg: rgba(255, 255, 255, 0.65);
  --btn-bg: rgba(0, 0, 0, 0.04);
  --backdrop-blur: blur(40px) saturate(180%);
  --table-header-bg: rgba(255, 255, 255, 0.85);
  --hover-bg: rgba(0, 0, 0, 0.03);
  --overlay-bg: rgba(0, 0, 0, 0.3);
  --drawer-bg: rgba(255, 255, 255, 0.82);
  --modal-bg: rgba(255, 255, 255, 0.85);

  /* Typography */
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;

  color-scheme: light;
}

/* Hide animated background layers in Apple Light */
[data-theme="apple-light"] #bgCanvas,
[data-theme="apple-light"] .bg-aurora,
[data-theme="apple-light"] .bg-lines,
[data-theme="apple-light"] .bg-noise {
  display: none !important;
}

[data-theme="apple-light"] body {
  background: linear-gradient(180deg, #f5f5f7, #e8e8ed) !important;
  color: #1d1d1f;
}

[data-theme="apple-light"] .sidebar {
  background: var(--sidebar-bg) !important;
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border-right-color: rgba(0, 0, 0, 0.08);
}

[data-theme="apple-light"] .topbar {
  background: var(--topbar-bg) !important;
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="apple-light"] .drawer {
  background: var(--drawer-bg) !important;
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
}

[data-theme="apple-light"] .modal {
  background: var(--modal-bg) !important;
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="apple-light"] .authBox,
[data-theme="apple-light"] .accessDeniedBox,
[data-theme="apple-light"] .connectBox,
[data-theme="apple-light"] .disconnectBox {
  background: var(--modal-bg) !important;
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
}

[data-theme="apple-light"] .card {
  background: var(--card-bg);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}

[data-theme="apple-light"] .panel {
  background: var(--panel-bg);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}

[data-theme="apple-light"] .input,
[data-theme="apple-light"] select,
[data-theme="apple-light"] textarea {
  background: var(--input-bg);
  color: #1d1d1f;
  border-color: rgba(0, 0, 0, 0.12);
}

[data-theme="apple-light"] .input:focus,
[data-theme="apple-light"] select:focus,
[data-theme="apple-light"] textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

[data-theme="apple-light"] .btn {
  background: var(--btn-bg);
  color: #1d1d1f;
  border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="apple-light"] .btn:hover {
  background: rgba(0, 0, 0, 0.07);
}

[data-theme="apple-light"] .btn.primary {
  color: #fff;
}

[data-theme="apple-light"] thead th {
  background: var(--table-header-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

[data-theme="apple-light"] tr:hover td {
  background: var(--hover-bg);
}

[data-theme="apple-light"] .sb-link:hover,
[data-theme="apple-light"] .sb-link.active {
  background: rgba(0, 0, 0, 0.06);
}

[data-theme="apple-light"] .sb-link.active {
  border-left-color: var(--primary);
}

[data-theme="apple-light"] ::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="apple-light"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
}

[data-theme="apple-light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

[data-theme="apple-light"] .badge {
  backdrop-filter: blur(8px);
}

[data-theme="apple-light"] .toast {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #1d1d1f;
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="apple-light"] .alertBar {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  color: #1d1d1f;
}

[data-theme="apple-light"] .globalSearch input {
  background: rgba(0, 0, 0, 0.04);
  color: #1d1d1f;
}

[data-theme="apple-light"] .searchResults {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
}

[data-theme="apple-light"] .searchResultItem:hover {
  background: rgba(0, 0, 0, 0.04);
}

[data-theme="apple-light"] .profileDropdown {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
}

[data-theme="apple-light"] .profileDropdown .dropdown-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="apple-light"] .settings-row-icon {
  background: rgba(0, 0, 0, 0.04);
}

/* Ensure status colors remain readable */
[data-theme="apple-light"] .badge.blue {
  background: rgba(var(--primary-rgb), 0.08);
}

[data-theme="apple-light"] .badge.green {
  background: rgba(var(--ok-rgb), 0.08);
}

[data-theme="apple-light"] .badge.red {
  background: rgba(var(--bad-rgb), 0.08);
}


/* =============================================
   APPLE GLASS DARK THEME
   ============================================= */

[data-theme="apple-dark"] {
  --theme-h: 215;

  /* Backgrounds - true black with glass */
  --bg0: #000000;
  --bg1: #0a0a0a;
  --bg2: #1c1c1e;
  --surface: rgba(44, 44, 46, 0.72);
  --surface2: rgba(28, 28, 30, 0.65);

  /* Borders */
  --border: rgba(255, 255, 255, 0.1);
  --border-light: rgba(255, 255, 255, 0.15);

  /* Text */
  --text: #f5f5f7;
  --text-secondary: rgba(255, 255, 255, 0.7);
  --muted: rgba(255, 255, 255, 0.45);
  --muted2: rgba(255, 255, 255, 0.28);

  /* Shadows */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3);
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);

  /* Radii - rounded Apple feel */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;

  /* Glass */
  --glass: rgba(44, 44, 46, 0.72);
  --glass2: rgba(28, 28, 30, 0.65);

  /* Component Backgrounds */
  --sidebar-bg: rgba(28, 28, 30, 0.65);
  --topbar-bg: rgba(28, 28, 30, 0.55);
  --panel-bg: rgba(44, 44, 46, 0.45);
  --card-bg: rgba(255, 255, 255, 0.05);
  --input-bg: rgba(255, 255, 255, 0.07);
  --btn-bg: rgba(255, 255, 255, 0.08);
  --backdrop-blur: blur(40px) saturate(150%);
  --table-header-bg: rgba(28, 28, 30, 0.85);
  --hover-bg: rgba(255, 255, 255, 0.04);
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --drawer-bg: rgba(28, 28, 30, 0.82);
  --modal-bg: rgba(44, 44, 46, 0.85);

  /* Typography */
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
}

[data-theme="apple-dark"] #bgCanvas,
[data-theme="apple-dark"] .bg-aurora,
[data-theme="apple-dark"] .bg-lines,
[data-theme="apple-dark"] .bg-noise {
  opacity: 0.3;
}

[data-theme="apple-dark"] body {
  background: #000000 !important;
}

[data-theme="apple-dark"] .sidebar {
  background: var(--sidebar-bg) !important;
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border-right-color: rgba(255, 255, 255, 0.08);
}

[data-theme="apple-dark"] .topbar {
  background: var(--topbar-bg) !important;
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

[data-theme="apple-dark"] .drawer {
  background: var(--drawer-bg) !important;
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
}

[data-theme="apple-dark"] .modal {
  background: var(--modal-bg) !important;
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
}

[data-theme="apple-dark"] .authBox,
[data-theme="apple-dark"] .accessDeniedBox,
[data-theme="apple-dark"] .connectBox,
[data-theme="apple-dark"] .disconnectBox {
  background: var(--modal-bg) !important;
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
}

[data-theme="apple-dark"] .card {
  background: var(--card-bg);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
}

[data-theme="apple-dark"] .panel {
  background: var(--panel-bg);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
}

[data-theme="apple-dark"] .input,
[data-theme="apple-dark"] select,
[data-theme="apple-dark"] textarea {
  background: var(--input-bg);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="apple-dark"] .btn {
  background: var(--btn-bg);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="apple-dark"] .btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

[data-theme="apple-dark"] thead th {
  background: var(--table-header-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

[data-theme="apple-dark"] tr:hover td {
  background: var(--hover-bg);
}

[data-theme="apple-dark"] .toast {
  background: rgba(44, 44, 46, 0.85) !important;
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
}

[data-theme="apple-dark"] .alertBar {
  background: rgba(28, 28, 30, 0.85) !important;
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
}

[data-theme="apple-dark"] .searchResults {
  background: rgba(28, 28, 30, 0.9);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
}

[data-theme="apple-dark"] .profileDropdown {
  background: rgba(28, 28, 30, 0.9) !important;
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
}

[data-theme="apple-dark"] ::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="apple-dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
}

[data-theme="apple-dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.18);
}


/* =============================================
   OPERAGX THEME
   ============================================= */

[data-theme="operagx"] {
  --theme-h: 345;

  /* Near-black base with neon accents */
  --bg0: #0b0b0f;
  --bg1: #0d0d12;
  --bg2: #111117;
  --surface: #16161d;
  --surface2: #0f0f15;

  /* Borders - neon tinted */
  --border: rgba(255, 56, 100, 0.18);
  --border-light: rgba(255, 56, 100, 0.28);

  /* Text */
  --text: #e8e8ec;
  --text-secondary: #a0a0b0;
  --muted: #606070;
  --muted2: #404050;

  /* Primary - GX red/magenta */
  --primary-rgb: 255, 56, 100;
  --primary: #ff3864;
  --primary-light-rgb: 255, 100, 140;
  --primary-light: #ff648c;
  --primary-dark: #cc2d50;
  --primary-glow: rgba(255, 56, 100, 0.35);

  /* Accent - GX cyan */
  --accent-rgb: 0, 230, 230;
  --accent: #00e6e6;
  --accent-light: #33ffff;

  /* Shadows - deeper with color */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.7);

  /* Radii - sharp and angular */
  --radius: 4px;
  --radius-sm: 2px;
  --radius-lg: 6px;

  /* Glass - minimal, solid feel */
  --glass: rgba(22, 22, 29, 0.92);
  --glass2: rgba(15, 15, 21, 0.88);

  /* Component Backgrounds */
  --sidebar-bg: linear-gradient(180deg, #0d0d12 0%, #0b0b0f 100%);
  --topbar-bg: rgba(13, 13, 18, 0.9);
  --panel-bg: rgba(22, 22, 29, 0.8);
  --card-bg: rgba(255, 56, 100, 0.03);
  --input-bg: rgba(0, 0, 0, 0.4);
  --btn-bg: rgba(255, 56, 100, 0.06);
  --backdrop-blur: blur(12px);
  --table-header-bg: rgba(11, 11, 15, 0.95);
  --hover-bg: rgba(255, 56, 100, 0.05);
  --overlay-bg: rgba(0, 0, 0, 0.75);
  --drawer-bg: linear-gradient(180deg, #16161d, #0b0b0f);
  --modal-bg: linear-gradient(180deg, #16161d, #0f0f15);

  /* Typography - sharper */
  --font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;

  /* Transitions - snappy */
  --transition-fast: 0.1s ease;
  --transition: 0.18s ease;
  --transition-slow: 0.3s ease;
}

[data-theme="operagx"] body {
  background: #0b0b0f !important;
}

[data-theme="operagx"] .bg-aurora,
[data-theme="operagx"] .bg-lines {
  opacity: 0.15;
}

[data-theme="operagx"] .bg-noise {
  opacity: 0.5;
}

[data-theme="operagx"] .sidebar {
  background: var(--sidebar-bg) !important;
  border-right: 1px solid rgba(255, 56, 100, 0.15);
}

/* GX-style glowing left border on active nav */
[data-theme="operagx"] .sb-link.active {
  border-left-color: #ff3864;
  background: rgba(255, 56, 100, 0.08);
  box-shadow: inset 3px 0 12px rgba(255, 56, 100, 0.15);
}

[data-theme="operagx"] .sb-link:hover {
  background: rgba(255, 56, 100, 0.06);
}

[data-theme="operagx"] .topbar {
  background: var(--topbar-bg) !important;
  border-bottom: 1px solid rgba(255, 56, 100, 0.12);
}

/* Neon glow on cards */
[data-theme="operagx"] .card {
  background: var(--card-bg);
  border: 1px solid rgba(255, 56, 100, 0.1);
  transition: border-color var(--transition), box-shadow var(--transition);
}

[data-theme="operagx"] .card:hover {
  border-color: rgba(255, 56, 100, 0.25);
  box-shadow: 0 0 20px rgba(255, 56, 100, 0.06);
}

[data-theme="operagx"] .panel {
  border-color: rgba(255, 56, 100, 0.1);
}

[data-theme="operagx"] .input,
[data-theme="operagx"] select,
[data-theme="operagx"] textarea {
  background: var(--input-bg);
  border-color: rgba(255, 56, 100, 0.15);
}

[data-theme="operagx"] .input:focus,
[data-theme="operagx"] select:focus,
[data-theme="operagx"] textarea:focus {
  border-color: #ff3864;
  box-shadow: 0 0 0 2px rgba(255, 56, 100, 0.2), 0 0 16px rgba(255, 56, 100, 0.1);
}

[data-theme="operagx"] .btn {
  background: var(--btn-bg);
  border-color: rgba(255, 56, 100, 0.15);
}

[data-theme="operagx"] .btn:hover {
  background: rgba(255, 56, 100, 0.12);
  border-color: rgba(255, 56, 100, 0.3);
  box-shadow: 0 0 12px rgba(255, 56, 100, 0.1);
}

[data-theme="operagx"] .btn.primary {
  background: linear-gradient(135deg, #ff3864, #cc2d50);
  border-color: transparent;
  box-shadow: 0 4px 20px rgba(255, 56, 100, 0.35);
}

[data-theme="operagx"] .btn.primary:hover {
  box-shadow: 0 4px 28px rgba(255, 56, 100, 0.5);
}

[data-theme="operagx"] thead th {
  background: var(--table-header-bg);
  border-bottom: 1px solid rgba(255, 56, 100, 0.12);
}

[data-theme="operagx"] tr:hover td {
  background: var(--hover-bg);
}

/* GX neon accents on status indicators */
[data-theme="operagx"] .badge.blue {
  background: rgba(0, 230, 230, 0.08);
  color: #00e6e6;
  border: 1px solid rgba(0, 230, 230, 0.15);
}

[data-theme="operagx"] .drawer {
  background: var(--drawer-bg) !important;
  border-left-color: rgba(255, 56, 100, 0.2);
}

[data-theme="operagx"] .modal {
  background: var(--modal-bg) !important;
  border-color: rgba(255, 56, 100, 0.15);
}

[data-theme="operagx"] .authBox,
[data-theme="operagx"] .accessDeniedBox,
[data-theme="operagx"] .connectBox,
[data-theme="operagx"] .disconnectBox {
  background: var(--modal-bg) !important;
  border-color: rgba(255, 56, 100, 0.15);
}

[data-theme="operagx"] .toast {
  background: #16161d !important;
  border: 1px solid rgba(255, 56, 100, 0.15);
}

[data-theme="operagx"] .alertBar {
  background: rgba(11, 11, 15, 0.95) !important;
  border: 1px solid rgba(255, 56, 100, 0.15);
}

[data-theme="operagx"] .searchResults {
  background: #0d0d12;
  border: 1px solid rgba(255, 56, 100, 0.12);
}

[data-theme="operagx"] .profileDropdown {
  background: #16161d !important;
  border: 1px solid rgba(255, 56, 100, 0.12);
}

[data-theme="operagx"] ::-webkit-scrollbar-track {
  background: #0b0b0f;
}

[data-theme="operagx"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 56, 100, 0.2);
}

[data-theme="operagx"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 56, 100, 0.35);
}

/* GX RGB scan line effect */
[data-theme="operagx"] .topbar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 56, 100, 0.5) 20%,
    rgba(0, 230, 230, 0.5) 50%,
    rgba(255, 56, 100, 0.5) 80%,
    transparent
  );
}


/* =============================================
   OLDSCHOOL THEME
   ============================================= */

[data-theme="oldschool"] {
  --theme-h: 0;

  /* Classic flat colors */
  --bg0: #c0c0c0;
  --bg1: #c0c0c0;
  --bg2: #d4d0c8;
  --surface: #ece9d8;
  --surface2: #d4d0c8;

  /* Borders - solid classic */
  --border: #808080;
  --border-light: #a0a0a0;

  /* Text */
  --text: #000000;
  --text-secondary: #222222;
  --muted: #555555;
  --muted2: #808080;

  /* Shadows - flat */
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: none;

  /* Radii - no rounding */
  --radius: 0px;
  --radius-sm: 0px;
  --radius-lg: 0px;

  /* Glass - disabled */
  --glass: #ece9d8;
  --glass2: #d4d0c8;

  /* Component Backgrounds */
  --sidebar-bg: #ece9d8;
  --topbar-bg: linear-gradient(180deg, #2a4d9e, #1a3a7e);
  --panel-bg: #ffffff;
  --card-bg: #ffffff;
  --input-bg: #ffffff;
  --btn-bg: #d4d0c8;
  --backdrop-blur: none;
  --table-header-bg: #d4d0c8;
  --hover-bg: #316ac5;
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --drawer-bg: #ece9d8;
  --modal-bg: #ece9d8;

  /* Typography */
  --font: 'Tahoma', 'MS Sans Serif', 'Arial', sans-serif;
  --font-mono: 'Courier New', 'Lucida Console', monospace;

  /* Transitions - instant */
  --transition-fast: 0s;
  --transition: 0s;
  --transition-slow: 0s;
}

/* Kill all animations and effects */
[data-theme="oldschool"] #bgCanvas,
[data-theme="oldschool"] .bg-aurora,
[data-theme="oldschool"] .bg-lines,
[data-theme="oldschool"] .bg-noise {
  display: none !important;
}

[data-theme="oldschool"] body {
  background: #c0c0c0 !important;
  color: #000000;
}

[data-theme="oldschool"] * {
  animation: none !important;
  transition: none !important;
}

[data-theme="oldschool"] .sidebar {
  background: var(--sidebar-bg) !important;
  border-right: 2px solid;
  border-right-color: #808080;
  backdrop-filter: none;
}

/* Classic title bar style topbar */
[data-theme="oldschool"] .topbar {
  background: var(--topbar-bg) !important;
  border-bottom: 2px solid #808080;
  backdrop-filter: none;
  color: #ffffff;
}

[data-theme="oldschool"] .topbar .statusChip,
[data-theme="oldschool"] .topbar .sidebarToggle {
  color: #ffffff;
}

[data-theme="oldschool"] .sb-link {
  border-radius: 0;
  border-left: 2px solid transparent;
}

[data-theme="oldschool"] .sb-link.active {
  background: #316ac5;
  color: #ffffff;
  border-left-color: #316ac5;
}

[data-theme="oldschool"] .sb-link:hover {
  background: #316ac5;
  color: #ffffff;
}

[data-theme="oldschool"] .card {
  background: var(--card-bg);
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
  box-shadow: none;
  backdrop-filter: none;
}

[data-theme="oldschool"] .panel {
  background: var(--panel-bg);
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
  box-shadow: none;
  backdrop-filter: none;
}

[data-theme="oldschool"] .input,
[data-theme="oldschool"] select,
[data-theme="oldschool"] textarea {
  background: var(--input-bg);
  color: #000000;
  border: 2px inset #808080;
  border-radius: 0;
}

[data-theme="oldschool"] .input:focus,
[data-theme="oldschool"] select:focus,
[data-theme="oldschool"] textarea:focus {
  border: 2px inset #404080;
  box-shadow: none;
}

/* Classic raised button */
[data-theme="oldschool"] .btn {
  background: var(--btn-bg);
  color: #000000;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  border-radius: 0;
  box-shadow: none;
  padding: 6px 16px;
}

[data-theme="oldschool"] .btn:hover {
  background: #e0ddd5;
}

[data-theme="oldschool"] .btn:active {
  border-color: #808080 #ffffff #ffffff #808080;
}

[data-theme="oldschool"] .btn.primary {
  background: #316ac5;
  color: #ffffff;
  border-color: #ffffff #1a3a7e #1a3a7e #ffffff;
  box-shadow: none;
}

[data-theme="oldschool"] .btn.primary:hover {
  background: #2a5ab5;
}

[data-theme="oldschool"] .btn.bad {
  background: #d4d0c8;
  color: #cc0000;
}

[data-theme="oldschool"] thead th {
  background: var(--table-header-bg);
  border-bottom: 2px solid #808080;
  backdrop-filter: none;
}

[data-theme="oldschool"] tr:hover td {
  background: #316ac5;
  color: #ffffff;
}

[data-theme="oldschool"] .drawer {
  background: var(--drawer-bg) !important;
  border-left: 2px solid #808080;
  box-shadow: none;
  backdrop-filter: none;
}

[data-theme="oldschool"] .modal {
  background: var(--modal-bg) !important;
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
  box-shadow: none;
  backdrop-filter: none;
}

[data-theme="oldschool"] .authBox,
[data-theme="oldschool"] .accessDeniedBox,
[data-theme="oldschool"] .connectBox,
[data-theme="oldschool"] .disconnectBox {
  background: var(--modal-bg) !important;
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
  box-shadow: none;
  backdrop-filter: none;
}

[data-theme="oldschool"] .toast {
  background: #ece9d8 !important;
  color: #000000;
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
  box-shadow: none;
}

[data-theme="oldschool"] .alertBar {
  background: #ece9d8 !important;
  color: #000000;
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
}

[data-theme="oldschool"] .badge {
  border-radius: 0;
  border: 1px solid #808080;
}

[data-theme="oldschool"] .globalSearch input {
  background: #ffffff;
  color: #000000;
  border: 2px inset #808080;
}

[data-theme="oldschool"] .searchResults {
  background: #ece9d8;
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
}

[data-theme="oldschool"] .searchResultItem:hover {
  background: #316ac5;
  color: #ffffff;
}

[data-theme="oldschool"] .profileDropdown {
  background: #ece9d8 !important;
  border: 2px solid;
  border-color: #dfdfdf #808080 #808080 #dfdfdf;
}

[data-theme="oldschool"] .profileDropdown .dropdown-item:hover {
  background: #316ac5;
  color: #ffffff;
}

[data-theme="oldschool"] ::-webkit-scrollbar-track {
  background: #d4d0c8;
}

[data-theme="oldschool"] ::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border: 1px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  border-radius: 0;
}

[data-theme="oldschool"] ::-webkit-scrollbar-thumb:hover {
  background: #b0b0b0;
}

/* Title bar style for sidebar header */
[data-theme="oldschool"] .sb-head {
  background: linear-gradient(180deg, #2a4d9e, #1a3a7e);
  color: #ffffff;
}

[data-theme="oldschool"] .sb-head .sb-title,
[data-theme="oldschool"] .sb-head .sb-subtitle {
  color: #ffffff;
}

[data-theme="oldschool"] .sb-group-label {
  color: #555555;
  border-bottom: 1px solid #808080;
}

/* Settings row icons */
[data-theme="oldschool"] .settings-row-icon {
  background: #d4d0c8;
  border-radius: 0;
  border: 1px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
}


/* =============================================
   RESPONSIVE ADJUSTMENTS FOR THEMES
   ============================================= */

@media (max-width: 600px) {
  .theme-picker-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
  }

  .theme-card-preview {
    height: 60px;
  }

  .theme-card-label {
    padding: 6px 8px;
    font-size: 10px;
  }
}