/* SloppyUniverse · Design Tokens
   ------------------------------------------------------------
   Diese Datei wird per deploy.sh in jedes Modul nach
   static/css/su-tokens.css kopiert. Single-Source-of-Truth.

   Eingebunden VOR custom.css/modern.css damit Module-spezifisches
   Theming die Tokens zwar nutzen, aber gezielt überschreiben kann.
*/

:root {
  /* ── Brand — Umbrella quadrants (= Module-Brand-Farben) ── */
  --su-green:   #5A7C2A;  /* SloppyFix   olive            */
  --su-blue:    #2E3CC6;  /* SloppyScan  royal blue       */
  --su-magenta: #B63E8E;  /* SloppyPlan  pink             */
  --su-orange:  #C86A2E;  /* SloppyRent  terracotta       */
  --su-amber:   #D97706;  /* SloppyPay   amber/gold       */
  --su-teal:    #0E8A8A;  /* SloppyTag   teal             */

  /* Module tints — outer frame / light backdrops */
  --su-green-tint:   #8FB055;
  --su-blue-tint:    #6A78E8;
  --su-magenta-tint: #D97AB8;
  --su-orange-tint:  #E39A68;
  --su-amber-tint:   #F4A02C;
  --su-teal-tint:    #3FB6B6;

  /* ── Surface / text ── */
  --su-ink:    #0F1233;
  --su-navy:   #1B1E4D;
  --su-navy-2: #0F1233;
  --su-paper:  #FFFFFF;
  --su-bg:     #F6F6F2;
  --su-muted:  #6B6B6B;

  /* Auth/Identity-Layer (id.sloppyuniverse.com) */
  --su-identity: #7C3AED;        /* lavendel/lila — eigenes Layer */

  /* Accent auf dunklem Grund (Universe-Wordmark) */
  --su-accent: #B88CFF;

  /* ── Status-Tokens — kategorische Werte über alle Apps gleich ──
     (vorher waren Status-Farben pro App leicht unterschiedlich,
     was Cross-App-Severity-Lesart erschwert hat). */
  --su-ok:      #16a34a;          /* erledigt, anwesend, ok        */
  --su-warn:    #d97706;          /* fällig, erwartet, mittel      */
  --su-danger:  #dc2626;          /* überfällig, kritisch, gesperrt */
  --su-info:    #2563eb;          /* Hinweis, Pending              */
  --su-neutral: #64748b;          /* deaktiviert, ausgecheckt      */

  /* ── Type ── */
  --su-font-display: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --su-font-body:    'Archivo', 'Inter', system-ui, -apple-system, sans-serif;
  --su-font-mono:    'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
  /* Code-Font ist Alias auf Mono — wir wollen ein einziges Mono cross-app. */
  --su-font-code:    var(--su-font-mono);
}

/* ── Mono-Utility ──
   Auf Elemente, bei denen Mono visuelle Funktion erfüllt:
   - Timestamps (mini-clock im Footer)
   - Tag-Codes (AKS, asset_number, NFC-UID, badge-UID)
   - Tabellen-Zahlen in KPI-/Stat-Karten
   - <code>/<kbd>/<samp> + .text-mono Helper
   Module können das per höher-spezifischer Klasse weiter überschreiben. */
code, kbd, samp, .text-mono, .font-monospace,
#mini-clock, #mini-clock .mc-time, #mini-clock .mc-date, #mini-clock .mc-tz,
.stat-card .stat-number, .stat-card .stat-value,
.kpi .kpi-value,
.badge-card-uid, .aks-tag, .asset-number {
  font-family: var(--su-font-mono);
  font-feature-settings: 'tnum' 1;  /* tabular figures */
}

/* ── Unified KPI-Card-Pattern (Audit 2026-05-05, C2) ──
   KPI-Borders dürfen nicht in Severity-Farbe rot/gelb/grün laufen, sonst
   kollidiert die Severity-Wahrnehmung mit der App-Brand. Stattdessen:
   Brand-Border (per-App via --su-pwa-accent), Severity ausschließlich
   in der Zahl (.kpi-value).

   Module können `<div class="kpi">` oder
   `<div class="kpi kpi-warn|kpi-danger|kpi-ok">` verwenden. Die
   Severity-Klasse färbt NUR den Wert, nicht den Rand. */
.kpi {
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #e2e8f0);
  border-left: 4px solid var(--su-pwa-accent, var(--su-info));
  border-radius: 12px;
  padding: 1rem 1.1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  transition: box-shadow .15s ease;
}
.kpi:hover { box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .9rem;
  margin-bottom: 1.25rem;
}
.kpi .kpi-value {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--bs-body-color, #1e293b);
}
.kpi .kpi-label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--bs-secondary-color, #64748b);
  margin-top: .15rem;
}
/* Severity nur in der Zahl, nie am Rand */
.kpi.kpi-ok     .kpi-value { color: var(--su-ok); }
.kpi.kpi-warn   .kpi-value { color: var(--su-warn); }
.kpi.kpi-danger .kpi-value { color: var(--su-danger); }

