:root { --navy:#102a43; --blue:#1666ba; --cyan:#25a8e0; --green:#138a64; --orange:#e68a2e; --ink:#172b3a; --muted:#667b8c; --line:#dce5eb; --surface:#fff; --background:#f3f7fa; }
* { box-sizing:border-box; }
body { margin:0; background:var(--background); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
.topbar { background:linear-gradient(120deg,#0e2942,#133d62); color:#fff; padding:30px max(24px,calc((100vw - 1440px)/2)); display:flex; justify-content:space-between; align-items:center; gap:30px; box-shadow:0 4px 20px #102a4326; }
h1,h2,h3,p { margin:0; } h1 { font-size:clamp(1.65rem,3vw,2.35rem); letter-spacing:-.035em; } h2 { font-size:1.32rem; } h3 { font-size:1rem; }
.eyebrow { color:#67c6ee; font-size:.72rem; font-weight:800; letter-spacing:.16em; margin-bottom:5px; }
.subtitle { color:#c8d9e8; margin-top:7px; }
.sync-panel { display:grid; grid-template-columns:auto auto; justify-items:end; align-items:center; gap:8px 12px; }
.live-actions { display:flex; align-items:center; gap:8px; }
.last-sync { color:#b9cddd; font-size:.76rem; } .source-badge { border-radius:999px; padding:5px 10px; background:#ffffff18; font-size:.74rem; font-weight:750; } .source-badge.odk { background:#0c9b6e; } .source-badge.csv { background:#d87925; }
.sync-status { grid-column:1/-1; color:#c7e7f5; font-size:.74rem; font-weight:650; }
.session-actions { grid-column:1/-1; display:flex; gap:8px; }
.header-button { border:1px solid #ffffff55; border-radius:7px; background:#fff; color:#123653; cursor:pointer; padding:7px 11px; font:inherit; font-size:.75rem; font-weight:750; }
.header-button.subtle { background:#ffffff12; color:#fff; }
.header-button:disabled { cursor:not-allowed; opacity:.55; }
.sync-status::before { content:""; display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#55d7a2; box-shadow:0 0 0 3px #55d7a226; }
.sync-status.loading::before { background:#ffd166; animation:pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity:.35; } }
.button { border:0; border-radius:7px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:10px 15px; font:inherit; font-size:.84rem; font-weight:750; transition:transform .15s,opacity .15s; }
.button:hover { transform:translateY(-1px); } .button:disabled { cursor:not-allowed; opacity:.5; transform:none; } .primary { background:#34afe2; color:#07233a; } .secondary { background:#ffffff16; border:1px solid #ffffff40; color:#fff; } .dark { background:var(--navy); color:#fff; }
main { max-width:1440px; margin:0 auto; padding:24px; }
.notice { border-radius:8px; margin-bottom:18px; padding:12px 15px; font-size:.88rem; } .notice.success { background:#e3f7ee; border:1px solid #a8dfca; color:#076847; } .notice.error { background:#fff0ee; border:1px solid #f4c2bb; color:#a12920; } .hidden { display:none; }
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin-bottom:20px; }
.kpi { background:var(--surface); border:1px solid var(--line); border-top:4px solid var(--blue); border-radius:10px; min-height:142px; padding:20px; box-shadow:0 4px 14px #263f5208; display:flex; flex-direction:column; }
.kpi.received { border-top-color:var(--green); } .kpi.remaining { border-top-color:var(--orange); } .kpi.progress-card { border-top-color:var(--cyan); }
.kpi.compact { grid-column:span 2; min-height:110px; }
.kpi.issues { border-top-color:#b84b4b; }
.kpi span { color:var(--muted); font-size:.76rem; font-weight:750; text-transform:uppercase; letter-spacing:.08em; } .kpi strong { color:var(--navy); font-size:2rem; letter-spacing:-.04em; margin:9px 0 3px; } .kpi small { color:var(--muted); margin-top:auto; }
.progress { height:7px; border-radius:8px; background:#e5edf2; overflow:hidden; margin-top:auto; } .progress div { height:100%; background:linear-gradient(90deg,var(--blue),var(--cyan)); transition:width .4s; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:20px; margin-bottom:20px; box-shadow:0 4px 14px #263f5208; }
.diagnostics summary { cursor:pointer; color:var(--navy); font-weight:800; }
.diagnostic-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:16px; }
.diagnostic-grid div { background:#f4f8fb; border-radius:7px; padding:10px 12px; overflow:hidden; }
.diagnostic-grid span { display:block; color:var(--muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; }
.diagnostic-grid strong { display:block; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.82rem; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:16px; } .section-heading .eyebrow { color:var(--blue); }
.text-button { border:0; background:transparent; color:var(--blue); font-weight:750; cursor:pointer; padding:5px; } .text-button:disabled { color:#a8b7c2; cursor:not-allowed; }
.filter-grid { display:grid; grid-template-columns:1.6fr 1.2fr 1fr 1fr; gap:12px; }
label { color:var(--muted); display:flex; flex-direction:column; gap:6px; font-size:.74rem; font-weight:700; }
input,select { width:100%; border:1px solid #cbd8e1; border-radius:7px; background:#fff; color:var(--ink); min-height:40px; padding:8px 10px; font:inherit; font-size:.84rem; outline:none; } input:focus,select:focus { border-color:var(--blue); box-shadow:0 0 0 3px #1666ba15; }
.filter-count,.help { color:var(--muted); font-size:.78rem; margin-top:12px; } .chart-selector { width:260px; } .chart-selector select { min-height:88px; }
.tracker-search { max-width:360px; }
.tracker-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:4px; }
.tracker-actions { display:flex; align-items:center; gap:12px; }
.tracker-actions .filter-count { margin-top:0; }
.tabs { display:flex; flex-wrap:wrap; gap:7px; }
.tab { border:1px solid #c9d8e2; border-radius:999px; background:#fff; color:var(--blue); cursor:pointer; padding:7px 12px; font:inherit; font-size:.76rem; font-weight:750; }
.tab.active { background:var(--blue); border-color:var(--blue); color:#fff; }
.tracker-table { margin-top:14px; max-height:560px; }
.mono { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.04em; }
.status-pill,.warning-pill { border-radius:999px; display:inline-block; padding:4px 8px; font-size:.68rem; font-weight:800; }
.status-pill.submitted { background:#dcf4e9; color:#08724e; }
.status-pill.pending { background:#fff0e1; color:#a45b13; }
.status-pill.used_unmatched { background:#fde6e4; color:#a62e27; }
.warning-pill { background:#fce8c7; color:#825000; margin-left:5px; }
code { color:#174f7c; background:#edf5fb; border-radius:4px; padding:1px 4px; }
.charts-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; margin-top:17px; }
.chart-card { border:1px solid var(--line); border-radius:8px; padding:16px; } .chart-title { display:flex; align-items:center; justify-content:space-between; padding-bottom:12px; border-bottom:1px solid #edf2f5; margin-bottom:12px; } .chart-title span { color:var(--muted); font-size:.72rem; }
.bar-row { margin:9px 0; } .bar-label { display:flex; justify-content:space-between; gap:10px; font-size:.75rem; margin-bottom:4px; } .bar-label span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bar-label strong { color:var(--navy); }
.bar-track { height:7px; border-radius:7px; background:#edf2f5; overflow:hidden; } .bar-fill { height:100%; border-radius:7px; background:linear-gradient(90deg,var(--blue),var(--cyan)); }
.insight-note { margin:-7px 0 16px; }
.insight-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:15px; }
.insight-kpis article { background:linear-gradient(145deg,#f4f9fc,#fff); border:1px solid var(--line); border-radius:9px; min-height:120px; padding:17px; display:flex; flex-direction:column; }
.insight-kpis span { color:var(--muted); font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.insight-kpis strong { color:var(--navy); font-size:1.8rem; letter-spacing:-.035em; margin:8px 0 3px; }
.insight-kpis small { color:var(--muted); margin-top:auto; }
.insights-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.insight-card { border:1px solid var(--line); border-radius:9px; min-height:260px; padding:17px; }
.compact-empty { padding:28px 12px; }
.distribution-bar { display:flex; height:28px; overflow:hidden; border-radius:7px; margin:22px 0 18px; background:#edf2f5; }
.distribution-bar span { min-width:0; transition:width .35s; }
.distribution-legend { display:grid; gap:8px; }
.distribution-legend div { display:grid; grid-template-columns:10px 1fr auto; align-items:center; gap:8px; color:var(--muted); font-size:.75rem; }
.distribution-legend i { width:9px; height:9px; border-radius:50%; }
.distribution-legend strong { color:var(--navy); }
.theme-row { margin:10px 0; }
.theme-label { display:flex; justify-content:space-between; gap:10px; font-size:.76rem; }
.theme-label span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.theme-label strong { color:var(--navy); }
.theme-track { height:7px; margin:5px 0 3px; background:#e9f0f4; border-radius:8px; overflow:hidden; }
.theme-track span { display:block; height:100%; border-radius:8px; background:linear-gradient(90deg,var(--blue),var(--cyan)); }
.theme-row small { color:var(--muted); font-size:.66rem; }
.finding-row { display:grid; grid-template-columns:29px 1fr; gap:10px; padding:11px 0; border-bottom:1px solid #edf2f5; }
.finding-row:last-child { border-bottom:0; }
.finding-rank { width:27px; height:27px; display:grid; place-items:center; border-radius:50%; background:#e5f4ed; color:#08724e; font-size:.72rem; font-weight:800; }
.finding-row.opportunity .finding-rank { background:#fff0e1; color:#a45b13; }
.finding-row p { color:var(--ink); font-size:.76rem; line-height:1.35; margin:2px 0 5px; }
.finding-row small { color:var(--muted); font-size:.68rem; }
.table-actions { display:flex; align-items:center; gap:12px; } .record-badge { color:var(--blue); background:#e8f2fb; border-radius:999px; padding:5px 10px; font-size:.75rem; font-weight:750; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:8px; max-height:620px; } table { border-collapse:collapse; width:100%; font-size:.78rem; } th { position:sticky; top:0; z-index:1; background:#eef4f8; color:#4c6578; text-transform:uppercase; letter-spacing:.04em; font-size:.68rem; } th,td { border-bottom:1px solid #e7edf1; padding:10px 12px; text-align:left; max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } tbody tr:hover { background:#f7fafc; }
.empty { color:var(--muted); padding:38px; text-align:center; grid-column:1/-1; } .pagination { display:flex; justify-content:flex-end; align-items:center; gap:15px; color:var(--muted); font-size:.78rem; margin-top:12px; }
footer { color:var(--muted); text-align:center; padding:8px 24px 30px; font-size:.74rem; }
@media(max-width:1100px) { .filter-grid { grid-template-columns:repeat(2,1fr); } .kpi-grid { grid-template-columns:repeat(2,1fr); } .diagnostic-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:720px) { .topbar { align-items:flex-start; flex-direction:column; padding:24px; } .sync-panel { grid-template-columns:1fr; justify-items:start; } .sync-status { grid-column:auto; } main { padding:14px; } .kpi-grid,.charts-grid,.filter-grid,.diagnostic-grid,.insights-grid,.insight-kpis { grid-template-columns:1fr; } .kpi.compact { grid-column:span 1; } .section-heading { align-items:flex-start; flex-direction:column; } .chart-selector,.tracker-search { width:100%; max-width:none; } .tracker-toolbar { align-items:flex-start; flex-direction:column; } .tracker-actions { width:100%; justify-content:space-between; } .table-actions { width:100%; justify-content:space-between; } }


/* Consistent quota-progress indicators */
.quota-status { border:1px solid transparent; border-radius:999px; padding:5px 10px; font-size:.74rem; font-weight:800; }
.quota-status::before,.tab.band-not-started::before,.tab.band-early::before,.tab.band-in-progress::before,.tab.band-near-target::before,.tab.band-complete::before {
  content:""; display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:currentColor;
}
.quota-status.band-not-started { background:#fbe7e7; border-color:#efbcbc; color:#962f2f; }
.quota-status.band-early { background:#fff0dd; border-color:#efcc9e; color:#9a570f; }
.quota-status.band-in-progress { background:#e5f0fb; border-color:#b6d2ec; color:#145c9e; }
.quota-status.band-near-target { background:#def4f2; border-color:#a8dcd7; color:#08756e; }
.quota-status.band-complete { background:#dcf4e9; border-color:#a8ddc7; color:#08724e; }

.kpi.band-not-started { border-top-color:#b94444; background:linear-gradient(180deg,#fff8f8,#fff 44%); }
.kpi.band-early { border-top-color:#d58322; background:linear-gradient(180deg,#fffaf3,#fff 44%); }
.kpi.band-in-progress { border-top-color:#2775b8; background:linear-gradient(180deg,#f5faff,#fff 44%); }
.kpi.band-near-target { border-top-color:#15938a; background:linear-gradient(180deg,#f2fbfa,#fff 44%); }
.kpi.band-complete { border-top-color:#16805c; background:linear-gradient(180deg,#f2fbf7,#fff 44%); }

.progress div.band-not-started { background:#b94444; }
.progress div.band-early { background:linear-gradient(90deg,#c66b19,#e6a13e); }
.progress div.band-in-progress { background:linear-gradient(90deg,#1666ba,#25a8e0); }
.progress div.band-near-target { background:linear-gradient(90deg,#08756e,#36b7ad); }
.progress div.band-complete { background:linear-gradient(90deg,#08724e,#3cad7d); }
.progress-card #progressStatus { margin:1px 0 9px; }
.progress-card .progress { margin-top:auto; }

.tab.band-not-started { border-color:#e1a5a5; color:#962f2f; }
.tab.band-early { border-color:#e5bd86; color:#9a570f; }
.tab.band-in-progress { border-color:#9fc4e5; color:#145c9e; }
.tab.band-near-target { border-color:#8dcec8; color:#08756e; }
.tab.band-complete,.tab.status-clear { border-color:#9ed5bd; color:#08724e; }
.tab.status-alert { border-color:#e1a5a5; color:#962f2f; }
.tab.active { color:#fff; }
.tab.active::before { background:currentColor; }

.tracker-row td:first-child { border-left:4px solid transparent; }
.tracker-row-pending td:first-child { border-left-color:#d58322; }
.tracker-row-submitted td:first-child { border-left-color:#16805c; }
.tracker-row-used_unmatched td:first-child,.tracker-row-issue td:first-child { border-left-color:#b94444; }
.tracker-row-pending:hover { background:#fffaf3; }
.tracker-row-submitted:hover { background:#f2fbf7; }
.tracker-row-used_unmatched:hover,.tracker-row-issue:hover { background:#fff6f6; }

@media(max-width:720px) {
  .quota-status { justify-self:start; }
}

.login-page { min-height:100vh; background:linear-gradient(145deg,#0e2942,#1666ba); }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login-card { width:min(430px,100%); background:#fff; border-radius:14px; box-shadow:0 24px 70px #06192c66; padding:34px; }
.login-card h1 { color:var(--navy); }
.login-card .eyebrow { color:var(--blue); }
.login-intro { color:var(--muted); line-height:1.55; margin:9px 0 25px; }
.login-card form { display:grid; gap:16px; }
.login-card .button { min-height:44px; margin-top:3px; }
.login-card small { display:block; color:var(--muted); text-align:center; margin-top:20px; }
.login-error { background:#fff0ee; border:1px solid #f4c2bb; border-radius:7px; color:#a12920; font-size:.78rem; padding:9px 11px; }
@media(max-width:720px) { .session-actions { grid-column:auto; } }