/* Кабінет на телефоні й вузькому планшеті (підключається з media="(max-width: 900px)", після решти стилів кабінету).
   Каркас: верхній рядок .mbar (лого, адреса сайту, «Меню»), під ним підрозділи .msub, знизу — меню розділів .tabbar.
   Списки (замовлення, клієнти, заявки, товари) — карточками замість широких таблиць; кнопки й поля — під палець (≥44 px). */

:root { --tabbar-h: 62px; --safe-b: env(safe-area-inset-bottom, 0px); }

/* --- каркас ------------------------------------------------------------------- */
.mbar { gap: 10px; padding: 8px 12px 8px 16px; min-height: 56px; }
.mbar .logo { flex: none; }
.mbar__site { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px;
  color: var(--fg-2); font-size: 13px; font-weight: 600; }
.mbar__site span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbar__site .ico { width: 14px; height: 14px; }
.mbar__site:hover { color: var(--fg); }
.mnav > summary { min-height: 40px; padding: 0 12px; }
.mnav__panel { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 24px); }
.mnav__me { margin: 0; font-size: 13px; color: var(--fg-2); overflow-wrap: anywhere; }

/* підрозділи поточного розділу — смужка «пігулок» з гортанням */
.msub { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px 16px; background: var(--side);
  border-bottom: 1px solid #e7e8e9; position: sticky; top: 56px; z-index: 29; }
.msub::-webkit-scrollbar { display: none; }
.msub a { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line-2); color: var(--fg); font-weight: 600; font-size: 14px; white-space: nowrap; }
.msub a.on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* нижнє меню розділів */
.tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--line-2); padding: 4px 4px calc(4px + var(--safe-b));
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); }
.tabbar__i { flex: 1 1 0; min-width: 0; min-height: 54px; display: grid; justify-items: center; align-content: center; gap: 3px;
  border-radius: 10px; color: #5c5c62; font: 600 10.5px/1.15 var(--font); text-align: center; }
.tabbar__i span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar__i .ico { width: 22px; height: 22px; }
.tabbar__i:hover { color: var(--fg); }
.tabbar__i.on { color: var(--fg); }
.tabbar__i.on .ico { background: var(--ink); color: #fff; border-radius: 8px; padding: 3px; width: 30px; height: 26px; }
.content { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 32px); }
/* липкі низи форм і смуга масових дій — над нижнім меню */
.form-rows .form-foot { bottom: calc(var(--tabbar-h) + var(--safe-b)); }
/* кілька коротких форм на сторінці («Акаунт»): липкий низ вилазив би на заголовок наступної форми */
.form-rows > form:not(:only-of-type) .form-foot { position: static; margin-bottom: 0; }
.cc-bulk { bottom: calc(var(--tabbar-h) + var(--safe-b) + 8px) !important; }
body.cc-has-bulk .content { padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 150px); }
.verify, .verify__acts { flex-wrap: wrap; }
/* широкі таблиці гортаються всередині своєї рамки; без contain мобільний Chrome рахує їхню ширину як ширину сторінки
   (сторінка «їде» вбік, хоча рамка й має overflow: auto) */
.cc-tablewrap, .o-tablewrap, .table-wrap, .o-box--flush, .card--flush { contain: paint; }

/* --- під палець: кнопки ≥ 44 px, поля 16 px (інакше iPhone збільшує сторінку при фокусі) ---------------------- */
.btn, .o-btn, .cc-btn, .btn--sm, .o-btn--sm { min-height: 44px; }
.btn--sm, .o-btn--sm { padding: 0 14px; }
.btn--icon { width: 44px; }
.o-pg a, .o-pg span, .cc-pager__btn { width: 44px; height: 44px; }
.field input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]), .field select, .field textarea,
.o-page input[type=text], .o-page input[type=search], .o-page input[type=email], .o-page input[type=number],
.o-page input[type=date], .o-page input[type=tel], .o-page select, .o-page textarea,
.cc input[type=text], .cc input[type=search], .cc input[type=number], .cc input[type=datetime-local], .cc input[type=url],
.cc textarea, .cc select, .filters input, .filters select, .cc-dlg input[type=text], .cc-dlg select {
  font-size: 16px; min-height: 44px; }
