/*
    // `xs` returns only a ruleset and no media query
    // ... { ... }
    // `sm` applies to x-small devices (portrait phones, less than 576px)
    @media (max-width: 575.98px) { ... }


    // `md` applies to small devices (landscape phones, less than 768px)
    @media (max-width: 767.98px) { ... }


    // `lg` applies to medium devices (tablets, less than 992px)
    @media (max-width: 991.98px) { ... }


    // `xl` applies to large devices (desktops, less than 1200px)
    @media (max-width: 1199.98px) { ... }

    
    // `xxl` applies to x-large devices (large desktops, less than 1400px)
    @media (max-width: 1399.98px) { ... }
*/
/*PHONE*/
@media screen and (max-width: 767.98px) {
  hr {
    opacity:0;
  }  
  .notes-alert {
        display:none !important;
    }
    td,div,li,a,span {
		  font-size: 20px !important;
	  }
	  
    /* User Menu Mobile Positioning - Move initials to right side */
    .container-fluid .row .col-md-auto {
        position: relative !important;
        text-align: right !important;
        margin-left: auto !important;
    }
    
    /* Ensure user dropdown appears on the right */
    .col-md-auto .dropdown {
        display: inline-block !important;
        position: relative !important;
        float: right !important;
    }
  }

/* Global Floating Label Form Mobile Styles - All ML2 Modules */
@media screen and (max-width: 767.98px) {
    /* Global container padding for all forms */
    .container {
        padding: 0 5px;
    }
    
    /* Global border-mh styling for all modules */
    .border-mh {
        margin: 5px !important;
        padding: 10px !important;
        border-radius: 8px !important;
    }
    
    /* Global floating label font size */
    .form-floating > label {
        font-size: 0.875rem !important;
    }
    
    /* Global form controls - prevent iOS zoom and ensure touch targets */
    .form-control, 
    .form-select {
        font-size: 16px !important; /* Prevents zoom on iOS */
        min-height: 44px !important; /* Touch target size */
    }
    
    /* Global modal floating label fixes */
    .modal .form-floating > .form-control:focus ~ label,
    .modal .form-floating > .form-control:not(:placeholder-shown) ~ label,
    .modal .form-floating > .form-select ~ label {
        opacity: 0.65 !important;
        transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !important;
        color: #6c757d !important;
        background-color: transparent !important;
    }
    
    .modal .form-floating > .form-control,
    .modal .form-floating > .form-select {
        padding-top: 1.625rem !important;
        padding-bottom: 0.625rem !important;
    }
    
    .modal .form-floating > label {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        height: 100% !important;
        padding: 1rem 0.75rem !important;
        pointer-events: none !important;
        border: 1px solid transparent !important;
        transform-origin: 0 0 !important;
        transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out !important;
    }
    
    /* Ultra-specific floating label fix - force all floating labels to behave correctly */
    body .form-floating > .form-control:focus ~ label,
    body .form-floating > .form-control:not(:placeholder-shown) ~ label,
    body .form-floating > .form-select ~ label,
    body .form-floating > textarea.form-control:not(:placeholder-shown) ~ label {
        opacity: 0.65 !important;
        transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !important;
        color: #6c757d !important;
        background-color: transparent !important;
        z-index: 2 !important;
    }
    
    /* Force proper padding on all form controls in floating label containers */
    body .form-floating > .form-control,
    body .form-floating > .form-select,
    body .form-floating > textarea.form-control {
        padding-top: 1.625rem !important;
        padding-bottom: 0.625rem !important;
        height: auto !important;
        min-height: 58px !important;
    }
    
    /* Ensure all floating labels are positioned correctly */
    body .form-floating > label {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        height: 100% !important;
        padding: 1rem 0.75rem !important;
        pointer-events: none !important;
        border: 1px solid transparent !important;
        transform-origin: 0 0 !important;
        transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out !important;
        z-index: 1 !important;
    }
    
    /* Comprehensive fix for any floating label scenario - highest possible CSS specificity */
    html body div .form-floating > .form-control:focus ~ label,
    html body div .form-floating > .form-control:not(:placeholder-shown) ~ label,
    html body div .form-floating > .form-select ~ label,
    html body div .form-floating > textarea.form-control:focus ~ label,
    html body div .form-floating > textarea.form-control:not(:placeholder-shown) ~ label {
        opacity: 0.65 !important;
        transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !important;
        color: #6c757d !important;
        background-color: white !important;
        z-index: 3 !important;
        top: 0 !important;
        left: 0 !important;
    }
    
    /* Specific fix for select dropdowns - force labels to move for all selects */
    html body div .form-floating > .form-select {
        padding-top: 1.625rem !important;
        padding-bottom: 0.625rem !important;
        min-height: 58px !important;
    }
    
    /* Force labels to move for select elements regardless of value */
    html body div .form-floating > .form-select ~ label {
        opacity: 0.65 !important;
        transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !important;
        color: #6c757d !important;
        background-color: white !important;
        z-index: 3 !important;
        top: 0 !important;
        left: 0 !important;
    }
    
    /* Force textarea specific handling */
    html body div .form-floating > textarea.form-control {
        padding-top: 1.625rem !important;
        padding-bottom: 0.625rem !important;
        resize: vertical !important;
        min-height: 58px !important;
    }
    
    /* Global button styling for all modules */
    .btn {
        min-height: 44px !important;
    }
    
    /* Global row and column spacing for all modules */
    .row {
        margin: 0 !important;
    }
    
    [class*="col-"] {
        padding: 0 8px !important;
    }
    
    /* Global margin and font size fixes for all modules */
    .mb-3 {
        margin-bottom: 1rem !important;
    }
    
    h4 {
        font-size: 1.25rem !important;
    }
    
    .form-text {
        font-size: 0.75rem !important;
    }
}

