/* ============================================================================
   theme.css — itestra-Brand-Theme über Bootstrap 5.3
   ----------------------------------------------------------------------------
   EINZIGE Stelle für Optik (Farbe, Abstand, Schrift, App-Shell-Layout).
   Alle Komponenten (Cards, Buttons, Tabellen, Badges, Modals, Tabs, Forms,
   Alerts, Grid, Progress) kommen aus Bootstrap. Hier nur:
     1) Brand-Tokens / Rebrand der Primärfarbe (no-build: Bootstrap kompiliert
        .btn-primary fix, daher explizite --bs-btn-* Overrides).
     2) App-Shell-Layout (Sidebar + Topbar) — hat Bootstrap nicht out-of-the-box.
     3) Wenige Spezialitäten: Mono-Ziffern, Tabellen-Enhancer (.dt-*),
        ECharts-Host, Status-Punkt.
   Ein Theme-Wechsel = nur diese Datei ändern. Kein Template, kein Python.
   Tokens sind gegen den verbindlichen Website-Styleguide gesetzt
   (website/docs/VISUAL_STYLEGUIDE.md = itestra.com): Primär-Navy #00549F,
   kühle Neutraltöne, Inter als self-hosted Web-Font.
   ============================================================================ */

/* Inter — self-hosted (woff2-Subsets aus dem Website-Repo). Keine externen CDNs. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/static/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/static/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* --- itestra Brand (Styleguide: Primär #00549F, Hover #004080, Tint #e6f0fa) --- */
    --it-blue:        #00549F;   /* itestra-Primär-Navy */
    --it-blue-600:    #004f96;
    --it-blue-700:    #004080;   /* Links / Nav-Active (Styleguide dark) */
    --it-blue-800:    #003366;
    --it-ink:         #111827;   /* Headlines / kräftiger Text (gray-900, kühl) */
    --it-slate:       #4b5563;   /* Sekundärtext (gray-600) */
    --it-muted:       #6b7280;   /* gray-500 */
    --it-line:        #e5e7eb;   /* Rahmen / Trenner (gray-200, kühl) */
    --it-surface:     #ffffff;   /* Cards, Sidebar, Topbar */
    --it-canvas:      #f5f6f8;   /* Seitenhintergrund — kühle Section-Light-Fläche */
    --it-blue-050:    #e6f0fa;   /* Active-/Hover-Tint (itestra-light) */
    --it-amber:       #f59e0b;   /* Akzentstreifen (Styleguide body::before) */
    --it-shadow:      16, 24, 40; /* kühler Schatten-Ton (rgb) */

    /* App-Shell-Maße */
    --it-sidebar-w:   264px;
    --it-topbar-h:    64px;

    /* --- Bootstrap-Tokens überschreiben --- */
    --bs-primary: var(--it-blue);
    --bs-primary-rgb: 0, 84, 159;             /* steuert .text-primary/.bg-primary/.border-primary */
    --bs-link-color: var(--it-blue-700);
    --bs-link-color-rgb: 0, 64, 128;
    --bs-link-hover-color: var(--it-blue-800);
    --bs-success: #22c55e;                    /* Styleguide-Grün statt Bootstrap-Default */
    --bs-success-rgb: 34, 197, 94;
    --bs-body-color: var(--it-ink);
    --bs-secondary-color: var(--it-slate);
    --bs-body-bg: var(--it-canvas);
    --bs-border-color: var(--it-line);
    --bs-border-radius: .5rem;
    --bs-border-radius-sm: .375rem;
    --bs-border-radius-lg: .75rem;
    --bs-body-font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --bs-emphasis-color: var(--it-ink);
}

/* Marken-Akzentstreifen ganz oben am Viewport (Styleguide body::before).
   fixed, damit er über der sticky Topbar (z-index 1020) sichtbar bleibt. */
body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--it-amber), var(--it-blue), var(--it-amber));
    z-index: 2000;
}

/* Primärfarbe für Komponenten, die Bootstrap fix kompiliert
   (Button-/Outline-/Check-/Focus-Farben sind NICHT an --bs-primary gebunden). */
