/* ============================================================
   CourtOS — Gemeinsames Design-System (Single Source of Truth)
   Eingebunden von allen Apps: Hub, Scout, Athletik, Taktikboard, Anzeigetafel.
   Basis: CourtOS Brand Guide. Änderungen hier wirken auf ALLE Apps.
   ============================================================ */

@import url('/vendor/fonts/courtos-fonts.css');

/* ---- 1. Marken-Palette (Brand Guide, unveränderlich) ---- */
:root {
  /* Tinte / dunkle Flächen */
  --cos-ink:        #0C0E12;
  --cos-ink-2:      #20242C;
  --cos-graphite:   #5C6470;
  --cos-graphite-2: #8A929C;
  /* Navy (Marke) */
  --cos-navy:       #27407A;
  --cos-navy-deep:  #16264C;
  --cos-navy-700:   #1E3260;
  /* Optic Gold (Akzent) */
  --cos-optic:      #E0A82E;
  --cos-optic-deep: #BE851A;
  --cos-optic-soft: #F5ECD5;
  --cos-optic-bg:   #FAF6EA;
  /* helle Flächen */
  --cos-paper:      #ffffff;
  --cos-mist:       #F5F3EF;
  --cos-cloud:      #ECE9E3;
  --cos-line:       #E6E2DB;
  --cos-line-soft:  #EFECE6;

  /* ---- 2. Schrift ---- */
  --cos-font:       'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cos-font-mono:  'Space Grotesk', ui-monospace, 'SFMono-Regular', monospace;

  /* ---- 3. Form (Radius-Skala, Brand Guide 22/14) ---- */
  --cos-r-lg:  22px;   /* Karten, Modals, Panels */
  --cos-r-md:  14px;   /* Buttons, Inputs, Badges */
  --cos-r-sm:  10px;   /* Chips, kleine Controls */
  --cos-r-pill: 999px;

  /* ---- 4. Schatten ---- */
  --cos-shadow-soft: 0 24px 60px -20px rgba(18,26,50,0.22);
  --cos-shadow-card: 0 18px 44px -22px rgba(18,26,50,0.20);
  --cos-shadow-sm:   0 2px 10px -4px rgba(18,26,50,0.16);

  /* ---- 5. Semantische Tokens — HELL (Standard) ---- */
  --cos-surface:    var(--cos-paper);
  --cos-surface-2:  var(--cos-mist);
  --cos-surface-3:  var(--cos-cloud);
  --cos-text:       var(--cos-ink);
  --cos-text-2:     var(--cos-graphite);
  --cos-text-3:     var(--cos-graphite-2);
  --cos-border:     var(--cos-line);
  --cos-border-soft:var(--cos-line-soft);
  --cos-brand:      var(--cos-navy);
  --cos-brand-strong: var(--cos-navy-deep);
  --cos-accent:     var(--cos-optic);
  --cos-accent-strong: var(--cos-optic-deep);
  --cos-on-brand:   #ffffff;
  --cos-on-accent:  #1a1303;
  --cos-grad-brand: linear-gradient(160deg, var(--cos-navy) 0%, var(--cos-navy-deep) 100%);

  /* ---- 5b. Abgeleitete Stufen ----
     Die Navigationsleiste braucht mehr als eine Marken- und eine Akzentfarbe:
     eine Helligkeitstreppe für die zweite Ebene, helle Tönungen für Flächen und
     Ränder, und eine Schriftfarbe je farbiger Fläche.

     Die *-rgb-Tripel existieren, weil rgba() keinen Hex-Wert aus einer Variablen
     nehmen kann: `rgba(var(--cos-brand-rgb),.08)` funktioniert, mit einem
     Hex-Wert in der Variablen nicht.

     Diese Werte sind die CourtOS-Vorgabe. Wo Vereinsfarben aktiv sind, werden
     sie zur Laufzeit überschrieben (siehe operations/ops-theme.js) — deshalb
     gehört in die Stylesheets kein Marken-Hex mehr, sondern immer var(). */
  --cos-brand-rgb:        39, 64, 122;
  --cos-brand-strong-rgb: 22, 38, 76;
  --cos-brand-700:        #1E3260;
  --cos-brand-700-rgb:    30, 50, 96;
  --cos-brand-600:        #2E4B8F;
  --cos-brand-600-rgb:    46, 75, 143;
  --cos-brand-500:        #3A5CA8;
  --cos-brand-400:        #4B71C9;
  --cos-brand-300:        #5680D8;
  --cos-brand-line:       #E4E8EF;
  --cos-brand-soft:       #EEF1F6;
  --cos-brand-bg:         #F7F8FB;
  --cos-on-brand-rgb:     255, 255, 255;
  /* Eigene Schriftfarbe für die zweite Navigationsebene: sie liegt auf einer
     helleren Stufe als die Leiste und verträgt deshalb andere Kontraste. */
  --cos-on-nav:           #FFFFFF;
  --cos-on-nav-rgb:       255, 255, 255;
  --cos-accent-rgb:       224, 168, 46;
  --cos-accent-light:     #E7B84A;
  --cos-accent-soft:      #F5ECD5;
  --cos-accent-bg:        #FAF6EA;
  /* Akzent als Schrift bzw. Rand auf hellem Grund — die reine Akzentfarbe wäre
     dort zu hell. */
  --cos-accent-text:      #8A6614;
  --cos-accent-line:      #D9BD72;
  --cos-grad-accent: linear-gradient(160deg, var(--cos-accent-light), var(--cos-accent-strong));
}

