/* HaZix ERP back office: mobile pass (phones 360-430 px, tablets, touch laptops). Loaded last, after every app stylesheet.
   Findings and before / after: docs/UX-AUDIT.md, section "Mobile pass". Logical properties everywhere except safe-area insets (physical by nature).
   `:root:root` raises the specificity just above the per-app rules that set 40 px / 14 px on phones. Desktop (mouse, wide) is untouched
   unless a rule says otherwise: the sticky offsets below only gained the licence-bar height they were missing. */

:root {
  --tap: 44px;                                         /* minimum touch target (Apple HIG, Material: 44 to 48) */
  --stick: calc(var(--lic-h, 0px) + 62px);             /* bottom edge of the sticky top bar: where document headers and form bars stick */
  --bn-h: calc(56px + env(safe-area-inset-bottom, 0px));
}

/* ------------------------------------------------------------ every device */
/* no 300 ms tap delay / double-tap zoom on controls (pinch zoom stays available) */
a, button, input, select, textarea, label, summary, [role="button"], [role="tab"] { touch-action: manipulation; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
@media (pointer: coarse) { html { overscroll-behavior-y: contain; } }   /* Android Chrome: a swipe down in the middle of a form must not reload the page */
/* the sticky Save bar and document header used the phone's top offset (108 px) even on desktop and ignored the licence bar */
.form-bar, .dh-bar { top: var(--stick); }
.doc-page .form-bar { top: calc(var(--stick) + var(--dh-h, 64px) + 6px); }
/* scrolling inside a sheet / drawer / menu never drags the page behind it */
.modal-body, .drawer-body, .sidebar, .menu, .cs-menu, .pal-list, .rep-controls { overscroll-behavior: contain; }
.sidebar nav, .sidebar .side-nav { overscroll-behavior: contain; }
.um-sm { display: none !important; }                  /* phone-only entries of the user menu (theme, language) */
/* 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); }

/* ------------------------------------------------------------ touch devices and phones */
@media (max-width: 900px), (pointer: coarse) {
  /* 16 px: iOS Safari zooms the whole page when a smaller field takes focus. The sizes below are what the app stylesheets used (13 to 14.5 px). */
  :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; }
  /* touch targets */
  :root:root .btn, :root:root .btn.btn-sm, :root:root .icon-btn, :root:root .chip-select, :root:root .search-input,
  :root:root .date-in, :root:root .filters-btn, :root:root .seg, :root:root .multi .multi-add, :root:root .field .multi-add,
  :root:root .att-tool, :root:root .cfg-tab, :root:root .ch-tab, :root:root .acct-step, :root:root .sub-chip, :root:root .lic-btn, :root:root .gsearch, :root:root .cs-btn,
  :root:root .acct-jrow, :root:root .sl-pipe-row, :root:root .inv-type-new, :root:root .off-toggle { min-height: var(--tap); }
  :root:root .icon-btn, :root:root .acct-step, :root:root .lic-x, :root:root .att-tool, :root:root .gsearch, :root:root .cs-btn, :root:root .inv-type-new { min-width: var(--tap); }
  :root:root .co-url { display: inline-block; padding-block: 12px; margin-block: -12px; }
  :root:root .lic-x { width: var(--tap); height: var(--tap); }
  :root:root .lang-btn { min-width: 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[type="time"], input[type="datetime-local"], input:not([type]), select) { min-height: var(--tap); }
  :root:root .side-link, :root:root .side-app, :root:root .sn-item, :root:root .menu a, :root:root .menu button { min-height: var(--tap); }
  :root:root .seg { min-width: var(--tap); }
  /* small controls keep their look and get a bigger invisible hit area */
  .chip-x::after { inset: -14px; }
  .ss-clear::after { content: ""; position: absolute; inset: -10px; }
  :root:root .sb-btn { height: var(--tap); }                      /* the clickable status bar (lead stages, order steps) on a tablet */
  :root:root .sb-step:first-child .sb-btn { border-start-start-radius: 22px; border-end-start-radius: 22px; }
  .crumbs a { padding-block: 12px; margin-block: -12px; }          /* breadcrumb links: a 44 px tap area, the bar does not grow */
  :root:root .acct-fold::after { inset: -11px; }
  :root:root .acct-check { min-height: var(--tap); }
  .switch::before { content: ""; position: absolute; inset: -10px -4px; }
  :root:root .toggle-row { min-height: var(--tap); }
  :root:root .list-body .data-table td a.link, :root:root .card-head a.link, :root:root .page-head a.link, :root:root td a.link { padding-block: 12px; margin-block: -12px; }
  :root:root a.hr-person-name { display: inline-block; padding-block: 14px; margin-block: -14px; }
}

