/* 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;
}

/* Office Light Mode: spaet geladene Legacy-Regeln duerfen keine dunklen
   Flaechen oder kontrastarmen Akzenttexte zurueckbringen. */
html[data-theme="light"] body[data-page="office"] {
  --bone-muted: #475569;
  --muted: #475569;
  --jk-text-muted: #475569;
  --op-muted: #475569;
  --op-faint: #64748b;
  --jk-purple: #4542d0;
  --surface-1: #ffffff;
}

html[data-theme="light"] body[data-page="office"] #login-overlay button[type="submit"],
html[data-theme="light"] body[data-page="office"] .office-nav-mode button[aria-pressed="true"],
html[data-theme="light"] body[data-page="office"] .brand-mark {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: #4542d0 !important;
}

html[data-theme="light"] body[data-page="office"] .office-nav-mode,
html[data-theme="light"] body[data-page="office"] .office-global-search,
html[data-theme="light"] body[data-page="office"] .nav-group-panel,
html[data-theme="light"] body[data-page="office"] .upload-card,
html[data-theme="light"] body[data-page="office"] .service-actionbar,
html[data-theme="light"] body[data-page="office"] .doc-training-block,
html[data-theme="light"] body[data-page="office"] #msg-thread-list,
html[data-theme="light"] body[data-page="office"] #msg-thread-detail {
  color: #121826 !important;
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] body[data-page="office"] .office-global-search,
html[data-theme="light"] body[data-page="office"] .office-global-search span,
html[data-theme="light"] body[data-page="office"] .office-nav-mode button,
html[data-theme="light"] body[data-page="office"] .sidebar-label,
html[data-theme="light"] body[data-page="office"] .brand-kicker,
html[data-theme="light"] body[data-page="office"] .brand-subline,
html[data-theme="light"] body[data-page="office"] .muted,
html[data-theme="light"] body[data-page="office"] small {
  color: #475569 !important;
}

html[data-theme="light"] body[data-page="office"] .office-nav-mode button[aria-pressed="true"] {
  color: #ffffff !important;
}

html[data-theme="light"] body[data-page="office"] .cal-grid {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
}

html[data-theme="light"] body[data-page="office"] .cal-grid .cal-head,
html[data-theme="light"] body[data-page="office"] .cal-grid .cal-time {
  color: #334155 !important;
  background: #edf2f8 !important;
  border-color: #cbd5e1 !important;
}

html[data-theme="light"] body[data-page="office"] .cal-grid .cal-cell,
html[data-theme="light"] body[data-page="office"] .waitlist-stats > div,
html[data-theme="light"] body[data-page="office"] .waitlist-mini-stat,
html[data-theme="light"] body[data-page="office"] .student-info-popup section {
  color: #121826 !important;
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html[data-theme="light"] body[data-page="office"] .doc-card-action {
  color: #121826 !important;
  background: #f8fafc !important;
  border-color: #c7d2fe !important;
}

html[data-theme="light"] body[data-page="office"] .doc-card-action strong {
  color: #121826 !important;
}

html[data-theme="light"] body[data-page="office"] .data-table tbody tr:hover td {
  background: #f5f3ff !important;
}

/* Override the instructor palette as a unit, including later legacy surfaces. */
html[data-theme="light"] body[data-page="instructor-portal"] {
  --ip-bg: #f4f6f8;
  --ip-panel: #ffffff;
  --ip-panel-2: #edf2f8;
  --ip-card: #ffffff;
  --ip-line: #cbd5e1;
  --ip-line-strong: #94a3b8;
  --ip-text: #121826;
  --ip-muted: #475569;
  --ip-dim: #596579;
  --ip-accent: #4542d0;
  --ip-accent-2: #4542d0;
  --ip-info: #005c75;
  --ip-ok: #166534;
  --ip-warn: #854d0e;
  --ip-danger: #b42318;
}
html[data-theme="light"] body[data-page="instructor-portal"] :is(.absence-list, .absence-row, .hours-list, .hours-summary, .students-list, .detail-card),
html[data-theme="light"] body[data-page="office"] :is(.office-toolbar, .cal-filters, .modal-card, .modal-head, .modal-body, .modal-foot) {
  color: #121826 !important;
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
}
html[data-theme="light"] body[data-page="instructor-portal"] ::placeholder,
html[data-theme="light"] body[data-page="office"] ::placeholder {
  color: #596579 !important;
  opacity: 1;
}