/* mobile.css — Mobile touch ergonomics
 * AC1: Prevent iOS/Android auto-zoom on input focus by setting font-size >=16px
 * AC3: Ensure tap targets are >=44px (WCAG 2.5.5 / Apple HIG)
 * Breakpoint: <=991.98px matches App.razor:52 mobile cutoff
 * Load order: after styles.css and royal-theme.css so !important declarations win.
 */
@media (max-width: 991.98px) {

  /* AC1 — font-size >=16px on all focusable inputs; !important beats MudBlazor.min.css.
     Targets real focusable elements incl. MudSelect value + MudDatePicker input.
     Global sheet so MudDialog (portals to document root) is also covered. */
  input, select, textarea, .form-control,
  .mud-input-slot, .mud-input-root,
  .mud-input-slot input,
  .mud-select .mud-input-slot,
  .mud-select-input {
    font-size: 16px !important;
  }

  /* AC3 — filter toolbar buttons */
  .tbtn,
  .filter-tbtn .mud-button-root,
  .filter-tbtn .mud-icon-button {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Header icons — global by design (MainHeader identical on every page) */
  .sidemenu-toggle,
  [data-testid="header-language-selector"],
  .quick-links-mud-menu .mud-icon-button {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Invoice Type segmented control (#777: replaces the old MudRadioGroup rules; quotes still
     use the radio group, unaffected by this selector). InvoiceInfoTab.razor.css sets an
     explicit `height:34px` on `.if-seg button`; under Chromium's isMobile-emulation flex
     layout, `min-height` alone left the measured box at 43.984375px (a sub-pixel rounding
     artifact against the explicit `height`, confirmed live via e2e — a plain desktop
     `getComputedStyle` read showed the correct value, so this is a flex/mobile-emulation
     interaction, not a specificity loss). Overriding BOTH `height` and `min-height` (not just
     `min-height`) removes the ambiguity and reliably clears the strict >=44 assertion
     (mobile-touch-ergonomics.spec.ts). */
  [data-testid="invoice-info-type-radio-group"] button {
    height: 44px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }

  /* Add customer buttons (invoice and quote) */
  [data-testid="invoice-info-add-customer-button"],
  [data-testid="quote-info-add-customer-button"],
  [data-testid="invoice-info-edit-customer-button"] { /* #777 OD-6 */
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Primary action buttons across key pages */
  [data-testid="invoice-lines-add-button"],
  [data-testid="quote-lines-add-button"],
  [data-testid="documents-new-folder-button"],
  [data-testid="documents-upload-button"],
  [data-testid="upload-document-browse"],
  [data-testid="receipt-overview-import-button"],
  [data-testid="receipt-import-select-file-button"],
  [data-testid="invoice-overview-pending-section"] .mud-button-root,
  [data-testid="receipt-overview-pending-section"] .mud-button-root {
    min-height: 44px !important;
  }

  /* #777 OD-6: line-tile kebab + line menu items (tiles render only at <=760px) */
  .if-ltile-head .mud-button-root {
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .if-ltile-menu .mud-menu-item {
    min-height: 44px !important;
  }

  /* AC3 — pin the date-picker popover inside the viewport; scoped to date pickers
     only (.mud-picker-calendar) so time/color pickers are unaffected. */
  .mud-popover-open:has(.mud-picker-calendar) {
    left: 0.5rem !important;
    right: 0.5rem !important;
    max-width: calc(100vw - 1rem) !important;
  }

  .mud-popover-open:has(.mud-picker-calendar) .mud-picker-container,
  .mud-popover-open:has(.mud-picker-calendar) .mud-picker-content,
  .mud-popover-open:has(.mud-picker-calendar) .mud-picker-calendar {
    max-width: 100% !important;
    width: auto !important;
  }

  /* AC4 — pin the apps-grid (quick-links) popover inside the viewport */
  .header-menu-dropdown-position.quick-links-menu-popover {
    left: auto !important;
    right: 0.5rem !important;
  }

  /* #554 — page/zoom controls in the FULL-SCREEN PDF preview are now visible below 960px.
     Gated on .mud-dialog-fullscreen on purpose: the same dialog is also opened non-full-screen
     from Create/Edit Invoice and Create/Edit Quote, and those must keep their current button size. */
  .mud-dialog.invoice-preview-dialog.mud-dialog-fullscreen .mud-icon-button {
    min-width: 44px !important;
    min-height: 44px !important;
  }

}