/* ==========================================================================
   Mobile + installed-app refinements (w9_pwa). Loaded LAST in the shell (after rq-dialogs.css), so it can refine tokens-driven components without
   touching their source files. Token-only (no colour literals), logical properties, no !important unless noted.
   Audit: Tests/QA/e2e/final/mobile-audit.mjs (overflow, 44px targets, 16px inputs, inputmode). Docs/design/pwa.md.
   ========================================================================== */

/* ---- Safe-area insets (notches, rounded corners, home indicator; effective because the viewport meta says viewport-fit=cover) ----------------------------- */
:root {
  --rq-safe-t: env(safe-area-inset-top, 0px);
  --rq-safe-b: env(safe-area-inset-bottom, 0px);
  --rq-safe-x: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));   /* symmetric: correct in LTR and RTL */
}

/* iOS/Android: no grey flash on tap, no 300 ms double-tap-zoom delay on controls */
html { -webkit-tap-highlight-color: color-mix(in srgb, var(--rq-accent) 14%, transparent); }
a, button, summary, label, select, [role="button"], input[type="checkbox"], input[type="radio"] { touch-action: manipulation; }

.app-topbar { padding-inline: max(var(--rq-s-3), var(--rq-safe-x)); }
@media (min-width: 1024px) { .app-topbar { padding-inline: max(var(--rq-gutter), var(--rq-safe-x)); } }
/* landscape notches: the page column never runs under a cut-out */
.rq-page-shell { padding-inline: var(--rq-safe-x); }
.rq-sidebar { padding-block-end: var(--rq-safe-b); }
#toast_container { padding-block-end: var(--rq-safe-b); }
.modal-footer { padding-block-end: max(var(--rq-s-3), var(--rq-safe-b)); }

/* Installed (standalone) window: the page, not the browser, owns the status-bar area and the scroll chain */
@media (display-mode: standalone), (display-mode: minimal-ui) {
  :root { --rq-topbar-h: calc(60px + env(safe-area-inset-top, 0px)); }
  .app-topbar { padding-block-start: var(--rq-safe-t); }
  /* a pull-down must not reload the page and discard a half-filled form */
  html, body { overscroll-behavior-y: contain; }
}
/* scroll chaining out of drawers, dialogs and menus never moves the page behind them */
.rq-sidebar, .modal, .modal-body, .dropdown-menu, .rq-cmd-panel, .e-dialog .e-dlg-content { overscroll-behavior: contain; }

/* dvh with a vh fallback for engines without dynamic viewport units */
@supports not (height: 100dvh) {
  .app-shell, .main-panel { min-block-size: calc(100 * var(--rq-vh, 1vh)); }
  .rq-sidebar { block-size: calc(100 * var(--rq-vh, 1vh)); }
}

