/* ============================================================
   NEWLIN FOR GEORGIA — CAMPAIGN MANAGER DESIGN SYSTEM TOKENS
   ============================================================
   Forked from IHM Men's Group design system.
   All component styles reference these tokens for consistency.
   ============================================================ */

:root {
    /* ── Brand Colors ─────────────────────────────────────── */
    --color-brand:            #1B4D7A;  /* Campaign Navy — primary */
    --color-brand-dark:       #143a5c;  /* Hover / pressed */
    --color-brand-light:      #e1ecf4;  /* Tinted backgrounds */
    --color-brand-focus:      rgba(27, 77, 122, 0.3);  /* Focus rings */
    --color-brand-subtle:     rgba(27, 77, 122, 0.15); /* Subtle highlights */

    /* ── Semantic Colors ──────────────────────────────────── */
    --color-success:          #28a745;
    --color-success-dark:     #218838;
    --color-success-light:    #c8e6c9;
    --color-success-text:     #155724;
    --color-success-border:   #c3e6cb;
    --color-success-focus:    rgba(46, 125, 50, 0.3);

    --color-danger:           #dc3545;
    --color-danger-dark:      #bd2130;
    --color-danger-light:     #ffcdd2;
    --color-danger-text:      #721c24;
    --color-danger-border:    #f5c6cb;
    --color-danger-subtle:    rgba(220, 38, 38, 0.15);

    --color-warning:          #ffc107;
    --color-warning-dark:     #e0a800;
    --color-warning-light:    #fff3e0;
    --color-warning-text:     #856404;
    --color-warning-border:   #ffeeba;
    --color-warning-glow:     rgba(255, 193, 7, 0.5);

    --color-info:             #17a2b8;
    --color-info-dark:        #007a8c;
    --color-info-light:       #d1ecf1;
    --color-info-text:        #0c5460;

    /* ── Overlay ──────────────────────────────────────────── */
    --overlay-bg:             rgba(0, 0, 0, 0.5);

    /* ── Accent Colors ────────────────────────────────────── */
    --color-purple:           #673ab7;
    --color-pink:             #e91e63;
    --color-orange:           #ff9800;
    --color-gold:             #FFD700;
    --color-gold-dark:        #B8860B;
    --color-blue-alt:         #007bff;
    --color-green-alt:        #00a65d;
    --color-green-muted:      #5a9900;
    --color-red-brand:        #CC2936;  /* Campaign red accent */

    /* ── Neutral Scale ────────────────────────────────────── */
    --color-white:            #ffffff;
    --color-gray-50:          #f8f9fa;
    --color-gray-100:         #f5f5f5;
    --color-gray-200:         #eeeeee;
    --color-gray-300:         #ddd;
    --color-gray-350:         #ccc;
    --color-gray-400:         #e0e0e0;
    --color-gray-500:         #999;
    --color-gray-600:         #666;
    --color-gray-700:         #6c757d;
    --color-gray-750:         #5a6268;
    --color-gray-800:         #333;
    --color-black:            #000000;

    /* ── Typography ───────────────────────────────────────── */
    --font-family:            -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-mono:       'SF Mono', 'Fira Code', 'Consolas', monospace;

    --font-xs:                0.75rem;
    --font-sm:                0.85rem;
    --font-base:              0.9rem;
    --font-md:                1rem;
    --font-lg:                1.125rem;
    --font-xl:                1.25rem;
    --font-2xl:               1.5rem;
    --font-3xl:               2.5rem;

    --weight-normal:          400;
    --weight-medium:          500;
    --weight-semibold:        600;
    --weight-bold:            700;

    --leading-tight:          1.2;
    --leading-normal:         1.5;
    --leading-relaxed:        1.65;

    /* ── Spacing Scale (4px base) ─────────────────────────── */
    --space-1:                4px;
    --space-2:                8px;
    --space-3:                12px;
    --space-4:                16px;
    --space-5:                20px;
    --space-6:                24px;
    --space-8:                32px;
    --space-10:               40px;
    --space-12:               48px;
    --space-16:               64px;

    /* ── Border Radius ────────────────────────────────────── */
    --radius-sm:              3px;
    --radius-md:              4px;
    --radius-lg:              6px;
    --radius-xl:              8px;
    --radius-2xl:             12px;
    --radius-full:            50%;

    /* ── Shadows ──────────────────────────────────────────── */
    --shadow-xs:              0 1px 3px rgba(0,0,0,0.1);
    --shadow-sm:              0 2px 5px rgba(0,0,0,0.1);
    --shadow-md:              0 2px 8px rgba(0,0,0,0.1);
    --shadow-lg:              0 4px 12px rgba(0,0,0,0.15);
    --shadow-xl:              0 8px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
    --shadow-2xl:             0 10px 40px rgba(0,0,0,0.3);
    --shadow-focus:           0 0 0 3px var(--color-brand-focus);

    /* ── Z-Index Scale ────────────────────────────────────── */
    --z-base:                 1;
    --z-raised:               10;
    --z-dropdown:             1000;
    --z-sticky:               2000;
    --z-overlay:              2500;
    --z-modal:                3000;
    --z-toast:                4000;
    --z-tooltip:              9999;
    --z-top:                  10000;
    --z-critical:             10100;

    /* ── Transitions ──────────────────────────────────────── */
    --transition-fast:        0.15s ease;
    --transition-base:        0.2s ease;
    --transition-slow:        0.3s ease;

    /* ── Layout ───────────────────────────────────────────── */
    --container-narrow:       700px;
    --container-default:      900px;
    --container-wide:         1200px;
    --container-full:         1400px;
    --sidebar-width:          250px;
}

