/* ==========================================================================
   EDOTEX WWS 2.0 — Design-System (GNOME-Dashboard-Entwurf, NICHT abgenommen)
   --------------------------------------------------------------------------
   Zielbild: dunkle Navy-/Graphit-Sidebar + passende dunkle Topbar in ALLEN
   Themes, helle zentrale Arbeitsflaeche, GNOME-/Ubuntu-Anmutung,
   kontrolliert bunt (Marktplatz-/KPI-Akzente), professionell.

   Vier visuelle Themes (identische Geometrie, nur Token-Werte):
     Hell (Standard :root) | Dunkel [data-theme="dark"] (+ System-Automatik
     via prefers-color-scheme auf :root ohne Attribut) |
     Schwarz [data-theme="black"] | Weiss [data-theme="white"]
   "System" ist KEIN eigenes Theme, nur der Automatik-Modus.
   ========================================================================== */

/* 1. Tokens — Hell (Standard) ---------------------------------------------- */

:root {
    --bg: #f4f5f7;
    --surface: #ffffff;
    --surface-elevated: #ffffff;
    --surface-muted: #eef0f3;
    --border: #e3e5ea;
    --border-strong: #cdd1d9;

    --text: #1c1f26;
    --text-muted: #5c6270;
    --text-subtle: #8c92a0;

    --action-bg: #eef0f3;
    --action-hover: #e5e8ed;
    --focus: #3584e4;            /* GNOME-Blau */
    --accent: #26537d;           /* EIN Akzent (03.10.2026): Knoepfe, Schalter, aktive Reiter, Diagramme */
    --link: #3584e4;             /* Links bleiben hellblau */

    /* UI-PHASE-1: helle, ruhige Chrome-Flaechen (Sidebar + Topbar folgen
       der Arbeitsflaeche des jeweiligen Themes — keine dominante dunkle
       Leiste mehr) */
    --sidebar-bg: #ffffff;
    --sidebar-border: #e3e5ea;
    --sidebar-text: #5c6270;
    --sidebar-text-active: #26537d;
    --sidebar-active-bg: #e8effc;
    --topbar-bg: #ffffff;
    --topbar-border: #e3e5ea;
    --topbar-text: #1c1f26;
    --topbar-muted: #8c92a0;
    --topbar-btn-bg: #f3f4f7;
    --topbar-btn-border: #e3e5ea;
    --topbar-btn-hover: #eaecf0;
    --topbar-input-bg: #f3f4f7;

    --success: #26a269;          /* GNOME-Gruen */
    --warning: #e5a50a;          /* GNOME-Gelb */
    --danger: #c01c28;           /* GNOME-Rot */
    --info: #3584e4;

    --favorite: #d4a017;
    --ai: #6366f1;
    --calendar: #3584e4;
    --mail: #d97706;

    --mp-ebay: #e53238;
    --mp-etsy: #f1641e;
    --mp-amazon: #ff9900;
    --mp-shop: #26a269;

    --btn-primary-bg: #26537d;
    --btn-primary-text: #ffffff;
    --btn-primary-hover: #1e4364;

    --success-soft: #e6f4ec;
    --warning-soft: #fbf3da;
    --danger-soft: #f9e6e8;
    --info-soft: #e7f0fc;

    --shadow-sm: 0 1px 2px rgba(22, 25, 35, 0.06);
    --shadow-md: 0 1px 3px rgba(22, 25, 35, 0.07), 0 6px 22px rgba(22, 25, 35, 0.07);

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;

    --font: 'Cantarell', 'Ubuntu', 'Noto Sans', 'Segoe UI', system-ui, sans-serif;
    --sidebar-width: 228px;
    --sidebar-width-collapsed: 60px;
    --drawer-width: 340px;
}

/* 2a. Tokens — Dunkel (explizit) ------------------------------------------- */

:root[data-theme="dark"] {
    --bg: #14161c;
    --surface: #1c1f27;
    --surface-elevated: #21242e;
    --surface-muted: #242833;
    --border: #2b303c;
    --border-strong: #414857;

    --text: #e8eaef;
    --text-muted: #a3a9b7;
    --text-subtle: #717786;

    --action-bg: #242833;
    --action-hover: #2b303d;
    --focus: #62a0ea;
    --accent: #62a0ea;
    --link: #62a0ea;

    /* UI-PHASE-1: Chrome folgt der dunklen Arbeitsflaeche (kein separates
       Fast-Schwarz mehr) */
    --sidebar-bg: #1c1f27;
    --sidebar-border: #2b303c;
    --sidebar-text: #a3a9b7;
    --sidebar-text-active: #62a0ea;
    --sidebar-active-bg: rgba(98, 160, 234, 0.14);
    --topbar-bg: #1c1f27;
    --topbar-border: #2b303c;
    --topbar-text: #e8eaef;
    --topbar-muted: #8f96a7;
    --topbar-btn-bg: #242833;
    --topbar-btn-border: #2b303c;
    --topbar-btn-hover: #2b303d;
    --topbar-input-bg: #242833;

    --success: #57e389;
    --warning: #f8e45c;
    --danger: #f66151;
    --info: #62a0ea;

    --favorite: #e3b94a;
    --ai: #8a8ff5;
    --calendar: #62a0ea;
    --mail: #eda94f;

    --mp-ebay: #f0565c;
    --mp-etsy: #f57f42;
    --mp-amazon: #ffb03a;
    --mp-shop: #57c982;

    --btn-primary-bg: #62a0ea;
    --btn-primary-text: #10131a;
    --btn-primary-hover: #83b6ef;

    --success-soft: #17311f;
    --warning-soft: #322c12;
    --danger-soft: #331716;
    --info-soft: #16283e;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.5), 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* 2b. Tokens — Dunkel via System-Automatik (identisch zu 2a) --------------- */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg: #14161c;
        --surface: #1c1f27;
        --surface-elevated: #21242e;
        --surface-muted: #242833;
        --border: #2b303c;
        --border-strong: #414857;

        --text: #e8eaef;
        --text-muted: #a3a9b7;
        --text-subtle: #717786;

        --action-bg: #242833;
        --action-hover: #2b303d;
        --focus: #62a0ea;
        --accent: #62a0ea;
        --link: #62a0ea;

        --sidebar-bg: #1c1f27;
        --sidebar-border: #2b303c;
        --sidebar-text: #a3a9b7;
        --sidebar-text-active: #62a0ea;
        --sidebar-active-bg: rgba(98, 160, 234, 0.14);
        --topbar-bg: #1c1f27;
        --topbar-border: #2b303c;
        --topbar-text: #e8eaef;
        --topbar-muted: #8f96a7;
        --topbar-btn-bg: #242833;
        --topbar-btn-border: #2b303c;
        --topbar-btn-hover: #2b303d;
        --topbar-input-bg: #242833;

        --success: #57e389;
        --warning: #f8e45c;
        --danger: #f66151;
        --info: #62a0ea;

        --favorite: #e3b94a;
        --ai: #8a8ff5;
        --calendar: #62a0ea;
        --mail: #eda94f;

        --mp-ebay: #f0565c;
        --mp-etsy: #f57f42;
        --mp-amazon: #ffb03a;
        --mp-shop: #57c982;

        --btn-primary-bg: #62a0ea;
        --btn-primary-text: #10131a;
        --btn-primary-hover: #83b6ef;

        --success-soft: #17311f;
        --warning-soft: #322c12;
        --danger-soft: #331716;
        --info-soft: #16283e;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
        --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.5), 0 6px 20px rgba(0, 0, 0, 0.4);
    }
}

