/**
 * Mobile-only styles (max-width: 1023px).
 * Desktop (1024px+) — reguły poniżej nie mają zastosowania.
 */

@media (max-width: 1023px) {
  /* --- Shell & sidebar drawer --- */
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }

  body > .flex.min-h-screen {
    max-width: 100vw;
    overflow-x: hidden;
  }

  body.mobile-menu-open {
    overflow: hidden;
  }

  #sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 10040;
    width: min(280px, 88vw) !important;
    max-width: 88vw;
    overflow: hidden;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  #sidebar.is-mobile-open {
    transform: translateX(0);
    box-shadow: 8px 0 32px rgba(15, 23, 42, 0.35);
  }

  #sidebar.is-collapsed {
    width: min(280px, 88vw) !important;
  }

  #sidebar.is-collapsed:hover {
    width: min(280px, 88vw) !important;
  }

  #sidebar.is-collapsed .brand-text,
  #sidebar.is-collapsed nav p,
  #sidebar.is-collapsed nav span,
  #sidebar.is-collapsed .sidebar-logout {
    display: revert;
  }

  #sidebar.is-collapsed .icon-expanded {
    display: block;
  }

  #sidebar.is-collapsed .icon-collapsed {
    display: none;
  }

  #layout-main,
  #layout-main.is-collapsed {
    margin-left: 0 !important;
    max-width: 100vw;
    min-width: 0 !important;
    overflow-x: hidden;
  }

  #layout-main > main {
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }

  #layout-main main > div,
  #layout-main main > section {
    min-width: 0;
    max-width: 100%;
  }

  #layout-main > main {
    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
  }

  .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10035;
    background: rgba(15, 23, 42, 0.45);
  }

  .mobile-nav-backdrop.hidden {
    display: none !important;
  }

  /* Search FAB sits above the mobile tab bar, not under/past the viewport */
  #office-global-search {
    right: max(1rem, env(safe-area-inset-right, 0px));
    bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  }

  /* --- Bottom navigation --- */
  .mobile-bottom-nav {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: 0.25rem;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10030;
    background: #fff;
    border-top: 1px solid #e2e8f0;
    padding: 0.35rem 0.5rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.06);
  }

  .mobile-bottom-nav__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.35rem 0.25rem;
    border: none;
    background: transparent;
    color: #475569;
    font-size: 0.65rem;
    line-height: 1.1;
    font-weight: 500;
    text-decoration: none;
    border-radius: 0.5rem;
    position: relative;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-bottom-nav__item svg {
    width: 1.35rem;
    height: 1.35rem;
    flex-shrink: 0;
  }

  .mobile-bottom-nav__item span:not(.mobile-bottom-nav__badge) {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
  }

  .mobile-bottom-nav__item:active,
  .mobile-bottom-nav__item--menu[aria-expanded="true"] {
    color: var(--brand-primary, #2563eb);
    background: rgba(37, 99, 235, 0.08);
  }

  .mobile-bottom-nav__badge {
    position: absolute;
    top: 0.1rem;
    right: 0.35rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.25rem;
    border-radius: 9999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.6rem;
    line-height: 1rem;
    text-align: center;
  }

  .mobile-bottom-nav__badge.hidden {
    display: none !important;
  }

  /* --- Top bar: jeden wiersz, bez pionowego scrolla --- */
  [data-onboarding="nav-topbar"] {
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    overflow: visible;
    min-height: 3.25rem;
    max-height: 3.25rem;
  }

  [data-onboarding="nav-topbar"] .layout-topbar-actions {
    flex: 1 1 auto;
    flex-wrap: nowrap !important;
    justify-content: flex-end;
    gap: 0.25rem;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  [data-onboarding="nav-topbar"] .layout-topbar-actions::-webkit-scrollbar {
    display: none;
  }

  [data-onboarding="nav-topbar"] .layout-topbar-actions > span[aria-hidden="true"] {
    display: none;
  }

  [data-onboarding="nav-topbar"] .btn {
    flex-shrink: 0;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }

  [data-onboarding="nav-topbar"] .btn p {
    display: none;
  }

  [data-onboarding="nav-topbar"] .btn svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  /* --- Content padding --- */
  #layout-main .px-6,
  #layout-main .lg\:px-12 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  #layout-main .py-8 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  /* --- Forms: no fixed min-width overflow --- */
  #layout-main .form-control,
  #layout-main input:not([type="checkbox"]):not([type="radio"]),
  #layout-main select,
  #layout-main textarea {
    min-width: 0 !important;
    max-width: 100%;
  }

  #layout-main form.flex.flex-col.md\:flex-row > .flex.flex-col,
  #layout-main form.flex.flex-col.md\:flex-row > button {
    width: 100%;
  }

  #layout-main .btn {
    max-width: 100%;
  }

  /* --- django-tables2 --- */
  #layout-main .table-container {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* Podwójny wrapper (szablon + django-tables2) — przewijanie tylko w wewnętrznym */
  #layout-main .table-container:has(> .table-container) {
    overflow: visible !important;
    padding: 0;
    border-radius: 0;
  }

  #layout-main .table-container .table-container {
    border-radius: 0.75rem;
  }

  #layout-main .table-container .pagination,
  #layout-main nav.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
    padding: 0.75rem 0.25rem;
  }

  #layout-main .table-container thead th,
  #layout-main .table-container tbody td {
    white-space: nowrap;
  }

  /* --- Quote handle modal --- */
  #quote-handle-modal,
  #quote-automat-modal,
  #quote-multi-modal {
    padding: 0.75rem;
    align-items: flex-start;
    overflow-y: auto;
  }

  #quote-handle-modal > .relative,
  #quote-handle-modal > .handle-modal-stack,
  #quote-automat-modal > .handle-modal-stack,
  #quote-multi-modal > .handle-modal-stack {
    width: 100%;
    max-width: 100%;
    height: calc(100dvh - 1rem);
    max-height: calc(100dvh - 1rem);
  }

  #quote-handle-modal .quote-handle-modal-box,
  #quote-automat-modal .quote-handle-modal-box,
  #quote-multi-modal .quote-handle-modal-box {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 1 1 auto !important;
  }

  #quote-handle-modal .modal-header-controls {
    flex-wrap: wrap;
    max-width: 100%;
  }

  #quote-handle-modal .select-modal-header {
    max-width: 100%;
    min-width: 0;
  }

  #quote-handle-view-switch,
  #multi-view-switch,
  #automat-view-switch,
  .handle-view-switch {
    position: static !important;
    transform: none !important;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* --- Page headers with actions --- */
  #layout-main .flex.flex-wrap.items-center.justify-between.gap-3,
  #layout-main .flex.flex-wrap.items-center.justify-between.gap-4 {
    flex-direction: column;
    align-items: stretch !important;
  }

  #layout-main .flex.flex-wrap.items-center.justify-between.gap-3 > h1,
  #layout-main .flex.flex-wrap.items-center.justify-between.gap-4 > h1 {
    width: 100%;
  }

  #layout-main .flex.flex-wrap.items-center.justify-between .ml-auto {
    margin-left: 0 !important;
    width: 100%;
  }

  /* --- Detail grids: stack columns --- */
  #layout-main [class*="sm:grid-cols-"],
  #layout-main [class*="md:grid-cols-"],
  #layout-main [class*="lg:grid-cols-"],
  #layout-main [class*="xl:grid-cols-"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #layout-main [class*="sm:col-span-"],
  #layout-main [class*="md:col-span-"],
  #layout-main [class*="lg:col-span-"],
  #layout-main [class*="xl:col-span-"] {
    grid-column: 1 / -1 !important;
  }

  /* Multi-column layouts without responsive prefix */
  #layout-main .grid.grid-cols-2:not(.mobile-keep-cols),
  #layout-main .grid.grid-cols-3:not(.mobile-keep-cols),
  #layout-main .grid.grid-cols-5:not(.mobile-keep-cols) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Side-by-side detail columns (common pattern) */
  #layout-main .lg\:col-span-2 {
    grid-column: 1 / -1 !important;
  }

  /* --- Tables: horizontal scroll (tylko kontenery tabel) --- */
  #layout-main .table-container,
  #layout-main .repetytorium-table-scroll--x,
  #layout-main .gov-translator-table-wrapper,
  #layout-main .overflow-x-auto {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    max-width: 100%;
    min-width: 0;
  }

  #layout-main .repetytorium-table-wrapper {
    overflow: visible !important;
    max-width: 100%;
    min-width: 0;
  }

  /* Repetytorium: przewijanie na .repetytorium-table-scroll--x */
  #layout-main .repetytorium-table-scroll--x .table-container {
    overflow: visible !important;
  }

  #layout-main .table-container table,
  #layout-main table.table {
    width: auto;
    min-width: 100%;
  }

  /* --- Prevent clipping --- */
  #layout-main img,
  #layout-main video,
  #layout-main iframe {
    max-width: 100%;
    height: auto;
  }

  #layout-main pre,
  #layout-main .whitespace-pre-line,
  #layout-main .break-words {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Forms & inputs full width where stacked */
  #layout-main .flex.flex-col.sm\:flex-row,
  #layout-main .flex.flex-col.md\:flex-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #layout-main .flex.flex-col.sm\:flex-row > *,
  #layout-main .flex.flex-col.md\:flex-row > * {
    width: 100%;
  }

  /* Modals */
  #translation-legend-modal .max-w-lg {
    max-width: calc(100vw - 2rem);
    margin-left: 1rem;
    margin-right: 1rem;
  }

  /* Shipping list 3-col grid */
  #layout-main .grid.grid-cols-1.lg\:grid-cols-3 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* --- Public: /wycena/ i inne strony split (bez #layout-main) --- */
  .public-split-layout {
    max-width: 100%;
    overflow-x: hidden;
  }

  #quote-form-panel [class*="sm:grid-cols-"],
  #quote-form-panel [class*="md:grid-cols-"],
  #quote-form-panel [class*="lg:grid-cols-"],
  #quote-form-panel [class*="xl:grid-cols-"],
  #quote-obslugujemy-block [class*="sm:grid-cols-"],
  #quote-obslugujemy-block [class*="md:grid-cols-"],
  #quote-obslugujemy-block [class*="lg:grid-cols-"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #quote-form-panel [class*="sm:col-span-"],
  #quote-form-panel [class*="md:col-span-"],
  #quote-form-panel [class*="lg:col-span-"],
  #quote-form-panel [class*="xl:col-span-"] {
    grid-column: 1 / -1 !important;
  }

  #quote-form-panel .quote-stepper {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }

  #quote-form-panel .quote-stepper__item {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.75rem !important;
  }

  #quote-form-panel .quote-stepper__line {
    display: none !important;
  }

  #quote-form-panel .flex.flex-col.sm\:flex-row,
  #quote-form-panel .flex.flex-col.md\:flex-row,
  #quote-obslugujemy-block .quote-obslugujemy-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #quote-form-panel .js-doc-lang-fields .grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Desktop: hide mobile-only UI (default) */
@media (min-width: 1024px) {
  .mobile-bottom-nav,
  .mobile-nav-backdrop {
    display: none !important;
  }
}