/* ── Design tokens ─────────────────────────────────────────────────────────
   The rules below were lifted verbatim from VoterConnect, so they reference its
   --vc-* token names. None of those exist in this app, which is why every card
   rendered as bare text: background, border and radius all resolved to nothing.

   Binding them to this app's own palette keeps the copied markup untouched while
   making the AI pages look native rather than transplanted.
   ───────────────────────────────────────────────────────────────────────── */
:root {
    --vc-bg-glass:    var(--bg2);
    --vc-bg-surface:  var(--bg2);
    --vc-surface:     var(--bg2);
    --vc-surface-2:   var(--bg3);
    --vc-border:      var(--border2);
    --vc-radius:      10px;
    --vc-blur:        blur(0);
    --vc-shadow-sm:   0 2px 10px rgba(0, 0, 0, .35);
    --vc-text:        var(--text);
    --vc-text-high:   #fff;
    --vc-text-mid:    var(--muted2);
    --vc-text-muted:  var(--muted);
    --vc-muted:       var(--muted);
    --vc-primary:     var(--green);
    --vc-primary-soft: var(--green-dim);
    --vc-accent:      var(--accent);
    --vc-danger:      var(--red);
    --vc-tap:         rgba(255, 255, 255, .05);
}

/* Card spacing the copied markup assumes but does not carry. */
.vc-mt-2 { margin-top: 8px; }
.vc-mt-3 { margin-top: 12px; }

/* The hero reads as a banner in VoterConnect; here it sits under a topbar, so
   give it this app's accent edge rather than a floating panel. */
