/* ============================================
   PV30 - Responsive Stylesheet
   Tablet & Mobile breakpoints
   ============================================ */

/* ===== Desktop / Small Laptop ===== */
/* Heading sizes are fluid now (see the --fs-* scale in style.css), so only
   layout changes live in the breakpoints below. */
@media (max-width: 1200px) {
    .how-step::after {
        display: none;
    }
}

/* ===== Tablet Landscape ===== */
@media (max-width: 991px) {
    .hero-pv {
        min-height: 0;
        padding: 104px 0 56px;
    }

    .hero-stats {
        gap: 24px;
        margin-top: 30px;
    }

    .search-card {
        margin-top: -30px;
    }

    /* Mobile navbar */
    .navbar-pv {
        background: rgba(255, 255, 255, 0.98);
        box-shadow: var(--pv-shadow);
    }

        .navbar-pv .navbar-collapse {
            padding-top: 16px;
        }

        .navbar-pv .nav-link {
            margin: 4px 0;
        }

            .navbar-pv .nav-link.active::after {
                display: none;
            }

        .navbar-pv .navbar-nav .btn-pv-primary,
        .navbar-pv .navbar-nav .btn-pv-outline {
            display: inline-flex;
            margin-top: 8px;
        }

    /* Auth card */
    .auth-card {
        grid-template-columns: 1fr;
        max-width: 520px;
    }

    .auth-visual {
        display: none;
    }

    /* Filter sidebar */
    .filter-sidebar {
        position: static;
        margin-bottom: 24px;
    }

    /* Gallery */
    .gallery-main {
        max-height: 320px;
    }

    .gallery-thumb {
        max-height: 70px;
    }

    /* CTA */
    .cta-pv {
        padding: 40px 30px;
    }


    /* Profile */
    .profile-sidebar {
        position: static;
        margin-bottom: 24px;
    }

    /* Footer */
    .footer-pv {
        padding: 50px 0 0;
    }
}

/* ===== Tablet Portrait ===== */
@media (max-width: 768px) {
    .hero-pv {
        min-height: 0;
        text-align: center;
    }

    .hero-subtitle {
        margin: 0 auto 28px;
    }

    .hero-stats {
        justify-content: center;
    }

    .search-card {
        padding: 18px;
    }

    .property-card .property-image {
        max-height: 200px;
    }

    .detail-feature-grid {
        grid-template-columns: 1fr;
    }

    .gallery-main {
        max-height: 280px;
    }

    .gallery-thumbs {
        grid-template-columns: repeat(3, 1fr);
    }

    .cta-pv {
        padding: 32px 24px;
        text-align: center;
    }


    .page-header-pv {
        padding: 40px 0 30px;
    }


    .visit-property-summary {
        flex-direction: column;
    }

        .visit-property-summary img {
            width: 100%;
            height: 140px;
        }

    .dealer-contact {
        flex-direction: column;
    }

    .booking-item .booking-img {
        height: 120px;
    }

    .contact-form-card {
        padding: 24px;
    }

    .auth-form-side {
        padding: 36px 28px;
    }


    .pv-toast {
        left: 16px;
        right: 16px;
        min-width: auto;
    }
}

/* ===== Small Mobile ===== */
@media (max-width: 575px) {
    .hero-stats {
        gap: 16px;
    }

    .gallery-thumbs {
        grid-template-columns: repeat(2, 1fr);
    }

    .booking-tabs .nav-link {
        padding: 8px 14px;
        font-size: 0.82rem;
    }
}

/* ===== Print ===== */
@media print {
    .navbar-pv,
    .footer-pv,
    .scroll-top,
    .preloader-pv {
        display: none !important;
    }
}
/* ===== Public navbar below 992px =====
   The desktop menu is replaced by the fixed bottom bar, so the collapse and
   its toggler are hidden and the brand sits opposite the compact auth block. */
@media (min-width: 992px) {
    .mobile-splash,
    .mobile-auth {
        display: none !important;
    }
}

@media (max-width: 991px) {
    .navbar-collapse,
    .navbar-toggler,
    .desktop-auth {
        display: none !important;
    }

    .navbar-pv .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        gap: 10px;
    }

    .navbar-pv .navbar-brand {
        margin-right: 0;
        font-size: 1.25rem;
    }

    .mobile-auth {
        display: flex !important;
        align-items: center;
        gap: 8px;
        margin-left: auto;
    }

        .mobile-auth .btn {
            padding: 7px 13px;
            font-size: 0.8rem;
            white-space: nowrap;
        }
}

