/* ============================================================================
   QVORA Clinic - shared mobile layer (phones and small tablets, <= 768px)
   ----------------------------------------------------------------------------
   One place for the mobile presentation of the clinic app (index.html) and
   the Platform Admin portal (platform.html). Loaded LAST, after the desktop
   styles, and everything sits inside "@media screen and (max-width: 768px)",
   so:
     - desktop (>= 769px) is untouched,
     - printing is untouched (print is never "screen").
   Companion script: js/qvora-mobile.js (table card labels, drawer / modal
   scroll lock, row action overflow, keyboard-safe modals).

   Patterns (reused by every page, not page-by-page hacks):
     1. Shell: header, off-canvas drawer, scroll containers
     2. Touch targets (44px) and form controls (16px, one column)
     3. Tabs and filter chips: one horizontal scroll row
     4. Tables: normal lists become cards (td[data-label]); genuinely wide
        reports keep a contained horizontal scroller (data-mobile-table="scroll")
     5. Modals: full-screen sheet, sticky header and footer, keyboard safe
     6. Master / detail (patients, doctors, support tickets)
     7. Page specific layouts (dashboard, appointments, billing, inventory,
        reports, admin, clinical workspace)
   Direction-neutral: logical properties only, so the same rules serve
   English (ltr) and Arabic (rtl).
   ========================================================================== */

