/*
 * ╔══════════════════════════════════════════════════════════════╗
 * ║          HIDDEN VALLEY HOA – COLOR PALETTE                   ║
 * ║  Single source of truth for all custom app colors.           ║
 * ║  To change a color: update the value here and ask Copilot    ║
 * ║  to propagate any inline-style usages to match.              ║
 * ╚══════════════════════════════════════════════════════════════╝
 *
 * ALSO SEE: wwwroot/js/map-interop.js → HOA_COLORS constant block
 *           (JS strings cannot reference CSS variables directly)
 */

:root {

    /* ── Brand Blues (replaces Brand Greens) ─────────────────────
       The primary HOA palette. Deep slate blue is the dominant
       brand color used for sidebars, headers, buttons, and text
       on light surfaces. Light steel is the main accent surface.
    ─────────────────────────────────────────────────────────── */
    --hoa-brand:       #1a2d3d;   /* sidebar bg, primary buttons, headers, bold text */
    --hoa-brand-hover:        #2d5070;   /* hover states, secondary tile icons */
    --hoa-brand-accent:     #2979a8;   /* Community Map tile icon, tertiary accents */
    --hoa-surface:      #e8eef5;   /* TOC/article header bg, card accents, avatar circles */
    --hoa-bg:       #f0f3f8;   /* login/register page background */
    --hoa-bg-subtle:   #f5f7fa;   /* zebra-stripe rows, subtle section backgrounds */
    --hoa-row-alt:    #f2f5f9;   /* alternate table row tint */

    /* ── Borders & Dividers ──────────────────────────────────────
       Steel-tinted borders that complement the blue palette.
    ─────────────────────────────────────────────────────────── */
    --hoa-border:           #c5d3e0;   /* article header bottom border, card dividers */
    --hoa-border-mid:       #b8c9d9;   /* table borders, button outlines */
    --hoa-border-light:     #e2e9f0;   /* hairline dividers on white surfaces */

    /* ── Gold Accent (decorative use only) ──────────────────────
       Used exclusively for the thin gradient stripe on the
       login / register / confirmation card header.
    ─────────────────────────────────────────────────────────── */
    --hoa-decorative:             #c9a84c;   /* login card decorative stripe — unchanged */

    /* ── Secondary / Muted Text & Icons ─────────────────────────
       Blue-gray family for subheadings, form icons, fine print.
       --hoa-muted is the standard secondary text color throughout.
    ─────────────────────────────────────────────────────────── */
    --hoa-muted:            #4a5c6e;   /* subheadings, form icons, login labels */
    --hoa-muted-dark:       #37474f;   /* Officers / Expenditures tile icons, Road badge */
    --hoa-muted-light:      #6b7f8e;   /* fine print, nav section labels, dimmed hints */
    --hoa-text:   #1e2d3d;   /* main content area body text (MainLayout) */

    /* ── CTA Variant (deeper action blue) ───────────────────────
       Optional deeper blue for high-emphasis action buttons
       like "Pay Now" and "Submit" to create stronger visual pop.
    ─────────────────────────────────────────────────────────── */
    --hoa-cta:        #1a4a6e;   /* "Pay Now", "Submit" primary CTA buttons */

    /* ── Status – Success (Paid / Active) ───────────────────────  */
    --hoa-success:          #4CAF50;   /* Paid badges, Active status, invoice paid stamp */
    --hoa-success-bg:       #e8f5e9;   /* paid card background */

    /* Bootstrap semantic overrides — wires BS utility classes to this palette  */
    --bs-success:           #4CAF50;   /* overrides BS green → --hoa-success    */
    --bs-success-rgb:       76, 175, 80;
    --bs-danger:            #D32F2F;   /* overrides BS red   → --hoa-danger     */
    --bs-danger-rgb:        211, 47, 47;

    /* ── Status – Warning (Road Fund / Partial / Credit) ────────  */
    --hoa-warning:          #E65100;   /* Road Fund badge, partial-paid, warning icon */
    --hoa-warning-bg:       #fef9ee;   /* warning table header / card backgrounds */
    --hoa-warning-text:     #856404;   /* credit badge text */
    --hoa-warning-badge-bg: #fff8e1;   /* credit badge (CR) background */
    --hoa-warning-badge-border: #e4c724; /* credit badge border */

    /* ── Status – Danger (Overdue / Error / Complaints) ─────────  */
    --hoa-danger:           #D32F2F;   /* Complaints tile, overdue, error, "You" map pin */
    --hoa-danger-alt:       #c62828;   /* balance-due text color */
    --hoa-danger-bg:        #fdecea;   /* overdue card / alert background */

    /* ── Map Data Colors (isolated to map-interop.js) ───────────
       These encode fund-type data on the Leaflet map. They are
       intentionally distinct from the UI chrome palette.
       Mirror values in the HOA_COLORS block in map-interop.js.
    ─────────────────────────────────────────────────────────── */
    --hoa-map-general:      #1565C0;   /* General Fund house icon (blue) */
    --hoa-map-road:         #E65100;   /* Road Fund house icon (orange) */
    --hoa-map-you:          #D32F2F;   /* Current-user house icon (red) */
    --hoa-map-officer:      #1a2d3d;   /* Officer badge on map pin — matches new dark */
}