/* 2c. Tokens — Schwarz ------------------------------------------------------ */

:root[data-theme="black"] {
    --bg: #000000;
    --surface: #0d0e12;
    --surface-elevated: #12131a;
    --surface-muted: #16181f;
    --border: #23252e;
    --border-strong: #3d404c;

    --text: #f0f1f5;
    --text-muted: #a8adbb;
    --text-subtle: #6f7482;

    --action-bg: #191b23;
    --action-hover: #21242e;
    --focus: #78b1f7;
    --accent: #78b1f7;
    --link: #78b1f7;

    --sidebar-bg: #0d0e12;
    --sidebar-border: #23252e;
    --sidebar-text: #a8adbb;
    --sidebar-text-active: #78b1f7;
    --sidebar-active-bg: rgba(120, 177, 247, 0.14);
    --topbar-bg: #0d0e12;
    --topbar-border: #23252e;
    --topbar-text: #f0f1f5;
    --topbar-muted: #868da0;
    --topbar-btn-bg: #191b23;
    --topbar-btn-border: #23252e;
    --topbar-btn-hover: #21242e;
    --topbar-input-bg: #16181f;

    --success: #63e695;
    --warning: #f9e97c;
    --danger: #f77b6c;
    --info: #78b1f7;

    --favorite: #eac05a;
    --ai: #9a9ef7;
    --calendar: #78b1f7;
    --mail: #f0b25e;

    --mp-ebay: #f56a70;
    --mp-etsy: #f78d55;
    --mp-amazon: #ffbb52;
    --mp-shop: #68d494;

    --btn-primary-bg: #78b1f7;
    --btn-primary-text: #0a0d13;
    --btn-primary-hover: #97c3f9;

    --success-soft: #0f2b1a;
    --warning-soft: #2b2610;
    --danger-soft: #2e1412;
    --info-soft: #122238;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6);
    --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.65), 0 6px 20px rgba(0, 0, 0, 0.5);
}

/* 2d. Tokens — Weiss -------------------------------------------------------- */

:root[data-theme="white"] {
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-elevated: #ffffff;
    --surface-muted: #f6f7f9;
    --border: #e8e9ee;
    --border-strong: #d4d7de;

    --text: #16181e;
    --text-muted: #585e6c;
    --text-subtle: #8f95a2;

    --action-bg: #f3f4f7;
    --action-hover: #eaecf0;
    --focus: #3584e4;
    --accent: #26537d;
    --link: #3584e4;

    --sidebar-bg: #ffffff;
    --sidebar-border: #e8e9ee;
    --sidebar-text: #585e6c;
    --sidebar-text-active: #26537d;
    --sidebar-active-bg: #e8effc;
    --topbar-bg: #ffffff;
    --topbar-border: #e8e9ee;
    --topbar-text: #16181e;
    --topbar-muted: #8f95a2;
    --topbar-btn-bg: #f3f4f7;
    --topbar-btn-border: #e8e9ee;
    --topbar-btn-hover: #eaecf0;
    --topbar-input-bg: #f3f4f7;

    --success: #26a269;
    --warning: #e5a50a;
    --danger: #c01c28;
    --info: #3584e4;

    --favorite: #d4a017;
    --ai: #6366f1;
    --calendar: #3584e4;
    --mail: #d97706;

    --mp-ebay: #e53238;
    --mp-etsy: #f1641e;
    --mp-amazon: #ff9900;
    --mp-shop: #26a269;

    --btn-primary-bg: #26537d;
    --btn-primary-text: #ffffff;
    --btn-primary-hover: #1e4364;

    --success-soft: #e6f4ec;
    --warning-soft: #fbf3da;
    --danger-soft: #f9e6e8;
    --info-soft: #e7f0fc;

    --shadow-sm: 0 1px 2px rgba(22, 25, 35, 0.04);
    --shadow-md: 0 1px 2px rgba(22, 25, 35, 0.05), 0 5px 16px rgba(22, 25, 35, 0.05);
}

/* 3. Basis und Layout ------------------------------------------------------ */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    font-family: var(--font);
    font-size: 14.5px;
    color: var(--text);
    background: var(--bg);
}

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }

.app { display: flex; min-height: 100vh; }

/* Sidebar — Eduard 15.09.2026 (Screenshot seiner Vorlage „WWS Einheitsdesign"):
   EdoGator-Logo oben, ruhige graue Flaeche, der aktive Punkt als weisse Karte
   mit gruenem Strich und gruenem Zeichen — kein hellblauer Balken mehr.
   Die Farben stehen als eigene --nav-Werte an der Leiste: die --sidebar-Tokens
   nutzen auch Reiter anderer Seiten (Lager, Kommissionierung) und bleiben. */

