/* ============================================
   JEWELFLOW MOBILE OVERHAUL
   Responsive app shell, content, tables, modals, and touch states.
   ============================================ */

/* ============================================
   STANDARD BREAKPOINTS (CaratOS-wide, see also web/src/styles/production-polish.css)
   - 768px = the tablet/phone split. Sidebar collapses, multi-column
     grids and forms drop to one column, header actions stack.
   - 480px = the narrow-phone tier. Further compaction only: hide
     secondary labels/icons, force any remaining 2-col grid to 1 col,
     shrink touch targets' padding (never below the 44px floor).
   Justified third tiers kept deliberately (documented at point of
   use):
   - ~900-1100px = "wide workspace/modal" tier for components with
     more horizontal room than the page shell (e.g. a two-pane
     workspace or a 1100px+ modal) that need their own earlier
     collapse point before the generic 768px split fires.
   - 600-620px = "small structured modal" tier for modals that go
     edge-to-edge full-screen earlier than 768px because their own
     max-width is already well under 768px.
   - Device/orientation-qualified queries (e.g. max-height +
     min-aspect-ratio notch checks, print, prefers-reduced-motion)
     are exempt — they aren't part of the width-tier ladder.
   Do not add a new one-off max-width value outside 768/480 without
   documenting the reason inline, the way the tiers above are. */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

:root {
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --mobile-header-stack: calc(var(--header-height) + 12px);
  --mobile-shell-top: calc(var(--safe-area-top) + var(--mobile-header-stack));
}

@media (max-width: 768px) {
  :root {
    /* Row icons (44) + gap (10) + workspace chip (44) + vertical chrome (18) */
    --mobile-header-stack: calc(44px + 10px + 44px + 18px);
    --mobile-shell-top: calc(var(--safe-area-top) + var(--mobile-header-stack));
    --shadow-bleed: 0;
    --shell-bottom-inset: calc(var(--mobile-bottom-nav-height, 56px) + var(--fab-size, 54px) + var(--fab-gap, 14px) + 20px);
  }
}

/* Final narrow-layout contract — resolves legacy inline grids and guarantees
   one coherent task path on phones and split-screen windows. */
@media (max-width:768px) {
  :root { --page-pad-x:16px; --page-pad-y:24px; }
  .main-content { width:100% !important; max-width:100% !important; overflow-x:clip; }
  .page-section {
    width:100%;
    max-width:100%;
    margin:0;
    padding:0 0 calc(var(--page-pad-y) + env(safe-area-inset-bottom)) 0;
    box-sizing:border-box;
  }
  .page-section > :where(.section-header,.page-header) { margin-bottom:24px; }
  .section-header__row { display:grid; grid-template-columns:minmax(0,1fr); align-items:start; gap:16px; }
  .section-header__row > :first-child,
  .section-header__row > :last-child { width:100%; max-width:100%; }
  .section-header__row > :last-child:is(div),
  :where(.inventory-header-actions,.crm-header-actions,.invoice-header-actions,.filters-row) { justify-content:flex-start; }
  :where(.inventory-header-actions,.crm-header-actions,.invoice-header-actions,.filters-row) > * { min-width:0; }
  .modal-overlay:not(#labelDesignerModal):not(#salesModeModal):not(#commandPaletteModal) {
    /* Owned by phone sheet contract below — do not re-center. */
    padding: 0;
    align-items: flex-end;
    justify-content: center;
  }

  .modal:not(.sm-payment-modal):not(#salesModeModal .modal) {
    /* Geometry owned by phone sheet contract at end of mobile.css */
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
  .modal:not(.modal--structured) .modal__header { margin-bottom:20px; }
  .modal__footer,
  .form-actions { width:100%; }
  .crm-drawer { width:min(100vw, 560px) !important; max-width:100vw !important; }
  :where(.table-container,.table-wrapper,.crm-table-wrap,.invoice-dashboard__table-wrap,.stock-registry-panel) { margin-inline:0; padding-bottom:4px; }
}

@media (max-width:430px) {
  :root { --page-pad-x:12px; --page-pad-y:20px; }
  /* Widened from exact-value matches (e.g. [style*="grid-template-columns:1fr 1fr"])
     to a plain substring match on the property name. The exact-value selectors
     only fired when a React component's inline style happened to serialize to
     that precise string; any other column count or spacing silently stopped
     matching and fell back to a fixed, unresponsive grid with no warning. This
     collapses ANY inline multi-column grid inside these containers to a single
     column at this width, which is what every prior variant was already doing. */
  .page-section [style*="grid-template-columns"],
  .modal [style*="grid-template-columns"] { grid-template-columns:minmax(0,1fr) !important; }
  .form-actions,
  .modal__footer { grid-template-columns:minmax(0,1fr) !important; }
  .form-actions .btn,
  .modal__footer .btn { width:100%; }
}

body {
  overflow-x: hidden;
}

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

button,
input,
select,
textarea {
  font: inherit;
}

button,
.btn,
.tab,
.sidebar__link,
.header__icon-btn,
.modal__close,
.fab {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Hamburger is hidden only on wide desktop; phones/tablets need it for the nav drawer. */
@media (min-width: 1101px) {
  .mobile-menu-toggle {
    display: none !important;
  }
}

#vaultPinOverlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  width: 100dvw !important;
  height: 100vh !important;
  height: 100svh !important;
  height: 100lvh !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  background: #fbfbfb !important;
  color: #000000 !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 4000 !important;
}

body.pin-pad-active {
  overflow: hidden !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
}

div#vaultPinOverlay[style*="display: flex"],
div#vaultPinOverlay[style*="display:flex"] {
  display: flex !important;
}

.minimal-pinpad {
  width: 100vw !important;
  width: 100dvw !important;
  max-width: none !important;
  height: 100vh !important;
  height: 100svh !important;
  height: 100lvh !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: max(22px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: #fbfbfb !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.minimal-pinpad__header {
  position: absolute !important;
  top: max(12px, env(safe-area-inset-top)) !important;
  left: max(12px, env(safe-area-inset-left)) !important;
  right: max(12px, env(safe-area-inset-right)) !important;
  width: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 0 !important;
  z-index: 2 !important;
}

.minimal-display-container {
  margin: 20vh 0 8vh !important;
  margin: 20dvh 0 8dvh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.minimal-keypad {
  width: 100% !important;
  max-width: 320px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: clamp(16px, 4vh, 28px) clamp(22px, 8vw, 44px) !important;
  justify-items: center !important;
  pointer-events: auto !important;
}

.minimal-keypad .elegant-key {
  width: 68px !important;
  height: 68px !important;
  min-width: 68px !important;
  min-height: 68px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #000 !important;
  font-size: 28px !important;
  font-weight: 300 !important;
}

#vaultPinOverlay .minimal-status {
  margin-top: 18px !important;
  min-height: 16px !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.8px !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

#vaultPinOverlay .minimal-btn-icon,
#vaultPinOverlay .minimal-btn-text,
#vaultPinOverlay .elegant-key {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

#vaultPinOverlay,
#vaultPinOverlay[data-theme="light"],
#vaultPinOverlay .minimal-pinpad,
#vaultPinOverlay[data-theme="light"] .minimal-pinpad {
  background: #fbfbfb !important;
  color: #000000 !important;
}

#vaultPinOverlay .minimal-title,
#vaultPinOverlay .minimal-btn-icon,
#vaultPinOverlay .minimal-btn-text,
#vaultPinOverlay .elegant-key {
  color: #000000 !important;
}

#vaultPinOverlay .pin-circle {
  border-color: #c8c8c8 !important;
}

#vaultPinOverlay .pin-circle.filled {
  background: #000000 !important;
  border-color: #000000 !important;
}

#vaultPinOverlay[data-theme="dark"],
#vaultPinOverlay[data-theme="dark"] .minimal-pinpad {
  background: #050505 !important;
  color: #eeeeee !important;
}

#vaultPinOverlay[data-theme="dark"] .minimal-title,
#vaultPinOverlay[data-theme="dark"] .minimal-btn-icon,
#vaultPinOverlay[data-theme="dark"] .minimal-btn-text,
#vaultPinOverlay[data-theme="dark"] .elegant-key {
  color: #eeeeee !important;
}

#vaultPinOverlay[data-theme="dark"] .pin-circle {
  border-color: #555555 !important;
}

#vaultPinOverlay[data-theme="dark"] .pin-circle.filled {
  background: #d0d0d0 !important;
  border-color: #d0d0d0 !important;
}