.btn-primary {
    --bs-btn-bg: var(--it-blue);
    --bs-btn-border-color: var(--it-blue);
    --bs-btn-hover-bg: var(--it-blue-700);
    --bs-btn-hover-border-color: var(--it-blue-700);
    --bs-btn-active-bg: var(--it-blue-800);
    --bs-btn-active-border-color: var(--it-blue-800);
    --bs-btn-disabled-bg: var(--it-blue);
    --bs-btn-disabled-border-color: var(--it-blue);
}
.btn-outline-primary {
    --bs-btn-color: var(--it-blue-700);
    --bs-btn-border-color: var(--it-blue);
    --bs-btn-hover-bg: var(--it-blue);
    --bs-btn-hover-border-color: var(--it-blue);
    --bs-btn-active-bg: var(--it-blue-700);
    --bs-btn-active-border-color: var(--it-blue-700);
}
.btn-link { --bs-btn-color: var(--it-blue-700); --bs-btn-hover-color: var(--it-blue-800); }
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--it-blue);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .2);
}
.form-check-input:checked { background-color: var(--it-blue); border-color: var(--it-blue); }
/* Tabs: deutlicher aktiver Zustand — getönter Hintergrund + fett + kräftiger
   blauer Unterstrich; inaktive Tabs gedämpft, damit der aktive klar heraussticht. */
.nav-tabs {
    --bs-nav-tabs-border-width: 0;
    border-bottom: 2px solid var(--it-line);
    gap: .25rem;
}
.nav-tabs .nav-link {
    border: 0;
    margin-bottom: -2px;
    padding: .6rem 1.05rem;
    color: var(--it-slate);
    font-weight: 500;
    border-bottom: 3px solid transparent;
    border-radius: .45rem .45rem 0 0;
}
.nav-tabs .nav-link:hover { color: var(--it-ink); background: var(--it-canvas); }
.nav-tabs .nav-link.active {
    color: var(--it-blue-700);
    background: var(--it-blue-050);
    font-weight: 700;
    border-bottom: 3px solid var(--it-blue);
}
.progress-bar { background-color: var(--it-blue); }
::selection { background: var(--it-blue-050); }

/* Mono-Ziffern für Beträge/Counts (tabellarisch ausgerichtet). */
.mono, .font-monospace {
    font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, "Courier New", monospace;
    font-variant-numeric: tabular-nums;
}

/* Card — klar abgesetzt: warmer Rahmen + gestufter, weicher Schatten (Tiefe). */
.card {
    --bs-card-border-color: var(--it-line);
    --bs-card-bg: var(--it-surface);
    --bs-card-spacer-y: 1.25rem;
    --bs-card-spacer-x: 1.25rem;
    box-shadow: 0 1px 2px rgba(var(--it-shadow), .05),
                0 6px 20px -6px rgba(var(--it-shadow), .12);
}

/* Vertikal gestapelte Cards (z.B. Team-Usage-Tab: Budget + Verbrauch):
   klarer Abstand. Grid-Spalten sind durch .col getrennt, daher nicht betroffen. */
.card + .card { margin-top: 1.5rem; }

/* Card-Header: dezenter Hairline-Divider + kräftigerer Titel (mehr Definition). */
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--it-line);
    padding: .9rem 1.25rem;
    font-weight: 600;
    color: var(--it-ink);
}

