/* Famly – moduly: výdaje, jídlo, kalendář, kontakty, pejsci, nastavení (D18 split z main.css; pořadí pravidel zachováno) */
/* ========================================================================
   BUDGET MODUL
   ======================================================================== */

.budget-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.budget-toolbar .segmented { flex: 1; }

.segmented {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.segment {
  flex: 1;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-spring);
  white-space: nowrap;
}

.segment:active { transform: scale(0.96); }

.segment.active {
  background: var(--brand-gradient);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.category-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.category-row {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: transparent;
  border: none;
  border-radius: var(--r-lg);
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-spring);
}

.category-row:active {
  transform: scale(0.98);
  background: var(--state-active);
}

.category-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.category-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.category-row-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.category-name {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
}

.category-amount {
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  font-variant-numeric: tabular-nums;
}

.category-row-bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: 2px;
}

.text-xs { font-size: var(--fs-xs); }

.expense-item .list-item-trailing {
  font-variant-numeric: tabular-nums;
}

.expense-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.form-row {
  display: flex;
  gap: var(--sp-3);
}

.amount-input {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  text-align: center;
  height: 64px;
  letter-spacing: -0.02em;
}

.form-actions {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

.form-checkbox {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.form-checkbox input {
  width: 20px;
  height: 20px;
  accent-color: var(--brand-primary);
  cursor: pointer;
}

.category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
  white-space: nowrap;
}

.chip:active { transform: scale(0.95); }

.chip.selected {
  border-width: 1.5px;
  font-weight: var(--fw-semibold);
}

.chip svg { width: 16px; height: 16px; }

/* Řádek potraviny ve vyhledávání (picker + builder receptu) */
.food-row { border-radius: var(--r-md); overflow: hidden; position: relative; }
.food-row-main {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
}
.food-row-head {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  text-align: left;
  background: transparent;
  padding: 0;
}
.food-row-head:active { opacity: 0.65; }
.food-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.food-row-name { font-weight: var(--fw-medium); font-size: var(--fs-base); }
.food-row-sub { font-size: var(--fs-xs); color: var(--text-tertiary); }
.food-row-kcal {
  flex-shrink: 0;
  display: flex; align-items: baseline; gap: 3px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  white-space: nowrap;
}
.food-row-kcal span { font-size: var(--fs-xs); color: var(--text-tertiary); font-weight: var(--fw-regular); }

.food-thumb {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--glass-bg-soft);
}

.food-row-plus {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-gradient);
  color: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast) var(--ease-spring), background var(--t-fast);
}
.food-row-plus:active { transform: scale(0.86); }
.food-row-plus svg { width: 18px; height: 18px; }

/* Hvězdička oblíbené potraviny v řádku */
.food-row-fav {
  flex-shrink: 0;
  width: 30px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  transition: transform var(--t-fast) var(--ease-spring), color var(--t-fast);
}
.food-row-fav.active { color: #F59E0B; }
.food-row-fav:active { transform: scale(0.82); }
.food-row-fav svg { width: 18px; height: 18px; }

/* Odezva po přidání: zelený záblesk přes řádek + zelené „+" s ✓ */
.food-row::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--color-success);
  opacity: 0;
  pointer-events: none;
}
.food-row.added::after { animation: foodRowFlash 950ms var(--ease-out); }
@keyframes foodRowFlash { 0% { opacity: 0.18; } 100% { opacity: 0; } }
.food-row.added .food-row-plus { background: var(--color-success); }

.food-row-body {
  display: none;
  flex-direction: column;
  gap: var(--sp-2);
  padding: 0 var(--sp-3) var(--sp-3);
}
.food-row[data-open] .food-row-body {
  display: flex;
  animation: fadeIn var(--t-fast) var(--ease-out);
}
/* Presety porcí – auto šířka, zalamují se (dlouhé „sklenice" se vejde celé) */
.portion-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.portion-amount { display: flex; align-items: center; gap: var(--sp-1); }
.portion-input {
  width: 68px; height: 38px; min-height: 38px;
  padding: 0 var(--sp-2);
  text-align: center;
}
.portion-unit { color: var(--text-tertiary); font-size: var(--fs-sm); }
.portion-amount .btn { margin-left: auto; flex-shrink: 0; }
.food-row-preview { font-size: var(--fs-sm); color: var(--text-secondary); font-weight: var(--fw-medium); min-height: 16px; }

