/* Világos mód – sötét az alapértelmezett (:root a styles.css-ben) */

html {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;

  --bg: #e4eaf4;
  --surface: #ffffff;
  --surface-2: #f5f8ff;
  --surface-elevated: #ffffff;
  --border: #c5d0e3;
  --border-hover: #94a3b8;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --accent: #2563eb;
  --accent-dim: #dbeafe;
  --accent-glow: rgba(37, 99, 235, 0.28);
  --green: #16a34a;
  --green-dim: #dcfce7;
  --orange-dim: #ffedd5;
  --red-dim: #fee2e2;
  --shadow:
    0 1px 2px rgba(30, 58, 138, 0.06),
    0 8px 24px rgba(30, 58, 138, 0.1);

  --purple: #7c3aed;
  --purple-text: #5b21b6;
  --purple-dim: #ede9fe;
  --purple-border: #c4b5fd;
  --inset-bg: #eef2fb;
  --inset-border: #c5d0e3;
  --kbd-bg: #ffffff;
  --kbd-fg: #1e40af;
  --kbd-border: #93c5fd;
  --smart-banner-bg: linear-gradient(90deg, #ede9fe 0%, #eff6ff 55%, #dbeafe 100%);
  --smart-banner-fg: #5b21b6;
  --smart-banner-border: #a78bfa;
  --ghost-hover-bg: #eff6ff;
  --tool-icon-bg: #eef2ff;
  --statusbar-bg: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%);

  --header-bg: rgba(255, 255, 255, 0.96);
  --chrome-bar-bg: linear-gradient(180deg, #f8faff 0%, #eef2f8 100%);
  --canvas-bg: #dce4f0;
  --canvas-grid-dot: rgba(37, 99, 235, 0.2);
  --canvas-hint-bg: #ffffff;
  --tooltip-bg: #ffffff;
  --grid-line: rgba(37, 99, 235, 0.1);
  --scrollbar-thumb: rgba(37, 99, 235, 0.28);
  --generate-label-bg: #ffffff;
  --onboarding-backdrop: rgba(30, 27, 75, 0.38);
  --onboarding-scrim: rgba(30, 27, 75, 0.45);
  --onboarding-card-bg: #ffffff;
  --transition-bg: #e4eaf4;
  --control-bg: #ffffff;
  --control-bg-hover: #f0f4ff;
  --overlay: rgba(30, 27, 75, 0.42);
}

html[data-theme="light"] * {
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
}

html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(37, 99, 235, 0.42);
}

/* Háttér */
html[data-theme="light"] .bg-grid {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  opacity: 0.85;
}

html[data-theme="light"] .bg-glow {
  background:
    radial-gradient(
      ellipse 55% 45% at 8% 10%,
      rgba(59, 130, 246, 0.2),
      transparent 68%
    ),
    radial-gradient(
      ellipse 50% 40% at 92% 88%,
      rgba(124, 58, 237, 0.16),
      transparent 68%
    ),
    radial-gradient(
      ellipse 40% 30% at 50% 50%,
      rgba(59, 130, 246, 0.06),
      transparent 70%
    );
}

/* Fejléc és navigáció */
html[data-theme="light"] .app-header {
  background: var(--header-bg);
  border-bottom-color: var(--border);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] .site-home__sub {
  color: var(--text-secondary);
}

html[data-theme="light"] .header-theme-btn,
html[data-theme="light"] .account-btn,
html[data-theme="light"] .auth-theme-toggle {
  background: var(--control-bg);
  border-color: var(--border);
  color: var(--text-secondary);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

html[data-theme="light"] .header-theme-btn:hover,
html[data-theme="light"] .account-btn:hover {
  background: var(--control-bg-hover);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

html[data-theme="light"] .beta-badge {
  color: #b91c1c;
  background: #fef2f2;
  border-color: #fca5a5;
  box-shadow: 0 1px 4px rgba(239, 68, 68, 0.15);
}

html[data-theme="light"] .beta-badge:hover {
  background: #fee2e2;
  border-color: #f87171;
}

html[data-theme="light"] .beta-badge__tooltip {
  background: #fff;
  color: #991b1b;
  border-color: rgba(239, 68, 68, 0.35);
  box-shadow: var(--shadow);
}

/* Oldalsáv és panelek */
html[data-theme="light"] .panel,
html[data-theme="light"] .account-menu,
html[data-theme="light"] .auth-card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow);
}

html[data-theme="light"] .panel--smart {
  border-color: rgba(124, 58, 237, 0.35);
  box-shadow:
    var(--shadow),
    0 0 0 1px rgba(124, 58, 237, 0.08);
}

html[data-theme="light"] .smart-live-pill {
  background: rgba(124, 58, 237, 0.12);
  color: #6d28d9;
  border-color: rgba(124, 58, 237, 0.35);
}

html[data-theme="light"] .smart-mode-toggle {
  color: #5b21b6;
  border-color: rgba(124, 58, 237, 0.4);
  background: linear-gradient(
    135deg,
    rgba(167, 139, 250, 0.2),
    rgba(59, 130, 246, 0.08)
  );
}

