/* ============================================================
   FORMS — інпути, лейбли, перемикачі, сегменти, search
   ============================================================ */
.field{ position:relative; display:flex; flex-direction:column; gap:var(--space-2); min-width:0; }  /* min-width:0 → не вилазить у flex-рядку (Rule fix №5) */
/* Поля в один рядок — вирівнювання ЗВЕРХУ (щоб підказка/помилка під одним полем не зсувала сусіднє) */
.row:has(> .field){ align-items:flex-start; }
.field__label{ font-size:var(--text-sm); font-weight:var(--fw-medium); color:var(--text-main); }
.field__label .req{ color:var(--error-base); margin-left:2px; }
.field__hint{ font-size:var(--text-xs); color:var(--text-soft); }
/* Текст помилки під полем БІЛЬШЕ НЕ використовуємо (лишено для сумісності) */
.field__error{ display:none; }

/* ---------- Помилка = іконка в кінці інпута + бордова підказка (Rule R19) ----------
   Жодного зсуву layout: індикатор живе ВСЕРЕДИНІ .input (праворуч). */
.input__alert{
  display:none;                       /* показуємо лише при .input--invalid */
  position:relative; flex:0 0 auto;
  align-items:center; justify-content:center;
  width:20px; height:20px; color:var(--error-deep); cursor:help;
}
.input--invalid .input__alert{ display:inline-flex; }
.input__alert .icon{ width:18px; height:18px; color:var(--error-deep); }  /* бордовий (перебиваємо .input .icon) */

/* Бульбашка НАД іконкою */
.input__alert::after{
  content:attr(data-err);
  position:absolute; bottom:calc(100% + 16px); right:-8px;
  width:max-content; max-width:240px;
  background:var(--error-deep); color:#fff; font-size:var(--text-xs); line-height:1.3; text-align:left;
  padding:6px 9px; border-radius:var(--radius-md); box-shadow:var(--shadow-md);
  opacity:0; transform:translateY(4px); pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast);
  z-index:var(--z-dropdown);
}
/* Трикутник-каретка ВНИЗ, на іконку (половина визирає) */
.input__alert::before{
  content:""; position:absolute; bottom:calc(100% + 12px); right:6px;
  width:9px; height:9px; background:var(--error-deep); border-radius:2px;
  transform:translateY(4px) rotate(45deg);
  opacity:0; pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast);
  z-index:calc(var(--z-dropdown) + 1);   /* поверх тіні бульбашки, щоб колір був чистий малиновий */
}
/* Підказка показується ЗАВЖДИ, поки поле не виправлене (зникає, коли .input--invalid знято) */
.input--invalid .input__alert::after{ opacity:1; transform:translateY(0); }
.input--invalid .input__alert::before{ opacity:1; transform:translateY(0) rotate(45deg); }

