/* ==========================================================================
   Operatix – App-weite Design-Erweiterung ("Digital Logistics Network")
   --------------------------------------------------------------------------
   Wird via @import aus css/themes.css geladen -> greift auf allen Seiten,
   die themes.css einbinden. url()-Pfade sind relativ zu DIESER Datei
   (static/ui/), nicht zu themes.css.

   Alle Regeln haengen an der Klasse .opx-enterprise auf <html>. Diese wird
   vom theme_loader gesetzt – ausser bei Retro-Themes (win98/macretro/
   dosretro/nerd/techie/hacker), die damit unangetastet bleiben.

   Intensitaet: dezent. Die Content-Panels bleiben weitgehend deckend
   (Lesbarkeit); das Netzwerk zeigt sich vor allem in den Raendern.
   ========================================================================== */

/* ---- 0. Dunkle Defaults fuer haeufig genutzte Variablen ----------------
   Viele Seiten nutzen z.B. var(--card-bg, #f8f9fa) mit HELLEM Fallback, und
   das noir-Theme definiert diese Variablen nicht -> Kacheln/Flaechen wuerden
   hell. Hier zentral dunkel setzen. :root.opx-enterprise (Spezifitaet 0,2,0)
   gewinnt gegen bare :root-Defaults in themes.css.
   ------------------------------------------------------------------------ */