/* ------------------------------------------------------------ phones: shell */
@media (max-width: 900px) {
  .shell, .shell.collapsed { min-height: 100vh; min-height: 100dvh; }
  .sidebar { width: var(--side-w-drawer); height: 100vh; height: 100dvh; padding-bottom: env(safe-area-inset-bottom, 0px); }   /* 100vh is taller than the visible area on iOS: the last menu entries hid under the toolbar */
  .side-foot { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  /* notch / home-indicator safe: the drawer's start edge is the left (right in RTL) edge of the phone, which the notch occupies when it is held sideways */
  .sidebar { padding-top: env(safe-area-inset-top, 0px); padding-inline-start: env(safe-area-inset-left, 0px); }
  :root[dir="rtl"] .sidebar { padding-inline-start: env(safe-area-inset-right, 0px); }
  .sidebar .side-nav { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  /* top bar: 44 px controls, notch-safe, room for the subscription chip next to the kiosk switcher */
  .topbar { min-height: 62px; padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); gap: 2px; }
  :root:root .topbar .gsearch { width: var(--tap); height: var(--tap); }
  .topbar > .sub-chip { flex-shrink: 0; margin-inline: 2px; }          /* the end date is never squeezed down to an icon */
  .topbar .sub-chip .sub-short { overflow: visible; }
  :root:root .user-btn { min-height: var(--tap); min-width: var(--tap); padding: 0; justify-content: center; }
  .user-btn .avatar { width: 38px; height: 38px; }
  /* the section chips scroll away with the page (three sticky bars ate 160 px of a 700 px screen); only the top bar stays */
  .subnav { position: static; padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right)); }
  .content { padding: 16px max(14px, env(safe-area-inset-right)) calc(var(--bn-h) + 24px) max(14px, env(safe-area-inset-left)); }
  .bottomnav { padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px); }
  .toasts { bottom: calc(var(--bn-h) + 12px); }
  /* things that pinned themselves to the bottom of the content now sit above the bottom bar */
  .acct-balbar { bottom: var(--bn-h); }
  .bc-actions { bottom: calc(var(--bn-h) + 8px); }
  .login-screen, .boot { min-height: 100dvh; padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
  .login-card { padding: 26px 22px; }
}
/* the icon rail of tablets (901 to 1180, touch): every entry is a full 44 px target and a long press must not open the browser's link menu (main.js shows the label instead) */
@media (min-width: 901px) and (pointer: coarse) {
  .shell.collapsed .side-link, .shell.collapsed .side-app { min-height: var(--tap); min-width: var(--tap); -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}
/* 360 to 389: menu, subscription chip, kiosk switcher, chat, bell, help and avatar are seven 44 px targets and the chip: the bar's padding and gaps give way before anything is pushed off the screen */
@media (max-width: 389px) {
  .topbar { padding-inline: max(6px, env(safe-area-inset-left)) max(6px, env(safe-area-inset-right)); gap: 0; }
  .topbar > .sub-chip { margin-inline: 0; }
}
/* very narrow phones (320 to 340): the search shortcut gives way, the palette is still on the bottom bar's Apps */
/* (the ? help button joined the bar: menu, search, chip, kiosks, chat, ?, avatar need 389 px at 44 px each; with a kiosk switcher the avatar was pushed off the screen at 375 and 360) */
@media (max-width: 389px) { .gsearch { display: none; } .topbar > .sub-chip { margin-inline-start: auto; } }
/* the help-mode life-ring joined the phone bar too: with the chip AND a kiosk switcher (or on a 320 px phone) the Discuss button gives way, it stays in the Apps menu */
@media (max-width: 440px) { .topbar:has(.cs-wrap:not([hidden])) > .chat-btn { display: none; } }
@media (max-width: 359px) { .topbar > .chat-btn { display: none; } }
@media (max-width: 440px) { .topbar:has(.cs-wrap:not([hidden])) .gsearch { display: none; } .topbar:has(.cs-wrap:not([hidden])) > .sub-chip { margin-inline-start: auto; } }
/* phones, portrait and landscape: theme and language move into the user menu (the top bar had room for six buttons and a chip, not eight) */
@media (max-width: 600px) {
  .topbar > button.icon-btn:not(.menu-btn):not(.guide-btn) { display: none; }   /* the ? help button stays: on a phone it is the only way to the help of the page */
  :root:root .topbar > button.icon-btn.hp-toggle { display: inline-grid; }       /* ...and so does the help-mode life-ring: Help mode is one tap away on a phone */
  .topbar > .crumbs { display: none; }                    /* a clipped "Pro…" next to the menu button helped nobody: the page has its own h1 */
  .topbar > .gsearch { margin-inline-start: auto; }
  .um-sm { display: flex !important; }
  .user-menu .menu { position: fixed; inset-inline: 12px; top: calc(var(--stick) - 6px); min-width: 0; width: auto; max-height: calc(100dvh - var(--stick) - var(--bn-h)); overflow-y: auto; }
  .menu a, .menu button { padding: 10px 12px; }
}
/* landscape phones / keyboard open on Android (the layout viewport shrinks): give the height back to the content */
@media (max-width: 900px) and (max-height: 520px) {
  :root { --stick: var(--lic-h, 0px); }
  .topbar { position: static; }
  .bottomnav { display: none; }
  .content { padding-bottom: 24px; }
  .toasts { bottom: 12px; }
  .acct-balbar { bottom: 0; }
  .bc-actions { bottom: 8px; }
}

/* ------------------------------------------------------------ phones: dialogs, drawers, sheets */
@media (max-width: 720px) {
  /* dialogs are bottom sheets: reachable thumb zone, sticky action bar above the home indicator, never taller than the visible area */
  .backdrop:not(.backdrop-drawer) { padding: 0; place-items: end stretch; }
  .modal { width: 100%; max-width: none; max-height: calc(100vh - 12px); max-height: min(calc(100dvh - 12px - env(safe-area-inset-top, 0px)), calc(var(--vvh, 100dvh) - 8px)); border-radius: 20px 20px 0 0; animation: m-sheet .2s ease-out; }
  .modal-palette { align-self: start; margin-top: env(safe-area-inset-top, 0px); max-height: min(80dvh, var(--vvh, 100dvh)); border-radius: 0 0 20px 20px; }
  .modal-head { padding: 14px 8px 4px 18px; }
  :root[dir="rtl"] .modal-head { padding: 14px 18px 4px 8px; }
  .modal-body { padding: 8px 18px 18px; }
  .modal-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); flex-wrap: wrap; }
  .modal-foot .btn { flex: 1 1 auto; min-width: 0; justify-content: center; }
  .drawer { width: 100vw; max-width: 100vw; }
  .drawer-head { padding: 14px 8px 10px 16px; padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
  .drawer-body { padding: 14px 16px 20px; }
  .drawer-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .drawer-foot .btn { flex: 1 1 auto; justify-content: center; }
  .pal-list { max-height: 60dvh; }
  .sheet-modal { max-height: 92dvh; }
  .rep-controls { max-height: 88dvh; }
  .rep-sheet-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .cs-menu { max-height: min(70dvh, calc(100dvh - var(--stick) - var(--bn-h) - 12px)); }
  .form-bar { padding-inline: 10px; }
  .form-bar .btn-primary { flex: 1 1 auto; }
  /* a dialog's value + suffix rows ("maadi" ".hazix.io") and the key / value rows stack instead of squeezing the input to 90 px */
  .modal .row-inline, .modal .input-suffix, .modal .url-field { flex-wrap: wrap; }
  .modal .input-suffix > input { flex: 1 1 100%; }
}
@keyframes m-sheet { from { transform: translateY(24px); opacity: .6; } }