@media (max-width: 1024px) {
  :root {
    --container-padding: 20px;
  }

  .header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 220 !important;
    box-sizing: border-box !important;
    padding-top: var(--safe-area-top) !important;
    padding-left: calc(var(--container-padding) + var(--safe-area-left)) !important;
    padding-right: calc(var(--container-padding) + var(--safe-area-right)) !important;
    min-height: calc(var(--header-height) + var(--safe-area-top)) !important;
    height: auto !important;
  }

  .main,
  .main.main--sidebar-collapsed {
    padding-top: calc(var(--mobile-shell-top) + 16px) !important;
  }

  .mobile-menu-toggle {
    display: flex !important;
  }

  .main {
    margin-left: 0 !important;
  }

  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.sidebar--open {
    transform: translateX(0);
  }

  #page-crm {
    min-width: 0;
    overflow-x: clip;
  }

  .crm-page-header .section-header__row {
    align-items: stretch;
    flex-direction: column;
  }

  .crm-header-actions {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .crm-view-switcher {
    flex: 1 1 360px;
    min-width: 0;
  }

  .crm-view-switcher .tab {
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
  }

  .crm-header-actions > .btn {
    flex: 0 0 auto;
  }

  .crm-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .crm-filter-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .crm-search-field {
    grid-column: span 2;
    width: auto;
    min-width: 0;
  }

  .crm-filter-bar > .btn {
    min-height: 40px;
    align-self: end;
    justify-content: center;
  }

  .crm-kanban,
  .crm-view,
  .crm-list-panel,
  .crm-calendar-panel {
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  :root {
    --header-height: 64px;
    --container-padding: 18px;
    --gutter: 18px;
  }

  body {
    min-width: 0;
  }

  #page-invoices .section-header__row {
    align-items: stretch !important;
  }

  .invoice-header-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 8px;
  }

  .invoice-header-actions .btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  .profile-image-control {
    align-items: stretch;
  }

  .profile-image-control > .btn {
    flex: 1 1 145px;
    justify-content: center;
  }

  .profile-image-control img {
    flex: 1 1 100%;
    max-width: 100%;
    height: 64px;
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  h1,
  .text-display-lg,
  .section-header__title {
    font-size: clamp(24px, 7vw, 30px) !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
  }

  h2,
  .text-headline-md {
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  .text-currency-lg {
    font-size: clamp(21px, 6vw, 25px) !important;
  }

  .text-currency,
  .pricing-card__value {
    font-size: clamp(17px, 5vw, 21px) !important;
  }

  .glass-panel,
  .glass-panel--subtle,
  .glass-panel--elevated {
    max-width: 100%;
    border-radius: 10px;
  }

  .glass-panel {
    padding: 16px !important;
  }

  .header {
    display: grid !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 220 !important;
    grid-template-columns: minmax(0, 1fr) 44px 44px 44px !important;
    grid-template-areas:
      "brand search settings avatar"
      "workspace workspace workspace workspace" !important;
    min-height: unset !important;
    height: auto !important;
    padding: calc(8px + var(--safe-area-top)) calc(12px + var(--safe-area-right)) 10px calc(12px + var(--safe-area-left)) !important;
    gap: 10px 8px !important;
    flex-wrap: nowrap !important;
    align-content: start !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  .header__brand {
    grid-area: brand !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  .header__product-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px !important;
    line-height: 1 !important;
    text-rendering: geometricPrecision !important;
    -webkit-font-smoothing: antialiased !important;
  }

  .header__logo-gem {
    width: 20px !important;
    height: 20px !important;
  }

  .header__divider {
    display: none !important;
  }

  .header__section-name {
    display: inline-block !important;
    max-width: min(42vw, 160px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--on-surface-variant) !important;
    line-height: 1.2 !important;
  }

  .mobile-menu-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 2px 0 0 !important;
    flex: 0 0 44px !important;
    border-radius: 10px !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--on-surface) !important;
    background: var(--surface-container-low) !important;
    border: 1px solid var(--outline) !important;
    box-shadow: none !important;
    z-index: 2 !important;
  }

  .mobile-menu-toggle .material-symbols-outlined {
    font-size: 22px !important;
    color: var(--on-surface) !important;
  }

  .header__actions {
    display: contents !important;
  }

  .header__tools {
    display: contents !important;
  }

  /* Workspace toggle lives in header on all breakpoints — not in sidebar drawer */
  body[data-feature-commercial-wave1="1"] #commercialContextToggle {
    display: none !important;
  }

  #businessTypeToggleHeader {
    grid-area: workspace !important;
    display: inline-flex !important;
    visibility: visible !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    min-height: 44px !important;
  }

  #businessTypeToggleHeader .commercial-toggle__track {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #businessTypeToggleHeader .commercial-toggle__btn {
    flex: 1 1 0 !important;
    min-width: 44px !important;
    min-height: 44px !important;
    justify-content: center !important;
    padding-inline: 8px !important;
  }

  /* Phone: icon-only context switch (floor-friendly, no “Ret/Ws/Mfg” text). */
  #businessTypeToggleHeader .commercial-toggle__label--desk,
  #businessTypeToggleHeader .commercial-toggle__label--compact,
  #businessTypeToggleHeader .commercial-toggle__label {
    display: none !important;
  }

  #businessTypeToggleHeader .commercial-toggle__track {
    padding: 6px !important;
    border: 1px solid var(--outline) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
  }

  #businessTypeToggleHeader .commercial-toggle__btn {
    padding-inline: 0 !important;
    gap: 0 !important;
  }

  #businessTypeToggleHeader .commercial-toggle__icon {
    width: 22px !important;
    height: 22px !important;
    font-size: 22px !important;
  }

  #businessTypeToggleDrawer {
    display: none !important;
  }

  #businessTypeToggleDrawer .commercial-toggle__track {
    display: flex;
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  #businessTypeToggleDrawer .commercial-toggle__btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding-inline: 8px;
  }

  #commercialContextToggle .commercial-toggle__track {
    min-width: 136px !important;
  }

  .commercial-toggle__btn-stack {
    padding: 4px 8px 3px !important;
  }

  #headerShopifySyncBtn {
    display: none !important;
  }

  .header__icon-btn {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px !important;
    border-radius: 10px !important;
    background: var(--surface-container-low) !important;
    border: 1px solid var(--outline) !important;
  }

  #settingsBtn.header__icon-btn {
    grid-area: settings !important;
  }

  .header__icon-btn .material-symbols-outlined {
    font-size: 19px !important;
  }

  .header__avatar {
    grid-area: avatar !important;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px !important;
    border-radius: 50% !important;
    font-size: 10px !important;
  }

  .header-spotlight {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    grid-area: search !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    padding: 0 !important;
    justify-content: center !important;
    background: var(--surface-container-low) !important;
    border: 1px solid var(--outline) !important;
    box-shadow: none !important;
  }

  .header-spotlight__label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .header-spotlight .material-symbols-outlined {
    font-size: 19px !important;
    flex: 0 0 auto !important;
  }

  .main {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: clip !important;
    padding: calc(var(--mobile-shell-top) + 12px) calc(var(--page-pad-x) + var(--safe-area-right)) calc(var(--shell-bottom-inset, 98px) + var(--safe-area-bottom)) calc(var(--page-pad-x) + var(--safe-area-left)) !important;
  }

  .page-section {
    padding-right: 0 !important;
    padding-bottom: 0 !important;
  }

  .pricing-grid,
  .stats-grid,
  .inventory-grid,
  .crm-kpi-grid,
  .glass-panel {
    margin-right: 4px;
  }

  .page-section {
    min-width: 0 !important;
  }

  .section-header {
    margin-bottom: 24px !important;
  }

  .section-header__row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }

  /* Desktop's `flex: 1 1 320px` on the title block sets a 320px basis
     along a row's horizontal axis. Once this breakpoint flips the row to
     flex-direction:column, that same basis applies to the vertical axis
     instead, forcing the title+subtitle block to a 320px+ minimum height. */
  .section-header__row > :first-child {
    flex: 0 1 auto !important;
  }

  .section-header__row > div {
    width: 100% !important;
    min-width: 0 !important;
  }

  .section-header__row > div:last-child {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .section-header__row > .dashboard-header-actions {
    display: grid !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .section-header__desc {
    font-size: 13px !important;
  }

  .section-header__row .btn,
  .filters-row .btn {
    min-height: 44px !important;
    justify-content: center !important;
  }

  .firm-setup-gate {
    width: 100% !important;
    padding: 22px 16px !important;
    border-radius: var(--radius-lg) !important;
  }

  .firm-setup-gate__intro {
    flex-direction: column !important;
    gap: 14px !important;
    margin-bottom: 22px !important;
  }

  .firm-setup-gate__icon {
    width: 48px !important;
    height: 48px !important;
    font-size: 25px !important;
  }

  .firm-setup-gate__title {
    font-size: 30px !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere !important;
  }

  .firm-setup-gate__desc {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .firm-setup-form {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .firm-logo-picker {
    align-items: stretch !important;
  }

  .firm-logo-picker .btn,
  .firm-setup-form__actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .firm-logo-picker__preview {
    max-width: 100% !important;
    width: 100% !important;
    height: 64px !important;
  }

  .staff-access-layout,
  .staff-policy-grid,
  .staff-account-form {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .staff-account-form .form-group,
  .staff-account-form .staff-submit-btn {
    grid-column: auto !important;
  }

  .staff-create-panel,
  .staff-policy-panel,
  .staff-list-panel {
    padding: 20px 16px !important;
    border-radius: var(--radius-lg) !important;
  }

  .staff-panel__header {
    gap: 12px !important;
    margin-bottom: 18px !important;
  }

  .staff-panel__icon {
    width: 40px !important;
    height: 40px !important;
  }

  .staff-account-row {
    align-items: flex-start !important;
  }

  .stats-grid,
  .stats-grid--2,
  .stats-grid--3,
  .stats-grid--4,
  .pricing-grid,
  .inventory-grid,
  .cashflow-grid,
  .cashflow-summary-grid,
  .kitty-detail-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin-bottom: 28px !important;
  }

  .pricing-grid,
  .cashflow-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .pricing-card,
  .stat-card,
  .kitty-detail-card {
    padding: 18px !important;
    min-width: 0 !important;
  }

  .pricing-card__header,
  .stat-card__header,
  .inventory-card__footer,
  .kitty-item {
    gap: 10px !important;
  }

  .pricing-card__label,
  .text-label-sm,
  .text-label-caps {
    letter-spacing: 0.04em !important;
  }

  .inventory-card {
    border-radius: 10px !important;
  }

  .inventory-card__image {
    height: 150px !important;
  }

  .inventory-card__body {
    padding: 18px !important;
  }

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

  .inventory-card__name {
    right: auto !important;
    white-space: normal !important;
    font-size: 13px !important;
    padding: 4px 8px !important;
    -webkit-line-clamp: 2 !important;
  }

  .inventory-card__caption {
    padding: 22px 10px 10px !important;
    gap: 3px !important;
  }

  .inventory-card__sku {
    font-size: 10px !important;
  }

  .inventory-card__footer,
  .shopify-connect,
  .whatsapp-status-bar,
  .activity-item,
  .kitty-item {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  .inventory-card__scan-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .inventory-list-scan-actions .inventory-card__scan-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .filters-row,
  .tabs {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px 14px !important;
    scrollbar-width: none;
  }

  .filters-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .tabs {
    margin-left: -12px !important;
    margin-right: -12px !important;
  }

  .filters-row::-webkit-scrollbar,
  .tabs::-webkit-scrollbar {
    display: none;
  }

  .filter-select,
  .tab {
    flex: 0 0 auto !important;
  }

  .filter-select {
    min-height: 44px !important;
  }

  .filter-select select {
    min-height: 44px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  .filters-row .search-input {
    flex: 1 0 220px !important;
    width: auto !important;
    min-height: 44px !important;
  }

  .filters-row .search-input input {
    height: 100% !important;
    min-height: 100% !important;
    font-size: 16px !important;
  }

  .tab {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  .btn {
    min-height: 44px !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.2 !important;
  }

  .btn .material-symbols-outlined {
    flex: 0 0 auto;
  }

  .btn-text {
    min-height: 44px !important;
    justify-content: center !important;
  }

  .table-container,
  .glass-panel:has(.data-table),
  div[style*="overflow-x:auto"],
  div[style*="overflow-x: auto"] {
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  .glass-panel:has(.data-table) {
    padding: 0 !important;
    overflow: clip !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .glass-panel:has(.data-table) > div[style*="overflow-x"] {
    overflow-x: clip !important;
  }

  .data-table tbody tr {
    content-visibility: visible;
    contain-intrinsic-size: auto;
  }

  .data-table,
  .data-table thead,
  .data-table tbody,
  .data-table tr,
  .data-table th,
  .data-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .data-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    white-space: normal !important;
  }

  .data-table thead {
    display: none !important;
  }

  .data-table tbody {
    display: grid !important;
    gap: 16px !important;
  }

  .data-table tbody tr {
    padding: 18px !important;
    border: 1px solid var(--outline) !important;
    border-radius: 14px !important;
    background: var(--surface) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
  }

  .data-table tbody tr:hover {
    background: var(--surface) !important;
  }

  .data-table td {
    display: grid !important;
    grid-template-columns: minmax(96px, 32%) minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: start !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--outline) !important;
    font-size: 13px !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .data-table td:last-child {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .data-table td::before {
    content: "Detail";
    color: var(--on-surface-variant);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.35;
    text-transform: none;
    padding-top: 2px;
  }

  .data-table td > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .data-table td .text-currency,
  .data-table td .text-primary,
  .data-table td .chip,
  .data-table td .gift-cell,
  .data-table td .progress-bar {
    max-width: 100% !important;
  }

  .data-table td .progress-bar {
    width: 100% !important;
  }

  .data-table td .gift-cell {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  .data-table td .btn,
  .data-table td .header__icon-btn,
  .data-table td .btn-text {
    width: auto !important;
    min-width: 44px !important;
    justify-self: start !important;
  }

  .data-table td[style*="text-align:right"],
  .data-table td[style*="text-align: right"] {
    text-align: left !important;
  }

  .table-user {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .table-user__info {
    min-width: 0 !important;
  }

  .table-user__name,
  .table-user__id {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  #inventoryTable td:nth-child(1)::before { content: "Asset ID"; }
  #inventoryTable td:nth-child(2)::before { content: "Identity"; }
  #inventoryTable td:nth-child(3)::before { content: "Material & Weight"; }
  #inventoryTable td:nth-child(4)::before { content: "Pricing"; }

  #customerTable td:nth-child(1)::before { content: "Customer"; }
  #customerTable td:nth-child(2)::before { content: "Rank"; }
  #customerTable td:nth-child(3)::before { content: "Lifetime Value"; }
  #customerTable td:nth-child(4)::before { content: "Last Transaction"; }

  #kittyTable td:nth-child(1)::before { content: "Subscriber"; }
  #kittyTable td:nth-child(2)::before { content: "Monthly"; }
  #kittyTable td:nth-child(3)::before { content: "Period"; }
  #kittyTable td:nth-child(4)::before { content: "Gift"; }
  #kittyTable td:nth-child(5)::before { content: "Status"; }
  #kittyTable td:nth-child(6)::before { content: "Action"; }

  #jobWorkTable td:nth-child(1)::before { content: "Job"; }
  #jobWorkTable td:nth-child(2)::before { content: "Customer"; }
  #jobWorkTable td:nth-child(3)::before { content: "Karigar"; }
  #jobWorkTable td:nth-child(4)::before { content: "Due Date"; }
  #jobWorkTable td:nth-child(5)::before { content: "Scrip"; }
  #jobWorkTable td:nth-child(6)::before { content: "Status"; }
  #jobWorkTable td:nth-child(7)::before { content: "Action"; }

  #invoiceTable td:nth-child(1)::before { content: "Invoice"; }
  #invoiceTable td:nth-child(2)::before { content: "Customer"; }
  #invoiceTable td:nth-child(3)::before { content: "GST Split"; }
  #invoiceTable td:nth-child(4)::before { content: "Due"; }
  #invoiceTable td:nth-child(5)::before { content: "Items"; }
  #invoiceTable td:nth-child(6)::before { content: "Grand Total"; }
  #invoiceTable td:nth-child(7)::before { content: "Status"; }
  #invoiceTable td:nth-child(8)::before { content: "Action"; }

  #memoryLogTable td:nth-child(1)::before { content: "Prompt"; }
  #memoryLogTable td:nth-child(2)::before { content: "Committed Action"; }
  #memoryLogTable td:nth-child(3)::before { content: "Outcome"; }
  #memoryLogTable td:nth-child(4)::before { content: "Tools"; }

  .crm-table td:nth-child(1)::before { content: "Lead"; }
  .crm-table td:nth-child(2)::before { content: "Stage"; }
  .crm-table td:nth-child(3)::before { content: "Intent"; }
  .crm-table td:nth-child(4)::before { content: "Quote"; }
  .crm-table td:nth-child(5)::before { content: "Rep / Source"; }
  .crm-table td:nth-child(6)::before { content: "Follow-up"; }
  .crm-table td:nth-child(7)::before { content: "Priority"; }

  #ledgerJewellersTable td:nth-child(1)::before { content: "Jeweller"; }
  #ledgerJewellersTable td:nth-child(2)::before { content: "Opening"; }
  #ledgerJewellersTable td:nth-child(3)::before { content: "Bills"; }
  #ledgerJewellersTable td:nth-child(4)::before { content: "Payments"; }
  #ledgerJewellersTable td:nth-child(5)::before { content: "Balance"; }
  #ledgerJewellersTable td:nth-child(6)::before { content: "Action"; }

  #kittyTable td:last-child,
  #jobWorkTable td:last-child,
  #invoiceTable td:last-child,
  #memoryLogTable td:last-child {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
  }

  #kittyTable td:last-child::before,
  #jobWorkTable td:last-child::before,
  #invoiceTable td:last-child::before,
  #memoryLogTable td:last-child::before {
    flex: 0 0 100% !important;
  }

  .modal-overlay:not(#labelDesignerModal):not(#salesModeModal) {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  .modal:not(.modal--structured) {
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(92dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 8px)) !important;
    margin: 0 !important;
    padding: 18px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 22px 22px 0 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .modal.modal--structured {
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(92dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 8px)) !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    border-bottom: 0 !important;
    overflow: hidden !important;
  }

  .modal:not(.modal--structured) {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .modal:not(.modal--structured) > .modal__header,
  .modal:not(.modal--structured) .modal__header.inventory-profile__header {
    position: relative !important;
    top: auto !important;
    z-index: 2 !important;
    margin: 0 !important;
    padding: max(16px, env(safe-area-inset-top, 0px)) 18px 12px !important;
    border-bottom: 1px solid var(--outline) !important;
    flex-shrink: 0 !important;
  }

  .modal:not(.modal--structured) > :not(.modal__header),
  .modal:not(.modal--structured) form {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .modal:not(.modal--structured) > :not(.modal__header):not(.form-actions):not(.inventory-profile__actions):not(.modal__footer),
  .modal:not(.modal--structured) form > :not(.form-actions):not(.inventory-form__dock):not(.inventory-form__scroll) {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  #inventoryModal form {
    overflow: hidden !important;
  }

  #inventoryFormScroll {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  #inventoryModal .inventory-form__dock {
    margin: 0 !important;
    padding: 0 !important;
  }

  #inventoryModal .inv-floating-estimate {
    padding: 10px 16px 8px !important;
    gap: 10px !important;
  }

  #inventoryModal .inv-floating-estimate__hint {
    display: none !important;
  }

  #inventoryModal .inv-floating-estimate__value {
    font-size: 20px !important;
  }

  .modal:not(.modal--structured) > .modal__body,
  .modal:not(.modal--structured) form {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .modal:not(.modal--structured) .form-actions,
  .modal:not(.modal--structured) .inventory-profile__actions,
  .modal:not(.modal--structured) > .modal__footer {
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 12px 16px 12px !important;
    border-top: 1px solid var(--outline) !important;
    background: var(--surface) !important;
  }

  .modal__title {
    font-size: 17px !important;
    line-height: 1.25 !important;
  }

  .modal__close {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
  }

  .modal form,
  .modal__body {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .modal [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  .modal [style*="display:grid"],
  .modal [style*="display: grid"] {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .modal [style*="width:"],
  .modal [style*="max-width"] {
    max-width: 100% !important;
  }

  .modal .form-group > [style*="display:flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .modal .form-group > [style*="display:flex"] > * {
    width: 100% !important;
    min-width: 0 !important;
  }

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

  .modal:not(.modal--structured) .form-actions,
  .modal:not(.modal--structured) .modal__footer {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 12px !important;
    padding-top: 20px !important;
    margin-top: 22px !important;
  }

  .modal:not(.modal--structured) .form-actions .btn,
  .modal:not(.modal--structured) .modal__footer .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .inventory-profile-modal:not(.modal--structured) {
    padding: 20px !important;
  }

  .inventory-profile__hero {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
  }

  .inventory-profile__image {
    width: 100% !important;
    height: 176px !important;
    aspect-ratio: auto !important;
  }

  .inventory-profile__title-row {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .inventory-profile__name {
    font-size: 22px !important;
  }

  .inventory-profile__breakdown,
  .inventory-profile__costs,
  .inventory-cost-form-grid,
  .inventory-stock-form-grid,
  .inventory-margin-panel__grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .inventory-header-actions {
    width: 100%;
    justify-content: stretch !important;
  }

  .inventory-header-actions > .btn,
  .inventory-header-actions .search-input,
  .inventory-stock-filter {
    width: 100% !important;
  }

  /* These IDs previously stacked at <=900px, a wider breakpoint than the
     .inventory-header-actions class above uses (<=768px). That mismatch
     forced the inventory/label/trade toolbars into a full-width one-per-row
     column stack across the whole tablet width range, well before the rest
     of the responsive system goes vertical. Matching the 768px breakpoint
     lets these toolbars wrap normally (2-3 short buttons per row) at
     tablet widths instead of stacking prematurely. */
  #inventoryLabelHeaderActions,
  #inventoryStockHeaderActions,
  #tradeChallansHeaderActions,
  #tradeApprovalsHeaderActions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  #inventoryLabelHeaderActions > .btn,
  #tradeChallansHeaderActions > .btn,
  #tradeApprovalsHeaderActions > .btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  .inventory-stock-filter {
    justify-content: center;
  }

  .inventory-variant-editor {
    padding: 12px !important;
  }

  .inventory-variant-row__body {
    grid-template-columns: 1fr !important;
  }

  .inventory-identifier-card {
    align-items: stretch;
    flex-direction: column;
  }

  .inventory-identifier-card__actions {
    grid-template-columns: 1fr !important;
    width: 100%;
  }

  .inventory-identifier-card__button {
    min-inline-size: 0;
    min-height: 44px;
    max-height: none !important;
    color: var(--on-surface) !important;
    background: var(--surface-container-low) !important;
    border: 1px solid var(--outline-strong) !important;
  }

  .inventory-identifier-card,
  .inventory-identifier-card__actions {
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
  }

  .inventory-identifier-card__actions {
    display: grid !important;
  }

  #inventoryBarcodeModal .modal {
    width: min(100%, calc(100vw - 24px)) !important;
    max-width: min(620px, calc(100vw - 24px)) !important;
  }

  #inventoryBarcodeModal #ibCanvas {
    display: block !important;
    width: 100% !important;
    max-width: min(560px, calc(100vw - 48px)) !important;
    height: auto !important;
    margin: 0 auto !important;
    background: #fff !important;
  }

  #ipMaterialBreakdown [style*="grid-template-columns"] {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  }

  .inventory-image-field {
    grid-template-columns: 1fr;
  }

  .inventory-image-field__preview {
    width: 100%;
    height: min(56vw, 220px);
  }

  .inventory-profile__image--clickable::after,
  .inventory-image-field__preview--clickable::after {
    opacity: 1;
    width: 26px;
    height: 26px;
    font-size: 15px;
  }

  .inventory-image-viewer-modal {
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)) !important;
  }

  .inventory-image-viewer {
    width: 100% !important;
    height: calc(100dvh - max(20px, env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
    padding: 10px !important;
    border-radius: 18px !important;
  }

  .inventory-image-viewer__header {
    padding-bottom: 6px !important;
  }

  .inventory-image-viewer__caption {
    max-width: 70vw !important;
    font-size: 13px !important;
  }

  .inventory-image-field__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .stock-registry-panel__header {
    padding: 12px 14px !important;
  }

  .stock-registry-panel__header .tabs {
    margin: 0 !important;
  }

  .input-glass,
  .form-group select,
  .input-with-icon input {
    min-height: 48px !important;
    border-radius: 12px !important;
  }

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

  .sidebar {
    top: 0 !important;
    bottom: 0 !important;
    width: min(86vw, 320px) !important;
    height: 100dvh !important;
    z-index: 150 !important;
    padding-top: calc(var(--mobile-shell-top) + 8px) !important;
    padding-left: max(var(--space-5), var(--safe-area-left)) !important;
    padding-right: max(var(--space-3), var(--safe-area-right)) !important;
    padding-bottom: max(18px, var(--safe-area-bottom)) !important;
    background: var(--surface) !important;
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.22) !important;
    overflow-x: hidden !important;
  }

  .sidebar__nav {
    padding-bottom: 12px !important;
  }

  .sidebar__link {
    min-height: 44px !important;
    font-size: 14px !important;
  }

  #mobileOverlay {
    z-index: 140 !important;
  }

  :root {
    --fab-size: 54px;
    --fab-gap: 14px;
    --mobile-bottom-nav-height: 56px;
    --fab-bottom: calc(var(--mobile-bottom-nav-height) + max(10px, env(safe-area-inset-bottom)) + 10px);
    --fab-right: max(18px, env(safe-area-inset-right));
  }

  .fab {
    right: var(--fab-right) !important;
    bottom: var(--fab-bottom) !important;
    width: var(--fab-size) !important;
    height: var(--fab-size) !important;
  }

  .fab-menu {
    right: calc(12px + env(safe-area-inset-right)) !important;
    left: calc(12px + env(safe-area-inset-left)) !important;
    bottom: calc(var(--fab-bottom) + var(--fab-size) + var(--fab-gap) + 8px) !important;
    width: auto !important;
  }

  body.modal-open .fab,
  body.modal-open .fab-menu,
  body.crm-drawer-open .fab,
  body.crm-drawer-open .fab-menu,
  body.sidebar-open .fab,
  body.sidebar-open .fab-menu,
  body:has(.copilot-panel--open) .fab,
  body:has(.copilot-panel--open) .fab-menu {
    display: none !important;
  }

  .whatsapp-container {
    height: calc(100dvh - 172px) !important;
    min-height: 420px !important;
  }

  .whatsapp-frame-wrapper {
    border-radius: 10px !important;
  }

  .chart-bar-container {
    height: 170px !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  .chart-labels span {
    font-size: 9px !important;
  }

  .login-overlay {
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow-x: visible !important;
    overflow-y: auto !important;
    padding: 20px !important;
    align-items: center !important;
  }

  .login-card {
    width: min(100%, 340px) !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 8px 28px 28px 10px !important;
    padding: 18px 18px !important;
    border-radius: 14px !important;
  }

  .login-card__header {
    margin-bottom: 10px !important;
  }

  .login-logo {
    margin-bottom: 6px !important;
  }

  .login-logo .material-symbols-outlined {
    font-size: 34px !important;
  }

  .login-title {
    font-size: 24px !important;
    line-height: 1.05 !important;
  }

  .login-subtitle {
    font-size: 10px !important;
    margin-top: 2px !important;
  }

  .login-form {
    gap: 8px !important;
  }

  .role-selector {
    gap: 8px !important;
    margin-bottom: 0 !important;
  }

  .role-box {
    min-height: 48px !important;
    padding: 8px !important;
    justify-content: center !important;
  }

  .role-box .material-symbols-outlined {
    font-size: 19px !important;
  }

  .login-card .form-group {
    gap: 4px !important;
    margin-bottom: 0 !important;
  }

  .login-card .form-group label {
    font-size: 11px !important;
  }

  .login-card .input-with-icon input {
    min-height: 44px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .login-card .btn--large {
    min-height: 44px !important;
    margin-top: 2px !important;
    padding: 10px 18px !important;
  }

  .login-card__footer {
    margin-top: 10px !important;
    gap: 4px !important;
  }

  .login-card__footer p {
    font-size: 11px !important;
  }

  .login-card__footer > div {
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }

  .login-card__footer .btn-text {
    min-height: 44px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
  }

  .login-remember {
    margin-top: -2px !important;
    gap: 7px !important;
  }

  .login-remember label {
    font-size: 12px !important;
  }

  .contact-modal {
    width: 100% !important;
    max-width: 360px !important;
  }

  #toast-container {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    transform: none !important;
    align-items: stretch !important;
  }

  .jf-toast,
  .toast {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    transform: translateY(20px) !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .jf-toast.show,
  .toast.show {
    transform: translateY(0) !important;
  }

  #inventorySubmitButton:disabled {
    opacity: 0.72;
    cursor: wait;
  }

  #inventorySubmitButton:focus,
  #inventorySubmitButton:focus-visible {
    background: var(--secondary) !important;
    color: var(--on-secondary) !important;
    outline: 2px solid color-mix(in srgb, var(--primary) 42%, transparent);
    outline-offset: 2px;
    -webkit-tap-highlight-color: transparent;
  }

  #inventoryForm .form-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) !important;
    gap: 8px !important;
    margin-top: 0 !important;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)) !important;
  }

  #inventoryForm .form-actions .btn {
    width: auto !important;
    min-height: 42px !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
  }

  #inventoryProfileModal .inventory-profile__actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin-top: 14px !important;
    padding-top: 12px !important;
  }

  #inventoryProfileModal .inventory-profile__actions .btn {
    width: auto !important;
    min-height: 44px !important;
    padding: 7px 6px !important;
    gap: 4px !important;
    font-size: 11px !important;
  }

  #inventoryProfileModal .inventory-profile__actions .material-symbols-outlined {
    font-size: 15px !important;
  }

  #invoicePreviewModal .modal {
    padding: 0 !important;
  }

  #invoicePreviewModal .modal__header {
    top: 0 !important;
    margin: 0 !important;
  }

  #customerProfileModal .modal,
  #headerProfileModal .modal,
  #inventoryProfileModal .modal,
  #kittySubscriberModal .modal,
  #customerModal .modal,
  #inventoryModal .modal {
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100dvh - 28px) !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  #customerProfileModal .modal > div:not(.modal__header),
  #inventoryProfileModal .modal > div:not(.modal__header) {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #customerProfileModal .modal > div[style*="display:flex"],
  #customerProfileModal .modal > div[style*="display: flex"],
  #inventoryProfileModal .modal > div[style*="display:flex"],
  #inventoryProfileModal .modal > div[style*="display: flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }

  #kittySubscriberModal label[style*="display:flex"],
  #kittySubscriberModal label[style*="display: flex"] {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  #kittySubscriberModal label[style*="display:flex"] .btn-text,
  #kittySubscriberModal label[style*="display: flex"] .btn-text {
    flex: 0 0 auto !important;
    min-height: 44px !important;
  }

  #customerProfileModal #cpName,
  #customerProfileModal #cpPhone,
  #customerProfileModal #cpRank,
  #inventoryProfileModal #ipName,
  #inventoryProfileModal #ipSku,
  #inventoryProfileModal #ipListedPrice,
  #inventoryProfileModal #ipEstimatedPrice,
  #inventoryProfileModal .stat-card,
  #kittySubscriberModal label,
  #kittySubscriberModal input,
  #kittySubscriberModal select,
  #customerModal label,
  #customerModal input,
  #customerModal select,
  #customerModal textarea,
  #inventoryModal label,
  #inventoryModal input,
  #inventoryModal select,
  #inventoryModal textarea {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  #customerProfileModal #cpTimeline {
    max-height: min(240px, 32dvh) !important;
    overflow-x: hidden !important;
  }

  .profile-summary-modal {
    width: 100% !important;
    max-width: none !important;
  }

  .profile-summary__hero {
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .profile-summary__avatar {
    width: 56px !important;
    height: 56px !important;
    flex-basis: 56px !important;
  }

  .profile-summary__name {
    font-size: 22px !important;
  }

  .profile-summary__grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .profile-summary__item {
    padding: 11px !important;
  }

  .profile-summary__actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #inventoryProfileModal #ipImage {
    width: 100% !important;
    height: 176px !important;
    aspect-ratio: auto !important;
    max-height: none !important;
  }

  #inventoryProfileModal #ipImage img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  #inventoryProfileModal .modal > div[style*="display:flex"] > div,
  #inventoryProfileModal .modal > div[style*="display: flex"] > div,
  #customerProfileModal .modal > div[style*="display:flex"] > div,
  #customerProfileModal .modal > div[style*="display: flex"] > div {
    width: 100% !important;
    min-width: 0 !important;
  }

  #customerProfileModal #cpAvatar {
    width: 56px !important;
    height: 56px !important;
    flex: 0 0 56px !important;
    align-self: flex-start !important;
  }

  #inventoryProfileModal .modal [style*="justify-content:space-between"],
  #inventoryProfileModal .modal [style*="justify-content: space-between"] {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  #invoicePreviewModal .modal__body {
    padding: 12px !important;
    justify-content: flex-start !important;
    overflow: auto !important;
  }

  .print-container {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    transform: none !important;
    transform-origin: top left;
    overflow-wrap: anywhere !important;
  }

  .print-container *,
  .print-table,
  .print-totals-table {
    max-width: 100% !important;
  }

  .print-table,
  .print-totals-table {
    table-layout: fixed !important;
    font-size: 10px !important;
  }

  #page-secret-vault {
    width: 100% !important;
    min-height: 100dvh !important;
    padding: 18px 14px 28px !important;
    overflow-x: hidden !important;
    background: #000000 !important;
    color: #ffcc00 !important;
  }

  #page-secret-vault .section-header {
    margin-bottom: 18px !important;
    padding-bottom: 14px !important;
  }

  #page-secret-vault .section-header__row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  #page-secret-vault h1,
  #page-secret-vault .text-headline-md {
    font-size: 20px !important;
    line-height: 1.05 !important;
    letter-spacing: 1px !important;
  }

  #page-secret-vault .section-header p {
    font-size: 10px !important;
    line-height: 1.4 !important;
  }

  #panicVaultBtn {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
    letter-spacing: 0.03em !important;
  }

  #page-secret-vault .tabs {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    overflow: visible !important;
    margin: 0 0 18px !important;
    padding: 0 0 14px !important;
    border-bottom: 1px solid rgba(255, 204, 0, 0.3) !important;
    background: transparent !important;
  }

  #page-secret-vault .tab {
    width: 100% !important;
    min-height: 42px !important;
    justify-content: flex-start !important;
    border: 1px solid rgba(255, 204, 0, 0.22) !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    background: #050500 !important;
    color: rgba(255, 204, 0, 0.68) !important;
    font-family: monospace !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    text-align: left !important;
  }

  #page-secret-vault .tab--active {
    background: rgba(255, 204, 0, 0.1) !important;
    color: #ffcc00 !important;
    border-color: #ffcc00 !important;
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.2) !important;
  }

  #vaultContentArea {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    -webkit-overflow-scrolling: auto !important;
  }

  #vaultContentArea .vault-metrics {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 18px !important;
    padding: 12px !important;
  }

  #vaultContentArea .vault-metric {
    display: grid !important;
    grid-template-columns: minmax(96px, 1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  #vaultContentArea .vault-metric > div:first-child {
    font-size: 10px !important;
    line-height: 1.35 !important;
  }

  #vaultContentArea .vault-metric > div:last-child {
    font-size: 16px !important;
    line-height: 1.1 !important;
    text-align: right !important;
    overflow-wrap: anywhere !important;
  }

  #vaultContentArea table {
    min-width: 0 !important;
  }

  body.black-market-theme .fab {
    display: none !important;
  }

  #page-secret-vault .glass-panel:has(.data-table),
  #page-secret-vault .table-container,
  #page-secret-vault div[style*="overflow-x:auto"],
  #page-secret-vault div[style*="overflow-x: auto"] {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #page-secret-vault .data-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    border-collapse: separate !important;
    background: #000000 !important;
    color: #ffcc00 !important;
    white-space: normal !important;
  }

  #page-secret-vault .data-table thead {
    display: none !important;
  }

  #page-secret-vault .data-table tbody {
    display: grid !important;
    gap: 12px !important;
  }

  #page-secret-vault .data-table tr {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
    border: 1px solid rgba(255, 204, 0, 0.28) !important;
    border-radius: 0 !important;
    background: #020200 !important;
    box-shadow: none !important;
  }

  #page-secret-vault .data-table td {
    display: grid !important;
    grid-template-columns: minmax(86px, 34%) minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 9px 0 !important;
    border-bottom: 1px solid rgba(255, 204, 0, 0.16) !important;
    color: #f5f5f5 !important;
    font-family: monospace !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  #page-secret-vault .data-table td:last-child {
    border-bottom: 0 !important;
  }

  #page-secret-vault .data-table td::before {
    content: "FIELD" !important;
    color: #ffcc00 !important;
    opacity: 0.72 !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    line-height: 1.35 !important;
    text-transform: uppercase !important;
  }

  #page-secret-vault [data-vault-table="inventory"] td:nth-child(1)::before { content: "ID/SKU" !important; }
  #page-secret-vault [data-vault-table="inventory"] td:nth-child(2)::before { content: "ASSET" !important; }
  #page-secret-vault [data-vault-table="inventory"] td:nth-child(3)::before { content: "MATERIAL" !important; }
  #page-secret-vault [data-vault-table="inventory"] td:nth-child(4)::before { content: "VALUE" !important; }
  #page-secret-vault [data-vault-table="inventory"] td:nth-child(5)::before { content: "MARGIN" !important; }
  #page-secret-vault [data-vault-table="inventory"] td:nth-child(6)::before { content: "STATUS" !important; }

  #page-secret-vault [data-vault-table="transactions"] td:nth-child(1)::before { content: "DATE" !important; }
  #page-secret-vault [data-vault-table="transactions"] td:nth-child(2)::before { content: "REF" !important; }
  #page-secret-vault [data-vault-table="transactions"] td:nth-child(3)::before { content: "DESC" !important; }
  #page-secret-vault [data-vault-table="transactions"] td:nth-child(4)::before { content: "AMOUNT" !important; }
  #page-secret-vault [data-vault-table="transactions"] td:nth-child(5)::before { content: "MARGIN" !important; }
  #page-secret-vault [data-vault-table="transactions"] td:nth-child(6)::before { content: "TYPE" !important; }

  #page-secret-vault [data-vault-table="customers"] td:nth-child(1)::before { content: "CLIENT" !important; }
  #page-secret-vault [data-vault-table="customers"] td:nth-child(2)::before { content: "ALIAS" !important; }
  #page-secret-vault [data-vault-table="customers"] td:nth-child(3)::before { content: "COMM" !important; }
  #page-secret-vault [data-vault-table="customers"] td:nth-child(4)::before { content: "LTV" !important; }
  #page-secret-vault [data-vault-table="customers"] td:nth-child(5)::before { content: "INTEL" !important; }

  #page-secret-vault .data-table td > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 932px) and (max-height: 480px) and (min-aspect-ratio: 13/9) {
  .header {
    min-height: 58px !important;
    padding: 8px 10px !important;
    grid-template-columns: minmax(112px, auto) minmax(180px, 1fr) 44px 44px !important;
    grid-template-areas: "brand search settings avatar" !important;
    gap: 8px !important;
  }

  .header__brand {
    flex: 0 1 auto !important;
    min-width: 128px !important;
    max-width: 172px !important;
  }

  .header__product-name {
    max-width: 112px !important;
    font-size: 15px !important;
  }

  .header-spotlight {
    width: auto !important;
    min-width: 180px !important;
    height: 40px !important;
    margin-top: 0 !important;
  }

  .main {
    padding-top: calc(var(--mobile-shell-top) + 10px) !important;
  }

  .section-header {
    margin-bottom: 18px !important;
  }

  .section-header__title {
    font-size: 24px !important;
  }

  .modal-overlay:not(#labelDesignerModal):not(#salesModeModal) {
    align-items: flex-end !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .modal:not(#salesModeModal .modal) {
    max-height: min(92dvh, calc(100dvh - 36px)) !important;
    margin: 0 !important;
    padding: 16px 16px calc(12px + env(safe-area-inset-bottom)) !important;
    border-radius: 22px 22px 0 0 !important;
  }

  .modal__header {
    top: -16px !important;
    margin: -16px -16px 14px !important;
    padding: 14px 16px 10px !important;
  }

  .whatsapp-container {
    height: calc(100dvh - 110px) !important;
    min-height: 260px !important;
  }
}

