
:root{
  --bg:#f4f6f8;
  --panel:#ffffff;
  --ink:#101828;
  --muted:#667085;
  --border:#d7dde5;
  --navy:#071f34;
  --navy2:#0d3456;
  --teal:#00a6a6;
  --blue:#2d6cdf;
  --green:#1f7a4d;
  --red:#b42318;
  --amber:#b7791f;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);font-family:Inter,'Segoe UI',Arial,sans-serif;color:var(--ink)}
.app{width:100%;min-height:100vh;padding:22px 26px 36px}
.hero{
  background:linear-gradient(135deg,var(--navy),var(--navy2));
  color:white;border-radius:18px;padding:24px 28px;
  display:flex;justify-content:space-between;gap:28px;align-items:flex-start;
  box-shadow:0 14px 32px rgba(16,24,40,.14);margin-bottom:16px
}
.brand-kicker{letter-spacing:.2em;text-transform:uppercase;color:#a7bdd1;font-size:11px;font-weight:900;margin-bottom:7px}
.hero h1{font-size:31px;line-height:1.05;margin:0;font-weight:900}
.subtitle{margin:9px 0 0;color:#d7e3ef;font-size:14px;max-width:860px}
.sourcebox{font-size:12px;line-height:1.55;color:#d5e3ef;text-align:right;min-width:310px}
.sourcebox a{color:white;text-decoration:underline;font-weight:700}
.filter-panel{
  background:white;border:1px solid var(--border);border-radius:18px;
  padding:16px 18px;margin-bottom:15px;box-shadow:0 10px 26px rgba(16,24,40,.045)
}
.filter-grid{display:grid;grid-template-columns:1fr 1fr 2.1fr 1.15fr 1.2fr;gap:14px;align-items:end}
.filter-label{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:#475467;font-weight:900;margin:0 0 7px}
.radio label{display:block;margin:5px 0;font-size:13px;color:#344054;font-weight:650}
.selection-summary{
  margin-top:13px;padding:10px 12px;border-radius:12px;background:#f8fafc;border:1px solid #e4e7ec;
  color:#344054;font-size:13px;display:flex;flex-wrap:wrap;gap:8px;align-items:center
}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;background:white;border:1px solid #d7dde5;border-radius:999px;font-size:12px;color:#344054}
.chip strong{color:#101828}
.kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(145px,1fr));gap:13px;margin:14px 0 16px}
.kpi-card{background:white;border:1px solid var(--border);border-radius:15px;padding:15px 16px;box-shadow:0 10px 25px rgba(16,24,40,.045)}
.kpi-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:900}
.kpi-value{font-size:24px;font-weight:900;margin-top:8px;color:#101828;line-height:1.1}
.kpi-note{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.35}
.kpi-card.negative .kpi-value{color:var(--red)}.kpi-card.positive .kpi-value{color:var(--green)}
.tabs{margin:11px 0 16px}
.tabs .tab{border:1px solid var(--border)!important;background:white!important;color:#344054!important;font-weight:850!important;padding:13px 12px!important}
.tabs .tab--selected{background:var(--navy)!important;color:white!important;border-color:var(--navy)!important}
.page-content{width:100%}
.panel{background:white;border:1px solid var(--border);border-radius:18px;padding:18px 18px 12px;box-shadow:0 12px 30px rgba(16,24,40,.055);width:100%}
.panel-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:7px}
.panel-title{font-size:20px;font-weight:900;margin:0;color:#101828}
.panel-subtitle{font-size:13.2px;color:var(--muted);line-height:1.45;margin:6px 0 0;max-width:1200px}
.chart{height:720px;width:100%}
.datatable-wrap{padding-top:10px}
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table{font-family:Inter,'Segoe UI',Arial,sans-serif!important}
.dash-table-container{font-size:12px}
.warn{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:12px;padding:12px 14px;margin-bottom:14px;font-size:13px}
@media(max-width:1200px){
  .hero{display:block}.sourcebox{text-align:left;margin-top:16px}
  .filter-grid{grid-template-columns:1fr 1fr}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
}


.brandwrap{display:flex;align-items:flex-start;gap:16px}
.footer-disclaimer{
  margin-top:18px;padding:14px 16px;border:1px solid var(--border);border-radius:14px;background:#fff;
  color:#667085;font-size:12px;line-height:1.5;box-shadow:0 8px 20px rgba(16,24,40,.035)
}
.warn{
  background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:14px;
  padding:16px 18px;font-size:14px;font-weight:650
}

.erms-logo{height:62px;max-width:185px;object-fit:contain;display:block}
.brandwrap{display:flex;align-items:center;gap:18px}
.local-controls{
  margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.local-control-card{
  background:#f8fafc;border:1px solid #e4e7ec;border-radius:12px;padding:12px
}
.footer-disclaimer{
  margin-top:18px;padding:14px 16px;border:1px solid var(--border);border-radius:14px;background:#fff;
  color:#667085;font-size:12px;line-height:1.5;box-shadow:0 8px 20px rgba(16,24,40,.035)
}
.warn{
  background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:14px;
  padding:16px 18px;font-size:14px;font-weight:650
}
@media(max-width:1200px){.local-controls{grid-template-columns:1fr}.erms-logo{height:54px}}

.filter-grid{grid-template-columns:1fr 1fr 2.1fr 1.15fr!important}
.erms-logo{height:62px;max-width:220px;object-fit:contain;display:block}
.brandwrap{display:flex;align-items:center;gap:18px}
.local-controls{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.local-control-card{background:#f8fafc;border:1px solid #e4e7ec;border-radius:12px;padding:12px}
.footer-disclaimer{
  margin-top:18px;padding:14px 16px;border:1px solid var(--border);border-radius:14px;background:#fff;
  color:#667085;font-size:12px;line-height:1.5;box-shadow:0 8px 20px rgba(16,24,40,.035)
}
.warn{
  background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:14px;
  padding:16px 18px;font-size:14px;font-weight:650
}
@media(max-width:1200px){.local-controls{grid-template-columns:1fr}.erms-logo{height:54px}.filter-grid{grid-template-columns:1fr 1fr!important}}

.filter-grid{grid-template-columns:1fr 1fr 2.1fr 1.15fr!important}
.logo-card{
  background:#050505;
  border:1px solid rgba(255,255,255,.22);
  border-radius:14px;
  padding:8px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:170px;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}
.erms-logo{height:58px;max-width:185px;object-fit:contain;display:block}
.brandwrap{display:flex;align-items:center;gap:18px}
.local-controls{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.local-control-card{background:#f8fafc;border:1px solid #e4e7ec;border-radius:12px;padding:12px}
.footer-disclaimer{
  margin-top:18px;padding:14px 16px;border:1px solid var(--border);border-radius:14px;background:#fff;
  color:#667085;font-size:12px;line-height:1.5;box-shadow:0 8px 20px rgba(16,24,40,.035)
}
.warn{
  background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:14px;
  padding:16px 18px;font-size:14px;font-weight:650
}
@media(max-width:1200px){
  .local-controls{grid-template-columns:1fr}
  .erms-logo{height:50px}
  .logo-card{min-width:145px}
  .filter-grid{grid-template-columns:1fr 1fr!important}
}

:root{
  --navy:#061E2A;
  --navy2:#0A2F3A;
  --teal:#0B6F73;
  --blue:#0B6F73;
  --green:#0B6F73;
  --red:#D71920;
}
.hero{
  background:linear-gradient(135deg,#050505 0%, #061E2A 58%, #0A2F3A 100%)!important;
  border-bottom:4px solid #D71920;
}
.logo-card{
  background:#050505!important;
  border:1px solid rgba(255,255,255,.28)!important;
  border-radius:14px!important;
  padding:10px 14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:225px!important;
  max-width:260px!important;
  box-shadow:0 10px 24px rgba(0,0,0,.20)!important;
}
.erms-logo{
  width:230px!important;
  height:auto!important;
  max-height:92px!important;
  object-fit:contain!important;
  display:block!important;
}
.tabs .tab--selected{background:#061E2A!important;border-color:#061E2A!important}
.kpi-card{border-top:3px solid rgba(11,111,115,.18)}
.kpi-card.negative{border-top-color:#D71920}
.kpi-card.positive{border-top-color:#0B6F73}
@media(max-width:1200px){
  .logo-card{min-width:190px!important;max-width:220px!important}
  .erms-logo{width:200px!important;max-height:82px!important}
}

.header-chip{
  margin-top:7px;
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  color:#e5edf3;
  font-size:11px;
  display:inline-block;
  margin-left:6px;
}
.methodology-note{
  margin-top:18px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  color:#344054;
  font-size:12px;
  line-height:1.5;
  box-shadow:0 8px 20px rgba(16,24,40,.035);
}
.methodology-note summary{
  cursor:pointer;
  font-weight:850;
  color:#061E2A;
  margin-bottom:8px;
}
.methodology-note p{
  margin:7px 0;
  color:#475467;
}

/* v17 public-access logo visibility fix */
.logo-card{
  background:#ffffff!important;
  border:1px solid rgba(6,30,42,.18)!important;
  border-radius:16px!important;
  padding:12px 16px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:245px!important;
  max-width:290px!important;
  box-shadow:0 12px 26px rgba(0,0,0,.20)!important;
}
.erms-logo{
  width:250px!important;
  height:auto!important;
  max-height:96px!important;
  object-fit:contain!important;
  display:block!important;
}
@media(max-width:1200px){
  .logo-card{min-width:205px!important;max-width:245px!important;padding:10px 12px!important}
  .erms-logo{width:220px!important;max-height:86px!important}
}
