/* ===== MOBILE FIXES FOR SPECIFIC PAGES ===== */

/* ===== HOME PAGE MOBILE IMPROVEMENTS ===== */
@media (max-width: 1023px) {
  /* Update home page breakpoints */
  .home-quicknav {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  .home-quicknav button {
    padding: 12px 6px !important;
    font-size: 11px !important;
  }

  /* Improve metrics grid */
  .metrics-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .production-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Better spacing for small screens */
  #page-home .page-header {
    margin-bottom: 12px !important;
  }

  /* Improve dashboard cards */
  .dashboard-card {
    padding: 12px !important;
    margin-bottom: 8px !important;
  }

  /* Better chart container */
  .chart-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

@media (max-width: 480px) {
  .home-quicknav {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .metrics-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ===== SALES PAGE MOBILE IMPROVEMENTS ===== */
@media (max-width: 1023px) {
  /* Improve sales button layout */
  #sales-tab-overview > div:first-child {
    flex-direction: column !important;
    gap: 8px !important;
  }

  #sales-tab-overview button {
    flex: none !important;
    min-width: auto !important;
    width: 100% !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
  }

  /* Better sales tabs */
  .sales-tabs {
    gap: 4px !important;
    margin-bottom: 12px !important;
  }

  .sales-tab {
    padding: 10px 14px !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
  }

  /* Improve chart area */
  .sales-chart-container {
    padding: 8px 0 !important;
    overflow-x: auto !important;
  }

  /* Better metrics cards */
  .sales-metrics {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .sales-metric-card {
    padding: 12px 8px !important;
    text-align: center !important;
  }

  /* Improve daily report modal on mobile */
  .daily-report-modal .modal-content {
    margin: 4px !important;
    max-height: 95vh !important;
    overflow-y: auto !important;
  }
}

@media (max-width: 480px) {
  .sales-metrics {
    grid-template-columns: 1fr !important;
  }

  .sales-tab {
    padding: 8px 10px !important;
    font-size: 11px !important;
  }
}

/* ===== GENERAL TABLE IMPROVEMENTS ===== */
@media (max-width: 1023px) {
  /* Make all tables responsive */
  .table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 -8px !important;
    padding: 0 8px !important;
  }

  table {
    min-width: 600px !important;
    font-size: 12px !important;
  }

  table th,
  table td {
    padding: 8px 6px !important;
    white-space: nowrap !important;
  }

  /* Better modal behavior on mobile */
  .modal-dialog {
    margin: 4px !important;
    max-width: calc(100vw - 8px) !important;
    max-height: calc(100vh - 8px) !important;
  }

  .modal-content {
    max-height: calc(100vh - 16px) !important;
    overflow-y: auto !important;
  }

  /* Improve form layouts */
  .form-row {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .form-group {
    margin-bottom: 12px !important;
  }

  /* Better button groups */
  .btn-group {
    flex-direction: column !important;
    gap: 6px !important;
  }

  .btn-group .btn {
    width: 100% !important;
  }
}

/* ===== CHART IMPROVEMENTS ===== */
@media (max-width: 1023px) {
  .chart-container {
    position: relative !important;
    height: 250px !important;
    overflow: hidden !important;
  }

  .chart-container canvas {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Chart button controls */
  .chart-controls {
    display: flex !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    margin-bottom: 12px !important;
  }

  .chart-btn {
    flex: 1 !important;
    min-width: 80px !important;
    padding: 8px 6px !important;
    font-size: 11px !important;
  }
}

/* ===== FIXES FOR OVERFLOW ISSUES ===== */
@media (max-width: 1023px) {
  /* Prevent any horizontal overflow */
  .page {
    overflow-x: hidden !important;
  }

  /* Better spacing for page content */
  .page-content {
    padding: 0 8px !important;
  }

  /* Fix card margins */
  .card,
  .settings-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Better list items */
  .list-item {
    padding: 12px 8px !important;
    margin-bottom: 6px !important;
  }

  /* Improve action buttons */
  .action-buttons {
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 12px !important;
  }

  .action-buttons .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ===== SETTINGS PAGE MOBILE IMPROVEMENTS ===== */
@media (max-width: 1023px) {
  /* Team settings mobile layout - wrap to multiple rows */
  .settings-team-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 16px 12px !important;
    align-items: flex-start !important;
  }

  /* First row: Avatar + Info (take full width) */
  .settings-team-row > div:first-of-type {
    flex-shrink: 0 !important;
    margin-right: 8px !important;
  }

  .settings-team-info {
    flex: 1 !important;
    min-width: 200px !important;
    margin-bottom: 8px !important;
  }

  /* Second row: Role badge and Telegram ID */
  .settings-team-row > span {
    font-size: 12px !important;
    padding: 4px 8px !important;
    margin-right: 8px !important;
  }

  .settings-team-tg {
    font-size: 12px !important;
    margin-right: auto !important;
  }

  /* Third row: Action buttons (full width on new line) */
  .settings-team-actions {
    width: 100% !important;
    display: flex !important;
    gap: 8px !important;
    margin-top: 8px !important;
    order: 10 !important;
  }

  .settings-team-actions button {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 10px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    border-radius: 8px !important;
  }

  /* Make role button wider for better touch */
  .settings-team-actions button[data-role-modal] {
    min-width: 70px !important;
    padding: 10px 14px !important;
  }

  /* Improve typography for mobile */
  .settings-team-info > div:first-child {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin-bottom: 2px !important;
  }

  .settings-team-info > div:last-child {
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #64748b !important;
  }

  /* Distribution cards mobile layout */
  .sp-dist-card {
    margin-bottom: 16px !important;
    padding: 12px !important;
  }

  .sp-dist-card > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }

  .sp-dist-card > div:first-child > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    font-size: 11px !important;
  }

  .sp-dist-card > div:last-child {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .sp-dist-card label {
    margin-bottom: 8px !important;
  }

  .sp-dist-card input[type="range"] {
    width: 100% !important;
  }

  .sp-dist-card input[type="number"] {
    font-size: 16px !important;
    padding: 10px !important;
  }

  /* Settings card spacing */
  .settings-card {
    margin-bottom: 16px !important;
  }

  /* Settings header on mobile */
  .settings-card > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .settings-card > div:first-child button {
    align-self: flex-start !important;
  }
}

@media (max-width: 480px) {
  /* Extra small screens - stack everything vertically */
  .settings-team-row {
    flex-direction: column !important;
  }

  .settings-team-row > div:first-of-type {
    margin-right: 0 !important;
    margin-bottom: 8px !important;
  }

  .settings-team-info {
    margin-bottom: 8px !important;
    min-width: auto !important;
  }

  .settings-team-actions {
    flex-direction: column !important;
    gap: 6px !important;
    margin-top: 12px !important;
  }

  .settings-team-actions button {
    width: 100% !important;
    justify-content: flex-start !important;
    padding: 12px 16px !important;
    gap: 8px !important;
  }

  .settings-team-actions button svg {
    flex-shrink: 0 !important;
  }

  /* Stack role and telegram ID */
  .settings-team-row > span,
  .settings-team-tg {
    display: block !important;
    margin-right: 0 !important;
    margin-bottom: 4px !important;
  }

  /* Distribution stats on very small screens */
  .sp-dist-card > div:first-child > div:last-child {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
}

/* ===== TEXT AND TYPOGRAPHY ===== */
@media (max-width: 1023px) {
  /* Better text sizing for mobile */
  h1 { font-size: 24px !important; }
  h2 { font-size: 20px !important; }
  h3 { font-size: 18px !important; }
  h4 { font-size: 16px !important; }
  h5 { font-size: 14px !important; }

  /* Improve line height for readability */
  p, div, span {
    line-height: 1.4 !important;
  }

  /* Better link styling on mobile */
  a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* ===== INBOX INPUT MOBILE IMPROVEMENTS ===== */
@media (max-width: 1023px) {
  /* Поле більше не є рамкою — рамку малює .inbox-input-wrap::before.
     Власні padding/min-height тут ламали центрування тексту всередині рамки. */
  .inbox-input {
    font-size: 16px !important; /* Prevents zoom on iOS */
    min-height: 22px !important; /* висота одного рядка, не тач-таргет */
    padding: 9px 4px !important;
    line-height: 1.35 !important;
    max-height: 40vh !important; /* довгі повідомлення мають вміщатись */
    overflow-y: auto !important; /* і прокручуватись */
    -webkit-overflow-scrolling: touch;
  }

  .inbox-input-wrap {
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .inbox-send-btn {
    width: 44px !important; /* Larger touch target */
    height: 44px !important; /* Larger touch target */
  }

  .inbox-mic-btn {
    width: 44px !important; /* Larger touch target */
    height: 44px !important; /* Larger touch target */
  }
}
/* ===== TOUCH TARGETS: UNIVERSAL FUNNEL (UF) ===== */
/* All interactive funnel elements must be ≥ 44px on mobile */
@media (max-width: 768px) {

  /* Funnel switcher tabs (was 30px) */
  .uf-sw-btn {
    min-height: 44px !important;
    padding: 8px 14px !important;
    align-items: center !important;
  }

  /* Filter button (was 33px) */
  .uf-filter-btn {
    min-height: 44px !important;
    padding: 10px 14px !important;
  }

  /* Primary "+ Додати" button (was 31px) */
  .uf-btn-primary {
    min-height: 44px !important;
    padding: 10px 18px !important;
  }

  /* Header action buttons: Archive, etc */
  .uf-btn,
  .uf-btn-secondary {
    min-height: 44px !important;
    padding: 10px 14px !important;
  }

  /* Column "+" add button — keep 22px visual, expand tap area via padding */
  .uf-col-add {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    font-size: 18px !important;
    border: none !important;
    background: var(--bg-secondary, #f1f5f9) !important;
  }

  /* Card icon buttons (was 24px — already 36px on some media, still < 44) */
  .uf-card-icon-btn {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
  }

  /* Bulk action bar buttons */
  .uf-bulk-action-btn {
    min-height: 44px !important;
    padding: 10px 14px !important;
  }

  /* Submit/cancel/danger buttons in modals */
  .uf-btn-submit,
  .uf-btn-cancel,
  .uf-btn-danger {
    min-height: 44px !important;
    padding: 10px 20px !important;
  }

  /* View toggle (kanban/list) — was 32px */
  .uf-view-btn {
    width: 44px !important;
    height: 44px !important;
  }

  /* Notes header button */
  .notes-header-btn {
    min-height: 44px !important;
    padding: 10px 14px !important;
  }

  /* List row — make rows feel like buttons on mobile */
  .uf-list-row {
    min-height: 56px !important;
    padding: 14px 12px !important;
    align-items: center !important;
  }

  /* Mobile contact buttons (was ~34px) */
  .uf-dp-contact-btns button {
    min-height: 44px !important;
    padding: 10px 12px !important;
  }

  /* Mobile back and close buttons */
  .uf-mobile-back-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 8px !important;
  }

  .uf-mobile-close-btn {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 8px 4px !important;
  }

  /* Search input — prevent iOS zoom (font-size < 16px triggers zoom) */
  .uf-search,
  .uf-search-input {
    font-size: 16px !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
  }

  /* Stage select in kanban mobile header */
  .uf-mobile-stage-select {
    min-height: 44px !important;
    font-size: 14px !important;
    padding: 10px 12px !important;
  }
}

/* ===== TOUCH TARGETS: GLOBAL BUTTON FIX ===== */
/* The generic `button { min-height: 44px }` gets overridden by specific rules.
   This catches common pattern where height is set explicitly. */
@media (max-width: 768px) {
  /* Force all interactive controls unless they're icon/decorative */
  button:not(.icon-only):not([data-decorative]) {
    min-height: 44px !important;
    touch-action: manipulation;
  }

  /* Fix inputs to prevent iOS zoom.
     16px — це порог, нижче якого iOS зумить сторінку при дотику до поля
     введення. Для текстових полів правило потрібне.

     А от select до цього списку потрапив помилково: у нього iOS відкриває
     власний вибирач і сторінку не зумить, зате це правило з !important
     перебивало розміри в картці замовлення. Виходило, що ярлик поля 12px,
     текстове значення 13px, а випайка 16px — саме через це «Виконавець» і
     «Продавець» виглядали більшими за решту рядків. Вигляд випайок тепер
     задають самі розділи. */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="password"],
  textarea {
    font-size: 16px !important;
  }
}


/* ── Форма замовлення на телефоні: зручність ──────────────────────────────
   Було: вікно з подвійною прокруткою (модалка + внутрішній блок на 70vh),
   кнопка збереження захована в самому низу внутрішнього скролу, поля 32px
   і шрифт 13px — iOS на такому зумить сторінку при кожному дотику. */
@media (max-width: 640px) {
  /* Сам оверлей має відступ 40px згори і власну прокрутку — через них
     вікно на 100dvh не вміщалось і низ виїжджав за екран. */
  #modal.active {
    padding: 0 !important;
    overflow: hidden !important;
  }
  /* Вікно на весь екран замість картки з власним скролом */
  #modal.active .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  #modal.active .modal-header { flex: 0 0 auto; }
  /* Тіло вікна має id, а не клас — по .modal-body правила не застосовувались,
     через що блок не ставав розтяжним і низ форми лишався за межами екрана. */
  #modal.active #modal-body,
  #modal.active .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  /* Внутрішній блок більше не скролиться окремо — прокрутка одна на все вікно */
  #modal-body [style*="max-height:70vh"] {
    max-height: none !important;
    overflow: visible !important;
  }

  /* Поля під палець: 16px не дає iOS зумити, 44px — комфортний дотик */
  #modal-body .ord-form-input,
  #modal-body input,
  #modal-body select,
  #modal-body textarea {
    font-size: 16px !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
  }
  #modal-body textarea { min-height: 66px !important; }
  /* Поля кількості й ціни в рядку товару лишаються вузькими, але високими */
  #modal-body [id^="prow-"] input { padding: 10px 6px !important; }
  #modal-body .ord-form-label { font-size: 13px !important; }

  /* Перемикачі теж були надто дрібні */
  #modal-body .cf-toggle { transform: scale(1.25); transform-origin: right center; }
  #modal-body .cf-toggle input { width: 44px; height: 44px; }

  /* Кнопка збереження завжди на видноті, а не в кінці довгої простирадла */
  #modal-body button[onclick*="saveNewOrder"] {
    position: sticky;
    bottom: 0;
    z-index: 5;
    min-height: 50px !important;
    font-size: 15px !important;
    box-shadow: 0 -6px 16px rgba(0,0,0,.10);
  }
}