/* ---- Touch: 44px targets and 16px fields on phones and tablets, any coarse pointer ------------------------------------------------------------------------- */
@media (max-width: 1023.98px), (pointer: coarse) {
  /* the control-height tokens drive buttons, inputs, Syncfusion fields and toolbars: one switch makes them all touch-sized */
  :root { --rq-h: var(--rq-h-touch); --rq-h-sm: var(--rq-h-touch); }
  .btn, .btn-sm, .btn-lg, .rq-action-button, .rq-icon-btn, .topbar-icon-action, .topbar-menu-button, .topbar-profile-trigger, .rq-cmd-trigger,
  .dropdown-item, .rqr-cat, .page-link, .nav-link, .tab-link, .rq-tab, .accordion-button, summary {
    min-block-size: var(--rq-h-touch);
  }
  .topbar-icon-action, .topbar-menu-button, .rq-icon-btn, .rq-cmd-trigger { min-inline-size: var(--rq-h-touch); }
  .topbar-icon-action { block-size: var(--rq-h-touch); }
  .topbar-profile-trigger { block-size: var(--rq-h-touch); }
  .btn-sm { padding-inline: var(--rq-s-3); }
  .form-control, .form-select, .rq-control, .rq-form-control, .e-input-group, .e-input-group.e-control-wrapper { min-block-size: var(--rq-h-touch); }
  /* breadcrumb/back links: 44px hit area without growing the header (padding is cancelled by the margin) */
  .breadcrumb a, .rq-breadcrumb a, .rq-crumbs a { display: inline-flex; align-items: center; padding-block: 13px; margin-block: -13px; }
  /* module controls found by the audit below 44px */
  .rqr-iconbtn, .rqan-iconbtn, .rqan-seg__b, .rqan-multi__btn, .rqan-chip, .bk-statuschip, button.rq-chip, .rq-segmented button, .rqc-filters-toggle, .rqc-legend-btn,
  .rqr-card__link, a.rq-num, .rqan-dashbtn, .rqan-legend__item, .rqan-dashbar__act .btn, .rqmd-seg button, .accent-palette-option { min-block-size: var(--rq-h-touch); }
  .rqr-iconbtn, .rqan-iconbtn { min-inline-size: var(--rq-h-touch); }
  .rqr-card__link { display: flex; align-items: center; }
  a.rq-num { display: inline-flex; align-items: center; }
  body .e-input-group input.e-input, body .e-input-group.e-control-wrapper input.e-input, body .e-input-group.e-small input.e-input { block-size: calc(var(--rq-h-touch) - 2px); min-block-size: calc(var(--rq-h-touch) - 2px); line-height: calc(var(--rq-h-touch) - 2px); }
  .btn, .btn-sm { min-inline-size: var(--rq-h-touch); }
  .rq-sidebar-link, .rq-sidebar .menu-link, .rq-sidebar .nav-toggle, .brand-link, .rq-rail-toggle { min-block-size: var(--rq-h-touch); }
  .rq-rail-toggle { min-inline-size: var(--rq-h-touch); }
  .breadcrumb a, .rq-breadcrumb a, .rq-crumbs a { padding-inline: 8px; margin-inline: -8px; }
  .topbar-mobile-brand { display: inline-flex; align-items: center; min-block-size: var(--rq-h-touch); min-inline-size: var(--rq-h-touch); justify-content: center; }
  input[type="checkbox"], input[type="radio"] { inline-size: 1.25em; block-size: 1.25em; }
}
/* narrow phones: the page title already names the screen, the drawer carries the brand; free the room for six 44px targets */
@media (max-width: 430px) {
  .topbar-mobile-brand { display: none; }
  .topbar-actions { gap: 0; }
  .topbar-leading { gap: var(--rq-s-1); }
}

/* Type scale on phones/tablets: UI text one step larger (Impeccable undersized-ui-text: interactive text >= 14px, nothing below 12px) */
@media (max-width: 1023.98px), (pointer: coarse) {
  :root { --rq-fs-xs: 13px; --rq-fs-sm: 14px; --rq-fs-base: 15px; --rq-fs-md: 16px; }
}
/* the page title must lead the hierarchy: 24px against 15px body (was 18px, a 1.29 ratio) */
@media (max-width: 640px) {
  .rq-page-title { font-size: var(--rq-fs-xl); }
}

/* iOS Safari zooms the page when a focused field is below 16px; keep fields at 16px on phones/tablets (desktop keeps the compact 14px density) */
@media (max-width: 1023.98px), (pointer: coarse) {
  body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  body select, body textarea, body .form-control, body .form-select, body .rq-control, body .rq-form-control,
  body .e-input-group input.e-input, body .e-input-group.e-control-wrapper input.e-input, body .e-input-group textarea.e-input, body input.e-input, body textarea.e-input,
  body .e-input-group .e-input, body .e-float-input input, body .e-float-input.e-control-wrapper input {
    font-size: max(16px, 1em);
  }
}

/* ---- Sticky header and long forms on small screens ------------------------------------------------------------------------------------------------------ */
@media (max-width: 1023.98px) {
  .app-topbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--rq-bg); }   /* cheaper on phones; opaque so scrolling content never ghosts under icons */
}

/* ---- Reduced motion: the global rule lives in rq-base.css; keep the new toast/offline motion consistent ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---- Reading measure: helper copy never runs wider than 75 characters ------------------------------------------------------------------------------------------- */
.rq-field-hint, .form-text, .rq-section__sub, .rq-page-subtitle, .rq-empty__text, .rq-help { max-inline-size: 75ch; }

/* ==========================================================================
   w12_q2 front-end quality (bug hunt QA-042..QA-072, QA-111..QA-125): long unbroken text, tab bars, action bars, step rails, scrollable tables.
   Token-only, logical properties (RTL-safe). Companion script: js/rq/rq-ui-guard.js. Guard tests: Rentiqa.Tests/W12/QaUi.
   ========================================================================== */

