/* Shared compact UI layer for the new Betrieb-facing pages. */

/* Sticky-footer layout — moved here from footer.blade.php inline <style> so
   body flex is applied render-blocking (before first paint) and never causes
   a mid-render layout shift that makes the navbar jump in height. */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.wrapper {
    flex: 1 0 auto;
    min-height: 0;
}
.wrapper > .content,
.wrapper main.content {
    min-height: 0;
}

.pba-compact-page-wrap.container-fluid {
    padding-left: 2px;
    padding-right: 6px;
}

.pba-compact-page.message-hub {
    gap: 6px;
}

.pba-compact-page .message-hub-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
    margin-bottom: 12px;
}

.pba-compact-page .message-hub-hero h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1.2;
}

.pba-compact-page .message-hub-hero-copy {
    min-width: 0;
    flex: 1;
}

.pba-compact-page .message-hub-hero:has(.message-hub-hero-tabs:not(:empty)) {
    align-items: flex-end;
}

.pba-compact-page .message-hub-hero:has(.message-hub-hero-tabs:not(:empty)) h2 {
    margin-bottom: 12px;
}

.pba-compact-page .message-hub-hero-copy p {
    margin: 4px 0 0;
    font-size: 15px;
    line-height: 1.4;
}

.pba-compact-page .message-hub-hero-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}

.pba-compact-page .message-hub-hero-tabs {
    flex: 1;
    min-width: 0;
}

.pba-compact-page .message-hub-hero-tabs .nav {
    margin-bottom: 0 !important;
    flex-wrap: nowrap;
}

.pba-compact-page .message-hub-export-btn {
    flex-shrink: 0;
    white-space: nowrap;
    border-radius: 999px !important;
    padding: 0.3rem 1rem !important;
    font-size: 14px !important;
    font-weight: 600;
    letter-spacing: 0.01em;
    background: var(--pba-button, #0056ac) !important;
    color: var(--pba-button-contrast, #fff) !important;
    border: none !important;
    box-shadow: 0 2px 10px rgba(var(--pba-button-rgb, 28, 82, 36), 0.38), 0 1px 3px rgba(0, 0, 0, 0.1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.pba-compact-page .message-hub-export-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
    box-shadow: 0 4px 16px rgba(var(--pba-button-rgb, 28, 82, 36), 0.48), 0 2px 5px rgba(0, 0, 0, 0.1);
    color: var(--pba-button-contrast, #fff) !important;
}

.pba-compact-page .message-hub-export-btn:active {
    transform: translateY(0);
    filter: brightness(0.94);
    box-shadow: 0 1px 4px rgba(var(--pba-button-rgb, 28, 82, 36), 0.3);
}

.pba-compact-page .message-hub-help {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    background: #eef2f7;
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
    transition: transform 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.pba-compact-page .message-hub-help:hover {
    transform: translateY(-1px);
    background: #e2e8f0;
    color: #0f172a;
}

.pba-compact-page .message-hub-help:focus,
.pba-compact-page .message-hub-help:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06), 0 0 0 3px rgba(51, 65, 85, 0.12);
}

.pba-compact-page .message-hub-main {
    padding: 18px;
    border-radius: 12px;
}

.pba-compact-page .message-tab-nav {
    margin-bottom: 16px;
}

.pba-compact-page .dx-datagrid .badge {
    border-radius: 0.25rem;
}

/* Guided Tour (Shepherd) - PBA design system */

/* Eine eigene Farbe für die Führung, unabhängig vom Betrieb.

   Sie nahm frueher die Kopffarbe des Betriebs. Das hatte zwei Haken: die
   Fuehrung wechselte je Betrieb die Farbe, obwohl sie zur Anwendung gehoert
   und nicht zum Betrieb – und stand die Sprechblase neben Schaltflaechen in
   derselben Farbe, war ihr Knopf von deren Knoepfen nicht mehr zu
   unterscheiden. Blau ist neutral und in keinem Betrieb eine Hausfarbe.

   Auf :root und nicht am .wrapper: Shepherd haengt seine Sprechblase an
   document.body, also ausserhalb des .wrapper – von dort wird nichts geerbt,
   was nur dort steht. */
:root {
    --pba-tour-accent: #0056ac;
    --pba-tour-accent-rgb: 0, 86, 172;
    --pba-tour-accent-contrast: #ffffff;
}

/* Stacking context for Bootstrap modal compatibility:
   Bootstrap backdrop: 1050 → Shepherd overlay: 1051 → Bootstrap modal: 1055 → Shepherd tooltip: 1070
   With overlay at 1051 (below Bootstrap modal at 1055) the whole modal dialog is visible above the
   dim layer, so steps targeting modal elements work without hiding the modal's own content.
   The tooltip at 1070 sits above the modal (1055) and Bootstrap popovers (also 1070 — fine). */
.shepherd-modal-overlay-container {
    z-index: 1051 !important;
}

/* Der Dim-Layer nimmt von Haus aus jeden Klick ausserhalb des Ausschnitts an
   (shepherd.css: .shepherd-modal-is-visible path { pointer-events: all }).
   Fuer eine Fuehrung ist das zu viel: zeigt ein Schritt auf einen Knopf, der
   ein Dropdown oeffnet, liegt das Menue ausserhalb des Ausschnitts – es klappt
   auf, aber kein Eintrag laesst sich anklicken. Gefuehrt wird mit Rahmen und
   Abdunklung, gesperrt wird nichts. */
.shepherd-modal-overlay-container.shepherd-modal-is-visible path {
    pointer-events: none !important;
}

/* Und damit ein geoeffnetes Menue waehrend der Tour nicht ausgegraut wirkt:
   ueber die Abdunklung (1051), aber unter die Sprechblase (1070). Greift nur,
   wo kein Vorfahr einen eigenen Stapelkontext aufmacht – schadet sonst nicht. */
body:has(.shepherd-modal-overlay-container.shepherd-modal-is-visible) .dropdown-menu.show,
body:has(.shepherd-modal-overlay-container.shepherd-modal-is-visible) .show > .dropdown-menu {
    z-index: 1060;
}

.shepherd-element.pba-tour-step {
    max-width: min(440px, calc(100vw - 32px));
    border-radius: 16px !important;
    z-index: 1070 !important;
}

/* Zeitleiste ueber dem Hilfe-Knopf: Sprungmarken zu den Schritten der Tour.
   Im Stapel zwischen Abdunklung (1051) und Sprechblase (1070) – anklickbar,
   ohne die Sprechblase zu verdecken. */
.pba-tour-zeitleiste {
    position: fixed;
    right: 30px;
    /* Auf dem Platz des Hilfe-Knopfes, nicht darueber: waehrend der Fuehrung
       fuehrt der Knopf nirgends mehr hin, und die untere Ecke ist der Ort, an
       dem der Benutzer die Fuehrung ohnehin schon sucht. Der Knopf selbst tritt
       solange ab – siehe body.pba-tour-leiste-offen weiter unten. */
    bottom: 30px;
    z-index: 1069;
    width: min(380px, calc(100vw - 40px));
    padding: 12px 14px 10px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18);
    color: #0f172a;
    font-size: 13px;
}

.pba-tour-zeitleiste[hidden] {
    display: none;
}

/* Der Hilfe-Knopf liegt unter der Leiste und traegt zusaetzlich einen
   pulsierenden Ring – beides zusammen waere Unruhe ohne Zweck. Die Regel steht
   hier statt bei .help-fab (ui/main.blade.php), weil sie zur Leiste gehoert;
   sie ist die genauere und gewinnt trotz des spaeteren <style> im Dokument. */
body.pba-tour-leiste-offen .help-fab {
    display: none;
}

.pba-tour-zeitleiste-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.pba-tour-zeitleiste-name {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pba-tour-zeitleiste-schliessen {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: #6b7280;
    font-size: 20px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
}

.pba-tour-zeitleiste-schliessen:hover {
    color: #0f172a;
}

/* Einklappen ist kein Beenden: der Pfeil legt die Liste in den Streifen, das
   Kreuz daneben raeumt sie ganz weg. */
.pba-tour-zeitleiste-falten {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: #6b7280;
    line-height: 1;
    padding: 2px 4px;
    cursor: pointer;
}

.pba-tour-zeitleiste-falten:hover {
    color: #0f172a;
}

/* Als Rahmenstueck gezeichnet statt als Zeichen: ein ⌄ haengt an der Schrift
   des Betriebssystems und fehlt dort schon mal ganz. */
.pba-tour-zeitleiste-pfeil {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}

.pba-tour-zeitleiste-pfeil.ist-auf {
    transform: translateY(2px) rotate(-135deg);
}

/* Eingeklappt: nur noch ein Streifen mit dem laufenden Schritt. */
.pba-tour-zeitleiste-mini {
    display: none;
}

.pba-tour-zeitleiste.ist-eingeklappt {
    width: auto;
    max-width: min(380px, calc(100vw - 40px));
    padding: 6px 6px 6px 8px;
}

.pba-tour-zeitleiste.ist-eingeklappt .pba-tour-zeitleiste-kopf,
.pba-tour-zeitleiste.ist-eingeklappt .pba-tour-zeitleiste-schritte,
.pba-tour-zeitleiste.ist-eingeklappt .pba-tour-zeitleiste-hinweis {
    display: none;
}

.pba-tour-zeitleiste.ist-eingeklappt .pba-tour-zeitleiste-mini {
    display: flex;
    align-items: center;
    gap: 2px;
}

.pba-tour-zeitleiste-mini-oeffnen {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #0f172a;
    font-size: 13px;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}

.pba-tour-zeitleiste-mini-oeffnen:hover {
    background: rgba(var(--pba-tour-accent-rgb, 0, 86, 172), 0.08);
}

.pba-tour-zeitleiste-mini-nummer {
    background: var(--pba-tour-accent, #0056ac);
    border-color: var(--pba-tour-accent, #0056ac);
    color: var(--pba-tour-accent-contrast, #fff);
}

.pba-tour-zeitleiste-mini-nummer[hidden] {
    display: none;
}

.pba-tour-zeitleiste-mini-titel {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pba-tour-zeitleiste-mini-zaehler {
    flex: 0 0 auto;
    color: #6b7280;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

/* Der Schrittwechsel im Streifen: die Beschriftung ruckt kurz nach, die Nummer
   gibt einen Stups. Kurz genug, um nicht zu warten – lang genug, um zu sehen,
   dass sich etwas geaendert hat. */
@keyframes pba-tour-mini-wechsel {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: none; }
}

@keyframes pba-tour-mini-stups {
    0%   { transform: scale(0.7); }
    60%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}

.pba-tour-zeitleiste-mini-oeffnen.ist-gewechselt .pba-tour-zeitleiste-mini-titel,
.pba-tour-zeitleiste-mini-oeffnen.ist-gewechselt .pba-tour-zeitleiste-mini-zaehler {
    animation: pba-tour-mini-wechsel .24s ease-out both;
}

.pba-tour-zeitleiste-mini-oeffnen.ist-gewechselt .pba-tour-zeitleiste-mini-nummer {
    animation: pba-tour-mini-stups .28s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    .pba-tour-zeitleiste-mini-oeffnen.ist-gewechselt .pba-tour-zeitleiste-mini-titel,
    .pba-tour-zeitleiste-mini-oeffnen.ist-gewechselt .pba-tour-zeitleiste-mini-zaehler,
    .pba-tour-zeitleiste-mini-oeffnen.ist-gewechselt .pba-tour-zeitleiste-mini-nummer {
        animation: none;
    }
}

/* Liste statt Nummernreihe: der Titel sagt, wohin der Sprung fuehrt – bei
   zwanzig Schritten ist eine blosse Zahl keine Auskunft. */
.pba-tour-zeitleiste-schritte {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: min(46vh, 340px);
    overflow-y: auto;
    margin: 0 -6px;
    padding: 0 6px;
}

.pba-tour-zeitleiste-schritt {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    width: 100%;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #0f172a;
    font-size: 13px;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.pba-tour-zeitleiste-nummer {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(var(--pba-tour-accent-rgb, 0, 86, 172), 0.45);
    color: var(--pba-tour-accent, #0056ac);
    background: #ffffff;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.pba-tour-zeitleiste-titel {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 2px;
    overflow-wrap: anywhere;
}

.pba-tour-zeitleiste-schritt:hover {
    background: rgba(var(--pba-tour-accent-rgb, 0, 86, 172), 0.08);
}

.pba-tour-zeitleiste-schritt.ist-aktuell {
    background: rgba(var(--pba-tour-accent-rgb, 0, 86, 172), 0.12);
    border-color: rgba(var(--pba-tour-accent-rgb, 0, 86, 172), 0.35);
    font-weight: 600;
}

.pba-tour-zeitleiste-schritt.ist-aktuell .pba-tour-zeitleiste-nummer {
    background: var(--pba-tour-accent, #0056ac);
    color: var(--pba-tour-accent-contrast, #fff);
}

/* Wo die Tour zuletzt stand. Nur ein Punkt an der Zahl – die Marke soll nicht
   mit dem laufenden Schritt verwechselt werden. */
.pba-tour-zeitleiste-schritt.ist-zuletzt .pba-tour-zeitleiste-nummer {
    position: relative;
    border-color: var(--pba-tour-accent, #0056ac);
    border-width: 2px;
    line-height: 18px;
}

/* Ziel steht nicht auf der Seite – der Eintrag ist abgeschaltet (disabled),
   der Titel erklaert warum. Kein pointer-events:none: das wuerde auch den
   Hinweis im title unterdruecken. */
.pba-tour-zeitleiste-schritt.ist-gesperrt {
    color: #9ca3af;
    cursor: default;
}

.pba-tour-zeitleiste-schritt.ist-gesperrt:hover {
    background: transparent;
}

.pba-tour-zeitleiste-schritt.ist-gesperrt .pba-tour-zeitleiste-nummer {
    border-color: rgba(15, 23, 42, 0.18);
    border-style: dashed;
    background: #f3f4f6;
    color: #9ca3af;
}

.pba-tour-zeitleiste-hinweis {
    margin: 10px 0 0;
    font-size: 11.5px;
    line-height: 1.4;
    color: #6b7280;
}

@media (max-width: 575.98px) {
    .pba-tour-zeitleiste {
        right: 12px;
        left: 12px;
        width: auto;
        bottom: 16px;
    }

    /* Der Streifen nimmt nur, was er braucht – links bleibt die Seite frei. */
    .pba-tour-zeitleiste.ist-eingeklappt {
        left: auto;
        max-width: calc(100vw - 24px);
    }
}

.shepherd-element.pba-tour-step .shepherd-content {
    border-radius: 16px !important;
    border: 1px solid rgba(15, 23, 42, 0.13);
    background: #ffffff;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16);
    color: #0f172a;
    overflow: hidden;
}

.shepherd-element.pba-tour-step .shepherd-arrow {
    background-color: transparent !important;
}

/* Die Spitze ist ein um 45 Grad gedrehtes Quadrat. Ein Rahmen ringsum zog
   deshalb auch quer durch die Sprechblase, und der Schlagschatten legte einen
   Grauschleier darueber – die Spitze wirkte wie aus einem anderen Material als
   der Kasten, an dem sie sitzt. Erst ohne beides ist sie derselbe weisse
   Koerper; den Strich bekommen weiter unten nur die zwei Kanten, die nach
   aussen zeigen. */
.shepherd-element.pba-tour-step .shepherd-arrow:before {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.13) !important;
    box-shadow: none !important;
}

/* Die Innenmasse waren knapp: Titel, Text und Knoepfe standen dicht
   beieinander und am Rand. Eine Fuehrung wird gelesen, nicht ueberflogen –
   also mehr Luft, gleicher Seitenabstand ueberall. */
.shepherd-element.pba-tour-step .shepherd-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 12px;
    background: #ffffff;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.shepherd-element.pba-tour-step .shepherd-title {
    margin: 0;
    padding-top: 2px;
    font-size: 17px;
    line-height: 1.35;
    font-weight: 700;
    color: #0f172a;
    /* Shepherd setzt den Titel per innerHTML, und HTML zieht mehrere
       Leerzeichen zu einem zusammen. Im Editor steht der Titel in einem
       Eingabefeld, das jedes Zeichen zeigt - beide sollen dasselbe anzeigen.
       Nur der Titel: er kommt aus einer einzeiligen Eingabe. Im Text daneben
       stehen Aufzaehlungen mit Einrueckung, die hier sichtbar wuerde. */
    white-space: pre-wrap;
}

.shepherd-element.pba-tour-step .shepherd-text {
    padding: 16px 20px 18px;
    font-size: 14px;
    line-height: 1.6;
    color: #334155;
}

.shepherd-element.pba-tour-step .shepherd-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 20px 18px;
}

.shepherd-element.pba-tour-step .shepherd-cancel-icon {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 0;
    background: #eef2f7;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.shepherd-element.pba-tour-step .shepherd-cancel-icon:hover {
    background: #e2e8f0;
    color: #0f172a;
    transform: translateY(-1px);
}

.shepherd-element.pba-tour-step .shepherd-cancel-icon:focus,
.shepherd-element.pba-tour-step .shepherd-cancel-icon:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--pba-tour-accent-rgb, 0, 86, 172), 0.18);
}

.shepherd-element.pba-tour-step .shepherd-button,
.shepherd-element.pba-tour-step .pba-tour-btn {
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    min-height: 36px;
    padding: 10px 18px;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.shepherd-element.pba-tour-step .pba-tour-btn-primary,
.shepherd-element.pba-tour-step .shepherd-button:not(.pba-tour-btn-secondary) {
    background: var(--pba-tour-accent, #0056ac);
    border-color: var(--pba-tour-accent, #0056ac);
    color: var(--pba-tour-accent-contrast, #fff);
}

.shepherd-element.pba-tour-step .pba-tour-btn-primary:hover,
.shepherd-element.pba-tour-step .shepherd-button:not(.pba-tour-btn-secondary):hover {
    filter: brightness(0.96);
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(var(--pba-tour-accent-rgb, 0, 86, 172), 0.28);
}

.shepherd-element.pba-tour-step .pba-tour-btn-secondary {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.16);
    color: #334155;
}

.shepherd-element.pba-tour-step .pba-tour-btn-secondary:hover {
    background: #f8fafc;
    color: #0f172a;
    transform: translateY(-1px);
}

.shepherd-element.pba-tour-step .shepherd-button:focus,
.shepherd-element.pba-tour-step .shepherd-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--pba-tour-accent-rgb, 0, 86, 172), 0.2);
}

/* Abstand zwischen Ziel und Sprechblase.

   floating-ui setzt der Sprechblase left/top und laesst keinen Zwischenraum –
   ein offset steht in seiner Anordnung nicht drin, und popperOptions liest
   Shepherd seit Version 11 nicht mehr. Ein Rand an der zum Ziel gewandten
   Seite verschiebt den Kasten von seiner errechneten Stelle weg; die Spitze
   haengt am Kasten und wandert mit.

   Die Weite kommt als --pba-tour-abstand aus dem Schritt (tour-guide.js).
   data-popper-placement bleibt der Name des Merkmals, auch ohne Popper. */
.shepherd-element.pba-tour-step[data-popper-placement^='bottom'] {
    margin-top: var(--pba-tour-abstand, 20px);
}

.shepherd-element.pba-tour-step[data-popper-placement^='top'] {
    margin-top: calc(-1 * var(--pba-tour-abstand, 20px));
}

.shepherd-element.pba-tour-step[data-popper-placement^='right'] {
    margin-left: var(--pba-tour-abstand, 20px);
}

.shepherd-element.pba-tour-step[data-popper-placement^='left'] {
    margin-left: calc(-1 * var(--pba-tour-abstand, 20px));
}

/* Welche zwei Kanten nach aussen zeigen, haengt an der Drehung: rotate(45deg)
   schickt die urspruengliche Oberkante nach rechts oben, die rechte nach
   rechts unten, die untere nach links unten, die linke nach links oben. Die
   zwei zur Sprechblase hin gewandten Kanten verlieren ihren Strich, sonst
   liefe er quer durch den Kasten. */
.shepherd-element.pba-tour-step[data-popper-placement^='top'] .shepherd-arrow:before {
    border-top-color: transparent !important;
    border-left-color: transparent !important;
}

.shepherd-element.pba-tour-step[data-popper-placement^='bottom'] .shepherd-arrow:before {
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
}

.shepherd-element.pba-tour-step[data-popper-placement^='left'] .shepherd-arrow:before {
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
}

.shepherd-element.pba-tour-step[data-popper-placement^='right'] .shepherd-arrow:before {
    border-top-color: transparent !important;
    border-right-color: transparent !important;
}

/* Das Ziel der laufenden Etappe bekommt bewusst keinen eigenen Rahmen.

   Es hatte einen – erst weiss unter blau, dann eine Linie in der Hausfarbe –,
   und beide Male war er zu viel: die Abdunklung von Shepherd spart das Ziel
   ohnehin aus, es steht als einzige helle Stelle auf der verdunkelten Seite.
   Ein Ring obendrauf markiert nichts mehr, er verdoppelt nur. Was das Auge
   hinfuehrt, ist der Ausschnitt in der Abdunklung – die Weite dieses
   Ausschnitts steht als modalOverlayOpeningPadding in tour-guide.js.

   Die Klasse selbst bleibt: Shepherd braucht fuer highlightClass einen Namen,
   und der Konstruktor haelt sie aus den erzeugten Selektoren heraus. Wer eine
   einzelne Seite doch hervorheben will, hat hier den Anknuepfpunkt. */

body.pba-tour-preview-finished > *:not(#pba-tour-preview-complete-overlay) {
    filter: blur(5px);
    pointer-events: none !important;
    user-select: none;
}

#pba-tour-preview-complete-overlay {
    position: fixed;
    inset: 0;
    z-index: 200000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

#pba-tour-preview-complete-overlay.is-visible {
    display: flex;
}

.pba-tour-preview-complete-card {
    width: min(520px, calc(100vw - 36px));
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(2, 6, 23, 0.25);
    padding: 20px 20px 16px;
    text-align: center;
}

.pba-tour-preview-complete-card h3 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
}

.pba-tour-preview-complete-card p {
    margin: 0 0 14px;
    color: #475569;
    font-size: 14px;
    line-height: 1.45;
}

.pba-tour-preview-complete-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.pba-tour-preview-btn {
    border-radius: 8px;
    height: 36px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
}

.pba-tour-preview-btn-primary {
    background: #0d6efd;
    color: #fff;
}

.pba-tour-preview-btn-secondary {
    background: #0f172a;
    color: #fff;
}

.pba-tour-preview-btn-ghost {
    background: #fff;
    border-color: #cbd5e1;
    color: #334155;
}

/* Warning banner shown inside a step when the target element was not found (preview mode only) */
.pba-tour-element-missing {
    margin: 0 0 10px;
    padding: 8px 10px;
    border-radius: 6px;
    background: #fef9c3;
    border: 1px solid #fde047;
    color: #713f12;
    font-size: 12px;
    line-height: 1.4;
}
.pba-tour-element-missing code {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 4px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.06);
    font-family: ui-monospace, monospace;
    font-size: 11px;
    word-break: break-all;
}

/* Air-style highlight for selected dashboard tour targets */
[data-tour="dashboard-filters"].shepherd-target.shepherd-enabled,
[data-tour="dashboard-current-assignments"].shepherd-target.shepherd-enabled {
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10);
}

[data-tour="dashboard-filters"].shepherd-target.shepherd-enabled {
    padding: 10px 12px;
}

[data-tour="dashboard-current-assignments"].shepherd-target.shepherd-enabled {
    padding: 8px;
}

.pba-single-column-layout {
    grid-template-columns: minmax(0, 1fr) !important;
}

.pba-settings-pane {
    display: grid;
    gap: 14px;
}

.pba-settings-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    background: #fff;
    padding: 16px 18px;
}

.pba-settings-card-title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}

