.sds-dashboard { color: #344454; }
.sds-dashboard-band { padding: 22px 24px; background: #173b68; color: #fff; border-radius: 4px 4px 0 0; }
.sds-dashboard-band h3 { margin: 0 0 10px; color: #fff; font-size: 22px; font-weight: 600; }
.sds-dashboard-band p { opacity: .9; font-size: 13px; }
.sds-dashboard-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: #dde5ec; border: 1px solid #dde5ec; }
.sds-dashboard-kpi { background: #fff; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.sds-dashboard-kpi > span { font-size: 12px; color: #68798b; }
.sds-dashboard-kpi > span:first-child { font-weight: 600; color: #435468; }
.sds-dashboard-kpi > strong { font-size: 28px; line-height: 1.2; }
.sds-dashboard-kpi strong small { font-size: 14px; font-weight: 400; }
.sds-dashboard-kpi > .sds-dashboard-kpi-name { font-size: 17px; line-height: 1.4; }
.sds-dashboard-summary { padding: 16px 18px; margin: 16px 0; border-left: 3px solid #2b9ecd; background: #eef5f9; line-height: 1.8; }
.sds-dashboard-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.sds-dashboard-tabs[role="tablist"] > .btn-sm { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; }
.sds-dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sds-dashboard-chart { padding: 16px; border: 1px solid #e3e9ef; border-radius: 4px; min-width: 0; }
.sds-dashboard-chart h4 { margin: 0 0 16px; font-size: 14px; font-weight: 600; }
.sds-dashboard-chart-scroll { max-height: 310px; overflow-y: auto; }
.sds-dashboard-bar-row { display: flex; align-items: center; gap: 10px; margin: 12px 0; font-size: 12px; }
.sds-dashboard-bar-row > span { flex: 0 1 160px; overflow-wrap: anywhere; }
.sds-dashboard-bar-row > strong { flex: 0 0 100px; text-align: right; font-size: 12px; }
.sds-dashboard-track { height: 9px; background: #eaf0f4; flex: 1; min-width: 20px; position: relative; border-radius: 2px; }
.sds-dashboard-track > i { height: 100%; display: block; background: #245a88; border-radius: 2px; }
.sds-dashboard-bar-pair { flex: 1; min-width: 20px; }
.sds-dashboard-bar-pair .secondary { margin-top: 3px; height: 5px; }
.sds-dashboard-track.secondary > i { background: #38b3d5; }
.sds-dashboard-target { position: absolute; top: -3px; height: 15px; border-left: 2px solid #d96154; }
.sds-dashboard-months { display: flex; gap: 5px; justify-content: space-around; }
.sds-dashboard-months > div { flex: 1; min-width: 0; text-align: center; font-size: 10px; }
.sds-dashboard-months strong { font-size: 10px; display: block; margin-bottom: 4px; }
.sds-dashboard-column { height: 110px; background: #f0f4f7; position: relative; margin-bottom: 7px; }
.sds-dashboard-column i { display: block; position: absolute; bottom: 0; width: 100%; background: #245a88; }
.sds-dashboard-ranks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.sds-dashboard-ranks .panel { margin-bottom: 0; }
.sds-dashboard-rank { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 8px 0; font-size: 12px; border-bottom: 1px solid #eef2f6; }
.sds-dashboard-rank strong { white-space: nowrap; }
.sds-dashboard-register { max-height: 65vh; overflow: auto; }
.sds-dashboard-register thead th { position: sticky; top: 0; z-index: 1; background: #edf2f6; }
.sds-dashboard .table > thead > tr > th { font-size: 12px; color: #4b5c6c; }
.sds-dashboard .table > tbody > tr > td { vertical-align: middle; font-size: 12px; }
.sds-dashboard-detail { background: #f5f9fc !important; padding: 18px !important; }
.sds-dashboard .label { display: inline-block; white-space: normal; text-align: left; line-height: 1.3; }
.sds-trend-chart { position: relative; min-width: 0; }
/* Keep hidden chart data inside the chart, including in the scrolling register. */
.sds-trend-chart > .sr-only { top: 0; left: 0; }
.sds-trend-chart svg { display: block; width: 100%; height: 210px; overflow: visible; }
.sds-trend-chart text { fill: #607184; font-size: 11px; }
.sds-chart-grid { stroke: #e3e9ef; stroke-width: 1; }
.sds-chart-primary, .sds-chart-secondary, .sds-chart-target { fill: none; stroke: #245a88; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.sds-chart-secondary { stroke: #38b3d5; }
.sds-chart-target { stroke: #d96154; stroke-dasharray: 5 4; stroke-width: 1.5; }
.sds-chart-point { fill: #245a88; stroke: #fff; stroke-width: 1; }
.sds-chart-point:focus { stroke: #e2a32b; stroke-width: 4; outline: none; }
.sds-chart-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 11px; color: #607184; }
.sds-chart-legend i { display: inline-block; width: 16px; border-top: 3px solid #245a88; margin-right: 5px; vertical-align: middle; }
.sds-chart-legend i.secondary { border-color: #38b3d5; }
.sds-chart-legend i.target { border-color: #d96154; border-top-style: dashed; }
.sds-trend-chart.compact { width: 120px; }
.sds-trend-chart.compact svg { height: 36px; }
.sds-trend-chart.compact p { font-size: 10px; margin: 3px 0; }
.sds-dashboard-stack { display: flex; flex: 1; height: 16px; background: #dbe2e9; border-radius: 2px; overflow: hidden; }
.sds-dashboard-stack i.meets { background: #2a8863; }
.sds-dashboard-stack i.below { background: #d6a135; }
.sds-dashboard-stack i.critical, .sds-dashboard-track.gap i { background: #c65b51; }
.sds-dashboard-actions { min-width: 90px; }
.sds-dashboard-actions .btn { display: block; margin: 4px 0; width: 100%; }
.sds-dashboard-track-modal .modal-body { max-height: 72vh; overflow-y: auto; }
.sds-dashboard-track-modal .table { overflow-wrap: anywhere; }
@media (max-width: 1100px) { .sds-dashboard-grid { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .sds-dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sds-dashboard-ranks { grid-template-columns: 1fr; }
  .sds-dashboard-band { padding: 18px; }
  .sds-dashboard-band h3 { font-size: 18px; }
  .sds-dashboard-kpi { padding: 14px; }
  .sds-dashboard-kpi > strong { font-size: 24px; }
  .sds-dashboard-bar-row > span { flex-basis: 105px; }
  .sds-dashboard-bar-row > strong { flex-basis: 85px; }
  .sds-dashboard-chart { padding: 12px; }
}