@media (max-width: 480px) {
  :root {
    --container-padding: 14px;
    --gutter: 14px;
  }

  .main {
    padding-left: calc(var(--page-pad-x) + env(safe-area-inset-left, 0px)) !important;
    padding-right: calc(var(--page-pad-x) + env(safe-area-inset-right, 0px)) !important;
  }

  .pricing-grid,
  .stats-grid--4,
  .cashflow-summary-grid {
    grid-template-columns: 1fr !important;
  }

  .section-header__row > div:last-child .btn {
    flex: 1 1 100% !important;
  }

  .price-source-label,
  #priceLastUpdated {
    flex: 1 1 auto !important;
  }

  .price-source-label {
    flex: 0 0 auto !important;
    padding: 3px 8px !important;
    white-space: nowrap !important;
  }

  .price-source-label .price-source-text {
    display: none !important;
  }

  .price-source-label::after {
    content: attr(data-short);
  }

  .header__product-name {
    max-width: none;
  }

  .header__icon-btn,
  .header__avatar,
  .mobile-menu-toggle {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  .header__brand {
    gap: 6px !important;
  }

  .header__product-name {
    font-size: 15px !important;
  }

  .header-spotlight {
    height: 40px !important;
  }

  .modal {
    padding: 18px !important;
  }

  .modal__header {
    top: -18px !important;
    margin: -18px -18px 16px !important;
    padding: 16px 18px 12px !important;
  }
}

