/* ═══════════════════════════════════════════════════════════════════
   Έξυπνος κάδος — φύλλο στυλ

   Η εφαρμογή διαβάζεται σαν απόδειξη: ώρα αριστερά, τρόφιμο στη μέση,
   γραμμάρια δεξιά σε στοιχειοθεσία ζυγαριάς. Τα χρώματα είναι δανεισμένα
   από το RGB LED του ίδιου του κάδου, ώστε συσκευή και εφαρμογή να
   μιλάνε την ίδια γλώσσα.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --paper:   #EDEEE9;
  --surface: #FFFFFF;
  --ink:     #161C18;
  --muted:   #6B7269;
  --hair:    #D7D9D1;

  --blue:   #2B4CF2;   /* το LED όταν ο κάδος δουλεύει */
  --green:  #1E8A50;   /* αναγνώριση επιτυχής */
  --red:    #D6342C;   /* γεμάτος ή σφάλμα */
  --amber:  #A8801F;   /* κάτω από το όριο σπατάλης */

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono",
          "DejaVu Sans Mono", Menlo, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          sans-serif;

  --pad: 20px;
  --r: 14px;
}

* { box-sizing: border-box; }

/* Οι κλάσεις με display: grid/flex υπερισχύουν του [hidden] του browser,
   οπότε το επιβάλλουμε ρητά — αλλιώς οι κρυφές οθόνες μένουν ορατές. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

body { padding-bottom: env(safe-area-inset-bottom); }

/* ─────────── Είσοδος ─────────── */
.gate {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: var(--paper); padding: var(--pad);
}
.gate-inner { width: 100%; max-width: 320px; text-align: center; }
.mark { color: var(--ink); margin-bottom: 18px; }
.gate-title {
  font-size: 26px; font-weight: 620; letter-spacing: -0.02em; margin: 0;
}
.gate-sub { color: var(--muted); font-size: 14px; margin: 6px 0 28px; }
.gate-error { color: var(--red); font-size: 14px; min-height: 20px; margin: 12px 0 0; }

.field {
  width: 100%; padding: 14px 16px; font-size: 16px;
  font-family: var(--sans); color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hair); border-radius: 10px;
  margin-bottom: 10px;
}
.field:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

/* ─────────── Κουμπιά ─────────── */
.btn {
  font-family: var(--sans); font-size: 15px; font-weight: 560;
  padding: 13px 18px; border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; transition: opacity .15s ease;
}
.btn:active { opacity: .7; }
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.btn-primary { width: 100%; background: var(--ink); color: var(--paper); }
.btn-ghost {
  background: transparent; color: var(--ink);
  border-color: var(--hair); padding: 10px 14px; font-size: 14px;
}
.btn-ghost:hover { border-color: var(--ink); }
.wide { width: 100%; margin-top: 14px; }

.link {
  background: none; border: 0; color: var(--muted);
  font-family: var(--sans); font-size: 14px; text-decoration: underline;
  padding: 12px; cursor: pointer; display: block; margin: 26px auto 0;
}

/* ─────────── Σκελετός ─────────── */
main { max-width: 560px; margin: 0 auto; padding: 0 var(--pad) 92px; }
.screen { padding-top: 26px; animation: rise .22s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

.head { margin-bottom: 20px; }
.eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 6px;
}
.title { font-size: 27px; font-weight: 620; letter-spacing: -0.025em; margin: 0; }
.lede { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 8px 0 0; }
.sub {
  font-size: 13px; font-weight: 600; letter-spacing: .03em;
  color: var(--muted); margin: 26px 0 10px;
}
.note { color: var(--muted); font-size: 13px; margin: 4px 0 0; }

/* ─────────── Ο κάδος σε τομή ─────────── */
.bin-panel {
  display: grid; grid-template-columns: 132px 1fr; gap: 8px; align-items: center;
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--r); padding: 16px 18px;
}
.bin { width: 100%; height: auto; }
.bin .body { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.bin .body-line { fill: none; }
.bin .lid { fill: var(--ink); transform-origin: 50px 30px; transition: transform .35s ease; }
.bin .lid.open { transform: rotate(-24deg) translateY(-3px); }
.bin .fill { fill: var(--blue); opacity: .28; transition: y .5s ease, height .5s ease; }
.bin .fill.full { fill: var(--red); opacity: .32; }
.bin .dim line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.bin .dim text { font-family: var(--mono); font-size: 10px; fill: var(--muted); }

.readout {
  font-family: var(--mono); font-size: 44px; font-weight: 600;
  letter-spacing: -0.04em; line-height: 1; margin: 2px 0 0;
  font-variant-numeric: tabular-nums;
}
.readout.sm { font-size: 30px; }
.unit { font-size: .42em; color: var(--muted); margin-left: 3px; letter-spacing: 0; }

.chip {
  display: inline-block; font-family: var(--mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 20px; margin: 12px 0 0;
  background: var(--paper); color: var(--muted); border: 1px solid var(--hair);
}
.chip.open { background: color-mix(in srgb, var(--blue) 12%, white); color: var(--blue); border-color: transparent; }
.chip.full { background: color-mix(in srgb, var(--red) 12%, white); color: var(--red); border-color: transparent; }

/* ─────────── Κάρτες ─────────── */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.card {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--r); padding: 14px 16px;
}
.last-food { font-size: 17px; font-weight: 580; margin: 4px 0 0; letter-spacing: -0.01em; }

.notify {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--r); padding: 14px 16px; margin-top: 10px;
}
.notify-title { font-size: 15px; font-weight: 560; margin: 0; }

