/* =============================================
   ADSPHCDA Dashboard Styles
   Extends style.css — uses same CSS variables
   ============================================= */

/* ── Page Banner override ─────────────────── */
.page-banner-inner {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}
.page-banner code {
  background: rgba(255,255,255,0.15); padding: .1em .5em;
  border-radius: 3px; font-size: .85em;
}
.banner-meta { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.banner-file-tag {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 2rem; padding: .35rem .9rem;
  font-family: var(--font-ui); font-size: .78rem;
  color: rgba(255,255,255,0.85);
}
.btn-sm { padding: .4rem 1rem; font-size: .82rem; }

/* ── Loading / Error ──────────────────────── */
.dash-loading {
  display: flex; align-items: center; justify-content: center;
  min-height: 320px;
}
.dash-loading-inner { text-align: center; }
.dash-spinner {
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid var(--color-green-light);
  border-top-color: var(--color-green);
  animation: dashSpin .75s linear infinite;
  margin: 0 auto 1rem;
}
@keyframes dashSpin { to { transform: rotate(360deg); } }
.dash-loading-text {
  font-family: var(--font-ui); font-size: .9rem;
  color: var(--color-text-muted);
}
.dash-error-box {
  max-width: 520px; margin: 3rem auto; text-align: center;
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 2.5rem;
  box-shadow: var(--shadow-md);
}
.dash-error-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.dash-error-box h3 { color: var(--color-green-dark); margin-bottom: .5rem; }
.dash-error-box p  { color: var(--color-text-muted); font-size: .9rem; margin-bottom: .75rem; }
.dash-error-box code {
  display: block; background: var(--color-off-white);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: .75rem 1rem; font-size: .82rem; color: var(--color-red);
  text-align: left; margin-bottom: 1.25rem;
}

/* ── Controls bar ─────────────────────────── */
.dash-controls-wrap {
  background: var(--color-off-white);
  border-bottom: 1px solid var(--color-border);
  padding: .9rem 0;
}
.dash-controls {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.dash-ctrl-group { display: flex; align-items: center; gap: .5rem; }
.dash-ctrl-label {
  font-family: var(--font-ui); font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--color-text-muted); white-space: nowrap;
}
.dash-select {
  padding: .45rem .85rem; border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-white); color: var(--color-text);
  font-family: var(--font-ui); font-size: .85rem;
  cursor: pointer; outline: none; transition: border-color .2s;
}
.dash-select:focus { border-color: var(--color-green); }
.dash-select--sm { font-size: .78rem; padding: .35rem .7rem; }
.dash-ctrl-right { margin-left: auto; }
.dash-file-info {
  font-family: var(--font-ui); font-size: .78rem;
  color: var(--color-text-muted); display: flex; align-items: center; gap: .35rem;
}