.pba-settings-card-note {
    margin: 0 0 14px;
    font-size: 13px;
    color: #64748b;
}

.pba-settings-card .form-group:last-child {
    margin-bottom: 0;
}

.pba-settings-card .col-form-label {
    color: #475569;
    font-weight: 600;
}

.pba-settings-card .form-control {
    border-radius: 7px;
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: none;
}

/* ── Einstellungen im Format der Bearbeiten-Dialoge ──────────────────────
   Die Einstellungsseiten waren deutlich grösser gesetzt als der Rest der
   Anwendung: 16px-Überschriften, volle Bootstrap-Zeilenhöhe, ein Feld pro
   Zeile. Hier gelten dieselben Masse wie in "Plätze bearbeiten" – gleiche
   Feldbeschriftung, gleiche Kachelüberschrift, mehrere Felder nebeneinander.
   Bewusst als eigene Klassen statt globaler Overrides: .form-control und
   .btn stecken in der halben Anwendung. */
/* Kacheln nebeneinander, solange Platz ist – wie die Spalten in den
   Bearbeiten-Dialogen. align-items:start, damit eine kurze Kachel nicht auf
   die Höhe ihrer Nachbarin gezogen wird. */
.pba-settings-pane {
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    align-items: start;
}

/* Bootstrap setzt für den offenen Reiter display:block, und zwar mit zwei
   Klassen (.tab-content > .active) – das schlägt das display:grid oben. Die
   Kacheln lagen deshalb untereinander statt nebeneinander. */
.tab-content > .tab-pane.pba-settings-pane.active {
    display: grid;
}

.pba-settings-card.ist-breit {
    grid-column: 1 / -1;
}

/* Eine Spalte fasst mehrere Kacheln untereinander zusammen.
   Ohne sie beginnt jede Kachel eine neue Rasterzeile, sobald die Nachbarin
   höher ist – unter der kürzeren klafft dann eine Lücke. Welche Kachel zu
   welcher Spalte gehört, entscheidet die Ansicht; das Raster selbst kann
   Kacheln nicht nachrücken lassen. */
.pba-settings-spalte {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.pba-settings-card {
    padding: 0 14px 12px;
    overflow: hidden;
}

/* Überschrift als Leiste über die volle Kachelbreite – dasselbe Format wie
   platz-field-card-header, deshalb die negativen Ränder: so bleibt das
   Markup aller Einstellungsseiten unverändert. */
.pba-settings-card-title {
    margin: 0 -14px 0;
    padding: 4px 14px;
    background: #f8fafc;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #64748b;
}

.pba-settings-card-title i {
    color: var(--pba-accent, #94a3b8);
    font-size: 11px;
}

.pba-settings-card-note {
    font-size: 12px;
    margin: 10px 0;
}

/* Ohne Erläuterung sitzt das erste Feld sonst direkt an der Leiste. */
.pba-settings-card-title + * {
    margin-top: 12px;
}

/* Kachel-Zwischenüberschrift, wie platz-field-card-header. */
.pba-feld-untertitel {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 14px 0 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #64748b;
}

.pba-feld-untertitel:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.pba-feld-untertitel i {
    color: var(--pba-accent, #94a3b8);
    font-size: 11px;
}

/* Mehrere Felder nebeneinander, solange Platz ist.
   auto-fill statt auto-fit: leere Spuren bleiben bestehen, damit ein
   einzelnes Feld (etwa eine Auswahlliste) nicht über die ganze Kachel
   gezogen wird. */
.pba-feld-gitter {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px 16px;
    align-items: end;
}

.pba-feld-gitter .pba-feld-breit {
    grid-column: span 2;
}

/* Zwei Felder nebeneinander, deren Hinweistexte verschieden lang sind: mit dem
   voreingestellten "align-items: end" haengen sich die Felder an ihre Unterkante,
   und die Eingabefelder stehen sichtbar versetzt. Hier zaehlt die Oberkante. */
.pba-feld-gitter-oben {
    align-items: start;
}

@media (max-width: 767.98px) {
    .pba-feld-gitter .pba-feld-breit {
        grid-column: auto;
    }
}

.pba-feld {
    min-width: 0;
    margin-bottom: 0;
}

.pba-feld-label {
    display: block;
    font-size: .8rem;
    font-weight: 500;
    color: #495057;
    margin-bottom: .15rem;
}

.pba-feld-hinweis {
    display: block;
    font-size: .78rem;
    line-height: 1.35;
    color: #94a3b8;
    margin-top: .25rem;
}

/* Ein Schalter steht neben Feldern und braucht deren Grundlinie. In einer
   Kachel bekommt er die volle Breite: seine Beschriftung ist ein ganzer Satz
   und bräche in einer Feldspalte mitten im Wort um. */
.pba-feld-schalter {
    display: flex;
    align-items: center;
    min-height: calc(1.5em + .5rem + 2px);
}

.pba-feld-gitter > .pba-feld-schalter {
    grid-column: 1 / -1;
}

.pba-schalter-liste {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.pba-schalter-gitter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: .45rem 1.5rem;
}

.pba-schalter-liste .custom-control-label,
.pba-schalter-gitter .custom-control-label,
.pba-feld-schalter .custom-control-label {
    font-size: .85rem;
    color: #475569;
}

/* Die Ablegefläche ersetzt das native Dateifeld: dessen Beschriftung kommt vom
   Browser und steht in dessen Sprache. Gestrichelt, weil sie etwas aufnimmt. */
.pba-logo-ablage {
    border: 1px dashed #c6ced8;
    border-radius: 10px;
    background: #f8fafc;
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
}

.pba-logo-ablage:hover,
.pba-logo-ablage:focus-visible {
    border-color: #8094ab;
    background: #f2f7ff;
    outline: none;
}

/* Beim Ziehen darüber: die Fläche muss vor dem Loslassen antworten, sonst
   weiss niemand, ob sie das Ziel ist. */
.pba-logo-ablage.ist-ziel {
    border-color: #4b6b95;
    border-style: solid;
    background: #eaf2ff;
}

/* Genau einer der beiden Zustände ist zu sehen – leer oder gefüllt. */
.pba-logo-ablage[data-leer="1"] .pba-logo-zeile,
.pba-logo-ablage[data-leer="0"] .pba-logo-leer {
    display: none;
}

.pba-logo-leer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 0;
    text-align: center;
    color: #7b8ea5;
}

.pba-logo-leer-symbol {
    font-size: 22px;
    margin-bottom: 2px;
}

.pba-logo-leer-text {
    font-size: .88rem;
    font-weight: 600;
    color: #5b6b7f;
}

.pba-logo-leer-zusatz {
    font-size: .78rem;
}

.pba-logo-zeile {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Name und Grösse stehen zwischen Bild und Knöpfen und nehmen den Rest der
   Breite. min-width:0, sonst schöbe ein langer Dateiname die Knöpfe hinaus. */
.pba-logo-angaben {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.pba-logo-name {
    font-size: .85rem;
    font-weight: 600;
    color: #475569;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pba-logo-meta {
    font-size: .78rem;
    color: #94a3b8;
}

.pba-logo-aktionen {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}

.pba-logo-fehler {
    margin-top: .4rem;
    font-size: .8rem;
    color: #b42318;
}

/* Auf schmalen Karten stehen die Knöpfe unter den Angaben – nebeneinander
   bliebe für den Dateinamen nichts übrig. */
@media (max-width: 575.98px) {
    .pba-logo-zeile {
        flex-wrap: wrap;
    }

    .pba-logo-aktionen {
        width: 100%;
    }
}

.pba-logo-bild {
    max-height: 40px;
    max-width: 200px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 6px;
    padding: 3px;
    background: #fff;
}

/* Der Knopf steht neben dem Logo und darf nicht umbrechen – zweizeilig ist
   er breiter als das Bild daneben. */
.pba-logo-knopf {
    white-space: nowrap;
    flex: 0 0 auto;
    align-self: center;
}

/* Zurückgenommen wird das Entfernen erst beim Speichern – bis dahin zeigt
   das ausgegraute Bild, was passieren wird. */
.pba-logo-zeile.ist-entfernt .pba-logo-bild {
    opacity: .35;
    filter: grayscale(1);
}

/* Bedienelemente auf das Mass der Dialoge. */
.pba-settings-card .form-control,
.profile-settings-shell .form-control {
    height: calc(1.5em + .5rem + 2px);
    padding: .25rem .5rem;
    font-size: .85rem;
}

.pba-settings-card textarea.form-control,
.profile-settings-shell textarea.form-control {
    height: auto;
}

/* Ein Farbfeld über die halbe Kachel sagt nicht mehr aus als ein Muster in
   Knopfbreite – es nimmt nur Platz weg. */
.pba-settings-card input[type="color"].form-control {
    padding: 3px;
    max-width: 120px;
    height: 30px;
    border-radius: 6px;
    cursor: pointer;
}

.pba-settings-card input[type="color"].form-control:disabled {
    cursor: default;
    opacity: .55;
}

.pba-settings-card .btn,
.pba-settings-actions .btn,
.profile-settings-shell .btn {
    font-size: .85rem;
    padding: .3rem .75rem;
}

.pba-settings-actions {
    padding-top: 12px;
    margin-top: 14px;
}

/* Profil: dieselben Masse für Kachelüberschriften und Fliesstext. */
.profile-settings-shell .message-page-card-header h5 {
    font-size: 14px;
}

.profile-settings-shell .message-page-card-header p {
    font-size: 12px;
}

.pba-settings-card .form-control:focus {
    border-color: rgba(51, 65, 85, 0.35);
    box-shadow: 0 0 0 3px rgba(51, 65, 85, 0.08);
}

.pba-settings-card .border.rounded.p-3.bg-light {
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    padding: 14px 16px !important;
}

.pba-settings-card img {
    border-radius: 6px;
}

.pba-settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.pba-soft-modal .modal-content {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.14);
    overflow: hidden;
    background: #fff;
}

.pba-soft-modal .modal-header {
    padding: 18px 22px 14px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: #fff;
    align-items: center;
}

.pba-soft-modal .modal-header h5,
.pba-soft-modal .modal-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
}

.pba-soft-modal .modal-header small {
    margin-left: 6px;
    font-size: 13px;
    color: #64748b !important;
}

.pba-soft-modal .modal-body {
    padding: 20px 22px;
    background: #fff;
}

.pba-soft-modal .modal-footer {
    padding: 14px 22px 20px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    background: #fff;
    gap: 8px;
}

.pba-soft-modal .form-control,
.pba-soft-modal .custom-select,
.pba-soft-modal select.form-control,
.pba-soft-modal textarea.form-control {
    border-radius: 7px;
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: none;
}

.pba-soft-modal .form-control:focus,
.pba-soft-modal .custom-select:focus,
.pba-soft-modal select.form-control:focus,
.pba-soft-modal textarea.form-control:focus {
    border-color: rgba(51, 65, 85, 0.35);
    box-shadow: 0 0 0 3px rgba(51, 65, 85, 0.08);
}

/* Die Felder im Anheften- und im Termin-Dialog tragen eigene Klassen und
   nicht .form-control. Dadurch fehlte ihnen das `outline: 0`, das Bootstrap
   den Formularfeldern mitgibt – und sie fielen auf die globale Regel in
   connie.css zurück: outline: 3px solid #005fcc. Ein kräftiger blauer Rahmen,
   wo überall sonst ein weicher Ring steht.

   Deshalb hier dieselben Werte wie oben. Bewusst neben der Vorlage, damit
   beide beisammen bleiben und nicht wieder auseinanderlaufen. */
.pba-pin-input,
.pba-pin-textarea {
    width: 100%;
    padding: 6px 12px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 7px;
    background: #fff;
    color: #495057;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: none;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.pba-pin-input:focus,
.pba-pin-textarea:focus,
.pba-pin-input:focus-visible,
.pba-pin-textarea:focus-visible {
    outline: 0;
    border-color: rgba(51, 65, 85, 0.35);
    box-shadow: 0 0 0 3px rgba(51, 65, 85, 0.08);
}

/* Datums-/Zeit-Felder: internen Text vertikal mittig (Webkit zentriert ihn sonst nicht). */
input[type="date"].form-control::-webkit-datetime-edit,
input[type="time"].form-control::-webkit-datetime-edit,
input[type="datetime-local"].form-control::-webkit-datetime-edit {
    padding-top: 0;
    padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   Dropdown-Pfeil bekommt einen eigenen, klar abgetrennten "Kasten".
   Vorher lief langer Optionstext bis in den Pfeil hinein (der Pfeil ist nur
   ein Hintergrundbild -> Text darueber). Jetzt: einheitlicher Pfeil rechts in
   einer eigenen Mini-Box, davor wird der Text sauber mit "…" abgeschnitten.
   Gilt global fuer alle einzeiligen Select-Felder (Bootstrap .custom-select,
   native select.form-control(-sm) und .form-select). Mehrfach-Auswahl und
   Listboxen (multiple/size) bleiben unangetastet. */
select.form-control:not([multiple]):not([size]),
select.form-control-sm:not([multiple]):not([size]),
select.form-select:not([multiple]):not([size]),
select.custom-select:not([multiple]):not([size]),
.custom-select:not([multiple]):not([size]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Platz fuer den Pfeil-Kasten reservieren */
    padding-right: 2.2rem !important;
    /* langen Text VOR dem Kasten abschneiden statt ihn zu ueberlagern */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    /* Ebene 1: Pfeil-Chevron  |  Ebene 2: abgesetzte Mini-Box mit Trennlinie */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"),
        linear-gradient(to right,
            rgba(15, 23, 42, 0) calc(100% - 1.75rem),
            rgba(15, 23, 42, 0.12) calc(100% - 1.75rem),
            rgba(15, 23, 42, 0.12) calc(100% - 1.75rem + 1px),
            rgba(15, 23, 42, 0.05) calc(100% - 1.75rem + 1px),
            rgba(15, 23, 42, 0.05) 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: right 0.55rem center, right center;
    background-size: 12px 12px, 100% 100%;
}

/* IE/Edge-Legacy: nativen Pfeil ausblenden, damit kein Doppelpfeil entsteht. */
select.form-control:not([multiple])::-ms-expand,
select.custom-select:not([multiple])::-ms-expand,
.custom-select:not([multiple])::-ms-expand {
    display: none;
}

.pba-masterdata-page .message-hub-main {
    padding: 16px 18px;
}

.dx-toolbar .pba-grid-toolbar-btn.dx-button {
    border-radius: 0.35rem;
    height: 38px;
    min-height: 38px;
    color: var(--pba-button, var(--connie-orange)) !important;
    border: 1px solid var(--pba-button, var(--connie-orange)) !important;
    background: transparent !important;
    box-shadow: none;
    opacity: 0.9;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease, transform 0.2s ease;
}

.dx-toolbar .pba-grid-toolbar-btn.dx-button .dx-button-content {
    height: 100%;
    padding: 0.375rem 0.75rem;
    display: inline-flex;
    align-items: center;
}

.dx-toolbar .pba-grid-toolbar-btn.dx-button .dx-icon,
.dx-toolbar .pba-grid-toolbar-btn.dx-button .dx-button-text {
    color: var(--pba-button, var(--connie-orange)) !important;
}

.dx-toolbar .pba-grid-toolbar-btn.dx-button.dx-state-hover,
.dx-toolbar .pba-grid-toolbar-btn.dx-button:hover {
    transform: translateY(-1px);
    opacity: 1;
    color: var(--pba-button-contrast, #fff) !important;
    background-color: var(--pba-button, var(--connie-orange)) !important;
    border-color: var(--pba-button, var(--connie-orange)) !important;
}

.dx-toolbar .pba-grid-toolbar-btn.dx-button.dx-state-hover .dx-icon,
.dx-toolbar .pba-grid-toolbar-btn.dx-button.dx-state-hover .dx-button-text,
.dx-toolbar .pba-grid-toolbar-btn.dx-button:hover .dx-icon,
.dx-toolbar .pba-grid-toolbar-btn.dx-button:hover .dx-button-text {
    color: #fff !important;
}

.dx-toolbar .pba-grid-toolbar-btn.dx-button.dx-state-focused,
.dx-toolbar .pba-grid-toolbar-btn.dx-button:focus {
    box-shadow: none;
}

.pba-db-parent-tabs .highlight {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px !important;
    padding-left: 0;
}

.pba-db-parent-tabs .highlight > xli,
.pba-db-parent-tabs .highlight > .nav-item {
    list-style: none;
}

/* Registerkarten sind Navigation und folgen deshalb den Menüfarben.
   Ohne eigene Menüfarben sind --pba-tab* mit den Kopffarben belegt – für
   bestehende Betriebe ändert sich also nichts. */
.pba-db-parent-tabs .btn-menu,
.pba-db-parent-tabs .btn-outline-menu {
    border-radius: 999px !important;
    min-height: 34px;
    padding: 0.3rem 1rem !important;
    font-size: 14px !important;
    font-weight: 600;
    margin-right: 0 !important;
    border: 1px solid var(--pba-tab, var(--pba-accent, var(--connie-orange))) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.pba-db-parent-tabs .btn-outline-menu {
    color: var(--pba-tab-text, var(--pba-accent, var(--connie-orange))) !important;
    background: #fff !important;
}

.pba-db-parent-tabs .btn-menu {
    --connie-info: var(--pba-tab-contrast, var(--pba-accent-contrast, #fff));
    color: var(--pba-tab-contrast, var(--pba-accent-contrast, #fff)) !important;
    background: var(--pba-tab, var(--pba-accent, var(--connie-orange))) !important;
    border-color: var(--pba-tab, var(--pba-accent, var(--connie-orange))) !important;
    border-bottom: 1px solid var(--pba-tab, var(--pba-accent, var(--connie-orange))) !important;
}

.pba-db-parent-tabs .btn-outline-menu:hover,
.pba-db-parent-tabs .btn-menu:hover {
    transform: translateY(-1px);
}

.pba-db-parent-tabs .btn-outline-menu:hover {
    color: var(--pba-tab-contrast, #fff) !important;
    background: var(--pba-tab, var(--pba-accent, var(--connie-orange))) !important;
}

.pba-db-parent-tabs .btn-menu:hover {
    filter: brightness(0.94);
}

.pba-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.pba-status-pill.is-success {
    background: rgba(34, 197, 94, 0.14);
    color: #15803d;
}

.pba-status-pill.is-muted {
    background: #eef2f7;
    color: #475569;
}

.pba-status-pill.is-info {
    background: rgba(37, 99, 235, 0.14);
    color: #1d4ed8;
}

.pba-color-swatch {
    display: inline-flex;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--swatch-color, #cbd5e1);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.pba-color-value {
    font-family: Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 13px;
    color: #475569;
}

.pba-modal-form-grid {
    display: grid;
    gap: 14px;
}

.pba-modal-form-grid .form-group {
    margin-bottom: 0;
}

.pba-modal-form-grid label {
    display: block;
    margin-bottom: 6px;
    color: #475569;
    font-weight: 500;
}

/* Switch-Labels nicht vom Grid-Label-Stil verzerren lassen
   (sonst stimmen Position/Proportionen des Toggles nicht). */
.pba-modal-form-grid .custom-control-label {
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
}

.pba-modal-form-grid .pba-grid-span-2 {
    grid-column: 1 / -1;
}

.pba-tagestypen-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pba-tagestypen-form .pba-color-input {
    height: 44px;
    padding: 6px;
}

.pba-status-pill.is-primary {
    background: rgba(var(--pba-accent-rgb, 28, 82, 36), 0.14);
    color: var(--pba-accent, var(--connie-orange));
}

.pba-ausbildungsjahre-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pba-inline-settings-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    background: #f8fafc;
    padding: 14px 16px;
}

.pba-inline-settings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.pba-form-check {
    margin-bottom: 0;
}

.pba-ausbildungsjahre-calendar-modal .modal-dialog {
    max-width: min(1320px, calc(100vw - 32px));
}

.pba-ausbildungsjahre-calendar-header {
    align-items: center;
}

.pba-ausbildungsjahre-calendar-header .modal-title span {
    color: #64748b;
    font-weight: 600;
}

.pba-ausbildungsjahre-calendar-body {
    padding-top: 12px;
}

.wrapper,
#content {
    background: #ffffff;
}

#sidebar {
    --sidebar-width: 272px;
    --sidebar-width-collapsed: 88px;
    --sidebar-menu-text: var(--pba-sidebar-accent-strong, #334155);
    --sidebar-menu-active: var(--pba-sidebar-accent-strong, #0f172a);
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    transition: none;
    color: var(--sidebar-menu-text);
    position: relative;
    z-index: 2;
    min-height: 100vh;
    background: transparent;
    padding: 8px 2px 8px 8px;
    margin-top: 0;
    flex-shrink: 0;
    flex-grow: 0;
}

#sidebar.collapsed {
    width: var(--sidebar-width-collapsed);
    min-width: var(--sidebar-width-collapsed);
}

#sidebar .sidebar-shell {
    height: auto;
    max-height: none;
    padding: 12px 10px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.96) 100%);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: sticky;
    top: 18px;
    opacity: 1;
    transform: translateX(0) scale(1);
    transition: padding 0.18s ease, border-radius 0.18s ease, box-shadow 0.18s ease, opacity 0.14s ease, transform 0.18s ease;
}

#sidebar.sidebar-animating .sidebar-shell {
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
    opacity: 0;
    transform: translateX(-6px) scale(0.985);
}

#sidebar.sidebar-animating #sidebar-nav {
    opacity: 0;
    pointer-events: none;
}

#sidebar-nav {
    flex: 0 0 auto;
    min-height: 0;
    overflow-y: visible;
    padding-right: 0;
    overflow-x: hidden;
    opacity: 1;
    transition: opacity 0.16s ease;
}

#sidebar-nav::-webkit-scrollbar {
    width: 8px;
}

#sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.25);
    border-radius: 999px;
}

#sidebar.collapsed .sidebar-shell {
    padding-left: 8px;
    padding-right: 8px;
}

#sidebar.collapsed .dx-accordion-item-title {
    padding-left: 0;
    padding-right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
}