/* ---- Long unbroken text (a 4,100 character value with no spaces made /Core/ImportantDates 13,478 px wide) ---------------------------------------------------- */
.rq-page-shell, .rq-page, .main-panel, .page-content, .modal-body, .card, .rq-page-card, .rq-card, .rq-kpi, .rq-field, .rq-section, .alert, .toast, .rq-toast, .rq-empty,
.text-danger, .text-muted, .invalid-feedback, .validation-summary-errors, .field-validation-error, .rq-error-state, .rq-note,
li, dd, dt, label, h1, h2, h3, h4, h5, h6, p, .badge, .rq-chip, .btn, .rq-action-button, .rq-page-title, .rq-page-subtitle, .rq-card-title {
  overflow-wrap: anywhere;
}
/* table cells keep their natural column width (break-word does not shrink min-content); only a single word longer than the column is broken */
td, th { overflow-wrap: break-word; }
/* flex/grid children may shrink below their content, otherwise one long word pushes the whole row off screen */
.rq-page-shell > *, .rq-page > *, .rq-field, .rq-form-grid > *, .rq-kpi, .rq-page-hero > *, .rq-page-card, .modal-body > *, .row > *, .d-flex > *, .main-panel, .page-content { min-inline-size: 0; }
/* a cell whose text is far longer than a row should be: clamped to a few lines, the full value is the tooltip (title set by rq-ui-guard.js) */
.rq-cell-clip { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; max-inline-size: 60ch; overflow-wrap: anywhere; }
.rq-chip { max-inline-size: 100%; white-space: normal; }
.rq-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: 100%; }

/* ---- Tab bars: every tab stays reachable without sideways scrolling; they wrap onto a second row instead of running off the screen -------------------------------- */
.rq-tabs, .rq-hd-tabs, .rq-rent-tabs, .bk-tabs, .nav-tabs { flex-wrap: wrap; overflow-x: visible; row-gap: 0; }
.rq-tabs button, .rq-hd-tabs button { flex: 0 1 auto; min-inline-size: 0; white-space: normal; text-align: center; }
@media (max-width: 640px) {
  .rq-tabs button, .rq-hd-tabs button { padding-inline: var(--rq-s-3); font-size: var(--rq-fs-sm); }
  .rq-tabs, .rq-hd-tabs { gap: 0; }
  .nav-tabs .nav-link { padding-inline: var(--rq-s-3); }
}

/* ---- Action bars wrap instead of running past the edge ------------------------------------------------------------------------------------------------------------- */
.btn-group, .rq-toolbar, .rq-actions, .rq-page-hero__actions, .modal-footer, .rq-form-actions, .rq-report-filters-actions, .rq-dlg-actions { flex-wrap: wrap; }
.btn-group { max-inline-size: 100%; row-gap: var(--rq-s-2); }
@media (max-width: 640px) {
  .btn-group > .btn, .btn-group > .rq-action-button { flex: 1 1 auto; min-inline-size: 0; white-space: normal; }
  .rq-page-hero__actions .rq-action-button, .rq-toolbar .btn { flex: 1 1 auto; }
}

/* ---- Rental wizard step rail: seven steps fit a 390 px phone (the current step keeps its title) ----------------------------------------------------------------- */
@media (max-width: 640px) {
  .rq-steps { overflow-x: visible; gap: var(--rq-s-1); }
  .rq-steps__item { flex: 1 1 0; min-inline-size: 0; }
  .rq-steps__item.is-current { flex: 3 1 0; }
  .rq-steps__btn { padding-inline: var(--rq-s-1); justify-content: center; gap: var(--rq-s-1); }
  .rq-steps__item.is-current .rq-steps__btn { justify-content: flex-start; }
}

/* ---- Tables that are not already in a scroller (wrapped by rq-ui-guard.js): the table scrolls, the page does not; the edge fade shows there is more -------------- */
.rq-scroll-x { max-inline-size: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; position: relative;
  background:
    linear-gradient(to right, var(--rq-surface) 30%, transparent) left center / 24px 100% no-repeat local,
    linear-gradient(to left, var(--rq-surface) 30%, transparent) right center / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--rq-text) 18%, transparent), transparent) left center / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--rq-text) 18%, transparent), transparent) right center / 10px 100% no-repeat scroll; }
.rq-scroll-x > table { margin-block-end: 0; }
[dir="rtl"] .rq-scroll-x {
  background:
    linear-gradient(to left, var(--rq-surface) 30%, transparent) right center / 24px 100% no-repeat local,
    linear-gradient(to right, var(--rq-surface) 30%, transparent) left center / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--rq-text) 18%, transparent), transparent) right center / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--rq-text) 18%, transparent), transparent) left center / 10px 100% no-repeat scroll; }

