/* ==================================================================
   OCMP MOBILE RESPONSIVE OVERRIDES
   Loaded LAST on every public theme + tenant layout so it wins the
   cascade. Targets iPhone 14/15, Samsung S-series (390/360-430px).
   ================================================================== */

/* ------------------------------------------------------------------
   1. DEFAULT THEME — mobile login/avatar (fixed top-right, left of hamburger)
   ------------------------------------------------------------------ */
.default-hero-login-mobile {
    display: none;
    position: fixed;
    top: 8px;
    right: 64px;
    z-index: 2002;
    height: 44px;
    width: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.default-hero-login-mobile a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 18px;
    text-decoration: none;
}
.default-hero-login-mobile img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.9);
}
@media (max-width: 991px) {
    .default-hero-login-mobile { display: flex; }
    /* Shift the default-theme hamburger left of the new mobile auth button
       (toggle is attached at body level by main.js on inner pages too) */
    .ocmp-nav-toggle { right: 60px; }
}

/* ------------------------------------------------------------------
   2. DEFAULT THEME — offcanvas drawer auth section
   ------------------------------------------------------------------ */
#ocmp-offcanvas .ocmp-offcanvas-auth {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}
#ocmp-offcanvas .ocmp-offcanvas-auth li a {
    display: block;
    padding: 10px 0;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.75) !important;
}
#ocmp-offcanvas .ocmp-offcanvas-auth li a i {
    margin-right: 8px;
    width: 18px;
    text-align: center;
}

/* ------------------------------------------------------------------
   3. DEFAULT THEME — fluid image/card heights on small screens
   ------------------------------------------------------------------ */
@media (max-width: 991px) {
    #news .news-image {
        min-height: 240px;
        max-height: 300px;
    }
    .main-news-content {
        height: auto;
        max-height: none;
    }
    .main-news-content .content {
        height: auto;
        overflow: visible;
    }
    #news .news-carousel-image {
        height: 160px;
        max-height: 160px;
    }
    .content-block-height,
    .content-height {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .box6 {
        height: auto;
    }
    .box6 img {
        height: auto;
        min-height: 220px;
    }
}

/* Gallery tiles */
@media (max-width: 575px) {
    .gallery_product {
        width: 50%;
        height: 130px;
        margin-bottom: 12px;
    }
}
@media (max-width: 400px) {
    .gallery_product { height: 110px; }
}

/* Amenities slot table — allow horizontal scroll instead of clipping */
.amenities .time-list .dropdown-menu {
    max-width: calc(100vw - 30px);
}
.amenities .slot-table {
    width: 100%;
    margin-bottom: 0;
    white-space: nowrap;
}

/* ------------------------------------------------------------------
   4. SHUFFLE THEME — ticker + announcement + fluid heights + modals
   ------------------------------------------------------------------ */
@media (max-width: 575px) {
    #upcoming-events-ticker .breakingNews .bn-title {
        min-width: 120px;
    }
    #upcoming-events-ticker .breakingNews .bn-title h2 {
        font-size: 13px;
        padding: 0 8px;
    }
    #upcoming-events-ticker .breakingNews .ticker-container .ticker-track li a {
        padding: 0 12px;
    }
    #announcement {
        top: 48px;
    }
    #announcement .announcement-switch {
        font-size: 12px;
    }
}
@media (max-width: 400px) {
    #upcoming-events-ticker .breakingNews .bn-title {
        min-width: 100px;
    }
}

@media (max-width: 991px) {
    .content-image {
        min-height: 280px;
        max-height: 420px;
    }
    .event-image {
        height: 200px;
    }
    #news .news-img {
        height: 200px;
    }
    #news .news-description {
        min-height: auto;
        height: auto;
        max-height: none;
    }
    .gallery-image {
        height: 200px;
    }
    .committee-image {
        height: 280px !important;
    }
}

/* Shuffle modals on phones */
@media (max-width: 575px) {
    #genericModal .modal-dialog,
    #bookingFormModal .modal-dialog,
    #issueFormModal .modal-dialog {
        margin: 0.75rem;
        max-width: calc(100% - 1.5rem);
        min-height: 0;
    }
    #genericModal .modal-content,
    #bookingFormModal .modal-content,
    #issueFormModal .modal-content {
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* ------------------------------------------------------------------
   5. COMMON PUBLIC — modal widths, ticker, hero touch targets, footer
   ------------------------------------------------------------------ */