@media screen and (max-width: 575.98px) {
    /* Global extra-small screen adjustments for all modules */
    .border-mh {
        margin: 2px !important;
        padding: 8px !important;
    }
    
    .text-center.mb-3 {
        margin-bottom: 1rem !important;
    }
    
    .row .col-12 {
        margin-bottom: 0.75rem !important;
    }
    
    .btn-lg {
        padding: 0.5rem 1rem !important;
        font-size: 0.9rem !important;
    }
}

/* Mobile Button Enhancements for Property Listing Pages */
@media (max-width: 767.98px) {
    .btn.d-md-none {
        display: inline-block !important;
        padding: 12px 16px !important;
        font-size: 1.1rem !important;
        min-height: 48px !important;
        margin: 4px 2px !important;
        visibility: visible !important;
    }
    
    .btn.d-md-none i {
        font-size: 1.3rem !important;
    }
}

/* Force mobile buttons to show on small screens - Property Pages */
@media (max-width: 576px) {
    .btn.btn-padding-mh.d-md-none {
        display: inline-block !important;
        padding: 16px 20px !important;
        font-size: 1.6rem !important;
        min-height: 52px !important;
        margin: 8px 6px !important;
        visibility: visible !important;
        line-height: 1.2 !important;
    }
    
    .btn.btn-padding-mh.d-md-none i {
        font-size: 1.8rem !important;
    }
    
    .btn.btn-padding-mh.d-md-none,
    .btn.btn-padding-mh.d-md-none * {
        font-size: 1.6rem !important;
    }
    
    /* Specific overrides for button text elements */
    .btn.btn-padding-mh.d-md-none small,
    .btn.btn-padding-mh.d-md-none em {
        font-size: 1.5rem !important;
    }
}

/*DESKTOP*/
  @media screen and (min-width: 768px) {
    .notes-tooltip {
        display:none !important;
    }
  }

/* ========================================
   CONSOLIDATED MEDIA QUERIES FROM ALL CSS FILES
   ======================================== */

/* FROM mh.css */
@media (max-width: 767.98px) {
    .social-media-url-mh {
        display:none;
    }
}

/* Responsive Design Enhancements - FROM mh.css */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    
    .card {
        margin: 0 10px;
        border-radius: 8px;
    }
    
    .btn {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .d-md-flex .btn:last-child {
        margin-bottom: 0;
    }
    
    .dropdown-menu {
        min-width: 280px !important;
        margin-right: -20px;
    }
}

/* Print Styles - FROM mh.css */
@media print {
    .card {
        box-shadow: none;
        border: 1px solid #ccc;
    }
    
    .btn {
        background: none !important;
        color: #000 !important;
        border: 1px solid #000 !important;
    }
}

/* FROM components.css */
@media screen and (max-width: 767.98px) {
    #loader {
      left:38% !important;
    }
}

/* FROM hero.css */
/* mobile sizing */
@media (max-width: 767.98px) {
    .bg-mask-landing-mh {
        height:430px !important;
    }
    .bg-mask-room-mh, .bg-mask-home-mh {
        height:120px !important;
    }
}

/* mobile sizing */
@media (max-width: 767.98px) {
    .img-hero-room-req-mh, .img-hero-home-req-mh {
        background-position-x: 20% !important; 
        background-position-y: 60% !important; 
        height:200px !important;
        margin-top: -3px;
        margin-bottom: 3px;
    }
}

