/* ==========================================================================
   Lernlotte — maritimes Theme, an sailzone.de ausgerichtet.
   Light = „Tag auf See", Dark = „Nachtfahrt". Kein Sass, reine CSS-Variablen
   auf Bootstrap 5.3 (data-bs-theme). Orange ist Handlungssignal („fällig"),
   Rot bleibt Fehlern vorbehalten.
   ========================================================================== */

/* ---------- Design-Tokens: Light ---------- */
:root,
[data-bs-theme="light"] {
  /* Lernlotte-Töne (Sailzone-Palette) */
  --ll-marine: #0A355E;
  --ll-marine-strong: #082A4B;
  --ll-navbar: #0A355E;
  --ll-accent: #E4572E;
  --ll-accent-strong: #C63E1B;
  --ll-sail-grey: #9FB2CC;

  /* Bootstrap-Mapping */
  --bs-body-bg: #F7FBFF;
  --bs-body-color: #243041;
  --bs-body-color-rgb: 36, 48, 65;
  --bs-primary: #0A355E;
  --bs-primary-rgb: 10, 53, 94;
  --bs-secondary-color: #66768C;               /* = text-muted */
  --bs-secondary-color-rgb: 102, 118, 140;
  --bs-tertiary-bg: #EAF3FF;                    /* Card-Header, Zebra */
  --bs-tertiary-bg-rgb: 234, 243, 255;
  --bs-border-color: #C9D4E3;
  --bs-link-color: #205080;
  --bs-link-color-rgb: 32, 80, 128;
  --bs-link-hover-color: #0A355E;
  --bs-link-hover-color-rgb: 10, 53, 94;
  --bs-success: #1F7A3D;
  --bs-success-rgb: 31, 122, 61;
  --bs-danger: #B3273E;
  --bs-danger-rgb: 179, 39, 62;
  --bs-success-text-emphasis: #14522A;
  --bs-success-bg-subtle: #E2F2E7;
  --bs-success-border-subtle: #A9D8BA;
  --bs-danger-text-emphasis: #7A1A2B;
  --bs-danger-bg-subtle: #F9E3E7;
  --bs-danger-border-subtle: #E8B3BE;
  --bs-border-radius: .875rem;                  /* Sailzone: 14px */
  --bs-border-radius-sm: .5rem;
  --bs-border-radius-lg: 1rem;
  --ll-shadow: 0 8px 24px rgba(10, 53, 94, .12); /* Sailzone-Original */
  --ll-heading: #0A355E;
}

/* ---------- Design-Tokens: Dark ---------- */
[data-bs-theme="dark"] {
  --ll-marine: #6FB1DF;
  --ll-marine-strong: #7FBCE8;
  --ll-navbar: #081C30;
  --ll-accent: #FF8A5E;
  --ll-accent-strong: #FF8A5E;
  --ll-sail-grey: #8FA6C0;

  --bs-body-bg: #0A1622;
  --bs-body-color: #DCE7F2;
  --bs-body-color-rgb: 220, 231, 242;
  --bs-primary: #6FB1DF;
  --bs-primary-rgb: 111, 177, 223;
  --bs-secondary-color: #93A8BC;
  --bs-secondary-color-rgb: 147, 168, 188;
  --bs-tertiary-bg: #16304A;
  --bs-tertiary-bg-rgb: 22, 48, 74;
  --bs-border-color: #2C4763;
  --bs-link-color: #7FBCE8;
  --bs-link-color-rgb: 127, 188, 232;
  --bs-link-hover-color: #A3D0F0;
  --bs-link-hover-color-rgb: 163, 208, 240;
  --bs-success: #1F7A3D;
  --bs-success-rgb: 78, 194, 126;               /* text-success hell */
  --bs-danger: #B3273E;
  --bs-danger-rgb: 242, 119, 138;               /* text-danger hell */
  --bs-success-text-emphasis: #8AD3A8;
  --bs-success-bg-subtle: #0E2C1A;
  --bs-success-border-subtle: #1F5B37;
  --bs-danger-text-emphasis: #F1A0AE;
  --bs-danger-bg-subtle: #38151E;
  --bs-danger-border-subtle: #6E2735;
  --bs-border-radius: .875rem;
  --bs-border-radius-sm: .5rem;
  --bs-border-radius-lg: 1rem;
  --ll-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  --ll-heading: #CFE3F1;

  /* Karten/Flächen dunkler als Body-Alternative */
  --bs-card-bg: #102438;
  --bs-secondary-bg: #16304A;
}

