/**
 * =====================================================================
 * BASE STYLING  assets/css/base.css
 * =====================================================================
 * Foundational styles for the entire application. This is the ONLY
 * stylesheet that defines resets, color tokens, typography scale, and
 * responsive breakpoints. All other stylesheets (components.css,
 * layout.css) build on top of these definitions, never override them.
 *
 * DESIGN RATIONALE:
 * - Color scheme uses a small palette: dark blue for authority/headers,
 *   light gray for content backgrounds (easy on the eyes, not pure white),
 *   green for affirmative actions (create/save), red for destructive ones
 *   (archive/delete). This consistency helps users form mental models
 *   about what an action will do just by looking at its color.
 * - Typography uses system fonts (no external font loads) so the site
 *   loads quickly without network dependencies. Font sizes scale from
 *   a 14px body baseline: headers are 2x/1.7x larger, inputs are the
 *   same size as body text but with more padding for easier tapping
 *   on mobile.
 * - Flexbox layout is the foundation because it's responsive-by-default:
 *   a flex row becomes a flex column on small screens with one media
 *   query, no need for complex resets per breakpoint.
 * - All spacing uses multiples of 8px (8, 16, 24, 32, etc.) so layouts
 *   feel intentional and aligned, not arbitrary.
 * =====================================================================
 */

/**
 * CSS Custom Properties (variables)  update one token here and it
 * cascades everywhere it's used. Makes redesigns and dark-mode support
 * possible without touching component files.
 */
:root {
    /* Colors */
    --color-primary: #1e3a8a;        /* dark blue: headers, primary nav */
    --color-primary-light: #3b82f6;  /* lighter blue: hover states */
    --color-secondary: #f3f4f6;      /* light gray: page backgrounds */
    --color-success: #10b981;        /* green: create/save/positive actions */
    --color-danger: #ef4444;         /* red: archive/delete/destructive */
    --color-warning: #f59e0b;        /* amber: alerts, cautions */
    --color-border: #e5e7eb;         /* light gray: borders, dividers */
    --color-text: #1f2937;           /* dark gray: body text */
    --color-text-light: #6b7280;     /* medium gray: secondary text */
    --color-white: #ffffff;          /* literal white: ink on the blue chrome  NOT a surface */

    /*
     * SEMANTIC SURFACE / ACCENT TOKENS (added for dark mode)
     * Components must reference these, never a raw hex or --color-white,
     * for anything that needs to flip between light and dark. The dark
     * palette below only has to re-point these  component files don't
     * change. See the [data-theme="dark"] block further down.
     *
     *   --color-surface      panels that sit ON the page: cards, tables,
     *                        the sidebar, dropdowns, form fields, modals
     *   --color-surface-2    quiet fill: striped rows, hovers, inset areas
     *   --color-surface-3    row hover / stronger tint
     *   --color-surface-selected   a ticked list row
     *   --color-nav-active-bg      the active sidebar link's pill
     *   --color-accent       "primary blue" used as TEXT/icon/link accent
     *                        (kept dark on light, brightened on dark so it
     *                        stays legible on a dark surface)
     *   --color-accent-strong     accent used for headings
     *   --color-backlink-hover-bg the .back-link hover wash
     *   --color-overlay      modal / scrim backdrop
     */
    --color-surface: #ffffff;
    /* Alias kept for a few older inline <style> blocks that already
       reference var(--color-bg) (document-request view "progress"
       steps, verify-url)  it was never defined, so those fills were
       silently transparent. Pointing it at the page background makes
       them render as intended in both themes. */
    --color-bg: var(--color-secondary);
    --color-surface-2: #f8f9fb;
    --color-surface-3: #eef2fb;
    --color-surface-selected: #dbe7fb;
    --color-nav-active-bg: #e8f0fe;
    --color-accent: var(--color-primary);
    --color-accent-strong: var(--color-primary);
    --color-backlink-hover-bg: #f5f8ff;
    --color-overlay: rgba(17, 24, 39, 0.5);

    /* Alert fills  light by default, softened dark equivalents below. */
    --alert-success-bg: #d1fae5;  --alert-success-text: #047857;
    --alert-error-bg:   #fee2e2;  --alert-error-text:   #991b1b;
    --alert-warning-bg: #fef3c7;  --alert-warning-text: #92400e;
    --alert-info-bg:    #dbeafe;  --alert-info-text:    #1e40af;

    /* Which native widgets (scrollbars, form controls) to render dark. */
    color-scheme: light;

    /* Typography  named by size, not role */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --font-size-base: 14px;
    --font-size-small: 12px;
    --font-size-large: 18px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;

    --line-height-base: 1.5;
    --line-height-heading: 1.2;
    --font-weight-normal: 400;
    --font-weight-bold: 600;

    /* Spacing  multiples of 8px for rhythm */
    --spacing-2: 2px;
    --spacing-4: 4px;
    --spacing-8: 8px;
    /* Was already referenced by several components (chatbot bubbles,
       chatbot input, nav-link pills, admin survey-review tables) as
       var(--spacing-12) without ever being defined here  an undefined
       custom property makes the WHOLE declaration invalid, so every one
       of those `padding: var(--spacing-8) var(--spacing-12)` rules was
       silently computing as `padding: 0`. Defining it (the one break
       from the 8px rhythm) fixes all of them at once. */
    --spacing-12: 12px;
    --spacing-16: 16px;
    --spacing-24: 24px;
    --spacing-32: 32px;
    --spacing-48: 48px;

    /* Shadows & borders */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --border-radius-sm: 4px;
    --border-radius-md: 6px;
    --border-radius-lg: 8px;

    /* Breakpoints for responsive design */
    --breakpoint-mobile: 480px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
}