/* ============================================================
   BASE RESET & DEFAULTS
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-base);
    line-height: var(--leading-normal);
    color: var(--color-gray-800);
    background-color: var(--color-gray-100);
    margin: 0;
    padding: 0;
}

a { color: var(--color-brand); text-decoration: none; }
a:hover { color: var(--color-brand-dark); }

/* ============================================================
   LAYOUT
   ============================================================ */

.content {
    padding: var(--space-5);
    max-width: var(--container-full);
    margin: 0 auto;
}

.page-container {
    max-width: var(--container-default);
    margin: 0 auto;
}

.page-container-wide {
    max-width: var(--container-wide);
    margin: 0 auto;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
    gap: var(--space-3);
}

.page-header h1 {
    margin: 0;
    font-size: var(--font-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-gray-800);
}

.header-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-sm);
    font-weight: var(--weight-medium);
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
    background-color: var(--color-brand);
    color: var(--color-white);
}

.btn:hover {
    background-color: var(--color-brand-dark);
    color: var(--color-white);
}

.btn svg {
    width: 16px;
    height: 16px;
}

.btn-secondary {
    background-color: var(--color-white);
    color: var(--color-gray-700);
    border-color: var(--color-gray-300);
}

.btn-secondary:hover {
    background-color: var(--color-gray-50);
    color: var(--color-gray-800);
}

.btn-danger {
    background-color: var(--color-danger);
    color: var(--color-white);
}

.btn-danger:hover {
    background-color: var(--color-danger-dark);
}

.btn-ghost {
    background: transparent;
    color: var(--color-brand);
    border-color: transparent;
}

.btn-ghost:hover {
    background-color: var(--color-brand-light);
}

.btn-save {
    background-color: var(--color-success);
    color: var(--color-white);
}

.btn-save:hover {
    background-color: var(--color-success-dark);
}

.btn-sm {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-xs);
}

/* ============================================================
   STATUS BADGES
   ============================================================ */

.status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--radius-2xl);
    font-size: var(--font-xs);
    font-weight: var(--weight-semibold);
    text-transform: capitalize;
}

.status-active { background-color: var(--color-success-light); color: var(--color-success-text); }
.status-inactive { background-color: var(--color-gray-200); color: var(--color-gray-600); }
.status-pending { background-color: var(--color-warning-light); color: var(--color-warning-text); }
.status-completed { background-color: var(--color-success-light); color: var(--color-success-text); }
.status-cancelled { background-color: var(--color-danger-light); color: var(--color-danger-text); }
.status-draft { background-color: var(--color-info-light); color: var(--color-info-text); }

/* ============================================================
   FLASH MESSAGES
   ============================================================ */