[data-bs-theme="dark"] body {
  --bs-card-bg: #102438;
}

/* ---------- Basis / Typografie ---------- */
/* 16px-Basis auch mobil (Template-14px-Hack entfernt) */

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

main {
  flex: 1 0 auto;
}

.footer {
  margin-top: auto;
  font-size: .875rem;
  border-top: 1px solid var(--bs-border-color);
}

h1, h2, h3, .h1, .h2, .h3, .h4, .h5 {
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--ll-heading);
}

/* Lesbare Zeilenlänge für Fragetexte */
.card-body > .fs-5 {
  max-width: 42rem;
}

#countdown,
.ll-stat-num {
  font-variant-numeric: tabular-nums;
}

.card {
  --bs-card-bg: #FFFFFF; /* Sailzone: weiße Karten auf #F7FBFF-Grund */
  --bs-card-border-color: var(--bs-border-color);
  box-shadow: var(--ll-shadow);
}

/* Utility überstimmt sonst per !important den weichen Sailzone-Schatten */
.shadow-sm {
  box-shadow: var(--ll-shadow) !important;
}

[data-bs-theme="dark"] .card {
  --bs-card-bg: #102438;
  background-color: var(--bs-card-bg);
}

/* ---------- Buttons (eingebrannte Bootstrap-Farben überschreiben) ---------- */
.btn-primary {
  --bs-btn-bg: #0A355E;
  --bs-btn-border-color: #0A355E;
  --bs-btn-hover-bg: #082A4B;
  --bs-btn-hover-border-color: #082A4B;
  --bs-btn-active-bg: #06223D;
  --bs-btn-active-border-color: #06223D;
  --bs-btn-disabled-bg: #0A355E;
  --bs-btn-disabled-border-color: #0A355E;
  --bs-btn-focus-shadow-rgb: 10, 53, 94;
}

[data-bs-theme="dark"] .btn-primary {
  --bs-btn-bg: #6FB1DF;
  --bs-btn-color: #071A2B;
  --bs-btn-border-color: #6FB1DF;
  --bs-btn-hover-bg: #7FBCE8;
  --bs-btn-hover-color: #071A2B;
  --bs-btn-hover-border-color: #7FBCE8;
  --bs-btn-active-bg: #8FC7EA;
  --bs-btn-active-color: #071A2B;
  --bs-btn-active-border-color: #8FC7EA;
  --bs-btn-disabled-bg: #6FB1DF;
  --bs-btn-disabled-color: #071A2B;
  --bs-btn-disabled-border-color: #6FB1DF;
  --bs-btn-focus-shadow-rgb: 111, 177, 223;
}

.btn-outline-primary {
  --bs-btn-color: #0A355E;
  --bs-btn-border-color: #0A355E;
  --bs-btn-hover-bg: #0A355E;
  --bs-btn-hover-border-color: #0A355E;
  --bs-btn-active-bg: #082A4B;
  --bs-btn-active-border-color: #082A4B;
  --bs-btn-focus-shadow-rgb: 10, 53, 94;
}

[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: #9CC8EA;
  --bs-btn-border-color: #6FB1DF;
  --bs-btn-hover-bg: #6FB1DF;
  --bs-btn-hover-color: #071A2B;
  --bs-btn-hover-border-color: #6FB1DF;
  --bs-btn-active-bg: #7FBCE8;
  --bs-btn-active-color: #071A2B;
  --bs-btn-active-border-color: #7FBCE8;
  --bs-btn-focus-shadow-rgb: 111, 177, 223;
}

/* Neutraler Slate (z. B. „Antwort aufdecken") */
.btn-secondary {
  --bs-btn-bg: #405A70;
  --bs-btn-border-color: #405A70;
  --bs-btn-hover-bg: #34495C;
  --bs-btn-hover-border-color: #34495C;
  --bs-btn-active-bg: #2C3E4E;
  --bs-btn-active-border-color: #2C3E4E;
}

[data-bs-theme="dark"] .btn-secondary {
  --bs-btn-bg: #2E4C63;
  --bs-btn-color: #DCE7F2;
  --bs-btn-border-color: #2E4C63;
  --bs-btn-hover-bg: #3A5D78;
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-hover-border-color: #3A5D78;
  --bs-btn-active-bg: #446885;
  --bs-btn-active-border-color: #446885;
}

