/* Fahrora/Jendritzki Theme Modes
   Quick-Fix 2026-05-18: bessere Lesbarkeit im Dark Mode plus Light/System. */

:root {
  --readable-bg: #0f1218;
  --readable-bg-2: #121722;
  --readable-surface: #1a202b;
  --readable-surface-2: #222936;
  --readable-surface-3: #2a3342;
  --readable-line: rgba(228, 234, 244, 0.14);
  --readable-line-strong: rgba(228, 234, 244, 0.23);
  --readable-text: #f6f8fc;
  --readable-text-2: #d5dbe6;
  --readable-muted: #a8b2c2;
  --readable-faint: #7c8798;
  --readable-accent: #7b74ff;
  --readable-accent-hi: #9b96ff;
  --readable-accent-soft: rgba(123, 116, 255, 0.17);
  --readable-info: #8bd7ff;
  --readable-ok: #65d98f;
  --readable-warn: #f4c95d;
  --readable-err: #ff7a7a;
}

html[data-theme="dark"] body[data-page="office"],
html[data-theme="dark"] body[data-page="instructor-portal"] {
  --ink-deep: var(--readable-bg);
  --ink-soft: var(--readable-bg-2);
  --ink-rise: var(--readable-surface);
  --ink-rise-2: var(--readable-surface-2);
  --ink-line: var(--readable-line);
  --ink-line-2: var(--readable-line-strong);
  --ink-line-3: rgba(228, 234, 244, 0.32);
  --bone: var(--readable-text);
  --bone-soft: var(--readable-text-2);
  --bone-muted: var(--readable-muted);
  --bone-faint: var(--readable-faint);
  --accent: var(--readable-accent);
  --accent-hi: var(--readable-accent-hi);
  --accent-soft: var(--readable-accent-soft);
  --accent-line: rgba(123, 116, 255, 0.42);
  --accent-ink: #fff;
  --bg-black: var(--readable-bg);
  --surface: var(--readable-bg-2);
  --surface-2: var(--readable-surface);
  --surface-3: var(--readable-surface-2);
  --border: var(--readable-line);
  --border-2: var(--readable-line-strong);
  --fg: var(--readable-text);
  --fg-2: var(--readable-text-2);
  --muted: var(--readable-muted);
  --jk-pink: var(--readable-accent);
  --jk-cyan: var(--readable-info);
  --jk-green: var(--readable-ok);
  --jk-yellow: var(--readable-warn);
  --jk-orange: var(--readable-err);
  --jk-red: var(--readable-err);
  --jk-white: var(--readable-text);
  --jk-text: var(--readable-text-2);
  --jk-text-primary: var(--readable-text);
  --jk-text-secondary: var(--readable-text-2);
  --jk-text-muted: var(--readable-muted);
  --jk-border: var(--readable-line);
  --jk-border-strong: var(--readable-line-strong);
  --jk-card: var(--readable-surface);
  --jk-card-hover: var(--readable-surface-2);
}

html[data-theme="dark"] body[data-page="office"] {
  --op-bg: #0f1218;
  --op-bg-2: #121722;
  --op-surface: rgba(26, 32, 43, 0.97);
  --op-surface-2: rgba(34, 41, 54, 0.95);
  --op-surface-3: rgba(42, 51, 66, 0.92);
  --op-line: var(--readable-line);
  --op-line-2: var(--readable-line-strong);
  --op-text: var(--readable-text);
  --op-muted: var(--readable-muted);
  --op-faint: var(--readable-faint);
  --op-stripe: var(--readable-accent);
  --op-stripe-hi: var(--readable-accent-hi);
  --op-cyan: var(--readable-info);
  --op-green: var(--readable-ok);
  --op-red: var(--readable-err);
  --op-warn: var(--readable-warn);
}