:root.opx-enterprise {
    --card-bg: #1f2b49;          /* Kachel-/Karten-Flaeche, leicht ueber Panel */
    --surface-color: #1f2b49;
    --bg-light: #1f2b49;
    --page-bg: #101b34;
    --hover-bg: #26355a;
    --input-bg: #131c31;         /* Eingabefelder etwas dunkler als Panel */
    --table-header-bg: #1a2540;
    --bg-secondary: #1f2b49;
    --row-hover: #26355a;
    /* Status-/Tint-Flaechen: viele Seiten definieren diese hell im eigenen
       :root -> hier ueberschreiben (Spezifitaet 0,2,0 gewinnt).
       WICHTIG: NICHT als feste dunkle Hexwerte, sondern als leichte Toenung
       der aktuellen Kachelflaeche. --card-bg wird von applyBase() im
       theme_loader zur Laufzeit aus der Basisfarbe abgeleitet (inline auf
       <html>, gewinnt gegen jede Regel hier) und ist bei einer HELLEN
       Basisfarbe hell. Feste dunkle Tints blieben dabei dunkel, waehrend
       --text-primary auf fast-schwarz umschaltet -> unlesbar. Durch das
       color-mix folgen die Flaechen der Basisfarbe automatisch, und weil die
       Toenung dezent bleibt, trifft --text-primary immer genug Kontrast. */
    --success-bg: color-mix(in srgb, var(--ox-success, #2ea043) 14%, var(--card-bg, #1f2b49));
    --warning-bg: color-mix(in srgb, var(--ox-warning, #d99400) 16%, var(--card-bg, #1f2b49));
    --danger-bg:  color-mix(in srgb, var(--ox-danger,  #e5484d) 14%, var(--card-bg, #1f2b49));
    --info-bg:    color-mix(in srgb, var(--ox-info,    #3b82f6) 14%, var(--card-bg, #1f2b49));
    /* Gleiche Regel wie oben: Statusflaechen der Listen (z.B. Zeilen in der
       Lieferungs-Uebersicht: Geprueft/In Klaerung/Admin-ToDo) als Toenung der
       Kachelflaeche, nicht als festes Dunkelblau. Vorher blieben diese Zeilen
       bei heller Basisfarbe dunkel, waehrend der Text auf fast-schwarz
       umschaltete -> unlesbar. */
    --muted-bg:   color-mix(in srgb, var(--text-primary, #e8eef7) 8%, var(--card-bg, #1f2b49));
    --todo-bg:    color-mix(in srgb, var(--ox-info,    #3b82f6) 14%, var(--card-bg, #1f2b49));
    --review-bg:  color-mix(in srgb, var(--ox-success, #2ea043) 14%, var(--card-bg, #1f2b49));
    --clarify-bg: color-mix(in srgb, var(--ox-warning, #d99400) 16%, var(--card-bg, #1f2b49));
    --admin-badge-bg: color-mix(in srgb, var(--ox-warning, #d99400) 18%, var(--card-bg, #1f2b49));

    /* Akzentfarben zu den Tints: der Statusfarbton wird Richtung --text-primary
       gemischt -> auf dunklem Grund hell, auf hellem Grund dunkel. Der
       Textanteil von 55% ist bewusst hoch: so erreicht der Akzent auf der
       zugehoerigen Tint-Flaeche in beiden Richtungen >= 3:1 und ist damit fuer
       Rahmen, Icons und grosse/fette Kennzahlen tragfaehig. Fuer Text in
       normaler Groesse weiter --text-primary verwenden. */
    --success-fg: color-mix(in srgb, var(--ox-success, #2ea043) 45%, var(--text-primary, #e8eef7));
    --warning-fg: color-mix(in srgb, var(--ox-warning, #d99400) 45%, var(--text-primary, #e8eef7));
    --danger-fg:  color-mix(in srgb, var(--ox-danger,  #e5484d) 45%, var(--text-primary, #e8eef7));
    --info-fg:    color-mix(in srgb, var(--ox-info,    #3b82f6) 45%, var(--text-primary, #e8eef7));
}

/* Panel/Rahmen einen Tick heller & blauer als noir-Default (#111827) –
   hoehere Spezifitaet (0,3,0) als :root.theme-noir (0,2,0), gewinnt sicher. */
:root.opx-enterprise.theme-noir {
    --panel-bg: #17213a;
    --border-color: #2c3b59;
}

/* ---- 1. Netzwerk-Hintergrund (fixierte Ebene hinter dem Content) --------
   WICHTIG: Das ::before haengt an <html> (.opx-enterprise ist auf <html>),
   NICHT an <body>. Grund: themes.css setzt `body { filter: saturate(...) }`,
   und ein filter macht <body> zum Containing-Block fuer position:fixed –
   dann bezieht sich inset:0 auf die (hohe) Body-Hoehe statt auf den Viewport
   und background-size:cover zoomt das SVG massiv. <html> hat keinen Filter
   -> echt viewport-fix, korrekte Groesse. Body wird transparent gesetzt,
   damit das Netzwerk durchscheint. */
.opx-enterprise {
    background-color: var(--page-bg, #101b34);
}
.opx-enterprise body {
    background: transparent !important;
}
.opx-enterprise::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--ox-bg-image, url("background-dark.svg?v=1784057860")) center center / cover no-repeat;
    filter: var(--ox-bg-filter, none);
    pointer-events: none;
}

/* ---- Theme-Auswahl komplett deaktiviert (fester Stil) ------------------ */
.theme-selection-modal,
.theme-modal-overlay,
.theme-picker-container,
.theme-dropdown { display: none !important; }

/* ---- 2. Haupt-Panel als dezentes Glassmorphism-Panel ------------------- */
.opx-enterprise .container {
    background: color-mix(in srgb, var(--panel-bg, #f8faff) 52%, transparent) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
            backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid color-mix(in srgb, var(--border-color, #cdd7ea) 55%, transparent) !important;
    box-shadow: 0 24px 60px rgba(3, 7, 18, 0.40),
                0 2px 10px rgba(3, 7, 18, 0.25) !important;
    /* schwebendes Panel -> Netzwerk als Rahmen ringsum sichtbar */
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}
/* Fallback ohne backdrop-filter: Panel bleibt deckend (Lesbarkeit). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .opx-enterprise .container {
        background: var(--panel-bg, #f8faff) !important;
    }
}

/* ---- 3. Innere Karten / Panels: Feinschliff (bleiben deckend) ---------- */
.opx-enterprise :is(.card, .box, .panel, .stat-card, .section-card) {
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border-color, #cdd7ea) 50%, transparent);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
/* KPI-/Statistik-Kacheln heben beim Hover leicht ab. */
.opx-enterprise .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.14);
}

/* ---- 4. Buttons: Enterprise-Feinschliff -------------------------------- */
/* Marken-Akzent (Operatix-Blau) fuer die Design-Ebene.
   --ox-appcss-loaded ist ein Sentinel: nur DIESE Datei setzt ihn -> per JS
   pruefbar, ob operatix-app.css tatsaechlich geladen wurde (Diagnose). */
.opx-enterprise { --ox-accent: #5b8def; --ox-accent-2: #3a63d6; --ox-appcss-loaded: 1; }

.opx-enterprise :is(.btn, button.btn) {
    border-radius: 8px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
/* Primaeraktion + Login-Button: klarer, gut sichtbarer Akzent auf dunklen Panels. */
.opx-enterprise :is(.btn-primary, .login-btn, button[type="submit"].btn) {
    background: linear-gradient(135deg, var(--ox-accent) 0%, var(--ox-accent-2) 100%) !important;
    /* Kontrastfarbe je nach Akzent-Helligkeit (weiss/dunkel) -> auch bei hellem
       Akzent lesbar. Faellt auf Weiss zurueck, falls JS die Var nicht gesetzt hat. */
    color: var(--ox-accent-ink, #fff) !important;
    border: none !important;
}
/* Sicherheitsnetz: fest goldene Warn-/Bearbeiten-Buttons und -Toasts setzen oft
   color:var(--text-primary); auf hellem Gold ergibt das im Dark-Theme weissen,
   unlesbaren Text. Auf hellem Grund brauchen sie IMMER dunkle Schrift. */
.opx-enterprise :is(.btn-warning, .btn-edit, .toast-warning, .badge-warning) {
    color: #1f2430 !important;
}
.opx-enterprise :is(.btn-primary, .login-btn):hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--ox-accent) 45%, transparent);
    filter: brightness(1.05);
}
.opx-enterprise .btn:active {
    transform: translateY(0);
}

/* ---- 5. Formularfelder: einheitlicher Fokus-Ring (Marken-Blau) --------- */
.opx-enterprise
  :is(input[type="text"], input[type="password"], input[type="email"],
      input[type="number"], input[type="search"], input[type="date"],
      input[type="tel"], select, textarea):focus {
    outline: none;
    border-color: var(--ox-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ox-accent) 26%, transparent);
}

/* ---- 5b. Native Dropdowns (select) ------------------------------------
   Die aufgeklappte Options-Liste rendert der Browser nativ. color-scheme
   (per JS an Hell/Dunkel gekoppelt) macht sie lesbar; hier zusaetzlich die
   Farben ans Theme angleichen, damit Feld und Popup zum Rest passen. */
.opx-enterprise select {
    background-color: var(--input-bg, #131a2b);
    color: var(--text-primary, #eaf0fc);
    accent-color: var(--ox-accent, #5b8def);
}
.opx-enterprise select option,
.opx-enterprise select optgroup {
    background-color: var(--input-bg, #131a2b);
    color: var(--text-primary, #eaf0fc);
}

/* ---- 6. Tabellen: dezenter Zeilen-Hover -------------------------------- */
.opx-enterprise .container table tbody tr:hover,
.opx-enterprise table.table tbody tr:hover {
    background: color-mix(in srgb, var(--ox-accent, #5b8def) 10%, transparent);
}
/* Sicherheitsnetz: einzelne Seiten setzen einen HELLEN Zeilen-Hover
   (z.B. background:#f9f9f9) ohne Textfarbe -> auf dunkel unlesbar.
   Hier generell auf dunklen Akzent-Tint zwingen. */
:root.opx-enterprise tbody tr:hover {
    background: color-mix(in srgb, var(--ox-accent, #5b8def) 12%, transparent) !important;
}

/* ---- 6b. Navigation / Menü: gleiches Glas wie die Login-Karte ---------- */
.opx-enterprise .navigation-sidebar {
    background: color-mix(in srgb, var(--panel-bg, #131a2b) 82%, transparent) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
            backdrop-filter: blur(22px) saturate(1.3);
    border-right: 1px solid color-mix(in srgb, var(--border-color, #2b3550) 60%, transparent);
    box-shadow: 4px 0 40px rgba(3, 7, 18, 0.45);
}
.opx-enterprise .navigation-sidebar-header {
    border-bottom: 1px solid color-mix(in srgb, var(--border-color, #2b3550) 55%, transparent);
}

/* ---- 6c. Einheitliche Schriftfarbe im Menue ----------------------------
   Menue-Eintraege sind Flaechen, keine Inline-Links. themes.css setzt aber
   eine globale Link-Farbe (:root.theme-noir a { color:#93c5fd }, Spezifitaet
   0,2,1), die die Farbe aus .nav-menu-item (0,1,0) uebersteuert. Ergebnis war
   ein gemischtes Bild: <a>-Eintraege hellblau, <button>-Eintraege weiss, und
   nur die Abschnitte mit einer .menu-group-*-Regel (0,3,0+) blieben korrekt.
   Sichtbar u. a. an Home-Bubble (<a>, blau) vs. Burger-Button (<button>,
   weiss) und an "Design & Farben" (<button>) vs. "Datenschutz" (<a>) im
   selben Abschnitt.

   Die Regeln hier liegen bei 0,4,0 bzw. 0,5,0 (Hover) und gewinnen damit
   gegen die Theme-Regeln – ohne !important. Der Farbwert bleibt die
   Theme-Variable, das Menue folgt also weiter dem Design. */
:root.opx-enterprise .navigation-sidebar .nav-menu-item,
:root.opx-enterprise .navigation-sidebar .nav-search-result-item,
:root.opx-enterprise .navigation-sidebar .nav-favorite-btn,
:root.opx-enterprise .home-bubble,
:root.opx-enterprise .nav-sidebar-toggle {
    color: var(--text-primary);
}
:root.opx-enterprise .navigation-sidebar .nav-menu-item:hover,
:root.opx-enterprise .navigation-sidebar .nav-search-result-item:hover,
:root.opx-enterprise .navigation-sidebar .nav-favorite-btn:hover,
:root.opx-enterprise .home-bubble:hover,
:root.opx-enterprise .nav-sidebar-toggle:hover {
    color: var(--text-primary);
}
/* Logout sitzt auf roter Flaeche – dort ist Weiss die Kontrastfarbe, nicht die
   Theme-Textfarbe und schon gar nicht die Link-Farbe. .btn-danger setzt selbst
   color:#fff (0,1,0), verliert aber gegen die Link-Regel. */
:root.opx-enterprise .navigation-sidebar-footer a.btn-danger,
:root.opx-enterprise .navigation-sidebar-footer a.btn-danger:hover {
    color: #fff;
}
/* Modals / Overlays im gleichen dunklen Glas-Stil. */
.opx-enterprise :is(.modal-content, .modal-box, .nav-search-results) {
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
            backdrop-filter: blur(18px) saturate(1.2);
}

/* ---- 7. Hexagon-Signet (Nav / Brand) ----------------------------------- */
/* Silhouette als Maske, gefuellt mit dem persoenlichen Akzent -> folgt der
   User-Farbe und bleibt auf dem dunklen Panel gut sichtbar. */
.ox-signet {
    display: inline-block;
    width: 68px;
    height: 68px;
    background: linear-gradient(135deg, var(--ox-accent, #5b8def) 0%, var(--ox-accent-2, #3a63d6) 100%);
    -webkit-mask: url("operatix-logo.svg") center / contain no-repeat;
            mask: url("operatix-logo.svg") center / contain no-repeat;
}
/* kompakte Variante im Navigations-Header */
.ox-signet-nav {
    width: 26px;
    height: 26px;
    margin-right: 9px;
    flex: 0 0 auto;
    align-self: center;
}

/* ---- 8. Link-Farbe folgt der Basis-Helligkeit --------------------------
   themes.css setzt fuer das (fest gesetzte) noir-Theme eine feste hellblaue
   Link-Farbe: `:root.theme-noir a { color:#93c5fd }` (Spezifitaet 0,2,1).
   Die gewinnt gegen jede Seiten-Klasse (z.B. `.log-link`, 0,1,0) – auch dann,
   wenn der persoenliche Grundton HELL ist. Auf einem hellen Panel ergibt
   #93c5fd rund 1.3:1 Kontrast, also praktisch unlesbar (aufgefallen an den
   Log-Dateinamen unter "Logs & Monitoring").
   Deshalb: Link-Farbe ueber eine Variable, die bei hellem Grundton Richtung
   --text-primary kippt. Gleiche Mechanik wie bei --success-fg & Co.
   Buttons sind ausgenommen (`:not(.btn)`) – deren Schriftfarbe gehoert zur
   Flaeche, nicht zum Link. Das Menue hat eigene Regeln (0,4,0) und gewinnt
   weiterhin gegen die 0,3,1 hier. */
:root.opx-enterprise {
    --ox-link: #93c5fd;
    --ox-link-hover: #bfdbfe;
}
:root.opx-enterprise.opx-light {
    --ox-link: color-mix(in srgb, #1d4ed8 60%, var(--text-primary, #151a28));
    --ox-link-hover: color-mix(in srgb, #1d4ed8 35%, var(--text-primary, #151a28));
}
:root.opx-enterprise a:not(.btn) {
    color: var(--ox-link);
}
:root.opx-enterprise a:not(.btn):hover {
    color: var(--ox-link-hover);
}

/* ---- 9. Log-/Terminal-Kaesten ------------------------------------------
   Logs & Monitoring, Live-Log und Monitor rendern ihren Inhalt in einem im
   Template fest DUNKEL codierten Kasten (background:#1e1e1e; color:#d4d4d4,
   Spezifitaet 0,1,0). Die Textfarbe daraus wird von
   `:root.theme-noir p,span,td,th,li,label,div` (0,2,1) uebersteuert, die
   Hintergrundfarbe nicht. Bei hellem Grundton stand dadurch dunkle Schrift
   (--text-primary) auf fast schwarzem Grund -> ~1.05:1 Kontrast.
   Loesung: Flaeche UND Schrift des Kastens gemeinsam aus einem Variablenpaar
   speisen. Dunkler Grundton -> klassische Terminal-Optik; heller Grundton ->
   heller Kasten mit dunkler Schrift, passend zum restlichen Panel. */
:root.opx-enterprise {
    --ox-code-bg: #1e1e1e;
    --ox-code-fg: #d4d4d4;
    --ox-code-border: #444;
}
:root.opx-enterprise.opx-light {
    --ox-code-bg: var(--input-bg, #ffffff);
    --ox-code-fg: var(--text-primary, #1b2130);
    --ox-code-border: var(--border-color, #c3cbdd);
}
:root.opx-enterprise :is(.log-viewer, .monitor-viewer) {
    background: var(--ox-code-bg);
    border-color: var(--ox-code-border);
}
/* Der Kasten selbst (0,3,0) und seine Inhalte (0,4,0) – Letzteres, weil die
   noir-Regel oben auch das innere <div> (.monitor-content) trifft. */
:root.opx-enterprise :is(.log-viewer, .monitor-viewer),
:root.opx-enterprise :is(.log-viewer, .monitor-viewer) :is(pre, code, div, span) {
    color: var(--ox-code-fg);
}

/* ---- 10. Themenunabhaengig dunkle Buehnen ------------------------------
   Der Praesentationsmodus (Value Chain Tracking) ist eine bewusst feste
   dunkle Folien-Buehne: `.vc-present { background:#1a1a19; color:#fff }`.
   Die Schriftfarbe daraus (0,1,0) wird von
   `:root.theme-noir p,span,td,th,li,label,div` (0,2,1) uebersteuert – bei
   hellem Grundton stand die dunkle --text-primary auf der dunklen Buehne,
   also 1.0:1 Kontrast (Titel, Folientitel, KPI-Werte, Status-Zeilen).
   Hier wird die Buehnenschrift wieder an die Buehne gekoppelt statt ans
   Theme. `.ox-dark-stage` ist der generische Haken fuer kuenftige Overlays
   dieser Art. */
:root.opx-enterprise :is(.vc-present, .ox-dark-stage),
:root.opx-enterprise :is(.vc-present, .ox-dark-stage)
    :is(div, span, p, h1, h2, h3, summary, label, li, td, th, button) {
    color: var(--ox-stage-fg, #ffffff);
}
/* Sekundaertexte der Buehne (Untertitel, Notizen, KPI-Label, Zaehler). */
:root.opx-enterprise :is(.vc-present, .ox-dark-stage)
    :is(.vc-present-counter, .vc-slide-note, .vc-slide-empty, .k-label, .ox-stage-muted) {
    color: var(--ox-stage-muted, #c3c2b7);
}
/* Ueberschriften: themes.css setzt fuer h1–h6 `color: var(--text-primary)`
   MIT !important. Spezifitaet allein reicht dagegen nicht – auf der festen
   Buehne muss die Buehnenfarbe gewinnen, deshalb hier ebenfalls !important
   (betrifft u. a. den Folientitel .vc-slide-title, ein <h2>). */
:root.opx-enterprise :is(.vc-present, .ox-dark-stage) :is(h1, h2, h3, h4, h5, h6) {
    color: var(--ox-stage-fg, #ffffff) !important;
}
/* Akzentfarbe der validierten Buehnen-Palette wieder herstellen – die
   Sammelregel oben (0,4,0) wuerde `.vc-kpi.k-accent .k-value` (0,2,0) sonst
   mit ueberschreiben. */
:root.opx-enterprise :is(.vc-present, .ox-dark-stage) .k-accent .k-value {
    color: #3987e5;
}