@import url('./fonts/outfit.css');

:root {
    --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Core Palette (hardcoded for reliability) */
    --blue:    #2563eb;
    --indigo:  #4f46e5;
    --emerald: #059669;
    --teal:    #0d9488;
    --amber:   #d97706;
    --rose:    #e11d48;
    --slate:   #475569;
}

body, input, select, textarea, button {
    font-family: var(--font-sans);
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    background-color: #f8fafc;
    color: #0f172a;
}

/* ══════════════════════════════════════════
   TAILWIND COLOR CLASS OVERRIDES
   These replace purged Tailwind classes
   with explicit declarations, guaranteed
   to render on all builds.
═══════════════════════════════════════════ */

/* Blue */
.text-blue-600   { color: #2563eb !important; }
.text-blue-200   { color: #bfdbfe !important; }
.bg-blue-600     { background-color: #2563eb !important; }
.bg-blue-500     { background-color: #3b82f6 !important; }
.bg-blue-50      { background-color: #eff6ff !important; }
.bg-blue-100     { background-color: #dbeafe !important; }
.hover\:bg-blue-600:hover { background-color: #2563eb !important; }
.hover\:bg-blue-700:hover { background-color: #1d4ed8 !important; }
.hover\:bg-blue-50:hover  { background-color: #eff6ff !important; }
.border-blue-500 { border-color: #3b82f6 !important; }
.focus\:border-blue-500:focus { border-color: #3b82f6 !important; }
.text-blue-700   { color: #1d4ed8 !important; }
.bg-blue-100     { background-color: #dbeafe !important; }
.border-blue-400 { border-color: #60a5fa !important; }
.hover\:border-blue-400:hover { border-color: #60a5fa !important; }

/* Indigo */
.text-indigo-600  { color: #4f46e5 !important; }
.text-indigo-500  { color: #6366f1 !important; }
.bg-indigo-50     { background-color: #eef2ff !important; }
.text-indigo-200  { color: #c7d2fe !important; }

/* Emerald / Green */
.text-emerald-600  { color: #059669 !important; }
.text-emerald-200  { color: #a7f3d0 !important; }
.bg-emerald-600    { background-color: #059669 !important; }
.bg-emerald-50     { background-color: #ecfdf5 !important; }
.hover\:bg-emerald-700:hover { background-color: #047857 !important; }

/* Teal */
.text-teal-600  { color: #0d9488 !important; }

/* Amber */
.text-amber-600  { color: #d97706 !important; }
.text-amber-200  { color: #fde68a !important; }
.bg-amber-50     { background-color: #fffbeb !important; }
.bg-amber-600    { background-color: #d97706 !important; }

/* Rose / Red */
.text-rose-600   { color: #e11d48 !important; }
.text-rose-700   { color: #be123c !important; }
.text-rose-200   { color: #fecdd3 !important; }
.text-rose-500   { color: #f43f5e !important; }
.bg-rose-600     { background-color: #e11d48 !important; }
.bg-rose-50      { background-color: #fff1f2 !important; }
.hover\:bg-rose-700:hover { background-color: #be123c !important; }
.border-rose-500 { border-color: #f43f5e !important; }

/* Gray / Slate */
.text-gray-400   { color: #9ca3af !important; }
.text-gray-500   { color: #6b7280 !important; }
.text-gray-700   { color: #374151 !important; }
.text-gray-800   { color: #1f2937 !important; }
.text-slate-600  { color: #475569 !important; }
.text-slate-700  { color: #334155 !important; }
.text-slate-800  { color: #1e293b !important; }
.text-slate-900  { color: #0f172a !important; }
.bg-gray-100     { background-color: #f3f4f6 !important; }
.hover\:bg-gray-200:hover { background-color: #e5e7eb !important; }
.bg-slate-50     { background-color: #f8fafc !important; }
.hover\:bg-slate-50:hover { background-color: #f8fafc !important; }

/* White text */
.text-white { color: #ffffff !important; }

/* ══════════════════════════════════════════
   GRADIENT BUTTON OVERRIDES
   (Tailwind's bg-gradient-to-r classes
   are always purged - use these instead)
═══════════════════════════════════════════ */
.from-blue-600.to-indigo-600,
.bg-gradient-to-r.from-blue-600.to-indigo-600 {
    background: linear-gradient(135deg, #2563eb, #4f46e5) !important;
    color: #fff !important;
}
.from-emerald-600.to-teal-600,
.bg-gradient-to-r.from-emerald-600.to-teal-600 {
    background: linear-gradient(135deg, #059669, #0d9488) !important;
    color: #fff !important;
}

/* ══════════════════════════════════════════
   BEAUTIFUL CUSTOM SCROLLBAR
═══════════════════════════════════════════ */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: #cbd5e1; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover  { background: #94a3b8; }

/* ══════════════════════════════════════════
   GOOGLE MAPS INFOWINDOW
═══════════════════════════════════════════ */
.gm-style-iw,
.gm-style-iw-c {
    max-width: none !important;
    width: auto !important;
    padding: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1) !important;
}
.gm-style-iw-d {
    max-width: none !important;
    width: auto !important;
    overflow: visible !important;
}
.gm-ui-hover-close {
    background-color: white !important;
    border-radius: 9999px !important;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1) !important;
    top: 10px !important; right: 10px !important;
    width: 24px !important; height: 24px !important;
}

/* ══════════════════════════════════════════
   FLOATING CONTROL BUTTONS
═══════════════════════════════════════════ */
.control-btn {
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
    border: 1px solid rgba(255,255,255,.8);
    backdrop-filter: blur(8px);
}
.control-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
    background-color: #eff6ff !important;
    color: #2563eb !important;
}
.control-btn:active { transform: translateY(-1px) scale(0.98); }

/* ══════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════ */
.modal-overlay { animation: fadeIn 0.25s cubic-bezier(0.16,1,0.3,1) forwards; }

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes slideUp {
    from { transform: translateY(24px) scale(0.96); opacity: 0; }
    to   { transform: translateY(0) scale(1);       opacity: 1; }
}
@keyframes slideInRight {
    from { transform: translateX(120%) scale(0.9); opacity: 0; }
    to   { transform: translateX(0) scale(1);      opacity: 1; }
}

/* ══════════════════════════════════════════
   INPUTS
═══════════════════════════════════════════ */
.input-field { transition: all 0.25s ease; }
.input-field:focus {
    box-shadow: 0 0 0 4px rgba(37,99,235,.12);
    border-color: #2563eb !important;
    outline: none;
}

/* ══════════════════════════════════════════
   CATEGORY BADGES
═══════════════════════════════════════════ */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0.35rem 0.85rem; border-radius: 9999px;
    font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.025em; text-transform: uppercase;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.badge-rent         { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.badge-sale         { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.badge-lease        { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.badge-not-for-sale { background: #fff1f2; color: #9f1239; border: 1px solid #fecdd3; }

/* ══════════════════════════════════════════
   MAP BLUR (when modal open)
═══════════════════════════════════════════ */
.map-blur {
    filter: blur(8px) brightness(0.85);
    pointer-events: none;
    transition: filter 0.4s ease;
}

/* ══════════════════════════════════════════
   SIDEBAR NAVIGATION
═══════════════════════════════════════════ */
.active-menu {
    background: linear-gradient(135deg, #eff6ff, rgba(37,99,235,.08)) !important;
    color: #2563eb !important;
    font-weight: 700;
    box-shadow: inset 4px 0 0 0 #2563eb;
}
.active-menu i { color: #2563eb !important; }

.glass-sidebar {
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(20px);
    border-right: 1px solid rgba(228,231,235,.5);
}

/* ══════════════════════════════════════════
   HOVER LIFT CARD EFFECT
═══════════════════════════════════════════ */
.hover-lift { transition: all 0.25s cubic-bezier(0.4,0,0.2,1); }
.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgba(0,0,0,.08);
}

/* ══════════════════════════════════════════
   ANALYTICS COLOR NUMBERS (prevent purge)
═══════════════════════════════════════════ */
#a_added       { color: #2563eb; }
#a_sale        { color: #059669; }
#a_rent        { color: #4f46e5; }
#a_lease       { color: #d97706; }
#a_not_for_sale{ color: #e11d48; }
#s_sale        { color: #059669; }
#s_rent        { color: #4f46e5; }
#s_lease       { color: #d97706; }

/* Analytics icon bg circles */
#a_added + div, .analytics-icon-blue   { background: #eff6ff; }
.analytics-icon-green  { background: #ecfdf5; }
.analytics-icon-indigo { background: #eef2ff; }
.analytics-icon-amber  { background: #fffbeb; }
.analytics-icon-rose   { background: #fff1f2; }