/* Дизайн-система «Адал Алма». Описание: docs/design_system.md.
   Правила: цвета, отступы, радиусы — только через токены; overflow-x:hidden запрещён;
   ряды полей — grid minmax(0,1fr), на ≤480px одна колонка; кнопки и поля не ниже 48px. */

/* ---------- 1. Токены ---------- */
:root {
  /* цвета бренда */
  --bg:#FCE4CC; --head:#3C5424; --btn:#546C3C; --accent:#D4A72C; --err:#C0392B; --text:#2b2b2b;
  /* производные */
  --surface:#fff; --muted:#6b6b6b; --line:#e3d6c2; --field-border:#b9a98f;
  --ok-bg:#e6efd9; --ok-text:#3C5424; --err-bg:#fbe9e7; --on-dark:#fff;
  /* отступы (шкала 4-8-12-16-24) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --gap:10px;
  /* радиусы, тени */
  --r-sm:8px; --r:10px; --r-lg:14px; --shadow:0 1px 4px rgba(0,0,0,.15);
  /* шрифт */
  --fs-sm:15px; --fs:18px; --fs-h2:20px; --fs-h1:24px; --fs-big:22px;
  /* размеры */
  --tap:48px; --narrow:480px; --content:720px;
}

/* ---------- 2. База ---------- */
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:var(--fs)/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
h1 { font-size:var(--fs-h1); margin:0; }
h2 { font-size:var(--fs-h2); margin:var(--s1) 0; }
a { color:var(--head); }
img, video { max-width:100%; height:auto; }
pre { max-width:100%; overflow-x:auto; }
code { word-break:break-all; }

/* ---------- 3. Каркас ---------- */
.top { background:var(--head); color:var(--on-dark); display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:var(--s2) 14px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:var(--gap); color:var(--on-dark); text-decoration:none; font-weight:600; }
.brand img { height:40px; width:auto; border-radius:6px; }
.who { display:flex; align-items:center; gap:var(--gap); }
.who a { color:var(--on-dark); }
.who form, .farms form { margin:0; }
.menu { display:flex; flex-wrap:wrap; gap:var(--s1) var(--s3); }
.menu a { color:var(--bg); text-decoration:none; font-size:.95rem; }
main { width:100%; max-width:var(--content); margin:0 auto; padding:14px; }
main > *, .card, form { max-width:100%; }
.farms { display:flex; gap:var(--s2); padding:var(--s2) 14px 0; flex-wrap:wrap; max-width:var(--content); margin:0 auto; }

/* ---------- 4. Карточка ---------- */
.card { background:var(--surface); border-radius:var(--r-lg); padding:18px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow); min-width:0; overflow-wrap:anywhere; }
.card + .card, .card + form, form + .card { margin-top:14px; }
.card h1 { margin:0; font-size:var(--fs-h1); }
.card h2 { margin:0; }
.card > p { margin:0; }
.card .logo { width:120px; align-self:center; border-radius:var(--r); }
.stack { display:flex; flex-direction:column; gap:var(--s3); }

/* ---------- 5. Кнопки ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:var(--tap); padding:var(--gap) 20px; border:0; border-radius:var(--r); background:var(--btn); color:var(--on-dark); font:inherit; font-weight:600; cursor:pointer; text-decoration:none; text-align:center; }
.btn.small { padding:6px 14px; font-size:16px; }
.btn.active { background:var(--accent); color:var(--text); }
.btn.danger { background:var(--err); }
.btn.ghost { background:var(--surface); color:var(--text); border:2px solid var(--field-border); }
.btn:disabled, .btn[aria-disabled=true] { opacity:.5; cursor:not-allowed; }
.btn:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.actions { display:flex; flex-wrap:wrap; gap:var(--s2); }
/* чипы: выбор варианта (сорт, бригада, вид) */
.chips { display:flex; flex-wrap:wrap; gap:var(--s2); }
.chips .btn { background:var(--surface); color:var(--text); border:2px solid var(--field-border); }
.chips .btn.active { background:var(--accent); border-color:var(--accent); }
/* вкладки */
.tabs, .rep-tabs, .adm-nav { display:flex; flex-wrap:wrap; gap:var(--s2); margin:var(--s2) 0; }

/* ---------- 6. Формы ---------- */
label { display:flex; flex-direction:column; gap:6px; font-weight:600; min-width:0; }
input, select, textarea { width:100%; min-width:0; max-width:100%; min-height:var(--tap); padding:var(--s2) var(--s3); font:inherit; border:2px solid var(--field-border); border-radius:var(--r); background:var(--surface); color:var(--text); }
input:focus, select:focus, textarea:focus { outline:3px solid var(--accent); border-color:var(--accent); }
input[type=checkbox], input[type=radio] { width:auto; min-height:0; }
.chk { display:flex; flex-direction:row; align-items:center; gap:var(--gap); min-height:var(--tap); font-weight:600; }
.chk input { width:24px; height:24px; min-height:24px; flex:none; }
.hint { margin:-4px 0 0; font-size:14px; color:var(--muted); }
/* ряды полей: колонки не шире доли экрана; на телефоне уже 480px — одна колонка */
.row2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap); }
.row3 { display:grid; grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr)); gap:var(--gap); align-items:end; }
.row2 > *, .row3 > *, .grid > * { min-width:0; }
details summary { cursor:pointer; font-weight:600; min-height:var(--tap); display:flex; align-items:center; }