/* Einordnungs-Chip (Modelle): überall identisch, klar als Chip lesbar. */
.chip-model {
    display: inline-block;
    padding: .22rem .6rem;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.25;
    border-radius: 999px;
    background: var(--it-blue-050);
    color: var(--it-blue-800);
    border: 1px solid rgba(0, 84, 159, .32);
    white-space: nowrap;
    cursor: pointer;   /* klickbar: kopiert den Modellnamen */
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.chip-model:hover { background: #d4e3f5; border-color: rgba(0, 84, 159, .55); }
.chip-model:focus-visible { outline: 2px solid var(--it-blue); outline-offset: 1px; }
.chip-model.chip-copied { background: #d1e7dd; color: #0f5132; border-color: #a3cfbb; }

/* Nach Anbieter gruppierte Modell-Chips (Team-General-Tab). */
.model-group-row {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: .5rem 1rem;
    align-items: start;
    padding: .55rem 0;
}
.model-group-row + .model-group-row { border-top: 1px solid var(--it-line); }
.model-group-provider {
    font-size: .82rem;
    font-weight: 600;
    color: var(--it-slate);
    padding-top: .2rem;
}
@media (max-width: 575.98px) {
    .model-group-row { grid-template-columns: 1fr; gap: .35rem; }
}

/* ============================================================================
   App-Shell-Layout (Sidebar + Topbar). Clean-itestra: helle Flächen, Blau-Akzent.
   ============================================================================ */
body { min-height: 100vh; }

.app-shell {
    display: grid;
    grid-template-columns: var(--it-sidebar-w) 1fr;
    min-height: 100vh;
}

/* --- Sidebar ---
   Persistente Sidebar (Desktop) + Bootstrap-Offcanvas (Mobil) über .offcanvas-lg.
   Visuelles (Hintergrund/Border) ist hier; Position übernimmt unten je Breakpoint
   das eigene Media-Query bzw. Bootstrap (Mobil). */
.app-sidebar {
    --bs-offcanvas-width: 264px;
    background: var(--it-surface);
    border-right: 1px solid var(--it-line);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.25rem 1rem;
}
.app-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--it-ink);
    letter-spacing: .01em;
    padding: .25rem .5rem 0;
}
.app-brand svg { color: var(--it-blue); flex-shrink: 0; }

.app-nav { display: flex; flex-direction: column; gap: 2px; }
.app-nav-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .7rem;
    border-radius: .55rem;
    color: var(--it-slate);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
    position: relative;
    transition: background .15s ease, color .15s ease;
}
.app-nav-link svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .9; }
.app-nav-link:hover { background: var(--it-canvas); color: var(--it-ink); }
.app-nav-link.active {
    color: var(--it-blue-700);
    background: var(--it-blue-050);
    font-weight: 600;
}
.app-nav-link.active::before {
    content: "";
    position: absolute;
    left: -1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--it-blue);
    border-radius: 0 3px 3px 0;
}

/* Team-Navigation: pro Kunde eine kräftige Überschrift, darunter die Teams an
   einer zarten senkrechten Leitlinie eingerückt — so liest sich die Hierarchie
   (Kunde → Teams) ohne Fläche. Unter "Teams" eingerückt via padding-left
   (richtet sich am Label-Icon aus). */
.app-nav-sub {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-top: 4px;
    padding-left: calc(.7rem + 9px);
}
.app-nav-group { display: flex; flex-direction: column; }
/* Kunden-Gruppenüberschrift: dunkler/kräftiger als die Teamnamen, damit Kunde
   und Team klar auseinandergehen. */
.app-nav-customer {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--it-ink);
    padding: 0 .55rem .3rem;
}
/* Teams hängen an einer senkrechten Leitlinie = sichtbare Zugehörigkeit zum Kunden. */
.app-nav-group-teams {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-left: .35rem;
    padding-left: .55rem;
    border-left: 1px solid var(--it-line);
}
.app-nav-sublink {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .38rem .5rem;
    border-radius: .4rem;
    color: var(--it-slate);
    text-decoration: none;
    font-size: .85rem;
}
.app-nav-sublink-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-nav-sublink:hover { background: var(--it-canvas); color: var(--it-ink); }
.app-nav-sublink.active { background: var(--it-blue-050); color: var(--it-blue-700); font-weight: 600; }
/* Lead-Marker: kleiner Brand-Blau-Kreis mit weißem "L", rechtsbündig hinter dem
   Teamnamen (gleiches Blau wie die Primär-Buttons; weiß auf Navy ist gut lesbar). */
.app-nav-leader-badge {
    flex-shrink: 0;
    margin-left: auto;
    width: 16px; height: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--it-blue);
    color: var(--it-surface);
    font-size: .6rem;
    font-weight: 700;
    line-height: 1;
}

/* --- Main column --- */
.app-main { display: flex; flex-direction: column; min-width: 0; }
.app-topbar {
    height: var(--it-topbar-h);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.5rem;
    background: var(--it-surface);
    border-bottom: 1px solid var(--it-line);
    position: sticky;
    top: 0;
    z-index: 1020;
}
.app-greeting {
    font-weight: 600;
    color: var(--it-ink);
    margin: 0 auto 0 0;
}
.app-content {
    flex: 1;
    padding: 1.75rem 2rem;
    width: 100%;
    min-width: 0;   /* erlaubt, dass breite Tabellen schrumpfen statt zu überlaufen */
}
.app-foot {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--it-line);
    color: var(--it-muted);
    font-size: .75rem;
    text-align: center;
}
.app-foot span { font-family: ui-monospace, Consolas, monospace; }

