@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@400;500;600;700&display=swap');

:root {
    --weber-primary: #009EE3;
    --weber-accent1: #007DB6;
    --weber-secondary: #39D2C0;
    --weber-tertiary: #EE8B60;
    --weber-alternate: #E0E3E7;
    --weber-primary-text: #14181B;
    --weber-secondary-text: #57636C;
    --weber-primary-bg: #F1F4F8;
    --weber-secondary-bg: #FFFFFF;
    --weber-success: #249689;
    --weber-warning: #F9CF58;
    --weber-error: #FF5963;
    --weber-info: #FFFFFF;
    --weber-shadow-sm: 0 1px 2px rgba(20, 24, 27, 0.06), 0 1px 3px rgba(20, 24, 27, 0.08);
    --weber-shadow-md: 0 2px 6px rgba(20, 24, 27, 0.08), 0 4px 12px rgba(20, 24, 27, 0.06);
    --weber-shadow-lg: 0 8px 24px rgba(20, 24, 27, 0.1), 0 2px 6px rgba(20, 24, 27, 0.06);
    --weber-radius: 12px;
    --weber-radius-pill: 40px;
    --weber-topbar-h: 64px;
    --weber-sidebar-w: 260px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    font-family: 'Inter Tight', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--weber-primary-bg);
    color: var(--weber-primary-text);
    min-height: 100vh;
}

a {
    color: var(--weber-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1, h2, h3, h4 {
    font-family: 'Inter Tight', sans-serif;
    color: var(--weber-primary-text);
}

h1:focus {
    outline: none;
}

.validation-message {
    color: var(--weber-error);
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "Es ist ein Fehler aufgetreten.";
}

/* =========================================================
   Login (zentrierte Karte auf hellem Hintergrund)
   ========================================================= */
.weber-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 20% 20%, rgba(0, 158, 227, 0.08), transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(57, 210, 192, 0.08), transparent 50%),
        var(--weber-primary-bg);
    padding: 24px;
}

.weber-login-card {
    width: 100%;
    max-width: 460px;
    background-color: var(--weber-secondary-bg);
    border-radius: var(--weber-radius);
    box-shadow: var(--weber-shadow-lg);
    overflow: hidden;
    animation: weberFadeIn 0.4s ease-in-out;
}

.weber-login-header {
    background-color: var(--weber-primary);
    color: #FFFFFF;
    padding: 22px 28px;
}

.weber-login-header .brand {
    font-family: 'Inter Tight', sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    opacity: 0.85;
}

.weber-login-header h1 {
    font-family: 'Inter Tight', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #FFFFFF;
    margin: 4px 0 0 0;
}

.weber-login-body {
    padding: 28px;
}

.weber-login-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--weber-alternate);
    margin-bottom: 22px;
}

.weber-login-tabs .tab {
    background: none;
    border: none;
    padding: 10px 24px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--weber-secondary-text);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}

.weber-login-tabs .tab.active {
    color: var(--weber-primary-text);
    border-bottom-color: var(--weber-primary);
}

.weber-login-tabs .tab:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.weber-login-title {
    font-family: 'Inter Tight', sans-serif;
    font-size: 20px;
    font-weight: 500;
    margin: 0;
}

.weber-login-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--weber-secondary-text);
    margin: 4px 0 18px 0;
    white-space: pre-line;
}

@keyframes weberFadeIn {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* =========================================================
   Authentifiziertes Layout: Topbar + Sidebar + Content
   ========================================================= */
.weber-app {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--weber-sidebar-w) 1fr;
    grid-template-rows: var(--weber-topbar-h) 1fr;
    grid-template-areas:
        "topbar topbar"
        "sidebar content";
    background-color: var(--weber-primary-bg);
    transition: grid-template-columns 0.2s ease;
}

.weber-app.is-collapsed {
    grid-template-columns: 0 1fr;
}

.weber-app.is-collapsed .weber-sidebar {
    display: none;
}

.weber-topbar {
    grid-area: topbar;
    background: linear-gradient(to right,
        #000000 0,
        #000000 var(--weber-sidebar-w),
        var(--weber-primary) var(--weber-sidebar-w),
        var(--weber-primary) 100%);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    box-shadow: var(--weber-shadow-md);
    position: sticky;
    top: 0;
    z-index: 50;
}

