/*
 * SGAS Estimate — Phase 3 mobile usability.
 * All declarations are screen-only and limited to responsive viewports.
 * This file loads AFTER mobile-readability.css; print/PDF CSS and
 * desktop (>900px) rendering remain untouched.
 *
 * Intentionally no changes to search visibility, form order, bill calculations,
 * sticky actions, keyboard event handlers, or table-to-card structure.
 */

/* Drawer and tablet view: preserve the existing toggle/close logic. */
@media screen and (max-width: 900px) {
  body:not(.page-login) > nav {
    height: 100vh !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    padding-bottom: max(18px, env(safe-area-inset-bottom, 0px)) !important;
  }

  body:not(.page-login) > nav a {
    min-height: 48px !important;
  }

  body:not(.page-login) .menu-toggle {
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    top: max(12px, env(safe-area-inset-top, 0px));
    left: max(12px, env(safe-area-inset-left, 0px));
    touch-action: manipulation;
  }

  /* Keep focus visible without changing the keyboard navigation. */
  body:not(.page-login) :is(
    .menu-toggle, .btn, button, a, input, select, textarea
  ):focus-visible {
    outline: 3px solid #d4a844;
    outline-offset: 2px;
  }

  body:not(.page-login) :is(
    .bill-form, .payment-form, .customer-form, .product-form,
    .report-filter, .settings-form
  ) :is(input, select, textarea):focus-visible {
    outline: 0;
    border-color: #26965c;
    box-shadow: 0 0 0 3px rgba(38, 150, 92, .16);
  }

  /* Keyboard-focused controls remain clear of the top hamburger control. */
  body:not(.page-login) :is(
    .customer-field, .payment-customer-field, .product-cell,
    .customer-form p, .product-form p
  ) {
    scroll-margin-top: 82px;
  }

  /* Scrollable tabs retain tap/keyboard navigation and don't overscroll the page. */
  .page-reports .report-tabs,
  .page-settings .settings-tabs {
    overscroll-behavior-x: contain;
    scroll-padding-inline: 12px;
    -webkit-overflow-scrolling: touch;
  }

  /* Keep modal content reachable above the Android keyboard. */
  .page-products .product-edit-dialog {
    max-height: calc(100dvh - 28px);
    overscroll-behavior-y: contain;
  }
}

