/* ──────────────────────────────────────────────────────────────────────────
   Prown Agency CRM — gemeinsame Oberfläche für Dashboard und Chatter-Portal.
   Eine Quelle für Farben, Maße, Komponenten und Zustände. Beide Seiten binden
   diese Datei ALS LETZTES ein, damit sie die alten Inline-Stile überschreibt.

   Aufbau:  1 Tokens · 2 Grundlagen · 3 Hintergrund · 4 Flächen · 5 Bedienung
            6 Daten · 7 Zustände · 8 Überlagerungen · 9 Breiten
   ────────────────────────────────────────────────────────────────────────── */

/* ── 1 Tokens ───────────────────────────────────────────────────────────── */
:root{
  /* Flächen: fast schwarz, Karten sind Glas darüber */
  --bg:#050506; --bg-deep:#020203; --bg-2:#0a0a0c;
  --card:rgba(255,255,255,.045); --card-2:rgba(255,255,255,.075);
  --surface:rgba(255,255,255,.05); --surface-2:rgba(255,255,255,.085);
  --solid:rgba(12,12,16,.94); --solid-2:rgba(16,16,21,.96);
  /* Linien */
  --hair:rgba(255,255,255,.06); --hair-2:rgba(255,255,255,.10);
  --border:rgba(255,255,255,.07); --border-2:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.16);
  /* Schrift */
  --text:#EDEDEF; --text-2:#C7C7CF; --muted:#9AA0AA; --faint:#8A8F99; --on-accent:#fff;
  /* Akzent: trägt jede Aktion, nie eine Bedeutung über Daten */
  --accent:#5E6AD2; --accent2:#6872D9; --accent-press:#4F5BC4;
  /* Indigo als SCHRIFT auf dunklem Grund: der Flaechenton faellt als Text
     unter die Lesbarkeitsgrenze (3,8:1), diese Stufe liegt bei 6:1 */
  --accent-ink:#868FE4; --accent-ink-2:#949CE8;
  --accent-soft:rgba(94,106,210,.12); --accent-soft-2:rgba(94,106,210,.18);
  --glow:rgba(94,106,210,.35); --ring:rgba(94,106,210,.60);
  /* Ampel: reserviert für Zustände, nie als Akzent */
  --success:#3FCF8E; --warn:#F5B544; --danger:#FF6A6A; --info:#5AA9FF; --idle:#8493AB;
  --success-soft:rgba(63,207,142,.14); --warn-soft:rgba(245,181,68,.15);
  --danger-soft:rgba(255,106,106,.13); --info-soft:rgba(90,169,255,.14);
  /* Schrift-Familien: Geist zeichnet aus, Inter trägt die Zahlen, Mono die Kennungen */
  --display:'Geist','Inter',-apple-system,'Segoe UI',sans-serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* Maße: 4er-Raster */
  --s-4:4px; --s-8:8px; --s-12:12px; --s-16:16px; --s-20:20px; --s-24:24px; --s-32:32px; --s-48:48px;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  /* Tiefe */
  --sh-card:0 0 0 1px rgba(255,255,255,.06),0 2px 20px rgba(0,0,0,.4),0 0 40px rgba(0,0,0,.2);
  --sh-card-hi:0 0 0 1px rgba(255,255,255,.10),0 8px 40px rgba(0,0,0,.5),0 0 80px rgba(94,106,210,.10);
  --sh-accent:0 0 0 1px rgba(94,106,210,.5),0 4px 12px rgba(94,106,210,.3),inset 0 1px 0 0 rgba(255,255,255,.2);
  --sh-inner:inset 0 1px 0 0 rgba(255,255,255,.10);
  --sh-over:0 32px 80px -24px #01030a;
  /* Bewegung */
  --ease:cubic-bezier(.16,1,.3,1); --t-fast:.2s var(--ease); --t:.3s var(--ease);
  color-scheme:dark;
}