.weber-topbar .topbar-toggles {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: -16px;
    /* Breite des schwarzen Header-Bereichs (Sidebar-Breite) minus Start-Offset,
       damit das Logo per margin-left:auto rechtsbuendig zur schwarzen Flaeche steht. */
    width: calc(var(--weber-sidebar-w) - 12px);
    padding-right: 16px;
}

.weber-topbar .topbar-toggles .sidebar-toggle {
    margin-right: 0;
}

.weber-topbar .topbar-toggles .topbar-logo {
    height: 40px;
    width: auto;
    display: block;
    object-fit: contain;
    margin-left: auto;
}

.weber-topbar .user-block {
    position: relative;
}

.weber-topbar .avatar-wrap .avatar {
    cursor: pointer;
}

.avatar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

.avatar-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #FFFFFF;
    border: 1px solid var(--weber-alternate);
    border-radius: 8px;
    box-shadow: var(--weber-shadow-md);
    min-width: 170px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 100;
}

.avatar-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 0;
    text-align: left;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    color: var(--weber-primary-text);
    white-space: nowrap;
}

.avatar-menu-item img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.avatar-menu-item:hover {
    background: var(--weber-primary-bg);
}

.weber-topbar .sidebar-toggle {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 6px 10px;
    margin-right: 12px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.weber-topbar .sidebar-toggle:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

.weber-topbar .sidebar-toggle .bar {
    width: 22px;
    height: 2px;
    background-color: #FFFFFF;
    border-radius: 1px;
    display: block;
}

.weber-topbar .brand {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-right: auto;
    margin-left: 24px;
}

.weber-topbar .topbar-seite {
    /* Aktueller Seitenname absolut mittig im Menueband, unabhaengig von der Breite der Seitenbloecke. */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

.weber-topbar .topbar-seite .name {
    font-family: 'Inter Tight', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}

.weber-topbar .brand .name {
    font-family: 'Inter Tight', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}

.weber-topbar .brand .sub {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    opacity: 0.8;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 1.1px;
}

.weber-topbar .user-block {
    display: flex;
    align-items: center;
    gap: 16px;
}

.weber-topbar .user-block .who {
    text-align: right;
    line-height: 1.2;
}

/* Nur wenn die Schluessel-Anzeige freigeschaltet ist, kopiert ein Klick sie als JSON. */
.weber-topbar .user-block .who.is-klickbar {
    cursor: pointer;
}

.weber-topbar .user-block .who .kopiert {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    opacity: 0.85;
}

.weber-topbar .user-block .who .name {
    font-family: 'Inter Tight', sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.weber-topbar .user-block .who .role {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.weber-topbar .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.18);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter Tight', sans-serif;
    font-size: 15px;
    font-weight: 600;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.weber-topbar .logout-btn {
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--weber-radius-pill);
    padding: 8px 18px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s;
}

.weber-topbar .logout-btn:hover {
    background-color: rgba(255, 255, 255, 0.22);
}

/* Sidebar */
/* Das Seitenmenue scrollt unabhaengig vom Inhalt (14.08.2026).

   Vorher wuchs die Leiste mit der Seite: Ihr overflow-y griff nie, weil die Gitterzeile so
   hoch wurde wie der Inhalt. Bei langen Masken wanderte das Menue nach oben aus dem Bild,
   und bei Modulen mit vielen Eintraegen - DokuTool-NewMenu hat zwoelf Gruppen mit rund 120 Masken -
   musste man erst die ganze Seite hinunterscrollen, um an die unteren Punkte zu kommen.

   Loesung ohne Eingriff in den Seitenfluss: Die Leiste bleibt haften (sticky) und bekommt
   die Hoehe des sichtbaren Bereichs unter der Topbar, die ihrerseits schon sticky ist.
   Damit hat sie einen eigenen Rollbalken, waehrend der Inhalt weiter im Fenster scrollt -
   bestehende Masken, die auf das Fensterscrollen bauen, bleiben unberuehrt.

   align-self: start ist noetig, weil Gitterelemente sonst auf die volle Zeilenhoehe
   gestreckt werden und "sticky" nichts zu haften haette. */
.weber-sidebar {
    grid-area: sidebar;
    background-color: var(--weber-secondary-bg);
    border-right: 1px solid var(--weber-alternate);
    padding: 24px 0;
    position: sticky;
    top: var(--weber-topbar-h);
    align-self: start;
    height: calc(100vh - var(--weber-topbar-h));
    overflow-y: auto;
    /* Am Ende der Liste nicht die Seite darunter mitscrollen. */
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--weber-alternate) transparent;
}

.weber-sidebar::-webkit-scrollbar {
    width: 8px;
}

.weber-sidebar::-webkit-scrollbar-thumb {
    background-color: var(--weber-alternate);
    border-radius: 4px;
}

.weber-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.weber-sidebar .group-title {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: var(--weber-secondary-text);
    padding: 12px 24px 6px 24px;
}

/* Aufklappbare Gruppe im Seitenmenue (Module mit vielen Masken). Die Ueberschrift ist
   hier ein <summary> und damit anklickbar - deshalb Zeiger und Hervorhebung, sonst
   sieht sie wie eine gewoehnliche Ueberschrift aus und niemand klickt darauf. */
.weber-nav-gruppe > summary.group-title {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

.weber-nav-gruppe > summary.group-title::-webkit-details-marker {
    display: none;
}

/* Eigenes Dreieck, damit es in jedem Browser gleich aussieht und mitdreht. */
.weber-nav-gruppe > summary.group-title::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 4px solid currentColor;
    border-top: 3.5px solid transparent;
    border-bottom: 3.5px solid transparent;
    transition: transform .15s ease;
}

.weber-nav-gruppe[open] > summary.group-title::before {
    transform: rotate(90deg);
}

.weber-nav-gruppe > summary.group-title:hover {
    color: var(--weber-primary-text);
}

.weber-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.weber-nav li {
    margin: 0;
}

/* Eintraege, die in ein eigenstaendiges Modul wechseln, sind Anker OHNE href - sonst
   wuerde ein href="#" auf "/" navigieren und dort kurz die Startroute einblenden.
   Ohne href setzen Browser aber den Standardzeiger, deshalb hier ausdruecklich. */
.weber-tile[role="button"],
.weber-nav a[role="button"] {
    cursor: pointer;
}

.weber-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 24px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--weber-primary-text);
    border-left: 3px solid transparent;
    transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}