@media (min-width: 481px) and (max-width: 560px) {
  .pricing-grid {
    grid-template-columns: 1fr !important;
  }

  .pricing-card {
    padding: 16px !important;
  }

  .pricing-card__trend {
    font-size: 12px !important;
    overflow-wrap: anywhere;
  }
}

@supports (height: 100dvh) {
  @media (max-width: 768px) {
    .sidebar,
    .login-overlay {
      height: 100dvh !important;
    }
  }
}

@media (max-width: 768px) {
  .shopify-connect {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px 12px !important;
    padding: 14px !important;
    border-radius: 12px !important;
  }

  .shopify-connect__icon {
    grid-column: 1;
    grid-row: 1;
    width: 40px !important;
    height: 40px !important;
  }

  .shopify-connect__copy {
    grid-column: 2;
    grid-row: 1;
    min-width: 0 !important;
  }

  .shopify-connect__title {
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  .shopify-connect__description {
    margin-top: 3px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  .shopify-connect__statuses {
    grid-column: 1 / -1;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    width: 100% !important;
  }

  .shopify-connect__statuses .chip {
    width: auto !important;
    max-width: 100% !important;
    min-height: 44px !important;
    padding: 5px 9px !important;
    justify-content: flex-start !important;
  }

  .shopify-connect__configure {
    grid-column: 1 / -1;
    width: 100% !important;
    min-height: 44px !important;
    padding: 8px 12px !important;
    justify-content: center !important;
  }

  #page-crm {
    overflow-x: clip;
  }

  #page-crm .section-header {
    margin-bottom: 14px !important;
  }

  .crm-page-header .section-header__row,
  .crm-header-actions {
    align-items: stretch !important;
  }

  #page-crm .section-header__row > .crm-header-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center !important;
    gap: 8px;
    width: 100%;
    height: 44px;
    min-height: 44px;
    flex-wrap: nowrap !important;
  }

  .crm-view-switcher {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    padding: 4px;
    height: 44px;
  }

  .crm-view-switcher .tab {
    justify-content: center;
    min-height: 44px;
    padding-inline: 6px;
    font-size: 11px;
  }

  .crm-header-actions > .btn {
    width: auto;
    min-width: 104px;
    height: 44px;
    min-height: 44px;
    align-self: stretch;
    justify-content: center;
    padding-inline: 12px;
  }

  .modal.modal--structured {
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(92dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 8px)) !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    border-bottom: 0 !important;
    overflow: hidden !important;
  }

  .inventory-profile-modal,
  #inventoryProfileModal .modal,
  #customerProfileModal .modal,
  #inventoryBarcodeModal .modal {
    width: min(100%, calc(100vw - 24px)) !important;
    max-width: min(100%, calc(100vw - 24px)) !important;
    max-height: min(calc(100dvh - 24px), calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))) !important;
  }

  .modal--structured > .modal__header {
    min-height: 64px;
    padding: max(14px, env(safe-area-inset-top)) 16px 12px !important;
  }

  .modal--structured > form,
  .modal--structured > .modal__body,
  .modal--structured > .recurring-list {
    padding: 16px 16px 0;
  }

  .modal--structured > .modal__scroll {
    padding: 14px 16px 16px;
  }

  .modal--structured > form .form-actions,
  .modal--structured > .modal__footer,
  .modal.settings-dialog > .modal__footer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  }

  .modal--structured > form .form-actions .btn,
  .modal--structured > .modal__footer .btn,
  .modal.settings-dialog > .modal__footer .btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  #settingsModal > .modal.settings-dialog {
    --modal-structured-width: min(100%, calc(100vw - 20px));
    width: min(100%, calc(100vw - 20px));
    max-width: min(100%, calc(100vw - 20px));
  }

  /* Widened from an exact "1fr 1fr" match to any inline grid-template-columns,
     for the same reason as the .page-section/.modal rule above: an exact-value
     attribute selector silently stops matching the moment the inline style's
     serialized string differs even slightly. */
  .modal--structured [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .modal--structured .invoice-line-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 12px;
    border: 1px solid var(--outline);
    border-radius: var(--radius-md);
    background: var(--surface-container-low);
  }

  .modal--structured .invoice-line-row > .form-group:nth-child(1),
  .modal--structured .invoice-line-row > .form-group:nth-child(2) {
    grid-column: 1 / -1;
  }

  .crm-kpi-grid {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px;
    width: 100%;
    margin: 0 0 14px;
    padding: 0;
    overflow: visible;
  }

  .crm-kpi-grid::-webkit-scrollbar,
  .crm-filter-bar::-webkit-scrollbar,
  .crm-kanban::-webkit-scrollbar {
    display: none;
  }

  .crm-kpi-grid .stat-card {
    min-width: 0;
    min-height: 104px;
    padding: 13px !important;
    border-radius: var(--radius-md);
  }

  .crm-kpi-grid .stat-card__icon {
    width: 30px;
    height: 30px;
  }

  .crm-kpi-grid .stat-card__trend {
    font-size: 9px;
    line-height: 1.3;
    white-space: normal;
  }

  .crm-filter-bar {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: end;
    gap: 8px;
    width: 100%;
    margin: 0 0 14px;
    padding: 12px !important;
    overflow: visible;
    border-radius: var(--radius-md);
  }

  .crm-filter-bar > * {
    min-width: 0;
  }

  .crm-search-field {
    grid-column: 1 / -1 !important;
    width: 100%;
  }

  .crm-filter-bar select,
  .crm-search-field {
    min-height: 44px;
  }

  .crm-filter-bar > .btn {
    grid-column: 1 / -1;
    min-height: 44px;
    justify-content: center;
    align-self: end;
  }

  .crm-kanban {
    grid-auto-columns: min(84vw, 340px);
    gap: 10px;
    width: calc(100% + 12px);
    margin-right: -12px;
    padding: 2px 12px 12px 2px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .crm-kanban-column {
    min-height: 238px;
    max-height: min(520px, 58dvh);
    scroll-snap-stop: always;
    border-radius: var(--radius-md);
  }

  .crm-kanban-column__header {
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 46px;
  }

  .crm-kanban-column__body {
    overflow-y: auto;
  }

  .crm-lead-card {
    padding: 14px;
  }

  .crm-lead-card__name {
    font-size: 14px;
  }

  .crm-lead-card__intent,
  .crm-lead-card__meta,
  .crm-lead-card__followup {
    font-size: 11px;
  }

  .crm-tag {
    min-height: 24px;
    padding-inline: 9px;
    font-size: 10px;
  }

  .crm-list-panel,
  .crm-calendar-panel { border-radius: var(--radius-lg); }

  .crm-table-wrap {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .crm-calendar-panel {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .crm-calendar-toolbar {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px auto;
    min-width: 0;
    padding: 10px;
  }

  .crm-calendar-toolbar h2 {
    min-width: 0;
    font-size: 15px !important;
    text-align: center;
  }

  .crm-calendar-toolbar .header__icon-btn {
    display: inline-grid !important;
    grid-area: auto !important;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
  }

  .crm-calendar-toolbar .btn {
    min-height: 40px;
    margin-left: 0;
    padding-inline: 10px;
  }

  .crm-calendar {
    grid-template-columns: repeat(7, minmax(96px, 1fr));
    min-width: 672px;
  }

  .crm-calendar-weekday {
    padding: 8px 2px;
    font-size: 8px;
    text-align: center;
    overflow: hidden;
  }

  .crm-calendar-day {
    min-height: 76px;
    padding: 5px 3px;
  }

  .crm-calendar-day__number {
    display: block;
    text-align: center;
  }

  .crm-calendar-event {
    min-height: 44px;
    margin-top: 4px;
    padding: 5px;
    border-left-width: 2px;
    font-size: 8px;
    white-space: normal;
  }

  .crm-calendar-event__lead {
    font-size: 7px;
  }

  .crm-drawer {
    width: 100vw;
    border-left: 0;
    box-shadow: none;
  }
  .crm-drawer__header {
    position: relative;
    padding: max(14px, env(safe-area-inset-top)) 16px 13px;
  }

  .crm-drawer__header h2 {
    max-width: calc(100vw - 78px);
    font-size: 21px !important;
  }

  .crm-drawer__header .header__icon-btn,
  .crm-drawer__header .modal__close {
    display: inline-grid !important;
    place-items: center;
    grid-area: auto !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  .crm-drawer__body {
    padding: 15px 16px calc(28px + env(safe-area-inset-bottom));
    overscroll-behavior-y: contain;
  }

  .crm-form-grid { grid-template-columns: 1fr; }
  .crm-span-2 { grid-column: auto; }
  .crm-task-composer { grid-template-columns: 1fr; }
  .crm-task-composer .btn,
  .crm-drawer-section > .btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }
  .crm-task-row { grid-template-columns: auto minmax(0,1fr) auto; }
  .crm-task-row time { grid-column: 2; }
  .crm-handoff-grid { grid-template-columns: 1fr; }
  .crm-handoff-card { min-height: 58px; }
  .crm-drawer__footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }
  .crm-drawer__footer .btn {
    flex: 1 1 0;
    width: auto;
    min-height: 44px;
    padding-inline: 10px;
    justify-content: center;
  }
  .crm-drawer__footer .btn--primary {
    flex-grow: 1.25;
  }
  .crm-drawer__footer .btn--danger {
    width: 44px;
    padding: 0;
    font-size: 0;
  }
  .crm-drawer__footer .btn--danger .material-symbols-outlined {
    font-size: 20px;
  }
  .crm-drawer__footer-spacer { display: none; }
}

@media (max-width: 480px) {
  .crm-view-switcher .material-symbols-outlined { display: none; }
  .crm-header-actions > .btn {
    min-width: 92px;
    padding-inline: 10px;
  }
  .crm-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .crm-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .crm-calendar-toolbar {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
  }
  .crm-calendar-toolbar .btn {
    grid-column: 1 / -1;
  }
  .crm-calendar-day {
    min-height: 68px;
  }
  .crm-drawer__footer {
    gap: 7px;
  }
}

@media (max-width: 768px) and (max-height: 640px) {
  #vaultPinOverlay .minimal-display-container {
    margin: 16vh 0 4vh !important;
    margin: 16dvh 0 4dvh !important;
  }

  #vaultPinOverlay .minimal-keypad {
    gap: 16px 36px !important;
    max-width: 300px !important;
  }

  #vaultPinOverlay .elegant-key {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
  }

  .login-overlay {
    padding: 16px !important;
    overflow-x: visible !important;
    overflow-y: auto !important;
  }

  .login-card {
    width: min(100%, 400px) !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 8px auto 28px !important;
    padding: 14px 16px !important;
  }

  .login-card__header {
    margin-bottom: 6px !important;
  }

  .login-title {
    font-size: 22px !important;
  }

  .login-form {
    gap: 6px !important;
  }

  .role-box {
    min-height: 44px !important;
  }

  .login-card .input-with-icon input {
    min-height: 44px !important;
  }

  .login-card__footer {
    margin-top: 6px !important;
  }
}