/* Phones: better text entry, tap targets and legible financial cards. */
@media screen and (max-width: 700px) {
  body:not(.page-login) {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body:not(.page-login) .wrap {
    padding-bottom: max(26px, calc(18px + env(safe-area-inset-bottom, 0px))) !important;
  }

  /* 16px inputs avoid mobile browser focus zoom; do not alter numeric validation.
     Exclude hidden controls, checkboxes, radio buttons and submit buttons. */
  body:not(.page-login) .wrap input:not(
    [type="hidden"], [type="checkbox"], [type="radio"],
    [type="submit"], [type="button"], [type="range"]
  ),
  body:not(.page-login) .wrap select,
  body:not(.page-login) .wrap textarea {
    font-size: 16px !important;
    line-height: 1.35;
  }

  body:not(.page-login) .wrap :is(
    .customer-form, .product-form, .product-edit-form,
    .payment-form, .payment-filters, .bills-filters,
    .report-filter, .settings-form, .ledger-tools, .ledger-selector
  ) :is(input:not([type="hidden"]):not([type="checkbox"]), select) {
    min-height: 44px;
  }

  body:not(.page-login) .wrap :is(
    .customer-form-actions, .product-form-actions, .product-edit-actions,
    .bill-actions, .payment-filters, .bills-filters, .report-filter
  ) :is(.btn, button) {
    min-height: 44px;
    touch-action: manipulation;
  }

  /* Search suggestions remain governed by existing JS and open/hidden states. */
  .page-new_bill :is(.customer-suggestions, .product-cell .suggestions),
  .page-payments .payment-customer-options,
  .page-ledger .ledger-suggestions {
    max-height: min(42vh, 320px);
    max-height: min(42dvh, 320px);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .page-new_bill :is(.customer-suggestions, .product-cell .suggestions) button,
  .page-payments .payment-customer-options button,
  .page-ledger .ledger-suggestions button {
    min-height: 46px;
    touch-action: manipulation;
  }

  /* Readable dashboard / bill metrics even on 360px screens. */
  .page-dashboard .dashboard-stat b,
  .page-bills .bills-stat b,
  .page-payments .payment-stat b,
  .page-customers .customer-summary-card b,
  .page-products .product-mini-stat b,
  .page-reports .report-summary b {
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }

  .page-dashboard .dashboard-quick-actions .btn {
    min-height: 48px;
  }

  /* New bill: preserve mobile order (totals before Save) and native keyboard.
     Only adjust screen spacing; never touch A5 document geometry. */
  .page-new_bill .bill-form {
    max-width: 100%;
  }
  .page-new_bill .bill-top {
    gap: 13px;
  }
  .page-new_bill .customer-field,
  .page-new_bill .customer-search-row,
  .page-new_bill .bill-summary > div {
    min-width: 0;
  }
  .page-new_bill .item-row {
    scroll-margin-block: 86px 28px;
    border-radius: 12px;
  }
  .page-new_bill .item-row :is(
    input.product-search, input.qty, input.rate, input.unit, input.amount
  ) {
    min-height: 43px;
  }
  .page-new_bill .bill-summary {
    gap: 9px;
  }
  .page-new_bill .bill-summary > div {
    padding: 11px;
  }
  .page-new_bill .bill-summary b,
  .page-new_bill .bill-summary input {
    font-variant-numeric: tabular-nums;
  }
  .page-new_bill .bill-actions .btn,
  .page-new_bill .bill-actions .save-bill {
    min-height: 46px;
  }

  /* Bills: preserve card-style rows, allow full customer names and amounts. */
  .page-bills .bills-table tr {
    min-width: 0;
  }
  .page-bills .bills-table td:nth-child(5),
  .page-bills .bills-table td:nth-child(6),
  .page-bills .bills-table td:nth-child(7) {
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
  }
  .page-bills .bills-row-actions .btn {
    min-height: 42px;
    touch-action: manipulation;
  }

  /* Customer/product rows: readable labels without altering mobile grid areas. */
  .page-customers .customer-identity small {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .page-customers .customer-row-actions .btn,
  .page-products .product-edit-btn {
    min-height: 38px;
    touch-action: manipulation;
  }
  .page-products .product-edit-modal-head .product-modal-close {
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
  }
  .page-products .product-edit-form :is(input, select) {
    min-height: 44px;
  }
  .page-products .product-edit-actions :is(.btn, button) {
    min-height: 44px;
  }

  /* Payments: larger high-priority controls, reliable customer list scrolling. */
  .page-payments .payment-customer-picker > input {
    min-height: 46px;
  }
  .page-payments .payment-customer-clear {
    width: 36px;
    height: 36px;
    top: 5px;
    right: 5px;
    touch-action: manipulation;
  }
  .page-payments .payment-save {
    min-height: 46px;
    touch-action: manipulation;
  }
  .page-payments .payment-row-actions .btn,
  .page-payments .payment-pagination .btn {
    min-height: 38px;
    touch-action: manipulation;
  }

  /* Reports: swipe tabs still remain clickable and keyboard-focusable. */
  .page-reports .report-tab {
    min-height: 70px;
    scroll-snap-align: start;
  }
  .page-reports .report-filter :is(.btn, button),
  .page-reports .report-actions .btn {
    min-height: 42px;
  }
  .page-reports .report-table-wrap {
    overscroll-behavior-x: contain;
  }

  /* Full-width searches and focus surfaces must never exceed the phone width. */
  .page-customers .customer-toolbar input,
  .page-products .product-toolbar input,
  .page-whatsapp_reminders .whatsapp-list-toolbar input,
  .page-bills .bills-search input {
    max-width: 100%;
    min-width: 0;
  }
}

/* Very narrow Android phones: do not force three monetary columns to overflow. */
@media screen and (max-width: 380px) {
  .page-bills .bills-table tr {
    column-gap: 5px;
    padding: 10px;
  }
  .page-bills .bills-table td:nth-child(5),
  .page-bills .bills-table td:nth-child(6),
  .page-bills .bills-table td:nth-child(7) {
    padding-inline: 4px;
    font-size: 10px !important;
  }
  .page-dashboard .dashboard-quick-actions .btn {
    padding-inline: 7px;
    gap: 5px;
  }
  .page-customers .customer-row-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

/* No movement effects for visitors who disable animation. */
@media screen and (max-width: 900px) and (prefers-reduced-motion: reduce) {
  body:not(.page-login) .wrap :is(input, select, textarea, .btn, button) {
    transition: none !important;
  }
}