/**
 * =====================================================================
 * DARK MODE
 * =====================================================================
 * Two triggers, same palette:
 *   1. :root[data-theme="dark"]   the user picked Dark explicitly
 *      (assets/js/ui.js writes data-theme onto <html>, persisted in
 *      localStorage). This also wins when the OS is light.
 *   2. @media (prefers-color-scheme: dark), when the user has NOT made
 *      an explicit choice (no data-theme, or data-theme="light" is
 *      absent)  so a dark-OS visitor gets dark on first paint, before
 *      the script runs (no flash).
 *
 * The brand blue (--color-primary) is deliberately kept for the top
 * chrome  navbar, table headers, hero, chatbot  so the app still
 * looks like itself. Only the surfaces behind content and the accent
 * used as text/link colour change.
 *
 * The declarations are duplicated across the two selectors on purpose:
 * a plain rule and an @media rule can't share one selector list, and a
 * ~25-line palette is cheaper to repeat than to indirect.
 * =====================================================================
 */
:root[data-theme="dark"] {
    color-scheme: dark;

    --color-primary-light: #60a5fa;
    --color-secondary: #0f172a;   /* page background */
    --color-border: #2b3a52;
    --color-text: #e5e7eb;
    --color-text-light: #94a3b8;

    --color-surface: #1e293b;
    --color-surface-2: #24324a;
    --color-surface-3: #2c3a54;
    --color-surface-selected: #33507a;
    --color-nav-active-bg: #1d2b45;
    --color-accent: #93b4ff;
    --color-accent-strong: #cbd9ff;
    --color-backlink-hover-bg: #22304a;
    --color-overlay: rgba(2, 6, 23, 0.65);

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.55);

    --alert-success-bg: #0c3b2e;  --alert-success-text: #6ee7b7;
    --alert-error-bg:   #3f1d1d;  --alert-error-text:   #fca5a5;
    --alert-warning-bg: #3d2f10;  --alert-warning-text: #fcd34d;
    --alert-info-bg:    #16294d;  --alert-info-text:    #93c5fd;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        color-scheme: dark;

        --color-primary-light: #60a5fa;
        --color-secondary: #0f172a;
        --color-border: #2b3a52;
        --color-text: #e5e7eb;
        --color-text-light: #94a3b8;

        --color-surface: #1e293b;
        --color-surface-2: #24324a;
        --color-surface-3: #2c3a54;
        --color-surface-selected: #33507a;
        --color-nav-active-bg: #1d2b45;
        --color-accent: #93b4ff;
        --color-accent-strong: #cbd9ff;
        --color-backlink-hover-bg: #22304a;
        --color-overlay: rgba(2, 6, 23, 0.65);

        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.55);

        --alert-success-bg: #0c3b2e;  --alert-success-text: #6ee7b7;
        --alert-error-bg:   #3f1d1d;  --alert-error-text:   #fca5a5;
        --alert-warning-bg: #3d2f10;  --alert-warning-text: #fcd34d;
        --alert-info-bg:    #16294d;  --alert-info-text:    #93c5fd;
    }
}

