/* ==========================================================================
   KESAVI TOURS & TRAVELS PVT. LTD. — GLOBAL RESPONSIVE LAYER
   --------------------------------------------------------------------------
   Loaded LAST (after style.css + seat-booking.css) so it can safely override
   both sheets. Everything is scoped inside media queries except section 0.

   Breakpoints
     1400px  small desktop / large laptop
     1100px  tablet landscape
      899px  tablet portrait  (sidebar becomes an off-canvas drawer)
      640px  phones
      420px  small phones
   ========================================================================== */

/* ==========================================================================
   0. BASE SAFETY
   Flex / grid children default to min-width:auto, which is what makes long
   words, toolbars and tables push a container wider than the viewport.
   Allowing them to shrink is what makes the layout genuinely fluid.
   ========================================================================== */

html {
    -webkit-text-size-adjust: 100%;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

.main-content,
.workspace-viewport,
.view-section,
.view-header,
.view-header-actions,
.panel-section,
.panel-header,
.panel-title,
.kpi-grid,
.kpi-card,
.dashboard-grid-2col,
.filter-toolbar,
.filter-controls-row,
.filter-group,
.departure-item-card,
.departure-info,
.booking-workspace-app,
.step-pane,
.step2-dates-layout,
.step-tours-grid,
.step3-buses-grid,
.calendar-card-container,
.calendar-header-toolbar,
.selected-info-cards-grid,
.info-summary-card,
.bottom-action-navigation-bar,
.selected-seats-center-section,
.review-fields-grid,
.review-card-block,
.form-grid-2col,
.form-grid-3col,
.passenger-trip-summary-card,
.pass-summary-meta-left,
.pass-summary-seats-right,
.bus-choice-card,
.bus-inventory-strip,
.stats-counters-list,
.seat-layout-admin-wrap {
    min-width: 0;
}

/* Text should wrap instead of forcing a container wider */
.view-header h2,
.panel-title,
.departure-info strong,
.departure-info span,
.info-card-heading,
.step1-main-heading,
.review-value,
.table-responsive td,
.table-responsive th {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Long toolbars always wrap rather than overflow */
.view-header,
.panel-header,
.filter-toolbar,
.filter-controls-row,
.view-header-actions,
.departure-item-card,
.passenger-trip-summary-card,
.step3-header-bar,
.review-card-header,
.confirmation-action-buttons {
    flex-wrap: wrap;
}

/* ==========================================================================
   COACH BLUEPRINT & ADMIN SEAT LAYOUT (GLOBAL - ALL SCREEN SIZES)
   ========================================================================== */
.admin-coach-direction-header,
#seat-layout-admin-container .admin-coach-direction-header,
.admin-coach-row,
#seat-layout-admin-container .admin-coach-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: stretch;
}

#seat-layout-admin-container .admin-berth-box {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
    background: #f8fafc;
    padding: 4px !important;
    border: 1.5px solid #000000 !important;
    border-radius: 6px !important;
    min-height: 70px !important;
    box-sizing: border-box !important;
}

#seat-layout-admin-container .admin-coach-aisle-cell {
    text-align: center;
    font-size: 15px;
    font-weight: 900;
    color: #000000;
    background: #e2e8f0;
    height: 100%;
    min-height: 70px;
    border: 1.5px solid #000000;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.05em;
    user-select: none;
    box-sizing: border-box;
}

/* ==========================================================================
   1. SMALL DESKTOP / LARGE LAPTOP (<= 1400px)
   ========================================================================== */

@media (max-width: 1400px) {
    .workspace-viewport {
        padding: 18px 20px;
    }

    .kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 14px;
    }

    .step-tours-grid {
        grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
    }

    .step3-buses-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

/* ==========================================================================
   2. TABLET LANDSCAPE (<= 1100px)
   ========================================================================== */

