/* ============================================================
   mobile-overrides.css

   Site-wide mobile-friendliness overrides. Every rule lives
   inside an @media query so desktop layout is untouched.

   Loaded by:
     - Pages/Shared/_Layout.cshtml      (all main pages)
     - Pages/Login.cshtml                (Layout = null)
     - Pages/CreateAccount.cshtml        (Layout = null)
     - Pages/Verified.cshtml             (Layout = null)
     - Pages/VerifyEmail.cshtml          (Layout = null)

   Sections:
     1. Auth pages (split layout -> stacked)
     2. Search bar (Index hero, LeaseFindShort)
     3. School-search dropdown
     4. Message thread / list
     5. LeaseDetail sidebar
     6. Property / SendOffer / ContactInfo column tweaks
     7. Footer
     8. Generic safety nets
   ============================================================ */


/* =====================================================
   1) AUTH PAGES — collapse the desktop split below 768px
   ===================================================== */
@media (max-width: 767.98px) {
    .lw-auth-shell {
        flex-direction: column !important;
    }
    .lw-auth-side {
        flex-grow: 0 !important;
        padding: 0.75rem 1rem !important;
    }
    /* Hide the "Back to Website" caption — logo still links home */
    .lw-auth-side .lw-auth-back-text {
        display: none !important;
    }
    .lw-auth-side img {
        width: 120px !important;
        height: auto;
    }
    .lw-auth-card-wrap {
        padding: 0 1rem 1.5rem 1rem !important;
        justify-content: center !important;
        width: 100%;
    }
    .lw-auth-card-wrap > .lw-auth-card {
        width: 100% !important;
        max-width: 480px !important;
    }
}


/* =====================================================
   1b) HEADER — collapsed mobile nav is a real overlay panel.
       - Hide the redundant custom user-menu burger.
       - Inline the user dropdown items into the collapsed nav.
       - When the collapse is open, render it as a fixed-position
         overlay panel below the navbar with a light-gray
         background so it sits on top of page content.
   ===================================================== */

/* Mobile-only icons next to nav text (hidden on desktop) */
.site-nav-mobile-icon {
    display: none;
}