/* ------------------------------------------------------------ wide tables: the first column stays while the rest scrolls */
@media (max-width: 900px) {
  .table-wrap > table.acct-rpt th:first-child, .table-wrap > table.acct-rpt td:first-child,
  .table-wrap > table.pivot th:first-child, .table-wrap > table.pivot td:first-child,
  .ks-figures-body table th:first-child, .ks-figures-body table td:first-child,
  .acct-rpt-wrap table th:first-child, .acct-rpt-wrap table td:first-child {
    position: sticky; inset-inline-start: 0; z-index: 2; background: var(--panel);
    box-shadow: 1px 0 0 var(--line);
  }
  :root[dir="rtl"] .table-wrap > table.acct-rpt th:first-child, :root[dir="rtl"] .table-wrap > table.acct-rpt td:first-child,
  :root[dir="rtl"] .table-wrap > table.pivot th:first-child, :root[dir="rtl"] .table-wrap > table.pivot td:first-child,
  :root[dir="rtl"] .ks-figures-body table th:first-child, :root[dir="rtl"] .ks-figures-body table td:first-child,
  :root[dir="rtl"] .acct-rpt-wrap table th:first-child, :root[dir="rtl"] .acct-rpt-wrap table td:first-child { box-shadow: -1px 0 0 var(--line); }
  .table-wrap > table th:first-child { background: var(--panel-2); }
  .acct-rpt-row.k-group td:first-child { background: var(--panel-2); }
  .acct-cons .acct-rpt th:first-child, .acct-cons .acct-rpt td:first-child { min-width: 120px; max-width: 42vw; white-space: normal; overflow-wrap: anywhere; }
  .acct-rpt-lead { white-space: normal; }
}

/* ------------------------------------------------------------ tablets (portrait iPad / Android tablet) */
@media (min-width: 721px) and (max-width: 1100px) {
  .content { padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right)); }
  .modal { max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); }
}