/* Voters360 Director Prototype V6 — base design tokens and shell.
   Reused from the accepted Voters360-Director-Demo shell/typography/component
   patterns (static inspection only; see baseline/manifest.json), trimmed to
   what this block's shell + F01 dashboard + pending-route view need. */
:root{
  --navy-950:#082a63; --navy-800:#123d7a; --red-600:#ed1b2f;
  --ink:#182033; --muted:#596579; --bg:#f3f6fb; --surface:#fff;
  --surface-accent:#f4f7fc; --surface-subtle:#f7f8fb; --line:#d8dee9; --border-strong:#8a8f98;
  --green:#176b46; --green-bg:#e7f3ed; --amber:#855500; --amber-bg:#fff2d9;
  --danger:#9d2433; --danger-bg:#fdecef; --info:#14244b; --info-bg:#eaf0fb;
  --disabled-bg:#e9edf4;
  --radius-card:12px; --radius-md:8px; --radius-sm:4px; --radius-full:999px;
  --sidebar:272px; --topbar:72px;
  --shadow:0 14px 38px rgba(20,36,75,.1);
}
*{box-sizing:border-box;}
html,body{min-height:100%;}
html{color-scheme:light;}
body{margin:0;color:var(--ink);background:var(--bg);font:14px/20px Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden;}
button,input,select,textarea{font:inherit;}
button,a{-webkit-tap-highlight-color:transparent;}
button{cursor:pointer;}
a{color:inherit;}
img,svg{max-width:100%;}
[hidden]{display:none!important;}
:focus-visible{outline:3px solid #ffbf47;outline-offset:2px;border-radius:4px;}
.skip-link{position:fixed;z-index:1000;top:10px;left:10px;padding:10px 14px;color:#fff;background:var(--navy-950);transform:translateY(-150%);border-radius:6px;}
.skip-link:focus{transform:none;}
.sr-only{position:absolute!important;width:1px!important;max-width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;border:0!important;}
table.sr-only{table-layout:fixed!important;}

/* Type scale */
h1{margin:0;font:700 32px/40px Inter,ui-sans-serif,system-ui,sans-serif;color:var(--ink);}
h2{margin:0;font:600 18px/26px Inter,ui-sans-serif,system-ui,sans-serif;color:var(--ink);}
.t-body-sm{font:400 14px/20px Inter,ui-sans-serif,system-ui,sans-serif;color:var(--muted);}
.t-label-md{font:500 14px/18px Inter,ui-sans-serif,system-ui,sans-serif;}

/* Buttons (44px+ target) */
.button{min-height:48px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border:1px solid transparent;border-radius:var(--radius-md);font:600 16px/20px Inter,ui-sans-serif,system-ui,sans-serif;text-decoration:none;white-space:nowrap;}
.button--primary{color:#fff;background:var(--navy-950);}
.button--primary:hover{background:var(--navy-800);}
.button--secondary{color:var(--navy-950);background:#fff;border-color:var(--line);}
.button:disabled{cursor:not-allowed;opacity:.5;}

/* Form controls */
.field{display:grid;gap:6px;min-width:0;}
.field > label{font:500 14px/18px Inter,ui-sans-serif,system-ui,sans-serif;color:var(--ink);}
.field select,.field input{width:100%;min-height:48px;padding:10px 14px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);font:400 16px/24px Inter,ui-sans-serif,system-ui,sans-serif;}

/* Status pill */
.status{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:var(--radius-full);font:500 12px/16px Inter,ui-sans-serif,system-ui,sans-serif;white-space:nowrap;}
.status--success{color:var(--green);background:var(--green-bg);}
.status--warning{color:var(--amber);background:var(--amber-bg);}
.chip{display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:0 12px;color:var(--navy-950);background:var(--surface-accent);border:1px solid var(--line);border-radius:var(--radius-full);font:500 12px/16px Inter,ui-sans-serif,system-ui,sans-serif;}
.synthetic-badge{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;color:var(--amber);background:var(--amber-bg);border-radius:var(--radius-full);font:500 12px/16px Inter,ui-sans-serif,system-ui,sans-serif;white-space:nowrap;}
.synthetic-badge::before{content:"●";font-size:10px;}

/* App shell */
.app{min-height:100vh;min-height:100dvh;display:flex;}
.sidebar{position:fixed;z-index:50;inset:0 auto 0 0;width:var(--sidebar);display:flex;flex-direction:column;gap:8px;background:var(--navy-950);padding:20px 16px;overflow-y:auto;}
.sidebar__logo{display:flex;align-items:center;padding:4px 2px;}
.sidebar__logo img{width:188px;max-height:54px;object-fit:contain;object-position:left center;display:block;}
.sidebar__role{background:var(--navy-800);border-radius:var(--radius-md);padding:12px;display:grid;gap:4px;color:#fff;}
.sidebar__role strong{font:500 12px/16px Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#ffb4bc;}
.sidebar__role span{font:400 14px/20px Inter,ui-sans-serif,system-ui,sans-serif;}
.sidebar__nav-label{margin:6px 2px 0;font:500 12px/16px Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.55);}
.nav-group-label{margin:10px 2px 0;font:500 11px/16px Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.4);}
#sidebar-nav{display:grid;gap:4px;}
.nav-item{width:100%;height:44px;min-height:44px;display:flex;align-items:center;gap:12px;padding:0 12px;border-radius:var(--radius-md);text-decoration:none;color:#fff;border:0;background:transparent;text-align:left;}
.nav-item:hover{background:rgba(255,255,255,.08);}
.nav-item__icon{width:28px;height:28px;flex:none;border-radius:var(--radius-sm);background:var(--navy-800);color:#fff;display:grid;place-items:center;font:500 12px/16px Inter,ui-sans-serif,system-ui,sans-serif;}
.nav-item__label{font:500 14px/18px Inter,ui-sans-serif,system-ui,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nav-item[aria-current="page"]{background:var(--surface-accent);}
.nav-item[aria-current="page"] .nav-item__icon{background:var(--red-600);}
.nav-item[aria-current="page"] .nav-item__label{color:var(--ink);}
.sidebar__spacer{flex:1;min-height:24px;}
.sidebar__footer{display:flex;flex-direction:column;gap:10px;}
.sidebar__exit{min-height:44px;display:flex;align-items:center;justify-content:center;gap:8px;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.3);border-radius:var(--radius-md);font:500 14px/18px Inter,ui-sans-serif,system-ui,sans-serif;}

.drawer-overlay{position:fixed;z-index:45;inset:0;background:rgba(20,36,75,.55);}
.content-shell{min-width:0;flex:1;margin-left:var(--sidebar);display:flex;flex-direction:column;min-height:100vh;}
.topbar{position:sticky;top:0;z-index:40;height:var(--topbar);flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 24px;background:#fff;border-bottom:1px solid var(--line);}
.topbar__scope{display:grid;gap:2px;min-width:0;}
.topbar__scope strong{font:500 14px/18px Inter,ui-sans-serif,system-ui,sans-serif;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.topbar__scope span{font:400 14px/20px Inter,ui-sans-serif,system-ui,sans-serif;color:var(--muted);}
.topbar__user{display:flex;align-items:center;gap:12px;flex:none;}
.avatar{width:40px;height:40px;border-radius:var(--radius-full);background:var(--navy-950);color:#fff;display:grid;place-items:center;font:500 14px/18px Inter,ui-sans-serif,system-ui,sans-serif;flex:none;}
.menu-button{width:44px;height:44px;display:none;align-items:center;justify-content:center;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:var(--radius-md);}

.app-banner{min-height:34px;display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 16px;color:#704900;background:#fff1d2;border-bottom:1px solid #edd9ad;font-size:.74rem;font-weight:700;text-align:center;}

.main-content{width:100%;padding:24px 40px 56px;}
.main-content:focus-visible{outline:none;}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:16px;flex-wrap:wrap;}
.page-head__copy{min-width:0;display:grid;gap:4px;max-width:900px;}
.page-head__kicker{font:500 12px/16px Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--red-600);}
.page-head__copy p{margin:0;color:var(--muted);font:400 14px/20px Inter,ui-sans-serif,system-ui,sans-serif;}
.page-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}

.card{min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);padding:18px;}

.metric-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);padding:16px 18px;display:grid;gap:8px;min-height:128px;align-content:start;}
.metric-card--success{border:2px solid var(--green);}
.metric-card--warning{border:2px solid var(--amber);}
.metric-card__label{font:500 12px/16px Inter,ui-sans-serif,system-ui,sans-serif;color:var(--muted);}
.metric-card__value{font:600 24px/32px Inter,ui-sans-serif,system-ui,sans-serif;color:var(--ink);overflow-wrap:anywhere;}
.metric-card__detail{font:400 14px/20px Inter,ui-sans-serif,system-ui,sans-serif;color:var(--muted);}

.bar-track{height:10px;background:var(--disabled-bg);border-radius:var(--radius-full);overflow:hidden;}
.bar-track > span{display:block;height:100%;background:var(--navy-950);border-radius:inherit;}

.table-card{overflow-x:auto;overflow-y:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);}
.table-card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);}
.table-card strong{font-weight:650;}
table{width:100%;border-collapse:collapse;}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle;}
th{color:var(--muted);background:var(--surface-subtle);font:500 11px/16px Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;}
td{font:400 14px/20px Inter,ui-sans-serif,system-ui,sans-serif;}
tbody tr:last-child td{border-bottom:0;}
tbody tr:hover{background:var(--surface-subtle);}