.sidebar {
    --nav-bg: #f8f9fb;
    --nav-line: #e1e4e8;
    --nav-text: #343a46;
    --nav-muted: #989eaa;
    --nav-ico: #667080;
    --nav-hover: #eef0f3;
    --nav-surface: #ffffff;
    --nav-active-text: #001334;
    --nav-green: #27a743;
    width: var(--sidebar-width);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--nav-bg);
    border-right: 1px solid var(--nav-line);
}

:root[data-theme="dark"] .sidebar,
:root[data-theme="black"] .sidebar {
    --nav-bg: var(--sidebar-bg);
    --nav-line: var(--sidebar-border);
    --nav-text: var(--sidebar-text);
    --nav-muted: var(--text-subtle);
    --nav-ico: var(--sidebar-text);
    --nav-hover: var(--sidebar-active-bg);
    --nav-surface: var(--surface-elevated);
    --nav-active-text: var(--text);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .sidebar {
        --nav-bg: var(--sidebar-bg);
        --nav-line: var(--sidebar-border);
        --nav-text: var(--sidebar-text);
        --nav-muted: var(--text-subtle);
        --nav-ico: var(--sidebar-text);
        --nav-hover: var(--sidebar-active-bg);
        --nav-surface: var(--surface-elevated);
        --nav-active-text: var(--text);
    }
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 72px;
    padding: 12px 14px;
    background: var(--nav-surface);
    border-bottom: 1px solid var(--nav-line);
}

/* Alligator-Kopf der Wortmarke (171x97, transparenter Grund). Helle Leiste:
   der dunkle Kopf; dunkle Leiste: die helle Fassung — nie dunkel auf dunkel. */
.brand-logo { width: 58px; height: 33px; object-fit: contain; flex: 0 0 auto; }
.brand-logo-nacht { display: none; }

:root[data-theme="dark"] .brand-logo-tag,
:root[data-theme="black"] .brand-logo-tag { display: none; }
:root[data-theme="dark"] .brand-logo-nacht,
:root[data-theme="black"] .brand-logo-nacht { display: block; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .brand-logo-tag { display: none; }
    :root:not([data-theme]) .brand-logo-nacht { display: block; }
}
.brand-name { line-height: 1.05; white-space: nowrap; }
.brand-name strong { display: block; color: var(--nav-active-text); font-size: 18px; letter-spacing: 0.01em; }
.brand-name small {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.sidebar-nav { flex: 1; padding: 11px 9px; display: flex; flex-direction: column; }

.sidebar-footer {
    padding: 10px;
    border-top: 1px solid var(--nav-line);
    background: var(--nav-surface);
    display: flex;
    flex-direction: column;
}

.nav-caption {
    padding: 14px 10px 5px;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nav-muted);
    white-space: nowrap;
}

.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    margin: 2px 0;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--nav-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.nav-ico { width: 20px; flex-shrink: 0; text-align: center; color: var(--nav-ico); font-size: 12px; }

a.nav-item:hover { background: var(--nav-hover); }

.nav-item.active,
a.nav-item.active:hover {
    background: var(--nav-surface);
    border-color: var(--nav-line);
    box-shadow: 0 1px 3px rgba(0, 19, 52, 0.04);
    color: var(--nav-active-text);
    font-weight: 700;
}

.nav-item.active::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--nav-green);
}

.nav-item.active .nav-ico { color: var(--nav-green); }

.nav-item.disabled { cursor: not-allowed; opacity: 0.55; }

/* Fuss der Leiste wie in der Vorlage: schlichte Textzeilen ohne Zeichen
   (eingeklappt kommen die Zeichen zurueck, sonst stuende dort nichts). */
.sidebar-footer .nav-item { min-height: 0; margin: 0; padding: 7px 9px; font-size: 12px; color: var(--text-muted); }
.sidebar-footer .nav-ico { display: none; }

/* AUFTRAEGE-LAGER-SPLIT-V1: Unterbereiche eines Hauptpunkts. Seit der
   Vorlage vom 15.09. ohne Einrueckung und Fuehrungslinie — das Zeichen „↳"
   zeigt die Zugehoerigkeit. Der Umschlag bleibt, damit der Eintrag exakt
   `class="nav-item active"` behaelt. */
.nav-sub { display: block; }

/* Eingeklappt und als Overlay-Symbolleiste gibt es keine Einrückung: dort
   trägt nur das Symbol, und eine Führungslinie ohne Text wäre bloß ein
   Strich. Die beiden Regeln dafür stehen bewusst in den BESTEHENDEN
   Media-Blöcken weiter unten — ein zweiter Block derselben Breite wäre
   eine zweite Stelle für dieselbe Layoutgrenze. */

/* MOBILE-R0: die Einklappung ist eine DESKTOP-Funktion. Sie wird im
   localStorage gemerkt; ohne diese Grenze wuerde eine einmal am grossen
   Bildschirm eingeklappte Sidebar auch die Overlay-Navigation schmaler
   Viewports auf blosse Symbole reduzieren. Deshalb gilt die gespeicherte
   Vorliebe ausdruecklich erst ab 1180 px. */
@media (min-width: 1180px) {
    .app.sidebar-collapsed .sidebar { width: var(--sidebar-width-collapsed); }
    .app.sidebar-collapsed .brand-name,
    .app.sidebar-collapsed .nav-label,
    .app.sidebar-collapsed .nav-caption { display: none; }
    .app.sidebar-collapsed .nav-item { justify-content: center; padding: 0.52rem 0.5rem; }
    .app.sidebar-collapsed .sidebar-brand { justify-content: center; padding: 12px 0; }
    .app.sidebar-collapsed .brand-logo { width: 44px; height: 25px; }
    .app.sidebar-collapsed .sidebar-footer .nav-ico { display: inline-block; }

    .app.sidebar-collapsed .nav-sub {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }
}