.weber-nav a:hover {
    text-decoration: none;
    background-color: var(--weber-primary-bg);
    color: var(--weber-accent1);
}

.weber-nav a.active {
    background-color: rgba(0, 158, 227, 0.08);
    color: var(--weber-accent1);
    border-left-color: var(--weber-primary);
}

.weber-nav .ico {
    width: 36px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.weber-nav .ico img {
    width: 36px;
    height: 28px;
    object-fit: contain;
    display: block;
}

.weber-app.is-collapsed .weber-sidebar .group-title {
    display: none;
}

.weber-app.is-collapsed .weber-nav a {
    justify-content: center;
    padding: 11px 0;
    gap: 0;
}

.weber-app.is-collapsed .weber-nav a > span:last-child {
    display: none;
}

/* Content-Bereich */
.weber-content {
    grid-area: content;
    padding: 28px 32px;
    overflow-y: auto;
}

.weber-content.is-flush {
    padding: 0;
}

.weber-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.weber-content-header h1 {
    font-family: 'Inter Tight', sans-serif;
    font-size: 26px;
    font-weight: 600;
    margin: 0;
    color: var(--weber-primary-text);
}

.weber-content-header .crumbs {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--weber-secondary-text);
}

/* Panel = weiße Karte mit Schatten — Bauteil für Inhalte */
.weber-panel {
    background-color: var(--weber-secondary-bg);
    border-radius: var(--weber-radius);
    box-shadow: var(--weber-shadow-sm);
    border: 1px solid var(--weber-alternate);
    padding: 22px 24px;
}

.weber-panel + .weber-panel {
    margin-top: 20px;
}

.weber-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -2px 0 14px 0;
}

.weber-panel-header h2 {
    font-family: 'Inter Tight', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--weber-primary-text);
    margin: 0;
}

.weber-panel-header .hint {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--weber-secondary-text);
}

/* Tile-Grid (Home-Dashboard, mehr Spalten als in der App) */
.weber-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}

.weber-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 18px 12px 14px 12px;
    background-color: var(--weber-secondary-bg);
    border: 1px solid var(--weber-alternate);
    border-radius: var(--weber-radius);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.weber-tile:hover {
    text-decoration: none;
    border-color: var(--weber-primary);
    box-shadow: var(--weber-shadow-md);
    transform: translateY(-2px);
    color: inherit;
}

