/* ─────────────────────────────────────────────
   File: app/static/css/style.css
   App Version: 2026.03.14 | File Version: 1.2.0
   Last Modified: 2026-03-14
   ───────────────────────────────────────────── */
/* HomeFinder – custom styles */

body {
    background-color: #f8f9fa;
    -webkit-tap-highlight-color: transparent;
}

.card {
    border-radius: 10px;
}

.navbar-brand {
    font-weight: 700;
}

.progress {
    border-radius: 4px;
}

/* Auth card centering */
.card.shadow-sm {
    border: none;
    border-radius: 12px;
}

/* Badge tweaks */
.badge {
    font-weight: 500;
}

/* ── Desktop: stack icon above text in navbar ─────────────── */
@media (min-width: 992px) {
    .navbar-nav .nav-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        font-size: 0.72rem;
        padding: 4px 10px;
        line-height: 1.3;
        gap: 1px;
    }
    .navbar-nav .nav-link i.bi {
        font-size: 1.1rem;
        line-height: 1;
    }
    .navbar-nav .nav-link.dropdown-toggle::after {
        margin-left: 2px;
        vertical-align: middle;
    }
}

/* ── Mobile optimizations ─────────────────────────────────── */
@media (max-width: 991.98px) {
    /* Larger touch targets in collapsed nav */
    .navbar-nav .nav-link {
        padding: 10px 16px;
        font-size: 0.95rem;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .navbar-nav .nav-link i.bi {
        width: 24px;
        text-align: center;
        margin-right: 8px;
    }

    /* Dropdown items need breathing room */
    .dropdown-item {
        padding: 10px 20px;
    }

    /* Listing cards: full width, stack photo on top */
    .listing-card .d-flex {
        flex-direction: column;
    }
    .listing-card .d-flex > .flex-shrink-0 {
        width: 100% !important;
        min-height: 160px !important;
    }
    .listing-card .d-flex > .flex-shrink-0 img {
        width: 100% !important;
        height: 160px !important;
        border-radius: 10px 10px 0 0 !important;
    }
    .listing-card .d-flex > .flex-shrink-0 .d-flex.align-items-center {
        border-radius: 10px 10px 0 0 !important;
    }

    /* Score ring on mobile: slightly smaller */
    .score-ring {
        width: 42px !important;
        height: 42px !important;
        font-size: 0.8rem !important;
    }

    /* Filter bar: wrap on mobile */
    .card-body .row.g-2 {
        gap: 4px;
    }

    /* Modal dialogs: nearly full-width on mobile */
    .modal-dialog {
        margin: 8px;
    }
    .modal-xl {
        max-width: calc(100vw - 16px);
    }

    /* Map: taller on mobile */
    #map {
        height: calc(100vh - 120px) !important;
        min-height: 400px !important;
    }

    /* Detail page stat blocks */
    .stat-block {
        padding: 8px 4px !important;
    }
    .stat-block .val {
        font-size: 1.2rem !important;
    }

    /* Preferences: full-width columns */
    .pref-section .card-body {
        padding: 12px;
    }

    /* Main container: less padding */
    main.container {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* ── Small phones (< 576px) ───────────────────────────────── */
@media (max-width: 575.98px) {
    /* Price display */
    h5.text-primary { font-size: 1.1rem; }

    /* Feature tags: tighter */
    .feature-tag { font-size: 0.62rem !important; padding: 1px 4px !important; }

    /* Source badges + buttons: wrap but keep buttons visible */
    .listing-card .d-flex.align-items-center.justify-content-between {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Welcome page power cards */
    .power-grid {
        grid-template-columns: 1fr !important;
    }

    /* Role pills: vertical stack */
    .role-pills {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ── PWA standalone mode ──────────────────────────────────── */
@media (display-mode: standalone) {
    /* Extra top padding when running as installed app (no browser chrome) */
    body {
        padding-top: env(safe-area-inset-top);
    }
    .navbar {
        padding-top: env(safe-area-inset-top);
    }
}

/* ── Safe area insets (notch phones) ──────────────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
    main.container {
        padding-bottom: env(safe-area-inset-bottom);
    }
}