/*
 * =====================================================
 *  LuxTravely Platform — Global Responsive Stylesheet
 *  responsive.css
 * =====================================================
 *  This file is the single source of truth for
 *  responsive layout adjustments across the entire
 *  platform. Load AFTER main.css in base.html.
 *
 *  Breakpoint system (mobile-first):
 *    xs  : max-width: 479px   (small phones)
 *    sm  : max-width: 639px   (phones)
 *    md  : max-width: 767px   (large phones / small tablets)
 *    lg  : max-width: 1023px  (tablets, handled by base sidebar)
 *    xl  : max-width: 1279px  (small laptops)
 * =====================================================
 */

/* ====================================================
   1. BASE & VIEWPORT FIXES
   ==================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    overflow-x: hidden;
    min-width: 0;
}

/* Ensure images are fluid */
img {
    max-width: 100%;
    height: auto;
}

/* ====================================================
   2. LAYOUT — CONTENT WRAPPER
   ==================================================== */

/* Base content wrapper horizontal padding */
.content-wrapper {
    padding: 24px;
}

@media (max-width: 1279px) {
    .content-wrapper {
        padding: 20px;
    }
}

@media (max-width: 1023px) {

    /* Sidebar is hidden on ≤1023px; no margin needed */
    .main-content.with-sidebar,
    .main-content.with-sidebar.expanded {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .content-wrapper {
        padding: 16px;
    }
}

@media (max-width: 767px) {
    .content-wrapper {
        padding: 12px;
    }
}

@media (max-width: 479px) {
    .content-wrapper {
        padding: 8px;
    }
}

/* ====================================================
   3. TOP NAV — MOBILE FIXES
   ==================================================== */

.top-nav {
    padding: 12px 20px;
    flex-wrap: nowrap;
    gap: 8px;
}

@media (max-width: 767px) {
    .top-nav {
        padding: 10px 12px;
    }

    /* Hide long text labels in nav buttons on mobile */
    .top-nav .nav-label-text {
        display: none;
    }

    /* Compact user profile pill on mobile */
    .user-profile-btn .user-name-text {
        display: none;
    }
}

@media (max-width: 479px) {
    .top-nav {
        padding: 8px 10px;
    }
}

/* Mobile hamburger button — always visible on ≤1023px */
.mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    color: #374151;
    font-size: 18px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.mobile-menu-btn:hover {
    background: #f1f5f9;
    border-color: #D6A419;
    color: #D6A419;
}

@media (max-width: 1023px) {
    .mobile-menu-btn {
        display: flex;
    }
}

/* ====================================================
   4. SIDEBAR — MOBILE OVERLAY & TRANSITIONS
   ==================================================== */

/* Sidebar z-index layering */
.sidebar {
    z-index: 50;
}

.mobile-overlay {
    z-index: 45;
    cursor: pointer;
}

/* On mobile, sidebar slides out from the left */
@media (max-width: 1023px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            box-shadow 0.3s ease;
        /* Ensure the sidebar is always wide on mobile (not collapsed) */
        width: 280px !important;
    }

    .sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
    }

    /* Prevent body scroll when sidebar is open on mobile */
    body.sidebar-open {
        overflow: hidden;
    }
}

/* ====================================================
   5. GENERIC GRID UTILITIES
   ==================================================== */

/*
 * Reusable responsive grid classes.
 * Apply .lux-grid-auto-2 etc. on any grid container
 * instead of hard-coding col counts.
 */

/* Auto 2-col → 1-col on mobile */
.lux-grid-auto-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 479px) {
    .lux-grid-auto-2 {
        grid-template-columns: 1fr;
    }
}

/* Auto 3-col → 2-col → 1-col */
.lux-grid-auto-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 767px) {
    .lux-grid-auto-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 479px) {
    .lux-grid-auto-3 {
        grid-template-columns: 1fr;
    }
}

/* Auto 4-col → 2-col → 1-col */
.lux-grid-auto-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 1023px) {
    .lux-grid-auto-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 479px) {
    .lux-grid-auto-4 {
        grid-template-columns: 1fr;
    }
}

/* ====================================================
   6. RESPONSIVE TABLE WRAPPER
   ==================================================== */

/*
 * Wrap any <table> that overflows on mobile with:
 * <div class="table-responsive">…</div>
 */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
}

.table-responsive table {
    min-width: 600px;
    width: 100%;
}

