/* ============================================================================
   mobile-polish.css — mobile-first refinement layer (presentation only).
   Loaded LAST. No markup, PHP or JS changes depend on it; delete the <link>
   to revert. Goals: readable type, 44px+ touch targets, no horizontal page
   overflow, scrollable tables, calm business palette on top of tokens.css.
   ========================================================================= */

:root{
  --mp-radius:16px;
  --mp-radius-sm:12px;
  --mp-shadow:0 1px 2px rgba(16,24,40,.06),0 6px 18px rgba(16,24,40,.07);
  --mp-shadow-lg:0 12px 32px rgba(7,17,31,.16);
  --mp-focus:0 0 0 3px rgba(49,93,126,.28);
  --mp-tap:44px;
}

/* ── Global, all widths ─────────────────────────────────────────────────── */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,video,canvas,svg{max-width:100%;height:auto}
.leaflet-container img{max-width:none;height:auto}
:where(button,a,input,select,textarea,summary):focus-visible{outline:none;box-shadow:var(--mp-focus)}
:where(button,[role=button],a.pro-action,.mobile-nav-btn,.mobile-more-item){-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:where(button,.pro-action,.mobile-more-item,.mobile-nav-btn){transition:transform .12s ease,background-color .15s ease,box-shadow .15s ease}
:where(button,.pro-action,.mobile-more-item,.mobile-nav-btn):active{transform:scale(.97)}

/* Generic table wrappers: never break the page width */
.device-table-wrap,.list-container,.table-wrap,.table-responsive{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ── Phones ─────────────────────────────────────────────────────────────── */
@media (max-width:640px){
  html,body{overflow-x:hidden;max-width:100%}
  body{font-size:15px;line-height:1.5;color:var(--ink-2,#334155)}

  /* Containers & cards: consistent rhythm, soft elevation */
  .container{padding-left:max(12px,env(safe-area-inset-left))!important;padding-right:max(12px,env(safe-area-inset-right))!important}
  .input-group,.list-container,.device-table-wrap,.product-card,.section>.card,.card{
    border-radius:var(--mp-radius)!important;box-shadow:var(--mp-shadow);border:1px solid var(--line,#e2e8f0)}

  /* Header: sticky glass bar so the brand stays visible while scrolling */
  .header-sticky-wrapper{position:sticky;top:max(6px,env(safe-area-inset-top))!important;z-index:1500}
  .header-bar{box-shadow:var(--mp-shadow-lg);backdrop-filter:saturate(1.4) blur(10px)}

  /* Hero: readable sizes (legacy 8–10px text was too small on phones) */
  .pro-hero{border-radius:20px}
  .pro-hero h2{font-size:clamp(22px,6.4vw,27px);letter-spacing:-.02em;line-height:1.12}
  .pro-hero p{font-size:13px;line-height:1.45}
  .pro-eyebrow{font-size:11px}
  .pro-live-pill{font-size:11px;padding:6px 10px}

  /* KPI strip: horizontal snap carousel, larger labels */
  .pro-kpi{flex:0 0 140px;min-height:92px}
  .pro-kpi-label{font-size:11.5px;line-height:1.3}
  .pro-kpi-value{font-size:24px;font-variant-numeric:tabular-nums}

  /* Quick actions: 2-col grid of big, tappable tiles */
  .pro-quick-actions{gap:10px}
  .pro-action{min-height:64px;font-size:12.5px;border-radius:var(--mp-radius);box-shadow:var(--mp-shadow)}

  /* Form controls: 16px prevents iOS zoom-on-focus; 48px tall for thumbs */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=file]),
  select,textarea{font-size:16px!important;min-height:48px;border-radius:var(--mp-radius-sm)}
  textarea{min-height:96px}
  input[type=checkbox],input[type=radio]{width:22px;height:22px}
  button,.btn,.small-btn,.mini-btn,input[type=submit],input[type=button]{min-height:var(--mp-tap)}
  .close-x,.mobile-more-close{min-width:var(--mp-tap);min-height:var(--mp-tap)}
  #global-smart-search-panel input{font-size:16px}

  /* Tables: keep columns intact, scroll horizontally inside their card */
  table{max-width:100%}
  .device-table,.service-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;font-size:13px}
  .device-table th,.device-table td,.service-table th,.service-table td{padding:10px 12px}
  .device-table thead th,.service-table thead th{position:sticky;top:0;z-index:1}

  /* Section titles */
  .section-title,.section h2,.section h3{letter-spacing:-.01em;line-height:1.2}

  /* Bottom nav: bigger labels, safe-area aware, clear active state */
  .mobile-bottom-nav{left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right))}
  .mobile-nav-btn{min-height:52px;font-size:10.5px;letter-spacing:.01em}
  .mobile-nav-btn.active{box-shadow:0 2px 8px rgba(19,50,79,.12)}

  /* "More" sheet: grabber handle + larger tiles */
  .mobile-more-sheet{position:relative;padding-top:22px}
  .mobile-more-sheet::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:var(--line-strong,#cbd5e1)}
  .mobile-more-item{min-height:84px;font-size:11.5px;box-shadow:var(--mp-shadow)}

  /* Modals: full-height sheet feel */
  .service-modal{max-height:calc(100dvh - 16px);border-radius:22px}
  .service-modal-head{padding:14px 16px}

  /* Login */
  .login-input{font-size:16px!important}
  .login-btn-submit{min-height:52px;font-size:16px;border-radius:var(--mp-radius-sm)}
}

/* ── Small phones (≤ 360px) ─────────────────────────────────────────────── */
@media (max-width:360px){
  .pro-quick-actions{grid-template-columns:1fr 1fr!important;gap:8px}
  .mobile-more-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mobile-nav-btn{font-size:9.5px}
}