@media (max-width: 1100px) {
    .workspace-viewport {
        padding: 16px;
    }

    /* Wizard summary cards: 2 + 1 instead of 3 across */
    .selected-info-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .selected-info-cards-grid > :last-child {
        grid-column: 1 / -1;
    }

    /* Calendar + departure list stack */
    .step2-dates-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .step-tours-grid {
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        gap: 12px;
    }

    .step3-buses-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Seat blueprint keeps a scrollable canvas so cells stay tappable */
    .bus-chart-outer-container,
    .seat-layout-admin-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ==========================================================================
   3. TABLET PORTRAIT & BELOW (<= 899px)
   ========================================================================== */

/* Sidebar backdrop on mobile/tablet */
.sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(14, 28, 54, 0.65);
    backdrop-filter: blur(3px);
    z-index: 10000;
    display: none;
    transition: opacity 0.25s ease;
}

.sidebar-backdrop.active {
    display: block;
}

.mobile-scroll-hint {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: #475569;
    background: #f1f5f9;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    padding: 6px 10px;
    margin-bottom: 8px;
    text-align: center;
}

@media (max-width: 899px) {
    /* ---------- Off-Canvas Sidebar Drawer ---------- */
    .sidebar {
        position: fixed !important;
        top: 0;
        left: -280px;
        width: 260px;
        height: 100vh;
        height: 100dvh;
        z-index: 10001 !important;
        background: #0e1c36;
        box-shadow: 4px 0 30px rgba(0, 0, 0, 0.45);
        transition: left 0.28s cubic-bezier(0.16, 1, 0.3, 1);
        display: flex;
        flex-direction: column;
    }

    .sidebar.open {
        left: 0 !important;
    }

    /* ---------- App chrome ---------- */
    .workspace-viewport {
        padding: 12px;
        max-width: 100%;
    }

    .view-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-bottom: 14px;
    }

    .view-header h2 {
        font-size: 17px;
    }

    .view-header-actions {
        gap: 8px;
    }

    .view-header-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .panel-section {
        padding: 14px;
        border-radius: 12px;
    }

    .panel-header {
        align-items: flex-start;
        gap: 10px;
    }

    .panel-header .btn {
        flex: 0 0 auto;
    }

    /* Filter bars become stacked full-width controls */
    .filter-toolbar,
    .filter-controls-row {
        align-items: stretch;
        gap: 8px;
    }

    .filter-group {
        flex: 1 1 100%;
        width: 100%;
    }

    .filter-group input,
    .filter-group select {
        width: 100%;
    }

    .filter-pills-group {
        flex-wrap: wrap;
        gap: 6px;
    }

    .kpi-grid,
    .dashboard-grid-2col,
    .stats-counters-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .stats-counters-list {
        display: grid;
    }

    /* Tables scroll inside their own wrapper (never clipped) */
    .table-responsive {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .data-table {
        min-width: 620px;
    }

    .data-table.compact-table {
        min-width: 480px;
    }

    .drawer-panel,
    .dossier-modal-panel,
    #approval-drawer {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
        max-height: calc(100vh - 24px);
        border-radius: 14px;
    }

    .modal-box {
        width: 94%;
        max-width: 94%;
        max-height: 90vh;
        overflow-y: auto;
    }

    .toast-container {
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
    }

    .departure-item-card {
        align-items: flex-start;
        gap: 8px;
    }

    /* ---------- Booking wizard ---------- */
    .booking-workspace-app {
        padding: 8px 12px;
        min-height: 0;
        max-width: 100%;
    }

    .progress-stepper-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 2px;
        padding-bottom: 4px;
    }

    .step-connecting-line {
        min-width: 10px;
    }

    .selected-info-cards-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .selected-info-cards-grid > :last-child {
        grid-column: auto;
    }

    .step-tours-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    }

    .step3-buses-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .step-pane {
        padding: 14px;
    }

    .calendar-card-container {
        padding: 10px;
    }

    /* Bottom action bar: info line on top, buttons underneath */
    .bottom-action-navigation-bar {
        flex-wrap: wrap;
        gap: 8px;
        row-gap: 6px;
    }

    .bottom-action-navigation-bar .selected-seats-center-section {
        flex: 1 1 100%;
        order: -1;
        justify-content: flex-start;
    }

    .btn-nav-action {
        flex: 1 1 45%;
        justify-content: center;
    }

    .selected-count-pill {
        white-space: normal;
        flex-wrap: wrap;
    }

    .selected-chips-list {
        max-width: 100%;
    }

    /* Passenger form & review grids stack */
    .form-grid-2col,
    .form-grid-3col,
    .review-fields-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .review-field-item.span-2 {
        grid-column: auto;
    }

    .pass-summary-meta-left,
    .pass-summary-seats-right {
        width: 100%;
    }

    .bus-inventory-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Bus Seat Blueprint Frame Fits 100% Fluid On Mobile */
    .bus-seat-blueprint-frame,
    #seat-layout-admin-container > div {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .bus-chart-outer-container,
    .seat-layout-admin-wrap {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        padding: 0 !important;
    }

    /* Direction Headers & Seat Grid: 4 Berth Columns + 1 Compact Center Aisle */
    .bus-direction-header-row,
    .bus-seats-table-grid,
    #seat-layout-admin-container .admin-coach-direction-header,
    #seat-layout-admin-container .admin-coach-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 30px minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 4px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Top Black Header Bar */
    .bus-chart-top-bar {
        padding: 6px 8px !important;
        gap: 3px !important;
    }

    .top-bar-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        font-size: 10.5px !important;
        line-height: 1.2 !important;
        letter-spacing: 0.02em !important;
    }

    .top-bar-cell {
        font-size: 10.5px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 50% !important;
    }

    /* Tour Banner */
    .bus-chart-tour-banner {
        font-size: 12px !important;
        padding: 5px 8px !important;
        letter-spacing: 0.04em !important;
        line-height: 1.25 !important;
    }

    /* Cockpit Row */
    .bus-cockpit-header {
        height: 44px !important;
        width: 100% !important;
    }

    .cockpit-entry, .cockpit-driver {
        width: 65px !important;
        min-width: 65px !important;
        max-width: 65px !important;
        font-size: 11px !important;
        letter-spacing: 0.05em !important;
        padding: 0 !important;
    }

    .cockpit-brand-center {
        flex: 1 !important;
        padding: 2px 4px !important;
    }

    .cockpit-brand-center img.cockpit-logo-img {
        max-height: 32px !important;
        max-width: 110px !important;
    }

    /* Direction Header Cells */
    .dir-cell {
        padding: 4px 0 !important;
        font-size: 10px !important;
        letter-spacing: 0.05em !important;
    }

    .dir-aisle-cap {
        width: 28px !important;
    }

    /* Number Cells */
    .bus-num-cell {
        padding: 3px 0 !important;
        font-size: 11px !important;
        gap: 4px !important;
        letter-spacing: 0 !important;
    }

    .bus-num-cell span.sub-num {
        padding: 1px 3px !important;
        font-size: 10px !important;
    }

    /* Aisle Gallery Column */
    .bus-gallery-aisle-column {
        width: 28px !important;
        padding: 4px 0 !important;
    }

    .bus-gallery-aisle-column .aisle-letter {
        font-size: 11px !important;
        margin: 1px 0 !important;
        letter-spacing: 0 !important;
    }

    /* Berth Cards */
    .bus-berth-card {
        min-height: 64px !important;
        height: 64px !important;
        padding: 3px 2px !important;
    }

    .berth-slip-id {
        font-size: 11px !important;
        margin-bottom: 1px !important;
    }

    .berth-passenger-name {
        font-size: 9px !important;
        line-height: 1.15 !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .berth-branch-tag {
        font-size: 7.5px !important;
        margin-top: 1px !important;
    }

    .bus-berth-card.status-selected .berth-selection-badge {
        top: 2px !important;
        right: 2px !important;
        width: 13px !important;
        height: 13px !important;
        font-size: 8px !important;
    }

    /* Step 4 Quick Actions Toolbar */
    #step4-quick-actions-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 8px !important;
    }

    #step4-quick-actions-bar > div:first-child {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
    }

    #step4-quick-actions-bar > div:last-child {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
    }

    #step4-quick-actions-bar button {
        width: 100% !important;
        justify-content: center !important;
        padding: 8px 10px !important;
        font-size: 13px !important;
        border-radius: 6px !important;
    }

    /* Admin Seat Layout Section 8 */
    #seat-layout-admin-container {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    #seat-layout-admin-container > div {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #seat-layout-admin-container > div > div[style*="grid-template-columns"] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 28px minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 4px !important;
    }

    .admin-berth-box {
        grid-template-columns: 1fr !important;
        gap: 3px !important;
        padding: 3px 2px !important;
        min-height: auto !important;
    }

    .admin-seat-cell {
        min-height: 40px !important;
        padding: 3px 2px !important;
    }

    .admin-seat-cell > div:first-child {
        font-size: 9.5px !important;
    }

    .admin-seat-cell > div:nth-child(2) {
        font-size: 11px !important;
    }

    .admin-seat-cell > div:nth-child(3) {
        font-size: 9px !important;
    }

    /* Seat legend / inventory counters strip wraps instead of overflowing */
    .legend-stats-combined-strip {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 6px 14px;
        padding: 8px 12px;
    }

    .legend-items-list,
    .stats-counters-list {
        flex-wrap: wrap;
        gap: 8px 12px;
        min-width: 0;
    }

    .strip-vertical-divider {
        display: none;
    }
}

