/* ============================================================
   RESPONSIVE.CSS
   All @media breakpoint rules extracted from theme.css, in one place.

   Scope: responsive-only. Base/default styles (colors, spacing, layout
   at the default viewport) stay in theme.css — this file only ever
   narrows/reflows things at specific breakpoints. Every page that loads
   theme.css should also load this file (right after it) so nothing
   here silently stops applying.

   Load order matters: this file must come AFTER theme.css in every
   <link> chain, so its breakpoint overrides win the cascade against
   theme.css's base (same-specificity) rules.

   Ordered widest-to-narrowest (matches theme.css's original layering
   convention) so the cascade stays predictable at every width in
   between. Blocks are tagged [PAGE: ...] / [SHARED: ...] / [GLOBAL]
   per the pages/components they affect, carried over from theme.css.
   ============================================================ */

/* [GLOBAL utility, same reach as .section-title above] */

 
@media (max-width: 640px) {
   .section-title { font-size: 13px; line-height: 24px; }
  .intake-form-wrap .ds-card { padding: 24px; }
  .callout-name { line-height: 28px;} 
.callout-body { flex-direction: column; align-items: flex-start; }
.admin-topbar-actions { margin: 0 auto;}
.card-dropdown-label { font-size: 16px; }

}

@media (min-width: 1500px) and (max-width: 1599px) {

.admin-topbar-header { width: 60%;}
.stat-card { padding: 30px 16px; justify-content: center; flex-direction: column;  text-align: center; flex-direction: column; }
#adminName { font-size: 13px; }
.seg-btn { padding: 8px 27px; }



}

@media (min-width: 1400px) and (max-width: 1499px) {

.admin-topbar-header { width: 55%;}
.stat-card { padding: 30px 16px; justify-content: center; flex-direction: column;  text-align: center; flex-direction: column; }
#statStrip .section-title { font-size: 14px; }
.tenant-console-onboarding-wrap .ds-card { padding: 50px; }
#adminName { font-size: 13px; }
.seg-btn { padding: 8px 20px; }

}

@media (min-width: 1300px) and (max-width: 1399px) {

.admin-topbar-header { width: 100%;}
.stat-card { padding: 30px 16px; justify-content: center; flex-direction: column;  text-align: center; flex-direction: column; }
#statStrip .section-title { font-size: 14px; }
.admin-topbar-actions { flex-direction: row; align-items: center; }
.tenant-console-onboarding-wrap .ds-card { padding: 50px; }
.hub-card { max-width: 100%; }

}

@media (min-width: 1200px) and (max-width: 1299px) {

.admin-topbar-header { width: 100%; padding-top: 0; max-width: 100%;}
.stat-card { padding: 30px 16px; justify-content: center; flex-direction: column;  text-align: center; flex-direction: column; }
#statStrip .section-title { font-size: 14px; }
.admin-topbar-actions { flex-direction: row; align-items: center; }
.btn-signout, .admin-topbar .btn-primary { font-size: 18px;  }
.admin-sidebar-brand { padding: 20px; }
.tenant-console-onboarding-wrap .ds-card { padding: 30px; }
.hub-card { max-width: 100%; }
.callouts-row { grid-template-columns: 1fr;}


}

@media (min-width: 1100px) and (max-width: 1199px) {

.admin-topbar-header { width: 100%; padding-top: 0; max-width: 100%;}
.stat-card { padding: 30px 16px; justify-content: center; flex-direction: column;  text-align: center; flex-direction: column; }
#statStrip .section-title { font-size: 14px; }
.admin-topbar-actions { flex-direction: row; align-items: center; margin: 0; }
.btn-signout, .admin-topbar .btn-primary { font-size: 16px;  }
.admin-admin-chip-text { display: none; }
.admin-sidebar-brand { padding: 20px; }
.tenant-console-onboarding-wrap .ds-card { padding: 30px; }
.hub-card { max-width: 100%; }
.callouts-row { grid-template-columns: 1fr;}
 
}

@media (min-width: 1025px) and (max-width: 1099px) {

.admin-topbar-header { width: 100%; padding-top: 0; max-width: 100%;}
.stat-card { padding: 30px 16px; justify-content: center; flex-direction: column;  text-align: center; flex-direction: column; }
#statStrip .section-title { font-size: 14px; }
.admin-topbar-actions { flex-direction: row; align-items: center; margin: 0; }
.btn-signout, .admin-topbar .btn-primary { font-size: 16px;  }
.admin-admin-chip-text { display: none; } 
.admin-topbar-actions-row .btn-primary svg { display: none;}
.admin-sidebar-brand { padding: 20px; }
.tenant-console-onboarding-wrap .ds-card { padding: 30px; }
.hub-card { max-width: 100%; }
.ds-card { padding: 50px; }
.admin-topbar-header { max-width: 100%; }

}