/* ===== Fixed bottom bar - the mobile substitute for the desktop menu ===== */
.mobile-bottom-nav {
    display: none;
}

@media (max-width: 991px) {
    .mobile-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 62px;
        background: #fff;
        display: flex;
        justify-content: space-around;
        align-items: center;
        box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.12);
        z-index: 1030;
        /* keeps the bar clear of the iOS home indicator */
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

        .mobile-bottom-nav a {
            display: flex;
            flex: 1;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            text-decoration: none;
            color: var(--pv-text-light, #777);
            font-size: 0.68rem;
            line-height: 1.2;
            padding: 6px 2px;
        }

            .mobile-bottom-nav a:hover,
            .mobile-bottom-nav a.active {
                color: var(--pv-primary, #0F4C81);
            }

        .mobile-bottom-nav i {
            font-size: 1.15rem;
        }

    /* room for the bar, so the last row of content is never trapped under it.
       Scoped to the public layout - the dashboards share this file but have no
       bottom bar. */
    body.pv-public {
        padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
    }

    .footer-pv {
        padding-bottom: 24px;
    }
}
/* Mobile */

@media (max-width:768px) {

    .auth-card {
        flex-direction: column;
    }

    .auth-visual {
        display: none;
    }

    .auth-form-side {
        width: 100%;
        padding: 25px;
    }

    .otp-wrapper {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        flex-wrap: nowrap;
    }

    .otp-box {
        width: 45px;
        height: 50px;
        font-size: 22px;
    }

    .btn-pv-primary {
        width: 100%;
    }
}

@media (max-width:420px) {

    .auth-form-side {
        padding: 20px;
    }

    .otp-box {
        width: 40px;
        height: 45px;
        font-size: 20px;
    }
}
@media (max-width:576px) {

    .otp-wrapper {
        gap: 6px;
    }

    .otp-box {
        width: 42px;
        height: 48px;
        max-width: 42px;
        font-size: 20px;
    }
}
@media (max-width:390px) {

    .otp-wrapper {
        gap: 4px;
    }

    .otp-box {
        width: 38px;
        height: 44px;
        max-width: 38px;
        font-size: 18px;
    }
}
@media (max-width:768px) {

    .auth-card {
        display: block;
        margin: 15px;
        border-radius: 20px;
    }

    .auth-visual {
        display: none;
    }

    .auth-form-side {
        width: 100%;
        padding: 25px 20px;
    }
}
/* PV30 Admin - responsive.css
   Page-level responsive rules for management, settings, profile & auth pages.
   Core dashboard breakpoints live in dashboard.css; this file extends them.
   ============================================================ */

/* ===== Management page stat grids ===== */
@media (max-width: 1199px) {
    .page-stats-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 767px) {
    .page-stats-4 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .page-toolbar {
        flex-direction: column;
        align-items: stretch !important;
        gap: 12px !important;
    }

        .page-toolbar .toolbar-search {
            max-width: 100% !important;
        }

        .page-toolbar .toolbar-actions {
            width: 100%;
            justify-content: flex-start;
            flex-wrap: wrap;
        }

    .filter-bar {
        grid-template-columns: 1fr !important;
    }

        .filter-bar .advanced-filters {
            grid-template-columns: 1fr 1fr !important;
        }

    .pv-table thead {
        display: none;
    }

    .pv-table, .pv-table tbody, .pv-table tr, .pv-table td {
        display: block;
        width: 100%;
    }

        .pv-table tr {
            background: var(--pv-card);
            border: 1px solid var(--pv-border);
            border-radius: 12px;
            margin-bottom: 12px;
            padding: 6px;
        }

        .pv-table td {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            border: 0;
            padding: 10px 12px;
        }

            .pv-table td::before {
                content: attr(data-label);
                font-weight: 600;
                font-size: 11px;
                color: var(--pv-text-muted);
                text-transform: uppercase;
                letter-spacing: 0.5px;
            }

            .pv-table td[data-label="Actions"] {
                justify-content: flex-end;
            }
}

/* ===== Settings ===== */
@media (max-width: 991px) {
    .settings-layout {
        grid-template-columns: 1fr !important;
    }

    .settings-nav {
        position: static !important;
        flex-direction: row !important;
        overflow-x: auto;
    }

        .settings-nav .nav-link {
            white-space: nowrap;
        }
}

@media (max-width: 767px) {
    .settings-grid-2 {
        grid-template-columns: 1fr !important;
    }

    .settings-card .card-body {
        padding: 18px !important;
    }
}

/* ===== Admin profile ===== */
@media (max-width: 991px) {
    .profile-cover {
        height: 220px !important;
    }

    .profile-photo {
        width: 130px !important;
        height: 130px !important;
    }

    .profile-head-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .profile-head-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .profile-stats-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 767px) {
    .profile-cover {
        height: 170px !important;
    }

    .profile-photo {
        width: 110px !important;
        height: 110px !important;
        bottom: -45px !important;
    }

    .profile-info {
        margin-top: 54px !important;
    }

    .profile-stats-4 {
        grid-template-columns: 1fr 1fr !important;
    }

    .ach-grid {
        grid-template-columns: 1fr !important;
    }

    .skills-row {
        flex-wrap: wrap;
    }
}

/* ===== Auth pages (forgot / change password) ===== */
@media (max-width: 767px) {
    .auth-shell {
        padding: 24px 16px !important;
    }

    .auth-card {
        padding: 28px 22px !important;
    }

    .auth-illustration {
        transform: scale(0.8);
        margin-bottom: 8px !important;
    }

    .auth-security-tips {
        width: 100% !important;
    }
}

/* ===== Reports ===== */
@media (max-width: 1199px) {
    .report-grid-3 {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 767px) {
    .report-grid-3 {
        grid-template-columns: 1fr !important;
    }

    .report-grid-2 {
        grid-template-columns: 1fr !important;
    }

    .report-export-bar {
        flex-direction: column;
        align-items: stretch !important;
    }

        .report-export-bar .export-btns {
            width: 100%;
            justify-content: flex-start;
            flex-wrap: wrap;
        }
}

/* ===== Booking timeline / dealer documents ===== */
@media (max-width: 767px) {
    .doc-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .visit-timeline {
        padding-left: 26px !important;
    }

    .booking-modal-grid {
        grid-template-columns: 1fr !important;
    }
}
/* ================= PROFILE PAGE MOBILE ================= */

@media(max-width:991px) {

    .security-card {
        margin-bottom: 20px;
    }

    .auth-card {
        padding: 25px;
    }

    .auth-title {
        font-size: 28px;
    }

    .auth-desc {
        font-size: 14px;
    }

    .d-flex.gap-2 {
        flex-direction: column;
    }

        .d-flex.gap-2 button {
            width: 100%;
        }
}
@media (max-width: 767.98px) {

    .container-fluid {
        padding: 15px !important;
    }

    .row {
        justify-content: center !important;
        margin: 0 !important;
    }

        .row > div {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

    .security-card,
    #changePwCard {
        width: 100%;
        max-width: 420px;
        margin: 0 auto 20px;
    }

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

    .security-icon {
        margin: 0 auto 18px;
    }

    .security-card h3,
    .security-card p {
        text-align: center;
    }

    .security-item {
        display: flex;
        align-items: center;
        gap: 10px;
    }
}
@media (max-width:991px) {

    .profile-cover {
        height: 170px;
    }

    .profile-head-row {
        margin-top: -55px;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0 20px 25px;
        gap: 20px;
    }

    .profile-photo {
        width: 120px;
        height: 120px;
        font-size: 48px;
    }

    .profile-info {
        width: 100%;
    }

    .pi-name {
        font-size: 30px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .super-badge {
        display: inline-flex;
    }

    .pi-role {
        font-size: 15px;
    }

    .pi-meta {
        justify-content: center;
        gap: 12px;
        font-size: 14px;
    }

    .profile-head-actions {
        width: 100%;
        flex-direction: column;
        gap: 12px;
    }

        .profile-head-actions .quick-btn {
            width: 100%;
        }

    .profile-cover-edit {
        top: 15px;
        right: 15px;
        font-size: 13px;
        padding: 8px 14px;
    }
}


/* ===========================================================================
   PUBLIC PAGES - home, property list, property detail, live tracking
   Layout only: every heading size comes from the fluid --fs-* scale.
   =========================================================================== */

/* --- the fixed navbar must never sit on top of a page's first line --- */
.page-header-pv,
.pv-page-top {
    margin-top: 0;
    padding-top: clamp(96px, 10vw, 128px);
}

/* --- home hero --- */
@media (max-width: 991px) {
    .hero-pv .btn {
        flex: 1 1 auto;
    }

    .search-card {
        padding: 20px;
    }
}

@media (max-width: 575px) {
    .hero-pv {
        padding: 92px 0 44px;
        text-align: center;
    }

        .hero-pv .d-flex.gap-3 {
            justify-content: center;
        }

        .hero-pv .btn {
            width: 100%;
        }

    .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        text-align: center;
    }

        .hero-stats .hero-stat .stat-label {
            font-size: 0.7rem;
        }

    /* the decorative blooms are wider than a phone and force a sideways scroll */
    .hero-pv::before,
    .hero-pv::after {
        display: none;
    }
}

/* --- property cards (home + list) ---
   The card is a flex column with a ratio image, so the breakpoints only need to
   cap the image and relax the padding; nothing here changes its structure. */
@media (max-width: 1199px) {
    .property-card .property-image {
        max-height: 210px;
    }

    .property-card .property-body {
        padding: 15px;
    }
}

@media (max-width: 991px) {
    .property-card .property-image {
        max-height: 220px;
    }
}

/* Below 768 the grid drops to one card per row, so a tall crop would leave a
   very squat card - it gets a wider, shallower image instead. */
@media (max-width: 767px) {
    .property-card .property-image {
        aspect-ratio: 16 / 9;
        max-height: 240px;
    }

    /* a full width card has room for the title again */
    .property-title {
        -webkit-line-clamp: 1;
        line-clamp: 1;
        min-height: 0;
    }
}

@media (max-width: 575px) {
    .property-card .property-image {
        max-height: 200px;
    }

    .property-card .property-body {
        padding: 14px;
    }

    .property-price {
        font-size: 1.1rem;
    }

    .property-features {
        gap: 6px 10px;
    }
}

/* Below this the two buttons genuinely cannot share a line. */
@media (max-width: 359px) {
    .property-card-actions {
        flex-direction: column;
    }

        .property-card-actions .btn {
            width: 100%;
        }
}

/* --- property list filter sidebar --- */
.filter-sidebar h5 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.filter-toggle .lbl-hide {
    display: none;
}

.filter-toggle[aria-expanded="true"] .lbl-show {
    display: none;
}

.filter-toggle[aria-expanded="true"] .lbl-hide {
    display: inline;
}

/* The panel only collapses on small screens; from lg up it is always open. */
@media (min-width: 992px) {
    .filter-collapse {
        display: block !important;
        height: auto !important;
        visibility: visible !important;
    }
}

@media (max-width: 991px) {
    .filter-sidebar {
        padding: 16px 18px;
    }

        .filter-sidebar h5 {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: 0;
        }

        .filter-sidebar .filter-collapse.show {
            margin-top: 16px;
            padding-top: 14px;
            border-top: 1px solid var(--pv-border);
        }
}

/* --- property detail --- */
@media (max-width: 991px) {
    .detail-card {
        padding: 20px;
    }

    .dealer-card {
        margin-top: 8px;
    }
}

@media (max-width: 575px) {
    .gallery-main {
        max-height: 220px;
    }

    .gallery-thumb {
        max-height: 60px;
    }

    .detail-feature-grid {
        grid-template-columns: 1fr 1fr;
    }

    .detail-card {
        padding: 16px;
    }

    .amenity-tag {
        font-size: 0.78rem;
    }

    /* Share / Save sit under the status pill rather than squeezing beside it */
    .detail-card .d-flex.justify-content-between.align-items-start {
        flex-direction: column;
        gap: 12px;
    }
}

/* --- booking + tracking shared bits --- */
@media (max-width: 767px) {
    .booking-tabs .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }

        .booking-tabs .nav-pills .nav-link {
            white-space: nowrap;
        }

    .booking-item {
        padding: 16px;
    }

    .booking-meta {
        gap: 10px;
        font-size: 0.8rem;
    }
}

/* --- anything wide that would otherwise scroll the whole page sideways --- */
.table-responsive,
.pv-table-wrap {
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 575px) {
    .container,
    .container-fluid {
        padding-left: 14px;
        padding-right: 14px;
    }
}