/* Helpers the mobile script inserts ("More" on a card, scroll hints) never show on desktop or paper. */
/* (":is(#qvm, ...)" = ID weight, so no older "button { display: ... !important }" rule can show them) */
:is(#qvm, .qv-mobile-only) { display: none !important; }

@media screen and (max-width: 768px) {

  :is(#qvm, .qv-mobile-only) { display: revert !important; }
  :is(#qvm, .qv-more-btn).qv-mobile-only { display: inline-flex !important; }
  :is(#qvm, .qv-scroll-hint).qv-mobile-only, :is(#qvm, .qv-field-cap).qv-mobile-only { display: flex !important; }

  /* ------------------------------------------------------------------------
     0. Tokens for the mobile layer
     ------------------------------------------------------------------------ */
  :root {
    --qv-touch: 44px;
    --qv-gutter: 12px;
    --qv-card-radius: var(--radius-md, 10px);
    --qv-safe-bottom: env(safe-area-inset-bottom, 0px);
    --qv-safe-top: env(safe-area-inset-top, 0px);
  }

  *, *::before, *::after { box-sizing: border-box; }
  /* .qv-app-body = the scrolling page body of either shell (clinic app: .views-container,
     Platform Admin: .platform-main); js/qvora-mobile.js tags both. */

  /* Real fit instead of clipping: overflow is allowed to show (and is caught
     by the mobile test suite) rather than being hidden. */
  body { overflow-x: visible; }
  .views-container { overflow-x: auto !important; padding: var(--qv-gutter) !important; }
  .app-main, .views-container, .app-view, .full-view, .layout, .layout > .main,
  .folder-content, .tab-panel, .card, .card-body, .dashboard-card { min-width: 0; }
  .qv-app-body img, .qv-app-body svg, .qv-app-body canvas, .qv-app-body video { max-width: 100%; }

  /* Long values (emails, invoice numbers, codes) wrap instead of pushing the
     page wider. */
  .qv-app-body, .modal { overflow-wrap: break-word; }
  table:is(.qv-mtable, #qvm) td, .patient-meta, .doctor-meta, .info-grid, .qv-meta, .hint { overflow-wrap: anywhere; }
  .badge { white-space: normal; text-align: center; }

  /* ------------------------------------------------------------------------
     1. Shell: header + drawer
     ------------------------------------------------------------------------ */
  .main-topbar {
    display: grid !important;
    grid-template-columns: var(--qv-touch) minmax(0, 1fr) repeat(2, auto);
    grid-auto-rows: auto;
    align-items: center;
    gap: 8px;
    padding: calc(8px + var(--qv-safe-top)) var(--qv-gutter) 8px !important;
    min-height: 0 !important;
  }
  .mobile-nav-toggle {
    grid-column: 1; grid-row: 1;
    width: var(--qv-touch) !important; height: var(--qv-touch) !important;
    border-radius: 10px !important;
  }
  .main-topbar-titles { grid-column: 2 / 4; grid-row: 1; min-width: 0; display: flex; flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; }
  .main-topbar-titles .page-breadcrumb { font-size: 10.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  #pageTitle, .main-topbar-titles h2 { font-size: 17px !important; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .topbar-actions { display: contents !important; }
  .topbar-actions > .qv-lang-toggle { grid-column: 4; grid-row: 1; justify-self: end; }
  .topbar-actions > .btn:not(.qv-lang-toggle) { grid-row: 2; min-width: 0; justify-content: center; }
  .topbar-actions > #primaryActionBtn { grid-column: 1 / -1; }
  .main-topbar:has(#mergePatientsBtn:not([hidden])) #mergePatientsBtn { grid-column: 1 / 3; }
  .main-topbar:has(#mergePatientsBtn:not([hidden])) #primaryActionBtn { grid-column: 3 / -1; }
  .topbar-actions > [hidden] { display: none !important; }

  /* Drawer: logical side (start edge in both directions). */
  .app-sidebar {
    inset-inline-start: 0 !important; inset-inline-end: auto !important;
    width: min(86vw, 320px) !important;
    padding-top: calc(14px + var(--qv-safe-top)) !important;
    padding-bottom: calc(14px + var(--qv-safe-bottom)) !important;
    display: flex; flex-direction: column;
    overscroll-behavior: contain;
  }
  [dir="rtl"] .app-sidebar:not(.sidebar-mobile-open) { transform: translateX(100%) !important; }
  [dir="rtl"] .app-sidebar.sidebar-mobile-open { transform: translateX(0) !important; }
  .app-sidebar .sidebar-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .sidebar-drawer-close { width: var(--qv-touch) !important; height: var(--qv-touch) !important; margin-inline-start: 6px !important; margin-left: 0; }
  .app-sidebar .sidebar-nav-item, .app-sidebar .sidebar-nav-group-header { min-height: var(--qv-touch); }
  .app-sidebar .sidebar-user-info, .app-sidebar .sidebar-clinic-info { min-width: 0; overflow: hidden; }
  .app-sidebar .sidebar-user-info strong, .app-sidebar .sidebar-user-info span,
  .app-sidebar .sidebar-clinic-info strong, .app-sidebar .sidebar-clinic-info span,
  .app-sidebar .sidebar-logo-text strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app-sidebar #logoutBtn { width: var(--qv-touch) !important; height: var(--qv-touch) !important; flex: 0 0 var(--qv-touch); }
  .sidebar-flyout-menu { display: none !important; }
  html.qv-drawer-open .app-main, html.qv-modal-open .app-main,
  html.qv-drawer-open .views-container, html.qv-modal-open .views-container { overflow: hidden !important; }

  /* ------------------------------------------------------------------------
     2. Touch targets and controls
     ------------------------------------------------------------------------ */
  /* ":is(..., #qvm)" gives these rules ID weight (no element has id="qvm") so they win over
     the older desktop "!important" control heights (28px row buttons, 32px small selects). */
  :is(.qv-app-body, .modal-overlay, .auth-screen, .platform-shell, .main-topbar, #qvm) :is(.btn, button:not(.qv-tight)) {
    min-height: var(--qv-touch) !important;
    min-width: var(--qv-touch) !important;
  }
  :is(.qv-app-body, .modal-overlay, .auth-screen, .platform-shell, #qvm) .btn-sm { padding-block: 8px; font-size: 14px; }
  .qv-app-body a.cell-link, .qv-app-body .cell-link { display: inline-flex; align-items: center; min-height: var(--qv-touch); }

  :is(.qv-app-body, .modal-overlay, .auth-screen, .platform-shell, #qvm) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]), select, textarea, .form-control, .form-select) {
    font-size: 16px !important;   /* no iOS zoom on focus */
    min-height: var(--qv-touch) !important;
    max-width: 100% !important;
  }
  textarea { min-height: 96px !important; }
  /* Checkboxes / radios: a 44px tap area with the usual 20px box drawn inside it. */
  input[type="checkbox"]:not(.form-check-input):not([role="switch"]), input[type="radio"]:not(.form-check-input) {
    -webkit-appearance: none; appearance: none;
    width: var(--qv-touch) !important; height: var(--qv-touch) !important; flex: 0 0 var(--qv-touch);
    margin: 0 !important; padding: 0; border: 0; border-radius: 10px; cursor: pointer;
    background: center / 20px 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='1' y='1' width='18' height='18' rx='4' fill='%23fff' stroke='%2394a3b8' stroke-width='1.6'/%3E%3C/svg%3E");
  }
  input[type="checkbox"]:not(.form-check-input):not([role="switch"]):checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='1' y='1' width='18' height='18' rx='4' fill='%232563eb' stroke='%232563eb' stroke-width='1.6'/%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  input[type="radio"]:not(.form-check-input) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.6' fill='%23fff' stroke='%2394a3b8' stroke-width='1.6'/%3E%3C/svg%3E");
  }
  input[type="radio"]:not(.form-check-input):checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.6' fill='%23fff' stroke='%232563eb' stroke-width='1.6'/%3E%3Ccircle cx='10' cy='10' r='4.6' fill='%232563eb'/%3E%3C/svg%3E");
  }
  input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .5; cursor: not-allowed; }
  input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--primary, #2563eb); outline-offset: -4px; }
  .form-check { min-height: var(--qv-touch); display: flex; align-items: center; gap: 10px; }
  .form-check-input { width: 22px !important; height: 22px !important; margin: 0 !important; flex: 0 0 22px; }
  /* A bare checkbox / radio gets a 44px tap area around it. */
  label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { min-height: var(--qv-touch); display: inline-flex; align-items: center; gap: 10px; }
  .modal-close { min-width: var(--qv-touch) !important; min-height: var(--qv-touch) !important; font-size: 26px !important; display: inline-flex; align-items: center; justify-content: center; }

  /* Forms: one column, labels above inputs, full width controls. */
  .form-row.two-cols, .form-row.three-cols, .form-row.four-cols,
  .form-grid-2, .form-grid-3, .inventory-form, .row-2, .row-3, .grid-2, .grid-3 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }
  .form-row.two-cols > *, .form-row.three-cols > *, .form-row.four-cols > * { margin-bottom: 12px; min-width: 0; }
  .form-row { margin-bottom: 12px; min-width: 0; }
  .form-row > label:not(:has(> input[type="checkbox"], > input[type="radio"])),
  .form-row > div > label:not(:has(> input[type="checkbox"], > input[type="radio"])) { display: block; margin-bottom: 6px; }
  .checkbox-field { display: flex !important; align-items: center; justify-content: flex-start !important; text-align: start !important; min-height: var(--qv-touch); }
  .checkbox-field > label, label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { display: inline-flex !important; flex-direction: row !important; align-items: center; justify-content: flex-start; gap: 8px; text-align: start; margin: 0; }
  .form-row input:not([type="checkbox"]):not([type="radio"]), .form-row select, .form-row textarea { width: 100% !important; }
  .qv-app-body .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }

  /* Toolbars / filters: search on its own line, filters as a wrapping grid,
     actions full width. */
  .panel-toolbar, .list-toolbar, .toolbar, .filters-row, .report-filters {
    display: flex !important; flex-wrap: wrap !important; gap: 8px !important; align-items: stretch !important;
  }
  .panel-toolbar > input[type="text"], .panel-toolbar > input[type="search"], .panel-toolbar > .search-box,
  .panel-toolbar > .qv-table-search, .list-toolbar > input[type="text"] { flex: 1 1 100% !important; width: 100% !important; max-width: none !important; }
  .panel-toolbar > select, .panel-toolbar > input[type="date"] { flex: 1 1 calc(50% - 4px) !important; width: auto !important; min-width: 0 !important; max-width: none !important; }
  .panel-toolbar > .btn, .panel-toolbar > button { flex: 1 1 auto; justify-content: center; }
  .panel-toolbar > *:not(input):not(select) { min-width: 0; }
  .table-quick-search { width: 100% !important; max-width: none !important; display: block; }
  .table-quick-search input, .qv-table-search, .table-search { width: 100% !important; max-width: none !important; }

  /* ------------------------------------------------------------------------
     3. Tabs: one horizontal scroll row (never a wrapped wall of buttons)
     ------------------------------------------------------------------------ */
  .folder-tabs, #mdaSubNav, #commSubNav, .encounter-tabs, .template-editor-mobile-tabs, .insurance-flow-nav,
  .calendar-view-toggle, .dashboard-filter-group, .nav-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    gap: 6px !important;
    position: static !important;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch;
  }
  .folder-tabs::-webkit-scrollbar, #mdaSubNav::-webkit-scrollbar, #commSubNav::-webkit-scrollbar,
  .encounter-tabs::-webkit-scrollbar, .dashboard-filter-group::-webkit-scrollbar { display: none; }
  .folder-tabs > .tab, #mdaSubNav > .tab, #commSubNav > .tab, .encounter-tabs > *, .calendar-view-toggle > *,
  .dashboard-filter-group > *, .nav-tabs > *, .insurance-flow-nav > * {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    min-height: var(--qv-touch) !important;
    scroll-snap-align: start;
    width: auto !important;
  }
  .folder-tabs > .tab[hidden] { display: none !important; }
  /* the vertical desktop folder layout becomes a stacked layout */
  .layout > .main, .folder-layout, .patient-view, .doctor-view { display: block; }
  .folder-content { width: 100%; padding: 0 !important; border: 0 !important; }

  /* ------------------------------------------------------------------------
     4. Tables
     ------------------------------------------------------------------------ */
  /* Specificity note: "table:is(.qv-mtable, #qvm)" carries ID weight (no element has
     id="qvm") so the card rules win over the older per-table "#invoicesTable td { ... !important }"
     desktop rules without touching those files. */
  /* 4a. Normal lists -> cards (js/qvora-mobile.js adds .qv-mtable and the
     td[data-label] captions from the column headers). */
  table:is(.qv-mtable, #qvm) {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  table:is(.qv-mtable, #qvm) > thead { display: none !important; }   /* captions live on every cell */
  table:is(.qv-mtable, #qvm) > tbody, table:is(.qv-mtable, #qvm) > tfoot { display: grid !important; gap: 10px; width: 100%; }
  table:is(.qv-mtable, #qvm) > tbody > tr, table:is(.qv-mtable, #qvm) > tfoot > tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    border-radius: var(--qv-card-radius);
    padding: 10px 14px;
    box-shadow: var(--shadow-sm);
    position: relative;
  }
  table:is(.qv-mtable, #qvm) > tfoot > tr { background: var(--surface-2, #f8fafc); }
  table:is(.qv-mtable, #qvm) > tbody > tr[hidden], table:is(.qv-mtable, #qvm) td[hidden], table:is(.qv-mtable, #qvm) th[hidden] { display: none !important; }
  table:is(.qv-mtable, #qvm) > tbody > tr > td, table:is(.qv-mtable, #qvm) > tbody > tr > th,
  table:is(.qv-mtable, #qvm) > tfoot > tr > td, table:is(.qv-mtable, #qvm) > tfoot > tr > th {
    display: grid !important;
    grid-template-columns: minmax(84px, 38%) minmax(0, 1fr);
    align-items: start;
    gap: 2px 10px;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 4px 0 !important;
    border: 0 !important;
    text-align: start !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    background: transparent !important;
    position: static !important;
    font-size: 14px;
    line-height: 1.35;
    height: auto !important;
  }
  table:is(.qv-mtable, #qvm) > tbody > tr > td::before, table:is(.qv-mtable, #qvm) > tfoot > tr > td::before,
  table:is(.qv-mtable, #qvm) > tbody > tr > th::before {
    content: attr(data-label);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    line-height: 1.3;
  }
  /* caption in column 1 spanning every line of the value; each child of the
     cell (value, sub-line, badge) stacks in column 2 */
  table:is(.qv-mtable, #qvm) > tbody > tr > td[data-label]:not([data-label=""]) { row-gap: 0 !important; }
  table:is(.qv-mtable, #qvm) > tbody > tr > td[data-label]:not([data-label=""])::before { grid-column: 1; grid-row: 1 / span 6; align-self: start; padding-top: 2px; }
  table:is(.qv-mtable, #qvm) > tbody > tr > td[data-label]:not([data-label=""]) > * + * { margin-top: 2px; }
  /* links in a card keep a 44px tap height without making every line 44px tall */
  table:is(.qv-mtable, #qvm) .cell-link { min-height: var(--qv-touch) !important; margin-block: -6px; }
  table:is(.qv-mtable, #qvm) > tbody > tr > td[data-label]:not([data-label=""]) > * { grid-column: 2; }
  table:is(.qv-mtable, #qvm) td > *, table:is(.qv-mtable, #qvm) th > * { min-width: 0; max-width: 100%; }
  /* values sit next to their caption in both directions, even when the value
     itself is left-to-right text (emails, codes) inside an Arabic page */
  [dir="ltr"] table:is(.qv-mtable, #qvm) > tbody > tr > td, html:not([dir="rtl"]) table:is(.qv-mtable, #qvm) > tbody > tr > td { text-align: left !important; }
  [dir="rtl"] table:is(.qv-mtable, #qvm) > tbody > tr > td { text-align: right !important; }
  table:is(.qv-mtable, #qvm) > tbody > tr > td > * { justify-self: start; }
  table:is(.qv-mtable, #qvm) > tbody > tr > td > .row-actions, table:is(.qv-mtable, #qvm) > tbody > tr > td > div { justify-self: stretch; }
  table:is(.qv-mtable, #qvm) td .badge, table:is(.qv-mtable, #qvm) td > .badge { justify-self: start; width: auto !important; max-width: 100% !important; display: inline-flex !important; white-space: normal !important; overflow-wrap: anywhere; }
  table:is(.qv-mtable, #qvm) td * { white-space: normal !important; }
  table:is(.qv-mtable, #qvm) td:not([data-label]), table:is(.qv-mtable, #qvm) td[data-label=""] { grid-template-columns: minmax(0, 1fr); }
  table:is(.qv-mtable, #qvm) td:not([data-label])::before, table:is(.qv-mtable, #qvm) td[data-label=""]::before { content: none; display: none; }
  table:is(.qv-mtable, #qvm) td.qv-mempty::after { content: "\2014"; color: var(--text-dim); }
  /* card title = the first data cell */
  table:is(.qv-mtable, #qvm) > tbody > tr > .qv-mtitle {
    grid-template-columns: minmax(0, 1fr);
    font-size: 15px; font-weight: 700; color: var(--text);
    padding-block: 4px 8px !important;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border) !important;
  }
  table:is(.qv-mtable, #qvm) > tbody > tr > .qv-mtitle::before { content: none !important; display: none !important; }
  table:is(.qv-mtable, #qvm) > tbody > tr > :is(.qv-mtitle, .qv-mactions, .qv-mselect) > * { grid-column: 1 / -1 !important; }
  table:is(.qv-mtable, #qvm) > tbody > tr > .qv-mtitle .cell-link { font-weight: 700; }
  /* checkbox column: top corner of the card */
  table:is(.qv-mtable, #qvm) > tbody > tr > .qv-mselect { grid-template-columns: auto; justify-content: start; padding-block: 0 !important; }
  table:is(.qv-mtable, #qvm) > tbody > tr > .qv-mselect::before { content: none !important; }
  /* actions = the card footer */
  table:is(.qv-mtable, #qvm) > tbody > tr > .qv-mactions {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 10px !important;
    margin-top: 6px;
    border-top: 1px solid var(--border) !important;
  }
  table:is(.qv-mtable, #qvm) > tbody > tr > .qv-mactions::before { content: none !important; display: none !important; }
  table:is(.qv-mtable, #qvm) .row-actions, table:is(.qv-mtable, #qvm) .qv-mactions > div {
    display: flex !important; flex-wrap: wrap !important; gap: 8px !important;
    justify-content: flex-start !important; width: 100%;
  }
  table:is(.qv-mtable, #qvm) .row-actions > button, table:is(.qv-mtable, #qvm) .row-actions > .btn, table:is(.qv-mtable, #qvm) .qv-mactions .btn,
  table:is(.qv-mtable, #qvm) .qv-mactions > button {
    min-height: var(--qv-touch) !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
    flex: 1 1 auto;
    justify-content: center;
    margin: 0 !important;
  }
  table:is(.qv-mtable, #qvm) .row-actions > .qv-extra { display: none !important; }
  table:is(.qv-mtable, #qvm) .row-actions.qv-open > .qv-extra { display: inline-flex !important; }
  table:is(.qv-mtable, #qvm) .qv-more-btn { flex: 0 0 auto !important; }
  /* empty-state / message rows */
  table:is(.qv-mtable, #qvm) > tbody > tr.qv-mmsg { padding: 16px; text-align: center; box-shadow: none; border-style: dashed; }
  table:is(.qv-mtable, #qvm) > tbody > tr.qv-mmsg > td { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center !important; }
  table:is(.qv-mtable, #qvm) > tbody > tr.qv-mmsg > td::before { content: none !important; }
  /* section rows inside a card list (group headers) */
  table:is(.qv-mtable, #qvm) > tbody > tr.qv-mgroup { background: transparent; border: 0; box-shadow: none; padding: 8px 2px 0; }
  table:is(.qv-mtable, #qvm) > tbody > tr.qv-mgroup > td { font-weight: 700; color: var(--text); grid-template-columns: minmax(0, 1fr); }
  table:is(.qv-mtable, #qvm) > tbody > tr.qv-mgroup > td::before { content: none !important; }
  table:is(.qv-mtable, #qvm) input:not([type="checkbox"]):not([type="radio"]), table:is(.qv-mtable, #qvm) select { width: 100% !important; }

  /* the scrolling wrapper around a card list is no longer a scroller */
  :is(.table-wrap, .table-responsive, .invoices-table-wrap, .claims-table-wrap, .physio-table-wrap, #qvm):has(> table:is(.qv-mtable, #qvm)) {
    overflow: visible !important;
    max-height: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  .card:has(> .table-wrap > table:is(.qv-mtable, #qvm)), .card:has(> .card-body > .table-wrap > table:is(.qv-mtable, #qvm)) { background: transparent; border: 0; box-shadow: none; }

  /* 4b. Genuinely wide tables (statements, ledgers, analytical reports, the
     periodontal chart): a contained, visibly scrollable region. */
  .qv-wide-scroll {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  /* a wide table only gets as wide as its content needs: a two-column
     statement fits the phone, a ten-column ledger scrolls inside its box */
  .qv-wide-scroll > table:is(table, #qvm) { min-width: 0 !important; width: 100% !important; }
  .qv-wide-scroll > table:is(table, #qvm) td:first-child, .qv-wide-scroll > table:is(table, #qvm) th:first-child { white-space: normal !important; min-width: 120px; }
  .qv-wide-scroll a[href], .qv-wide-scroll button { min-height: var(--qv-touch); display: inline-flex; align-items: center; }
  .qv-scroll-hint {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-dim);
    margin: 4px 0 6px;
  }
  .qv-scroll-hint::before { content: "\2194"; font-size: 14px; }

  /* ------------------------------------------------------------------------
     5. Modals: full screen sheet, sticky header/footer, keyboard safe
     ------------------------------------------------------------------------ */
  .modal-overlay:is(.modal-overlay, #qvm) {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overscroll-behavior: contain;
  }
  .modal-overlay:is(.modal-overlay, #qvm) > :is(.modal, .modal-dialog, .qv-sheet) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: var(--qv-vvh, 100dvh) !important;
    max-height: var(--qv-vvh, 100dvh) !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  .modal-overlay > .modal > .modal-header {
    flex: 0 0 auto;
    position: sticky; top: 0; z-index: 3;
    padding: calc(8px + var(--qv-safe-top)) var(--qv-gutter) 8px !important;
    gap: 8px;
    min-width: 0;
    background: var(--surface, #fff);
  }
  .modal-overlay > .modal > .modal-header > h2, .modal-overlay > .modal > .modal-header > h3,
  .modal-overlay > .modal > .modal-header .modal-title {
    font-size: 17px !important; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; margin: 0;
  }
  .modal-overlay > .modal > .modal-body, .modal-overlay > .modal > form.modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden;
    padding: 14px var(--qv-gutter) 0 !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .modal-overlay > .modal > .modal-body > :last-child:not(.modal-actions) { margin-bottom: 16px; }
  .modal-overlay > .modal > form.modal-body { display: flex !important; flex-direction: column; }
  .modal-overlay > .modal > form.modal-body > * { flex: 0 0 auto; }
  .modal-overlay:is(.modal-overlay, #qvm) > .modal > form.modal-body > .modal-actions { margin-top: auto !important; }
  /* footer actions: always reachable */
  .modal-overlay:is(.modal-overlay, #qvm) .modal-actions {
    position: sticky; bottom: 0 !important; z-index: 2;
    display: flex !important; flex-wrap: wrap !important; gap: 8px !important;
    justify-content: stretch !important;
    margin: 12px 0 0 !important;
    margin-inline: 0 !important;
    padding: 10px var(--qv-gutter) calc(10px + var(--qv-safe-bottom)) !important;
    background: var(--surface, #fff);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 16px rgba(15, 23, 42, 0.06);
  }
  .modal-overlay:is(.modal-overlay, #qvm) > .modal > :is(.modal-body, form.modal-body) > .modal-actions { margin-inline: calc(-1 * var(--qv-gutter)) !important; }
  .modal-overlay > .modal > .modal-actions { margin: 0 !important; flex: 0 0 auto; }
  .modal-overlay .modal-actions > .btn, .modal-overlay .modal-actions > button { flex: 1 1 calc(50% - 8px); justify-content: center; min-height: var(--qv-touch); white-space: normal; line-height: 1.2; text-align: center; }
  .modal-overlay:is(.modal-overlay, #qvm) .modal-actions > :is(.btn, button) { min-width: 0 !important; }
  .modal-overlay .modal-actions > [hidden] { display: none !important; }
  .modal .info-grid, .modal .details-grid, .modal .kv-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .modal table:not(.qv-mtable) { max-width: 100%; }
  .modal .table-wrap, .modal .table-responsive { max-width: 100%; }
  .modal-overlay .modal-body .repeatable-rows > * { min-width: 0; }

  /* ------------------------------------------------------------------------
     6. Master / detail: list first, then a full screen record with "back"
     ------------------------------------------------------------------------ */
  .layout { display: flex !important; flex-direction: column !important; width: 100% !important; min-width: 0; }
  .layout > .sidebar {
    width: 100% !important; min-width: 0 !important; max-width: none !important;
    border: 0 !important; padding: 0 !important; height: auto !important; max-height: none !important;
    position: static !important; background: transparent !important;
  }
  .layout.has-detail > .sidebar { display: none !important; }
  .layout:not(.has-detail) > .main { display: none !important; }
  .layout > .main { width: 100% !important; padding: 0 !important; min-width: 0; overflow: visible !important; }
  .patients-view-wrapper { display: block !important; padding: 0 !important; }
  .patients-view-wrapper .layout, .full-view > .layout { margin: 0 !important; }
  .layout .list-rail-header { position: sticky; top: calc(-1 * var(--qv-gutter)); z-index: 4; background: var(--tblr-body-bg, #f5f7fb); padding-block: 4px 8px; display: flex; gap: 8px; }
  .layout .list-rail-header .search-box { flex: 1 1 auto; min-width: 0; }
  .layout .list-rail-header .search-box input { width: 100% !important; }
  .list-rail-collapse-btn, .layout.rail-collapsed > .list-rail-collapse-btn { display: none !important; }
  .patient-list, #doctorList, .ticket-list, .support-ticket-list { display: grid !important; gap: 8px; padding: 0 !important; margin: 0 !important; max-height: none !important; overflow: visible !important; }
  .patient-list > li, #doctorList > li, .ticket-list > li {
    min-height: 60px;
    border: 1px solid var(--border) !important;
    border-radius: var(--qv-card-radius) !important;
    background: var(--surface, #fff) !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    box-shadow: var(--shadow-sm);
  }
  /* list summary: one compact swipeable row so the search stays near the top */
  .patients-stats-row, .doctors-stats-row {
    display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; gap: 8px !important; margin-bottom: 10px !important;
    scrollbar-width: none; overscroll-behavior-x: contain; padding-bottom: 2px;
  }
  .patients-stats-row::-webkit-scrollbar { display: none; }
  .patients-stats-row .stat-card, .doctors-stats-row .stat-card { flex: 0 0 auto; min-width: 132px; padding: 8px 12px !important; gap: 8px !important; }
  .patients-stats-row .stat-icon { width: 30px !important; height: 30px !important; font-size: 15px !important; }
  .patients-stats-row .stat-value { font-size: 18px !important; }
  .patients-stats-row .stat-label { font-size: 12px !important; }
  .patients-view-wrapper:has(.layout.has-detail) > .patients-stats-row,
  .doctors-view-wrapper:has(.layout.has-detail) > .doctors-stats-row { display: none !important; }

  /* record header: back / identity / actions as three compact rows */
  .patient-header, .doctor-header {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-areas: "back back" "avatar info" "actions actions";
    gap: 8px 12px !important;
    align-items: center !important;
    padding: 12px !important;
    margin: 0 0 10px !important;
    position: static !important;
    min-width: 0;
  }
  .patient-header > .back-to-list-btn, .doctor-header > .back-to-list-btn { grid-area: back; justify-self: start; display: inline-flex !important; }
  .patient-header > .avatar, .doctor-header > .avatar { grid-area: avatar; width: 48px !important; height: 48px !important; min-width: 48px; font-size: 18px !important; margin: 0 !important; }
  .patient-header > .doctor-avatar-wrap { grid-area: avatar; display: flex !important; flex-direction: column; align-items: center; gap: 2px; margin: 0 !important; }
  .patient-header > .doctor-avatar-wrap > .avatar { width: 48px !important; height: 48px !important; min-width: 48px; font-size: 18px !important; margin: 0 !important; }
  .patient-header > .doctor-avatar-wrap .avatar-photo-actions { display: flex; flex-direction: column; gap: 0; }
  .patient-header > .doctor-avatar-wrap .link-btn { font-size: 12px; min-height: var(--qv-touch); padding: 0 4px; }
  .patient-header > .patient-header-info, .doctor-header > .patient-header-info, .doctor-header > .doctor-header-info { grid-area: info; min-width: 0; }
  .patient-header-info h2, .doctor-header-info h2 { font-size: 18px !important; line-height: 1.25 !important; margin: 0 0 2px !important; overflow-wrap: anywhere; }
  .patient-meta, .doctor-meta { font-size: 13px !important; line-height: 1.4; overflow-wrap: anywhere; white-space: normal !important; }
  .patient-header > .patient-header-actions, .doctor-header > .patient-header-actions, .doctor-header > .doctor-header-actions {
    grid-area: actions; display: flex !important; flex-wrap: wrap !important; gap: 8px !important; width: 100%; margin: 0 !important;
  }
  .patient-header-actions > .btn, .doctor-header-actions > .btn { flex: 1 1 0; min-width: 0 !important; justify-content: center; white-space: nowrap; overflow-wrap: normal; padding-inline: 6px; font-size: 13.5px; }
  .patient-header-actions > .btn > i.ti { display: none; }

  /* info grids inside a record: one column */
  .info-grid, .details-grid, .kv-grid, .overview-grid, .doctor-info-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* ------------------------------------------------------------------------
     7. Page layouts
     ------------------------------------------------------------------------ */
  /* cards / panels */
  .card, .dashboard-card, .stat-card { border-radius: var(--qv-card-radius); }
  .card-header { flex-wrap: wrap; gap: 8px; }
  .dashboard-grid-2col, .dashboard-grid-3col, .dashboard-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  .stat-cards-row, .inventory-summary, .insurance-metrics, .finance-cards { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .finance-cards > .stat-card { margin: 0 !important; min-width: 0; padding: 10px !important; text-align: start; }
  .stat-card { padding: 12px !important; gap: 10px !important; min-width: 0; }
  .stat-info { min-width: 0; }
  .stat-value { font-size: 18px !important; overflow-wrap: anywhere; }
  .stat-label { font-size: 12px !important; }
  .dashboard-card { min-height: 0 !important; padding: 14px !important; }
  .dashboard-quick-actions-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }
  .home-hero { gap: 10px !important; margin-bottom: 12px !important; }
  .home-hero h2 { font-size: 18px !important; }
  .home-period-bar { width: 100%; align-items: stretch !important; }
  .dashboard-custom-range { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; width: 100%; }
  .dashboard-custom-range[hidden] { display: none !important; }
  .dashboard-custom-range .hint { display: none; }
  .dashboard-custom-range > button { grid-column: 1 / -1; }
  /* Dental chart: the arch keeps its legible width and swipes inside its frame */
  .dx-chart { padding: 14px 10px !important; overscroll-behavior-x: contain; }
  .dx-workspace { padding: 10px !important; }
  .dx-toolbar, .dx-topbar { flex-wrap: wrap; gap: 8px; }

  /* Appointments: week = an agenda grouped by day; month = a 7-column date picker that
     fits the phone; year = two month cards per row. No horizontal dragging. */
  .week-grid { grid-template-columns: minmax(0, 1fr) !important; overflow: visible !important; gap: 8px !important; }
  .week-day-card { min-height: 0 !important; padding: 10px 12px !important; }
  .week-day-header { display: flex; align-items: baseline; gap: 8px; text-align: start !important; padding-bottom: 6px !important; }
  .week-day-header .dom { font-size: 16px !important; }
  .week-day-appts { overflow: visible !important; }
  .week-appt-item { min-height: var(--qv-touch); display: flex; flex-direction: column; justify-content: center; font-size: 13px !important; padding: 8px 10px !important; }
  .week-day-empty { text-align: start !important; margin-top: 0 !important; }
  .calendar-weekdays, .calendar-grid { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 3px !important; max-width: 100% !important; }
  .day-cell { aspect-ratio: auto !important; min-height: 48px; max-width: none !important; padding: 4px 0 !important; font-size: 13px !important; min-width: 0; }
  .day-badge { font-size: 9.5px !important; padding: 0 4px !important; max-width: 100%; overflow: hidden; }
  .year-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .year-month-card { padding: 8px !important; min-width: 0; }
  .year-mini-grid { gap: 1px !important; }
  .appointments-toolbar-card > .d-flex { gap: 8px !important; }
  .appt-day-nav { width: 100%; display: grid !important; grid-template-columns: auto minmax(0, 1fr); gap: 8px !important; align-items: center; }
  .appt-day-nav .appt-date-input { max-width: none !important; width: 100% !important; }
  .appt-day-nav .date-label { grid-column: 1 / -1; font-size: 15px !important; }
  .calendar-toolbar, .date-nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .calendar-toolbar { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; }
  .calendar-nav-group { display: grid !important; grid-template-columns: var(--qv-touch) minmax(0, 1.4fr) minmax(0, 1fr) var(--qv-touch); gap: 6px; min-width: 0; }
  .calendar-nav-group select { min-width: 0; width: 100%; }

  .bar-chart { min-width: 0; }
  .donut-row { flex-wrap: wrap; justify-content: center; }

  /* Bootstrap-style rows inside cards: no negative gutters on a phone */
  .qv-app-body .row, .modal .row { margin-inline: 0 !important; --tblr-gutter-x: 0; --bs-gutter-x: 0; }
  .qv-app-body .row > *, .modal .row > * { padding-inline: 0 !important; flex: 1 1 100% !important; max-width: 100% !important; width: 100% !important; min-width: 0 !important; }

  /* button groups (presets, toggles): one scrollable row of chips */
  .qv-app-body .btn-group, .modal .btn-group {
    display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; max-width: 100%;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .qv-app-body .btn-group > .btn, .modal .btn-group > .btn { flex: 0 0 auto; white-space: nowrap; }
  .qv-app-body .btn-group::-webkit-scrollbar { display: none; }

  /* generic flex toolbars / headers built with utility classes */
  .qv-app-body .d-flex.justify-content-between, .qv-app-body .card-header.d-flex { flex-wrap: wrap !important; gap: 8px; }
  .qv-app-body .card-header .btn { white-space: normal; text-align: start; }
  .qv-app-body .alert, .qv-app-body [id$="Banner"] > div, .qv-app-body [id$="Banner"] .d-flex { flex-wrap: wrap !important; gap: 8px; }
  .qv-app-body .d-flex:not(.flex-nowrap) { flex-wrap: wrap; }
  .qv-app-body .d-flex > * { min-width: 0; }
  .qv-app-body [id$="Banner"] .btn { flex: 1 1 100%; justify-content: center; }

  /* inline "space-between" header rows used across modules wrap instead of overflowing */
  .qv-app-body [style*="justify-content:space-between"], .qv-app-body [style*="justify-content: space-between"],
  .modal [style*="justify-content:space-between"], .modal [style*="justify-content: space-between"] { flex-wrap: wrap !important; gap: 8px; }
  .qv-app-body [style*="display:flex"] > input[type="text"], .qv-app-body [style*="display: flex"] > input[type="text"] { flex: 1 1 100%; width: 100% !important; }

  /* Reports: filters as a full width form */
  .reports-toolbar-card > .d-flex, .reports-toolbar-card .d-flex.flex-wrap {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; align-items: end !important;
  }
  .reports-toolbar-card .filter-field { display: flex; flex-direction: column; align-items: stretch !important; text-align: start !important; min-width: 0; }
  .reports-toolbar-card .filter-field > label { text-align: start; margin-bottom: 4px; }
  .reports-toolbar-card .filter-field > input, .reports-toolbar-card .filter-field > select { width: 100% !important; max-width: none !important; }
  .reports-toolbar-card #reportApplyBtn { grid-column: 1 / -1; width: 100%; justify-content: center; }

  /* Admin summaries (clinic profile, subscription) hold text values: one per line */
  #view-admin .stat-cards-row { grid-template-columns: minmax(0, 1fr) !important; }
  #view-admin .stat-cards-row .stat-value { font-size: 16px !important; }

  /* Repeatable form rows (locations, schedules, medications, currencies) */
  .repeatable-row { grid-template-columns: minmax(0, 1fr) !important; padding: 50px 12px 12px !important; }
  .repeatable-row > * { min-width: 0; }
  .repeatable-row input, .repeatable-row select { width: 100% !important; }
  .repeatable-row .remove-row-btn { top: 4px !important; right: auto !important; inset-inline-end: 4px !important; width: var(--qv-touch); height: var(--qv-touch); font-size: 22px !important; }

  /* Line item editors (invoice / purchase invoice): one card per line, captions above fields */
  .qv-grid-head { display: none !important; }
  [data-qv-cap]::before { content: attr(data-qv-cap); display: block; font-size: 12px; font-weight: 600; color: var(--text-dim); margin-bottom: 2px; }
  .qv-field-cap.qv-mobile-only { font-size: 12px; font-weight: 600; color: var(--text-dim); margin: 4px 0 -2px; }
  .invoice-line-item-row { grid-template-columns: minmax(0, 1fr) !important; gap: 6px !important; }
  .invoice-line-item-row .invoice-line-price-wrap { display: grid; gap: 4px; }
  .purchase-line-row {
    display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 8px !important;
    padding: 12px !important; border: 1px solid var(--border); border-radius: var(--qv-card-radius); background: var(--surface, #fff); margin-bottom: 8px;
  }
  .purchase-line-row > div:first-child, .purchase-line-row > div:nth-child(4), .purchase-line-row > div:nth-child(5) { grid-column: 1 / -1; }
  .purchase-line-row > div > input, .purchase-line-row > div > select { width: 100% !important; }
  .purchase-line-row > .line-subtotal { align-self: end; padding-bottom: 10px; }
  .purchase-line-row > div:last-child { justify-self: end; align-self: end; }

  /* Support ticket header: back / title / badges */
  .ticket-detail-header {
    display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; align-items: start !important;
  }
  .ticket-detail-header > .back-to-list-btn { justify-self: start; margin: 0 !important; }
  .ticket-detail-header h2 { font-size: 18px !important; line-height: 1.3; margin: 0 0 4px !important; }
  .ticket-detail-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start !important; }
  #ticketReplyForm .btn, #ticketReplyForm button[type="submit"] { width: 100%; justify-content: center; }
  .ticket-conversation { max-height: none; }
}

/* ----------------------------------------------------------------------------
   8. Platform Admin shell (platform.html): its own top bar, not the clinic drawer.
      Row 1: brand + language + sign out. Row 2: the section navigation as one
      horizontally scrollable row of 44px chips.
   ---------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .platform-topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px !important;
    padding: calc(8px + var(--qv-safe-top)) var(--qv-gutter) 6px !important;
    position: sticky; top: 0; z-index: 50;
  }
  .platform-brand { grid-column: 1; grid-row: 1; min-width: 0; }
  .platform-brand > div { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .platform-user-area { grid-column: 2; grid-row: 1; display: flex !important; align-items: center; gap: 6px !important; min-width: 0; }
  .platform-user-area .hint { display: none; }
  .platform-nav { grid-column: 1 / -1; grid-row: 2; display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none; gap: 4px !important; padding-bottom: 2px; }
  .platform-nav::-webkit-scrollbar { display: none; }
  .platform-nav button { flex: 0 0 auto; min-height: var(--qv-touch); white-space: nowrap; padding: 8px 14px !important; }
  .platform-main { padding: var(--qv-gutter) !important; min-width: 0; }
  .platform-page-header { gap: 8px !important; }
  .platform-page-header h2 { font-size: 19px; }
  .platform-page-header > .btn, .platform-page-header > div > .btn { flex: 1 1 auto; justify-content: center; }
  .platform-main [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  .perm-checklist, .module-checklist { grid-template-columns: minmax(0, 1fr) !important; max-height: none !important; }
  .perm-group .perm-item, .module-checklist label { min-height: var(--qv-touch); }
  #mdSubNav { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none; }
  #mdSubNav > .tab { flex: 0 0 auto; white-space: nowrap; min-height: var(--qv-touch); }
  .platform-main label { white-space: normal; }
  .platform-main label:has(> input[type="checkbox"]) { white-space: nowrap; flex: 0 0 auto; }
  .platform-main .stat-value { font-size: 16px !important; }
}

/* 768px tablets in portrait keep two-up dashboard cards. */
@media screen and (min-width: 600px) and (max-width: 768px) {
  /* card lists use the width: two cards per row */
  .qv-app-body table:is(.qv-mtable, #qvm) > tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .qv-app-body table:is(.qv-mtable, #qvm) > tbody > tr.qv-mmsg, .qv-app-body table:is(.qv-mtable, #qvm) > tbody > tr.qv-mgroup { grid-column: 1 / -1; }
  .stat-cards-row { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .dashboard-grid-2col { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .dashboard-quick-actions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .patients-stats-row { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}