.portion-chip {
  padding: 6px 14px;
  font-size: var(--fs-sm);
  border-radius: var(--r-full);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  white-space: nowrap;
}
.portion-chip.selected {
  border-color: var(--brand-primary);
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
  background: var(--state-focus);
}
.portion-chip:active { transform: scale(0.93); }

/* Badge s počtem přidaných položek (vedle titulku pickeru) */
.picker-count-badge {
  flex-shrink: 0;
  min-width: 30px; height: 30px;
  padding: 0 9px;
  border-radius: var(--r-full);
  background: var(--brand-gradient);
  color: #fff;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast) var(--ease-spring);
}
.picker-count-badge:active { transform: scale(0.9); }

/* Seznam „Právě přidáno" – dodatečná editace gramáže a mazání */
.added-item {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}
.added-item + .added-item { margin-top: var(--sp-1); }
.added-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; background: transparent; text-align: left; padding: 0; }
.added-item-info:active { opacity: 0.65; }
.added-item-name { font-weight: var(--fw-medium); }
.added-item-macros { font-size: var(--fs-xs); color: var(--text-tertiary); }
.added-item-grams {
  width: 56px; height: 34px; min-height: 34px; text-align: center;
  padding: 0 var(--sp-1); flex-shrink: 0;
}
.added-item-unit { font-size: var(--fs-xs); color: var(--text-tertiary); flex-shrink: 0; }
.added-item-del {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-danger); background: var(--glass-bg-strong);
}
.added-item-del:active { transform: scale(0.9); }

/* Pitný režim (voda) */
.water-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.water-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.water-title { display: flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-bold); font-size: var(--fs-md); color: var(--text-primary); }
.water-title svg { color: var(--brand-secondary); }
.water-amount { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-tertiary); white-space: nowrap; background: transparent; }
.water-amount strong { color: var(--text-primary); font-weight: var(--fw-bold); font-size: var(--fs-md); }
.water-amount.done strong { color: var(--color-success); }
.water-amount:active { transform: scale(0.96); }
.water-goal-edit { display: inline-flex; color: var(--text-muted); }
.water-goal-edit svg { width: 13px; height: 13px; }
.water-glasses { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.water-glass {
  width: 32px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  transition: transform var(--t-fast) var(--ease-spring), color var(--t-base);
}
.water-glass .glass-water { fill: transparent; transition: fill var(--t-base) var(--ease-out); }
.water-glass.filled { color: var(--brand-secondary); }
.water-glass.filled .glass-water { fill: var(--brand-secondary); opacity: 0.85; }
.water-glass:active { transform: scale(0.85); }
.progress-fill.water-fill { background: linear-gradient(90deg, #22D3EE, #06B6D4); }
.water-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.water-actions .btn { flex: 1; min-width: 96px; }

/* Vodní dlaždice na dashboardu */
.dash-water { display: flex; align-items: center; gap: var(--sp-3); }
.dash-water-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-3); background: transparent; text-align: left; padding: 0; }
.dash-water-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--r-md); background: rgba(6,182,212,0.15); color: var(--brand-secondary); display: flex; align-items: center; justify-content: center; }
.dash-water-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.dash-water-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.dash-water-label { font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--text-primary); }
.dash-water-val { font-size: var(--fs-sm); color: var(--text-secondary); white-space: nowrap; }
.dash-water-val.done { color: var(--color-success); }
.dash-water-add {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-gradient); color: #fff; box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast) var(--ease-spring);
}
.dash-water-add:active { transform: scale(0.86); }
.dash-water-add svg { width: 20px; height: 20px; }

/* Oslava splněného cíle (Sedmáček + konfety) */
.goal-celebrate {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: var(--z-toast);
  pointer-events: none; opacity: 0;
  transition: opacity 300ms var(--ease-out);
}
.goal-celebrate.show { opacity: 1; pointer-events: auto; }
.goal-celebrate-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-3xl);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-strong);
  box-shadow: var(--shadow-xl);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transform: scale(0.8);
  transition: transform 400ms var(--ease-spring);
}
.goal-celebrate.show .goal-celebrate-card { transform: scale(1); }
.goal-celebrate-msg {
  font-size: var(--fs-md); font-weight: var(--fw-bold);
  color: var(--text-primary); text-align: center; max-width: 22ch;
}

