/* NaijaHomes Premium Design System */
:root {
    --primary: #008751; /* Nigerian Emerald Green */
    --primary-dark: #005a36;
    --accent: #D4AF37; /* Metallic Gold */
    --accent-hover: #bfa02e;
    --dark: #121824; /* Deep Slate Navy */
    --light: #f8fafc;
    --white: #ffffff;
    --gray-100: #f1f5f9;
    --gray-300: #cbd5e1;
    --gray-600: #475569;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
    --radius: 12px;
}

.text-warning, .bi-star-fill, .bi-star-half {
    color: #D4AF37 !important;
}

body {
    background-color: var(--light);
    font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--dark);
}

/* Premium Navbar */
.navbar {
    background: rgba(18, 24, 36, 0.95) !important;
    backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--accent);
    padding: 15px 0;
}

.navbar-brand {
    font-weight: 800;
    color: var(--white) !important;
    letter-spacing: -0.5px;
}

.navbar-brand span {
    color: var(--accent);
}

/* The real logo, sized so it never pushes the bar taller than the text does. */
.navbar-logo {
    /* Bigger mark, same bar height: the extra size is absorbed by trimming the
       navbar's own vertical padding below, so the header does not grow.
       The logo art carries its own padding, so the wordmark is pulled back
       against it rather than sitting a whole gap away. */
    width: 46px;
    height: 46px;
    object-fit: contain;
    margin-right: -6px;
}

/* Keep the bar exactly the height it was before the logo grew: pin the height
   and let the padding absorb the difference, so a future logo-size change
   cannot move the header either. */
.navbar.navbar-expand-lg {
    min-height: 72px;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

.footer-logo {
    width: 34px;
    height: 34px;
    object-fit: contain;
    /* Same as the navbar: the artwork carries its own padding, so the wordmark
       is pulled back against it instead of sitting a full gap away. */
    margin-right: -5px;
}

/* Notification bell ------------------------------------------------------- */
.notif-badge {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #e63946;
    color: #fff;
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px #1a1a1a;
}

.notif-menu {
    width: 320px;
    max-height: 420px;
    overflow-y: auto;
}

.notif-item {
    white-space: normal;
    border-left: 3px solid transparent;
}

.notif-item.notif-unread {
    border-left-color: var(--accent, #008751);
    background: rgba(255, 255, 255, 0.04);
}

/* The signed-in user's own picture stands in for their name in the header. */
.nav-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-avatar-initials {
    background: var(--accent, #008751);
    color: #fff;
    font-weight: 800;
    font-size: 0.8rem;
}

.navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 500;
    margin: 0 10px;
    transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active {
    color: var(--accent) !important;
}

/* Hero Section */
.hero-section {
    /* The hero image this used to reference was never in the repo, and the
       manifest storage refuses to build while it is missing - which broke
       collectstatic, and so every deploy. The gradient alone is what has
       actually been rendering all along. */
    background: linear-gradient(135deg, rgba(0, 135, 81, 0.95), rgba(18, 24, 36, 0.97));
    padding: 100px 0;
    color: var(--white);
    text-align: center;
    border-bottom: 5px solid var(--accent);
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 20px;
}

.hero-subtitle {
    font-size: 1.25rem;
    opacity: 0.9;
    margin-bottom: 40px;
}

/* Glassmorphism Search Container */
.search-container {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius);
    padding: 25px;
    box-shadow: var(--shadow-lg);
}

/* Luxury Premium Cards */
.property-card {
    background: var(--white);
    border: none;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
}

.property-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.property-card-img-container {
    position: relative;
    height: 240px;
    overflow: hidden;
}

.property-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.property-card:hover .property-card-img {
    transform: scale(1.08);
}

.property-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--primary);
    color: var(--white);
    padding: 6px 12px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.property-price {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(18, 24, 36, 0.85);
    backdrop-filter: blur(5px);
    color: var(--accent);
    padding: 6px 14px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 1.1rem;
}

.trusted-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--accent);
    color: var(--dark);
    padding: 6px 12px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}

/* Floating AI Chatbot overlay */
.ai-chatbot-bubble {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border: 2px solid var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 1.8rem;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ai-chatbot-bubble:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 15px 35px rgba(0, 135, 81, 0.4);
}