.weber-tile img {
    width: 96px;
    height: 76px;
    object-fit: contain;
    margin-bottom: 8px;
}

.weber-tile-label {
    font-family: 'Inter Tight', sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    color: var(--weber-primary-text);
    line-height: 1.3;
}

/* Form-Grundbausteine im Weber-Stil (pill-shaped, Inter Tight) */
.weber-form {
    max-width: 600px;
}

/* Ticket-Bearbeiten: Eingabe-Formulare nutzen die volle Panel-/Seitenbreite. */
.ticket-form {
    max-width: none;
}

/* Sync-Formulare nutzen die volle Panel-Breite (statt 600px), damit das Dropdown
   breit bleibt und die Buttons rechts daneben den freien Platz fuellen. */
.dbsync-form {
    max-width: none;
}

/* Dropdown + Button nebeneinander (Button rechts neben dem Dropdown) */
.dbsync-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Auf der Sync-Seite kein Lade-Spinner anzeigen – der Wait-Cursor signalisiert das Laden. */
.dbsync-row .weber-row-spinner {
    display: none;
}

/* Transparentes Voll-Overlay, das waehrend einer Aktion nur den Maus-Wait-Cursor setzt
   (kein Symbol, blockiert solange Eingaben). */
.dbsync-wait-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    cursor: wait;
    background: transparent;
}

.dbsync-row .weber-dropdown {
    flex: 0 0 350px;
    width: 350px;
}

.dbsync-row .weber-btn-primary {
    flex: 0 0 auto;
    white-space: nowrap;
}

.weber-form-row {
    margin-bottom: 16px;
}

.weber-form-row .label {
    display: block;
    font-family: 'Inter Tight', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--weber-primary-text);
    margin-bottom: 6px;
    padding-left: 6px;
}

/* Kaskaden-Formular breit genug, damit die Dropdown-Spalte (1fr) trotz der
   reservierten Button-Spalte 533px breit bleibt: 533 + 288 (Buttons) + 12 (gap). */
.weber-form-kaskade {
    max-width: 833px;
}

/* Grid mit fester Button-Spalte: Die Dropdown-Spalte (1fr) bleibt in jeder Zeile
   gleich breit, egal ob der/die Button(s) vorhanden sind. Die Spalte fasst die
   zwei gleich grossen Buttons 'Zurück' + 'Anlegen' (2x 140px + 8px gap). */
.weber-kaskade-control {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 288px;
    align-items: center;
    gap: 12px;
}

/* Zusammenfassung der getroffenen Auswahl an der Position des ersten Dropdowns
   (ueberlagert das ausgeblendete Dropdown, das den Platz reserviert). */
.weber-kaskade-zusammenfassung {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    max-width: 100%;
    padding: 0 6px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--weber-primary-text);
}

/* Label 'Wird versetzt nach' in gleicher Groesse wie die Abschnitts-Ueberschrift
   'Kostenträger zuweisung'. */
.label.weber-kaskade-titel {
    font-size: 15px;
    font-weight: 600;
}

/* Abschnitts-Ueberschrift im Slot der ausgeblendeten Unternehmensgruppe-Zeile,
   steht damit direkt ueber dem Firma-Dropdown (Fensterhoehe bleibt konstant). */
.weber-kaskade-zuweisung {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0 6px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--weber-primary-text);
}

.weber-kaskade-btn-gruppe {
    /* Immer in der rechten Button-Spalte, auch wenn das Dropdown ausgeblendet ist. */
    grid-column: 2;
    display: flex;
    gap: 8px;
}

/* Alle drei Buttons ('Übernehmen', 'Zurück', 'Anlegen') exakt gleich gross. */
.weber-kaskade-btn,
.weber-kaskade-btn-gruppe .weber-btn-primary,
.weber-kaskade-btn-gruppe .weber-btn-secondary {
    width: 140px;
    padding: 12px 0;
    white-space: nowrap;
    text-align: center;
}

.weber-kaskade-control .weber-dropdown {
    width: 100%;
    /* Verhindert, dass ein langer Eintrag die 1fr-Spalte ueber ihre Breite hinaus
       aufdehnt (Grid-Blowout). Der Text wird stattdessen per Ellipsis gekuerzt. */
    min-width: 0;
}