/* ---- Phone card layout for tables that do not fit (data-rq-stack is set by rq-ui-guard.js; each cell carries its column title in data-label) ------------------------------ */
@media (max-width: 640px) {
  table[data-rq-stack], table[data-rq-stack] > tbody { display: block; inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; overflow: visible; }
  table[data-rq-stack] td > :is(input, select, textarea, .form-control, .form-select) { max-inline-size: 100%; min-inline-size: 0; }
  table[data-rq-stack] > thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  table[data-rq-stack] > tbody > tr { display: block; margin-block-end: var(--rq-s-3); padding: var(--rq-s-2) var(--rq-s-3); border: 1px solid var(--rq-border); border-radius: var(--rq-r-md); background: var(--rq-surface); }
  table[data-rq-stack] > tbody > tr > td { display: flex; align-items: center; justify-content: space-between; gap: var(--rq-s-3); inline-size: auto; padding: var(--rq-s-1) 0; border: 0; text-align: end; min-inline-size: 0; }
  table[data-rq-stack] > tbody > tr > td::before { content: attr(data-label); flex: none; max-inline-size: 45%; color: var(--rq-text-2); font-weight: var(--rq-fw-semibold); font-size: var(--rq-fs-sm); text-align: start; }
  table[data-rq-stack] > tbody > tr > td:empty { display: none; }
  table[data-rq-stack] td .form-check-input, table[data-rq-stack] td input[type="checkbox"] { float: none; margin: 0; flex: none; }
  table[data-rq-stack] > tbody > tr > td[data-label=""]::before { content: none; }
  table[data-rq-stack] > tbody > tr > td[data-label=""] { justify-content: flex-end; flex-wrap: wrap; }
  table[data-rq-stack] > tbody > tr > td:last-child { flex-wrap: wrap; justify-content: flex-end; }
}

/* ---- Grid pager on phones: page size + page buttons wrap instead of running past the edge ---------------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .e-grid .e-gridpager { display: flex; flex-wrap: wrap; justify-content: center; row-gap: var(--rq-s-1); }
  .e-grid .e-gridpager .e-pagesizes { margin-inline: auto; }
}

/* ==========================================================================
   f18 - touch + safe-area additions
   ========================================================================== */
@media (max-width: 1023.98px), (pointer: coarse) {
  /* footer legal links and checkboxes were 17px / 16px hit areas */
  .footer a { display: inline-flex; align-items: center; min-block-size: var(--rq-h-touch); padding-inline: var(--rq-s-1); }
  .form-check-input { inline-size: 1.5rem; block-size: 1.5rem; }
  .form-check { min-block-size: var(--rq-h-touch); display: flex; align-items: center; gap: var(--rq-s-2); }
  .rq-doc-badge { min-block-size: var(--rq-h-touch); }
}
/* the last row of content and the footer clear the home indicator in installed mode */
.footer { padding-block-end: max(var(--rq-s-4), var(--rq-safe-b)); }

/* ---- No card-in-card (c1_f20): stacked rows inside an existing card/section are flat list items separated by a hairline ---------- */
@media (max-width: 640px) {
  :is(.card-surface, .rq-admin-card, .rq-section, .rq-page-card, .rq-settings-card) table[data-rq-stack] > tbody > tr {
    margin: 0; padding: var(--rq-s-3) var(--rq-s-4); border: 0; border-block-end: 1px solid var(--rq-border); border-radius: 0; background: transparent;
  }
  :is(.card-surface, .rq-admin-card, .rq-section, .rq-page-card, .rq-settings-card) table[data-rq-stack] > tbody > tr:last-child { border-block-end: 0; }
  :is(.card-surface, .rq-admin-card, .rq-section, .rq-page-card, .rq-settings-card) table[data-rq-stack] > tbody > tr.table-primary,
  :is(.card-surface, .rq-admin-card, .rq-section, .rq-page-card, .rq-settings-card) table[data-rq-stack] > tbody > tr.selected { background: var(--rq-accent-soft); }
}

/* c1_f25: a filter-bar button never exceeds its grid cell (it overflowed by a few px at the large text size on a phone) */
@media (max-width: 640px) {
  .rq-filterbar__grid > div > .btn { inline-size: 100%; min-inline-size: 0; }
}