/* Hauptbereich + helle, ruhige Topbar (UI-PHASE-1) */

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1.1rem;
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--topbar-border);
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: 54px;
    color: var(--topbar-text);
}

.topbar-search { flex: 1; max-width: 520px; position: relative; display: flex; align-items: center; }

.topbar-search input[type="search"] {
    width: 100%;
    padding: 0.45rem 4.4rem 0.45rem 0.8rem;
    border: 1px solid var(--topbar-btn-border);
    border-radius: var(--radius-md);
    background: var(--topbar-input-bg);
    font-family: inherit;
    font-size: 0.88rem;
    color: var(--topbar-text);
}

.topbar-search input[type="search"]::placeholder { color: var(--topbar-muted); }

.search-kbd {
    position: absolute;
    right: 0.55rem;
    font-size: 0.68rem;
    color: var(--topbar-muted);
    border: 1px solid var(--topbar-btn-border);
    border-radius: var(--radius-sm);
    padding: 0.1rem 0.4rem;
    pointer-events: none;
}

.topbar-spacer { flex: 1; }

.topbar-group { display: flex; align-items: center; gap: 0.35rem; }

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 32px;
    height: 32px;
    padding: 0 0.5rem;
    border: 1px solid var(--topbar-btn-border);
    border-radius: var(--radius-md);
    background: var(--topbar-btn-bg);
    color: var(--topbar-text);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
}

.icon-btn:hover { background: var(--topbar-btn-hover); }

.icon-btn.active { background: var(--topbar-btn-hover); border-color: rgba(255, 255, 255, 0.3); }

.icon-accent-favorite svg { color: var(--favorite); }
.icon-accent-ai svg { color: var(--ai); }
.icon-accent-calendar svg { color: var(--calendar); }
.icon-accent-mail svg { color: var(--mail); }
.icon-accent-warning svg { color: var(--warning); }

/* Theme-Menue: EIN kompakter Button + Dropdown (kein Button-Band) */

.theme-menu { position: relative; }

.theme-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 200px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 0.3rem;
    display: flex;
    flex-direction: column;
    z-index: 50;
}

.theme-dropdown[hidden] { display: none; }

.theme-dropdown button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    width: 100%;
    padding: 0.45rem 0.65rem;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.theme-dropdown button:hover { background: var(--action-hover); }

.theme-dropdown button .check { visibility: hidden; color: var(--focus); }
.theme-dropdown button.active { font-weight: 600; }
.theme-dropdown button.active .check { visibility: visible; }

.theme-dropdown .theme-sep { height: 1px; background: var(--border); margin: 0.25rem 0.3rem; }
.theme-dropdown .theme-caption { padding: 0.3rem 0.75rem 0.15rem; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.accent-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; border: 1px solid rgba(0, 0, 0, 0.12); }
.accent-dot[data-c="petrol"]  { background: #26537d; }
.accent-dot[data-c="koenig"]  { background: #2563eb; }
.accent-dot[data-c="tief"]    { background: #1e40af; }
.accent-dot[data-c="tuerkis"] { background: #0f766e; }
.accent-dot[data-c="violett"] { background: #6d28d9; }
.accent-dot[data-c="indigo"]  { background: #4f46e5; }

.env-badge.ebay-kontingent { text-transform: none; letter-spacing: 0.02em; text-decoration: none; margin-left: 0.4rem; font-variant-numeric: tabular-nums; }
.env-badge.ebay-kontingent.knapp { background: #b3261e; color: #fff; }
.env-badge {
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    /* UI-PHASE-1: token-basiert, damit die Badge auch auf heller Topbar
       lesbar bleibt */
    color: #8a6d00;
    background: var(--warning-soft);
    border: 1px solid rgba(229, 165, 10, 0.55);
}

.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.2rem 0.6rem 0.2rem 0.25rem;
    border: 1px solid var(--topbar-btn-border);
    border-radius: 999px;
    background: var(--topbar-btn-bg);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--topbar-text);
}

.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.72rem;
}

/* Arbeitsflaeche + rechter Drawer */

.workspace { flex: 1; display: flex; min-height: 0; }

.content { flex: 1; min-width: 0; padding: 1.4rem 1.6rem 2.2rem; }

.drawer {
    width: var(--drawer-width);
    flex-shrink: 0;
    border-left: 1px solid var(--border);
    background: var(--surface);
    display: flex;
    flex-direction: column;
}

.drawer[hidden] { display: none; }

.drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--border);
    min-height: 54px;
}

.drawer-head h2 { margin: 0; font-size: 0.95rem; }

.drawer-head .icon-btn { border-color: var(--border); background: var(--surface); color: var(--text-muted); }
.drawer-head .icon-btn:hover { background: var(--action-hover); }

.drawer-body { flex: 1; overflow-y: auto; padding: 0.8rem 1rem 1.2rem; }

.drawer-section { border-bottom: 1px solid var(--border); padding: 0.3rem 0; }
.drawer-section:last-child { border-bottom: none; }

.drawer-section summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.2rem;
    font-weight: 600;
    font-size: 0.86rem;
    color: var(--text);
}

.drawer-section summary::-webkit-details-marker { display: none; }

.drawer-section summary::after {
    content: '';
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--text-subtle);
    border-bottom: 1.5px solid var(--text-subtle);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
    margin-right: 0.2rem;
}

.drawer-section[open] summary::after { transform: rotate(225deg); }

.drawer-section p, .drawer-panel p { color: var(--text-muted); font-size: 0.86rem; margin: 0.2rem 0.2rem 0.7rem; }

/* 4. Buttons --------------------------------------------------------------- */

.btn,
.content button,
.content input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

.btn:hover, .content button:hover, .content input[type="submit"]:hover { background: var(--action-hover); }

.btn-primary,
.content input[type="submit"],
.content button[type="submit"] {
    background: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

.btn-primary:hover,
.content input[type="submit"]:hover,
.content button[type="submit"]:hover { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); }