.input{
  display:flex; align-items:center; gap:var(--space-2); min-width:0;
  height:var(--control-h); padding:0 var(--space-3);
  background:var(--bg-surface);
  border:1px solid var(--stroke); border-radius:var(--radius-md);
  color:var(--text-main);
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast);
}
.input .icon{ width:var(--icon-md); height:var(--icon-md); color:var(--text-soft); }
.input input,.input textarea,.input select{
  flex:1; min-width:0; border:none; outline:none; background:transparent;
  font-size:var(--text-base); color:var(--text-main);
}
.input select{ cursor:pointer; height:100%; -webkit-appearance:none; appearance:none; padding-right:18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238C94A1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right center; background-size:16px; }
.input input::placeholder{ color:var(--text-soft); }
/* Нативний вибір дати всередині обгортки .input — курсор + іконка календаря справа, шрифт у стилі поля */
.input input[type="date"], .input input[type="time"], .input input[type="datetime-local"]{ cursor:pointer; font-variant-numeric:tabular-nums; }
.input input::-webkit-calendar-picker-indicator{ opacity:.5; cursor:pointer; transition:opacity var(--dur-fast) var(--ease); }
.input input::-webkit-calendar-picker-indicator:hover{ opacity:.9; }
/* Поле «тільки читання» (напр. Менеджер = поточний користувач, курс менеджера) — приглушене, без взаємодії */
.input--readonly{ background:var(--bg-muted, #f3f4f6); border-style:dashed; cursor:default; }
.input--readonly input{ color:var(--text-soft); cursor:default; }
/* «глазок» показати/сховати пароль (js/passtoggle.js) */
.input__eye{ flex:0 0 auto; display:grid; place-items:center; width:24px; height:24px; margin-left:2px; margin-right:-2px; color:var(--text-soft); cursor:pointer; transition:color var(--dur-fast) var(--ease); }
.input__eye:hover{ color:var(--text-main); }
.input__eye .icon{ width:18px; height:18px; }

/* ---- Завантаження аватара (кругле прев'ю + кнопки) ---- */
.avatar-upload{ display:flex; flex-direction:column; align-items:center; gap:var(--space-3); }
.avatar-upload__preview{
  position:relative; width:84px; height:84px; flex:0 0 auto;
  border-radius:var(--radius-circle); overflow:hidden;
  background:var(--bg-subtle); border:1px solid var(--stroke-soft);
  display:grid; place-items:center;
}
.avatar-upload__preview img{ width:100%; height:100%; object-fit:cover; }
.avatar-upload__ph{ position:absolute; width:30px; height:30px; color:var(--text-soft); display:none; }
.avatar-upload__preview.is-empty img{ display:none; }
.avatar-upload__preview.is-empty .avatar-upload__ph{ display:block; }
.avatar-upload__ctl{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:var(--space-2); }
.avatar-upload__hint{ margin:0; font-size:var(--text-xs); color:var(--text-soft); text-align:center; }

/* прибираємо синій/жовтий фон автозаповнення браузера — поле виглядає як звичайне (Chrome/Safari) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px var(--bg-surface) inset;
  box-shadow:0 0 0 1000px var(--bg-surface) inset;
  -webkit-text-fill-color:var(--text-main);
  caret-color:var(--text-main);
  transition:background-color 9999s ease-in-out 0s;
}
/* Фокус = СІРА рамка ~2px (1px бордер + 1px тінь у колір) — спокійно й чисто.
   Внутрішній <input> власного кільця не малює (щоб не було подвійного). */
.input:focus-within{ border-color:var(--neutral-400); box-shadow:0 0 0 1px var(--neutral-400); }
.input input:focus-visible,
.input textarea:focus-visible{ box-shadow:none; }
/* Помилка — бордовий бордюр ~2px (1px + 1px тінь у колір), у тон зі знаком оклику (Rule R19) */
.input--invalid,
.input--invalid:focus-within{ border-color:var(--error-deep); box-shadow:0 0 0 1px var(--error-deep); }
/* тригер-пікер у стані помилки (товар/рахунок/контрагент не вибрано) — R19 */
.select-trigger--invalid{ border-color:var(--error-deep); box-shadow:0 0 0 1px var(--error-deep); }
.input--lg{ height:var(--control-h-lg); }
.input.is-disabled{ background:var(--bg-subtle); color:var(--text-disabled); }

/* select у обгортці .input — на наших стилях (нативну стрілку ховаємо, показуємо свій chevron); глобально, щоб працювало і поза сторінкою Відправок */
.input--select{ padding-right:var(--space-2); }
.input--select select{ flex:1 1 auto; min-width:0; border:0; background:transparent; font:inherit; color:var(--text-main); outline:none; cursor:pointer; padding:0; appearance:none; -webkit-appearance:none; -moz-appearance:none; }
.input--select select:disabled{ color:var(--text-soft); cursor:default; }
.input__chev{ margin-left:auto; color:var(--text-soft); flex:0 0 auto; pointer-events:none; }

textarea.bare{ resize:vertical; min-height:84px; padding:var(--space-3); }

/* Поле textarea: без resize-«рисочок» у кутку, іконка помилки — рівно в кутку */
.input--area{ height:auto; align-items:stretch; padding:0; position:relative; }
.input--area textarea{ width:100%; min-height:84px; padding:var(--space-3); resize:none; }
.input--area.input--invalid textarea{ padding-right:36px; }     /* місце під іконку */
.input--area .input__alert{ position:absolute; top:9px; right:9px; }

/* ---------- Секції форми (великі форми в drawer) ---------- */
.form-section{ display:flex; flex-direction:column; gap:var(--gap-block); }
.form-sec-title{
  font-size:var(--text-xs); font-weight:var(--fw-semibold); letter-spacing:.04em;
  text-transform:uppercase; color:var(--text-soft);
}
/* заголовок секції з дією справа (напр. «Доставка … [Змінити]») */
.form-sec-title--row{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); }
/* кнопка «Змінити/Додати адресу» — світло-оранжева пігулка (не uppercase) */
.oa-edit{ display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:999px;
  border:1px solid var(--warning-base); background:var(--warning-tint); color:var(--warning-text);
  font-size:var(--text-xs); font-weight:var(--fw-medium); line-height:1.7; text-transform:none; letter-spacing:0; cursor:pointer; }
.oa-edit svg{ width:13px; height:13px; }
.oa-edit:hover{ filter:brightness(.98); }
/* темний варіант — кнопка «Додати / Змінити адресу» у картці доставки */
.oa-edit--dark{ border-color:var(--bg-inverse); background:var(--bg-inverse); color:var(--text-on-inverse); }
.oa-edit--dark:hover{ filter:none; background:var(--neutral-700); border-color:var(--neutral-700); }
/* картка отримувача у формі створення замовлення (ФІО+телефон+відділення) — глобально (композер є на різних сторінках) */
.recip-box{ display:flex; flex-direction:column; gap:6px; padding:var(--space-3); border:1px solid var(--stroke); border-radius:var(--radius-lg); background:var(--bg-subtle); margin-top:var(--space-2); }
.recip-box__row{ display:flex; align-items:center; gap:8px; font-size:var(--text-sm); color:var(--text-main); min-width:0; }
.recip-box__row svg{ width:15px; height:15px; color:var(--text-soft); flex:0 0 auto; }
.recip-box__row > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.recip-box__name{ font-weight:var(--fw-medium); }
.recip-box .oa-edit{ align-self:flex-start; margin-top:2px; }
/* клікабельний рядок історії замовлень (картка клієнта) → бічна модалка деталей */
.order-item--click{ cursor:pointer; border-radius:8px; transition:background var(--dur-fast) var(--ease); }
.order-item--click:hover{ background:var(--bg-subtle); }
.order-item--click > svg:last-child{ color:var(--text-soft); width:16px; height:16px; flex:0 0 auto; margin-left:2px; }
.form-section + .form-section{ padding-top:var(--space-4); border-top:1px solid var(--stroke-soft); }

/* Рядок упаковки «1 блок = [N] пачок» */
.pack-row{ display:flex; align-items:center; gap:var(--space-2); }
.pack-row + .pack-row{ margin-top:var(--space-2); }
.pack-row__txt{ font-size:var(--text-sm); color:var(--text-sub); white-space:nowrap; }
.pack-input{ width:84px; flex:0 0 84px; }

/* Чекбокс-рядок (з підписом) */
.check-line{ display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-base); color:var(--text-main); cursor:pointer; }
.check-line + .check-line{ margin-top:var(--space-2); }