.message {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    font-size: var(--font-sm);
}

.message.success { background: var(--color-success-light); color: var(--color-success-text); border: 1px solid var(--color-success-border); }
.message.error { background: var(--color-danger-light); color: var(--color-danger-text); border: 1px solid var(--color-danger-border); }
.message.info { background: var(--color-info-light); color: var(--color-info-text); border: 1px solid #bee5eb; }
.message.warning { background: var(--color-warning-light); color: var(--color-warning-text); border: 1px solid var(--color-warning-border); }

/* ============================================================
   FORMS
   ============================================================ */

.form-group {
    margin-bottom: var(--space-4);
}

.form-group label {
    display: block;
    margin-bottom: var(--space-1);
    font-weight: var(--weight-medium);
    font-size: var(--font-sm);
    color: var(--color-gray-700);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    font-size: var(--font-base);
    font-family: var(--font-family);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: var(--shadow-focus);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.form-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-4);
}

.form-row + .form-row,
.form-row + .form-row-3,
.form-row-3 + .form-row,
.form-row-3 + .form-row-3 {
    margin-top: 15px;
}

@media (max-width: 768px) {
    .form-row, .form-row-3 {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   CARDS
   ============================================================ */

.details-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: var(--space-6);
    margin-bottom: var(--space-5);
}

/* ============================================================
   NAVBAR
   ============================================================ */

.navbar {
    background-color: var(--color-brand);
    color: var(--color-white);
    padding: 0 var(--space-5);
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}

.navbar-container {
    display: flex;
    align-items: center;
    max-width: var(--container-full);
    margin: 0 auto;
}

.navbar-logo {
    display: flex;
    align-items: center;
}

.navbar-logo .logo-img {
    height: 48px;
    margin-right: var(--space-4);
}

.navbar-content {
    flex: 1;
}

.navbar-top-row h2 {
    color: var(--color-white);
    font-size: var(--font-lg);
    margin: var(--space-2) 0;
}

.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.nav-menu li a {
    display: block;
    color: rgba(255, 255, 255, 0.85);
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-sm);
    font-weight: var(--weight-medium);
    transition: all var(--transition-fast);
}

.nav-menu li a:hover,
.nav-menu li a.active {
    color: var(--color-white);
    background: rgba(255, 255, 255, 0.15);
}

/* Hamburger */
.hamburger {
    display: none;
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 24px;
    cursor: pointer;
    padding: var(--space-2);
}

@media (max-width: 768px) {
    .hamburger { display: block; }
    .navbar-container { justify-content: space-between; }
    .navbar-content { display: none; }
    .navbar-content.open { display: block; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-brand); z-index: var(--z-dropdown); }
    .nav-menu { flex-direction: column; }
}

/* ============================================================
   GRID.JS TABLE OVERRIDES
   ============================================================ */