@media (min-width: 993px) and (max-width: 1024px) {

.admin-topbar-header { width: 100%; padding-top: 0; max-width: 100%;}
.stat-card { padding: 30px 16px; justify-content: center; flex-direction: column;  text-align: center; flex-direction: column; }
#statStrip .section-title { font-size: 14px; }
.admin-topbar-actions { flex-direction: row; align-items: center; margin: 0;  }
.btn-signout, .admin-topbar .btn-primary { font-size: 16px;  }
.admin-admin-chip-text { display: none; } 
.admin-topbar-actions-row .btn-primary svg { display: none;}
.admin-sidebar-brand { padding: 20px; }
.tenant-console-onboarding-wrap .ds-card { padding: 20px; }
.hub-card { max-width: 100%; }
.ds-card { padding: 50px; }
.admin-topbar-header { max-width: 100%; }
.admin-admin-chip-text {  display: none; }


}

/* 1024px: sidebar becomes an off-canvas mobile drawer.  [PAGE: admin] */
@media (max-width: 1024px) {
  .admin-sidebar {
    position: fixed; left: 0; top: 0; transform: translateX(-100%); box-shadow: 0 12px 32px rgba(16,24,40,0.18);
  }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-sidebar-backdrop.open {
    display: block; position: fixed; inset: 0; background: rgba(15,23,42,0.4); z-index: 29;
  }
  .admin-mobile-toggle { display: inline-flex; }
  .admin-icon-btn.admin-sidebar-close { display: inline-flex; }
  .admin-topbar { padding: 18px 20px 0; }
  .admin-content { padding: 16px 20px 48px; }
  /* [PAGE: onboard-tenant.html] — the sidebar going off-canvas frees up
     width, but the form card's 160px side padding is still excessive
     once there's no sidebar column eating into the layout either way. */
  .tenant-console-onboarding-wrap .ds-card { padding: 40px 60px; }
  .status-banner.info.tenant-console-onboarding { padding: 28px 40px; min-height: auto; }
  .hub-card { max-width: 100%; } 
  .admin-admin-chip-text {  display: none; }
  
}

 
@media (max-width: 1300px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }              /* SHARED */
  .ai-card-graphic { width: auto; height: auto; }                    /* PAGE: admin */
  .ai-card-row { gap: 20px; flex-direction: column; align-items: flex-start; } /* PAGE: admin */
  .admin-sidebar-brand img { height: 80px; }                         /* PAGE: admin */
  .two-col { grid-template-columns: 1fr;}                            /* SHARED: admin + report */
  .lb-bar { margin: 0 40px; }
  /* [PAGE: report.html] the 7-button range segmented control (Today/
     Yesterday/.../Custom) was wrapping onto multiple rows below 1300px via
     .segmented's own flex-wrap — scroll it horizontally on one row instead.
     Scoped to .report-filters-row so reset-pin.html's .segmented (2 buttons,
     never wraps) is untouched. */
  .report-filters-row .segmented { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .report-filters-row .seg-btn { flex-shrink: 0; }
}

/* Was tagged [PAGE: admin] and written with only admin-console.html in
   mind, but .admin-topbar-actions/.admin-topbar-header are the shared
   topbar partial's own classes — every tenant-staff page (dashboard,
   report, send-queue, intake, my-qr, reset-staff-pin, onboarding) uses
   the exact same markup, so this was never actually scoped to admin-only
   and applied everywhere below 992px regardless of page. The
   justify-content:center!important/align-items:center!important pair
   below (now removed) centered the icon/bell/account-chip/sign-out block
   while the title/subtitle above it stayed left-aligned — a mismatched,
   "broken"-looking layout on every one of those pages, not a deliberate
   admin-only design choice. Dropped in favor of the same flex-direction:
   row/align-items:center row layout already used at every wider
   breakpoint (993px–1499px), so this range stops being the odd one out.
   (Keeping the actions block right-aligned once it wraps below the header
   — which happens at this breakpoint and several wider ones too, see
   .admin-topbar-header{width:100%} above — is now handled once via
   margin-left:auto on the base .admin-topbar-actions rule in theme.css,
   rather than needing to be repeated in every breakpoint that can trigger
   the wrap.) */
@media (max-width: 992px) {

 .admin-topbar-actions { flex-direction: row; align-items: center; margin: 0;}
 .admin-topbar-header {  padding-top: 0; }

.admin-topbar-header { max-width: 100%; }
.admin-admin-chip { padding: 6px;  display: block; }
.admin-topbar-header { justify-content: space-between; }

}
 