/* Picker na celou obrazovku (přidávání jídla) */
.modal-backdrop.picker-full { align-items: flex-start; }
.modal-backdrop.picker-full .picker-sheet {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  height: calc(100dvh - var(--kb-height, 0px));
  max-height: calc(100dvh - var(--kb-height, 0px));
  border-radius: 0;
  padding-top: calc(var(--safe-top) + var(--sp-3));
}

/* Dva filtry ve výchozím pohledu pickeru (Potraviny / Časté) */
.picker-filters { display: flex; gap: var(--sp-2); }
.picker-select-wrap { flex: 1; position: relative; }
.picker-select-wrap::after {
  content: '';
  position: absolute; right: 14px; top: 45%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--text-tertiary);
  border-bottom: 2px solid var(--text-tertiary);
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}
.picker-select {
  width: 100%;
  appearance: none; -webkit-appearance: none;
  padding: 10px 34px 10px 14px;
  border-radius: var(--r-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.picker-select:focus { outline: none; border-color: var(--brand-primary); }

/* Záložky nahoře v pickeru (Hledat / Čárový kód / Vlastní) */
.picker-tabs { display: flex; gap: var(--sp-2); }
.picker-tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-height: 62px;
  padding: var(--sp-2) var(--sp-1);
  border-radius: var(--r-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  transition: transform var(--t-fast) var(--ease-spring), background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.picker-tab-ico { display: flex; }
.picker-tab.active {
  background: var(--brand-gradient-soft);
  border-color: var(--brand-primary);
  color: var(--brand-primary-light);
}
.picker-tab:active { transform: scale(0.94); }

/* Dlouhý text chipu (např. nedávné jídlo) nesmí přetéct – zkrátit s … */
.chip { max-width: 100%; }
.chip > span, .chip { min-width: 0; }
.tag-chips .chip { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.meals-toggle {
  width: 100%;
}

/* Tydenni grid */
.week-grid {
  display: grid;
  /* minmax(0,1fr) místo 1fr: jinak by se sloupce nezmenšily pod min. obsah buňky
     a 7 dní by se na úzkém telefonu nevešlo (neděle přetékala mimo obrazovku). */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--sp-1);
}

.week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-1);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  cursor: pointer;
  min-width: 0;
  overflow: hidden;
  transition: transform var(--t-fast) var(--ease-spring),
              border-color var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out);
  min-height: 110px;
}

.week-day:active { transform: scale(0.96); }

.week-day.today {
  border-color: var(--brand-primary);
  background: var(--brand-gradient-soft);
}

.week-day-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.week-day-name {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.week-day-date {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
}

.week-day.today .week-day-date { color: var(--brand-primary-light); }

.week-day-meals {
  display: flex;
  gap: 2px;
  justify-content: center;
}

.week-day-meal-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.week-day-meal-dot.empty {
  background: var(--glass-bg-strong);
  opacity: 0.5;
}

.week-day-kcal {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  max-width: 100%;
}

.week-day-progress {
  width: 100%;
  margin-top: auto;
}

/* Denni detail */
.day-summary {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.day-kcal-big {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-3);
  min-width: 90px;
}

.day-kcal-big .text-lg {
  font-size: var(--fs-2xl);
  letter-spacing: -0.02em;
}

/* Kalorický progress pod denním souhrnem */
.day-cal-bar { margin-top: var(--sp-4); }
.day-cal-legend {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}

/* Meal slots */
.meal-slots {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.meal-slot {
  background: var(--glass-bg);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  padding: var(--sp-4);
  position: relative;
}

.meal-slot::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  pointer-events: none;
}

.meal-slot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-3);
}

.meal-slot-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.meal-empty {
  display: block;
  width: 100%;
  padding: var(--sp-4);
  text-align: center;
  border: 1.5px dashed var(--glass-border-strong);
  border-radius: var(--r-md);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-spring);
}

.meal-empty:hover { background: var(--state-hover); }
.meal-empty:active { transform: scale(0.98); background: var(--state-active); }

