/* ============================================================
   NEWLIN FOR GEORGIA — BASE STYLESHEET: shared tokens and defaults
   ============================================================
   Forked from IHM Men's Group design system.
   All component styles reference these tokens for consistency.
   ============================================================ */

:root {
    /* ── Brand Colors ─────────────────────────────────────── */
    --color-brand:            #3d2260;  /* Campaign Purple — primary */
    --color-brand-dark:       #2e1a48;  /* Hover / pressed */
    --color-brand-light:      #ede8f3;  /* Tinted backgrounds */
    --color-brand-focus:      rgba(61, 34, 96, 0.3);  /* Focus rings */
    --color-brand-subtle:     rgba(61, 34, 96, 0.15); /* Subtle highlights */
    --color-brand-gold:       #fbc926;  /* Campaign Gold — accent */
    --color-brand-gold-dark:  #d4a91e;  /* Gold hover / pressed */

    /* ── 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:             #fbc926;
    --color-gold-dark:        #d4a91e;
    --color-blue-alt:         #007bff;
    --color-green-alt:        #00a65d;
    --color-green-muted:      #5a9900;
    --color-red-brand:        #CC2936;  /* Legacy 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:            9999px;

    /* ── 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:          260px;
}

/* ============================================================
   THEME — LIGHT MODE
   ============================================================ */

:root[data-theme="light"] {
    --sidebar-bg: #ffffff;
    --sidebar-border: #e5e7eb;
    --sidebar-text: #374151;
    --sidebar-text-muted: #9ca3af;
    --sidebar-section-label: #9ca3af;
    --sidebar-hover-bg: #f3f4f6;
    --sidebar-active-bg: rgba(61, 34, 96, 0.08);
    --sidebar-active-text: #3d2260;
    --sidebar-active-border: #3d2260;
    --sidebar-logo-text: #3d2260;

    --content-bg: #f5f5f5;
    --card-bg: #ffffff;
    --card-border: #e5e7eb;
    --card-shadow: 0 1px 3px rgba(0,0,0,0.06);
    --text-primary: #1a1a1a;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --border-color: #e5e7eb;
    --input-bg: #ffffff;
    --input-border: #d1d5db;

    --badge-active-bg: #dcfce7;
    --badge-active-text: #166534;
    --badge-info-bg: #dbeafe;
    --badge-info-text: #1e40af;
    --badge-warning-bg: #fef3c7;
    --badge-warning-text: #92400e;
    --badge-danger-bg: #fee2e2;
    --badge-danger-text: #991b1b;

    --btn-primary-bg: #3d2260;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #ffffff;
    --btn-secondary-text: #3d2260;
    --btn-secondary-border: #3d2260;
    --btn-ghost-text: #374151;
    --btn-ghost-hover: #f3f4f6;

    --table-header-bg: #f9fafb;
    --table-row-hover: #f3f4f6;
    --table-border: #e5e7eb;

    --stat-icon-bg: rgba(61, 34, 96, 0.08);
    --stat-icon-color: #3d2260;

    --toggle-bg: #e5e7eb;
    --toggle-knob: #ffffff;

    --focus-ring: 0 0 0 3px rgba(61, 34, 96, 0.15);
}

/* ============================================================
   THEME — DARK MODE
   ============================================================ */

:root[data-theme="dark"] {
    --sidebar-bg: #1a1a1a;
    --sidebar-border: #2d2d2d;
    --sidebar-text: #d1d5db;
    --sidebar-text-muted: #6b7280;
    --sidebar-section-label: #4b5563;
    --sidebar-hover-bg: #2d2d2d;
    --sidebar-active-bg: rgba(167, 139, 250, 0.1);
    --sidebar-active-text: #a78bfa;
    --sidebar-active-border: #a78bfa;
    --sidebar-logo-text: #ffffff;

    --content-bg: #111111;
    --card-bg: #1e1e1e;
    --card-border: #2d2d2d;
    --card-shadow: 0 1px 3px rgba(0,0,0,0.3);
    --text-primary: #e5e5e5;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;
    --border-color: #2d2d2d;
    --input-bg: #2d2d2d;
    --input-border: #3d3d3d;

    --badge-active-bg: rgba(22, 163, 74, 0.15);
    --badge-active-text: #4ade80;
    --badge-info-bg: rgba(59, 130, 246, 0.15);
    --badge-info-text: #60a5fa;
    --badge-warning-bg: rgba(245, 158, 11, 0.15);
    --badge-warning-text: #fbbf24;
    --badge-danger-bg: rgba(220, 38, 38, 0.15);
    --badge-danger-text: #f87171;

    --btn-primary-bg: #a78bfa;
    --btn-primary-text: #1a1a1a;
    --btn-secondary-bg: #2d2d2d;
    --btn-secondary-text: #e5e5e5;
    --btn-secondary-border: #3d3d3d;
    --btn-ghost-text: #d1d5db;
    --btn-ghost-hover: #2d2d2d;

    --table-header-bg: #252525;
    --table-row-hover: #252525;
    --table-border: #2d2d2d;

    --stat-icon-bg: rgba(167, 139, 250, 0.1);
    --stat-icon-color: #a78bfa;

    --toggle-bg: #3d3d3d;
    --toggle-knob: #a78bfa;

    --focus-ring: 0 0 0 3px rgba(167, 139, 250, 0.15);
}


/* ============================================================
   BASE DEFAULTS — element level, no layout. Loaded FIRST on every page
   (app shell, packets, kiosk, public sites). Each page's own sheet
   loads after this and holds brand and layout only.
   ============================================================ */

body {
    font-family: var(--font-family);
}

a { color: var(--sidebar-active-text); text-decoration: none; }

/* ── status-badge ── */
.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;
    white-space: nowrap; /* pills never wrap ("Board Meeting" split lines, 2026-07-10) */
}

