/* =============================================================================
 * DocPipe - Lumo Theme
 * Farben aus dem Corporate-Farbschema TE.AM.
 * Hell-Modus ist Standard, Dark-Modus über [theme~="dark"].
 * ============================================================================= */

html {
    /* Primary: kräftiges Indigo */
    --lumo-primary-color:        hsl(246, 42%, 36%);
    --lumo-primary-color-50pct:  hsla(246, 42%, 36%, 0.5);
    --lumo-primary-color-10pct:  hsla(246, 42%, 36%, 0.1);
    --lumo-primary-text-color:   hsl(246, 42%, 36%);
    --lumo-primary-contrast-color: #fff;

    /* Success: Grün mit Gelbstich */
    --lumo-success-color:        hsl(66, 100%, 35%);
    --lumo-success-color-50pct:  hsla(66, 100%, 35%, 0.5);
    --lumo-success-color-10pct:  hsla(66, 100%, 35%, 0.1);
    --lumo-success-text-color:   hsl(66, 100%, 30%);
    --lumo-success-contrast-color: #fff;

    /* Error: Beere-Rot */
    --lumo-error-color:          hsl(338, 75%, 38%);
    --lumo-error-color-50pct:    hsla(338, 75%, 38%, 0.5);
    --lumo-error-color-10pct:    hsla(338, 75%, 38%, 0.1);
    --lumo-error-text-color:     hsl(338, 75%, 38%);
    --lumo-error-contrast-color: #fff;

    /* Basis-Layout */
    --lumo-border-radius-m:      0.5rem;
    --lumo-border-radius-l:      0.75rem;
    --lumo-font-family:          -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---- Dark Mode -------------------------------------------------------------- */

[theme~="dark"] {
    /* Primary hellt sich auf für besseren Kontrast auf dunklem Grund */
    --lumo-primary-color:        hsl(246, 65%, 62%);
    --lumo-primary-color-50pct:  hsla(246, 65%, 62%, 0.5);
    --lumo-primary-color-10pct:  hsla(246, 65%, 62%, 0.15);
    --lumo-primary-text-color:   hsl(246, 65%, 72%);

    --lumo-success-color:        hsl(66, 80%, 50%);
    --lumo-success-color-50pct:  hsla(66, 80%, 50%, 0.5);
    --lumo-success-color-10pct:  hsla(66, 80%, 50%, 0.15);
    --lumo-success-text-color:   hsl(66, 80%, 60%);

    --lumo-error-color:          hsl(338, 75%, 55%);
    --lumo-error-color-50pct:    hsla(338, 75%, 55%, 0.5);
    --lumo-error-color-10pct:    hsla(338, 75%, 55%, 0.15);
    --lumo-error-text-color:     hsl(338, 75%, 70%);
}

/* ---- App-Anpassungen ------------------------------------------------------- */

/* =============================================================================
 * App-Layout - fester Sidebar-Drawer, kein Overlay
 * ============================================================================= */

vaadin-app-layout {
    /* explizite Breite verhindert Kollisionen mit Content */
    --vaadin-app-layout-drawer-width: 240px;
    --vaadin-app-layout-navbar-height: var(--lumo-size-xl);
}

vaadin-app-layout::part(navbar) {
    background: var(--lumo-base-color);
    border-bottom: 1px solid var(--lumo-contrast-10pct);
}

vaadin-app-layout::part(drawer) {
    background: var(--lumo-contrast-5pct);
    border-right: 1px solid var(--lumo-contrast-10pct);
    /* verhindert Durchsichtigkeit; Drawer bleibt links stehen statt zu overlayen */
}

/* Content-Bereich bekommt eigenen Hintergrund, damit nichts durchscheint */
vaadin-app-layout::part(content) {
    background: var(--lumo-base-color);
}

/* =============================================================================
 * Navigation - eingerückt, aktive Einträge als abgerundete Pille
 * ============================================================================= */

/* Der Nav-Bereich bekommt seitlichen Abstand, damit die Einträge nicht am
 * Rand kleben und die Pillen mit Luft zu beiden Seiten stehen. */
vaadin-side-nav {
    padding: 0 var(--lumo-space-s);
}

/* Jeder Eintrag wird zur abgerundeten Pille mit etwas Innenabstand.
 * Der stylebare Part heißt bei side-nav-item "link" (Vaadin-Doku). */
vaadin-side-nav-item::part(link) {
    border-radius: var(--lumo-border-radius-m);
    padding-inline: var(--lumo-space-m);
    margin-bottom: 2px;
}

/* Hover: dezente Tönung. */
vaadin-side-nav-item:hover::part(link) {
    background: var(--lumo-contrast-10pct);
}

/* Aktiver Eintrag: hervorgehobene Pille in Primärfarbe. */
vaadin-side-nav-item[active]::part(link) {
    background: var(--lumo-primary-color-10pct);
    color: var(--lumo-primary-text-color);
    font-weight: 500;
}

/* Drawer-Brand: Logo + kleiner App-Name, mit Luft zur Navigation */
.app-drawer-brand {
    padding: var(--lumo-space-l) var(--lumo-space-m) var(--lumo-space-xl);
    border-bottom: 1px solid var(--lumo-contrast-10pct);
    margin-bottom: var(--lumo-space-m);
    gap: var(--lumo-space-xs);
}

.app-drawer-logo {
    max-width: 180px;
    height: auto;
}

.app-drawer-app-name {
    font-size: var(--lumo-font-size-s);
    font-weight: 500;
    color: var(--lumo-secondary-text-color);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Dark-Mode: Logo aufhellen wie auf Login-Seite */
[theme~="dark"] .app-drawer-logo {
    filter: brightness(0) invert(0.95);
}

/* Versionszeile ganz unten im Drawer */
.app-drawer-version {
    padding: var(--lumo-space-s) var(--lumo-space-m);
    font-size: var(--lumo-font-size-xxs);
    color: var(--lumo-tertiary-text-color);
    letter-spacing: 0.03em;
    border-top: 1px solid var(--lumo-contrast-10pct);
    text-align: center;
}

/* =============================================================================
 * ComboBox - Dropdown breiter als das Eingabefeld
 * ============================================================================= */

/* Die Auswahlliste ist per Default genau so breit wie das Feld. In den
 * zweispaltigen Formularen (Sammelmappe, Detail-Dialog) ist das zu wenig:
 * ein Lieferant steht dort als "Name, Ort (Nummer)" und wurde mitten im
 * Namen abgeschnitten - also genau in dem Teil, den man zum Auswaehlen
 * braucht. Das Feld selbst bleibt schmal, nur das Dropdown darf ausbrechen.
 *
 * min(): auf kleinen Bildschirmen bleibt das Dropdown im Viewport, statt
 * rechts herauszulaufen. --vaadin-combo-box-overlay-width ist die dafuer
 * vorgesehene Custom Property (gilt fuer Lumo). */
vaadin-combo-box {
    --vaadin-combo-box-overlay-width: min(32rem, calc(100vw - 2 * var(--lumo-space-m)));
}

/* =============================================================================
 * Login-View
 * ============================================================================= */

.login-view {
    background:
            radial-gradient(circle at 20% 10%, var(--lumo-primary-color-10pct), transparent 60%),
            radial-gradient(circle at 80% 90%, var(--lumo-success-color-10pct), transparent 60%),
            var(--lumo-base-color);
    min-height: 100vh;
    position: relative;
}

.login-card {
    background: var(--lumo-base-color);
    border-radius: var(--lumo-border-radius-l);
    box-shadow:
            0 1px 3px rgba(0, 0, 0, 0.05),
            0 20px 40px -20px rgba(0, 0, 0, 0.15);
    padding: var(--lumo-space-xl);
    width: min(420px, calc(100% - var(--lumo-space-l) * 2));
    display: flex;
    flex-direction: column;
    gap: var(--lumo-space-l);
    margin: var(--lumo-space-l);
}

.login-logo {
    max-width: 260px;
    height: auto;
    margin-bottom: var(--lumo-space-m);
}

.login-title {
    margin: 0;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--lumo-header-text-color);
}

.login-subtitle {
    margin: 0;
    font-size: var(--lumo-font-size-s);
    color: var(--lumo-secondary-text-color);
    letter-spacing: 0.02em;
}

.login-divider {
    height: 1px;
    background: var(--lumo-contrast-10pct);
    width: 100%;
}

.login-hint {
    margin: 0;
    font-size: var(--lumo-font-size-s);
    color: var(--lumo-secondary-text-color);
    text-align: center;
}

.login-button {
    min-height: var(--lumo-size-l);
    justify-content: center;
    font-weight: 500;
}

.login-footer {
    position: absolute;
    bottom: var(--lumo-space-l);
    left: 0;
    right: 0;
    padding: 0 var(--lumo-space-m);
}

/* Dark-Mode: Logo etwas heller darstellen, weil das TE.AM-Logo dunkle Schrift hat */
[theme~="dark"] .login-logo {
    filter: brightness(0) invert(0.95);
}