/* ─────────── Απόδειξη (ιστορικό) ─────────── */
.receipt {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--r); overflow: hidden;
}
.entry { border-bottom: 1px solid var(--hair); }
.entry:last-child { border-bottom: 0; }

.entry-row {
  display: grid; grid-template-columns: 58px 1fr auto;
  align-items: baseline; gap: 10px;
  width: 100%; padding: 13px 16px; text-align: left;
  background: none; border: 0; font-family: var(--sans);
  color: var(--ink); cursor: default;
}
.entry-row.can-open { cursor: pointer; }
.entry-row.can-open:active { background: var(--paper); }
.entry-row:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

.time { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.name { font-size: 15px; font-weight: 520; letter-spacing: -0.01em; }
.name-line { display: block; position: relative; }
.name-line .leader {
  position: absolute; left: 0; right: 0; bottom: 4px;
  border-bottom: 1px dotted var(--hair); z-index: 0;
}
.name-line > span { position: relative; background: var(--surface); padding-right: 6px; z-index: 1; }
.grams {
  font-family: var(--mono); font-size: 16px; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.grams em { font-style: normal; font-size: 11px; color: var(--muted); margin-left: 2px; }
.entry.below .grams, .entry.below .name { color: var(--muted); }
.tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--amber); display: block; margin-top: 2px;
}

/* Η συνταγή αντίστροφα */
.recipe { padding: 0 16px 14px 84px; }
.recipe-head {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
  padding: 2px 0 8px; border-top: 1px solid var(--hair); margin-top: -2px;
}
.ing { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 4px 0; }
.ing-name { font-size: 14px; }
.ing-g {
  font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums;
  min-width: 62px; text-align: right;
}
.ing-raw { font-family: var(--mono); font-size: 12px; color: var(--muted); min-width: 76px; text-align: right; }
.recipe-note { font-size: 12px; color: var(--muted); margin: 10px 0 0; line-height: 1.5; }

.empty { padding: 34px 20px; text-align: center; color: var(--muted); font-size: 14px; }

/* ─────────── Στατιστικά ─────────── */
.tabs { display: flex; gap: 6px; margin-top: 14px; }
.tabs button {
  flex: 1; padding: 9px 8px; font-size: 13px; font-family: var(--sans);
  background: var(--surface); color: var(--muted);
  border: 1px solid var(--hair); border-radius: 9px; cursor: pointer;
}
.tabs button.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.totals {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--r); padding: 16px;
}
.totals div p { margin: 0; }
.totals .big {
  font-family: var(--mono); font-size: 20px; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -0.03em;
}

.bars {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--r); padding: 6px 16px;
}
.bar { padding: 11px 0; border-bottom: 1px solid var(--hair); }
.bar:last-child { border-bottom: 0; }
.bar-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bar-name { font-size: 15px; font-weight: 520; }
.bar-val { font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; }
.bar-track { height: 5px; background: var(--paper); border-radius: 3px; margin-top: 7px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--blue); border-radius: 3px; transition: width .5s ease; }
.bar-raw { font-size: 12px; color: var(--muted); margin-top: 5px; }

/* ─────────── Εκκρεμή ─────────── */
.pending { display: grid; gap: 12px; }
.pend {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--r); overflow: hidden;
}
.pend img { width: 100%; display: block; aspect-ratio: 4/3; object-fit: cover; background: var(--paper); }
.pend-body { padding: 14px 16px; }
.pend-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pend-w { font-family: var(--mono); font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; }
.guesses { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.picks { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.pick {
  font-family: var(--sans); font-size: 13px; padding: 8px 12px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--hair); border-radius: 20px; cursor: pointer;
}
.pick:active { background: var(--ink); color: var(--paper); }
.pick:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

/* ─────────── Πλοήγηση ─────────── */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--hair);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar button {
  position: relative; display: flex; flex-direction: column;
  align-items: center; gap: 3px; padding: 9px 2px 8px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 10px; letter-spacing: -0.01em;
  color: var(--muted); white-space: nowrap;
}
.tabbar button svg {
  width: 21px; height: 21px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.tabbar button.on { color: var(--ink); }
.tabbar button:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; }
.dot {
  position: absolute; top: 7px; right: 50%; margin-right: -16px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--red);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ─────────── Τάση 14 ημερών ─────────── */
.trend {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--r); padding: 14px 16px 12px; margin-top: 10px;
}
.trend-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.trend-head .note { margin: 0; }
.spark { width: 100%; height: 64px; margin-top: 12px; display: block; }
.spark .bar-on    { fill: var(--blue); opacity: .55; }
.spark .bar-today { fill: var(--blue); }
.spark .bar-off   { fill: var(--hair); }