#sidebar.collapsed .dx-accordion-item-title .nav-item {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 40px;
}

#sidebar.collapsed .dx-accordion-item-opened > .dx-accordion-item-title::before,
#sidebar.collapsed .dx-accordion-item-closed > .dx-accordion-item-title::before,
#sidebar.collapsed .dx-accordion-item > .dx-accordion-item-title::before,
#sidebar.collapsed .dx-accordion-item > .dx-accordion-item-title::after {
    content: none !important;
    display: none !important;
}

#sidebar.collapsed .nav-item {
    justify-content: center;
    padding-left: 6px;
    padding-right: 6px;
    gap: 0;
}

#sidebar.collapsed .dx-accordion-item-body .nav-item:hover,
#sidebar.collapsed .dx-accordion-item-body .nav-item.active {
    background: transparent;
    box-shadow: none;
}

#sidebar.collapsed .dx-accordion-item-body .nav-item {
    margin-left: 0;
    width: 100%;
    justify-content: center;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 6px;
    padding-bottom: 6px;
}

#sidebar .nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    cursor: pointer;
    user-select: none;
    margin-top: 2px;
    color: var(--sidebar-menu-text);
    border-radius: 18px;
    overflow: hidden;
    transition: background-color 0.16s ease, color 0.16s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

#sidebar .nav-item:hover {
    background: rgba(var(--pba-sidebar-accent-rgb, 28, 82, 36), 0.10);
    color: var(--sidebar-menu-active);
    transform: translateY(-1px);
}

#sidebar .nav-item.active {
    font-weight: 700;
    color: var(--sidebar-menu-active);
    background: rgba(var(--pba-sidebar-accent-rgb, 28, 82, 36), 0.14);
    box-shadow: inset 0 0 0 1px rgba(var(--pba-sidebar-accent-rgb, 28, 82, 36), 0.12);
}

#sidebar .dx-accordion-item-body .nav-item {
    margin-left: 4px;
    gap: 10px;
    padding: 6px 8px;
    margin-bottom: 2px;
    border-radius: 14px;
}

#sidebar .dx-accordion-item-body .nav-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 8px;
    font-size: 13px;
}

#sidebar .dx-accordion-item-body .nav-text {
    font-size: 14px;
    line-height: 1.15;
}

#sidebar .nav-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--pba-sidebar-accent-soft, #eef2f7);
    color: var(--pba-sidebar-accent-strong, #334155);
    transform: scale(1);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

#sidebar .nav-item.active .nav-icon,
#sidebar .nav-item:hover .nav-icon {
    background: rgba(var(--pba-sidebar-accent-rgb, 28, 82, 36), 0.14);
    color: var(--pba-sidebar-accent-strong, #0f172a);
}

#sidebar .group-icon {
    gap: 0;
}

#sidebar .group-icon .sidebar-group-symbol {
    display: none;
}

#sidebar .group-icon .sidebar-group-chevron {
    font-size: 10px;
    color: var(--pba-sidebar-accent-strong, #64748b);
    transform: rotate(0deg);
    transition: transform 0.18s ease, color 0.18s ease;
}

#sidebar .dx-accordion-item-opened > .dx-accordion-item-title .sidebar-group-chevron {
    transform: rotate(90deg);
    color: var(--pba-sidebar-accent-strong, #0f172a);
}

#sidebar.collapsed .group-icon .sidebar-group-symbol {
    display: inline-flex;
}

#sidebar.collapsed .group-icon .sidebar-group-chevron {
    display: none;
}

#sidebar .nav-text {
    min-width: 0;
    line-height: 1.2;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#sidebar.collapsed .nav-text {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.sidebar-group-title {
    font-weight: 700;
    color: var(--pba-sidebar-accent-strong, #0f172a);
}

#sidebar.collapsed .nav-icon {
    transform: scale(1.02);
}

#sidebar.collapsed .dx-accordion-item-body .nav-item:hover .nav-icon,
#sidebar.collapsed .dx-accordion-item-body .nav-item.active .nav-icon {
    background: transparent;
    box-shadow: none;
    color: var(--pba-sidebar-accent-strong, var(--connie-orange));
}

#sidebar.collapsed .dx-accordion-item-body .nav-icon {
    margin: 0 auto;
    background: transparent;
    box-shadow: none;
}

#sidebar.collapsed #sidebar-nav .dx-accordion-item-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#sidebar .dx-widget {
    font-family: inherit !important;
}

#sidebar .dx-accordion-item-title {
    font-size: 13px !important;
    color: var(--sidebar-menu-text) !important;
    background-color: transparent !important;
    padding: 3px 0 !important;
}

#sidebar .dx-accordion-item {
    border: 0 !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    background-color: transparent !important;
    margin-bottom: 2px;
}

#sidebar-nav .dx-accordion,
#sidebar-nav .dx-accordion-item,
#sidebar-nav .dx-accordion-item-opened,
#sidebar-nav .dx-accordion-item-closed,
#sidebar-nav .dx-accordion-item.dx-item-selected,
#sidebar-nav .dx-accordion-item.dx-state-hover,
#sidebar-nav .dx-accordion-item.dx-state-focused,
#sidebar-nav .dx-accordion-item.dx-state-active,
#sidebar-nav .dx-item,
#sidebar-nav .dx-item-content,
#sidebar-nav .dx-accordion-item-title,
#sidebar-nav .dx-accordion-item-body {
    background-color: transparent !important;
}

#sidebar-nav .dx-accordion-item.dx-item-selected .dx-accordion-item-title,
#sidebar-nav .dx-accordion-item.dx-state-hover .dx-accordion-item-title,
#sidebar-nav .dx-accordion-item.dx-state-focused .dx-accordion-item-title {
    color: var(--sidebar-menu-active) !important;
}

#sidebar-nav .dx-accordion-item-title::before,
#sidebar-nav .dx-accordion-item-title::after {
    display: none !important;
    content: none !important;
}

#sidebar-nav .dx-accordion-item-body {
    padding: 2px 0 6px !important;
}

@media (max-width: 767.98px) {
    .pba-settings-actions {
        flex-direction: column-reverse;
    }

    .pba-settings-actions .btn {
        width: 100%;
    }

    .pba-tagestypen-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .pba-ausbildungsjahre-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .pba-modal-form-grid .pba-grid-span-2 {
        grid-column: auto;
    }
}

/* Einsaetze pages */

.einsatz-partner-details {
    width: 100%;
}

.einsatz-partner-details summary {
    list-style-position: inside;
}

.einsatz-partner-summary {
    display: inline-block;
    max-width: calc(100% - 18px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.einsatz-partner-details[open] .einsatz-partner-summary {
    max-width: none;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.einsatz-partner-wrap {
    white-space: normal;
    word-break: break-word;
    display: block;
    line-height: 1.2;
}

.einsaetze-betrieb-page .message-hub-main > div[class$="-container"],
.einsaetze-role-page .message-hub-main > div[class$="-container"] {
    margin-top: 0 !important;
}

.einsaetze-role-page .customarea h4,
.einsaetze-role-page .einsaetze-page-toolbar {
    display: none;
}

.tb-betrieb-page-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.tb-betrieb-page-nav-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.tb-betrieb-page-nav-row .message-tab-nav {
    margin-bottom: 0;
}

.tb-betrieb-page-nav-row .tb-betrieb-page-toolbar {
    margin-bottom: 0;
}

.tb-betrieb-page-toolbar .tb-betrieb-top-btn {
    color: var(--pba-button, var(--connie-orange)) !important;
    border: 1px solid var(--pba-button, var(--connie-orange)) !important;
    background: transparent !important;
    border-radius: 0.35rem;
    min-height: 38px;
    box-shadow: none;
    opacity: 0.9;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease, transform 0.2s ease;
}

.tb-betrieb-page-toolbar .tb-betrieb-top-btn:hover,
.tb-betrieb-page-toolbar .tb-betrieb-top-btn:focus {
    color: var(--pba-button-contrast, #fff) !important;
    background-color: var(--pba-button, var(--connie-orange)) !important;
    border-color: var(--pba-button, var(--connie-orange)) !important;
    opacity: 1;
    transform: translateY(-1px);
}

.einsaetze-role-page .dx-toolbar .einsaetze-filter-toolbar-btn.dx-button,
.einsaetze-betrieb-page .dx-toolbar .einsatzplanung-toolbar-btn.dx-button {
    border-radius: 0.35rem;
    height: 38px;
    min-height: 38px;
    box-shadow: none;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease, transform 0.2s ease;
}

.einsaetze-role-page .dx-toolbar .einsaetze-filter-toolbar-btn.dx-button .dx-button-content,
.einsaetze-betrieb-page .dx-toolbar .einsatzplanung-toolbar-btn.dx-button .dx-button-content {
    height: 100%;
    padding: 0.375rem 0.75rem;
    display: inline-flex;
    align-items: center;
}

.einsaetze-role-page .dx-toolbar .einsaetze-filter-toolbar-btn.dx-button.dx-state-hover,
.einsaetze-role-page .dx-toolbar .einsaetze-filter-toolbar-btn.dx-button:hover,
.einsaetze-betrieb-page .dx-toolbar .einsatzplanung-toolbar-btn.dx-button.dx-state-hover,
.einsaetze-betrieb-page .dx-toolbar .einsatzplanung-toolbar-btn.dx-button:hover {
    transform: translateY(-1px);
    opacity: 1;
}

.einsaetze-role-page .dx-toolbar .einsaetze-filter-toolbar-btn.dx-button.dx-state-focused,
.einsaetze-role-page .dx-toolbar .einsaetze-filter-toolbar-btn.dx-button:focus,
.einsaetze-betrieb-page .dx-toolbar .einsatzplanung-toolbar-btn.dx-button.dx-state-focused,
.einsaetze-betrieb-page .dx-toolbar .einsatzplanung-toolbar-btn.dx-button:focus {
    box-shadow: none;
}

.einsaetze-role-page .dx-toolbar .einsaetze-filter-toolbar-btn.dx-button.is-primary {
    color: var(--pba-button-contrast, #fff) !important;
    border: 1px solid var(--pba-button, var(--connie-orange)) !important;
    background: var(--pba-button, var(--connie-orange)) !important;
}

.einsaetze-role-page .dx-toolbar .einsaetze-filter-toolbar-btn.dx-button.is-primary .dx-icon,
.einsaetze-role-page .dx-toolbar .einsaetze-filter-toolbar-btn.dx-button.is-primary .dx-button-text {
    color: #fff !important;
}

.einsaetze-role-page .dx-toolbar .einsaetze-filter-toolbar-btn.dx-button.is-secondary,
.einsaetze-betrieb-page .dx-toolbar .einsatzplanung-toolbar-btn.dx-button {
    color: var(--pba-button, var(--connie-orange)) !important;
    border: 1px solid var(--pba-button, var(--connie-orange)) !important;
    background: transparent !important;
    opacity: 0.9;
}

.einsaetze-role-page .dx-toolbar .einsaetze-filter-toolbar-btn.dx-button.is-secondary .dx-icon,
.einsaetze-role-page .dx-toolbar .einsaetze-filter-toolbar-btn.dx-button.is-secondary .dx-button-text,
.einsaetze-betrieb-page .dx-toolbar .einsatzplanung-toolbar-btn.dx-button .dx-icon,
.einsaetze-betrieb-page .dx-toolbar .einsatzplanung-toolbar-btn.dx-button .dx-button-text {
    color: var(--pba-button, var(--connie-orange)) !important;
}

.einsaetze-role-page .dx-toolbar .einsaetze-filter-toolbar-btn.dx-button.is-secondary.dx-state-hover,
.einsaetze-role-page .dx-toolbar .einsaetze-filter-toolbar-btn.dx-button.is-secondary:hover,
.einsaetze-betrieb-page .dx-toolbar .einsatzplanung-toolbar-btn.dx-button.dx-state-hover,
.einsaetze-betrieb-page .dx-toolbar .einsatzplanung-toolbar-btn.dx-button:hover {
    color: var(--pba-button-contrast, #fff) !important;
    background-color: var(--pba-button, var(--connie-orange)) !important;
    border-color: var(--pba-button, var(--connie-orange)) !important;
}

.einsaetze-role-page .dx-toolbar .einsaetze-filter-toolbar-btn.dx-button.is-secondary.dx-state-hover .dx-icon,
.einsaetze-role-page .dx-toolbar .einsaetze-filter-toolbar-btn.dx-button.is-secondary.dx-state-hover .dx-button-text,
.einsaetze-role-page .dx-toolbar .einsaetze-filter-toolbar-btn.dx-button.is-secondary:hover .dx-icon,
.einsaetze-role-page .dx-toolbar .einsaetze-filter-toolbar-btn.dx-button.is-secondary:hover .dx-button-text,
.einsaetze-betrieb-page .dx-toolbar .einsatzplanung-toolbar-btn.dx-button.dx-state-hover .dx-icon,
.einsaetze-betrieb-page .dx-toolbar .einsatzplanung-toolbar-btn.dx-button.dx-state-hover .dx-button-text,
.einsaetze-betrieb-page .dx-toolbar .einsatzplanung-toolbar-btn.dx-button:hover .dx-icon,
.einsaetze-betrieb-page .dx-toolbar .einsatzplanung-toolbar-btn.dx-button:hover .dx-button-text {
    color: #fff !important;
}

#modal-edit-einsatz .modal-dialog,
#modal-partnerdaten .modal-dialog,
#modal-taetigkeitsbericht-submit-confirm .modal-dialog,
#modal-azubi-report-sign.pba-soft-modal .modal-dialog {
    max-width: 620px;
}

#modal-edit-einsatz .form-group:last-child {
    margin-bottom: 0;
}

#modal-edit-taetigkeitsbericht .tb-input {
    font-size: 1rem;
    padding: 0.45rem 0.6rem;
}

#modal-edit-taetigkeitsbericht .tb-table,
#partnerdaten-table,
#modal-view-taetigkeitsbericht .table {
    margin-bottom: 0 !important;
}

#modal-edit-taetigkeitsbericht .tb-table th,
#modal-edit-taetigkeitsbericht .tb-table td {
    vertical-align: middle;
}

#modal-edit-taetigkeitsbericht .table-responsive,
#modal-partnerdaten #partnerdaten-table,
#modal-view-taetigkeitsbericht .table-responsive {
    border: 1px solid rgba(15, 23, 42, 0.08);
    overflow: hidden;
    background: #f8fafc;
}

#modal-edit-taetigkeitsbericht .table-responsive,
#modal-partnerdaten #partnerdaten-table {
    border-radius: 18px;
}

#modal-view-taetigkeitsbericht .table-responsive,
#tb-view-remark-container,
#tb-view-remark-input,
#modal-tb-signature .border.rounded,
#modal-sign-request .border.rounded,
#modal-azubi-report-sign .border.rounded {
    border-radius: 9px;
}

#modal-edit-taetigkeitsbericht .tb-table thead th,
#modal-view-taetigkeitsbericht .table thead th,
#partnerdaten-table th {
    padding: 12px 14px;
    border-top: 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

#partnerdaten-table th {
    text-transform: uppercase;
}