/* ============================================
   Secure Vault Mobile — chamber (not neon terminal)
   ============================================ */
@media (max-width: 768px) {
  body.black-market-theme .main,
  body.vault-chamber-active .main {
    width: 100% !important;
    margin-left: 0 !important;
    padding: 16px 14px 28px !important;
    background: transparent !important;
  }

  #page-secret-vault.vault-terminal,
  #page-secret-vault.vault-chamber {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100dvh !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background: transparent !important;
    color: #e8d5b5 !important;
  }

  .vault-terminal__header {
    padding-bottom: 12px !important;
    margin-bottom: 14px !important;
    border-bottom-color: rgba(196,165,116,0.28) !important;
  }

  .vault-terminal__header-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 12px !important;
  }

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

  .vault-terminal__kicker {
    font-size: 10px !important;
  }

  .vault-terminal__title {
    font-size: 26px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    overflow-wrap: anywhere !important;
    color: #e8d5b5 !important;
  }

  .vault-terminal__subtitle {
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #a89878 !important;
  }

  .vault-terminal__print,
  .vault-terminal__panic {
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    border-radius: 10px !important;
  }

  .vault-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-bottom: 10px !important;
    margin: 0 0 14px !important;
    overflow: visible !important;
    border-bottom-color: rgba(196,165,116,0.28) !important;
  }

  .vault-tab {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    justify-content: center !important;
    padding: 8px 6px !important;
    border-radius: 8px !important;
    background: #1c1810 !important;
    color: #a89878 !important;
    border-color: rgba(196,165,116,0.28) !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    box-shadow: 2px 2px 0 #050301 !important;
  }

  .vault-tab.tab--active,
  .vault-tab[aria-selected="true"] {
    background: rgba(196,165,116,0.18) !important;
    color: #e8d5b5 !important;
    border-color: #c4a574 !important;
  }

  .vault-content {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: #e8d5b5 !important;
  }

  .vault-state {
    padding: 28px 0 !important;
    color: #a89878 !important;
  }

  .vault-metrics {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
    background: transparent !important;
    border: 0 !important;
  }

  .vault-metric {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    align-items: flex-start !important;
    min-width: 0 !important;
    padding: 12px !important;
    border: 1px solid rgba(196,165,116,0.28) !important;
    border-radius: 12px !important;
    background: #1c1810 !important;
    box-shadow: 3px 3px 0 #050301 !important;
  }

  .vault-metric__label {
    font-size: 10px !important;
    line-height: 1.35 !important;
    color: #a89878 !important;
  }

  .vault-metric__value {
    min-width: 0 !important;
    font-size: 16px !important;
    line-height: 1.1 !important;
    text-align: left !important;
    color: #d4b896 !important;
    overflow-wrap: anywhere !important;
  }

  .vault-charts {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 12px !important;
  }

  .vault-chart-card {
    background: #1c1810 !important;
    border: 1px solid rgba(196,165,116,0.28) !important;
    border-radius: 12px !important;
    box-shadow: 3px 3px 0 #050301 !important;
  }

  .vault-chart-card__canvas {
    height: 200px !important;
  }

  .vault-actions {
    display: grid !important;
    width: 100% !important;
    gap: 8px !important;
    margin: 0 0 12px !important;
  }

  .vault-add-btn {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
    border-radius: 999px !important;
    font-size: 12px !important;
  }

  .vault-actions .btn {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
  }

  .vault-table-wrap {
    display: none !important;
  }

  .vault-mobile-records {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .vault-record {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 12px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(196,165,116,0.28) !important;
    background: #1c1810 !important;
    box-shadow: 3px 3px 0 #050301 !important;
    color: #e8d5b5 !important;
  }

  .vault-record__field {
    grid-template-columns: minmax(76px, 33%) minmax(0, 1fr) !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  .vault-record__label {
    color: #a89878 !important;
  }

  .vault-record__value {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    color: #e8d5b5 !important;
  }

  .vault-terminal .data-table:not(.vault-table) {
    display: none !important;
  }

  #secureEditModal {
    padding: 0 !important;
    align-items: stretch !important;
    background: rgba(10, 8, 5, 0.8) !important;
  }

  #secureEditModal .secure-modal-box {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-width: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    background: #1c1810 !important;
    box-shadow: none !important;
  }

  #secureEditModal .secure-modal-header {
    min-height: 58px !important;
    padding: max(12px, env(safe-area-inset-top)) 14px 12px !important;
    background: #14110a !important;
    color: #d4b896 !important;
    border-bottom: 1px solid rgba(196,165,116,0.28) !important;
  }

  #secureEditModal .secure-modal-title {
    font-size: 16px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  #secureEditModal .secure-modal-close {
    color: #a89878 !important;
  }

  #secureEditModal .secure-modal-body {
    padding: 16px 14px !important;
  }

  #secureEditModal .secure-form-group label {
    color: #a89878 !important;
  }

  #secureEditModal .secure-input {
    background: #14110a !important;
    border-color: rgba(196,165,116,0.28) !important;
    color: #e8d5b5 !important;
    border-radius: 8px !important;
  }

  #secureEditModal .secure-modal-footer {
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid rgba(196,165,116,0.28) !important;
    gap: 8px !important;
  }

  #secureEditModal .secure-modal-footer .btn {
    min-height: 44px !important;
    flex: 1 1 auto !important;
  }

  #secureEditModal .secure-modal-title {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  #secureEditModal .secure-modal-close {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
  }

  #secureEditModal .secure-modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    gap: 14px !important;
    overscroll-behavior: contain !important;
  }

  #secureEditModal .secure-input {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important;
  }

  #secureEditModal .secure-modal-footer {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    background: #14110a !important;
  }

  #secureEditModal .secure-modal-footer .btn {
    width: 100% !important;
    min-width: 0 !important;
    padding: 8px 6px !important;
    justify-content: center !important;
    font-size: 11px !important;
  }

  #secureEditModal #secureEditDeleteBtn:not([style*="display: none"]) {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 932px) and (max-height: 480px) and (min-aspect-ratio: 13/9) {
  #page-secret-vault.vault-terminal {
    padding: 10px 12px 18px !important;
  }

  .vault-terminal__header {
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
  }

  .vault-terminal__header-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .vault-terminal__title {
    font-size: 18px !important;
  }

  .vault-terminal__subtitle {
    margin-top: 3px !important;
  }

  .vault-terminal__panic {
    width: auto !important;
    min-height: 44px !important;
    padding: 8px 12px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  .vault-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding-bottom: 10px !important;
    margin-bottom: 12px !important;
  }

  .vault-tab {
    min-height: 44px !important;
    justify-content: center !important;
    padding: 8px 6px !important;
    font-size: 10px !important;
    text-align: center !important;
  }

  .vault-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    padding: 10px !important;
    margin-bottom: 12px !important;
  }

  .vault-metric {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  .vault-metric__value {
    text-align: left !important;
    font-size: 14px !important;
  }
}