/**
 * PRINT  always on white paper.
 * The reports (2.7) are printed from the browser; a dark-themed page
 * would waste ink and print light text on white. Force the light
 * palette for print regardless of the active theme. !important on the
 * custom properties so this beats both the [data-theme="dark"] and the
 * @media (prefers-color-scheme: dark) blocks above whatever their
 * selector specificity. Individual report pages keep their own
 * <style media="print"> tweaks (hiding the nav, borders, @page).
 */
@media print {
    :root {
        color-scheme: light !important;
        --color-secondary: #ffffff !important;
        --color-surface: #ffffff !important;
        --color-surface-2: #ffffff !important;
        --color-surface-3: #ffffff !important;
        --color-surface-selected: #ffffff !important;
        --color-bg: #ffffff !important;
        --color-text: #000000 !important;
        --color-text-light: #333333 !important;
        --color-border: #999999 !important;
        --color-accent: #1e3a8a !important;
        --color-accent-strong: #1e3a8a !important;
    }
}

/**
 * CSS RESET
 * Start from a known, minimal baseline: remove default browser
 * margins/padding so our own spacing rules work predictably.
 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background-color: var(--color-secondary);
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Don't animate the light/dark swap for users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
    body {
        transition: none;
    }

    /* Disable mobile nav and other smooth transitions */
    .resident-nav-menu {
        transition: none;
    }

    /* Disable hover/focus animations for users preferring reduced motion */
    .btn,
    .feature-card,
    .announcement-card,
    .chatbot-toggle {
        transition: none;
        transform: none !important;
    }

    .btn:hover,
    .btn:active,
    .feature-card:hover,
    .feature-card:focus-within,
    .announcement-card:hover,
    .announcement-card:focus-visible,
    .chatbot-toggle:hover {
        transform: none !important;
    }
}

/* Headings */
h1 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    margin-bottom: var(--spacing-16);
}

h2 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    margin-bottom: var(--spacing-16);
}

h3 {
    font-size: var(--font-size-large);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-8);
}

/* Paragraphs & text blocks */
p {
    margin-bottom: var(--spacing-16);
}

a {
    color: var(--color-primary-light);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Lists */
ul, ol {
    margin-left: var(--spacing-24);
    margin-bottom: var(--spacing-16);
}

li {
    margin-bottom: var(--spacing-8);
}

/**
 * REVEAL-ON-SCROLL  Fade and slide in when visible
 * Generic utility for progressive disclosure: any section with this class
 * fades in + slides up once it scrolls into view. Driven by
 * initScrollFadeIn() in assets/js/ui.js, which uses an IntersectionObserver
 * to add .is-visible once per element. Works with CSS-only fallback if
 * IntersectionObserver isn't available.
 */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/**
 * MOBILE-FIRST RESPONSIVE APPROACH
 * Default styles (below) are optimized for small screens (phones).
 * Larger screens get enhanced styles via @media queries at the bottom.
 * This ensures the site is usable on the smallest device first, then
 * gets better on larger screens  never the reverse (no mobile-unfriendly
 * by default, then "squished" into mobile size).
 */