/* ---- 6. Semantische Tokens — DUNKEL (für Spielfeld-Apps) ---- */
.cos-dark, [data-cos-theme="dark"] {
  --cos-surface:    #0C0E12;
  --cos-surface-2:  #14181F;
  --cos-surface-3:  #1D222B;
  --cos-text:       #ECEEF3;
  --cos-text-2:     #98A1B1;
  --cos-text-3:     #5C6473;
  --cos-border:     rgba(255,255,255,0.09);
  --cos-border-soft:rgba(255,255,255,0.05);
  --cos-brand:      var(--cos-navy);
  --cos-brand-strong: var(--cos-navy-deep);
  --cos-accent:     var(--cos-optic);
  --cos-accent-strong: var(--cos-optic-deep);
  --cos-on-brand:   #ffffff;
  --cos-on-accent:  #1a1303;
  --cos-shadow-soft: 0 24px 60px -24px rgba(0,0,0,0.55);
  --cos-shadow-card: 0 16px 40px -22px rgba(0,0,0,0.5);
  --cos-shadow-sm:   0 2px 10px -4px rgba(0,0,0,0.45);
}

/* ============================================================
   7. Gemeinsame Basis-Komponenten (.cos-*)
   Apps können diese Klassen direkt nutzen → identisches Auftreten.
   ============================================================ */