.meal-items {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.meal-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--glass-bg-soft);
  border-radius: var(--r-md);
}

/* Hlavička sekce panelů (tlačítko Upravit panely) */
.day-toolbar {
  display: flex;
  gap: var(--sp-1);
  padding: var(--sp-1);
  background: var(--glass-bg-soft);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  margin-bottom: calc(-1 * var(--sp-1));
}

.day-toolbar-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-2);
  background: transparent;
  border: none;
  border-radius: var(--r-md);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-spring);
}

.day-toolbar-btn:hover { background: var(--state-hover); color: var(--text-primary); }
.day-toolbar-btn:active { transform: scale(0.96); }
.day-toolbar-btn svg { width: 18px; height: 18px; flex: none; opacity: 0.8; }

/* Editor panelů jídel */
.mt-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--glass-border);
}
.mt-drag {
  flex: none;
  width: 30px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  color: var(--text-tertiary);
  cursor: grab;
  touch-action: none;       /* aby tažení nescrollovalo stránku */
}
.mt-drag:active { cursor: grabbing; }
.mt-row.dragging {
  opacity: 0.9;
  background: var(--glass-bg-strong);
  border-radius: var(--r-sm);
  border-bottom-color: transparent;
}
.mt-row .form-input { height: 38px; padding: 0 10px; font-size: 16px; }
.mt-row [data-label] { flex: 1; min-width: 0; }
.mt-row .mt-cat { flex: none; width: 96px; }
.btn-icon-sm.danger { color: var(--color-danger); }
.btn-icon-sm:disabled { opacity: 0.3; pointer-events: none; }

/* Klikací část jídla – otevře detail receptu */
.meal-item-info {
  flex: 1;
  min-width: 0;
  text-align: left;
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  transition: opacity var(--t-fast) var(--ease-out);
}
.meal-item-info:active { opacity: 0.6; }

.btn-icon-sm {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: background-color var(--t-fast), color var(--t-fast);
}

/* Vizuál zůstává 28px, ale dotykový cíl je ~44px (Apple HIG). Sousední
   tlačítka se zónami mírně překrývají – vyhrává to bližší středu tapu. */
.btn-icon-sm::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}

.btn-icon-sm:hover {
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-danger);
}

.min-w-0 { min-width: 0; }

/* Recipe list */
.recipe-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.recipe-card {
  padding: var(--sp-3) var(--sp-4);
  background: var(--glass-bg-soft);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-spring),
              background-color var(--t-fast) var(--ease-out);
  text-align: left;
  width: 100%;
}

.recipe-card:active { transform: scale(0.98); }
.recipe-card:hover { background: var(--state-hover); }

.recipe-card-button {
  background: var(--glass-bg-soft);
  border: 1px solid var(--glass-border);
}

.recipe-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}

.recipe-name {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  margin-bottom: 2px;
}

.recipe-kcal {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.recipe-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
}

.tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding: var(--sp-1) 0;
}

.tag-chips::-webkit-scrollbar { display: none; }

/* Filtry receptů – jeden vodorovně scrollovací řádek pilulek (iOS/Apple styl) */
.filter-row {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-1) 0;
  /* jemné odstřižení na krajích naznačí, že řádek jde scrollovat */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
.filter-row::-webkit-scrollbar { display: none; }
.filter-row .chip { flex: 0 0 auto; }

.recipe-sort {
  height: 34px;
  min-height: 34px;
  width: auto;
  max-width: 100%;
  padding: 0 var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.recipe-toolbar { display: flex; justify-content: flex-start; margin-top: var(--sp-2); }

/* === Recepty – fotografická mřížka === */
.recipe-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.recipe-gcard {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  text-align: left;
  background: var(--glass-bg-soft);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-spring),
              background-color var(--t-fast) var(--ease-out);
}
.recipe-gcard:active { transform: scale(0.97); }
.recipe-gcard:hover { background: var(--state-hover); }