html[data-theme="dark"] body[data-page="office"] .topbar,
html[data-theme="dark"] body[data-page="office"] .sidebar,
html[data-theme="dark"] body[data-page="instructor-portal"] .topbar,
html[data-theme="dark"] body[data-page="instructor-portal"] .sidebar {
  background-color: rgba(17, 22, 31, 0.96);
}

html[data-theme="dark"] body[data-page="office"] .muted,
html[data-theme="dark"] body[data-page="instructor-portal"] .muted,
html[data-theme="dark"] body[data-page="office"] small,
html[data-theme="dark"] body[data-page="instructor-portal"] small {
  color: var(--readable-muted) !important;
}

html[data-theme="dark"] body[data-page="office"] input,
html[data-theme="dark"] body[data-page="office"] select,
html[data-theme="dark"] body[data-page="office"] textarea,
html[data-theme="dark"] body[data-page="instructor-portal"] input,
html[data-theme="dark"] body[data-page="instructor-portal"] select,
html[data-theme="dark"] body[data-page="instructor-portal"] textarea {
  color: var(--readable-text) !important;
  background-color: rgba(246, 248, 252, 0.07) !important;
  border-color: var(--readable-line-strong) !important;
}

html[data-theme="dark"] body[data-page="office"] input::placeholder,
html[data-theme="dark"] body[data-page="office"] textarea::placeholder,
html[data-theme="dark"] body[data-page="instructor-portal"] input::placeholder,
html[data-theme="dark"] body[data-page="instructor-portal"] textarea::placeholder {
  color: var(--readable-faint) !important;
}

html[data-theme="dark"] body[data-page="office"] #login-overlay form {
  background: var(--readable-surface) !important;
  border: 1px solid var(--readable-line-strong);
  color: var(--readable-text) !important;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  white-space: nowrap;
  flex: 0 0 auto;
}

.theme-toggle::before {
  content: "◐";
  font-size: 14px;
  line-height: 1;
}

body[data-page="instructor-portal"] .auth-theme-toggle {
  width: 100%;
  margin: 14px 0 4px;
}

/* Light Mode ------------------------------------------------------ */
html[data-theme="light"] body[data-page="office"],
html[data-theme="light"] body[data-page="instructor-portal"] {
  color-scheme: light;
  --ink-deep: #f6f8fc;
  --ink-soft: #ffffff;
  --ink-rise: #ffffff;
  --ink-rise-2: #edf2f8;
  --ink-line: #dce3ee;
  --ink-line-2: #cbd5e1;
  --ink-line-3: #b8c4d4;
  --bone: #121826;
  --bone-soft: #334155;
  --bone-muted: #64748b;
  --bone-faint: #94a3b8;
  --accent: #5855e8;
  --accent-hi: #4542d0;
  --accent-soft: rgba(88, 85, 232, 0.10);
  --accent-line: rgba(88, 85, 232, 0.26);
  --accent-ink: #ffffff;
  --ok: #148847;
  --warn: #9a6700;
  --err: #c62828;
  --info: #1769aa;
  --ok-soft: rgba(20, 136, 71, 0.10);
  --warn-soft: rgba(154, 103, 0, 0.10);
  --err-soft: rgba(198, 40, 40, 0.10);
  --info-soft: rgba(23, 105, 170, 0.10);
  --bg-black: #f6f8fc;
  --surface: #ffffff;
  --surface-2: #f0f4fa;
  --surface-3: #e5ebf4;
  --border: #dce3ee;
  --border-2: #cbd5e1;
  --fg: #121826;
  --fg-2: #334155;
  --muted: #64748b;
  --jk-pink: #5855e8;
  --jk-cyan: #1769aa;
  --jk-green: #148847;
  --jk-yellow: #9a6700;
  --jk-orange: #c6532b;
  --jk-red: #c62828;
  --jk-dark: #ffffff;
  --jk-darker: #f6f8fc;
  --jk-card: #ffffff;
  --jk-card-hover: #f0f4fa;
  --jk-border: #dce3ee;
  --jk-border-strong: #cbd5e1;
  --jk-white: #121826;
  --jk-text: #334155;
  --jk-text-primary: #121826;
  --jk-text-secondary: #334155;
  --jk-text-muted: #64748b;
  --jk-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
  --jk-shadow: 0 12px 32px rgba(15, 23, 42, 0.10);
  --jk-shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.14);
  background: #f6f8fc !important;
  color: #121826 !important;
}

