/**
 * MSVplus Accessibility-CSS (msvplus-a11y.css)
 *
 * Zusätzliche visuelle Indikatoren für Benutzer mit Farbsehschwächen
 *
 * Diese Datei wird geladen, wenn das barrierefreie Farbschema aktiviert ist.
 * Die Brand-CSS wird dann NICHT geladen, sodass Bootstrap-Standardfarben
 * (die bereits WCAG-konform sind) zum Einsatz kommen.
 *
 * Diese Datei fügt nur visuelle Indikatoren hinzu:
 * - Unterstreichungen für Links (WCAG 2.1 SC 1.4.1)
 * - Verstärkte Fokus-Styles
 * - Muster und Symbole für Status-Unterscheidung
 */

/* ==========================================================================
   1. LINKS - Unterstreichungen aktivieren (WCAG 2.1 SC 1.4.1)
   Farbe allein darf nicht das einzige Unterscheidungsmerkmal sein
   ========================================================================== */

a,
.nav .nav-link,
.page-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Hover: dickere Unterstreichung für visuelles Feedback */
a:hover,
.nav .nav-link:hover,
.page-link:hover {
  text-decoration-thickness: 2px;
}

/* Ausnahmen: Buttons und Icons (bereits durch Form erkennbar) */
.btn,
.nav-link.btn,
.sb-icon,
.sidebar a,
.quicksearch a,
a.btn,
a[class*="btn-"],
.belegung-card .btn,
.belegung-card .badge {
  text-decoration: none;
}

/* Sidebar-Links: Keine Unterstreichung (durch Hintergrund erkennbar) */
.sidebar .nav-link,
.sidebar a.nav-link {
  text-decoration: none;
}

/* ==========================================================================
   2. FOKUS-STYLES - Verstärkt für Tastaturnavigation
   ========================================================================== */