.svc-hero {
    background: linear-gradient(140deg, var(--bg3) 0%, var(--bg2) 100%);
    border: 1px solid var(--border2);
    border-left: 3px solid var(--green);
    border-radius: 12px;
    padding: 16px;
    margin-top: 12px;
}
.svc-hero__head { display: flex; align-items: center; gap: 13px; }
.svc-hero__icon { font-size: 26px; color: var(--green); }
.svc-hero__title { font-size: 18px; font-weight: 700; color: #fff; margin: 0; }
.svc-hero__sub { font-size: 13px; color: var(--muted2); margin: 2px 0 0; }

.svc-hero-divider { display: flex; align-items: center; gap: 8px; margin: 14px 0 2px; }
.svc-hero-divider__line { flex: 1; height: 1px; background: var(--border2); }
.svc-hero-divider__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

/* Form controls: the copied markup uses .vc-input / .vc-label for both selects
   and text inputs. */
.vc-input {
    background: var(--bg); color: var(--text);
    border: 1px solid var(--border2); border-radius: 8px;
    padding: 9px 11px; font-size: 13.5px; font-family: var(--sans);
}
.vc-input:focus {
    outline: none; border-color: var(--green);
    box-shadow: 0 0 0 2px rgba(76, 175, 80, .18);
}
.vc-label {
    display: block; font-family: var(--mono); font-size: 10px;
    letter-spacing: .12em; text-transform: uppercase; color: var(--muted2);
}

.vc-card__title { font-size: 14.5px; font-weight: 700; color: #fff; }
.vc-card__sub { font-size: 12.5px; color: var(--muted2); line-height: 1.55; margin-top: 3px; }

.vc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border-radius: 8px; padding: 9px 14px; font-size: 13px; font-weight: 700;
    border: 1px solid var(--border2); background: var(--bg3); color: var(--text);
    cursor: pointer; transition: filter .15s ease, transform .12s ease;
}
.vc-btn:hover:not(:disabled) { filter: brightness(1.15); }
.vc-btn:active:not(:disabled) { transform: scale(.98); }
.vc-btn:disabled { opacity: .45; cursor: default; }
.vc-btn--primary { background: var(--green); border-color: var(--green); color: #fff; }
.vc-btn--ghost { background: transparent; color: var(--muted2); }

.vc-paging__info { font-family: var(--mono); font-size: 11.5px; color: var(--muted2); }

/* ══════════════════════════════════════════════════════════════════════════
   Election AI — styles for the Voters AI page and the report segment.

   Extracted from VoterConnect UI.App (glass.css, utilities.css,
   electionmgmt.css, voter-card.css) for exactly the 43 classes those two
   components use. The full set is ~5,000 lines across four files and carries
   VoterConnect's whole design system, which would fight this app's theme.

   The page markup is copied verbatim, so these selectors must keep their
   original names.
   ══════════════════════════════════════════════════════════════════════════ */

.svc-hero { padding:24px 22px;margin-top:12px; border-radius:18px; border:1.5px solid rgba(168,85,247,.4); background:linear-gradient(135deg,rgba(168,85,247,.08) 0%,rgba(6,182,212,.04) 100%); box-shadow:0 0 12px rgba(168,85,247,.2),inset 0 0 20px rgba(168,85,247,.08); animation:svcPulse 2.5s ease-in-out infinite; }
.svc-hero__head { display:flex;align-items:center;gap:16px }
.svc-hero__icon { font-size:42px;color:#a855f7 }
.svc-hero__title { font-size:22px;font-weight:800;margin:0;color:var(--text,#e6edf3) }
.svc-hero__sub { font-size:13px;margin:3px 0 0;color:var(--muted,#8b949e);line-height:1.4 }
.svc-hero--wa .svc-hero__icon { color:#25d366 }
.svc-hero--sms .svc-hero__icon { color:#3b82f6 }
.svc-hero--em .svc-hero__icon { color:#f97316 }
.svc-hero--election .svc-hero__icon { color:#f59e0b }
.svc-hero--sir .svc-hero__icon { color:#6366f1 }
.svc-hero--caste .svc-hero__icon { color:#f43f5e }
.svc-hero--demo .svc-hero__icon { color:#14b8a6 }
.svc-hero--voters .svc-hero__icon { color:#38bdf8 }
.svc-hero--booth .svc-hero__icon { color:#34d399 }
.svc-hero--team .svc-hero__icon { color:#fbbf24 }
.svc-hero-divider { display:flex;align-items:center;margin:20px 0 16px }
.svc-hero-divider__line { flex:1;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--vc-primary,#7c4dff) 40%,transparent) 50%,transparent) }
.svc-hero-divider__dot { width:6px;height:6px;border-radius:50%;background:var(--vc-primary,#7c4dff);box-shadow:0 0 8px var(--vc-primary,#7c4dff);flex-shrink:0 }
.vc-ai-viz { margin-top:14px;padding:14px;border:1px solid var(--vc-border,#30363d);border-radius:10px;background:var(--vc-surface-2,rgba(255,255,255,.02)) }
.vc-ai-viz__stats { display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px }
.vc-ai-stat { padding:10px 12px;border-radius:8px;background:var(--vc-surface,rgba(255,255,255,.03));border:1px solid var(--vc-border,#30363d) }
.vc-ai-stat--pending { border-color:color-mix(in srgb,#f59e0b 35%,var(--vc-border,#30363d)) }
.vc-ai-stat__label { font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--vc-text-muted,#8b949e) }
.vc-ai-stat__value { font-size:20px;font-weight:800;color:var(--vc-text-high,#e6edf3);line-height:1.2;margin-top:2px;font-variant-numeric:tabular-nums }
.vc-ai-stat__sub { font-size:11px;color:var(--vc-text-muted,#8b949e);margin-top:2px }
.vc-ai-viz__charts { display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px }
.vc-ai-viz__charts { grid-template-columns:1fr }
.vc-ai-bar { display:grid;grid-template-columns:110px 1fr auto;align-items:center;gap:8px;margin-bottom:6px }
.vc-ai-bar__label { font-size:12px;color:var(--vc-text-mid,#c9d1d9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.vc-ai-bar__track { height:10px;border-radius:6px;background:var(--vc-border,rgba(255,255,255,.06));overflow:hidden }
.vc-ai-bar__fill { display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--vc-primary,#7c4dff),var(--vc-accent,#ec4899)) }
.vc-ai-bar__fill--warn { background:linear-gradient(90deg,#f59e0b,#ef4444) }
.vc-ai-bar__val { font-size:11px;color:var(--vc-text-muted,#8b949e);white-space:nowrap;font-variant-numeric:tabular-nums }
.vc-ai-pending { margin-top:14px;padding:12px;border-radius:8px;border:1px solid color-mix(in srgb,#f59e0b 24%,var(--vc-border,#30363d));background:color-mix(in srgb,#f59e0b 6%,transparent) }
.vc-ai-pending__title { font-size:12px;font-weight:700;color:#f59e0b;margin-bottom:8px }
.vc-ai-pending__note { margin-top:8px;font-size:12px;color:var(--vc-text-mid,#c9d1d9);line-height:1.5 }
.vc-ai-viz__note { margin-top:10px;font-size:11px;color:var(--vc-text-muted,#8b949e);text-align:right;font-style:italic }
.vc-card { position: relative; display: block; padding: 16px; background: var(--vc-bg-glass); border: 1px solid var(--vc-border); border-radius: var(--vc-radius); backdrop-filter: var(--vc-blur); -webkit-backdrop-filter: var(--vc-blur); box-shadow: var(--vc-shadow-sm); color: var(--vc-text-high); }
.vc-card__title { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--vc-text-high); }
.vc-card__sub { font-size: 13px; color: var(--vc-text-muted); }
.vc-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px 20px; }
.vc-loading__ring { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--vc-border, rgba(255,255,255,.1)); border-top-color: var(--vc-primary, #6366f1); animation: vc-spin .7s linear infinite; }
.vc-loading__text { font-size: 13px; color: var(--vc-text-muted, #64748b); letter-spacing: .02em; }
.vc-loading__ring { animation-duration: 2s; }
.vc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--vc-tap); padding: 0 16px; border: 0; border-radius: var(--vc-radius); font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: none; transition: opacity 120ms ease, transform 120ms ease, background 120ms ease; white-space: nowrap; }
.vc-btn:active:not(:disabled) { transform: translateY(1px); }
.vc-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.vc-btn:focus-visible { outline: 2px solid var(--vc-primary); outline-offset: 2px; }
.vc-btn--primary { background: linear-gradient(120deg, var(--vc-primary), var(--vc-accent)); color: #fff; }
.vc-btn--primary:hover:not(:disabled) { filter: brightness(1.1); }
.vc-btn--ghost { background: transparent; border: 1px solid var(--vc-border); color: var(--vc-text-high); }
.vc-btn--ghost:hover:not(:disabled) { border-color: var(--vc-primary); background: var(--vc-bg-glass); }
.vc-picker-list > .vc-btn { width: 100%; }
.vc-input,
.vc-select { display: block; width: 100%; height: var(--vc-tap); background: var(--vc-bg-surface); color: var(--vc-text-high); border: 1px solid var(--vc-border); border-radius: var(--vc-radius); padding: 0 12px; font-size: 15px; font-family: inherit; }
.vc-input:focus,
.vc-select:focus { outline: none; border-color: var(--vc-primary); box-shadow: 0 0 0 3px var(--vc-primary-soft); }
.vc-input option,
.vc-select option,
select option { background: var(--vc-bg-surface, #0f1923); color: var(--vc-text, #e2e8f0); }
.vc-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--vc-text-muted); margin: 12px 0 6px; }
.vc-mt-2 { margin-top: 8px; }
.vc-mt-3 { margin-top: 12px; }
.vc-paging__info { font-size: 12px; color: var(--vc-text-muted); }
.vc-fm-add > label,
.vc-fm-add > .vc-btn { grid-column: 1 / -1; }