.empty{padding:40px 18px;text-align:center;color:var(--muted);}
.empty strong{display:block;margin-bottom:5px;color:var(--ink);font-size:1rem;}

/* Charts */
.chart-card{min-width:0;min-height:292px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);padding:18px;display:flex;flex-direction:column;gap:4px;}
.chart-card h3{margin:0;font:600 16px/22px Inter,ui-sans-serif,system-ui,sans-serif;}
.chart-card .chart-sub{margin:0 0 6px;font:400 12px/18px Inter,ui-sans-serif,system-ui,sans-serif;color:var(--muted);}
.chart-card > svg{width:100%;height:160px;max-height:160px;display:block;}
.chart-legend{display:grid;gap:8px;margin:10px 0 0;padding:0;list-style:none;}
.chart-legend li{display:flex;align-items:center;gap:8px;font:400 14px/20px Inter,ui-sans-serif,system-ui,sans-serif;color:var(--muted);}
.chart-legend .dot{width:10px;height:10px;border-radius:50%;flex:none;}
.chart-legend .val{margin-left:auto;font:500 14px/18px Inter,ui-sans-serif,system-ui,sans-serif;color:var(--ink);}
.chart-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.chart-donut-wrap{min-height:170px;display:grid;grid-template-columns:156px minmax(150px,1fr);gap:24px;align-items:center;flex:1;}
.chart-donut-wrap > svg{width:156px!important;height:156px!important;justify-self:center;}
.chart-donut-wrap .chart-legend{width:100%;margin-top:0;}