@media (max-width: 575px) {
    .modal-dialog {
        width: auto;
        margin: 10px;
    }
    .modal-dialog.modal-lg {
        width: auto;
        max-width: none;
        margin: 10px;
    }
    .modal-body {
        padding: 12px !important;
        max-height: 70vh;
        overflow-y: auto;
    }
    .modal-footer {
        padding: 8px 12px;
    }
    .hero-fullscreen-default .carousel-control {
        width: 12%;
    }
    .hero-fullscreen-default .carousel-indicators li {
        width: 10px;
        height: 10px;
        margin: 0 4px;
    }
    #upcoming-events-ticker-default .breakingNews .bn-title {
        min-width: 120px;
    }
    #upcoming-events-ticker-default .breakingNews .bn-title h2 {
        font-size: 13px;
        padding: 0 10px;
    }
    #upcoming-events-ticker-default .breakingNews .ticker-container .ticker-track li a {
        padding: 0 12px;
    }
}
@media (max-width: 400px) {
    #upcoming-events-ticker-default .breakingNews .bn-title {
        min-width: 100px;
    }
    #upcoming-events-ticker-default .breakingNews .bn-title h2 {
        font-size: 12px;
    }
}

/* Announcement bars — keep clear of fixed mobile header/toggle */
@media (max-width: 767px) {
    #announcement {
        top: 52px;
    }
    #announcement .announcement-switch {
        font-size: 12px;
    }
}

/* Default footer — stack on phones */
@media (max-width: 767px) {
    #ocmp-footer .default-footer {
        text-align: center !important;
        float: none;
        margin-bottom: 10px;
    }
    #ocmp-footer .ocmp-social-icons li {
        display: inline-block;
        padding: 4px 8px;
    }
}

/* ------------------------------------------------------------------
   6. TENANT / RESIDENT DASHBOARD
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
    /* Stack all dashboard/booking columns full-width on phones */
    .content-body .row div[class*="col-md-7"],
    .content-body .row div[class*="col-md-5"],
    .content-body .row div[class*="col-md-6"],
    .content-body .row div[class*="col-lg-6"],
    .content-body .row div[class*="col-xl-6"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100%;
        margin-bottom: 15px;
        height: auto !important;
        min-height: 0 !important;
    }
    /* Remove forced 67vh card heights on small screens */
    .content-body .row div[class*="col-md-7"] .card,
    .content-body .row div[class*="col-md-5"] .card,
    .content-body .row div[class*="col-md-6"] .card,
    .content-body .row div[class*="col-lg-6"] .card,
    .content-body .row div[class*="col-xl-6"] .card {
        height: auto !important;
        min-height: 0 !important;
        overflow-y: visible !important;
    }
    /* Booking form time slots -> full width, larger touch targets */
    .time-picker .col-xl-6,
    .time-picker .col-lg-6,
    .time-picker .col-md-6,
    .time-picker .col-sm-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .time-picker .form-check-label {
        padding: 8px 0;
    }
    /* Contact row -> stack phone / address / book button */
    .c-p-b-f-contact-row div[class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}
@media (max-width: 991px) {
    /* Booking list: use horizontal scroll within the card */
    .table-responsive.booking,
    #booking .table-responsive,
    .card .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Dashboard charts/cards: force full width stacking */
    .dashboard .content-body .row div[class*="col-xl-6"],
    .dashboard .content-body .row div[class*="col-lg-6"],
    .dashboard .content-body .row div[class*="col-md-6"] {
        max-width: 100%;
        flex: 0 0 100%;
    }
}

