/* Söwda Hasap v94 mobile UI fix: phone-only layout. Desktop is untouched. */
@media (max-width: 768px) {
  :root {
    --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    --mobile-nav-h: 74px;
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100% !important;
  }

  body {
    padding-bottom: calc(var(--mobile-nav-h) + var(--mobile-safe-bottom) + 18px) !important;
  }

  header {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
    padding: 10px 10px 12px !important;
    border-radius: 0 0 20px 20px !important;
    overflow: visible !important;
  }

  .headrow {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .brand {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  .brand h1 {
    font-size: 22px !important;
    line-height: 1.08 !important;
    margin: 0 !important;
  }

  .brand p {
    max-width: 100% !important;
    margin: 4px auto 0 !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .theme-toggle {
    order: 2 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 3px !important;
    height: 38px !important;
  }

  .theme-toggle button {
    width: 32px !important;
    min-width: 32px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 30px !important;
  }

  #currentAdminChip,
  .admin-chip {
    display: none !important;
  }

  .logout-btn,
  .header-notify-v60,
  .header-notify-v61 {
    order: 3 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 96px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    line-height: 38px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .header-notify-v60,
  .header-notify-v61 {
    order: 4 !important;
    max-width: 72px !important;
  }

  .lang {
    order: 5 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    gap: 6px !important;
  }

  .lang button {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 38px !important;
  }

  main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 10px calc(var(--mobile-nav-h) + var(--mobile-safe-bottom) + 28px) !important;
    margin: 0 !important;
  }

  .screen {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .screen > .card,
  .screen > .search,
  .screen > .list,
  .card,
  .item,
  .panel,
  .admin-card-v61,
  .notify-control-card-v61,
  .catalog-hero-v61,
  .catalog-control-card-v61,
  .cart-panel-v61 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .card,
  .item,
  .panel,
  .admin-card-v61 {
    border-radius: 18px !important;
    padding: 14px !important;
  }

  .row,
  .form-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  .row > *,
  .form-row > * {
    margin-top: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .two-actions,
  .btns,
  .action-grid,
  .action-grid.secondary-row,
  .catalog-actions-v61,
  .invoice-actions-v61,
  .notify-actions-v61,
  .edit-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .two-actions > *,
  .btns > *,
  .action-grid > *,
  .catalog-actions-v61 > *,
  .invoice-actions-v61 > *,
  .notify-actions-v61 > *,
  .edit-actions > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  input,
  select,
  textarea,
  button,
  .btn {
    font-size: 16px !important;
    max-width: 100% !important;
  }

  button,
  .btn {
    min-height: 46px !important;
    white-space: normal !important;
  }

  textarea {
    min-height: 92px !important;
  }

  .grid,
  .grid3,
  .grid4,
  .admin-grid-v61,
  .settings-grid,
  .notify-stats-v61,
  .visit-report-grid-v89,
  .visit-history-toolbar-v89 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .admin-hero-v61,
  .notify-hero-v61 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 10px 0 12px !important;
    padding: 16px !important;
    border-radius: 22px !important;
  }

  .admin-hero-v61 h2,
  .notify-hero-v61 h2 {
    font-size: 24px !important;
    line-height: 1.15 !important;
  }

  .admin-hero-actions-v61 {
    width: 100% !important;
    margin-top: 14px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .admin-hero-actions-v61 button,
  .logout-site-top-v61 {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .admin-password-row-v61,
  .password-view-with-btn-v61 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex-basis: auto !important;
  }

  .password-view-with-btn-v61 {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
  }

  .password-view-with-btn-v61 span,
  #sitePasswordView,
  #adminPanelPasswordViewV61,
  #chiefPasswordView {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .password-view-with-btn-v61 .eye-btn-v61,
  .eye-btn-v61 {
    width: auto !important;
    min-width: 82px !important;
    max-width: 96px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .email-confirm-v88 label[data-i18n="sitePasswordConfirmForEmail"] {
    font-size: 12px !important;
  }

  .edit-modal,
  .camera-modal,
  .scan,
  .photo-modal {
    padding: 10px !important;
  }

  .edit-box,
  .camera-box,
  .scanbox {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: 90dvh !important;
    padding: 14px !important;
    border-radius: 18px !important;
  }

  .edit-head {
    gap: 8px !important;
  }

  .edit-head h3 {
    font-size: 20px !important;
  }

  .edit-fields {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  .media-card,
  .product-card-v61 .product-top-v61,
  .map-shop-card,
  .visit-stale-item-v89 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .catalog-grid,
  .products-grid,
  .product-grid,
  .shop-grid,
  .orders-grid,
  .catalog-grid-v61 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .catalog-img-v61,
  .catalog-card img,
  .product-card img,
  [data-product-id] img {
    height: 170px !important;
    max-height: 170px !important;
    object-fit: contain !important;
  }

  .shops-map,
  #shopsMap {
    height: 320px !important;
    min-height: 320px !important;
    border-radius: 18px !important;
  }

  .tabs {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 120 !important;
    height: calc(var(--mobile-nav-h) + var(--mobile-safe-bottom)) !important;
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 8px 8px calc(8px + var(--mobile-safe-bottom)) !important;
    border-radius: 18px 18px 0 0 !important;
    background: rgba(255,255,255,.96) !important;
    scrollbar-width: none !important;
  }

  .tabs::-webkit-scrollbar {
    display: none !important;
  }

  .tabs .tab {
    flex: 0 0 82px !important;
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 8px 6px !important;
    border-radius: 14px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .tabs .tab.active {
    background: #e6fffb !important;
    color: #0f766e !important;
    box-shadow: inset 0 3px 0 #0f766e !important;
  }

  .pwa-v93-bar {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(var(--mobile-nav-h) + var(--mobile-safe-bottom) + 18px) !important;
    padding: 10px !important;
    border-radius: 16px !important;
  }

  .pwa-v93-bar.show {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .pwa-v93-bar strong {
    font-size: 13px !important;
  }

  .pwa-v93-bar span {
    font-size: 11px !important;
  }

  .pwa-v93-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .pwa-v93-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 9px 10px !important;
  }

  .toast-box {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(var(--mobile-nav-h) + var(--mobile-safe-bottom) + 16px) !important;
    max-width: none !important;
  }

  #notifyFloatV60,
  #notifyFloatV61 {
    display: none !important;
  }
}

@media (max-width: 420px) {
  .tabs .tab {
    flex-basis: 76px !important;
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    font-size: 10.5px !important;
  }

  .brand h1 {
    font-size: 21px !important;
  }

  .logout-btn,
  .header-notify-v60,
  .header-notify-v61 {
    max-width: 82px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .lang button {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
  }
}

/* ===== v96-mobile-safe-merge: selected safe mobile polish from v95, phone only ===== */
@media (max-width: 768px) {
  :root {
    --mobile-safe-top: env(safe-area-inset-top, 0px);
    --mobile-safe-left: env(safe-area-inset-left, 0px);
    --mobile-safe-right: env(safe-area-inset-right, 0px);
  }

  *, *::before, *::after {
    box-sizing: border-box !important;
  }

  img,
  canvas,
  video,
  svg {
    max-width: 100% !important;
  }

  button,
  .btn,
  .tab,
  a[role="button"] {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  header {
    padding-top: calc(10px + var(--mobile-safe-top)) !important;
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
  }

  .headrow {
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
  }

  .theme-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
  }

  .theme-toggle button,
  .lang button {
    flex: 0 0 auto !important;
  }

  .logout-btn,
  .header-notify-v60,
  .header-notify-v61,
  .header-notify-v71,
  #headerNotifyV71 {
    transform: none !important;
    animation: none !important;
  }

  .tabs {
    transform: translateZ(0) !important;
    will-change: auto !important;
    contain: layout paint !important;
    scroll-snap-type: x proximity !important;
  }

  .tabs .tab,
  .tabs .tab.active,
  .tabs .tab:hover,
  .tabs .tab:focus {
    transform: none !important;
    animation: none !important;
    transition: background-color .12s ease, color .12s ease, box-shadow .12s ease !important;
    scroll-snap-align: start !important;
  }

  .pwa-v93-bar,
  .toast-box,
  .notify-float-v61,
  #notifyFloatV60,
  #notifyFloatV61 {
    max-width: calc(100vw - 20px) !important;
  }

  .edit-modal,
  .camera-modal,
  .scan,
  .photo-modal {
    align-items: flex-end !important;
  }

  .edit-box,
  .camera-box,
  .scanbox {
    max-height: 92dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .lock,
  #lockScreen {
    padding-left: max(14px, var(--mobile-safe-left)) !important;
    padding-right: max(14px, var(--mobile-safe-right)) !important;
  }

  .lockbox {
    width: calc(100vw - 28px) !important;
    max-width: 420px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .qty-stepper-v61 {
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
  }

  .qty-stepper-v61 button {
    width: 44px !important;
    min-height: 44px !important;
  }

  .visit-actions-v89,
  .visit-report-grid-v89,
  .notify-stats-v61,
  .notify-actions-v61,
  .invoice-actions-v61 {
    grid-template-columns: 1fr 1fr !important;
  }

  .catalog-toolbar-v61,
  .visit-history-toolbar-v89,
  .line-item,
  .catalog-order {
    grid-template-columns: 1fr !important;
  }

  #shopsMap,
  .shops-map,
  .map-container,
  [id*="Map"] {
    width: 100% !important;
    min-height: 240px !important;
    overflow: hidden !important;
  }
}

@media (max-width: 420px) {
  .brand h1 {
    font-size: 20px !important;
  }

  .brand p {
    font-size: 10px !important;
  }

  .tabs .tab {
    flex-basis: 72px !important;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    font-size: 10px !important;
  }

  .visit-actions-v89,
  .visit-report-grid-v89,
  .notify-stats-v61,
  .notify-actions-v61,
  .invoice-actions-v61 {
    grid-template-columns: 1fr !important;
  }
}