/* jidlo21 — FRONT (mobil). Mobile-first, max šířka ~480px. */

.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg-app);
  padding: 0 16px calc(96px + env(safe-area-inset-bottom));
}

/* header */
.app-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 2px 6px;
}
.logo { font: 800 22px var(--font-head); letter-spacing: -.02em; color: var(--ink-2); }
.logo b { color: var(--accent); }

.screen-title { font: 600 31px/1.04 var(--font-head); letter-spacing: -.02em; margin: 10px 2px 2px; }
.screen-sub { color: var(--ink-muted); font: 500 14px var(--font-body); margin: 0 2px 14px; }

.back {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 15px var(--font-body); color: var(--ink-secondary);
  padding: 14px 2px 6px;
}

/* den */
.day { margin-top: 18px; }
.day-head {
  display: flex; align-items: baseline; gap: 8px;
  padding-bottom: 8px; border-bottom: 1px solid var(--hairline); margin-bottom: 8px;
}
.day-name { font: 700 19px var(--font-head); letter-spacing: -.01em; }
.day-date { color: var(--ink-faint); font: 500 12px var(--font-body); }

/* řádek jídla */
.dish {
  display: flex; align-items: center; gap: 11px;
  background: var(--bg-surface); border: 1px solid var(--hairline);
  border-radius: var(--r-card); padding: 11px 12px; margin-bottom: 8px;
}
.dish.is-ordered {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.dish-thumb {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: var(--r-row);
  background: var(--bg-inset); color: var(--ink-faint);
  display: flex; align-items: center; justify-content: center; font: 700 16px var(--font-head);
}
.dish.is-ordered .dish-thumb { background: #fff; color: var(--accent-ink); }
.dish-body { flex: 1 1 auto; min-width: 0; }
.dish-name { font: 600 14px/1.25 var(--font-body); color: var(--ink); }
.dish-price { margin: 0 2px; }
.dish-toggle {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid var(--border-dashed); background: #fff; color: #B0A797;
  font: 700 18px var(--font-body); display: flex; align-items: center; justify-content: center;
  transition: background .12s, border-color .12s;
}
.dish.is-ordered .dish-toggle { background: var(--accent); border-color: var(--accent); color: #fff; }

/* week strip (Můj týden / Skupina) */
.week-strip { display: flex; gap: 8px; margin: 6px 0 18px; }
.week-day {
  flex: 1; text-align: center; background: #fff; border: 1px solid var(--hairline);
  border-radius: 12px; padding: 10px 0;
}
.week-day .wd { font: 700 12px var(--font-body); color: var(--ink-secondary); }
.week-day .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-dashed); margin: 6px auto 0; }
.week-day.has { background: var(--accent-soft); }
.week-day.has .dot { background: var(--accent); }

/* sticky souhrn */
.sticky-summary {
  position: fixed; left: 0; right: 0; bottom: 64px; z-index: 20;
  max-width: 480px; margin: 0 auto; padding: 10px 16px;
}
.sticky-card {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-surface); border: 1px solid var(--hairline);
  border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow-phone);
}
.sticky-card .lab { font: 700 14px var(--font-body); }
.sticky-card .sub { font: 500 12px var(--font-body); color: var(--ink-muted); }
.sticky-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: #fff; border-radius: 12px;
  padding: 10px 14px; font: 700 14px var(--font-body);
}

/* bottom tab bar */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  max-width: 480px; margin: 0 auto;
  display: flex; background: var(--bg-surface);
  border-top: 1px solid var(--hairline);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  font: 600 11px var(--font-body); color: var(--ink-muted); position: relative;
}
.tab .tdot { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.tab.active { color: var(--accent-ink); font-weight: 700; }
.tab.active .tdot { background: var(--accent); }
.tab .tbadge {
  position: absolute; top: -4px; right: 50%; transform: translateX(18px);
}

/* row list (souhrn, můj týden) */
.line {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border: 1px solid var(--hairline); border-radius: 13px;
  padding: 12px 14px; margin-bottom: 8px;
}
.line .ldot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 10px; }
.line-empty {
  border: 1px dashed var(--border-dashed); color: var(--ink-faint);
  background: transparent; font: 500 13px var(--font-body);
}
.group-day-label { margin: 16px 2px 8px; }

/* detail */
.photo {
  height: 200px; border-radius: 16px; margin: 8px 0 14px;
  background: repeating-linear-gradient(135deg, #F2EDE4, #F2EDE4 10px, #FBF9F5 10px, #FBF9F5 20px);
  display: flex; align-items: center; justify-content: center; color: var(--ink-faint);
  font: 600 13px var(--font-body); border: 1px solid var(--hairline);
}
.portion-row { display: flex; gap: 10px; margin: 8px 0 16px; }
.portion {
  flex: 1; text-align: center; padding: 13px; border-radius: 13px;
  border: 1px solid var(--border-strong); background: #fff;
  font: 700 13.5px var(--font-body); color: var(--ink-secondary);
}
.portion.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }

.bottom-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  max-width: 480px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--bg-surface); border-top: 1px solid var(--hairline);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}

/* group highlight + osoby */
.highlight {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--accent-soft); border-radius: 16px; padding: 16px 18px; margin-bottom: 14px;
}
.highlight .h-lab { font: 700 15px var(--font-body); color: var(--accent-ink); }
.highlight .h-amt { font: 700 24px var(--font-head); color: var(--accent-ink); }
.person {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--hairline); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px;
}
.person .p-name { font: 700 14px var(--font-body); }
.person .p-meta { font: 500 12px var(--font-body); color: var(--ink-muted); }
.person .p-amt { margin-left: auto; }

/* QR platba */
.qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 0; }
.qr-img { width: 220px; height: 220px; border-radius: 14px; border: 1px solid var(--hairline); background: #fff; }
.qr-placeholder {
  width: 220px; height: 220px; border-radius: 14px; border: 1px dashed var(--border-dashed);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--ink-faint); font: 500 12px var(--font-body); padding: 16px;
}
.spayd {
  width: 100%; word-break: break-all; background: var(--bg-inset-2);
  border: 1px solid var(--hairline); border-radius: 10px; padding: 10px;
  font: 500 11px ui-monospace, monospace; color: var(--ink-secondary);
}
.pay-amount { font: 700 30px var(--font-head); letter-spacing: -.02em; }
.status-tag { display: inline-flex; padding: 4px 10px; border-radius: 8px; font: 700 11px var(--font-body); text-transform: uppercase; letter-spacing: .04em; }
.status-open { background: var(--new-bg); color: var(--new-ink); }
.status-partial { background: var(--bg-inset); color: var(--ink-secondary); }
.status-settled { background: var(--accent-soft); color: var(--accent-ink); }

.flash { border-radius: 12px; padding: 12px 14px; margin: 10px 0; font: 600 13px var(--font-body); }
.flash-success { background: var(--accent-soft); color: var(--accent-ink); }
.flash-info { background: var(--bg-inset); color: var(--ink-secondary); }