/* ── KPI Cards ────────────────────────────── */
.dash-section--kpi { padding: 1.75rem 0 0; }
.dash-kpi-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
.dash-kpi {
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 1.25rem 1.4rem;
  box-shadow: var(--shadow-sm); border-top: 3px solid var(--color-green);
  transition: box-shadow .2s;
}
.dash-kpi:hover { box-shadow: var(--shadow-md); }
.dash-kpi.amber { border-top-color: var(--color-gold); }
.dash-kpi.red   { border-top-color: var(--color-red); }
.dash-kpi-label {
  font-family: var(--font-ui); font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--color-text-muted); margin-bottom: .5rem;
}
.dash-kpi-val {
  font-family: var(--font-heading); font-size: 2rem; font-weight: 700;
  color: var(--color-green-dark); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dash-kpi.amber .dash-kpi-val { color: #7a5c10; }
.dash-kpi.red   .dash-kpi-val { color: var(--color-red); }
.dash-kpi-sub {
  font-family: var(--font-ui); font-size: .72rem;
  color: var(--color-text-muted); margin-top: .35rem;
}

/* ── Tab nav override ─────────────────────── */
.dash-tabs-wrap {
  background: var(--color-white);
  border-bottom: 2px solid var(--color-border);
  position: sticky; top: var(--header-h); z-index: 50;
  padding-top: 1rem;
}
.dash-tab-nav { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

/* ── Tab panels ───────────────────────────── */
.tab-panel { padding: 1.75rem 0 2.5rem; }

/* ── Cards ────────────────────────────────── */
.dash-card {
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.dash-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border);
  gap: 1rem; flex-wrap: wrap;
  background: var(--color-off-white);
}
.dash-card-title {
  font-family: var(--font-ui); font-size: .9rem; font-weight: 700;
  color: var(--color-green-dark); margin: 0;
}
.dash-card-sub {
  font-family: var(--font-ui); font-size: .75rem;
  color: var(--color-text-muted); display: flex; align-items: center; gap: .35rem;
}
.dash-card-controls { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* Dot indicators */
.dot-good  { color: var(--color-green); }
.dot-mod   { color: var(--color-gold); }
.dot-poor  { color: var(--color-red); }

/* ── Chart containers ─────────────────────── */
.dash-chart-wrap { padding: 1rem; position: relative; height: 260px; }
.dash-chart-wrap--tall   { height: 340px; }
.dash-chart-wrap--med    { height: 300px; }
.dash-chart-wrap--donut  { height: 220px; }
.dash-chart-wrap canvas  { max-width: 100%; }

/* ── Layout helpers ───────────────────────── */
.dash-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.dash-mt    { margin-top: 1.25rem; }
.dash-mt-sm { margin-top: .75rem; }
.dash-hint  { font-family: var(--font-ui); font-size: .82rem; color: var(--color-text-muted); margin-bottom: 1rem; }

/* ── Status pills ─────────────────────────── */
.dash-status-pills {
  display: flex; gap: .75rem; padding: .75rem 1.25rem;
  flex-wrap: wrap; border-bottom: 1px solid var(--color-border);
}
.dash-status-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--color-off-white); border: 1px solid var(--color-border);
  border-radius: 2rem; padding: .3rem .9rem;
  font-family: var(--font-ui); font-size: .78rem; font-weight: 600;
}
.dash-sdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dash-sdot-good { background: var(--color-green); }
.dash-sdot-mod  { background: var(--color-gold); }
.dash-sdot-poor { background: var(--color-red); }
.dash-sdot-na   { background: #aaa; }

/* Reporting status grid (tab) */
.dash-status-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1rem; margin-bottom: 1.25rem;
}
.dash-status-card {
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 1.1rem 1.25rem;
  text-align: center; box-shadow: var(--shadow-sm);
}
.dash-status-card.sc-good  { border-top: 3px solid var(--color-green); }
.dash-status-card.sc-mod   { border-top: 3px solid var(--color-gold); }
.dash-status-card.sc-poor  { border-top: 3px solid var(--color-red); }
.dash-status-card.sc-na    { border-top: 3px solid #aaa; }
.dash-status-num {
  font-family: var(--font-heading); font-size: 2rem; font-weight: 700;
  line-height: 1; margin-bottom: .3rem;
}
.sc-good  .dash-status-num { color: var(--color-green-dark); }
.sc-mod   .dash-status-num { color: #7a5c10; }
.sc-poor  .dash-status-num { color: var(--color-red); }
.sc-na    .dash-status-num { color: #666; }
.dash-status-lbl {
  font-family: var(--font-ui); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-text-muted);
}

/* ── Indicator summary grid ───────────────── */
.dash-ind-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .85rem; margin-bottom: 1.25rem;
}
.dash-ind-card {
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 1rem 1.1rem;
  box-shadow: var(--shadow-sm);
}
.dash-ind-name {
  font-family: var(--font-ui); font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--color-text-muted); margin-bottom: .4rem; line-height: 1.4;
}
.dash-ind-val {
  font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700;
  color: var(--color-green-dark); font-variant-numeric: tabular-nums;
}

/* ── Sparkline grid ───────────────────────── */
.dash-spark-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem; margin-bottom: 1.25rem;
}
.dash-spark-card {
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: .85rem 1rem;
  box-shadow: var(--shadow-sm);
}
.dash-spark-label {
  font-family: var(--font-ui); font-size: .72rem; font-weight: 700;
  color: var(--color-text-muted); margin-bottom: .35rem;
}
.dash-spark-wrap { height: 70px; position: relative; }

