/* ================================================================
   RESPONSIVE.CSS — Structural / Layout Responsiveness (Stage 1)
   All responsive/media-query logic that CANNOT be expressed as a
   variables.css token override lives here (column-count collapse,
   overflow handling, element show/hide). Token-level scaling
   (font-size/spacing/position/border-radius) is handled in
   variables.css Stage 0 — do not duplicate that here.

   Standard Bootstrap 5 range-based breakpoints only, no custom values:
   xs  ≤575.98px | sm 576-767.98px | md 768-991.98px
   lg  992-1199.98px | xl 1200-1399.98px | xxl ≥1400px
   ================================================================ */

/* ── Fixed card-grid column collapse ──
   These *-grid classes use a hardcoded repeat(N,1fr) with no existing
   breakpoint. (.d1-domain-grid/.d1-bottom-grid/.rev-overview-row/
   .trends-kpi-grid/.sub-stat-grid/.sub-plan-grid already have their
   own breakpoints elsewhere and are intentionally left alone here.)

   .hub-prog-section/.hub-prog-track (fixed 240px, assessment progress
   header) and .dd-acc-meta (min-width:260px accordion row) shrink at
   sm/xs to prevent overflow on narrow phones — base verticz.css rules
   left untouched, only overridden here.

   .sc-layout (assessment screen 220px/1fr/200px 3-col grid + 2 sticky
   side panels) had NO responsive handling at all — stacks to 1 column
   with static positioning at md/sm/xs. .mj-stage-dot/.ag-chain-step/
   .hub-tags/.ap-q-row/.q-nav/.asprv-confirm-bar cover the maturity
   journey, guidelines score-chain, and question-nav overflow spots
   found in the assessment-flow audit.

   .two-cols/.two-cols-divided/.revlic-grid/.bottom-grid/.od-info-grid/
   .settings-layout/.cp-fields-grid/.tm-form-grid: fixed 1fr-1fr (or
   220px-1fr for settings) two-column layouts across admin dashboard,
   org dashboard, settings (both admin+org), org detail panels, team
   profile, and team invite form — all stack to 1 column at md/sm/xs.
   .addon-snap-grid/.funnel-row/.funnel-header-row/.rep-grid-top cover
   the remaining admin-dashboard fixed grids/columns found in the
   final audit pass. */

