/* =============================================================================
   responsive-fix.css — GLOBAL MOBILE / TABLET SAFETY NET
   Loaded LAST on every page (after ui-visibility-fix.css). Conservative backstops
   for the systemic responsive issues; page-specific layouts already handle most
   cases, so these only fill gaps and avoid aggressive layout overrides.

   Scope of this file:
   - Kill page-level horizontal scrolling on phones/tablets.
   - Let wide tables scroll INSIDE their wrapper on tablets (not widen the page).
   - Make modals scroll so their footer / save buttons are always reachable.
   - Keep forms, images and media inside the viewport.
   - Guarantee a usable touch target on the primary ACTION buttons only.

   Breakpoints audited: 320 / 375 / 390 / 414 / 480 (phones), 768 / 820 / 1024
   (tablets), 1366 / 1440 / 1920 (desktop — untouched by this file).
   To revert: remove the single <link> to this file.
   ============================================================================= */

/* 1. NO HORIZONTAL SCROLLING on phones + tablets. Mirrors the per-page guard many
      pages already ship; centralised here so every page is covered. Desktop
      (≥1025px) is intentionally left alone. */
@media (max-width: 1024px) {
  html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;overflow-x:clip !important;
  }
}

/* 2. WIDE TABLES scroll inside their own wrapper on TABLET widths (769–1024px),
      where tables stay tabular (phones convert them to cards). Prevents a wide
      table from pushing the whole page sideways. The ≤768px card layout each page
      defines is not touched. */