/* Avatar (Topbar) — Bootstrap-Dropdown übernimmt das Menü-Verhalten. */
.app-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--it-blue);
    color: #fff; font-weight: 700; font-size: .85rem;
    border: 2px solid transparent;
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden; padding: 0; position: relative;
    transition: border-color .15s ease, transform .15s ease;
}
.app-avatar:hover { border-color: var(--it-blue-050); transform: translateY(-1px); }
.app-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.app-avatar.has-img { background: transparent; }
.app-avatar.has-img .app-avatar-initials { display: none; }

/* Page header (Titel + optional Action). */
.page-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.75rem;
}
.page-head h1 { font-weight: 700; font-size: 1.9rem; color: var(--it-ink); line-height: 1.1; margin: 0; }
.page-head .page-sub { color: var(--it-muted); font-size: .9rem; margin-top: .15rem; }

/* ============================================================================
   Tabellen-Enhancer (.dt-*) — Styling für die von enhanceTable() (common.js)
   erzeugte Toolbar/Pager/Sortier-Indikatoren. Verhalten bleibt im JS.
   ============================================================================ */
.dt-wrap { display: flex; flex-direction: column; gap: .75rem; }
.dt-toolbar { display: flex; justify-content: flex-end; }
.dt-search {
    min-width: 220px;
    padding: .4rem .65rem;
    border: 1px solid var(--it-line);
    border-radius: var(--bs-border-radius);
    font-size: .9rem;
}
.dt-search:focus { outline: none; border-color: var(--it-blue); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .2); }
.dt-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.dt-sortable::after { content: " ↕"; opacity: .35; font-size: .8em; }
.dt-sortable[data-sort-dir="asc"]::after { content: " ↑"; opacity: .9; }
.dt-sortable[data-sort-dir="desc"]::after { content: " ↓"; opacity: .9; }
.dt-empty td { text-align: center; color: var(--it-muted); padding: 1.5rem; }
.dt-pager { display: none; align-items: center; gap: .5rem; justify-content: flex-end; }
.dt-info { color: var(--it-muted); font-size: .8rem; margin-right: auto; }

/* Status-Punkt (Budget-Ampel) — wird vom ui.status-Macro genutzt. */
.status-dot { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; }

/* ECharts-Host: feste Höhe, damit das Chart mounten kann. */
.echart-host { width: 100%; height: 300px; }

/* Horizontale $-Balkenliste (renderBarList aus common.js). */
.bar-list { display: flex; flex-direction: column; gap: .5rem; }
.bar-row { display: grid; grid-template-columns: minmax(0, 1fr) 2fr auto; gap: .75rem; align-items: center; font-size: .85rem; }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: .5rem; background: var(--it-line); border-radius: 999px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--it-blue); border-radius: 999px; }
.bar-fill-alt { background: var(--it-blue-800); }
.bar-value { text-align: right; }

/* Legenden-Variante: Balkenliste mit Farb-Swatch (Chart-Serienfarbe) + Hover-Highlight.
   Die Füllung (.bar-fill) bleibt bewusst navy; nur der Swatch trägt die Serienfarbe. */
.bar-list-legend .bar-row { grid-template-columns: auto minmax(0, 1fr) 2fr auto; }
.bar-swatch { width: .6rem; height: .6rem; border-radius: 999px; flex-shrink: 0; }
.bar-row-interactive { cursor: pointer; border-radius: 6px; padding: .15rem .35rem; transition: background-color .12s ease; }
.bar-row-interactive:hover, .bar-row-interactive:focus-visible { background: var(--it-line); outline: none; }

/* Lade-Spinner (spinnerHTML aus common.js). */
.usage-loading { display: flex; align-items: center; gap: .6rem; color: var(--it-muted); padding: 1rem 0; }
.usage-spinner {
    width: 1rem; height: 1rem; border-radius: 50%;
    border: 2px solid var(--it-line); border-top-color: var(--it-blue);
    animation: it-spin .7s linear infinite;
}
@keyframes it-spin { to { transform: rotate(360deg); } }

/* Scroll-Box (z.B. Disclaimer-Text). */
.scroll-box { max-height: 220px; overflow-y: auto; }
.pre-wrap { white-space: pre-wrap; }

/* Kleine Layout-Tokens, damit Templates ohne inline style= auskommen. */
.app-usermenu { min-width: 240px; }
.modal-icon { width: 40px; height: 40px; }
.budget-bar { height: .5rem; }