@media (max-width: 479px) {

    /* On very small screens, hide less important columns via JS/CSS targeting */
    .table-responsive .col-hide-xs {
        display: none;
    }
}

/* ====================================================
   7. RESPONSIVE CARD COMPONENTS
   ==================================================== */

/* Stat cards: reduce padding & font on mobile */
@media (max-width: 767px) {
    .stat-card {
        padding: 1rem;
    }

    .stat-card .text-3xl {
        font-size: 1.5rem;
    }
}

@media (max-width: 479px) {
    .stat-card {
        padding: 0.875rem;
    }
}

/* Action cards: reduce padding on mobile */
@media (max-width: 767px) {
    .action-card {
        padding: 1rem;
    }

    .action-card .p-3 {
        padding: 0.625rem;
    }

    .action-card svg.h-8 {
        width: 1.5rem;
        height: 1.5rem;
    }
}

/* ====================================================
   8. RESPONSIVE MODALS
   ==================================================== */

/*
 * Apply .modal-responsive to any modal container.
 * On mobile: full-screen sheet; on desktop: centered dialog.
 */
.modal-responsive {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-responsive .modal-dialog {
    width: 100%;
    max-width: 480px;
    margin: auto;
    border-radius: 12px;
}

@media (max-width: 639px) {
    .modal-responsive {
        align-items: flex-end;
        padding: 0;
    }

    .modal-responsive .modal-dialog {
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* Generic: any modal with w-96 becomes w-full max-w-sm on mobile */
@media (max-width: 639px) {
    .fixed .w-96 {
        width: calc(100% - 2rem) !important;
        max-width: 24rem;
    }

    /* Center fixed modals properly on mobile */
    .fixed .relative.top-20 {
        top: auto !important;
        margin: 1rem auto !important;
        position: relative !important;
    }

    /* Full-screen overlay centering for small screens — use .lux-modal-overlay
       instead of .fixed.inset-0 to avoid overriding Tailwind's `hidden` class */
    .lux-modal-overlay {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ====================================================
   9. UTILITY CLASSES
   ==================================================== */

/* Visibility helpers */
.hide-mobile {
    display: block;
}

.show-mobile {
    display: none;
}

@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: block !important;
    }

    .show-flex-mobile {
        display: flex !important;
    }
}

.hide-desktop {
    display: none;
}

@media (max-width: 1023px) {
    .hide-desktop {
        display: block;
    }
}

/* Stack flex row → column on mobile */
.stack-mobile {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
}

@media (max-width: 767px) {
    .stack-mobile {
        flex-direction: column;
    }
}

/* Full-width on mobile */
.full-width-mobile {
    width: auto;
}

@media (max-width: 767px) {
    .full-width-mobile {
        width: 100% !important;
    }
}

/* Touch target minimum size (WCAG 2.5.5) */
@media (max-width: 1023px) {

    button,
    a.btn,
    a.action-card,
    a.nav-item,
    .btn {
        min-height: 44px;
    }

    .nav-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* ====================================================
   10. FORM RESPONSIVE FIXES
   ==================================================== */

@media (max-width: 767px) {

    /* Full-width inputs & selects on mobile */
    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
    }

    /* Form grid: 2-col → 1-col */
    .form-grid-2 {
        grid-template-columns: 1fr !important;
    }
}

/* ====================================================
   11. TYPOGRAPHY SCALE
   ==================================================== */

@media (max-width: 767px) {

    /* Scale down page headings */
    h1.text-4xl,
    .text-4xl {
        font-size: 1.75rem !important;
        line-height: 2.25rem !important;
    }

    h2.text-3xl,
    .text-3xl {
        font-size: 1.5rem !important;
        line-height: 2rem !important;
    }

    h3.text-2xl,
    .text-2xl {
        font-size: 1.25rem !important;
        line-height: 1.75rem !important;
    }

    h4.text-xl,
    .text-xl {
        font-size: 1.1rem !important;
        line-height: 1.5rem !important;
    }

    /* Section headings in dashboard */
    .dashboard-section-title {
        font-size: 1.1rem;
    }
}

@media (max-width: 479px) {

    h1.text-4xl,
    .text-4xl {
        font-size: 1.5rem !important;
        line-height: 2rem !important;
    }
}

/* ====================================================
   12. SCROLLBAR (Custom, cross-platform)
   ==================================================== */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #D6A419;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #b8930e;
}

/* ====================================================
   14. BOOKINGS LIST PAGE (unified_bookings.html)
   ==================================================== */

/* Table header: stack on mobile */
@media (max-width: 639px) {
    .table-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.875rem 1rem;
    }

    .table-title {
        font-size: 1.1rem;
    }

    /* Booking card padding reduction */
    .bookings-container .p-6 {
        padding: 1rem;
    }
}

/* Booking action buttons: wrap on smaller screens */
@media (max-width: 639px) {

    /* Action bar in each booking card */
    .bookings-container .flex.items-center.gap-2 {
        flex-wrap: wrap;
    }

    /* Dropdown menus: anchor to left on mobile to avoid off-screen */
    .bookings-container .absolute.right-0 {
        right: auto;
        left: 0;
    }

    /* Pagination section */
    .pagination-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.75rem;
    }

    .pagination-controls {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    /* Stats overview: keep 1-col on XS so labels have room — Tailwind handles 2-col at sm+ */
}

/* Filter form toggle: hidden by default on mobile, shown via JS */
@media (max-width: 1023px) {
    .filters-form-collapsible {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .filters-form-collapsible.open {
        max-height: 2000px;
        /* large enough to not clip */
    }
}

@media (min-width: 1024px) {

    /* Always show filters on desktop */
    .filters-form-collapsible {
        max-height: none !important;
        overflow: visible !important;
    }
}

/* ====================================================
   15. CREATE BOOKING PAGE (traveler_create_booking)
   ==================================================== */

/* Sticky price card: remove sticky on mobile (it should scroll naturally) */
@media (max-width: 1023px) {
    .sticky-price-card {
        position: static !important;
        top: auto !important;
    }
}

/* Map: reduce height on small phones */
@media (max-width: 479px) {
    .map-container {
        height: 200px !important;
    }
}

/* Counter buttons: properly sized touch targets */
@media (max-width: 767px) {

    /* Passenger + luggage counter buttons */
    button[id^="passenger-"],
    .counter-btn {
        min-height: 44px;
        min-width: 44px;
        padding: 0.5rem 0.875rem;
    }

    /* Section card padding: slightly tighter on mobile */
    .section-card {
        padding: 1rem !important;
    }

    /* Breadcrumb: hide on very small screens to save space */
    nav.flex.items-center.text-sm.text-gray-500 {
        display: none;
    }

    /* Payment modal on mobile: full width */
    .payment-modal-content {
        border-radius: 1rem 1rem 0 0;
        max-width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 90vh;
    }

    /* Assurance badges stack */
    .lg\:col-span-1 .space-y-3 {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
}

@media (max-width: 479px) {

    /* Title section: stack icon and text */
    .flex.items-center.mb-8 {
        gap: 0.75rem;
    }

    /* Section cards: minimal padding on tiny screens */
    .section-card {
        padding: 0.875rem !important;
    }

    /* Counter wrapper rows: full width */
    .grid.grid-cols-1.sm\:grid-cols-2.gap-4 {
        gap: 0.75rem;
    }

    /* Child seats detail grid: 2-col on xs instead of 3 */
    #car-seats-details {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ====================================================
   16. BOOKING DETAIL PAGE (bookings/booking_detail.html)
   ==================================================== */

/* ---- Page header: booking number + action buttons ---- */
@media (max-width: 1023px) {

    /* Page header: number/icon row wraps on tablet */
    .booking-detail-header .flex.items-center.gap-3 {
        flex-wrap: wrap;
    }
}

/* On mobile, shrink the icon box */
@media (max-width: 639px) {

    /* Booking number icon-box: smaller */
    .h-16.w-16.rounded-lg {
        width: 2.5rem;
        height: 2.5rem;
    }

    /* Page title: booking number */
    h1.text-3xl.font-bold.text-gray-900 {
        font-size: 1.25rem !important;
        line-height: 1.75rem !important;
    }

    /* Status badges: allow wrapping, smaller padding */
    .flex.flex-wrap.gap-2 span.inline-flex,
    .flex.flex-wrap.gap-2 a.inline-flex {
        font-size: 0.7rem;
        padding: 0.25rem 0.625rem;
    }

    /* Action buttons row: stack on small phones */
    .booking-detail-header .flex.flex-wrap.gap-3 {
        width: 100%;
    }

    .booking-detail-header .flex.flex-wrap.gap-3 a,
    .booking-detail-header .flex.flex-wrap.gap-3 button {
        flex: 1 1 auto;
        justify-content: center;
        text-align: center;
    }
}

/* ---- Quick-stats cards row (2 → 2 → 4) ---- */
/*  Already uses grid-cols-2 md:grid-cols-4 — fine on tablet.
    On XS phones we want 1-col so text doesn't truncate. */
@media (max-width: 374px) {
    .grid.grid-cols-2.md\:grid-cols-4 {
        grid-template-columns: 1fr !important;
    }
}

/* Stats card: tighter padding on mobile */
@media (max-width: 639px) {
    .grid.grid-cols-2.md\:grid-cols-4>div {
        padding: 0.875rem;
    }

    /* Pickup date stat: reduce font */
    .grid.grid-cols-2.md\:grid-cols-4 .text-lg.font-bold {
        font-size: 0.95rem;
    }

    /* Total amount stat */
    .grid.grid-cols-2.md\:grid-cols-4 .text-2xl.font-bold {
        font-size: 1.25rem;
    }
}

/* ---- Main grid: left sidebar + right content (3-col) ---- */
/*  Already grid-cols-1 lg:grid-cols-3 — fine on tablet.
    Only tablet-specific fixes needed. */
@media (max-width: 1023px) {

    /* On tablet, both columns stack. Give the left column (info cards)
       a max-width so they don't stretch to full width */
    .grid.grid-cols-1.lg\:grid-cols-3>.lg\:col-span-1 {
        max-width: 100%;
    }
}

/* ---- Info cards: padding reduction on mobile ---- */
@media (max-width: 639px) {

    /* Card body padding */
    .bg-white.rounded-xl.shadow-md.border-2 .p-6 {
        padding: 1rem;
    }

    /* Card header padding */
    .bg-white.rounded-xl.shadow-md.border-2 .px-6.py-4 {
        padding: 0.875rem 1rem;
    }

    /* Total amount in pricing card: scale down */
    .text-4xl.font-bold.text-gray-900 {
        font-size: 2rem !important;
    }
}

/* ---- Driver card: photo + info row ---- */
@media (max-width: 479px) {

    /* Driver photo: shrink from 80px to 60px */
    .h-20.w-20.rounded-full {
        width: 3.5rem;
        height: 3.5rem;
    }

    /* Driver name: slightly smaller */
    .text-xl.font-bold.text-gray-900 {
        font-size: 1rem;
    }

    /* Quick-call button: keep at right, accessible */
    .flex-shrink-0 a.w-12.h-12 {
        width: 2.75rem;
        height: 2.75rem;
    }

    /* Vehicle details grid: single col on XS */
    .grid.grid-cols-2.gap-4 .bg-gray-50 {
        padding: 0.625rem;
    }
}

/* ---- Quick Actions sidebar: full-width touch targets on mobile ---- */
@media (max-width: 639px) {

    /* All action buttons in the quick-actions card */
    .bg-white.rounded-xl.shadow-md.border-2 .p-4.space-y-2 a,
    .bg-white.rounded-xl.shadow-md.border-2 .p-4.space-y-2 button {
        padding: 0.875rem 0.75rem;
        min-height: 48px;
    }
}

/* ---- Status stepper: horizontal → vertical on mobile ---- */
@media (max-width: 639px) {

    /* Status steps: ensure they don't overflow horizontally */
    #status-stepper-container .flex {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Individual step icon shrink */
    #status-stepper-container .w-10.h-10 {
        width: 2rem;
        height: 2rem;
    }

    /* Connector lines between steps: hide on very small */
    #status-stepper-container .status-line {
        display: none;
    }
}

/* ---- Activity Timeline: compact on mobile ---- */
@media (max-width: 639px) {
    #activity-timeline .gap-4 {
        gap: 0.625rem;
    }

    /* Timeline icon: smaller */
    #activity-timeline .w-10.h-10 {
        width: 2rem;
        height: 2rem;
        font-size: 0.625rem;
    }

    /* Timestamp: move below heading on XS */
    #activity-timeline .flex.items-start.justify-between {
        flex-direction: column;
        gap: 0.25rem;
    }
}