/* ── 2 Grundlagen ───────────────────────────────────────────────────────── */
body{background:radial-gradient(ellipse at top,#0a0a0f 0%,#050506 50%,#020203 100%);
  background-attachment:fixed;color:var(--text);font-family:var(--sans)}
h1,h2,h3,.ui-h1,.ui-h2,.ui-h3,.card-title,.ch-title{font-family:var(--display);letter-spacing:-.02em;text-wrap:balance}
.ui-eyebrow,.ui-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ui-num,.mono,[data-num]{font-family:var(--sans);font-variant-numeric:tabular-nums}
::selection{background:var(--accent-soft-2);color:#fff}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:6px}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10);border-radius:var(--r-pill);
  border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.18);background-clip:padding-box}
*::-webkit-scrollbar-track{background:transparent}

/* ── 3 Hintergrund: vier Schichten, ohne Inhalt zu stören ───────────────── */
.ui-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ui-bg i{position:absolute;border-radius:50%;display:block}
.ui-bg .b1{top:-420px;left:50%;margin-left:-450px;width:900px;height:1200px;filter:blur(140px);
  background:radial-gradient(closest-side,rgba(94,106,210,.22),transparent 70%);animation:uiFloat 9s var(--ease) infinite}
.ui-bg .b2{top:16%;left:-220px;width:600px;height:800px;filter:blur(120px);
  background:radial-gradient(closest-side,rgba(140,94,210,.13),transparent 70%);animation:uiFloat 10s var(--ease) infinite .6s}
.ui-bg .b3{top:46%;right:-180px;width:500px;height:700px;filter:blur(110px);
  background:radial-gradient(closest-side,rgba(60,110,220,.11),transparent 70%);animation:uiFloat 8s var(--ease) infinite .3s}
.ui-bg .grid{position:absolute;inset:0;border-radius:0;opacity:.02;
  background-image:linear-gradient(rgba(255,255,255,.75) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.75) 1px,transparent 1px);background-size:64px 64px}
.ui-bg .noise{position:absolute;inset:0;border-radius:0;opacity:.015;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes uiFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-20px) rotate(1deg)}}

/* ── 4 Flächen: Karten, Nester, Kopfzeilen ──────────────────────────────── */
.ui-card,.card,.kpi-card,.tm-dcard,.ov-hero,.ch-card,.rv-card,.payout-card,.coach-box,.inc-kpi{
  position:relative;
  /* dichter Grund statt Milchglas: gleicher Eindruck, keine Unschaerfe pro Bild */
  background:linear-gradient(to bottom,rgba(255,255,255,.07),rgba(255,255,255,.018)),rgba(11,11,15,.88);
  border:1px solid var(--hair-2);border-radius:var(--r-lg);box-shadow:var(--sh-card);
  transition:box-shadow var(--t),border-color var(--t)}
.ui-card:hover,.card:hover,.kpi-card:hover,.tm-dcard:hover,.ch-card:hover{
  box-shadow:var(--sh-card-hi);border-color:var(--hair-2)}
.ui-card::after,.card::after,.kpi-card::after,.ch-card::after{content:'';position:absolute;inset:0 0 auto;height:1px;
  border-radius:var(--r-lg) var(--r-lg) 0 0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent)}
.card .card,.ui-card .ui-card,.card .kpi,.ui-card .ui-kpi,.card .kpi-card,.ov-hero .card{
  background:rgba(255,255,255,.04);backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:none;border-color:var(--border)}
.ui-head,.sec-head,.tm-dhead,.ch-head{background:var(--solid-2);backdrop-filter:blur(12px)}

/* ── 5 Bedienung: Knöpfe, Felder, Reiter, Pillen ────────────────────────── */
.ui-btn,.btn,.btn-sm,.btn-lg{font-family:var(--sans);border-radius:var(--r-sm);cursor:pointer;min-height:32px;
  transition:background var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast)}