/* FROM sub-nav.css */
/* Mobile-only compact sub-navigation */
@media (max-width: 768px) {
  /* Compact sub-navigation for mobile */
  #sub-nav .sub-nav {
    margin-bottom: 5px !important;
    padding: 5px 0 !important;
  }
  
  .nav-tabs {
    margin-bottom: 5px !important;
    border-bottom: 1px solid #dee2e6 !important;
  }
  
  .nav-tabs .nav-item {
    margin-bottom: 0 !important;
  }
  
  .nav-tabs .nav-link {
    padding: 8px 12px !important;
    font-size: 13px !important;
    border: 1px solid transparent !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
  }
  
  .nav-tabs .nav-link i {
    font-size: 12px !important;
    margin-right: 6px !important;
  }
  
  /* Compact container spacing */
  #sub-nav.container-fluid {
    padding: 10px 15px !important;
  }
}

/* FROM w3.css */
/* mobile sizing */
@media (max-width: 767.98px) {
    .card-portfolio {
        height:540px !important;
    }
}

/* tablet sizing */
@media (min-width: 769px) and (max-width: 991.98px) {
    .card-portfolio {
        height:615px !important;
    }
}

/* style page tab for mobile only */
@media screen and (max-width: 480px) {
    .page-tab {
        background-color:#737373;
    }
}

/* FROM seo.css */
/* Mobile responsive breadcrumbs */
@media (max-width: 768px) {
    .seo-breadcrumbs {
        padding: 0 10px;
    }
    
    .seo-breadcrumbs .breadcrumb {
        font-size: 12px;
        padding: 6px 10px;
    }
}

/* Print styles (hide breadcrumbs in print) */
@media print {
    .seo-breadcrumbs {
        display: none;
    }
}

/* FROM application.css */
@media (max-width: 991.98px) {
/* your information */
#id1 {
top:300px;
border:0px red solid;
}
/* your landlord - mobile */
#id2 {
top:1250px;
border:0px red solid;
}
/* your job - mobile */
#id3 {
top:2300px;
border:0px red solid;
}
/* additional income - mobile */
#id4 {
top:2910px;
border:0px red solid;
}
/* co-applicant info - mobile */
#id5 {
top:3160px;
border:0px red solid;
}
/* co-applicant job - mobile */
#id6 {
top:3770px;
border:0px red solid;
}
/* emergency contact - mobile */
#id7 {
top:4560px;
border:0px red solid;
} /* emergency contact - mobile */
#id7a {
top:4560px;
border:0px red solid;
}
/* emergency contact - mobile */
#id7b {
top:4560px;
border:0px red solid;
}
/* references - mobile */
#id8 {
top:5000px;
border:0px red solid;
}
/* dependents - mobile */
#id9 {
top:6000px;
border:0px red solid;
}
/* move in date - mobile */
#id10 {
top:7340px;
border:0px red solid;
}
/* vehicles - mobile */
#id11 {
top:7430px;
border:0px red solid;
}
/* pets - mobile */
#id12 {
top:7490px;
border:0px red solid;
}
/* notes - mobile */
#id13 {
top:7610px;
border:0px red solid;
}
/* submit - mobile */
#id14 {
top:7700px;
border:0px red solid;
}
}

/* FROM html-tags.css */
@media screen and (max-width: 767.98px) {
    body {
        width:100% !important;
    }
}

/* FROM user-profile.css */
/* Responsive adjustments */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }

    .card {
        margin: 0 10px;
    }

    .btn {
        width: 100%;
        margin-bottom: 10px;
    }

    .d-md-flex .btn:last-child {
        margin-bottom: 0;
    }
}