/* ---------- 7. Сообщения и метки ---------- */
.err { color:var(--err); font-weight:600; padding:var(--gap) 0; }
.err ul { margin:6px 0 var(--s3); padding-left:22px; }
.ok { color:var(--ok-text); background:var(--ok-bg); font-weight:600; padding:var(--gap) var(--s3); border-radius:var(--r); }
.warn, .bad { color:var(--err); }
.muted { color:var(--muted); font-size:var(--fs-sm); }
.live { font-size:var(--fs-big); font-weight:700; color:var(--head); }
.badge, .mark { display:inline-block; background:var(--accent); color:var(--text); border-radius:var(--r-sm); padding:1px var(--s2); font-size:14px; font-weight:600; }
.badge.bad, .mark.bad { background:var(--err); color:var(--on-dark); }
.badge.off { background:var(--line); color:var(--muted); }

/* ---------- 8. Таблицы ---------- */
.scroll-x, .scroll, .rep-scroll { max-width:100%; overflow-x:auto; }
.tbl, .list { width:100%; border-collapse:collapse; font-size:16px; }
.tbl td, .tbl th, .list td, .list th { padding:var(--s2) var(--s1); border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.tbl th { color:var(--head); }
td.r, th.r, .r { text-align:right; white-space:nowrap; }
tr.tot td, tr.tot th, tfoot th { font-weight:700; border-top:2px solid var(--btn); }
tr.bad { background:var(--err-bg); }
/* полоса заполнения (камеры) */
.bar { background:var(--bg); border-radius:6px; height:14px; overflow:hidden; }
.bar > i { display:block; height:100%; background:var(--btn); }

/* ---------- 9. Главный экран ---------- */
.today { font-size:20px; font-weight:600; margin:var(--s1) 0 14px; }
.grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s3); }
.tile { display:flex; align-items:center; justify-content:center; min-height:110px; background:var(--btn); color:var(--on-dark); border-radius:var(--r-lg); font-size:clamp(17px,4.6vw,var(--fs-big)); font-weight:700; text-decoration:none; text-align:center; border-bottom:5px solid var(--accent); padding:var(--s2); overflow-wrap:anywhere; hyphens:auto; }
.tile:active { filter:brightness(1.15); }
.tile:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }

/* меню «Админ»: на телефоне — столбик крупных пунктов, шире — две-три колонки */
.adm-menu { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s2); }
.adm-menu a { display:flex; align-items:center; min-height:56px; padding:var(--s2) var(--s3); background:var(--btn); color:var(--on-dark); border-radius:var(--r-lg); border-left:5px solid var(--accent); font-size:1.1rem; font-weight:600; text-decoration:none; overflow-wrap:anywhere; }
.adm-menu a:active { filter:brightness(1.15); }
.adm-menu a:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
@media (min-width:600px) { .adm-menu { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1000px) { .adm-menu { grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* ---------- 10. Адаптив ---------- */
@media (min-width:600px) { .grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:480px) {
  .row2, .row3, .grid.cards { grid-template-columns:minmax(0,1fr); }
  .card { padding:14px; }
  main { padding:var(--gap); }
}

/* ---------- 11. Экраны ---------- */
/* общие: закрытые строки справочников, заливка шапки таблицы, компактная таблица, выделенная карточка */
tr.closed { opacity:.55; }
tr.closed td { color:var(--muted); }
tr.closed td:first-child { text-decoration:line-through; }
.tbl.filled th { background:var(--bg); color:var(--head); }
.tbl.compact { font-size:var(--fs-sm); }
.card.new { border-left:4px solid var(--head); }

/* админка: списки, фильтр, секрет */
.adm-list { display:flex; flex-direction:column; gap:var(--gap); margin-top:var(--s3); }
.adm-row { display:block; background:var(--surface); border-radius:var(--r-lg); padding:var(--s3); box-shadow:var(--shadow); color:inherit; text-decoration:none; }
.adm-row .h { display:flex; justify-content:space-between; gap:var(--s2); font-weight:700; }
.adm-row .s { margin:var(--s1) 0; }
.adm-filter { display:flex; flex-wrap:wrap; gap:var(--gap); align-items:flex-end; }
.adm-filter label { flex:1 1 140px; }
.secret { font:700 var(--fs-h1) monospace; background:var(--bg); padding:var(--gap); border-radius:var(--r-sm); word-break:break-all; user-select:all; }

/* админка: обратная связь (adm_feedback) */
.fb-msg { overflow-wrap:anywhere; white-space:pre-line; margin:6px 0; }
.fb-head { display:flex; flex-wrap:wrap; gap:6px var(--s3); align-items:baseline; }

/* админка: Google (adm_google) */
.gs-sheet { border-top:1px solid var(--line); padding-top:var(--gap); margin-top:var(--gap); }
.gs-sheet .actions { margin-top:var(--s2); }
.gs-doc ol { padding-left:22px; }
.gs-doc li { margin-bottom:var(--gap); }

/* админка: уведомления (adm_notify) */
.ntf-user { border-top:1px solid var(--line); padding:var(--gap) 0; }
.ntf-user:first-of-type { border-top:0; }

/* бригада (brigade) */
.br-members { list-style:none; padding:0; margin:0; }
.br-members li { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s2); padding:var(--s2) 0; border-bottom:1px solid var(--line); }
.br-who { min-width:0; overflow-wrap:anywhere; }
.br-or { text-align:center; color:var(--muted); margin:var(--s1) 0; }

/* инструкция (help) */
.help h2 { margin-top:1.4rem; }
.help ol { padding-left:1.3rem; }
.help li { margin:.25rem 0; }
.help kbd { background:var(--bg); border-radius:var(--s1); padding:0 .3em; font:inherit; }

/* сотрудники (staff) */
.staff-filters { display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; margin:var(--s2) 0; }

/* отчёты (rep_index): даты и кнопка в ряд */
.rep-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap); align-items:end; margin:var(--s3) 0; }
.rep-form > * { min-width:0; }