.recipe-gcard-media {
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.recipe-gcard-media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recipe-gcard-media > svg { width: 30px; height: 30px; opacity: 0.9; }

.recipe-gcard-kcal {
  position: absolute;
  bottom: 6px;
  right: 6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.recipe-gcard-fav {
  position: absolute;
  top: 6px;
  right: 6px;
  line-height: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.recipe-gcard-body {
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}
.recipe-gcard-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.recipe-gcard-macros {
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.recipe-gcard-body .badge { margin-top: 2px; }

/* === Detail receptu === */
.recipe-hero {
  position: relative;
  height: 150px;
  flex-shrink: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.recipe-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recipe-hero > svg { width: 42px; height: 42px; opacity: 0.9; }

.recipe-hero-btn {
  position: absolute;
  top: var(--sp-2);
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.recipe-hero-btn:active { transform: scale(0.9); }
.recipe-hero-btn.left { left: var(--sp-2); }
.recipe-hero-btn.right { right: var(--sp-2); }
.recipe-hero-btn.photo { top: auto; bottom: var(--sp-2); right: var(--sp-2); }

.recipe-add-row { display: flex; gap: var(--sp-2); align-items: stretch; }

.portion-stepper {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 0 var(--sp-1);
  flex-shrink: 0;
}
.stepper-btn {
  width: 36px;
  height: 44px;
  background: none;
  border: none;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.stepper-btn:disabled { opacity: 0.3; }
.stepper-btn:active { transform: scale(0.9); }
.portion-stepper-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  min-width: 58px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.ingredient-rows { display: flex; flex-direction: column; }
.ingredient-row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--glass-border);
  font-size: var(--fs-sm);
}
.ingredient-row:last-child { border-bottom: none; }
.ingredient-amount {
  color: var(--text-tertiary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Akce v prázdném stavu (Recepty bez knihovny) */
.empty-actions {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
  margin-top: var(--sp-4);
}

/* Náhled receptu v pickeru (foto, nebo barevný blok kategorie s ikonou) */
.picker-thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  flex-shrink: 0;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.picker-thumb svg { width: 20px; height: 20px; }

.recipe-steps { display: flex; flex-direction: column; gap: var(--sp-2); }
.recipe-step {
  display: flex;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.45;
}
.recipe-step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 1px;
  background: var(--glass-bg-strong);
  color: var(--text-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Shopping list */
.shopping-items {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.shopping-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background-color var(--t-fast);
}

.shopping-item:hover { background: var(--state-hover); }
.shopping-item input { display: none; }

.shopping-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--glass-border-strong);
  flex-shrink: 0;
  position: relative;
  transition: all var(--t-fast) var(--ease-spring);
}

.shopping-item.checked .shopping-check {
  background: var(--brand-gradient);
  border-color: transparent;
}

.shopping-item.checked .shopping-check::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.shopping-name {
  flex: 1;
  text-transform: capitalize;
  transition: opacity var(--t-base), text-decoration var(--t-base);
}

.shopping-item.checked .shopping-name {
  text-decoration: line-through;
  opacity: 0.5;
}

.shopping-amount {
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-medium);
}


/* ========================================================================
   CALENDAR
   ======================================================================== */

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.calendar-month-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  text-transform: capitalize;
  margin: 0;
  flex: 1;
  text-align: center;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: var(--sp-2);
}

.calendar-weekdays span {
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 0;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.cal-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 6px 2px;
  background: transparent;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  position: relative;
  transition: background-color var(--t-fast), transform var(--t-fast) var(--ease-spring);
  min-height: 44px;
}

.cal-day:active { transform: scale(0.92); }
.cal-day:hover { background: var(--state-hover); }

.cal-day.other-month .cal-day-num { color: var(--text-muted); opacity: 0.5; }

.cal-day.today .cal-day-num {
  background: var(--brand-gradient);
  color: #fff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
}

.cal-day.selected {
  background: var(--brand-gradient-soft);
  border: 1px solid var(--brand-primary);
}

.cal-day-num {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}

.cal-day-dots {
  display: flex;
  gap: 2px;
  margin-top: 3px;
  justify-content: center;
}

.cal-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
}

/* Týdenní agenda */
.week-agenda { display: flex; flex-direction: column; gap: var(--sp-2); }
.wk-day {
  display: flex; flex-direction: column; gap: var(--sp-1);
  text-align: left; width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--glass-bg-soft);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-spring);
}
.wk-day:active { transform: scale(0.99); }
.wk-day.today { border-color: var(--section-accent); background: var(--section-grad); }
.wk-day-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.wk-day-name { font-weight: var(--fw-semibold); }
.wk-day-date { font-size: var(--fs-sm); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.wk-item { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.wk-item-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-muted .wk-item-t { color: var(--text-tertiary); }
.wk-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.wk-empty { font-size: var(--fs-sm); color: var(--text-muted); }

/* ========================================================================
   CONTACTS
   ======================================================================== */

.contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.contact-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--glass-bg-soft);
  cursor: pointer;
  transition: background-color var(--t-fast), transform var(--t-fast) var(--ease-spring);
}

.contact-card:active { transform: scale(0.98); }
.contact-card:hover { background: var(--state-hover); }

.contact-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  flex-shrink: 0;
}