@media (max-width: 575.98px) {
    /* The mobile icons live next to the link text in the overlay */
    .site-nav-mobile-icon {
        display: inline-block;
        width: 1.5em;
        margin-right: 0.65rem;
        text-align: center;
        font-size: 0.95em;
    }

    /* Hide the redundant user-menu burger and its sibling labels */
    .site-nav-user .site-nav-hamburger,
    .site-nav-user .site-nav-user-name,
    .site-nav-user .site-nav-msg-badge {
        display: none !important;
    }

    /* Give the navbar a positioning context for the overlay */
    .site-header,
    .site-nav {
        position: relative;
    }

    /* The collapsed menu becomes a light-gray overlay panel */
    .site-nav .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #f8f9fa;
        border-top: 1px solid #e0e4e8;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        z-index: 1050;
        padding: 0.25rem 0;
        max-height: calc(100vh - 64px);
        overflow-y: auto;
    }

    /* Stack the items full-width with separators */
    .site-nav .navbar-collapse .navbar-nav {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .site-nav .navbar-collapse .nav-item {
        width: 100%;
    }

    /* Let the user dropdown <li> contribute its items inline */
    .site-nav-user {
        width: 100%;
    }

    .site-nav-user-menu.dropdown-menu {
        display: block !important;
        position: static !important;
        float: none !important;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        transform: none !important;
        inset: auto !important;
    }

    /* Items: dark text on the light-gray panel, full-width tap targets */
    .site-nav .navbar-collapse .nav-link,
    .site-nav .navbar-collapse .dropdown-item {
        color: #1a1a2e !important;
        padding: 0.85rem 1.1rem !important;
        font-size: 0.98rem;
        font-weight: 500;
        text-align: left;
        border-bottom: 1px solid #e8ecf0;
        background: transparent !important;
    }

    .site-nav .navbar-collapse .nav-link:hover,
    .site-nav .navbar-collapse .dropdown-item:hover,
    .site-nav .navbar-collapse .nav-link:focus,
    .site-nav .navbar-collapse .dropdown-item:focus {
        background: rgba(0, 0, 0, 0.04) !important;
        color: #1a1a2e !important;
    }

    /* Logout's <form> wrapper is a flex item — let it span the row */
    .site-nav-user-menu form { width: 100%; }
    .site-nav-user-menu form .dropdown-item { width: 100%; }

    /* Drop the bottom border on the very last visible item */
    .site-nav .navbar-collapse .navbar-nav > .nav-item:last-child > .nav-link,
    .site-nav-user-menu li:last-child .dropdown-item {
        border-bottom: none;
    }

    /* Keep the icons themed regardless of the parent header color */
    .site-nav .navbar-collapse .site-nav-mobile-icon,
    .site-nav .navbar-collapse .site-nav-user-icon {
        color: var(--lw-blue, #3085C3);
    }
}


/* =====================================================
   1c) INDEX HERO — stack the title block above the search
       box on phones. The hero-section is display:flex on
       desktop and the search wrapper switches from absolute
       to relative at <=992px, which makes the two children
       sit side-by-side as flex siblings on small screens.
       Forcing block layout below 768px lets them stack.
   ===================================================== */
@media (max-width: 767.98px) {
    /* Hero starts SHORT — just enough to show the title, CTA, and a strip of
       background image below them. Block layout (no flex auto-margins) so
       there's no empty space for the wrapper to "absorb" — when the search
       expands, the wrapper grows DOWNWARD in flow and the hero section
       grows with it (the background image stretches to cover the new
       height). The about section gets pushed down. */
    .home-page .hero-section {
        display: block !important;
        position: relative;
        min-height: 0 !important;
        padding-bottom: 1rem;
    }

    /* hero-inner has a generous bottom padding so a sliver of the background
       image is visible between the CTA and the search pill. This is what
       puts the pill "near the bottom of the image". */
    .home-page .hero-inner {
        display: block !important;
        text-align: left;
        padding: 2rem 1.25rem 5rem !important;
        gap: 1rem;
    }
    .home-page .hero-text {
        flex: none;
        max-width: 100%;
    }
    .home-page .hero-text h1 {
        font-size: 1.75rem !important;
        margin-bottom: 1rem;
    }

    /* Search wrapper sits in normal flow right after hero-inner. No auto-
       margin trickery, so when the collapse opens the wrapper just grows
       downward — and because the hero has no min-height it grows with it. */
    .home-page .hero-search-bar-wrapper {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 1rem !important;
        z-index: 10;
    }

    .home-page .hero-search-collapse {
        width: 100% !important;
    }
}


/* =====================================================
   1d) LEASE DETAIL — fix the giant gap before the
       availability card and the footer butting against it.
       The wrapper uses flex with align-items: stretch and
       the default align-content: stretch, which on mobile
       wraps to two lines and stretches them apart.
   ===================================================== */
@media (max-width: 767.98px) {
    .ld-content-wrapper {
        align-content: flex-start !important;
        align-items: flex-start !important;
        gap: 1rem !important;
        padding-bottom: 1.5rem;
    }

    /* Tighten the column gap a little */
    .ld-content-left,
    .ld-content-right {
        margin-bottom: 0;
    }

    /* Breathing room between the page content and the dark footer */
    .page-content {
        padding-bottom: 1.5rem;
    }
}


/* =====================================================
   2) SEARCH BAR — phone layout
      - Full-width fields, left-aligned content
      - Date inputs sized so iOS native picker stays tappable
      - 16px inputs to suppress iOS auto-zoom on focus
   ===================================================== */
@media (max-width: 767.98px) {
    .search-bar {
        padding: 0;
    }
    .search-bar-inner {
        padding: 0.75rem !important;
        gap: 0;
    }

    /* Each row: icon | text-column (grows) | chevron, flush left */
    .search-bar-field {
        padding: 0.75rem 0.5rem !important;
        gap: 0.75rem !important;
        justify-content: flex-start !important;
        width: 100%;
    }

    .search-bar-field > i:first-child {
        flex-shrink: 0;
        width: 1.5rem;
        text-align: center;
    }

    .search-bar-field-text {
        flex: 1 1 auto !important;
        width: 100% !important;
        text-align: left;
        min-width: 0;
    }

    .search-bar-label,
    .search-bar-placeholder {
        text-align: left;
        font-size: 0.85rem;
    }

    /* All inputs and selects: 16px so iOS doesn't auto-zoom on focus */
    .search-bar .school-search-input,
    .search-bar select,
    .search-bar input[type="number"],
    .search-bar input[type="date"] {
        font-size: 16px !important;
        width: 100% !important;
        min-height: 28px;
        line-height: 1.3;
    }

    /* DATE row — each input must be wide enough to render the iOS native
       date placeholder ("mm/dd/yyyy"), otherwise it visually collapses. */
    .search-bar-field[data-field="dates"] .search-bar-field-text > div {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center;
        gap: 0.4rem !important;
        width: 100%;
    }
    .search-bar-field[data-field="dates"] input[type="date"] {
        flex: 1 1 calc(50% - 1rem) !important;
        min-width: 140px;
        max-width: 100%;
        padding: 0.25rem 0 !important;
        color: #1a1a2e !important;          /* visible on white card */
        -webkit-appearance: none;            /* keep iOS native picker */
    }
    .search-bar-field[data-field="dates"] input[type="date"]:invalid {
        color: #9ca8b5 !important;           /* placeholder-like color when empty */
    }

    .search-bar-btn {
        padding: 0.95rem 1rem !important;
        font-size: 1rem;
        margin-top: 0.5rem;
    }
}


/* =====================================================
   3) SCHOOL-SEARCH DROPDOWN — keep it inside the viewport
   ===================================================== */
@media (max-width: 575.98px) {
    .school-dropdown {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        max-height: 60vh;
    }
    .school-dropdown-item {
        padding: 12px 14px;
    }
    .school-dropdown-icon {
        width: 36px;
        height: 36px;
        margin-right: 10px;
        font-size: 14px;
    }
}


/* =====================================================
   4) MESSAGE PAGE — readable bubbles, full-width composer
   ===================================================== */
@media (max-width: 575.98px) {
    .lw-msg-bubble {
        max-width: 90%;
        font-size: 0.88rem;
    }
    .lw-msg-bubble-actions .btn {
        flex: 1 1 auto;
        font-size: 0.82rem;
    }
    .lw-msg-thread-actions .btn {
        flex: 1 1 auto;
    }
    .lw-msg-composer textarea {
        font-size: 16px; /* prevents iOS auto-zoom on focus */
    }
    .lw-msg-thread-header img.lw-msg-thread-photo {
        width: 38px;
        height: 38px;
    }
}


/* =====================================================
   5) LEASE DETAIL — collapse the 380px sidebar earlier
      (page already has a 992px rule; this catches 768-991
      where the sidebar still tries to sit beside content).
      Soft fix: nothing to add, the 992 rule already covers
      it, but the gallery side-thumbs need help on phones.
   ===================================================== */
/* (LeaseDetail handles its own breakpoints inline.) */


/* =====================================================
   6) FORM-COLUMN PAGES — make sure col-md-* form fields
      stay readable under 576px (they already stack at
      768; this just tightens spacing on phones).
   ===================================================== */
@media (max-width: 575.98px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Buttons that were inline + tight on desktop become
       full-width-ish on phones for easier tapping. */
    .lw-cta-row .btn,
    .lw-form-actions .btn {
        flex: 1 1 auto;
    }
}


/* =====================================================
   7) FOOTER — better stacking on phones
   ===================================================== */
@media (max-width: 575.98px) {
    .footer-inner {
        flex-direction: column;
        gap: 1.25rem;
        text-align: center;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
}


/* =====================================================
   8) GENERIC SAFETY NETS
      Stop wide images / iframes from triggering the
      dreaded sideways-scroll on phones.
   ===================================================== */
@media (max-width: 767.98px) {
    img,
    iframe,
    video {
        max-width: 100%;
        height: auto;
    }

    /* Tap targets — minimum 40px tall on phones (Apple HIG / Material) */
    .btn-sm,
    .btn-link {
        min-height: 36px;
    }

    /* Modals — give breathing room from the screen edge */
    .modal-dialog {
        margin: 0.5rem;
    }

    /* Inputs — stop iOS from zooming on focus when font < 16px */
    input.form-control,
    select.form-select,
    textarea.form-control {
        font-size: 16px;
    }
}