html[data-theme="light"] .smart-mode-toggle--sidebar {
  color: #5b21b6;
}

html[data-theme="light"] body.is-smart-mode .sidebar-pane--smart {
  filter: none;
  opacity: 1;
}

html[data-theme="light"] body.is-smart-mode .sidebar-pane--edit {
  opacity: 0.55;
}

/* Eszközök */
html[data-theme="light"] .tool {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-secondary);
}

html[data-theme="light"] .tool:hover {
  border-color: var(--border-hover);
  background: var(--control-bg-hover);
  color: var(--text-primary);
}

html[data-theme="light"] .tool.active {
  background: var(--accent-dim);
  border-color: rgba(59, 130, 246, 0.45);
  color: #1d4ed8;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.12);
}

html[data-theme="light"] .tool.active .tool__icon {
  color: #2563eb;
}

/* Toolbar és gombok */
html[data-theme="light"] .control,
html[data-theme="light"] .toggle-grid-btn,
html[data-theme="light"] .canvas-print-btn,
html[data-theme="light"] .secondary-btn {
  background: var(--control-bg);
  border-color: var(--border);
  color: var(--text-secondary);
}

html[data-theme="light"] .control:hover,
html[data-theme="light"] .toggle-grid-btn:hover,
html[data-theme="light"] .canvas-print-btn:hover,
html[data-theme="light"] .secondary-btn:hover {
  background: var(--control-bg-hover);
  border-color: var(--border-hover);
  color: var(--text-primary);
}

html[data-theme="light"] .toggle-grid-btn[aria-pressed="true"],
html[data-theme="light"] .toggle-grid-btn.is-on {
  background: var(--accent-dim);
  border-color: rgba(59, 130, 246, 0.45);
  color: #1d4ed8;
}

html[data-theme="light"] .toolbar-vrule {
  background: var(--border);
}

html[data-theme="light"] .toolbar-label {
  color: var(--text-muted);
  opacity: 1;
}

/* Vászon */
html[data-theme="light"] .canvas-panel {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow);
}

html[data-theme="light"] .canvas-panel__chrome {
  background: var(--chrome-bar-bg);
  border-bottom-color: var(--border);
}

html[data-theme="light"] .chrome-title {
  color: var(--text-muted);
}

html[data-theme="light"] #canvasContainer,
html[data-theme="light"] .canvas {
  background: var(--canvas-bg);
}

html[data-theme="light"] #canvasContainer::before,
html[data-theme="light"] .canvas::before {
  background-image: radial-gradient(var(--canvas-grid-dot) 1px, transparent 1px);
  opacity: 0.55;
}

html[data-theme="light"] #canvasContainer.snap::before,
html[data-theme="light"] .canvas.snap::before {
  opacity: 0.75;
}