#modal-edit-taetigkeitsbericht .tb-table tbody td,
#modal-view-taetigkeitsbericht .table tbody td,
#partnerdaten-table td {
    padding: 12px 14px;
    border-top-color: rgba(15, 23, 42, 0.06);
    color: #0f172a;
    background: #fff;
}

#modal-edit-taetigkeitsbericht .tb-sort-date {
    color: #475569;
    font-weight: 700;
    text-decoration: none;
}

#modal-edit-taetigkeitsbericht .tb-sort-date:hover {
    color: #0f172a;
    text-decoration: none;
}

#tb-edit-remark-container,
#tb-view-remark-container,
#tb-view-remark-input {
    padding: 14px 16px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #f8fafc;
}

#tb-edit-remark-container,
#partnerdaten-empty {
    border-radius: 18px;
}

#tb-view-remark-text {
    color: #334155 !important;
}

#modal-view-taetigkeitsbericht .modal-dialog {
    max-width: 920px;
}

#modal-view-taetigkeitsbericht .tb-view-status {
    font-size: 0.9rem;
    padding: 0.42em 0.72em;
    border-radius: 0.375rem;
}

#modal-view-status-hint,
#tb-view-status-hint {
    color: #64748b !important;
    font-size: 13px;
}

#modal-tb-signature .border.rounded,
#modal-sign-request .border.rounded,
#modal-azubi-report-sign .border.rounded {
    border-color: rgba(15, 23, 42, 0.08) !important;
    background: #fff !important;
}

#modal-tb-signature .form-check,
#modal-sign-request .form-check {
    margin-bottom: 0.4rem;
}

#modal-sign-request ul {
    margin-bottom: 0;
}

#modal-tb-signature img,
#modal-azubi-report-sign img {
    display: block;
    border-radius: 6px;
}

#modal-edit-taetigkeitsbericht #tb-add-row {
    margin-top: 10px;
    border-radius: 9px;
}

#partnerdaten-empty {
    border-color: rgba(15, 23, 42, 0.08);
    background: #f8fafc;
    color: #475569;
}

#partnerdaten-map-btn,
#partnerdaten-email-btn,
#partnerdaten-telefon-btn {
    border-radius: 999px;
}

#modal-edit-taetigkeitsbericht .modal-dialog {
    width: 90vw !important;
    max-width: 1400px !important;
    margin: 1.5rem auto !important;
}

#modal-edit-taetigkeitsbericht.modal .modal-dialog {
    display: flex;
    justify-content: center;
}

#modal-edit-taetigkeitsbericht .modal-content {
    width: 100%;
}

#modal-taetigkeitsbericht-submit-confirm + .modal-backdrop {
    opacity: 0.5;
}

.tb-azubi-page .message-chip.message-chip-danger {
    background: #ef4444;
    color: #fff;
}

.tb-action-menu,
.tb-partner-action-menu {
    display: inline-flex;
    justify-content: center;
    width: auto;
    min-width: 0;
}

#TaetigkeitsberichteAktivcontainer .dx-datagrid-rowsview .dx-row > td:last-child:not(.dx-pointer-events-none),
#TaetigkeitsberichteNiocontainer .dx-datagrid-rowsview .dx-row > td:last-child:not(.dx-pointer-events-none),
#TaetigkeitsberichteArchivcontainer .dx-datagrid-rowsview .dx-row > td:last-child:not(.dx-pointer-events-none),
#TaetigkeitsberichtePartnerTodocontainer .dx-datagrid-rowsview .dx-row > td:last-child:not(.dx-pointer-events-none),
#TaetigkeitsberichtePartnerUeberfaelligcontainer .dx-datagrid-rowsview .dx-row > td:last-child:not(.dx-pointer-events-none),
#TaetigkeitsberichtePartnerFehlercontainer .dx-datagrid-rowsview .dx-row > td:last-child:not(.dx-pointer-events-none),
#TaetigkeitsberichtePartnerArchivcontainer .dx-datagrid-rowsview .dx-row > td:last-child:not(.dx-pointer-events-none),
#TaetigkeitsberichteAktivcontainer .dx-datagrid-headers .dx-header-row > td:last-child:not(.dx-pointer-events-none),
#TaetigkeitsberichteNiocontainer .dx-datagrid-headers .dx-header-row > td:last-child:not(.dx-pointer-events-none),
#TaetigkeitsberichteArchivcontainer .dx-datagrid-headers .dx-header-row > td:last-child:not(.dx-pointer-events-none),
#TaetigkeitsberichtePartnerTodocontainer .dx-datagrid-headers .dx-header-row > td:last-child:not(.dx-pointer-events-none),
#TaetigkeitsberichtePartnerUeberfaelligcontainer .dx-datagrid-headers .dx-header-row > td:last-child:not(.dx-pointer-events-none),
#TaetigkeitsberichtePartnerFehlercontainer .dx-datagrid-headers .dx-header-row > td:last-child:not(.dx-pointer-events-none),
#TaetigkeitsberichtePartnerArchivcontainer .dx-datagrid-headers .dx-header-row > td:last-child:not(.dx-pointer-events-none) {
    padding-left: 6px !important;
    padding-right: 6px !important;
    text-align: center;
}

#TaetigkeitsberichteAktivcontainer .dx-datagrid-rowsview .dx-row > td:last-child:not(.dx-pointer-events-none),
#TaetigkeitsberichteNiocontainer .dx-datagrid-rowsview .dx-row > td:last-child:not(.dx-pointer-events-none),
#TaetigkeitsberichteArchivcontainer .dx-datagrid-rowsview .dx-row > td:last-child:not(.dx-pointer-events-none) {
    overflow: visible;
}

#TaetigkeitsberichteAktivcontainer .dx-datagrid-rowsview .dx-row > td:last-child:not(.dx-pointer-events-none) .dropdown-menu,
#TaetigkeitsberichteNiocontainer .dx-datagrid-rowsview .dx-row > td:last-child:not(.dx-pointer-events-none) .dropdown-menu,
#TaetigkeitsberichteArchivcontainer .dx-datagrid-rowsview .dx-row > td:last-child:not(.dx-pointer-events-none) .dropdown-menu {
    z-index: 3000;
}

/* Keep DevExtreme fixed-column filler cells from covering row content. */
#TaetigkeitsberichteAktivcontainer .dx-datagrid .dx-datagrid-content-fixed .dx-row > td.dx-pointer-events-none,
#TaetigkeitsberichteNiocontainer .dx-datagrid .dx-datagrid-content-fixed .dx-row > td.dx-pointer-events-none,
#TaetigkeitsberichteArchivcontainer .dx-datagrid .dx-datagrid-content-fixed .dx-row > td.dx-pointer-events-none {
    visibility: hidden !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

@media (max-width: 998.98px) {
    .tb-overdue-badge {
        display: inline-block;
        width: 10px;
        height: 10px;
        padding: 0 !important;
        border-radius: 999px;
        font-size: 0 !important;
        line-height: 0 !important;
        white-space: nowrap !important;
        vertical-align: middle;
    }
}

@media (max-width: 768px) {
    .tb-action-menu,
    .tb-partner-action-menu {
        display: inline-flex !important;
    }

    #TaetigkeitsberichteAktivcontainer .dx-datagrid-rowsview .dx-row > td:nth-child(3),
    #TaetigkeitsberichteNiocontainer .dx-datagrid-rowsview .dx-row > td:nth-child(3),
    #TaetigkeitsberichteArchivcontainer .dx-datagrid-rowsview .dx-row > td:nth-child(3) {
        white-space: normal;
        line-height: 1.2;
        overflow: visible;
        text-overflow: clip;
    }

    #TaetigkeitsberichteAktivcontainer .dx-datagrid-rowsview .dx-row > td:nth-child(3) .dx-datagrid-text-content,
    #TaetigkeitsberichteNiocontainer .dx-datagrid-rowsview .dx-row > td:nth-child(3) .dx-datagrid-text-content,
    #TaetigkeitsberichteArchivcontainer .dx-datagrid-rowsview .dx-row > td:nth-child(3) .dx-datagrid-text-content,
    #TaetigkeitsberichtePartnerTodocontainer .dx-datagrid-rowsview .dx-row > td:first-child .dx-datagrid-text-content,
    #TaetigkeitsberichtePartnerUeberfaelligcontainer .dx-datagrid-rowsview .dx-row > td:first-child .dx-datagrid-text-content,
    #TaetigkeitsberichtePartnerFehlercontainer .dx-datagrid-rowsview .dx-row > td:first-child .dx-datagrid-text-content,
    #TaetigkeitsberichtePartnerArchivcontainer .dx-datagrid-rowsview .dx-row > td:first-child .dx-datagrid-text-content {
        white-space: normal !important;
        word-break: break-word;
    }

    #TaetigkeitsberichtePartnerTodocontainer .dx-datagrid-rowsview .dx-row > td:first-child,
    #TaetigkeitsberichtePartnerUeberfaelligcontainer .dx-datagrid-rowsview .dx-row > td:first-child,
    #TaetigkeitsberichtePartnerFehlercontainer .dx-datagrid-rowsview .dx-row > td:first-child,
    #TaetigkeitsberichtePartnerArchivcontainer .dx-datagrid-rowsview .dx-row > td:first-child {
        white-space: normal;
        line-height: 1.2;
        overflow: visible;
        text-overflow: clip;
    }

    #modal-edit-taetigkeitsbericht .modal-dialog {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        height: 90vh;
    }

    #modal-edit-taetigkeitsbericht .modal-dialog.modal-dialog-centered {
        align-items: stretch;
        min-height: 90vh;
    }

    #modal-edit-taetigkeitsbericht .modal-content {
        height: 90vh;
        border-radius: 0;
    }

    #modal-edit-taetigkeitsbericht .modal-body {
        padding: 0.75rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #modal-edit-taetigkeitsbericht .modal-footer {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    #modal-edit-taetigkeitsbericht .modal-footer .btn {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: 140px;
    }

    #modal-edit-taetigkeitsbericht .table-responsive {
        overflow: visible;
    }

    #modal-edit-taetigkeitsbericht .tb-table {
        display: block;
    }

    #modal-edit-taetigkeitsbericht .tb-table thead {
        display: none;
    }

    #modal-edit-taetigkeitsbericht .tb-table tbody,
    #modal-edit-taetigkeitsbericht .tb-table tr,
    #modal-edit-taetigkeitsbericht .tb-table td {
        display: block;
        width: 100%;
    }

    #modal-edit-taetigkeitsbericht .tb-table tr {
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 0.85rem;
        padding: 0.5rem;
        margin-bottom: 0.75rem;
        background: #fff;
    }

    #modal-edit-taetigkeitsbericht .tb-table td {
        border: none;
        padding: 0.35rem 0;
    }

    #modal-edit-taetigkeitsbericht .tb-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #6c757d;
        margin-bottom: 0.25rem;
    }

    #modal-edit-taetigkeitsbericht .tb-table td:last-child {
        text-align: right;
    }

    #modal-edit-taetigkeitsbericht .tb-remove-row {
        font-size: 1.2rem;
    }

    #modal-edit-taetigkeitsbericht .tb-input {
        font-size: 0.95rem;
    }
}

/* Ausbildungstypen */

.ausbildungstypen-page .message-hub-main > div[class$="-container"] {
    margin-top: 0 !important;
}

.ausbildungstypen-page .dx-toolbar .ausbildungstypen-toolbar-btn.dx-button {
    color: var(--pba-button, var(--connie-orange)) !important;
    border: 1px solid var(--pba-button, var(--connie-orange)) !important;
    border-radius: 0.35rem;
    background: transparent !important;
    opacity: 0.9;
    height: 38px;
    min-height: 38px;
    box-shadow: none;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease, transform 0.2s ease;
}

.ausbildungstypen-page .dx-toolbar .ausbildungstypen-toolbar-btn.dx-button .dx-button-content {
    height: 100%;
    padding: 0.375rem 0.75rem;
    display: inline-flex;
    align-items: center;
}

.ausbildungstypen-page .dx-toolbar .ausbildungstypen-toolbar-btn.dx-button .dx-icon,
.ausbildungstypen-page .dx-toolbar .ausbildungstypen-toolbar-btn.dx-button .dx-button-text {
    color: var(--pba-button, var(--connie-orange)) !important;
}

.ausbildungstypen-page .dx-toolbar .ausbildungstypen-toolbar-btn.dx-button.dx-state-hover,
.ausbildungstypen-page .dx-toolbar .ausbildungstypen-toolbar-btn.dx-button:hover {
    color: var(--pba-button-contrast, #fff) !important;
    background-color: var(--pba-button, var(--connie-orange)) !important;
    border-color: var(--pba-button, var(--connie-orange)) !important;
    opacity: 1;
    transform: translateY(-1px);
}

.ausbildungstypen-page .dx-toolbar .ausbildungstypen-toolbar-btn.dx-button.dx-state-hover .dx-icon,
.ausbildungstypen-page .dx-toolbar .ausbildungstypen-toolbar-btn.dx-button.dx-state-hover .dx-button-text,
.ausbildungstypen-page .dx-toolbar .ausbildungstypen-toolbar-btn.dx-button:hover .dx-icon,
.ausbildungstypen-page .dx-toolbar .ausbildungstypen-toolbar-btn.dx-button:hover .dx-button-text {
    color: #fff !important;
}

.ausbildungstypen-page .dx-toolbar .ausbildungstypen-toolbar-btn.dx-button.dx-state-focused,
.ausbildungstypen-page .dx-toolbar .ausbildungstypen-toolbar-btn.dx-button:focus {
    box-shadow: none;
}

.ausbildungstypen-rlp-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.32rem 0.62rem;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.ausbildungstypen-rlp-status.is-filled {
    color: #166534;
    background: rgba(34, 197, 94, 0.14);
}

.ausbildungstypen-rlp-status.is-empty {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.12);
}

#modal-neuer-ausbildungstyp.pba-soft-modal .modal-dialog,
#modal-edit-ausbildungstypen.pba-soft-modal .modal-dialog {
    max-width: 980px;
}

#modal-neuer-ausbildungstyp .modal-body,
#modal-edit-ausbildungstypen .modal-body {
    padding-top: 18px;
    padding-bottom: 18px;
}

#modal-neuer-ausbildungstyp .form-group,
#modal-edit-ausbildungstypen .form-group {
    margin-bottom: 1rem;
}

#modal-neuer-ausbildungstyp .col-form-label,
#modal-edit-ausbildungstypen .col-form-label {
    color: #475569;
    font-weight: 600;
}

#modal-neuer-ausbildungstyp .table-responsive,
#modal-edit-ausbildungstypen .table-responsive {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    overflow-x: auto;
    overflow-y: auto;
    background: #f8fafc;
    /* Teil der Flex-Höhenkette: Tabelle füllt die Restspalte und scrollt intern. */
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

/* Modal auf den Viewport begrenzen → NICHT das ganze Fenster scrollt, sondern nur
   die Tabellen (Kategorien links / Rahmenlehrplan rechts) scrollen intern. */
#modal-neuer-ausbildungstyp .modal-content,
#modal-edit-ausbildungstypen .modal-content {
    max-height: calc(100vh - 3.5rem);
}
#modal-neuer-ausbildungstyp .modal-body,
#modal-edit-ausbildungstypen .modal-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
#modal-neuer-ausbildungstyp .ausbildungstyp-advanced,
#modal-edit-ausbildungstypen .ausbildungstyp-advanced {
    flex: 1 1 auto;
    min-height: 0;
}
#modal-neuer-ausbildungstyp .ausbildungstyp-advanced > [class*="col-"],
#modal-edit-ausbildungstypen .ausbildungstyp-advanced > [class*="col-"] {
    min-height: 0;
    display: flex;
    flex-direction: column;
}
#modal-neuer-ausbildungstyp .ausbildungstyp-advanced .form-group,
#modal-edit-ausbildungstypen .ausbildungstyp-advanced .form-group {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}
@media (min-width: 992px) {
    /* einzelne Flex-Zeile, deren Höhe = Modal-Resthöhe → Spalten/Tabellen begrenzt */
    #modal-neuer-ausbildungstyp .ausbildungstyp-advanced,
    #modal-edit-ausbildungstypen .ausbildungstyp-advanced {
        flex-wrap: nowrap;
    }
}
@media (max-width: 991.98px) {
    /* gestapelt (mobil): normales Modalverhalten, Tabellen mit Maximalhöhe */
    #modal-neuer-ausbildungstyp .modal-content,
    #modal-edit-ausbildungstypen .modal-content {
        max-height: none;
    }
    #modal-neuer-ausbildungstyp .modal-body,
    #modal-edit-ausbildungstypen .modal-body {
        display: block;
        overflow: visible;
    }
    #modal-neuer-ausbildungstyp .ausbildungstyp-advanced .table-responsive,
    #modal-edit-ausbildungstypen .ausbildungstyp-advanced .table-responsive {
        flex: none;
        max-height: 50vh;
    }
}

#modal-neuer-ausbildungstyp .table,
#modal-edit-ausbildungstypen .table {
    margin-bottom: 0 !important;
}

#modal-neuer-ausbildungstyp .table thead th,
#modal-edit-ausbildungstypen .table thead th {
    padding: 12px 14px;
    border-top: 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: #f8fafc;
    /* app.css setzt global `th { opacity: 0.7 }`. Dadurch war der sticky
       Tabellenkopf halb durchsichtig und der darunter scrollende Inhalt schien
       durch. Hier wieder voll deckend machen. */
    opacity: 1;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    /* bleibt beim internen Scrollen der Tabelle oben sichtbar */
    position: sticky;
    top: 0;
    z-index: 5;
}

#modal-neuer-ausbildungstyp .table tbody td,
#modal-edit-ausbildungstypen .table tbody td {
    padding: 12px 14px;
    border-top-color: rgba(15, 23, 42, 0.06);
    color: #0f172a;
    background: #fff;
    vertical-align: middle;
}

#modal-neuer-ausbildungstyp .ausbildungstypen-kategorie-table,
#modal-edit-ausbildungstypen .ausbildungstypen-kategorie-table,
#modal-neuer-ausbildungstyp .ausbildungstypen-rlp-table,
#modal-edit-ausbildungstypen .ausbildungstypen-rlp-table {
    table-layout: fixed;
}

#modal-neuer-ausbildungstyp .ausbildungstypen-kategorie-table td:last-child,
#modal-edit-ausbildungstypen .ausbildungstypen-kategorie-table td:last-child {
    width: 130px;
    min-width: 130px;
}

#modal-neuer-ausbildungstyp .ausbildungstypen-rlp-table .rlp-stunden,
#modal-edit-ausbildungstypen .ausbildungstypen-rlp-table .rlp-stunden {
    min-width: 96px;
    text-align: right;
}

#modal-neuer-ausbildungstyp .ausbildungstypen-rlp-table .rlp-block-color,
#modal-edit-ausbildungstypen .ausbildungstypen-rlp-table .rlp-block-color {
    min-width: 72px;
}

.ausbildungstypen-rlp-section {
    display: none;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

#modal-neuer-ausbildungstyp .remove-rahmenlehrplan-row,
#modal-edit-ausbildungstypen .remove-rahmenlehrplan-row {
    border-radius: 9px;
}

/* Jahrgaenge */

.jahrgaenge-page .message-hub-main > div[class$="-container"] {
    margin-top: 0 !important;
}

.jahrgaenge-page .dx-datagrid-rowsview .dx-row > td:last-child,
.jahrgaenge-page .dx-datagrid-headers .dx-header-row > td:last-child {
    padding-left: 6px !important;
    padding-right: 6px !important;
    text-align: center;
}

.pba-jahrgaenge-modal .modal-dialog {
    max-width: 980px;
}

.pba-jahrgaenge-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pba-jahrgaenge-field {
    margin-bottom: 0;
}

.pba-jahrgaenge-form .col-form-label {
    color: #475569;
    font-weight: 600;
}

.pba-jahrgaenge-lehrjahre {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    padding: 12px;
    background: #f8fafc;
}

.pba-jahrgaenge-row {
    margin: 0 0 8px;
    padding: 8px 10px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    background: #fff;
}

.pba-jahrgaenge-row:last-child {
    margin-bottom: 0;
}

.pba-jahrgaenge-row .custom-select,
.pba-jahrgaenge-row .form-control {
    min-height: 38px;
}

.pba-jahrgaenge-lehrjahr-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 94px;
    border-radius: 999px;
    background: rgba(var(--pba-accent-rgb, 28, 82, 36), 0.14) !important;
    color: var(--pba-accent, var(--connie-orange));
}

