/* ═══════════════════════════════════════════════════════════════════════
   Kyeni South Poll — Styles
   Theme: Deep green/Kenya-inspired, dark + light mode
   ═══════════════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties (Dark Mode Default) ──────────────────────── */
:root {
  --bg:           #080f0d;
  --bg-card:      #0e1a16;
  --bg-elevated:  #152219;
  --bg-input:     #0b1611;
  --border:       rgba(22,163,74,.18);
  --border-hover: rgba(22,163,74,.35);
  --accent:       #16a34a;
  --accent-light: #22c55e;
  --accent-dim:   rgba(22,163,74,.12);
  --governor-color: #8b5cf6;
  --mp-color:       #3b82f6;
  --mca-color:      #f59e0b;
  --danger:       #ef4444;
  --warning:      #f59e0b;
  --success:      #22c55e;
  --info:         #3b82f6;
  --text:         #e8f5ee;
  --text-muted:   #7fb89a;
  --text-subtle:  #4a7a5e;
  --font:         'Inter', -apple-system, sans-serif;
  --radius-sm:    8px;
  --radius:       12px;
  --radius-lg:    16px;
  --radius-xl:    22px;
  --shadow:       0 8px 32px rgba(0,0,0,.4);
  --shadow-sm:    0 2px 12px rgba(0,0,0,.3);
  --sidebar-width:240px;
}

/* ── Light Mode ──────────────────────────────────────────────────────── */
body.light-mode {
  --bg:           #f0faf4;
  --bg-card:      #ffffff;
  --bg-elevated:  #e8f5ee;
  --bg-input:     #f8fff9;
  --border:       rgba(22,163,74,.2);
  --border-hover: rgba(22,163,74,.4);
  --accent-dim:   rgba(22,163,74,.08);
  --text:         #0f2d1c;
  --text-muted:   #3a6b4e;
  --text-subtle:  #6aaa82;
  --shadow:       0 4px 20px rgba(0,0,0,.1);
  --shadow-sm:    0 1px 6px rgba(0,0,0,.08);
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.6; min-height:100vh; transition:background .25s, color .25s; }
a { color:var(--accent-light); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3,h4 { line-height:1.25; font-weight:700; }
p { color:var(--text-muted); }
.text-muted { color:var(--text-muted); }

/* ── Containers ─────────────────────────────────────────────────────── */
.container    { max-width:1200px; margin:0 auto; padding:0 20px; }
.container-sm { max-width:800px;  margin:0 auto; padding:0 20px; }

/* ── Navbar ─────────────────────────────────────────────────────────── */
.navbar { position:sticky; top:0; z-index:100; background:rgba(8,15,13,.92); backdrop-filter:blur(16px); border-bottom:1px solid var(--border); }
body.light-mode .navbar { background:rgba(240,250,244,.92); }
.navbar-inner { max-width:1200px; margin:0 auto; padding:0 20px; display:flex; align-items:center; justify-content:space-between; height:60px; }
.navbar-brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.05rem; cursor:pointer; user-select:none; }
.navbar-brand .logo-icon { width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,#16a34a,#15803d); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.navbar-badge { font-size:.65rem; font-weight:700; padding:2px 8px; background:var(--accent-dim); color:var(--accent-light); border:1px solid rgba(22,163,74,.3); border-radius:99px; }

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero { padding:72px 20px 60px; text-align:center; background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(22,163,74,.08),transparent); }
.hero-badge { display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-light); background:var(--accent-dim); border:1px solid rgba(22,163,74,.25); border-radius:99px; padding:5px 14px; margin-bottom:20px; }
.hero-badge .dot { width:6px; height:6px; border-radius:50%; background:var(--accent-light); animation:pulse 2s infinite; }
.hero h1 { font-size:clamp(2rem,5vw,3.4rem); margin-bottom:16px; }
.hero h1 span { color:var(--accent-light); }
.hero p { font-size:1.05rem; max-width:580px; margin:0 auto 32px; }
.hero-stats { display:flex; justify-content:center; gap:32px; flex-wrap:wrap; }
.hero-stat-value { font-size:2rem; font-weight:800; color:var(--accent-light); }
.hero-stat-label { font-size:.75rem; color:var(--text-subtle); text-transform:uppercase; letter-spacing:.05em; }