.btn-secondary { background: transparent; border-color: var(--border); color: var(--text-muted); }
.btn-secondary:hover { background: var(--action-hover); color: var(--text); }

.btn-danger { background: var(--danger); border-color: var(--danger); color: #ffffff; }

/* PO-Abnahme Finanzen 2026-08-18, Abschnitt 15 — EIN Button-System.
 *
 * Bis hierher entschied das ELEMENT über das Aussehen, nicht die Klasse:
 *
 * - `.content a { color: var(--info) }` (Spezifität 0-1-1) schlug
 *   `.btn-primary` (0-1-0). Ein <a class="btn btn-primary"> bekam damit
 *   blaue Linkschrift auf dunklem Grund — genau der schlecht lesbare
 *   „+ Zahlung erfassen“-Knopf der Abnahme;
 * - `.content button[type="submit"]` (0-2-1) schlug `.btn-secondary`
 *   (0-1-0). Jeder abschickende Knopf war primär, auch der ausdrücklich
 *   sekundäre — daher mehrere konkurrierende blaue Stile auf einer Seite.
 *
 * Die ausdrückliche Klasse gewinnt jetzt immer: gleiche Spezifität wie
 * die Element-Regeln (0-2-1), aber später in der Quelle. Es entstehen
 * KEINE neuen Farben — es gelten die Tokens, die die Klassen ohnehin
 * schon benannt haben.
 */
.content a.btn { color: var(--text); }
.content a.btn:hover { text-decoration: none; }

.content a.btn-primary,
.content button.btn-primary,
.content input.btn-primary {
    background: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

.content a.btn-primary:hover,
.content button.btn-primary:hover,
.content input.btn-primary:hover {
    background: var(--btn-primary-hover);
    border-color: var(--btn-primary-hover);
}

.content a.btn-secondary,
.content button.btn-secondary,
.content input.btn-secondary {
    background: transparent;
    border-color: var(--border);
    color: var(--text-muted);
}

.content a.btn-secondary:hover,
.content button.btn-secondary:hover,
.content input.btn-secondary:hover {
    background: var(--action-hover);
    border-color: var(--border-strong);
    color: var(--text);
}

.content a.btn-danger,
.content button.btn-danger,
.content input.btn-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #ffffff;
}

/* Tastaturbedienung sichtbar machen — der Fokus darf nie geraten werden. */
.btn:focus-visible,
.content button:focus-visible,
.content input[type="submit"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Deaktiviert ist eindeutig deaktiviert — auch als Link-Knopf. */
.content button:disabled,
.content input[type="submit"]:disabled,
.btn.disabled,
.content a.btn.disabled {
    cursor: not-allowed;
    background: var(--surface-muted);
    border-color: var(--border);
    color: var(--text-subtle);
}

.content button:disabled:hover,
.content input[type="submit"]:disabled:hover,
.content a.btn.disabled:hover { background: var(--surface-muted); }

/* 5. Dashboard (GNOME-Layout) ---------------------------------------------- */

.greeting {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.greeting h1 { margin: 0 0 0.15rem; font-size: 1.5rem; }
.greeting .page-sub { margin: 0; color: var(--text-muted); font-size: 0.92rem; }

.dash-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 0.9rem;
    align-items: start;
}

.dash-main { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.dash-side { display: flex; flex-direction: column; gap: 0.9rem; }

.section-title {
    margin: 0 0 0.55rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-subtle);
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1rem 1.15rem;
}

.card h2 { margin: 0 0 0.7rem; font-size: 0.95rem; font-weight: 700; }

/* Kompakte KPI-Karten */

.kpi-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
}

.kpi-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 0.95rem;
}

.kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.kpi-icon.info { color: var(--info); background: var(--info-soft); }
.kpi-icon.warning { color: var(--warning); background: var(--warning-soft); }
.kpi-icon.success { color: var(--success); background: var(--success-soft); }
.kpi-icon.danger { color: var(--danger); background: var(--danger-soft); }

.kpi-text { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.kpi-value { font-size: 1.25rem; font-weight: 700; line-height: 1.15; }
.kpi-value.muted { color: var(--text-subtle); }
.kpi-label { font-size: 0.76rem; color: var(--text-muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Marktplatz-Karten */

.mp-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.mp-card { display: flex; flex-direction: column; gap: 0.65rem; }

.mp-head { display: flex; align-items: center; gap: 0.65rem; }

.mp-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    color: #ffffff;
    font-weight: 700;
    font-size: 1.02rem;
    flex-shrink: 0;
}

.mp-logo.ebay { background: var(--mp-ebay); }
.mp-logo.etsy { background: var(--mp-etsy); }
.mp-logo.amazon { background: var(--mp-amazon); }
.mp-logo.shop { background: var(--mp-shop); }

.mp-name { font-weight: 700; font-size: 0.98rem; }
.mp-sub { font-size: 0.76rem; color: var(--text-muted); }

.mp-metrics {
    display: flex;
    gap: 1.4rem;
    border-top: 1px solid var(--border);
    padding-top: 0.6rem;
}

.mp-metric { display: flex; flex-direction: column; gap: 0.05rem; }
.mp-metric .value { font-weight: 700; font-size: 1.05rem; color: var(--text-subtle); }
.mp-metric .label { font-size: 0.72rem; color: var(--text-muted); }

.mp-status { margin-left: auto; }

/* Chips */

.chip {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 0.14rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.chip-live { color: var(--success); background: var(--success-soft); }
.chip-pending { color: var(--text-muted); background: var(--surface-muted); border-color: var(--border); }
.chip-warning { color: var(--warning); background: var(--warning-soft); }
.chip-danger { color: var(--danger); background: var(--danger-soft); }
.chip-info { color: var(--info); background: var(--info-soft); }

/* Rechte Dashboard-Spalte */

.quick-list, .status-list, .activity-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.quick-list li { border-bottom: 1px solid var(--border); }
.quick-list li:last-child { border-bottom: none; }

.quick-list a, .quick-list .disabled-link {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.1rem;
    font-size: 0.88rem;
}

.status-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.48rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.87rem;
}

.status-list li:last-child { border-bottom: none; }

.disabled-link { color: var(--text-subtle); cursor: not-allowed; }

.empty-state { color: var(--text-muted); margin: 0.3rem 0; font-size: 0.88rem; }

.ai-teaser { display: flex; align-items: flex-start; gap: 0.6rem; }
.ai-teaser svg { color: var(--ai); flex-shrink: 0; margin-top: 0.1rem; }
.ai-teaser p { margin: 0; color: var(--text-muted); font-size: 0.86rem; }

/* 6. Inhalts-Elemente ------------------------------------------------------ */

.content a { color: var(--link, var(--info)); text-decoration: none; }
.content a:hover { text-decoration: underline; }

.content h1 { font-size: 1.35rem; margin: 0 0 0.9rem; }

.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.9rem; }
.toolbar h1 { margin: 0; }

.block { margin-top: 1.4rem; }
.block h2 { font-size: 0.95rem; border-bottom: 1px solid var(--border); padding-bottom: 0.35rem; }

table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin-top: 0.7rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    font-size: 0.89rem;
}