.pba-jahrgaenge-row .ausbildungsjahr-dates {
    display: inline-block;
    font-size: 12px;
    color: #64748b !important;
}

.pba-jahrgaenge-row .remove-row,
.pba-jahrgaenge-add-row {
    border-radius: 9px;
}

.pba-jahrgaenge-form .alert {
    margin-bottom: 10px;
}

/* Auszubildende */

.auszubildende-page .message-hub-main > div[class$="-container"] {
    margin-top: 0 !important;
}

.auszubildende-gps-wrap {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.auszubildende-gps-btn {
    color: var(--pba-button, var(--connie-orange)) !important;
    border: 1px solid var(--pba-button, var(--connie-orange)) !important;
    border-radius: 0.35rem;
    background: transparent !important;
    opacity: 0.9;
    height: 38px;
    min-height: 38px;
    box-shadow: none;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease, transform 0.2s ease;
}

.auszubildende-gps-btn:hover,
.auszubildende-gps-btn:focus {
    color: var(--pba-button-contrast, #fff) !important;
    background-color: var(--pba-button, var(--connie-orange)) !important;
    border-color: var(--pba-button, var(--connie-orange)) !important;
    opacity: 1;
    transform: translateY(-1px);
}

.auszubildende-page .badge.badge-pill {
    border-radius: 999px;
    padding: 0.32rem 0.6rem;
}

.auszubildende-modal .modal-dialog.auszubildende-modal-xl-dialog {
    max-width: min(1700px, 96vw);
}

.auszubildende-modal .auszubildende-modal-body {
    padding-top: 12px;
}

.auszubildende-modal .auszubildende-modal-body-relative {
    position: relative;
}

.auszubildende-modal .auszubildende-panel {
    background: #fcfcfc;
    border-color: rgba(15, 23, 42, 0.08) !important;
}

.auszubildende-modal .auszubildende-panel-fullheight {
    height: 100%;
}

.auszubildende-modal .auszubildende-partner-area {
    max-height: 62vh;
    overflow: auto;
}

.auszubildende-modal #azubi-partner-rows .btn {
    border-radius: 8px;
}

/* Partner Betrieb */

.partner-betrieb-page .message-hub-main > div[class$="-container"] {
    margin-top: 0 !important;
}

.partner-betrieb-page-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.partner-betrieb-page-toolbar .partner-betrieb-top-btn {
    color: var(--pba-button, var(--connie-orange)) !important;
    border: 1px solid var(--pba-button, var(--connie-orange)) !important;
    background: transparent !important;
    border-radius: 0.35rem;
    min-height: 38px;
    box-shadow: none;
    opacity: 0.9;
    margin-right: 0 !important;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease, transform 0.2s ease;
}

.partner-betrieb-page-toolbar .partner-betrieb-top-btn:hover,
.partner-betrieb-page-toolbar .partner-betrieb-top-btn:focus {
    color: var(--pba-button-contrast, #fff) !important;
    background-color: var(--pba-button, var(--connie-orange)) !important;
    border-color: var(--pba-button, var(--connie-orange)) !important;
    opacity: 1;
    transform: translateY(-1px);
}

.partner-betrieb-page .partner-betrieb-multimenu-wrap {
    margin-left: 0;
}

.partner-betrieb-page .partner-betrieb-detail-card,
.partner-betrieb-page .partner-betrieb-detail-body {
    white-space: normal;
}

.partner-betrieb-page .partner-betrieb-detail-summary {
    cursor: pointer;
}

.partner-betrieb-page .partner-betrieb-break-anywhere {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.partner-betrieb-page .partner-betrieb-color-badge {
    display: inline-block;
    vertical-align: middle;
}

.partner-betrieb-page .partner-betrieb-gps-flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.partner-betrieb-page .partner-betrieb-kategorien-inline {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    white-space: nowrap;
    line-height: 1.3;
    max-width: 100%;
}

.partner-betrieb-page .partner-betrieb-kategorien-inline.is-expanded {
    display: flex;
    flex-wrap: wrap;
    white-space: normal;
}

.partner-betrieb-page .partner-betrieb-kategorien-toggle {
    font-size: 12px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    vertical-align: middle;
    text-decoration: none;
}

.partner-betrieb-page .partner-betrieb-kategorien-toggle:hover {
    text-decoration: none;
}

.partner-betrieb-map-popup {
    min-width: 180px;
}

.partner-betrieb-map-canvas {
    height: 65vh;
    min-height: 420px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #f8fafc;
}

.partner-betrieb-progress {
    height: 22px;
}

.partner-betrieb-modal .modal-dialog.modal-xl {
    max-width: min(1500px, 96vw);
}

.partner-betrieb-modal .modal-footer {
    gap: 10px;
}

.partner-betrieb-modal .modal-footer .btn,
.partner-betrieb-modal [id^="btn-"],
.partner-betrieb-modal .btn-outline-primary,
.partner-betrieb-modal .btn-outline-secondary {
    border-radius: 10px;
    min-height: 38px;
    padding: 0.4rem 0.9rem;
    font-weight: 600;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.partner-betrieb-modal .modal-footer .btn:focus,
.partner-betrieb-modal .modal-footer .btn:focus-visible,
.partner-betrieb-modal [id^="btn-"]:focus,
.partner-betrieb-modal [id^="btn-"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--pba-button-rgb, 28, 82, 36), 0.2) !important;
}

.partner-betrieb-modal .modal-footer .btn[data-dismiss="modal"],
.partner-betrieb-modal .modal-footer .btn.btn-secondary,
.partner-betrieb-modal .btn-outline-secondary {
    color: #475569 !important;
    background: #fff !important;
    border-color: rgba(15, 23, 42, 0.2) !important;
}

.partner-betrieb-modal .modal-footer .btn[data-dismiss="modal"]:hover,
.partner-betrieb-modal .modal-footer .btn.btn-secondary:hover,
.partner-betrieb-modal .btn-outline-secondary:hover {
    color: #0f172a !important;
    background: #f8fafc !important;
    border-color: rgba(15, 23, 42, 0.3) !important;
}

.partner-betrieb-modal .modal-footer .btn[type="submit"],
.partner-betrieb-modal .modal-footer .btn.btn-primary,
.partner-betrieb-modal .btn-outline-primary {
    color: var(--pba-button-contrast, #fff) !important;
    background: var(--pba-button, var(--connie-orange)) !important;
    border-color: var(--pba-button, var(--connie-orange)) !important;
}

.partner-betrieb-modal .modal-footer .btn[type="submit"]:hover,
.partner-betrieb-modal .modal-footer .btn.btn-primary:hover,
.partner-betrieb-modal .btn-outline-primary:hover {
    filter: brightness(0.94);
    transform: translateY(-1px);
}

.partner-modal-compact .modal-body {
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.partner-modal-compact .modal-body .form-group.row {
    display: inline-flex;
    width: 49%;
    vertical-align: top;
    margin: 0 1% .45rem 0;
    margin-left: 0;
    margin-right: 0;
}

.partner-modal-compact .modal-body .form-group.row:nth-of-type(2n) {
    margin-right: 0;
}

.partner-modal-compact .modal-body .form-group.row.partner-map-row {
    width: 100%;
    margin-right: 0;
}

.partner-modal-compact .modal-body .col-form-label {
    padding-top: .35rem;
    padding-bottom: .35rem;
    font-size: .9rem;
}

.partner-modal-compact .modal-body .form-control,
.partner-modal-compact .modal-body .custom-select {
    height: 34px;
    padding: .25rem .5rem;
    font-size: .9rem;
}

.partner-modal-compact .modal-body .select2-container {
    width: 100% !important;
}

.partner-modal-compact .modal-body .select2-container--default .select2-selection--multiple {
    min-height: 34px;
}

.partner-modal-compact .modal-body hr {
    clear: both;
    margin: .35rem 0 .55rem;
}

.partner-modal-compact-textarea {
    height: auto !important;
}

.partner-map-frame {
    display: none;
    width: 100%;
    height: 260px;
    border: 1px solid #ced4da;
    border-radius: .25rem;
}

@media (max-width: 991.98px) {
    .partner-modal-compact .modal-body .form-group.row {
        width: 100%;
        margin-right: 0;
    }
}

/* Plaetze Betrieb */

.plaetze-betrieb-page .message-hub-main > div[class$="-container"] {
    margin-top: 0 !important;
}

.plaetze-partner-page .message-hub-main > div[class$="-container"] {
    margin-top: 0 !important;
}

.plaetze-betrieb-page .plaetze-betrieb-color-badge {
    display: inline-block;
    vertical-align: middle;
}

.plaetze-partner-page .badge.badge-pill {
    display: inline-block;
    vertical-align: middle;
}

.plaetze-modal .modal-footer {
    gap: 10px;
}

.plaetze-modal .modal-footer .btn,
.plaetze-modal [id^="btn-"] {
    border-radius: 10px;
    min-height: 38px;
    padding: 0.4rem 0.9rem;
    font-weight: 600;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.plaetze-modal .modal-footer .btn:focus,
.plaetze-modal .modal-footer .btn:focus-visible,
.plaetze-modal [id^="btn-"]:focus,
.plaetze-modal [id^="btn-"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--pba-button-rgb, 28, 82, 36), 0.2) !important;
}

.plaetze-modal .modal-footer .btn[data-dismiss="modal"],
.plaetze-modal .modal-footer .btn.btn-secondary {
    color: #475569 !important;
    background: #fff !important;
    border-color: rgba(15, 23, 42, 0.2) !important;
}

.plaetze-modal .modal-footer .btn[data-dismiss="modal"]:hover,
.plaetze-modal .modal-footer .btn.btn-secondary:hover {
    color: #0f172a !important;
    background: #f8fafc !important;
    border-color: rgba(15, 23, 42, 0.3) !important;
}

.plaetze-modal .modal-footer .btn[type="submit"],
.plaetze-modal .modal-footer .btn.btn-primary {
    color: var(--pba-button-contrast, #fff) !important;
    background: var(--pba-button, var(--connie-orange)) !important;
    border-color: var(--pba-button, var(--connie-orange)) !important;
}

.plaetze-modal .modal-footer .btn[type="submit"]:hover,
.plaetze-modal .modal-footer .btn.btn-primary:hover {
    filter: brightness(0.94);
    transform: translateY(-1px);
}

.plaetze-modal-footer-split {
    justify-content: space-between;
}

.plaetze-counter-wrap {
    gap: 8px;
}

.plaetze-counter-input {
    width: 80px;
}

@media (max-width: 767.98px) {
    .plaetze-modal-footer-split {
        flex-direction: column;
        align-items: stretch;
    }

    .plaetze-modal-footer-split > div:last-child {
        display: flex;
        gap: 8px;
        justify-content: flex-end;
    }
}

/* Ausbildungskatalog / Kategorien / Kennzeichen */

.ausbildungskatalog-page .message-hub-main > div[class$="-container"],
.kategorien-page .message-hub-main > div[class$="-container"],
.kennzeichen-page .message-hub-main > div[class$="-container"],
.module-page .message-hub-main > div[class$="-container"],
.kompetenzen-page .message-hub-main > div[class$="-container"],
.benutzer-betrieb-page .message-hub-main > div[class$="-container"],
.benutzer-partner-page .message-hub-main > div[class$="-container"],
.snapshots-page .message-hub-main > div[class$="-container"],
.learnbooks-page .message-hub-main > div[class$="-container"] {
    margin-top: 0 !important;
}

.ausbildungskatalog-page-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.benutzer-betrieb-page-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.benutzer-csv-import-btn {
    color: var(--pba-button, var(--connie-orange)) !important;
    border: 1px solid var(--pba-button, var(--connie-orange)) !important;
    background: transparent !important;
    border-radius: 0.35rem;
    min-height: 38px;
    box-shadow: none;
    opacity: 0.9;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease, transform 0.2s ease;
}

.benutzer-csv-import-btn:hover,
.benutzer-csv-import-btn:focus {
    color: var(--pba-button-contrast, #fff) !important;
    background-color: var(--pba-button, var(--connie-orange)) !important;
    border-color: var(--pba-button, var(--connie-orange)) !important;
    opacity: 1;
    transform: translateY(-1px);
}

.csv-import-page .message-hub-main {
    padding: 18px;
}

.csv-import-hero-note {
    margin-top: 4px;
    color: #64748b;
    font-size: 14px;
    line-height: 1.35;
}

.csv-import-grid {
    margin-top: 2px;
}

.csv-import-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.csv-import-card-head {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: #f8fafc;
}

.csv-import-card-head.is-accent {
    background: var(--pba-accent, var(--connie-orange));
    color: var(--pba-accent-contrast, #fff);
    border-bottom-color: transparent;
}

.csv-import-card-body {
    padding: 16px;
}

.csv-import-page .form-control,
.csv-import-page select.form-control {
    border-radius: 7px;
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: none;
}

.csv-import-page .form-control:focus,
.csv-import-page select.form-control:focus {
    border-color: rgba(51, 65, 85, 0.35);
    box-shadow: 0 0 0 3px rgba(51, 65, 85, 0.08);
}

.csv-import-template-btn {
    color: var(--pba-button, var(--connie-orange)) !important;
    border: 1px solid var(--pba-button, var(--connie-orange)) !important;
    background: transparent !important;
    border-radius: 0.35rem;
    min-height: 32px;
    box-shadow: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.csv-import-template-btn:hover,
.csv-import-template-btn:focus {
    color: var(--pba-button-contrast, #fff) !important;
    background-color: var(--pba-button, var(--connie-orange)) !important;
    border-color: var(--pba-button, var(--connie-orange)) !important;
    transform: translateY(-1px);
}

.csv-import-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.csv-import-actions .btn {
    border-radius: 8px;
    min-height: 38px;
    padding: 0.4rem 0.9rem;
    font-weight: 600;
    opacity: 0.9;
    box-shadow: none !important;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease, transform 0.2s ease;
}

.csv-import-actions .btn.btn-primary {
    color: var(--pba-button-contrast, #fff) !important;
    background: var(--pba-button, var(--connie-orange)) !important;
    border-color: var(--pba-button, var(--connie-orange)) !important;
}

.csv-import-actions .btn.btn-primary:hover,
.csv-import-actions .btn.btn-primary:focus {
    opacity: 1;
    filter: brightness(0.94);
    transform: translateY(-1px);
}

.csv-import-actions .btn.btn-outline-secondary {
    color: #475569 !important;
    background: #fff !important;
    border-color: rgba(15, 23, 42, 0.2) !important;
}

.csv-import-actions .btn.btn-outline-secondary:hover,
.csv-import-actions .btn.btn-outline-secondary:focus {
    color: #0f172a !important;
    background: #f8fafc !important;
    border-color: rgba(15, 23, 42, 0.3) !important;
    opacity: 1;
    transform: translateY(-1px);
}

.csv-preview-header {
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 8px;
    padding: 10px 12px;
    color: #334155;
    font-size: 13px;
}

.csv-preview-sample {
    background: #0f172a;
    color: #e2e8f0;
    border: 1px solid rgba(15, 23, 42, 0.3);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
}

/* Import result block */
.csv-import-result {
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

.csv-import-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    gap: 12px;
}

.csv-import-result-head.is-success {
    background: #f0fdf4;
    border-bottom: 1px solid #bbf7d0;
}

.csv-import-result-head.is-error {
    background: #fef2f2;
    border-bottom: 1px solid #fecaca;
}

.csv-import-result-head.is-partial {
    background: #fffbeb;
    border-bottom: 1px solid #fde68a;
}

.csv-import-result-title {
    font-weight: 600;
    font-size: 13.5px;
    color: #1e293b;
}

.csv-import-result-counts {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.csv-import-result-ok {
    color: #16a34a;
    font-weight: 500;
}

.csv-import-result-sep {
    color: #94a3b8;
}

.csv-import-result-err {
    color: #dc2626;
    font-weight: 500;
}

.csv-import-errors-details {
    background: #fff;
}

.csv-import-errors-summary {
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.csv-import-errors-summary::-webkit-details-marker {
    display: none;
}

.csv-import-errors-summary::before {
    content: '▶';
    font-size: 10px;
    color: #94a3b8;
    transition: transform 0.15s ease;
    display: inline-block;
}

details[open] .csv-import-errors-summary::before {
    transform: rotate(90deg);
}

.csv-import-errors-list {
    margin: 0;
    padding: 10px 16px 10px 32px;
    list-style: disc;
    font-size: 12.5px;
    color: #475569;
    line-height: 1.7;
    max-height: 240px;
    overflow-y: auto;
}

.csv-import-errors-list li {
    padding: 1px 0;
}

.ausbildungskatalog-import-btn {
    color: var(--pba-button, var(--connie-orange)) !important;
    border: 1px solid var(--pba-button, var(--connie-orange)) !important;
    background: transparent !important;
    border-radius: 0.35rem;
    min-height: 38px;
    box-shadow: none;
    opacity: 0.9;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease, transform 0.2s ease;
}

.ausbildungskatalog-import-btn:hover,
.ausbildungskatalog-import-btn:focus {
    color: var(--pba-button-contrast, #fff) !important;
    background-color: var(--pba-button, var(--connie-orange)) !important;
    border-color: var(--pba-button, var(--connie-orange)) !important;
    opacity: 1;
    transform: translateY(-1px);
}

.kategorien-page .kategorien-color-badge,
.kennzeichen-page .kennzeichen-color-badge {
    font-size: 0.8em;
}

.kompetenzen-page .komp-text {
    max-width: 520px;
    display: block;
    line-height: 1.35;
}

.kompetenzen-page .komp-toggle {
    font-size: 0.85em;
    margin-left: 6px;
}

.kompetenzen-page .komp-view {
    font-weight: 600;
}

.ausbildungskatalog-modal .modal-footer,
.kategorien-modal .modal-footer,
.kennzeichen-modal .modal-footer,
.module-modal .modal-footer,
.kompetenzen-modal .modal-footer,
.benutzer-modal .modal-footer,
.snapshots-modal .modal-footer,
.interactions-modal .modal-footer {
    gap: 10px;
}

.ausbildungskatalog-modal .modal-footer .btn,
.kategorien-modal .modal-footer .btn,
.kennzeichen-modal .modal-footer .btn,
.module-modal .modal-footer .btn,
.kompetenzen-modal .modal-footer .btn,
.benutzer-modal .modal-footer .btn,
.snapshots-modal .modal-footer .btn,
.interactions-modal .modal-footer .btn {
    border-radius: 10px;
    min-height: 38px;
    padding: 0.4rem 0.9rem;
    font-weight: 600;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.ausbildungskatalog-modal .modal-footer .btn:focus,
.ausbildungskatalog-modal .modal-footer .btn:focus-visible,
.kategorien-modal .modal-footer .btn:focus,
.kategorien-modal .modal-footer .btn:focus-visible,
.kennzeichen-modal .modal-footer .btn:focus,
.kennzeichen-modal .modal-footer .btn:focus-visible,
.module-modal .modal-footer .btn:focus,
.module-modal .modal-footer .btn:focus-visible,
.kompetenzen-modal .modal-footer .btn:focus,
.kompetenzen-modal .modal-footer .btn:focus-visible,
.benutzer-modal .modal-footer .btn:focus,
.benutzer-modal .modal-footer .btn:focus-visible,
.snapshots-modal .modal-footer .btn:focus,
.snapshots-modal .modal-footer .btn:focus-visible,
.interactions-modal .modal-footer .btn:focus,
.interactions-modal .modal-footer .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--pba-button-rgb, 28, 82, 36), 0.2) !important;
}

.ausbildungskatalog-modal .modal-footer .btn[data-dismiss="modal"],
.ausbildungskatalog-modal .modal-footer .btn.btn-secondary,
.kategorien-modal .modal-footer .btn[data-dismiss="modal"],
.kategorien-modal .modal-footer .btn.btn-secondary,
.kennzeichen-modal .modal-footer .btn[data-dismiss="modal"],
.kennzeichen-modal .modal-footer .btn.btn-secondary,
.module-modal .modal-footer .btn[data-dismiss="modal"],
.module-modal .modal-footer .btn.btn-secondary,
.kompetenzen-modal .modal-footer .btn[data-dismiss="modal"],
.kompetenzen-modal .modal-footer .btn.btn-secondary,
.benutzer-modal .modal-footer .btn[data-dismiss="modal"],
.benutzer-modal .modal-footer .btn.btn-secondary,
.snapshots-modal .modal-footer .btn[data-dismiss="modal"],
.snapshots-modal .modal-footer .btn.btn-secondary,
.interactions-modal .modal-footer .btn[data-dismiss="modal"],
.interactions-modal .modal-footer .btn.btn-secondary {
    color: #475569 !important;
    background: #fff !important;
    border-color: rgba(15, 23, 42, 0.2) !important;
}

.ausbildungskatalog-modal .modal-footer .btn[data-dismiss="modal"]:hover,
.ausbildungskatalog-modal .modal-footer .btn.btn-secondary:hover,
.kategorien-modal .modal-footer .btn[data-dismiss="modal"]:hover,
.kategorien-modal .modal-footer .btn.btn-secondary:hover,
.kennzeichen-modal .modal-footer .btn[data-dismiss="modal"]:hover,
.kennzeichen-modal .modal-footer .btn.btn-secondary:hover,
.module-modal .modal-footer .btn[data-dismiss="modal"]:hover,
.module-modal .modal-footer .btn.btn-secondary:hover,
.kompetenzen-modal .modal-footer .btn[data-dismiss="modal"]:hover,
.kompetenzen-modal .modal-footer .btn.btn-secondary:hover,
.benutzer-modal .modal-footer .btn[data-dismiss="modal"]:hover,
.benutzer-modal .modal-footer .btn.btn-secondary:hover,
.snapshots-modal .modal-footer .btn[data-dismiss="modal"]:hover,
.snapshots-modal .modal-footer .btn.btn-secondary:hover,
.interactions-modal .modal-footer .btn[data-dismiss="modal"]:hover,
.interactions-modal .modal-footer .btn.btn-secondary:hover {
    color: #0f172a !important;
    background: #f8fafc !important;
    border-color: rgba(15, 23, 42, 0.3) !important;
}

.ausbildungskatalog-modal .modal-footer .btn[type="submit"],
.ausbildungskatalog-modal .modal-footer .btn.btn-primary,
.ausbildungskatalog-modal .modal-footer .btn.btn-success,
.kategorien-modal .modal-footer .btn[type="submit"],
.kategorien-modal .modal-footer .btn.btn-primary,
.kennzeichen-modal .modal-footer .btn[type="submit"],
.kennzeichen-modal .modal-footer .btn.btn-primary,
.module-modal .modal-footer .btn[type="submit"],
.module-modal .modal-footer .btn.btn-primary,
.kompetenzen-modal .modal-footer .btn[type="submit"],
.kompetenzen-modal .modal-footer .btn.btn-primary,
.benutzer-modal .modal-footer .btn[type="submit"],
.benutzer-modal .modal-footer .btn.btn-primary,
.snapshots-modal .modal-footer .btn[type="submit"],
.snapshots-modal .modal-footer .btn.btn-primary,
.interactions-modal .modal-footer .btn[type="submit"],
.interactions-modal .modal-footer .btn.btn-primary {
    color: var(--pba-button-contrast, #fff) !important;
    background: var(--pba-button, var(--connie-orange)) !important;
    border-color: var(--pba-button, var(--connie-orange)) !important;
    opacity: 1 !important;
}

.kompetenzen-modal .modal-footer .btn[type="submit"]:disabled,
.kompetenzen-modal .modal-footer .btn.btn-primary:disabled,
.benutzer-modal .modal-footer .btn[type="submit"]:disabled,
.benutzer-modal .modal-footer .btn.btn-primary:disabled,
.snapshots-modal .modal-footer .btn[type="submit"]:disabled,
.snapshots-modal .modal-footer .btn.btn-primary:disabled,
.interactions-modal .modal-footer .btn[type="submit"]:disabled,
.interactions-modal .modal-footer .btn.btn-primary:disabled {
    background: #cbd5e1 !important;
    border-color: #cbd5e1 !important;
    color: #94a3b8 !important;
    cursor: not-allowed;
    pointer-events: auto;
}

.ausbildungskatalog-modal .modal-footer .btn[type="submit"]:hover,
.ausbildungskatalog-modal .modal-footer .btn.btn-primary:hover,
.ausbildungskatalog-modal .modal-footer .btn.btn-success:hover,
.kategorien-modal .modal-footer .btn[type="submit"]:hover,
.kategorien-modal .modal-footer .btn.btn-primary:hover,
.kennzeichen-modal .modal-footer .btn[type="submit"]:hover,
.kennzeichen-modal .modal-footer .btn.btn-primary:hover,
.module-modal .modal-footer .btn[type="submit"]:hover,
.module-modal .modal-footer .btn.btn-primary:hover,
.kompetenzen-modal .modal-footer .btn[type="submit"]:hover,
.kompetenzen-modal .modal-footer .btn.btn-primary:hover,
.benutzer-modal .modal-footer .btn[type="submit"]:hover,
.benutzer-modal .modal-footer .btn.btn-primary:hover,
.snapshots-modal .modal-footer .btn[type="submit"]:hover,
.snapshots-modal .modal-footer .btn.btn-primary:hover,
.interactions-modal .modal-footer .btn[type="submit"]:hover,
.interactions-modal .modal-footer .btn.btn-primary:hover {
    filter: brightness(0.94);
    transform: translateY(-1px);
}

/* Auswertung Auslastung */

.auswertung-auslastung-page .auswertung-auslastung-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.auswertung-auslastung-page .auswertung-auslastung-toolbar h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}

.auswertung-auslastung-page .auswertung-filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    margin-right: 8px;
}

.auswertung-auslastung-page .auswertung-filter-group .btn + .btn {
    margin-left: 0;
}

.auswertung-auslastung-page .auswertung-auslastung-toolbar .pba-grid-toolbar-btn {
    border-radius: 0.35rem;
    min-height: 38px;
    padding: 0.35rem 0.82rem;
    font-size: 1rem;
    font-weight: 400;
    color: var(--pba-button, var(--connie-orange)) !important;
    border: 1px solid var(--pba-button, var(--connie-orange)) !important;
    background: transparent !important;
    box-shadow: none;
    opacity: 0.9;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease, transform 0.2s ease;
}

.auswertung-auslastung-page .auswertung-auslastung-toolbar .pba-grid-toolbar-btn:hover,
.auswertung-auslastung-page .auswertung-auslastung-toolbar .pba-grid-toolbar-btn:focus {
    color: var(--pba-button-contrast, #fff) !important;
    background: var(--pba-button, var(--connie-orange)) !important;
    border-color: var(--pba-button, var(--connie-orange)) !important;
    opacity: 1;
    transform: translateY(-1px);
}

.auswertung-auslastung-page .auswertung-filter-group .auswertung-filter-btn.active {
    color: var(--pba-button-contrast, #fff) !important;
    background: var(--pba-button, var(--connie-orange)) !important;
    border-color: var(--pba-button, var(--connie-orange)) !important;
}

.auswertung-auslastung-page #auswertungDataGrid {
    border-radius: 10px;
}

.auswertung-auslastung-page .auswertung-auslastung-empty {
    margin: 0;
    border-radius: 10px;
}

.auswertung-modal .modal-footer {
    gap: 10px;
}

.auswertung-modal .modal-footer .btn {
    border-radius: 10px;
    min-height: 38px;
    padding: 0.4rem 0.9rem;
    font-weight: 600;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-shadow: none !important;
}

.auswertung-modal .modal-footer .btn:focus,
.auswertung-modal .modal-footer .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--pba-button-rgb, 28, 82, 36), 0.2) !important;
}

.auswertung-modal .modal-footer .btn[data-dismiss="modal"],
.auswertung-modal .modal-footer .btn.btn-secondary {
    color: #475569 !important;
    background: #fff !important;
    border-color: rgba(15, 23, 42, 0.2) !important;
}

.auswertung-modal .modal-footer .btn[data-dismiss="modal"]:hover,
.auswertung-modal .modal-footer .btn.btn-secondary:hover {
    color: #0f172a !important;
    background: #f8fafc !important;
    border-color: rgba(15, 23, 42, 0.3) !important;
}

.auswertung-modal .modal-footer .btn[type="submit"],
.auswertung-modal .modal-footer .btn.btn-primary {
    color: var(--pba-button-contrast, #fff) !important;
    background: var(--pba-button, var(--connie-orange)) !important;
    border-color: var(--pba-button, var(--connie-orange)) !important;
}

.auswertung-modal .modal-footer .btn[type="submit"]:hover,
.auswertung-modal .modal-footer .btn.btn-primary:hover {
    filter: brightness(0.94);
    transform: translateY(-1px);
}

/* Platzbelegung */

.platzbelegung-page .platzbelegung-filter-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.platzbelegung-page .platzbelegung-filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
}

.platzbelegung-page .platzbelegung-filter-group .btn + .btn {
    margin-left: 0;
}

.platzbelegung-page .platzbelegung-filter-btn {
    border-radius: 10px;
    min-height: 38px;
    padding: 0.35rem 0.82rem;
    font-size: 1rem;
    font-weight: 400;
    color: var(--pba-button, var(--connie-orange)) !important;
    border: 1px solid var(--pba-button, var(--connie-orange)) !important;
    background: #fff !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.platzbelegung-page .platzbelegung-filter-btn:hover,
.platzbelegung-page .platzbelegung-filter-btn:focus {
    color: var(--pba-button-contrast, #fff) !important;
    background: var(--pba-button, var(--connie-orange)) !important;
    border-color: var(--pba-button, var(--connie-orange)) !important;
    transform: translateY(-1px);
}

.platzbelegung-page .platzbelegung-filter-btn.active {
    color: var(--pba-button-contrast, #fff) !important;
    background: var(--pba-button, var(--connie-orange)) !important;
    border-color: var(--pba-button, var(--connie-orange)) !important;
}

.platzbelegung-page .dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.platzbelegung-page .dashboard-stat-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.05);
    padding: 16px 18px;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.platzbelegung-page .dashboard-stat-label {
    color: #64748b;
    font-size: 13px;
    line-height: 1.35;
}

.platzbelegung-page .dashboard-stat-value {
    margin: 0;
    font-size: 28px;
    line-height: 1;
    font-weight: 800;
    color: #0f172a;
}

.platzbelegung-page .dashboard-stat-tone {
    color: var(--pba-accent, #334155);
}

.platzbelegung-page .platzbelegung-grid-panel {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.platzbelegung-page .platzbelegung-grid-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    color: #0f172a;
    background: #f8fafc;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.platzbelegung-page .platzbelegung-grid-panel-head h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.platzbelegung-page .platzbelegung-grid-filter-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    padding: 8px 10px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 10px;
    background: #fff;
    max-width: 100%;
}

.platzbelegung-page .platzbelegung-grid-filter-wrap label {
    color: #475569;
    font-weight: 600;
    margin-right: 0 !important;
    white-space: nowrap;
}

.platzbelegung-page .platzbelegung-partner-filter.form-control {
    min-width: 280px;
    width: min(560px, 52vw);
    max-width: 100%;
    border-radius: 8px;
    border-color: rgba(15, 23, 42, 0.15);
    box-shadow: none;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.platzbelegung-page .platzbelegung-partner-filter.form-control:focus {
    border-color: rgba(15, 23, 42, 0.28);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16);
}

.platzbelegung-page .platzbelegung-grid-panel-body {
    padding: 14px;
}

.platzbelegung-page #platzbelegungGrid {
    border-radius: 10px;
}

.platzbelegung-page .platzbelegung-utilization {
    width: 108px;
    height: 20px;
    border-radius: 999px;
    background: #e2e8f0;
    margin: 0 auto;
    overflow: hidden;
}

.platzbelegung-page .platzbelegung-utilization-bar {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    transition: width 0.2s ease;
}

.platzbelegung-page .platzbelegung-utilization-bar.is-high {
    background: #16a34a;
}

.platzbelegung-page .platzbelegung-utilization-bar.is-medium {
    background: #d97706;
}

.platzbelegung-page .platzbelegung-utilization-bar.is-low {
    background: #dc2626;
}

@media (max-width: 1199.98px) {
    .platzbelegung-page .dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .platzbelegung-page .dashboard-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .platzbelegung-page .platzbelegung-filter-toolbar {
        justify-content: flex-start;
    }

    .platzbelegung-page .platzbelegung-partner-filter.form-control {
        min-width: 0;
        width: 100%;
    }

    .platzbelegung-page .platzbelegung-grid-filter-wrap {
        width: 100%;
        flex-wrap: wrap;
        align-items: flex-start;
        padding: 10px;
    }

    .platzbelegung-page .platzbelegung-grid-filter-wrap label {
        width: 100%;
    }
}

/* Auswertung Matrix */

.auswertung-matrix-page {
    overflow-x: visible;
}

.auswertung-matrix-page .message-hub-main {
    padding: 14px;
}

/* Panelrahmen der Auswertungen. Die Kategorie-Auswertung nutzt bewusst DIESELBE
   Regel (statt einer Kopie), damit beide Seiten optisch nicht auseinanderlaufen. */
.auswertung-matrix-page .auswertung-matrix-panel,
.kategorie-matrix-page .auswertung-matrix-panel {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.auswertung-matrix-page .auswertung-matrix-panel-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.auswertung-matrix-page .auswertung-matrix-panel-head h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}

.auswertung-matrix-page .matrix-top-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
}

.auswertung-matrix-page .auswertung-matrix-panel-body,
.kategorie-matrix-page .auswertung-matrix-panel-body {
    position: relative;
    max-width: 100%;
    overflow-x: hidden;
    padding: 15px;
}

.auswertung-matrix-page .matrix-top-btn,
.auswertung-matrix-page .matrix-action-btn {
    border-radius: 10px;
    min-height: 38px;
    padding: 0.38rem 0.9rem;
    font-size: 1rem;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    box-shadow: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.auswertung-matrix-page .matrix-top-btn + .matrix-top-btn {
    margin-left: 0;
}

.auswertung-matrix-page .matrix-action-btn + .matrix-action-btn {
    margin-left: 0;
}

.auswertung-matrix-page .matrix-top-btn.btn-outline-secondary,
.auswertung-matrix-page .matrix-top-btn.btn-outline-primary,
.auswertung-matrix-page .matrix-action-btn.btn-outline-secondary {
    color: var(--pba-button, var(--connie-orange)) !important;
    border-color: var(--pba-button, var(--connie-orange)) !important;
    background: #fff !important;
}

.auswertung-matrix-page .matrix-top-btn.btn-outline-secondary:hover,
.auswertung-matrix-page .matrix-top-btn.btn-outline-primary:hover,
.auswertung-matrix-page .matrix-action-btn.btn-outline-secondary:hover {
    color: var(--pba-button-contrast, #fff) !important;
    border-color: var(--pba-button, var(--connie-orange)) !important;
    background: var(--pba-button, var(--connie-orange)) !important;
    transform: translateY(-1px);
}

.auswertung-matrix-page .matrix-top-btn.btn-primary,
.auswertung-matrix-page .matrix-action-btn.btn-primary {
    color: var(--pba-button-contrast, #fff) !important;
    border-color: var(--pba-button, var(--connie-orange)) !important;
    background: var(--pba-button, var(--connie-orange)) !important;
}

.auswertung-matrix-page .matrix-top-btn.btn-primary:hover,
.auswertung-matrix-page .matrix-action-btn.btn-primary:hover {
    filter: brightness(0.94);
    transform: translateY(-1px);
}

.auswertung-matrix-page .matrix-filter-row .matrix-filter-col {
    display: flex;
    flex-direction: column;
}

.auswertung-matrix-page .matrix-selects-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: min(100%, 1100px);
}

.auswertung-matrix-page .matrix-select-col {
    flex: 0 1 225px;
    min-width: 195px;
}

.auswertung-matrix-page .matrix-select-col-wide {
    flex-basis: 275px;
    min-width: 240px;
}

.auswertung-matrix-page .matrix-actions-col {
    margin-bottom: 0;
}

@media (min-width: 992px) {
    .auswertung-matrix-page .matrix-actions-col {
        align-items: flex-end;
    }

    .auswertung-matrix-page .matrix-actions-col .matrix-filter-actions {
        justify-content: flex-end;
    }
}

.auswertung-matrix-page .matrix-filter-label {
    min-height: 21px;
    margin-bottom: 6px;
}

.auswertung-matrix-page .matrix-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 38px;
}

@media (min-width: 2300px) {
    .auswertung-matrix-page .matrix-filter-actions {
        flex-wrap: nowrap;
        align-items: stretch;
    }

    .auswertung-matrix-page .matrix-top-actions {
        flex-wrap: nowrap;
    }

    .auswertung-matrix-page .matrix-action-btn,
    .auswertung-matrix-page .matrix-top-btn,
    .auswertung-matrix-page .matrix-actions-divider {
        flex: 0 0 auto;
    }
}

.auswertung-matrix-page .matrix-actions-divider {
    width: 1px;
    align-self: stretch;
    background: rgba(15, 23, 42, 0.16);
    margin: 0 2px;
}

.auswertung-matrix-page .matrix-dominant-check {
    display: none;
}

.auswertung-matrix-page .matrix-loading-overlay {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.5);
    align-items: center;
    justify-content: center;
}

.auswertung-matrix-page .matrix-loading-spinner {
    width: 3rem;
    height: 3rem;
}

.auswertung-matrix-page .matrix-table-wrap {
    max-height: calc(100vh - 480px);
    max-width: calc(100vw - 332px);
    overflow-x: auto;
    overflow-y: auto;
    position: relative;
    width: 100%;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 10px;
    -webkit-overflow-scrolling: touch;
}

.auswertung-matrix-page .matrix-table {
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin-bottom: 0;
}

.auswertung-matrix-page .matrix-table th,
.auswertung-matrix-page .matrix-table td {
    vertical-align: top;
    padding: 4px;
    font-size: 11px;
    border-color: #e9ecef;
}

.auswertung-matrix-page .matrix-table th {
    text-align: center;
}

.auswertung-matrix-page .matrix-sort-toggle {
    color: #212529;
    text-decoration: none !important;
    font-weight: 600;
}

.auswertung-matrix-page .matrix-sort-toggle:hover,
.auswertung-matrix-page .matrix-sort-toggle:focus {
    color: var(--pba-button, var(--connie-orange));
}

.auswertung-matrix-page .matrix-table thead th {
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: #f8f9fa !important;
    background-clip: padding-box;
    opacity: 1;
}

.auswertung-matrix-page .matrix-table th:first-child,
.auswertung-matrix-page .matrix-table td:first-child {
    width: 36px;
}

.auswertung-matrix-page .matrix-table th:nth-child(2),
.auswertung-matrix-page .matrix-table td:nth-child(2) {
    width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.auswertung-matrix-page .matrix-table .matrix-sticky-check,
.auswertung-matrix-page .matrix-table .matrix-sticky-azubi,
.auswertung-matrix-page .matrix-table .matrix-sticky-plan {
    position: sticky;
    background-color: #ffffff;
    background-clip: padding-box;
}

.auswertung-matrix-page .matrix-table .matrix-sticky-check {
    left: 0;
    width: 36px;
    z-index: 25;
}

.auswertung-matrix-page .matrix-table .matrix-sticky-azubi {
    left: 36px;
    width: 160px;
    z-index: 24;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.auswertung-matrix-page .matrix-table .matrix-sticky-plan {
    left: 196px;
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    z-index: 23;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.auswertung-matrix-page .matrix-table thead .matrix-sticky-check,
.auswertung-matrix-page .matrix-table thead .matrix-sticky-azubi,
.auswertung-matrix-page .matrix-table thead .matrix-sticky-plan {
    z-index: 30;
    background-color: #f8f9fa !important;
}

.auswertung-matrix-page .matrix-check-col {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
}

.auswertung-matrix-page .matrix-week {
    width: 35px;
    min-width: 35px;
    max-width: 35px;
    height: 80px;
    padding: 0;
    background-color: #f8f9fb !important;
    border-left: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    position: relative;
    opacity: 1;
}

.auswertung-matrix-page .matrix-week .week-label {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    transform-origin: center;
    white-space: nowrap;
    font-size: 9px;
    letter-spacing: 0.1px;
    color: #4b5563;
}

.auswertung-matrix-page .matrix-week-cell {
    background: #fcfcfd;
    padding: 2px;
    border-right: 1px solid #e5e7eb;
    overflow: hidden;
}

.auswertung-matrix-page .matrix-table tbody tr:nth-child(even) td {
    background: #ffffff;
}

.auswertung-matrix-page .matrix-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: stretch;
    width: 100%;
    min-width: 0;
}

.auswertung-matrix-page .matrix-badge {
    font-weight: 600;
    font-size: 11px;
    padding: 3px 5px;
    border-radius: 4px;
    display: block;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.auswertung-matrix-page .matrix-badge-summary {
    background: #6c757d;
}

.auswertung-matrix-page .select2-container {
    width: 100% !important;
}

@media (max-width: 1199.98px) {
    .auswertung-matrix-page .matrix-table-wrap {
        max-width: 100%;
    }
}

@media (max-width: 767.98px) {
    .auswertung-matrix-page .auswertung-matrix-panel-head {
        align-items: flex-start;
    }

    .auswertung-matrix-page .matrix-top-btn + .matrix-top-btn {
        margin-left: 6px;
    }

    .auswertung-matrix-page .matrix-actions-divider {
        display: none;
    }

    .auswertung-matrix-page .matrix-top-actions {
        width: 100%;
    }

    .auswertung-matrix-page .matrix-select-col,
    .auswertung-matrix-page .matrix-select-col-wide {
        flex-basis: 100%;
        min-width: 0;
    }

    .auswertung-matrix-page .matrix-table-wrap {
        max-height: calc(100vh - 420px);
    }
}

/* Einsatz Tagesdaten */

.tagesdaten-page .message-hub-main {
    padding: 14px;
}

.tagesdaten-page .tagesdaten-grid-panel {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.tagesdaten-page .tagesdaten-grid-panel-head {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.tagesdaten-page .tagesdaten-grid-panel-head h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}

.tagesdaten-page .tagesdaten-grid-panel-body {
    padding: 14px;
}

.tagesdaten-page #tagesdatenDataGrid {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    overflow: hidden;
}

.tagesdaten-page .tagesdaten-empty {
    margin: 0;
    border-radius: 10px;
}

/* Analytics Refresh */

.auswertung-auslastung-page,
.tagesdaten-page,
.auswertung-matrix-page,
.azubi-delta-page,
.platzbelegung-page,
.partner-freie-plaetze-page,
.kategorie-matrix-page {
    position: relative;
}

.auswertung-auslastung-page .message-hub-hero,
.tagesdaten-page .message-hub-hero,
.auswertung-matrix-page .message-hub-hero,
.azubi-delta-page .message-hub-hero,
.platzbelegung-page .message-hub-hero,
.partner-freie-plaetze-page .message-hub-hero {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 12px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

.auswertung-auslastung-page .message-hub-hero h2,
.tagesdaten-page .message-hub-hero h2,
.auswertung-matrix-page .message-hub-hero h2,
.azubi-delta-page .message-hub-hero h2,
.platzbelegung-page .message-hub-hero h2,
.partner-freie-plaetze-page .message-hub-hero h2 {
    letter-spacing: 0.01em;
}

.analytics-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.analytics-kpi-card {
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 12px;
    padding: 10px 12px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.analytics-kpi-card.is-positive {
    border-color: rgba(22, 163, 74, 0.25);
    background: linear-gradient(180deg, #ffffff 0%, #f4fbf6 100%);
}

.analytics-kpi-card.is-negative {
    border-color: rgba(220, 38, 38, 0.22);
    background: linear-gradient(180deg, #ffffff 0%, #fff7f7 100%);
}

.analytics-kpi-label {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.analytics-kpi-value {
    font-size: 21px;
    font-weight: 800;
    line-height: 1.2;
    color: #0f172a;
}

.auswertung-auslastung-page #auswertungDataGrid,
.tagesdaten-page #tagesdatenDataGrid,
.azubi-delta-page #azubiDeltaGrid,
.platzbelegung-page #platzbelegungGrid,
.partner-freie-plaetze-page .partner-freie-plaetze-table-wrap {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.09);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05);
    background: #fff;
}

.auswertung-matrix-page .matrix-table-wrap,
.kategorie-matrix-page .kategorie-matrix-table-wrap {
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.09);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05);
    background: #fff;
    overflow-x: auto;
    overflow-y: auto;
}

.auswertung-auslastung-page .dx-datagrid,
.tagesdaten-page .dx-datagrid,
.azubi-delta-page .dx-datagrid,
.platzbelegung-page .dx-datagrid {
    border-radius: 12px;
}

.auswertung-auslastung-page .dx-datagrid-headers,
.tagesdaten-page .dx-datagrid-headers,
.azubi-delta-page .dx-datagrid-headers,
.platzbelegung-page .dx-datagrid-headers {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.partner-freie-plaetze-page .partner-freie-plaetze-table thead th,
.kategorie-matrix-page .kategorie-matrix-table thead th {
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
}

.partner-freie-plaetze-page .partner-freie-plaetze-page-toolbar,
.platzbelegung-page .platzbelegung-filter-toolbar,
.auswertung-matrix-page .auswertung-matrix-panel,
.kategorie-matrix-page .card,
.auswertung-auslastung-page .auswertung-auslastung-toolbar,
.azubi-delta-page .azubi-delta-page-toolbar,
.tagesdaten-page .tagesdaten-grid-panel {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.partner-freie-plaetze-page .partner-freie-plaetze-page-toolbar,
.platzbelegung-page .platzbelegung-filter-toolbar,
.azubi-delta-page .azubi-delta-page-toolbar,
.auswertung-auslastung-page .auswertung-auslastung-toolbar {
    padding: 12px;
}

.analytics-chart-card {
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
    padding: 12px;
}

.analytics-chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.analytics-chart-head h6 {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

.analytics-chart-surface {
    width: 100%;
    min-height: 320px;
}

.analytics-chart-surface .dx-chart {
    border-radius: 10px;
}

@media (max-width: 1199.98px) {
    .analytics-kpi-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .analytics-kpi-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .analytics-kpi-value {
        font-size: 18px;
    }
}

/* Einsatzplanung Betrieb */

.einsatzplanung-page {
    font-size: 15px;
}

.einsatzplanung-page .message-hub-main {
    padding: 14px;
}

.einsatzplanung-page .einsatzplanung-columns {
    margin-left: -6px;
    margin-right: -6px;
}

.einsatzplanung-page .einsatzplanung-columns > [class*="col-"] {
    padding-left: 6px;
    padding-right: 6px;
}

.einsatzplanung-page label {
    font-size: 15px;
}

.einsatzplanung-page .einsatzplanung-bold-label {
    font-weight: 600;
}

.einsatzplanung-page .card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

.einsatzplanung-page .card-header,
.einsatzplanung-page .card-header h5,
.einsatzplanung-page .modal-title {
    font-weight: 600;
}

.einsatzplanung-page .card-header {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: #f8fafc;
}

.einsatzplanung-page .card-body strong,
.einsatzplanung-page .modal-body strong,
.einsatzplanung-page #azubis-list strong,
.einsatzplanung-page #partner-list strong,
.einsatzplanung-page #kompetenzen-list strong,
.einsatzplanung-page .form-group strong {
    font-weight: 400;
}

.einsatzplanung-page #azubis-list,
.einsatzplanung-page #kompetenzen-list {
    overflow-x: visible;
}

.einsatzplanung-page #planning-settings-summary {
    color: #64748b !important;
}

.einsatzplanung-page .einsatzplanung-show-calendar-btn {
    display: none;
}

.einsatzplanung-page .einsatzplanung-periods-box {
    max-height: 150px;
    overflow-y: auto;
    display: none;
    margin-bottom: 0;
}

.einsatzplanung-page .einsatzplanung-kompetenzen-list {
    max-height: 200px;
    overflow-y: auto;
}

.einsatzplanung-page .einsatzplanung-azubi-status-line {
    display: none;
}

.einsatzplanung-page .einsatzplanung-azubis-list {
    max-height: 680px;
    overflow-y: auto;
}

.einsatzplanung-page .einsatzplanung-partner-list {
    max-height: 530px;
    overflow-y: auto;
}

.einsatzplanung-page .btn {
    font-weight: 400;
    border-radius: 10px;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.einsatzplanung-page .btn:not(.btn-sm) {
    font-size: 1rem;
    min-height: 38px;
    padding: 0.4rem 0.9rem;
}

.einsatzplanung-page .btn.btn-sm {
    font-size: 0.8125rem !important;
    min-height: 28px !important;
    padding: 0.25rem 0.6rem !important;
}

@media (min-width: 1920px) {
    .einsatzplanung-page .btn.btn-sm {
        font-size: 1rem !important;
        min-height: 38px !important;
        padding: 0.35rem 0.82rem !important;
    }
}

.einsatzplanung-page .btn.btn-primary,
.einsatzplanung-page .btn.btn-outline-primary {
    border-color: var(--pba-button, var(--connie-orange)) !important;
}

.einsatzplanung-page .btn.btn-primary {
    color: var(--pba-button-contrast, #fff) !important;
    background: var(--pba-button, var(--connie-orange)) !important;
}

.einsatzplanung-page .btn.btn-outline-primary {
    color: var(--pba-button, var(--connie-orange)) !important;
    background: #fff !important;
}

.einsatzplanung-page .btn.btn-outline-primary:hover,
.einsatzplanung-page .btn.btn-outline-primary:focus {
    color: var(--pba-button-contrast, #fff) !important;
    background: var(--pba-button, var(--connie-orange)) !important;
    border-color: var(--pba-button, var(--connie-orange)) !important;
}

.einsatzplanung-page .btn.btn-primary:hover,
.einsatzplanung-page .btn.btn-primary:focus {
    filter: brightness(0.94);
}

.einsatzplanung-page #start-btn {
    min-height: 40px;
}

.einsatzplanung-page .card-disabled {
    opacity: 0.5;
    pointer-events: none;
    position: relative;
}

.einsatzplanung-page .card-disabled::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 1;
}

.einsatzplanung-page .einsatzplan-kalender-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    gap: 10px 12px;
    padding: 10px 0;
}

.einsatzplanung-page .einsatzplan-month {
    padding: 6px 0 0;
}

.einsatzplanung-page .einsatzplan-month-title {
    font-size: 14px;
    color: #b6bcc6;
    font-weight: 600;
    text-align: center;
    margin-bottom: 6px;
}

.einsatzplanung-page .einsatzplan-head {
    display: grid;
    grid-template-columns: 28px repeat(7, 14px);
    gap: 6px;
    justify-content: center;
    margin-bottom: 6px;
    color: #c7ccd5;
    font-size: 11px;
    font-weight: 600;
}

.einsatzplanung-page .einsatzplan-head .kw-h {
    width: 28px;
    text-align: right;
    padding-right: 2px;
}

.einsatzplanung-page .einsatzplan-head .dow {
    width: 14px;
    text-align: center;
}

.einsatzplanung-page .einsatzplan-days {
    display: grid;
    grid-template-columns: 28px repeat(7, 14px);
    gap: 6px;
    justify-content: center;
}

.einsatzplanung-page .einsatzplan-kw {
    width: 28px;
    height: 14px;
    font-size: 11px;
    color: #c7ccd5;
    font-weight: 700;
    text-align: center;
    padding-right: 2px;
    line-height: 14px;
}

.einsatzplanung-page .einsatzplan-cell {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: transparent;
    position: relative;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.einsatzplanung-page .einsatzplan-cell.empty {
    border: none;
    pointer-events: none;
}

.einsatzplanung-page .einsatzplan-cell::after {
    content: attr(data-day);
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 9px;
    font-weight: 800;
    color: rgba(17, 24, 39, 0.95);
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.einsatzplanung-page .einsatzplan-cell:hover::after {
    opacity: 1;
    transform: scale(1);
}

.einsatzplanung-page .einsatzplan-cell.praktische-ausbildung {
    background: #34c759;
}

.einsatzplanung-page .einsatzplan-cell.free {
    background: #cfd4d8;
}

.einsatzplanung-page .einsatzplan-cell.preview-assigned {
    background: #34c759;
    border-color: #1f9a46;
    box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.22);
}

.einsatzplanung-page .einsatzplan-cell.preview-assigned::before {
    content: attr(data-count);
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 12px;
    height: 12px;
    padding: 0 2px;
    border-radius: 10px;
    background: #0056ac;
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    line-height: 12px;
    text-align: center;
}

.einsatzplanung-page .form-check,
#planningSettingsModal .form-check,
#azubiFilterModal .form-check,
#kategorieModal .form-check {
    padding: 5px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

#planningSettingsModal .form-check {
    gap: 10px;
}

#planningSettingsModal .form-check-label {
    margin-right: 6px;
    white-space: nowrap;
}

.planning-settings-modal-dialog {
    width: 95vw;
    max-width: 1500px;
}

.planning-settings-help {
    font-size: 0.86rem;
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
    flex: 1 1 auto;
}

.einsatzplanung-page .form-check-input,
#planningSettingsModal .form-check-input,
#azubiFilterModal .form-check-input,
#kategorieModal .form-check-input {
    position: static;
    margin: 0;
    margin-top: 3px;
}

#available-periods-box .form-check-label {
    font-size: 0.8rem;
    margin-bottom: 0;
}

.einsatzplanung-periods-hint {
    font-size: 0.8rem;
}

.einsatzplanung-modal .einsaetze-link,
.einsatzplanung-page .einsaetze-link {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.85rem;
    color: #007bff;
    background-color: #e7f3ff;
    border: 1px solid #007bff;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.einsatzplanung-modal .einsaetze-link:hover,
.einsatzplanung-page .einsaetze-link:hover {
    color: #fff;
    background-color: #007bff;
    text-decoration: none;
    cursor: pointer;
}

.einsatzplanung-modal .modal-footer {
    gap: 8px;
}

.einsatzplanung-modal .modal-footer .btn {
    border-radius: 10px;
    min-height: 38px;
    padding: 0.4rem 0.9rem;
    font-weight: 600;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-shadow: none !important;
}

.einsatzplanung-modal .modal-footer .btn:focus,
.einsatzplanung-modal .modal-footer .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--pba-button-rgb, 28, 82, 36), 0.2) !important;
}

.einsatzplanung-modal .modal-footer .btn[data-dismiss="modal"],
.einsatzplanung-modal .modal-footer .btn.btn-secondary,
.einsatzplanung-modal .modal-footer .btn.btn-outline-secondary {
    color: #475569 !important;
    background: #fff !important;
    border-color: rgba(15, 23, 42, 0.2) !important;
}

.einsatzplanung-modal .modal-footer .btn[data-dismiss="modal"]:hover,
.einsatzplanung-modal .modal-footer .btn.btn-secondary:hover,
.einsatzplanung-modal .modal-footer .btn.btn-outline-secondary:hover {
    color: #0f172a !important;
    background: #f8fafc !important;
    border-color: rgba(15, 23, 42, 0.3) !important;
}

.einsatzplanung-modal .modal-footer .btn.btn-primary,
.einsatzplanung-modal .modal-footer .btn.btn-success,
.einsatzplanung-modal .modal-footer .btn.btn-warning,
.einsatzplanung-modal .modal-footer .btn.btn-outline-primary {
    color: var(--pba-button-contrast, #fff) !important;
    background: var(--pba-button, var(--connie-orange)) !important;
    border-color: var(--pba-button, var(--connie-orange)) !important;
}

.einsatzplanung-modal .modal-footer .btn.btn-primary:hover,
.einsatzplanung-modal .modal-footer .btn.btn-success:hover,
.einsatzplanung-modal .modal-footer .btn.btn-warning:hover,
.einsatzplanung-modal .modal-footer .btn.btn-outline-primary:hover {
    filter: brightness(0.94);
    transform: translateY(-1px);
}

.einsatzplanung-success-header {
    background-color: #0056ac;
}

.einsatzplanung-calendar-container {
    min-height: 500px;
}

.einsatzplanung-preview-warning {
    display: none;
}

.einsatzplanung-preview-calendar {
    min-height: 180px;
}

@media (max-width: 1620px) {
    .einsatzplanung-page .card-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 6px;
    }
}

@media (max-width: 1399.98px) {
    .planning-settings-modal-dialog {
        width: auto;
        max-width: 1140px;
    }

    .planning-settings-help {
        white-space: normal;
        font-size: 0.82rem;
        line-height: 1.25;
    }
}

@media (max-width: 991.98px) {
    .planning-settings-modal-dialog {
        max-width: 96vw;
    }

    .einsatzplanung-page .einsatzplan-kalender-grid {
        grid-template-columns: repeat(3, minmax(140px, 1fr));
    }
}

@media (max-width: 767.98px) {
    .einsatzplanung-page .einsatzplan-kalender-grid {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }

    .einsatzplanung-page .einsatzplanung-azubis-list,
    .einsatzplanung-page .einsatzplanung-partner-list {
        max-height: 420px;
    }
}

/* Partnerverbund */

.partnerverbund-page .message-hub-main > div[class$="-container"] {
    margin-top: 0 !important;
}

#modal-edit-partnerverbund-betrieb .modal-footer {
    gap: 10px;
}

#modal-edit-partnerverbund-betrieb .modal-footer .btn {
    border-radius: 10px;
    min-height: 38px;
    padding: 0.4rem 0.9rem;
    font-weight: 600;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

#modal-edit-partnerverbund-betrieb .modal-footer .btn:focus,
#modal-edit-partnerverbund-betrieb .modal-footer .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--pba-button-rgb, 28, 82, 36), 0.2) !important;
}

#modal-edit-partnerverbund-betrieb .modal-footer .btn[data-dismiss="modal"] {
    color: #475569 !important;
    background: #fff !important;
    border-color: rgba(15, 23, 42, 0.2) !important;
}

#modal-edit-partnerverbund-betrieb .modal-footer .btn[data-dismiss="modal"]:hover {
    color: #0f172a !important;
    background: #f8fafc !important;
    border-color: rgba(15, 23, 42, 0.3) !important;
}

#modal-edit-partnerverbund-betrieb .modal-footer .btn[type="submit"] {
    color: var(--pba-button-contrast, #fff) !important;
    background: var(--pba-button, var(--connie-orange)) !important;
    border-color: var(--pba-button, var(--connie-orange)) !important;
}

#modal-edit-partnerverbund-betrieb .modal-footer .btn[type="submit"]:hover {
    filter: brightness(0.94);
    transform: translateY(-1px);
}

/* Ausbildungsplaene */

.plaene-page .message-hub-main > div[class$="-container"] {
    margin-top: 0 !important;
}

.plaene-page .plaene-block-legend {
    font-size: 12px;
}

.plaene-modal .modal-dialog.plaene-modal-xl-dialog {
    max-width: 1152px;
    width: calc(100% - 2rem);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.plaene-modal .plaene-modal-body {
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    padding-top: 0.5rem;
}

/* Kopfbereich kompakter, damit Kalender + Steuerung ohne Body-Scrollbalken in den Dialog passen */
.plaene-modal .plaene-modal-body .form-group.row {
    margin-bottom: 0.45rem;
}
.plaene-modal .plaene-modal-body hr {
    margin-top: 0.6rem;
    margin-bottom: 0.6rem;
}

.plaene-modal .plaene-tab-content {
    margin-top: 12px;
}

.plaene-modal .plaene-assistent-swatch {
    width: 28px;
    height: 28px;
    border-radius: 5px;
    border: 1px solid #dee2e6;
}

.plaene-modal [id^="btn-assistent-"],
.plaene-modal [id^="btn-holiday-import-"],
.plaene-modal [id^="btn-view-types-"],
.plaene-modal [id^="btn-view-blocks-"],
.plaene-modal .plaene-add-module-btn {
    border-radius: 10px;
    min-height: 34px;
    padding: 0.28rem 0.72rem;
    font-weight: 600;
    box-shadow: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.plaene-modal [id^="btn-assistent-"],
.plaene-modal [id^="btn-holiday-import-"],
.plaene-modal .plaene-add-module-btn,
.plaene-modal [id^="btn-view-types-"].btn-outline-primary,
.plaene-modal [id^="btn-view-blocks-"].btn-outline-primary {
    color: var(--pba-button, var(--connie-orange)) !important;
    background: transparent !important;
    border-color: var(--pba-button, var(--connie-orange)) !important;
}

.plaene-modal [id^="btn-assistent-"]:hover,
.plaene-modal [id^="btn-holiday-import-"]:hover,
.plaene-modal .plaene-add-module-btn:hover,
.plaene-modal [id^="btn-view-types-"].btn-outline-primary:hover,
.plaene-modal [id^="btn-view-blocks-"].btn-outline-primary:hover {
    color: var(--pba-button-contrast, #fff) !important;
    background: var(--pba-button, var(--connie-orange)) !important;
    border-color: var(--pba-button, var(--connie-orange)) !important;
    transform: translateY(-1px);
}

.plaene-modal [id^="btn-view-types-"].btn-primary,
.plaene-modal [id^="btn-view-blocks-"].btn-primary {
    color: var(--pba-button-contrast, #fff) !important;
    background: var(--pba-button, var(--connie-orange)) !important;
    border-color: var(--pba-button, var(--connie-orange)) !important;
}

.plaene-modal [id^="btn-view-types-"].btn-primary:hover,
.plaene-modal [id^="btn-view-blocks-"].btn-primary:hover {
    filter: brightness(0.94);
    transform: translateY(-1px);
}

.plaene-modal [id^="btn-assistent-"]:focus,
.plaene-modal [id^="btn-assistent-"]:focus-visible,
.plaene-modal [id^="btn-holiday-import-"]:focus,
.plaene-modal [id^="btn-holiday-import-"]:focus-visible,
.plaene-modal [id^="btn-view-types-"]:focus,
.plaene-modal [id^="btn-view-types-"]:focus-visible,
.plaene-modal [id^="btn-view-blocks-"]:focus,
.plaene-modal [id^="btn-view-blocks-"]:focus-visible,
.plaene-modal .plaene-add-module-btn:focus,
.plaene-modal .plaene-add-module-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--pba-button-rgb, 28, 82, 36), 0.2) !important;
}

#modal-edit-plan .modal-footer {
    gap: 10px;
    flex-wrap: wrap;
}

#modal-edit-plan .modal-footer .btn {
    border-radius: 10px;
    min-height: 38px;
    padding: 0.4rem 0.9rem;
    font-weight: 600;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

#modal-edit-plan .modal-footer .btn:focus,
#modal-edit-plan .modal-footer .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--pba-button-rgb, 28, 82, 36), 0.2) !important;
}

#modal-edit-plan .modal-footer .btn[data-dismiss="modal"] {
    color: #475569 !important;
    background: #fff !important;
    border-color: rgba(15, 23, 42, 0.2) !important;
}

#modal-edit-plan .modal-footer .btn[data-dismiss="modal"]:hover {
    color: #0f172a !important;
    background: #f8fafc !important;
    border-color: rgba(15, 23, 42, 0.3) !important;
}