/* ── Каталог товарів у формі замовлення на телефоні ───────────────────────
   Панель має інлайнові width:480px і height:100% — ширша за екран телефона,
   а рядок товару (чекбокс + фото + назва + ціна + лічильник) не вміщався
   в один рядок. Перебиваємо через !important, бо стилі задані інлайном. */
@media (max-width: 640px) {
  #product-catalog-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    left: 0 !important;
  }
  /* Шапка */
  #product-catalog-drawer > div:first-child { padding: 14px 16px !important; }
  #product-catalog-drawer > div:first-child h3 { font-size: 16px !important; }
  #product-catalog-drawer > div:first-child button { min-width: 44px; min-height: 44px; }

  /* Рядок пошуку: поле на всю ширину, категорія під ним */
  #product-catalog-drawer > div:nth-child(2) {
    flex-wrap: wrap !important;
    padding: 12px 16px !important;
    gap: 8px !important;
  }
  #product-catalog-search,
  #product-catalog-category {
    font-size: 16px !important;   /* менший шрифт змушує iOS зумити сторінку */
    min-height: 44px !important;
    max-width: none !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Список */
  #product-catalog-list { padding: 4px 0 !important; }
  #product-catalog-list [data-sku] {
    flex-wrap: wrap !important;
    padding: 10px 14px !important;
    gap: 10px !important;
    row-gap: 6px !important;
  }
  /* фото трохи менше, назві лишається місце */
  #product-catalog-list [data-sku] > :nth-child(2) {
    width: 44px !important;
    height: 44px !important;
  }
  #product-catalog-list [data-sku] > :nth-child(3) { flex: 1 1 140px !important; }
  /* ціна і лічильник переїжджають у другий рядок картки */
  #product-catalog-list [data-sku] > :nth-child(4) {
    flex: 1 1 60% !important;
    font-size: 15px !important;
  }
  #product-catalog-list [data-sku] > :nth-child(5) { margin-left: auto !important; }
  #product-catalog-list [data-sku] > :nth-child(5) button {
    width: 34px !important;
    height: 34px !important;
    font-size: 17px !important;
  }
  #product-catalog-list [data-sku] input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
  }

  /* Нижня панель з кнопкою «Додати обрані» */
  #product-catalog-drawer > div:last-child {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #product-catalog-drawer > div:last-child > button { min-height: 50px !important; }
  #manual-product-form input { font-size: 16px !important; min-height: 44px !important; }
  #manual-product-form > div[style*="display:flex"] { flex-wrap: wrap !important; }
  #manual-product-price { width: 110px !important; }
  #manual-product-qty { width: 90px !important; }
}