html[data-theme="light"] .canvas-hint {
  background: var(--canvas-hint-bg);
  color: var(--text-secondary);
  border-color: var(--border);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .canvas-meta,
html[data-theme="light"] .canvas-meta kbd {
  color: var(--text-muted);
}

html[data-theme="light"] .canvas-meta kbd {
  background: var(--surface-2);
  border-color: var(--border);
}

/* Padok és ülések */
html[data-theme="light"] .desk {
  background: var(--surface-elevated);
  border-color: var(--border);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
}

html[data-theme="light"] .desk.selected {
  border-color: rgba(59, 130, 246, 0.55);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

html[data-theme="light"] .seat {
  border-color: var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
}

html[data-theme="light"] .seat.empty {
  background: rgba(15, 23, 42, 0.04);
  color: var(--text-muted);
}

html[data-theme="light"] .student-chip {
  background: #fff;
  color: var(--text-primary);
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .seat[data-type="teacher"] {
  background: var(--orange-dim);
  border-color: rgba(249, 115, 22, 0.45);
  color: #c2410c;
}

/* Névsor */
html[data-theme="light"] .custom-input,
html[data-theme="light"] .cselect__trigger,
html[data-theme="light"] .student-input-row input {
  background: var(--control-bg);
  border-color: var(--border);
  color: var(--text-primary);
}

html[data-theme="light"] .custom-input:focus,
html[data-theme="light"] .student-input-row input:focus {
  border-color: rgba(59, 130, 246, 0.55);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

html[data-theme="light"] .student-item {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-primary);
}

html[data-theme="light"] .student-item:hover {
  background: var(--control-bg-hover);
  border-color: var(--border-hover);
}

html[data-theme="light"] .student-item.assigned {
  border-color: rgba(34, 197, 94, 0.4);
  background: var(--green-dim);
}

html[data-theme="light"] .panel__head h2 {
  color: #334155;
}

html[data-theme="light"] .count {
  background: #dbeafe;
  color: #1d4ed8;
  border: 1px solid #93c5fd;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.1);
}

html[data-theme="light"] .panel--students {
  border-color: #93c5fd;
  box-shadow:
    var(--shadow),
    inset 0 2px 0 #3b82f6;
}

html[data-theme="light"] .student-list {
  background: var(--inset-bg);
  border: 1px solid var(--inset-border);
}

html[data-theme="light"] .student-list .muted {
  color: #64748b;
}

html[data-theme="light"] .btn-ghost,
html[data-theme="light"] .students-panel button.wide {
  color: #475569;
  border-color: #c5d0e3;
  background: #fff;
}

html[data-theme="light"] .btn-ghost:hover,
html[data-theme="light"] .students-panel button.wide:hover {
  background: var(--ghost-hover-bg);
  border-color: #93c5fd;
  color: #1d4ed8;
}

html[data-theme="light"] .version-pill {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: #93c5fd;
}

html[data-theme="light"] .smart-mode-banner {
  background: var(--smart-banner-bg);
  border-color: var(--smart-banner-border);
  color: var(--smart-banner-fg);
  box-shadow: 0 1px 4px rgba(124, 58, 237, 0.14);
}

html[data-theme="light"] .smart-mode-banner__dot {
  background: #7c3aed;
  box-shadow: 0 0 8px rgba(124, 58, 237, 0.5);
}

html[data-theme="light"] .statusbar {
  background: var(--statusbar-bg);
  border-color: #c5d0e3;
  color: #475569;
}

html[data-theme="light"] .stat--accent {
  color: #15803d;
  font-weight: 600;
}

html[data-theme="light"] .statusbar__tip {
  color: #64748b;
}

html[data-theme="light"] .statusbar__tip kbd {
  background: var(--kbd-bg);
  color: var(--kbd-fg);
  border-color: var(--kbd-border);
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.12);
}

html[data-theme="light"] .tool__icon {
  background: var(--tool-icon-bg);
  color: #4f46e5;
}

html[data-theme="light"] body.is-smart-mode .canvas-panel {
  box-shadow:
    var(--shadow),
    0 0 0 1px rgba(124, 58, 237, 0.12);
}

html[data-theme="light"] body.is-smart-mode .canvas-panel__chrome {
  background: linear-gradient(180deg, #f3effc 0%, var(--chrome-bar-bg) 100%);
}

/* Modál, toast, tooltip */
html[data-theme="light"] .modal-backdrop {
  background: var(--overlay);
}

html[data-theme="light"] .modal-content {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-primary);
}

html[data-theme="light"] .ui-tooltip {
  background: var(--tooltip-bg);
  border-color: rgba(124, 58, 237, 0.3);
  box-shadow: var(--shadow);
  color: var(--text-secondary);
}

html[data-theme="light"] .toast {
  background: var(--surface-elevated);
  border-color: var(--border);
  box-shadow: var(--shadow);
}

html[data-theme="light"] .generate-fx__label {
  background: var(--generate-label-bg);
  color: var(--text-primary);
  border-color: rgba(59, 130, 246, 0.35);
  box-shadow: var(--shadow);
}

/* Okos panel lista */
html[data-theme="light"] .smart-list__item,
html[data-theme="light"] .smart-block {
  border-color: var(--border);
}

html[data-theme="light"] .smart-list__item {
  background: var(--surface-2);
}

html[data-theme="light"] .fix-seat-pick-hint {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-secondary);
  box-shadow: var(--shadow);
}

/* Onboarding */
html[data-theme="light"] .onboarding__backdrop {
  background: var(--onboarding-backdrop);
}

html[data-theme="light"] .onboarding__spotlight {
  box-shadow:
    0 0 0 2px rgba(59, 130, 246, 0.5),
    0 0 0 9999px var(--onboarding-scrim);
}

html[data-theme="light"] .onboarding__card {
  background: var(--onboarding-card-bg);
  border-color: rgba(59, 130, 246, 0.3);
  box-shadow: var(--shadow);
  color: var(--text-primary);
}

html[data-theme="light"] .onboarding__text {
  color: var(--text-secondary);
}

html[data-theme="light"] .onboarding__demo {
  border-color: var(--border);
  background: var(--surface-2);
}

html[data-theme="light"] .page-transition__glow {
  background:
    radial-gradient(
      ellipse 60% 50% at 20% 30%,
      rgba(59, 130, 246, 0.16),
      transparent 65%
    ),
    radial-gradient(
      ellipse 50% 40% at 85% 75%,
      rgba(124, 58, 237, 0.12),
      transparent 65%
    ),
    var(--transition-bg);
}

/* Auth */
html[data-theme="light"] .auth-card__chrome {
  background: var(--chrome-bar-bg);
  border-bottom-color: var(--border);
}

html[data-theme="light"] .auth-tab {
  color: var(--text-muted);
}

html[data-theme="light"] .auth-tab.active {
  color: var(--text-primary);
}

html[data-theme="light"] .auth-google {
  background: var(--control-bg);
  border-color: var(--border);
}

html[data-theme="light"] .auth-login-mode {
  background: #eef2f8;
  border-color: #c5d0e3;
}

html[data-theme="light"] .auth-login-mode__indicator {
  background: #fff;
  border-color: #93c5fd;
}

html[data-theme="light"] .modal-content--viewport-warning {
  border-color: rgba(234, 88, 12, 0.4);
}

html[data-theme="light"] .viewport-warning__icon {
  background: #ffedd5;
  color: #c2410c;
  border-color: #fdba74;
}