/* FROM fullcalendar.css */
/* Mobile Responsive Calendar Styles */
@media (max-width: 768px) {
  /* Hide default time display on mobile to avoid duplication */
  .fc-time {
    display: none !important;
  }

  /* Custom time format on mobile */
  .fc-title,
  .fc-event-title {
    font-size: 20px !important;
  }

  /* Make calendar container responsive */
  .fullcalendar-bookings,
  .fullcalendar-tsheet-entries,
  .fullcalendar-hk {
    margin: 0 -15px !important;
    padding: 10px !important;
    width: calc(100% + 30px) !important;
  }

  /* Mobile calendar table width */
  .fc-view-container {
    width: 100% !important;
  }

  .fc-view {
    width: 100% !important;
  }

  /* Ensure full width for month view */
  .fc-month-view .fc-day-grid-container {
    width: 100% !important;
  }

  /* Force day headers to be visible with broad targeting */
  table.fc-header-table th,
  .fc-head th,
  .fc-head td,
  .fc-row .fc-widget-header {
    padding: 12px 4px !important;
    font-size: 18px !important;
    font-weight: bold !important;
    text-align: center !important;
    background-color: #f8f9fa !important;
    border-bottom: 2px solid #dee2e6 !important;
    color: #333 !important;
  }

  /* Header button improvements */
  .fc-toolbar {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .fc-toolbar .fc-left,
  .fc-toolbar .fc-right,
  .fc-toolbar .fc-center {
    float: none !important;
    text-align: center !important;
  }

  .fc-button {
    padding: 8px 12px !important;
    font-size: 16px !important;
    margin: 2px !important;
    min-height: 44px !important;
  }

  .fc-button-group .fc-button {
    margin: 0 1px !important;
  }

  /* Title adjustments */
  .fc-toolbar h2 {
    font-size: 20px !important;
    margin: 10px 0 !important;
  }

  /* Calendar table improvements - Multiple selectors for FullCalendar 3.x */
  .fc-day-header,
  .fc-widget-header,
  .fc-day-top,
  th.fc-day-header,
  th.fc-widget-header {
    padding: 12px 2px !important;
    font-size: 18px !important;
    font-weight: bold !important;
    text-align: center !important;
    background-color: #f8f9fa !important;
    border-bottom: 2px solid #dee2e6 !important;
    white-space: nowrap !important;
    color: #333 !important;
  }

  /* Target day header content specifically */
  .fc-day-header span,
  .fc-widget-header span {
    font-size: 18px !important;
    font-weight: bold !important;
    color: #333 !important;
    text-transform: uppercase !important;
  }

  .fc-day-number {
    padding: 8px !important;
    font-size: 16px !important;
  }

  /* Week view adjustments */
  .fc-time-grid .fc-slats td {
    height: 2.5em !important;
  }

  .fc-time-grid-event {
    font-size: 14px !important;
    padding: 4px !important;
  }

  /* Month view event styling */
  .fc-event {
    font-size: 14px !important;
    padding: 4px 6px !important;
    margin: 1px 0 !important;
    border-radius: 3px !important;
  }

  /* Day grid adjustments */
  .fc-day-grid-event {
    margin: 1px 2px !important;
  }

  .fc-day-grid .fc-day-number {
    padding: 8px !important;
  }

  /* Agenda view improvements */
  .fc-agenda-view .fc-day-grid .fc-row {
    min-height: 2em !important;
  }

  .fc-scroller {
    overflow-x: auto !important;
  }
}

@media (max-width: 480px) {
  /* Extra small screens */
  .fc-toolbar {
    padding: 5px !important;
  }

  .fc-toolbar h2 {
    font-size: 18px !important;
  }

  .fc-button {
    padding: 6px 8px !important;
    font-size: 14px !important;
    min-height: 40px !important;
  }

  /* Day headers for small screens */
  .fc-day-header,
  .fc-widget-header,
  .fc-day-top,
  th.fc-day-header,
  th.fc-widget-header {
    padding: 10px 1px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    text-align: center !important;
    background-color: #f8f9fa !important;
    border-bottom: 2px solid #dee2e6 !important;
    white-space: nowrap !important;
    color: #333 !important;
  }

  /* Day header content for small screens */
  .fc-day-header span,
  .fc-widget-header span {
    font-size: 16px !important;
    font-weight: bold !important;
    color: #333 !important;
    text-transform: uppercase !important;
  }

  .fc-day-number {
    padding: 6px !important;
    font-size: 15px !important;
  }

  /* Hide some less important elements on very small screens */
  .fc-toolbar .fc-left .fc-button-group:last-child {
    display: none !important;
  }

  /* Make events more touch-friendly */
  .fc-event {
    min-height: 24px !important;
    font-size: 13px !important;
  }

  /* Improve spacing */
  .fullcalendar-bookings,
  .fullcalendar-tsheet-entries,
  .fullcalendar-hk {
    margin: 0 -10px !important;
    padding: 5px !important;
  }
}

/* Lightbox Gallery Responsive Styles */
@media (max-width: 767px) {
    .lightbox-gallery h2 {
        margin-bottom: 25px;
        padding-top: 25px;
        font-size: 24px;
    }

    .gallery-preview {
        max-height: 120px;
        margin: 1px;
    }

    .property-pricing h4 {
        font-size: 1.1rem;
    }

    .btn-more-details {
        width: 100%;
        margin: 0.25rem 0;
        padding: 12px;
        font-size: 1rem;
    }
}

/* Reserve Button Mobile Fixes */
@media (max-width: 767.98px) {
    .btn-bnb-mh {
        display: inline-block !important;
        width: auto !important;
        max-width: 100% !important;
        padding: 12px 16px !important;
        margin: 4px 2px !important;
        font-size: 16px !important;
        min-height: 44px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .btn-bnb-mh:hover {
        background-color: rgb(255,255,255) !important;
        border-color: rgb(251,81,115) !important;
        color: rgb(251, 81, 115) !important;
    }
}

/* Extra small screens - Reserve Button */
@media (max-width: 575.98px) {
    .btn-bnb-mh {
        padding: 14px 18px !important;
        font-size: 18px !important;
        min-height: 48px !important;
        margin: 6px 4px !important;
    }
}