/* Wiederverwendbare Bausteine */

/* Buttons */
.btn{
  width:100%; padding:13px; border:none; border-radius:12px; background:var(--green);
  color:#fff; font-size:16px; font-weight:700; cursor:pointer; margin-top:12px;
}
.btn:active{background:var(--green-d)}
.btn.secondary{background:#fff; color:var(--green-d); border:1px solid var(--green)}
.btn:disabled{opacity:.5}

/* Datumsleiste / Kalender */
.datebar{display:flex; align-items:center; gap:10px; margin-top:14px}
.datebar button.nav{
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  width:44px; height:44px; font-size:20px; cursor:pointer; color:var(--text);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.datebar .datewrap{flex:1; position:relative}
.datebar .datelabel{
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  height:44px; display:flex; align-items:center; justify-content:center;
  font-weight:600; gap:8px; cursor:pointer;
}
.datebar input[type=date]{
  position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer;
}
.today-btn{
  display:block; margin:8px auto 0; background:none; border:none; color:var(--green-d);
  font-weight:600; font-size:14px; cursor:pointer;
}

/* Tagessumme */
.total{text-align:center; padding:6px 0 2px}
.total .num{font-size:42px; font-weight:800; color:var(--green-d); line-height:1}
.total .unit{font-size:15px; color:var(--muted); margin-top:2px}
.total .cnt{font-size:13px; color:var(--muted); margin-top:6px}

/* Zusammenfassung */
.summary{padding:14px 16px}
.sumrow{display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size:16px}
.sumrow .lbl{color:var(--text); font-weight:600}
.sumrow .val{font-weight:700}
.sumrow.eaten .val{color:var(--green-d)}
.sumrow.burned .val{color:var(--burn)}
.sumsub{font-size:12px; color:var(--muted); text-align:right; margin:-2px 0 4px}
.balance{margin-top:6px; border-top:1px solid var(--border); padding-top:12px; text-align:center}
.balance .blabel{font-size:13px; color:var(--muted)}
.balance .bval{font-size:34px; font-weight:800; line-height:1.1; margin-top:2px}
.balance .bnote{font-size:13px; font-weight:600; margin-top:3px}
.bval.pos{color:var(--burn)} .bnote.pos{color:var(--burn)}
.bval.neg{color:var(--green-d)} .bnote.neg{color:var(--green-d)}
.bval.zero{color:var(--muted)} .bnote.zero{color:var(--muted)}

/* Einstellungen (aufklappbar) */
.settings summary{font-size:15px; font-weight:700; color:var(--text); cursor:pointer; list-style:none}
.settings summary::-webkit-details-marker{display:none}
.settings summary::before{content:"▸ "; color:var(--muted)}
.settings[open] summary::before{content:"▾ "; color:var(--muted)}

/* Manuelle Eingabe (aufklappbar) */
.manual{margin-top:14px; border-top:1px dashed var(--border); padding-top:14px}
.manual .manual-body{margin-top:12px}
details summary{font-size:14px; font-weight:600; color:var(--green-d); cursor:pointer; list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"➕ "}
details[open] summary::before{content:"➖ "}

/* Trefferliste (Online-Suche) */
#results{margin-top:12px}
.result{
  display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--border);
}
.result:first-child{border-top:none}
.result .info{flex:1; min-width:0}
.result .name{font-weight:600; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.result .sub{font-size:12px; color:var(--muted); margin-top:2px}
.result .kcal{font-weight:700; color:var(--green-d); font-size:15px; white-space:nowrap}
.result .kcal .for{font-weight:400; color:var(--muted); font-size:11px}
.result .add{
  background:var(--green-l); color:var(--green-d); border:none; border-radius:10px;
  width:40px; height:40px; font-size:22px; cursor:pointer; flex:0 0 auto; font-weight:700;
}

/* Statusmeldungen */
.status{font-size:14px; color:var(--muted); text-align:center; padding:10px}
.status.err{color:var(--danger)}

/* Vorschläge (gespeicherte Lebensmittel / Aktivitäten) */
#suggestions,#actSuggestions{margin-top:8px}
.suggestions.has-items{border:1px solid var(--border); border-radius:12px; overflow:hidden}
.suggest{
  display:flex; align-items:center; gap:12px; padding:11px 12px; cursor:pointer;
  border-top:1px solid var(--border); background:#fff;
}
.suggest:first-child{border-top:none}
.suggest:active{background:var(--green-l)}
.suggest .info{flex:1; min-width:0}
.suggest .name{font-weight:600; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.suggest .sub{font-size:12px; color:var(--muted); margin-top:2px}
.suggest .kcal{font-weight:700; color:var(--green-d); font-size:14px; white-space:nowrap; text-align:right}
.suggest .star{color:var(--green); flex:0 0 auto; font-size:15px}
.suggest-head{font-size:12px; font-weight:600; color:var(--muted); padding:8px 12px 0}

/* Einträge des Tages */
.entry{
  display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--border);
}
.entry:first-child{border-top:none}
.entry .info{flex:1; min-width:0}
.entry .name{font-weight:600; font-size:15px}
.entry .sub{font-size:12px; color:var(--muted); margin-top:2px}
.entry .kcal{font-weight:700; font-size:15px; white-space:nowrap}
.entry .kcal.burn{color:var(--burn)}
.entry .del{
  background:none; border:none; color:var(--danger); font-size:20px; cursor:pointer;
  width:34px; height:34px; flex:0 0 auto;
}

/* Globale Meldung */
.appmsg{
  margin-top:14px; padding:12px 14px; border-radius:12px; font-size:14px; font-weight:600;
  background:#fef2f2; color:#b91c1c; border:1px solid #fecaca;
}
.appmsg[hidden]{display:none}

/* Badge */
.badge{display:inline-block; background:var(--green-l); color:var(--green-d); font-size:11px;
  padding:2px 7px; border-radius:20px; font-weight:600; margin-left:6px; vertical-align:middle}