/* ═══════════════════════════════════════════════════
   NextPercent Hub — Shared Base Styles
   Geladen via <link rel="stylesheet" href="/hub.css?v=3">
   Modulspezifische Styles bleiben inline im jeweiligen HTML.
═══════════════════════════════════════════════════ */

/* Reset — identisch in allen Modulen */
*{margin:0;padding:0;box-sizing:border-box}

/* Font-Baseline — Poppins für alle Module.
   Module können Body-Rule weiter ergänzen (background, height, font-size etc.). */
body{font-family:'Poppins',sans-serif}

/* Design-Tokens — kanonische Namen.
   Module dürfen lokal überschreiben, aber nicht neue Farbwerte erfinden. */
:root{
  /* Dunkle Grün-Palette (Sidebar, dunkle Flächen) */
  --dark:#0a0f0d;
  --g-dark:#0a3526;
  --g-mid:#0F4C35;
  --g-accent:#1a6647;
  --g-bright:#3ddc84;
  --g-dim:rgba(61,220,132,.12);

  /* Flächen */
  --white:#fff;
  --off:#f7f9f8;
  --hv:#fafafa;

  /* Text */
  --text:#111827;
  --text-light:#374151;
  --gray:#6b7280;

  /* Rahmen */
  --border:#e8ebe9;           /* leicht grün-getönt statt kalt-grau — mehr Wärme */
  --border-strong:#d1d5db;    /* für stärkere Abgrenzungen */
  --border-dark:rgba(255,255,255,.08);

  /* Status-Farben (Base) */
  --amber:#f59e0b;
  --blue:#3b82f6;
  --red:#ef4444;
  --purple:#8b5cf6;

  /* ─── Semantic Badge/Chip-Tokens (Sprint 5) ───
     Für alle farbigen UI-Pillen. Jedes Set hat bg/fg/border.
     Damit sehen Badges überall konsistent aus und bleiben subtil —
     keine Pastel-Bastelfarben mehr. */
  --ok-bg:linear-gradient(180deg,rgba(61,220,132,.14),rgba(61,220,132,.08));
  --ok-fg:#0a6640;
  --ok-border:rgba(61,220,132,.3);

  --warn-bg:linear-gradient(180deg,rgba(245,158,11,.14),rgba(245,158,11,.08));
  --warn-fg:#92400e;
  --warn-border:rgba(245,158,11,.3);

  --err-bg:linear-gradient(180deg,rgba(239,68,68,.12),rgba(239,68,68,.07));
  --err-fg:#991b1b;
  --err-border:rgba(239,68,68,.3);

  --info-bg:linear-gradient(180deg,rgba(59,130,246,.12),rgba(59,130,246,.07));
  --info-fg:#1e40af;
  --info-border:rgba(59,130,246,.3);

  --purple-bg:linear-gradient(180deg,rgba(139,92,246,.12),rgba(139,92,246,.07));
  --purple-fg:#5b21b6;
  --purple-border:rgba(139,92,246,.3);

  --neutral-bg:linear-gradient(180deg,rgba(107,114,128,.08),rgba(107,114,128,.04));
  --neutral-fg:#374151;
  --neutral-border:rgba(107,114,128,.22);

  /* ─── Shadow-System (Sprint 5) ───
     Vier Stufen für Tiefe ohne Übertreibung. Stripe/Linear-inspiriert —
     feine Light-Source von oben, nie plakativ. */
  --shadow-xs:0 1px 2px rgba(17,24,39,.04);
  --shadow-sm:0 1px 3px rgba(17,24,39,.06),0 1px 2px rgba(17,24,39,.04);
  --shadow-md:0 4px 12px rgba(17,24,39,.06),0 2px 4px rgba(17,24,39,.04);
  --shadow-lg:0 10px 28px rgba(17,24,39,.08),0 4px 10px rgba(17,24,39,.05);
  --shadow-xl:0 20px 50px rgba(17,24,39,.12),0 8px 20px rgba(17,24,39,.06);

  /* Inner-Glow auf Grün-Accent (für Buttons, Focus-Rings) */
  --glow-g:0 0 0 3px rgba(61,220,132,.22);
  --glow-g-strong:0 4px 16px rgba(61,220,132,.32);

  /* ─── Motion-Tokens (Sprint 5) ───
     Konsistente Timings. Nutze diese Vars statt überall neue Zahlen. */
  --ease-out:cubic-bezier(.16,1,.3,1);        /* sehr sanftes ease-out (quart) */
  --ease-spring:cubic-bezier(.34,1.56,.64,1);  /* leichter Spring-Bounce */
  --ease-in-out:cubic-bezier(.65,0,.35,1);    /* symmetrisch */
  --dur-fast:120ms;
  --dur-med:220ms;
  --dur-slow:420ms;

  /* ─── Glass-Effect-Tokens (Sprint 5) ───
     Für Modals, Sticky-Headers, schwebende Panels. iOS/macOS-Frosted-Feel. */
  --glass-bg:rgba(255,255,255,.72);
  --glass-bg-dark:rgba(10,15,13,.72);
  --glass-blur:saturate(180%) blur(18px);
  --glass-border:rgba(255,255,255,.55);

  /* ─── Alias-Set für Altcode (index.html, freelancer-hub.html) ───
     Wird von applyTheme() in index.html auch per JS gesetzt;
     hier als statischer Fallback damit Seiten ohne applyTheme() funktionieren. */
  --ac:var(--g-bright);
  --at:var(--text);
  --bg:var(--off);
  --bg2:var(--white);
  --bd:var(--border);
  --bs:var(--border);
  --ib:var(--off);
  --hv2:var(--hv);
  --lb:var(--gray);
  --tx:var(--text);
  --ts:var(--text-light);
  --tm:var(--gray);
  --w:var(--amber);
  --d:var(--red);
}

