/* ==========================================================================
   MJL Lounge — Accent Theme System (CSS Variables)
   Switch via: html[data-theme="..."]
   ========================================================================== */

/* Default + Neon Green */
:root,
[data-theme="neon-green"] {
  --accent: #39FF14;
  --accent-glow: #66FF44;
  --accent-soft: rgba(57, 255, 20, 0.12);
  --border-accent: rgba(57, 255, 20, 0.35);
  --button-accent: #39FF14;
}

[data-theme="emerald-pro"] {
  --accent: #00C853;
  --accent-glow: #00E676;
  --accent-soft: rgba(0, 200, 83, 0.12);
  --border-accent: rgba(0, 200, 83, 0.35);
  --button-accent: #00C853;
}

[data-theme="cyan-blue"] {
  --accent: #00E5FF;
  --accent-glow: #00FFFF;
  --accent-soft: rgba(0, 229, 255, 0.12);
  --border-accent: rgba(0, 229, 255, 0.35);
  --button-accent: #00E5FF;
}

[data-theme="purple-neon"] {
  --accent: #A855F7;
  --accent-glow: #C084FC;
  --accent-soft: rgba(168, 85, 247, 0.12);
  --border-accent: rgba(168, 85, 247, 0.38);
  --button-accent: #A855F7;
}

[data-theme="crimson-red"] {
  --accent: #FF3B30;
  --accent-glow: #FF6B6B;
  --accent-soft: rgba(255, 59, 48, 0.12);
  --border-accent: rgba(255, 59, 48, 0.38);
  --button-accent: #FF3B30;
}

[data-theme="gold-vip"] {
  --accent: #FFD700;
  --accent-glow: #FFE566;
  --accent-soft: rgba(255, 215, 0, 0.14);
  --border-accent: rgba(255, 215, 0, 0.4);
  --button-accent: #FFD700;
}

[data-theme="orange-gaming"] {
  --accent: #FF7A00;
  --accent-glow: #FFA53A;
  --accent-soft: rgba(255, 122, 0, 0.12);
  --border-accent: rgba(255, 122, 0, 0.38);
  --button-accent: #FF7A00;
}

/* Smooth accent transitions (user-initiated theme switch only) */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition-property: color, background-color, background, border-color, box-shadow, fill, stroke, outline-color, filter;
  transition-duration: 300ms;
  transition-timing-function: ease;
}

/* Bridge to legacy design tokens */
:root,
[data-theme] {
  --color-accent: var(--accent);
  --color-accent-bright: var(--accent-glow);
  --color-accent-dim: color-mix(in srgb, var(--accent) 75%, #0a0e17);
  --color-accent-glow: color-mix(in srgb, var(--accent) 35%, transparent);
  --color-accent-subtle: var(--accent-soft);
  --glass-border-hover: var(--border-accent);
  --theme-accent: var(--accent);
  --theme-glow: color-mix(in srgb, var(--accent-glow) 40%, transparent);
  --fb-accent: var(--accent);
  --gc-accent: var(--accent);
  --ops-accent: var(--accent);

  --sidebar-accent: var(--accent);
  --sidebar-accent-bright: var(--accent-glow);
  --sidebar-accent-dim: var(--accent-soft);
  --sidebar-border: color-mix(in srgb, var(--accent) 8%, transparent);
  --sidebar-glow: color-mix(in srgb, var(--accent) 6%, transparent);
  --sidebar-active-bg: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 14%, transparent) 0%,
    color-mix(in srgb, var(--accent) 4%, transparent) 100%
  );
}

/* --------------------------------------------------------------------------
   Global accent remap — layout unchanged, colors follow theme
   -------------------------------------------------------------------------- */

[data-theme] .btn-primary {
  background: linear-gradient(135deg, var(--button-accent), color-mix(in srgb, var(--button-accent) 72%, #0a1628));
  border-color: var(--button-accent);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 35%, transparent);
}

[data-theme] .btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-glow), var(--button-accent));
  box-shadow: 0 6px 24px color-mix(in srgb, var(--accent-glow) 40%, transparent);
}

[data-theme] .btn-secondary:hover,
[data-theme] .btn-ghost:hover {
  border-color: var(--border-accent);
}

[data-theme] .form-control:focus,
[data-theme] .sc-input:focus,
[data-theme] .kiosk-scan-input:focus,
[data-theme] .ops-search:focus {
  border-color: var(--border-accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

[data-theme] .nav-link.active {
  color: var(--accent-glow);
}

[data-theme] .nav-link.active .nav-link-icon {
  color: var(--accent);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 55%, transparent));
}

[data-theme] .nav-link.active::before {
  background: var(--accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 50%, transparent);
}

[data-theme] .stat-card::before,
[data-theme] .ops-stat-card::before {
  background: linear-gradient(90deg, var(--accent), var(--accent-glow));
}

[data-theme] .ops-stat-accent .ops-stat-value,
[data-theme] .ops-tab.active,
[data-theme] .sc-nav-item.is-active {
  color: var(--accent-glow);
}

[data-theme] .ops-tab.active,
[data-theme] .sc-nav-item.is-active {
  border-color: var(--border-accent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 12%, transparent);
}

[data-theme] .ops-table th,
[data-theme] .ops-table tr:hover td {
  border-color: color-mix(in srgb, var(--accent) 12%, transparent);
}

[data-theme] .badge-active,
[data-theme] .ops-badge-accent {
  color: var(--accent-glow);
  border-color: var(--border-accent);
  background: var(--accent-soft);
}

