/* ClimaVoice — Custom Styles
   NOTE: @apply tidak bisa dipakai di CDN Tailwind, semua pakai plain CSS */

/* ─── Nav ─────────────────────────────────────────────────────── */
.nav-link {
    display: inline-flex; align-items: center;
    padding: .5rem 1rem; font-size: .875rem; font-weight: 500;
    color: #4b5563; border-radius: .75rem; text-decoration: none;
    transition: color .15s, background-color .15s;
}
.nav-link:hover { color: #16a34a; background: #f0fdf4; }

.mobile-nav-link {
    display: block; padding: .625rem 1rem;
    font-size: .875rem; font-weight: 500; color: #374151;
    border-radius: .75rem; text-decoration: none;
    transition: color .15s, background-color .15s;
}
.mobile-nav-link:hover { background: #f0fdf4; color: #16a34a; }

.footer-link { color: #6b7280; text-decoration: none; transition: color .15s; }
.footer-link:hover { color: #4ade80; }

/* ─── Buttons ──────────────────────────────────────────────────── */
.btn-primary {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .625rem 1.25rem; background: #16a34a; color: #fff;
    font-weight: 600; border-radius: .75rem; border: none; cursor: pointer;
    text-decoration: none; font-size: .875rem; font-family: inherit;
    transition: background .15s, transform .1s, box-shadow .15s;
}
.btn-primary:hover  { background: #15803d; box-shadow: 0 4px 12px rgba(22,163,74,.25); }
.btn-primary:active { transform: scale(.97); }

.btn-outline {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .625rem 1.25rem; border: 2px solid #16a34a; color: #16a34a;
    font-weight: 600; border-radius: .75rem; cursor: pointer;
    text-decoration: none; background: transparent; font-size: .875rem;
    font-family: inherit; transition: all .15s;
}
.btn-outline:hover { background: #16a34a; color: #fff; }

.btn-ghost {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .625rem 1.25rem; color: #4b5563; font-weight: 500;
    border-radius: .75rem; background: transparent; border: none;
    cursor: pointer; text-decoration: none; font-size: .875rem;
    font-family: inherit; transition: background .15s;
}
.btn-ghost:hover { background: #f3f4f6; }

/* ─── Cards ────────────────────────────────────────────────────── */
.card {
    background: #fff; border-radius: 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    border: 1px solid #f1f5f9; overflow: hidden;
}

.report-card {
    background: #fff; border-radius: 1rem; display: block;
    box-shadow: 0 1px 4px rgba(0,0,0,.07); border: 1px solid #f1f5f9;
    overflow: hidden; cursor: pointer; text-decoration: none;
    transition: box-shadow .2s, transform .2s;
}
.report-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.12); transform: translateY(-2px); }
.report-card:hover .report-title { color: #16a34a; }

.stat-card {
    background: #fff; border-radius: 1rem; padding: 1.25rem 1.5rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.07); border: 1px solid #f1f5f9;
    display: flex; align-items: center; gap: 1rem;
}

/* ─── Forms ────────────────────────────────────────────────────── */
.form-input {
    width: 100%; padding: .75rem 1rem; border-radius: .75rem;
    border: 1.5px solid #e2e8f0; font-size: .875rem;
    color: #0f172a; background: #fff; font-family: inherit;
    transition: border .15s, box-shadow .15s; outline: none;
    box-sizing: border-box;
}
.form-input:focus {
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(22,163,74,.12);
}
.form-input::placeholder { color: #9ca3af; }
select.form-input { appearance: auto; }

.form-label {
    display: block; font-size: .875rem; font-weight: 600;
    color: #374151; margin-bottom: .375rem;
}
.form-group { margin-bottom: 1.25rem; }

/* ─── Badges ───────────────────────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center;
    padding: .2rem .625rem; border-radius: .5rem;
    font-size: .7rem; font-weight: 700; white-space: nowrap;
}

/* ─── Chat ─────────────────────────────────────────────────────── */
.chat-bubble-user {
    background: #16a34a; color: #fff;
    border-radius: 1rem 1rem .25rem 1rem;
    padding: .75rem 1rem; font-size: .875rem;
    line-height: 1.65; max-width: 82%; margin-left: auto;
}
.chat-bubble-ai {
    background: #fff; color: #1e293b;
    border-radius: 1rem 1rem 1rem .25rem;
    padding: .75rem 1rem; font-size: .875rem;
    line-height: 1.65; max-width: 82%;
    box-shadow: 0 1px 4px rgba(0,0,0,.08); border: 1px solid #f1f5f9;
}

/* ─── Section headings ─────────────────────────────────────────── */
.section-title { font-size: 1.75rem; font-weight: 800; color: #0f172a; line-height: 1.2; }
@media (min-width: 640px) { .section-title { font-size: 2rem; } }
.section-subtitle { color: #64748b; margin-top: .5rem; font-size: 1rem; }

/* ─── AI box ───────────────────────────────────────────────────── */
.ai-box {
    background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
    border: 1px solid #bbf7d0; border-radius: 1rem; padding: 1.25rem;
}

/* ─── AI prose ─────────────────────────────────────────────────── */
.ai-prose p     { margin-bottom: .75rem; line-height: 1.75; }
.ai-prose ul    { margin: .5rem 0 .75rem 1.25rem; list-style: disc; }
.ai-prose ol    { margin: .5rem 0 .75rem 1.25rem; list-style: decimal; }
.ai-prose li    { margin-bottom: .25rem; line-height: 1.6; }
.ai-prose strong { font-weight: 700; color: #15803d; }
.ai-prose h3    { font-weight: 700; font-size: 1rem; color: #15803d; margin: .75rem 0 .35rem; }

/* ─── Severity dots ────────────────────────────────────────────── */
.severity-dot { width: .5rem; height: .5rem; border-radius: 50%; display: inline-block; }
.severity-dot.low      { background: #22c55e; }
.severity-dot.medium   { background: #eab308; }
.severity-dot.high     { background: #f97316; }
.severity-dot.critical { background: #ef4444; animation: pulse-dot 1.5s infinite; }

/* ─── Spinner ──────────────────────────────────────────────────── */
.spinner {
    display: inline-block; width: 1.1rem; height: 1.1rem;
    border: 2px solid currentColor; border-top-color: transparent;
    border-radius: 50%; animation: spin .7s linear infinite;
}

/* ─── Hero ─────────────────────────────────────────────────────── */
.hero-gradient {
    background: linear-gradient(140deg, #052e16 0%, #14532d 45%, #166534 100%);
}
.glass-card {
    background: rgba(255,255,255,.12); backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.2); border-radius: 9999px;
}

/* ─── Map ──────────────────────────────────────────────────────── */
.map-container { width: 100%; border-radius: 1rem; overflow: hidden; border: 1px solid #e2e8f0; }
.leaflet-container { font-family: 'Inter', sans-serif !important; }

/* ─── Line clamp ───────────────────────────────────────────────── */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ─── Scrollbar ────────────────────────────────────────────────── */
::-webkit-scrollbar        { width: 5px; height: 5px; }
::-webkit-scrollbar-track  { background: #f1f5f9; }
::-webkit-scrollbar-thumb  { background: #cbd5e1; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

html { scroll-behavior: smooth; }

/* ─── Animations ───────────────────────────────────────────────── */
@keyframes fadeIn   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes bounce-dot {
    0%, 80%, 100% { transform: scale(0); opacity: .5; }
    40% { transform: scale(1); opacity: 1; }
}

main { animation: fadeIn .3s ease-out; }

/* Bounce dots for typing indicator */
.typing-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; animation: bounce-dot 1.2s infinite ease-in-out; }
.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }
.typing-dot:nth-child(3) { animation-delay: 0s; }