/* ============================================================================
   MEMEX OS — Marken-Stylesheet im AUVISO-Design
   ----------------------------------------------------------------------------
   Wird als LETZTES Stylesheet jeder Datei eingebunden (direkt vor </head>) und
   ueberschreibt damit die modul-eigenen Regeln. Einzige Quelle fuer Farben,
   Typografie, Radien und Schatten — eine Aenderung hier wirkt in allen 23
   Ansichten und im Bundle.

   Ausgenommen: partner-leads.html (kundenseitiges RICOH-x-DocuWare-Portal,
   behaelt bewusst die RICOH-Hausfarbe).
   ============================================================================ */

:root {
  /* --- AUVISO Brand-Tokens (verbindlich) ---------------------------------- */
  --auviso-teal:       #00a0a0;   /* Teal  – Basisfarbe / Akzent */
  --auviso-teal-light: #7fd0c0;   /* Mint  – Sekundaer, Highlights */
  --auviso-slate:      #3d4f5c;   /* Slate – Flaechen, dunkle Header */
  --auviso-slate-soft: #6e7c84;   /* Cloud – Sekundaertext */
  --accent:      var(--auviso-teal);
  --accent-rgb:  0, 160, 160;
  --accent-soft: rgba(0, 160, 160, 0.12);

  /* --- MEMEX-Semantik auf das AUVISO-System gemappt ------------------------ */
  --bg:       #f2f5f6;   /* Mist  – App-Hintergrund */
  --surface:  #ffffff;   /* Paper – Karten */
  --surface2: #f4f7f8;   /* Panel – abgesetzte Flaechen */
  --fg:       #2a3942;   /* Ink   – Haupttext */
  --fg2:      #3d4f5c;   /* Slate */
  --fg3:      #5a6b76;
  --muted:    #6e7c84;   /* Cloud – Sekundaertext */
  --faint:    #8a979e;   /* Muted – Captions */
  --border:   #e2e8ea;   /* Line */
  --border2:  #ccd6d9;

  /* Kategoriefarben: --blue ist der Akzent und wird zu Teal. */
  --blue:   #00a0a0;
  --green:  #2d8f7c;   /* Positive */
  --amber:  #b7791f;
  --red:    #e5484d;   /* Negative */
  --purple: #6f5f9e;

  --tint-blue:   rgba(0, 160, 160, 0.12);
  --tint-green:  rgba(45, 143, 124, 0.13);
  --tint-amber:  rgba(183, 121, 31, 0.13);
  --tint-red:    rgba(229, 72, 77, 0.11);
  --tint-purple: rgba(111, 95, 158, 0.12);

  /* --- Typografie --------------------------------------------------------- */
  --serif: 'Space Grotesk', system-ui, sans-serif;   /* Display, Zahlen, Labels */
  --sans:  'Manrope', system-ui, sans-serif;         /* Fliesstext / UI */
  --mono:  'IBM Plex Mono', ui-monospace, monospace; /* technische Felder */

  /* --- Radius / Elevation -------------------------------------------------- */
  --radius-card:  18px;
  --radius-field: 12px;
  --radius-pill:  999px;
  --radius-sm:    6px;
  --shadow-card: 0 1px 2px rgba(40, 57, 66, 0.04), 0 8px 24px rgba(40, 57, 66, 0.06);
  --shadow-elev: 0 14px 40px rgba(40, 57, 66, 0.16);

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg:       #14191e;
  --surface:  #1d242b;
  --surface2: #1a2128;
  --fg:       #d7dee3;
  --fg2:      #c2ccd4;
  --fg3:      #aab8c2;
  --muted:    #8fa0ab;
  --faint:    #77858e;
  --border:   #313c45;
  --border2:  #3e4a55;

  --blue:   #3ec8c8;
  --green:  #3aa98f;
  --amber:  #d9a441;
  --red:    #d66a6a;
  --purple: #9b8cc8;

  --tint-blue:   rgba(0, 160, 160, 0.22);
  --tint-green:  rgba(58, 169, 143, 0.20);
  --tint-amber:  rgba(217, 164, 65, 0.18);
  --tint-red:    rgba(214, 106, 106, 0.20);
  --tint-purple: rgba(155, 140, 200, 0.22);

  --accent:      #3ec8c8;
  --accent-rgb:  62, 200, 200;
  --accent-soft: rgba(62, 200, 200, 0.14);

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.30), 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-elev: 0 14px 40px rgba(0, 0, 0, 0.45);

  color-scheme: dark;
}