#modal-edit-plan .modal-footer #create-taetigkeitsberichte-btn,
#modal-edit-plan .modal-footer #edit-submit-btn {
    color: var(--pba-button, var(--connie-orange)) !important;
    background: transparent !important;
    border-color: var(--pba-button, var(--connie-orange)) !important;
}

#modal-edit-plan .modal-footer #create-taetigkeitsberichte-btn:hover,
#modal-edit-plan .modal-footer #edit-submit-btn:hover {
    color: var(--pba-button-contrast, #fff) !important;
    background: var(--pba-button, var(--connie-orange)) !important;
    border-color: var(--pba-button, var(--connie-orange)) !important;
    transform: translateY(-1px);
}

#modal-edit-plan .modal-footer #edit-submit-close-btn {
    color: var(--pba-button-contrast, #fff) !important;
    background: var(--pba-button, var(--connie-orange)) !important;
    border-color: var(--pba-button, var(--connie-orange)) !important;
}

#modal-edit-plan .modal-footer #edit-submit-close-btn:hover {
    filter: brightness(0.94);
    transform: translateY(-1px);
}

#modal-taetigkeitsberichte-create .modal-footer,
#modal-taetigkeitsberichte-confirm .modal-footer {
    gap: 10px;
    flex-wrap: wrap;
}

