/**
 * MSVplus Brand-Farben (msvplus-brand.css)
 *
 * Diese Datei enthält alle Corporate-Identity-Farbanpassungen.
 * Wird NICHT geladen, wenn das barrierefreie Farbschema aktiv ist.
 *
 * Bei deaktiviertem Barrierefreiheits-Modus werden hier die
 * Bootstrap-Standardfarben durch die MSVplus-Brand-Farben ersetzt.
 */

/* ==========================================================================
   1. CSS-VARIABLEN - Brand-Farben
   ========================================================================== */

:root {
  /* MSVplus Corporate Identity Farben (Rot-Töne) */
  --brand: #b51a1a;
  --brand-text: #b51a1a;
  --brand-hover: #a11717;
  --brand-d1: #8f1414;
  --brand-d1-hover: #7d1212;

  /* Bootstrap Primary auf Brand-Farbe setzen */
  --bs-primary: var(--brand);

  /* Sidebar-Farben */
  --sb-color: #c2c4c5;
  --sb-bg: #363b3f;
  --sb-bg-f8: rgba(9, 15, 21, 0.8);
  --sb-sel: #25282b;

  /* Link-Farben auf Brand-Rot */
  --bs-link-color: var(--brand-text);
  --bs-link-hover-color: var(--brand-hover);
}

/* ==========================================================================
   2. TEXT-KLASSEN
   ========================================================================== */

.text-primary {
  color: var(--brand-text) !important;
}

/* Info-Text: Blau statt Bootstrap-Default-Cyan */
.text-info {
  color: #0d6efd !important;
}

/* ==========================================================================
   3. LINKS
   ========================================================================== */

a,
.nav .nav-link,
.page-link {
  color: var(--brand-text);
  text-decoration: none;
}

a:hover,
.page-link:hover {
  color: var(--brand-hover);
}

/* ==========================================================================
   4. HINTERGRÜNDE
   ========================================================================== */

.text-bg-primary {
  background-color: var(--brand) !important;
}

body {
  background-color: #eee;
}

.karte {
  background: white;
  border: 1px solid #ccc;
}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.btn-primary {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-hover);
  --bs-btn-active-bg: var(--brand-d1);
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand-hover);
  --bs-btn-active-border-color: var(--brand-hover);
  --bs-btn-disabled-border-color: var(--brand);
}

.btn-outline-primary {
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-hover);
  --bs-btn-active-bg: var(--brand);
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-border-color: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
}

.btn-inverse {
  --bs-btn-color: #fff;
  --bs-btn-bg: #212529;
  --bs-btn-border-color: #212529;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #424649;
  --bs-btn-hover-border-color: #373b3e;
  --bs-btn-focus-shadow-rgb: 66, 70, 73;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4d5154;
  --bs-btn-active-border-color: #373b3e;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #212529;
  --bs-btn-disabled-border-color: #212529;
}

/* Info-Button: Blau statt Bootstrap-Default-Cyan */
.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0d6efd;
  --bs-btn-border-color: #0d6efd;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0b5ed7;
  --bs-btn-hover-border-color: #0a58ca;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0a58ca;
  --bs-btn-active-border-color: #0a53be;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: #0d6efd;
}

.btn-outline-info {
  --bs-btn-color: #0d6efd;
  --bs-btn-border-color: #0d6efd;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0d6efd;
  --bs-btn-hover-border-color: #0d6efd;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0a58ca;
  --bs-btn-active-border-color: #0a53be;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #0d6efd;
  --bs-btn-disabled-border-color: #0d6efd;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--brand) !important;
}

/* ==========================================================================
   6. NAVIGATION
   ========================================================================== */

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--brand);
}

/* ==========================================================================
   7. FORMULAR-ELEMENTE
   ========================================================================== */

input[type="radio" i] {
  accent-color: var(--brand);
}

.form-check-input:checked {
  background-color: var(--brand);
  border: var(--brand);
}

.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--brand);
  border: var(--brand);
}

/* Validierungs-Farben */
.month-year-wrapper.is-valid,
.selectize-input.required.has-items {
  border-color: #198754;
}