/* ── Cards ──────────────────────────────────────────────────────────── */
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; transition:border-color .2s, box-shadow .2s; }
.card:hover { border-color:var(--border-hover); box-shadow:var(--shadow-sm); }
.card-sm { padding:16px; }
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.card-title { font-size:.95rem; font-weight:700; }
.card-subtitle { font-size:.75rem; color:var(--text-muted); margin-top:2px; }

/* ── Stat Cards ─────────────────────────────────────────────────────── */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; margin-bottom:24px; }
.stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; transition:all .2s; }
.stat-card:hover { border-color:var(--border-hover); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.stat-icon { font-size:1.4rem; margin-bottom:8px; }
.stat-value { font-size:1.8rem; font-weight:800; color:var(--text); }
.stat-label { font-size:.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }
.stat-delta { font-size:.75rem; color:var(--accent-light); margin-top:4px; font-weight:600; }

/* ── Position badges ────────────────────────────────────────────────── */
.badge-governor { background:rgba(139,92,246,.15); color:#a78bfa; border:1px solid rgba(139,92,246,.25); }
.badge-mp       { background:rgba(59,130,246,.15);  color:#60a5fa; border:1px solid rgba(59,130,246,.25); }
.badge-mca      { background:rgba(245,158,11,.15);  color:#fbbf24; border:1px solid rgba(245,158,11,.25); }

/* ── Badges ─────────────────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:4px; font-size:.7rem; font-weight:700; padding:3px 10px; border-radius:99px; text-transform:uppercase; letter-spacing:.04em; }
.badge-success { background:rgba(34,197,94,.12);  color:var(--success); border:1px solid rgba(34,197,94,.2); }
.badge-danger  { background:rgba(239,68,68,.12);  color:var(--danger);  border:1px solid rgba(239,68,68,.2); }
.badge-info    { background:rgba(59,130,246,.12);  color:var(--info);   border:1px solid rgba(59,130,246,.2); }
.badge-warning { background:rgba(245,158,11,.12); color:var(--warning); border:1px solid rgba(245,158,11,.2); }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:7px; padding:9px 18px; border-radius:var(--radius-sm); font-size:.87rem; font-weight:600; cursor:pointer; border:none; transition:all .2s; text-decoration:none; white-space:nowrap; }
.btn-primary { background:linear-gradient(135deg,#16a34a,#15803d); color:#fff; box-shadow:0 2px 8px rgba(22,163,74,.3); }
.btn-primary:hover { filter:brightness(1.12); box-shadow:0 4px 16px rgba(22,163,74,.45); transform:translateY(-1px); }
.btn-secondary { background:var(--bg-elevated); color:var(--text); border:1px solid var(--border); }
.btn-secondary:hover { border-color:var(--border-hover); background:var(--bg-card); }
.btn-danger { background:rgba(239,68,68,.15); color:var(--danger); border:1px solid rgba(239,68,68,.25); }
.btn-danger:hover { background:rgba(239,68,68,.25); }
.btn-info { background:rgba(59,130,246,.15); color:var(--info); border:1px solid rgba(59,130,246,.25); }
.btn-info:hover { background:rgba(59,130,246,.25); }
.btn-sm { padding:6px 12px; font-size:.78rem; }
.btn-full { width:100%; justify-content:center; }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none !important; }

/* ── Form ───────────────────────────────────────────────────────────── */
.form-group { margin-bottom:16px; }
.form-label { display:block; font-size:.78rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; }
.form-control { width:100%; padding:10px 14px; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-size:.9rem; font-family:var(--font); transition:border-color .2s, box-shadow .2s; outline:none; }
.form-control:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(22,163,74,.12); }
.form-control:disabled { opacity:.5; cursor:not-allowed; }
select.form-control option { background:var(--bg-card); color:var(--text); }
textarea.form-control { resize:vertical; min-height:80px; }

/* ── Alerts ─────────────────────────────────────────────────────────── */
.alert { padding:12px 16px; border-radius:var(--radius-sm); font-size:.88rem; display:flex; align-items:flex-start; gap:10px; }
.alert-error   { background:rgba(239,68,68,.1);  border:1px solid rgba(239,68,68,.25);  color:var(--danger); }
.alert-success { background:rgba(34,197,94,.1);  border:1px solid rgba(34,197,94,.25);  color:var(--success); }
.alert-info    { background:rgba(59,130,246,.1);  border:1px solid rgba(59,130,246,.25); color:var(--info); }
.alert-warning { background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.25); color:var(--warning); }

/* ── Tables ─────────────────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; }
table.tbl { width:100%; border-collapse:collapse; font-size:.86rem; }
table.tbl th { padding:10px 14px; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); border-bottom:1px solid var(--border); text-align:left; white-space:nowrap; }
table.tbl td { padding:11px 14px; border-bottom:1px solid rgba(22,163,74,.06); vertical-align:middle; }
table.tbl tr:last-child td { border-bottom:none; }
table.tbl tbody tr:hover td { background:var(--accent-dim); }
.tbl-actions { display:flex; gap:6px; }

/* ── Progress Bar ───────────────────────────────────────────────────── */
.progress-bar { height:8px; background:var(--bg-elevated); border-radius:99px; overflow:hidden; }
.progress-fill { height:100%; border-radius:99px; transition:width .6s ease; }

/* ── Voting Wizard ──────────────────────────────────────────────────── */
.wizard { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-xl); overflow:hidden; }
.wizard-steps { display:flex; border-bottom:1px solid var(--border); background:var(--bg-elevated); }
.step-item { flex:1; padding:12px 10px; text-align:center; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-subtle); border-bottom:2px solid transparent; transition:all .2s; position:relative; }
.step-item.active { color:var(--accent-light); border-bottom-color:var(--accent-light); background:var(--accent-dim); }
.step-item.done { color:var(--success); }
.step-item.done::after { content:'✓'; display:inline-block; margin-left:4px; font-size:.9rem; }
.step-num { display:block; font-size:1rem; font-weight:800; margin-bottom:2px; }
.wizard-body { padding:30px; }
.step-panel { display:none; animation:fadeSlideIn .25s ease; }
.step-panel.active { display:block; }