#modal-taetigkeitsberichte-create .modal-footer .btn,
#modal-taetigkeitsberichte-confirm .modal-footer .btn {
    border-radius: 10px;
    min-height: 38px;
    padding: 0.4rem 0.9rem;
    font-weight: 600;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

#modal-taetigkeitsberichte-create .modal-footer .btn:focus,
#modal-taetigkeitsberichte-create .modal-footer .btn:focus-visible,
#modal-taetigkeitsberichte-confirm .modal-footer .btn:focus,
#modal-taetigkeitsberichte-confirm .modal-footer .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--pba-button-rgb, 28, 82, 36), 0.2) !important;
}

#modal-taetigkeitsberichte-create .modal-footer .btn[data-dismiss="modal"],
#modal-taetigkeitsberichte-confirm .modal-footer .btn[data-dismiss="modal"] {
    color: #475569 !important;
    background: #fff !important;
    border-color: rgba(15, 23, 42, 0.2) !important;
}

#modal-taetigkeitsberichte-create .modal-footer .btn[data-dismiss="modal"]:hover,
#modal-taetigkeitsberichte-confirm .modal-footer .btn[data-dismiss="modal"]:hover {
    color: #0f172a !important;
    background: #f8fafc !important;
    border-color: rgba(15, 23, 42, 0.3) !important;
}

