/* ============================================================================
 * head.css — Design-Tokens + App-Shell-Styling (aus index.html ausgelagert).
 * ----------------------------------------------------------------------------
 * Native CSS-Nesting (iOS 16.5+). Descendant-Selektoren als `& x`, compound/
 * Pseudo als `&:hover` / `&.active` — beides gültig in strikter UND relaxter
 * Nesting-Syntax, damit auch alte 16.5-WebKit nicht stolpert.
 * Modul-Styles werden ans Ende injiziert (Marker `@inject:styles`).
 * ========================================================================== */

/* ========================= Design-Tokens ================================= */
/* Basisfarbe der App: #256394 (Fenster Schlager). Neutrals sind kühles Grau —
 * die Referenz-Oberfläche ist weiß/grau, nicht beige. Status-Tokens (--st-*)
 * gelten für beide Themes gleich: sie sind Signalfarben, keine Flächenfarben. */
:root, :root[data-theme="light"] {
  --bg:#f7f8fa; --surface:#ffffff; --surface-2:#f1f3f6;
  --line:#e3e6ea; --text:#12151a; --muted:#6b7280;
  --accent:#256394; --accent-ink:#ffffff;
  --accent-soft:color-mix(in srgb, var(--accent) 10%, var(--surface));
  --panel:#12151a; --panel-ink:#f1f3f6; --panel-line:#2a333c;
  --radius:16px; --radius-sm:10px;
  --font: system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --nav-h:64px; --top-h:56px;

  --st-unbearbeitet:#3b82f6;
  --st-nicht_erreicht:#8b5cf6;
  --st-in_kontakt:#f59e0b;
  --st-vorstellungsgespraech:#10b981;
  --st-absage:#ef4444;
  --st-eingestellt:#0d9488;
  --st-evidenz:#9ca3af;
}
:root[data-theme="dark"] {
  --bg:#0f1418; --surface:#171d23; --surface-2:#1f262e;
  --line:#2a333c; --text:#e8edf2; --muted:#8b96a3;
  --accent:#5b9fd4; --accent-ink:#08131d;
  --accent-soft:color-mix(in srgb, var(--accent) 18%, var(--surface));
  --panel:#e8edf2; --panel-ink:#12151a; --panel-line:#c2cbd4;
}
*, *::before, *::after {
  box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;
  transition: background-color .2s, border-color .2s, color .15s;
}
html, body { height:100%; }
body {
  background:var(--bg); color:var(--text); font-family:var(--font); font-size:16px; line-height:1.6;
  padding-top:calc(var(--top-h) + env(safe-area-inset-top,0px));
  /* +20px Luft, damit die letzte Karte nicht bündig an der Bottom-Nav klebt. */
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 20px);
}

/* ========================= Topbar ======================================= */
app-topbar {
  position:fixed; top:0; left:0; right:0; z-index:30; display:flex; align-items:center; gap:10px;
  height:calc(var(--top-h) + env(safe-area-inset-top,0px)); padding:env(safe-area-inset-top,0px) 16px 0;
  background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar-title { font-weight:700; font-size:18px; letter-spacing:-.01em; margin-right:auto; }
.icon-btn {
  display:grid; place-items:center; width:38px; height:38px; border-radius:11px;
  border:1px solid var(--line); background:var(--surface); color:var(--text); font-size:17px; cursor:pointer;
  &:active { transform:scale(.94); }
}

/* ========================= Content ====================================== */
main { max-width:720px; margin:0 auto; padding:18px 16px 32px; }
.view {
  display:flex; flex-direction:column; gap:14px;
  &[hidden] { display:none; }  /* sonst überschreibt display:flex das hidden-Attribut */
}
.card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px;
  & h2 { font-size:15px; font-weight:700; margin-bottom:6px; }
  & p { color:var(--muted); font-size:14px; }
}
.row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.count { font-size:34px; font-weight:800; letter-spacing:-.02em; min-width:2ch; text-align:center; }
/* Alle Text-artigen Felder einheitlich (nicht nur type=text). */
input[type=text], input[type=email], input[type=password], input[type=search],
input[type=number], input[type=tel], input[type=url], input[type=date],
textarea, select {
  flex:1; min-width:0; width:100%; background:var(--surface-2); border:1px solid var(--line);
  border-radius:12px; padding:11px 13px; color:var(--text); font:inherit; font-size:15px;
  appearance:none; -webkit-appearance:none;
  &:focus { outline:none; border-color:var(--accent); }
}
textarea { resize:vertical; min-height:80px; line-height:1.5; }
/* appearance:none nimmt dem Select den nativen Pfeil — ohne Ersatz sieht es aus
 * wie ein Textfeld. Chevron aus zwei Gradienten statt SVG, damit er currentColor
 * folgt (ein background-image-SVG kann das nicht). */