/* Hide header in vault on mobile */
body.black-market-theme .header {
  display: none !important;
}

/* Chrome print preview can expose a narrow viewport; keep this after every responsive rule. */
@media print {
  .print-container,
  .print-container.print-container--rarecut {
    width: 186mm !important;
    min-width: 0 !important;
    max-width: 186mm !important;
    overflow: visible !important;
    transform: none !important;
  }

  .print-container .print-page {
    width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
  }

  .print-container .print-header-rarecut,
  .print-container .print-meta-rarecut,
  .print-container .print-footer-rarecut {
    display: flex !important;
    flex-wrap: nowrap !important;
  }

  .print-container .print-items-table-rarecut {
    display: table !important;
    width: 100% !important;
    max-width: none !important;
    table-layout: fixed !important;
  }
}

@media screen and (max-width: 1100px) {
  #page-timeline {
    width: 100% !important;
    max-width: none !important;
  }

  .timeline-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(150px, 190px);
  }

  .timeline-stream {
    width: 100%;
    max-width: none;
  }

  .timeline-toolbar__count {
    grid-column: 1 / -1;
    padding: 0 3px 2px;
  }

  .timeline-entry__delete { opacity: .65; }
}

@media screen and (max-width: 700px) {
  .timeline-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
    margin-bottom: 14px;
  }

  .timeline-header .section-header__desc {
    max-width: 260px;
    margin-top: 4px;
    font-size: 10px;
    line-height: 1.35;
  }

  .timeline-header > .btn {
    width: auto;
    min-height: 40px;
    padding-inline: 12px;
  }

  .timeline-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px;
  }

  .timeline-toolbar select { width: 100%; }
  .timeline-toolbar__count { grid-column: auto; padding: 1px 4px 3px; }
  .timeline-stream {
    width: 100%;
    border-radius: 12px;
  }

  .timeline-stream::before { left: 29px; top: 48px; }
  .timeline-day { padding: 10px 12px 7px; }
  .timeline-entry {
    grid-template-columns: 32px minmax(0, 1fr) 30px;
    gap: 9px;
    min-height: 78px;
    padding: 12px 10px 12px 12px;
  }
  .timeline-entry__marker { width: 30px; height: 30px; }
  .timeline-entry__marker .material-symbols-outlined { font-size: 16px; }
  .timeline-entry__meta { gap: 5px; }
  .timeline-entry__meta time { flex-basis: auto; }
  .timeline-entry__content h3 { margin-top: 5px; font-size: 12px; }
  .timeline-entry__content p { font-size: 10px; overflow-wrap: anywhere; }
  .timeline-entry__actor { font-size: 9px; }
  .timeline-entry__delete { width: 44px; height: 44px; }
  .timeline-linked { display: none; }
  .timeline-delete-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .timeline-delete-actions .btn { width: 100%; }

  .modal.timeline-event-drawer {
    width: min(100%, calc(100vw - 24px)) !important;
    max-width: min(100%, calc(100vw - 24px)) !important;
  }

  .timeline-event-drawer > .modal__header {
    min-height: 78px;
    padding: max(12px, env(safe-area-inset-top)) 14px 11px !important;
  }

  .timeline-event-drawer__icon {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .timeline-event-form { min-height: 0; }
  .timeline-event-form__body { padding: 18px 14px; }
  .timeline-event-field textarea { min-height: 150px; font-size: 16px; }
  .timeline-event-form__footer {
    display: grid;
    grid-template-columns: minmax(96px, .7fr) minmax(150px, 1.3fr);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  }
  .timeline-event-form__footer .btn { width: 100%; min-height: 46px; justify-content: center; }
}