[data-theme] .kiosk-scan-inner,
[data-theme] .kiosk-btn-scan,
[data-theme] .sc-card-glow,
[data-theme] .members-mgmt-card,
[data-theme] .stations-table-card,
[data-theme] .vip-member-card,
[data-theme] .st-overview-card.st-overview-active {
  border-color: var(--border-accent);
}

[data-theme] .kiosk-scan-inner {
  box-shadow: 0 0 32px color-mix(in srgb, var(--accent) 10%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

[data-theme] .kiosk-btn-scan {
  background: linear-gradient(135deg, color-mix(in srgb, var(--button-accent) 85%, #0284c7), color-mix(in srgb, var(--button-accent) 65%, #0369a1));
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 35%, transparent);
}

[data-theme] .kiosk-scanner-ready {
  color: color-mix(in srgb, var(--accent) 80%, #22c55e);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: var(--accent-soft);
}

[data-theme] .kiosk-scanner-dot {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent), 0 0 16px color-mix(in srgb, var(--accent-glow) 45%, transparent);
}

[data-theme] .kiosk-cat-pill.is-active,
[data-theme] .kiosk-cat-pill:hover {
  border-color: var(--border-accent);
  background: var(--accent-soft);
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 15%, transparent);
}

[data-theme] .kiosk-product-tile:hover:not(.is-out),
[data-theme] .kiosk-cart,
[data-theme] .modal-premium {
  border-color: var(--border-accent);
}

[data-theme] .kiosk-summary-total span:last-child,
[data-theme] .st-om-revenue,
[data-theme] .st-revenue-cell {
  color: color-mix(in srgb, var(--accent-glow) 70%, #4ade80);
  text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 25%, transparent);
}

[data-theme] .chart-accent,
[data-theme] .analytics-chart-bar,
[data-theme] .report-stat-highlight {
  fill: var(--accent);
  background: var(--accent);
  color: var(--accent);
}

[data-theme] .ops-tab.active,
[data-theme] .ops-filter-btn.is-active,
[data-theme] .ops-stat-accent,
[data-theme] .st-overview-card.st-overview-active {
  border-color: var(--border-accent);
}

[data-theme] .ops-tab.active,
[data-theme] .ops-filter-btn.is-active {
  color: var(--accent-glow);
  background: var(--accent-soft);
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 12%, transparent);
}

[data-theme] .ops-tab:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}

[data-theme] .ops-stat-accent .ops-stat-value,
[data-theme] .ops-link-accent,
[data-theme] .st-station-name-link,
[data-theme] .members-stat-accent,
[data-theme] .gl-stat-accent {
  color: var(--accent-glow);
}

[data-theme] .ops-badge-accent,
[data-theme] .badge-tier-vip,
[data-theme] .members-tier-vip {
  color: var(--accent-glow);
  background: var(--accent-soft);
  border-color: var(--border-accent);
}

[data-theme] .ops-table-wrap,
[data-theme] .ops-card,
[data-theme] .sc-card,
[data-theme] .glass-card {
  border-color: color-mix(in srgb, var(--accent) 10%, transparent);
}

[data-theme] .ops-table tr:hover td {
  background: var(--accent-soft);
}

[data-theme] .settings-center .sc-save-btn,
[data-theme] .st-btn-start {
  background: linear-gradient(135deg, var(--button-accent), color-mix(in srgb, var(--button-accent) 72%, #0a1628));
  border-color: var(--button-accent);
}

[data-theme] .chart-bar-fill,
[data-theme] .dash-chart-bar {
  background: linear-gradient(180deg, var(--accent-glow), var(--accent));
}

[data-theme] svg.icon-accent,
[data-theme] .nav-icon-accent {
  color: var(--accent);
  fill: var(--accent);
}

[data-theme] .login-card .btn-primary {
  background: linear-gradient(135deg, var(--button-accent), color-mix(in srgb, var(--button-accent) 70%, #0369a1));
  box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 35%, transparent);
}

[data-theme] .login-logo h1 {
  color: var(--accent-glow);
  text-shadow: 0 0 30px color-mix(in srgb, var(--accent) 40%, transparent);
}

[data-theme] .vip-progress-fill,
[data-theme] .mv-tier-progress .vip-progress-fill,
[data-theme] .progress-bar-fill,
[data-theme] .gl-timer-bar-fill {
  background: linear-gradient(90deg, var(--accent), var(--accent-glow));
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 35%, transparent);
}

[data-theme] .status-pill,
[data-theme] .ops-status-pill,
[data-theme] .badge-accent {
  border-color: var(--border-accent);
}

[data-theme] .status-pill.is-active,
[data-theme] .ops-status-pill.is-accent {
  color: var(--accent-glow);
  background: var(--accent-soft);
}

.theme-picker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
}

.theme-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.theme-circle-swatch {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--circle-glow), var(--circle-accent) 62%);
  box-shadow: 0 0 16px color-mix(in srgb, var(--circle-accent) 45%, transparent);
  border: 3px solid rgba(148, 163, 184, 0.25);
  transition: border-color 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}

.theme-circle:hover .theme-circle-swatch {
  transform: scale(1.08);
  border-color: color-mix(in srgb, var(--circle-accent) 55%, #fff);
}

.theme-circle.is-selected .theme-circle-swatch {
  border-color: var(--circle-accent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--circle-accent) 25%, transparent),
    0 0 20px color-mix(in srgb, var(--circle-accent) 50%, transparent);
}

.theme-circle-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #94a3b8;
  max-width: 72px;
  text-align: center;
  line-height: 1.2;
}

.theme-circle.is-selected .theme-circle-label {
  color: var(--accent-glow);
}

.theme-current-label {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  color: #94a3b8;
}

.theme-current-label strong {
  color: var(--accent-glow);
}