select {
  cursor:pointer; padding-right:34px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
input[type=file] {
  font-size:13px; color:var(--muted); max-width:100%;
  &::file-selector-button {
    margin-right:10px; padding:8px 12px; border-radius:10px; border:1px solid var(--line);
    background:var(--surface); color:var(--text); font:inherit; font-size:13px; cursor:pointer;
  }
}
.list { display:flex; flex-direction:column; gap:8px; }
.item {
  display:flex; align-items:center; gap:10px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:12px; padding:11px 13px;
  & .txt { flex:1; font-size:14.5px; }
  & .del { border:none; background:none; color:var(--muted); font-size:18px; cursor:pointer; }
}
.empty { color:var(--muted); font-size:14px; text-align:center; padding:18px 0; }

/* Buttons */
.btn-accent {
  display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px;
  border-radius:14px; border:none; background:var(--accent); color:var(--accent-ink);
  font-weight:700; font-size:14.5px; cursor:pointer;
  &:active { transform:scale(.98); }
}
.btn-ghost {
  padding:11px 15px; border-radius:12px; border:1px solid var(--line); background:var(--surface);
  color:var(--text); font-weight:600; font-size:13.5px; cursor:pointer;
}
.add-btn {
  width:44px; height:44px; border-radius:12px; border:none; background:var(--accent);
  color:var(--accent-ink); font-size:22px; cursor:pointer;
}

/* ========================= Bottom-Nav =================================== */
app-bottom-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:30; display:flex;
  height:calc(var(--nav-h) + env(safe-area-inset-bottom,0px)); padding-bottom:env(safe-area-inset-bottom,0px);
  background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
}
.nav-btn {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  border:none; background:none; color:var(--muted); font:inherit; font-size:11px; cursor:pointer;
  & .nav-ico { font-size:20px; line-height:1; }
  &.active { color:var(--accent); }
}

/* ========================= Sidebar (Slide-in links) ===================== */
app-sidebar {
  position:fixed; inset:0; z-index:95; display:block; pointer-events:none;
  &.show { pointer-events:auto; }
  & .sidebar-backdrop {
    position:absolute; inset:0; background:rgba(4,5,8,0);
    transition:background .28s ease, backdrop-filter .28s ease;
  }
  &.show .sidebar-backdrop { background:rgba(4,5,8,.62); backdrop-filter:blur(7px); }
  & .sidebar-inner {
    position:absolute; top:0; bottom:0; left:0; width:min(300px,82vw);
    background:var(--surface); border-right:1px solid var(--line); box-shadow:18px 0 44px rgba(0,0,0,.28);
    transform:translateX(calc(-100% - 64px)); /* +64px damit der Schatten offscreen bleibt */
    transition:transform .28s cubic-bezier(.22,.84,.22,1); will-change:transform;
    overflow:auto; padding:calc(env(safe-area-inset-top,0px) + 18px) 18px 18px;
  }
  &.show .sidebar-inner { transform:translateX(0); }
}
.sidebar-content {
  & h2 { font-size:18px; font-weight:700; margin-bottom:14px; }
}
.side-link {
  display:block; width:100%; text-align:left; padding:12px 14px; border-radius:12px;
  border:none; background:none; color:var(--text); font:inherit; font-size:15px; cursor:pointer;
  &:hover, &.active { background:var(--surface-2); color:var(--accent); }
}

/* ========================= Drawer (Bottom-Sheet) ======================== */
/* display:block + pointer-events:none im Ruhezustand — sonst keine Slide-in-
 * Transition und der Backdrop (inset:0) fängt nach dem Schließen alle Klicks. */