/* ── Ranking charts grid ──────────────────── */
.dash-rank-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.25rem; margin-top: .75rem;
}
.dash-rank-card {
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.dash-rank-header {
  background: var(--color-green-dark); color: var(--color-white);
  padding: .7rem 1rem;
  font-family: var(--font-ui); font-size: .82rem; font-weight: 700;
  display: flex; align-items: center; justify-content: space-between;
}
.dash-rank-header span {
  font-size: .7rem; opacity: .75; font-weight: 400;
}
.dash-rank-wrap { padding: .75rem; height: 320px; position: relative; }

/* ── Tables ───────────────────────────────── */
.dash-table-wrap { overflow-x: auto; }
.dash-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-ui); font-size: .82rem;
}
.dash-table thead th {
  background: var(--color-green-light);
  padding: .65rem .9rem; text-align: left;
  font-size: .7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--color-green-dark);
  white-space: nowrap; cursor: pointer; user-select: none;
  border-bottom: 2px solid var(--color-green);
}
.dash-table thead th:hover { background: #d4edda; }
.dash-table tbody td {
  padding: .6rem .9rem; border-bottom: 1px solid var(--color-border);
  color: var(--color-text); white-space: nowrap;
}
.dash-table tbody tr:last-child td { border-bottom: none; }
.dash-table tbody tr:hover td { background: var(--color-off-white); }
.sort-icon { opacity: .4; font-size: .8em; }

/* Badges */
.dash-badge {
  display: inline-block; padding: .15rem .6rem;
  border-radius: 2rem; font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
}
.db-good { background: var(--color-green-light); color: var(--color-green-dark); }
.db-mod  { background: var(--color-gold-light);  color: #7a5c10; }
.db-poor { background: #fdecea; color: var(--color-red); }
.db-na   { background: var(--color-off-white); color: var(--color-text-muted); }

/* Mini progress bar */
.dash-mini-bar {
  display: inline-block; width: 64px; height: 5px;
  background: var(--color-border); border-radius: 3px;
  vertical-align: middle; overflow: hidden;
}
.dash-mini-fill { height: 100%; border-radius: 3px; transition: width .4s; }

/* ── Search ───────────────────────────────── */
.dash-search {
  padding: .4rem .85rem; border-radius: var(--radius);
  border: 1px solid var(--color-border); background: var(--color-white);
  font-family: var(--font-ui); font-size: .82rem; color: var(--color-text);
  outline: none; width: 220px; transition: border-color .2s;
}
.dash-search:focus { border-color: var(--color-green); }

/* ── Pagination ───────────────────────────── */
.dash-pager {
  display: flex; align-items: center; gap: .4rem;
  padding: .75rem 1rem; border-top: 1px solid var(--color-border);
  justify-content: flex-end; flex-wrap: wrap;
  font-family: var(--font-ui); font-size: .78rem; color: var(--color-text-muted);
}
.dash-pg {
  min-width: 30px; height: 30px; display: inline-flex;
  align-items: center; justify-content: center;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-white); color: var(--color-text);
  cursor: pointer; font-size: .78rem; font-family: var(--font-ui);
  transition: all .15s; padding: 0 .5rem;
}
.dash-pg:hover { border-color: var(--color-green); color: var(--color-green); }
.dash-pg.active { background: var(--color-green); border-color: var(--color-green); color: #fff; }
.dash-pg:disabled { opacity: .35; cursor: default; pointer-events: none; }

/* ── Toast ────────────────────────────────── */
.dash-toast {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  background: var(--color-green-dark); color: #fff;
  padding: .75rem 1.25rem; border-radius: var(--radius-lg);
  font-family: var(--font-ui); font-size: .85rem;
  box-shadow: var(--shadow-lg); z-index: 9999; display: none;
  border-left: 4px solid var(--color-gold);
}

/* ── Responsive ───────────────────────────── */
@media (max-width: 1024px) {
  .dash-kpi-grid    { grid-template-columns: repeat(3, 1fr); }
  .dash-ind-grid    { grid-template-columns: repeat(3, 1fr); }
  .dash-spark-grid  { grid-template-columns: 1fr 1fr; }
  .dash-rank-grid   { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .dash-row-2       { grid-template-columns: 1fr; }
  .dash-kpi-grid    { grid-template-columns: repeat(2, 1fr); }
  .dash-ind-grid    { grid-template-columns: repeat(2, 1fr); }
  .dash-status-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-spark-grid  { grid-template-columns: 1fr; }
  .dash-rank-grid   { grid-template-columns: 1fr; }
  .page-banner-inner { flex-direction: column; }
  .dash-tabs-wrap   { top: 0; }
}
@media (max-width: 480px) {
  .dash-kpi-grid    { grid-template-columns: 1fr 1fr; }
  .dash-status-grid { grid-template-columns: 1fr 1fr; }
  .dash-search      { width: 100%; }
}

/* ── Status percentage sub-text ─────────────── */
.dash-status-pct {
  font-family: var(--font-ui); font-size: .68rem;
  color: var(--color-text-muted); margin-top: .25rem;
}

/* ── Indicator card coverage line ───────────── */
.dash-ind-coverage {
  font-family: var(--font-ui); font-size: .68rem;
  color: var(--color-text-muted); margin-top: .2rem;
}

/* ── Sparkline header ────────────────────────── */
.dash-spark-header {
  display: flex; align-items: baseline;
  justify-content: space-between; margin-bottom: .3rem;
}
.dash-spark-latest {
  font-family: var(--font-ui); font-size: .78rem;
  font-weight: 700; color: var(--color-green-dark);
}

/* ── Rank empty state ────────────────────────── */
.dash-rank-empty {
  padding: 2rem; text-align: center;
  font-family: var(--font-ui); font-size: .82rem;
  color: var(--color-text-muted); background: var(--color-off-white);
}