/* md (768px-991.98px) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .overview-grid,
  .domain-grid,
  .orgd-stat-grid,
  .plan-grid,
  .domain-assign-grid,
  .stats-row-5,
  .od-domain-grid,
  .vz-grid-3,
  .vz-grid-4,
  .vz-grid-5,
  .rev-card,
  .rev-sum-row,
  .wflow-grid,
  .ra-overview-row,
  .heatmap-grid,
  .mock-domain-grid,
  .qedit-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .vz-grid-2 {
    grid-template-columns: 1fr;
  }

  .hub-prog-section,
  .hub-prog-track {
    min-width: 0;
    width: 160px;
  }

  /* .hub-header-row: title + .hub-prog-section never wraps, so once
     .hub-prog-section is forced to width:100% at xs it overflows the row
     instead of dropping to its own line. */
  .hub-header-row {
    flex-wrap: wrap;
    row-gap: var(--sp-12);
  }

  .comp-table-wrap,
  .d1-inc-table-wrap {
    overflow-x: auto;
  }

  /* Assessment screen (.sc-layout): 220px/1fr/200px 3-col grid + 2
     sticky side panels has no responsive handling at all — stack to
     a single column and drop sticky positioning so panels don't
     overlap the question content. */
  .sc-layout {
    grid-template-columns: 1fr;
  }

  .ctrl-panel,
  .info-panel {
    position: static;
  }

  .hub-tags {
    flex-wrap: wrap;
  }

  /* 1fr/1fr and fixed-sidebar two-column layouts with no breakpoint —
     admin dashboard/org dashboard/settings/detail panels/forms. */
  .two-cols,
  .two-cols-divided,
  .revlic-grid,
  .bottom-grid,
  .od-info-grid,
  .settings-layout,
  .cp-fields-grid,
  .tm-form-grid {
    grid-template-columns: 1fr;
  }

  .two-cols-divided > :first-child {
    padding-right: 0;
    padding-bottom: var(--sp-16);
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }

  .two-cols-divided > :last-child {
    padding-left: 0;
    padding-top: var(--sp-16);
  }

  /* .qb-layout-grid (admin Question Bank: domain-tree sidebar + question
     list) is a hardcoded 300px/1fr grid with no responsive handling at
     all — stacks to 1 column so the sidebar doesn't force page-wide
     horizontal overflow. */
  .qb-layout-grid {
    grid-template-columns: 1fr;
  }

  /* card-header title + action-button group (.card-header.vz-between) has
     no breakpoint anywhere and overflows on narrow screens — drop the
     button group to its own full-width row. */
  .card-header.vz-between {
    flex-wrap: wrap;
    row-gap: var(--sp-8);
  }

  .card-header.vz-between > div:last-child {
    width: 100%;
    flex-wrap: wrap;
  }

  /* .page-header is a Bootstrap .row (flex-wrap enabled). .logo-wrapper
     (.col-auto) carries both the full logo image and the hamburger toggle;
     their combined min-content width doesn't fit next to .page-main-header
     (.col) on narrow screens, so the row wraps the whole logo-wrapper —
     hamburger included — onto its own line above the rest of the header.
     Drop the logo from the header (keep only the slim hamburger) so that
     column shrinks enough to stay inline, and show a compact logo inside
     the sidebar itself instead, so branding isn't lost on mobile. */
  .d1-logo-wrapper .vz-logo { display: none; }
  .d1-logo-wrapper { padding: 0 var(--sp-8); }

  .d1-sidebar-mobile-header {
    display: flex;
    padding: var(--sp-16) var(--sp-20);
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  /* body.dark-only .page-header .logo-wrapper (0,3,1) beats the plain
     .d1-logo-wrapper rule above, so its 205px fixed width was winning
     regardless of the rules above — the column never actually shrank.
     width:0 fixed the overflow but also crushed the hamburger's own tap
     target since it's a child of this column, so give it just enough
     room for a real 44px touch target instead of squeezing it to nothing. */
  body.dark-only .page-header .logo-wrapper {
    width: 44px;
    min-width: 44px;
    padding: 0;
    justify-content: center;
  }

  .d1-toggle-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* .page-sidebar is position:fixed;top:0;height:100vh (style.css), but
     margin-top:var(--sp-64) still pushes its rendered box down by that
     amount while height stays 100vh — leaving a gap at the top and the
     same amount overflowing past the viewport bottom. On mobile the
     sidebar should be a true full-bleed overlay from y:0, with its own
     header row (.d1-sidebar-mobile-header) replacing the space the
     margin used to reserve for the page header. Also raise z-index above
     header's (both are z-index:3 at ≤991px) so an open sidebar reliably
     covers the header instead of depending on DOM source order. */
  body.dark-only .page-sidebar {
    margin-top: 0;
    z-index: 6;
  }
}