/*
 * ── Global body overrides ───────────────────────────────────────────────────
 * Sets DM Sans as the app-wide font, wires background and text color to the
 * palette, and tightens the base font size to 14px to match the design.
 * (display:flex / min-height are omitted — the Blazor sidebar layout handles
 * that via .page in app.css)
 * ─────────────────────────────────────────────────────────────────────────── */
body {
    font-family: 'Roboto', sans-serif;
    background: var(--hoa-bg);
    color: var(--hoa-text);
    font-size: 14px;
}

/*
 * ── Bootstrap utility class overrides ──────────────────────────────────────
 * Bootstrap's bg-success / text-success / btn-success etc. use
 * rgba(var(--bs-success-rgb), ...) which can be declared at the class level
 * in compiled Bootstrap and beat a plain :root override. These rules
 * re-anchor every Bootstrap success/danger utility to the HOA palette by
 * re-declaring the variable at the same specificity level as Bootstrap.
 * ─────────────────────────────────────────────────────────────────────────── */

/* success — bg, text, badges, buttons */
.bg-success,
.text-success,
.btn-success,
.btn-outline-success,
.text-bg-success,
.badge.bg-success,
.alert-success,
.border-success {
    --bs-success-rgb: 76, 175, 80;
}
.btn-success {
    --bs-btn-bg:             #4CAF50;
    --bs-btn-border-color:   #4CAF50;
    --bs-btn-hover-bg:       #43A047;
    --bs-btn-hover-border-color: #43A047;
    --bs-btn-active-bg:      #388E3C;
}
.btn-outline-success {
    --bs-btn-color:          #4CAF50;
    --bs-btn-border-color:   #4CAF50;
    --bs-btn-hover-bg:       #4CAF50;
    --bs-btn-hover-border-color: #4CAF50;
}

/* danger — bg, text, badges, buttons */
.bg-danger,
.text-danger,
.btn-danger,
.btn-outline-danger,
.text-bg-danger,
.badge.bg-danger,
.alert-danger,
.border-danger {
    --bs-danger-rgb: 211, 47, 47;
}
.btn-danger {
    --bs-btn-bg:             #D32F2F;
    --bs-btn-border-color:   #D32F2F;
    --bs-btn-hover-bg:       #C62828;
    --bs-btn-hover-border-color: #C62828;
    --bs-btn-active-bg:      #B71C1C;
}
.btn-outline-danger {
    --bs-btn-color:          #D32F2F;
    --bs-btn-border-color:   #D32F2F;
    --bs-btn-hover-bg:       #D32F2F;
    --bs-btn-hover-border-color: #D32F2F;
}