/* ── Candidate Grid ─────────────────────────────────────────────────── */
.candidate-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; margin-top:16px; }
.candidate-card { background:var(--bg-elevated); border:2px solid var(--border); border-radius:var(--radius); padding:18px 12px; text-align:center; cursor:pointer; transition:all .2s; user-select:none; position:relative; }
.candidate-card:hover { border-color:var(--border-hover); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.candidate-card.selected { border-color:var(--accent-light); background:rgba(22,163,74,.1); box-shadow:0 0 0 3px rgba(22,163,74,.15); }
.candidate-card.selected::after { content:'✓'; position:absolute; top:8px; right:10px; color:var(--accent-light); font-size:1.1rem; font-weight:800; }
.cand-avatar { width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.2rem; font-weight:800; color:#fff; margin:0 auto 10px; flex-shrink:0; }
.cand-avatar img { width:60px; height:60px; border-radius:50%; object-fit:cover; }
.cand-name { font-size:.88rem; font-weight:700; margin-bottom:3px; line-height:1.3; }
.cand-party { font-size:.72rem; color:var(--text-muted); }

/* ── Position Section Header ────────────────────────────────────────── */
.position-header { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.position-icon { width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.position-icon.governor { background:rgba(139,92,246,.15); }
.position-icon.mp       { background:rgba(59,130,246,.15); }
.position-icon.mca      { background:rgba(245,158,11,.15); }

/* ── Admin Layout ───────────────────────────────────────────────────── */
.admin-layout { display:flex; min-height:100vh; }

/* ── Sidebar ────────────────────────────────────────────────────────── */
.sidebar { width:var(--sidebar-width); flex-shrink:0; background:var(--bg-card); border-right:1px solid var(--border); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto; overflow-x:hidden; z-index:50; }
.sidebar-header { padding:18px 16px 14px; border-bottom:1px solid var(--border); }
.sidebar-label { font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--text-subtle); padding:16px 16px 6px; }
.sidebar-link { display:flex; align-items:center; gap:10px; padding:10px 16px; font-size:.87rem; font-weight:500; color:var(--text-muted); cursor:pointer; border-radius:0; transition:all .15s; border-left:3px solid transparent; text-decoration:none !important; }
.sidebar-link:hover { background:var(--accent-dim); color:var(--text); }
.sidebar-link.active { background:var(--accent-dim); color:var(--accent-light); border-left-color:var(--accent-light); font-weight:700; }
.sidebar-link .icon { width:18px; text-align:center; font-size:.95rem; }
.admin-main { flex:1; padding:28px 30px; overflow-x:hidden; min-width:0; }

/* ── Admin Section ──────────────────────────────────────────────────── */
.admin-section { display:none; animation:fadeSlideIn .2s ease; }
.admin-section.active { display:block; }
.page-header { margin-bottom:24px; }
.page-header h2 { font-size:1.4rem; font-weight:800; margin-bottom:4px; }
.page-header p  { font-size:.86rem; }
.page-header .actions { margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }

/* ── Results ────────────────────────────────────────────────────────── */
.results-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:20px; }
.result-bar-row { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.result-bar-name { min-width:130px; font-size:.86rem; font-weight:600; truncate; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.result-bar-track { flex:1; height:10px; background:var(--bg-elevated); border-radius:99px; overflow:hidden; }
.result-bar-fill { height:100%; border-radius:99px; transition:width .7s ease; }
.result-bar-pct { min-width:42px; text-align:right; font-size:.82rem; font-weight:700; color:var(--accent-light); }
.result-bar-votes { min-width:44px; text-align:right; font-size:.76rem; color:var(--text-muted); }

/* ── Chart Containers ───────────────────────────────────────────────── */
.chart-wrap { position:relative; width:100%; }
.chart-canvas { width:100% !important; }
.chart-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; margin-bottom:24px; }

/* ── Donut ──────────────────────────────────────────────────────────── */
.donut-wrap { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.donut-legend { display:flex; flex-direction:column; gap:10px; flex:1; min-width:120px; }
.donut-legend-item { display:flex; align-items:center; gap:8px; font-size:.84rem; }
.donut-swatch { width:10px; height:10px; border-radius:3px; flex-shrink:0; }

/* ── Activity Feed ──────────────────────────────────────────────────── */
.activity-item { display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid rgba(22,163,74,.06); }
.activity-item:last-child { border-bottom:none; }
.activity-dot { width:8px; height:8px; border-radius:50%; background:var(--accent-light); flex-shrink:0; margin-top:6px; }
.activity-content { flex:1; min-width:0; }
.activity-main { font-size:.88rem; font-weight:600; truncate; }
.activity-sub  { font-size:.76rem; color:var(--text-muted); margin-top:2px; }
.activity-time { font-size:.72rem; color:var(--text-subtle); white-space:nowrap; }

/* ── Modals ─────────────────────────────────────────────────────────── */
.modal-backdrop { display:none; position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.65); backdrop-filter:blur(4px); align-items:center; justify-content:center; padding:20px; overflow-y:auto; }
.modal-backdrop.open { display:flex; animation:fadeIn .2s; }
.modal { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-xl); width:100%; max-width:520px; padding:28px; box-shadow:0 32px 80px rgba(0,0,0,.5); animation:scaleIn .2s; }
.modal h3 { font-size:1.1rem; font-weight:800; margin-bottom:20px; }
.modal-footer { display:flex; gap:10px; justify-content:flex-end; margin-top:24px; padding-top:20px; border-top:1px solid var(--border); }

/* ── Toasts ─────────────────────────────────────────────────────────── */
#toast-container { position:fixed; bottom:24px; right:24px; z-index:300; display:flex; flex-direction:column; gap:10px; max-width:360px; }
.toast { display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:var(--radius); font-size:.87rem; font-weight:600; box-shadow:var(--shadow); animation:slideToast .3s; pointer-events:none; }
.toast-success { background:#16a34a; color:#fff; }
.toast-error   { background:#dc2626; color:#fff; }
.toast-warning { background:#d97706; color:#fff; }
.toast-info    { background:#2563eb; color:#fff; }

/* ── Spinner ────────────────────────────────────────────────────────── */
.spinner { width:14px; height:14px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; display:inline-block; }

/* ── Tap indicator ──────────────────────────────────────────────────── */
#tap-indicator { position:fixed; bottom:20px; right:20px; z-index:50; background:var(--bg-elevated); border:1px solid var(--border); border-radius:99px; padding:6px 16px; font-size:.75rem; color:var(--text-subtle); opacity:0; transition:opacity .4s; pointer-events:none; }

/* ── Theme toggle ───────────────────────────────────────────────────── */
.theme-toggle { background:var(--bg-elevated); border:1px solid var(--border); border-radius:99px; padding:6px 14px; font-size:.8rem; cursor:pointer; display:flex; align-items:center; gap:6px; color:var(--text-muted); transition:all .2s; }
.theme-toggle:hover { border-color:var(--border-hover); color:var(--text); }

/* ── Color swatches ─────────────────────────────────────────────────── */
.color-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.color-swatch { width:28px; height:28px; border-radius:6px; cursor:pointer; border:2px solid transparent; transition:all .15s; }
.color-swatch.selected, .color-swatch:hover { border-color:#fff; transform:scale(1.15); }

/* ── Danger zone ────────────────────────────────────────────────────── */
.danger-zone { border:1px solid rgba(239,68,68,.2); border-radius:var(--radius); padding:20px; margin-top:20px; }
.danger-zone h4 { color:var(--danger); margin-bottom:8px; }

/* ── Toggle switch ──────────────────────────────────────────────────── */
.toggle-switch { display:flex; align-items:center; gap:12px; cursor:pointer; }
.toggle-track { width:44px; height:24px; border-radius:99px; background:var(--bg-elevated); border:1px solid var(--border); position:relative; transition:all .25s; flex-shrink:0; }
.toggle-track.on { background:var(--accent); border-color:var(--accent); }
.toggle-knob { width:18px; height:18px; border-radius:50%; background:#fff; position:absolute; top:2px; left:2px; transition:transform .25s; box-shadow:0 1px 4px rgba(0,0,0,.3); }
.toggle-track.on .toggle-knob { transform:translateX(20px); }

/* ── Loading skeleton ───────────────────────────────────────────────── */
.skeleton { background:linear-gradient(90deg,var(--bg-elevated) 25%,var(--bg-card) 50%,var(--bg-elevated) 75%); background-size:400% 100%; animation:shimmer 1.4s infinite; border-radius:var(--radius-sm); }

/* ── Animations ─────────────────────────────────────────────────────── */
@keyframes fadeIn      { from{opacity:0} to{opacity:1} }
@keyframes fadeSlideIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@keyframes scaleIn     { from{opacity:0;transform:scale(.96)} to{opacity:1;transform:scale(1)} }
@keyframes spin        { to{transform:rotate(360deg)} }
@keyframes pulse       { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes shimmer     { to{background-position:-400% 0} }
@keyframes slideToast  { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:none} }

/* ── Utility ────────────────────────────────────────────────────────── */
.flex { display:flex; } .gap-10 { gap:10px; } .gap-16 { gap:16px; }
.items-center { align-items:center; } .justify-between { justify-content:space-between; }
.flex-1 { flex:1; } .text-right { text-align:right; } .mt-16 { margin-top:16px; }
.fw-700 { font-weight:700; } .fw-800 { font-weight:800; }
.fs-sm { font-size:.82rem; } .fs-xs { font-size:.75rem; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width:900px) {
  .admin-layout { flex-direction:column; }
  .sidebar { width:100%; height:auto; position:static; flex-direction:row; flex-wrap:wrap; padding:8px; border-right:none; border-bottom:1px solid var(--border); overflow-x:auto; overflow-y:hidden; }
  .sidebar-header { display:none; }
  .sidebar-label  { display:none; }
  .sidebar-link   { padding:7px 12px; font-size:.78rem; border-left:none; border-bottom:2px solid transparent; }
  .sidebar-link.active { border-bottom-color:var(--accent-light); border-left:none; }
  .admin-main { padding:18px; }
}
@media (max-width:640px) {
  .stats-grid { grid-template-columns:1fr 1fr; }
  .candidate-grid { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); }
  .hero h1 { font-size:1.8rem; }
  .wizard-steps { display:none; }
  .wizard-body { padding:20px; }
  .chart-grid { grid-template-columns:1fr; }
}