/* Phone application shell. Tablet and desktop layouts are handled separately below. */
@media (max-width: 767.98px) {
  html { overflow-x: hidden; scroll-padding-top: 76px; }
  body { min-width: 0; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
  body, button, input, select, textarea { font-size: 16px; }
  img, video, canvas, svg { max-width: 100%; height: auto; }

  .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl,
  .container-fluid { width: 100%; max-width: 100%; padding-left: 14px !important; padding-right: 14px !important; }
  main, .main-content, .printer-content, .account-main, .content-wrapper { min-width: 0; max-width: 100%; }
  main > .py-5, .main-content > .p-4, .printer-content > .container { padding-top: 18px !important; padding-bottom: 28px !important; }

  h1, .h1 { font-size: clamp(1.55rem, 7vw, 2rem) !important; line-height: 1.12; }
  h2, .h2 { font-size: clamp(1.3rem, 5.5vw, 1.65rem) !important; line-height: 1.18; }
  h3, .h3 { font-size: clamp(1.12rem, 4.8vw, 1.4rem) !important; }
  .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 { font-size: clamp(1.8rem, 9vw, 2.65rem) !important; }
  p, .text-muted { overflow-wrap: anywhere; }

  .row { --bs-gutter-x: .85rem; --bs-gutter-y: .85rem; }
  .row > [class*="col-"] { min-width: 0; }
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="position: sticky"], [style*="position:sticky"] { position: static !important; top: auto !important; }
  .stats-grid, .metric-grid, .summary-grid, .dashboard-stats, .admin-stats,
  .account-stats, .models-stats, .np-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .card, .ds-card, .account-card, .surface, .panel { max-width: 100%; border-radius: 16px !important; }
  .card-body { padding: 16px !important; }
  .card-header, .card-footer { padding: 13px 16px !important; }

  .d-flex.justify-content-between { row-gap: 10px; }
  .topbar, .page-header, .section-header, .account-hero,
  .d-flex.align-items-center.justify-content-between { min-width: 0; }
  .topbar > *, .page-header > *, .section-header > * { min-width: 0; }

  .btn { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
  .btn-sm { min-height: 38px; }
  .btn-group, .btn-toolbar { max-width: 100%; flex-wrap: wrap; }
  .mobile-actions, .form-actions, .card-actions, .bulk-actions, .equip-actions, .notif-actions {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 8px !important;
  }
  .mobile-actions > *, .form-actions > *, .card-actions > *, .bulk-actions > *,
  .equip-actions > *, .notif-actions > * { min-width: 0; margin: 0 !important; }
  .mobile-actions .btn, .form-actions .btn, .card-actions .btn, .bulk-actions .btn,
  .equip-actions .btn, .notif-actions .btn { width: 100%; }

  .form-control, .form-select, .input-group-text { min-height: 46px; font-size: 16px !important; border-radius: 11px; }
  textarea.form-control { min-height: 116px; }
  .input-group { flex-wrap: nowrap; }
  .input-group > .form-control, .input-group > .form-select { min-width: 0; }
  .form-label { margin-bottom: 6px; font-weight: 700; }
  .form-text { line-height: 1.4; }
  fieldset, form, .form-section { min-width: 0; }

  .nav-tabs, .nav-pills, .ds-tab-list, .filter-tabs, .category-tabs,
  .seller-filter-row, .freelance-category-scroll {
    display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-left: -14px; margin-right: -14px; padding-left: 14px !important; padding-right: 14px !important;
  }
  .nav-tabs::-webkit-scrollbar, .nav-pills::-webkit-scrollbar, .ds-tab-list::-webkit-scrollbar,
  .filter-tabs::-webkit-scrollbar, .category-tabs::-webkit-scrollbar { display: none; }
  .nav-tabs > *, .nav-pills > *, .ds-tab-list > *, .filter-tabs > *, .category-tabs > * {
    flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start;
  }

  .table-responsive { overflow: visible; border: 0 !important; }
  table.mobile-card-table { display: block; width: 100%; border: 0 !important; background: transparent !important; }
  table.mobile-card-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.mobile-card-table tbody { display: grid; gap: 12px; width: 100%; }
  table.mobile-card-table tr { display: block; width: 100%; padding: 7px 14px; border: 1px solid var(--border) !important; border-radius: 16px; background: var(--bg-elevated); box-shadow: var(--shadow-sm); }
  table.mobile-card-table tr.d-none { display: none !important; }
  table.mobile-card-table td { display: grid; grid-template-columns: minmax(92px, 38%) minmax(0, 1fr); align-items: start; gap: 10px; width: 100%; min-height: 38px; padding: 10px 0 !important; border: 0 !important; border-bottom: 1px solid var(--border) !important; text-align: right !important; white-space: normal !important; overflow-wrap: anywhere; }
  table.mobile-card-table td:last-child { border-bottom: 0 !important; }
  table.mobile-card-table td::before { content: attr(data-mobile-label); color: var(--text-muted); font-size: .72rem; font-weight: 800; line-height: 1.35; text-align: left; text-transform: uppercase; letter-spacing: .035em; }
  table.mobile-card-table td[data-mobile-label=""] { grid-template-columns: 1fr; }
  table.mobile-card-table td[data-mobile-label=""]::before { display: none; }
  table.mobile-card-table td > * { min-width: 0; max-width: 100%; justify-self: end; }
  table.mobile-card-table td .btn-group, table.mobile-card-table td form,
  table.mobile-card-table td .d-flex { justify-content: flex-end; flex-wrap: wrap; }
  table.mobile-card-table td[colspan] { display: block; text-align: center !important; }
  table.mobile-card-table td[colspan]::before { display: none; }
  .mobile-scroll-table { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .mobile-scroll-table table { min-width: 720px; }

  .pagination { justify-content: flex-start !important; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 5px; }
  .pagination .page-item { flex: none; }
  .pagination .page-link { min-width: 42px; min-height: 42px; display: grid; place-items: center; }

  .modal { padding: 0 !important; }
  .modal-dialog { width: 100%; max-width: none; min-height: 100%; margin: 0; display: flex; align-items: flex-end; }
  .modal-content { max-height: 94dvh; border-radius: 22px 22px 0 0 !important; border-bottom: 0; overflow: hidden; }
  .modal-header { padding: 16px; flex: none; }
  .modal-body { padding: 16px; overflow-y: auto; overscroll-behavior: contain; }
  .modal-footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .modal-footer .btn { width: 100%; margin: 0; }

  .dropdown-menu { max-width: calc(100vw - 24px); max-height: min(70vh, 560px); overflow-y: auto; }
  .offcanvas-start, .offcanvas-end { width: min(100vw, 390px) !important; max-width: 100vw; }
  .toast-container { left: 12px !important; right: 12px !important; width: auto !important; }
  .toast { width: 100%; }
  .alert { padding: 13px 14px; border-radius: 14px; overflow-wrap: anywhere; }

  .acct-sidebar { position: static !important; display: flex; align-items: center; gap: 7px; overflow-x: auto; padding: 9px !important; margin-bottom: 14px; border-radius: 14px !important; scrollbar-width: none; }
  .acct-sidebar::-webkit-scrollbar { display: none; }
  .acct-sidebar > .acct-avatar, .acct-sidebar > .acct-sidebar-name, .acct-sidebar > .acct-sidebar-email,
  .acct-sidebar > .acct-sidebar-divider, .acct-sidebar > .acct-nav-section-title,
  .acct-sidebar > .acct-sidebar-foot { display: none !important; }
  .acct-sidebar > .acct-seller-links, .acct-sidebar > form { display: contents; }
  .acct-sidebar .acct-nav-link { flex: 0 0 auto; min-height: 42px; margin: 0; padding: 9px 12px; white-space: nowrap; border: 1px solid var(--border); }

  .position-sticky { position: static !important; }
  [style*="min-width"] { min-width: 0 !important; max-width: 100%; }
  [style*="width:"] { max-width: 100%; }
  pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }
}

@media (max-width: 389.98px) {
  .container, .container-fluid { padding-left: 11px !important; padding-right: 11px !important; }
  .mobile-actions, .form-actions, .card-actions, .bulk-actions, .equip-actions, .notif-actions,
  .modal-footer { grid-template-columns: 1fr; }
  table.mobile-card-table td { grid-template-columns: 1fr; gap: 4px; text-align: left !important; }
  table.mobile-card-table td > * { justify-self: start; }
  .stats-grid, .metric-grid, .summary-grid, .dashboard-stats, .admin-stats,
  .account-stats, .models-stats, .np-stats { grid-template-columns: 1fr !important; }
}

@media (max-width: 767.98px) and (hover: none) and (pointer: coarse) {
  a, button, input[type="checkbox"], input[type="radio"], select { touch-action: manipulation; }
  input[type="checkbox"], input[type="radio"] { min-width: 20px; min-height: 20px; }
}

/* Compact phones and the narrow pane of foldable devices. */
@media (max-width: 359.98px) {
  .container, .container-fluid { padding-left: 9px !important; padding-right: 9px !important; }
  h1, .h1 { font-size: 1.42rem !important; }
  h2, .h2 { font-size: 1.22rem !important; }
  .card-body, .modal-body { padding: 13px !important; }
  .btn { padding-left: 10px; padding-right: 10px; }
  .offcanvas-start, .offcanvas-end { width: 100vw !important; }
}

/* Large phones: keep useful two-column cards without squeezing forms. */
@media (min-width: 576px) and (max-width: 767.98px) {
  .container, .container-sm, .container-fluid { padding-left: 20px !important; padding-right: 20px !important; }
  .product-grid, .catalog-grid, .models-grid, .equipment-grid,
  .portfolio-grid, .collections-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .modal-dialog { width: min(100%, 680px); margin-inline: auto; }
}

/* Tablets and foldables opened into a wide pane. */
@media (min-width: 768px) and (max-width: 991.98px) {
  html { overflow-x: hidden; scroll-padding-top: 72px; }
  body { min-width: 0; overflow-x: hidden; }
  .container, .container-md, .container-fluid { padding-left: 24px !important; padding-right: 24px !important; }
  main, .main-content, .printer-content, .account-main, .content-wrapper { min-width: 0; max-width: 100%; }
  .row { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
  .row > [class*="col-"] { min-width: 0; }
  .stats-grid, .metric-grid, .summary-grid, .dashboard-stats, .admin-stats,
  .account-stats, .models-stats, .np-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .product-grid, .catalog-grid, .models-grid, .equipment-grid,
  .portfolio-grid, .collections-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .table-responsive, .admin-table-shell { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; }
  .table-responsive > table, .admin-table-shell > table { min-width: 760px; white-space: normal; }
  .tablet-table-scroll { width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:14px; scrollbar-gutter:stable; }
  .tablet-table-scroll > table { min-width:760px; margin-bottom:0!important; white-space:normal; }
  .form-control, .form-select, .input-group-text { min-height: 44px; }
  .btn { min-height: 40px; }
  .modal-dialog { width: min(calc(100% - 48px), 760px); max-width: 760px; margin: 24px auto; }
  .modal-content { max-height: calc(100dvh - 48px); border-radius: 18px !important; }
  .modal-body { overflow-y: auto; }
  .acct-sidebar { position: sticky !important; top: 84px; }
  .nav-tabs, .nav-pills, .ds-tab-list, .filter-tabs, .category-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
}

/* Phones and small tablets in landscape: preserve vertical working space. */
@media (max-width: 767.98px) and (orientation: landscape) and (max-height: 600px) {
  html { scroll-padding-top: 58px; }
  .modal-dialog { align-items: center; min-height: 100dvh; padding: 8px max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left)); }
  .modal-content { max-height: calc(100dvh - 16px); border: 1px solid var(--border); border-radius: 16px !important; }
  .offcanvas-start, .offcanvas-end { width: min(72vw, 390px) !important; }
  .account-hero, .page-header, .section-header { padding-top: 10px !important; padding-bottom: 10px !important; }
  table.mobile-card-table tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Intermediate laptop widths: retain the desktop design while preventing dense screens from overflowing. */
@media (min-width: 992px) and (max-width: 1279.98px) {
  .container, .container-lg, .container-xl, .container-xxl { max-width: calc(100% - 32px); }
  main, .main-content, .printer-content, .account-main, .content-wrapper { min-width: 0; }
  .table-responsive { overscroll-behavior-inline: contain; scrollbar-gutter: stable; }
  .table-responsive > table { white-space: normal; }
  .btn-toolbar, .card-actions, .bulk-actions { flex-wrap: wrap; row-gap: 8px; }
  .modal-xl { --bs-modal-width: calc(100vw - 48px); }
}

/* Standard desktop workspaces. */
@media (min-width: 1280px) and (max-width: 1599.98px) {
  .product-grid, .catalog-grid, .models-grid, .equipment-grid,
  .portfolio-grid, .collections-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .stats-grid, .metric-grid, .summary-grid, .dashboard-stats,
  .account-stats, .models-stats, .np-stats { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .modal-xl { --bs-modal-width:min(1180px,calc(100vw - 64px)); }
}

/* Wide desktop workspaces use extra columns instead of stretching cards. */
@media (min-width: 1600px) {
  .container-xxl { max-width:1520px; }
  .product-grid, .catalog-grid, .models-grid, .equipment-grid,
  .portfolio-grid, .collections-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .stats-grid, .metric-grid, .summary-grid, .dashboard-stats,
  .account-stats, .models-stats, .np-stats { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .acct-layout { grid-template-columns:280px minmax(0,1fr); gap:32px; }
}

/* Wide and ultrawide screens: cap reading lines and use the available workspace for data grids. */
@media (min-width: 1920px) {
  .container-xxl { max-width: 1680px; }
  .admin-content, .printer-content { margin-inline: auto; }
  .admin-content, .printer-content { max-width: 1760px; }
  .modal-xl { --bs-modal-width: min(1560px, calc(100vw - 96px)); }
}

/* Safe areas for notches, rounded displays and installed web apps. */
@supports (padding: max(0px)) {
  @media (max-width: 767.98px) {
    body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
    .modal-footer { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
    .offcanvas-body { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  }
}