th, td { padding: 0.5rem 0.7rem; text-align: left; border-bottom: 1px solid var(--border); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--surface-muted); }

th {
    background: var(--surface-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 600;
}

dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; margin: 0.5rem 0; }
dt { font-weight: 600; color: var(--text-muted); }
dd { margin: 0; }

input[type="text"], input[type="number"], select, textarea {
    padding: 0.42rem 0.6rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.89rem;
    background: var(--surface);
    color: var(--text);
}

input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 0;
    border-color: var(--focus);
}

input:disabled, select:disabled, textarea:disabled {
    background: var(--surface-muted);
    color: var(--text-subtle);
    cursor: not-allowed;
}

input[type="text"] { width: 20rem; max-width: 100%; }

fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    margin-top: 1.2rem;
    padding: 0.9rem 1.15rem;
}

legend { font-weight: 700; padding: 0 0.4rem; font-size: 0.92rem; }

.form-row { margin-bottom: 0.75rem; }
.form-row label { display: inline-block; min-width: 10rem; font-weight: 600; font-size: 0.88rem; }

.messages { list-style: none; padding: 0; margin: 0 0 1rem; }

.messages li {
    padding: 0.55rem 0.85rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--success);
    color: var(--text);
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    box-shadow: var(--shadow-sm);
}

.messages li.error { border-left-color: var(--danger); }
.messages li.warning { border-left-color: var(--warning); }
.messages li.info { border-left-color: var(--info); }

ul.errorlist { list-style: none; padding: 0; margin: 0.2rem 0; color: var(--danger); font-size: 0.86rem; }

/* Responsive (Desktop-first) */

@media (max-width: 1360px) {
    .dash-layout { grid-template-columns: minmax(0, 1fr) 280px; }
}

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

@media (max-width: 900px) {
    .mp-grid { grid-template-columns: 1fr; }
}

/* 7. Staging-Dashboard-CTA-1 — einzige Primaeraktion des Dashboards ------- */

/* Der Dashboard-Hauptbereich enthaelt genau eine Arbeitsaktion. Sie steht
   ruhig und zentriert im verfuegbaren Bereich und ist mit Abstand die
   groesste Bedienflaeche der Seite. Farben, Radien und Schatten stammen
   ausschliesslich aus den bestehenden Design-Tokens — kein neues
   Framework, keine Inline-Styles. Der Selektor .content button.intake-action
   liegt bewusst auf gleicher Spezifitaet wie die generische Regel
   .content button[type="submit"] und gewinnt durch die spaetere Position
   in dieser Datei. */

.intake {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 62vh;
    padding: 1.5rem 0;
}

.intake-inner {
    width: 100%;
    max-width: 32rem;
    text-align: center;
}

.content .intake-title {
    margin: 0 0 0.3rem;
    font-size: 1.4rem;
    font-weight: 700;
}

.intake-hint {
    margin: 0 0 1.6rem;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.intake-form { width: 100%; }

.content button.intake-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    min-height: 15rem;
    padding: 2.5rem 1.5rem;
    border: 1px solid var(--btn-primary-bg);
    border-radius: var(--radius-lg);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
}

.content button.intake-action:hover {
    background: var(--btn-primary-hover);
    border-color: var(--btn-primary-hover);
}

/* Sichtbarer Focus-Ring fuer die Tastaturbedienung. */
.content button.intake-action:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

.intake-icon { display: inline-flex; align-items: center; justify-content: center; }

/* Schmale Viewports: nahezu volle verfuegbare Breite. */
@media (max-width: 700px) {
    .intake { min-height: 50vh; padding: 1rem 0; }
    .intake-inner { max-width: 100%; }
    .content button.intake-action {
        min-height: 11rem;
        padding: 2rem 1rem;
        font-size: 1.25rem;
    }
}

/* 8. EdoGator Plattform-Login (AUTH-LIGHT-SHELL-1) ------------------------- */

/* Eigenstaendige Anmeldeseite ohne App-Shell. Der Plattform-Login ist —
   wie die Steuerzentrale — theme-stabil hell: die themesensitiven Tokens
   werden hier auf ihre hellen Werte gepinnt, damit weder die
   System-Automatik noch ein gespeichertes WWS-Theme die Seite umfaerbt
   (die Seite laedt bewusst kein JavaScript). */
