@CHARSET "UTF-8";
/*
 * xAdmin - Design Tokens
 *
 * Diese Datei wird in BEIDEN Layouts geladen. Die --x-* Variablen sind
 * deshalb immer definiert: im klassischen Layout mit den bisherigen Werten
 * des xAdmin, im modernen Layout mit den Werten aus tmo-admin.
 *
 * Folge fuer Views: "background: var(--x-surface)" funktioniert in beiden
 * Layouts. Niemand muss zwei Faelle unterscheiden.
 *
 * Quelle der modernen Werte ist das Design-System von tmo-admin
 * (travelMesh/tmo-admin/frontend/src/styles/app.css). Aendert sich dort ein
 * Wert, aendert er sich hier an genau einer Stelle - der Rest des Themes
 * benutzt ausschliesslich die --x-* Aliase.
 */

/* ------------------------------------------- Klassisches Layout (Bestand) */

body {
    --x-bg:            #ffffff;
    --x-surface:       #ffffff;
    --x-surface-alt:   #e0e0e0;
    --x-surface-sunk:  #f0f0f0;

    --x-border:        #dddddd;
    --x-border-strong: #aaaaaa;

    --x-text:          #000000;
    --x-text-muted:    #666666;
    --x-text-invert:   #ffffff;

    --x-accent:        #99cc00;
    --x-accent-hover:  #7fa800;
    --x-accent-soft:   #e7ffa2;
    --x-accent-line:   #aaaa00;

    --x-nav-bg:        #ffffff;
    --x-nav-bg-alt:    #eeeeee;
    --x-nav-text:      #222222;
    --x-nav-text-hi:   #000000;

    --x-danger:        #cc0000;
    --x-danger-soft:   #ffeeee;
    --x-warn:          #aaaa00;
    --x-warn-soft:     #ffffee;
    --x-ok:            #006600;
    --x-ok-soft:       #eeffee;
    --x-info-soft:     #d4d5ff;

    --x-radius:        0;
    --x-radius-sm:     0;
    --x-shadow:        none;
    --x-shadow-pop:    0 0 8px #666666;

    --x-topbar-h:      auto;
    --x-sidebar-w:     auto;
    --x-sidebar-rail:  auto;

    --x-font:          Arial, Helvetica, sans-serif;
    --x-font-mono:     "Courier New", Courier, monospace;
}

/* ------------------------------------------------------- Modernes Layout */

body.xtheme-modern {
    /* ---------------------------------------------- uebernommen aus tmo-admin */

    --tmo-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
        "Noto Sans", "Liberation Sans", Arial, sans-serif;
    --tmo-font-mono: SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;

    --tmo-body-font-size: 0.875rem;
    --tmo-body-line-height: 1.5;
    --tmo-heading-font-weight: 600;

    --tmo-panel-radius: 8px;

    /* Light-Set aus [data-bs-theme='light'] */
    --tmo-bg: #ebeef4;
    --tmo-surface: #ffffff;
    --tmo-header-surface: #ffffff;
    --tmo-surface-bright: #ffffff;
    --tmo-border-subtle: #d1d9e7;
    --tmo-surface-hover: rgba(235, 238, 244, 0.7);
    --tmo-surface-active: #ebeef4;
    --tmo-muted: #869ac0;
    --tmo-strong: #212837;
    --tmo-heading: #000000;
    --tmo-code-bg: #f3f5fa;
    --tmo-on-surface: #212837;

    --tmo-primary: #1f6bff;
    --tmo-on-primary: #ffffff;
    --tmo-secondary: #657eae;
    --tmo-error: #e6180d;
    --tmo-warning: #ff9500;
    --tmo-success: #028824;
    --tmo-info: #30beff;

    /* Rastermasse aus AdminShell.svelte */
    --tmo-header-height: 56px;
    --tmo-sidebar-width: 260px;
    --tmo-sidebar-minified: 64px;

    /* ------------------------------------------------------------- Aliase */

    --x-bg:            var(--tmo-bg);
    --x-surface:       var(--tmo-surface);
    --x-surface-alt:   var(--tmo-surface-active);
    --x-surface-sunk:  var(--tmo-surface-active);

    --x-border:        var(--tmo-border-subtle);
    --x-border-strong: color-mix(in srgb, var(--tmo-border-subtle) 60%, var(--tmo-muted));

    --x-text:          var(--tmo-on-surface);
    --x-text-muted:    var(--tmo-muted);
    --x-text-invert:   var(--tmo-on-primary);

    --x-accent:        var(--tmo-primary);
    --x-accent-hover:  color-mix(in srgb, var(--tmo-primary) 82%, #000);
    --x-accent-soft:   color-mix(in srgb, var(--tmo-primary) 14%, transparent);
    --x-accent-line:   color-mix(in srgb, var(--tmo-primary) 35%, transparent);

    /* tmo zeichnet die Sidebar in der Seitenfarbe, nicht als dunkle Flaeche. */
    --x-nav-bg:        var(--tmo-bg);
    --x-nav-bg-alt:    var(--tmo-surface-hover);
    --x-nav-text:      var(--tmo-on-surface);
    --x-nav-text-hi:   var(--tmo-primary);

    --x-danger:        var(--tmo-error);
    --x-danger-soft:   color-mix(in srgb, var(--tmo-error) 10%, var(--tmo-surface));
    --x-warn:          var(--tmo-warning);
    --x-warn-soft:     color-mix(in srgb, var(--tmo-warning) 14%, var(--tmo-surface));
    --x-ok:            var(--tmo-success);
    --x-ok-soft:       color-mix(in srgb, var(--tmo-success) 10%, var(--tmo-surface));
    --x-info-soft:     color-mix(in srgb, var(--tmo-info) 12%, var(--tmo-surface));

    --x-radius:        var(--tmo-panel-radius);
    --x-radius-sm:     6px;
    --x-shadow:        none;
    --x-shadow-pop:    0 8px 28px rgba(0, 0, 0, .25);

    --x-topbar-h:      var(--tmo-header-height);
    --x-sidebar-w:     var(--tmo-sidebar-width);
    --x-sidebar-rail:  var(--tmo-sidebar-minified);

    --x-font:          var(--tmo-font-sans);
    --x-font-mono:     var(--tmo-font-mono);
}

/*
 * Dark-Set aus tmo-admin. Bewusst NICHT aktiv geschaltet: Die Legacy-Views
 * setzen weisse und hellgraue Flaechen fest im Template, die im Dunkelmodus
 * als Leuchtflecken stehenblieben. Erst nach dem Aufraeumen dieser Views
 * kann der Modus freigegeben werden.
 */
body.xtheme-modern.xtheme-dark {
    --tmo-bg: #212837;
    --tmo-surface: #2a374f;
    --tmo-header-surface: #273349;
    --tmo-surface-bright: #2f3b54;
    --tmo-border-subtle: #3c4e71;
    --tmo-surface-hover: rgba(60, 78, 113, 0.5);
    --tmo-surface-active: #3c4e71;
    --tmo-muted: #869ac0;
    --tmo-strong: #ebeef4;
    --tmo-heading: #ffffff;
    --tmo-code-bg: rgba(0, 0, 0, 0.25);
    --tmo-on-surface: #ebeef4;
}