@media screen and (max-width: 480px) {
  .timeline-header .section-header__desc { display: none; }
  .timeline-header > .btn .material-symbols-outlined { font-size: 17px; }
  .timeline-source { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media screen and (max-width: 700px) {
  .inventory-view-toolbar {
    margin-bottom: 10px;
    padding: 10px 12px;
  }

  .inventory-pagination {
    position: sticky;
    bottom: calc(8px + env(safe-area-inset-bottom));
    z-index: 8;
    gap: 8px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--outline-strong);
    border-radius: var(--radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .inventory-pagination .btn {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding-inline: 8px;
  }

  .inventory-pagination > span {
    min-width: 74px;
    font-size: 12px;
  }
}

/* ============================================
   Mobile Modal Action Bars
   Keep every ordinary menu footer compact and
   prevent the tablet flex-basis from becoming
   a 140px-tall button when actions are stacked.
   ============================================ */
@media screen and (max-width: 768px) {
  .modal .form-actions:not(.inventory-profile__actions):not(.invoice-designer__actions),
  .modal .modal__footer:not(.timeline-delete-actions) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 0 !important;
    padding: 12px 16px 12px !important;
  }

  .modal .form-actions:has(> .btn:only-child),
  .modal .modal__footer:has(> .btn:only-child) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .modal .form-actions .btn,
  .modal .modal__footer .btn {
    flex: 0 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 44px !important;
    max-height: none !important;
    padding: 10px 12px !important;
    justify-content: center !important;
    gap: 5px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .inventory-identifier-card__button,
  #inventoryProfileModal .inventory-profile__actions .btn {
    max-height: none !important;
    min-height: 44px !important;
  }

  .modal .form-actions .btn--primary,
  .modal .modal__footer .btn--primary {
    border-radius: 999px !important;
  }

  .modal .form-actions .material-symbols-outlined,
  .modal .modal__footer .material-symbols-outlined {
    flex: 0 0 auto !important;
    font-size: 17px !important;
  }

  .modal .form-actions .btn--danger:nth-child(3),
  .modal .modal__footer .btn--danger:nth-child(3) {
    grid-column: 1 / -1 !important;
  }

  /* These screens already have deliberate three-button and task-specific layouts. */
  #inventoryProfileModal .inventory-profile__actions .btn {
    max-height: none !important;
  }

  #secureEditModal .secure-modal-footer .btn,
  .timeline-delete-actions .btn {
    max-height: none !important;
  }
}

/* CaratOS phase hubs — touch-first inventory, trade, and command search.
   Matches the 768px phone/tablet split (see the inventory/label/trade
   header-actions note above): these hub tabs and toolbars used to stack
   at 900px, well before the rest of the shell goes vertical. */
@media (max-width: 768px) {
  .inventory-hub-tabs,
  .trade-hub-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 6px;
    padding: 6px;
    margin-bottom: 12px;
  }

  .inventory-hub-tabs .tab,
  .trade-hub-tabs .tab {
    justify-content: center;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 13px;
  }

  .label-prep-toolbar,
  .trade-challan-toolbar {
    flex-direction: column;
    padding: 14px;
  }

  .label-prep-toolbar__actions,
  .trade-challan-toolbar__actions {
    width: 100%;
    align-items: stretch;
  }

  .label-prep-filters .btn,
  .trade-challan-filters .btn {
    min-height: 40px;
  }

  .label-prep-row-actions,
  .trade-row-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
  }

  .label-prep-row-actions .btn--icon,
  .trade-row-actions .btn--icon {
    min-width: 44px;
    min-height: 44px;
  }

  .trade-lines-table {
    min-width: 680px;
  }

  .trade-section-head {
    flex-direction: column;
    align-items: stretch;
  }

  .trade-section-head .btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  .command-palette-modal {
    padding: max(12px, env(safe-area-inset-top)) 12px 12px !important;
    align-items: stretch !important;
  }

  .command-palette {
    width: 100% !important;
    max-height: calc(100dvh - 24px);
    display: flex;
    flex-direction: column;
  }

  .command-palette__results {
    max-height: none;
    flex: 1 1 auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .command-palette__item {
    min-height: 44px;
  }

  #labelPrepModal > .modal.modal--structured,
  #labelPrepHistoryModal > .modal.modal--structured,
  #challanModal > .modal.modal--structured {
    --modal-structured-width: min(100%, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
  }

  #challanModal .trade-challan-mode-tabs,
  #labelPrepModal .label-prep-mode-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .label-prep-mode-tabs .tab,
  .trade-challan-mode-tabs .tab {
    justify-content: center;
    min-height: 44px;
  }

  .label-prep-stats.stats-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .label-prep-stats.stats-grid--4 {
    grid-template-columns: 1fr;
  }

  .documents-hub-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 6px;
  }

  .documents-hub-tabs .tab {
    justify-content: center;
    min-height: 44px;
  }

  #documentsReturnsHeaderActions,
  #documentsPurchasesHeaderActions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  #documentsReturnsHeaderActions > .btn,
  #documentsPurchasesHeaderActions > .btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  #retailVoucherModal > .modal.modal--structured {
    --modal-structured-width: min(100%, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
  }

  .retail-stats.stats-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Final deep-adapt precedence layer. */
@media (max-width: 480px) {
  :root { --header-height: auto; }
  .header {
    grid-template-columns: minmax(0, 1fr) 44px 44px 44px !important;
    grid-template-areas:
      "brand search settings avatar"
      "workspace workspace workspace workspace" !important;
    gap: 10px !important;
    padding: calc(8px + var(--safe-area-top)) calc(12px + var(--safe-area-right)) 10px calc(12px + var(--safe-area-left)) !important;
  }
  .header__icon-btn,
  .header__avatar,
  .mobile-menu-toggle {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }
  #businessTypeToggleDrawer .commercial-toggle__btn {
    min-height: 44px !important;
  }
  .main {
    padding-left: calc(12px + env(safe-area-inset-left, 0px)) !important;
    padding-right: calc(12px + env(safe-area-inset-right, 0px)) !important;
  }
  .section-header__row,
  .section-header__actions { align-items: stretch !important; }
  .section-header__actions > .btn,
  .section-header__actions > button { flex: 1 1 140px !important; min-height: 44px !important; justify-content: center !important; }
  .enterprise-hub-tabs { grid-template-columns: 1fr !important; }
}

@media (max-width: 768px) {
  .enterprise-hub-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 6px;
  }

  .enterprise-hub-tabs .tab {
    justify-content: center;
    min-height: 44px;
    font-size: 13px;
  }

  #enterpriseGirviHeaderActions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  #enterpriseGirviHeaderActions > .btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  #goldLoanModal > .modal.modal--structured {
    --modal-structured-width: min(100%, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
  }
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  :root {
    --mobile-header-stack: 72px;
    --mobile-shell-top: calc(var(--safe-area-top) + var(--mobile-header-stack));
  }

  .header {
    position: fixed !important;
    top: 0 !important;
    padding-top: calc(6px + var(--safe-area-top)) !important;
    padding-left: calc(10px + var(--safe-area-left)) !important;
    padding-right: calc(10px + var(--safe-area-right)) !important;
  }

  #businessTypeToggleHeader {
    display: none !important;
  }

  .main,
  .main.main--sidebar-collapsed {
    padding-top: calc(var(--mobile-shell-top) + 10px) !important;
  }

  .modal-overlay:not(#labelDesignerModal):not(#salesModeModal) {
    align-items: flex-end !important;
    padding: 0 !important;
    overflow-y: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .pricing-grid[aria-busy="true"] .pricing-card__value,
  #vaultPinOverlay,
  .vault-terminal__panic,
  .crm-calendar-event {
    animation: none !important;
  }
  .vault-terminal__panic,
  .crm-calendar-event,
  .shopify-connect__statuses .chip {
    transition: none !important;
  }
}

