/* ==========================================================================
   Migraene-Tagebuch - app.css
   Ruhiges, reizarmes Design. Mobile-first. Hell/Dunkel ueber [data-theme].
   --primary und --accent werden aus den Einstellungen gesetzt (siehe layout).
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box; }

:root{
  --radius: 16px;
  --radius-sm: 10px;
  --gap: 14px;
  --maxw: 600px;
}

/* Helles Thema (Standard) */
[data-theme="hell"]{
  --bg:        #f4f3ef;
  --surface:   #ffffff;
  --surface-2: #faf9f6;
  --text:      #2b2b33;
  --muted:     #6c6c78;
  --muted-2:   #b9b7b1;
  --border:    #e7e4dd;
  --shadow:    0 6px 24px rgba(40,38,34,.08);
}

/* Dunkles Thema */
[data-theme="dunkel"]{
  --bg:        #15151b;
  --surface:   #1e1e26;
  --surface-2: #23232c;
  --text:      #e9e8ec;
  --muted:     #9a99a4;
  --muted-2:   #4a4a55;
  --border:    #2c2c37;
  --shadow:    0 6px 24px rgba(0,0,0,.35);
}

html,body{ margin:0; padding:0; }
body{
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ------------------------------- Appbar -------------------------------- */
.appbar{
  position: sticky; top:0; z-index: 20;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top));
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
}
.appbar__title{
  display:flex; align-items:center; gap:10px;
  color:#fff; text-decoration:none; font-weight:650; font-size:1.05rem;
  letter-spacing:.2px;
}
.appbar__dot{
  width:14px; height:14px; border-radius:50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,255,255,.25);
}
.appbar__nav{ display:flex; gap:6px; }
.appbar__nav a{
  color:#fff; text-decoration:none; font-size:.85rem;
  padding:7px 10px; border-radius: 999px;
  background: rgba(255,255,255,.14);
}
.appbar__nav a:hover{ background: rgba(255,255,255,.26); }

/* ------------------------------- Layout -------------------------------- */
.wrap{ max-width: var(--maxw); margin: 0 auto; padding: 18px 16px 90px; }
.foot{ text-align:center; color:var(--muted); font-size:.8rem; padding: 8px 0 24px; }

h1{ font-size:1.4rem; margin:.2em 0 .5em; }
h2{ font-size:1.05rem; margin:1.4em 0 .4em; }
.muted{ color: var(--muted); font-size:.9rem; }
.link{ color: var(--primary); text-decoration:none; font-weight:600; font-size:.92rem; }
.link:hover{ text-decoration:underline; }

/* ------------------------------- Karten -------------------------------- */
.card{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 18px;
}
.card--narrow{ max-width: 380px; margin: 8vh auto 0; }

/* ----------------------------- Formulare ------------------------------- */
label{ display:block; }
.field{ display:block; margin: 0 0 14px; }
.field__label{ display:block; margin-bottom:8px; font-weight:600; font-size:.95rem; }
.field__row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; font-weight:600; }
.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }

input[type=text], input[type=password], input[type=number], select, textarea{
  width:100%; margin-top:6px;
  font: inherit; color: var(--text);
  background: var(--surface-2);
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 13px;
}
textarea{ resize: vertical; }
input:focus, select:focus, textarea:focus{
  outline: 2px solid var(--primary); outline-offset: 1px; border-color: transparent;
}
input[type=color]{
  width:100%; height:46px; padding:4px; cursor:pointer;
  background: var(--surface-2); border:1px solid var(--border); border-radius: var(--radius-sm);
}
input[type=range]{ width:100%; accent-color: var(--primary); height: 30px; }
output{ color: var(--primary); font-variant-numeric: tabular-nums; }