.cos-btn {
  font-family: var(--cos-font);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px;
  border-radius: var(--cos-r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease, border-color .15s ease;
  white-space: nowrap;
  text-decoration: none;
}
.cos-btn:active { transform: translateY(1px); }
.cos-btn:focus-visible { outline: 2px solid var(--cos-accent); outline-offset: 2px; }

.cos-btn--primary { background: var(--cos-grad-brand); color: var(--cos-on-brand); }
.cos-btn--primary:hover { box-shadow: var(--cos-shadow-sm); }

.cos-btn--accent { background: var(--cos-accent); color: var(--cos-on-accent); }
.cos-btn--accent:hover { background: var(--cos-accent-strong); }

.cos-btn--ghost {
  background: transparent; color: var(--cos-brand);
  border-color: var(--cos-border);
}
.cos-btn--ghost:hover { border-color: var(--cos-brand); background: var(--cos-surface-2); }

.cos-btn--quiet { background: var(--cos-surface-2); color: var(--cos-text); }
.cos-btn--quiet:hover { background: var(--cos-surface-3); }

.cos-card {
  background: var(--cos-surface);
  border: 1px solid var(--cos-border);
  border-radius: var(--cos-r-lg);
  box-shadow: var(--cos-shadow-card);
  padding: 22px;
}

.cos-panel {
  background: var(--cos-surface);
  border: 1px solid var(--cos-border);
  border-radius: var(--cos-r-lg);
}

.cos-input, .cos-select, .cos-textarea {
  font-family: var(--cos-font);
  font-size: 14px;
  color: var(--cos-text);
  background: var(--cos-surface-2);
  border: 1px solid var(--cos-border);
  border-radius: var(--cos-r-md);
  padding: 11px 14px;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cos-input:focus, .cos-select:focus, .cos-textarea:focus {
  outline: none;
  border-color: var(--cos-accent);
  box-shadow: 0 0 0 3px rgba(224,168,46,0.18);
}
.cos-input::placeholder { color: var(--cos-text-3); }

.cos-label {
  font-family: var(--cos-font-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--cos-text-3);
}

.cos-badge {
  font-family: var(--cos-font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: .5px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: var(--cos-r-pill);
  background: var(--cos-surface-3);
  color: var(--cos-text-2);
}
.cos-badge--accent { background: var(--cos-optic-bg); color: var(--cos-optic-deep); }
.cos-badge--brand  { background: var(--cos-navy-deep); color: #fff; }

.cos-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(18,26,50,0.5);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 1000; overflow-y: auto;
}
.cos-modal {
  background: var(--cos-surface);
  border: 1px solid var(--cos-border);
  border-radius: var(--cos-r-lg);
  box-shadow: var(--cos-shadow-soft);
  padding: 28px;
  width: 100%; max-width: 460px;
  max-height: calc(100vh - 40px); overflow-y: auto; margin: auto;
}

.cos-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--cos-text-2);
}
.cos-empty__icon {
  width: 56px; height: 56px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--cos-r-lg);
  background: var(--cos-surface-2);
  color: var(--cos-text-3);
}
.cos-empty__title { font-family: var(--cos-font); font-weight: 700; font-size: 16px; color: var(--cos-text); margin-bottom: 6px; }
.cos-empty__text  { font-size: 13px; line-height: 1.5; }

/* Einheitliche App-Kopfzeile */
.cos-appbar {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  background: var(--cos-surface);
  border-bottom: 1px solid var(--cos-border);
}
.cos-wordmark {
  font-family: var(--cos-font);
  font-weight: 800; font-size: 18px; letter-spacing: -0.5px;
  color: var(--cos-brand-strong);
}
.cos-wordmark b { color: var(--cos-accent); font-weight: 800; }
.cos-appbar__tag {
  font-family: var(--cos-font-mono);
  font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: var(--cos-text-3);
  align-self: center;
}

/* Tabellen-Ziffern überall mit Space Grotesk (sportlich/technisch) */
/* Einheitlicher Hub-Button: feste Navy-Pille oben rechts in allen Apps */
.cos-hub-btn{position:fixed;top:max(8px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));z-index:60;display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:#27407A;color:#fff;border:none;border-radius:999px;font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.3px;cursor:pointer;text-decoration:none;white-space:nowrap;box-shadow:0 2px 10px rgba(0,0,0,.28);transition:opacity .15s,transform .1s;}
.cos-hub-btn:hover{opacity:.9;}
.cos-hub-btn:active{transform:scale(.96);}
.cos-hub-btn svg{flex-shrink:0;display:block;width:13px;height:13px;}
@media (max-width:420px){.cos-hub-btn{padding:6px 11px;font-size:11px;}}
.cos-logout-btn{position:fixed;top:max(8px,env(safe-area-inset-top));right:calc(max(10px,env(safe-area-inset-right)) + 84px);z-index:60;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;background:#586273;color:#fff;border:none;border-radius:999px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25);transition:opacity .15s,transform .1s;}.cos-logout-btn:hover{opacity:.85;}.cos-logout-btn:active{transform:scale(.94);}.cos-logout-btn svg{display:block;width:15px;height:15px;}@media (max-width:420px){.cos-logout-btn{right:calc(max(10px,env(safe-area-inset-right)) + 72px);width:32px;height:32px;}}
.cos-num { font-family: var(--cos-font-mono); font-variant-numeric: tabular-nums; }