/* ==========================================================================
   HOCH.Sales.Cloud - globale Styles
   Reihenfolge der Einbindung (App.razor): bootstrap.min.css -> app.css -> dev-system.css -> *.razor.css

   Regeln:
   - Keine globalen Element-Selektoren (button, input, ...) für Optik - immer Klassen verwenden,
     sonst "erben" Bootstrap-Komponenten ungewollt Styles.
   - Farben / Radien / z-index nur über die Variablen unten.
   - Kein CSS-Nesting (ältere iOS-/Android-Browser ignorieren es).
   - Datei als UTF-8 speichern.
   ========================================================================== */

/* ========================================
   Design-Tokens
   ======================================== */
:root {
    /* Farben */
    --hs-primary: #4682b4;          /* steelblue */
    --hs-primary-rgb: 70, 130, 180;
    --hs-primary-hover: #3a6d99;
    --hs-body-bg: #f0f2f5;
    --hs-bg: #d3d3d3;               /* lightgray - Hintergrund Arbeitsbereich / Leisten */
    --hs-surface: #dcdcdc;          /* gainsboro - Tab-Inhalt, Karten */
    --hs-surface-alt: #e5e7eb;
    --hs-sidebar-bg: #696969;       /* dimgray */
    --hs-border: #bdbdbd;
    --hs-border-light: #ccc;
    --hs-text: #1f2937;
    --hs-text-muted: #6b7280;
    --hs-danger: #dc3545;
    --hs-success: #34c759;          /* Schalter (form-switch) "Ja" */
    --hs-switch-off: #c4c4c4;       /* Schalter (form-switch) "Nein" */

    /* Radien */
    --hs-radius-sm: 4px;
    --hs-radius: 6px;
    --hs-radius-lg: 8px;

    /* Höhe der Reiterleiste (TabHost) - die Toolbar klebt direkt darunter */
    --hs-tabbar-h: 40px;

    /* z-index-Skala: nur diese Werte verwenden */
    --z-sticky: 10;      /* Tabellenköpfe */
    --z-tabbar: 20;      /* Reiterleiste */
    --z-toolbar: 30;     /* Toolbar (headerbar) */
    --z-dropdown: 1000;  /* Autocomplete, FilterableSelector */
    --z-sidebar: 1030;   /* Seitenleiste (abgeheftet, aufgeklappt) */
    --z-hai: 1045;       /* KI-Button + KI-Seitenpanel (über Seitenleiste, unter Dialogen) */
    --z-modal: 1055;     /* = Bootstrap-Modal */
    --z-popover: 1058;   /* Artikel-Info-Popup (auch über der Artikelsuche) */
    --z-alert: 1060;     /* PageAlert */
    --z-msgbox: 1070;    /* MessageBox */
    --z-loading: 2000;   /* LoadingPopUp - blockiert alles */

    /* Bootstrap an die Hausfarbe anpassen */
    --bs-primary: var(--hs-primary);
    --bs-primary-rgb: var(--hs-primary-rgb);
    --bs-link-color: var(--hs-primary);
    --bs-link-color-rgb: var(--hs-primary-rgb);
    --bs-link-hover-color: var(--hs-primary-hover);
}

/* ========================================
   Basis / Layout
   ======================================== */
body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--hs-body-bg);
    color: var(--hs-text);
}

/* Seitenleiste (Farbe/Breite/Anheften: Components/Layout/MainLayout.razor.css) */
.sidebar {
    color: #f9fafb;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-right: 1px solid #2563eb;
    transition: background 0.3s;
}

    .sidebar a {
        color: gainsboro;
        text-decoration: none;
        padding: 10px 12px;
        border-radius: var(--hs-radius-lg);
        display: block;
        transition: background 0.2s, color 0.2s;
    }

        .sidebar a:hover {
            background: #2563eb;
        }

.content {
    padding: 0.5rem;
}

.container {
    padding: 0;
}

.w-100 {
    width: 100%;
}

/* ========================================
   Buttons
   Bootstrap-Buttons (btn-primary, btn-secondary, btn-outline-*, ...) bleiben Bootstrap,
   nur "primary" wird auf die Hausfarbe gesetzt.
   ======================================== */
