/*!
 * ============================================================================
 * Clopr EMR — Travel Module Shared Design System
 * ============================================================================
 *
 * Single source of truth for the Travel module's visual language.
 * Exposes a token-only API (CSS custom properties) plus a minimal set of
 * shared component classes (.trv-hero, .trv-card, .trv-stats-grid) so
 * individual TRV_* pages can stay visually consistent WITHOUT a per-page
 * rename refactor.
 *
 * WHY THIS FILE EXISTS
 * --------------------
 * Travel pages historically used per-page class prefixes — ld- (Leads),
 * mk- (Kanban), sb- (Subscribers), dt- (Document Templates), wat-
 * (WhatsApp Templates) and many more. Each page also redefined its own
 * brand color, hero gradient, card radius and breakpoints inline. This
 * stylesheet ships one shared set of design tokens that every page
 * references via var(--trv-*) inside their own page-scoped <style> blocks
 * while we incrementally migrate.
 *
 * HOW TO REFERENCE TOKENS FROM A PAGE
 * ------------------------------------
 * Any TRV_* page can pick up tokens directly — no import needed — because
 * travel.css is included globally in parts/header.php. Example:
 *
 *     .ld-hero { background: linear-gradient(135deg,
 *                    #312e81, var(--trv-primary), #a78bfa); }
 *     .ld-card { border-radius: var(--trv-radius);
 *                box-shadow: var(--trv-shadow-sm); }
 *
 * Or use shared component classes directly:
 *
 *     <div class="trv-hero is-indigo">...</div>
 *     <div class="trv-stats-grid"> ... .trv-card ... </div>
 *
 * HERO COLOR VARIANTS (pick one per page)
 * ----------------------------------------
 *   .trv-hero.is-indigo   — default / Leads / Bookings / Quotations
 *   .trv-hero.is-rose     — Subscribers / Campaigns / Marketing surfaces
 *   .trv-hero.is-amber    — Visa / Documents
 *   .trv-hero.is-cyan     — Reports / Analytics
 *   .trv-hero.is-emerald  — Operations / WhatsApp / Driver portal
 *
 * BOOTSTRAP 5 COMPATIBILITY POLICY
 * ----------------------------------
 * This file MUST NOT override Bootstrap 5 utility classes (.bg-*, .text-*,
 * .btn, .modal-*, .nav-link, .dropdown-item, .row, .col-*, .form-control,
 * .form-select, .offcanvas-*). Bootstrap 5 handles responsive behavior for
 * those. Where mobile behavior is needed beyond what Bootstrap provides,
 * selectors are scoped to .trv-page or to custom .trv-* class names only.
 *
 * RTL is handled by Bootstrap's bootstrap.rtl.min.css (loaded in header.php
 * for Arabic). Per-class [dir="rtl"] overrides are not needed here.
 *
 * DO NOT add page-specific selectors here — only tokens and the small
 * set of cross-page primitives (hero, card, stats-grid, utilities).
 * ============================================================================
 */

/* ============================================================================
 * 1. DESIGN TOKENS
 * ========================================================================== */
:root {
    /* Brand palette */
    --trv-primary:       #6366f1;
    --trv-primary-dark:  #4f46e5;
    --trv-success:       #10b981;
    --trv-warning:       #f59e0b;
    --trv-danger:        #ef4444;
    --trv-info:          #06b6d4;
    --trv-rose:          #f43f5e;
    --trv-amber:         #d97706;

    /* Surfaces */
    --trv-bg:            #f7f9fc;
    --trv-card-bg:       #ffffff;
    --trv-border:        #e2e8f0;

    /* Text */
    --trv-text:          #0f172a;
    --trv-muted:         #64748b;

    /* Elevation */
    --trv-shadow-sm:     0 1px 3px rgba(15, 23, 42, .05);
    --trv-shadow-md:     0 4px 6px rgba(15, 23, 42, .08);

    /* Geometry */
    --trv-radius:        12px;
    --trv-radius-lg:     16px;

    /* Auto-grid knobs (overridable per page) */
    --trv-min-col:       200px;
    --trv-gap:           12px;

    /* Typography stack — Tajawal is loaded globally in parts/header.php;
       fallbacks cover EN/AR + system fonts on every platform. */
    --trv-font:          ui-sans-serif, system-ui, -apple-system,
                         Segoe UI, Tahoma, Cairo, Arial, sans-serif;
}