/* ------------------------------- Buttons ------------------------------- */
.btn{
  display:inline-block; width:100%;
  font: inherit; font-weight:650; cursor:pointer;
  padding: 13px 16px; border-radius: var(--radius-sm);
  border:1px solid transparent;
}
.btn--primary{ background: var(--primary); color:#fff; }
.btn--primary:hover{ filter: brightness(1.05); }
.btn--ghost{
  background: transparent; color: var(--muted);
  border-color: var(--border);
}
.btn--ghost:hover{ color: #c0392b; border-color:#c0392b33; }
.iconbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius: 50%;
  text-decoration:none; color: var(--text); font-size:1.5rem; line-height:1;
  background: var(--surface-2); border:1px solid var(--border);
}
.iconbtn:hover{ background: var(--bg); }

/* ------------------------------- Hinweise ------------------------------ */
.alert{ padding:11px 14px; border-radius: var(--radius-sm); margin: 0 0 16px; font-size:.92rem; }
.alert--ok{ background:#e8f4ec; color:#1d6b3c; border:1px solid #bfe3cd; }
.alert--error{ background:#fbeaea; color:#9b2c2c; border:1px solid #f0c6c6; }
[data-theme="dunkel"] .alert--ok{ background:#15331f; color:#7fd9a0; border-color:#1f4a2e; }
[data-theme="dunkel"] .alert--error{ background:#3a1c1c; color:#f0a3a3; border-color:#5a2a2a; }

/* ------------------------------- Kalender ------------------------------ */
.cal__head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cal__title{ font-size:1.25rem; margin:0; text-align:center; flex:1; }
.cal__tools{ display:flex; justify-content:space-between; margin:10px 2px 14px; }

.grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap:6px; }
.grid__wd{ text-align:center; font-size:.72rem; color:var(--muted); font-weight:700; padding-bottom:2px; }

.cell{
  position:relative;
  aspect-ratio: 1 / 1;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding-top:6px;
  background: var(--surface);
  border:1px solid var(--border);
  border-radius: 12px;
  text-decoration:none; color: var(--text);
  font-size:.9rem;
  min-height:44px;
}
.cell--empty{ background:transparent; border:none; }
.cell:hover{ border-color: var(--primary); }
.cell--today{ outline:2px solid var(--primary); outline-offset:-2px; }
.cell--has{ background: var(--surface-2); }
.cell__num{ font-weight:600; }
.cell__marks{ position:absolute; bottom:6px; display:flex; align-items:center; gap:3px; }

.dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:16px; height:16px; padding:0 4px; border-radius:999px;
  background: var(--accent); color:#fff; font-size:.62rem; font-weight:700; line-height:1;
}
.legend{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; color:var(--muted); font-size:.78rem; margin-top:14px; }

/* --------------------------- Bottom-Sheet ------------------------------ */
.backdrop{
  position:fixed; inset:0; z-index:30;
  background: rgba(20,18,16,.45);
  backdrop-filter: blur(1px);
}
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  max-width: var(--maxw); margin:0 auto;
  background: var(--surface);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,.25);
  max-height: 92dvh; overflow-y:auto; overflow-x:hidden;
  padding: 6px 18px 0;
  animation: sheetUp .22s ease-out;
}
@keyframes sheetUp{ from{ transform: translateY(100%);} to{ transform: translateY(0);} }
.sheet__grip{ width:42px; height:4px; border-radius:99px; background: var(--muted-2); margin:8px auto 4px; }
.sheet__head{ display:flex; align-items:center; justify-content:space-between; gap:8px; position:sticky; top:0; background:var(--surface); padding:6px 0 8px; }
.sheet__head h2{ margin:0; font-size:1.05rem; }
.sheet__actions{ margin-top:6px; }
.sheet__delete{ margin-top:12px; }

/* Medikamenten-Liste */
.meds{ display:flex; flex-direction:column; gap:8px; }
.med{ display:flex; align-items:center; gap:10px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 10px; }
.med__name{ flex:1; font-size:.95rem; }
.med__qty{ width:74px; margin:0; text-align:center; }

/* Chips (vorgefertigte Texte) */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  display:inline-flex; align-items:center;
  padding:8px 13px; border-radius:999px;
  background: var(--surface-2); border:1px solid var(--border);
  font-size:.9rem; cursor:pointer; user-select:none;
}
.chip input{ position:absolute; opacity:0; width:0; height:0; }
.chip--on{ background: var(--primary); color:#fff; border-color: var(--primary); }

/* Desktop: Sheet als zentriertes Fenster */
@media (min-width: 640px){
  .sheet{ left:50%; bottom:auto; top:50%; transform:translate(-50%,-50%); border-radius:22px; max-height:88dvh; animation:none; }
  @keyframes sheetUp{ from{opacity:0;} to{opacity:1;} }
}

@media (prefers-reduced-motion: reduce){
  .sheet{ animation:none; }
}

/* ===================== Erweiterungen: Schnell-Erfassung ================== */

/* Appbar mit 4 Punkten auf kleinen Geraeten nicht zerbrechen lassen */
.appbar__title{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.appbar__nav{ flex:0 1 auto; overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none; }
.appbar__nav::-webkit-scrollbar{ display:none; }
.appbar__nav a{ white-space:nowrap; flex:0 0 auto; }

/* Groessere, gut antippbare Chips im Tagesformular */
.chip{ min-height:42px; gap:2px; }
.chips--radio{ }
.chip input[type=radio]{ position:absolute; opacity:0; width:0; height:0; }

/* Farbige Felder: Farbton kommt je Eintrag aus --h (siehe cat_hue) */
.chip--color{ border-color: hsl(var(--h) 45% 72%); }
.chip--color::before{
  content:""; flex:0 0 auto;
  width:11px; height:11px; border-radius:50%;
  background: hsl(var(--h) 55% 55%); margin-right:8px;
}
.chip--color.chip--on{
  background: hsl(var(--h) 52% 48%); border-color: hsl(var(--h) 52% 48%); color:#fff;
}
.chip--color.chip--on::before{ background:#fff; }
[data-theme="dunkel"] .chip--color{ border-color: hsl(var(--h) 38% 42%); }

/* "keine"-Auswahl bei der Kopfschmerz-Art */
.chip--clear.chip--on{ background: var(--muted-2); border-color: var(--muted-2); color: var(--text); }

/* Tabletten-Stepper: minus [Anzahl] plus */
.stepper{
  display:flex; align-items:center; gap:10px;
  background: var(--surface-2); border:1px solid var(--border);
  border-radius: var(--radius-sm); padding:8px 10px;
}
.stepper__name{ flex:1; min-width:0; overflow-wrap:anywhere; font-size:.95rem; }
.stepper--active{ border-color: var(--accent); }
.stepper--active .stepper__name{ font-weight:650; }
.stepper__ctrl{ display:flex; align-items:center; gap:6px; }
.stepper__btn{
  width:42px; height:42px; flex:0 0 auto;
  border-radius:12px; border:1px solid var(--border);
  background: var(--surface); color: var(--text);
  font-size:1.5rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.stepper__btn:hover{ border-color: var(--primary); }
.stepper__btn:active{ transform: scale(.96); }
.stepper__qty{
  width:50px; margin:0; padding:9px 4px; text-align:center;
  font-weight:650; font-variant-numeric:tabular-nums;
}
.stepper__qty::-webkit-outer-spin-button,
.stepper__qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.stepper__qty{ -moz-appearance:textfield; appearance:textfield; }

/* ============================ Statistik ================================= */
.stat__tabs{ display:flex; gap:8px; margin:4px 0 16px; }
.stat__tab{
  flex:1; text-align:center; text-decoration:none;
  padding:10px 12px; border-radius:999px;
  background: var(--surface-2); border:1px solid var(--border);
  color: var(--text); font-weight:600; font-size:.92rem;
}
.stat__tab--on{ background: var(--primary); border-color: var(--primary); color:#fff; }

.statlist{ display:flex; flex-direction:column; gap:10px; }
.statrow{
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding:13px 15px;
}
.statrow__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.statrow__label{ font-weight:650; font-size:1rem; }
.statrow__sub{ color: var(--muted); font-size:.8rem; }
.statrow__count{ text-align:right; }
.statrow__big{ color: var(--primary); font-weight:700; font-size:1.3rem; line-height:1; font-variant-numeric:tabular-nums; }

.bar{ height:8px; border-radius:999px; background: var(--surface-2); margin:11px 0 0; overflow:hidden; }
.bar__fill{ height:100%; background: var(--accent); border-radius:999px; min-width:2px; }

.metricline{ display:flex; flex-wrap:wrap; gap:5px 14px; margin-top:9px; font-size:.82rem; color: var(--muted); }
.metricline b{ color: var(--text); font-weight:650; }

.medtags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.medtag{
  font-size:.76rem; background: var(--surface-2); border:1px solid var(--border);
  border-radius:999px; padding:3px 9px; color: var(--text);
}

/* ======================= App-Look fuer Handy ============================ */

/* Native-Anmutung: kein blauer Tap-Blitz, kein Doppeltipp-Zoom-Delay */
html{ -webkit-tap-highlight-color: transparent; }
a, button, .cell, .chip, .tab, .stepper__btn{ touch-action: manipulation; }
body{ overscroll-behavior-y: none; }

/* Kopfzeile: rechts ein dezentes Abmelden-Icon statt Pillen-Navigation */
.appbar__logout{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; flex:0 0 auto; border-radius:50%;
  color:#fff; text-decoration:none; background: rgba(255,255,255,.16);
}
.appbar__logout svg{ width:21px; height:21px; }
.appbar__logout:active{ background: rgba(255,255,255,.30); }

/* Untere Tab-Leiste = Haupt-Navigation (Kalender / Statistik / Einstellungen) */
.tabbar{
  position: fixed; left:0; right:0; bottom:0; z-index:25;
  max-width: var(--maxw); margin:0 auto;
  display:flex;
  background: var(--surface);
  border-top:1px solid var(--border);
  box-shadow: 0 -4px 20px rgba(0,0,0,.06);
  padding-bottom: env(safe-area-inset-bottom);
}
[data-theme="dunkel"] .tabbar{ box-shadow: 0 -4px 20px rgba(0,0,0,.30); }
.tab{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:9px 4px 8px; min-height:56px; text-decoration:none;
  color: var(--muted); font-size:.7rem; font-weight:600; line-height:1.1;
}
.tab svg{ width:24px; height:24px; }
.tab--on{ color: var(--primary); }
.tab--on svg{ stroke-width:2; }
.tab:active{ background: var(--surface-2); }

/* Inhalt nicht hinter der fixen Tab-Leiste verstecken */
.wrap--app{ padding-bottom: calc(74px + env(safe-area-inset-bottom)); }

/* Dezentes Druck-Feedback, fuehlt sich nativer an */
.cell:active{ transform: scale(.97); }
.chip:active{ transform: scale(.97); }
.btn:active{ transform: scale(.99); filter: brightness(.98); }
.iconbtn:active{ transform: scale(.95); }
.stat__tab:active{ transform: scale(.99); }
.link:active{ opacity:.7; }

@media (prefers-reduced-motion: reduce){
  .cell:active, .chip:active, .btn:active, .iconbtn:active, .stat__tab:active{ transform:none; }
}

/* ============ Auswahl-Kacheln (gleich gross, 2 pro Zeile) =============== */
.optgrid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:8px; }
.opt{
  position:relative;
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-width:0;                         /* darf unter die Textbreite schrumpfen */
  overflow-wrap:anywhere; word-break:break-word; hyphens:auto;
  min-height:54px; padding:10px;
  border-radius:12px;                 /* rechteckig mit leicht runden Ecken */
  background: var(--surface-2); border:1.5px solid var(--border);
  color: var(--text); font-size:.88rem; font-weight:600; line-height:1.2;
  cursor:pointer; user-select:none;
}
.opt input{ position:absolute; opacity:0; width:0; height:0; }
.opt:active{ transform: scale(.97); }

/* Farbige Kacheln: Farbton je Eintrag aus --h */
.opt--color{ border-color: hsl(var(--h) 45% 70%); }
.opt--color.opt--on{
  background: hsl(var(--h) 52% 48%); border-color: hsl(var(--h) 52% 48%); color:#fff;
}
[data-theme="dunkel"] .opt--color{ border-color: hsl(var(--h) 38% 42%); }

/* "keine"-Kachel */
.opt--clear.opt--on{ background: var(--muted-2); border-color: var(--muted-2); color: var(--text); }

/* Auswahl-Haekchen oben rechts auf der aktiven Kachel */
.opt--on::after{
  content:"\2713"; position:absolute; top:5px; right:8px;
  font-size:.8rem; font-weight:700; opacity:.9;
}

/* Checkbox-Zeile (z.B. "Angemeldet bleiben") */
.checkrow{
  display:flex; align-items:center; gap:10px;
  margin:14px 0 4px; font-weight:500; cursor:pointer;
}
.checkrow input[type=checkbox]{
  width:20px; height:20px; margin:0; flex:0 0 auto; accent-color: var(--primary);
}

/* Fixe Aktionsleiste unten im Tagesfenster: Speichern bleibt immer sichtbar */
.sheet__foot{
  position: sticky; bottom: 0; z-index: 2;
  display:flex; gap:10px; align-items:center;
  margin: 10px -18px 0;                       /* randlos ueber die Sheet-Breite */
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.sheet__foot .btn{ width:auto; margin:0; }
.sheet__foot .btn--primary{ flex:1; }
.btn--sm{ flex:0 0 auto; padding:13px 16px; }

/* Angemeldeter Benutzer in der Kopfzeile */
.appbar__me{ display:flex; align-items:center; gap:8px; flex:0 0 auto; min-width:0; }
.appbar__user{
  color:#fff; font-size:.82rem; font-weight:600; opacity:.92;
  max-width:34vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}