/* Niveltro – Corporate Identity 1.0 (CI/Niveltro_CI_und_KI_Umsetzungsauftrag.md).
   Zentrale Tokens und Abweichungen gegenüber app.css/studio.css/pwa.css. Wird als letztes Stylesheet geladen.
   Dark Mode ist die Produktdarstellung; die Light-Tokens sind vorbereitet, aber nicht freigeschaltet (CI Abschnitt 4). */
:root {
  color-scheme: dark;
  --nv-bg: #111111;
  --nv-surface: #191919;
  --nv-surface-raised: #222222;
  --nv-surface-hover: #2a2a2a;
  --nv-text: #f7f7f5;
  --nv-muted: #b0b4bb;
  --nv-border: #353535;
  --nv-control-border: #777777;
  --nv-brand: #ff8917;
  --nv-brand-hover: #ffa13d;
  --nv-brand-pressed: #e77508;
  --nv-on-brand: #111111;
  --nv-brand-ink: #ff8917;
  --nv-brand-subtle: #2c2015;
  --nv-info: #7db3ff;
  --nv-success: #72d7a2;
  --nv-warning: #f6cf70;
  --nv-danger: #ff9292;
  --nv-focus: #a8cdff;
  /* Inter ist nicht lokal hinterlegt: bis eine Schriftdatei mit geklärter Lizenz vorliegt, gilt der System-Fallback. */
  --nv-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --nv-radius-control: 10px;
  --nv-radius-card: 14px;
  --nv-duration-fast: 120ms;
  --nv-ease: cubic-bezier(.2, 0, 0, 1);
  --font-display: var(--nv-font);
  --bs-body-font-family: var(--nv-font);
  --bs-link-color: var(--nv-brand-ink);
  --bs-link-hover-color: var(--nv-brand-hover);
  --bs-link-color-rgb: 255, 137, 23;
  --bs-link-hover-color-rgb: 255, 161, 61;
}
[data-theme='light'] {
  color-scheme: light;
  --nv-bg: #f5f6f8;
  --nv-surface: #ffffff;
  --nv-surface-raised: #eceff3;
  --nv-surface-hover: #e4e8ee;
  --nv-text: #17191c;
  --nv-muted: #505967;
  --nv-border: #d3d8e0;
  --nv-control-border: #6f7783;
  --nv-brand-ink: #963e00;
  --nv-brand-subtle: #fff0de;
  --nv-info: #1e56b3;
  --nv-success: #17663e;
  --nv-warning: #775200;
  --nv-danger: #af2424;
  --nv-focus: #2059b0;
}

/* Fläche und Schrift: flach, ohne dekorative Verläufe. */
body { background: var(--nv-bg); color: var(--nv-text); font-family: var(--nv-font); }
.studio-sidebar, .offline-header, .mobile-header { background: var(--nv-surface); border-color: var(--nv-border); }

/* Marke: Niveltro-Logo in der Navigation, Studioname als zweite Zeile. */
.studio-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-logo { display: block; height: auto; flex-shrink: 0; }
.studio-brand-sidebar { flex-direction: column; align-items: flex-start; gap: 10px; padding: 0 6px; }
.studio-brand-sidebar .brand-logo { width: 156px; }
.brand-studio { color: var(--nv-muted); font-size: 14px; font-weight: 500; letter-spacing: 0; line-height: 1.35; overflow-wrap: anywhere; }
.mobile-header .brand-logo, .offline-header .brand-logo { width: 128px; }
.mobile-header .studio-brand { gap: 10px; min-width: 0; }
.mobile-header .brand-studio { border-left: 1px solid var(--nv-border); padding-left: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 380px) { .mobile-header .brand-studio { display: none; } }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 12px; text-align: center; }
.auth-brand img { width: 200px; height: auto; }
.auth-brand p { margin: 0; color: var(--nv-muted); font-size: 16px; }

/* Navigation: aktiver Punkt mit dezenter Fläche, Markentext und Balken (nicht nur Farbe). */
.studio-nav-link { color: #d4d6da; }
.studio-nav-link.active { color: var(--nv-brand-ink); background: var(--nv-brand-subtle); border-color: transparent; box-shadow: inset 3px 0 0 var(--nv-brand); }
.mobile-bottom .studio-nav-link.active { box-shadow: inset 0 3px 0 var(--nv-brand); }

/* Schaltflächen: Orange flach mit dunkler Schrift; sekundär neutral mit sichtbarer Grenze. */
.btn-primary, .btn-primary:disabled {
  background: var(--nv-brand); border-color: var(--nv-brand); color: var(--nv-on-brand); box-shadow: none;
  transition: background-color var(--nv-duration-fast) var(--nv-ease);
}
.btn-primary:hover, .btn-primary:focus { background: var(--nv-brand-hover); border-color: var(--nv-brand-hover); color: var(--nv-on-brand); }
.btn-primary:active, .btn-primary.active { background: var(--nv-brand-pressed) !important; border-color: var(--nv-brand-pressed) !important; color: var(--nv-on-brand) !important; }
.btn-outline-secondary { border-color: var(--nv-control-border); color: var(--nv-text); }
.btn-outline-secondary:hover, .btn-outline-secondary:focus { background: var(--nv-surface-hover); border-color: #9a9a9a; color: var(--nv-text); }
.btn-outline-primary { border-color: var(--nv-brand); color: var(--nv-brand-ink); }
.btn-outline-primary:hover, .btn-outline-primary:focus { background: var(--nv-brand); border-color: var(--nv-brand); color: var(--nv-on-brand); }
.btn-danger { background: var(--nv-danger); border-color: var(--nv-danger); color: #111111; box-shadow: none; }

/* Eingabefelder: Grenze mit ausreichendem Kontrast (control-border), Fokus in Fokusfarbe. */
.form-control, .form-select { border-color: var(--nv-control-border); }
.form-control:focus, .form-select:focus { border-color: var(--nv-focus); box-shadow: 0 0 0 2px rgba(168, 205, 255, .35); }

/* Links im Fließtext */
a { color: var(--nv-brand-ink); }
a:hover { color: var(--nv-brand-hover); }
.studio-nav-link, .studio-brand, .btn { text-decoration: none; }

/* Zahlen in Trainingswerten tabellarisch */
.weight-input, .set-input, .rest-timer-display, .hero-progress-value, .metric-card strong, .stat-tile-value { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Überschriften nach CI-Typografie (Seitentitel 700, Abschnittstitel 650–700). */
h1, .h1, h2, .h2, .h3, .hero-title { font-weight: 700; }
h3, .h4, .h5 { font-weight: 650; }

/* Installieren/Aktualisieren ist eine Nebenaktion (CI: „Training fortsetzen“ dominiert). */
.pwa-controls .btn { min-height: 44px; padding: 8px 12px; border-color: var(--nv-border); background: transparent; color: var(--nv-muted); font-weight: 500; }
.pwa-controls .btn:hover, .pwa-controls .btn:focus { color: var(--nv-text); border-color: var(--nv-control-border); background: var(--nv-surface-hover); }

/* Schaltflächen mit Mindesthöhe: Beschriftung senkrecht mittig (z. B. Filter „Alle / Global / Studio“). */
.btn-group > .btn, a.btn { display: inline-flex; align-items: center; justify-content: center; }