html[data-theme="light"] body[data-page="office"] {
  --op-bg: #f6f8fc;
  --op-bg-2: #edf2f8;
  --op-surface: rgba(255, 255, 255, 0.98);
  --op-surface-2: rgba(247, 250, 253, 0.98);
  --op-surface-3: rgba(237, 242, 248, 0.98);
  --op-line: #dce3ee;
  --op-line-2: #cbd5e1;
  --op-text: #121826;
  --op-muted: #64748b;
  --op-faint: #94a3b8;
  --op-stripe: #5855e8;
  --op-stripe-hi: #4542d0;
  --op-cyan: #1769aa;
  --op-green: #148847;
  --op-red: #c62828;
  --op-warn: #9a6700;
}

html[data-theme="light"] body[data-page="office"] .sidebar,
html[data-theme="light"] body[data-page="instructor-portal"] .sidebar {
  background: linear-gradient(180deg, #ffffff, #f3f6fb) !important;
  border-color: #dce3ee !important;
  box-shadow: 8px 0 28px rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] body[data-page="office"] .main,
html[data-theme="light"] body[data-page="instructor-portal"] #main {
  background: transparent !important;
}

html[data-theme="light"] body[data-page="office"] .topbar,
html[data-theme="light"] body[data-page="instructor-portal"] .topbar {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: #dce3ee !important;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] body[data-page="office"] .card,
html[data-theme="light"] body[data-page="office"] .panel-card,
html[data-theme="light"] body[data-page="office"] .admin-card,
html[data-theme="light"] body[data-page="office"] .training-card,
html[data-theme="light"] body[data-page="office"] .theory-card,
html[data-theme="light"] body[data-page="office"] .admin-detail,
html[data-theme="light"] body[data-page="office"] .acc-card,
html[data-theme="light"] body[data-page="instructor-portal"] .focus-card,
html[data-theme="light"] body[data-page="instructor-portal"] .me-card,
html[data-theme="light"] body[data-page="instructor-portal"] .day-toolbar,
html[data-theme="light"] body[data-page="instructor-portal"] .slots,
html[data-theme="light"] body[data-page="instructor-portal"] .sheet,
html[data-theme="light"] body[data-page="instructor-portal"] .modal-card {
  background: #ffffff !important;
  border-color: #dce3ee !important;
  color: #121826 !important;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] body[data-page="office"] table.data-table,
html[data-theme="light"] body[data-page="office"] .office-tabs,
html[data-theme="light"] body[data-page="office"] .search-results,
html[data-theme="light"] body[data-page="office"] .students-list,
html[data-theme="light"] body[data-page="instructor-portal"] .search-list {
  background: #ffffff !important;
  border-color: #dce3ee !important;
}

html[data-theme="light"] body[data-page="office"] .data-table thead {
  background: #edf2f8 !important;
}

html[data-theme="light"] body[data-page="office"] .data-table th,
html[data-theme="light"] body[data-page="office"] .data-table td {
  border-color: #e2e8f0 !important;
  color: #121826 !important;
}

html[data-theme="light"] body[data-page="office"] .nav-link,
html[data-theme="light"] body[data-page="office"] .office-tab,
html[data-theme="light"] body[data-page="instructor-portal"] .nav-item,
html[data-theme="light"] body[data-page="instructor-portal"] .ghost-btn,
html[data-theme="light"] body[data-page="instructor-portal"] .ghost {
  color: #334155 !important;
}

html[data-theme="light"] body[data-page="office"] .nav-link:hover,
html[data-theme="light"] body[data-page="office"] .nav-link.active,
html[data-theme="light"] body[data-page="office"] .office-tab:hover,
html[data-theme="light"] body[data-page="office"] .office-tab.active,
html[data-theme="light"] body[data-page="instructor-portal"] .nav-item:hover,
html[data-theme="light"] body[data-page="instructor-portal"] .nav-item.active {
  background: rgba(88, 85, 232, 0.10) !important;
  color: #121826 !important;
}

html[data-theme="light"] body[data-page="office"] button.ghost-button,
html[data-theme="light"] body[data-page="instructor-portal"] button.ghost,
html[data-theme="light"] body[data-page="instructor-portal"] .ghost-btn,
html[data-theme="light"] body[data-page="instructor-portal"] .icon-btn {
  background: #ffffff !important;
  border: 1px solid #dce3ee !important;
  color: #121826 !important;
}

html[data-theme="light"] body[data-page="office"] button.primary-button,
html[data-theme="light"] body[data-page="instructor-portal"] button.primary,
html[data-theme="light"] body[data-page="instructor-portal"] .modal-foot button.primary {
  background: linear-gradient(135deg, #5855e8, #4542d0) !important;
  border-color: #5855e8 !important;
  color: #ffffff !important;
  text-shadow: none !important;
}

html[data-theme="light"] body[data-page="office"] input,
html[data-theme="light"] body[data-page="office"] select,
html[data-theme="light"] body[data-page="office"] textarea,
html[data-theme="light"] body[data-page="instructor-portal"] input,
html[data-theme="light"] body[data-page="instructor-portal"] select,
html[data-theme="light"] body[data-page="instructor-portal"] textarea {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #121826 !important;
}

html[data-theme="light"] body[data-page="office"] input::placeholder,
html[data-theme="light"] body[data-page="office"] textarea::placeholder,
html[data-theme="light"] body[data-page="instructor-portal"] input::placeholder,
html[data-theme="light"] body[data-page="instructor-portal"] textarea::placeholder {
  color: #94a3b8 !important;
}

html[data-theme="light"] body[data-page="instructor-portal"] .auth-screen,
html[data-theme="light"] body[data-page="instructor-portal"] .native-intro {
  background:
    radial-gradient(circle at 18% 16%, rgba(88, 85, 232, 0.12), transparent 34%),
    radial-gradient(circle at 82% 80%, rgba(23, 105, 170, 0.10), transparent 36%),
    linear-gradient(145deg, #f6f8fc 0%, #ffffff 100%) !important;
}

html[data-theme="light"] body[data-page="instructor-portal"] .auth-card,
html[data-theme="light"] body[data-page="instructor-portal"] .native-intro-card {
  background: #ffffff !important;
  border-color: #dce3ee !important;
  color: #121826 !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] body[data-page="instructor-portal"] .slot,
html[data-theme="light"] body[data-page="instructor-portal"] .sheet-action,
html[data-theme="light"] body[data-page="instructor-portal"] .modal-head,
html[data-theme="light"] body[data-page="instructor-portal"] .modal-foot {
  border-color: #e2e8f0 !important;
}

html[data-theme="light"] body[data-page="instructor-portal"] .slot .slot-time {
  background: #edf2f8 !important;
  color: #475569 !important;
  border-color: #dce3ee !important;
}

html[data-theme="light"] body[data-page="instructor-portal"] .slot.has-appt,
html[data-theme="light"] body[data-page="office"] .cal-event,
html[data-theme="light"] body[data-page="office"] .cal-appt {
  background: rgba(23, 105, 170, 0.08) !important;
  color: #121826 !important;
}

html[data-theme="light"] body[data-page="instructor-portal"] .sheet-overlay,
html[data-theme="light"] body[data-page="instructor-portal"] .modal-overlay,
html[data-theme="light"] body[data-page="office"] #login-overlay {
  background: rgba(15, 23, 42, 0.30) !important;
}

html[data-theme="light"] body[data-page="office"] .muted,
html[data-theme="light"] body[data-page="instructor-portal"] .muted,
html[data-theme="light"] body[data-page="office"] small,
html[data-theme="light"] body[data-page="instructor-portal"] small {
  color: #64748b !important;
}

html[data-theme="light"] body[data-page="office"] #login-overlay form {
  background: #ffffff !important;
  border: 1px solid #dce3ee;
  color: #121826 !important;
}

html[data-theme="light"] body[data-page="office"] a,
html[data-theme="light"] body[data-page="instructor-portal"] a,
html[data-theme="light"] body[data-page="office"] code {
  color: #4542d0;
}

@media (max-width: 760px) {
  body[data-page="instructor-portal"] .topbar .theme-toggle {
    min-height: 32px;
    padding: 7px 9px;
    font-size: 0.72rem;
  }

  body[data-page="instructor-portal"] .topbar {
    gap: 8px;
  }

  body[data-page="instructor-portal"] #topbar-title {
    min-width: 0;
  }
}

@media (max-width: 720px) {
  body[data-page="office"] .topbar-actions {
    flex-wrap: wrap;
  }

  body[data-page="office"] .theme-toggle {
    order: -1;
  }
}

/* 2026-05-20: Kontrast-Guard fuer Leistung-anlegen/Bearbeiten-Dialoge.
   Einige Browser erben in Modalen alte Verlauf-/Hover-Textfarben. Die Texte
   muessen ohne Mouseover lesbar bleiben. */
body[data-page="instructor-portal"] .modal-card :where(button, input, select, textarea, label, small, span, div),
body[data-page="office"] .modal-card :where(button, input, select, textarea, label, small, span, div) {
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}

html[data-theme="dark"] body[data-page="instructor-portal"] .wiz-list button,
html[data-theme="dark"] body[data-page="instructor-portal"] .sheet-action,
html[data-theme="dark"] body[data-page="office"] .modal-body button:not(.primary-button):not(.primary),
html[data-theme="dark"] body[data-page="office"] .modal-foot button:not(.primary-button):not(.primary),
html[data-theme="dark"] body[data-page="office"] button.ghost-button,
html[data-theme="dark"] body[data-page="office"] button.secondary-button {
  color: var(--readable-text) !important;
  background: rgba(246, 248, 252, 0.075) !important;
  border-color: var(--readable-line-strong) !important;
}

html[data-theme="dark"] body[data-page="instructor-portal"] .wiz-list button:hover,
html[data-theme="dark"] body[data-page="instructor-portal"] .wiz-list button:focus-visible,
html[data-theme="dark"] body[data-page="instructor-portal"] .wiz-list button.is-selected,
html[data-theme="dark"] body[data-page="instructor-portal"] .sheet-action:hover,
html[data-theme="dark"] body[data-page="instructor-portal"] .sheet-action:focus-visible,
html[data-theme="dark"] body[data-page="office"] .modal-body button:not(.primary-button):not(.primary):hover,
html[data-theme="dark"] body[data-page="office"] .modal-body button:not(.primary-button):not(.primary):focus-visible,
html[data-theme="dark"] body[data-page="office"] .modal-foot button:not(.primary-button):not(.primary):hover,
html[data-theme="dark"] body[data-page="office"] .modal-foot button:not(.primary-button):not(.primary):focus-visible {
  color: #ffffff !important;
  background: linear-gradient(180deg, rgba(123, 116, 255, 0.22), rgba(246, 248, 252, 0.09)) !important;
  border-color: rgba(155, 150, 255, 0.62) !important;
}

html[data-theme="dark"] body[data-page="instructor-portal"] .field input,
html[data-theme="dark"] body[data-page="instructor-portal"] .field select,
html[data-theme="dark"] body[data-page="instructor-portal"] .field textarea,
html[data-theme="dark"] body[data-page="instructor-portal"] .field option,
html[data-theme="dark"] body[data-page="office"] .form-row input,
html[data-theme="dark"] body[data-page="office"] .form-row select,
html[data-theme="dark"] body[data-page="office"] .form-row textarea,
html[data-theme="dark"] body[data-page="office"] .form-row option,
html[data-theme="dark"] body[data-page="office"] .modal-body input,
html[data-theme="dark"] body[data-page="office"] .modal-body select,
html[data-theme="dark"] body[data-page="office"] .modal-body textarea,
html[data-theme="dark"] body[data-page="office"] .modal-body option {
  color: var(--readable-text) !important;
  background-color: var(--readable-surface-2) !important;
  border-color: var(--readable-line-strong) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] body[data-page="instructor-portal"] .field label,
html[data-theme="dark"] body[data-page="instructor-portal"] .wiz-progress,
html[data-theme="dark"] body[data-page="office"] .form-row label,
html[data-theme="dark"] body[data-page="office"] .modal-body label {
  color: var(--readable-text-2) !important;
}

html[data-theme="light"] body[data-page="instructor-portal"] .wiz-list button,
html[data-theme="light"] body[data-page="instructor-portal"] .sheet-action,
html[data-theme="light"] body[data-page="office"] .modal-body button:not(.primary-button):not(.primary),
html[data-theme="light"] body[data-page="office"] .modal-foot button:not(.primary-button):not(.primary),
html[data-theme="light"] body[data-page="office"] button.ghost-button,
html[data-theme="light"] body[data-page="office"] button.secondary-button {
  color: #121826 !important;
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
}

html[data-theme="light"] body[data-page="instructor-portal"] .wiz-list button:hover,
html[data-theme="light"] body[data-page="instructor-portal"] .wiz-list button:focus-visible,
html[data-theme="light"] body[data-page="instructor-portal"] .wiz-list button.is-selected,
html[data-theme="light"] body[data-page="instructor-portal"] .sheet-action:hover,
html[data-theme="light"] body[data-page="instructor-portal"] .sheet-action:focus-visible,
html[data-theme="light"] body[data-page="office"] .modal-body button:not(.primary-button):not(.primary):hover,
html[data-theme="light"] body[data-page="office"] .modal-body button:not(.primary-button):not(.primary):focus-visible,
html[data-theme="light"] body[data-page="office"] .modal-foot button:not(.primary-button):not(.primary):hover,
html[data-theme="light"] body[data-page="office"] .modal-foot button:not(.primary-button):not(.primary):focus-visible {
  color: #0f172a !important;
  background: #eef2ff !important;
  border-color: #5855e8 !important;
}

html[data-theme="light"] body[data-page="instructor-portal"] .field input,
html[data-theme="light"] body[data-page="instructor-portal"] .field select,
html[data-theme="light"] body[data-page="instructor-portal"] .field textarea,
html[data-theme="light"] body[data-page="instructor-portal"] .field option,
html[data-theme="light"] body[data-page="office"] .form-row input,
html[data-theme="light"] body[data-page="office"] .form-row select,
html[data-theme="light"] body[data-page="office"] .form-row textarea,
html[data-theme="light"] body[data-page="office"] .form-row option,
html[data-theme="light"] body[data-page="office"] .modal-body input,
html[data-theme="light"] body[data-page="office"] .modal-body select,
html[data-theme="light"] body[data-page="office"] .modal-body textarea,
html[data-theme="light"] body[data-page="office"] .modal-body option {
  color: #121826 !important;
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  opacity: 1 !important;
}

html[data-theme="light"] body[data-page="instructor-portal"] .field label,
html[data-theme="light"] body[data-page="instructor-portal"] .wiz-progress,
html[data-theme="light"] body[data-page="office"] .form-row label,
html[data-theme="light"] body[data-page="office"] .modal-body label {
  color: #475569 !important;
}