/* ==========================================================================
   4. PHONES (<= 640px)
   ========================================================================== */

@media (max-width: 640px) {
    .workspace-viewport {
        padding: 10px;
    }

    .view-header h2 {
        font-size: 16px;
    }

    .view-header .text-muted {
        font-size: 11.5px;
    }

    .panel-section {
        padding: 12px;
    }

    .kpi-card {
        padding: 12px;
    }

    /* ---------- Tables become stacked cards ---------- */
    .table-responsive table.data-table:not(.no-stack),
    .table-responsive table.data-table:not(.no-stack) thead,
    .table-responsive table.data-table:not(.no-stack) tbody,
    .table-responsive table.data-table:not(.no-stack) tr,
    .table-responsive table.data-table:not(.no-stack) td {
        display: block;
        width: 100%;
    }

    .table-responsive table.data-table:not(.no-stack) {
        min-width: 0;
    }

    .table-responsive table.data-table:not(.no-stack) thead {
        display: none;
    }

    .table-responsive table.data-table:not(.no-stack) tr {
        background: #ffffff;
        border: 1px solid var(--border-color);
        border-radius: 10px;
        margin-bottom: 10px;
        padding: 8px 10px;
        box-shadow: var(--shadow-subtle, 0 1px 2px rgba(15, 23, 42, 0.04));
    }

    .table-responsive table.data-table:not(.no-stack) td {
        border: none;
        padding: 5px 0;
        text-align: right !important;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    .table-responsive table.data-table:not(.no-stack) td::before {
        content: attr(data-label);
        flex: 0 0 35% !important;
        max-width: 35% !important;
        font-size: 11px;
        font-weight: 700;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.3px;
        text-align: left !important;
    }

    .table-responsive table.data-table:not(.no-stack) td > * {
        max-width: 63% !important;
        word-break: normal !important;
    }

    .table-responsive table.data-table:not(.no-stack) td[colspan]::before,
    .table-responsive table.data-table:not(.no-stack) td.table-empty-cell::before {
        display: none;
    }

    .table-responsive table.data-table:not(.no-stack) td[colspan],
    .table-responsive table.data-table:not(.no-stack) td.table-empty-cell {
        justify-content: flex-start;
    }

    /* Actions cell on mobile cards: stack label above and spread buttons cleanly */
    .table-responsive table.data-table:not(.no-stack) td[data-label="Actions"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
        padding-top: 8px !important;
        border-top: 1px dashed #e2e8f0 !important;
    }

    .table-responsive table.data-table:not(.no-stack) td[data-label="Actions"]::before {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 2px !important;
    }

    .table-responsive table.data-table:not(.no-stack) td[data-label="Actions"] .d-flex {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 6px !important;
        align-items: center !important;
    }

    .table-responsive table.data-table:not(.no-stack) td[data-label="Actions"] .btn,
    .table-responsive table.data-table:not(.no-stack) td[data-label="Actions"] button {
        white-space: nowrap !important;
        font-size: 11px !important;
        padding: 6px 8px !important;
        flex: 1 1 0 !important;
        text-align: center !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* ---------- Wizard: compact controls ---------- */
    .step-circle-badge {
        width: 26px;
        height: 26px;
        font-size: 11.5px;
    }

    .step-title-label {
        font-size: 9.5px;
    }

    .step-connecting-line {
        margin: 0 3px 14px 3px;
        min-width: 8px;
    }

    .calendar-days-grid {
        gap: 2px;
        grid-auto-rows: 40px;
    }

    .cal-day-cell {
        height: 40px;
        min-height: 40px;
        max-height: 40px;
        padding: 2px;
    }

    .calendar-weekdays-row {
        font-size: 9.5px;
    }

    .calendar-header-toolbar {
        gap: 8px;
    }

    .step1-main-heading {
        font-size: 15px;
    }

    .tour-card-banner {
        height: 110px;
    }

    .bus-seat-blueprint-frame,
    #seat-layout-admin-container > div {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .bus-cockpit-header {
        padding: 6px 8px;
    }

    .cockpit-brand-text .cockpit-title {
        font-size: 15px;
    }

    .btn-nav-action {
        flex: 1 1 40%;
        font-size: 12.5px;
        padding: 9px 10px;
    }

    /* ---------- Login ---------- */
    .auth-wrapper {
        padding: 16px 12px;
        align-items: flex-start;
        min-height: 100dvh;
        overflow-y: auto;
    }

    .auth-card {
        padding: 24px 18px;
        border-radius: 16px;
    }

    .auth-header h2 {
        font-size: 19px;
    }

    .role-pills-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   5. SMALL PHONES (<= 420px) & GLOBAL TOUCH-FIRST MOBILE OVERRIDES
   ========================================================================== */

@media (max-width: 420px) {
    .step-title-label {
        display: none;
    }

    .step-connecting-line {
        margin-bottom: 0;
    }

    .auth-card {
        padding: 20px 14px;
    }
}

/* ==========================================================================
   6. DEDICATED MOBILE & TABLET PERFECTION LAYER (< 768px & < 640px)
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. TOP HEADER: Clean 2-Row Design (Row 1: Nav + Actions; Row 2: Full Width Branch) */
    .top-header {
        height: auto !important;
        min-height: 52px !important;
        padding: 8px 12px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px 10px !important;
        background: #ffffff !important;
        border-bottom: 1px solid #e2e8f0 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    }

    .header-left {
        order: 1 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .btn-sidebar-toggle {
        display: inline-flex !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-radius: 8px !important;
        align-items: center !important;
        justify-content: center !important;
        background: #f8fafc !important;
        border: 1px solid #cbd5e1 !important;
        font-size: 15px !important;
        color: #1e293b !important;
        cursor: pointer !important;
    }

    .header-brand-logo-wrap {
        display: flex !important;
        align-items: center !important;
    }

    .header-main-logo {
        height: 32px !important;
        max-width: 110px !important;
        object-fit: contain !important;
    }

    .brand-text-col {
        display: none !important;
    }

    /* Use display: contents so children participate directly in top-header flex container */
    .header-right {
        display: contents !important;
    }

    #header-notifications-btn {
        order: 2 !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-radius: 8px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #f8fafc !important;
        border: 1px solid #cbd5e1 !important;
        position: relative !important;
        cursor: pointer !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }

    #header-notifications-btn .header-badge {
        position: absolute !important;
        top: -4px !important;
        right: -4px !important;
        font-size: 10px !important;
        padding: 1px 5px !important;
    }

    .user-profile-menu-container {
        order: 3 !important;
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
    }

    .user-profile-btn {
        padding: 3px 6px 3px 4px !important;
        height: 36px !important;
        border-radius: 8px !important;
        background: #f8fafc !important;
        border: 1px solid #cbd5e1 !important;
        gap: 4px !important;
        display: inline-flex !important;
        align-items: center !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
    }

    .user-avatar {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }

    .user-info {
        display: none !important;
    }

    /* Branch selector: clean full-width pill bar on Row 2 */
    .branch-selector-container {
        order: 4 !important;
        width: 100% !important;
        flex: 1 0 100% !important;
        margin-top: 2px !important;
        background: #f8fafc !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 8px !important;
        padding: 4px 10px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    .branch-selector-container .branch-label {
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #475569 !important;
        white-space: nowrap !important;
        margin-right: 6px !important;
        display: inline-block !important;
    }

    .branch-selector-container .branch-dropdown-select {
        flex: 1 1 auto !important;
        width: 100% !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #0f172a !important;
        background: transparent !important;
        border: none !important;
        outline: none !important;
        cursor: pointer !important;
    }

    /* 2. TOAST NOTIFICATIONS: Bottom Snackbar (Never Cover Header) */
    .toast-container {
        top: auto !important;
        bottom: 24px !important;
        left: 16px !important;
        right: 16px !important;
        width: auto !important;
        max-width: none !important;
        pointer-events: none !important;
        z-index: 99999 !important;
    }

    .toast-msg {
        pointer-events: auto !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important;
        font-size: 13px !important;
        padding: 10px 16px !important;
    }

    /* 3. APPROVAL CENTER: Horizontal Scrollable Chip Carousels */
    .dash-branch-hub {
        padding: 10px 12px !important;
    }

    .dash-branch-hub-title {
        font-size: 11px !important;
        margin-bottom: 6px !important;
    }

    .dash-branch-pills-scroll {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 8px !important;
        padding-bottom: 6px !important;
        scrollbar-width: none !important;
    }

    .dash-branch-pills-scroll::-webkit-scrollbar {
        display: none !important;
    }

    .dash-branch-pill {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        font-size: 11.5px !important;
        padding: 5px 10px !important;
    }

    .filter-pills-group#approval-status-filters {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 8px !important;
        padding-bottom: 6px !important;
        scrollbar-width: none !important;
        width: 100% !important;
    }

    .filter-pills-group#approval-status-filters::-webkit-scrollbar {
        display: none !important;
    }

    .filter-pills-group#approval-status-filters .filter-pill {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        font-size: 11.5px !important;
        padding: 6px 12px !important;
    }

    .filter-controls-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    .filter-controls-row .filter-group.flex-grow-1 {
        grid-column: span 2 !important;
        width: 100% !important;
    }

    .btn-clear-filters {
        grid-column: span 2 !important;
        width: 100% !important;
        justify-content: center !important;
        min-height: 38px !important;
    }

    /* 4. REPORTS & ANALYTICS: Single-Row Export Buttons & 2-Col KPI Grid */
    #view-reports .view-header-actions {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        width: 100% !important;
    }

    #view-reports .view-header-actions .btn {
        flex: 1 1 0 !important;
        justify-content: center !important;
        min-height: 38px !important;
        font-size: 12px !important;
        padding: 6px 8px !important;
        white-space: nowrap !important;
    }

    #view-reports .kpi-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    #view-reports .kpi-grid .kpi-card:last-child {
        grid-column: span 2 !important;
    }

    .kpi-card {
        padding: 12px 14px !important;
        min-height: 0 !important;
    }

    .kpi-icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        font-size: 16px !important;
    }

    .kpi-value {
        font-size: 20px !important;
        line-height: 1.1 !important;
        margin: 2px 0 !important;
    }

    .kpi-label {
        font-size: 11px !important;
    }

    .kpi-sub {
        font-size: 10px !important;
    }
}

