/*
 * =============================================================================
 * BestEV — RESPONSIVE OVERRIDES
 * Version: 1.0.0  |  Date: 2026-10-27
 * =============================================================================
 * Loaded LAST in every layout so it overrides without rewriting base rules.
 * Reference page (do not change): resources/views/dealer/add.blade.php
 *                                  public/dealer/add-car.css
 *
 * Breakpoints mirror Bootstrap 5 + custom:
 *   ≤359px    xs-phone
 *   ≤479px    sm-phone
 *   ≤767px    phone  (md breakpoint)
 *   ≤991px    tablet (lg breakpoint)
 *   ≤1199px   small-laptop (xl breakpoint)
 *   ≥1600px   wide
 *
 * Panels that share this file:
 *   • Dealer panel  (lt/admin/style.css base)
 *   • Customer/Seller panel (same base)
 *   • Buyer panel (same base)
 *   • Admin panel (Bootstrap Zono template + assets/admin/css/responsive.css)
 *   • Public frontend (lt/assets/css/style.css + Bootstrap 5.3)
 * =============================================================================
 */


/* =============================================================================
   0. GLOBAL FOUNDATION
   ============================================================================= */

/*
 * Flex / grid children must not overflow their parent.
 * Without min-width:0 a flex child with text won't shrink below its content.
 */
.flex > *,
[class*="flex"] > *,
.grid > *,
[class*="grid"] > * {
    min-width: 0;
}

/* All media must respect container width */
img,
video,
canvas,
svg:not([class*="icon"]) {
    max-width: 100%;
    height: auto;
}

/* Long URLs / emails / table cells must wrap */
a, p, td, th, li, dd, dt {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* White-space overrides that cause overflow */
.text-nowrap-reset { white-space: normal !important; }

/* Select2 always full-width */
.select2-container {
    width: 100% !important;
}
.select2-container .select2-selection--single {
    height: auto !important;
    min-height: 36px;
    display: flex;
    align-items: center;
}


/* =============================================================================
   1. WIDE SCREENS ≥ 1600px — cap content column
   ============================================================================= */
@media (min-width: 1600px) {
    /* Panel main area: prevent lines stretching to 1920px+ */
    .main {
        max-width: 1560px;
    }
    /* Public: already capped by container-xxl */
}


/* =============================================================================
   2. SMALL LAPTOP ≤ 1199px
   ============================================================================= */
@media (max-width: 1199.98px) {
    /* Topbar dv-switch: shrink font from 25px down */
    .dv-switch__seg {
        font-size: 16px !important;
        padding: 7px 14px !important;
    }

    /* Plans grid: 3 → 2 columns */
    .plans-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


/* =============================================================================
   3. TABLET ≤ 991px — sidebar becomes off-canvas drawer
   ============================================================================= */

/*
 * style.css sets at 720px:
 *   .app { grid-template-columns: 1fr }
 *   .sidebar { position: static; height: auto }
 *
 * We extend the drawer to cover the full 0–991px range and fix the
 * position:static conflict.  The dealer drawer JS/CSS in sidebar.blade.php
 * handles 0–768px; we cover 769–991px here with the same pattern.
 */

@media (max-width: 991.98px) {

    /* 3.1 APP SHELL */
    .app {
        grid-template-columns: 1fr !important;
    }

    /* 3.2 SIDEBAR — fixed off-canvas regardless of width */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: -300px !important;   /* hidden off-screen */
        right: auto !important;
        width: 280px !important;
        height: 100vh !important;
        z-index: 9999 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        transition: left 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: none !important;
    }
    .sidebar.mobile-open {
        left: 0 !important;
        box-shadow: 4px 0 32px rgba(0, 0, 0, 0.22) !important;
    }

    /* 3.3 BACKDROP visible on all mobile/tablet sizes */
    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.48);
        z-index: 9998;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        transition: opacity 0.25s ease;
    }
    .sidebar-backdrop.active {
        display: block !important;
    }

    /* 3.4 HAMBURGER — show on all mobile/tablet */
    .mobile-menu-btn {
        display: flex !important;
    }

    /* 3.5 DESKTOP COLLAPSE TOGGLE — hide on mobile */
    .sidebar-toggle-btn {
        display: none !important;
    }

    /* 3.6 MAIN — reduce padding, leave room for hamburger */
    .main {
        padding: 16px 18px 40px !important;
    }

    /* 3.7 TOPBAR — push content right to avoid hamburger overlap */
    .topbar {
        padding-left: 64px !important;
        flex-wrap: nowrap;
        gap: 8px;
    }

    /* 3.8 TOPBAR DV-SWITCH — hide on tablet (too big, not critical) */
    .dv-switch {
        display: none !important;
    }

    /* 3.9 STAT CARDS: 4 → 2 cols on tablet */
    .stat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 3.10 DASHBOARD GRIDS: stack */
    .dash-grid,
    .dash-grid-2 {
        grid-template-columns: 1fr !important;
    }

    /* 3.11 LEADS SHELL */
    .leads-shell {
        grid-template-columns: 1fr !important;
    }
    .filters {
        position: static !important;
        max-height: none !important;
    }

    /* 3.12 DETAIL / PROFILE / BILLING */
    .detail-shell,
    .profile-grid,
    .billing-grid {
        grid-template-columns: 1fr !important;
    }

    /* 3.13 FIELD GRID */
    .field-grid {
        grid-template-columns: 1fr !important;
    }

    /* 3.14 KV GRID → 2 cols on tablet */
    .kv-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 3.15 STEP SHELL (add/edit car) */
    .step-shell {
        grid-template-columns: 1fr !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .step-nav {
        position: static !important;
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 6px;
    }
    .step-item .sub { display: none; }

    /* 3.16 TRUST STRIP */
    section.trust-strip {
        margin-left: -18px !important;
        margin-right: -18px !important;
    }

    /* 3.17 COMPARE BOARD: narrow label column */
    .compare-cars,
    .compare-row {
        grid-template-columns: 140px repeat(3, 1fr) !important;
    }
}