/* Dropdown-Wrapper als Grid-Item (Spalte 1): min-width:0 gegen Grid-Blowout. */
.weber-kaskade-dd {
    min-width: 0;
}

/* Unsichtbar, behaelt aber den Platz im Layout, damit das Fenster beim Ausblenden
   der Dropdowns nicht kleiner wird. */
.weber-kaskade-versteckt {
    visibility: hidden;
}

.weber-kaskade-btn {
    justify-self: start;
    white-space: nowrap;
}

.weber-input,
.weber-select,
.weber-textarea {
    width: 100%;
    padding: 14px 22px;
    border: 2px solid var(--weber-alternate);
    border-radius: var(--weber-radius-pill);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--weber-primary-text);
    background-color: var(--weber-secondary-bg);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.weber-input:focus,
.weber-select:focus,
.weber-textarea:focus {
    border-color: var(--weber-primary);
    box-shadow: 0 0 0 3px rgba(0, 158, 227, 0.15);
}

.weber-input.is-error,
.weber-select.is-error,
.weber-textarea.is-error {
    border-color: var(--weber-error);
}

.weber-textarea {
    border-radius: 18px;
    min-height: 140px;
    resize: vertical;
    padding: 14px 18px;
}

/* Aufgeklappte Auswahlliste an die CI angleichen (soweit der Browser es zulaesst:
   Markierung/Auswahl und accent-color werden von Chromium/Edge beruecksichtigt) */
.weber-select {
    accent-color: var(--weber-primary);
}

.weber-select option {
    background-color: var(--weber-secondary-bg);
    color: var(--weber-primary-text);
    padding: 8px 12px;
}

.weber-select option:hover,
.weber-select option:focus {
    background-color: var(--weber-primary-bg);
    color: var(--weber-accent1);
}

.weber-select option:checked {
    background-color: var(--weber-primary);
    color: var(--weber-secondary-bg);
}

/* CI-Dropdown: eigenes Menue statt nativem <select>, damit auch die
   Aufklappliste abgerundete Ecken, Schatten und CI-Hover bekommt. */
.weber-dropdown {
    position: relative;
    width: 100%;
}

.weber-dropdown-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 22px;
    border: 2px solid var(--weber-alternate);
    border-radius: var(--weber-radius-pill);
    background-color: var(--weber-secondary-bg);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--weber-primary-text);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.weber-dropdown-toggle:hover:not(:disabled) {
    border-color: var(--weber-primary);
}

.weber-dropdown-toggle:focus-visible {
    outline: none;
    border-color: var(--weber-primary);
    box-shadow: 0 0 0 3px rgba(0, 158, 227, 0.15);
}

.weber-dropdown-toggle.is-open {
    border-color: var(--weber-primary);
    box-shadow: 0 0 0 3px rgba(0, 158, 227, 0.15);
}

.weber-dropdown-toggle:disabled {
    cursor: default;
    opacity: 0.7;
}

.weber-dropdown-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weber-dropdown-value.is-placeholder {
    color: var(--weber-secondary-text);
}

.weber-dropdown-arrow {
    flex-shrink: 0;
    color: var(--weber-primary);
    font-size: 12px;
    transition: transform 0.15s;
}

.weber-dropdown-toggle.is-open .weber-dropdown-arrow {
    transform: rotate(180deg);
}

.weber-dropdown-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.weber-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1001;
    margin: 0;
    padding: 6px;
    list-style: none;
    max-height: 240px;
    overflow-y: auto;
    background-color: var(--weber-secondary-bg);
    border: 1px solid var(--weber-alternate);
    border-radius: var(--weber-radius);
    box-shadow: 0 12px 28px rgba(20, 24, 27, 0.16);
}

/* Nach oben aufklappen, wenn unterhalb des Dropdowns zu wenig Platz ist. */
.weber-dropdown-menu.is-up {
    top: auto;
    bottom: calc(100% + 6px);
}

/* Tipp-Suche oben im Menue: bleibt beim Scrollen am oberen Rand kleben. */
.weber-dropdown-suche {
    position: sticky;
    top: -6px;
    margin: -6px -6px 6px -6px;
    padding: 6px;
    background-color: var(--weber-secondary-bg);
    z-index: 1;
}

