/* =========================================================================
   MOVINGSTAR Design System – Tokens, Base Resets, Utilities
   Linear-Style / Modern Business
   ========================================================================= */

/* Roboto is already loaded locally via fonts.css. No remote font imports. */

:root {
    /* ---------- Neutrals (9-step greyscale) ---------- */
    --n-0:  #ffffff;
    --n-50: #fafafa;
    --n-100: #f5f5f5;
    --n-150: #ededed;
    --n-200: #e4e4e7;
    --n-300: #d4d4d8;
    --n-400: #a1a1aa;
    --n-500: #71717a;
    --n-600: #52525b;
    --n-700: #3f3f46;
    --n-800: #27272a;
    --n-900: #18181b;
    --n-950: #0a0a0a;

    /* ---------- Semantic ---------- */
    --success:       #16a34a;
    --success-soft:  #dcfce7;
    --warning:       #d97706;
    --warning-soft:  #fef3c7;
    --danger:        #dc2626;
    --danger-soft:   #fee2e2;
    --info:          #0ea5e9;
    --info-soft:     #e0f2fe;
    --muted:         var(--n-500);

    /* ---------- Surfaces ---------- */
    --bg-app:      var(--n-50);
    --bg-surface: var(--n-0);
    --bg-input:   var(--n-0);   /* semantischer Alias für Form-Inputs */
    --bg-hover:   var(--n-100);
    --bg-active:  var(--n-150);

    /* ---------- Borders ---------- */
    --border:        var(--n-200);
    --border-strong: var(--n-300);
    --border-focus:  var(--primary);

    /* ---------- Text ---------- */
    --text-primary:   var(--n-900);
    --text-secondary: var(--n-700);
    --text-muted:     var(--n-500);
    --text-inverse:   var(--n-0);

    /* ---------- Typography ---------- */
    --font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'SF Mono', Consolas, 'Courier New', monospace;

    --fs-3xs:  10px;   /* Micro-Type: Eyebrows, Tab-Badges */
    --fs-2xs:  11px;   /* Meta, Footer-Hints */
    --fs-xs:   12px;
    --fs-sm:   13px;
    --fs-base: 14px;
    --fs-md:   16px;
    --fs-lg:   20px;
    --fs-xl:   28px;

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semibold: 600;
    --fw-bold:    700;

    --lh-tight:  1.25;
    --lh-normal: 1.5;

    /* ---------- GridJS-Theme ----------
       Zentrale Knöpfe für das GridJS-Erscheinungsbild (Dashboard,
       Tab-Listen, Mahnwesen, Lager …). Alle .gridjs-*-Regeln in
       components.css lesen ausschließlich diese Tokens — Schriftgrößen
       hier ändern, dann wirkt es überall einheitlich. */
    --grid-fs:           var(--fs-base);   /* Body-Text in den Zellen */
    --grid-fs-head:      var(--fs-sm);     /* Spalten-Header */
    --grid-fs-footer:    var(--fs-base);   /* Pagination-Footer */
    --grid-fs-summary:   var(--fs-sm);     /* "Zeige x von y" */
    --grid-icon-size:    20px;             /* Status-Icons in den Zellen */
    --grid-pad-y:        var(--sp-2);      /* Vertikales Zellen-Padding */
    --grid-pad-x:        var(--sp-3);      /* Horizontales Zellen-Padding */
    --grid-input-h:      32px;             /* Search-Input-Höhe */
    --grid-btn-h:        30px;             /* Pagination-Button-Höhe */
    --grid-row-lh:       1.4;              /* Zeilenhöhe in den Zellen */

    /* ---------- Spacing ---------- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;

    /* ---------- Radius ---------- */
    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 10px;
    --r-xl: 14px;
    --r-full: 9999px;

    /* ---------- Shadows ---------- */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

    /* ---------- Sizes ---------- */
    --input-h:    36px;
    --input-h-sm: 32px;   /* Compact (GridJS-Search, Toolbar-Inputs) */
    --input-h-lg: 38px;   /* Erweitert (Anlagen-Panel, ge­h­obene Toolbars) */
    --btn-h:      36px;
    --btn-h-sm:   30px;
    --btn-h-xs:   28px;   /* Postable-Iconbuttons */
    --header-h:   56px;
    --tabbar-h:   44px;
    --sidebar-w:  320px;

    /* ---------- Overlays ---------- */
    --backdrop:        rgba(0, 0, 0, 0.4);
    --backdrop-strong: rgba(15, 30, 60, 0.55);

    /* ---------- Motion ---------- */
    --ease: cubic-bezier(0.2, 0, 0, 1);
    --dur-fast: 120ms;
    --dur-base: 180ms;
}