a.btn,a.btn-sm,label.btn,label.btn-sm{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.ui-btn:active,.btn:active,.btn-sm:active,.btn-lg:active{transform:scale(.98)}
.ui-btn--primary,.btn-primary,.btn.primary{background:var(--accent);border-color:transparent;color:var(--on-accent);
  box-shadow:var(--sh-accent)}
.ui-btn--primary:hover,.btn-primary:hover:not(:disabled){background:var(--accent2)}
.ui-btn--ghost,.btn-secondary{background:var(--surface);border:1px solid var(--border-2);color:var(--text);
  box-shadow:var(--sh-inner)}
.ui-btn--ghost:hover,.btn-secondary:hover{background:var(--surface-2)}
.ui-btn:disabled,.btn:disabled,button:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.ui-field,.fld,input,select,textarea{background:rgba(255,255,255,.04);border:1px solid var(--border-2);
  border-radius:var(--r-sm);color:var(--text);font-family:var(--sans)}
.ui-field:focus,.fld:focus,input:focus,select:focus,textarea:focus{border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(94,106,210,.22);outline:none}
select{appearance:none;-webkit-appearance:none;padding-right:30px;
  background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.55) 50%),
                   linear-gradient(135deg,rgba(255,255,255,.55) 50%,transparent 50%);
  background-position:calc(100% - 17px) 55%,calc(100% - 11px) 55%;background-size:6px 6px;background-repeat:no-repeat}
select option{background:#0b0b10;color:var(--text)}
input[type=range]{-webkit-appearance:none;appearance:none;height:6px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.10);outline:none;border:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--accent);border:2px solid #0b0b10;margin-top:-5px;
  box-shadow:0 0 0 1px rgba(94,106,210,.5),0 2px 10px rgba(94,106,210,.45)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border:2px solid #0b0b10;border-radius:50%;background:var(--accent)}
.ui-pill,.pill,.badge,.chip,.tag{display:inline-flex;align-items:center;gap:var(--s-4);border-radius:var(--r-pill);
  border:1px solid var(--border-2);padding:3px 10px;font-size:11px;font-weight:600;line-height:1.5}
.ui-pill i,.pill i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.ui-pill--ok{color:var(--success);background:var(--success-soft);border-color:transparent}
.ui-pill--warn{color:var(--warn);background:var(--warn-soft);border-color:transparent}
.ui-pill--bad{color:var(--danger);background:var(--danger-soft);border-color:transparent}
.ui-pill--live{color:var(--info);background:var(--info-soft);border-color:transparent}
.ui-pill--idle{color:var(--idle);background:rgba(132,147,171,.14);border-color:transparent}
.ui-tabs{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r-md);border:1px solid var(--hair);
  background:rgba(255,255,255,.03)}
.ui-tabs button{font:inherit;font-size:12px;font-weight:600;color:var(--muted);background:none;border:0;cursor:pointer;
  padding:6px 13px;border-radius:9px;transition:color var(--t-fast),background var(--t-fast)}
.ui-tabs button:hover{color:var(--text)}
.ui-tabs button[aria-pressed="true"],.ui-tabs button.active{background:var(--surface-2);color:var(--text);box-shadow:var(--sh-inner)}

/* ── 6 Daten: Tabellen, Kennzahlen, Verläufe ────────────────────────────── */
table{border-collapse:collapse;width:100%}
th{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  font-weight:400;text-align:left;padding:0 0 var(--s-8);border-bottom:1px solid var(--hair-2);white-space:nowrap}
td{padding:var(--s-8) 0;border-top:1px solid rgba(255,255,255,.055);font-variant-numeric:tabular-nums}
tbody tr{transition:background var(--t-fast)}
tbody tr:hover>td{background:rgba(255,255,255,.035)}
.ui-num--neg{color:var(--danger)}
.ui-kpi,.kpi{background:linear-gradient(to bottom,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--hair);border-radius:var(--r-lg);padding:var(--s-16)}
.ui-kpi .k,.kpi .l{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ui-kpi .v,.kpi .v{font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:24px;font-weight:600;
  letter-spacing:-.02em;margin-top:var(--s-4);color:var(--accent2)}
.ui-kpi .v--plain{color:var(--text)} .ui-kpi .v--bad,.kpi .v.bad{color:var(--danger)}

/* ── 7 Zustände: laden, leer, Fehler, langer Text ───────────────────────── */
.ui-skel{background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.10),rgba(255,255,255,.05));
  background-size:200% 100%;border-radius:var(--r-sm);animation:uiShim 1.4s linear infinite;min-height:12px}