/* Дропзона фото */
.dropzone{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-2);
  width:100%; padding:var(--space-6) var(--space-5); text-align:center; cursor:pointer;
  border:1.5px dashed var(--stroke-strong); border-radius:var(--radius-xl);
  background:var(--bg-subtle);
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast);
}
.dropzone:hover{ border-color:var(--primary); background:var(--primary-50); }
.dropzone__icon{
  display:grid; place-items:center; color:var(--text-soft);   /* без фону і бордера */
  transition:color var(--dur-fast) var(--ease);
}
.dropzone__icon .icon{ width:var(--icon-xl); height:var(--icon-xl); }
.dropzone:hover .dropzone__icon{ color:var(--primary); }
.dropzone__title{ font-size:var(--text-sm); font-weight:var(--fw-medium); color:var(--text-main); }
.dropzone:hover .dropzone__title{ color:var(--primary-700); }
.dropzone__hint{ font-size:var(--text-xs); color:var(--text-soft); }

/* ---------- Завантажувач фото ---------- */
.uploader{ display:flex; flex-direction:column; gap:var(--space-3); }
.uploader__grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(88px,1fr)); gap:var(--space-2); }
.uploader__grid:empty{ display:none; }
.photo{
  position:relative; aspect-ratio:1; border-radius:var(--radius-md); overflow:hidden;
  border:1px solid var(--stroke); background:#fff;
}
.photo img{ width:100%; height:100%; object-fit:cover; }
.photo.is-loading img{ opacity:.5; }
.photo__del{
  position:absolute; top:4px; right:4px; width:22px; height:22px;
  display:grid; place-items:center; border-radius:50%;
  background:rgba(14,18,27,.6); color:#fff;
  transition:background var(--dur-fast) var(--ease);
}
.photo__del .icon{ width:14px; height:14px; }
.photo__del:hover{ background:rgba(14,18,27,.85); }
.photo.is-loading .photo__del{ display:none; }
.photo__bar{ position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(14,18,27,.18); }
.photo__bar span{ display:block; height:100%; width:0; background:var(--primary); transition:width .15s linear; }
.photo.is-done .photo__bar{ display:none; }

/* Поля у рядку — інпути на одному рівні, незалежно від довжини підпису */
.modal .row > .field{ align-self:stretch; justify-content:flex-end; }