:focus-visible {
  outline: 3px solid var(--bs-info) !important;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Fokussierte Links: zusätzlicher Hintergrund */
a:focus-visible {
  background-color: rgba(13, 202, 240, 0.15);
  border-radius: 3px;
  padding: 0 2px;
  margin: 0 -2px;
}

/* ==========================================================================
   3. STATUS-PUNKTE IM STUNDENPLAN
   Unterscheidung durch Rand-Muster zusätzlich zur Farbe
   ========================================================================== */

/* Status 2: unbekannt - Ring-Muster */
.zeile3 .status_2:after {
  box-shadow:
    inset 0 0 0 2px white,
    inset 0 0 0 4px var(--bs-info, #0dcaf0);
}

/* Status 4: Probe - gestrichelter Rand */
.zeile3 .status_4:after {
  border: 2px dashed white;
  box-sizing: border-box;
}

/* Status 6: Erwartet bis... - gepunkteter Rand */
.zeile3 .status_6:after {
  border: 2px dotted white;
  box-sizing: border-box;
}

/* ==========================================================================
   4. KURSBELEGUNG-BADGES
   Symbole für dreifache Unterscheidung: Farbe + Form + Symbol
   ========================================================================== */

/* Neu im Kurs: Plus-Symbol */
.plankurs .neuinkurs::before {
  content: "+ ";
  font-weight: bold;
}

/* Kündigung: X-Symbol und Schraffur-Muster */
.plankurs .kuendigung {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 2px,
    rgba(255, 255, 255, 0.2) 2px,
    rgba(255, 255, 255, 0.2) 4px
  );
}

.plankurs .kuendigung::before {
  content: "\2717 "; /* ✗ Symbol */
}

/* Wechsel: Doppelpfeil-Symbol */
.plankurs .wechsel::before {
  content: "\2194 "; /* ↔ Symbol */
}

/* ==========================================================================
   5. STATUS-LEGENDE
   Unterschiedliche Rand-Stile pro Status
   ========================================================================== */

/* Aktiv: solider Rand */
.belegungen-status-dot.active {
  border: 2px solid var(--bs-success);
}

/* Ausstehend: gepunkteter Rand */
.belegungen-status-dot.pending {
  border: 2px dotted currentColor;
}

/* Probe: gestrichelter Rand */
.belegungen-status-dot.trial {
  border: 2px dashed currentColor;
}

/* Unbekannt: solider Rand */
.belegungen-status-dot.unknown {
  border: 2px solid currentColor;
}

/* Nicht zustandegekommen: Ausgefüllt */
.belegungen-status-dot.notclosed {
  border: 2px solid currentColor;
  background: currentColor;
}

/* ==========================================================================
   6. BELEGUNGSKARTEN - Status-Rahmen
   Unterschiedliche Border-Stile für visuelle Unterscheidung
   ========================================================================== */

/* Basis-Rahmen (normalerweise in brand.css) */
.belegung-card {
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-left-width: 0.5rem; /* Dicken linken Rand beibehalten */
}

.belegung-card.is-former {
  background: var(--bs-secondary-bg, #f8f9fa);
}

/* Aktiv (success): Solider grüner Rand */
.belegung-card.border-success {
  border-left-color: var(--bs-success) !important;
  border-left-style: solid;
}

/* Wartend (warning): Gepunkteter oranger Rand */
.belegung-card.border-warning {
  border-left-color: var(--bs-warning) !important;
  border-left-style: dotted;
}

/* Probe (danger): Gestrichelter roter Rand */
.belegung-card.border-danger {
  border-left-color: var(--bs-danger) !important;
  border-left-style: dashed;
}

/* Unbekannt (secondary): Solider grauer Rand */
.belegung-card.border-secondary {
  border-left-color: var(--bs-secondary) !important;
  border-left-style: solid;
}

/* Nicht zustandegekommen (dark): Solider dunkler Rand */
.belegung-card.border-dark {
  border-left-color: var(--bs-dark) !important;
  border-left-style: solid;
}

/* Dark Mode */
html[data-bs-theme="dark"] .belegung-card {
  background: var(--bs-body-bg);
  border-color: #444;
}

html[data-bs-theme="dark"] .belegung-card.is-former {
  background: var(--bs-dark-bg-subtle);
}

/* ==========================================================================
   7. FORMULAR-VALIDIERUNG
   Icons zusätzlich zur Farbe
   ========================================================================== */

/* Validierungs-Icons mit Bootstrap-Farben */
.form-control.is-valid {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
}

.form-control.is-invalid {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
}

/* ==========================================================================
   8. PAUSEN-INDIKATOR
   Zusätzlicher linker Rand für Sichtbarkeit
   ========================================================================== */

.plankurs .pause {
  border-left: 5px solid var(--bs-danger, #dc3545);
}

/* ==========================================================================
   9. SIDEBAR - Reduzierte Transparenz für bessere Lesbarkeit
   Da brand.css nicht geladen wird, definieren wir hier die Sidebar-Farben
   mit höherer Opazität für bessere Zugänglichkeit
   ========================================================================== */

.sidebar {
  background-color: #363b3f; /* Solide Farbe statt transparent */
  color: white;
}

.sidebar:hover,
.sidebar.static {
  background-color: #2a2e32; /* Fast opak statt 80% transparent */
  backdrop-filter: none; /* Kein Blur-Effekt - klare Lesbarkeit */
}

.sb-icon:not(.sb-display):hover,
.sidebar li:not(.sb-heading):hover,
.sb-hover:hover,
.sidebar .active {
  background-color: rgba(255, 255, 255, 0.15);
}

.sb-icon {
  color: white;
}

#sb-menubar {
  background-color: #363b3f;
  color: white !important;
}

#sb-menubar:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

.sb-heading,
.nav-header {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Focus-Style für Keyboard-Navigation in Sidebar */
.sb-icon:focus-visible,
.sidebar a:focus-visible,
.sidebar button:focus-visible {
  outline: 3px solid var(--bs-info);
  outline-offset: -2px;
}

/* Keyboard-Shortcuts */
.subtle kbd {
  background: #666;
}

/* Dark Mode Sidebar */
html[data-bs-theme="dark"] .sidebar,
html[data-bs-theme="dark"] #sb-menubar {
  background-color: #1a1d20;
}

html[data-bs-theme="dark"] .sidebar:hover,
html[data-bs-theme="dark"] .sidebar.static {
  background-color: #141719;
}

/* ==========================================================================
   10. CARDS - Deutlicherer Rand für Gruppierung
   ========================================================================== */

.karte {
  border: 1px solid var(--bs-border-color);
}

html[data-bs-theme="dark"] .karte {
  border-color: var(--bs-border-color);
}

/* ==========================================================================
   11. BELEGUNG-ICONS - Hintergrundfarben und Icon-Farbe
   Da brand.css nicht geladen wird, müssen die Typ-Hintergründe hier
   definiert werden. Bootstrap-Standardfarben für Konsistenz.
   ========================================================================== */

.belegung-icon i {
  color: white !important;
}

/* Kurs: Bootstrap Primary (Blau) */
.belegung-icon.kurs {
  background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
}

/* Prepaid: Bootstrap Warning (Orange) */
.belegung-icon.prepaid {
  background: linear-gradient(135deg, #fd7e14 0%, #ca6510 100%);
}

/* Probe: Bootstrap Info (Cyan) - statt Grün für bessere Unterscheidbarkeit */
.belegung-icon.trial {
  background: linear-gradient(135deg, #0dcaf0 0%, #0aa2c0 100%);
}

/* Sonderbelegung: Bootstrap Indigo (Lila) - statt Rot für A11y */
.belegung-icon.special {
  background: linear-gradient(135deg, #6610f2 0%, #520dc2 100%);
}

/* ==========================================================================
   12. PRINT STYLES
   Sicherstellen, dass gedruckte Version auch ohne Farbe funktioniert
   ========================================================================== */

@media print {
  /* Links unterstreichen */
  a {
    text-decoration: underline !important;
  }

  /* Status-Punkte mit sichtbaren Rändern */
  .belegungen-status-dot {
    border-width: 2px !important;
    border-style: solid !important;
  }
}