@keyframes uiShim{0%{background-position:200% 0}100%{background-position:-200% 0}}
.ui-skel--line{height:12px;margin:6px 0} .ui-skel--val{height:28px;width:120px} .ui-skel--row{height:32px;margin:6px 0}
.ui-empty{border:1px dashed var(--border-2);border-radius:var(--r-md);padding:var(--s-24);text-align:center}
.ui-empty h4{font-family:var(--display);font-size:15px;margin:0 0 4px}
.ui-empty p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.5}
.ui-empty .ui-btn{margin-top:var(--s-12)}
.ui-empty--good h4{color:var(--success)}
.ui-error{border:1px solid rgba(255,106,106,.3);background:var(--danger-soft);border-radius:var(--r-md);
  padding:var(--s-12) var(--s-16);display:flex;gap:var(--s-12);align-items:flex-start}
.ui-error b{color:var(--danger);font-weight:600}
.ui-error p{margin:2px 0 0;color:var(--text-2);font-size:12.5px}
.ui-trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ui-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ui-id{font-family:var(--mono);font-size:11.5px;color:var(--muted);cursor:copy}
.ui-id:hover{color:var(--text)}
.ui-note{display:flex;gap:var(--s-8);align-items:flex-start;font-size:12.5px;color:var(--text-2);line-height:1.5;margin-top:var(--s-8)}
.ui-note i{width:5px;height:5px;border-radius:50%;background:var(--muted);margin-top:7px;flex:none}
.ui-note--bad i{background:var(--danger)} .ui-note--warn i{background:var(--warn)} .ui-note--ok i{background:var(--success)}

/* ── 8 Überlagerungen: was den Hintergrund verdecken muss ───────────────── */
.ui-scrim,.pr-modal{position:fixed;inset:0;background:rgba(2,5,12,.8);backdrop-filter:blur(6px);z-index:60}
.ui-sheet,.pr-modal-box,.rt-overlay,#ch-drawer,.modal,.popover,.dropdown,.menu,.tip,.tooltip,.toast{
  background:var(--solid);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border-2);border-radius:var(--r-lg);box-shadow:var(--sh-over)}
.ui-drawer{position:fixed;top:0;right:0;bottom:0;width:min(480px,100%);z-index:61;
  background:var(--solid);border-left:1px solid var(--border-2);box-shadow:-24px 0 60px -24px #01030a}
.ui-drawer--wide{width:min(720px,100%)}
#menu,#sidebar,.sidebar,#ch-drawer{background:linear-gradient(to bottom,rgba(10,10,12,.96),rgba(6,6,8,.96));
  border-right:1px solid var(--hair)}

/* Anmeldung: füllt den Bildschirm und lässt den Hintergrund durch, sonst entsteht
   auf halber Höhe eine harte Kante zwischen Deckfläche und Raster. */
#login-screen,#login{min-height:100dvh;min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:transparent!important;position:relative;z-index:2;padding:var(--s-24)}
.login-card,#login .login-card{width:min(380px,100%);background:linear-gradient(to bottom,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--sh-card);padding:var(--s-32) var(--s-24)}
.ui-bg .grid,#fx-grid{opacity:.016}

/* ── 9 Breiten: Handy zuerst ────────────────────────────────────────────── */
.ui-grid{display:grid;gap:var(--s-16);grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){.ui-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ui-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.ui-grid--bento{grid-template-columns:repeat(6,minmax(0,1fr))}
  .ui-span-2{grid-column:span 2}.ui-span-3{grid-column:span 3}.ui-span-4{grid-column:span 4}.ui-span-6{grid-column:span 6}}
.ui-scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:720px){
  .ui-stack-sm{grid-template-columns:minmax(0,1fr)!important}
  .ui-card,.card,.ch-card{border-radius:var(--r-md);padding:var(--s-16)}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  .ui-skel{background:rgba(255,255,255,.07)}
}