/* ─── Button-Varianten (Sprint 5 — Stripe-inspired) ───
   Basis (.btn) bleibt pro Modul inline, weil Groessen variieren.
   Alle Buttons haben jetzt subtile Shadow + Hover-Lift + Glow auf Focus.
   Transition nutzt die zentralen Motion-Tokens. */
.btn{transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.btn:active{transform:translateY(0)!important}

.btn-primary{background:var(--g-bright);color:var(--dark);box-shadow:var(--shadow-xs),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-primary:hover{background:#4fe596;transform:translateY(-1px);box-shadow:var(--shadow-sm),var(--glow-g-strong),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-primary:focus-visible{outline:none;box-shadow:var(--glow-g),inset 0 1px 0 rgba(255,255,255,.35)}

.btn-ghost{background:#fff;border:1px solid var(--border);color:var(--text-light);box-shadow:var(--shadow-xs)}
.btn-ghost:hover{border-color:var(--border-strong);color:var(--text);background:#fff;transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.btn-ghost:focus-visible{outline:none;border-color:var(--g-bright);box-shadow:var(--glow-g)}

.btn-danger{background:var(--err-bg);color:var(--err-fg);border:1px solid var(--err-border);box-shadow:var(--shadow-xs)}
.btn-danger:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm),0 4px 12px rgba(239,68,68,.15)}

.btn-dark{background:var(--g-dark);color:#fff;box-shadow:var(--shadow-xs),inset 0 1px 0 rgba(255,255,255,.08)}
.btn-dark:hover{background:var(--g-mid);transform:translateY(-1px);box-shadow:var(--shadow-md),inset 0 1px 0 rgba(255,255,255,.1)}

/* ─── Badge-Standards (Sprint 5) ───
   Alle farbigen Pillen/Chips sollten diese Klassen nutzen statt
   Inline-Style. Subtile Gradient + Border + feiner Shadow = premium,
   nicht mehr flach-pastellig. Base-Class (.badge) kann pro Modul
   inline erweitert werden (Padding, Font-Size), wichtig sind die
   Farb-Varianten. */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;font-size:10px;font-weight:600;letter-spacing:.02em;border-radius:100px;white-space:nowrap;line-height:1.4;border:1px solid transparent;transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.badge-ok{background:var(--ok-bg);color:var(--ok-fg);border-color:var(--ok-border);box-shadow:var(--shadow-xs)}
.badge-warn{background:var(--warn-bg);color:var(--warn-fg);border-color:var(--warn-border);box-shadow:var(--shadow-xs)}
.badge-err{background:var(--err-bg);color:var(--err-fg);border-color:var(--err-border);box-shadow:var(--shadow-xs)}
.badge-info{background:var(--info-bg);color:var(--info-fg);border-color:var(--info-border);box-shadow:var(--shadow-xs)}
.badge-purple{background:var(--purple-bg);color:var(--purple-fg);border-color:var(--purple-border);box-shadow:var(--shadow-xs)}
.badge-neutral{background:var(--neutral-bg);color:var(--neutral-fg);border-color:var(--neutral-border);box-shadow:var(--shadow-xs)}

/* ─── Glass-Backdrop (Sprint 5) ───
   Modal-Overlays bekommen ein frosted-glass Gefühl statt plattem grauen
   Layer. iOS/macOS-Standard. */
.glass{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border)}

/* Overlay-Klassen die durch hub.css bekannt sind bekommen automatisch
   den Backdrop-Blur-Effekt. Modul-spezifische Overlay-Farben (rgba black)
   werden subtiler — Blur übernimmt die visuelle Trennung. */
.cm-overlay,.modal-overlay,.create-overlay,.project-overlay,.del-ov,.mo-overlay{
  background:rgba(10,15,13,.28)!important;
  backdrop-filter:saturate(140%) blur(6px);
  -webkit-backdrop-filter:saturate(140%) blur(6px);
}

/* ─── Card-Basis mit Elevation (Sprint 5) ───
   Jedes Modul kann .card-elev einsetzen für einheitliche Kachel-Optik.
   Bestehende module-specific Styles bleiben unberührt. */
.card-elev{background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-sm);transition:transform var(--dur-med) var(--ease-out),box-shadow var(--dur-med) var(--ease-out)}
.card-elev:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* Page-Load-Fade-In wurde Sprint 5c wieder entfernt — auf Modulen mit
   zweiphasigem Render (Cache-Hydrate → Cloud-Refresh) gab's ein
   sichtbares Doppel-Animation-Wackeln. Der erste Fade lief, dann kam
   innerHTML-Replace → zweiter Fade. Nicht mehr schön. */

/* ─── Skeleton-Loading-States (Sprint 6a) ───
   Statt "Laden..."-Text bekommen Module beim Initial-Load ein
   Skeleton-Gerüst — hebt gefühlte Performance, verhindert Layout-Shift.
   Usage: <div class="sk sk-card"></div> / <div class="sk sk-line"></div>
   Shimmer-Animation wandert smooth von links nach rechts. */
.sk{
  position:relative;
  background:linear-gradient(90deg,#eef1ef 0%,#f7f9f8 40%,#eef1ef 100%);
  background-size:200% 100%;
  border-radius:6px;
  animation:sk-shimmer 1.6s ease-in-out infinite;
}
.sk-line{height:12px;margin-bottom:8px}
.sk-line-sm{height:9px;width:60%}
.sk-line-lg{height:18px;width:40%;margin-bottom:12px}
.sk-card{height:90px;border-radius:12px;margin-bottom:10px}
.sk-card-sm{height:60px;border-radius:10px;margin-bottom:8px}
.sk-card-lg{height:140px;border-radius:14px;margin-bottom:14px}
.sk-circle{border-radius:50%}
.sk-row{display:flex;align-items:center;gap:12px;padding:10px 0}
.sk-row .sk-circle{width:32px;height:32px;flex-shrink:0}
.sk-row .sk-content{flex:1;display:flex;flex-direction:column;gap:6px}
@keyframes sk-shimmer{
  0%{background-position:200% 50%}
  100%{background-position:-200% 50%}
}

/* Reduziere Motion für User die es so eingestellt haben */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
  }
}

/* ─── Globale Mobile-Guards ───
   Greift überall — verhindert dass Form-Inputs und Überschriften aus
   dem Viewport schießen. In Modals spielt iOS/Safari sonst verrückt
   wenn der Zoom reinzoomt wegen font-size<16px.
*/
html{-webkit-text-size-adjust:100%}
input,select,textarea{box-sizing:border-box;max-width:100%;min-width:0}
/* iOS: font-size <16px triggert Autozoom beim Fokus — auf 16px
   aufrunden bei kleineren Screens. */
@media (max-width:768px){
  input[type=text],input[type=email],input[type=url],input[type=number],
  input[type=date],input[type=datetime-local],input[type=tel],input[type=search],
  input[type=password],select,textarea{font-size:16px!important}
}

/* Body-Scroll-Lock Helfer: wenn ein Overlay offen ist, setzt das JS
   body.np-lock — dann ist Scroll im Hintergrund blockiert und der
   Dialog kann selbst scrollen. Module können sich darauf verlassen. */
body.np-lock{overflow:hidden!important;touch-action:none;position:fixed;inset:0;width:100%}
body.np-lock .main,body.np-lock .content,body.np-lock .home{overflow:hidden!important}

/* Automatisches Body-Scroll-Lock via :has() — greift wenn eines der
   bekannten Overlay-Elemente sichtbar im DOM ist. Modul-Code muss
   dann nicht mehr manuell lock/unlock aufrufen. iOS 15.4+ / Chrome
   105+ (sehr breit verbreitet). */
body:has(.cm-overlay.open),
body:has(.create-overlay),
body:has(.project-overlay),
body:has(.modal-overlay.active),
body:has(.del-ov),
body:has(.fn-targets-modal),
body:has(.mo-overlay.open),
body:has(#overlay.active),
body:has(.ov),
body:has(#edit-overlay.open){
  overflow:hidden!important;touch-action:none
}

/* Standard-Overlays werden selbst scrollbar gemacht (damit der Content
   nicht aus dem Viewport fällt). Greift für alle bekannten Overlay-
   Klassen im Hub — wenn ein Modul einen eigenen Namen nutzt, inline
   überschreiben. */
.modal-overlay,.cm-overlay,.ov,.create-overlay,.pm-overlay,.del-ov,.fn-targets-modal,.mo-overlay{
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
/* Modal-Content hat max-height und eigenen Scroll-Kontext, damit der
   Button-Footer sichtbar bleibt auch wenn der Body lang ist. */
.cm-modal,.create-modal,.pm-panel,.del-box,.sp,.fn-targets-box{
  max-height:calc(100dvh - 40px);max-height:calc(100vh - 40px);
}
@media (max-width:768px){
  .cm-modal,.create-modal,.pm-panel,.fn-targets-box{
    max-height:100dvh;max-height:100vh;border-radius:0!important
  }
}