/* ===================================================================
   La Luntian — Botanical & Cozy theme layer
   Loaded LAST so it harmonises Bootstrap + per-view inline styles.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..600&family=Nunito+Sans:wght@400;500;600;700&display=swap');

/* ---------- Base / page ---------- */
body,
body.user-logged-in {
    background: var(--bg-cream) !important;
    background-image:
        radial-gradient(circle at 12% 8%, rgba(163, 177, 138, 0.16), transparent 42%),
        radial-gradient(circle at 88% 92%, rgba(88, 129, 87, 0.12), transparent 45%) !important;
    background-attachment: fixed !important;
    color: var(--ink);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand, .login-title, .plant-name, .family-title,
.section-title, .hero-title {
    font-family: var(--font-head) !important;
    letter-spacing: -0.01em;
}
/* Dark heading colour ONLY on light (cream) surfaces.
   Never recolour text that sits on the views' green headers/heroes. */
.login-title, .plant-name, .family-title { color: var(--forest-deep); }

a { color: var(--fern); }
a:hover { color: var(--forest); }

::selection { background: var(--sage-soft); color: var(--forest-deep); }

/* ---------- Navbar ---------- */
.navbar {
    background: var(--forest) !important;
    box-shadow: var(--shadow-sm);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    border-bottom: 3px solid rgba(255, 255, 255, 0.08);
}
.navbar .nav-link {
    color: rgba(255, 255, 255, 0.88) !important;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.45rem 1rem !important;
    transition: background 0.2s ease, color 0.2s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.14);
}
.navbar .user-info { color: #fff; gap: 0.5rem; }
.navbar .user-info span { font-weight: 600; }
.navbar .btn-outline-light {
    border-radius: 999px;
    border-color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
    padding: 0.4rem 1.1rem;
}
.navbar .btn-outline-light:hover {
    background: #fff;
    color: var(--forest) !important;
}

/* Mobile collapsed menu surface */
@media (max-width: 767.98px) {
    .navbar-collapse {
        background: var(--forest-deep) !important;
        border-radius: var(--radius);
        padding: 0.75rem !important;
        margin-top: 0.5rem;
        box-shadow: var(--shadow);
    }
}

/* ---------- Buttons ---------- */
.btn {
    border-radius: 999px;
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary,
.btn-success {
    background: var(--forest) !important;
    border-color: var(--forest) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(58, 90, 64, 0.22);
}
.btn-primary:hover,
.btn-success:hover {
    background: var(--forest-deep) !important;
    border-color: var(--forest-deep) !important;
    box-shadow: 0 10px 22px rgba(58, 90, 64, 0.28);
}

.btn-secondary {
    background: var(--sage-soft) !important;
    border-color: var(--sage-soft) !important;
    color: var(--forest-deep) !important;
}
.btn-secondary:hover {
    background: var(--sage) !important;
    border-color: var(--sage) !important;
    color: var(--forest-deep) !important;
}

.btn-outline-primary,
.btn-outline-success {
    color: var(--forest) !important;
    border-color: var(--fern) !important;
}
.btn-outline-primary:hover,
.btn-outline-success:hover {
    background: var(--forest) !important;
    color: #fff !important;
}

.btn-danger {
    background: var(--terracotta) !important;
    border-color: var(--terracotta) !important;
}

/* ---------- Cards & surfaces ---------- */
.card,
.plant-card,
.plant-form-card,
.login-card,
.ai-card,
.feature-card,
.result-card,
.family-section {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow) !important;
}

.plant-card {
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.25s ease;
}
.plant-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg) !important;
}

/* Section headers / family grouping */
.family-section { padding: 1.1rem !important; margin-bottom: 1.5rem; }
.family-header {
    border-bottom: 2px dashed var(--line);
    padding-bottom: 0.6rem;
    margin-bottom: 1rem;
}
.family-title { color: var(--forest-deep) !important; }
.family-count {
    background: var(--sage-soft);
    color: var(--forest-deep);
    border-radius: 999px;
    padding: 0.15rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 700;
}

/* Plant card text + meta */
.plant-name { color: var(--forest-deep) !important; font-weight: 600 !important; }
.detail-item { color: var(--muted) !important; }
.detail-item i { color: var(--sage) !important; }

