/* Scientists Analytics Dashboard (scientists-analytics.aspx), redesigned 3 Oct 2026.
   Chart pieces (.nck-*) come from App_Code/NsdChartKit.cs, same look as the NSD admin charts. */

.sa-page {
  --sa-green: #0a4074;
  --sa-text: #25364a;
  --sa-muted: #62748b;
  --sa-line: #e4ebf2;
  --sa-soft: #f5f8fb;
  margin: 18px 0 40px;
  color: var(--sa-text);
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  text-align: left;
}

.sa-page *, .sa-page *::before, .sa-page *::after { box-sizing: border-box; }

/* Hero */
.sa-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  align-items: stretch;
  margin-bottom: 18px;
}

.sa-hero-text {
  padding: 24px 26px;
  border-radius: 18px;
  background: linear-gradient(135deg, #006b37 0%, #008542 55%, #0b8f6a 100%);
  color: #fff;
  box-shadow: 0 10px 28px rgba(0, 80, 40, .18);
}

.sa-eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  color: #e6fff0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.sa-hero h1 {
  margin: 4px 0 10px !important;
  color: #fff !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

.sa-hero p {
  margin: 0 0 16px;
  color: #eafff2;
  font-size: 14.5px;
  line-height: 1.65;
  text-align: left;
}

.sa-hero p strong { color: #fff; }

.sa-links { display: flex; flex-wrap: wrap; gap: 8px; }

.sa-links a,
.sa-links span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
}

.sa-links a:hover, .sa-links a:focus { background: rgba(255, 255, 255, .26); }
.sa-links a:focus { outline: 3px solid #fff; outline-offset: 2px; }
.sa-links .is-current { background: #fff; color: var(--sa-green) !important; }

.sa-hero-gauge {
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  border: 1px solid var(--sa-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 22px rgba(10, 64, 116, .06);
}

.sa-hero-gauge h2 {
  margin: 0 0 6px !important;
  color: var(--sa-text) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* Top row: numbers + verification gauge */
.sa-top {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}

.sa-top .sa-kpis { flex: 0 0 auto; align-items: end; margin: auto 0; }

.sa-top .nck-gauge svg { max-width: 220px; }

/* Cards */
.sa-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.sa-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 18px 20px 20px;
  border: 1px solid var(--sa-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 22px rgba(10, 64, 116, .06);
}

.sa-wide { margin-bottom: 18px; }

.sa-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 10px;
  margin-bottom: 14px;
}

.sa-head h2 {
  margin: 0 !important;
  color: var(--sa-green) !important;
  font-family: inherit;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

.sa-head span {
  padding: 3px 10px;
  border-radius: 999px;
  background: #f3f6f4;
  color: #66737a;
  font-size: 12px;
  white-space: nowrap;
}

.sa-empty { margin: 10px 0; color: var(--sa-muted); font-size: 14px; }
.sa-error { padding: 12px 14px; border-left: 4px solid #b42318; border-radius: 8px; background: #fff5f4; color: #b42318; font-weight: 700; }

/* KPI strip with a coloured line under each figure */
.sa-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }

.sa-kpi {
  position: relative;
  padding: 0 16px 16px;
  border-left: 1px solid var(--sa-line);
}

.sa-kpi:first-child { padding-left: 0; border-left: 0; }

.sa-kpi span { display: block; color: var(--sa-muted); font-size: 12.5px; }
.sa-kpi strong { display: block; margin-top: 4px; color: var(--sa-text); font-size: 30px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }

.sa-kpi i {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  border-radius: 999px;
  background: var(--c);
}

.sa-kpi i::after {
  content: "";
  position: absolute;
  right: -2px; top: -4px;
  width: 12px; height: 12px;
  border: 3px solid var(--c);
  border-radius: 50%;
  background: #fff;
}

/* Horizontal bars in hatched tracks */
.sa-bars { display: grid; gap: 11px; }

.sa-bar {
  display: grid;
  grid-template-columns: minmax(110px, 38%) minmax(0, 1fr) 56px;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.sa-bar-l { overflow: hidden; color: #33413a; text-overflow: ellipsis; white-space: nowrap; }

.sa-bar-t {
  position: relative;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: repeating-linear-gradient(135deg, #eef2f0 0 5px, #f8faf9 5px 10px);
}

.sa-bar-t i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; }
.sa-bar strong { color: var(--sa-text); font-variant-numeric: tabular-nums; text-align: right; }

/* Donut with legend */
.sa-donut { display: flex; align-items: center; gap: 22px; }
.sa-donut svg { flex: 0 0 190px; width: 190px; height: 190px; }
.sa-donut-v { fill: #1f2d27; font-family: "Segoe UI", sans-serif; font-size: 26px; font-weight: 800; }
.sa-donut-c { fill: #7a8781; font-family: "Segoe UI", sans-serif; font-size: 12px; }

.sa-legend { flex: 1; display: grid; gap: 9px; min-width: 0; }

.sa-legend > div {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) 70px 48px 44px;
  align-items: center;
  gap: 8px;
  color: #3c4a44;
  font-size: 12.5px;
}

.sa-legend i { width: 10px; height: 10px; border-radius: 50%; }
.sa-legend-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-legend-t { position: relative; height: 6px; border-radius: 999px; background: repeating-linear-gradient(135deg, #eef2f0 0 4px, #f8faf9 4px 8px); overflow: hidden; }
.sa-legend-t b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; }
.sa-legend strong { color: var(--sa-text); font-variant-numeric: tabular-nums; text-align: right; }
.sa-legend small { color: #7a8781; font-size: 11.5px; text-align: right; }

/* Segmented bar */
.sa-seg-bar { display: flex; gap: 5px; height: 22px; margin: 8px 0 18px; }
.sa-seg-bar span { min-width: 8px; border-radius: 999px; }

.sa-foot {
  margin: 20px 0 0;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--sa-soft);
  color: var(--sa-muted);
  font-size: 13px;
  line-height: 1.6;
}

.sa-foot a { color: var(--sa-green); font-weight: 700; }

/* ---- NsdChartKit pieces (copied from Scientist/Admin/admin-shell.css) ---- */
.sa-page .nck-pills { display: flex; align-items: flex-end; justify-content: space-around; gap: 10px; flex: 1; min-height: 250px; }
.sa-page .nck-pill { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; max-width: 80px; min-width: 0; }
.sa-page .nck-pill-v { font-size: 14px; font-weight: 800; color: #1f2d27; font-variant-numeric: tabular-nums; }
.sa-page .nck-pill-track { position: relative; width: 100%; max-width: 50px; height: 190px; border-radius: 999px; overflow: hidden;
  background: repeating-linear-gradient(135deg, #eef2f0 0 6px, #f8faf9 6px 12px); }
.sa-page .nck-pill-track i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 999px; box-shadow: inset 0 -10px 18px rgba(0,0,0,.08); }
.sa-page .nck-pill-l { display: -webkit-box; height: 44px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 11.5px; color: #5c6870; text-align: center; line-height: 1.25; overflow-wrap: anywhere; }
.sa-page .nck-gauge { display: flex; flex-direction: column; align-items: center; flex: 1; justify-content: center; }
.sa-page .nck-gauge svg { width: 100%; max-width: 260px; height: auto; }
.sa-page .nck-gauge-v { font-size: 34px; font-weight: 800; fill: #1f2d27; font-family: "Segoe UI", sans-serif; }
.sa-page .nck-gauge-c { font-size: 13px; color: #5c6870; margin-top: 4px; text-align: center; }
.sa-page .nck-ring { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sa-page .nck-ring svg { width: 100%; max-width: 210px; height: auto; }
.sa-page .nck-ring-v { font-size: 26px; font-weight: 800; fill: #1f2d27; font-family: "Segoe UI", sans-serif; }
.sa-page .nck-ring-c { font-size: 12px; fill: #7a8781; font-family: "Segoe UI", sans-serif; }
.sa-page .nck-ring-legend { display: flex; flex-wrap: wrap; justify-content: space-around; width: 100%; gap: 8px; }
.sa-page .nck-ring-legend div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sa-page .nck-ring-legend strong { font-size: 18px; color: #1f2d27; }
.sa-page .nck-ring-legend span { font-size: 12px; color: #5c6870; display: flex; align-items: center; gap: 5px; }
.sa-page .nck-ring-legend i { width: 9px; height: 9px; border-radius: 50%; }
.sa-page .nck-conc { display: flex; align-items: center; gap: 22px; }
.sa-page .nck-conc svg { flex: 0 0 180px; width: 180px; height: 180px; }
.sa-page .nck-conc-legend { flex: 1; display: grid; gap: 12px; min-width: 0; }
.sa-page .nck-conc-legend div { display: grid; grid-template-columns: 12px 1fr auto 46px; align-items: center; gap: 10px; font-size: 13px; color: #3c4a44; }
.sa-page .nck-conc-legend i { width: 12px; height: 12px; border-radius: 4px; }
.sa-page .nck-conc-legend strong { font-variant-numeric: tabular-nums; color: #1f2d27; }
.sa-page .nck-conc-legend small { text-align: right; color: #7a8781; font-size: 12px; }

/* Responsive */
@media (max-width: 1100px) {
  .sa-donut, .sa-page .nck-conc { flex-direction: column; align-items: stretch; }
  .sa-donut svg, .sa-page .nck-conc svg { align-self: center; }
}

@media (max-width: 900px) {
  .sa-hero, .sa-grid, .sa-top { grid-template-columns: 1fr; }
  .sa-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .sa-kpi:nth-child(3) { padding-left: 0; border-left: 0; }
  .sa-page .nck-pills { overflow-x: auto; justify-content: flex-start; padding-bottom: 6px; }
  .sa-page .nck-pill { flex: 0 0 62px; }
}

@media (max-width: 560px) {
  .sa-hero-text, .sa-card { padding: 16px; }
  .sa-hero h1 { font-size: 23px !important; }
  .sa-kpi strong { font-size: 24px; }
  .sa-bar { grid-template-columns: minmax(0, 1fr) 50px; }
  .sa-bar-t { grid-column: 1 / -1; grid-row: 2; }
  .sa-legend > div { grid-template-columns: 10px minmax(0, 1fr) 48px 40px; }
  .sa-legend-t { display: none; }
}

/* Intro text below the page heading panel */
.sa-intro { margin: 6px 0 22px; }
.sa-intro p { margin: 0 0 12px; color: #33413a; }

/* Page heading: plain H1 in the site blue with a short gold rule */
html body .sa-h1 {
  margin: 22px 0 14px !important;
  padding: 0 0 10px !important;
  color: #0a4074 !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-align: left !important;
  text-shadow: none !important;
  position: relative;
}

html body .sa-h1::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 64px; height: 4px;
  border-radius: 999px;
  background: #d9a441;
}

.sa-intro p { color: #25364a; }

@media (max-width: 560px) {
  html body .sa-h1 { font-size: 23px !important; }
}

/* White background throughout (3 Oct 2026) */
html body .sa-page,
html body .sa-intro { background: #fff !important; }
.sa-page .sa-foot { background: #fff; border: 1px solid var(--sa-line); }
.sa-page .sa-head span { background: #fff; border: 1px solid var(--sa-line); }

/* KPI tiles (3 Oct 2026): 2 x 2 soft coloured tiles with icon, number and mini bars */
.sa-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; flex: 1; }
.sa-tile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  gap: 6px 10px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--tb);
  border-radius: 14px;
  background: var(--tt);
}
.sa-tile-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.sa-tile-ico {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 34px; width: 34px; height: 34px;
  border-radius: 10px;
  background: #fff;
  color: var(--c);
  font-size: 15px;
  box-shadow: 0 2px 8px rgba(10, 64, 116, .08);
}
.sa-tile-lbl { color: #3c4a5c; font-size: 13px; font-weight: 600; line-height: 1.3; }
.sa-tile-num { align-self: end; color: #1f2d3d; font-size: 30px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.sa-tile-num small { display: block; margin-top: 4px; color: #62748b; font-size: 11.5px; font-weight: 500; }
.sa-tile-bars { align-self: end; display: flex; align-items: flex-end; gap: 4px; height: 40px; }
.sa-tile-bars i { display: block; width: 7px; border-radius: 999px; background: rgba(37, 54, 74, .16); }
.sa-tile-bars i.is-top { background: var(--c); }

@media (max-width: 560px) {
  .sa-tiles { grid-template-columns: 1fr; }
  .sa-tile-num { font-size: 26px; }
}