.btn-outline-secondary {
  --bs-btn-color: #4A607A;
  --bs-btn-border-color: #8DA2BC;
  --bs-btn-hover-bg: #4A607A;
  --bs-btn-hover-border-color: #4A607A;
  --bs-btn-hover-color: #fff;
}

[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: #A9BDD2;
  --bs-btn-border-color: #5C7893;
  --bs-btn-hover-bg: #34506B;
  --bs-btn-hover-color: #E6EFF7;
  --bs-btn-hover-border-color: #5C7893;
}

/* Erfolg/Fehler-Buttons: in beiden Themes gefüllt + weiß (AA geprüft) */
.btn-success,
[data-bs-theme="dark"] .btn-success {
  --bs-btn-bg: #1F7A3D;
  --bs-btn-color: #fff;
  --bs-btn-border-color: #1F7A3D;
  --bs-btn-hover-bg: #186231;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: #186231;
  --bs-btn-active-bg: #135228;
  --bs-btn-active-color: #fff;
  --bs-btn-active-border-color: #135228;
}

.btn-danger,
[data-bs-theme="dark"] .btn-danger {
  --bs-btn-bg: #B3273E;
  --bs-btn-color: #fff;
  --bs-btn-border-color: #B3273E;
  --bs-btn-hover-bg: #951F33;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: #951F33;
  --bs-btn-active-bg: #7C1A2B;
  --bs-btn-active-color: #fff;
  --bs-btn-active-border-color: #7C1A2B;
}

.btn-outline-danger {
  --bs-btn-color: #B3273E;
  --bs-btn-border-color: #B3273E;
  --bs-btn-hover-bg: #B3273E;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: #B3273E;
}

.btn-outline-success {
  --bs-btn-color: #1F7A3D;
  --bs-btn-border-color: #1F7A3D;
  --bs-btn-hover-bg: #1F7A3D;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: #1F7A3D;
}

[data-bs-theme="dark"] .btn-outline-success {
  --bs-btn-color: #4EC27E;
  --bs-btn-border-color: #2E7D4C;
  --bs-btn-hover-bg: #1F7A3D;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: #1F7A3D;
}

[data-bs-theme="dark"] .btn-outline-danger {
  --bs-btn-color: #F2778A;
  --bs-btn-border-color: #C74B60;
  --bs-btn-hover-bg: #B3273E;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: #B3273E;
}

.btn-outline-light {
  --bs-btn-color: #E6EFF7;
  --bs-btn-border-color: rgba(230, 239, 247, .6);
  --bs-btn-hover-bg: rgba(255, 255, 255, .15);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: #E6EFF7;
}

/* Badge „neu"/„Admin" im Dark: dunkler Text auf Hellblau */
[data-bs-theme="dark"] .text-bg-primary {
  color: #071A2B !important;
}

/* ---------- Navbar ---------- */
/* Das <nav> trägt selbst data-bs-theme="dark" (helle Links) — die Hintergrund-
   farbe muss daher am Root-Theme hängen, nicht am lokalen Scope. */
.ll-navbar {
  background-color: var(--ll-navbar);
  box-shadow: 0 2px 12px rgba(6, 26, 46, .35);
}

:root[data-bs-theme="light"] .ll-navbar {
  background-color: #0A355E;
}

:root[data-bs-theme="dark"] .ll-navbar {
  background-color: #081C30;
}

.ll-navbar .navbar-toggler,
.ll-theme-toggle {
  min-width: 44px;
  min-height: 40px;
}

.ll-theme-toggle {
  color: rgba(255, 255, 255, .85);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: .5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .25rem .5rem;
}

.ll-theme-toggle:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .7);
}

[data-bs-theme="light"] .ll-icon-moon { display: none; }
[data-bs-theme="dark"] .ll-icon-sun { display: none; }

@media (max-width: 767.98px) {
  .ll-navbar .navbar-collapse {
    padding: .5rem 0;
    border-top: 1px solid rgba(255, 255, 255, .15);
    margin-top: .5rem;
  }

  .ll-navbar .nav-link {
    padding-top: .65rem;
    padding-bottom: .65rem;
  }
}

