/**
 * RentFlow Kenya — Core Application Stylesheet & Robust Layout Fallbacks
 * /public/assets/css/app.css
 */

/* ── Typography & Display Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800;900&display=swap');

:root {
    --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-display: 'Outfit', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --brand-50: #f0fdf4;
    --brand-100: #dcfce7;
    --brand-200: #bbf7d0;
    --brand-500: #22c55e;
    --brand-600: #16a34a;
    --brand-700: #15803d;
}

body {
    font-family: var(--font-sans);
}

.font-display {
    font-family: var(--font-display);
}

/* ── Brand Color Helpers ────────────────────────────────────────────────── */
.bg-brand-50  { background-color: #f0fdf4; }
.bg-brand-100 { background-color: #dcfce7; }
.bg-brand-200 { background-color: #bbf7d0; }
.bg-brand-500 { background-color: #22c55e; }
.bg-brand-600 { background-color: #16a34a; }
.bg-brand-700 { background-color: #15803d; }
.text-brand-400 { color: #4ade80; }
.text-brand-500 { color: #22c55e; }
.text-brand-600 { color: #16a34a; }
.text-brand-700 { color: #15803d; }
.border-brand-100 { border-color: #dcfce7; }
.border-brand-500 { border-color: #22c55e; }
.border-brand-600 { border-color: #16a34a; }

/* ── Badges & Status Indicators ─────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}
.badge-success {
    background-color: #dcfce7;
    color: #15803d;
}
.badge-warning {
    background-color: #fef3c7;
    color: #b45309;
}
.badge-danger {
    background-color: #fee2e2;
    color: #b91c1c;
}
.badge-info {
    background-color: #e0f2fe;
    color: #0369a1;
}

/* ── Room Cards & Image Framing ─────────────────────────────────────────── */
/* Prevents rooms cover image from getting weirdly stretched, squashed or cropped */
.card-lift {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.08);
}

.room-cover-box,
[id="gridView"] .relative,
.card-lift > .relative:first-child {
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: #f1f5f9;
}

.room-cover-box img,
[id="gridView"] img,
.card-lift img {
    object-fit: cover;
    object-position: center center;
}

/* ── Global image safety net ────────────────────────────────────────────── */
/* Belt-and-braces fallback: no <img> anywhere on the site — including
   property.php's hero photo, which sits outside .card-lift/#gridView and
   so wasn't covered by the rules above — should ever be able to exceed its
   container's width and blow out the page layout. This protects every page
   even if a utility class is missing or a Tailwind build/CDN hiccup drops
   the compiled utilities (as happened here: tailwind_min.css shipped empty).
   object-fit/height on elements that already size themselves via Tailwind
   (h-full, h-72, etc.) are untouched since those rules are more specific. */
img {
    max-width: 100%;
    height: auto;
}

/* ── Horizontal Scrollable Galleries & Additional Images ────────────────── */
/* Makes additional photos smoothly scrollable without breaking grid or spilling */
.additional-images-track,
.room-gallery-track,
[id*="ExistingImages"],
[id*="existing_images"],
[id*="galleryPreview"],
[id*="Gallery"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 0.625rem !important;
    padding-bottom: 0.5rem !important;
    padding-top: 0.25rem !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: thin;
}

.additional-images-track > *,
.room-gallery-track > *,
[id*="ExistingImages"] > *,
[id*="existing_images"] > *,
[id*="galleryPreview"] > *,
[id*="Gallery"] > * {
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
}

/* ── Modal Layout & Overlap Protection ──────────────────────────────────── */
/* Fixes CSS flexbox bug where centered modals overflow into negative coordinates
   and get cut off at top and bottom */
[id$="Modal"].fixed,
[id$="Drawer"].fixed,
.fixed.inset-0.z-50 {
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 1.5rem 1rem !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

[id$="Modal"] > div,
[id$="Drawer"] > div {
    margin: auto !important;
    max-height: calc(100vh - 3rem) !important;
    display: flex !important;
    flex-direction: column !important;
}

[id$="Modal"] form,
[id$="Modal"] .modal-body,
[id$="Modal"] .overflow-y-auto {
    min-height: 0 !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
}

/* ── Grid item shrink fix ───────────────────────────────────────────────── */
/* CSS Grid (and Flexbox) items default to min-width: auto, which means a
   grid item will refuse to shrink below the natural/intrinsic width of its
   widest content, even if that's wider than the actual viewport. On a
   single-implicit-column mobile grid (like the lg:grid-cols-3 layout below
   lg), this silently forces the ENTIRE grid track — and the whole page —
   to expand to fit whatever the widest child happens to need, causing
   page-wide horizontal overflow. This is the confirmed root cause of the
   property.php mobile overflow bug: grid-template-columns was computing to
   a fixed 810px instead of respecting the real ~380px viewport.
   Setting min-width: 0 lets grid/flex items shrink properly and rely on
   their own internal wrapping/scrolling instead of blowing out the page. */
.grid > *,
.flex > * {
    min-width: 0;
}

/* ── Global Layout Resets ───────────────────────────────────────────────── */
/* overflow-x: hidden (not "clip") is used deliberately here: "clip" is not
   reliably supported on older Safari / budget-Android WebViews, and on
   those browsers it's silently ignored, letting the page scroll sideways
   anyway. Setting it on BOTH html and body, plus max-width, closes that
   gap regardless of which element the browser treats as the root scroller. */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}