/**
 * ResolveVia — mobile-responsive.css
 *
 * F77: Mobile UX layout reflow — 5 breakpoints + print.
 *
 * Loaded by theme functions.php as 'resolvevia-mobile-responsive',
 * depending on 'resolvevia-theme-style'.
 *
 * Breakpoints:
 *   1200px — large desktop tweaks
 *    900px — tablet (sidebar collapses)
 *    768px — small tablet / large phone (nav stacks)
 *    480px — mobile (single column, full-width buttons)
 *
 * Touch targets, safe-area-inset, and bottom nav are in niche-themes.css §5/§6.
 * This file handles layout reflow only.
 *
 * C6a Fix Pass additions:
 *   Filter bar collapsible toggle (Qualified Calls list)
 *   Onboarding wizard step 3 day/time grid + progress bar
 *   Bulk outcomes table scrollable + card layout at 480px
 *   Billing invoice table mobile + action buttons
 *   Marketplace lead card full-width at mobile
 *   Pending quotes stats bar stack
 *   Staff management: hide table, show card layout at mobile
 *
 * Bulk outcomes mobile card layout selector corrected.
 *   The view uses .rv-bulk-outcomes-form (not .rv-bulk-outcomes-wrap).
 *   Both selectors now targeted for belt-and-suspenders compatibility.
 *   Also added data-label support for card field labels via CSS attr().
 *
 * @package ResolveVia
 *
 * Schema: v2.37.39 / Migration 110 / 101 active tables
 */

/* ============================================================
   BREAKPOINT: 1200px — Large desktop adjustments
   ============================================================ */

@media (max-width: 1200px) {

    .rv-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .rv-buyer-portal__layout {
        grid-template-columns: 220px 1fr;
        gap: 24px;
    }

}

/* ============================================================
   BREAKPOINT: 900px — Tablet: sidebar collapses, nav hamburger
   ============================================================ */

