/* ═══════════════════════════════════════════════════════════
   FoodTracker — Компоненты (Components)
   ═══════════════════════════════════════════════════════════
   Все переиспользуемые UI-элементы: карточки, кнопки, формы,
   модалки, тосты, загрузка, автокомплит, трей, теги, пилюли,
   тоглы, реакции, voice, FAB, фото, варианты, чипы.
   ═══════════════════════════════════════════════════════════ */

/* ─── Карточки ─── */
.card{
  background:var(--card-glass);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
  border:1px solid var(--border);border-radius:var(--r);
  padding:var(--space-4xl);margin-bottom:var(--space-2xl);
  box-shadow:var(--shadow);transition:background var(--transition-slow)
}
.card h3{font-size:var(--font-lg);font-weight:600;margin-bottom:var(--space-2xl);display:flex;align-items:center;gap:var(--space-md)}
.card h3 .h-icon{color:var(--pri)}
.card p.hint{font-size:var(--font-xl);color:var(--muted);margin-bottom:var(--space-xl)}

/* ─── Формы ─── */
.form-group{margin-bottom:var(--space-xl)}
.form-label{display:block;font-size:var(--font-base);color:var(--muted);margin-bottom:5px}
.form-input,.form-select,.form-textarea{
  width:100%;padding:11px 14px;
  background:var(--input);border:1px solid var(--border);
  border-radius:var(--r-sm);color:var(--text);
  font-size:var(--font-lg);font-family:inherit;
  transition:border var(--transition),background var(--transition)
}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--pri)}
input[type="time"].form-input{width:auto;max-width:140px}
.form-textarea{resize:vertical;min-height:80px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}

/* ─── Радио-группа ─── */
.radio-group{display:flex;gap:var(--space-md);margin-bottom:var(--space-xl)}
.radio-group label{flex:1;padding:10px;text-align:center;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--input);cursor:pointer;font-size:var(--font-md);transition:all var(--transition)}
.radio-group input{display:none}
.radio-group input:checked+span{color:var(--pri)}
.radio-group label:has(input:checked){border-color:var(--pri);background:rgba(var(--pri-rgb),.1)}