@media (max-width: 640px) {
    /* 5. STEP 1 (SELECT TOUR): Stacked Heading & Full Width Search */
    .step1-header-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .step1-title-col {
        width: 100% !important;
    }

    .step1-main-heading {
        font-size: 17px !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        white-space: normal !important;
        line-height: 1.25 !important;
    }

    .step1-sub-heading {
        font-size: 11.5px !important;
        line-height: 1.3 !important;
    }

    .step1-search-wrap {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .step1-count-badge {
        align-self: flex-start !important;
        font-size: 11px !important;
    }

    .step-tours-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* 6. SEAT BOOKING BOTTOM NAVIGATION: Fluid, Touch-Friendly, No Horizontal Clipping */
    .bottom-action-navigation-bar {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        padding: 10px 12px !important;
        position: sticky !important;
        bottom: 0 !important;
        z-index: 100 !important;
        background: #ffffff !important;
        border-top: 1.5px solid #cbd5e1 !important;
        box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.08) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .selected-seats-center-section {
        width: 100% !important;
        order: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
    }

    .selected-count-pill {
        font-size: 11.5px !important;
        padding: 3px 8px !important;
    }

    .selected-chips-list {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 4px !important;
        max-width: calc(100% - 85px) !important;
        scrollbar-width: none !important;
    }

    .selected-chips-list::-webkit-scrollbar {
        display: none !important;
    }

    .btn-clear-selection-link {
        font-size: 10.5px !important;
        padding: 3px 6px !important;
    }

    .bottom-nav-right-group {
        width: 100% !important;
        order: 2 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .btn-nav-action:not(.d-none) {
        min-height: 42px !important;
        font-size: 12.5px !important;
        padding: 8px 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        border-radius: 8px !important;
        white-space: normal !important;
    }

    .btn-nav-action.d-none,
    .d-none {
        display: none !important;
    }

    #btn-step-back:not(.d-none) {
        flex: 0 0 auto !important;
        min-width: 75px !important;
    }

    #btn-step-next:not(.d-none) {
        flex: 1 1 auto !important;
        min-width: 130px !important;
        font-weight: 800 !important;
        font-size: 13px !important;
        justify-content: center !important;
    }

    #btn-step4-hold:not(.d-none),
    #btn-step4-direct-book:not(.d-none) {
        flex: 1 1 calc(50% - 4px) !important;
        min-height: 40px !important;
        font-size: 12px !important;
        padding: 6px 8px !important;
        justify-content: center !important;
    }

    /* 7. SEAT INVENTORY COUNTERS: 3-Column Compact Grid (Save 200px Vertical Space) */
    .bus-inventory-strip {
        padding: 8px 10px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .legend-items-list {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px 10px !important;
        font-size: 11px !important;
    }

    .strip-vertical-divider {
        display: none !important;
    }

    .stats-counters-list {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .stat-counter-item {
        padding: 5px 6px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 6px !important;
        gap: 2px !important;
    }

    .stat-counter-item strong {
        font-size: 14px !important;
        line-height: 1 !important;
    }

    .stat-counter-item span {
        font-size: 9px !important;
        text-transform: uppercase !important;
        color: #64748b !important;
    }

    .stat-counter-item i {
        font-size: 11px !important;
    }

    /* 8. TOP HOLD SELECTED BANNER: Clean Responsive Stack */
    #seat-action-hold-bar {
        padding: 10px 12px !important;
        border-radius: 10px !important;
        flex-direction: column !important;
        gap: 8px !important;
        align-items: stretch !important;
    }

    #seat-action-hold-bar > div:first-child {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    #seat-action-hold-bar > div:last-child {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        width: 100% !important;
    }

    #seat-action-hold-bar button {
        flex: 1 1 0 !important;
        justify-content: center !important;
        min-height: 38px !important;
        font-size: 12px !important;
        padding: 6px 8px !important;
    }
}