@media (max-width: 768px) {
  .ai-card-graphic { display: none; }                                /* PAGE: admin */
  .ai-card-row { gap: 0; }                                           /* PAGE: admin */
  .ds-card { padding: 22px; }                                        /* GLOBAL — affects all 12 pages using .ds-card */
  .two-col { gap: 14px; }                                            /* SHARED: admin + report */
  /* [PAGE: report.html] .report-panel/.report-panel-spaced are compound
     selectors (.ds-card.report-panel) with higher specificity than the
     bare .ds-card rule just above, so that rule alone can't shrink them —
     needs its own override here. */
  .ds-card.report-panel, .ds-card.report-panel-spaced { padding: 24px; }
  .report-list-col { margin-top: 24px; gap: 16px; }
  /* still 6 tracks (rank/avatar/name/bar/ctr/fivestar) — .lb-bar/.lb-ctr
     aren't dropped until 640px below, so the column count can't change yet. */
  .lb-row { grid-template-columns: 18px 40px 100px 1fr 92px 52px; gap: 12px; padding: 10px 14px; }
  .leaderboard-list .avatar { width: 40px; height: 40px; }
  .lb-bar { margin: 0 16px; }
  .admin-sidebar-brand img { height: 80px; }                         /* PAGE: admin */
  .admin-topbar-actions { flex-direction: row; align-items: center;} /* PAGE: admin */
  .admin-topbar .btn-primary, .btn-signout { font-size: 18px; }      /* PAGE: admin */
  .admin-page-title { font-size: 20px; }                             /* PAGE: admin */
  .admin-topbar p, p, .section-sub { font-size: 16px; }              /* `p` is GLOBAL — shrinks every paragraph on every page below 768px; .admin-topbar p/.section-sub are admin-only in practice */

  /* [PAGE: onboard-tenant.html] — two-field rows no longer have room
     side-by-side once labels/inputs are this large; stack them, and pull
     the card/banner padding in further. */
  .admin-form-row { grid-template-columns: 1fr; gap: 14px; }
  .pw-fields-row { grid-template-columns: 1fr; }                    /* PAGE: admin-profile.html */
  .tenant-console-onboarding-wrap .ds-card { padding: 30px; }
  .status-banner.info.tenant-console-onboarding { padding: 20px 24px; }
  .admin-form .card-title { font-size: 18px; }
  .admin-form #submitBtn, .admin-form .btn-primary { font-size: 18px; min-height: 52px; } /* was stuck at the 24px/56px desktop size all the way down to 480px */
  .hub-card { max-width: 100%; }



}

@media (max-width: 767px) {

.hub-card { max-width: 100%; } 
.stat-grid { grid-template-columns: repeat(1, 1fr); }
.callout-meta { font-size: 15px; }


}

/* .two-col's minmax(320px, 1fr) track can't shrink below 320px — harmless
   until the available width (viewport minus admin-content's padding) drops
   under ~340px, at which point that floor forces a horizontal scrollbar.
   Below 700px it's already rendering as a single column anyway (two 320px
   tracks don't fit side by side), so drop the minmax and pin it to 1fr,
   letting that one column shrink all the way down to 320px viewports.
   [SHARED: admin-console.html + report.html — both use .two-col] */
@media (max-width: 700px) {
  .two-col { grid-template-columns: 1fr; }
}

/* [PAGE: admin] */
@media (max-width: 640px) {
  .admin-topbar { flex-direction: column; align-items: stretch; }
  .admin-topbar-actions { justify-content: flex-start; align-items: flex-start; }
  .admin-admin-chip .admin-admin-name { display: none; }
  .admin-admin-chip .admin-admin-role { display: none; }
}

/* 480px: shrink the AI badge and card padding, and give the tenant/lead
   panels less reserved empty space now that everything's stacked.
   [.ai-card/.ai-badge are SHARED (admin + report.html) — report.html's
   AI card also shrinks at this width. .ds-card is GLOBAL (12 pages).
   Everything else here is admin-only.] */