/* ============================================================================
   Basis
   ============================================================================ */

body {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--fg);
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 20% 0%, rgba(var(--accent-rgb), 0.05), transparent 45%),
    radial-gradient(circle at 80% 100%, rgba(61, 79, 93, 0.04), transparent 45%);
  background-attachment: fixed;
}

h1, h2, h3, h4,
.topbar h1,
.grouphd {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Zahlen und KPI-Werte im Display-Schnitt — das praegt den AUVISO-Eindruck. */
.kpi .v,
.bigstat .v,
.gauge .inner,
.v {
  font-family: var(--serif);
  font-weight: 500;
}

.sub, .tiny, .muted, .empty {
  color: var(--muted);
}

code, pre, .mono {
  font-family: var(--mono);
}

/* ============================================================================
   Flaechen
   ============================================================================ */

.card,
.tblbox,
.pane,
.detail,
.toast {
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.toast {
  box-shadow: var(--shadow-elev);
}

/* KPI-Kacheln: gleiche Sprache wie Karten, aber ruhiger. */
.kpi,
.bigstat {
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: var(--surface);
}

/* ============================================================================
   Bedienelemente
   ============================================================================ */

.btn {
  border-radius: var(--radius-field);
  font-family: var(--sans);
  font-weight: 500;
  border: 1px solid var(--border);
  transition: background 120ms, border-color 120ms, color 120ms;
}

.btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn.primary,
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.btn.primary:hover,
.btn-primary:hover {
  background: #008a89;
  border-color: #008a89;
  color: #ffffff;
}

.btn.sm, .btn-sm {
  border-radius: var(--radius-sm);
}

input:not([type=checkbox]):not([type=radio]),
select,
textarea {
  border-radius: var(--radius-field);
  font-family: var(--sans);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.chip {
  border-radius: var(--radius-pill);
  font-family: var(--sans);
  font-weight: 500;
}

/* ============================================================================
   Tabellen
   ============================================================================ */

.tblbox table th {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--fg2);
}

table tbody tr:hover {
  background: rgba(var(--accent-rgb), 0.04);
}

/* ============================================================================
   Kopfzeile der Ansichten
   ============================================================================ */

.topbar {
  border-bottom: 1px solid var(--border);
}

.topbar h1 {
  color: var(--fg);
}

.topbar .sub {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ============================================================================
   Bundle-Tokens (nur index.html)
   ----------------------------------------------------------------------------
   Die Shell und die sieben nativ gerenderten Module verwenden einen zweiten,
   maschinell erzeugten Token-Satz: die urspruenglich hart codierten Farben
   wurden zu --cRRGGBB bzw. --bRRGGBB umgeschrieben (Name = alter Hexwert).
   Ohne diese Ueberschreibungen bliebe das Bundle im alten Blau/Violett stehen.
   Zugeordnet ist nach Farbfamilie: Blau/Cyan -> Teal, Indigo/Violett -> ein
   gedaempftes Violett, Gruen/Rot/Amber -> die AUVISO-Statusfarben.
   ============================================================================ */

:root {
  /* Blau -> Teal (Akzentfamilie) */
  --c2563eb: #00a0a0;  --c1d4ed8: #008a89;  --c1e40af: #00706f;  --c3b82f6: #24b4b0;
  /* Sky / Cyan / Teal */
  --c0369a1: #0a7f86;  --c0c4a6e: #06555c;  --c0e7490: #0d8f92;
  --c0891b2: #109ba0;  --c0d9488: #2d8f7c;
  /* Indigo / Violett */
  --c7c3aed: #6f5f9e;  --c6d28d9: #5c4e85;  --c6366f1: #7b76ab;
  --c4338ca: #574f8e;  --c3730a3: #473f78;
  /* Rot */
  --cdc2626: #e5484d;  --cb91c1c: #c33a3f;  --c991b1b: #a32f34;
  /* Gruen */
  --c16a34a: #2d8f7c;  --c15803d: #257668;  --c166534: #1d6357;
  /* Amber / Orange */
  --cf59e0b: #cf9227;  --cd97706: #b7791f;  --cb45309: #a06a19;
  --ca16207: #97701a;  --c92400e: #8a5a13;  --c854d0e: #6f5312;
  --c9a3412: #9a5a2a;  --c451a03: #4a2f10;
  /* Ink */
  --c1e293b: #2a3942;

  /* Flaechige Tints */
  --beff6ff: rgba(0, 160, 160, 0.08);   --bf0f9ff: rgba(0, 160, 160, 0.06);
  --bbfdbfe: rgba(0, 160, 160, 0.24);   --becfeff: rgba(16, 155, 160, 0.10);
  --bf0fdf4: rgba(45, 143, 124, 0.09);  --bdcfce7: rgba(45, 143, 124, 0.18);
  --bfffbeb: rgba(183, 121, 31, 0.10);  --bfef3c7: rgba(183, 121, 31, 0.20);
  --bfde68a: rgba(183, 121, 31, 0.32);  --bfef9c3: rgba(183, 121, 31, 0.16);
  --bfff7ed: rgba(154, 90, 42, 0.09);
  --bfef2f2: rgba(229, 72, 77, 0.09);   --bfff5f5: rgba(229, 72, 77, 0.06);
  --bfee2e2: rgba(229, 72, 77, 0.18);   --bfecaca: rgba(229, 72, 77, 0.30);
  --bf5f3ff: rgba(111, 95, 158, 0.09);  --bede9fe: rgba(111, 95, 158, 0.20);
  --bddd6fe: rgba(111, 95, 158, 0.30);  --beef2ff: rgba(123, 118, 171, 0.10);

  --grad-soft: linear-gradient(135deg, rgba(0, 160, 160, 0.08), rgba(127, 208, 192, 0.14));
}

:root[data-theme="dark"] {
  --c2563eb: #3ec8c8;  --c1d4ed8: #3ec8c8;  --c1e40af: #3ec8c8;  --c3b82f6: #5ad6d0;
  --c0369a1: #4ecfd2;  --c0c4a6e: #4ecfd2;  --c0e7490: #5ad6d0;
  --c0891b2: #4ecfd2;  --c0d9488: #3aa98f;
  --c7c3aed: #9b8cc8;  --c6d28d9: #9b8cc8;  --c6366f1: #a79edb;
  --c4338ca: #a79edb;  --c3730a3: #a79edb;
  --cdc2626: #d66a6a;  --cb91c1c: #d66a6a;  --c991b1b: #d66a6a;
  --c16a34a: #3aa98f;  --c15803d: #3aa98f;  --c166534: #3aa98f;
  --cf59e0b: #d9a441;  --cd97706: #d9a441;  --cb45309: #d9a441;
  --ca16207: #e3b45f;  --c92400e: #d9a441;  --c854d0e: #e3b45f;
  --c9a3412: #e0955e;  --c451a03: #e8b184;
  --c1e293b: #d7dee3;

  --beff6ff: rgba(0, 160, 160, 0.22);   --bf0f9ff: rgba(0, 160, 160, 0.15);
  --bbfdbfe: rgba(0, 160, 160, 0.36);   --becfeff: rgba(16, 155, 160, 0.22);
  --bf0fdf4: rgba(45, 143, 124, 0.22);  --bdcfce7: rgba(45, 143, 124, 0.28);
  --bfffbeb: rgba(183, 121, 31, 0.19);  --bfef3c7: rgba(183, 121, 31, 0.26);
  --bfde68a: rgba(183, 121, 31, 0.36);  --bfef9c3: rgba(183, 121, 31, 0.24);
  --bfff7ed: rgba(154, 90, 42, 0.20);
  --bfef2f2: rgba(229, 72, 77, 0.20);   --bfff5f5: rgba(229, 72, 77, 0.14);
  --bfee2e2: rgba(229, 72, 77, 0.26);   --bfecaca: rgba(229, 72, 77, 0.36);
  --bf5f3ff: rgba(111, 95, 158, 0.22);  --bede9fe: rgba(111, 95, 158, 0.28);
  --bddd6fe: rgba(111, 95, 158, 0.36);  --beef2ff: rgba(123, 118, 171, 0.20);

  --grad-soft: linear-gradient(135deg, rgba(0, 160, 160, 0.20), rgba(127, 208, 192, 0.24));
}