/* ── Funnel detail modal — мобільна адаптація ──────────────────────────────
   Модалка вже full-screen завдяки правилам вище (~617).
   Додаткові фікси для конкретних елементів картки замовлення. */
@media (max-width: 640px) {
  /* Перенесення довгих назв товарів і коментарів */
  #modal-body {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Фото товару — компактне на мобільному */
  #modal-body .photo-section {
    margin-bottom: 8px !important;
  }
  #modal-body .photo-section img {
    max-height: 160px !important;
  }
  /* Placeholder "фото не завантажено" */
  #modal-body .photo-section div[style*="padding:20px"] {
    padding: 10px !important;
  }

  /* Кнопки під фото — flex-wrap щоб не виходили за екран */
  #modal-body .photo-section div[style*="margin-top:8px"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: center !important;
  }
  #modal-body .photo-section div[style*="margin-top:8px"] button,
  #modal-body .photo-section div[style*="margin-top:8px"] label {
    margin-right: 0 !important;
    flex: 1 1 100px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
  }

  /* Сітка 2-колонкова → 1 колонка (доповнює правило в main.css для span 2) */
  #modal-body [style*="grid-template-columns:1fr 1fr"],
  #modal-body [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* span 2 не має сенсу в 1-колонковій сітці */
  #modal-body [style*="grid-column:span 2"],
  #modal-body [style*="grid-column: span 2"] {
    grid-column: span 1 !important;
  }

  /* Компактніші блоки даних (дедлайн, норма, статус, менеджер) */
  #modal-body [style*="border-radius:10px"][style*="padding:10px"] {
    padding: 7px 8px !important;
  }
  #modal-body [style*="border-radius:10px"][style*="padding:10px"] [style*="font-size:14px"] {
    font-size: 13px !important;
  }
  #modal-body [style*="border-radius:10px"][style*="padding:10px"] .u-label {
    font-size: 11px !important;
  }

  /* Секції товару, коментаря, міток — менші відступи */
  #modal-body .u-mb16 { margin-bottom: 10px !important; }
  #modal-body [style*="margin-bottom:14px"] { margin-bottom: 8px !important; }
  #modal-body [style*="margin-bottom:16px"] { margin-bottom: 10px !important; }

  /* Мітки та source-badges — завжди wrap */
  #modal-body [style*="flex-wrap:wrap"],
  #modal-body [style*="flex-wrap: wrap"] {
    flex-wrap: wrap !important;
  }

  /* Кнопка "Назад до архіву" — нормальна висота */
  #modal-body button[onclick*="showArchive"] {
    min-height: 44px !important;
    margin-bottom: 8px !important;
  }

  /* Коментар менеджера — компактніший padding */
  #modal-body [style*="background:#fffbf0"][style*="padding:12px"] {
    padding: 8px 10px !important;
  }

  /* Кнопка "Дії з замовленням" — компактна */
  #modal-body button[onclick*="order-menu"] {
    padding: 7px 10px !important;
    font-size: 12px !important;
  }
}