@media (max-width: 480px) {
  .ai-card { padding: 14px 18px; }                                   /* SHARED: admin + report */
  .ai-card-content { gap: 14px; }                                    /* PAGE: admin */
  .ai-badge { width: 48px; height: 48px; font-size: 18px; line-height: 1; } /* SHARED: admin + report */
  .ds-card { padding: 18px; }                                        /* GLOBAL — affects all 12 pages using .ds-card */
  .card-dropdown-label { padding: 8px 16px; font-size: 14px; line-height: 22px; } /* PAGE: admin */
  #tenantList, #leadList { min-height: 260px; }                      /* PAGE: admin */

  /* [PAGE: onboard-tenant.html] — shrink the form card/banner padding and
     field/label/button typography for phone widths. */
  .tenant-console-onboarding-wrap .ds-card { padding: 20px 18px; }
  .status-banner.info.tenant-console-onboarding { padding: 16px; }
  .admin-form label.field-label { font-size: 15px; line-height: 22px; }
  .admin-form .ds-input, .admin-form select.ds-input { min-height: 48px; padding: 10px 18px; }
  .admin-form select.ds-input { padding-right: 42px; background-position: right 16px center; }
  .admin-form .card-title { font-size: 16px; margin-bottom: 10px; }
  .admin-form #submitBtn, .admin-form .btn-primary { font-size: 15px; min-height: 48px; }

  /* [PAGE: dashboard.html] — hub cards are already fluid-width by this
     point (section 10/12), just tighten their own padding/spacing to match
     the rest of the shell's 480px treatment above. */
  .hub-card { padding: 20px; min-height: auto; }
  .hub-icon { width: 48px; height: 48px; margin-bottom: 14px; }
  .hub-title { font-size: 17px; line-height: 26px; }
  .hub-sub { font-size: 14px; margin-bottom: 16px; }

  /* [PAGE: report.html] */
  .ds-card.report-panel, .ds-card.report-panel-spaced { padding: 18px; }
  .report-filters-row .seg-btn { padding: 8px 14px; font-size: 14px; }
  .date-input-sm { width: 140px; }
  .callout-card { padding: 16px; min-height: auto; }
  .flag-row { padding: 16px 14px; }
}

/* [.stat-grid/.stat-card are SHARED (admin, dashboard, landing, report) —
   this breakpoint also drops those pages to a single stat-card column.
   Everything else here is admin-only.] */
@media (max-width: 420px) {
  .stat-grid { grid-template-columns: 1fr; }                         /* SHARED: admin, dashboard, landing, report */
    .admin-page-title { font-size: 16px; }                           /* PAGE: admin */
    .admin-topbar .btn-primary, .btn-signout { font-size: 13px; }    /* PAGE: admin */
    .stat-card { padding: 20px;}                                     /* SHARED: admin, dashboard, report */

   .ai-card-content { flex-direction: column;  justify-content: center; align-content: center; flex-wrap: nowrap;  text-align: center;} /* PAGE: admin */
   .admin-topbar .btn-primary, .btn-signout { font-size: 12px; padding: 8px; }

  /* [PAGE: report.html] — smallest phones (down to 320px): the 4-column
     compact .lb-row (set at 640px above) still needs a smaller avatar/rank
     column at this width, and two fixed-width date inputs no longer fit
     side by side at all, so stack them full-width. */
  .lb-row { grid-template-columns: 14px 24px 1fr 44px; gap: 8px; padding: 8px 10px; }
  .leaderboard-list .avatar { width: 24px; height: 24px; font-size: 9px; }
  .lb-name { font-size: 14px; }
  .date-input-sm { width: 100%; }

  /* [PAGE: admin] — theme toggle/bell/account-chip/sign-out/onboard are now
     five same-size 60px circular icon buttons in one row (see theme.css);
     at full size that's ~340px before gaps, wider than a 320px viewport
     itself, so #topbarPrimaryAction wrapped onto its own line below the
     other four. Shrinking every icon button+its svg together keeps all
     five on one row down to 320px instead. */
  .admin-topbar-actions, .admin-topbar-actions-row { gap: 6px; }
  .admin-icon-btn, .admin-admin-chip { width: 44px; height: 44px; }
  .admin-icon-btn svg { width: 20px; height: 20px; }
  .admin-admin-chip .avatar { width: 32px; height: 32px; font-size: 13px; }
}

@media (max-width: 640px) { .callouts-row { grid-template-columns: 1fr; } }

@media (max-width: 640px) {
  .lb-row { grid-template-columns: 16px 28px 1fr 56px; }
  .lb-bar, .lb-ctr { display: none; }
  /* .leaderboard-list .avatar is 52px sitewide-desktop — without this
     override it would overflow the 28px avatar column above. */
  .leaderboard-list .avatar { width: 28px; height: 28px; font-size: 10px; }
  /* [PAGE: report.html] two fixed 150px date inputs + "to" + Apply button
     don't fit one row below ~640px — let them wrap instead of overflowing. */
  .custom-range-row { flex-wrap: wrap; }
}