/* ---- Map container in driver location card ---- */
@media (max-width: 639px) {
    #driver-location-map {
        height: 220px !important;
    }
}

@media (max-width: 374px) {
    #driver-location-map {
        height: 180px !important;
    }
}

/* ---- Modals full-screen on mobile ---- */
@media (max-width: 639px) {

    /* Status change modal */
    #statusChangeModal .bg-white.rounded-2xl,
    #offerResponsesModal .bg-white.rounded-2xl,
    #driverTripLinkModal .bg-white.rounded-2xl {
        margin: 0;
        border-radius: 1rem 1rem 0 0;
        max-width: 100%;
        max-height: 92vh;
        overflow-y: auto;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }

    /* Modal action buttons: ensure full width */
    #statusChangeModal .flex.gap-3.pt-4 button {
        min-height: 48px;
    }

    /* Trip link input + copy button: stack on XS */
    #driverTripLinkModal .flex.gap-2 {
        flex-direction: column;
    }

    #driverTripLinkModal #trip-link-input,
    #driverTripLinkModal button[onclick="copyTripLink()"] {
        width: 100%;
        border-radius: 0.5rem;
    }
}

/* ---- Remove Driver modal (if present) ---- */
@media (max-width: 639px) {
    #removeDriverModal .bg-white.rounded-2xl {
        margin: 0;
        border-radius: 1rem 1rem 0 0;
        max-width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }
}