/* Wellenkante unter der Navbar (Farbe folgt Theme über background-color) */
header {
  position: relative;
}

header::after {
  content: "";
  display: block;
  height: 8px;
  margin-top: -1px;
  background-color: var(--ll-navbar);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M0 0h120v2c-10 0-10 4-20 4s-10-4-20-4-10 4-20 4-10-4-20-4-10 4-20 4S10 2 0 2Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-size: 120px 8px;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M0 0h120v2c-10 0-10 4-20 4s-10-4-20-4-10 4-20 4-10-4-20-4-10 4-20 4S10 2 0 2Z'/%3E%3C/svg%3E");
  mask-repeat: repeat-x;
  mask-size: 120px 8px;
}

header .navbar.mb-3 {
  margin-bottom: 0 !important;
}

header {
  margin-bottom: 1rem;
}

/* ---------- Dashboard-Kacheln ---------- */
.ll-tile {
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--ll-marine), var(--ll-accent)) 1;
}

.ll-due {
  color: var(--ll-accent-strong);
}

.ll-tile .fs-4 {
  font-weight: 650;
}

.ll-tile .ll-due-num {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
}

.ll-tile .progress {
  border-radius: 4px;
}

@media (max-width: 575.98px) {
  .ll-tile .btn-primary {
    flex: 1 1 auto;
  }
}

/* ---------- Lernkarte ---------- */
.ll-answers .btn {
  min-height: 3rem;
  padding: .75rem 1rem;
  font-size: 1.125rem;
  line-height: 1.45;
  border-radius: .75rem;
  border-width: 2px;
}

/* Aufgedeckte Antwort: gleiche Lesegröße wie die Frage */
.ll-answer-text {
  font-size: 1.25rem;
  line-height: 1.55;
  max-width: 42rem;
}

/* Antwortübersicht im Feedback (richtig/gewählt) gut lesbar */
.ll-review .list-group-item {
  font-size: 1.125rem;
  line-height: 1.45;
}

/* Feedback: dritter Wahrnehmungskanal (Randmarkierung) neben Farbe + ✓/✗ */
.list-group-item-success {
  border-left: 4px solid var(--bs-success);
}

.list-group-item-danger {
  border-left: 4px solid rgb(var(--bs-danger-rgb));
}

.ll-feedback-footer,
.ll-rate-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
}

.ll-feedback-footer {
  background: var(--bs-card-bg, #fff);
}

.ll-rate-bar {
  padding: .5rem 0 calc(.5rem + env(safe-area-inset-bottom));
  /* Verlauf zur Kartenfarbe — die Leiste liegt innerhalb der Karte */
  background: linear-gradient(transparent, var(--bs-card-bg) 35%);
}

/* Selbstbewertung: bewusst zurückhaltend (Outline statt Vollfläche),
   aber Touch-tauglich und auf Handybreite gleich verteilt. */
.ll-rate-bar .btn {
  flex: 1 1 0;
  max-width: 13rem;
  min-height: 3rem;
  border-width: 2px;
  font-weight: 500;
}

@media (max-width: 575.98px) {
  .ll-feedback-footer .btn {
    width: 100%;
    min-height: 3rem;
  }

  #reveal-button {
    width: 100%;
    min-height: 3rem;
  }
}

/* ---------- Prüfungsbogen ---------- */
.ll-exam-head {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: var(--bs-body-bg);
  padding: .5rem 0;
  margin-bottom: .5rem !important;
}

#countdown {
  font-weight: 600;
}

@keyframes ll-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

@media (prefers-reduced-motion: no-preference) {
  #countdown.text-danger {
    animation: ll-pulse 2s infinite;
  }
}

.ll-exam-nav {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: .25rem;
  scrollbar-width: thin;
  padding-bottom: .25rem;
}

.ll-exam-nav .btn {
  min-width: 2.75rem;
  min-height: 2.75rem;
  flex: 0 0 auto;
}

@media (min-width: 768px) {
  .ll-exam-nav {
    flex-wrap: wrap;
    overflow: visible;
  }
}

/* Bild-Vorschau in Fragenliste und Prüfungsergebnis */
.ll-thumb {
  display: block;
  max-height: 180px;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  background: #fff; /* Alt-Grafiken haben teils transparente Ränder */
}

/* ---------- Listen / Pagination / Tabellen ---------- */
.pagination .page-link {
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Formulare ---------- */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}