.ai-chatbot-modal {
    position: fixed;
    bottom: 105px;
    right: 30px;
    width: 400px;
    height: 550px;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border: 2px solid var(--primary);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 1000;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.chatbot-header {
    background: var(--dark);
    border-bottom: 2.5px solid var(--accent);
    color: var(--white);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chatbot-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: var(--gray-100);
}

.chat-bubble {
    padding: 10px 15px;
    border-radius: 18px;
    margin-bottom: 15px;
    max-width: 80%;
    font-size: 0.9rem;
    line-height: 1.4;
}

.chat-bubble.ai {
    background: var(--white);
    color: var(--dark);
    align-self: flex-start;
    border-bottom-left-radius: 2px;
    box-shadow: var(--shadow-sm);
}

.chat-bubble.user {
    background: var(--primary);
    color: var(--white);
    align-self: flex-end;
    border-bottom-right-radius: 2px;
}

.chatbot-input-area {
    padding: 15px;
    border-top: 1px solid var(--gray-300);
    display: flex;
    background: var(--white);
}

.chatbot-input {
    flex: 1;
    border: 1px solid var(--gray-300);
    border-radius: 30px;
    padding: 8px 18px;
    outline: none;
    font-size: 0.9rem;
}

.chatbot-send-btn {
    background: var(--primary);
    border: none;
    color: var(--white);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    margin-left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.chatbot-send-btn:hover {
    background: var(--primary-dark);
}

/* Custom UI Badges & Buttons */
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
    border-radius: 8px;
    font-weight: 600;
}

.btn-outline-primary:hover {
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-accent {
    background-color: var(--accent);
    color: var(--dark);
    font-weight: 700;
    border: none;
    border-radius: 8px;
}

.btn-accent:hover {
    background-color: var(--accent-hover);
}

/* Dashboard Stats */
.stat-card {
    border-radius: var(--radius);
    padding: 20px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    border-left: 5px solid var(--primary);
}

/* Explicit dropdown-menu and item styling to prevent dark-on-dark or white-on-white text */
.dropdown-menu {
    background-color: var(--white) !important;
    border: 1px solid var(--gray-300) !important;
    box-shadow: var(--shadow-md) !important;
}

.dropdown-item {
    color: var(--dark) !important;
    transition: all 0.2s ease !important;
}

.dropdown-item:hover {
    background-color: var(--gray-100) !important;
    color: var(--primary) !important;
}

.dropdown-menu-dark {
    background-color: var(--dark) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.dropdown-menu-dark .dropdown-item {
    color: rgba(255, 255, 255, 0.85) !important;
}

.dropdown-menu-dark .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--accent) !important;
}

.dropdown-menu-dark .dropdown-item-text {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Fix visibility inside lists and detail components */
.text-muted {
    color: var(--gray-600);
}

.bg-dark, .bg-secondary, .card.bg-dark, .card.bg-secondary {
    color: var(--white) !important;
}

.bg-light {
    color: var(--dark) !important;
}

/* Explicit footer styling overrides to prevent black-on-black text */
footer, footer p, footer span, footer small, footer .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

footer a {
    color: rgba(255, 255, 255, 0.8) !important;
    transition: color 0.2s ease;
}

footer a:hover {
    color: var(--accent) !important;
}

footer h5, footer h6 {
    color: var(--white) !important;
}

/* Fix paragraphs formatting */
.property-description-content p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

.property-description-content {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Explicit Bootstrap nav-tabs styling overrides to prevent white-on-white text */
.nav-tabs .nav-link {
    color: var(--dark) !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
}

.nav-tabs .nav-link.active {
    color: var(--primary) !important;
    background-color: var(--white) !important;
    border-color: var(--gray-300) var(--gray-300) transparent !important;
}

.nav-tabs .nav-link:hover {
    color: var(--primary) !important;
    border-color: var(--gray-300) var(--gray-300) transparent !important;
}


/* Toasts raised by UI.toast() in ui_dialog.js ---------------------------- */
.ui-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 12px);
    z-index: 2000;
    max-width: min(90vw, 380px);
    padding: 0.6rem 1rem;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    background: #0f172a;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.ui-toast.show { opacity: 1; transform: translate(-50%, 0); }
.ui-toast-success { background: #0f5132; }
.ui-toast-danger { background: #842029; }

.modal-sm-plus { max-width: 420px; }