@media (min-width: 769px) and (max-width: 1024px) {
  .table-wrap, .table-card, .table-responsive, .vb-table-wrap, .td-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* 3. MODALS must scroll so the footer / Save button is never cut off, and never
      exceed the screen. Works for both centred dialogs and bottom-sheets. */
@media (max-width: 767px) {
  .modal, .modal-card, .modal-content, .modal-box, .vb-modal, .vpm-card,
  .modal-overlay > div, .vb-modal-overlay > .vb-modal {
    max-height: 92vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* A sticky action row keeps Save/Cancel visible while the body scrolls. Only
     applies where pages use these conventional footer classes. */
  .modal .modal-actions, .modal-card .modal-actions,
  .vb-modal .save-row, .modal .save-row {
    position: sticky;
    bottom: 0;
    background: inherit;
  }
}

/* 4. FORMS fit the screen — inputs never overflow, labels wrap instead of clipping. */
@media (max-width: 480px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea {
    max-width: 100%;
    box-sizing: border-box;
  }
  label { word-break: break-word; overflow-wrap: anywhere; }
}

/* 5. MEDIA never forces the page wide. (height stays auto only for raster images so
      logos/avatars keep their aspect ratio; icons/svg are left to their own sizing.) */
@media (max-width: 1024px) {
  img { max-width: 100%; }
}

/* 6. TOUCH TARGETS — guarantee a ~44px tap height on the genuine ACTION buttons
      (submit / primary / save / add). Deliberately NOT applied to every .btn so
      dense icon toolbars aren't bloated. */
@media (max-width: 767px) {
  button[type="submit"],
  .btn-primary, .btn-create, .btn-save, .btn-add,
  .add-item, .add-item-wide, .add-custom, .viya-add-product-btn,
  .vpm-btn.primary, .save-row .btn, .modal-actions .btn {
    min-height: 44px;
  }
}


/* ============================================================================
   GLOBAL MOBILE TYPOGRAPHY (<=768px) — single app-wide scale.
   Dashboard mobile is the reference; no app page may use larger fonts than this.
   Scoped to the app shell via :is(.dashboard-shell,.app) so login/signup keep
   their own design, and so it outranks the typical per-page font rules. This file
   is loaded LAST on every page, so it also wins equal-specificity ties.
   ============================================================================ */
@media (max-width: 767px) {
  /* Page title — 18 / 700 */
  :is(.dashboard-shell,.app) h1,
  :is(.dashboard-shell,.app) .page-h1,
  :is(.dashboard-shell,.app) .page-head h1,
  :is(.dashboard-shell,.app) .page-title { font-size:18px !important; font-weight:700 !important; line-height:1.2 !important; }

  /* Page description / subtitle — 12 / 400 */
  :is(.dashboard-shell,.app) .subtitle,
  :is(.dashboard-shell,.app) .page-head p,
  :is(.dashboard-shell,.app) .page-head .sub,
  :is(.dashboard-shell,.app) .page-sub,
  :is(.dashboard-shell,.app) .hero p { font-size:12px !important; font-weight:400 !important; line-height:1.35 !important; }

  /* Section / list-card headers — 16 / 700 */
  :is(.dashboard-shell,.app) h2,
  :is(.dashboard-shell,.app) .section-title,
  :is(.dashboard-shell,.app) .card-title,
  :is(.dashboard-shell,.app) .card-head h2,
  :is(.dashboard-shell,.app) .panel-head h2 { font-size:16px !important; font-weight:700 !important; }

  /* KPI card title — 11 / 600 */
  :is(.dashboard-shell,.app) .summary-card span,
  :is(.dashboard-shell,.app) .metric h3,
  :is(.dashboard-shell,.app) .stat h3 { font-size:11px !important; font-weight:600 !important; }

  /* KPI card value — 18 / 700 */
  :is(.dashboard-shell,.app) .summary-card strong,
  :is(.dashboard-shell,.app) .metric h2,
  :is(.dashboard-shell,.app) .stat .value { font-size:18px !important; font-weight:700 !important; }

  /* KPI card subtitle — 10 / 400 */
  :is(.dashboard-shell,.app) .summary-card small,
  :is(.dashboard-shell,.app) .metric p,
  :is(.dashboard-shell,.app) .stat p { font-size:10px !important; font-weight:400 !important; }

  /* Buttons — 13 / 600 */
  :is(.dashboard-shell,.app) .btn { font-size:13px !important; font-weight:600 !important; }

  /* Inputs / dropdowns / search — 13 */
  :is(.dashboard-shell,.app) input,
  :is(.dashboard-shell,.app) select,
  :is(.dashboard-shell,.app) textarea,
  :is(.dashboard-shell,.app) .vb-filter-search,
  :is(.dashboard-shell,.app) .vb-filter-select,
  :is(.dashboard-shell,.app) .search input { font-size:13px !important; }

  /* Table headers 12 / values 13 */
  :is(.dashboard-shell,.app) th { font-size:12px !important; }
  :is(.dashboard-shell,.app) td { font-size:13px !important; }

  /* Status badges — 11 */
  :is(.dashboard-shell,.app) .pill,
  :is(.dashboard-shell,.app) .badge,
  :is(.dashboard-shell,.app) .status-badge,
  :is(.dashboard-shell,.app) .vb-tab-count { font-size:11px !important; }

  /* Tabs / chips — 11 */
  :is(.dashboard-shell,.app) .vb-tab { font-size:11px !important; }

  /* Quick action labels — 11 */
  :is(.dashboard-shell,.app) .quick-tile,
  :is(.dashboard-shell,.app) .quick-action span,
  :is(.dashboard-shell,.app) .quick-action small { font-size:11px !important; }

  /* Entity emphasis: names 14, invoice numbers 13, amounts 14 */
  :is(.dashboard-shell,.app) .customer-name,
  :is(.dashboard-shell,.app) .trip-name,
  :is(.dashboard-shell,.app) .cust-name { font-size:14px !important; }
  :is(.dashboard-shell,.app) .invoice-no,
  :is(.dashboard-shell,.app) .inv-no,
  :is(.dashboard-shell,.app) .invoice-number { font-size:13px !important; }
  :is(.dashboard-shell,.app) .amount,
  :is(.dashboard-shell,.app) .amt { font-size:14px !important; }
}


/* ============================================================================
   GLOBAL MOBILE UI CONSISTENCY (<=768px) — Dashboard is the master reference.
   Uniform card size / radius / padding / shadow / spacing + compact buttons +
   2-col summary grids across every app page. Scoped to .dashboard-shell, which
   the Dashboard itself does NOT use (it uses .app) — so the master page stays
   unchanged, and login/signup (neither wrapper) keep their own design.
   Loaded LAST on every page, so it also wins equal-specificity ties.
   ============================================================================ */
@media (max-width: 767px) {
  /* No app page scrolls sideways */
  .dashboard-shell { overflow-x:hidden !important; }

  /* Summary / KPI rows -> 2 compact cards per row (dashboard look) */
  .dashboard-shell .summary-grid,
  .dashboard-shell .metrics,
  .dashboard-shell .type-grid,
  .dashboard-shell .vb-summary-grid {
    display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important; margin-bottom:12px !important;
  }
  .dashboard-shell .summary-card,
  .dashboard-shell .metric,
  .dashboard-shell .type-card {
    min-height:90px !important; padding:10px !important; border-radius:12px !important;
    box-shadow:0 4px 14px rgba(15,23,42,.05) !important; gap:8px !important;
  }
  .dashboard-shell .sum-icon,
  .dashboard-shell .micon,
  .dashboard-shell .type-icon {
    width:36px !important; height:36px !important; min-width:36px !important;
    border-radius:10px !important; font-size:20px !important; flex:0 0 auto !important;
  }

  /* Generic content cards / panels -> one consistent box */
  .dashboard-shell .card:not(.chart-card):not(.summary-card):not(.metric):not(.type-card),
  .dashboard-shell .panel,
  .dashboard-shell .tool-card,
  .dashboard-shell .table-shell,
  .dashboard-shell .table-card,
  .dashboard-shell .type-panel,
  .dashboard-shell .vb-card {
    padding:12px !important; border-radius:14px !important;
    box-shadow:0 4px 14px rgba(15,23,42,.05) !important; margin-bottom:10px !important;
  }

  /* Buttons compact on phone (32-36px); icons small */
  .dashboard-shell .btn,
  .dashboard-shell .vb-mobile-btn {
    height:36px !important; min-height:36px !important; padding:0 12px !important;
    border-radius:10px !important; gap:6px !important;
  }
  .dashboard-shell .btn i,
  .dashboard-shell .btn svg { font-size:15px !important; }

  /* Action rows wrap (never force the whole page to scroll sideways) */
  .dashboard-shell .head-actions,
  .dashboard-shell .actions,
  .dashboard-shell .vb-action-row {
    display:flex !important; flex-wrap:wrap !important; gap:8px !important; align-items:center !important;
  }
  .dashboard-shell .head-actions .btn,
  .dashboard-shell .actions .btn { width:auto !important; flex:0 1 auto !important; }

  /* Kill large empty gaps between title / cards / filters / lists */
  .dashboard-shell .main-content > section,
  .dashboard-shell .page-head { margin-bottom:12px !important; }

  /* Bottom-nav clearance: forms/lists never hide behind the floating nav */
  .dashboard-shell .main-content,
  .dashboard-shell .main,
  .dashboard-shell .content {
    padding-bottom:calc(92px + env(safe-area-inset-bottom,0px)) !important;
  }
}

/* ---- Reusable ViyaBook shared components (usable on any page, any width) ---- */
.vb-page { padding:18px 26px; }
.vb-card { background:var(--card,#fff); border:1px solid var(--border,#e5edf7); border-radius:14px; padding:14px; box-shadow:0 4px 14px rgba(15,23,42,.05); }
.vb-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.vb-page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.vb-action-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.vb-mobile-btn { height:38px; padding:0 16px; border-radius:10px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; }
@media (max-width: 767px) {
  .vb-page { padding:12px 14px calc(92px + env(safe-area-inset-bottom,0px)); }
  .vb-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .vb-mobile-btn { height:36px; padding:0 12px; font-size:13px; }
}

/* ============================================================================
   SHARED MOBILE SUMMARY CARDS
   Trip Detail mobile cards are the reference. This maps only confirmed
   summary/stat card structures to that same 2x2 card system.
   ============================================================================ */
.mobile-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.mobile-summary-card { background:#fff; border:1px solid var(--border,#e5edf7); box-shadow:var(--shadow,0 14px 40px rgba(15,23,42,.07)); }
.mobile-summary-content { min-width:0; }
.mobile-summary-value-row,
.mobile-summary-value,
.mobile-summary-currency { direction:ltr; unicode-bidi:isolate; font-family:Inter,Arial,sans-serif; }

@media (max-width: 767px) {
  .mobile-summary-grid,
  html body .vbd-cards,
  html body .dashboard-shell .summary-grid:has(> .summary),
  html body .dashboard-shell .summary-grid:has(> .summary-card),
  html body .dashboard-shell .summary-grid:has(> .metric-card),
  html body .dashboard-shell .metrics:has(> .metric),
  html body .dashboard-shell .stats-grid:has(> .stat-card),
  html body .dashboard-shell .stat-cards:has(> .stat-card),
  html body .dashboard-shell .stat-row:has(> .stat-card) {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
    width:100% !important;
    padding-inline:6px !important;
    box-sizing:border-box !important;
    align-items:stretch !important;
  }

  .mobile-summary-card,
  html body .vbd-cards > .vbd-card,
  html body .dashboard-shell .summary-grid > .summary,
  html body .dashboard-shell .summary-grid > .summary-card,
  html body .dashboard-shell .summary-grid > .metric-card,
  html body .dashboard-shell .metrics > .metric,
  html body .dashboard-shell .stats-grid > .stat-card,
  html body .dashboard-shell .stat-cards > .stat-card,
  html body .dashboard-shell .stat-row > .stat-card {
    height:112px !important;
    min-height:112px !important;
    width:100% !important;
    min-width:0 !important;
    padding:12px 14px !important;
    border-radius:18px !important;
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 40px !important;
    grid-template-rows:auto auto 1fr !important;
    column-gap:8px !important;
    row-gap:0 !important;
    align-items:stretch !important;
    overflow:hidden !important;
  }

  .mobile-summary-content,
  html body .vbd-card-top,
  html body .dashboard-shell .stat-card .stat-top {
    display:contents !important;
  }

  html body .dashboard-shell .summary > div:not(.sicon),
  html body .dashboard-shell .summary-card > div:not(.sum-icon),
  html body .dashboard-shell .metric-card > div:not(.metric-icon),
  html body .dashboard-shell .metric > div:not(.micon),
  html body .dashboard-shell .stat-row > .stat-card > .stat-body,
  html body .dashboard-shell .stats-grid > .stat-card > div:not(.stat-icon):not(.stat-top),
  html body .dashboard-shell .stat-cards > .stat-card .stat-top > div:not(.stat-icon) {
    grid-column:1 !important;
    grid-row:1 / 4 !important;
    min-width:0 !important;
    height:100% !important;
    display:grid !important;
    grid-template-rows:auto auto 1fr !important;
    align-self:stretch !important;
  }

  .mobile-summary-title,
  html body .vbd-card-top > span:first-child,
  html body .dashboard-shell .summary span,
  html body .dashboard-shell .summary-card span,
  html body .dashboard-shell .metric-card h3,
  html body .dashboard-shell .metric h3,
  html body .dashboard-shell .stat-card .stat-label,
  html body .dashboard-shell .stats-grid > .stat-card span,
  html body .dashboard-shell .stat-cards > .stat-card span,
  html body .dashboard-shell .stat-row > .stat-card .stat-label {
    grid-column:1 !important;
    grid-row:1 !important;
    margin:0 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    text-transform:none !important;
    letter-spacing:0 !important;
    font-family:Inter,Arial,sans-serif !important;
    font-size:15px !important;
    line-height:1.15 !important;
    font-weight:700 !important;
  }

  .mobile-summary-value-row,
  .mobile-summary-value,
  html body .vbd-card .vbd-amt,
  html body .dashboard-shell .summary strong,
  html body .dashboard-shell .summary-card strong,
  html body .dashboard-shell .metric-card h2,
  html body .dashboard-shell .metric h2,
  html body .dashboard-shell .stat-card .stat-value,
  html body .dashboard-shell .stats-grid > .stat-card strong,
  html body .dashboard-shell .stat-cards > .stat-card h2,
  html body .dashboard-shell .stat-row > .stat-card .stat-value {
    grid-column:1 !important;
    grid-row:2 !important;
    margin:6px 0 0 !important;
    font-family:Inter,Arial,sans-serif !important;
    font-size:15px !important;
    line-height:1 !important;
    font-weight:700 !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:clip !important;
    overflow-wrap:normal !important;
    word-break:keep-all !important;
    direction:ltr !important;
    unicode-bidi:isolate !important;
    font-variant-numeric:tabular-nums !important;
  }

  .mobile-summary-currency {
    font-family:Inter,Arial,sans-serif !important;
    font-size:10px !important;
    line-height:1 !important;
    font-weight:600 !important;
    white-space:nowrap !important;
  }

  .mobile-summary-meta,
  html body .vbd-card .vbd-trend,
  html body .dashboard-shell .summary .sub,
  html body .dashboard-shell .summary-card small,
  html body .dashboard-shell .metric-card p,
  html body .dashboard-shell .metric p,
  html body .dashboard-shell .stat-card .stat-sub,
  html body .dashboard-shell .stat-cards > .stat-card .stat-foot,
  html body .dashboard-shell .stat-row > .stat-card .stat-sub {
    grid-column:1 !important;
    grid-row:3 !important;
    align-self:end !important;
    margin:4px 0 0 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    letter-spacing:0 !important;
    font-family:Inter,Arial,sans-serif !important;
    font-size:9px !important;
    line-height:1.1 !important;
    font-weight:700 !important;
  }

  .mobile-summary-icon,
  html body .vbd-card .vbd-ci,
  html body .dashboard-shell .summary .sicon,
  html body .dashboard-shell .summary-card .sum-icon,
  html body .dashboard-shell .metric-card .metric-icon,
  html body .dashboard-shell .metric .micon,
  html body .dashboard-shell .stat-card .stat-icon {
    grid-column:2 !important;
    grid-row:1 / 4 !important;
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    border-radius:12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    align-self:center !important;
    justify-self:end !important;
    flex:0 0 40px !important;
    font-size:19px !important;
    line-height:1 !important;
  }

  .mobile-summary-icon i,
  .mobile-summary-icon svg,
  html body .vbd-card .vbd-ci i,
  html body .vbd-card .vbd-ci svg,
  html body .dashboard-shell .summary .sicon i,
  html body .dashboard-shell .summary .sicon svg,
  html body .dashboard-shell .summary-card .sum-icon i,
  html body .dashboard-shell .summary-card .sum-icon svg,
  html body .dashboard-shell .metric-card .metric-icon i,
  html body .dashboard-shell .metric-card .metric-icon svg,
  html body .dashboard-shell .metric .micon i,
  html body .dashboard-shell .metric .micon svg,
  html body .dashboard-shell .stat-card .stat-icon i,
  html body .dashboard-shell .stat-card .stat-icon svg {
    width:19px !important;
    height:19px !important;
    font-size:19px !important;
    line-height:1 !important;
  }

  html[lang="dv"] .mobile-summary-title,
  html[lang="dv"] body .vbd-card-top > span:first-child,
  html[lang="dv"] body .dashboard-shell .summary span,
  html[lang="dv"] body .dashboard-shell .summary-card span,
  html[lang="dv"] body .dashboard-shell .metric-card h3,
  html[lang="dv"] body .dashboard-shell .metric h3,
  html[lang="dv"] body .dashboard-shell .stat-card .stat-label,
  html[lang="dv"] body .dashboard-shell .stats-grid > .stat-card span,
  html[lang="dv"] body .dashboard-shell .stat-cards > .stat-card span,
  html[lang="dv"] body .dashboard-shell .stat-row > .stat-card .stat-label {
    font-family:"MV Waheed",Inter,Arial,sans-serif !important;
    font-size:20px !important;
    line-height:1.05 !important;
    font-weight:400 !important;
    direction:rtl !important;
    text-align:start !important;
  }

  html[lang="dv"] .mobile-summary-meta:lang(dv) {
    font-family:"MV Waheed",Inter,Arial,sans-serif !important;
    font-size:14px !important;
    line-height:1.05 !important;
    font-weight:400 !important;
  }
}

@media (max-width: 359px) {
  .mobile-summary-grid,
  html body .vbd-cards,
  html body .dashboard-shell .summary-grid:has(> .summary),
  html body .dashboard-shell .summary-grid:has(> .summary-card),
  html body .dashboard-shell .summary-grid:has(> .metric-card),
  html body .dashboard-shell .metrics:has(> .metric),
  html body .dashboard-shell .stats-grid:has(> .stat-card),
  html body .dashboard-shell .stat-cards:has(> .stat-card),
  html body .dashboard-shell .stat-row:has(> .stat-card) {
    gap:8px !important;
    padding-inline:4px !important;
  }

  .mobile-summary-card,
  html body .vbd-cards > .vbd-card,
  html body .dashboard-shell .summary-grid > .summary,
  html body .dashboard-shell .summary-grid > .summary-card,
  html body .dashboard-shell .summary-grid > .metric-card,
  html body .dashboard-shell .metrics > .metric,
  html body .dashboard-shell .stats-grid > .stat-card,
  html body .dashboard-shell .stat-cards > .stat-card,
  html body .dashboard-shell .stat-row > .stat-card {
    height:106px !important;
    min-height:106px !important;
    padding:10px 12px !important;
    grid-template-columns:minmax(0,1fr) 36px !important;
  }

  .mobile-summary-title,
  html body .vbd-card-top > span:first-child,
  html body .dashboard-shell .summary span,
  html body .dashboard-shell .summary-card span,
  html body .dashboard-shell .metric-card h3,
  html body .dashboard-shell .metric h3,
  html body .dashboard-shell .stat-card .stat-label,
  html body .dashboard-shell .stats-grid > .stat-card span,
  html body .dashboard-shell .stat-cards > .stat-card span,
  html body .dashboard-shell .stat-row > .stat-card .stat-label {
    font-size:14px !important;
  }

  html[lang="dv"] .mobile-summary-title,
  html[lang="dv"] body .vbd-card-top > span:first-child,
  html[lang="dv"] body .dashboard-shell .summary span,
  html[lang="dv"] body .dashboard-shell .summary-card span,
  html[lang="dv"] body .dashboard-shell .metric-card h3,
  html[lang="dv"] body .dashboard-shell .metric h3,
  html[lang="dv"] body .dashboard-shell .stat-card .stat-label,
  html[lang="dv"] body .dashboard-shell .stats-grid > .stat-card span,
  html[lang="dv"] body .dashboard-shell .stat-cards > .stat-card span,
  html[lang="dv"] body .dashboard-shell .stat-row > .stat-card .stat-label {
    font-size:18px !important;
  }

  .mobile-summary-value,
  html body .vbd-card .vbd-amt,
  html body .dashboard-shell .summary strong,
  html body .dashboard-shell .summary-card strong,
  html body .dashboard-shell .metric-card h2,
  html body .dashboard-shell .metric h2,
  html body .dashboard-shell .stat-card .stat-value,
  html body .dashboard-shell .stats-grid > .stat-card strong,
  html body .dashboard-shell .stat-cards > .stat-card h2,
  html body .dashboard-shell .stat-row > .stat-card .stat-value {
    font-size:14px !important;
  }

  .mobile-summary-meta,
  html body .vbd-card .vbd-trend,
  html body .dashboard-shell .summary .sub,
  html body .dashboard-shell .summary-card small,
  html body .dashboard-shell .metric-card p,
  html body .dashboard-shell .metric p,
  html body .dashboard-shell .stat-card .stat-sub,
  html body .dashboard-shell .stat-cards > .stat-card .stat-foot,
  html body .dashboard-shell .stat-row > .stat-card .stat-sub {
    font-size:8px !important;
  }

  .mobile-summary-icon,
  html body .vbd-card .vbd-ci,
  html body .dashboard-shell .summary .sicon,
  html body .dashboard-shell .summary-card .sum-icon,
  html body .dashboard-shell .metric-card .metric-icon,
  html body .dashboard-shell .metric .micon,
  html body .dashboard-shell .stat-card .stat-icon {
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    flex-basis:36px !important;
  }

  .mobile-summary-icon i,
  .mobile-summary-icon svg,
  html body .vbd-card .vbd-ci i,
  html body .vbd-card .vbd-ci svg,
  html body .dashboard-shell .summary .sicon i,
  html body .dashboard-shell .summary .sicon svg,
  html body .dashboard-shell .summary-card .sum-icon i,
  html body .dashboard-shell .summary-card .sum-icon svg,
  html body .dashboard-shell .metric-card .metric-icon i,
  html body .dashboard-shell .metric-card .metric-icon svg,
  html body .dashboard-shell .metric .micon i,
  html body .dashboard-shell .metric .micon svg,
  html body .dashboard-shell .stat-card .stat-icon i,
  html body .dashboard-shell .stat-card .stat-icon svg {
    width:17px !important;
    height:17px !important;
    font-size:17px !important;
  }
}

/* Final conflict guards for late page-specific summary rules. */
@media (max-width: 767px) {
  html body.trips-page .dashboard-shell .metrics > .metric h3 {
    font-family:Inter,Arial,sans-serif !important;
    font-size:15px !important;
    line-height:1.15 !important;
    font-weight:700 !important;
    margin:0 !important;
    padding:0 !important;
  }
  html body.trips-page .dashboard-shell .metrics > .metric h2,
  html[lang="dv"] body.trips-page .dashboard-shell .metrics > .metric h2 {
    font-family:Inter,Arial,sans-serif !important;
    font-size:15px !important;
    line-height:1 !important;
    font-weight:700 !important;
    margin:6px 0 0 !important;
    direction:ltr !important;
    unicode-bidi:isolate !important;
  }
  html body.trips-page .dashboard-shell .metrics > .metric p,
  html[lang="dv"] body.trips-page .dashboard-shell .metrics > .metric p {
    font-family:Inter,Arial,sans-serif !important;
    font-size:9px !important;
    line-height:1.1 !important;
    font-weight:700 !important;
    margin:4px 0 0 !important;
  }
  html[lang="dv"] body.trips-page .dashboard-shell .metrics > .metric h3 {
    font-family:"MV Waheed",Inter,Arial,sans-serif !important;
    font-size:20px !important;
    line-height:1.05 !important;
    font-weight:400 !important;
  }
  html[lang="dv"] body .dashboard-shell .stats-grid:has(> .stat-card) > .stat-card,
  html.viya-dv body .dashboard-shell .stats-grid:has(> .stat-card) > .stat-card,
  body.lang-dv .dashboard-shell .stats-grid:has(> .stat-card) > .stat-card {
    height:112px !important;
    min-height:112px !important;
  }
}
@media (max-width: 359px) {
  html body.trips-page .dashboard-shell .metrics > .metric h3 { font-size:14px !important; }
  html[lang="dv"] body.trips-page .dashboard-shell .metrics > .metric h3 { font-size:18px !important; }
  html body.trips-page .dashboard-shell .metrics > .metric h2,
  html[lang="dv"] body.trips-page .dashboard-shell .metrics > .metric h2 { font-size:14px !important; }
  html body.trips-page .dashboard-shell .metrics > .metric p,
  html[lang="dv"] body.trips-page .dashboard-shell .metrics > .metric p { font-size:8px !important; }
  html[lang="dv"] body .dashboard-shell .stats-grid:has(> .stat-card) > .stat-card,
  html.viya-dv body .dashboard-shell .stats-grid:has(> .stat-card) > .stat-card,
  body.lang-dv .dashboard-shell .stats-grid:has(> .stat-card) > .stat-card {
    height:106px !important;
    min-height:106px !important;
  }
}

/* Mobile summary cards: keep layout LTR so icons stay on the visual right in Dhivehi. */
@media (max-width: 767px) {
  html body .vbd-cards,
  html body .vbd-cards > .vbd-card,
  html body .dashboard-shell .summary-grid:has(> .summary),
  html body .dashboard-shell .summary-grid:has(> .summary-card),
  html body .dashboard-shell .summary-grid:has(> .metric-card),
  html body .dashboard-shell .metrics:has(> .metric),
  html body .dashboard-shell .stats-grid:has(> .stat-card),
  html body .dashboard-shell .stat-cards:has(> .stat-card),
  html body .dashboard-shell .stat-row:has(> .stat-card),
  html body .dashboard-shell .summary-grid > .summary,
  html body .dashboard-shell .summary-grid > .summary-card,
  html body .dashboard-shell .summary-grid > .metric-card,
  html body .dashboard-shell .metrics > .metric,
  html body .dashboard-shell .stats-grid > .stat-card,
  html body .dashboard-shell .stat-cards > .stat-card,
  html body .dashboard-shell .stat-row > .stat-card {
    direction:ltr !important;
    text-align:start !important;
  }

  html[lang="dv"] body .vbd-cards .vbd-card-top > span:first-child,
  html[lang="dv"] body .dashboard-shell .summary span,
  html[lang="dv"] body .dashboard-shell .summary-card span,
  html[lang="dv"] body .dashboard-shell .metric-card h3,
  html[lang="dv"] body .dashboard-shell .metric h3,
  html[lang="dv"] body .dashboard-shell .stat-card .stat-label,
  html[lang="dv"] body .dashboard-shell .stats-grid > .stat-card span,
  html[lang="dv"] body .dashboard-shell .stat-cards > .stat-card span,
  html[lang="dv"] body .dashboard-shell .stat-row > .stat-card .stat-label {
    direction:rtl !important;
    text-align:start !important;
  }

  html body .vbd-cards .vbd-amt,
  html body .dashboard-shell .summary strong,
  html body .dashboard-shell .summary-card strong,
  html body .dashboard-shell .metric-card h2,
  html body .dashboard-shell .metric h2,
  html body .dashboard-shell .stat-card .stat-value,
  html body .dashboard-shell .stats-grid > .stat-card strong,
  html body .dashboard-shell .stat-cards > .stat-card h2,
  html body .dashboard-shell .stat-row > .stat-card .stat-value {
    direction:ltr !important;
    text-align:start !important;
    unicode-bidi:isolate !important;
  }
}