/* ============================================================================
 * 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 ================================= */
:root, :root[data-theme="light"] {
  --bg:#f5f3ee; --surface:#ffffff; --surface-2:#f0ede7;
  --line:#ddd9d0; --text:#1a1916; --muted:#6b6760;
  --accent:#2a6e2a; --accent-ink:#ffffff;
  --panel:#1c1b1a; --panel-ink:#f0ede6; --panel-line:#333230;
  --radius:16px;
  --font: system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --nav-h:64px; --top-h:56px;
}
:root[data-theme="dark"] {
  --bg:#111110; --surface:#1c1b1a; --surface-2:#252422;
  --line:#333230; --text:#f0ede6; --muted:#908d86;
  --accent:#7ec87e; --accent-ink:#0e1a0e;
  --panel:#f0ede6; --panel-ink:#1a1916; --panel-line:#c9c4bb;
}
*, *::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; }
select { cursor:pointer; }
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); } }