/* HaZix control panel: mobile pass (phones 360-430 px, tablets). Loaded after panel.css.
   Findings and before / after: docs/UX-AUDIT.md, section "Mobile pass". Same rules as the back office (public/css/mobile.css). */

:root { --tap: 44px; }
a, button, input, select, textarea, label, summary, [role="button"], [role="tab"] { touch-action: manipulation; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.sidebar, .menu, .modal-body { overscroll-behavior: contain; }
/* iOS Safari: while the keyboard is open the dialog layer follows the visible area (device.js publishes --vvh / --vvt) */
.backdrop { inset: var(--vvt, 0px) 0 auto 0; height: var(--vvh, 100dvh); }
/* a toolbar child (the wrapper around the status filter) must be allowed to shrink: its 461 px segmented control pushed the whole Clients page 100 px sideways */
.toolbar, .toolbar > * { min-width: 0; }   /* the toolbar too: inside a grid (.stack, Billing) it otherwise keeps the width of that control */

@media (max-width: 900px), (pointer: coarse) {
  /* 16 px: iOS Safari zooms the page when a smaller field takes focus */
  :root:root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
  :root:root select, :root:root textarea { font-size: 16px; }
  :root:root .btn, :root:root .btn.btn-sm, :root:root .icon-btn, :root:root .icon-btn.sm, :root:root .seg, :root:root .search-input, :root:root .sel,
  :root:root .date-in, :root:root .tab, :root:root .menu a, :root:root .menu button { min-height: var(--tap); }
  :root:root .icon-btn, :root:root .icon-btn.sm { min-width: var(--tap); }
  :root:root .user-btn { min-height: var(--tap); min-width: var(--tap); }
  :root:root .side-link { min-height: var(--tap); }
  :root:root :is(input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"],
    input[type="date"], input[type="month"], input:not([type]), select) { min-height: var(--tap); }
  :root:root .seg { min-width: var(--tap); padding-inline: 14px; }
  :root:root .link { padding-block: 12px; margin-block: -12px; display: inline-block; }
  :root:root td .link, :root:root .attn-main .link { padding-block: 12px; margin-block: -12px; }
}

@media (max-width: 900px) {
  .topbar { min-height: 60px; padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); gap: 4px; }
  .sidebar { width: min(300px, 88vw); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .content { padding: 16px max(14px, env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left)); }
  .toasts { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .user-menu .menu { position: fixed; inset-inline: 12px; top: 64px; min-width: 0; width: auto; }
  .tabs { padding-inline: 2px; scroll-snap-type: x proximity; }
  .tab { scroll-snap-align: start; }
}
@media (max-width: 720px) {
  .backdrop { padding: 0; place-items: end stretch; }
  .modal { max-height: 94vh; max-height: min(94dvh, var(--vvh, 100dvh)); }
  .modal-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .modal-foot .btn { flex: 1 1 auto; justify-content: center; min-width: 0; }
  .page-actions .btn, .toolbar .btn { justify-content: center; }
  .toolbar .segmented { max-width: 100%; }
  /* the filter strips scroll sideways inside their own box (with a visible edge), not the page */
  .segmented { -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .seg { scroll-snap-align: start; flex-shrink: 0; }   /* keep each label whole (Arabic ones are longer): the strip scrolls instead */
}
@media (max-width: 340px) { .lang-btn span { display: none; } }
@media (max-width: 900px) and (max-height: 520px) { .topbar { position: static; } }
/* Ctrl+K search: the icon alone in the top bar of a phone; the palette fills the width and the keyboard hints go */
@media (max-width: 900px) {
  .find-btn { min-inline-size: 0; inline-size: var(--tap); block-size: var(--tap); padding: 0; justify-content: center; border-color: transparent; background: transparent; }
  .find-btn .find-label, .find-btn .find-key { display: none; }
  .palette-keys { display: none; }
}
@media (max-width: 720px) {
  .backdrop:has(.modal-palette) { place-items: start stretch; padding-block-start: 0; }
  .modal-palette { max-height: min(94dvh, var(--vvh, 100dvh)); border-start-start-radius: 0; border-start-end-radius: 0; }
  .picker { flex: 1 1 100%; }
  .picker-list { max-inline-size: 100%; inline-size: 100%; }
}