/*!
 * DashTemplate.com — Medical Quality & Safety · Template Styles
 * © 2025 DashTemplate.com. All Rights Reserved.
 */
:root {
  --dt-template-primary: #0EA5E9;
  --dt-template-accent:  #22C55E;
}

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.kpi-tile {
  background: var(--dt-surface);
  border: 1px solid var(--dt-border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
}
.kpi-tile::before {
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background: var(--tile-color, var(--dt-template-primary));
}
.kpi-tile__label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--dt-text-3); }
.kpi-tile__value { font-size:26px; font-weight:800; color:var(--dt-text); line-height:1; letter-spacing:-.02em; }
.kpi-tile__sub   { font-size:10.5px; color:var(--dt-text-2); }
.kpi-tile__badge { font-size:10px; font-weight:600; padding:2px 7px; border-radius:20px; display:inline-flex; align-items:center; gap:3px; margin-top:2px; width:fit-content; }
.badge-ok    { background:rgba(34,197,94,.15);  color:#22C55E; }
.badge-warn  { background:rgba(245,158,11,.15); color:#F59E0B; }
.badge-alert { background:rgba(239,68,68,.15);  color:#EF4444; }

/* HAI alert list */
.hai-row {
  display: grid;
  grid-template-columns: 70px 1fr 110px 60px 70px;
  gap: 10px;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid var(--dt-border);
  font-size: 11px;
  transition: background .15s;
}
.hai-row:hover { background: var(--dt-surface-2); }
.hai-row:last-child { border-bottom: none; }
.hai-row.hdr {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--dt-text-3);
  text-transform: uppercase;
  letter-spacing: .07em;
  background: var(--dt-surface-2);
}
.hai-badge {
  font-size: 9.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  display: inline-block;
}

/* Quality metric rows */
.metric-row {
  display: grid;
  grid-template-columns: 140px 1fr 70px 80px;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--dt-border);
  font-size: 11px;
}
.metric-row:last-child { border-bottom: none; }
.metric-bar { height: 6px; background: var(--dt-surface-3); border-radius: 4px; overflow: hidden; }
.metric-fill { height: 100%; border-radius: 4px; }
.metric-val { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600; text-align: right; }
.metric-status { font-size: 9.5px; font-weight: 600; padding: 2px 7px; border-radius: 20px; text-align: center; }