/**
 * Pulsive — Brand Design Tokens + Skeleton Loader
 *
 * Single source of truth for design system.
 * Include in every page: <link rel="stylesheet" href="/assets/css/brand.css">
 *
 * ── Design-Entscheidungen (Restyling 2026-07) ────────────────────────────────
 * 1. Markenfarbe bleibt Purple #7c3aed + Cyan-Akzent #06b6d4. Akzent wird
 *    sparsam eingesetzt: primäre Buttons, aktive Zustände, Fokus-Ringe.
 * 2. Zwei Token-Welten, bewusst getrennt:
 *    - Brand-Flächen (Landing, Auth, Superadmin) sind dauerhaft DARK — Teil
 *      der Markenidentität. Tokens: --pr/--ac/--tx/--bd/--card (dieser Block).
 *    - Das Dashboard (monitor/admin.php) hat Light+Dark via [data-theme] mit
 *      eigenem Namensraum (--bg/--text/--border …) in admin.php. Kein Merge,
 *      sonst kollidieren :root-Werte zwischen den Flächen.
 * 3. Die SYSTEM-SKALA unten (Spacing 4px-Grid, Radius, Schatten, Typo-Scale
 *    1.2, Motion, Z-Index, Fokus) ist flächenübergreifend und theme-neutral —
 *    sie gilt überall und ist die gemeinsame Sprache beider Welten.
 * 4. Typografie: Boska (Display/Headings, Serif) + General Sans (UI/Body) —
 *    self-hosted, DSGVO-sauber. Kein Inter, keine Google-Font-CDNs.
 * 5. Motion: 150–250ms, ease-out-Kurven, nur transform/opacity. Jede Animation
 *    respektiert prefers-reduced-motion (globale Regel am Dateiende).
 * 6. Dark ist kein invertiertes Light: Neutraltöne tragen einen leichten
 *    Violett-Stich (#09091a → Hue der Marke), kein reines Schwarz.
 */

