/* ClassCards V2 Theme - Dark Mode Support
 * Defines CSS variables for light/dark and overrides base body styling.
 * Individual views with hardcoded colors are intentionally not rewritten.
 */

:root {
  --bg: #0f172a;
  --bg-elevated: #1e293b;
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --border: #334155;
  --accent: #818cf8;
  --accent-hover: #a5b4fc;
}

:root[data-theme="light"] {
  --bg: #ffffff;
  --bg-elevated: #f9f9f9;
  --text: #1a1a1a;
  --text-muted: #666666;
  --border: #e8dfd3;
  --accent: #5d4c9a;
  --accent-hover: #4a3d7a;
}

[data-theme="dark"] {
  --bg: #0f172a;
  --bg-elevated: #1e293b;
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --border: #334155;
  --accent: #818cf8;
  --accent-hover: #a5b4fc;
}

html,
html body {
  background-color: var(--bg);
  color: var(--text);
}

html[data-theme="dark"] body {
  color-scheme: dark;
}

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

/* Theme toggle button */
.cc-theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.cc-theme-toggle:hover {
  background: var(--accent);
  color: #ffffff;
  transform: scale(1.05);
}

.cc-theme-toggle .cc-icon-sun { display: none; }
.cc-theme-toggle .cc-icon-moon { display: inline; }

html[data-theme="dark"] .cc-theme-toggle .cc-icon-sun { display: inline; }
html[data-theme="dark"] .cc-theme-toggle .cc-icon-moon { display: none; }

/* 3D-Flip für Practice-v2 Flip-Modus */
.pv2-card-flip-container { perspective: 1000px; }
.pv2-card-flip-inner { transition: transform .5s; transform-style: preserve-3d; position: relative; }
.pv2-card-flip-inner.flipped { transform: rotateY(180deg); }
.pv2-card-flip-container .pv2-front { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pv2-card-flip-container .pv2-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; transform: rotateY(180deg); display: block; border-top: none; margin-top: 0; padding-top: 0; }
.pv2-card-flip-inner.flipped .pv2-front { visibility: hidden; }

/* A11y: Focus-Outline für Tastatur-Nutzer */
:focus-visible {
  outline: 2px solid var(--pv2-primary, #4CAF50);
  outline-offset: 2px;
}

/* A11y: Skip-Link (sichtbar nur bei Fokus) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 10000;
}
.skip-link:focus {
  position: fixed;
  left: 12px;
  top: 12px;
  width: auto;
  height: auto;
  padding: 0.6rem 1rem;
  background: var(--pv2-primary, #5D4C9A);
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}