.weber-dropdown-suche-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid var(--weber-alternate);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--weber-primary-text);
    background-color: var(--weber-primary-bg);
    outline: none;
}

.weber-dropdown-suche-input:focus {
    border-color: var(--weber-primary);
}

.weber-dropdown-option {
    padding: 10px 16px;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--weber-primary-text);
    cursor: pointer;
    transition: background-color 0.1s, color 0.1s;
}

.weber-dropdown-haken {
    display: inline-block;
    width: 18px;
    margin-right: 6px;
    font-size: 15px;
    line-height: 1;
    vertical-align: -1px;
}

.weber-dropdown-option:hover {
    background-color: var(--weber-primary-bg);
    color: var(--weber-accent1);
}

.weber-dropdown-option.is-selected {
    background-color: var(--weber-primary);
    color: var(--weber-secondary-bg);
}

.weber-dropdown-option.is-empty {
    color: var(--weber-secondary-text);
    cursor: default;
}

.weber-dropdown-option.is-empty:hover {
    background-color: transparent;
    color: var(--weber-secondary-text);
}

.weber-password-wrapper {
    position: relative;
}

.weber-password-wrapper .weber-input {
    padding-right: 56px;
}

.weber-toggle-password {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    padding: 4px;
}

.weber-actions {
    display: flex;
    gap: 12px;
    margin-top: 6px;
}

.weber-btn-primary,
.weber-btn-secondary,
.weber-btn-ghost {
    padding: 12px 28px;
    border-radius: var(--weber-radius-pill);
    font-family: 'Inter Tight', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    border: 2px solid transparent;
}

.weber-btn-primary {
    background-color: var(--weber-primary);
    color: #FFFFFF;
}

.weber-btn-primary:hover:not(:disabled) {
    background-color: var(--weber-accent1);
}

.weber-btn-primary:disabled {
    background-color: var(--weber-secondary-text);
    cursor: not-allowed;
    opacity: 0.7;
}

.weber-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}

.weber-mt-lg {
    margin-top: 32px;
}

.weber-btn-secondary {
    background-color: var(--weber-secondary-bg);
    color: var(--weber-primary);
    border-color: var(--weber-primary);
}

.weber-btn-secondary:hover {
    background-color: rgba(0, 158, 227, 0.06);
}

.weber-btn-ghost {
    background: none;
    color: var(--weber-secondary-text);
}

.weber-btn-ghost:hover {
    color: var(--weber-primary-text);
    background-color: var(--weber-primary-bg);
}

.weber-btn-block {
    width: 100%;
}

/* Banner / Hinweise */
.weber-banner {
    border-radius: 10px;
    padding: 12px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    margin-top: 10px;
    white-space: pre-line;
}

.weber-banner.is-error {
    color: var(--weber-error);
    background-color: rgba(255, 89, 99, 0.08);
}

.weber-banner.is-success {
    color: var(--weber-success);
    background-color: rgba(36, 150, 137, 0.1);
}

.weber-banner.is-info {
    color: var(--weber-accent1);
    background-color: rgba(0, 158, 227, 0.08);
}

/* Info-Liste (Benutzer Information / App-Information) — Desktop-Tabelle */
.weber-info-table {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 0;
    border-top: 1px solid var(--weber-alternate);
}

.weber-info-table .key,
.weber-info-table .val {
    padding: 11px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    border-bottom: 1px solid var(--weber-alternate);
    word-break: break-all;
}

.weber-info-table .key {
    font-weight: 600;
    color: var(--weber-primary-text);
    background-color: var(--weber-primary-bg);
}

.weber-info-table .val {
    color: var(--weber-secondary-text);
}

/* Einzeilige Label-Wert-Darstellung (Label fett, Wert daneben) */
.weber-info-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    padding: 4px 2px;
}

.weber-info-line .key {
    font-weight: 600;
    color: var(--weber-primary-text);
}

.weber-info-line .val {
    color: var(--weber-secondary-text);
}

/* Vertikaler Abstandhalter */
.weber-spacer {
    height: 24px;
}

/* Globales Warte-Overlay: zeigt waehrend des Ladens einen Warte-Cursor + Spinner
   und verhindert Interaktion, bis die Daten da sind (Fenster oeffnet erst danach). */
.weber-busy-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(20, 24, 27, 0.08);
    cursor: wait;
}