/* ---- Print improvements ---- */
@media print {

    #status-stepper-container,
    .quick-actions-card,
    #driver-location-map {
        display: none !important;
    }
}

/* ====================================================
   17. PROFILE EDIT PAGES (accounts/*_profile_edit.html)
   ==================================================== */

/* ---- Page header: title + back button ---- */
@media (max-width: 639px) {

    /* Stack title and back button vertically on mobile */
    .profile-edit-header,
    .bg-gradient-to-br .mb-8>.flex.items-center.justify-between {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    /* Back button: full width on mobile so it's easy to tap */
    .bg-gradient-to-br .mb-8 .inline-flex.items-center.px-4 {
        width: 100%;
        justify-content: center;
    }

    /* Page title: smaller */
    .bg-gradient-to-br h1.text-3xl {
        font-size: 1.375rem !important;
        line-height: 1.875rem !important;
    }
}

/* ---- Main 3-col section layout → single col on mobile ---- */
@media (max-width: 767px) {

    /* The md:grid-cols-3 layout inside the form card */
    .md\:grid.md\:grid-cols-3 {
        display: block !important;
    }

    /* Section description sidebar: add bottom spacing */
    .md\:col-span-1 {
        margin-bottom: 1.25rem;
    }
}

/* ---- Profile photo + change button: stack on XS ---- */
@media (max-width: 479px) {

    /* Photo + label row: stack vertically on tiny screens */
    .flex.items-center.space-x-6 {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    /* Change photo label: full width */
    label[for$="_profile_image"] {
        width: 100%;
        justify-content: center;
    }
}

/* ---- Form card body padding ---- */
@media (max-width: 639px) {

    /* Tighten padding inside form cards */
    .bg-white.rounded-xl.shadow-sm .p-6.sm\:p-8,
    .bg-white.rounded-xl.shadow-sm .px-6.py-5.sm\:px-8 {
        padding: 1rem !important;
    }

    /* Form action footer: full-width Save button */
    .bg-white.rounded-xl.shadow-sm .px-6.py-4.bg-gray-50 {
        padding: 0.875rem 1rem;
    }

    .bg-white.rounded-xl.shadow-sm .px-6.py-4.bg-gray-50 button[type="submit"] {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }

    /* Manage Addresses button: full width */
    .bg-white.rounded-xl.shadow-sm .mt-4.sm\:mt-0 a {
        width: 100%;
        justify-content: center;
    }
}

/* ---- Name / contact grid: always 1-col on small phones ---- */
@media (max-width: 479px) {
    .grid.grid-cols-1.gap-6.sm\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
}

/* ---- intl-tel-input: ensure the flag+dial doesn't overflow ---- */
@media (max-width: 479px) {
    .iti--separate-dial-code .iti__selected-flag {
        padding: 0 6px 0 8px;
    }

    .iti__country-list {
        max-height: 180px;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }
}

/* ---- Saved addresses list ---- */
@media (max-width: 639px) {

    /* Address item: stack icon-area and action on mobile */
    .divide-y>li .flex.items-center.justify-between {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Address icon: slightly smaller */
    .h-5.w-5.text-lux-gold {
        width: 1.125rem;
        height: 1.125rem;
    }

    /* Add address button: full-width */
    .px-6.py-12 a.inline-flex,
    .px-6.py-12 a {
        width: 100%;
        justify-content: center;
    }
}

/* ====================================================
   13. PRINT
   ==================================================== */

@media print {

    .sidebar,
    .top-nav,
    .mobile-overlay,
    .mobile-menu-btn {
        display: none !important;
    }

    .main-content.with-sidebar,
    .main-content.with-sidebar.expanded {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .content-wrapper {
        padding: 0;
    }
}

/* ====================================================
   18. CHAT PAGES (chat_list, new_conversation, conversation_detail)
   ==================================================== */

/* ---- Chat List ---- */
@media (max-width: 479px) {

    /* New conversation button: full width on XS */
    .btn-new-chat {
        width: 100%;
        justify-content: center;
    }

    /* Card padding: tighter */
    .chat-conversation-card>a>div,
    .chat-conversation-card .p-4 {
        padding: 0.875rem !important;
    }
}

/* Pulse dot sizing on small phones */
@media (max-width: 639px) {

    .pulse-dot,
    .offline-dot {
        width: 11px;
        height: 11px;
    }
}

/* ---- New Conversation ---- */
@media (max-width: 479px) {
    .nc-users-list {
        max-height: 240px;
    }
}

/* ---- Conversation Detail ---- */

/* Ensure input bar is always visible on mobile Safari */
@supports (height: 100dvh) {
    .chat-detail-page {
        height: calc(100dvh - 64px);
    }
}

/* File previews: hidden scrollbar */
.file-previews-bar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.file-previews-bar::-webkit-scrollbar {
    display: none;
}

/* ====================================================
   22. AGENT PAYMENT PAGES
   (config_detail, config_list, payouts_list, etc.)
   ==================================================== */

/* --- Config Detail: sidebar unstick on tablet --- */
@media (max-width: 1023px) {
    .lg\:col-span-1 .sticky {
        position: static !important;
    }
}

/* --- Config Detail: form buttons full-width on mobile --- */
@media (max-width: 639px) {

    /* Make save/submit buttons full-width on small screens */
    .lg\:col-span-2 form .flex.justify-end button[type="submit"] {
        width: 100%;
    }

    /* Card padding compact */
    .lg\:col-span-2 .bg-white.rounded-lg .p-6 {
        padding: 1rem;
    }

    /* Card header padding compact */
    .lg\:col-span-2 .bg-gradient-to-r.px-6.py-4 {
        padding: 0.75rem 1rem;
    }
}

/* --- Config Detail: recent activity grid on mobile --- */
@media (max-width: 479px) {

    /* Recent commission/payout items: tighter padding */
    .lg\:col-span-2 .space-y-3 .p-3 {
        padding: 0.625rem;
    }
}

/* --- Config List: table responsive adjustments --- */
@media (max-width: 767px) {

    /* Agent Configs list: hide less-critical columns */
    .agent-config-table .col-hide-md {
        display: none;
    }
}

/* ====================================================
   23. ASSIGN DRIVER PAGE (bookings/assign_driver.html)
   ==================================================== */

/* Sidebar cards: tighter padding on mobile */
@media (max-width: 639px) {

    /* Card body padding */
    .lg\:col-span-1 .p-6 {
        padding: 1rem;
    }

    /* Card header padding */
    .lg\:col-span-1 .px-6.py-4 {
        padding: 0.875rem 1rem;
    }
}

/* Driver cards: tighter padding on mobile */
@media (max-width: 639px) {

    .driver-card .px-6.py-4 {
        padding: 1rem;
    }

    .driver-card .p-6 {
        padding: 1rem;
    }

    .driver-card .grid.grid-cols-3 {
        gap: 0.375rem;
    }

    .driver-card .grid.grid-cols-3 .p-3 {
        padding: 0.5rem;
    }
}

/* Assignment modal: bottom sheet on small screens */
@media (max-width: 639px) {
    #assignment-modal>div {
        margin: 0;
        border-radius: 1rem 1rem 0 0;
        max-width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 90vh;
        overflow-y: auto;
    }

    #assignment-modal .flex.gap-3 button {
        min-height: 48px;
    }
}

/* Status toast: full width on mobile */
@media (max-width: 479px) {
    .status-toast>div {
        max-width: calc(100vw - 2rem);
    }
}