.btn-primary {
    --bs-btn-bg: var(--hs-primary);
    --bs-btn-border-color: var(--hs-primary);
    --bs-btn-hover-bg: var(--hs-primary-hover);
    --bs-btn-hover-border-color: var(--hs-primary-hover);
    --bs-btn-active-bg: var(--hs-primary-hover);
    --bs-btn-active-border-color: var(--hs-primary-hover);
    --bs-btn-disabled-bg: var(--hs-primary);
    --bs-btn-disabled-border-color: var(--hs-primary);
    --bs-btn-focus-shadow-rgb: var(--hs-primary-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--hs-primary);
    --bs-btn-border-color: var(--hs-primary);
    --bs-btn-hover-bg: var(--hs-primary);
    --bs-btn-hover-border-color: var(--hs-primary);
    --bs-btn-active-bg: var(--hs-primary-hover);
    --bs-btn-active-border-color: var(--hs-primary-hover);
    --bs-btn-disabled-color: var(--hs-primary);
    --bs-btn-disabled-border-color: var(--hs-primary);
    --bs-btn-focus-shadow-rgb: var(--hs-primary-rgb);
}

/* Toolbar-Button (Icon + Beschriftung), siehe SystemFunktionen/Toolbar.razor */
.tb-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    padding: 1px 6px;
    background: transparent;
    color: #444;
    border: 1px solid transparent;
    border-radius: var(--hs-radius-sm);
    font-size: 0.875rem;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

    .tb-btn:hover:not(:disabled) {
        background-color: rgba(255, 255, 255, 0.55);
        border-color: #9ca3af;
    }

    .tb-btn:focus-visible {
        outline: 2px solid var(--hs-primary);
        outline-offset: 1px;
    }

    .tb-btn:disabled {
        opacity: 0.6;
        cursor: default;
    }

    /* gewählter Filter-Button in der Toolbar (z.B. Typ in der EAR-Übersicht) */
    .tb-btn.tb-aktiv {
        background-color: #fff;
        border-color: var(--hs-primary);
        color: var(--hs-primary);
        font-weight: 600;
    }

/* Trennstrich zwischen Gruppen von Toolbar-Buttons */
.tb-sep {
    align-self: stretch;
    width: 1px;
    margin: 3px 6px;
    background-color: #9ca3af;
}

/* Filter-Buttons mit Zähler-Badge */
.notify-btn,
.notify-btn-selected {
    position: relative;
    background-color: white;
    color: dimgray;
    border: none;
    border-radius: var(--hs-radius-lg);
    padding: 8px 20px;
    font-size: 12px;
    cursor: pointer;
}

.notify-btn-selected {
    background-color: var(--hs-surface);
}

    .notify-btn .badge {
        position: absolute;
        top: -8px;
        right: 0;
        background-color: var(--hs-danger);
        color: white;
        border-radius: 50%;
        padding: 6px 8px;
        font-size: 10px;
        font-weight: bold;
        min-width: 20px;
        text-align: center;
    }

/* ========================================
   Formulare / Inputs
   (.form-control / .form-select sind Bootstrap - hier nur Felder ohne Bootstrap-Klasse)
   ======================================== */
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]):not(.form-control):not(.input-grid):not(.input-grid-border):not(.btn-check),
textarea:not(.form-control) {
    padding: 6px 10px;
    border: 1px solid #cbd5e1;
    border-radius: var(--hs-radius);
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}

    input:not([type="checkbox"]):not([type="radio"]):not(.form-control):focus,
    textarea:not(.form-control):focus {
        border-color: var(--hs-primary);
        background-color: #fff;
        outline: none;
    }

input[type="number"] {
    text-align: right;
    -moz-appearance: textfield;
}

    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

/* Eingabefelder in Tabellenzellen (ohne Rahmen) */
.input-grid {
    border: none;
    padding: 0;
    background-color: transparent;
    width: 100%;
    overflow: hidden;
    height: auto;
    border-radius: 0;
    font-size: medium;
}

    .input-grid:focus {
        outline: 1px solid var(--hs-primary);
        background-color: #fff;
    }

    /* Telefonverkauf: Menge über verfügbarem Lagerstand */
    .input-grid.input-grid-warn,
    .input-grid.input-grid-warn:focus {
        color: #000;
        background-color: var(--hs-danger);
    }

/* Checkboxen in Tabellen: nicht auf Zellbreite ziehen, mittig */
input[type="checkbox"].input-grid,
input[type="radio"].input-grid {
    width: auto;
    display: block;
    margin: 0 auto;
}