/* Search input (компактний) */
.search{
  display:flex; align-items:center; gap:var(--space-2);
  height:var(--control-h); padding:0 var(--space-3);
  background:var(--bg-subtle); border:1px solid transparent; border-radius:var(--radius-md);
  color:var(--text-soft);
}
.search:focus-within{ background:var(--bg-surface); border-color:var(--neutral-400); box-shadow:0 0 0 1px var(--neutral-400); }
/* Білий фон (модифікатор) — ПІСЛЯ .search, але специфічність нижча за :focus-within,
   тож фокус/ховер лишаються СПІЛЬНІ з усіма полями — не дублюємо (Rule R24). */
.search--card{ background:var(--bg-surface); border-color:var(--stroke); box-shadow:var(--shadow-xs); }
.search input:focus-visible{ box-shadow:none; }
.search .icon{ width:var(--icon-md); height:var(--icon-md); color:var(--text-soft); }
.search input{ flex:1; min-width:0; border:none; outline:none; background:transparent; font-size:var(--text-base); color:var(--text-main); }
.search input::placeholder{ color:var(--text-soft); }
/* хрестик очищення — зʼявляється, коли в полі щось є (js/searchclear.js) */
.search__clear{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:22px; height:22px; padding:0; border:0; border-radius:50%;
  background:var(--bg-subtle); color:var(--text-soft); cursor:pointer;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.search--card .search__clear{ background:var(--bg-subtle); }
.search__clear:hover{ background:var(--neutral-200, #e6e7ea); color:var(--text-main); }
.search__clear .icon{ width:14px; height:14px; }
.search input::-webkit-search-cancel-button{ display:none; }   /* свій хрестик замість браузерного */
.search kbd{
  font-family:var(--font-sans); font-size:var(--text-xs); color:var(--text-soft);
  background:var(--bg-surface); border:1px solid var(--stroke); border-radius:var(--radius-sm);
  padding:1px 5px;
}

/* ---------- Toggle / switch (заокруглений прямокутник) ---------- */
.switch{ position:relative; display:inline-flex; width:40px; height:24px; flex:0 0 auto; }
.switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.switch .track{
  width:40px; height:24px; border-radius:99px; background:var(--neutral-300);
  transition:background var(--dur) var(--ease);
}
.switch .thumb{
  position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:var(--shadow-sm);
  transition:transform var(--dur) var(--ease);
}
.switch input:checked ~ .track{ background:var(--primary); }
.switch input:checked ~ .thumb{ transform:translateX(16px); }
.switch input:focus-visible ~ .track{ box-shadow:var(--ring-focus); }

/* ---------- Segmented control ---------- */
.segmented{
  display:inline-flex; align-items:center; gap:2px; padding:3px;
  background:var(--bg-surface); border:1px solid var(--stroke); border-radius:var(--radius-md); box-shadow:var(--shadow-xs);
}
.segmented button{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  height:30px; padding:0 var(--space-3); border-radius:var(--radius-sm);
  font-size:var(--text-sm); font-weight:var(--fw-medium); color:var(--text-sub);
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast), box-shadow var(--dur-fast);
}
.segmented button .icon{ width:var(--icon-sm); height:var(--icon-sm); }
/* СЕГМЕНТ ЗІ СКРОЛОМ (багато варіантів не влазить): горизонтальний скрол на телефоні,
   на ПК ще й стрілки ‹ › для зручності. Обгортку .seg-scroll + стрілки додає js/segscroll.js. */
.segmented--scroll{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; scroll-behavior:smooth; }
/* Полоси-фільтри малює JS. Поки вони порожні — тримаємо висоту рядка (3px паддінг + 30px
   кнопка + рамка = 38px) і ховаємо саму рамку: інакше сторінка стрибає, бо кожна полоса
   зʼявляється ривком уже після завантаження. */
.segmented--scroll:empty{ min-height:38px; background:transparent; border-color:transparent; box-shadow:none; }
.segmented--scroll::-webkit-scrollbar{ width:0; height:0; }
.segmented--scroll > button{ flex:1 0 auto; white-space:nowrap; }
.seg-scroll{ display:flex; align-items:center; gap:var(--space-1); min-width:0; }
.seg-scroll .segmented{ flex:1 1 auto; min-width:0; }
.seg-scroll__arrow{
  flex:0 0 auto; display:none; place-items:center; width:30px; height:30px;
  background:var(--bg-surface); border:1px solid var(--stroke); border-radius:var(--radius-md); box-shadow:var(--shadow-xs);
  color:var(--text-sub); cursor:pointer; transition:background var(--dur-fast) var(--ease), color var(--dur-fast);
}
.seg-scroll__arrow:hover{ background:var(--bg-hover); color:var(--text-main); }
.seg-scroll__arrow:disabled{ opacity:.3; pointer-events:none; }
.seg-scroll__arrow .icon{ width:18px; height:18px; }
/* стрілки — лише на ПК і лише коли є переповнення */
@media (min-width:641px){ .seg-scroll.has-overflow .seg-scroll__arrow{ display:grid; } }

/* Вкладки сторінки: перемикач + прокручувані швидкі фільтри (спільне — Клієнти/Відправки/Замовлення) */
.page-tabs{ display:flex; flex-direction:column; gap:var(--space-2); align-items:flex-start; }
.page-tabs > .seg-scroll, .page-tabs > .segmented--scroll,
.toolbar > .seg-scroll, .toolbar > .segmented--scroll{ min-width:0; max-width:100%; }
/* перемикач області (Всі/Мої) над швидкими вкладками — на телефоні на всю ширину */
@media (max-width:640px){
  .page-tabs > .segmented:not(.segmented--scroll){ display:flex; width:100%; }
  .page-tabs > .segmented:not(.segmented--scroll) > button{ flex:1; }
}
/* лічильник у швидких вкладках — спільний вигляд для всіх quick-tabs */
.seg-count{ margin-left:6px; min-width:18px; height:18px; padding:0 5px; display:inline-flex; align-items:center; justify-content:center; font-size:var(--text-xs); font-weight:var(--fw-bold); line-height:1; border-radius:99px; background:var(--bg-active); color:var(--text-sub); font-variant-numeric:tabular-nums; }
.segmented button.is-active .seg-count{ background:var(--primary-tint); color:var(--primary); }

/* тумблер-вкладка (data-tabsync) на телефоні — на всю ширину (окремий рядок) */
@media (max-width:640px){
  .segmented[data-tabsync]{ display:flex; width:100%; margin-left:0 !important; margin-right:0 !important; }
  .segmented[data-tabsync] > button{ flex:1 1 0; min-width:0; }
}
.segmented button:hover{ color:var(--text-main); }
.segmented button.is-active{ background:var(--bg-inverse); color:var(--text-on-inverse); box-shadow:var(--shadow-xs); }
/* Семантичні активні сегменти (статус тощо) */
.segmented button.is-active.seg-success{ background:var(--success-tint); color:var(--success-text); box-shadow:none; }
.segmented button.is-active.seg-success .icon{ color:var(--success-base); }
.segmented button.is-active.seg-warning{ background:var(--warning-tint); color:var(--warning-text); box-shadow:none; }
.segmented button.is-active.seg-warning .icon{ color:var(--warning-base); }
.segmented button.is-active.seg-error{ background:var(--error-tint); color:var(--error-text); box-shadow:none; }
.segmented button.is-active.seg-error .icon{ color:var(--error-base); }

/* select-like trigger (виглядає як інпут, відкриває dropdown) */
.select-trigger{
  display:inline-flex; align-items:center; gap:var(--space-2);
  height:var(--control-h); padding:0 var(--space-3);
  background:var(--bg-surface); border:1px solid var(--stroke); border-radius:var(--radius-md);
  font-size:var(--text-base); color:var(--text-main); box-shadow:var(--shadow-xs);
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast);
}
.select-trigger:hover{ background:var(--bg-subtle); }
.select-trigger .icon{ width:var(--icon-md); height:var(--icon-md); color:var(--text-soft); }
.select-trigger .chev{ margin-left:auto; color:var(--text-soft); flex:0 0 auto; }
/* назва, що не вміщається — три крапки, не перенос на новий рядок */
.select-trigger > span{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
.select-trigger:disabled{ opacity:.55; cursor:default; background:var(--bg-subtle); }
.select-trigger:disabled:hover{ background:var(--bg-subtle); }

/* ============================================================
   Поля скрізь 14px (компактно, і на телефоні теж).
   Авто-зум Safari при фокусі (для шрифту <16px) гасимо через
   maximum-scale=1 у viewport (partials/header.php), а не роздуванням шрифту.
   На Android авто-зуму немає взагалі. (Замінює старе R20-правило 16px.) */

/* Канали: лого у вкладках/бейджах, номер сайту біля нашого */
.seg-logo{ width:16px; height:16px; border-radius:4px; object-fit:contain; background:#fff; flex:0 0 auto; }
.badge .seg-logo{ width:14px; height:14px; }
.order-ext{ font-size:var(--text-xs); }