/* ── Модалка: закриття та кнопка × на мобільному ──────────────────────────
   1. Блокуємо скрол body поки модалка відкрита (iOS rubber-band leak).
   2. Збільшуємо touch-target кнопки × до 44px (було 28px — промахуються).
   :has() підтримується Safari 15.4+, Chrome 105+ — всі сучасні мобільні. */
@media (max-width: 640px) {
  body:has(#modal.active) {
    overflow: hidden !important;
  }

  .modal-close {
    width: 44px !important;
    height: 44px !important;
    font-size: 22px !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* Гарантуємо що header завжди поверх body-контенту */
  #modal.active .modal-header {
    position: relative;
    z-index: 2;
    background: var(--bg-card-solid);
    padding-top: max(16px, env(safe-area-inset-top, 16px));
  }
}

/* ── ТТН Нової Пошти: габарити місця на телефоні ──────────────────────────
   Рядок місця — сітка з шести колонок (номер, вага, три габарити, кнопка).
   На екрані 360 px кожне поле діставало близько 60 px: цифри не влазили,
   підписи ламались, і ввести довжину-ширину-висоту було неможливо.
   Розкладаємо у дві колонки, номер місця і кнопку видалення — окремим рядком. */
@media (max-width: 640px) {
  .ttn-seat-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 10px !important;
  }
  /* Перша комірка — «#1», остання — кнопка видалення */
  .ttn-seat-row > div:first-child {
    grid-column: 1 / -1;
    text-align: left !important;
    padding-bottom: 0 !important;
    font-weight: 600;
  }
  .ttn-seat-row > div:last-child {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
  .ttn-seat-row input[type="number"] {
    padding: 10px !important;
    font-size: 16px !important;   /* менший розмір змушує iOS зумити сторінку */
    min-height: 44px;
  }
  .ttn-seat-row label {
    font-size: 12px !important;
  }
}