/* Ciuchatek 4.57 — wspolna warstwa ergonomii telefonu dla calego panelu. */

:root {
  --mobile-tap: 46px;
  --mobile-gap: 10px;
  --mobile-edge: max(10px, env(safe-area-inset-left));
}

@media (max-width: 900px) {
  html, body, #root { width: 100%; max-width: 100%; min-width: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { overscroll-behavior-y: none; }
  body.cu-mobile-overlay-open { overflow: hidden !important; touch-action: none; }

  *, *::before, *::after { box-sizing: border-box; }
  :where(.app-shell, .panel-workspace, .content, main, section, article, form, fieldset, .card, .subcard, .table-card, .data-table-wrapper) {
    min-width: 0;
    max-width: 100%;
  }

  .panel-topbar {
    position: sticky !important;
    top: 0;
    z-index: 150;
    min-height: 58px;
    padding-top: env(safe-area-inset-top) !important;
    background: color-mix(in srgb, var(--surface, #fff) 96%, transparent) !important;
    backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 rgba(20, 47, 84, .10);
  }

  .content {
    padding: 12px max(10px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
  }

  .page-header, .section-header-row, .section-heading-card, .modal-header {
    gap: 10px !important;
  }

  .page-header h1, .page-header h2, .section-header-row h2, .modal-header h2 {
    margin-top: 0;
    line-height: 1.16;
  }

  .subtext, .muted, .page-header p, .section-header-row p {
    line-height: 1.45;
  }

  :where(button, .button-link, [role="button"], .icon-button, .compact, .secondary, .danger, .file-picker-button) {
    min-height: var(--mobile-tap);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  :where(.icon-button, button[aria-label]) {
    min-width: var(--mobile-tap);
  }

  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
    width: 100%;
    max-width: 100%;
    min-height: var(--mobile-tap);
    font-size: 16px !important;
    line-height: 1.25;
  }

  textarea { min-height: 104px; resize: vertical; }
  input[type="date"], input[type="time"], input[type="datetime-local"] { min-width: 0; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; flex: 0 0 20px; }

  label, legend { overflow-wrap: anywhere; }
  form label { min-width: 0; }

  :where(.form-grid, .client-form-grid, .client-form-two, .compact-grid, .website-values-grid, .coupon-issue-form, .settings-grid, .grid) {
    gap: 12px !important;
  }

  :where(.actions, .header-actions, .row-actions, .modal-actions, .toolbar-actions, .schedule-toolbar-actions) {
    gap: 8px !important;
  }

  /* Zakladki i podzakladki: jeden poziomy rzad, bez sciskania tekstu. */
  :where(.tabs, .tab-strip, .settings-tab-strip, .sms-tabs, .admin-section-tabs, .view-toggle, .segmented-control, .catalog-tabs) {
    display: flex !important;
    width: 100%;
    max-width: 100%;
    gap: 7px !important;
    padding: 3px 2px 7px;
    overflow-x: auto !important;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  :where(.tabs, .tab-strip, .settings-tab-strip, .sms-tabs, .admin-section-tabs, .view-toggle, .segmented-control, .catalog-tabs) > * {
    flex: 0 0 auto !important;
    min-height: 42px;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  /* Filtry i paski narzedzi sa pionowe, a wazne akcje maja pelna szerokosc. */
  :where(.toolbar, .filters-row, .compact-filter-bar, .goods-filter-bar, .audit-filters, .sms-history-toolbar) {
    align-items: stretch !important;
    gap: 9px !important;
  }

  :where(.toolbar, .filters-row, .compact-filter-bar, .goods-filter-bar, .audit-filters, .sms-history-toolbar) > label,
  :where(.toolbar, .filters-row, .compact-filter-bar, .goods-filter-bar, .audit-filters, .sms-history-toolbar) > .field {
    flex: 1 1 180px;
    min-width: 0 !important;
  }

  .toolbar-count { margin-left: 0 !important; text-align: center; }

  /* Tabele pozostaja pelne funkcjonalnie i przewijaja sie tylko wewnatrz karty. */
  :where(.table-card, .data-table-wrapper, .table-scroll, .cu-mobile-scroll-region) {
    max-width: 100% !important;
  }

  :where(.table-scroll, .data-table-wrapper > .table-scroll, .cu-mobile-scroll-region) {
    position: relative;
    overflow-x: auto !important;
    overflow-y: visible;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .cu-mobile-scroll-region.cu-can-scroll-right {
    box-shadow: inset -16px 0 14px -18px rgba(15, 23, 42, .8);
  }

  .cu-mobile-scroll-region.cu-can-scroll-left {
    border-left-color: color-mix(in srgb, var(--accent, #1464d8) 36%, transparent) !important;
  }

  :where(.table-scroll, .cu-mobile-scroll-region) table {
    font-size: 13px;
  }

  :where(.table-scroll, .cu-mobile-scroll-region) th,
  :where(.table-scroll, .cu-mobile-scroll-region) td {
    padding: 10px 9px !important;
  }

  :where(.table-scroll, .cu-mobile-scroll-region) thead th {
    position: sticky;
    top: 0;
    z-index: 3;
  }

  :where(.table-scroll, .cu-mobile-scroll-region) tbody tr { min-height: 48px; }
  .pagination-bar { gap: 10px !important; padding: 11px 8px !important; }
  .pagination-controls button { min-width: 42px; }

  /* Karty i podsumowania nie tworza mikroskopijnych kolumn. */
  :where(.summary-grid, .sms-summary-grid, .client-summary-grid, .client-metrics-grid, .dashboard-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  :where(.summary-card, .metric-card, .dashboard-card) { min-height: 0; padding: 12px !important; }

  /* Wszystkie modale jako przewidywalny arkusz telefonu. */
  :where(.modal-backdrop, .table-settings-backdrop, .online-modal-backdrop, .client-card-backdrop, [class*="-backdrop"][role="dialog"]) {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)) !important;
    overflow: hidden !important;
  }

  :where(.modal, .wide-modal, .online-add-modal, .table-settings-panel, .client-detail-panel.client-card-modal, [class*="-modal"]) {
    position: relative;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto;
    max-height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom))) !important;
    margin: 0 !important;
    transform: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    border-radius: 18px 18px 12px 12px !important;
    scroll-padding-top: 72px;
    scroll-padding-bottom: 90px;
  }

  :where(.modal-header, .client-detail-header) {
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
    padding-top: 10px !important;
    background: var(--surface, var(--panel-surface, #fff)) !important;
    border-bottom: 1px solid var(--border, #dbe5f1);
  }

  :where(.modal-header, .client-detail-header) > div:first-child { min-width: 0; }
  :where(.modal-header, .client-detail-header) h2 { font-size: 1.18rem; overflow-wrap: anywhere; }

  :where(.modal-actions, .client-detail-header-actions) {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 30 !important;
    width: 100%;
    padding: 10px 0 max(10px, env(safe-area-inset-bottom)) !important;
    background: var(--surface, var(--panel-surface, #fff)) !important;
    border-top: 1px solid var(--border, #dbe5f1);
  }

  .modal-actions > button, .modal-actions > .button-link { min-width: 0; }
  .modal-form-error, .error { overflow-wrap: anywhere; }

  /* Menu rozwijane i kontekstowe nie wychodza poza ekran. */
  :where(.context-menu, .photo-context-menu, .category-menu, .dictionary-combo-menu, .goods-lot-menu, [class*="-menu"][role="menu"], [class*="dropdown"]) {
    max-width: calc(100vw - 16px) !important;
    max-height: min(65dvh, 520px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  :where(.context-menu, .photo-context-menu, .category-menu, .dictionary-combo-menu, .goods-lot-menu) button {
    min-height: var(--mobile-tap);
  }

  /* Ekrany o wlasnych szerokich ukladach. */
  :where(.admin-workspace, .settings-layout, .definition-layout, .website-editor-grid, .clients-workspace,
         .sms-two-column, .sms-template-layout, .client-sms-layout, .order-relation-grid,
         .warehouse-layout, .warehouse-grid, .catalog-layout, .legacy-migrator-layout) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :where(.definition-list, .permission-groups, .admin-section-group, .template-element-list, .sms-template-list) {
    max-height: min(34dvh, 280px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .permission-item, .checkbox-label, .client-consents label {
    min-height: var(--mobile-tap);
    align-items: center;
  }

  /* Galerie i zdjecia. */
  :where(.image-lightbox, .table-image-gallery) {
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
  }

  :where(.image-lightbox, .table-image-gallery) img {
    max-width: 100% !important;
    max-height: calc(100dvh - 88px) !important;
    object-fit: contain;
  }

  .photo-grid, .image-grid, .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Paski plywajace nie zaslaniaja formularzy ani siebie nawzajem. */
  .online-bulk-edit-bar {
    max-height: min(70dvh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .cu-mobile-overlay-open .online-bulk-edit-bar { visibility: hidden; pointer-events: none; }
  .mobile-item-launcher { right: max(10px, env(safe-area-inset-right)) !important; }

  /* Magazyn standalone i skaner. */
  :where(.warehouse-app, .warehouse-app-shell, .warehouse-panel, .warehouse-card) { min-width: 0 !important; max-width: 100% !important; }
  :where(.warehouse-actions, .warehouse-toolbar, .warehouse-scan-actions) { flex-wrap: wrap !important; }
  :where(.warehouse-actions, .warehouse-toolbar, .warehouse-scan-actions) > button { flex: 1 1 140px; }

  /* Dostosowanie do klawiatury ekranowej i poziomej orientacji. */
  .cu-keyboard-open :where(.modal, [class*="-modal"]) { max-height: 100dvh !important; border-radius: 12px !important; }
  :focus-visible { scroll-margin-top: 86px; scroll-margin-bottom: 110px; }
}

@media (max-width: 620px) {
  :where(.page-header, .section-header-row, .section-heading-card) {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  :where(.page-header .actions, .page-header .header-actions, .section-header-row .actions, .section-header-row .header-actions) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  :where(.page-header .actions, .page-header .header-actions, .section-header-row .actions, .section-header-row .header-actions) > * {
    width: 100%;
    min-width: 0 !important;
  }

  :where(.form-grid, .client-form-grid, .client-form-two, .compact-grid, .website-values-grid,
         .coupon-issue-form, .settings-grid, .grid, .sms-two-column, .client-sms-layout) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :where(.form-span-2, .span-2, .wide-field, [class*="span-"]) { grid-column: auto !important; }
  .modal { padding: 13px !important; }
  .modal-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal-actions > * { width: 100%; }
  .order-history-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sms-recipient-list > div { grid-template-columns: minmax(0, 1fr) auto !important; }
}

@media (max-width: 420px) {
  :where(.summary-grid, .sms-summary-grid, .client-summary-grid, .client-metrics-grid, .dashboard-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :where(.page-header .actions, .page-header .header-actions, .section-header-row .actions, .section-header-row .header-actions,
         .modal-actions) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .photo-grid, .image-grid, .gallery-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  :where(.modal, [class*="-modal"]) { max-height: calc(100dvh - 8px) !important; }
  :where(.modal-header, .client-detail-header) { padding-top: 6px !important; padding-bottom: 7px !important; }
  :where(.modal-actions, .client-detail-header-actions) { padding-top: 7px !important; padding-bottom: max(7px, env(safe-area-inset-bottom)) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .cu-mobile-scroll-region { scroll-behavior: auto !important; }
}