body.login-body {
    --bg: #eef0f3;
    --surface: #ffffff;
    --border: #e3e5ea;
    --border-strong: #cdd1d9;
    --text: #1c1f26;
    --text-muted: #5c6270;
    --focus: #3584e4;
    --accent: var(--accent-sel, #26537d);
    --link: #3584e4;
    --danger: #c01c28;
    --shadow-md: 0 1px 3px rgba(22, 25, 35, 0.07), 0 6px 22px rgba(22, 25, 35, 0.07);

    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
    background: var(--bg);
    color: var(--text);
}

.login-card {
    width: 100%;
    max-width: 384px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 2rem 2.1rem 2.2rem;
}

/* Brand-Stelle des Plattform-Logins — nur die EdoGator-Wortmarke. */
.login-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Freigegebene EdoGator-Wortmarke (EDOGATOR-LOGO-ASSETS-CLEAN-1):
   static/brand/edogator/edogator-wordmark.png ist ein eigenstaendiges
   Asset (668x99, transparenter Grund) und wird direkt gerendert — kein
   CSS-Zuschnitt, kein Sprite, kein Ausschnitt aus dem Master. Gesetzt
   ist allein die Hoehe; die Breite folgt dem Seitenverhaeltnis, daher
   keine Verzerrung. Die Wortmarke traegt den Schriftzug EdoGator
   bereits selbst — daneben steht bewusst kein zweites Textbranding. */
.login-brand-logo {
    display: block;
    height: 34px;
    width: auto;
    max-width: 100%;
}

.login-card h1 {
    margin: 1.35rem 0 0.2rem;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.login-hint {
    margin: 0 0 1.25rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.95rem;
}

.login-field label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
}

.login-field input {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

.login-field input:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 1px;
    border-color: var(--focus);
}

.login-submit {
    width: 100%;
    margin-top: 0.4rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: #ffffff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.login-submit:hover {
    background: var(--accent-hover-sel, #1e4364);
    border-color: var(--accent-hover-sel, #1e4364);
}

/* ==========================================================================
   CONTEXT HELP (GLOBAL UX-KANON Abschnitt 35) — wiederverwendbares „ⓘ“.
   Desktop: Hover, Tastatur-Fokus, Klick; Touch: Tap (Klick-Toggle via
   edotex-ui.js, Klasse .open). Dezente Animation 180 ms — niemals fuer
   kritische Warnungen, nur fuer erklaerende Hilfe.
   ========================================================================== */

.ctx-help { position: relative; display: inline-flex; vertical-align: middle; margin-left: 0.25rem; }
.ctx-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem;
    border: none;
    background: none;
    color: var(--text-subtle);
    cursor: help;
    border-radius: 50%;
    line-height: 1;
}
.ctx-help-btn:hover, .ctx-help-btn:focus-visible, .ctx-help.open .ctx-help-btn { color: var(--accent); }
.ctx-help-bubble {
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    z-index: 60;
    width: max-content;
    max-width: 17rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-elevated);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.ctx-help:hover .ctx-help-bubble,
.ctx-help:focus-within .ctx-help-bubble,
.ctx-help.open .ctx-help-bubble {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .ctx-help-bubble { transition: none; }
}

/* ==========================================================================
   9. MOBILE RESPONSIVE FOUNDATION — R0 (globale Shell)
   --------------------------------------------------------------------------
   Eine Oberflaeche, drei Breiten. Die Seiten selbst bleiben unveraendert —
   hier steht ausschliesslich, wie sich die SHELL verhaelt: Navigation,
   Topbar, Arbeitsflaeche, rechte Seitenleiste und die Context-Hilfe.

   VERBINDLICHE LAYOUT-KONVENTION (zwei Grenzen, drei Stufen):
       Smartphone   <  768 px
       Tablet       >= 768 px und < 1180 px
       Desktop      >= 1180 px  — Bestandsschutz, unveraendert

   Die Grenzen stehen bewusst als Zahlen in den Media Queries: CSS-Variablen
   sind dort nicht auswertbar, und ein Build-System (Sass/Less) wird fuer
   zwei Zahlen nicht eingekauft. Aeltere Breakpoints anderer Bereiche werden
   NICHT im Big Bang umgeschrieben; hier gelten die zwei Grenzen fuer die
   Shell.

   Ausdruecklich KEIN `overflow-x: hidden` auf html/body/.app/.content —
   die Shell wird an ihren Ursachen schmal gemacht (Position, Breite,
   Fluss), nicht mit einem Deckel auf dem Symptom.
   ========================================================================== */

/* --- 9.1 Bausteine, die auf allen Breiten definiert sind ---------------- */

/* Kontexttitel und Abmelde-Symbol sind reine Schmal-Viewport-Elemente; auf
   dem Desktop bleibt die Topbar exakt wie bisher. */
.topbar-title { display: none; }
.logout-icon { display: none; }
.ctx-help-close { display: none; }

/* EIN Verdunkler fuer beide Overlay-Zustaende. `touch-action: none` haelt
   die Seite dahinter ruhig, ohne den Ueberlauf global zu verstecken. */
.app-scrim {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(12, 14, 20, 0.44);
    touch-action: none;
}

.app-scrim[hidden] { display: none; }

/* --- 9.2 Kompakte Viewports: Tablet UND Smartphone (< 1180 px) ---------- */

@media (max-width: 1179px) {
    /* Die rechte Seitenleiste nimmt der Arbeitsflaeche unter 1180 px zu viel
       Breite (228 px Navigation + 340 px Leiste). Sie verlaesst deshalb den
       Fluss und legt sich als Overlay darueber — die Arbeitsflaeche behaelt
       die volle Breite. */
    .app .drawer {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(var(--drawer-width), 86vw);
        z-index: 45;
        box-shadow: var(--shadow-md);
        overscroll-behavior: contain;
    }
}

/* --- 9.3 Tablet (768–1179 px): Symbol-Schiene, aufklappbar -------------- */

@media (min-width: 768px) and (max-width: 1179px) {
    /* Ruhezustand: die Navigation zeigt Symbole und gibt der Arbeit den
       Platz. Bewusst ueber die Breite und NICHT ueber .sidebar-collapsed,
       damit die gespeicherte Desktop-Vorliebe unberuehrt bleibt. */
    .app:not(.nav-open) .sidebar { width: var(--sidebar-width-collapsed); }

    .app:not(.nav-open) .sidebar .brand-name,
    .app:not(.nav-open) .sidebar .nav-label,
    .app:not(.nav-open) .sidebar .nav-caption { display: none; }

    .app:not(.nav-open) .sidebar .nav-item { justify-content: center; padding: 0.62rem 0.5rem; }
    .app:not(.nav-open) .sidebar .sidebar-brand { justify-content: center; padding: 12px 0; }
    .app:not(.nav-open) .sidebar .brand-logo { width: 44px; height: 25px; }
    .app:not(.nav-open) .sidebar .sidebar-footer .nav-ico { display: inline-block; }

    /* Symbolleiste: ohne Beschriftung trägt die Einrückung nichts. */
    .app:not(.nav-open) .sidebar .nav-sub {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }

    /* Geoeffnet: DIESELBE Navigation, ueber die Arbeitsflaeche gelegt. */
    .app.nav-open .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--sidebar-width);
        z-index: 45;
        overflow-y: auto;
        overscroll-behavior: contain;
        box-shadow: var(--shadow-md);
    }
}