app-drawer {
  position:fixed; inset:0; z-index:90; display:block; overflow:hidden; pointer-events:none;
  &.show { pointer-events:auto; }
  & .drawer-backdrop {
    position:absolute; inset:0; background:rgba(4,5,8,0);
    transition:background .28s ease, backdrop-filter .28s ease;
  }
  & .drawer-inner {
    position:absolute; left:0; right:0; bottom:0; width:min(720px,calc(100vw - 24px));
    margin:0 auto; max-height:calc(100dvh - env(safe-area-inset-top,0px) - 8px);
    background:var(--surface); border:1px solid var(--line); border-bottom:none; border-radius:28px 28px 0 0;
    box-shadow:0 -18px 44px rgba(0,0,0,.28); transform:translateY(calc(100% + 64px)); /* +64px: Schatten offscreen */
    transition:transform .28s cubic-bezier(.22,.84,.22,1); will-change:transform;
    @media (max-width:760px) { width:100%; margin:0; border-radius:28px 28px 0 0; }
  }
  &.show .drawer-backdrop { background:rgba(4,5,8,.62); backdrop-filter:blur(7px); }
  &.show .drawer-inner { transform:translateY(0); }
}
.drawer-handle {
  display:flex; align-items:flex-start; justify-content:center; width:100%; height:54px;
  padding-top:12px; touch-action:none;
  &::after {
    content:''; width:72px; height:6px; border-radius:999px;
    background:color-mix(in srgb, var(--text) 24%, transparent);
  }
}
.drawer-content {
  padding:0 18px calc(30px + env(safe-area-inset-bottom,0px)); overflow:auto;
  max-height:calc(100dvh - env(safe-area-inset-top,0px) - 86px); overscroll-behavior:contain;
  touch-action:pan-y; -webkit-overflow-scrolling:touch;
  & h2 { font-size:18px; font-weight:700; margin-bottom:10px; }
}

/* ========================= Modal ======================================== */
app-modal {
  & .overlay {
    position:fixed; inset:0; z-index:100; background:rgba(4,5,8,.64); backdrop-filter:blur(7px);
    display:flex; align-items:center; justify-content:center; padding:24px;
  }
  & .modal {
    background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:26px;
    max-width:380px; width:100%; box-shadow:0 30px 70px -20px rgba(0,0,0,.5); animation:pop .25s ease;
    &.celebrate { border-radius:28px; padding:34px 28px; text-align:center; }
  }
}
.modal-emoji { font-size:60px; line-height:1; margin-bottom:10px; }
.modal-title { font-weight:700; font-size:21px; letter-spacing:-.02em; margin-bottom:8px; }
.modal-body { color:var(--muted); font-size:14.5px; line-height:1.5; margin-bottom:22px; }
.modal-actions { display:flex; gap:10px; }
.mbtn {
  flex:1; padding:13px; border-radius:14px; border:1px solid var(--line); background:var(--surface-2);
  color:var(--text); font:inherit; font-weight:600; font-size:14px; cursor:pointer;
  &.confirm { border:none; background:var(--accent); color:var(--accent-ink); font-weight:700; }
}
@keyframes pop { 0%{transform:scale(.7);opacity:0} 60%{transform:scale(1.06)} 100%{transform:scale(1);opacity:1} }

/* ========================= Update-Toast / Overlay ======================= */
.update-toast {
  position:fixed; bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom,0px)); left:50%;
  transform:translateX(-50%); z-index:110; width:min(560px,calc(100vw - 24px));
  display:flex; align-items:center; gap:14px; padding:16px 18px;
  background:var(--surface); color:var(--text); border:1px solid var(--line); border-radius:18px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.5); animation:pop .25s ease;
  & .ut-body { flex:1; min-width:0; }
  & .ut-title { font-weight:700; font-size:15px; }
  & .ut-text { color:var(--muted); font-size:13px; margin-top:2px; }
  & .btn-accent { width:auto; flex-shrink:0; }
}
.update-overlay {
  position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center;
  background:rgba(4,5,8,.62); backdrop-filter:blur(7px);
  & .panel {
    display:flex; align-items:center; gap:12px; color:#fff; font-size:14px;
    padding:18px 22px; border-radius:16px; background:color-mix(in srgb, var(--panel) 90%, black);
  }
}
.spinner {
  width:18px; height:18px; border-radius:50%; border:2.5px solid rgba(255,255,255,.28);
  border-top-color:#fff; animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }