/*!
 * DashTemplate.com — Outpatient & Inpatient Ops · Template Styles
 * © 2025 DashTemplate.com. All Rights Reserved.
 */
:root {
  --dt-template-primary: #0EA5E9;
  --dt-template-accent:  #14B8A6;
}

.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; }

/* Ward bed matrix */
.ward-matrix {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.ward-cell {
  background: var(--dt-surface-2);
  border: 1px solid var(--dt-border);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: default;
  transition: border-color .2s;
}
.ward-cell:hover { border-color: rgba(14,165,233,.3); }
.ward-cell__name { font-size:10.5px; font-weight:600; color:var(--dt-text); margin-bottom:4px; }
.ward-cell__nums {
  display: flex;
  gap: 6px;
  font-size: 9.5px;
  color: var(--dt-text-3);
  margin-bottom: 5px;
}
.ward-cell__bar { height:4px; background:var(--dt-surface-3); border-radius:4px; overflow:hidden; }
.ward-cell__fill { height:100%; border-radius:4px; }
.ward-cell__rate { font-size:16px; font-weight:800; line-height:1; margin-bottom:2px; }
.status-critical { color:#EF4444; }
.status-warn     { color:#F59E0B; }
.status-ok       { color:#22C55E; }
.fill-critical   { background:#EF4444; }
.fill-warn       { background:#F59E0B; }
.fill-ok         { background:#22C55E; }

/* Equipment table */
.equip-row {
  display: grid;
  grid-template-columns: 80px 1fr 60px 70px;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--dt-border);
  font-size: 11px;
}
.equip-row:last-child { border-bottom:none; }
.equip-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); }
.equip-bar { height:6px; background:var(--dt-surface-3); border-radius:4px; overflow:hidden; }
.equip-fill { height:100%; border-radius:4px; }