.tabs a, .o-tabs a, .cc-tabs a, .o-sorts a, .anchors a { min-height: 44px; display: inline-flex; align-items: center; }
/* кружок кроку гайда 28 px, а палець — 44: зона натискання ширша за кружок */
.step__mark { position: relative; }
.step__mark::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.o-sorts a { padding: 0 12px; }
.panel__list a, .me__menu a { min-height: 44px; }
.field--check label { min-height: 44px; }
.cc-menu__pop a { padding: 12px 10px; }
.cc-menu__cols label { min-height: 36px; }
.o-msg a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; }
.msub a { min-height: 40px; }
.mbar .logo, .mbar__site { min-height: 40px; }
.o-back, .cc-back a, .card__head a, .guide__hide, .eyebrow a { display: inline-flex; align-items: center; min-height: 40px; }
.o-box__head a { display: inline-flex; align-items: center; min-height: 40px; }
/* кружок «крок виконано» в гайді: видимий 28 px, а натискати можна в 44 px */
.step__mark { position: relative; }
.step__mark::after { content: ""; position: absolute; inset: -8px; }
.guide__aside li a { display: inline-flex; align-items: center; min-height: 40px; }

/* --- шапки розділів -------------------------------------------------------------------------------------- */
h1 { font-size: 22px; }
.head { margin-bottom: 16px; }
.head__actions, .o-head__actions { width: 100%; }
.head__actions .btn, .o-head__actions .o-btn { flex: 1 1 auto; }
.o-head { gap: 10px 12px; }
.o-head h1 { font-size: 1.45rem; }
.o-tabs { order: 5; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.o-tabs::-webkit-scrollbar { display: none; }
.o-tabs a { flex: none; }
.o-count { margin-left: auto; }
.o-search { max-width: none; }
.cc-head { align-items: stretch; }
.cc-head__tools .cc-btn { flex: 1 1 auto; }
.cc-head__tools .cc-menu { flex: none; }
.cc-filters .cc-search { flex: 1 1 100%; max-width: none; }
.cc-filters .cc-select { flex: 1 1 auto; }
.cc-pager { justify-content: center; }

/* --- дрібні екрани: списки карточками ----------------------------------------------------------------------- */
@media (max-width: 700px) {
  .content { padding-left: 12px; padding-right: 12px; }
  .anchors { margin: 0 -12px; padding: 0 12px; }
  .oc-lbl { display: inline; }
  .o-table--orders .oc-rcpt.is-empty { display: none; }

  /* загальне: таблиця → стос карток (лише списки; склад замовлення й історія клієнта лишаються таблицями) */
  .o-tablewrap:has(> .o-table--orders, > .o-table--clients, > .o-table--leads) { border: 0; background: none; overflow: visible; }
  :is(.o-table--orders, .o-table--clients, .o-table--leads) thead { display: none; }
  :is(.o-table--orders, .o-table--clients, .o-table--leads), :is(.o-table--orders, .o-table--clients, .o-table--leads) tbody { display: block; }
  :is(.o-table--orders, .o-table--clients, .o-table--leads) tbody tr { display: grid; gap: 4px 12px; padding: 14px 16px; margin-bottom: 10px;
    background: #fff; border: 1px solid var(--o-line); border-radius: 12px; }
  :is(.o-table--orders, .o-table--clients, .o-table--leads) tbody tr:hover td { background: none; }
  :is(.o-table--orders, .o-table--clients, .o-table--leads) td { display: block; padding: 0; border: 0; min-width: 0; }
  :is(.o-table--orders, .o-table--clients, .o-table--leads) td.num { text-align: left; }
  .o-table small { white-space: normal; }
  .o-table:not(.o-table--orders):not(.o-table--clients):not(.o-table--leads) :is(td, th) { padding-left: 8px; padding-right: 8px; }
  .o-clip { max-width: none; white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

  /* замовлення: №, статус / покупець, сума / склад / доставка, оплата / дата, джерело */
  .o-table--orders tbody tr { grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "num status" "who sum" "rcpt rcpt" "items items" "deliv pay" "date src"; }
  .o-table--orders .oc-num { grid-area: num; font-size: 16px; }
  .o-table--orders .oc-num a, .o-table--clients .cl-name a { display: inline-flex; align-items: center; min-height: 36px; }
  .table--recent td:first-child a { display: inline-flex; align-items: center; min-height: 32px; }
  .o-table--orders .oc-status { grid-area: status; justify-self: end; }
  .o-table--orders .oc-who { grid-area: who; font-weight: 600; }
  .o-table--orders .oc-who small { font-weight: 400; display: inline; margin-left: 6px; }
  .o-table--orders .oc-sum { grid-area: sum; justify-self: end; font-weight: 700; font-size: 16px; }
  .o-table--orders .oc-sum::after { content: " грн"; font-weight: 600; font-size: 13px; }
  .o-table--orders .oc-rcpt { grid-area: rcpt; font-size: 13px; }
  .o-table--orders .oc-items { grid-area: items; padding: 8px 0; margin: 4px 0; border-top: 1px dashed var(--o-line); border-bottom: 1px dashed var(--o-line); }
  .o-table--orders .o-items { max-width: none; font-weight: 400; }
  .o-table--orders .oc-deliv, .o-table--orders .oc-pay { font-size: 13px; font-weight: 400; color: var(--o-fg2); }
  .o-table--orders .oc-deliv small, .o-table--orders .oc-pay small { display: inline; margin-left: 4px; }
  .o-table--orders .oc-pay { grid-area: pay; justify-self: end; text-align: right; }
  .o-table--orders .oc-pay br { display: none; }
  .o-table--orders .oc-pay .o-badge { margin-left: 4px; }
  .o-table--orders .oc-deliv { grid-area: deliv; }
  .o-table--orders .oc-date, .o-table--orders .oc-src { font-size: 12.5px; font-weight: 400; }
  .o-table--orders .oc-date { grid-area: date; }
  .o-table--orders .oc-date small { display: inline; margin-left: 4px; }
  .o-table--orders .oc-src { grid-area: src; justify-self: end; }
  .o-table--orders tr.is-new { border-color: #b9cdf3; box-shadow: inset 3px 0 0 #2f6fde; }

  /* клієнти: ім'я, сума / телефон, к-сть / місто, email, нотатка / дати */
  .o-table--clients tbody tr { grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name sum" "phone count" "city city" "email email" "note note" "date last"; }
  .o-table--clients .cl-name { grid-area: name; font-size: 16px; }
  .o-table--clients .cl-sum { grid-area: sum; justify-self: end; font-weight: 700; }
  .o-table--clients .cl-sum::after { content: " грн"; font-weight: 600; font-size: 13px; }
  .o-table--clients .cl-phone { grid-area: phone; }
  .o-table--clients .cl-count { grid-area: count; justify-self: end; color: var(--o-fg2); font-size: 13px; }
  .o-table--clients .cl-city { grid-area: city; color: var(--o-fg2); font-size: 13px; }
  .o-table--clients .cl-email { grid-area: email; color: var(--o-fg2); font-size: 13px; overflow-wrap: anywhere; }
  .o-table--clients .cl-note { grid-area: note; font-size: 13px; }
  .o-table--clients .cl-note .o-clip { background: var(--o-warn-soft); border-radius: 8px; padding: 6px 10px; margin-top: 4px; }
  .o-table--clients .cl-date { grid-area: date; font-size: 12.5px; }
  .o-table--clients .cl-last { grid-area: last; justify-self: end; font-size: 12.5px; }
  .o-table--clients .cl-empty { display: none; }

  /* заявки: ім'я, дата / телефон / повідомлення / форма / кнопка */
  .o-table--leads tbody tr { grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name date" "phone phone" "msg msg" "form form" "act act"; }
  .o-table--leads tr.ld-new { border-color: #b9cdf3; box-shadow: inset 3px 0 0 #2f6fde; }
  .o-table--leads .ld-name { grid-area: name; font-weight: 700; font-size: 16px; }
  .o-table--leads .ld-name a { font-weight: 400; font-size: 13px; }
  .o-table--leads .ld-date { grid-area: date; font-size: 12.5px; justify-self: end; }
  .o-table--leads .ld-phone { grid-area: phone; }
  .o-table--leads .ld-phone a { display: inline-flex; align-items: center; min-height: 40px; font-size: 16px; }
  .o-table--leads .ld-msg { grid-area: msg; }
  .o-table--leads .ld-msg.is-empty { display: none; }
  .o-table--leads .ld-msg .o-clip { -webkit-line-clamp: 6; background: var(--o-soft); border-radius: 8px; padding: 8px 10px; }
  .o-table--leads .ld-form { grid-area: form; font-size: 12.5px; }
  .o-table--leads .ld-act { grid-area: act; margin-top: 6px; }
  .o-table--leads .ld-act .o-btn { width: 100%; }

  /* товари: [✓] фото назва ціна / наявність, залишок, артикул */
  .cc-tablewrap:has(> .cc-table[data-table]) { border: 0; background: none; overflow: visible; }
  .cc-table[data-table] thead { display: none; }
  .cc-table[data-table], .cc-table[data-table] tbody { display: block; }
  .cc-table[data-table] tbody tr { display: grid; grid-template-columns: 32px 56px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 4px;
    align-items: center; padding: 12px 14px 12px 10px; margin-bottom: 10px; background: #fff; border: 1px solid var(--cc-line); border-radius: 12px; }
  .cc-table[data-table] tbody tr.is-picked { border-color: var(--cc-green); background: #f6faf5; }
  .cc-table[data-table] td { display: block; padding: 0 !important; border: 0; min-width: 0; }
  .cc-table[data-table] .cc-table__check { grid-column: 1; grid-row: 1 / span 2; width: auto; display: grid; place-items: center; }
  .cc-table[data-table] .cc-table__check input { width: 22px; height: 22px; }
  .cc-table[data-table] [data-col=photo] { grid-column: 2; grid-row: 1 / span 2; width: auto; }
  .cc-table[data-table] [data-col=photo] img, .cc-table[data-table] [data-col=photo] span { width: 56px; height: 56px; }
  .cc-table[data-table] .cc-name { grid-column: 3; grid-row: 1; }
  .cc-table[data-table] .cc-name a { display: flex; align-items: center; min-height: 40px; font-size: 15px; line-height: 1.3; }
  .cc-table[data-table] [data-col=price] { grid-column: 4; grid-row: 1; text-align: right; }
  .cc-table[data-table] [data-col=availability] { grid-column: 3 / span 2; grid-row: 2; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
  .cc-table[data-table] [data-col=stock], .cc-table[data-table] [data-col=sku],
  .cc-table[data-table] [data-col=category], .cc-table[data-table] [data-col=stickers] { grid-column: 3 / span 2; font-size: 12.5px; color: var(--cc-ink-2); text-align: left; }
  .cc-table[data-table] [data-col=stock]:has(.cc-muted), .cc-table[data-table] [data-col=sku]:empty { display: none; }
  .cc-table[data-table] [data-col=stock]::before { content: "Залишок: "; }
  .cc-table[data-table] [data-col=category], .cc-table[data-table] [data-col=sku] { display: none; }
  .cc-table[data-table] [data-col=stickers]:empty { display: none; }
  .cc-table.no-photo[data-table] tbody tr { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .cc-table.no-photo[data-table] .cc-name { grid-column: 2; }
  .cc-table.no-photo[data-table] [data-col=price] { grid-column: 3; }

  /* огляд: останні замовлення — по два рядки */
  .table--recent, .table--recent tbody { display: block; }
  .table--recent tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .table--recent tr:last-child { border-bottom: 0; }
  .table--recent td { display: block; padding: 0 !important; border: 0; height: auto; }
  .table--recent td:nth-child(3), .table--recent th:nth-child(3) { display: block; grid-column: 2; grid-row: 2; text-align: right; font-weight: 700; }
  .table--recent td:nth-child(4) { grid-column: 2; grid-row: 1; }
  .table--recent td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .table--recent td:nth-child(2) br { display: none; }
  .table--recent td:nth-child(2) small { margin-left: 6px; }

  /* картка замовлення: склад — компактно */
  .o-box { padding: 14px; }
  .o-box--flush { padding: 0; }
  .o-dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .o-dl dd { margin-bottom: 8px; }
  .o-step { display: grid; grid-template-columns: minmax(0, 1fr); }
  .o-step select { width: 100%; }
  .o-step form { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .o-step > .o-btn, .o-step form .o-btn { width: 100%; }

  /* форми: одна колонка, кнопки на всю ширину */
  .form-foot { display: grid; grid-template-columns: minmax(0, 1fr); }
  .form-foot .btn { width: 100%; }
  .o-actions .o-btn { flex: 1 1 auto; }
  .o-form .o-grid { grid-template-columns: minmax(0, 1fr); }
  .cc-catform__foot .cc-btn, .cc-side-actions .cc-btn { flex: 1 1 auto; }
  .card { padding: 16px; }
  .guide__aside, .guide__main { border-radius: 12px; }
  .kpi { padding: 16px; }
  .site-row { flex-wrap: wrap; }
  .site-row .btn { width: 100%; }
  .plan-use__row { flex-wrap: wrap; }
  .tplpick:not(.tplpick--row) { grid-template-columns: repeat(2, minmax(0, 1fr)); }  /* стрічка шаблонів — без колонок, інакше перші картки стискаються в нуль */
  .copy { max-width: 100%; }
  .dash .copyrow .btn { flex: 1 1 auto; }
}