/* =========================================================================
   BRK Corporate-Design – ergaenzendes Styling (rot/weiss)
   Wird nach Bootstrap und MudBlazor geladen und ueberschreibt gezielt.
   ========================================================================= */

:root {
    --brk-red: #E60005;
    --brk-red-dark: #B30004;
    --brk-grey: #3A3A3C;
    --brk-bg: #F5F5F7;
}

/* ---- AppBar-Logo-Badge (weisses Quadrat mit rotem Kreuz) ---------------- */
.brk-logo-badge {
    width: 40px;
    height: 40px;
    background-color: #FFFFFF;
    border-radius: 8px;
}

.brk-appbar-title {
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .2px;
}

.brk-appbar-subtitle {
    opacity: .85;
    line-height: 1;
}

/* ---- Dashboard-Schnellzugriff-Kacheln ---------------------------------- */
.brk-quick {
    cursor: pointer;
    height: 100%;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
    border: 1px solid transparent;
}

.brk-quick:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    border-color: rgba(230, 0, 5, .35);
}

/* ---- Kalender-Termin-Template ------------------------------------------ */
.brk-appt {
    display: flex;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.brk-appt__body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 2px 6px;
    line-height: 1.15;
}

.brk-appt__title {
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 700;
    font-size: .74rem;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.brk-appt__title .brk-appt__icon {
    flex: 0 0 auto;
    font-size: .9rem;
    line-height: 1;
}

.brk-appt__sub {
    font-size: .7rem;
    opacity: .95;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.brk-appt__meta {
    font-size: .66rem;
    opacity: .9;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* =========================================================================
   Kalender-Termin: Status (heller Pastell-Hintergrund + dunkle Schrift) und
   Kategorie (kraeftiger linker Akzentstreifen).
   Wichtig: Diese werden ueber CSS-Klassen gesetzt (AppointmentRender setzt nur
   die "class", niemals "style"), damit die von Radzen berechnete Position und
   Hoehe (top/height) der Termine erhalten bleibt.

   DOM-Struktur von Radzen (siehe Rendering/Appointment.razor):
     <div class="rz-event {CssClass}" style="top/height/...">   (aeusseres Element)
       <div class="rz-event-content" @attributes=Attributes>    (inneres Element)
         <Template/> (= .brk-appt)
   ACHTUNG: Die "Attributes" aus AppointmentRender (also unser class) landen auf
   dem INNEREN Element und ERSETZEN dort die Klasse "rz-event-content" (Blazor
   nimmt bei @attributes die zuletzt gesetzte class). Dadurch verliert das innere
   Element seinen Default (Hintergrund, border-radius, height:100%).
   Folglich:
   - wir stylen unsere brk-Klassen DIREKT (kein " .rz-event-content" dahinter),
     da unsere Klassen genau auf diesem inneren Element sitzen, und
   - wir muessen height:100% wieder herstellen, damit Hintergrund/Streifen die
     volle Termin-Hoehe einnehmen (nicht nur die Inhaltshoehe).

   Konzept: Status = Hintergrundfarbe (hell), Kategorie = linker Streifen
   (kraeftig). So ueberlagern sich beide Dimensionen nicht und bleiben getrennt
   lesbar; auf dem hellen Grund steht dunkle Schrift.
   ========================================================================= */

/* Grundlayout: stellt das von Radzen verlorene Verhalten des inneren
   Content-Elements wieder her (volle Hoehe, Radius, kein Ueberlauf) und gibt
   dem Termin eine dezente Umrandung gegen den weissen Kalenderraster. Die
   dunkle Schrift sorgt fuer guten Kontrast auf dem hellen Pastell-Hintergrund. */
.rz-scheduler .brk-event {
    height: 100% !important;
    color: #37474F !important;
    border: 1px solid rgba(0, 0, 0, .14) !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding: 0 !important;
}

/* ---- Status -> Pastell-Hintergrund (kraeftig, dunkle Schrift bleibt lesbar) - */
.rz-scheduler .brk-stat-approved { background-color: #BFE3C4 !important; }
.rz-scheduler .brk-stat-pending  { background-color: #FFE9A8 !important; }
.rz-scheduler .brk-stat-rejected { background-color: #DCDCDC !important; }

/* ---- Kategorie -> kraeftiger linker Akzentstreifen -------------------- */
.rz-scheduler .brk-cat-ausbildung { border-left: 5px solid #6A1B9A !important; }
.rz-scheduler .brk-cat-uebung     { border-left: 5px solid #2E7D32 !important; }
.rz-scheduler .brk-cat-ortsdienst { border-left: 5px solid #00838F !important; }
.rz-scheduler .brk-cat-dienst     { border-left: 5px solid #1565C0 !important; }

/* Abgelehnte Termine zusaetzlich durchgestrichen kennzeichnen. */
.brk-appt--rejected .brk-appt__title,
.brk-appt--rejected .brk-appt__sub {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* Legenden-Kachel (Status-Pastell bzw. Kategorie-Streifen). Dezente
   Umrandung, damit die hellen Pastellfarben auf weissem Grund sichtbar sind. */
.brk-legend-swatch {
    display: inline-block;
    width: 18px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, .18);
    background: #fff;
    box-sizing: border-box;
}

/* =========================================================================
   Login / Register (statisches SSR, Bootstrap-Markup) im BRK-Karten-Look
   ========================================================================= */

.brk-auth {
    min-height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(1200px 600px at 100% -10%, rgba(230, 0, 5, .10), transparent 60%),
        radial-gradient(1000px 500px at -10% 110%, rgba(230, 0, 5, .08), transparent 55%),
        var(--brk-bg);
}

.brk-auth__card {
    width: 100%;
    max-width: 430px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12), 0 2px 6px rgba(0, 0, 0, .06);
    overflow: hidden;
}

.brk-auth__header {
    background: linear-gradient(135deg, var(--brk-red) 0%, var(--brk-red-dark) 100%);
    color: #fff;
    padding: 1.75rem 2rem 1.5rem;
    text-align: center;
}

.brk-auth__badge {
    width: 56px;
    height: 56px;
    margin: 0 auto .75rem;
    background: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brk-auth__badge::before {
    /* rotes Kreuz aus zwei Balken */
    content: "";
    width: 30px;
    height: 30px;
    background:
        linear-gradient(var(--brk-red), var(--brk-red)) center/12px 30px no-repeat,
        linear-gradient(var(--brk-red), var(--brk-red)) center/30px 12px no-repeat;
}

.brk-auth__title {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

.brk-auth__subtitle {
    font-size: .9rem;
    opacity: .92;
    margin: .25rem 0 0;
}

.brk-auth__body {
    padding: 1.75rem 2rem 2rem;
}

.brk-auth__body h2 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--brk-grey);
    margin: 0 0 1.25rem;
}

.brk-auth__body .form-floating > label {
    color: #8a8a8a;
}

.brk-auth__body .form-control {
    border-radius: 10px;
    padding: .9rem .75rem;
}

.brk-auth__body .form-control:focus {
    border-color: var(--brk-red);
    box-shadow: 0 0 0 .2rem rgba(230, 0, 5, .18);
}

.brk-auth__submit {
    width: 100%;
    background: var(--brk-red);
    border: none;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    padding: .8rem 1rem;
    border-radius: 10px;
    transition: background .15s ease-in-out;
}

.brk-auth__submit:hover,
.brk-auth__submit:focus {
    background: var(--brk-red-dark);
    color: #fff;
}

.brk-auth__links {
    margin-top: 1.25rem;
    text-align: center;
    font-size: .9rem;
}

.brk-auth__links a {
    color: var(--brk-red);
    text-decoration: none;
    font-weight: 500;
}

.brk-auth__links a:hover {
    text-decoration: underline;
}

.brk-auth__sep {
    border: 0;
    border-top: 1px solid #ececec;
    margin: 1.25rem 0;
}

.brk-auth__footer {
    text-align: center;
    color: #9a9a9a;
    font-size: .78rem;
    margin-top: 1rem;
}

/* Validierungsmeldungen dezent in BRK-Rot */
.brk-auth__body .text-danger,
.brk-auth__body .validation-message {
    color: var(--brk-red-dark);
    font-size: .85rem;
}

/* ---- Filterleiste fuer Kalender/Buchungsliste -------------------------- */
.brk-filter-field {
    min-width: 170px;
    max-width: 240px;
    flex: 0 1 200px;
}