/* MyStationHub Ver021 — iPhone first customer and Master Admin surfaces.
   Avoid iOS Safari automatic focus zoom (16px minimum on text inputs).
   Do NOT disable user zoom/pinch, override meta viewport, or shrink text. */

@media (max-width: 1120px) {
  html, body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: clip;
  }
  body { margin: 0; min-height: 100dvh; }
  *, *::before, *::after { box-sizing: border-box; }
  /* Global: login, signup, password reset, station editors, admin modal,
     search, approval, billing and support forms all need >=16px. Exclude
     native checkbox/radio/range/color/file/buttons to preserve their UI. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
  select, textarea, [contenteditable="true"] {
    font-size: 16px !important;
    line-height: 1.4 !important;
    min-width: 0;
    max-width: 100%;
    border-radius: 12px;
  }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]), select {
    min-height: 46px;
  }
  textarea { min-height: 80px; }
  input[type="checkbox"], input[type="radio"] { flex-shrink: 0; }
  :is(input, textarea, select):focus-visible {
    outline: 2px solid #528afa;
    outline-offset: 1px;
  }
  /* No global touch-action override: manual pinch-to-zoom stays accessible. */
  :is(button, a, summary, [role="button"]) { -webkit-tap-highlight-color: transparent; }
  :is(button, a, summary, [role="button"]):focus-visible { outline: 3px solid #81a9f8; outline-offset: 2px; }
  :is(button, .button, .btn):not(.bell-button):not(.menu-button):not(.account-menu-toggle):not(.msh-mobile-toggle):not(.msh-public-toggle) {
    min-height: 44px;
  }
  :is(img, svg, video, canvas) { max-width: 100%; }
  :is(.form-group, .formfield, .field, .form-grid, .formgrid,
      .card, .panel, .msh-billing-customer, .bill-account, .bill-box,
      .login-left, .login-form-wrap, .login-grid, .login-box,
      #msh-command, #msh-command .msh-cmd-card,
      .main, .wrap, .top-row, .row) { min-width: 0; max-width: 100%; }
  :is(.form-grid, .formgrid, #msh-command .msh-cmd-form-grid) > * { min-width: 0; }
  :is(.table-wrap, .compare-wrap, .bill-history-table, .msh-cmd-table-wrap) {
    max-width: 100%; -webkit-overflow-scrolling: touch;
  }
  :is(.notice, .cardnote, .bill-warning, .error, .result, .sub, .desc, .lead) { overflow-wrap: anywhere; }
  /* A consistent, stable app-style header, not a second navigation bar. */
  :is(.site-header, .customer-header, .msh-admin-billing-page > header, .app > .main > .top) {
    background: #fff;
    box-shadow: 0 2px 12px rgba(26, 52, 93, .035);
  }
  /* Ensure the on-screen keyboard doesn't hide the end of mobile forms. */
  :is(.main, .wrap, .login-grid, .msh-admin-billing-page main) {
    padding-bottom: max(36px, calc(env(safe-area-inset-bottom) + 24px));
  }
}

@media (max-width: 600px) {
  /* Customer sign-in is a compact full-width app form, not a desktop split. */
  .login-grid { display: block !important; width: 100%; min-height: auto !important; }
  .login-left {
    width: 100% !important;
    padding: 24px max(18px, env(safe-area-inset-left)) 28px !important;
    margin: 0 auto;
  }
  .login-left .kicker { letter-spacing: .12em; margin-bottom: 12px; }
  .login-left h1 { font-size: clamp(34px, 9vw, 45px) !important; line-height: 1.05; overflow-wrap: anywhere; }
  .login-left .desc { font-size: 15px; line-height: 1.6; margin-bottom: 22px; }
  .login-form-wrap { width: 100%; max-width: none; }
  .login-form-wrap .form-group { margin: 0 0 19px; }
  .login-form-wrap .form-group label { font-size: 14px; margin-bottom: 8px; }
  .login-form-wrap .form-group input {
    display: block; width: 100%; min-height: 54px;
    padding: 14px 15px;
    border-radius: 13px;
    background: #fff;
  }
  .login-form-wrap .login-help {
    flex-wrap: wrap; gap: 8px 14px; min-width: 0; margin: 16px 0 20px;
  }
  .login-form-wrap button[type="submit"] { width: 100%; min-height: 52px; }
  .login-photo-panel, .login-right { display: none !important; }
  /* Accounts and dashboard: edge-aligned cards with breathing room. */
  body:not(.msh-admin-billing-page) > .main,
  body:not(.msh-admin-billing-page) .dashboard-main {
    width: 100%; padding-left: 16px; padding-right: 16px;
  }
  .main .panel, .main .card, .account-accordion {
    border-radius: 17px;
  }
  #msh-command .msh-cmd-tabstrip { scrollbar-width: none; }
  #msh-command .msh-cmd-tabstrip::-webkit-scrollbar { display: none; }
  /* Master Admin: the existing section ribbon is the mobile app navigation. */
  .app { min-height: 100dvh; overflow-x: clip; }
  .app > .main { min-width: 0; }
  .app > .main > .top {
    position: sticky; top: 0; z-index: 35;
    padding-inline: 15px;
    min-width: 0;
  }
  .app .top-title { min-width: 0; font-size: 16px; }
  .app .top-actions { gap: 7px; flex: 0 0 auto; }
  .app .mobile-bar {
    position: sticky; top: 72px; z-index: 34;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    min-width: 0;
  }
  .app .mobile-bar::-webkit-scrollbar { display: none; }
  .app .mobile-bar a { min-height: 43px; display: inline-flex; align-items: center; }
  .app .wrap { padding: 18px 15px max(52px, calc(env(safe-area-inset-bottom) + 35px)); }
  .app .card { padding: 16px; border-radius: 17px; }
  .app .grid.two, .app .grid.three, .app .form-grid { grid-template-columns: minmax(0, 1fr); }
  .app .field input, .app .field select, .app .field textarea { width: 100%; }
  .app .table-wrap { overflow-x: auto; }
  .app .table { min-width: 620px; }
  .admin-login-panel { width: min(100%, 440px); padding: 22px 17px; }
  .admin-login-overlay { padding-inline: 14px; }
  .admin-login-panel .field input { min-height: 50px; }
  /* Admin approvals and billing remain readable on narrow screens. */
  .msh-admin-billing-page > header {
    padding: 14px 16px;
    gap: 14px;
  }
  .msh-admin-billing-page > header a { font-size: 13px; line-height: 1.3; }
  .msh-admin-billing-page > header a:first-child { max-width: 57%; }
  .msh-admin-billing-page > header a:last-child { text-align: right; }
  .msh-admin-billing-page main { width: 100%; padding: 22px 15px max(50px, env(safe-area-inset-bottom)); }
  .msh-admin-billing-page h1 { font-size: clamp(26px, 7.5vw, 34px); line-height: 1.15; }
  .msh-admin-billing-page .bill-search { display: grid; grid-template-columns: minmax(0, 1fr); }
  .msh-admin-billing-page .bill-search > div { min-width: 0; }
  .msh-admin-billing-page .bill-search button { width: 100%; }
  .msh-admin-billing-page .bill-accounts { grid-template-columns: minmax(0, 1fr); }
  .msh-admin-billing-page .bill-box, .msh-admin-billing-page .bill-account { border-radius: 16px; }
  .msh-admin-billing-page .bill-approval { padding: 14px 12px; }
  .msh-admin-billing-page .bill-checkbox { align-items: flex-start; }
  .msh-admin-billing-page .bill-approval button { width: 100%; }
  .msh-billing-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .msh-billing-actions > * { min-width: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  :is(input, textarea, select) { scroll-behavior: auto; }
}