/* sm (576px-767.98px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .page-title > .row > .col-auto.vz-flex {
    flex-wrap: wrap;
    width: 100%;
    margin-top: var(--sp-8);
  }

  /* .od-header (org-detail header: logo + name/meta + action buttons) has no
     flex-wrap and .od-actions is flex-shrink:0 — on narrow screens the fixed
     72px logo plus the never-shrinking action buttons squeeze the
     name/meta column to nothing instead of stacking. */
  .od-header {
    flex-wrap: wrap;
  }
  .od-actions {
    flex-wrap: wrap;
    width: 100%;
  }

  .overview-grid,
  .domain-grid,
  .orgd-stat-grid,
  .plan-grid,
  .domain-assign-grid,
  .stats-row-5,
  .od-domain-grid,
  .vz-grid-2,
  .vz-grid-3,
  .vz-grid-4,
  .vz-grid-5,
  .rev-card,
  .rev-sum-row,
  .wflow-grid,
  .ra-overview-row,
  .heatmap-grid,
  .mock-domain-grid,
  .qedit-grid-4 {
    grid-template-columns: 1fr;
  }

  /* :not(.dataTable) — DataTables clones this table's classes onto its own
     internal .dataTables_scrollHead/.dataTables_scrollBody wrapper tables
     when scrollX is active. Applying display:block/overflow-x:auto
     directly to those clones (in addition to DataTables' own wrapper divs,
     which already handle scrolling) breaks column alignment between head
     and body and produces two conflicting scrollbars. Only plain,
     non-DataTables tables need this rule.
     .qb-table-wrap .tracker-table is excluded the same way — that wrapper
     already has its own dedicated overflow-x:auto + min-width:1180px
     scroll pattern (verticz.css), so this rule would double it up. */
  .vz-table:not(.dataTable),
  .tracker-table:not(.dataTable):not(.qb-table-wrap *) {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .hub-prog-section,
  .hub-prog-track {
    min-width: 0;
    width: 140px;
  }

  .hub-header-row {
    flex-wrap: wrap;
    row-gap: var(--sp-12);
  }

  .dd-acc-meta {
    min-width: 160px;
  }

  .comp-table-wrap,
  .d1-inc-table-wrap {
    overflow-x: auto;
  }

  .sc-layout {
    grid-template-columns: 1fr;
  }

  .ctrl-panel,
  .info-panel {
    position: static;
  }

  .hub-tags {
    flex-wrap: wrap;
  }

  .ag-chain-step {
    min-width: 100px;
  }

  .ap-q-row {
    flex-wrap: wrap;
  }

  .two-cols,
  .two-cols-divided,
  .revlic-grid,
  .bottom-grid,
  .od-info-grid,
  .settings-layout,
  .cp-fields-grid,
  .tm-form-grid,
  .qb-layout-grid {
    grid-template-columns: 1fr;
  }

  .two-cols-divided > :first-child {
    padding-right: 0;
    padding-bottom: var(--sp-16);
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }

  .two-cols-divided > :last-child {
    padding-left: 0;
    padding-top: var(--sp-16);
  }

  .addon-snap-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .funnel-row,
  .funnel-header-row {
    grid-template-columns: 1fr 60px 50px;
    gap: var(--sp-8);
  }

  .card-header.vz-between {
    flex-wrap: wrap;
    row-gap: var(--sp-8);
  }

  .card-header.vz-between > div:last-child {
    width: 100%;
    flex-wrap: wrap;
  }

  .d1-logo-wrapper .vz-logo { display: none; }
  .d1-logo-wrapper { padding: 0 var(--sp-8); }

  .d1-sidebar-mobile-header {
    display: flex;
    padding: var(--sp-16) var(--sp-20);
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  body.dark-only .page-header .logo-wrapper {
    width: 44px;
    min-width: 44px;
    padding: 0;
    justify-content: center;
  }

  .d1-toggle-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body.dark-only .page-sidebar {
    margin-top: 0;
    z-index: 6;
  }

  body.dark-only .sidebar-menu .sidebar-list .sidebar-link {
    padding: 12px 10px;
  }
  body.dark-only .sidebar-menu .sidebar-list {
    margin-bottom: 4px;
  }
}

/* xs (≤575.98px) */
@media (max-width: 575.98px) {
  /* .page-title's action-button group (.col-auto.vz-flex, e.g. the
     "Mark as Most Popular"/"Update Pricing"/"Create Version" row on
     admin/plans/show.blade.php) has no flex-wrap, so once its buttons'
     combined min-content width exceeds the viewport they overflow instead
     of dropping to their own row — same root-cause pattern documented
     elsewhere in this file (a flex child forced to shrink needs its
     parent to have flex-wrap, don't assume it does). */
  .page-title > .row > .col-auto.vz-flex {
    flex-wrap: wrap;
    width: 100%;
    margin-top: var(--sp-8);
  }

  /* .od-header (org-detail header: logo + name/meta + action buttons) has no
     flex-wrap and .od-actions is flex-shrink:0 — on narrow screens the fixed
     72px logo plus the never-shrinking action buttons squeeze the
     name/meta column to nothing instead of stacking. */
  .od-header {
    flex-wrap: wrap;
  }
  .od-actions {
    flex-wrap: wrap;
    width: 100%;
  }

  /* style.css's own mobile rules for DataTables prev/next buttons
     (~L17069-17094) hide the button text (font-size:0) and try to inject
     a replacement icon via a `themify`-font :before pseudo-element — but
     themify.css is never linked anywhere in the app, so that glyph
     renders as a tofu box with no visible text behind it either. Instead,
     createDataTable() (cris.js) now sets the DataTables `language.paginate`
     option to real `<i class="fa-solid fa-chevron-*">` icons directly (the
     same convention already used by the hand-written org/assess/reports
     tables) — so here we just cancel the broken pseudo-element content and
     let those real icons render at their own explicit font-size instead of
     inheriting the button's font-size:0. */
  div.dataTables_wrapper div.dataTables_paginate .paginate_button.previous:before,
  div.dataTables_wrapper div.dataTables_paginate .paginate_button.next:before {
    content: none;
  }
  div.dataTables_wrapper div.dataTables_paginate .paginate_button.previous,
  div.dataTables_wrapper div.dataTables_paginate .paginate_button.next {
    font-size: inherit;
  }

  .overview-grid,
  .domain-grid,
  .orgd-stat-grid,
  .plan-grid,
  .domain-assign-grid,
  .stats-row-5,
  .od-domain-grid,
  .vz-grid-2,
  .vz-grid-3,
  .vz-grid-4,
  .vz-grid-5,
  .rev-card,
  .rev-sum-row,
  .wflow-grid,
  .ra-overview-row,
  .heatmap-grid,
  .mock-domain-grid,
  .qedit-grid-4 {
    grid-template-columns: 1fr;
  }

  /* :not(.dataTable) — DataTables clones this table's classes onto its own
     internal .dataTables_scrollHead/.dataTables_scrollBody wrapper tables
     when scrollX is active. Applying display:block/overflow-x:auto
     directly to those clones (in addition to DataTables' own wrapper divs,
     which already handle scrolling) breaks column alignment between head
     and body and produces two conflicting scrollbars. Only plain,
     non-DataTables tables need this rule.
     .qb-table-wrap .tracker-table is excluded the same way — that wrapper
     already has its own dedicated overflow-x:auto + min-width:1180px
     scroll pattern (verticz.css), so this rule would double it up. */
  .vz-table:not(.dataTable),
  .tracker-table:not(.dataTable):not(.qb-table-wrap *) {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .hub-prog-section,
  .hub-prog-track {
    min-width: 0;
    width: 100%;
  }

  .hub-header-row {
    flex-wrap: wrap;
    row-gap: var(--sp-12);
  }

  /* .dd-acc-meta is forced to flex-basis:100% below, but .dd-acc-btn (its
     flex parent) never gets flex-wrap — without it that 100%-width child
     just overflows the accordion button instead of dropping to its own row. */
  .dd-acc-btn {
    flex-wrap: wrap;
  }

  .dd-acc-meta {
    min-width: 0;
    flex-basis: 100%;
    justify-content: flex-start;
  }

  /* Accordion body's 40px left indent eats ~12% of a 375px viewport —
     tighten it on true mobile so question rows have real reading width. */
  .dd-acc-body {
    padding-left: var(--sp-16);
  }

  .comp-table-wrap,
  .d1-inc-table-wrap {
    overflow-x: auto;
  }

  .sc-layout {
    grid-template-columns: 1fr;
  }

  .ctrl-panel,
  .info-panel {
    position: static;
  }

  .hub-tags {
    flex-wrap: wrap;
  }

  .ag-chain-step {
    min-width: 90px;
    padding: var(--sp-8) var(--sp-12);
  }

  .ap-q-row {
    flex-wrap: wrap;
  }

  .mj-stage-dot {
    width: 30px;
    height: 30px;
  }

  .mj-stage-dot-current {
    width: 36px;
    height: 36px;
  }

  .q-nav {
    flex-wrap: wrap;
    gap: var(--sp-8);
  }

  .asprv-confirm-bar {
    padding: var(--sp-8) 0 var(--sp-8) var(--sp-8);
  }

  .two-cols,
  .two-cols-divided,
  .revlic-grid,
  .bottom-grid,
  .od-info-grid,
  .settings-layout,
  .cp-fields-grid,
  .tm-form-grid,
  .qb-layout-grid {
    grid-template-columns: 1fr;
  }

  .two-cols-divided > :first-child {
    padding-right: 0;
    padding-bottom: var(--sp-12);
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }

  .two-cols-divided > :last-child {
    padding-left: 0;
    padding-top: var(--sp-12);
  }

  .addon-snap-grid {
    grid-template-columns: 1fr;
  }

  .funnel-row,
  .funnel-header-row {
    grid-template-columns: 1fr 50px 44px;
    gap: var(--sp-4);
  }

  .rep-grid-top {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  /* .rep-grid-top centers its grid cells via justify-items, but the two
     .d-flex rows inside (org meta tags, score+badge) are flex containers —
     text-align doesn't affect flex-item positioning, so they still stack
     left-aligned inside the centered cell without their own
     justify-content. */
  .rep-info-row {
    justify-content: center;
  }

  .card-header.vz-between {
    flex-wrap: wrap;
    row-gap: var(--sp-8);
  }

  .card-header.vz-between > div:last-child {
    width: 100%;
    flex-wrap: wrap;
  }

  .d1-logo-wrapper .vz-logo { display: none; }
  .d1-logo-wrapper { padding: 0 var(--sp-8); }

  .d1-sidebar-mobile-header {
    display: flex;
    padding: var(--sp-16) var(--sp-20);
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  body.dark-only .page-header .logo-wrapper {
    width: 44px;
    min-width: 44px;
    padding: 0;
    justify-content: center;
  }

  .d1-toggle-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body.dark-only .page-sidebar {
    margin-top: 0;
    z-index: 6;
  }

  /* .sidebar-link padding uses var(--sp-10), which scales down to just 2px
     at this tier (variables.css Stage 0 token scaling) — fine for text/UI
     chrome, but it collapses the nav items' tap targets to nothing and
     makes the whole list look squashed. Nav row spacing needs a fixed
     floor here, immune to the type-scale, not something that shrinks
     alongside font sizes. */
  body.dark-only .sidebar-menu .sidebar-list .sidebar-link {
    padding: 12px 10px;
  }
  body.dark-only .sidebar-menu .sidebar-list {
    margin-bottom: 4px;
  }

  /* 130px search + breadcrumb "Home" label + bell + avatar still overflow
     a true phone width — drop the search bar and the "Home" text label
     (icon stays), and cap the active breadcrumb so a long page name
     truncates instead of pushing the header wider than the viewport. */
  .d1-search-wrap    { display: none; }
  .d1-bc-home span   { display: none; }
  .d1-bc-active {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* .d1-breadcrumb and .d1-header-right both have flex-shrink:0, so once
     .d1-main-header (min-width:0) shrinks to fit, the two of them together
     can still exceed the remaining space and overflow past the right edge
     instead of wrapping. margin-left here is redundant (.d1-header-spacer
     already pushes this cluster right) and the bell↔avatar gap is generous
     for a phone — both are free width to cut before anything needs to
     shrink below its own content. */
  .d1-header-right {
    margin-left: 0;
    gap: var(--sp-8);
  }
}

/* lg (992px-1199.98px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
}

/* xl (1200px-1399.98px) */
@media (min-width: 1200px) and (max-width: 1399.98px) {
}

/* xxl (≥1400px) */
@media (min-width: 1400px) {
}