.input-grid-border {
    padding: 0;
    background-color: transparent;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    height: auto;
    align-content: flex-start;
    font-size: medium;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

    .input-grid-border:focus-within {
        border-color: #86b7fe;
        box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
    }

.validation-message,
.error {
    color: #b91c1c;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: var(--hs-radius-lg);
    padding: 8px;
    margin-top: 10px;
}

/* FilterableSelector: Feld mit eigenem Pfeil + Dropdown */
.input-group.select-like {
    position: relative;
    border-radius: var(--hs-radius-sm);
}

    .input-group.select-like input {
        cursor: pointer;
        background-color: #fff;
    }

    .input-group.select-like .arrow {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        pointer-events: none;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid #555;
    }

.filter-drop {
    position: absolute;
    top: auto;
    left: 0;
    z-index: var(--z-dropdown);
    width: 100%;
    max-width: calc(100vw - 16px);
    background-color: white;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.15);
    padding: 0.5rem;
}

    .filter-drop .item-list {
        max-height: 200px;
        overflow-y: auto;
        padding: 0.5rem;
    }

/* ========================================
   PageAlert (Fehler-/Statusmeldung oben, Components/Layout/PageAlert.razor)
   ======================================== */
/* ========================================
   SQL-Editor (SqlEditor.razor + js/sqleditor.js)
   Textfeld durchsichtig über dem eingefärbten <pre>; beide brauchen
   exakt dieselbe Schrift, Polsterung und Umbruchregel.
   ======================================== */
.hs-sql-editor {
    position: relative;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    background: #fff;
}

.hs-sql-editor:focus-within {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(var(--hs-primary-rgb), 0.25);
}

/* Doppelte Klasse: muss die globale Regel textarea:not(.form-control) schlagen */
.hs-sql-editor .hs-sql-highlight,
.hs-sql-editor .hs-sql-input {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 0;
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-size: 0.85rem;
    line-height: 1.45;
    tab-size: 4;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: normal;
    letter-spacing: normal;
}

.hs-sql-highlight {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    color: #000;
    background: transparent;
}

.hs-sql-highlight code {
    display: block;
    will-change: transform;
    font: inherit;
    color: inherit;
    padding: 0;
    background: none;
}

.hs-sql-editor .hs-sql-input {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-radius: 0;
    min-height: 8rem;
    resize: vertical;
    background: transparent;
    color: transparent;
    caret-color: #000;
    outline: none;
    overflow-y: auto;
}

/* Globale Fokus-Regel für Textfelder setzt einen weißen Hintergrund - der würde die Farben verdecken */
.hs-sql-editor .hs-sql-input:focus {
    background: transparent;
    border: 0;
    outline: none;
}