.month-year-wrapper.is-valid:focus-within,
.selectize-input.required.has-items:focus-within {
  border-color: #198754;
  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

.month-year-wrapper.is-invalid,
.selectize-input.invalid {
  border-color: #dc3545;
}

.month-year-wrapper.is-invalid:focus-within,
.selectize-input.invalid:focus-within {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

.error-message {
  color: var(--bs-danger);
}

/* ==========================================================================
   8. SIDEBAR
   ========================================================================== */

.sidebar {
  background-color: var(--sb-bg);
  color: var(--sb-color);
}

.sidebar:hover,
.sidebar.static {
  background-color: var(--sb-bg-f8);
}

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

.sb-icon {
  color: white;
}

#sb-menubar {
  background-color: var(--sb-bg);
  color: white !important;
}

#sb-menubar:hover {
  background-color: var(--sb-sel);
}

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

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

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

/* ==========================================================================
   9. SCHNELLSUCHE
   ========================================================================== */

.selectedresult a,
.selectedresult {
  background-color: #aa0000;
  color: white;
}

.row-bg-hover:hover {
  background-color: var(--brand);
}

.row-bg-hover:hover a {
  color: white !important;
}

/* ==========================================================================
   10. STUNDENPLAN
   ========================================================================== */

/* Pauseninfo in Rot */
.stundenplan-header .pauseninfo {
  color: var(--bs-danger);
}

.stundenplan-header .standort-pauseninfo,
.stundenplan-header .spalte-pauseninfo {
  color: var(--bs-danger);
}

/* Status-Punkte */
.zeile3 .status_2:after {
  background: #0d6efd;
}

.zeile3 .status_4:after {
  background: var(--bs-danger);
}

.zeile3 .status_6:after {
  background: var(--bs-warning);
}

/* Pausen-Markierung */
.plankurs .pause {
  background-color: #E6000077;
  border-left: 5px solid #E60000;
}

/* Status-Badges */
.plankurs .neuinkurs {
  color: white;
  background-color: var(--bs-success);
}

.plankurs .kuendigung {
  color: white;
  background-color: var(--bs-danger);
}

.plankurs .wechsel {
  color: white;
  background-color: var(--bs-warning);
}

/* ==========================================================================
   11. DATATABLE
   ========================================================================== */

table.table.dataTable > tbody > tr.selected > * {
  box-shadow: inset 0 0 0 9999px var(--brand);
  color: white !important;
}

table.table.dataTable > tbody > tr.selected a {
  color: white !important;
}

/* ==========================================================================
   12. BELEGUNGSKARTEN
   ========================================================================== */

.belegung-card {
  background: #fff;
  border: 1px solid #dee2e6;
  border-left-width: 0.5rem; /* Breiter linker Rahmen für Status-Codierung */
}

.belegung-card.border-success {
  border-left-color: var(--bs-success) !important;
}

.belegung-card.border-warning {
  border-left-color: var(--bs-warning) !important;
}

.belegung-card.border-danger {
  border-left-color: var(--bs-danger) !important;
}

.belegung-card.border-secondary {
  border-left-color: var(--bs-secondary) !important;
}

.belegung-card.is-former {
  background: #f8f9fa;
}

/* Belegungstyp-Icons mit Farbverläufen */
.belegung-icon.kurs {
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}

.belegung-icon.prepaid {
  background: linear-gradient(135deg, #f39c12 0%, #d68910 100%);
}

.belegung-icon.trial {
  background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%);
}