/* ── 10 Nachbesserungen aus der Abnahme (Messung: data/reels/ui_audit.py) ── */
/* Eingabefelder waren teils Vollton und standen tot in der Glasflaeche */
textarea,input[type=text],input[type=number],input[type=password],input[type=search],input[type=date],select{
  background:rgba(255,255,255,.04);border:1px solid var(--border-2);border-radius:var(--r-sm);color:var(--text)}
textarea::placeholder,input::placeholder{color:var(--faint)}
/* Anklickbare Zeilen brauchen eine anfassbare Hoehe, 18px sind keine */
.voice-test-btn,.vt-row,.set-row a,.set-row button{min-height:32px}
/* Breite Tabellen rollen in ihrer Flaeche, statt die Seite zu schieben */
.fin-pane,.tbl-wrap,.ui-tablewrap{overflow-x:auto}
/* Volle Breite beim Ueberfahren: der negative Rand schob die Zeile 6px aus der Karte */
.ovacc{margin-left:0;margin-right:0}

/* Zeitraum-Schalter waren 30px hoch — auf dem Handy zu klein zum Treffen */
.inc-tf button,.seg button,.ui-seg button,.tf-row button{min-height:32px}

/* Handy: breite Streifen rollen in sich, grosse Zahlen brechen statt zu ragen */
@media (max-width:640px){
  .pat-hours-strip,.pat-plan,.pat-pies,.tm-timeline,.ovacc-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .kpi-card .v,.inc-kpi .v,.fin-kpi .v{font-size:clamp(17px,6.2vw,26px);overflow-wrap:anywhere}
}

/* Handy, zweiter Durchgang: Tabellen rollen in ihrer Huelle, grosse Zahlen
   werden kleiner statt aus der Karte zu ragen. */
@media (max-width:640px){
  div:has(> table){overflow-x:auto}
  .v,.fin-sum-i .v,.tm-sum-i .v,.inc-kpi .v{font-size:clamp(16px,5.4vw,24px);letter-spacing:-.025em;min-width:0}
}

/* Symbol-Knoepfe (Loeschen, Schliessen) waren 26px — zu klein zum sicheren Treffen */
.ic-btn,.cd-x,.ps-x,.chip-x{min-width:30px;min-height:30px;display:inline-flex;align-items:center;justify-content:center}

/* ── 11 Gemeinsame Bausteine der Shell ───────────────────────────────── */
/* Icons: ein Satz, eine Strichstärke, Farbe vom umgebenden Text */
.ic{width:1.15em;height:1.15em;flex-shrink:0;display:inline-block;vertical-align:-.2em;color:inherit}
.ic--lg{width:20px;height:20px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
kbd{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;
  font:600 10.5px/1 var(--mono);color:var(--text-2);background:rgba(255,255,255,.06);
  border:1px solid var(--border-2);border-bottom-width:2px;border-radius:5px}

/* Licht pro Fläche: sitzt dort, wo die Maus auf DIESER Karte steht */
.card,.inc-kpi,.ov-hero,.tm-tile,.cc-panel,.cc-act,.ch-card,.kpi-card{--mx:-400px;--my:-400px}
.card::before,.inc-kpi::before,.ov-hero::before,.tm-tile::before,.cc-panel::before,.cc-act::before,.kpi-card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:0;
  background:radial-gradient(340px circle at var(--mx) var(--my),rgba(124,135,232,.085),transparent 62%);
  transition:opacity .28s var(--ease)}
.is-lit::before{opacity:1}
.is-lit{border-color:var(--border-2)!important}
.ui-nolight .is-lit::before{opacity:0}

/* Ruhe-Modus: System-Wunsch ODER eigener Schalter — gleiche Wirkung */
.ui-calm *,.ui-calm *::before,.ui-calm *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
  transition-duration:.001ms!important;scroll-behavior:auto!important}
.ui-calm .fx-orb,.ui-calm .fx-aurora{animation:none!important}

/* System-Wunsch "weniger Bewegung" wirkt wie der eigene Ruhe-Schalter */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}