.hs-sql-input::placeholder { color: #8a8a8a; }
.hs-sql-input::selection { background: rgba(0, 120, 215, 0.3); color: transparent; }

/* Farben wie im SQL Server Management Studio */
.sql-keyword  { color: #0000ff; }
.sql-function { color: #ff00ff; }
.sql-string   { color: #ff0000; }
.sql-comment  { color: #008000; }
.sql-operator { color: #808080; }
.sql-variable { color: #000; }

/* Unten, damit Reiter und Toolbar frei bleiben (PageAlert.razor) */
.hs-page-alert {
    position: fixed;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: min(900px, calc(100vw - 24px));
    max-height: 40vh;
    overflow-y: auto;
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    z-index: var(--z-alert);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.2);
    animation: hs-page-alert-in 0.15s ease-out;
}

.hs-page-alert-text {
    flex: 1;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.hs-page-alert .btn-close {
    flex-shrink: 0;
}

@keyframes hs-page-alert-in {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ========================================
   Login / Passwort-Dialog
   ======================================== */
.login-page {
    background-color: dimgray;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 20px;
    border-radius: 12px;
}

.login-wrap {
    display: grid;
    place-items: center;
    min-height: 50vh;
}

.login-card {
    background-color: lightgray;
    padding: 20px;
    border-radius: 12px;
    width: min(320px, 100%);
    box-sizing: border-box;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

    .header h1 {
        margin: 0;
        font-size: 2rem;
    }

/* Schriftzug links oben auf der Login-Seite */
.header .login-brand {
    color: #fff;
    font-size: 2rem;
    font-weight: 400;
}

.logo {
    height: 100px;
    width: auto;
    max-width: 100%;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

/* ========================================
   Dashboard-Kacheln
   ======================================== */
.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.tile {
    background: var(--hs-primary);
    border-radius: 12px;
    padding: 18px;
    text-decoration: none;
    color: var(--hs-text);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}

    .tile:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    }

.tile-title {
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 1rem;
    color: white;
}

.tile-desc {
    color: whitesmoke;
    font-size: 0.9rem;
}

/* ========================================
   Panels (DMS-Details - Klassenname historisch "mud-card", MudBlazor wird nicht verwendet)
   ======================================== */
.mud-card {
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 5px;
    background-color: #fafafa;
    border: none;
}

.mud-card-header {
    background-color: #1976d2;
    color: white;
    font-weight: bold;
    padding: 12px;
    border-bottom: 1px solid var(--hs-border-light);
}

.card-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 16px;
}

/* Zwei-Spalten-Layout Bearbeiten | Vorschau */
/* Bis zum unteren Bildschirmrand: abzüglich Reiterleiste, Toolbar (~44px) und Abständen oben/unten (main-Padding,
   Toolbar-Rand) - gemessen: Inhalt beginnt bei ~106px, ohne Seiten-Scrollbalken passen 40px Rest */
.dms-layout {
    display: flex;
    height: calc(100vh - var(--hs-tabbar-h) - 44px - 40px);
    height: calc(100dvh - var(--hs-tabbar-h) - 44px - 40px);
    gap: 5px;
    background: transparent;
    overflow: hidden;
}

.dms-edit-panel {
    width: 380px;
    flex: 0 0 380px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.dms-preview-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ========================================
   Tabellen
   ======================================== */
.table {
    border: 1px solid var(--hs-border);
    border-radius: var(--hs-radius-lg);
    overflow: clip; /* clip statt hidden: runde Ecken, aber sticky Tabellenkopf funktioniert weiter */
}

    .table .detail-row td {
        background-color: #f8f9fa;
        border-top: none;
        padding: 10px 30px;
    }

    .table .table-light th {
        font-weight: 500;
        font-size: medium;
        background-color: lightgray;
        position: sticky;
        top: 0;
        z-index: var(--z-sticky);
    }

    .table .table-light td {
        font-size: small;
        text-align: left;
        vertical-align: top;
        background-color: #f8f9fa;
        padding-top: 1px;
        padding-left: 2px;
    }

.table-container {
    max-height: calc(100vh - 550px);
    max-height: calc(100dvh - 550px);
    min-height: 600px;
    overflow-y: auto;
    border: 1px solid var(--hs-border-light);
    border-radius: var(--hs-radius);
    position: relative;
}

/* Scroll-Container bis zum Fensterrand (max-height setzt js/tablefit.js): nur die Tabelle scrollt,
   der Tabellenkopf (sticky th) bleibt stehen */
.table-fit {
    overflow: auto;
    position: relative;
}

    .table-container.table-fit {
        min-height: 0;
    }

    .table-fit > .table {
        margin-bottom: 0;
    }

    /* Köpfe verschachtelter Tabellen (aufgeklappte Unterzeilen) nicht ebenfalls oben ankleben */
    .table-fit .detail-row th {
        position: static;
    }

    /* Summenzeile der Positionen unten im Container stehen lassen */
    .table-fit .table-light-footer th {
        bottom: 0;
        z-index: var(--z-sticky);
    }

/* Auftragskopf in der Auftragsverwaltung: eingeklappt nur Kurzzeile (js/auftragkopf.js) */
.auftrag-kopf {
    position: relative;
}

.auftrag-kopf-kompakt {
    display: none;
}

/* "Kopf einklappen" an derselben Stelle wie "Kopf anzeigen" in der Kurzzeile (rechts oben) */
.auftrag-kopf-einklappen {
    position: absolute;
    top: 2px;
    right: 4px;
    z-index: 1;
}

.auftrag-kopf.collapsed .auftrag-kopf-voll,
.auftrag-kopf.collapsed .auftrag-kopf-einklappen {
    display: none;
}

.auftrag-kopf.collapsed .auftrag-kopf-kompakt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem;
    padding: 2px 4px 8px;
}

.table-light-footer th {
    font-weight: 500;
    font-size: medium;
    background-color: lightgray;
    position: sticky;
}

/* ========================================
   Toolbar (headerbar)
   ======================================== */
.headerbar {
    position: sticky;
    top: 0;
    z-index: var(--z-toolbar);
    background-color: var(--hs-bg);
    padding: 2px 6px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 2px;
    width: 100%;
    border: 1px solid var(--hs-border-light);
    border-radius: var(--hs-radius);
    /* Container-Query: reagiert auf die tatsächliche Toolbar-Breite (inkl. angehefteter Seitenleiste),
       nicht nur auf die Fensterbreite */
    container-type: inline-size;
    container-name: toolbar;
}

/* Wird die Toolbar schmal, nur noch Icons zeigen - die Bezeichnung steht im Tooltip (title) */
@container toolbar (max-width: 900px) {
    .tb-btn .tb-label {
        display: none;
    }

    .headerbar-title {
        margin-right: 0.25rem;
        font-size: 0.9rem;
    }
}

/* Innerhalb der Reiter klebt die Toolbar unter der Reiterleiste statt darüber */
.tab-panel .headerbar {
    top: var(--hs-tabbar-h);
}

.headerbar-title {
    margin-left: auto;
    margin-right: 1rem;
    font-weight: bold;
}

/* ========================================
   Reiter innerhalb der Masken (Bootstrap nav-tabs)
   ======================================== */
.nav-tabs .nav-link {
    background-color: lightgray !important;
    color: #333 !important;
    border-color: var(--hs-border) !important;
}

    .nav-tabs .nav-link.active {
        background-color: var(--hs-primary) !important;
        color: white !important;
        border-color: var(--hs-primary) !important;
    }

.tab-content {
    border: 1px solid var(--hs-border);
    border-top: none;
    border-radius: var(--hs-radius-lg);
    padding: 1rem;
    background-color: var(--hs-surface);
}

/* ========================================
   KI-Assistent (HAI): schwebender Button rechts oben + Seitenpanel
   Components/Layout/HaiChatLauncher.razor, Components/Pages/HAI-Interfaces/HAI_chat.razor
   ======================================== */
.hai-fab {
    position: fixed;
    top: 4px;
    right: 14px;
    z-index: var(--z-hai);
    width: 40px;
    height: 40px;
    padding: 0;
    border: none; /* das Logo bringt seinen eigenen (türkisen) Ring mit */
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.2s;
}

    .hai-fab .hai-icon {
        width: 100%;
        height: 100%;
        display: block;
    }

    .hai-fab:hover {
        transform: scale(1.08);
        box-shadow: 0 5px 16px rgba(11, 195, 240, 0.6);
    }

    .hai-fab:focus-visible {
        outline: 3px solid var(--hs-primary);
        outline-offset: 2px;
    }

    /* Bei offenem Panel ausblenden - das Panel hat sein eigenes Schließen-X an derselben Stelle */
    .hai-fab.active {
        opacity: 0;
        pointer-events: none;
    }

/* Platz rechts in der Reiterleiste freihalten, damit der Button nichts verdeckt */
.hai-enabled .tab-bar {
    padding-right: 64px;
}

.hai-drawer {
    position: fixed;
    /* oben und unten je 5% frei */
    top: 5vh;
    top: 5dvh;
    right: 0;
    bottom: 5vh;
    bottom: 5dvh;
    z-index: var(--z-hai);
    width: min(560px, 100vw);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 10px 0 0 10px;
    background-color: var(--hs-surface);
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.25);
    transform: translateX(105%);
    visibility: hidden;
    transition: transform 0.25s ease, width 0.2s ease, visibility 0s linear 0.25s;
}

    .hai-drawer.open {
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.25s ease, width 0.2s ease, visibility 0s;
    }

    .hai-drawer.wide {
        width: min(1100px, 100vw);
    }

.hai-drawer-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background-color: var(--hs-bg);
    border-bottom: 1px solid var(--hs-border-light);
}

.hai-drawer-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
    font-weight: 600;
    font-size: 1.05rem;
}

.hai-drawer-btn {
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--hs-border);
    border-radius: var(--hs-radius-sm);
    background: transparent;
    color: #444;
    font-size: 1rem;
    cursor: pointer;
}

    .hai-drawer-btn:hover {
        background-color: rgba(255, 255, 255, 0.6);
    }

.hai-drawer-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px;
}

.hai-drawer-footer {
    padding: 10px 12px;
    background-color: var(--hs-bg);
    border-top: 1px solid var(--hs-border-light);
}

/* ========================================
   Loading (LoadingPopUp)
   ======================================== */
.loading-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: var(--z-loading);
}

.loading-content {
    text-align: center;
    padding: 20px 40px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    max-width: calc(100vw - 32px);
}

    .loading-content p {
        margin-top: 15px;
        font-weight: bold;
        font-size: 1.1rem;
    }

.spinner {
    border: 6px solid #f3f3f3;
    border-top: 6px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ========================================
   Upload Modal
   ======================================== */
.dropzone {
    border: 2px dashed var(--hs-border-light);
    border-radius: 12px;
    padding: 60px 20px;
    text-align: center;
    background-color: #fafafa;
    transition: all 0.25s ease;
    cursor: pointer;
    position: relative;
    font-size: 1rem;
    color: #555;
}

    .dropzone:hover {
        border-color: #0078d4;
        background-color: #f0f8ff;
    }

.hidden-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* Bildvorschau im Upload-Dialog: auf die Dialogbreite begrenzt, hohe Bilder max. halbe Fensterhöhe */
.upload-preview {
    display: block;
    max-width: 100%;
    max-height: 50vh;
    height: auto;
    margin: 0.75rem auto 0;
    object-fit: contain;
    border: 1px solid var(--hs-border-light);
    border-radius: var(--hs-radius-sm);
}

/* ========================================
   MessageBox
   ======================================== */
.modal-backdrop-msg {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: var(--z-msgbox);
}

.modal-msg {
    background: white;
    padding: 20px;
    border-radius: var(--hs-radius-lg);
    min-width: min(300px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

    /* Fokus nur für ESC - kein Rahmen */
    .modal-backdrop-msg:focus {
        outline: none;
    }

    /* Buttons gleich breit mit Abstand (--bs-modal-footer-gap gibt es nur innerhalb von .modal) */
    .modal-msg .modal-footer {
        gap: .5rem;
    }

        .modal-msg .modal-footer > .btn {
            margin: 0;
            width: 9rem;
        }

/* ========================================
   PaperlessNGX / DMS
   ======================================== */
.thumbnail-large {
    width: 150px;
    height: 200px;
    object-fit: contain;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: var(--hs-radius-sm);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.paperless-row {
    display: flex;
    padding: 15px;
    border-bottom: 1px solid #eee;
    transition: background 0.2s;
    background: white;
}

    .paperless-row:hover {
        background-color: #fcfcfc;
    }

.doc-title {
    font-weight: 500;
    color: #212529;
    margin-bottom: 0;
    font-size: 0.95rem;
}

.badge-paperless {
    font-weight: 400;
    font-size: 0.75rem;
    padding: 0.25em 0.6em;
    border-radius: var(--hs-radius-sm);
    background-color: #e9ecef;
    color: #495057;
    border: 1px solid #dee2e6;
}

.line-clamp-5 {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    line-height: 1.5;
    max-height: 7.5em;
}

/* ========================================
   Schalter statt Checkbox: Ja = grün, Nein = grau, Knopf immer weiß
   Verwendung: <input type="checkbox" role="switch" class="hs-switch" ...> (auch mit form-check-input / input-grid)
   In einem .form-check-Wrapper zusätzlich "form-switch" an den Wrapper (Platz für den breiteren Schalter).
   Bewusst KEIN Schalter: Mehrfachauswahl von Zeilen in Tabellen ("Alle markieren") - die bleiben Checkboxen.
   ======================================== */
input[type="checkbox"].hs-switch {
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
    width: 2.4em;
    height: 1.35em;
    padding: 0;
    vertical-align: middle;
    border: 1px solid var(--hs-switch-off);
    border-radius: 2em;
    background-color: var(--hs-switch-off);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.2' fill='%23fff'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    cursor: pointer;
    transition: background-position .15s ease-in-out, background-color .15s ease-in-out;
}

    input[type="checkbox"].hs-switch:checked {
        background-color: var(--hs-success);
        border-color: var(--hs-success);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.2' fill='%23fff'/%3e%3c/svg%3e");
        background-position: right center;
    }

    input[type="checkbox"].hs-switch:focus,
    input[type="checkbox"].hs-switch:focus-visible {
        outline: none;
        box-shadow: 0 0 0 .2rem rgba(52, 199, 89, .25);
    }

    input[type="checkbox"].hs-switch:disabled {
        opacity: .5;
        cursor: default;
    }

/* Beschriftung direkt hinter einem Schalter ohne form-check-Wrapper */
input[type="checkbox"].hs-switch + label {
    margin-left: .4em;
}

.form-check.form-switch {
    padding-left: 2.9em;
}

    .form-check.form-switch input[type="checkbox"].hs-switch {
        margin-top: 0.075em;
        margin-left: -2.9em;
    }

    .form-check.form-switch input[type="checkbox"].hs-switch + label {
        margin-left: 0;
    }

    .form-switch .form-check-label {
        cursor: pointer;
    }

/* ==========================================================================
   Mobile / kleine Bildschirme
   Breakpoints wie Bootstrap: sm < 576px, md < 768px. Seitenleiste/Burger: 900px (MainLayout/NavMenu).
   ========================================================================== */

/* Touch-Geräte (Handy, Tablet) */
@media (pointer: coarse) {
    /* iOS zoomt bei Fokus auf Felder mit Schrift < 16px automatisch hinein - verhindern */
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    /* SQL-Editor: eingefärbte Ebene muss dieselbe Schriftgröße haben wie das Textfeld */
    .hs-sql-editor .hs-sql-highlight {
        font-size: 16px !important;
    }

    /* Mindestgröße für Fingerbedienung */
    .tb-btn {
        min-height: 36px;
        min-width: 36px;
        justify-content: center;
    }
}

/* Unter 901px sitzt rechts oben der Burger-Button des Menüs - KI-Button links daneben */
@media (max-width: 900.98px) {
    .hai-fab {
        top: 8px;
        right: calc(1rem + 3.5rem + 10px);
    }
}

/* Bis Tablet (< 768px) */
@media (max-width: 767.98px) {
    /* Felder mit fester Breite (style="width:55ch") dürfen schmaler werden, aber nicht über den Rand ragen */
    .form-control,
    .form-select,
    .input-grid-border {
        max-width: 100%;
    }

    .row > .col-auto {
        max-width: 100%;
    }

    /* Spalten mit style="min-width:70ch" o.ä. nicht breiter als der Bildschirm */
    .row > [class*="col"][style*="min-width"] {
        min-width: 0 !important;
    }

    /* Tabellen-Container: nicht höher als der Bildschirm, horizontal scrollen statt Seite sprengen */
    .table-container {
        min-width: 0 !important;
        min-height: 0;
        max-height: 70vh;
        max-height: 70dvh;
        overflow-x: auto;
    }

    /* Masken-Reiter: eine Zeile, wischbar statt mehrzeilig */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

        .nav-tabs .nav-link {
            white-space: nowrap;
        }

    .tab-content {
        padding: 0.5rem;
    }

    /* DMS: Bearbeiten und Vorschau untereinander */
    .dms-layout {
        flex-direction: column;
        height: auto;
        overflow: visible;
    }

    .dms-edit-panel {
        width: 100%;
        flex: 0 0 auto;
        overflow-y: visible;
    }

    .dms-preview-panel {
        min-height: 70vh;
        min-height: 70dvh;
    }

    .login-page {
        padding: 12px;
        border-radius: 0;
    }

    .header {
        padding: 10px 0;
    }

        .header h1,
        .header .login-brand {
            font-size: 1.5rem;
        }

    .logo {
        height: 56px;
    }
}

/* Handy (< 576px) */
@media (max-width: 575.98px) {
    /* Toolbar: nur Icons, Beschriftung steht im Tooltip (title) */
    .tiles {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* ========================================
   Inline-Symbol (SVG) neben Text - gleiche Größe/Lage wie ein Emoji (z.B. Netzwerkordner der Dateiablage)
   ======================================== */
.hs-icon-inline {
    width: 1.2em;
    height: 1.2em;
    vertical-align: -0.2em;
}

/* ========================================
   Artikelbild (Artikel.razor, Karte "Allgemein") - rechts oben in der Karte (.card ist position:relative)
   ======================================== */
.artikel-bild {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .artikel-bild img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        cursor: pointer;
        border-radius: var(--hs-radius-sm);
    }

/* Schmale Karte: Bild nicht über die Eingabefelder legen, sondern darüber einreihen */
@media (max-width: 767.98px) {
    .artikel-bild {
        position: static;
        justify-content: flex-start;
        margin-bottom: 0.5rem;
    }
}

/* Info-Symbol: Telefonverkauf (erste Spalte der Kundenliste, klappt die Kundeninfo auf) und
   ArtikelInfo.razor (Artikelsuche, Positionen); aufgeklappt = blau invertiert (gefülltes Symbol) */
.tv-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--hs-primary);
    line-height: 0;
    cursor: pointer;
}

    .tv-info-btn:hover {
        color: var(--hs-primary-hover);
        background: rgba(var(--hs-primary-rgb), .12);
    }

    .tv-info-btn.active {
        color: var(--hs-primary);
    }

    .tv-info-btn:focus-visible {
        outline: 2px solid var(--hs-primary);
        outline-offset: 1px;
    }

/* Artikel-Info (ArtikelInfo.razor): Popup ist position:fixed, artikelinfo.js setzt left/top und macht es sichtbar */
.artikel-info {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

/* I-Symbol rechts im Eingabefeld (Positionen) - absolut im position:relative-Container.
   Vertikal per top/bottom + Flex zentrieren, NICHT per transform: ein transform macht den Span zum
   Bezugsrahmen des position:fixed-Popups, das dann im scrollenden Positionscontainer abgeschnitten wird. */
.artikel-info.im-feld {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 2px;
}

.artikel-info-pop {
    position: fixed;
    left: 0;
    top: 0;
    visibility: hidden;
    z-index: var(--z-popover);
    width: 300px;
    max-width: calc(100vw - 16px);
    max-height: 70vh;
    overflow-y: auto;
    padding: 0.5rem 0.6rem;
    background: #fff;
    color: var(--hs-text);
    border: 1px solid var(--hs-border);
    border-radius: var(--hs-radius);
    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.2);
    line-height: 1.35;
    font-size: 0.875rem;
    font-weight: 400;
    font-style: normal;
    text-align: left;
    white-space: normal;
    cursor: default;
}

    .artikel-info-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.5rem;
        margin-bottom: 0.4rem;
    }

    .artikel-info-bild {
        display: block;
        max-width: 100%;
        max-height: 200px;
        margin: 0 auto 0.5rem;
        object-fit: contain;
        border-radius: var(--hs-radius-sm);
    }

    .artikel-info-label {
        font-size: 0.75rem;
        color: var(--hs-text-muted);
        margin-bottom: 0.15rem;
    }

    .artikel-info-text {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    .artikel-info-leer {
        color: var(--hs-text-muted);
        font-style: italic;
        margin-bottom: 0.4rem;
    }

/* Verfügbar-Info (VerfuegbarInfo.razor, Essenz): breiter, kompakte Mengen-Tabellen */
.artikel-info-pop.verfuegbar-info-pop {
    width: 380px;
}

    .verfuegbar-info-tab td {
        padding: 0.1rem 0.25rem;
        background: transparent;
    }

    .verfuegbar-info-summe td {
        border-top: 1px solid var(--hs-border);
    }

/* Erweiterter Suchfilter (SucheFilter.razor) - Trichter links neben der Lupe im Suchfeld */
.suche-filter-icon {
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
    cursor: pointer;
}

.suche-filter-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-dropdown);
}

.suche-filter-panel {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: calc(var(--z-dropdown) + 1);
    width: 280px;
    max-width: calc(100vw - 16px);
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: var(--hs-radius);
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.15);
    padding: 0.75rem;
}

.suche-inaktiv-badge {
    font-size: 0.7em;
    font-weight: normal;
    background-color: var(--hs-text-muted);
    color: #fff;
    border-radius: var(--hs-radius-sm);
    padding: 1px 4px;
    margin-left: 4px;
    vertical-align: middle;
}

/* EAR-Listen: sortierbare Spaltenköpfe (Components/Pages/GuV/EarSortierung.cs) */
th.ear-sort {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

th.ear-sort .ear-sort-inaktiv {
    opacity: .3;
    font-size: .8em;
}

th.ear-sort:hover .ear-sort-inaktiv {
    opacity: .7;
}

th.ear-sort .ear-sort-aktiv {
    font-size: .8em;
}

/* PDF-Vorschau aus dem DMS (EAR Belege aus DMS, Bank / Zahlungen) */
.ear-dms-vorschau .modal-body {
    height: calc(100vh - 12rem);
    min-height: 20rem;
    overflow: hidden;
}

.ear-dms-vorschau iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}