/* ==========================================================================
   Tellerbuch – App-Styles. Baut auf tellerbuch-theme.css auf (ersetzt das alte Design).
   ========================================================================== */
/* Textmarker: Schrift immer dunkel auf Gelb, auch im Dunkelmodus */
.tb-mark{color:var(--on-hi)}
a{color:var(--ink);text-underline-offset:3px;text-decoration-thickness:1.5px}
img{max-width:100%}
p{margin:0 0 var(--space-s)}
[hidden]{display:none !important}
.tb-app.tb-narrow{max-width:400px;padding-top:var(--space-xl)}
.tb-app.tb-noactions{padding-bottom:var(--space-xl)}

/* ---------- Kopf ---------- */
.tb-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:var(--space-l)}
.tb-brand{display:flex;align-items:center;gap:10px;min-width:0}
.tb-brand svg{width:40px;height:40px;flex:none}
.tb-date{font-size:.95rem;color:var(--ink-soft);text-align:right;line-height:1.3;white-space:nowrap}
@media (max-width:380px){
  .tb-brand h1{font-size:1.6rem}
  .tb-brand svg{width:34px;height:34px}
  .tb-date{font-size:.88rem}
}

/* ---------- Überschriften mit Icon ---------- */
.tb-h{display:flex;align-items:center;gap:8px}
.tb-h svg{width:24px;height:24px;flex:none}

/* ---------- Icon-Buttons (nur Icon, mit aria-label) ---------- */
.tb-iconbtn{all:unset;box-sizing:border-box;cursor:pointer;width:var(--tap-min);height:var(--tap-min);
  display:inline-flex;align-items:center;justify-content:center;color:var(--ink);-webkit-tap-highlight-color:transparent}
.tb-iconbtn svg{width:26px;height:26px}
.tb-iconbtn:focus-visible{outline:3px dashed var(--ink);outline-offset:2px}
.tb-iconbtn[disabled]{opacity:.28;cursor:default}
.tb-iconbtn:active:not([disabled]){transform:translateY(1px) rotate(-.4deg)}

/* ---------- Tagesbox ---------- */
.tb-today__top{display:flex;justify-content:space-between;align-items:center;margin:-12px -10px 0 0}
.tb-today__label{color:var(--ink-soft);margin:0}
.tb-daynav{display:flex}
.tb-total{font-family:var(--font-type);font-size:3rem;line-height:1.1;margin:2px 0 0}
.tb-total small{font-size:1.2rem}
.tb-total.is-long{font-size:2.4rem}
.tb-meta{margin:10px 0 0;font-size:.95rem}
.tb-meta--soft{color:var(--ink-soft);margin-top:4px}
.tb-goal{margin-top:var(--space-m)}
.tb-goal .tb-meta{margin-top:6px}

/* ---------- Erfassen ---------- */
.tb-compose{margin-top:var(--space-l)}
.tb-photo{position:relative;margin:0 0 var(--space-m);padding:7px}
.tb-photo::before{content:"";position:absolute;inset:0;pointer-events:none;
  border:var(--stroke) solid var(--ink);border-radius:var(--radius-sketch);filter:url(#sketch)}
.tb-photo img{display:block;width:100%;max-height:15rem;object-fit:cover;border-radius:3px 6px 4px 7px}
.tb-stack{display:grid;gap:10px;margin-top:var(--space-m)}
.tb-textarea{min-height:5.5rem;resize:vertical}
.tb-bigkcal{font-family:var(--font-type);font-size:2.4rem;line-height:1.1;margin:var(--space-s) 0 4px}
.tb-bigkcal small{font-size:1.1rem}
.tb-nutri{margin:0 0 4px;font-size:.95rem}
.tb-note{font-size:.92rem;color:var(--ink-soft);margin:4px 0 0}
.tb-sub{font-family:var(--font-type);font-size:1rem;margin:var(--space-m) 0 4px}

/* Bestandteile im Ergebnis */
.tb-items{width:100%;border-collapse:collapse;margin:0 0 var(--space-s)}
.tb-items td{padding:6px 2px;border-bottom:1.5px dashed var(--ink-soft);vertical-align:middle}
.tb-items .n{overflow-wrap:anywhere}
.tb-items .g{width:5.4rem}
.tb-items .g .tb-input{min-height:40px;padding:6px;text-align:right}
.tb-items .k{width:4.4rem;text-align:right;white-space:nowrap}
.tb-items .x{width:44px;text-align:right}
.tb-items .tb-iconbtn{width:44px;height:44px}
.tb-items .tb-iconbtn svg{width:22px;height:22px}

/* ---------- Mahlzeitenliste mit aufklappbaren Details ---------- */
.tb-row--button[aria-expanded="true"]{font-weight:700;border-bottom-color:transparent}
.tb-row--button .tb-row__kcal,.tb-row .tb-row__kcal{text-align:right}
.tb-detail{padding:0 4px 16px;border-bottom:1.5px dashed var(--ink-soft)}
.tb-detail p{font-size:.92rem;color:var(--ink-soft);margin:0 0 6px}
.tb-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.tb-btn--small{font-size:.98rem;padding:0 10px;gap:8px}
.tb-btn--small svg{width:22px;height:22px}

/* Leerer Tag */
li.tb-empty{list-style:none}
.tb-empty p{margin:0 0 4px}

/* ---------- Nochmal eintragen ---------- */
.tb-chips{margin:var(--space-s) 0 0}
.tb-chip[disabled]{opacity:.45;cursor:default}
.tb-chip{max-width:100%}
.tb-chip__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:15em}
.tb-chip .tb-soft{margin-left:.5em;white-space:nowrap}

/* ---------- Woche ---------- */
.tb-week{grid-template-columns:5.6em 1fr 4.8em;align-items:center}
.tb-week time{font-weight:400}
.tb-week[aria-current="date"] time{font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.tb-week .tb-progress{margin:0;height:14px}
.tb-week .tb-progress__fill{background:var(--ink-soft)}
.tb-week .tb-progress--over .tb-progress__fill{background:repeating-linear-gradient(45deg,var(--ink) 0 3px,transparent 3px 8px)}
.tb-week .tb-progress--none::before{border-style:dashed;border-color:var(--ink-soft)}

/* ---------- Einstellungen ---------- */
.tb-settings .tb-field{margin-bottom:var(--space-s)}
.tb-settings .tb-btn{margin-top:4px}

.tb-foot{font-size:.85rem;color:var(--ink-soft);margin-top:var(--space-l)}

/* ---------- Verwaltung (admin.php) ---------- */
.tb-tablewrap{overflow-x:auto;margin:0 0 var(--space-m)}
.tb-table{width:100%;border-collapse:collapse;font-size:.95rem}
.tb-table th,.tb-table td{text-align:left;padding:8px 4px;border-bottom:1.5px dashed var(--ink-soft);vertical-align:top}
.tb-table th{font-family:var(--font-type);font-weight:400}
.tb-box + .tb-box{margin-top:var(--space-m)}
.tb-check{display:flex;gap:10px;align-items:center;min-height:var(--tap-min);margin:0 0 var(--space-s)}
.tb-check input{width:22px;height:22px;accent-color:var(--ink);flex:none}
.tb-select{-webkit-appearance:auto;appearance:auto}
.tb-links{margin-top:var(--space-l);font-size:.95rem}