/* ============================================================
   Kickdesk · iOS-26-Look "Liquid Glass" — Desktop-Overlay
   Wird NACH dash.css (und ggf. Seiten-<style>) eingebunden und
   zieht die Desktop-Shell in den Glas-Look mit — ohne Markup-
   Änderungen. Inhalte/Karten bleiben solide (Variante A "Matt").
   Benötigt: design/ios26-glass.css wird NICHT benötigt — dieses
   File ist eigenständig, nutzt nur Token aus dash.css.
   ============================================================ */

:root{
  --glass-bg:        color-mix(in srgb, var(--surface) 80%, transparent);
  --glass-bg-strong: color-mix(in srgb, var(--surface) 90%, transparent);
  --glass-blur:      16px;
  --glass-sat:       150%;
  --glass-edge:      rgba(255,255,255,0.60);
  --glass-line:      var(--line);
  --glass-shadow:    0 8px 32px rgba(15,31,20,0.12), 0 2px 8px rgba(15,31,20,0.06);
}
[data-theme="dark"]{
  --glass-edge:   rgba(255,255,255,0.14);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.4);
}
@media (prefers-reduced-transparency: reduce){
  :root{ --glass-bg:var(--surface); --glass-bg-strong:var(--surface); }
}
[data-transparenz="reduziert"]{ --glass-bg:var(--surface); --glass-bg-strong:var(--surface); }

/* Hintergrund-Wash — gibt dem Glas etwas zum Brechen */
html body{
  background:
    radial-gradient(90% 55% at 92% -6%, color-mix(in srgb, var(--brand) 6%, transparent), transparent 60%),
    radial-gradient(80% 45% at -8% 40%, color-mix(in srgb, var(--info) 4%, transparent), transparent 55%),
    var(--bg);
}

/* ---------- Sidebar: schwebendes Glas-Panel ----------
   Reale Klasse ist .kd-side (templates/_kd_desktop_shell.html), NICHT
   .side/.app wie im Mock-Referenzdokument (design/iOS26 Mannschaft
   Desktop.html hat seine eigenen, erfundenen Klassennamen). .kd-side ist
   auch der Off-Canvas-Drawer auf Mobile/Tablet (<=1024px, siehe app.css)
   -- das schwebende Panel gilt daher nur ab 1025px, sonst wuerde der
   Drawer ploetzlich eingerueckt statt randstaendig aufklappen.
   body.kd-layout-v2 reserviert padding-left:248px fuer die Sidebar; mit
   left/width wie unten bleibt rechts ein 12px-Spalt zum Content -- kein
   Layout-Umbau noetig. */
@media (min-width:1025px){
  body .kd-side{
    left:12px; top:12px; bottom:12px; width:224px;
    border:1px solid var(--glass-line);
    border-radius:24px;
    background:var(--glass-bg);
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
    backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
    box-shadow:inset 0 1px 0 var(--glass-edge), var(--glass-shadow);
  }
  /* RTL (Arabisch, rtl.css) spiegelt .kd-side auf right:0 -- ohne diese
     Gegenregel waere die schwebende Sidebar rechts randstaendig (0px
     Rand) statt wie im LTR-Fall symmetrisch eingerueckt. rtl.css laedt
     zwar NACH dieser Datei, hat mit `[dir="rtl"] .kd-side` aber niedrigere
     Spezifitaet als `[dir="rtl"] body .kd-side` hier -- gewinnt also so
     oder so unabhaengig von der Lade-Reihenfolge. */
  [dir="rtl"] body .kd-side{ left:auto; right:12px; }

  /* Bugfix 2026-07-09: lagen bis hierhin ausserhalb dieser Media-Query und
     ueberschrieben auf Mobil (<=1024px) mit hoeherer Spezifitaet
     (`body .kd-side__item`) die Karten-Liste des Off-Canvas-Drawers aus
     app.css (Pillenform statt Gruppen-Karten). Gehoeren wie der Rest
     dieses Blocks nur zum schwebenden Desktop-Glas-Panel. */
  body .kd-side__item{ border-radius:999px; }
  body .kd-side__item.is-active{
    background:color-mix(in srgb, var(--brand) 12%, transparent);
  }
}

/* ---------- Topbar: Glas-Leiste ----------
   Reale Klasse ist .kd-topbar (nicht .topbar), Icon-Buttons sind
   .kd-topbar__btn (nicht .iconbtn). .kd-topbar__search ist ein <button>
   mit inline style="background:transparent" (oeffnet ein Such-Overlay,
   kein echtes <input> mehr in _kd_desktop_shell.html) -- der liegt auf
   dem Glas-Topbar und braucht kein eigenes Glas-Overlay. */
body .kd-topbar{
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-bottom:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 var(--glass-edge);
}
body .kd-topbar__btn{ border-radius:50%; background:var(--glass-bg); }

/* ---------- Konzentrische Radien: Karten bleiben solide ----------
   .card ist die einzige sitebreite Karten-Klasse (app.css); die uebrigen
   Namen (.mob-card/.m-hero/.aw-termin/...) sind 1:1 aus dem Mobile-Mock
   uebernommen (siehe ios26-glass.css) und greifen nur, falls eine Seite
   sie irgendwann uebernimmt -- kosten nichts, wenn nicht. */
body .card, body .mob-card, body .m-hero, body .aw-termin, body .newban, body .alertcard{ border-radius:22px; }
body .m-kpi, body .kpi, body .quick, body .tool{ border-radius:20px; }
body .card__head{ border-bottom-color:var(--line); }

/* ---------- Controls: Pillen + Glas ---------- */
body .btn{ border-radius:999px; }
body .view-tog{ border-radius:999px; }
body .view-tog button{ min-height:38px; }

/* Tabs: Unterstrich → Glas-Segment.
   Reales Markup ist <div class="tabs" role="tablist"><button class="tab"
   aria-selected="true">...</button></div>, gescoped unter .kd-proto.kdt
   (kd-eltern.css) -- NICHT <a class="tabs">/<a class="on"> wie im Mock. */
body .kd-proto.kdt .tabs{ border-top:0; gap:4px; padding:4px; border-radius:999px; width:fit-content;
  background:var(--glass-bg); border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:inset 0 1px 0 var(--glass-edge); }
body .kd-proto.kdt .tab{ border-bottom:0; border-radius:999px; padding:9px 16px; }
body .kd-proto.kdt .tab[aria-selected="true"]{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm); }
[data-theme="dark"] body .kd-proto.kdt .tab[aria-selected="true"]{ background:#2A2A28; }