/* ── Design Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:       #09091a;
  --card:     #111127;
  --card2:    #161632;

  /* Borders */
  --bd:       #1a1a38;
  --bdm:      #282852;

  /* Brand — Primary purple */
  --pr:       #7c3aed;
  --prl:      #a78bfa;
  --prd:      #6d28d9;

  /* Brand — Accent cyan */
  --ac:       #06b6d4;
  --acl:      #22d3ee;

  /* Gradient (135° — purple → cyan) */
  /* Darker cyan endpoints keep white button labels above WCAG AA. */
  --gd:       linear-gradient(135deg, #7c3aed, #0e7490);
  --gd-hover: linear-gradient(135deg, #6d28d9, #155e75);

  /* Text */
  --tx:       #f1f5f9;
  --txs:      #94a3b8;
  /* Muted text is still content and therefore keeps AAA contrast on dark UI. */
  --txm:      #94a3b8;

  /* Semantic */
  --ok:       #10b981;
  --warn:     #f59e0b;
  --err:      #e11d48;    /* error only — not brand */
  --err-bg:   #1f0815;
  --err-bd:   rgba(225,29,72,.35);
  --err-tx:   #fda4af;

  /* Input */
  --inp-bg:   #09091a;
  --inp-bd:   #1a1a38;
  --inp-focus:#7c3aed;

  /* Misc (legacy aliases — bleiben für bestehende Nutzer) */
  --r:        14px;
  --r-sm:     8px;
  --r-lg:     20px;
  --shadow:   0 4px 24px rgba(0,0,0,.45);
  --shadow-pr:0 4px 20px rgba(124,58,237,.28);

  /* ── System-Skala (flächenübergreifend, theme-neutral) ──────────────────── */

  /* Spacing — 4px-Grid */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Radius-Skala */
  --r-xs:   6px;
  --r-md:   10px;
  --r-full: 999px;

  /* Schatten — weich, mehrschichtig (ambient + key light) */
  --shadow-1: 0 1px 2px rgba(9,9,26,.06), 0 2px 8px rgba(9,9,26,.05);
  --shadow-2: 0 2px 4px rgba(9,9,26,.07), 0 8px 24px rgba(9,9,26,.08);
  --shadow-3: 0 4px 8px rgba(9,9,26,.08), 0 16px 48px rgba(9,9,26,.14);

  /* Typo-Scale — Ratio 1.2 (Product-UI: eng, ruhig) */
  --fs-xs:  0.694rem;   /* 11.1px */
  --fs-sm:  0.833rem;   /* 13.3px */
  --fs-md:  1rem;       /* 16px   */
  --fs-lg:  1.2rem;     /* 19.2px */
  --fs-xl:  1.44rem;    /* 23px   */
  --fs-2xl: 1.728rem;   /* 27.6px */
  --fs-3xl: 2.074rem;   /* 33.2px */

  /* Motion — Dauer + Kurven (nur transform/opacity animieren) */
  --dur-1: 150ms;
  --dur-2: 200ms;
  --dur-3: 250ms;
  --ease-out:  cubic-bezier(.22, 1, .36, 1);   /* ease-out-quint */
  --ease-move: cubic-bezier(.4, 0, .2, 1);     /* material standard */

  /* Z-Index — semantische Skala, keine 9999er */
  --z-dropdown:       100;
  --z-sticky:         200;
  --z-modal-backdrop: 300;
  --z-modal:          310;
  --z-overlay:        350;   /* Vollbild-Editoren, Lightbox — über Modals */
  --z-toast:          400;
  --z-tooltip:        500;
  --z-critical:       600;   /* Session-Timeout u. Ä. — über allem */

  /* Fokus-Ring — Akzentfarbe, sichtbar auf hell & dunkel */
  --focus-ring: 0 0 0 2px rgba(124,58,237,.55), 0 0 0 5px rgba(124,58,237,.18);
}

/* ── Skeleton Loader — content-aware, shimmer left→right at 135° ───────────── */

@keyframes pulsive-shimmer {
  0%   { transform: translateX(-150%); }
  100% { transform: translateX(150%); }
}

/* Base skeleton: any element gets the muted bg, overflow hidden */
.sk,
[data-sk] {
  position: relative;
  overflow: hidden;
  background: var(--card2);
  border-radius: var(--r-sm);
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}

/* The shimmer sweep — moves left to right, gradient at 135° */
.sk::after,
[data-sk]::after {
  content: '';
  position: absolute;
  inset: -50%;           /* oversized so 135° diagonal covers corners */
  background: linear-gradient(
    135deg,
    transparent          20%,
    rgba(255,255,255,.07) 50%,
    transparent          80%
  );
  animation: pulsive-shimmer 1.6s ease-in-out infinite;
  pointer-events: none;
}

/* ── Content-aware variants ────────────────────────────────────────────────── */

/* Single text line */
.sk-text {
  height: 14px;
  border-radius: 4px;
  display: block;
}
.sk-text.sm  { height: 11px; }
.sk-text.lg  { height: 18px; }

/* Heading / title */
.sk-title {
  height: 22px;
  border-radius: 5px;
  display: block;
}
.sk-title.lg { height: 30px; }

/* A paragraph block (stacked text lines) */
.sk-para {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sk-para .sk-text:last-child { width: 65%; }

/* Avatar / icon circle */
.sk-avatar {
  border-radius: 50% !important;
  flex-shrink: 0;
}
.sk-avatar.sm  { width: 28px; height: 28px; }
.sk-avatar.md  { width: 40px; height: 40px; }
.sk-avatar.lg  { width: 56px; height: 56px; }

/* Image / thumbnail */
.sk-img {
  border-radius: var(--r-sm);
  width: 100%;
}
.sk-img.sq  { aspect-ratio: 1 / 1; }
.sk-img.wr  { aspect-ratio: 16 / 9; }
.sk-img.th  { aspect-ratio: 16 / 9; height: 60px; }

/* Card */
.sk-card {
  border-radius: var(--r);
  background: var(--card);
  border: 1px solid var(--bd);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Inline badge / chip */
.sk-badge {
  height: 22px;
  width: 72px;
  border-radius: 99px;
  display: inline-block;
}

/* Button-shaped */
.sk-btn {
  height: 40px;
  border-radius: var(--r-sm);
  display: inline-block;
}
.sk-btn.sm { height: 32px; width: 80px; }
.sk-btn.md { height: 40px; width: 120px; }
.sk-btn.lg { height: 48px; width: 160px; }

/* Table row */
.sk-row {
  height: 48px;
  border-radius: 6px;
  margin-bottom: 4px;
}

/* Metric / stat number */
.sk-metric {
  height: 36px;
  width: 80px;
  border-radius: 6px;
  display: block;
}

/* ── Utility: hide real content during loading ─────────────────────────────── */
.loading-state .real-content { display: none; }
.loading-state .sk-content   { display: block; }
.sk-content                  { display: none; }

/* ── Brand button ──────────────────────────────────────────────────────────── */
/* Hover = leichte Elevation statt Opacity-Dimmen; Press = spürbares Absenken. */
.btn-brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 24px;
  border-radius: var(--r-sm);
  background: var(--gd);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  font-family: inherit;
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-pr);
  transition: transform var(--dur-1) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              filter var(--dur-1) var(--ease-out);
}
.btn-brand:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 28px rgba(124,58,237,.38);
  filter: brightness(1.06);
}
.btn-brand:active {
  transform: translateY(1px) scale(.98);
  box-shadow: 0 2px 10px rgba(124,58,237,.30);
  filter: brightness(.97);
  transition-duration: 60ms;
}
.btn-brand:focus-visible {
  outline: none;
  box-shadow: var(--shadow-pr), var(--focus-ring);
}

/* ── Brand input ───────────────────────────────────────────────────────────── */
/* Fokus = Border-Shift + weicher Akzent-Glow (animiert), Fehler analog in Rot. */
.inp {
  width: 100%;
  padding: 0 .85rem;
  height: 44px;
  background: var(--inp-bg);
  border: 1px solid var(--inp-bd);
  border-radius: var(--r-sm);
  color: var(--tx);
  font-size: .92rem;
  font-family: inherit;
  outline: none;
  transition: border-color var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}
.inp:hover:not(:focus) { border-color: var(--bdm); }
.inp:focus {
  border-color: var(--inp-focus);
  box-shadow: 0 0 0 3px rgba(124,58,237,.16);
}
.inp.error        { border-color: var(--err); }
.inp.error:focus  { box-shadow: 0 0 0 3px rgba(225,29,72,.16); }

/* ── Globale Fokus-Sichtbarkeit (Keyboard-Navigation) ─────────────────────── */
/* :focus-visible statt :focus — Maus-Klicks erzeugen keinen Ring. */
:where(a, button, [role="button"], [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-xs);
}

/* ── Reduced Motion — Animationen global auf Instant/Crossfade reduzieren ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}