/* ─── Кнопки ─── */
.btn{padding:12px 22px;border-radius:var(--r-sm);border:none;font-size:var(--font-lg);font-weight:500;cursor:pointer;transition:all var(--transition);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-md);width:100%}
.btn-pri{background:var(--accent);color:#fff}
.btn-pri:hover{background:var(--accent2)}
.btn-ok{background:var(--ok);color:#000}
.btn-err{background:var(--err);color:#fff}
.btn-outline{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-outline:hover{background:var(--overlay2)}
.btn-sm{padding:8px 14px;font-size:var(--font-base);width:auto}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ─── Статистика ─── */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md);margin-bottom:var(--space-2xl)}
.stat{background:var(--card-glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:var(--r);padding:var(--space-xl) var(--space-md);text-align:center;box-shadow:var(--shadow)}
.stat-val{font-size:var(--font-4xl);font-weight:700;color:var(--accent)}
.stat-lbl{font-size:10px;color:var(--muted);margin-top:2px}

/* ─── Макро-бары ─── */
.macro-bars{display:flex;flex-direction:column;gap:var(--space-md);margin-top:var(--space-xl)}
.macro-bar{display:flex;align-items:center;gap:10px}
.macro-bar .label{width:52px;font-size:var(--font-xl);color:var(--muted);flex-shrink:0}
.macro-bar .bar{flex:1;height:8px;background:var(--overlay2);border-radius:4px;overflow:hidden;position:relative;max-width:calc(100% - 160px)}
.macro-bar .fill{height:100%;border-radius:4px;transition:width .5s ease}
.macro-bar .val{min-width:90px;font-size:var(--font-xl);text-align:right;color:var(--text);white-space:nowrap}

/* ─── Реакции ─── */
.reaction-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.reaction-row .rlabel{width:110px;font-size:var(--font-base);color:var(--muted)}
.reaction-row .dots{display:flex;gap:var(--space-sm)}
.reaction-row .dot{width:28px;height:28px;border-radius:var(--r-full);border:1px solid var(--border);background:var(--input);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:var(--font-xl);transition:all var(--transition)}
.reaction-row .dot.active{border-color:var(--pri);background:rgba(var(--pri-rgb),.15);color:var(--pri);font-weight:600}
.reaction-row .dot.high{border-color:var(--err);background:rgba(var(--err-rgb),.12);color:var(--err)}

/* ─── Диаграммы ─── */
.chart-bars{display:flex;align-items:flex-end;gap:4px;height:120px;padding:10px 0}
.chart-bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.chart-bar .bar{width:100%;border-radius:4px 4px 0 0;transition:height var(--transition-slow);min-height:2px}
.chart-bar .day{font-size:var(--font-xs);color:var(--muted)}
.chart-bar .val{font-size:var(--font-xs);color:var(--muted)}
.week-chart{margin-top:10px}

/* ─── Методы ввода ─── */
.input-methods{display:flex;gap:var(--space-md);margin-bottom:var(--space-2xl)}
.input-method{flex:1;padding:var(--space-2xl);text-align:center;border-radius:var(--r);border:1px solid var(--border);background:var(--card-glass);cursor:pointer;transition:all var(--transition)}
.input-method.active{border-color:var(--pri);background:rgba(var(--pri-rgb),.08)}
.input-method .icon{font-size:24px;margin-bottom:4px;display:flex;align-items:center;justify-content:center}
.input-method .icon svg{width:24px;height:24px;color:var(--pri)}
.input-method .label{font-size:var(--font-xl);color:var(--muted)}

/* ─── Meal Type Pills ─── */
.meal-types{display:flex;gap:var(--space-sm);flex-wrap:wrap;margin-bottom:var(--space-xl)}
.meal-pill{padding:var(--space-md) var(--space-3xl);border-radius:var(--r-pill);border:1px solid var(--border);background:var(--input);cursor:pointer;font-size:var(--font-base);transition:all var(--transition)}
.meal-pill.active{border-color:var(--accent);background:rgba(var(--accent-rgb),.12);color:var(--accent)}

/* ─── Тосты ─── */
.toast-box{position:fixed;top:var(--space-3xl);right:var(--space-3xl);z-index:9999;display:flex;flex-direction:column;gap:var(--space-md)}
.toast{padding:var(--space-xl) var(--space-2xl);border-radius:var(--r-sm);font-size:var(--font-md);max-width:320px;animation:slideIn var(--transition-slow) ease;backdrop-filter:blur(8px)}
.toast-ok{background:rgba(var(--ok-rgb),.9);color:#000}
.toast-err{background:rgba(var(--err-rgb),.9);color:#fff}

/* ─── Загрузка ─── */
.loading{display:flex;align-items:center;justify-content:center;padding:40px;color:var(--muted)}
.spinner{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:var(--r-full);animation:spin .6s linear infinite;margin-right:10px}

/* ─── Голосовой ввод ─── */
.voice-btn{width:64px;height:64px;border-radius:var(--r-full);border:none;background:var(--accent);color:#fff;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:var(--space-4xl) auto;transition:all var(--transition);position:relative}
.voice-btn svg{width:28px;height:28px}
.voice-btn.recording{background:var(--err);animation:pulse-rec 1s infinite}
.voice-text{text-align:center;font-size:var(--font-base);color:var(--muted);margin-top:var(--space-md)}

/* ─── Автокомплит ─── */
.ac-wrap{position:relative}
.ac-list{position:absolute;left:0;right:0;top:100%;z-index:50;background:var(--card);border:1px solid var(--border);border-radius:0 0 var(--r-sm) var(--r-sm);max-height:260px;overflow-y:auto;display:none;box-shadow:var(--shadow-lg)}
.ac-list.open{display:block}
.ac-item{display:flex;align-items:center;padding:10px 12px;cursor:pointer;transition:background .12s;border-bottom:1px solid var(--overlay)}
.ac-item:last-child{border-bottom:none}
.ac-item:hover,.ac-item:focus{background:rgba(var(--pri-rgb),.06)}
.ac-item .ac-info{flex:1;min-width:0}
.ac-item .ac-name{font-size:var(--font-base);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-item .ac-meta{font-size:var(--font-sm);color:var(--muted);margin-top:1px}
.ac-item .ac-meta .ac-cal{color:var(--accent);font-weight:600}
.ac-item .ac-plus{width:26px;height:26px;border-radius:var(--r-full);border:1px solid var(--pri);color:var(--pri);background:none;display:flex;align-items:center;justify-content:center;font-size:var(--font-lg);flex-shrink:0;margin-left:var(--space-md);transition:all .12s}
.ac-item:hover .ac-plus{background:var(--pri);color:#fff}

/* FatSecret source */
.ac-item-fs{background:rgba(60,130,246,.03)}
.ac-source-badge{display:inline-block;padding:1px 5px;border-radius:4px;font-size:var(--font-xs);font-weight:600;margin-left:4px;vertical-align:middle}
.ac-source-fs{background:rgba(60,130,246,.12);color:#3c82f6}
[data-theme="dark"] .ac-source-fs{background:rgba(96,165,250,.15);color:#60a5fa}
[data-theme="dark"] .ac-item-fs{background:rgba(96,165,250,.04)}

/* ─── Food Tray (Трей продуктов) ─── */
.food-tray{margin-top:10px}
.food-tray-title{font-size:var(--font-base);font-weight:600;margin-bottom:var(--space-sm);display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm)}
.food-tray-title svg{width:var(--icon-md);height:var(--icon-md);color:var(--pri)}
.food-tray-total{font-size:var(--font-xl);color:var(--accent);font-weight:600}
.tray-item{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md) 10px;border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:4px;background:var(--card-glass)}
.tray-item .ti-name{flex:1;font-size:var(--font-base);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tray-item .ti-weight{width:56px;padding:5px 6px;background:var(--input);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:var(--font-base);text-align:center}
.tray-item .ti-weight:focus{border-color:var(--pri);outline:none}
.tray-item .ti-unit{font-size:var(--font-sm);color:var(--muted)}
.tray-item .ti-cal{font-size:var(--font-xl);color:var(--accent);font-weight:600;min-width:50px;text-align:right}
.tray-item .ti-del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:var(--font-md);padding:2px}
.tray-item .ti-del:hover{color:var(--err)}
.tray-hint{font-size:var(--font-sm);color:var(--muted);text-align:center;margin-top:var(--space-sm)}

/* ─── Фото-зона ─── */
.photo-area{border:2px dashed var(--border);border-radius:var(--r);padding:24px;text-align:center;transition:border-color var(--transition);position:relative;overflow:hidden}
.photo-area:hover{border-color:var(--pri)}
.photo-area img{max-width:100%;border-radius:var(--r-sm);margin-top:10px}
.photo-source-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border:2px solid var(--border);border-radius:var(--r);background:var(--card-glass);color:var(--text);font-size:var(--font-base);font-weight:500;cursor:pointer;transition:all var(--transition)}
.photo-source-btn:hover{border-color:var(--pri);color:var(--pri)}
.photo-source-btn:active{transform:scale(.97)}
.photo-source-btn svg{color:var(--muted)}

/* ─── Карточки вариантов ─── */
.variant-card{background:var(--card-glass);border:2px solid var(--border);border-radius:var(--r);padding:var(--space-2xl);margin-bottom:10px;cursor:pointer;transition:all var(--transition)}
.variant-card:hover{border-color:var(--pri)}
.variant-card.selected{border-color:var(--ok);background:rgba(var(--ok-rgb),.04)}
.variant-card .v-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-sm)}
.variant-card .v-label{font-size:var(--font-md);font-weight:600;color:var(--pri)}
.variant-card .v-check{width:22px;height:22px;border:2px solid var(--border);border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;font-size:var(--font-md);transition:all var(--transition)}
.variant-card.selected .v-check{border-color:var(--ok);background:var(--ok);color:#000}
.variant-card .v-desc{font-size:var(--font-base);color:var(--muted);margin-bottom:var(--space-md)}
.variant-card .v-items{font-size:var(--font-xl);color:var(--text)}
.variant-card .v-item{display:flex;justify-content:space-between;padding:2px 0;border-bottom:1px solid var(--overlay)}
.variant-card .v-totals{margin-top:var(--space-sm);font-size:var(--font-xl);color:var(--accent);font-weight:600}

/* Photo variant detection badges */
.v-item-match{display:flex;align-items:center;gap:4px;margin-top:2px}
.v-item-match .v-db-badge{font-size:var(--font-xs);padding:1px 5px;border-radius:4px;background:rgba(var(--pri-rgb),.12);color:var(--pri);font-weight:600}
.v-item-replace{background:none;border:none;color:var(--muted);font-size:var(--font-sm);cursor:pointer;text-decoration:underline}
.v-item-replace:hover{color:var(--pri)}

/* ─── Теги и бейджи ─── */
.off-badge{display:inline-block;padding:1px 5px;border-radius:4px;background:rgba(var(--ok-rgb),.15);color:var(--ok);font-size:var(--font-xs);font-weight:600;margin-left:4px}
.day-badges{display:flex;gap:var(--space-sm);flex-wrap:wrap;margin-bottom:10px}
.day-badge{display:inline-flex;align-items:center;gap:4px;padding:var(--space-sm) var(--space-xl);border-radius:var(--r-pill);font-size:var(--font-xl);font-weight:500}
.day-badge.cycle-badge{background:rgba(var(--err-rgb),.1);color:var(--err);border:1px solid rgba(var(--err-rgb),.2)}
.day-badge.workout-badge{background:rgba(var(--ok-rgb),.1);color:var(--ok);border:1px solid rgba(var(--ok-rgb),.2)}
.day-badge.boost-badge{background:rgba(var(--pri-rgb),.1);color:var(--pri);border:1px solid rgba(var(--pri-rgb),.2)}
.calorie-boost{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--space-md);font-size:var(--font-xl);font-weight:600;margin-left:6px}
.calorie-boost.cycle{background:rgba(var(--err-rgb),.12);color:var(--err)}
.calorie-boost.workout{background:rgba(var(--ok-rgb),.12);color:var(--ok)}

/* Аллерген-теги */
.allergen-tags{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-md)}
.allergen-tag{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:var(--r-sm);font-size:var(--font-xl);font-weight:500}
.allergen-tag.confirmed{background:rgba(var(--err-rgb),.1);color:var(--err);border:1px solid rgba(var(--err-rgb),.2)}
.allergen-tag.suggested{background:rgba(var(--warn-rgb),.1);color:var(--warn);border:1px dashed rgba(var(--warn-rgb),.3)}
.allergen-tag .at-del{background:none;border:none;color:inherit;cursor:pointer;font-size:var(--font-sm);opacity:.7;padding:0 2px}
.allergen-tag .at-del:hover{opacity:1}
.allergen-warn{display:inline-flex;align-items:center;justify-content:center;width:var(--icon-md);height:var(--icon-md);border-radius:var(--r-full);background:rgba(var(--err-rgb),.12);color:var(--err);font-size:10px;margin-left:3px;cursor:help;flex-shrink:0}

/* ─── Period Toggle ─── */
.period-toggle{display:flex;gap:4px;background:var(--card2);border-radius:var(--r-sm);padding:3px;margin-bottom:var(--space-2xl)}
.period-toggle .pt-btn{flex:1;padding:var(--space-md) var(--space-xl);border-radius:12px;border:none;background:transparent;color:var(--muted);font-size:var(--font-base);cursor:pointer;transition:all var(--transition);text-align:center}
.period-toggle .pt-btn.active{background:var(--accent);color:#fff}

/* ─── Module Toggles ─── */
.module-toggles{display:flex;flex-direction:column;gap:10px}
.mod-toggle{display:flex;align-items:center;gap:10px;font-size:var(--font-md);cursor:pointer;padding:var(--space-md) var(--space-xl);border-radius:var(--r-sm);background:var(--card-glass);border:1px solid var(--border);transition:background var(--transition)}
.mod-toggle:hover{background:var(--overlay2)}
.mod-toggle input[type="checkbox"]{width:20px;height:20px;accent-color:var(--accent);cursor:pointer;flex-shrink:0}
.mod-toggle span{color:var(--text)}

/* ─── Suggestion Chips ─── */
.suggestion-chips{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-md);max-height:120px;overflow-y:auto}
.sugg-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:var(--r-sm);background:var(--card-glass);border:1px solid var(--border);font-size:var(--font-base);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}
.sugg-chip:active{transform:scale(.95)}
.sugg-chip:hover{border-color:var(--pri);background:rgba(var(--pri-rgb),.06)}
.sc-icon{font-size:var(--font-sm)}
.sc-name{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-cal{font-size:var(--font-sm);color:var(--muted);margin-left:2px}

/* ─── Notification Badge ─── */
.notif-badge{position:fixed;top:var(--space-3xl);left:50%;transform:translateX(-50%);z-index:300;padding:var(--space-xl) var(--space-4xl);border-radius:var(--r);background:var(--card);border:1px solid var(--pri);box-shadow:0 8px 32px rgba(var(--pri-rgb),.2);display:flex;align-items:center;gap:10px;animation:slideDown .4s ease}
.notif-badge .nb-icon{font-size:22px}
.notif-badge .nb-text{font-size:var(--font-md);font-weight:500}
.notif-badge .nb-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:var(--font-xl);padding:4px}

/* ─── FAB (Floating Action Button) ─── */
/* ─── Модалки ─── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;display:flex;align-items:flex-end;justify-content:center;animation:fadeIn var(--transition)}
.modal-content{background:var(--card);border-radius:var(--r) var(--r) 0 0;padding:var(--space-5xl) var(--space-4xl);width:100%;max-width:600px;max-height:85vh;overflow-y:auto;animation:slideUp var(--transition-slow) ease}
.modal-content h3{font-size:var(--font-xl);margin-bottom:var(--space-2xl);display:flex;align-items:center;gap:var(--space-md)}
.edit-item{display:flex;align-items:center;gap:var(--space-md);padding:10px 0;border-bottom:1px solid var(--border)}
.edit-item .ei-name{width:70px;padding:6px 8px;background:var(--input);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:var(--font-base);flex:2}
.edit-item .ei-name:focus{border-color:var(--pri);outline:none}
.edit-item .ei-weight{width:70px;padding:6px 8px;background:var(--input);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:var(--font-md);text-align:center}
.edit-item .ei-weight:focus{border-color:var(--pri);outline:none}
.edit-item .ei-cal{font-size:var(--font-xl);color:var(--muted);width:60px;text-align:right}
.edit-item .ei-del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:var(--font-xl);padding:4px}
.edit-item .ei-del:hover{color:var(--err)}
.edit-add-item{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:10px;border:1px dashed var(--border);border-radius:var(--r-sm);cursor:pointer;color:var(--pri);font-size:var(--font-base);margin-top:var(--space-sm);transition:all var(--transition-fast)}
.edit-add-item:hover{background:rgba(var(--pri-rgb),.06);border-color:var(--pri)}
.modal-actions{display:flex;gap:var(--space-md);margin-top:var(--space-3xl)}
.modal-actions .btn{flex:1}

/* Add Meal Bottom Bar */
.add-meal-bar{position:fixed;bottom:calc(65px + max(16px, env(safe-area-inset-bottom, 0px)));left:0;right:0;padding:0 16px;z-index:98;pointer-events:none}
.add-meal-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:28px 20px;border:none;border-radius:var(--r);background:var(--accent);color:#fff;font-size:15px;font-weight:600;cursor:pointer;pointer-events:all;box-shadow:0 4px 20px rgba(var(--accent-rgb),.35);transition:all var(--transition);letter-spacing:0.3px}
.add-meal-btn:hover{background:var(--accent2);transform:translateY(-1px);box-shadow:0 6px 24px rgba(var(--accent-rgb),.45)}
.add-meal-btn:active{transform:scale(.98);box-shadow:0 2px 12px rgba(var(--accent-rgb),.3)}
.add-meal-btn svg{flex-shrink:0}