.snackbar{position:fixed;z-index:100;right:24px;bottom:24px;max-width:min(420px,calc(100% - 32px));padding:14px 18px;color:#fff;background:var(--navy-950);border-radius:11px;box-shadow:var(--shadow);font:600 14px/20px Inter,ui-sans-serif,system-ui,sans-serif;}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}}

@media (max-width:1180px){
  .chart-pair{grid-template-columns:1fr;}
}
@media (max-width:860px){
  :root{--topbar:64px;}
  .menu-button{display:inline-flex;}
  .sidebar{transform:translateX(-105%);transition:transform .2s ease;box-shadow:var(--shadow);}
  .sidebar.is-open{transform:none;}
  .content-shell{margin-left:0;}
  .topbar{padding:0 14px;}
  .page-head{flex-direction:column;align-items:flex-start;}
}
@media (max-width:720px){
  .main-content{padding:18px 14px 40px;}
  .chart-card{min-height:0;}
  .chart-card > svg{height:170px;max-height:170px;}
  .chart-donut-wrap{grid-template-columns:1fr;gap:12px;justify-items:center;}
  .chart-donut-wrap .chart-legend{justify-self:stretch;}
  .responsive-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .responsive-table,.responsive-table tbody,.responsive-table tr,.responsive-table td{display:block;width:100%;}
  .responsive-table tr{padding:12px 14px;border-bottom:1px solid var(--line);}
  .responsive-table tr:last-child{border-bottom:0;}
  .responsive-table td{display:grid;grid-template-columns:minmax(95px,.85fr) 1.15fr;gap:10px;padding:6px 0;border:0;overflow-wrap:anywhere;}
  .responsive-table td::before{content:attr(data-label);color:var(--muted);font:600 11px/16px Inter,ui-sans-serif,system-ui,sans-serif;text-transform:uppercase;}
  .responsive-table td:first-child{display:block;padding-bottom:10px;}
  .responsive-table td:first-child::before{display:block;margin-bottom:4px;}
}

/* Modal navigation is present only while the mobile drawer is open. */
.drawer-close{min-height:44px;flex:none;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:8px;font:inherit;}
.columns-plot{height:160px;display:grid;min-width:0;padding:0 8px;position:relative;gap:10px;flex:none;}
.columns-plot::before{content:"";position:absolute;inset:0 8px 26px;background:repeating-linear-gradient(to top,var(--line) 0 1px,transparent 1px 33.5px);pointer-events:none;}
.column-group{min-width:0;display:grid;grid-template-rows:134px 26px;z-index:1;}
.column-bars{display:flex;align-items:flex-end;justify-content:center;gap:6px;min-width:0;}
.column-bar{display:block;flex:0 1 28px;width:28px;max-width:28px;border-radius:3px 3px 0 0;}
.column-label{font:400 12px/18px Inter,ui-sans-serif,system-ui,sans-serif;color:var(--muted);text-align:center;padding-top:6px;white-space:nowrap;}
.columns-legend{display:flex;gap:18px;flex-wrap:wrap;}
@media (max-width:420px){.columns-plot{gap:4px;padding:0;}.column-bars{gap:3px;}.column-label{font-size:11px;}.columns-legend{gap:8px;}.columns-legend li{font-size:12px;}}