/* Round action buttons on plant cards */
.action-btn {
    background: var(--surface) !important;
    color: var(--forest) !important;
    border: 1px solid var(--line) !important;
    border-radius: 50% !important;
    box-shadow: var(--shadow-sm);
    transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.action-btn:hover {
    background: var(--forest) !important;
    color: #fff !important;
    transform: translateY(-2px);
}

/* ---------- Forms ---------- */
.form-control,
.form-control-lg,
.form-control-green,
.form-select,
textarea,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="search"] {
    border-radius: var(--radius-sm) !important;
    border: 1.5px solid var(--line) !important;
    background: #fff !important;
    color: var(--ink) !important;
    font-family: var(--font-body);
}
.form-control:focus,
.form-control-lg:focus,
.form-control-green:focus,
.form-select:focus,
textarea:focus {
    border-color: var(--fern) !important;
    box-shadow: 0 0 0 0.2rem rgba(88, 129, 87, 0.18) !important;
}
.form-label,
.form-check-label { color: var(--forest-deep); font-weight: 600; }
.form-text { color: var(--muted) !important; }
.form-check-input:checked {
    background-color: var(--fern) !important;
    border-color: var(--fern) !important;
}

/* ---------- Hero / landing ---------- */
/* Hero text colours are left to the page (white on the green hero). */

/* Feature blocks (landing + login) */
.feature-item,
.feature-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.feature-item i,
.feature-card i { color: var(--fern) !important; }

/* ---------- Login page ---------- */
.login-card {
    backdrop-filter: none !important;
}
.login-title { color: var(--forest-deep) !important; }
.login-subtitle { color: var(--muted) !important; }
.login-divider { color: var(--muted); }

/* ---------- Plant detail stats ---------- */
/* Keep the page's own stat colours (they already have contrast); just polish shape. */
.plant-stat-item { border-radius: var(--radius) !important; }
.stat-value { font-family: var(--font-head) !important; }

/* ---------- AI / care-tips cards ---------- */
/* .ai-icon keeps its original green badge + white icon (good contrast). */
.ai-engine-badge {
    background: var(--sage-soft) !important;
    color: var(--forest-deep) !important;
    border-radius: var(--radius);
    border: 1px dashed var(--sage) !important;
}

/* ---------- Leaf life indicator ---------- */
.plant-life-indicator .fa-leaf { filter: drop-shadow(0 1px 1px rgba(58,90,64,0.15)); }

/* ---------- Footer ---------- */
.footer {
    background: var(--forest-deep) !important;
    color: #f2efe6 !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    margin-top: 3rem;
}
.footer h5 { color: #fff !important; font-family: var(--font-head) !important; }
.footer a { color: var(--sage-soft) !important; text-decoration: none; }
.footer a:hover { color: #fff !important; }

/* ---------- Floating action buttons (install + alerts) ---------- */
#install-button, #watering-alerts-btn {
    font-family: var(--font-body) !important;
    box-shadow: var(--shadow) !important;
}

/* ---------- Badges / pills ---------- */
.badge.bg-success { background: var(--fern) !important; }
.badge.bg-danger  { background: var(--terracotta) !important; }

/* ---------- Leafy chatbot widget (retone from pink to botanical) ---------- */
.chatbot-header,
.chatbot-toggle-btn,
.chatbot-send-btn,
.chatbot-avatar {
    background: linear-gradient(135deg, var(--fern), var(--forest)) !important;
}
.chatbot-toggle-btn:hover,
.chatbot-send-btn:hover {
    background: linear-gradient(135deg, var(--forest), var(--forest-deep)) !important;
}
.chatbot-widget {
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--line) !important;
    box-shadow: var(--shadow-lg) !important;
    overflow: hidden;
}
.chatbot-toggle-btn {
    box-shadow: 0 8px 22px rgba(58, 90, 64, 0.32) !important;
}
.chatbot-badge { background: var(--terracotta) !important; }
.chatbot-info h4, .chatbot-info * { font-family: var(--font-head) !important; }
.message.bot .message-content,
.chatbot-messages .bot-message {
    background: var(--sage-soft) !important;
    color: var(--forest-deep) !important;
}
.message.user .message-content,
.chatbot-messages .user-message {
    background: var(--fern) !important;
    color: #fff !important;
}

/* ---------- Misc polish ---------- */
.modal-content { border-radius: var(--radius-lg) !important; border: 1px solid var(--line); }
hr { border-color: var(--line); }