/* Final modal layout + polish contract — wins over legacy sticky-header experiments.
   Geometry (flex-end / full-bleed) is owned by the phone sheet contract. */
@media (max-width: 768px) {
  .modal-overlay .modal,
  .modal-overlay > .modal {
    margin: 0 !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  .modal--structured > .modal__header,
  .modal.settings-dialog > .modal__header,
  .modal.timeline-event-drawer > .modal__header {
    position: relative !important;
    top: auto !important;
    margin: 0 !important;
  }

  .modal .form-group:last-child {
    margin-bottom: 0 !important;
  }

  .modal .form-actions .btn,
  .modal .modal__footer .btn,
  .inventory-profile__actions .btn {
    min-height: 44px !important;
  }
}

/* Final mobile shell contract — iOS Safari / standalone PWA safe areas */
@media (max-width: 1100px) {
  .mobile-menu-toggle {
    position: relative !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .header__brand {
    align-items: center !important;
  }

  html[data-app-booting="1"] .header,
  html[data-app-booting="1"] .sidebar,
  html[data-app-booting="1"] .main {
    pointer-events: none !important;
  }
}

@media (display-mode: standalone) and (max-width: 1100px) {
  .header {
    padding-top: calc(8px + var(--safe-area-top)) !important;
  }
}

/* ── Phone sheet contract (no liquid glass) ───────────────────────────
   Capability-first: bottom sheets + grabbers + opaque scrim on ≤768px.
   Sales Mode stays fullscreen. Desktop overlays unchanged. */
.sheet-handle {
  display: none;
  width: 40px;
  height: 4px;
  margin: 10px auto 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--on-surface-variant) 55%, transparent);
  flex: 0 0 auto;
}

@media (max-width: 768px) {
  html[data-pointer="coarse"] .sheet-handle,
  .sheet-handle { display: block; }

  #salesModeModal .sheet-handle {
    display: none !important;
  }

  .modal-overlay:not(#labelDesignerModal):not(#salesModeModal):not(#commandPaletteModal),
  .modal-overlay.modal-overlay--active:not(#labelDesignerModal):not(#salesModeModal):not(#commandPaletteModal) {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
    background: rgba(12, 14, 16, 0.58) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: hidden !important;
  }

  .modal-overlay:not(#labelDesignerModal):not(#salesModeModal):not(#commandPaletteModal) > .modal,
  .modal-overlay:not(#labelDesignerModal):not(#salesModeModal):not(#commandPaletteModal) > .modal.modal--structured {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    max-height: min(92dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 8px)) !important;
    border-radius: 22px 22px 0 0 !important;
    border-bottom: 0 !important;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18) !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translate3d(0, var(--sheet-drag, 0px), 0);
    transition: transform 0.18s var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1));
  }

  .modal-overlay:not(#labelDesignerModal):not(#salesModeModal) > .modal.is-dragging,
  .crm-drawer.is-dragging {
    transition: none !important;
    will-change: transform;
  }

  .crm-drawer {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: min(92dvh, 100dvh) !important;
    max-height: min(92dvh, 100dvh) !important;
    border-radius: 22px 22px 0 0 !important;
    border-left: 0 !important;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18) !important;
    transform: translate3d(0, 102%, 0) !important;
    transition: transform 0.2s var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1)) !important;
  }

  .crm-drawer.crm-drawer--open {
    transform: translate3d(0, var(--sheet-drag, 0px), 0) !important;
  }

  .crm-drawer__header {
    padding-top: 4px !important;
  }

  .section-header__row,
  .section-header__row > :last-child:is(div),
  :where(.inventory-header-actions,.crm-header-actions,.invoice-header-actions,.filters-row) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
  }

  #salesModeModal .sm-qty-stepper button,
  #salesModeModal .sm-payment-close {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  #salesModeModal .sm-device-chip,
  #salesModeModal .sm-cart-card__actions button {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    font-size: 16px !important;
  }

  body.modal-open,
  body.crm-drawer-open,
  body.sidebar-open {
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: none;
  }

  .page-section {
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
  }

  body:not(.mkt):not(.auth-page) .btn {
    font-size: 14px !important;
  }

  body:not(.mkt):not(.auth-page) .btn--primary {
    font-size: 15px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    border-color: var(--outline) !important;
  }

  /* Soft elevation for phone operational surfaces (anti-brutalist on small screens). */
  body:not(.mkt):not(.auth-page) .glass-panel,
  body:not(.mkt):not(.auth-page) .glass-panel--elevated,
  body:not(.mkt):not(.auth-page) .pricing-card,
  body:not(.mkt):not(.auth-page) .stat-card,
  body:not(.mkt):not(.auth-page) .inventory-card {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
    border-color: var(--outline) !important;
  }

  .inventory-hub-tabs,
  .trade-hub-tabs {
    border: 1px solid var(--outline) !important;
    border-radius: 14px !important;
    background: var(--surface-container-low) !important;
    box-shadow: none !important;
    padding: 4px !important;
  }

  .inventory-hub-tabs .tab,
  .trade-hub-tabs .tab {
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 10px !important;
  }

  .inventory-hub-tabs .tab.tab--active,
  .trade-hub-tabs .tab.tab--active {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
  }

  .inventory-actions-more__summary,
  body:not(.mkt):not(.auth-page) .btn--secondary {
    box-shadow: none !important;
  }

  .inventory-header-actions > .btn,
  .inventory-header-actions .inventory-actions-more__summary {
    min-height: 48px !important;
    justify-content: center !important;
  }
}

/* ── Phone primary bottom nav + desk bullion layout (layout only) ── */
@media (max-width: 768px) {
  :root {
    --mobile-bottom-nav-height: 56px;
  }

  .mobile-bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 210;
    min-height: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px));
    margin: 0;
    border-top: 1px solid var(--outline);
    background: var(--surface);
    gap: 2px;
  }

  .mobile-bottom-nav[hidden] {
    display: none !important;
  }

  .mobile-bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 48px;
    min-width: 0;
    padding: 4px 2px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--on-surface-variant);
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-bottom-nav__item .material-symbols-outlined {
    font-size: 22px;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  }

  .mobile-bottom-nav__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.1;
  }

  .mobile-bottom-nav__item.is-active {
    color: var(--on-surface);
    background: var(--surface-container-low);
  }

  .mobile-bottom-nav__item.is-active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  }

  .mobile-bottom-nav__item:focus-visible {
    outline: 2px solid var(--focus-ring, var(--primary));
    outline-offset: 2px;
  }

  body.modal-open .mobile-bottom-nav,
  body.crm-drawer-open .mobile-bottom-nav,
  body.sidebar-open .mobile-bottom-nav,
  body.vault-chamber-active .mobile-bottom-nav,
  body.black-market-theme .mobile-bottom-nav,
  body:has(.copilot-panel--open) .mobile-bottom-nav {
    visibility: hidden;
    pointer-events: none;
  }

  /* Desk: live bullion leads; other purities disclose.
     MUST be scoped to the active section — bare `#page-dashboard { display:flex }`
     overrides the HTML `hidden` attribute and stacks Desk under every other page. */
  #page-dashboard.page-section--active:not([hidden]) {
    display: flex;
    flex-direction: column;
  }

  #page-dashboard > .dashboard-context-rail { order: 0; }
  #page-dashboard > .dashboard-workspace-nag { order: 1; }
  #page-dashboard > .section-header { order: 2; }
  #page-dashboard > #dashboardMarketRates { order: 3; }
  #page-dashboard > #todaysRateWidget { order: 4; }
  #page-dashboard > #deskGlanceStrip { order: 5; }
  #page-dashboard > #dashQuickStats { order: 6; }
  #page-dashboard > .dashboard-activity-panel,
  #page-dashboard > *:not(.dashboard-context-rail):not(.dashboard-workspace-nag):not(.section-header):not(#dashboardMarketRates):not(#todaysRateWidget):not(#deskGlanceStrip):not(#dashQuickStats) {
    order: 7;
  }

  .desk-glance {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px !important;
    margin-bottom: 12px;
  }

  .desk-glance[hidden] {
    display: none !important;
  }

  .desk-glance__item {
    display: grid;
    gap: 4px;
    min-height: 56px;
    padding: 10px 12px;
    border: 1px solid var(--outline);
    border-radius: 10px;
    background: var(--surface-container-low);
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
  }

  .desk-glance__value {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
  }

  .phone-coach {
    position: fixed;
    inset: 0;
    z-index: 240;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px 16px calc(var(--mobile-bottom-nav-height, 56px) + 24px + env(safe-area-inset-bottom, 0px));
    background: rgba(15, 15, 15, 0.42);
  }

  .phone-coach[hidden] {
    display: none !important;
  }

  .phone-coach__card {
    width: min(100%, 420px);
    display: grid;
    gap: 10px;
    padding: 16px !important;
  }

  .phone-coach__copy {
    margin: 0;
    color: var(--on-surface-variant);
    font-size: 14px;
    line-height: 1.45;
  }

  .phone-coach__card .btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  #page-dashboard .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #page-dashboard .pricing-grid > .pricing-card:nth-child(3) {
    grid-column: 1 / -1;
  }

  #page-dashboard .pricing-grid__more {
    grid-column: 1 / -1;
    border: 1px solid var(--outline);
    border-radius: 10px;
    background: var(--surface-container-lowest, var(--surface));
    overflow: hidden;
  }

  #page-dashboard .pricing-grid__more-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
    padding: 10px 12px;
    list-style: none;
  }

  #page-dashboard .pricing-grid__more-summary .pricing-grid__row-label {
    grid-column: auto;
    padding: 0;
    margin: 0;
  }

  #page-dashboard .pricing-grid__more-hint {
    display: inline;
    margin-right: auto;
    margin-left: 8px;
  }

  #page-dashboard .pricing-grid__more-summary::after {
    content: "expand_more";
    flex: 0 0 auto;
    font-family: "Material Symbols Outlined", sans-serif;
    font-size: 22px;
    line-height: 1;
    color: var(--on-surface-variant);
    transition: transform 0.15s var(--ease-out, ease-out);
  }

  #page-dashboard .pricing-grid__more[open] > .pricing-grid__more-summary::after {
    transform: rotate(180deg);
  }

  #page-dashboard .pricing-grid__more-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 12px 12px;
  }

  #page-dashboard .dashboard-header-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  #page-dashboard .dashboard-header-actions #salesModeDashboardBtn {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  #page-dashboard .dashboard-header-actions #setTodaysRateBtn {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  #page-dashboard .dashboard-header-actions #refreshPricesBtn {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  /* More invoicing / More tools: readable as disclosures */
  .sidebar__more > summary {
    min-height: 44px !important;
    border: 1px solid var(--outline) !important;
    background: var(--surface-container-low) !important;
    border-radius: 10px !important;
  }

  .sidebar__more > summary::after {
    opacity: 1 !important;
    font-size: 22px !important;
  }

  .sidebar__more[open] > summary {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  .sidebar__more-panel {
    margin: 0 0 8px !important;
    padding: 6px 4px 6px 8px !important;
    border: 1px solid var(--outline);
    border-top: 0;
    border-radius: 0 0 10px 10px;
    background: var(--surface);
  }

  .sidebar__more-panel .sidebar__link {
    min-height: 44px !important;
    padding-left: 12px !important;
  }
}

@media (min-width: 769px) {
  .mobile-bottom-nav,
  .phone-coach,
  #deskGlanceStrip {
    display: none !important;
  }
}