/* обратная связь (feedback) */
.fb textarea { min-height:8rem; }
.fb-list { list-style:none; padding:0; margin:0; }
.fb-list li { padding:var(--s2) 0; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.fb-status { font-size:var(--fs-sm); }

/* секция 11 стоит после адаптива, поэтому её ряды сворачиваем здесь */
@media (max-width:480px) { .rep-form { grid-template-columns:minmax(0,1fr); } }

/* ---------- 12. Правки по QA ---------- */
/* блок «новый покупатель/поставщик» стоит над формой, не внутри неё */
.new-ref { margin-bottom:var(--s3); }
.inline-add { display:flex; gap:var(--s2); align-items:flex-end; margin-top:var(--s2); }
.inline-add input { flex:1 1 auto; }
/* заголовки таблиц не рвём по буквам; широкая таблица прокручивается в .scroll-x */
.tbl th { word-break:normal; overflow-wrap:normal; hyphens:manual; }
/* бухгалтер: вместо форм ввода строка «Только просмотр» */
.readonly-note { background:var(--bg); border-radius:var(--r); padding:var(--s3); font-weight:600; }
/* таблица-карточки на узком экране (staff) */
@media (max-width:480px) {
  .tbl.stack, .tbl.stack tbody { display:block; }
  .tbl.stack tr:first-child { display:none; }
  .tbl.stack tr { display:block; padding:var(--s2) 0; border-bottom:1px solid var(--line); }
  .tbl.stack td { display:block; border:0; padding:2px 0; overflow-wrap:anywhere; }
  .tbl.stack td:empty { display:none; }
  .tbl.stack td[data-label]::before { content:attr(data-label) ": "; color:var(--muted); font-weight:400; }
  .inline-add { flex-wrap:wrap; }
}

/* п.18 QA: на узких экранах таблицы плотнее; остальное листается в .scroll-x */
[x-cloak] { display:none !important; }
@media (max-width:480px) {
  .scroll-x .tbl td, .scroll-x .tbl th, .scroll-x .list td, .scroll-x .list th { padding:var(--s1) 6px; font-size:var(--fs-sm); }
  .scroll-x { border-right:3px solid var(--line); }
}
.btn-row { display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s2); }
.secret-box { display:flex; flex-wrap:wrap; align-items:center; gap:var(--gap); margin:var(--gap) 0; }
.secret-box .secret { flex:1 1 12rem; min-width:0; margin:0; }
/* #msg — всплывающее уведомление внизу экрана */
#msg:not(:empty) { position:fixed; left:50%; bottom:var(--s4); transform:translateX(-50%); z-index:50;
  width:min(560px, calc(100% - 2 * var(--s4))); max-height:70vh; overflow-y:auto;
  background:var(--surface); border-radius:var(--r-lg); box-shadow:0 4px 18px rgba(0,0,0,.28); }
#msg > .ok, #msg > .err { margin:0; padding:var(--s3) 52px var(--s3) var(--s4); border-radius:var(--r-lg); }
#msg > .err { background:var(--err-bg); }
.toast-x { position:absolute; top:var(--s1); right:var(--s1); width:var(--tap); height:var(--tap); border:0;
  background:none; font-size:28px; line-height:1; color:var(--muted); cursor:pointer; }