/* ------------------------------------------------------------------
   7. BOOKING AREA FIXES (iPhone / Samsung) - remove card min-height +
      make the booking table fit without a horizontal scrollbar
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .content-with-footer,
    .main-board,
    .main-board-row,
    .left-borad {
        height: auto !important;
        min-height: 0 !important;
    }
    #booking .table-responsive table,
    .table-responsive.booking table,
    .tbl-dashboard .table-responsive table {
        table-layout: fixed;
        width: 100% !important;
        font-size: 13px;
    }
    #booking .table-responsive table td,
    #booking .table-responsive table th,
    .table-responsive.booking table td,
    .table-responsive.booking table th,
    .tbl-dashboard .table-responsive table td,
    .tbl-dashboard .table-responsive table th {
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        padding: 6px 8px;
    }
    #booking .table-responsive table td.w-5,
    #booking .table-responsive table td.w-30,
    #booking .table-responsive table td.w-40,
    .table-responsive.booking table td.w-5,
    .table-responsive.booking table td.w-30,
    .table-responsive.booking table td.w-40 {
        width: auto !important;
        max-width: none !important;
    }
}


/* ------------------------------------------------------------------
   8. BOOKING TABLE FIT (actual DOM: .card-content > .col-md-12.table-responsive)
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
    /* The Vue v-table + booking list lives inside .card-content > .table-responsive */
    .card-content .table-responsive table,
    .card-content.scroll .table-responsive table {
        table-layout: fixed;
        width: 100% !important;
        font-size: 13px;
    }
    .card-content .table-responsive table td,
    .card-content .table-responsive table th {
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        padding: 6px 8px;
        vertical-align: top;
    }
    .card-content .table-responsive table td.w-5,
    .card-content .table-responsive table td.w-30,
    .card-content .table-responsive table td.w-40 {
        width: auto !important;
        max-width: none !important;
    }
    /* The action icons row (camera, edit, delete) - keep inline on one line */
    .card-content .table-responsive table td.w-5 a {
        display: inline-block;
        margin: 0 2px 2px 0 !important;
        font-size: 18px;
    }
}


/* ------------------------------------------------------------------
   9. BOOKING PHOTO ROW + NO HORIZONTAL SCROLLBAR (phones)
   ------------------------------------------------------------------ */
/* BOOKING PHOTO ROW + NO HORIZONTAL SCROLLBAR (phones) */
@media (max-width: 767px) {
    .v-table .booking-photo-row td {
        background: #fafbfd !important;
        border-top: 0 !important;
        padding: 4px 10px !important;
    }
    .v-table .booking-photo-row .booking-photo-upload-link {
        color: #1e9ff2;
        font-weight: 600;
        font-size: 13px;
        text-decoration: none;
        display: inline-block;
        margin: 2px 0;
        padding: 4px 0;
    }
    .v-table .booking-photo-row .booking-photo-upload-link:hover {
        text-decoration: underline;
    }
    #booking .table-responsive table td.text-nowrap,
    .card-content .table-responsive table td.text-nowrap,
    .table-responsive.booking table td.text-nowrap {
        white-space: normal !important;
    }
    .card-content .table-responsive,
    #booking .table-responsive,
    .table-responsive.booking,
    .tbl-dashboard .table-responsive,
    .card .table-responsive {
        overflow-x: hidden !important;
    }
}

/* 11. Submit reachable above fixed footer + wider photo modals (phones) */
@media (max-width: 767px) { 
  .app-content .content-wrapper { padding-bottom: 76px; }
  .v--modal-box { top: 15px !important; left: 17px !important; width: 92% !important; height: auto !important; max-height: calc(100vh - 30px); overflow-y: auto; }
  .v--modal-overlay { align-items: flex-start; } 
}