/* Platzhalter (z.B. "Coming Soon") */
.weber-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 56px 24px;
    color: var(--weber-secondary-text);
    font-family: 'Inter', sans-serif;
}

.weber-placeholder .ico {
    font-size: 56px;
    margin-bottom: 12px;
    color: var(--weber-primary);
}

.weber-placeholder h2 {
    font-family: 'Inter Tight', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--weber-primary-text);
    margin: 0 0 8px 0;
}

/* List für Mitarbeiter etc. */
.weber-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.weber-list li {
    padding: 12px 4px;
    border-bottom: 1px solid var(--weber-alternate);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--weber-primary-text);
}

/* Auth-Loader während Session-Wiederherstellung */
.weber-loading {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background-color: var(--weber-primary-bg);
    color: var(--weber-secondary-text);
    font-family: 'Inter', sans-serif;
}

.weber-loading .spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--weber-alternate);
    border-top-color: var(--weber-primary);
    border-radius: 50%;
    animation: weberSpin 0.8s linear infinite;
}

.weber-loading .text {
    font-size: 13px;
}

@keyframes weberSpin {
    to { transform: rotate(360deg); }
}

/* Responsive: Sidebar bei schmalem Browser ausblenden */
@media (max-width: 900px) {
    .weber-app {
        grid-template-columns: 1fr;
        grid-template-areas:
            "topbar"
            "content";
    }
    .weber-sidebar {
        display: none;
    }
    .weber-content {
        padding: 18px;
    }
    .weber-info-table {
        grid-template-columns: 1fr;
    }
    .weber-info-table .key {
        background-color: transparent;
        padding-bottom: 2px;
        border-bottom: none;
    }
    .weber-info-table .val {
        padding-top: 2px;
    }
}

/* ===== Mitarbeiter verwalten: Switch / Tabelle / Pagination ===== */
.weber-segmented {
    display: inline-flex;
    background: var(--weber-primary-bg);
    border: 1px solid var(--weber-alternate);
    border-radius: 0;
    padding: 2px;
    gap: 4px;
}
.weber-segmented button {
    border: none;
    background: transparent;
    color: var(--weber-secondary-text);
    height: 24px;
    padding: 0 16px;
    border-radius: 0;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
    transition: all 0.15s ease;
}
.weber-segmented button.active {
    background: var(--weber-primary);
    color: #fff;
    box-shadow: var(--weber-shadow-sm);
}

.weber-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.weber-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.weber-search .weber-input {
    min-width: 220px;
    margin: 0;
}

.weber-table-scroll {
    overflow-y: auto;
    max-height: calc(100vh - 360px);
}
.weber-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}
.weber-table-scroll .weber-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--weber-secondary-bg);
}
.weber-table th,
.weber-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--weber-alternate);
    vertical-align: middle;
}
.weber-table th {
    color: var(--weber-secondary-text);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.weber-table tbody tr:hover {
    background: var(--weber-primary-bg);
}
.weber-cell-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    color: var(--weber-secondary-text);
}
.weber-flag-yes {
    color: var(--weber-success);
    font-weight: 700;
}
.weber-flag-no {
    color: var(--weber-alternate);
}

.weber-btn-action {
    border: 1px solid var(--weber-alternate);
    background: var(--weber-secondary-bg);
    color: var(--weber-primary-text);
    border-radius: var(--weber-radius-pill, 40px);
    padding: 1px 14px;
    font-size: 0.8rem;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
}
.weber-btn-action.is-activate {
    background: var(--weber-primary);
    border-color: var(--weber-primary);
    color: #fff;
}
.weber-btn-action.is-deactivate {
    background: #b3122b;
    border-color: #b3122b;
    color: #fff;
}
.weber-btn-action.is-add {
    background: transparent;
    border-color: var(--weber-primary);
    color: var(--weber-primary);
}

.weber-btn-action.is-details {
    background: transparent;
    border-color: var(--weber-primary);
    color: var(--weber-primary);
}

/* Details-Modal: einspaltig (Mitarbeiter und Benutzer untereinander) mit Scrollbar. */
.weber-details-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 8px 4px 0;
    max-height: 60vh;
    overflow-y: auto;
}

.weber-details-block h4 {
    margin: 0 0 8px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--weber-primary-text);
}

