/* Dark mode - shared surfaces & interactive emphasis only */

[data-theme='dark'] .card,
[data-theme='dark'] .auth-card,
[data-theme='dark'] .game-card-play,
[data-theme='dark'] .game-done,
[data-theme='dark'] .doc-item,
[data-theme='dark'] .game-card,
[data-theme='dark'] .achievement-item {
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
}

[data-theme='dark'] .btn-primary {
  color: var(--on-primary);
  box-shadow: 0 2px 12px rgba(139, 154, 255, 0.35);
}

[data-theme='dark'] .btn-primary:hover,
[data-theme='dark'] .btn-primary:focus-visible {
  color: var(--on-primary);
  box-shadow: 0 4px 18px rgba(139, 154, 255, 0.45);
}

[data-theme='dark'] .form-control,
[data-theme='dark'] .form-select {
  border-color: var(--border-strong);
}

[data-theme='dark'] .form-control:focus,
[data-theme='dark'] .form-select:focus {
  box-shadow: 0 0 0 0.2rem rgba(139, 154, 255, 0.28);
}

[data-theme='dark'] .input-group-text,
[data-theme='dark'] .select-field-label {
  border-color: var(--border-strong);
  background: var(--surface-3);
  color: var(--text);
}

[data-theme='dark'] .table-light {
  --bs-table-bg: var(--surface-3);
  border-bottom: 2px solid var(--border-strong);
}

[data-theme='dark'] .table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: color-mix(in srgb, var(--primary) 18%, var(--surface-3));
}

[data-theme='dark'] .words-table {
  --bs-table-hover-bg: color-mix(in srgb, var(--primary) 22%, var(--surface-3));
  --bs-table-hover-color: var(--text);
}

[data-theme='dark'] .badge.text-bg-secondary {
  background-color: var(--surface-3) !important;
  border: 1px solid var(--border-strong);
  color: var(--text) !important;
}

[data-theme='dark'] .alert,
[data-theme='dark'] .status {
  border-width: 1px;
  border-style: solid;
}

[data-theme='dark'] .flashcard-back,
[data-theme='dark'] .stat-item {
  border: 1px solid var(--border-strong);
  background: var(--surface-3);
}

[data-theme='dark'] .flashcard-word,
[data-theme='dark'] .stat-value,
[data-theme='dark'] .study-stat-value,
[data-theme='dark'] .achievement-reward {
  color: var(--primary-hover);
}

[data-theme='dark'] .game-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-glow);
}

[data-theme='dark'] .match-item,
[data-theme='dark'] .quiz-option {
  border-color: var(--border-strong);
  background: var(--surface-3);
}

[data-theme='dark'] .match-item.selected,
[data-theme='dark'] .quiz-option:hover:not(.answered) {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px rgba(139, 154, 255, 0.2);
}

[data-theme='dark'] .achievement-item.unlocked {
  border-color: var(--achievement-unlocked-border);
}

[data-theme='dark'] .landing-cta {
  color: var(--on-primary);
}

[data-theme='dark'] .words-toolbar {
  border-bottom-color: var(--border-strong);
}

[data-theme='dark'] .words-summary {
  background: color-mix(in srgb, var(--primary) 16%, var(--surface-3));
  color: var(--text);
}

[data-theme='dark'] .words-empty-icon {
  background: color-mix(in srgb, var(--primary) 16%, var(--surface-3));
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border-strong));
}

[data-theme='dark'] .words-table thead th {
  color: var(--muted);
}

[data-theme='dark'] .cefr-B1 {
  background: #4a3a10;
  color: #fde68a;
}
[data-theme='dark'] .cefr-B2 {
  background: #4a2a10;
  color: #fdba74;
}
[data-theme='dark'] .cefr-C1 {
  background: #3b1f5c;
  color: #e9d5ff;
}
[data-theme='dark'] .cefr-C2 {
  background: #4a1515;
  color: #fecaca;
}

[data-theme='dark'] .swal2-popup {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
}

[data-theme='dark'] .swal2-title {
  color: var(--text);
}

[data-theme='dark'] .swal2-html-container {
  color: var(--muted);
}

[data-theme='dark'] .swal2-timer-progress-bar-container {
  background: rgba(255, 255, 255, 0.12);
}

[data-theme='dark'] .swal2-timer-progress-bar {
  background: var(--primary);
}

[data-theme='dark'] .xp-toast {
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}

@media (max-width: 768px) {
  [data-theme='dark'] .file-picker {
    border-color: var(--border-strong);
    background: color-mix(in srgb, var(--surface-2) 70%, var(--surface-3));
  }
}