/* ════════════════════════════════════════════════════════════
   Кабинет фермы — стиль поверх cabinet.css.
   Система адаптирована из DESIGN.md (Modal): комфортная плотность,
   плоские поверхности + hairline-границы, ритм eyebrow→заголовок→тело,
   один нормированный акцент. Но всё в ТЁПЛОМ бренде xlev (crem/green),
   на существующих токенах colors_and_type.css — новых токенов не вводим.
   ════════════════════════════════════════════════════════════ */

/* ── Контейнер: воздух и ритм ── */
#app .wrap#main{ padding-top: var(--sp-8); padding-bottom: var(--sp-16); }

/* ── Eyebrow (uppercase, tracked) → заголовок → приглушённое тело ── */
.farmer-eyebrow{
  font-family: var(--font-ui); font-weight: var(--fw-semibold);
  font-size: var(--fs-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--grass-700); display: block; margin-bottom: var(--sp-2);
}
#main h1, #main .h1{
  font-family: var(--font-display); font-weight: var(--fw-black);
  font-size: var(--fs-display-m); line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight); color: var(--green-800); margin: 0;
}
#main h2{
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-h2); line-height: var(--lh-snug);
  color: var(--green-800); margin: 0 0 var(--sp-4);
}
#main .muted{ color: var(--ink-500); font-size: var(--fs-body); line-height: var(--lh-body); }

/* ── Карточки-секции: плоские, hairline, комфортный паддинг 32px ── */
#main .card{
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-xs);
  padding: var(--sp-8); margin-bottom: var(--sp-5);
}

/* ════════ ГЕЙТ: вкладки «Подключить / Войти» ════════ */
.fm-tabs{
  display: flex; gap: var(--sp-1);
  background: var(--paper-dim); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: var(--sp-1); margin: 0 0 var(--sp-4);
}
.fm-tab{
  flex: 1; border: 0; background: transparent; padding: 10px 12px;
  border-radius: 9px; cursor: pointer; font: inherit; font-weight: var(--fw-semibold);
  color: var(--ink-500); transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.fm-tab.active{ background: var(--card); color: var(--green-800); box-shadow: var(--sh-xs); }

/* ════════ ОНБОРДИНГ-ВИЗАРД ════════ */
.wiz-head{ margin: var(--sp-1) 0 var(--sp-6); }
.wiz-head h1{ margin-bottom: var(--sp-2); }
.wiz-steps{ display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0 0; }
.wiz-step{
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--card); font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--ink-500);
}
.wiz-step .n{
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--paper-dim); color: var(--ink-500); font-size: 13px;
}
.wiz-step.done{ border-color: var(--grass-600); color: var(--green-800); }
.wiz-step.done .n{ background: var(--grass-600); color: #fff; }
.wiz-step.current{ border-color: var(--wheat-500); color: var(--ink-900); }
.wiz-step.current .n{ background: var(--wheat-500); color: #fff; }
.wiz-progress{ height: 8px; border-radius: var(--r-pill); background: var(--paper-dim); overflow: hidden; margin: var(--sp-3) 0 0; }
.wiz-progress > i{ display: block; height: 100%; background: var(--grass-600); transition: width var(--dur-slow) var(--ease-out); }

/* ════════ ДАШБОРД: навигация по разделам ════════ */
.sec-nav{ display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-6); }
.sec-nav button{
  border: 1px solid var(--line); background: var(--card); border-radius: var(--r-sm);
  padding: 9px 15px; cursor: pointer; font: inherit; font-weight: var(--fw-semibold);
  color: var(--ink-700); display: flex; align-items: center; gap: var(--sp-2);
  transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.sec-nav button:hover{ border-color: var(--green-200); color: var(--green-800); }
.sec-nav button.active{ background: var(--green-700); color: var(--on-dark); border-color: var(--green-700); }

/* ════════ Статус фермы (пилюли) ════════ */
.status-pill{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-pill); font-weight: var(--fw-bold); font-size: var(--fs-sm);
}
.status-draft{ background: var(--paper-dim); color: var(--ink-500); }
.status-pending{ background: var(--wheat-100); color: var(--wheat-700); }
.status-approved{ background: var(--grass-100); color: var(--grass-700); }
.status-rejected{ background: var(--barn-100); color: var(--barn-700); }

/* ════════ ФОРМЫ ════════ */
.f-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-6); }
.f-grid .full{ grid-column: 1 / -1; }
@media (max-width: 640px){ .f-grid{ grid-template-columns: 1fr; } }
.f-field{ display: flex; flex-direction: column; gap: 6px; }
.f-field label{ font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--ink-500); }
.f-field input, .f-field select, .f-field textarea{
  font: inherit; padding: 11px 13px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--card); color: var(--ink-900); width: 100%;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.f-field input:focus, .f-field select:focus, .f-field textarea:focus{
  outline: none; border-color: var(--grass-600); box-shadow: var(--ring-focus);
}
.f-field textarea{ min-height: 72px; resize: vertical; }
.f-hint{ font-size: var(--fs-xs); color: var(--ink-400); }
.req::after{ content: ' *'; color: var(--barn-600); }

/* ════════ Списки хозяйства (плоские карточки-строки) ════════ */
.item-list{ display: flex; flex-direction: column; gap: var(--sp-3); }
.item-row{
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--card); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.item-row:hover{ transform: translateY(-1px); box-shadow: var(--sh-sm); border-color: var(--green-200); }
.item-row .ir-ic{
  width: 46px; height: 46px; border-radius: var(--r-sm); object-fit: cover; flex: none;
  background: var(--green-050); display: grid; place-items: center; color: var(--grass-700); font-size: 22px;
}
.item-row .ir-main{ flex: 1; min-width: 0; }
.item-row .ir-title{ font-weight: var(--fw-bold); color: var(--ink-900); }
.item-row .ir-sub{ font-size: var(--fs-sm); color: var(--ink-500); margin-top: 1px; }
.item-row .ir-actions{ display: flex; gap: 6px; }
.icon-btn{
  border: 1px solid var(--line); background: var(--paper); border-radius: 9px;
  width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer; color: var(--ink-500);
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.icon-btn:hover{ color: var(--barn-600); border-color: var(--barn-300); }

.empty-note{
  padding: var(--sp-6); text-align: center; color: var(--ink-500);
  border: 1px dashed var(--line); border-radius: var(--r-md); background: var(--card-2);
}

/* ── Загрузка фото / превью ── */
.thumb-up{ display: flex; align-items: center; gap: var(--sp-3); }
.thumb-up img{ width: 54px; height: 54px; border-radius: var(--r-sm); object-fit: cover; border: 1px solid var(--line); }

/* ── Кнопки: ритм ── */
.btn-sm{ padding: 9px 14px; font-size: var(--fs-sm); }
.row-actions{ display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-5); }

/* ════════ Модалка openForm (оверлей строится в farmer.js) ════════ */
.cam-modal-ov{ backdrop-filter: blur(2px); }
.cam-modal-ov .card{ box-shadow: var(--sh-lg) !important; border-radius: var(--r-lg) !important; padding: var(--sp-8) !important; }
.cam-modal-ov h2{
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2);
  line-height: var(--lh-snug); color: var(--green-800); margin: 0 0 var(--sp-5);
}