/* Desktop: ensure hamburger hidden */
@media (min-width: 992px) {
    .mobile-menu-btn {
        display: none !important;
    }
    .sidebar-backdrop {
        display: none !important;
    }
}


/* =============================================================================
   4. PHONE ≤ 767px
   ============================================================================= */
@media (max-width: 767.98px) {

    /* 4.1 BODY — prevent horizontal scroll (root cause fixes below) */
    html, body {
        max-width: 100vw;
    }

    /* 4.2 MAIN PADDING */
    .main {
        padding: 12px 14px 60px !important;
    }

    /* 4.3 TOPBAR */
    .topbar {
        padding-left: 58px !important;
        padding-right: 10px !important;
        gap: 6px;
        height: 58px;
        margin-bottom: 16px !important;
    }
    /* Hide search bar on phone — can be triggered by icon if needed */
    .topbar .search {
        display: none !important;
    }

    /* 4.4 USER CHIP — show only avatar on phones */
    .user-chip .who { display: none; }

    /* 4.5 STAT CARDS: 2 cols */
    .stat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .stat {
        padding: 16px !important;
    }
    .stat .value {
        font-size: 24px !important;
    }

    /* 4.6 PAGE HEADER */
    .page-title {
        font-size: clamp(20px, 5.5vw, 28px) !important;
    }
    .page-head {
        margin-bottom: 14px;
    }

    /* 4.7 CARD PADDING */
    .card {
        padding: 16px !important;
        border-radius: 14px !important;
    }
    .card-head {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* 4.8 SECTION PADDING */
    .section {
        padding: 18px 16px !important;
    }

    /* 4.9 LEAD GRID: single column */
    .lead-grid {
        grid-template-columns: 1fr !important;
    }
    .leads-toolbar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 12px;
    }
    .results-num { font-size: 15px; }
    .toolbar-spacer { flex: 1; min-width: 0; }

    /* 4.10 CONTACT STRIP (lead detail) */
    .contact-strip {
        flex-direction: column;
        align-items: stretch;
    }
    .contact-pill {
        width: 100%;
    }
    .detail-cta {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    .detail-cta .btn-primary {
        margin-left: 0 !important;
        width: 100% !important;
        justify-content: center !important;
    }

    /* 4.11 TABLES — horizontal scroll */
    /*
     * JS in each panel layout auto-wraps <table> elements.
     * These styles support that wrapping AND handle unwrapped tables.
     */
    .table-scroll-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    .table-scroll-wrapper table {
        min-width: 540px;
    }
    /* Direct fallback for un-wrapped tables */
    .txn-table,
    table.dataTable,
    .main table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
    }

    /* 4.12 PLANS GRID: 1 column */
    .plans-grid {
        grid-template-columns: 1fr !important;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }

    /* 4.13 COMPARE BOARD — horizontal scroll */
    .compare-board {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .compare-cars,
    .compare-row {
        grid-template-columns: 100px repeat(3, minmax(130px, 1fr)) !important;
        min-width: 520px;
    }

    /* 4.14 INVENTORY GRID */
    .inv-grid {
        grid-template-columns: 1fr !important;
    }
    .watch-grid {
        grid-template-columns: 1fr !important;
    }
    .watch-card {
        grid-template-columns: 90px 1fr !important;
    }

    /* 4.15 TRUST STAGES — wrap horizontally */
    .trust-strip {
        padding: 18px 16px 14px !important;
        margin-left: -14px !important;
        margin-right: -14px !important;
    }
    .trust-line {
        margin-bottom: 16px !important;
    }
    .trust-stages {
        position: static !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        margin-top: 12px !important;
    }
    .trust-stage {
        flex: 1;
        min-width: 80px;
    }
    .trust-stage .dot {
        width: 46px !important;
        height: 46px !important;
        font-size: 15px !important;
    }
    .trust-stage .lbl { font-size: 10px !important; }
    .trust-stage .pts { display: none !important; }
    .trust-head {
        flex-direction: column;
        gap: 10px;
    }

    /* 4.16 FORM: 16px inputs (prevent iOS auto-zoom) */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    select,
    textarea,
    .field input,
    .field select,
    .field textarea,
    .form-control,
    .form-select {
        font-size: 16px !important;
    }

    /* 4.17 INPUT+BUTTON PAIRS: stack */
    .input-group {
        flex-direction: column;
    }
    .input-group > .form-control,
    .input-group > .form-select {
        border-radius: 10px !important;
        width: 100% !important;
    }
    .input-group > .btn,
    .input-group > .input-group-text {
        border-radius: 10px !important;
        width: 100%;
        justify-content: center;
        margin-top: 6px;
    }

    /* 4.18 FORM FOOTER */
    .form-foot {
        flex-direction: column;
        gap: 10px;
    }
    .form-foot .btn {
        width: 100%;
        justify-content: center;
    }

    /* 4.19 BUTTON TAP TARGETS ≥ 44px */
    .btn,
    .icon-btn,
    .mobile-menu-btn,
    .btn-topup {
        min-height: 44px;
    }

    /* 4.20 BUTTON GROUPS WRAP */
    .btn-group,
    .inv-actions,
    .lead-foot {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* 4.21 NOTIFICATIONS DROPDOWN */
    #notif-dropdown,
    [id="notif-dropdown"] {
        width: calc(100vw - 24px) !important;
        right: -8px !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
    }

    /* 4.22 USER CHIP DROPDOWN */
    #userChipMenu {
        width: 220px !important;
        right: -10px !important;
    }

    /* 4.23 MODAL — bottom sheet on phones */
    .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }
    .modal-content {
        border-radius: 20px 20px 0 0 !important;
        max-height: 88vh !important;
        overflow-y: auto !important;
        padding-bottom: env(safe-area-inset-bottom, 16px) !important;
    }
    .modal.fade .modal-dialog {
        transform: translateY(100%) !important;
        transition: transform 0.3s ease !important;
    }
    .modal.show .modal-dialog {
        transform: translateY(0) !important;
    }

    /* 4.24 EVA CHAT WIDGET */
    #eva-widget,
    .eva-widget,
    [id*="eva-widget"],
    [class*="eva-widget"] {
        bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        right: 12px !important;
        max-width: calc(100vw - 24px) !important;
    }
    .eva-chat-window,
    [id*="eva-chat"],
    [class*="eva-chat"] {
        width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 80px) !important;
        right: 12px !important;
        bottom: 70px !important;
    }

    /* 4.25 SWEETALERT2 */
    .swal2-container {
        padding: 12px !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .swal2-popup {
        width: 100% !important;
        max-width: 380px !important;
        border-radius: 20px !important;
    }
    .swal2-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .swal2-confirm,
    .swal2-cancel,
    .swal2-deny {
        width: 100% !important;
    }

    /* 4.26 OTP / ALERT BANNERS */
    .otp-banner,
    [class*="otp-banner"],
    .alert-banner {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 12px 14px !important;
        text-align: center;
    }
    .otp-banner .btn {
        width: 100% !important;
    }

    /* 4.27 HELP & SUPPORT MODAL */
    #helpSupportModal .modal-dialog {
        margin: 0 !important;
    }

    /* 4.28 SCORE ROW — 3 cells side by side on phone (keep, just shrink) */
    .score-cell {
        padding: 12px 14px !important;
    }
    .score-cell .num {
        font-size: 22px !important;
    }

    /* 4.29 KV GRID: 1 col */
    .kv-grid {
        grid-template-columns: 1fr !important;
    }

    /* 4.30 PROFILE KPI ROW */
    .kpi-row {
        grid-template-columns: repeat(3, 1fr) !important; /* keep 3 on phone, just shrink */
    }

    /* 4.31 CHAT */
    .chat-container,
    .chat-wrap,
    [class*="chat-list"],
    [class*="chat-content"] {
        height: calc(100vh - 130px) !important;
    }

    /* 4.32 STEP SHELL */
    section.trust-strip,
    .step-shell {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


/* =============================================================================
   5. SMALL PHONE ≤ 479px
   ============================================================================= */
@media (max-width: 479.98px) {

    /* 5.1 STAT CARDS: 1 column */
    .stat-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* 5.2 KV GRID: 1 col */
    .kv-grid {
        grid-template-columns: 1fr !important;
    }

    /* 5.3 KPI ROW: 2 cols */
    .kpi-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 5.4 SCORE ROW: stack */
    .score-row {
        grid-template-columns: 1fr !important;
    }
    .score-cell {
        border-right: none !important;
        border-bottom: 1px solid var(--border, #E4EAEE);
    }
    .score-cell:last-child { border-bottom: none !important; }

    /* 5.5 LEAD CARD DETAILS */
    .score-badge {
        width: 48px !important;
        height: 48px !important;
        top: 8px !important;
        right: 8px !important;
    }
    .score-badge .num { font-size: 14px !important; }
    .lead-body { padding: 12px 14px !important; }
    .lead-car-title { font-size: 14px !important; }

    /* 5.6 BUTTONS */
    .cred-tag { font-size: 10px !important; }
    .lead-foot .btn { font-size: 11px !important; padding: 7px 10px !important; }

    /* 5.7 COMPARE: enforce scroll */
    .compare-cars,
    .compare-row {
        min-width: 480px !important;
    }
    .compare-board { overflow-x: auto !important; }

    /* 5.8 STEP NAV */
    .step-nav {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    .step-item .num {
        width: 28px !important;
        height: 28px !important;
        font-size: 11px !important;
    }

    /* 5.9 MAIN PADDING */
    .main { padding: 10px 12px 60px !important; }
    .card { padding: 14px !important; }
    .section { padding: 14px !important; }
}


/* =============================================================================
   6. EXTRA-SMALL PHONE ≤ 359px
   ============================================================================= */
@media (max-width: 359.98px) {

    /* 6.1 SIDEBAR FOOTER */
    .sidebar-footer {
        margin: 8px 12px 16px !important;
        padding: 12px !important;
    }
    .sidebar-footer .credits-num {
        font-size: 22px !important;
    }

    /* 6.2 KPI ROW */
    .kpi-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .kpi-cell .v { font-size: 18px !important; }

    /* 6.3 TOPBAR */
    .topbar {
        padding-left: 54px !important;
        gap: 4px;
    }

    /* 6.4 MAIN */
    .main { padding: 8px 10px 60px !important; }

    /* 6.5 PAGE TITLE */
    .page-title { font-size: 18px !important; }

    /* 6.6 BRAND TEXT in sidebar */
    .brand-text .name { font-size: 13px !important; }
}


/* =============================================================================
   7. LANDSCAPE PHONE (thin height + landscape orientation)
   ============================================================================= */
@media (max-height: 500px) and (max-width: 900px) and (orientation: landscape) {
    .sidebar {
        overflow-y: auto !important;
    }
    .modal-content {
        max-height: 90vh !important;
        border-radius: 0 !important;
    }
    .modal-dialog {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        max-height: 100vh !important;
    }
}


/* =============================================================================
   8. PUBLIC FRONTEND — Bootstrap 5.3 site
   ============================================================================= */

/* 8.1 Navbar safe-area on notched phones */
@media (max-width: 767.98px) {
    .site-nav {
        padding-left: env(safe-area-inset-left, 0);
        padding-right: env(safe-area-inset-right, 0);
    }
}


/* 8.2 Frontend phone layout fixes */
@media (max-width: 767.98px) {

    /* Hero / CTA buttons: stack full-width */
    .hero-actions,
    .cta-group,
    [class*="hero-cta"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        width: 100%;
    }
    .hero-actions .btn,
    .hero-actions a,
    .cta-group .btn,
    .cta-group a {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* Search / filter bar on listing page */
    .search-bar,
    .filter-search,
    [class*="filter-bar"] {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .search-bar > *,
    .filter-search > * {
        width: 100% !important;
    }

    /* Car listing grid */
    .listing-grid,
    .cars-grid,
    [class*="car-grid"] {
        grid-template-columns: 1fr !important;
    }

    /* Blog grid */
    .blog-grid,
    [class*="blog-grid"] {
        grid-template-columns: 1fr !important;
    }

    /* Pricing cards */
    .pricing-grid,
    [class*="pricing-grid"] {
        grid-template-columns: 1fr !important;
    }

    /* Stat/number rows */
    [class*="stats-row"],
    [class*="stat-row"] {
        flex-wrap: wrap !important;
    }

    /* Frontend forms */
    .btn-primary-neo,
    .btn-ghost-neo,
    .btn-outline-neo,
    .btn-glow {
        white-space: normal;
        text-align: center;
    }
}

/* 8.3 Frontend tables (contact form submissions, etc.) */
@media (max-width: 767.98px) {
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* 8.4 Frontend: nav language toggle compact on mobile */
@media (max-width: 479.98px) {
    .nav-lang-toggle {
        padding: 4px 8px 4px 4px !important;
    }
    .lang-code { display: none; }
}


/* =============================================================================
   9. ADMIN PANEL — Zono Bootstrap template overrides
   (assets/admin/css/responsive.css handles most; we add BestEV specifics)
   ============================================================================= */
@media (max-width: 767.98px) {
    /* Admin page body */
    .page-wrapper .page-body-wrapper .page-body {
        margin-top: 0 !important;
        padding: 16px !important;
    }

    /* Admin DataTables */
    .dataTables_wrapper {
        overflow-x: auto;
    }

    /* Admin buttons */
    .page-wrapper .btn {
        min-height: 40px;
    }
}


/* =============================================================================
   10. UTILITY CLASSES (available to all Blade templates)
   ============================================================================= */

/* Wrap any table in a scrollable container */
.table-responsive-panel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
.table-responsive-panel > table {
    min-width: 500px;
}

/* Hide on phone, show on tablet+ */
.hide-phone {
    display: none;
}
@media (min-width: 768px) {
    .hide-phone { display: revert; }
}

/* Show only on phone */
.show-phone {
    display: none;
}
@media (max-width: 767.98px) {
    .show-phone { display: block !important; }
}

/* Full-width button on phone */
@media (max-width: 767.98px) {
    .btn-phone-full {
        width: 100% !important;
        justify-content: center;
    }
}

/* Card with internal table scroll */
.card-table {
    overflow: hidden;
}
.card-table .table-inner {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* =============================================================================
   END OF FILE
   ============================================================================= */