#taetigkeitsberichte-create-submit,
#taetigkeitsberichte-confirm-yes {
    color: var(--pba-button-contrast, #fff) !important;
    background: var(--pba-button, var(--connie-orange)) !important;
    border-color: var(--pba-button, var(--connie-orange)) !important;
}

#taetigkeitsberichte-create-submit:hover,
#taetigkeitsberichte-confirm-yes:hover {
    filter: brightness(0.94);
    transform: translateY(-1px);
}

#taetigkeitsberichte-toast.toast-success {
    bottom: 30px;
    right: 30px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    animation: slideInUp 0.5s ease-out;
}

#taetigkeitsberichte-toast.toast-error {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}

@media (max-width: 1199.98px) {
    #sidebar {
        position: fixed;
        top: 0;
        left: calc(-1 * (var(--sidebar-width) + 24px));
        height: 100vh;
        margin-top: 72px !important;
        background: transparent;
        z-index: 1040;
        transition: left 0.2s ease;
    }

    #sidebar.mobile-open {
        left: 0;
    }

    #sidebar .sidebar-shell {
        height: calc(100vh - 96px);
        top: 0;
        border-radius: 0 15px 15px 0;
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
        overflow: hidden;
    }

    #sidebar-nav {
        flex: 1 1 auto;
        overflow-y: auto;
        padding-right: 2px;
    }
}

@media (max-width: 767.98px) {
    .pba-jahrgaenge-row > [class*="col-"] {
        margin-bottom: 8px;
    }

    .pba-jahrgaenge-row > [class*="col-"]:last-child {
        margin-bottom: 0;
    }

    .pba-jahrgaenge-row .remove-row,
    .pba-jahrgaenge-add-row {
        width: 100%;
    }

    .auszubildende-gps-wrap {
        justify-content: stretch;
    }

    .auszubildende-gps-btn {
        width: 100%;
    }

    #modal-edit-plan .modal-footer .btn {
        width: 100%;
    }
}

/* Partnerdetails */

.partnerdetails-page .message-hub-main {
    padding: 16px 18px;
}

/* Die Regeln zu .partnerdetails-card sind am 29.09.2026 entfallen (Ticket 708):
   Die Seite lag in EINER Karte mit Bootstrap-Zeilen, und diese Regeln flickten
   deren Abstaende und Beschriftungen nach. Seit dem Umbau auf das Hausmuster
   (.pba-settings-card + .pba-feld-gitter, Etikett ueber dem Feld) gibt es die
   Klasse nicht mehr, und Abstaende, Beschriftungen und Rundungen kommen von dort. */

.partnerdetails-page .partnerdetails-actions {
    margin-top: 14px;
}

.partnerdetails-page .partnerdetails-actions .btn {
    border-radius: 10px;
    min-height: 38px;
    padding: 0.4rem 0.9rem;
    font-weight: 600;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.partnerdetails-page .partnerdetails-actions .btn:focus,
.partnerdetails-page .partnerdetails-actions .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--pba-button-rgb, 28, 82, 36), 0.2) !important;
}

.partnerdetails-page .partnerdetails-actions .btn.btn-outline-secondary {
    color: #475569 !important;
    background: #fff !important;
    border-color: rgba(15, 23, 42, 0.2) !important;
}

.partnerdetails-page .partnerdetails-actions .btn.btn-outline-secondary:hover {
    color: #0f172a !important;
    background: #f8fafc !important;
    border-color: rgba(15, 23, 42, 0.3) !important;
    transform: translateY(-1px);
}

.partnerdetails-page .partnerdetails-actions .btn.btn-primary {
    color: var(--pba-button-contrast, #fff) !important;
    background: var(--pba-button, var(--connie-orange)) !important;
    border-color: var(--pba-button, var(--connie-orange)) !important;
}

.partnerdetails-page .partnerdetails-actions .btn.btn-primary:hover {
    filter: brightness(0.94);
    transform: translateY(-1px);
}

/* Blockplanung */

.blockplanung-page .message-hub-main > div[class$="-container"] {
    margin-top: 0 !important;
}

.blockplanung-page-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.blockplanung-page-toolbar .blockplanung-top-btn {
    color: var(--pba-button, var(--connie-orange)) !important;
    border: 1px solid var(--pba-button, var(--connie-orange)) !important;
    background: transparent !important;
    border-radius: 0.35rem;
    min-height: 38px;
    box-shadow: none;
    opacity: 0.9;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease, transform 0.2s ease;
}

.blockplanung-page-toolbar .blockplanung-top-btn:hover,
.blockplanung-page-toolbar .blockplanung-top-btn:focus {
    color: var(--pba-button-contrast, #fff) !important;
    background-color: var(--pba-button, var(--connie-orange)) !important;
    border-color: var(--pba-button, var(--connie-orange)) !important;
    opacity: 1;
    transform: translateY(-1px);
}

.blockplanung-page .blockplanung-multimenu-wrap {
    margin-left: 0;
}

.blockplanung-modal .modal-footer {
    gap: 10px;
}

.blockplanung-modal .modal-footer .btn {
    border-radius: 10px;
    min-height: 38px;
    padding: 0.4rem 0.9rem;
    font-weight: 600;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.blockplanung-modal .modal-footer .btn:focus,
.blockplanung-modal .modal-footer .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--pba-button-rgb, 28, 82, 36), 0.2) !important;
}

.blockplanung-modal .modal-footer .btn[data-dismiss="modal"],
.blockplanung-modal .modal-footer .btn.btn-outline-secondary {
    color: #475569 !important;
    background: #fff !important;
    border-color: rgba(15, 23, 42, 0.2) !important;
}

.blockplanung-modal .modal-footer .btn[data-dismiss="modal"]:hover,
.blockplanung-modal .modal-footer .btn.btn-outline-secondary:hover {
    color: #0f172a !important;
    background: #f8fafc !important;
    border-color: rgba(15, 23, 42, 0.3) !important;
    transform: translateY(-1px);
}

.blockplanung-modal .modal-footer .btn.btn-primary,
.blockplanung-modal .modal-footer .btn.btn-danger,
.blockplanung-modal .modal-footer .btn.btn-warning,
.blockplanung-modal .modal-footer .btn[type="submit"] {
    color: var(--pba-button-contrast, #fff) !important;
    background: var(--pba-button, var(--connie-orange)) !important;
    border-color: var(--pba-button, var(--connie-orange)) !important;
}

.blockplanung-modal .modal-footer .btn.btn-primary:hover,
.blockplanung-modal .modal-footer .btn.btn-danger:hover,
.blockplanung-modal .modal-footer .btn.btn-warning:hover,
.blockplanung-modal .modal-footer .btn[type="submit"]:hover {
    filter: brightness(0.94);
    transform: translateY(-1px);
}

/* Blockplanung Diagramm */

.blockplanung-diagramm-page .message-hub-main {
    padding: 16px 18px;
}

.blockplanung-diagramm-page .blockplanung-diagramm-filter-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    box-shadow: none;
}

.blockplanung-diagramm-page .blockplanung-diagramm-filter-body {
    padding: 12px 14px;
}

.blockplanung-diagramm-page .blockplanung-diagramm-select {
    min-width: 220px;
    border-radius: 8px;
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: none;
}

.blockplanung-diagramm-page .blockplanung-diagramm-select:focus {
    border-color: rgba(51, 65, 85, 0.35);
    box-shadow: 0 0 0 3px rgba(51, 65, 85, 0.08);
}

.blockplanung-diagramm-page .blockplanung-diagramm-toolbar-btn {
    border-radius: 8px;
    min-height: 34px;
    padding: 0.34rem 0.82rem;
    font-weight: 600;
    box-shadow: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.blockplanung-diagramm-page .btn.btn-outline-secondary.blockplanung-diagramm-toolbar-btn {
    color: #475569;
    background: #fff;
    border-color: rgba(15, 23, 42, 0.2);
}

.blockplanung-diagramm-page .btn.btn-outline-secondary.blockplanung-diagramm-toolbar-btn:hover,
.blockplanung-diagramm-page .btn.btn-outline-secondary.blockplanung-diagramm-toolbar-btn:focus {
    color: #0f172a;
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.3);
    transform: translateY(-1px);
}

.blockplanung-diagramm-page .btn.btn-primary.blockplanung-diagramm-toolbar-btn,
.blockplanung-diagramm-page .btn.btn-success.blockplanung-diagramm-toolbar-btn {
    color: var(--pba-button-contrast, #fff);
    background: var(--pba-button, var(--connie-orange));
    border-color: var(--pba-button, var(--connie-orange));
}

.blockplanung-diagramm-page .btn.btn-primary.blockplanung-diagramm-toolbar-btn:hover,
.blockplanung-diagramm-page .btn.btn-success.blockplanung-diagramm-toolbar-btn:hover {
    filter: brightness(0.94);
    transform: translateY(-1px);
}

.blockplanung-diagramm-page #diagramm-area {
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 12px;
}

@media (max-width: 991.98px) {
    .blockplanung-diagramm-page .blockplanung-diagramm-select {
        min-width: 180px;
    }
}

/* =====================================================================
   Einheitlicher "+N"-Aufklappknopf für kompakte Badge-Listen in ALLEN
   Tabellen (Kategorien, Kennzeichen ...). Markup: System::collapse_badges(),
   Verhalten: public/js/pba-badge-collapse.js
   ===================================================================== */
/* Einheitliche Farb-Vorschau in Tabellen (System::color_swatch()).
   Hover zeigt den Hex-Code, Klick kopiert ihn (pba-color-copy.js). */
.pba-color-copy {
    display: inline-block;
    width: 28px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    cursor: pointer;
    vertical-align: middle;
    transition: box-shadow .12s ease, transform .12s ease;
}
.pba-color-copy:hover {
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.18);
}
.pba-color-copy:active {
    transform: scale(0.92);
}
.pba-color-copy-toast {
    position: fixed;
    z-index: 20050;
    background: #0f172a;
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    padding: .18rem .5rem;
    border-radius: 6px;
    pointer-events: none;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .3);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .12s ease, transform .12s ease;
}
.pba-color-copy-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Eingeklappt: strikt einzeilig (Zeile bleibt niedrig). Überlaufende Badges
   werden per JS ausgeblendet; passt alles, wird der "+N"-Knopf ausgeblendet. */
.pba-badge-collapse {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px 3px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}
/* Aufgeklappt: alle Badges zeigen, Umbruch erlaubt (Zeile darf wachsen). */
.pba-badge-collapse.is-open {
    flex-wrap: wrap;
    overflow: visible;
}
.pba-badge-collapse .badge { white-space: nowrap; flex: 0 0 auto; }
/* Einheitliche Badge-Größe in ALLEN Tabellen, unabhängig von seiten-spezifischen
   Regeln (z. B. .auszubildende-page macht Badges sonst größer/runder). Spezifität
   .badge.badge-pill + späterer Quellort schlägt diese Seitenregeln. */
.pba-badge-collapse .badge.badge-pill {
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    padding: 0.25em 0.6em;
    border-radius: 10rem;
    vertical-align: middle;
}
.pba-badge-toggle {
    flex: 0 0 auto;
    border: 0;
    background: #eef2f7;
    color: #475569;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.4;
    border-radius: 10px;
    padding: .02rem .45rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}
.pba-badge-toggle[hidden] { display: none; }
.pba-badge-toggle:hover { background: #e2e8f0; }
.pba-badge-toggle .fa-chevron-down { font-size: .6rem; transition: transform .15s ease; }
.pba-badge-collapse.is-open .pba-badge-toggle .fa-chevron-down { transform: rotate(180deg); }
/* Aufgeklappt ergibt die Zahl keinen Sinn mehr → ausblenden, nur Pfeil bleibt. */
.pba-badge-collapse.is-open .pba-badge-count { display: none; }

/* Gültigkeitszeiträume: neutrale Chips (gleiches Collapse-Muster wie Kategorie/Kennzeichen). */
.pba-badge-collapse .badge.badge-pill.pba-gueltigkeit-badge {
    background: #eef2f7;
    color: #334155;
}

/* Passwortfeld mit Auge (public/js/passwort-anzeigen.js).

   Der Schalter sitzt IM Feld, nicht daneben: eine input-group haengt ihn als
   eigene Schaltflaeche mit Rahmen an und faellt in den weichen Dialogen als
   Fremdkoerper auf. Statt absoluter Positionierung eine Flex-Zeile mit
   negativem Rand – dann sitzt das Auge ohne geratene Hoehenwerte mittig, egal
   wie hoch das Feld im jeweiligen Layout ausfaellt.

   Die Fehlermeldung bleibt Geschwister des Feldes, sonst greift die
   Bootstrap-Regel `.form-control.is-invalid ~ .invalid-feedback` nicht mehr.
   Mit `width: 100%` und umbrechender Flexbox rutscht sie unter die Zeile. */
.pba-passwort-feld {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.pba-passwort-feld > .form-control {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    padding-right: 2rem;
}
.pba-passwort-feld > .invalid-feedback {
    width: 100%;
}
/* Edge blendet an jedem Passwortfeld ein eigenes Auge ein (::-ms-reveal), dazu
   ein Kreuz zum Leeren. Neben unserem Schalter waeren das zwei Augen mit
   getrenntem Zustand. Bewusst nur innerhalb dieses Behaelters abgeschaltet – wo
   kein eigener Schalter steht, bleibt das eingebaute die einzige Moeglichkeit,
   die Eingabe zu pruefen.
   (Die Anmeldeseite stand hier bis zum 28.09.2026 als Beispiel dafuer; sie hat
   seit Ticket 702 einen eigenen Schalter.) */
.pba-passwort-feld > .form-control::-ms-reveal,
.pba-passwort-feld > .form-control::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}
.pba-passwort-anzeigen {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    margin-left: -2rem;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
}
.pba-passwort-anzeigen:hover,
.pba-passwort-anzeigen:focus,
.pba-passwort-anzeigen[aria-pressed="true"] {
    color: #475569;
}
.pba-passwort-anzeigen:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(148, 163, 184, .35);
}
.pba-passwort-anzeigen i {
    font-size: .9rem;
}

/* ── Einstellungsseiten des Betriebs: Luft nach oben ──────────────────────
 *
 * Titelkarte und Inhaltskarte standen fast auf Kante: ueber der Titelkarte
 * liegen nur die 8px Innenabstand von .content, darunter 12px Aussenabstand
 * plus 6px Rasterabstand – zusammen 18px, waehrend die Bloecke INNERHALB der
 * Karte 16px auseinanderstehen. Damit war der Seitentitel optisch nur ein
 * weiterer Block unter vielen. Verschaerft durch den Schatten der Titelkarte
 * (30px Weichzeichnung), der bei 18px Abstand auf der naechsten Karte landet.
 *
 * Bewusst auf diese Seiten begrenzt (Betriebsdaten und Ausbildungsnachweis-
 * Einstellungen, beide .betrieb-details-page): dasselbe Mass gilt app-weit
 * fuer jede .pba-compact-page, und ein Eingriff dort verschoebe rund 50
 * Seiten auf einmal.
 */
.pba-compact-page.betrieb-details-page .message-hub-hero {
    margin-top: 6px;
    margin-bottom: 20px;
}

/* Die Karte darf innen etwas mehr Rand haben als ihre Bloecke untereinander –
 * sonst kleben die inneren Kaesten an der Kante des weissen Rahmens. */
.betrieb-details-page .pba-settings-card {
    padding: 20px 20px 18px;
}