/* 13a. PORTRAIT - Book button under footer: unclip + clearance */
@media (max-width: 767px) {
  html body .content.app-content,
  .app-content.content {
    overflow: visible !important;
  }
  .app-content .content-wrapper {
    padding-bottom: 130px !important;
  }
  .c-p-b-f-book-btn .btn {
    min-height: 46px;
    font-size: 15px;
  }
}
/* 13b. LANDSCAPE / SHORT VIEWPORTS - stack form, full-width Book button */
@media (max-width: 1024px) and (max-height: 560px) {
  .content-body .row div[class*="col-md-7"],
  .content-body .row div[class*="col-md-5"],
  .content-body .row div[class*="col-md-6"],
  .content-body .row div[class*="col-lg-6"],
  .content-body .row div[class*="col-xl-6"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100%;
    margin-bottom: 12px;
    height: auto !important;
    min-height: 0 !important;
  }
  .content-body .row div[class*="col-md-7"] .card,
  .content-body .row div[class*="col-md-5"] .card,
  .content-body .row div[class*="col-md-6"] .card,
  .content-body .row div[class*="col-lg-6"] .card,
  .content-body .row div[class*="col-xl-6"] .card {
    height: auto !important;
    min-height: 0 !important;
    overflow-y: visible !important;
  }
  .c-p-b-f-contact-row div[class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .c-p-b-f-book-btn .btn {
    min-height: 46px;
    font-size: 15px;
  }
  html body .content.app-content,
  .app-content.content {
    overflow: visible !important;
  }
  .app-content .content-wrapper {
    padding-bottom: 90px !important;
  }
}

/* 14. Hide desktop horizontal nav bar on phones (prevents gray menu flash after login) */
@media (max-width: 991px) {
  .header-navbar.navbar-horizontal {
    display: none !important;
  }
}


/* 15. PHOTO MODAL - tabs + X close + portrait scroll fix */
.photo-tabs-body{position: relative; padding-top: 42px !important;}
.photo-modal-close{position: absolute; top: 8px; right: 12px; z-index: 5; font-size: 28px; line-height: 1; opacity: 0.75; padding: 4px 6px;}
.photo-modal-close:hover{opacity: 1;}
.photo-tabs .nav-link{cursor: pointer; font-size: 13px;}
@media (max-width: 767px) {.v--modal-box{overflow-y: auto !important; max-height: calc(100vh - 30px) !important; -webkit-overflow-scrolling: touch;}
.v--modal-overlay{align-items: flex-start; overflow-y: auto;}
.v--modal-box .vmodal-custom{max-height: none !important; overflow: visible !important;}
.photo-tabs .nav-link{font-size: 13px; padding: 8px 10px;}
.photo-tabs-body .row .col-4{flex: 0 0 50%; max-width: 50%;}
}


/* 16. PHOTO UPLOAD ZONE UI */
.photo-upload-zone{border:2px dashed #c5cbd3;border-radius:10px;padding:20px 12px;text-align:center;color:#6b6f82;background:#fafbfc;cursor:pointer;transition:border-color .2s ease,background .2s ease;}
.photo-upload-zone:hover,.photo-upload-zone:focus{border-color:#1e9ff2;background:#f0f7fd;outline:none;}
.photo-upload-zone-icon{font-size:34px;display:block;color:#1e9ff2;margin-bottom:6px;}
.photo-upload-zone-text{display:block;font-size:15px;font-weight:600;color:#344054;}
.photo-upload-zone-sub{display:block;font-size:12px;color:#98a2b3;margin-top:2px;}

/* ------------------------------------------------------------------
   17. SHUFFLE INNER PAGES - dark hero-header must NOT overlay content
   ------------------------------------------------------------------ */
/* Inner pages (non-home) include the hero-header-overlay which is
   position:absolute -> it floats over the page content. Make it static
   on inner pages so the dark bar sits in flow above the content. */
body.shuffle-inner .hero-header-overlay {
    position: relative !important;
    top: auto !important;
    left: auto !important;
}

/* ------------------------------------------------------------------
   18. DEFAULT THEME GALLERY - stack vertical sidebar tabs above images
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .gallery-section .left-tabs.sideways-tabs,
    .gallery-section .right-tabs.sideways-tabs {
        flex-direction: row !important;
        flex-wrap: wrap;
        min-width: 0 !important;
        margin-left: 0 !important;
        padding: 0;
    }
    .gallery-section .left-tabs.sideways-tabs a.nav-link {
        min-width: 0 !important;
        display: inline-block !important;
        margin: 3px !important;
        padding: 6px 12px !important;
        font-size: 13px;
        border: 1px solid #e0e0e0;
        background: #f8f9fa;
    }
    .gallery-section .content.tab-section,
    .gallery-section .content.image-section {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    .gallery-section .content.image-section {
        padding-top: 12px;
    }
}

/* ------------------------------------------------------------------
   19. ISSUE CARDS (BOTH THEMES) - stack image above text on phones
   ------------------------------------------------------------------ */
@media (max-width: 575px) {
    .issue .issue-image,
    .issue .issue-header {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    .issue .issue-image img {
        width: 100% !important;
        height: 180px !important;
        object-fit: cover;
        border-radius: 6px;
        margin-bottom: 8px;
    }
    .issue .issue-details {
        padding-top: 6px;
    }
    /* Shuffle issue-details: BS4 doesn't support table-responsive on the <table> */
    .shuffle-inner table.table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ------------------------------------------------------------------
   20. AMENITIES TABS - horizontal scroll instead of clipping pills
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
    .amenities .tab-section .nav-pills {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
        margin-bottom: 0;
    }
    .amenities .tab-section .nav-pills .nav-item {
        flex: 0 0 auto;
        white-space: nowrap;
        margin-right: 8px !important;
    }
    .amenities .tab-section .nav-pills .nav-item:last-child {
        margin-right: 0 !important;
    }
}

/* ------------------------------------------------------------------
   21. SHUFFLE GALLERY FILTERS - wrap pills instead of overflowing
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
    #portfolio-flters {
        flex-wrap: wrap;
        justify-content: center !important;
        padding: 8px 4px !important;
    }
    #portfolio-flters li {
        margin: 3px 4px !important;
        padding: 7px 12px !important;
        font-size: 12px !important;
    }
}

/* ------------------------------------------------------------------
   22. RECAPTCHA - scale down so it never overflows on small phones
   ------------------------------------------------------------------ */
@media (max-width: 575px) {
    .g-recaptcha,
    #contact_recaptcha,
    #booking_recaptcha,
    #issue_recaptcha {
        transform: scale(0.88);
        transform-origin: left top;
        margin-bottom: 6px;
        max-width: 100%;
    }
}

/* ------------------------------------------------------------------
   23. CONTACT FORMS - stack recaptcha + send button full width
   ------------------------------------------------------------------ */
@media (max-width: 575px) {
    .contact .col-md-7,
    .contact .col-md-5,
    #contact .col-md-7,
    #contact .col-md-5 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 10px;
        text-align: left !important;
    }
    #contact-submit,
    .contact .php-email-form button[type="button"],
    .php-email-form #contact-submit {
        width: 100%;
    }
    /* Contact info column: reduce fixed 30px padding on small screens */
    .contact-form-wrap[style*="padding: 30px"] {
        padding: 20px !important;
    }
}

/* ------------------------------------------------------------------
   24. TENANT FULLCALENDAR (booking calendar) - touch friendly
   ------------------------------------------------------------------ */
@media (max-width: 575px) {
    .fc-toolbar.fc-header-toolbar {
        flex-wrap: wrap;
    }
    .fc-toolbar .fc-left,
    .fc-toolbar .fc-center,
    .fc-toolbar .fc-right {
        width: 100%;
        text-align: center;
        margin-bottom: 4px;
    }
    .fc-toolbar .fc-left .fc-button-group,
    .fc-toolbar .fc-right .fc-button-group {
        float: none;
    }
    .dashboard-calendar .fc-basic-view .fc-body .fc-row {
        min-height: 4.5em;
    }
    .dashboard-calendar .fc-day-number {
        font-size: 14px;
        padding: 8px 6px 2px;
    }
    .dashboard-calendar .fc-day-grid-event {
        margin: 2px 2px;
        font-size: 10px;
        padding: 2px 2px;
    }
    /* Booking user bubble: pin inside the viewport on phones */
    .booking-user-bubble {
        position: fixed !important;
        top: 80px !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: calc(100vw - 24px) !important;
        z-index: 4000;
    }
}

/* ------------------------------------------------------------------
   25. SHUFFLE + DEFAULT - small-screen heading / button polish
   ------------------------------------------------------------------ */
@media (max-width: 575px) {
    .shuffle-header-padding {
        padding: 24px 0 !important;
    }
    .issue-box {
        margin-bottom: 12px;
    }
    .issue-box .table-responsive {
        margin-bottom: 0;
    }
}