/* ============================================================================
 * 2. SHARED HERO COMPONENT
 * ---------------------------------------------------------------------------
 * Page-top banner used by Leads, Bookings, Quotations, Reports, Visa,
 * Subscribers, etc. Heights and inner layout stay the page's responsibility.
 * Pick a color variant by adding one of the .is-* modifiers.
 * ========================================================================== */
.trv-hero {
    color: #ffffff;
    border-radius: var(--trv-radius-lg);
    padding: 24px;
    box-shadow: var(--trv-shadow-md);
    margin-bottom: 16px;
    background: linear-gradient(135deg, #312e81, var(--trv-primary), #a78bfa);
}
.trv-hero h1,
.trv-hero h2,
.trv-hero h3 { color: #ffffff; margin: 0 0 8px; }
.trv-hero p  { color: rgba(255, 255, 255, .85); margin: 0; }

.trv-hero.is-indigo  { background: linear-gradient(135deg, #312e81, #6366f1, #a78bfa); }
.trv-hero.is-rose    { background: linear-gradient(135deg, #be185d, #ec4899, #f43f5e); }
.trv-hero.is-amber   { background: linear-gradient(135deg, #92400e, #d97706, #fbbf24); }
.trv-hero.is-cyan    { background: linear-gradient(135deg, #0e7490, #06b6d4, #67e8f9); }
.trv-hero.is-emerald { background: linear-gradient(135deg, #065f46, #059669, #25D366); }

/* ============================================================================
 * 3. SHARED CARD & STATS-GRID COMPONENTS
 * ========================================================================== */
.trv-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.trv-card {
    background: var(--trv-card-bg);
    border: 1px solid var(--trv-border);
    border-radius: var(--trv-radius);
    padding: 16px;
    box-shadow: var(--trv-shadow-sm);
    color: var(--trv-text);
}

/* ============================================================================
 * 4. UTILITY CLASSES — custom helpers not covered by Bootstrap 5
 * ========================================================================== */

/* Auto-fit grid — column width controlled via --trv-min-col and --trv-gap */
.trv-auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--trv-min-col, 200px), 1fr));
    gap: var(--trv-gap, 12px);
}

/* Horizontal scroll strip with snap (tabs, kanban strips) */
.trv-h-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    gap: 12px;
    padding-bottom: 8px;
}
.trv-h-scroll > * { flex-shrink: 0; }

/* Tab strip with scroll-snap */
.trv-tabs-scroll {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
}
.trv-tabs-scroll > * {
    scroll-snap-align: start;
    flex-shrink: 0;
}

/* Full-height container — uses 100dvh with 100vh fallback for iOS Safari */
.trv-full-height { min-height: 100dvh; }
@supports not (height: 100dvh) {
    .trv-full-height { min-height: 100vh; }
}

/* Drag-and-drop touch affordance — .move-fallback shown only on touch devices */
.kb-card, .bld-act, .ops-block { touch-action: manipulation; }
.move-fallback { display: none; }
@media (hover: none) {
    .move-fallback { display: inline-flex; }
}

/* Hide low-priority table columns on tiny screens (opt-in per column) */
@media (max-width: 568px) {
    .table th.d-mobile-none,
    .table td.d-mobile-none { display: none; }
    .table th:last-child,
    .table td:last-child { white-space: nowrap; }
}

/* ============================================================================
 * 5. VIEWPORT-HEIGHT FIX FOR PAGE-ROOT ELEMENTS
 * ---------------------------------------------------------------------------
 * kb/qb/bld/ops/ad pages pin their root height. Replace 100vh with 100dvh
 * so iOS Safari's collapsible address bar doesn't clip the inner scroller.
 * ========================================================================== */
.kb-page, .qb-page, .bld-page, .ops-page, .ad-page {
    min-height: calc(100dvh - 130px);
}
@supports not (height: 100dvh) {
    .kb-page, .qb-page, .bld-page, .ops-page, .ad-page {
        min-height: calc(100vh - 130px);
    }
}

/* ============================================================================
 * 6. EXISTING SCROLL-SNAP FOR BD-TABS AND NAV-TABS.SCROLL-X
 * ---------------------------------------------------------------------------
 * These are custom project patterns (not Bootstrap nav-tabs). Safe to keep.
 * ========================================================================== */
.bd-tabs, .nav-tabs.scroll-x {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.bd-tabs > *, .nav-tabs.scroll-x > * {
    scroll-snap-align: start;
    flex-shrink: 0;
}

/* ============================================================================
 * 7. PRINT STYLES
 * ========================================================================== */
@media print {
    .sidebar, .topbar, .no-print,
    [class*="filter-bar"], [class*="action-bar"],
    .modal-backdrop, .toast,
    .ops-drawer, .sb-drawer, .ld-drawer, .dl-drawer, .sr-drawer {
        display: none !important;
    }
    body, .trv-page { background: white !important; }
    .trv-hero, [class*="-hero"] {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
    }
    .trv-hero h1, .trv-hero h2, .trv-hero h3,
    [class*="-hero"] h1, [class*="-hero"] h2, [class*="-hero"] h3,
    .trv-hero p, [class*="-hero"] p { color: black !important; }
}

/* ============================================================================
 * 8. RESPONSIVE — Bootstrap 5 breakpoints (576 / 768 / 992 / 1200)
 * ---------------------------------------------------------------------------
 * All selectors below are either:
 *   (a) scoped to .trv-page — so they only apply inside Travel module pages, OR
 *   (b) targeting custom .trv-* / page-prefix classes (ld-, mk-, ops-, etc.)
 *       that Bootstrap does not know about.
 *
 * Bootstrap's own classes (.btn, .modal-*, .nav-link, .dropdown-item,
 * .row, .col-*, .form-control, .form-select, .offcanvas-*) are NOT touched.
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * 8a. Hero shrink — sm breakpoint (576px) and md breakpoint (768px)
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .trv-hero,
    .rp-hero, .ad-hero, .ld-hero, .mk-hero, .sb-hero, .wat-hero,
    .bd-hero, .qb-hero, .qb-topbar, .ops-topbar, .ops-hero,
    .dt-hero, .dl-hero, .sr-hero, .vsa-hero, .bk-hero,
    [class*="-hero"] {
        padding: 16px !important;
        border-radius: 12px !important;
    }
    .trv-hero h1, [class*="-hero"] h1 {
        font-size: 1.15rem !important;
        line-height: 1.3 !important;
    }
    .trv-hero p, [class*="-hero"] p {
        font-size: 0.85rem !important;
    }
    [class*="-hero"] .btn { padding: 8px 12px; font-size: 0.85rem; }
}

@media (max-width: 575.98px) {
    .rp-hero, .ad-hero, .ld-hero, .mk-hero, .sb-hero, .wat-hero,
    .bd-hero, .qb-topbar, .ops-topbar, .ad-page > .ad-hero {
        padding: 14px !important;
    }
    .rp-hero h1, .ad-hero h1, .ld-hero h1, .mk-hero h1,
    .sb-hero h1, .wat-hero h1, .bd-hero h1 {
        font-size: 1.15rem !important;
    }
    .rp-hero-icon, .ad-hero-icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.2rem !important;
    }
}

/* Landscape phone: reduce hero further */
@media (max-width: 932px) and (orientation: landscape) and (max-height: 500px) {
    [class*="-hero"], .trv-hero { padding: 8px 16px !important; }
    [class*="-hero"] h1, .trv-hero h1 { font-size: 1rem !important; }
}

/* --------------------------------------------------------------------------
 * 8b. Stats-grid collapse (custom .trv-stats-grid and page-prefix variants)
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .trv-stats-grid,
    .trv-auto-grid,
    [class*="stats-strip"], [class*="-stats-grid"], [class*="stats-row"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
    [class*="stats-grid"] .stat-card,
    [class*="kpi-tile"] { padding: 12px !important; }
    [class*="stat-card"] .stat-value,
    [class*="kpi-tile"] .kpi-value { font-size: 1.25rem !important; }
}

@media (max-width: 575.98px) {
    .trv-stats-grid,
    .trv-auto-grid,
    [class*="stats-strip"], [class*="-stats-grid"], [class*="stats-row"] {
        grid-template-columns: 1fr !important;
    }
}

/* --------------------------------------------------------------------------
 * 8c. Generic page-prefix grid collapse (non-Bootstrap grids in TRV pages)
 * ------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .rp-grid, .rp-kpi-row, .rp-vf-grid,
    .ad-kpi-grid, .ad-chart-grid,
    .ops-resource-grid,
    .bd-grid,
    .qb-customer,
    .mk-grid, .sb-grid, .wat-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* --------------------------------------------------------------------------
 * 8d. Filter-bar stacking — scoped to page-prefix classes only
 * ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .rp-filter-row,
    .rp-builder-row, .rp-builder-row.cols3, .rp-builder-row.cols4,
    .rp-filter-builder-row,
    .qb-customer {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    [class*="filter-bar"], [class*="filters"], .filter-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    [class*="filter-bar"] .form-control,
    [class*="filter-bar"] .form-select,
    [class*="filter-bar"] input,
    [class*="filter-bar"] select {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* --------------------------------------------------------------------------
 * 8e. Card-grid collapse (custom page-prefix grid containers only)
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {
    [class*="card-grid"], [class*="cards-grid"], [class*="grid-cards"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

/* --------------------------------------------------------------------------
 * 8f. Kanban / builder column collapse (custom .kb-col, .qb-version, etc.)
 * ------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .kb-col,
    .qb-version,
    .bld-palette,
    .bld-day,
    .bld-sidebar {
        min-width: 100% !important;
        width: 100% !important;
        flex: 1 1 100% !important;
    }
    .kb-board, .qb-canvas, .bld-main {
        flex-direction: column !important;
        overflow-x: visible !important;
    }
}

/* Kanban horizontal scroll (when full collapse is not desired) */
@media (max-width: 768px) {
    [class*="kanban"]:not(.kb-board),
    [class*="pipeline"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 12px;
    }
    [class*="kanban-column"]:not(.kb-col),
    [class*="pipeline-column"] {
        flex: 0 0 280px !important;
        min-width: 280px !important;
    }
}

/* --------------------------------------------------------------------------
 * 8g. Page-root viewport-height fix on mobile (kb/qb/bld/ops/ad)
 * ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .kb-page, .qb-page, .bld-page, .ops-page, .ad-page {
        height: auto !important;
        min-height: 100dvh;
        overflow: visible !important;
    }
}

/* --------------------------------------------------------------------------
 * 8h. Drawers become bottom-sheets on mobile (named project drawers only)
 * ------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .ops-drawer, .sb-drawer, .pr-drawer,
    .ld-drawer, .dl-drawer, .sr-drawer {
        inset: auto 0 0 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 90vh;
        max-height: 90dvh;
        border-radius: 16px 16px 0 0 !important;
        transform: translateY(0) !important;
    }
}

/* Generic drawer bottom-sheet via attribute selector (not Bootstrap offcanvas) */
@media (max-width: 575.98px) {
    [class$="-drawer"]:not(.offcanvas):not(.offcanvas-start):not(.offcanvas-end) {
        position: fixed !important;
        inset: auto 0 0 0 !important;
        width: 100% !important;
        max-height: 85vh;
        overflow-y: auto;
        border-radius: 16px 16px 0 0 !important;
    }
}

/* --------------------------------------------------------------------------
 * 8i. Chart containers (scoped to custom page-prefix classes)
 * ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .ad-chart-grid,
    .ad-chart-grid.two-up {
        grid-template-columns: 1fr !important;
    }
    .ad-chart-card { min-height: 240px; }
    .ad-chart-body canvas,
    #drillModalCanvas {
        max-height: 220px !important;
    }
}

@media (max-width: 768px) {
    [class*="chart-container"], .chart-wrap, .ad-chart-body {
        max-width: 100% !important;
    }
    [class*="chart-container"] canvas, .chart-wrap canvas {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* --------------------------------------------------------------------------
 * 8j. Table horizontal scroll — .trv-page scoped to avoid Bootstrap conflicts
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .table-responsive { -webkit-overflow-scrolling: touch; overflow-x: auto; }
    .sb-table, .wat-table,
    .trv-page table:not(.no-mobile-scroll) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
}

/* Sticky table headers — scoped to .trv-page only */
@media (max-width: 768px) {
    .trv-page .table thead th {
        position: sticky;
        top: 0;
        background: var(--trv-card-bg);
        z-index: 2;
    }
}

/* --------------------------------------------------------------------------
 * 8k. Touch targets — scoped to .trv-page to avoid inflating sidebar/header
 * nav items. .btn gets a modest minimum outside .trv-page as well.
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Scoped: only inside travel pages */
    .trv-page .btn,
    .trv-page button:not(.btn-close) {
        min-height: 40px;
    }
    .trv-page .btn-sm,
    .trv-page .btn-icon,
    .ad-chart-actions button,
    .ops-drawer-head .close,
    .rp-back-btn,
    .qb-version-head .btn,
    .mk-card-actions .btn {
        min-height: 36px;
        min-width: 36px;
        padding: 6px 10px;
    }
    .trv-page a.icon-btn,
    .trv-page button.icon-btn {
        min-height: 44px;
        min-width: 44px;
    }
}

/* --------------------------------------------------------------------------
 * 8l. Modal helpers — ADDITIVE ONLY (no overrides of Bootstrap modal classes)
 * ---------------------------------------------------------------------------
 * Use Bootstrap's modal-fullscreen-sm-down on the modal-dialog element for
 * full-screen modals. The rules below only add behavior to the custom
 * .trv-modal wrapper class when it is present, so they do not interfere
 * with HTL, Accounting, or other module modals.
 * ------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .trv-modal .modal-dialog {
        margin: 0;
    }
    .trv-modal .modal-content {
        border-radius: 0;
        min-height: 100vh;
        min-height: 100dvh;
    }
    .trv-modal .modal-body {
        padding: 12px;
        max-height: calc(100dvh - 120px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================================================
 * PAGE-SPECIFIC GRID BREAKPOINTS
 * All custom grid classes from TRV_* pages — collapses every multi-column
 * layout to a single column on small screens without touching page files.
 * Breakpoints match Bootstrap 5: sm=576px, md=768px
 * ========================================================================== */

/* ---------- Filter rows: all multi-column filter bars → stack ---------- */
@media (max-width: 768px) {
    .q-filter-row,   /* Quotations    */
    .bk-filter-row,  /* Bookings      */
    .ld-filter-row,  /* Leads         */
    .pr-filter-row,  /* Promotions    */
    .tv-filter-row,  /* Suppliers     */
    .tp-filter-row,  /* TourPrograms  */
    .vz-filter-row,  /* Visas         */
    .mk-filter-row,  /* Campaigns     */
    .dl-filter-row,  /* DocLibrary    */
    .dt-filter-row,  /* DocTemplates  */
    .sr-filter-row,  /* ScheduledRpt  */
    .sb-filter-row,  /* Subscribers   */
    .rp-filter-row,  /* Reports       */
    .wat-filter-row, /* WhatsApp      */
    .or-toolbar-row  /* OpsResources  */
    {
        grid-template-columns: 1fr !important;
    }
    /* Keep the reset button naturally sized */
    .q-filter-row   > *:last-child,
    .bk-filter-row  > *:last-child,
    .ld-filter-row  > *:last-child,
    .pr-filter-row  > *:last-child,
    .tv-filter-row  > *:last-child,
    .tp-filter-row  > *:last-child,
    .vz-filter-row  > *:last-child,
    .mk-filter-row  > *:last-child,
    .dl-filter-row  > *:last-child,
    .dt-filter-row  > *:last-child,
    .sr-filter-row  > *:last-child,
    .sb-filter-row  > *:last-child,
    .rp-filter-row  > *:last-child,
    .wat-filter-row > *:last-child,
    .or-toolbar-row > *:last-child  { width: 100%; }
    .q-filter-row   > *:last-child .btn,
    .bk-filter-row  > *:last-child .btn,
    .ld-filter-row  > *:last-child .btn,
    .pr-filter-row  > *:last-child .btn,
    .tp-filter-row  > *:last-child .btn,
    .vz-filter-row  > *:last-child .btn,
    .mk-filter-row  > *:last-child .btn,
    .dl-filter-row  > *:last-child .btn,
    .dt-filter-row  > *:last-child .btn,
    .sb-filter-row  > *:last-child .btn,
    .rp-filter-row  > *:last-child .btn,
    .wat-filter-row > *:last-child .btn,
    .or-toolbar-row > *:last-child .btn  { width: 100%; }
}

/* ---------- Builder grids: side-by-side → stacked ---------- */
@media (max-width: 768px) {
    .mk-builder-grid,   /* Campaign builder (1fr + 380px preview)  */
    .dt-build-grid,     /* Doc template builder (1fr + 380px)      */
    .wat-builder,       /* WA template builder (1.4fr + 1fr)       */
    .rp-dnd,            /* Report col drag-and-drop (1fr + 1fr)    */
    .rp-builder-row,    /* Report builder row (1fr + 1fr)          */
    .rp-builder-row.cols3,
    .rp-builder-row.cols4,
    .rp-filter-builder-row  /* Report filter builder row           */
    {
        grid-template-columns: 1fr !important;
    }
}

/* ---------- Two-column info/form grids → single column ---------- */
@media (max-width: 576px) {
    .mk-form-grid,    /* Campaign form fields      */
    .dt-form-grid,    /* Doc template form fields  */
    .sb-form-grid,    /* Subscribers form fields   */
    .wat-form-grid,   /* WA template form fields   */
    .vd-grid-2,       /* Visa detail 2-col info    */
    .or-meta,         /* Ops resource card meta    */
    .tv-supp-meta,    /* Supplier card meta        */
    .tp-card-meta,    /* Tour program card meta    */
    .dt-var-row,      /* Doc template variable row */
    .sb-icon-grid     /* Segment icon picker       */
    {
        grid-template-columns: 1fr !important;
    }
    /* Segment rule row: keep value input full width */
    .sb-rule-row { grid-template-columns: 1fr !important; }
}

/* ---------- Sidebar-style layouts → stack ---------- */
@media (max-width: 768px) {
    .lD-body   { grid-template-columns: 1fr !important; }  /* Lead detail 360px sidebar */
    .jr-body   { grid-template-columns: 1fr !important; }  /* Journey events body       */
    .bld-main  { grid-template-columns: 1fr !important; overflow: visible !important; } /* Tour builder palette */
}

/* ---------- Journey stats: 5-col → 2-col → 1-col ---------- */
@media (max-width: 768px) {
    .jr-stats { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 480px) {
    .jr-stats { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---------- WA trigger grid: large minmax → smaller ---------- */
@media (max-width: 768px) {
    .wat-trigger-grid { grid-template-columns: 1fr !important; }
}

/* ---------- Report filter-builder row (5 cols) ---------- */
@media (max-width: 992px) {
    .rp-filter-builder-row { grid-template-columns: 1fr 1fr auto !important; }
}
@media (max-width: 576px) {
    .rp-filter-builder-row { grid-template-columns: 1fr !important; }
}

/* ---------- Campaigns builder preview: hide preview on mobile, show on desktop ---------- */
@media (max-width: 768px) {
    .mk-builder-grid > *:last-child,
    .dt-build-grid   > *:last-child,
    .wat-builder     > *:last-child  {
        display: none;  /* Hide preview pane on mobile — saves screen space */
    }
    /* Show a toggle to reveal preview */
    .mk-preview-toggle,
    .dt-preview-toggle,
    .wat-preview-toggle { display: inline-flex !important; }
}
@media (min-width: 769px) {
    .mk-preview-toggle,
    .dt-preview-toggle,
    .wat-preview-toggle { display: none !important; }
}

/* ---------- Table columns: hide less important cols on mobile ---------- */
@media (max-width: 768px) {
    /* Quotations table: hide dates, pax, validity on mobile */
    .q-table th:nth-child(4), .q-table td:nth-child(4),
    .q-table th:nth-child(5), .q-table td:nth-child(5),
    .q-table th:nth-child(8), .q-table td:nth-child(8) { display: none; }

    /* Bookings table: keep number, customer, status, price, actions */
    .bk-table th:nth-child(3), .bk-table td:nth-child(3),
    .bk-table th:nth-child(4), .bk-table td:nth-child(4),
    .bk-table th:nth-child(5), .bk-table td:nth-child(5) { display: none; }

    /* General: all TRV page tables — scrollable on mobile */
    .q-table-wrap, .bk-table-wrap, .ld-table-wrap, .sb-table-wrap,
    .or-table-wrap, .vz-table-wrap, .pr-table-wrap, .tv-table-wrap,
    .sb-table, .wat-table, .rp-table { /* .sb-table/.wat-table have no wrapper */
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Smaller font in tables on mobile */
    .q-table, .bk-table, .ld-table, .or-table,
    .pr-table, .vz-table, .sb-table, .wat-table, .rp-table {
        font-size: 0.8rem;
    }
    .q-table td, .q-table th,
    .bk-table td, .bk-table th,
    .ld-table td, .ld-table th   { padding: 8px 10px; }
}

/* ---------- Page-level padding on mobile ---------- */
@media (max-width: 768px) {
    .q-page, .bk-page, .ld-page, .or-page,
    .pr-page, .tv-page, .tp-page, .vz-page,
    .mk-page, .dl-page, .dt-page, .sr-page,
    .sb-page, .rp-page, .wat-page, .jr-page,
    .lD-page, .vd-page, .qb-page {
        padding: 12px !important;
    }
    /* Hero padding reduction (catches all *-hero classes) */
    [class$="-hero"],
    [class*="-hero "] {
        padding: 14px 16px !important;
        border-radius: 12px !important;
    }
    [class$="-hero"] h1,
    [class*="-hero "] h1 { font-size: 1.1rem !important; }
    [class$="-hero"] p,
    [class*="-hero "] p  { font-size: 0.83rem !important; }
    [class$="-hero"] .btn,
    [class*="-hero "] .btn { padding: 6px 12px; font-size: 0.83rem; }
}

/* ---------- DriverPortal: action buttons full-width ---------- */
@media (max-width: 576px) {
    .actions { grid-template-columns: 1fr !important; }
}

/* ============================================================================
 * END responsive section
 * ========================================================================== */