/* ── Shared Top-Bar (Desktop-Chrome, 32 px, schwarz) ──
   Liegt als kleines Universe-Wordmark + horizontalem App-Switcher
   ueber jeder App. Auf Mobile (<992 px) ausgeblendet — dort uebernimmt
   der Sidebar-Bottom-Switcher (_module_switcher.html). */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 1050;
  display: none;             /* Mobile: hidden */
  align-items: center;
  gap: 14px;
  height: 32px;
  padding: 0 12px;
  background: #0a0a0a;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-family: var(--su-font-body);
  font-size: 11px;
  letter-spacing: .04em;
}
@media (min-width: 992px) {
  .app-topbar { display: flex; }
  /* Auf Desktop ist der Sidebar-Bottom-Switcher redundant zur Top-Bar */
  .has-app-topbar .module-switcher { display: none !important; }
}
.app-topbar-uni {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  text-decoration: none;
  opacity: .9;
  transition: opacity .15s;
}
.app-topbar-uni:hover { opacity: 1; color: #fff; }
.app-topbar-uni img { height: 16px; width: auto; }
.app-topbar-uni-text {
  font-family: var(--su-font-display);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.app-topbar-sep {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,.12);
}
.app-topbar-modules {
  display: flex;
  gap: 2px;
  align-items: center;
  margin-left: auto;
}
.app-topbar-mod {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 24px;
  border-radius: 4px;
  opacity: .55;
  transition: opacity .15s, background .15s;
}
.app-topbar-mod img {
  height: 18px;
  width: auto;
}
.app-topbar-mod:hover {
  opacity: 1;
  background: rgba(255,255,255,.06);
}
.app-topbar-mod.is-active {
  opacity: 1;
  background: rgba(255,255,255,.10);
}
.app-topbar-mod.is-active::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: -1px;
  height: 2px;
  background: var(--su-app-brand, #fff);
  border-radius: 2px;
}

/* ── PWA Install-Banner (shared) ──
   Wird vom .brand/handoff_FINAL/pwa-banner.js dynamisch eingefuegt. */
#pwaInstallBanner {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, rgba(0,0,0,.12));
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  font-size: .9rem;
  z-index: 1100;
  max-width: calc(100vw - 24px);
}
/* Auf Mobile: PWA-Banner ueber dem Stella-Bubble-Button (54 px hoch
   bei bottom: 18) platzieren, sonst kollidiert er rechts unten. */
@media (max-width: 640px) {
  #pwaInstallBanner { bottom: 84px; }
}
/* Per-App-Override: setze --su-pwa-accent in der App-CSS, sonst Default Info-Blue.
   Pay: --su-amber, Fix: --su-green, Scan: --su-blue, Plan: --su-magenta, Rent: --su-orange. */
#pwaInstallBanner .icon { color: var(--su-pwa-accent, var(--su-info)); }
#pwaInstallBanner .label { flex: 1 1 auto; }
#pwaInstallBanner .btn-install {
  background: var(--su-pwa-accent, var(--su-info));
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
}
#pwaInstallBanner .btn-install:hover { filter: brightness(1.08); }
#pwaInstallBanner .btn-dismiss {
  background: transparent;
  border: none;
  color: var(--bs-secondary-color, #64748b);
  font-size: 1.4rem;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}

/* ── Universe Sub-Page Module-Pills ────────────────────────────
   Einheitliche Topbar-Navigation in den Sub-Pages der Landing
   (impressum/datenschutz/widerruf/pricing). Pills fuehren direkt
   zur jeweiligen Modul-Domain. */
.su-module-pills {
  display: flex; gap: 6px; flex-wrap: wrap;
  align-items: center;
}
.su-module-pills .pill {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .8rem; font-weight: 600;
  text-decoration: none;
  border: 1px solid currentColor;
  background: rgba(255,255,255,.04);
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.su-module-pills .pill:hover {
  background: rgba(255,255,255,.12);
}
.su-module-pills .pill-pay   { color: var(--su-amber);   }
.su-module-pills .pill-rent  { color: var(--su-orange);  }
.su-module-pills .pill-fix   { color: var(--su-green);   }
.su-module-pills .pill-plan  { color: var(--su-magenta); }
.su-module-pills .pill-scan  { color: var(--su-blue);    }
.su-module-pills .pill-tag   { color: var(--su-teal);    }
@media (max-width: 720px) {
  .su-module-pills .pill { padding: 3px 8px; font-size: .72rem; }
}