/* ==========================================================================
   Operatix – "Digital Logistics Network"
   Login-Shell: Enterprise-Hintergrund, Karten-Politur, Hexagon-Signet.
   Wird NUR auf den nicht angemeldeten Seiten geladen
   (login, forgot_password, admin_login).
   Pfade sind relativ zu diesem CSS (static/ui/).
   ========================================================================== */

:root {
    /* Fester dunkler Stil – identisch zum "am Anfang" gezeigten Login. */
    --ox-background: url("background-dark.svg?v=1784057860");
    --ox-card-border: 1px solid rgba(150, 180, 235, 0.16);
    --ox-card-shadow: 0 28px 74px rgba(3, 7, 18, 0.58),
                      0 3px 12px rgba(3, 7, 18, 0.38);
    --ox-glass-sheen: rgba(180, 205, 255, 0.14);
    /* Frosted-Glass-Fuellung: Panel-Farbe teiltransparent (Glassmorphism) */
    --ox-glass-bg: color-mix(in srgb, var(--panel-bg, #141a2b) 68%, transparent);
}

/* Body-Hintergrund neutralisieren (Legacy-PNG / Theme-Gradient) und den
   SVG-Hintergrund als fixierte Ebene hinter allen Inhalten platzieren. */
body {
    background: transparent !important;
}

/* WICHTIG: an <html> haengen, NICHT an <body>. themes.css setzt
   `body { filter: saturate(...) }`; ein Filter macht <body> zum Containing-
   Block fuer position:fixed. Der ueberskalierte/animierte Hintergrund wuerde
   dann relativ zu <body> ueberlaufen und Scrollbalken erzeugen. <html> hat
   keinen Filter -> fixed loest gegen den Viewport auf und wird sauber
   beschnitten. Hoehere Spezifitaet als operatix-app.css (.opx-enterprise::before),
   damit der Login-Hintergrund gewinnt. (vgl. Kommentar in operatix-app.css) */
html.opx-enterprise::before,
html::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: var(--ox-background);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    /* leichtes Overscale, damit die dezente Drift-Animation keine Kanten zeigt */
    transform: scale(1.04);
    transform-origin: center;
}

/* Login-Karte: schwebendes Glassmorphism-Panel ueber dem Netzwerk. */
.login-container {
    position: relative;
    background: var(--ox-glass-bg) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.35);
            backdrop-filter: blur(22px) saturate(1.35);
    border: var(--ox-card-border);
    box-shadow: var(--ox-card-shadow),
                inset 0 1px 0 var(--ox-glass-sheen);
}

/* Feiner Lichtsaum an der Oberkante (Glas-Kante). */
.login-container::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(160deg, var(--ox-glass-sheen), transparent 45%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

/* Fallback: ohne backdrop-filter bleibt das Panel deckend (Lesbarkeit). */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .login-container {
        background: var(--panel-bg) !important;
    }
}

/* ---- Hexagon-Signet ---------------------------------------------------- */
/* Als CSS-Maske: die Silhouette wird mit dem Theme-Verlauf gefuellt und
   passt sich damit automatisch an jedes der Operatix-Themes an. */
.ox-signet {
    display: inline-block;
    width: 68px;
    height: 68px;
    margin-bottom: 6px;
    background: var(--page-gradient, linear-gradient(135deg, #4f7cff 0%, #764ba2 100%));
    -webkit-mask: url("operatix-logo.svg") center / contain no-repeat;
            mask: url("operatix-logo.svg") center / contain no-repeat;
}