.weber-details-block .weber-table td:first-child {
    font-weight: 500;
    color: var(--weber-secondary-text);
    white-space: nowrap;
    padding-right: 16px;
}

.weber-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.weber-overlay.is-top {
    z-index: 1100;
}
.weber-modal {
    position: relative;
    background: var(--weber-secondary-bg);
    border-radius: 12px;
    padding: 28px 32px;
    min-width: 320px;
    max-width: 90vw;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.weber-modal-wide {
    width: 960px;
    max-width: 92vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
}
.weber-modal-wide .weber-table-scroll {
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
}
.weber-row-select {
    cursor: pointer;
}
.weber-row-select.is-selected {
    background: rgba(0, 158, 227, 0.12);
}
.weber-row-select.is-selected td {
    font-weight: 600;
}
.weber-modal-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -28px -32px 18px -32px;
    padding: 12px 14px 12px 20px;
    background: var(--weber-primary);
    color: #fff;
    border-radius: 12px 12px 0 0;
    cursor: move;
    user-select: none;
}
.weber-modal-title {
    font-family: 'Inter Tight', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
}
.weber-modal-close {
    border: none;
    background: transparent;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    color: #fff;
    padding: 0 4px;
    opacity: 0.85;
}
.weber-modal-close:hover {
    opacity: 1;
}

.weber-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.weber-pagination button {
    border: 1px solid var(--weber-alternate);
    background: var(--weber-secondary-bg);
    color: var(--weber-primary-text);
    min-width: 38px;
    height: 38px;
    padding: 0 6px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
}
.weber-pagination button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.weber-pagination button.active {
    background: var(--weber-primary);
    border-color: var(--weber-primary);
    color: #fff;
    font-weight: 600;
    cursor: default;
}
.weber-pagination .ellipsis {
    color: var(--weber-secondary-text);
    min-width: 20px;
    text-align: center;
    user-select: none;
}
.weber-check-cell {
    text-align: center;
}
.weber-action-cell {
    text-align: center;
}
.weber-check-cell input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--weber-primary);
}
.weber-row-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--weber-alternate);
    border-top-color: var(--weber-primary);
    border-radius: 50%;
    animation: weber-spin 0.7s linear infinite;
}
@keyframes weber-spin {
    to { transform: rotate(360deg); }
}
.weber-pagination .weber-page-input {
    width: 64px;
    height: 38px;
    border: 1px solid var(--weber-alternate);
    background: var(--weber-secondary-bg);
    color: var(--weber-primary-text);
    border-radius: 20px;
    text-align: center;
    font-size: 0.95rem;
    padding: 0 8px;
    margin-left: 4px;
}
.weber-pagination .info {
    color: var(--weber-secondary-text);
    font-size: 0.9rem;
    min-width: 110px;
    text-align: center;
}

/* ===== Globale Vorgabe: Buttons und Dropdowns nicht abrunden (eckig) ===== */
.weber-btn-primary,
.weber-btn-secondary,
.weber-btn-ghost,
.weber-btn-block,
.weber-btn-action,
.weber-input,
.weber-select,
.weber-dropdown-toggle,
.weber-dropdown-menu,
.weber-dropdown-suche-input,
.weber-dropdown-option {
    border-radius: 0;
}

/* ===== Globale Vorgabe: feste Höhe 24px + Schriftgröße 12px für Standard-Buttons, Dropdowns und Textfelder ===== */
.weber-btn-primary,
.weber-btn-secondary,
.weber-btn-ghost {
    height: 24px;
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.weber-dropdown-toggle,
.weber-select,
.weber-input {
    height: 24px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
    font-size: 12px;
}

.weber-dropdown-value,
.weber-dropdown-option,
.weber-dropdown-suche-input {
    font-size: 12px;
}

/* ===== Globale Vorgabe: Fließtext auf den Seiten auf 12px (Überschriften ausgenommen) ===== */
body {
    font-size: 12px;
}

.weber-info-table .key,
.weber-info-table .val,
.weber-info-line,
.weber-form-row .label,
.weber-tile-label,
.weber-content-header .crumbs,
.weber-banner,
.weber-list li,
.weber-loading .text,
.weber-textarea,
.weber-kaskade-zusammenfassung,
.weber-kaskade-zuweisung,
.label.weber-kaskade-titel {
    font-size: 12px;
}