/* ============================================================================
   JS-gerenderte Spezial-Widgets (Charts/Usage). Bootstrap deckt diese
   nicht ab; Klassennamen werden von charts.js/keys.js/team_detail.js
   erzeugt. Reine Widget-Optik — die generischen Komponenten (Tabellen, Cards,
   Buttons, Badges) kommen weiterhin aus Bootstrap.
   ============================================================================ */
.usage-totals-cards { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.mini-stat { display: flex; flex-direction: column; gap: 2px; padding: 1rem; background: var(--it-canvas); border: 1px solid var(--it-line); border-radius: var(--bs-border-radius); min-width: 120px; }
.mini-stat-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--it-muted); font-weight: 600; }
.mini-stat-value { font-size: 1.2rem; color: var(--it-ink); }
.usage-subhead { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--it-muted); margin: 1.25rem 0 .5rem; }
.usage-chart { width: 100%; }
.usage-error { color: #842029; background: #f8d7da; border: 1px solid #f1aeb5; border-radius: var(--bs-border-radius); padding: .75rem 1rem; }

/* Tokens/$-Umschalter (charts.js). */
.metric-toggle { display: flex; margin: 0 0 .5rem auto; border: 1px solid var(--it-line); border-radius: var(--bs-border-radius); overflow: hidden; width: fit-content; }
.metric-toggle button { appearance: none; border: 0; background: #fff; color: var(--it-slate); font: inherit; font-size: .85rem; padding: 4px 14px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.metric-toggle button + button { border-left: 1px solid var(--it-line); }
.metric-toggle button:hover { background: var(--it-canvas); }
.metric-toggle button.is-active { background: var(--it-blue); color: #fff; }

/* Tabellen-Link + Icon-Button + Pill-mit-Action. */
.team-link { color: var(--it-blue-700); text-decoration: none; font-weight: 500; }
.team-link:hover { text-decoration: underline; }
.pill-with-action { display: inline-flex; align-items: center; gap: .5rem; }
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: var(--bs-border-radius-sm);
    color: var(--it-blue-700); border: 1px solid var(--it-line); background: #fff;
    text-decoration: none; transition: background .15s ease, border-color .15s ease;
}
.icon-btn:hover { background: var(--it-canvas); border-color: var(--it-blue); }

/* ORCA-Profil-Editor: Rollen-Karte mit Zustands-Rahmen (JS toggelt Klassen). */
.profile-model-card { border: 1px solid var(--it-line); border-radius: var(--bs-border-radius); padding: .75rem; }
.profile-model-role { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--it-muted); font-weight: 600; margin-bottom: .35rem; }
.profile-model-card-stale { border-color: var(--bs-warning); }
.profile-model-card-error { border-color: var(--bs-danger); }
.profile-model-error { color: #842029; font-size: .8rem; margin-top: .35rem; }

/* Teams-Übersicht: klickbare Karte (Hover-Lift) + Kunden-Akkordeon. */
.team-card { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.team-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1.25rem rgba(16,24,40,.1); border-color: var(--it-blue); }
.customer-summary { list-style: none; cursor: pointer; user-select: none; }
.customer-summary::-webkit-details-marker { display: none; }
.customer-chevron { display: inline-flex; color: var(--it-muted); transition: transform .15s ease; }
.customer-section[open] .customer-chevron { transform: rotate(90deg); }

/* ============================================================================
   Auth-Seiten (login/error) — zentrierte Karte ohne App-Shell.
   ============================================================================ */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 2rem; }
.auth-card { width: 100%; max-width: 440px; text-align: center; }
.auth-card .auth-logo { color: var(--it-blue); margin-bottom: 1rem; }

/* ============================================================================
   Responsive: ab lg persistente Sidebar (sticky), darunter Bootstrap-Offcanvas.
   Bootstraps .offcanvas-lg macht die Sidebar ab lg „transparent !important" und
   border-los — hier mit !important wieder zur sichtbaren Sidebar-Fläche machen.
   ============================================================================ */
@media (min-width: 992px) {
    .app-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
        background: var(--it-surface) !important;
        border-right: 1px solid var(--it-line) !important;
    }
}
@media (max-width: 991.98px) {
    .app-shell { grid-template-columns: 1fr; }
    .app-content { padding: 1.25rem; }
}