/* vantage-mobile-layout.css
   Injected by includes/hooks/vantage_mobile_layout.php via ClientAreaHeadOutput.
   Lives in the vantage-owned theme directory because static assets are served
   regardless of which theme is ACTIVE — so templates/twenty-one/ stays pristine
   WHMCS code and this survives a WHMCS upgrade.

   Fixes (verified 2026-08-05 by CDP measurement at 768px and 480px):
   1. footer.tpl:4-7 emits <div class="d-lg-none sidebar sidebar-secondary">, which
      includes/sidebar.tpl:13-14's render-once $vantageSidebarRendered global guard
      leaves empty on every include past header.tpl's.
   2. Below lg, aside#vantage-sidebar goes position:fixed/left:-280px (off-canvas
      nav), leaving an empty wrapper that vantage-layout-v2.css:928-933's UNSCOPED
      "#main-body .sidebar { background-color:var(--card); height:100% }" paints as
      a full-height blank panel.
   3. .col-lg-4.col-xl-3 retained height:661px from the height:100% shell cascade
      even after 1 and 2 collapsed, pushing .primary-content to top=805 in a 900px
      viewport — only ~95px of dashboard visible.

   Measured: sidebarCol 754x661 -> 754x0; primary-content top 805 -> 143.

   The column is deliberately NOT display:none — the off-canvas drawer is a
   position:fixed DESCENDANT and display:none on an ancestor destroys the whole
   subtree including fixed children, which would delete the mobile nav (verified
   present: 280x900, 26 links). Collapse the column's height instead. */

#main-body > .container > .sidebar.sidebar-secondary {
  display: none !important;
}

/* G7(d) fix (2026-08-05, CDP-measured): a THIRD sidebar.tpl include renders
   inside the same .col-lg-4.col-xl-3 column as the real desktop sidebar,
   wrapped ".sidebar.d-none.d-lg-block". includes/sidebar.tpl's render-once
   $vantageSidebarRendered guard leaves it with 0 children on every pass past
   the first, but at lg+ (>=992px) "d-lg-block" makes it display:block again,
   so it still carries the real sidebar's full column height (857px @1440,
   3545px pre-shell-fix) as dead, empty layout weight -- confirmed 0 children
   at 3440/1920/1440/1120px via getBoundingClientRect + children.length.
   Safe to display:none unconditionally: 0 children means no fixed-position
   descendant (e.g. the off-canvas mobile drawer) can be hiding inside it,
   unlike the .col-lg-4.col-xl-3 ancestor column itself (see notes above --
   that one stays visible on purpose). Revert = delete this block. */
.sidebar.d-none.d-lg-block {
  display: none !important;
}

@media (max-width: 991.98px) {
  #main-body .sidebar {
    background-color: transparent !important;
    border-right: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }
  #main-body .row > .col-lg-4.col-xl-3 {
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
  }
}

/* ---------------------------------------------------------------------------
   Client-area dashboard: single-row stat grid + banner spacing
   Source: operator DevTools session 2026-08-05, applied here rather than in
   templates/twenty-one/css/custom.css so the WHMCS-owned parent theme stays
   pristine and this survives a WHMCS upgrade.

   custom.css:1838 already sets a sensible base:
       grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   but custom.css:3067 (<=992px -> repeat(2,1fr)) and :3096 (<=768px -> 1fr)
   hard-override it and collapse the row. This file loads AFTER custom.css in
   the ClientAreaHeadOutput cascade (priority 9998), so plain selectors of equal
   specificity win on source order — no !important needed for the grid itself.

   The minmax floor is dropped to 100px rather than pinning repeat(4,1fr)
   unconditionally: below ~440px of container width, four 100px tracks stop
   fitting and auto-fit wraps gracefully instead of overflowing. That is the
   operator's own stated fallback ("consider auto-fit minmax(100px,1fr) to allow
   natural wrapping while maintaining card integrity").
   --------------------------------------------------------------------------- */
.vantage-stats-grid {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 992px) {
  .vantage-stats-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 768px) {
  .vantage-stats-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
}

/* Below this the four tracks can no longer hold their contents. auto-fit was
   measured to yield 3+1 at 390px, which leaves an orphan card; an explicit 2x2
   is the better phone layout and keeps card widths equal. */
@media (max-width: 439px) {
  .vantage-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Vertical, centred stat cards */
.vantage-stat-card {
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px;
}

.vantage-stat-content {
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.vantage-stat-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
}

.vantage-stat-icon i { font-size: 24px; }

.vantage-stat-value {
  font-size: 28px;
  font-weight: 800;
}

.vantage-stat-label {
  font-size: 12px;
  font-weight: 600;
  white-space: normal;
  text-transform: uppercase;
}

/* Breadcrumb -> banner gap measured at 1px; restore vertical rhythm. */
.vantage-welcome-banner { margin-top: 32px; }