.status-active { background: var(--badge-active-bg); color: var(--badge-active-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); }
.status-info { background: var(--badge-info-bg); color: var(--badge-info-text); }
.status-warning { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.status-danger { background: var(--badge-danger-bg); color: var(--badge-danger-text); }
.status-donor { background: var(--color-brand-gold); color: var(--color-brand); }   /* a voter's giving: gold with the brand purple (Jeff 2026-10-24) */
/* ── simple-table ── */
.simple-table {
    width: 100%; border-collapse: collapse; font-size: var(--font-sm);
}
.simple-table th {
    text-align: left; padding: var(--space-3);
    background: transparent; font-weight: var(--weight-semibold);
    color: var(--text-secondary); border-bottom: 2px solid var(--border-color);
    font-size: var(--font-sm);
}
.simple-table td {
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}
.simple-table th:not(:first-child),
.simple-table td:not(:first-child) { text-align: center; }
.simple-table th.text-left,
.simple-table td.text-left { text-align: left; }
.simple-table tr:last-child td { border-bottom: none; }
.simple-table tr:hover td { background: var(--table-row-hover); }
.simple-table a { color: var(--sidebar-active-text); }
/* Long enum labels (membership types) wrap instead of stretching the table */
.simple-table th.cell-wrap,
.simple-table td.cell-wrap { white-space: normal; max-width: 12rem; }
/* ── detail ── */
.detail-row {
    display: flex; padding: var(--space-2) 0;
}
.detail-label {
    width: 180px; min-width: 180px; flex-shrink: 0; font-weight: var(--weight-semibold);
    color: var(--text-secondary); font-size: var(--font-sm);
    display: flex; align-items: center; gap: 4px;
}
.detail-value {
    font-size: var(--font-sm); color: var(--text-primary); flex: 1; min-width: 0;
    overflow-wrap: anywhere; word-break: break-word;
}
/* ── detail-media ── */
@media (max-width: 768px) {
    .detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding: var(--space-2) 0;
    }
    .detail-label {
        width: auto;
        min-width: 0;
    }
}
/* ── nowrap ── */
.nowrap { white-space: nowrap; }
/* ── hidden ── */
.hidden { display: none; }
/* ── text-muted ── */
.text-muted { color: var(--text-muted); }
/* ── textsize ── */
.text-xs { font-size: var(--font-xs); }
.text-sm { font-size: var(--font-sm); }
/* ── fw ── */
.font-semibold { font-weight: var(--weight-semibold); }
/* ── pt ── */
.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }
/* ── bd ── */
.bd-row-total td { font-weight: 600; border-top: 1px solid var(--color-gray-300); }
/* ── sort ── */
th.sort-th { cursor: pointer; user-select: none; white-space: nowrap; }
th.sort-th.sort-asc::after { content: ' ↑'; }
th.sort-th.sort-desc::after { content: ' ↓'; }
/* ── margins ── */
.m-0 { margin: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-0 { margin-bottom: 0; }
.text-danger { color: var(--color-danger); }   /* negative figures on the deck and packets, red (2026-10-12) */