/* =============================================================
   COVALYZE — Theme-Override „Jonas Design System"
   =============================================================
   Legt Jonas' Design-Sprache (helle Analytics-Product-Fläche,
   Geist-Fonts, Navy/Orange-Akzente, Grün/Blau-Actions, 2px-Ecken)
   über das bestehende covalyze.css. WICHTIG: NACH covalyze.css laden,
   damit die :root-Overrides und Chrome-Regeln gewinnen.

   Nicht-invasiv: covalyze.css bleibt unverändert und stylt weiterhin
   alle (auch neueren) Views. Da Variablen- und Klassennamen zwischen
   Jonas' FE und diesem Repo identisch sind, re-themen die Views über
   die --cv-*-Tokens automatisch mit.

   Quelle: „New FE Jonas/covalyze-v3" (covalyze-tokens.css + covalyze.css).
   Doku:   docs/covalyze_design_system_jonas_v01.md
   ============================================================= */

@import url('/static/fonts/font-face.css');
@import url('/static/css/covalyze-tokens.css');

/* ---- Token-Override: Jonas' --cv-* Werte ------------------- */
:root {
  /* BRAND — Covalyze Blue; Orange als Label-/Akzentfarbe */
  --cv-navy-deep:    #0F2154;
  --cv-navy:         var(--color-primary);        /* #162F7A */
  --cv-navy-mid:     var(--color-primary-hover);
  --cv-navy-hover:   #24418f;
  --cv-orange:       var(--p-orange);             /* #D97A2A */
  --cv-orange-dark:  #b8641f;
  --cv-orange-lite:  #e9a468;

  /* ACTIONS — Grün primär, Blau sekundär */
  --cv-action:          var(--p-green);
  --cv-action-hover:    var(--p-green-hover);
  --cv-action-2:        var(--p-blue);
  --cv-action-2-hover:  var(--p-blue-hover);

  /* BACKGROUNDS — helle Flächen */
  --cv-bg:           var(--p-surface);            /* #f3f4f6 */
  --cv-bg-card:      var(--p-canvas);             /* #ffffff */
  --cv-bg-raised:    var(--p-stripe);
  --cv-bg-alt:       var(--p-stripe);
  --cv-hover:        var(--p-hover);

  /* BORDERS */
  --cv-border:       var(--p-line-soft);
  --cv-border-dark:  var(--p-line);
  --cv-focus:        var(--p-focus);

  /* TEXT — Navy primär */
  --cv-text-pri:     var(--p-text);               /* #162F7A */
  --cv-text-sec:     var(--p-text-2);
  --cv-text-tert:    var(--p-text-mute);
  --cv-text-inv:     #FFFFFF;
  --cv-rail-fg:      var(--p-rail-fg);            /* #6b8aad */

  /* GREENFIELD — auf Product-Grün verankert */
  --cv-gf-900: #14421F; --cv-gf-700: #226B32; --cv-gf-500: var(--p-green);
  --cv-gf-400: #4A9D5C; --cv-gf-200: #A8D5B2; --cv-gf-100: #DFF0E4;
  --cv-gf-50:  #F2F9F4;

  /* BROWNFIELD — auf Product-Blau verankert */
  --cv-bf-900: #16375C; --cv-bf-700: #23568F; --cv-bf-500: var(--p-blue);
  --cv-bf-400: #5A92CC; --cv-bf-200: #B2CDE8; --cv-bf-100: #E0ECF7;
  --cv-bf-50:  #F2F7FC;

  /* SEMANTIC */
  --cv-success: var(--p-green);
  --cv-warning: #A96C15;
  --cv-danger:  var(--p-red);
  --cv-info:    var(--p-blue);

  /* LAYOUT — unverändert (Kompatibilität) */

  /* RADIUS — Product-Fläche ist 2px, Ecken nahezu quadratisch */
  --cv-radius:    2px;
  --cv-radius-sm: 2px;
  --cv-radius-lg: 2px;
  --cv-radius-xl: 2px;
  --cv-radius-pill: 999px;

  /* TYPOGRAPHY — Geist Variable + Geist Mono */
  --cv-font: var(--font-sans);
  --cv-sans: var(--font-sans);
  --cv-mono: var(--font-mono);

  /* ELEVATION — border-geführt, kaum Schatten */
  --cv-shadow-sm: none;
  --cv-shadow:    none;
  --cv-shadow-md: 0 8px 24px rgb(var(--color-primary-rgb) / .14);

  /* TRANSITIONS */
  --cv-transition: .2s ease-out;
}

/* ---- Chrome: Header + Sidebar von dunkel-navy auf hell ----- */
/* covalyze.css verdrahtet hier weiß-auf-navy fest — daher explizit
   überschreiben (gleiche Spezifität, spätere Deklaration gewinnt). */

.cv-header {
  background: var(--cv-bg-card);
  color: var(--cv-text-pri);
  border-bottom: 1px solid var(--cv-border);
}
.cv-header-div { background: var(--cv-border); }
.cv-logo    { color: var(--cv-navy); }
.cv-logo em { color: var(--cv-orange); font-style: normal; }
.cv-profile-name { color: var(--cv-navy); }
.cv-obj-icon svg { stroke: var(--cv-navy); }

.cv-nav {
  background: var(--cv-bg-card);
  border-right: 1px solid var(--cv-border);
}
.cv-nav-toggle       { color: var(--cv-rail-fg); }
.cv-nav-toggle:hover { color: var(--cv-navy); }
.cv-nav-sect         { color: var(--cv-text-tert); }
.cv-nav-item {
  color: var(--cv-rail-fg);
  border-left: 3px solid transparent;
}
.cv-nav-item:hover {
  background: var(--cv-hover);
  color: var(--cv-navy);
}
.cv-nav-item.is-active {
  background: var(--cv-hover);
  color: var(--cv-orange);
  font-weight: 600;
  border-left-color: var(--cv-orange);
}
/* Tooltip bleibt dunkel für Kontrast auf hellem Rail */
.cv-nav-tooltip { background: var(--cv-navy-deep); color: #fff; }

/* Kontext-Panel (rechts) auf helle Karte */
.cv-ctx { background: var(--cv-bg-card); }

/* ---- Actions: grüner Primär-Button (Product-Konvention) ---- */
/* Jonas nutzt Grün als primäre Aktion statt Orange. Nur wenn im
   Markup vorhanden — Orange-Buttons bleiben ansonsten Orange. */
.btn-primary, .cv-btn-primary {
  background: var(--cv-action);
  border-color: var(--cv-action);
}
.btn-primary:hover, .cv-btn-primary:hover {
  background: var(--cv-action-hover);
  border-color: var(--cv-action-hover);
}