@media (max-width: 900px) {

    /* Buyer portal: sidebar hidden, full-width main */
    .rv-buyer-portal__layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .rv-buyer-sidebar {
        display: none;
    }

    /* Nav: show hamburger toggle */
    .rv-nav__toggle {
        display: flex;
    }

    .rv-nav__menu {
        display: none;
        flex-direction: column;
        width: 100%;
        padding: 8px 0 16px;
        border-top: 1px solid #e5e7eb;
    }

    .rv-nav__menu--open {
        display: flex;
    }

    .rv-nav__list {
        flex-direction: column;
        width: 100%;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .rv-nav__link {
        display: block;
        padding: 12px 16px;
        width: 100%;
    }

    /* Modal: slightly smaller padding */
    .rv-modal__dialog {
        padding: 20px;
    }

    /* Stats row: 2 columns on tablet */
    .rv-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

}

/* ============================================================
   BREAKPOINT: 768px — Small tablet / large phone
   ============================================================ */

@media (max-width: 768px) {

    /* Typography scale down */
    h1 { font-size: 1.625rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.125rem; }

    /* Container: tighter padding */
    .rv-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Cards: tighter padding */
    .rv-card__body {
        padding: 16px;
    }

    .rv-card__header,
    .rv-card__footer {
        padding: 12px 16px;
    }

    /* Tables: horizontal scroll */
    .rv-table-wrap {
        border-radius: var(--rv-radius-sm);
    }

    /* Overview hero */
    .rv-overview-hero__title {
        font-size: 1.75rem;
    }

    .rv-overview-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    /* Value props: single column */
    .rv-overview-value-list {
        grid-template-columns: 1fr;
    }

    /* Caller acquisition hero */
    .rv-caller-hero__title {
        font-size: 1.5rem;
    }

    /* Application form: full width */
    .rv-application-form-wrap,
    .rv-waitlist-form-wrap {
        padding: 0;
    }

    /* Stat cards: 2 columns */
    .rv-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Tier badges: stack */
    .rv-caller-tier-badges {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Live call widget: full width at bottom */
    .rv-live-call-widget {
        bottom: 0;
        right: 0;
        left: 0;
        max-width: 100%;
        width: 100%;
        border-radius: var(--rv-radius-lg) var(--rv-radius-lg) 0 0;
        border-bottom: none;
    }

    /* Live call widget: 44px touch targets for skip and save buttons.
     * DRIFT-439: GAP W6.9-G1 fix — Journey NEW-6 / JOURNEY-19.
     * General rv-btn touch-target rules do not cover these widget-internal
     * buttons (.rv-skip-btn, #rv-survey-save-btn). Without explicit min-height,
     * buttons render at their content height — may fall below Apple HIG 44px
     * minimum on small phones. Both buttons rendered dynamically by widget JS
     * (_renderRinging line 211, _renderConnecting line 247 in live-call-widget-js.md).
     * Selector specificity: widget container + button class/id — overrides base button styles.
     */
    .rv-live-call-widget .rv-skip-btn,
    .rv-live-call-widget #rv-skip-call-btn,
    .rv-live-call-widget .rv-save-btn,
    .rv-live-call-widget #rv-survey-save-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Breadcrumbs: smaller */
    .rv-breadcrumbs__list {
        font-size: 12px;
    }

    /* Wizard: full-width steps */
    .rv-wizard-steps {
        flex-direction: column;
    }

    /* Spending cap bar periods: stack */
    .rv-cap-bar__periods {
        flex-direction: column;
        gap: 10px;
    }

    /* Impersonation banner: stack */
    .rv-impersonation-banner__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* ── Filter Bar Collapsible Toggle (Qualified Calls list) ─────
     * Desktop: toggle hidden, panel always visible.
     * Mobile: toggle shown, panel hidden unless .is-open.
     */
    #rv-filters-toggle {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        padding: 10px 16px;
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: var(--rv-radius-sm);
        font-size: 14px;
        font-weight: var(--rv-weight-medium);
        color: #374151;
        cursor: pointer;
        min-height: 44px;
    }

    #rv-filters-panel {
        display: none;
        padding: 12px 0;
        border-bottom: 1px solid #e5e7eb;
    }

    #rv-filters-panel.is-open {
        display: block;
    }

    /* ── Onboarding Wizard Availability Grid ──────────────────────
     * Stack day rows vertically. Full-width selectors. 44px tap targets.
     */
    .rv-wizard-day-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 10px 0;
        border-bottom: 1px solid #f3f4f6;
    }

    .rv-wizard-day-row__checkbox {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .rv-wizard-day-row__times {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .rv-wizard-day-row__times select {
        width: 100%;
        font-size: 16px; /* iOS auto-zoom prevention */
        min-height: 44px;
    }

    .rv-wizard-cap-input {
        width: 100%;
    }

    .rv-wizard-cap-input input {
        width: 100%;
        font-size: 16px;
        min-height: 44px;
    }

    .rv-wizard-skip-link {
        display: block;
        min-height: 44px;
        line-height: 44px;
        text-align: center;
        width: 100%;
    }

    /* Wizard progress bar: pin to top, prevent scroll */
    .rv-wizard-progress {
        position: sticky;
        top: 0;
        z-index: 10;
        background: #fff;
        border-bottom: 1px solid #f3f4f6;
        padding: 8px 16px;
    }

    /* Wizard primary action: full-width, pinned near bottom */
    .rv-wizard-step__actions {
        position: sticky;
        bottom: 0;
        background: #fff;
        border-top: 1px solid #f3f4f6;
        padding: 12px 16px;
        margin: 0 -16px;
    }

    .rv-wizard-step__actions .rv-btn--primary {
        width: 100%;
        min-height: 48px;
        font-size: 16px;
    }

    /* ── Bulk Outcomes Table Mobile ───────────────────────────────
     * Target both .rv-bulk-outcomes-form (view class) and
     * .rv-bulk-outcomes-wrap (legacy class) for horizontal scroll.
     * At 480px the table switches to full card layout (see 480px section).
     */
    .rv-bulk-outcomes-form,
    .rv-bulk-outcomes-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Overflow notice: visible and appropriately sized on mobile */
    .rv-bulk-outcomes-overflow {
        display: block;
        font-size: 13px;
        padding: 8px 12px;
        margin-bottom: 12px;
        background: #fffbeb;
        border: 1px solid #fcd34d;
        border-radius: var(--rv-radius-sm);
    }

    /* ── Billing Invoice Table Mobile ─────────────────────────────
     * Invoice table: horizontal scroll + action buttons full-width.
     */
    .rv-billing-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .rv-billing-actions {
        flex-direction: column;
        gap: 8px;
    }

    .rv-billing-actions .rv-btn {
        width: 100%;
        min-height: 44px;
        text-align: center;
        justify-content: center;
    }

    /* ── Marketplace Lead Card Mobile ─────────────────────────────
     * Lead cards in marketplace: stack cleanly on mobile.
     * Claim button full-width with 44px tap target.
     */
    .rv-lead-card {
        flex-direction: column;
        padding: 16px;
        gap: 12px;
    }

    .rv-lead-card__footer {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .rv-lead-card__footer .rv-js-claim-callback,
    .rv-lead-card__footer .rv-claim-btn {
        width: 100%;
        min-height: 44px;
        text-align: center;
        justify-content: center;
    }

    /* ── Pending Quotes Stats Bar ─────────────────────────────────
     * Stats bar at top of pending quotes page: stack on mobile.
     */
    .rv-quotes-stats-bar {
        flex-direction: column;
        gap: 8px;
    }

    .rv-quotes-stats-bar .rv-stat-item {
        width: 100%;
        padding: 10px 16px;
    }

    /* ── Staff Management Mobile Card Layout ─────────────────────
     * On mobile: hide the multi-column staff table, show card layout instead.
     * .rv-staff-mobile-cards is added by buyer-views-staff-management-php.md.
     * .rv-staff-table remains in the PHP for desktop.
     */
    .rv-staff-table {
        display: none;
    }

    .rv-staff-mobile-cards {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    /* Add Staff button: full-width on mobile */
    .rv-staff-add-btn {
        width: 100%;
        min-height: 44px;
        text-align: center;
        justify-content: center;
        margin-bottom: 16px;
    }

    /* ── iOS Auto-Zoom Prevention (DRIFT-443) ────────────────────────────────
     * iOS Safari triggers auto-zoom when a focused input has font-size < 16px.
     * Base .rv-form-input (14px), .rv-form-textarea (14px), .rv-form-select (14px)
     * must be overridden to 16px at mobile to prevent disruptive page-zoom on tap.
     * Affects: lead detail (outcome form, ZIP, notes), settings (all tabs),
     * billing filter, marketplace filter.
     * Note: .rv-form-input--lg already 16px. .rv-form-input--sm (12px desktop)
     * is overridden here to 16px — inputs are always tap targets at mobile.
     * GAP W9.3 fix — Journey NEW-9 / JOURNEY-22 — June 2026.
     */
    .rv-form-input,
    .rv-form-textarea,
    .rv-form-select {
        font-size: 16px; /* iOS auto-zoom prevention */
    }

    /* ── Button touch targets: 44px minimum (DRIFT-444) ─────────────────────
     * Apply min-height: 44px to .rv-btn globally at mobile for Apple HIG /
     * WCAG 2.5.5 compliance. Covers action buttons on lead detail, settings,
     * billing (pay invoice already covered by .rv-billing-actions — this is a
     * belt-and-suspenders general rule).
     * Exception: .rv-btn--xs is intentionally small for inline table contexts
     * only (e.g. dashboard widget reminder links, lead list actions) and must
     * not be forced to 44px — explicit reset preserves compact table layout.
     * GAP W9.4 fix — Journey NEW-9 / JOURNEY-22 — June 2026.
     */
    .rv-btn {
        min-height: 44px;
    }
    .rv-btn--xs {
        min-height: unset; /* Exception: inline table-only contexts — not tap targets */
    }

    /* ── Toggle switch tap targets: 44px minimum (DRIFT-445) ────────────────
     * .rv-toggle-switch is 38 × 20px — the wrapping .rv-toggle-label must
     * enforce a 44px touch target height to meet Apple HIG minimum.
     * Applies to: notification preferences toggles (6), storm opt-out toggles
     * (per-niche) in buyer settings > Notifications and Tier Preferences tabs.
     * GAP W9.5 fix — Journey NEW-9 / JOURNEY-22 — June 2026.
     */
    .rv-toggle-label {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* ── Support ticket priority radio tap targets (DRIFT-446) ──────────────
     * Priority radio buttons in the new ticket form (buyer-views-support-php.md
     * mode=new) wrap plain <label> elements without rv-* CSS classes.
     * Scoped to .rv-radio-group to avoid affecting other label elements globally.
     * Each label gets min-height: 44px and flex centering for consistent
     * tap target height. Padding adds comfortable horizontal touch area.
     * GAP W9.7 fix — Journey NEW-9 / JOURNEY-22 — June 2026.
     */
    .rv-radio-group label {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 0 8px;
    }

    /* ── Lead Detail Layout: single-column collapse (DRIFT-449) ─────────────
     * .rv-lead-detail__layout is a 2-column grid on desktop (buyer-dashboard-css.md
     * section 14a: grid-template-columns: 1fr 300px). Collapse to single column
     * at mobile — sidebar actions stack below main content (same as prior
     * block-stacking behavior, now explicit instead of accidental).
     * .rv-lead-detail__sidebar sticky positioning removed at mobile (no benefit
     * when it's at the bottom of a single-column flow).
     * .rv-lead-detail__main: gap between card sections reduced for mobile.
     * GAP W9.A fix — Journey NEW-9 / JOURNEY-22 — June 2026.
     */
    .rv-lead-detail__layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .rv-lead-detail__sidebar {
        position: static; /* Remove sticky — no benefit in single-column flow */
    }

    .rv-lead-detail__main {
        gap: 16px;
    }

    /* Definition list: tighter label width on mobile */
    .rv-definition-list__row dt,
    .rv-triage-list__row dt {
        min-width: 100px;
    }

}

/* ============================================================
   DESKTOP OVERRIDES — ensure panels never collapse on desktop
   ============================================================ */

@media (min-width: 769px) {

    /* filter toggle hidden on desktop */
    #rv-filters-toggle {
        display: none;
    }

    /* filter panel always visible on desktop */
    #rv-filters-panel {
        display: block !important;
        border: none;
        padding: 0;
    }

    /* staff table visible, cards hidden on desktop */
    .rv-staff-table {
        display: table;
    }

    .rv-staff-mobile-cards {
        display: none;
    }

}

/* ============================================================
   BREAKPOINT: 480px — Mobile: single column, full-width buttons
   ============================================================ */

@media (max-width: 480px) {

    /* Stats: single column */
    .rv-stats-row,
    .rv-kpi-row {
        grid-template-columns: 1fr;
    }

    /* Buttons: full width for primary CTAs */
    .rv-overview-hero .rv-btn--large,
    .rv-caller-hero .rv-btn--large,
    .rv-cta-block .rv-btn--large,
    .rv-application-form-wrap .rv-btn--large,
    .rv-waitlist-form-wrap .rv-btn--large {
        width: 100%;
        text-align: center;
    }

    /* Modal: nearly full screen */
    .rv-modal__dialog {
        width: calc(100% - 16px);
        padding: 16px;
    }

    .rv-modal__footer {
        flex-direction: column;
    }

    .rv-modal__footer .rv-btn {
        width: 100%;
        justify-content: center;
    }

    /* Cards: no border-radius on very small */
    .rv-card {
        border-radius: var(--rv-radius-sm);
    }

    /* Notification dropdown: full height */
    .rv-notification-bell__dropdown {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
        border-radius: 0;
        z-index: 9999;
        overflow-y: auto;
    }

    /* Hero text */
    .rv-overview-hero__title {
        font-size: 1.5rem;
    }

    /* Caller page: single column tier badges */
    .rv-caller-tier-badges {
        justify-content: flex-start;
    }

    /* Form: labels and fields same width */
    .rv-form-input--number {
        max-width: 100%;
    }

    /* Site header: no phone number on very small screens */
    .rv-site-header__phone {
        display: none;
    }

    /* FAQ: tighter */
    .rv-faq-item {
        padding: 12px 0;
    }

    /* ── Bulk Outcomes: Card layout at 480px ────────────────────────────────
     *
     * The 7-column table is completely unusable at 480px.
     * Each row becomes a stacked card with field labels above each value.
     *
     * Target both .rv-bulk-outcomes-form (the actual view class
     * used in buyer-views-lead-outcomes-php.md) and .rv-bulk-outcomes-wrap
     * (legacy selector) to ensure rules apply regardless of which wrapper
     * is present.
     *
     * The ::before pseudo-element uses data-label attributes on <td> elements
     * to render column headers as inline labels. The PHP view sets these via
     * data-label="{{ column_name }}" on each <td> in the bulk outcomes table.
     *
     * Notes column: hidden in card layout — buyers can add notes on lead detail.
     */

    /* Switch table to block display for card layout */
    .rv-bulk-outcomes-form .rv-outcomes-table,
    .rv-bulk-outcomes-wrap .rv-table {
        display: block;
        overflow-x: visible; /* Reset — no horizontal scroll in card mode */
    }

    /* Hide header row — labels come from data-label on each td */
    .rv-bulk-outcomes-form .rv-outcomes-table thead,
    .rv-bulk-outcomes-wrap .rv-table thead {
        display: none;
    }

    /* tbody becomes a flex column of cards */
    .rv-bulk-outcomes-form .rv-outcomes-table tbody,
    .rv-bulk-outcomes-wrap .rv-table tbody {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    /* Each tr becomes a card */
    .rv-bulk-outcomes-form .rv-outcomes-table tr,
    .rv-bulk-outcomes-wrap .rv-table tr {
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: var(--rv-radius-md);
        padding: 12px;
        gap: 8px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    /* Each td becomes a labeled field */
    .rv-bulk-outcomes-form .rv-outcomes-table td,
    .rv-bulk-outcomes-wrap .rv-table td {
        display: flex;
        flex-direction: column;
        border: none;
        padding: 0;
    }

    /* Field label from data-label attribute */
    .rv-bulk-outcomes-form .rv-outcomes-table td[data-label]::before,
    .rv-bulk-outcomes-wrap .rv-table td[data-label]::before {
        content: attr(data-label);
        font-size: 10px;
        font-weight: var(--rv-weight-semibold);
        color: #9ca3af;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 3px;
    }

    /* Hide notes column in card layout — add notes on lead detail page */
    .rv-bulk-outcomes-form .rv-outcomes-table td:last-child,
    .rv-bulk-outcomes-wrap .rv-table td:last-child {
        display: none;
    }

    /* Outcome select: full-width on mobile card */
    .rv-bulk-outcomes-form .rv-outcomes-table select,
    .rv-bulk-outcomes-wrap .rv-table select {
        width: 100%;
        font-size: 16px; /* iOS auto-zoom prevention */
        min-height: 44px;
    }

    /* Revenue input: full-width on mobile card */
    .rv-bulk-outcomes-form .rv-outcomes-table .rv-input-prefix-wrap,
    .rv-bulk-outcomes-wrap .rv-table .rv-input-prefix-wrap {
        width: 100%;
    }

    .rv-bulk-outcomes-form .rv-outcomes-table .rv-form-input--number,
    .rv-bulk-outcomes-wrap .rv-table .rv-form-input--number {
        width: 100%;
        font-size: 16px;
        min-height: 44px;
    }

    /* Save All button: full-width on mobile */
    .rv-bulk-outcomes-actions .rv-js-bulk-save-outcomes {
        width: 100%;
        min-height: 48px;
        font-size: 16px;
    }

}

/* ============================================================
   BREAKPOINT: 360px — Small mobile adjustments
   ============================================================ */

@media (max-width: 360px) {

    .rv-container {
        padding-left: 12px;
        padding-right: 12px;
    }

    h1,
    .rv-overview-hero__title {
        font-size: 22px;
    }

    /* XL button: reduce padding */
    .rv-btn--xl {
        padding: 12px 20px;
        font-size: 15px;
    }

    /* Site header: no phone number */
    .rv-site-header__phone {
        display: none;
    }

    /* FAQ: tighter */
    .rv-faq-item {
        padding: 12px 0;
    }

}

/* ============================================================
   PRINT MEDIA QUERY
   ============================================================ */

@media print {

    /* Hide non-essential UI */
    .rv-nav,
    .rv-sidebar-nav,
    .rv-buyer-sidebar,
    .rv-live-call-widget,
    .rv-pwa-install-banner,
    .rv-bottom-nav,
    .rv-notification-bell,
    .rv-impersonation-banner,
    .rv-sso-banner,
    .rv-cap-bar,
    .rv-btn,
    .rv-nav__toggle,
    #rv-pwa-install-banner,
    #rv-impersonation-banner,
    #rv-sso-banner {
        display: none !important;
    }

    /* Full-width main on print */
    .rv-buyer-portal__layout {
        grid-template-columns: 1fr;
    }

    /* Remove shadows */
    .rv-card,
    .rv-modal,
    .rv-stat-card {
        box-shadow: none;
        border: 1px solid #ccc;
    }

    /* Ensure readable font size */
    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    /* Tables: visible borders */
    .rv-table th,
    .rv-table td {
        border: 1px solid #ccc;
    }

}

/* ==========================================================================
   Staff Management Mobile Cards — Desktop base styles
   ========================================================================== */

/* Desktop: show table, hide cards */
.rv-staff-mobile-cards {
    display: none;
}

/* Staff card base styles (used in mobile layout above) */
.rv-staff-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--rv-radius-md);
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.rv-staff-card--inactive {
    opacity: 0.65;
}

.rv-staff-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.rv-staff-card__identity {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.rv-staff-card__icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}

.rv-staff-card__name {
    font-size: 15px;
    font-weight: var(--rv-weight-semibold);
    color: #111827;
    line-height: 1.3;
}

.rv-staff-card__email {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

.rv-staff-card__divider {
    border: none;
    border-top: 1px solid #f3f4f6;
    margin: 10px 0;
}

.rv-staff-card__perms {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.rv-staff-perm-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: var(--rv-weight-bold);
    cursor: default;
}

.rv-staff-perm-badge--on {
    background: #d1fae5;
    color: #065f46;
}

.rv-staff-perm-badge--off {
    background: #f3f4f6;
    color: #9ca3af;
}

.rv-staff-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 12px;
}

.rv-staff-card__meta-item {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: var(--rv-radius-xs);
    padding: 2px 8px;
}

.rv-staff-card__playbook {
    color: #374151;
    font-weight: var(--rv-weight-medium);
}

.rv-staff-card__footer {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.rv-staff-card__footer .rv-btn {
    flex: 1;
    min-height: 44px;
    text-align: center;
}

/* ============================================================================
   DRIFT-717 BATCH 1 — cross-niche-referrals + schedule-assist reflow
   Canonical breakpoints. Surface-specific reflow for the two P0 surfaces;
   shared-primitive reflow (page-header actions) lives in buyer-dashboard.css.
   ============================================================================ */

@media (max-width: 768px) {

    /* Reminder rows: let actions wrap below the content on tablet */
    .rv-reminder-row {
        flex-wrap: wrap;
    }

    .rv-reminder-row__actions {
        width: 100%;
        margin-top: 8px;
    }

}

@media (max-width: 480px) {

    /* Schedule wrap: tighter gutters */
    .rv-schedule-wrap {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Reminder row: full vertical stack; action buttons share the row */
    .rv-reminder-row {
        flex-direction: column;
    }

    .rv-reminder-row__actions .rv-btn {
        flex: 1;
        min-height: 44px;
        justify-content: center;
    }

    /* CNR submit actions: full-width stacked buttons */
    .rv-cnr-form-actions {
        flex-direction: column;
    }

    .rv-cnr-form-actions .rv-btn {
        width: 100%;
        justify-content: center;
    }

    /* CNR history table already scrolls inside .rv-table-wrap (main.css) */

}

/* ============================================================================
   DRIFT-717 BATCH 2 — sandbox-admin + training + pending-quotes reflow
   ============================================================================ */

@media (max-width: 768px) {

    /* Sandbox admin preview tables: horizontal scroll */
    .rv-sandbox-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* Training module rows: status drops below info */
    .rv-training-module {
        flex-direction: column;
        align-items: flex-start;
    }

    .rv-training-module-status {
        align-items: flex-start;
        width: 100%;
    }

    /* Practice answer/start controls stack */
    .rv-sandbox-start-controls {
        flex-direction: column;
        align-items: stretch;
    }

}

@media (max-width: 480px) {

    .rv-training-wrap,
    .rv-quotes-wrap {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Quote row body + actions stack; full-width action buttons */
    .rv-quote-row__body {
        flex-direction: column;
        gap: 8px;
    }

    .rv-quote-row__actions .rv-btn {
        flex: 1;
        min-height: 44px;
        justify-content: center;
    }

    /* Training step nav: full-width buttons */
    .rv-training-step-nav .rv-btn {
        flex: 1;
        justify-content: center;
    }

}

/* ============================================================================
   DRIFT-717 BATCH 3a — contract-signing + support reflow
   ============================================================================ */

@media (max-width: 768px) {

    /* Support: filters stack; table scrolls (view wraps it in overflow-x) */
    .rv-support-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .rv-support-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* Ticket messages span full width on mobile */
    .rv-ticket-message {
        max-width: 100%;
    }

}

@media (max-width: 480px) {

    .rv-contract-wrap,
    .rv-support-wrap {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Contract content shorter scroll box on small screens */
    .rv-contract-content {
        max-height: 360px;
        padding: 16px;
    }

    /* Signature pad a bit shorter */
    .rv-signature-canvas {
        height: 130px;
    }

    /* Ticket reply + actions: full-width buttons */
    .rv-ticket-actions .rv-btn,
    .rv-signature-canvas-actions .rv-btn {
        flex: 1;
        justify-content: center;
    }

}

/* ============================================================================
   DRIFT-717 BATCH 3b — buyer-overview + caller-acquisition (public landings)
   ============================================================================ */

@media (max-width: 768px) {

    .rv-overview-hero__title,
    .rv-caller-hero__title {
        font-size: 26px;
    }

    .rv-overview-hero__subtitle {
        font-size: 16px;
    }

    .rv-overview-section-title {
        font-size: 22px;
    }

    .rv-caller-phone-link {
        font-size: 20px;
        padding: 14px 24px;
    }

}

@media (max-width: 480px) {

    .rv-overview-hero,
    .rv-caller-hero {
        padding: 32px 16px;
    }

    .rv-overview-hero__title,
    .rv-caller-hero__title {
        font-size: 22px;
    }

    /* Phone link goes full-width for an easy tap target */
    .rv-caller-phone-link {
        width: 100%;
        justify-content: center;
        font-size: 18px;
    }

    .rv-overview-hero__actions .rv-btn {
        width: 100%;
        justify-content: center;
    }

}

/* ============================================================================
   DRIFT-717 BATCH P1-1 — leads workflow cluster reflow
   ============================================================================ */

@media (max-width: 900px) {
    /* Dashboard columns stack */
    .rv-dashboard-col--main,
    .rv-dashboard-col--side { flex: 1 1 100%; }
}

@media (max-width: 768px) {
    .rv-leads-table,
    .rv-multi-niche-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .rv-filters__row { flex-direction: column; align-items: stretch; }

    /* Lead card row stacks */
    .rv-lead-card-row { flex-wrap: wrap; }
}

@media (max-width: 480px) {
    .rv-buyer-dashboard-wrap,
    .rv-leads-wrap,
    .rv-multi-niche-wrap {
        padding-left: 12px;
        padding-right: 12px;
    }

    .rv-lead-card-row__actions .rv-btn { flex: 1; justify-content: center; }
}

/* ============================================================================
   DRIFT-717 BATCH P1-2 — billing / invoice cluster reflow
   ============================================================================ */

@media (max-width: 768px) {
    .rv-invoices-table,
    .rv-line-items-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .rv-invoice-detail__header { flex-direction: column; }
    .rv-invoice-detail__pdf { width: 100%; }

    .rv-billing__filters { flex-direction: column; align-items: stretch; }
}

@media (max-width: 480px) {
    .rv-billing-wrap,
    .rv-invoice-detail-wrap {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Totals span full width on mobile */
    .rv-invoice-totals { max-width: 100%; }
    .rv-invoice-detail__pay-action { justify-content: stretch; }
    .rv-invoice-detail__pay-action .rv-pay-now-btn,
    .rv-pay-now-btn { width: 100%; }
}

/* ============================================================================
   DRIFT-717 BATCH P1-3 — premium-overview section bands reflow
   ============================================================================ */

@media (max-width: 480px) {
    .rv-pp-overview__section {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ============================================================================
   DRIFT-717 BATCH P1-4 — analytics reflow
   ============================================================================ */

@media (max-width: 768px) {
    .rv-analytics__header { flex-direction: column; align-items: stretch; }
    .rv-analytics__controls { width: 100%; }
    .rv-analytics__niche-select,
    .rv-analytics__range-select { flex: 1; }
}

@media (max-width: 480px) {
    .rv-premium-analytics-wrap { padding-left: 12px; padding-right: 12px; }
}

/* ============================================================================
   DRIFT-717 BATCH P1-5 — marketplace + referral reflow
   ============================================================================ */

@media (max-width: 768px) {
    .rv-referrals-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    /* DRIFT-719: .rv-available-calls-page__inner removed — its only consumer,
       the standalone template-marketplace.php, was retired. */

    /* Referral link row stacks; copy actions go full-width */
    .rv-referral-link-row { flex-direction: column; }
    .rv-referral-link-actions .rv-btn { flex: 1; justify-content: center; }
}

/* ============================================================================
   DRIFT-717 BATCH P1-6 — settings reflow
   ============================================================================ */

@media (max-width: 768px) {
    .rv-settings__tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
    .rv-form-row--toggle,
    .rv-storm-opt-out-row { flex-wrap: wrap; }
}

@media (max-width: 480px) {
    .rv-settings-wrap { padding-left: 12px; padding-right: 12px; }
    .rv-detail-table th { width: auto; }
}

/* ============================================================================
   DRIFT-717 BATCH P1-7 — onboarding / application / waitlist (public) reflow
   ============================================================================ */

@media (max-width: 768px) {
    .rv-application-header__title,
    .rv-waitlist-header__title { font-size: 24px; }
}

@media (max-width: 480px) {
    .rv-onboarding-page__inner,
    .rv-application-page__inner,
    .rv-waitlist-page__inner { padding-left: 12px; padding-right: 12px; }

    .rv-application-header__title,
    .rv-waitlist-header__title { font-size: 22px; }
}

/* ============================================================================
   DRIFT-717 BATCH P1-8a — CTA block + banners reflow
   ============================================================================ */

@media (max-width: 480px) {
    .rv-cta-block { padding-left: 12px; padding-right: 12px; }
    .rv-cta-block__btn,
    .rv-btn--phone { width: 100%; justify-content: center; }
    .rv-impersonation-banner__exit { margin-inline-start: 0; }
}

/* ============================================================================
   DRIFT-717 BATCH P1-8b — theme chrome (header/footer/nav) reflow
   ============================================================================ */

@media (max-width: 768px) {
    .rv-site-header__inner,
    .rv-nav__inner { flex-wrap: wrap; gap: 8px; }
    .rv-footer__columns { grid-template-columns: 1fr 1fr; }
    .rv-partial-footer__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
    .rv-footer__columns { grid-template-columns: 1fr; }
    .rv-site-header__phone-number { display: none; }
}

/* ============================================================================
   DRIFT-717 BATCH P1-8c — content theme partials + about reflow
   ============================================================================ */

@media (max-width: 768px) {
    .rv-single__title,
    .rv-page__title { font-size: 24px; }
    .rv-about-hero__title { font-size: 26px; }
    .rv-404__title { font-size: 52px; }
}

@media (max-width: 480px) {
    .rv-single,
    .rv-page,
    .rv-archive,
    .rv-index,
    .rv-search-results { padding-left: 12px; padding-right: 12px; }

    .rv-search-form__inner { flex-direction: column; }
    .rv-search-form__submit { width: 100%; }
    .rv-practice-mode-banner__exit { margin-inline-start: 0; }
}