.contact-info {
  flex: 1;
  min-width: 0;
}

.contact-name {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  line-height: var(--lh-tight);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.contact-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: 2px;
  flex-wrap: wrap;
}

.contact-actions {
  display: flex;
  gap: var(--sp-1);
  flex-shrink: 0;
}

.contact-actions .btn-icon {
  width: 42px;
  height: 42px;
}

/* ========================================================================
   DOGS
   ======================================================================== */

.dogs-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.dog-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--glass-bg);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  text-align: left;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-spring),
              border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.dog-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  pointer-events: none;
}

.dog-card:active { transform: scale(0.98); }
.dog-card:hover {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-md), var(--shadow-glow);
}

.dog-photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--brand-gradient-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--glass-border-strong);
}

.dog-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dog-photo-lg {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--brand-gradient-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--glass-border-strong);
}

.dog-photo-lg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dog-photo-placeholder {
  color: var(--brand-primary-light);
}

.dog-info {
  flex: 1;
  min-width: 0;
}

.dog-name {
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
}

.dog-stats {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.dog-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

/* Vaccinations timeline */
.vaccination-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: var(--sp-4);
}

.vaccination-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--glass-border-strong);
}

.vaccination-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  cursor: pointer;
  position: relative;
  transition: opacity var(--t-fast);
  width: 100%;
  text-align: left;
  background: none;
  border: none;
}

.vaccination-item:hover { opacity: 0.85; }

.vaccination-item.past .vac-dot {
  background: var(--color-success);
}

.vaccination-item.future .vac-dot {
  background: var(--brand-primary);
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.5);
}

.vac-dot {
  position: absolute;
  left: -22px;
  top: 18px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 3px solid var(--bg-base);
  flex-shrink: 0;
}

.vac-content {
  flex: 1;
  min-width: 0;
}

.vac-name {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
}

.vac-date {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-top: 2px;
}

.vac-next {
  font-size: var(--fs-xs);
  color: var(--brand-primary-light);
  font-weight: var(--fw-medium);
  margin-top: 2px;
}

/* ========================================================================
   SETTINGS
   ======================================================================== */

.settings-rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.settings-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background-color var(--t-fast), transform var(--t-fast) var(--ease-spring);
}

.settings-row:active {
  transform: scale(0.98);
  background: var(--state-active);
}

.settings-row:hover { background: var(--state-hover); }

.settings-row.danger { color: var(--color-danger); }

.settings-row-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--glass-bg-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.settings-row.danger .settings-row-icon {
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-danger);
}

/* Stacked settings row (e.g. theme picker) */
.settings-row-stacked {
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-3);
  cursor: default;
}
.settings-row-stacked:active { transform: none; background: transparent; }
.settings-row-stacked:hover { background: transparent; }

.theme-segmented { width: 100%; }
.theme-segmented .segment { flex: 1; }

/* Avatar edit overlay */
.avatar-edit-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease-out);
  border-radius: 50%;
}

.avatar:hover .avatar-edit-overlay,
.avatar:active .avatar-edit-overlay {
  opacity: 1;
}

/* ========================================================================
   UPDATE BANNER
   ======================================================================== */

.update-banner {
  position: fixed;
  bottom: calc(var(--nav-height) + var(--safe-bottom) + var(--sp-3));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  border-radius: var(--r-xl);
  padding: var(--sp-3) var(--sp-4);
  min-width: 280px;
  animation: slideUp 400ms var(--ease-spring);
  box-shadow: var(--shadow-xl);
}

.update-banner-content {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.update-banner-content .btn { flex-shrink: 0; }