/*
 * h_da Corporate Design für Study Monitoring
 * Farben: extrahiert aus docs/design/CD-Dokumentation.pdf (h_da Farbenpool)
 * Schrift: HDADINOff (h_da Hausschrift), abgelegt unter core/static/core/fonts/
 */

/* ---------------------------------------------------------------------------
 * TomSelect ↔ Tabler-Brücke
 * Die vendorierte tom-select.bootstrap5-Theme referenziert Bootstraps --bs-*-
 * Variablen. Tabler benennt diese in --tblr-* um, sodass --bs-* sonst
 * undefiniert bleiben → das Widget rendert blass/unvollständig. Hier mappen wir
 * die von der Theme genutzten Variablen auf Tablers Werte (mit Fallback).
 * ------------------------------------------------------------------------- */
:root {
    /* Formular-Hintergrund (weiß), wie Tablers .form-control — NICHT der
       gräuliche Seiten-Hintergrund (--tblr-body-bg). */
    --bs-body-bg: var(--tblr-bg-forms, #ffffff);
    --bs-body-color: var(--tblr-body-color, #1a2234);
    --bs-border-color: var(--tblr-border-color, #dadfe5);
    --bs-border-color-translucent: var(--tblr-border-color-translucent, rgba(0, 0, 0, 0.1));
    --bs-border-width: var(--tblr-border-width, 1px);
    --bs-border-radius: var(--tblr-border-radius, 4px);
    --bs-border-radius-lg: var(--tblr-border-radius-lg, 6px);
    --bs-border-radius-sm: var(--tblr-border-radius-sm, 3px);
    --bs-box-shadow-inset: var(--tblr-box-shadow-inset, inset 0 1px 1px rgba(0, 0, 0, 0.075));
    --bs-secondary-bg: var(--tblr-secondary-bg, #f5f7fb);
    --bs-tertiary-bg: var(--tblr-tertiary-bg, #f0f2f5);
    --bs-form-invalid-color: var(--tblr-danger, #d63939);
    --bs-form-valid-color: var(--tblr-success, #2fb344);
}

/* ---------------------------------------------------------------------------
 * Hausschrift HDADINOff
 * ------------------------------------------------------------------------- */
@font-face {
    font-family: "HDA DIN";
    src: url("../fonts/HDADINOff-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "HDA DIN";
    src: url("../fonts/HDADINOff-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "HDA DIN";
    src: url("../fonts/HDADINOff-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---------------------------------------------------------------------------
 * Farbvariablen (h_da Farbenpool → Tabler/Bootstrap)
 * ------------------------------------------------------------------------- */
:root {
    --hda-orange:      #E98011;  /* h_da Orange 2081 */
    --hda-orange-dark: #CF6F0C;
    --hda-bordeaux:    #5D0613;  /* h_da Orange 9901 */
    --hda-red:         #AC1B21;  /* h_da Rot 5005 */
    --hda-yellow:      #FCCB06;  /* h_da Gelb 1051 */
    /* Primär-/Grundfarbe der App = h_da Grün (Chat-Grün) */
    --hda-green:       #9DC41E;
    --hda-green-dark:  #719E3E;
    --hda-green-rgb:   157, 196, 30;   /* für rgba()-Tints, damit sie mitfärben */
    --hda-orange-rgb:  233, 128, 17;
    --hda-blue:        #519CDB;  /* h_da Blau 1169 */
    --hda-blue-dark:   #102D5C;  /* h_da Blau 8190 */
    --hda-purple:      #A04AA3;  /* h_da Violett 2197 */
    --hda-anthracite:  #231F20;  /* h_da Schwarz */

    /* Hausschrift als Standard-Schriftfamilie */
    --hda-font-sans: "HDA DIN", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --tblr-font-sans-serif: var(--hda-font-sans);
    --bs-body-font-family: var(--hda-font-sans);

    /* Tabler-Primärfarbe = h_da Grün (Chat-Grün) */
    --tblr-primary: #9DC41E;
    --tblr-primary-rgb: 157, 196, 30;
    --tblr-primary-darken: #719E3E;

    /* Namensfarben (steuern u. a. die bg-*-lt Badges) auf h_da mappen */
    --tblr-red: #AC1B21;        --tblr-red-rgb: 172, 27, 33;
    --tblr-orange: #E98011;     --tblr-orange-rgb: 233, 128, 17;
    --tblr-yellow: #FCCB06;     --tblr-yellow-rgb: 252, 203, 6;
    --tblr-green: #7BAD26;      --tblr-green-rgb: 123, 173, 38;
    --tblr-blue: #519CDB;       --tblr-blue-rgb: 81, 156, 219;
    --tblr-purple: #A04AA3;     --tblr-purple-rgb: 160, 74, 163;

    /* Links */
    --tblr-link-color: #719E3E;
    --tblr-link-color-rgb: 113, 158, 62;
    --bs-link-color: #719E3E;
}

/* ---------------------------------------------------------------------------
 * Mitarbeitenden-Modus (eingeloggt): die Primärfarbe kippt von Grün auf Orange.
 * Die Klasse .staff-theme wird serverseitig auf <html> gesetzt, wenn is_staff.
 * Weil die gesamte Chrome (Buttons, Links, Nav-Aktiv, Tabs, Brand-Akzent,
 * Form-Fokus) über --hda-green / --tblr-primary läuft, genügt ein Remap der
 * Marken-Variablen — alle Ableitungen färben automatisch mit.
 * ------------------------------------------------------------------------- */
:root.staff-theme:not(.theme-contrast) {
    --hda-green:       #E98011;
    --hda-green-dark:  #CF6F0C;
    --hda-green-rgb:   233, 128, 17;

    --tblr-primary:        #E98011;
    --tblr-primary-rgb:    233, 128, 17;
    --tblr-primary-darken: #CF6F0C;

    --tblr-link-color:     #CF6F0C;
    --tblr-link-color-rgb: 207, 111, 12;
    --bs-link-color:       #CF6F0C;
}

/* Hausschrift greifbar machen (Tabler setzt font-family teils fix auf body) */
body {
    font-family: var(--hda-font-sans);
}

/* ---------------------------------------------------------------------------
 * Komponenten (kompilierte Tabler-Werte explizit überschreiben)
 * ------------------------------------------------------------------------- */
.btn-primary {
    --tblr-btn-color: #fff;
    --tblr-btn-bg: var(--hda-green);
    --tblr-btn-border-color: var(--hda-green);
    --tblr-btn-hover-bg: var(--hda-green-dark);
    --tblr-btn-hover-border-color: var(--hda-green-dark);
    --tblr-btn-active-bg: var(--hda-green-dark);
    --tblr-btn-active-border-color: var(--hda-green-dark);
    background-color: var(--hda-green);
    border-color: var(--hda-green);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--hda-green-dark);
    border-color: var(--hda-green-dark);
    color: #fff;
}

/* Icon→Text-Abstand (app-weite Regel): jeder Text-Button trägt ein führendes
   Tabler-Icon, gefolgt von einem kleinen Abstand von 0.40em. Tabler-.btn ist
   inline-flex mit White-space-Collapsing, d. h. ein bloßes Leerzeichen im Markup
   wird am Flex-Item-Rand getrimmt — der Abstand muss daher als margin am Icon
   gesetzt werden. Icon-only-Buttons (.btn-icon) sind ausgenommen. */
.btn:not(.btn-icon) > .ti:first-child { margin-inline-end: 0.40em; }

/* Buttons flach halten: Tablers Ruhe-Schatten (--tblr-shadow-button) erzeugt eine
   dünne dunkle Akzentlinie am unteren Button-Rand — die wollen wir nicht. Nur den
   Ruhe-Zustand entschärfen; der Fokus-Rahmen läuft über --tblr-btn-focus-box-shadow
   und bleibt für die Barrierefreiheit erhalten. */
.btn { --tblr-btn-box-shadow: none; box-shadow: none; }

.text-primary { color: var(--hda-green) !important; }
.bg-primary { background-color: var(--hda-green) !important; }
a { color: var(--hda-green-dark); }
a:hover { color: var(--hda-green); }

/* Navbar: heller h_da-Look. Kein durchgehender Trennstrich, damit der
   aktive Menüpunkt nicht mit einer Randlinie kollidiert — die Aktiv-Kachel
   markiert den Zustand eigenständig. */
.navbar {
    /* Header dauerhaft sichtbar am oberen Fensterrand (app-weit, beide Layouts). */
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: #fff;
    border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
    box-shadow: 0 1px 2px rgba(35, 31, 32, 0.04);
}
.navbar-brand .fw-bold { color: var(--hda-anthracite); }
.navbar-brand .hda-accent { color: var(--hda-green); }

/* Menüpunkte: dezente, abgerundete Hover-/Aktiv-Fläche statt Unterstreichung */
.navbar .navbar-nav { gap: 0.25rem; }
.navbar .navbar-nav .nav-link {
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    transition: background-color 0.15s ease, color 0.15s ease;
}
/* Tablers native Aktiv-Unterstreichung (::after) abschalten — die Kachel ersetzt sie */
.navbar .navbar-nav .nav-link::after { display: none !important; }
.navbar .navbar-nav .nav-link:hover {
    background-color: rgba(var(--hda-green-rgb), 0.08);   /* Primärfarbe, sehr dezent */
    color: var(--hda-green-dark);
}
.navbar .nav-item.active .nav-link {
    background-color: rgba(var(--hda-green-rgb), 0.12);
    color: var(--hda-green-dark);
    font-weight: 600;
}

/* Tabs im Verwaltungsbereich */
.nav-tabs .nav-link.active {
    color: var(--hda-green);
    border-bottom-color: var(--hda-green);
}

/* Fokus-/Formzustände */
.form-control:focus,
.form-select:focus {
    border-color: var(--hda-green);
    box-shadow: 0 0 0 0.25rem rgba(var(--hda-green-rgb), 0.25);
}

/* App-weiter Tooltip-Hinweis: ein unterstrichener Begriff, der beim Hovern eine
   gestylte dunkle Box mit Erklärtext zeigt. Nutzung:
     <span class="hint" data-tooltip="Erklärung">Begriff</span>
   (``.org-unit-tooltip`` ist das Alt-Alias aus dem Lifecycle-Modal — gleiche Optik). */
.hint,
.org-unit-tooltip {
    cursor: help;
    border-bottom: 1px dotted var(--tblr-border-color, #adb5bd);
}
.hint:hover::after,
.org-unit-tooltip:hover::after {
    content: attr(data-tooltip);
    position: fixed;
    background: var(--hda-anthracite, #231F20);
    color: #fff;
    padding: .4rem .6rem;
    border-radius: 6px;
    font-size: .72rem;
    white-space: nowrap;
    z-index: 9999;
    transform: translateY(1.5rem);
    pointer-events: none;
}

/* Oberen Hero-Abstand app-weit angleichen: Seiten im Lifecycle-Layout
   (lifecycle/base.html) rendern eine <section class="content-header">, die
   leer (padding 15px oben+unten = 30px) den Hero ~10px tiefer schiebt als das
   Tabler-Layout (layouts/base.html mit .page-body margin-top = 1.25rem). Ist der
   content-header leer, klappen wir ihn ein und geben dem Content denselben
   oberen Abstand wie Tabler → identische Hero-Oberkante auf allen Seiten. */
.content-header:empty { padding: 0; }
.content-header:empty + .content { padding-top: var(--tblr-content-padding, 1.25rem); }

/* ---------------------------------------------------------------------------
   Studienfortschrittsplanung — Semester-Grid
   Horizontal scrollbares Raster; Module als CP-proportionale Blöcke.
   --------------------------------------------------------------------------- */
.planning-grid {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    align-items: stretch;
}
.planning-semester {
    flex: 1 0 150px;
    min-width: 150px;
    display: flex;
    flex-direction: column;
}
.planning-semester-head {
    text-align: center;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--hda-green);
    margin-bottom: 0.5rem;
}
.planning-courses {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-height: 420px;
}
.planning-course {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.5rem 0.4rem 1.1rem;
    border: 1px solid var(--tblr-border-color, #e6e7e9);
    border-radius: 6px;
    background: #fff;
    font-size: 0.85rem;
    line-height: 1.15;
}
.planning-course-slug {
    font-weight: 600;
}
.planning-course-cp {
    position: absolute;
    bottom: 3px;
    right: 6px;
    font-size: 0.65rem;
    color: var(--tblr-muted, #6c757d);
}
.planning-course-attempts {
    margin-top: 0.25rem;
    font-size: 0.6rem;
}
/* Statusfarben (dezente Flächen, an h_da-Farbenpool angelehnt) */
.planning-course-done {
    background: rgba(123, 173, 38, 0.16);   /* h_da Grün */
    border-color: rgba(123, 173, 38, 0.5);
}
.planning-course-pvl {
    background: rgba(81, 156, 219, 0.16);    /* h_da Blau */
    border-color: rgba(81, 156, 219, 0.5);
}
.planning-course-open {
    background: #fff;
}

/* ---------------------------------------------------------------------------
   Lifecycle-Hub — Phasen-Spalten & Einträge (Struktur aus der Lifecycle-App,
   im h_da-/Tabler-Theme dieser App gehalten).
   --------------------------------------------------------------------------- */
.lc-phase-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.75rem;
}
.lc-phase-col-header {
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    background: var(--tblr-bg-surface-secondary, #f4f5f7);
    border-bottom: 2px solid var(--hda-green);
    margin-bottom: 0.5rem;
}
.lc-phase-entries {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.lc-entry {
    cursor: pointer;
}
.lc-entry .card-body {
    padding: 0.625rem 0.75rem;
}
.lc-type {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
    color: var(--hda-green);
}
.lc-entry-name {
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 0.15rem;
}
.lc-entry-desc {
    font-size: 0.8rem;
    color: var(--tblr-secondary, #6c757d);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 0.15rem;
}
.lc-phase-empty {
    font-size: 0.75rem;
    color: #bbb;
    text-align: center;
    padding: 0.75rem;
    font-style: italic;
}

/* ---------------------------------------------------------------------------
   Chatbot (studierendenseitig) — Struktur aus der Lifecycle-Bot-App,
   im h_da-/Tabler-Theme dieser App.
   --------------------------------------------------------------------------- */
.chat-window {
    height: 60vh;
    min-height: 340px;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.chat-msg {
    max-width: 78%;
    padding: 0.6rem 0.85rem;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.4;
    white-space: pre-line;
}
.chat-msg-bot {
    align-self: flex-start;
    background: var(--tblr-bg-surface-secondary, #f4f5f7);
    border-bottom-left-radius: 3px;
}
.chat-msg-user {
    align-self: flex-end;
    background: rgba(157, 196, 30, 0.14); /* h_da Grün, dezent */
    border-bottom-right-radius: 3px;
}
.chat-welcome {
    text-align: center;
    color: var(--tblr-secondary, #6c757d);
    padding: 1.5rem 1rem 0.5rem;
}
.chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1rem;
}
.chat-suggestion {
    text-align: left;
    border: 1px solid var(--tblr-border-color, #e6e7e9);
    background: #fff;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.chat-suggestion:hover {
    border-color: var(--hda-green);
    background: rgba(157, 196, 30, 0.06);
}

/* Chat: zweispaltiges Layout (Chat + didaktisches Debug-Panel) */
.chat-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0.75rem;
    align-items: start;
}
@media (max-width: 992px) {
    .chat-layout { grid-template-columns: 1fr; }
}
.debug-context-bar {
    height: 0.5rem;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 0.5rem;
}
.debug-context-fill {
    height: 100%;
    width: 0;
    background: var(--hda-green);
    transition: width 0.3s ease;
}
.debug-log {
    max-height: 34vh;
    overflow-y: auto;
}
.debug-log-entry {
    font-size: 0.78rem;
    border-left: 2px solid var(--hda-green);
    padding: 0.3rem 0.5rem;
    margin-bottom: 0.35rem;
    background: var(--tblr-bg-surface-secondary, #f4f5f7);
    border-radius: 4px;
    line-height: 1.35;
}
.debug-help {
    cursor: pointer;
    color: var(--hda-green);
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Umschalter + Kontrast-Theme (Schwarz auf Weiß)
   Die Klasse .theme-contrast auf <html> aktiviert eine kontrastreiche
   Schwarz-Weiß-Ansicht als Barrierefreiheits-Hilfe für sehbeeinträchtigte
   Personen — KEIN Dark-Mode. Reines Weiß als Grund, reines Schwarz für
   Text und Rahmen, keine Markenfarben, unterstrichene Links, kräftige Ränder.
   Umgesetzt durch Überschreiben der Tabler-/h_da-CSS-Variablen; dadurch
   ziehen die Standard-Komponenten automatisch mit.
   --------------------------------------------------------------------------- */

/* Umschalt-Button */
.hda-theme-toggle {
    border: 0;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}
.hda-theme-toggle .icon { width: 1.4rem; height: 1.4rem; }
.theme-contrast .hda-theme-toggle { outline: 2px solid #000; outline-offset: 1px; }

/* Kern des Kontrast-Themes: Farbvariablen auf Schwarz/Weiß umbiegen.
   Markenfarben (Orange, Anthrazit, Grautöne) werden zu reinem Schwarz. */
.theme-contrast {
    --hda-green:       #000;   /* Primärfarbe im Kontrast-Modus */
    --hda-green-dark:  #000;
    --hda-orange:      #000;
    --hda-orange-dark: #000;
    --hda-anthracite:  #000;

    --tblr-primary: #000;
    --tblr-primary-rgb: 0, 0, 0;
    --tblr-primary-darken: #000;

    --tblr-body-bg: #fff;
    --tblr-body-color: #000;
    --tblr-secondary: #000;
    --tblr-muted: #000;
    --tblr-border-color: #000;
    --tblr-border-color-translucent: #000;
    --tblr-bg-surface: #fff;
    --tblr-bg-surface-secondary: #fff;
    --tblr-bg-surface-tertiary: #fff;

    --tblr-link-color: #000;
    --tblr-link-color-rgb: 0, 0, 0;

    --bs-body-bg: #fff;
    --bs-body-color: #000;
    --bs-link-color: #000;

    background-color: #fff;
    color: #000;
}

/* Grundflächen hart auf Weiß/Schwarz ziehen (auch dort, wo Tabler feste
   Farbwerte statt Variablen verwendet). */
.theme-contrast body,
.theme-contrast .page,
.theme-contrast .page-wrapper,
.theme-contrast .card,
.theme-contrast .navbar,
.theme-contrast .dropdown-menu,
.theme-contrast .table { background-color: #fff; color: #000; }

.theme-contrast .text-muted,
.theme-contrast .text-secondary,
.theme-contrast .small,
.theme-contrast small { color: #000 !important; }

/* Kräftige, durchgehend schwarze Ränder für klare Abgrenzung */
.theme-contrast .card,
.theme-contrast .dropdown-menu,
.theme-contrast .table td,
.theme-contrast .table th,
.theme-contrast .form-control,
.theme-contrast .form-select,
.theme-contrast .btn { border: 2px solid #000; }
.theme-contrast .navbar,
.theme-contrast .page-header { border-bottom: 2px solid #000; }

/* Links immer unterstrichen und schwarz */
.theme-contrast a,
.theme-contrast .nav-link,
.theme-contrast .navbar-brand .hda-accent { color: #000 !important; }
.theme-contrast a { text-decoration: underline; }
.theme-contrast .navbar-brand .fw-bold { color: #000; }

/* Primär-Buttons invertiert: schwarze Fläche, weißer Text, klarer Fokus */
.theme-contrast .btn-primary {
    --tblr-btn-color: #fff;
    --tblr-btn-bg: #000;
    --tblr-btn-border-color: #000;
    --tblr-btn-hover-color: #000;
    --tblr-btn-hover-bg: #fff;
    --tblr-btn-hover-border-color: #000;
    color: #fff;
    background-color: #000;
    border-color: #000;
}
.theme-contrast .btn-primary:hover { color: #000; background-color: #fff; }
.theme-contrast .btn:focus-visible,
.theme-contrast a:focus-visible { outline: 3px solid #000; outline-offset: 2px; }

/* Navigation: aktiver/gehoverter Zustand über Fläche statt Farbe deutlich machen */
.theme-contrast .navbar .navbar-nav .nav-link:hover {
    background-color: #000;
    color: #fff !important;
}
.theme-contrast .navbar .nav-item.active .nav-link {
    background-color: #000;
    color: #fff !important;
}

/* Studienplanungsraster: Zustände über Rahmenstärke/Muster statt Farbe */
.theme-contrast .planning-course,
.theme-contrast .planning-course-open,
.theme-contrast .planning-course-done,
.theme-contrast .planning-course-pvl {
    background: #fff;
    border: 2px solid #000;
    color: #000;
}
.theme-contrast .planning-course-done { border-width: 4px; }
.theme-contrast .planning-course-pvl { border-style: dashed; }

/* Chat */
.theme-contrast .chat-suggestion {
    background: #fff;
    border: 2px solid #000;
    color: #000;
}
.theme-contrast .chat-suggestion:hover { background: #000; color: #fff; }
.theme-contrast .chat-msg-user { background: #fff; border: 2px solid #000; }
.theme-contrast .debug-context-bar { background: #fff; border: 2px solid #000; }

/* ---------------------------------------------------------------------------
   Struktur-Editor (Studienabschnitt → Semester → Modul + Leistungsnummern)
   Split-View; portiert aus dem Referenz-monitoring-editor, an Tabler/h_da
   und den Dark-Mode angepasst.
   --------------------------------------------------------------------------- */
.split-view {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.left-panel {
    flex: 1;
    min-width: 0;
    max-height: calc(100vh - 15rem);
    overflow-y: auto;
}
.right-panel {
    width: 300px;
    flex: 0 0 300px;
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 15rem);
    overflow-y: auto;
    background: var(--tblr-bg-surface, #fff);
    border: 1px solid var(--tblr-border-color, #e6e7e9);
    border-radius: 8px;
    padding: 0.75rem;
}
@media (max-width: 992px) {
    .split-view { flex-direction: column; }
    .right-panel { width: 100%; flex-basis: auto; position: static; }
}
.unassigned-header {
    font-weight: 600;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--hda-green);
    margin-bottom: 0.5rem;
}

/* Studienabschnitt */
.structure-section {
    border: 1px solid var(--tblr-border-color, #e6e7e9);
    border-radius: 8px;
    margin-bottom: 1rem;
    background: var(--tblr-bg-surface, #fff);
}
.structure-section-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 2px solid var(--hda-green);
}
.structure-section-head .section-name { max-width: 22rem; }
.section-actions { display: flex; gap: 0.35rem; margin-left: auto; }

/* Semester */
.semester-section {
    border: 1px solid var(--tblr-border-color, #e6e7e9);
    border-radius: 6px;
    margin: 0.6rem 0.75rem;
    overflow: hidden;
}
.semester-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: var(--tblr-bg-surface-secondary, #f4f5f7);
    border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
}
.semester-title-input { max-width: 16rem; font-weight: 600; }
.semester-actions { display: flex; align-items: center; margin-left: auto; }
.semester-body { padding: 0.6rem; }
.semester-body.drag-over { background: rgba(157, 196, 30, 0.06); }

/* Modulkarte */
.module-card {
    border: 1px solid var(--tblr-border-color, #e6e7e9);
    border-radius: 6px;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    background: var(--tblr-bg-surface, #fff);
    cursor: move;
}
.module-card.dragging { opacity: 0.5; border-color: var(--hda-green); }
.module-card.drag-over-top { border-top: 3px solid var(--hda-green); }
.module-card.drag-over-bottom { border-bottom: 3px solid var(--hda-green); }
.module-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.module-name-input { font-weight: 600; }
.module-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.module-actions .cp-input { width: 6rem; }
.required-toggle { white-space: nowrap; font-size: 0.8rem; }

/* PL-/PVL-Zonen */
.leistung-zones { display: flex; gap: 0.5rem; }
.leistung-zone {
    flex: 1;
    min-height: 3rem;
    padding: 0.4rem;
    border: 2px dashed var(--tblr-border-color, #e6e7e9);
    border-radius: 6px;
    background: var(--tblr-bg-surface-secondary, #f8f9fa);
}
.leistung-zone.drag-over { border-color: var(--hda-green); background: rgba(157, 196, 30, 0.08); }
.leistung-zone-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--tblr-secondary, #6c757d);
    margin-bottom: 0.3rem;
}

/* Leistungs-Badge */
.leistung-badge {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    margin: 0.15rem 0.15rem 0 0;
    border-radius: 4px;
    font-size: 0.78rem;
    font-family: var(--tblr-font-monospace, monospace);
    color: #fff;
    cursor: move;
}
.leistung-badge.dragging { opacity: 0.5; }
.leistung-badge.in-pl  { background: var(--hda-green); }
.leistung-badge.in-pvl { background: var(--hda-blue); }
.leistung-badge.unassigned { background: var(--tblr-secondary, #6c757d); }

.add-module-btn-container {
    text-align: center;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--tblr-border-color, #e6e7e9);
}

/* Nummern-Pool */
#pool-container.drag-over {
    outline: 2px dashed var(--hda-green);
    outline-offset: 2px;
    border-radius: 6px;
}
.pool-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.35rem;
}
.pool-drag {
    cursor: grab;
    color: var(--tblr-secondary, #6c757d);
    padding: 0 0.15rem;
    user-select: none;
}
.pool-item .pool-num { width: 5.5rem; flex: 0 0 5.5rem; font-family: var(--tblr-font-monospace, monospace); }
.pool-item .pool-name { flex: 1; min-width: 0; }

/* Struktur-Editor im Kontrast-Theme */
.theme-contrast .right-panel,
.theme-contrast .structure-section,
.theme-contrast .module-card {
    background: #fff;
    border: 2px solid #000;
}
.theme-contrast .semester-header { background: #fff; border-bottom: 2px solid #000; }
.theme-contrast .leistung-zone { background: #fff; border: 2px solid #000; }

/* ---------------------------------------------------------------------------
   Interaktiver Studienplan (Studienplanung) — CP-proportionales Semester-Grid.
   Modulhöhe ∝ CP (Flexbox), native Drag&Drop-Zustände, leichtes Modal.
   --------------------------------------------------------------------------- */
.plan-grid {
    display: flex;
    gap: 0.5rem;
    overflow: hidden;           /* kein Scrollen — die Card wird stattdessen breiter */
    align-items: stretch;
}
.plan-semester {
    /* Spalten teilen sich die verfügbare Breite gleichmäßig (kein Scroll). */
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.plan-semester-head {
    border-bottom: 2px solid var(--hda-green);
    padding-bottom: 0.4rem;
    margin-bottom: 0.5rem;
}
/* Aktuelles Semester dezent hervorheben */
.plan-semester-current {
    background: rgba(157, 196, 30, 0.06);
    border-radius: 6px;
}
.plan-semester-current .plan-sem-code { color: var(--hda-green-dark); }
/* +/- Steuerspalten an den Enden (Semester hinzufügen/entfernen) */
.plan-control {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding-top: 0.1rem;
    align-self: flex-start;
}
.plan-ctl {
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    font-size: 1.1rem;
    line-height: 1;
    font-weight: 700;
}
.plan-courses {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    /* Nutzt die verfügbare vertikale Fläche (kein Innen-Scroll); Module teilen
       sie sich proportional zu ihren CP. */
    height: calc(100vh - 20rem);
    min-height: 460px;
}
.plan-course {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 2rem;
    padding: 0.35rem 0.4rem 1rem;
    border: 1px solid var(--tblr-border-color, #e6e7e9);
    border-radius: 6px;
    background: var(--tblr-bg-surface, #fff);
    font-size: 0.8rem;
    line-height: 1.1;
    cursor: move;
    overflow: hidden;
}
.plan-course-name { font-weight: 600; max-width: 100%; overflow: hidden; }
.plan-add-course { border-style: dashed; }

/* QR-Kachel (Planung teilen) — weißer Grund, damit in jedem Theme scanbar */
.qr-tile {
    flex: 0 0 auto;
    background: #fff;
    padding: 4px;
    border-radius: 6px;
    line-height: 0;
}
.qr-tile svg, .qr-tile img { display: block; width: 96px; height: 96px; }
.plan-course-cp { position: absolute; bottom: 2px; right: 5px; font-size: 0.62rem; color: var(--tblr-muted, #6c757d); }
.plan-course-attempts { margin-top: 0.2rem; font-size: 0.6rem; }
.plan-course-done { background: rgba(123, 173, 38, 0.16); border-color: rgba(123, 173, 38, 0.5); }
.plan-course-pvl  { background: rgba(81, 156, 219, 0.16); border-color: rgba(81, 156, 219, 0.5); }
.plan-course.dragging { opacity: 0.5; }
.plan-course.drag-over-top { border-top: 3px solid var(--hda-green); }
.plan-course.drag-over-bottom { border-bottom: 3px solid var(--hda-green); }
.plan-courses.drag-over { outline: 2px dashed var(--hda-green); outline-offset: 2px; border-radius: 6px; }
.plan-add-course { border-style: dashed; }

/* Leichtes eigenes Modal (unabhängig von Bootstrap-JS) */
.plan-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(35, 31, 32, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1080;
    padding: 1rem;
}
.plan-modal { width: 100%; max-width: 420px; margin: 0; }

/* Dark-Mode */
.theme-dark .plan-course { background: var(--tblr-bg-surface, #1a2332); border-color: var(--tblr-border-color, #2a3448); }
.theme-dark .plan-course-done { background: rgba(123, 173, 38, 0.24); }
.theme-dark .plan-course-pvl  { background: rgba(81, 156, 219, 0.24); }

/* Kontrast-Theme */
.theme-contrast .plan-course { background: #fff; border: 2px solid #000; color: #000; }
.theme-contrast .plan-course-done { background: #d7ecc0; }
.theme-contrast .plan-course-pvl  { background: #cfe4f6; }

/* ---------------------------------------------------------------------------
   Kompakte Hero-Variante (.portal-welcome--compact)
   Wird im eingeloggten Bereich (alle Arbeitsseiten außer dem Dashboard) an die
   portal-welcome-Box gehängt. Ziel: gleiche Breite, aber kleineres Icon/Bild/
   Text und spürbar weniger vertikale Höhe.
   Die portal-welcome-Defaults leben je Seite in einem eigenen <style>-Block mit
   gleicher Grundspezifität; darum überschreiben wir hier mit dem doppelten
   Klassen- bzw. Nachfahren-Selektor (höhere Spezifität) statt per !important.
   --------------------------------------------------------------------------- */
.portal-welcome.portal-welcome--compact {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}
.portal-welcome--compact .portal-welcome-head { margin-bottom: 0.5rem; }
.portal-welcome--compact .portal-welcome-icon {
    width: 46px; height: 46px; border-radius: 11px;
    box-shadow: 0 5px 14px rgba(var(--hda-green-rgb, 157, 196, 30), 0.28);
}
.portal-welcome--compact .portal-welcome-icon i { font-size: 1.4rem; }
.portal-welcome--compact h2 { font-size: 1.35rem; }
.portal-welcome--compact .portal-welcome-lead {
    font-size: 0.92rem; line-height: 1.45; margin-bottom: 0.75rem;
}
.portal-welcome--compact .portal-welcome-art { width: 190px; }

/* ---------------------------------------------------------------------------
   Hero-Kontext (.hero-context) — die „aktuell selektiert / zugeordnet"-Zeile
   im Hero, app-weit einheitlich. Label + Chips: read-only als <span> oder
   navigierbar als <a class="hero-context-chip">; für Pfade Chevron-Trenner
   (.hero-context-sep). Farben über die Marken-Variablen (kippen im Staff-Theme
   automatisch auf Orange). Einzige Quelle — nicht pro Seite nachbauen.
   --------------------------------------------------------------------------- */
.hero-context { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.hero-context-label {
    font-size: 0.9rem; font-weight: 600; color: var(--hda-anthracite, #231F20);
    display: inline-flex; align-items: center; gap: 0.35rem;
}
.hero-context-chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.82rem; font-weight: 600; padding: 0.2rem 0.7rem; border-radius: 999px;
    background: rgba(var(--hda-green-rgb, 157, 196, 30), 0.14);
    color: var(--hda-green-dark, #719E3E);
    text-decoration: none; transition: background .12s, color .12s;
}
a.hero-context-chip:hover {
    background: rgba(var(--hda-green-rgb, 157, 196, 30), 0.24);
    color: var(--hda-green-dark, #719E3E);
}
.hero-context-sep { color: var(--tblr-secondary, #97a0ad); font-size: 0.9rem; opacity: .7; }
.hero-context-none { font-size: 0.85rem; color: var(--tblr-secondary, #7a828b); font-style: italic; }

/* ---------------------------------------------------------------------------
   TomSelect – Clear-Button („×" zum Abwählen) für Single-Selects
   Aktiviert in select-widgets.js (plugins: ["clear_button"]). Das × soll nur
   erscheinen, wenn wirklich etwas gewählt ist, und links vom Dropdown-Pfeil
   sitzen (nicht darüber).
   --------------------------------------------------------------------------- */
.ts-wrapper.single .clear-button {
    position: absolute;
    top: 50%;
    right: 1.9rem;                 /* links vom Dropdown-Caret */
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--tblr-secondary, #667382);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity .12s, background .12s, color .12s;
}
.ts-wrapper.single .clear-button:hover {
    opacity: 1;
    color: var(--hda-green-dark, #719E3E);
    background: rgba(var(--hda-green-rgb, 157, 196, 30), 0.14);
}
/* Nur bei aktiver Auswahl zeigen (TomSelect setzt .has-items am Wrapper). */
.ts-wrapper.single:not(.has-items) .clear-button { display: none; }

/* ---------------------------------------------------------------------------
   Dual-List-Widget (.dual-list)
   Zwei-Spalten-Zuordnung per Verschieben (core/js/dual-list.js). Progressive
   Enhancement über ein <select multiple>; das native Select wird versteckt,
   bleibt aber für den Submit im DOM. Optik ausschließlich über --hda-*/Tabler.
   --------------------------------------------------------------------------- */
.dual-list__native { display: none !important; }

.dual-list {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.5rem;
    align-items: stretch;
}
.dual-list__pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--tblr-border-color, #dadfe5);
    border-radius: var(--bs-border-radius, 4px);
    background: var(--tblr-card-bg, #fff);
    overflow: hidden;
}
.dual-list__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(var(--hda-green-rgb, 157, 196, 30), 0.08);
    border-bottom: 1px solid var(--tblr-border-color, #dadfe5);
}
.dual-list__count {
    min-width: 1.4rem;
    padding: 0 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-align: center;
    color: var(--hda-green-dark, #719E3E);
    background: rgba(var(--hda-green-rgb, 157, 196, 30), 0.16);
    border-radius: 999px;
}
.dual-list__search { padding: 0.4rem 0.5rem; }
.dual-list__items {
    flex: 1 1 auto;
    min-height: 190px;
    max-height: 260px;
    overflow-y: auto;
    padding: 0.25rem;
}
.dual-list__item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.34rem 0.55rem;
    border: 0;
    border-radius: var(--bs-border-radius-sm, 3px);
    background: transparent;
    color: inherit;
    font-size: 0.86rem;
    line-height: 1.3;
    cursor: pointer;
}
.dual-list__item:hover { background: rgba(var(--hda-green-rgb, 157, 196, 30), 0.10); }
.dual-list__item.is-active {
    background: rgba(var(--hda-green-rgb, 157, 196, 30), 0.20);
    color: var(--hda-green-dark, #719E3E);
    font-weight: 600;
}
.dual-list__item.is-disabled { opacity: 0.45; cursor: not-allowed; }
.dual-list__empty {
    padding: 1rem 0.6rem;
    text-align: center;
    font-size: 0.82rem;
    color: var(--tblr-secondary, #667382);
}
.dual-list__controls {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.4rem;
}
.dual-list__ctl { flex: 0 0 auto; }

@media (max-width: 575.98px) {
    .dual-list { grid-template-columns: 1fr; }
    .dual-list__controls { flex-direction: row; justify-content: center; }
    .dual-list__controls .dual-list__ctl i { transform: rotate(90deg); }
}

/* Drag-&-Drop-Sortierung (sortable-rows.js): Greifpunkt + Zustand der gezogenen Zeile. */
.sortable-handle {
    cursor: grab;
    color: var(--hda-grey, #9aa4ad);
    touch-action: none;
}
.sortable-handle:active { cursor: grabbing; }
[data-sortable] .is-dragging {
    opacity: 0.55;
    background: rgba(var(--hda-green-rgb, 157, 196, 30), 0.10);
}