/* Brand-Color-Variablen am body-Level, weil sie zur Laufzeit per JS pro
   User überschrieben werden: $('body').css({'--primary-bg-color': farbe}).
   Identische Definition steht aktuell auch in appstyles.css — beide Files
   sind Source-of-Truth, solange non-DS-Pages noch appstyles.css laden.
   Sobald appstyles.css überall entbehrlich ist, kann der Block dort weg.

   :root erbt nicht von body, daher müssen abgeleitete --primary-*-Tokens
   ebenfalls am body-Level definiert werden. */
body {
    --primary-bg-color:     #3b4864;
    --primary-font-color:   white;
    --secondary-color:      #00101f0d;
    --secondary-font-color: #343537;
    --info-bg-color:        #3b4864;
    --popup-background:     #f7f7f7;

    --primary:        var(--primary-bg-color, #2563eb);
    --primary-hover:  color-mix(in srgb, var(--primary-bg-color, #2563eb) 85%, #000 15%);
    --primary-soft:   color-mix(in srgb, var(--primary-bg-color, #2563eb) 12%, #fff 88%);
    --primary-ring:   color-mix(in srgb, var(--primary-bg-color, #2563eb) 30%, transparent);
}

/* =========================================================================
   Base Resets / Globals
   ========================================================================= */
html, body {
    font-family: var(--font-sans) !important;
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    color: var(--text-primary);
    background: var(--bg-app);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Uses of Mobiscroll classes get font override */
.mbsc-txt, .mbsc-form, .mbsc-control-w, .mbsc-btn, .mbsc-segmented,
.mbsc-lv-cont, .mbsc-ios .mbsc-fr-w, .mbsc-scv-c,
h1, h2, h3, h4, h5, h6, p, label, input, select, textarea, button {
    font-family: var(--font-sans) !important;
}

/* DS-Komponenten — Touch-/Browser-Defaults.
   .ds-page-gescoped, sodass nicht migrierte Mobiscroll-Templates unberührt bleiben.
   Wirkung: kein blauer iOS-Tap-Highlight mehr beim Anklicken von DS-Elementen. */
body.ds-page button,
body.ds-page a,
body.ds-page label,
body.ds-page summary,
body.ds-page input,
body.ds-page textarea,
body.ds-page select,
body.ds-page [role="button"] {
    -webkit-tap-highlight-color: transparent;
}

/* =========================================================================
   Utilities
   ========================================================================= */
.ds-tabular {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

.ds-mono { font-family: var(--font-mono) !important; }

.ds-text-muted     { color: var(--text-muted) !important; }
.ds-text-secondary { color: var(--text-secondary) !important; }

.ds-hr {
    height: 1px;
    background: var(--border);
    border: 0;
    margin: var(--sp-5) 0;
}

/* Hint — wiederverwendbarer Info-Block.
   Standard:   pill-style mit Info-Farben.
   Modifier:
     --block:   block-fill, ohne Radius, mit unterem Trenner — für Modal-/Section-Banner.
     --success / --warning / --danger / --muted: alternative Farbpalette.
   Optional: ein <span class="material-icons-outlined">…</span> als erstes Kind
   wird automatisch in der jeweiligen Akzentfarbe gerendert. */
.ds-hint {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--info-soft);
    color: var(--text-secondary);
    border-radius: var(--r-md);
    font-size: var(--fs-xs);
    line-height: 1.3;
}
/* `display: flex` überschreibt das native `hidden`-Attribut — explizit
   zurücksetzen, damit `<div class="ds-hint" hidden>` wie erwartet ausblendet. */
.ds-hint[hidden] { display: none; }
.ds-hint > .material-icons-outlined {
    color: var(--info);
    font-size: 16px;
    flex: 0 0 auto;
}
.ds-hint--block {
    flex: 0 0 auto;
    border-radius: 0;
    border-bottom: 1px solid var(--n-100);
    padding: var(--sp-2) var(--sp-4);
}
.ds-hint--success                          { background: var(--success-soft); }
.ds-hint--success > .material-icons-outlined { color: var(--success); }
.ds-hint--warning                          { background: var(--warning-soft); }
.ds-hint--warning > .material-icons-outlined { color: var(--warning); }
.ds-hint--danger                           { background: var(--danger-soft); }
.ds-hint--danger > .material-icons-outlined { color: var(--danger); }
.ds-hint--muted                            { background: var(--bg-app); color: var(--text-muted); }
.ds-hint--muted > .material-icons-outlined { color: var(--text-muted); }