/* ============================================================
   HOA Modern UI Theme (Bootstrap-friendly)
   - Warm, community-focused design
   - Light/Dark mode support
   ============================================================ */

/* ---------- Base ---------- */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
    color-scheme: light dark;
}

@media (min-width: 768px) {
    html { font-size: 16px; }
}

body {
    margin-bottom: 60px;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------- Light Mode Variables ---------- */
:root {
    --brand:        #2f855a;
    --brand-600:    #276749;
    --brand-700:    #1f4d38;
    --brand-light:  #48bb78; /* readable brand for dark surfaces */
    --accent:       #4c9a2a;
    --accent-soft:  #e6f4ea;
    --info:         #2563eb;
    --info-soft:    #eff6ff;
    --warning:      #f59e0b;
    --warning-soft: #fffbeb;
    --danger:       #dc2626;
    --danger-soft:  #fef2f2;
    --heading:      #1f4d38; /* dark green on light bg */
    --text:         #1f2937;
    --muted:        #6b7280;
    --bg:           #f9fafb;
    --surface:      #ffffff;
    --surface-alt:  #f1f5f9;
    --border:       #e5e7eb;
    --ring:         rgba(47,133,90,.35);
    /* Radii */
    --radius-sm: .375rem;
    --radius:    .75rem;
    --radius-lg: 1rem;
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
    --shadow:    0 8px 20px rgba(0,0,0,.08);
    --shadow-lg: 0 16px 32px rgba(0,0,0,.12);
    /* Typography scale */
    --h1: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
    --h2: clamp(1.5rem,  1rem + 1.5vw, 2rem);
    --h3: clamp(1.25rem, .9rem + 1vw,  1.5rem);
    /* Motion */
    --speed-fast: 120ms;
    --speed:      180ms;
    --easing:     cubic-bezier(.2,.7,.2,1);
    /* Hero */
    --hero-bg:    linear-gradient(135deg,rgba(47,133,90,.12) 0%,rgba(76,154,42,.08) 50%,transparent 100%),
                  linear-gradient(to bottom,#ffffff,#f1f5f9);
    /* Callout backgrounds */
    --callout-bg:      #e6f4ea;
    --callout-info-bg: #eff6ff;
    --callout-warn-bg: #fffbeb;
    --callout-danger-bg: #fef2f2;
}

/* ---------- Dark Mode Variables ---------- */
@media (prefers-color-scheme: dark) {
    :root {
        --brand-light:  #68d391;
        --heading:      #68d391; /* bright green — readable on dark bg */
        --text:         #e5e7eb;
        --muted:        #9ca3af;
        --bg:           #0b1220;
        --surface:      #121a2b;
        --surface-alt:  #0f172a;
        --border:       #1e293b;
        --ring:         rgba(72,187,120,.4);
        --shadow-sm:    0 1px 2px rgba(0,0,0,.4);
        --shadow:       0 10px 24px rgba(0,0,0,.45);
        --shadow-lg:    0 18px 40px rgba(0,0,0,.6);
        --accent-soft:  rgba(72,187,120,.12);
        --hero-bg:      linear-gradient(135deg,rgba(47,133,90,.22) 0%,rgba(76,154,42,.14) 60%,transparent 100%),
                        linear-gradient(to bottom,#0f172a,#0b1220);
        --callout-bg:      rgba(72,187,120,.1);
        --callout-info-bg: rgba(37,99,235,.12);
        --callout-warn-bg: rgba(245,158,11,.1);
        --callout-danger-bg: rgba(220,38,38,.1);
    }
}

/* ---------- Typography ---------- */
h1, .h1 {
    font-size: var(--h1);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--heading);
}

h2, .h2 {
    font-size: var(--h2);
    font-weight: 700;
    color: var(--heading);
}

h3, .h3 {
    font-size: var(--h3);
    font-weight: 600;
}

p, .lead { color: var(--text); }

.text-muted { color: var(--muted) !important; }

/* ---------- Links ---------- */
a {
    color: var(--brand-light);
    text-underline-offset: 3px;
    transition: color var(--speed) var(--easing);
}

@media (prefers-color-scheme: light) {
    a { color: var(--brand); }
    a:hover { color: var(--brand-600); }
}

a:hover { color: var(--brand); }

/* ---------- Layout ---------- */
.container, .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* ---------- Navbar ---------- */
.navbar {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.navbar-brand {
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--heading) !important;
}

.navbar .nav-link {
    color: var(--text) !important;
    opacity: .85;
    font-size: .9rem;
    transition: opacity var(--speed), color var(--speed);
}

.navbar .nav-link:hover {
    opacity: 1;
    color: var(--brand-light) !important;
}

.navbar .nav-link.active {
    opacity: 1;
    color: var(--brand-light) !important;
    font-weight: 600;
}

/* ---------- Hero ---------- */
.hero {
    background: var(--hero-bg);
    border: 1px solid var(--border);
    padding: 3rem 2rem;
}

.hero h1 { color: var(--heading); }

.hero .lead { color: var(--muted); }

/* ---------- Cards ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform var(--speed), box-shadow var(--speed);
}

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

.card-header,
.card-footer {
    background: var(--surface-alt);
    border-color: var(--border);
}

.card-title {
    font-weight: 700;
    color: var(--heading);
}

.card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--brand-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .75rem;
}

/* ---------- Callouts ---------- */
.callout {
    border-left: 4px solid var(--brand);
    background: var(--callout-bg);
    color: var(--text);
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.callout strong { color: var(--heading); }

.callout.info {
    border-color: var(--info);
    background: var(--callout-info-bg);
}

.callout.warning {
    border-color: var(--warning);
    background: var(--callout-warn-bg);
}

.callout.danger {
    border-color: var(--danger);
    background: var(--callout-danger-bg);
}

/* ---------- Buttons ---------- */
.btn {
    border-radius: var(--radius-sm);
    transition: transform var(--speed-fast), box-shadow var(--speed-fast);
}

.btn:hover { transform: translateY(-1px); }

.btn-primary {
    background: linear-gradient(to bottom, var(--brand), var(--brand-600));
    border-color: var(--brand-600);
    color: #fff;
}

.btn-primary:hover {
    background: linear-gradient(to bottom, var(--brand-600), var(--brand-700));
    border-color: var(--brand-700);
    color: #fff;
}

.btn-success {
    background: linear-gradient(to bottom, var(--accent), #3f7f23);
    border: none;
}

/* ---------- Forms ---------- */
.form-control,
.form-select {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
}

.form-control:focus,
.form-select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem var(--ring);
    background: var(--surface);
    color: var(--text);
}

/* ---------- Tables ---------- */
.table {
    border-radius: var(--radius);
    overflow: hidden;
    color: var(--text);
}

.table thead th {
    background: var(--surface-alt);
    color: var(--muted);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-color: var(--border);
}

.table tbody td { border-color: var(--border); }

.table-hover tbody tr:hover {
    background: rgba(72,187,120,.07);
}

/* ---------- Footer ---------- */
footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    min-height: 60px;
    background: var(--surface-alt);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    box-shadow: var(--shadow-sm);
    font-size: .85rem;
    color: var(--muted);
}

/* ---------- Animations ---------- */
@keyframes floatIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.animate-in { animation: floatIn 240ms ease-out both; }

.cursor-pointer { cursor: pointer; }

#weatherWidget { white-space: nowrap; }