/* --- 9.4 Smartphone (< 768 px) ----------------------------------------- */

@media (max-width: 767px) {

    /* 9.4.1 Navigation — EINE Navigation, von links ausgefahren.
       Geschlossen steht sie auf `visibility: hidden` und ist damit auch
       fuer die Tastatur nicht erreichbar: kein Tabben in eine Liste, die
       niemand sieht. */
    .app .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        height: 100dvh;
        width: min(var(--sidebar-width), 82vw);
        z-index: 45;
        overflow-y: auto;
        overscroll-behavior: contain;
        box-shadow: var(--shadow-md);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.22s ease, visibility 0.22s ease;
    }

    .app.nav-open .sidebar { transform: translateX(0); visibility: visible; }

    /* Fingerfreundliche Eintraege. */
    .sidebar .nav-item { min-height: 44px; padding: 0.7rem 0.75rem; }

    /* 9.4.2 Topbar — Menue, Kontexttitel, die noetigen Aktionen.
       Die globale Suche ist noch nicht aktiv und tritt hier zurueck, damit
       der Titel Platz behaelt. Die Benachrichtigungen bleiben erreichbar:
       ihr Inhalt steht unveraendert im Panel „Uebersicht" hinter der
       Hilfe-Schaltflaeche. */
    .topbar {
        min-height: 58px;
        padding: 0.4rem 0.6rem;
        gap: 0.3rem;
    }

    .topbar-search,
    .topbar-spacer,
    .topbar [data-drawer-target="notifications"],
    .user-name { display: none; }

    .topbar-title {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--topbar-text);
    }

    /* Touch-Grundmass der Shell: mindestens 44 x 44 px. */
    .topbar .icon-btn { min-width: 44px; height: 44px; padding: 0 0.55rem; }

    .user-chip { padding: 0; border: none; background: none; }

    .logout-form button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 0 0.5rem;
        border: 1px solid var(--topbar-btn-border);
        border-radius: var(--radius-md);
        background: var(--topbar-btn-bg);
        color: var(--topbar-text);
        font-family: inherit;
        cursor: pointer;
    }

    .logout-icon { display: block; }
    .logout-label { display: none; }

    .env-badge { padding: 0.16rem 0.38rem; font-size: 0.58rem; letter-spacing: 0.04em; }

    /* 9.4.3 Arbeitsflaeche — schmalere Raender, damit der Inhalt die
       verfuegbare Breite wirklich nutzt. */
    .content { padding: 1rem 0.85rem 2rem; }

    /* 9.4.4 Rechte Seitenleiste als Blatt von unten. */
    .app .drawer {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        max-height: 78vh;
        max-height: 78dvh;
        border-left: none;
        border-top: 1px solid var(--border);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .drawer-head { min-height: 48px; }
    .drawer-head .icon-btn { min-width: 44px; height: 44px; }

    /* 9.4.5 Context-Hilfe (GLOBAL UX-KANON Abschnitt 35) als Blatt von
       unten. Auf Touch ist :hover unzuverlaessig und bleibt haengen —
       deshalb oeffnet hier ausschliesslich der Tap (Klasse .open aus
       edotex-ui.js). Die Reihenfolge zaehlt: die .open-Regel steht NACH
       der Hover-Neutralisierung und gewinnt bei gleicher Spezifitaet. */
    .ctx-help:hover .ctx-help-bubble,
    .ctx-help:focus-within .ctx-help-bubble {
        opacity: 0;
        visibility: hidden;
    }

    .ctx-help-bubble {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 46;
        width: auto;
        max-width: none;
        max-height: 62vh;
        max-height: 62dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateY(100%);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        padding: 1rem 1.1rem calc(1rem + env(safe-area-inset-bottom, 0px));
        font-size: 0.95rem;
        line-height: 1.5;
    }

    .ctx-help.open .ctx-help-bubble {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .ctx-help-close {
        display: block;
        width: 100%;
        min-height: 44px;
        margin-top: 0.9rem;
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-md);
        background: var(--surface);
        color: var(--text);
        font: inherit;
        font-weight: 600;
        cursor: pointer;
    }
}

/* Ruhige Bewegung, wenn der Anwender das so eingestellt hat. */
@media (prefers-reduced-motion: reduce) {
    .app .sidebar { transition: none; }
}

/* ---------------------------------------------------------------------------
   CP-2 SUPPORT-ZUGANG (11.09.2026)
   Das Banner steht auf JEDER Seite, solange ein Support-Zugang gilt. Es ist
   bewusst auffaellig und bewusst schmal: der Kunde soll es nie uebersehen und
   nie darueber stolpern. Die Farben kommen aus den bestehenden Tokens.
--------------------------------------------------------------------------- */
.support-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    padding: 10px 14px;
    border: 1px solid var(--warning, #c78a15);
    border-left-width: 4px;
    border-radius: 8px;
    background: var(--surface-2, #fff8e6);
    font-size: 14px;
    line-height: 1.4;
}

.support-banner-betreiber {
    border-color: var(--accent, #15324a);
    background: var(--surface-2, #eef3f8);
}

.support-banner-text {
    flex: 1 1 320px;
    min-width: 0;
}

.support-banner form {
    margin: 0;
}