.gridjs-wrapper {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.gridjs-table {
    width: 100% !important;
}

th.gridjs-th, td.gridjs-td {
    width: auto !important;
    font-size: var(--font-sm);
    white-space: normal;
}

th.gridjs-th {
    background: var(--color-gray-100) !important;
    font-weight: var(--weight-semibold);
    text-transform: none !important;
}

/* ============================================================
   FOOTER
   ============================================================ */

.app-footer {
    text-align: center;
    padding: var(--space-5);
    color: var(--color-gray-500);
    font-size: var(--font-xs);
}

.app-footer .version {
    margin-left: var(--space-2);
    color: var(--color-gray-350);
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */

.login-container {
    max-width: 400px;
    margin: var(--space-16) auto;
    padding: var(--space-8);
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.login-container h2 {
    text-align: center;
    margin-bottom: var(--space-6);
    color: var(--color-brand);
}

.login-container .btn {
    width: 100%;
    justify-content: center;
    padding: var(--space-3);
}


/* ============================================================
   VOTER BROWSER
   ============================================================ */

/* ── Filter Bar ──────────────────────────────────────────── */
.voter-filters { padding: var(--space-4); }
.filters-form { display: flex; flex-direction: column; gap: var(--space-3); }
.filter-row {
    display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap;
}
.filter-group { flex: 1; min-width: 140px; }
.filter-group select, .filter-group input {
    width: 100%; padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-gray-300); border-radius: var(--radius-md);
    font-size: var(--font-sm);
}
.filter-wide { flex: 2; min-width: 250px; }
.results-count {
    font-size: var(--font-sm); color: var(--color-gray-600);
    font-weight: var(--weight-medium); white-space: nowrap;
}

/* ── Detail Grid ─────────────────────────────────────────── */
.detail-grid { display: flex; flex-direction: column; gap: var(--space-1); }
.detail-row {
    display: flex; padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-gray-100);
}
.detail-row:last-child { border-bottom: none; }
.detail-label {
    width: 140px; flex-shrink: 0; font-weight: var(--weight-semibold);
    color: var(--color-gray-600); font-size: var(--font-sm);
}
.detail-value { font-size: var(--font-sm); color: var(--color-gray-800); }

/* ── Voter Flags ─────────────────────────────────────────── */
.voter-flags { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.voter-flag {
    display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full); font-size: var(--font-xs);
    font-weight: var(--weight-medium);
}
.flag-yes { background: var(--color-success-light); color: var(--color-success-text); }
.flag-no { background: var(--color-gray-100); color: var(--color-gray-500); }

/* ── Voting History Grid ─────────────────────────────────── */
.voting-history-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: var(--space-2);
}
.vote-item {
    display: flex; flex-direction: column; align-items: center;
    padding: var(--space-3); border-radius: var(--radius-md);
    background: var(--color-gray-50); text-align: center;
}
.vote-label {
    font-size: var(--font-xs); font-weight: var(--weight-semibold);
    color: var(--color-gray-500); margin-bottom: var(--space-1);
}
.vote-value { font-size: var(--font-lg); font-weight: var(--weight-bold); color: var(--color-gray-400); }
.vote-yes { background: #e8f5e9; }
.vote-yes .vote-value { color: var(--color-success); }
.vote-yes.vote-dem { background: #e3f2fd; }
.vote-yes.vote-dem .vote-value { color: #1565c0; }
.vote-crossover { background: #fff3e0; }
.vote-crossover .vote-value { color: var(--color-orange); }

/* ── Race Badges ─────────────────────────────────────────── */
.race-b { background: #e3f2fd; color: #1565c0; }
.race-w { background: var(--color-gray-100); color: var(--color-gray-600); }
.race-a { background: #fff8e1; color: #f57f17; }
.race-h { background: #fce4ec; color: #c62828; }
.race-u { background: var(--color-gray-100); color: var(--color-gray-500); }

/* ── Simple Table ────────────────────────────────────────── */
.simple-table {
    width: 100%; border-collapse: collapse; font-size: var(--font-sm);
}
.simple-table th {
    text-align: left; padding: var(--space-2) var(--space-3);
    background: var(--color-gray-50); font-weight: var(--weight-semibold);
    color: var(--color-gray-600); border-bottom: 2px solid var(--color-gray-200);
}
.simple-table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-gray-100);
}
.simple-table a { color: var(--color-brand); }

/* ── Notes ───────────────────────────────────────────────── */
.voter-notes-textarea {
    width: 100%; min-height: 100px; padding: var(--space-3);
    border: 1px solid var(--color-gray-300); border-radius: var(--radius-md);
    font-family: inherit; font-size: var(--font-sm); resize: vertical;
}
.notes-actions {
    display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2);
}
.notes-saved-msg {
    font-size: var(--font-sm); color: var(--color-success);
    transition: opacity 0.3s; opacity: 0;
}

/* ── Dashboard Stats ─────────────────────────────────────── */
.dashboard-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4); margin-bottom: var(--space-6);
}
.stat-card {
    background: var(--color-white); border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg); padding: var(--space-5);
    text-align: center; text-decoration: none; color: inherit;
    transition: box-shadow 0.2s;
}
a.stat-card:hover { box-shadow: var(--shadow-md); }
.stat-number {
    font-size: 2rem; font-weight: var(--weight-bold);
    color: var(--color-brand); line-height: 1;
}
.stat-label {
    font-size: var(--font-sm); color: var(--color-gray-600);
    margin-top: var(--space-2);
}