/* theme.css — SINGLE SOURCE OF TRUTH for the site's color palette and
   dark-mode behavior. Loaded FIRST (before site-nav.css and any page CSS)
   on every authenticated page, so all pages share one palette and respond
   to prefers-color-scheme together.

   Do NOT redefine these core tokens in page-specific stylesheets — add
   page-specific tokens here if they need to be theme-aware, or use the
   existing tokens below. Aliases (--card-bg, --surface, --primary, …) point
   at canonical tokens via var(), so they automatically follow dark-mode
   overrides without being re-declared in the dark block. */

:root {
    /* ── Surfaces ───────────────────────────────────────────── */
    --bg:          #FFFFFF;
    --bg-card:     #F4F4F6;
    --card-bg:     var(--bg-card);   /* alias: signups.css, reports.css */
    --surface:     var(--bg-card);   /* alias: lookup.css */
    --header-bg:   var(--bg-card);
    --nav-bg:      var(--bg-card);
    --branch-bg:   #F8F8F8;
    --input-bg:    #FFFFFF;
    --row-hover:   #F5F5F5;

    /* ── Text ───────────────────────────────────────────────── */
    --text:        #000000;
    --text-muted:  #424242;
    --text-subtle: #888888;

    /* ── Borders ────────────────────────────────────────────── */
    --border:        #D2D2D7;
    --border-strong: #888888;
    --border-light:  #E0E0E0;

    /* ── Accent / links ─────────────────────────────────────── */
    --accent:        #0066D8;
    --accent-hover:  #0052A3;
    --primary:       var(--accent);   /* alias: lookup.css */
    --primary-light: #EFF6FF;         /* suggestion hover tint */
    --link:          #0066CC;
    --landline-bold: #000000;

    /* ── Status ─────────────────────────────────────────────── */
    --danger:  #CC4444;
    --success: #2A8A3E;
    --info:    #0077CC;

    /* ── Sign-up status surfaces ────────────────────────────── */
    --claim-bg:     #EDFAEE;
    --claim-border: #2A8A3E;
    --full-bg:      #F5F5F5;

    /* ── Effects ────────────────────────────────────────────── */
    --shadow: rgba(0, 0, 0, 0.08);
}

/* Default font + box-sizing so every page inherits these without
   re-declaring the stack. Pages that need a different family
   (view.html for the PDF-replica Times) override on body specifically. */
* { box-sizing: border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    margin: 0;
}

/* Canonical content padding for every authenticated page. Pages can override
   max-width or bottom padding when their content demands it, but the
   top/left/right are stable so the nav-to-content gap is identical and the
   left edge of content doesn't shift between tabs. */
.page-body {
    padding: 24px 32px 48px;
}

/* ── Impersonation preview banner (injected by api.js on every page) ──
   Amber #B45309 with white text clears WCAG AA (~4.6:1) in both themes. */
.preview-banner {
    background: #B45309;
    color: #FFFFFF;
    text-align: center;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}
.preview-banner button {
    background: #FFFFFF;
    color: #7C3A06;
    border: none;
    padding: 3px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

/* Password field wrapper — used on login.html and edit.html's Change Password
   modal. The input fills the wrapper; the toggle button sits at the right edge. */
.pw-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.pw-wrap input {
    flex: 1;
    padding-right: 36px; /* room for toggle button */
}
.pw-toggle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 34px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-subtle);
    border-radius: 0 4px 4px 0;
}
.pw-toggle:hover { color: var(--text-muted); background: transparent; }
.pw-toggle svg { width: 16px; height: 16px; flex-shrink: 0; }

@media (prefers-color-scheme: dark) {
    :root {
        --bg:          #000000;
        --bg-card:     #1A1A1A;
        --branch-bg:   #232323;
        --input-bg:    #1F1F1F;
        --row-hover:   #2A2A2A;

        --text:        #FFFFFF;
        --text-muted:  #D2D2D7;
        --text-subtle: #888888;

        --border:        #424242;
        --border-strong: #888888;
        --border-light:  #303030;

        --accent:        #4A9EFF;
        --accent-hover:  #6BB0FF;
        --primary-light: #15233A;
        --link:          #6BB0FF;
        --landline-bold: #FFFFFF;

        --danger:  #FF6B6B;
        --success: #6FDB85;
        --info:    #4AA8E0;

        --claim-bg:     #0D2E10;
        --claim-border: #6FDB85;
        --full-bg:      #1A1A1A;

        --shadow: rgba(0, 0, 0, 0.4);
    }
}