.belegung-icon.special {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

/* Textfarben für Belegungstypen */
.kursbelegungcolor {
  color: #3498db;
}

.prepaidcolor {
  color: #f39c12;
}

.probestundencolor {
  color: #27ae60;
}

.sonderbelegungcolor {
  color: #e74c3c;
}

/* Status-Legende */
.belegungen-status-dot.active {
  background: var(--bs-success);
}

.belegungen-status-dot.pending {
  background: var(--bs-warning);
}

.belegungen-status-dot.trial {
  background: var(--bs-danger);
}

.belegungen-status-dot.unknown {
  background: var(--bs-secondary);
}

/* ==========================================================================
   13. DARK MODE
   ========================================================================== */

html[data-bs-theme="dark"] {
  --background-color: #333333;
  --brand: var(--brand-d1);
  --brand-hover: var(--brand-d1-hover);
  --brand-text: #ff4343;
}

html[data-bs-theme="dark"] body {
  background-color: #111;
}

html[data-bs-theme="dark"] .karte {
  background: var(--bs-body-bg);
  border: 1px solid #333;
}

html[data-bs-theme="dark"] .btn-primary {
  color: var(--bs-heading-color);
}

html[data-bs-theme="dark"] .btn-inverse {
  --bs-btn-color: #000;
  --bs-btn-bg: #f8f9fa;
  --bs-btn-border-color: #f8f9fa;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #d3d4d5;
  --bs-btn-hover-border-color: #c6c7c8;
  --bs-btn-focus-shadow-rgb: 211, 212, 213;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #c6c7c8;
  --bs-btn-active-border-color: #babbbc;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #f8f9fa;
  --bs-btn-disabled-border-color: #f8f9fa;
}

html[data-bs-theme="dark"] .sidebar,
html[data-bs-theme="dark"] #sb-menubar {
  background-color: #292c30;
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .sidebar:hover {
  background-color: #292c30f8;
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .sb-icon:not(.sb-display):hover,
html[data-bs-theme="dark"] .sidebar li:not(.sb-heading):hover,
html[data-bs-theme="dark"] .sb-hover:hover,
html[data-bs-theme="dark"] .sb-hover .active,
html[data-bs-theme="dark"] .sidebar .active {
  background-color: #454545;
}

html[data-bs-theme="dark"] .sb-heading,
html[data-bs-theme="dark"] .nav-header {
  border-top-color: rgba(255, 255, 255, 0.25);
}

html[data-bs-theme="dark"] .selectize-control,
html[data-bs-theme="dark"] .selectize-dropdown,
html[data-bs-theme="dark"] .selectize-dropdown .optgroup-header,
html[data-bs-theme="dark"] .selectize-input {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

html[data-bs-theme="dark"] .selectize-dropdown .active:not(.selected) {
  color: var(--bs-body-color);
  background-color: var(--brand-d1);
}

html[data-bs-theme="dark"] .selectize-control a.clear {
  color: var(--bs-btn-close-color);
  filter: var(--bs-btn-close-white-filter);
}

html[data-bs-theme="dark"] .selectize-input input,
html[data-bs-theme="dark"] .selectize-input.input-active {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color);
  border-color: var(--bs-border-color) !important;
}

html[data-bs-theme="dark"] .month-year-wrapper {
  background: #1a1a1a;
  border-color: #444;
  color: #fff;
}

html[data-bs-theme="dark"] .month-year-wrapper:focus-within {
  border-color: #0d6efd;
}

html[data-bs-theme="dark"] .separator {
  color: #aaa;
}

html[data-bs-theme="dark"] .month-input::placeholder,
html[data-bs-theme="dark"] .year-input::placeholder {
  color: #aaa;
}

html[data-bs-theme="dark"] .belegung-card {
  background: var(--bs-body-bg);
  border-color: #444;
  border-left-width: 0.5rem; /* Breiter linker Rahmen für Status-Codierung */
}

html[data-bs-theme="dark"] .belegung-card:hover {
  border-color: #666;
}

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

html[data-bs-theme="dark"] .belegung-toggle {
  background: #2a2d30;
}

html[data-bs-theme="dark"] .belegung-card.expanded .belegung-toggle {
  background: #36393c;
}

html[data-bs-theme="dark"] .belegungen-status-legend {
  color: #adb5bd;
}

html[data-bs-theme="dark"] .belegung-quick-access-buttons .msvplus-dokvor a {
  border-color: #adb5bd;
  color: #adb5bd;
}

html[data-bs-theme="dark"] .belegung-quick-access-buttons .msvplus-dokvor a:hover {
  background-color: #6c757d;
  border-color: #6c757d;
  color: #fff;
}