/* V198 — 10-inch and below use mobile UI.
   Applied by CSS width, because browsers expose CSS pixels rather than physical inches.
   Target: <=1100px viewport width, covering common 10-inch tablets/laptops. */

@media (max-width: 1100px) {
  /* Desktop/tablet blocks that only appear from md upward should stay hidden. */
  .hidden.md\:block,
  .hidden.md\:flex,
  .hidden.md\:grid,
  .hidden.md\:table,
  .hidden.lg\:block,
  .hidden.lg\:flex,
  .hidden.lg\:grid,
  .hidden.lg\:table {
    display: none !important;
  }

  /* Restore mobile variants that Tailwind hides at md/lg. */
  .flex.md\:hidden,
  .flex.lg\:hidden {
    display: flex !important;
  }

  .grid.md\:hidden,
  .grid.lg\:hidden {
    display: grid !important;
  }

  .block.md\:hidden,
  .block.lg\:hidden {
    display: block !important;
  }

  .inline-flex.md\:hidden,
  .inline-flex.lg\:hidden {
    display: inline-flex !important;
  }

  .md\:hidden:not(.flex):not(.grid):not(.inline-flex),
  .lg\:hidden:not(.flex):not(.grid):not(.inline-flex) {
    display: block !important;
  }

  /* App shell behaves like mobile: avoid page-level horizontal overflow. */
  html, body, #root {
    max-width: 100%;
    overflow-x: hidden !important;
  }

  main, section, article, .ledger-cell {
    min-width: 0 !important;
    max-width: 100%;
  }

  /* Mobile-friendly spacing on 10-inch and below. */
  .ledger-cell {
    border-radius: 9px;
  }

  .ledger-cell.p-4,
  .ledger-cell.lg\:p-5 {
    padding: 13px !important;
  }

  /* Data tables should use their existing mobile/card layouts.
     Any remaining desktop table is scrollable rather than squeezed. */
  .overflow-x-auto,
  .responsive-report-table {
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Forms/actions stack more naturally at this width. */
  .flex.flex-col.sm\:flex-row,
  .flex.flex-col-reverse.sm\:flex-row {
    gap: 8px;
  }

  /* Dialogs use mobile viewport behavior. */
  [data-slot="dialog-content"],
  [data-slot="alert-dialog-content"] {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(var(--v174-app-height, 100dvh) - 16px) !important;
  }

  .order-dialog-content {
    width: 100vw !important;
    max-width: 100vw !important;
    height: var(--v174-app-height, 100dvh) !important;
    max-height: var(--v174-app-height, 100dvh) !important;
    border-radius: 0 !important;
  }

  /* Charts/cards remain inside viewport. */
  .recharts-responsive-container,
  .recharts-wrapper,
  .recharts-surface {
    max-width: 100% !important;
  }
}

/* Common 10-inch landscape widths (1024–1100px):
   make sure mobile navigation and mobile-only cards win over md/lg rules. */
@media (min-width: 768px) and (max-width: 1100px) {
  .md\:hidden,
  .lg\:hidden {
    visibility: visible !important;
  }

  .hidden.md\:block,
  .hidden.lg\:block {
    visibility: hidden !important;
  }
}