/*!
 * DashTemplate.com — Emergency Command Center · Template Styles
 * © 2025 DashTemplate.com. All Rights Reserved.
 */
:root {
  --dt-template-primary: #EF4444;
  --dt-template-accent:  #F59E0B;
}

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

/* Alert ticker */
.alert-ticker {
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.25);
  border-radius: 8px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--dt-text-2);
  margin-bottom: 14px;
  overflow: hidden;
}
.alert-dot {
  width: 6px; height: 6px;
  background: #EF4444;
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse-dot 1.2s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.65)} }
.alert-label {
  font-weight: 700; color: #EF4444;
  font-size: 10px; text-transform: uppercase; letter-spacing:.06em; flex-shrink:0;
}
.alert-msg {
  white-space: nowrap;
  animation: ticker 28s linear infinite;
}
@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-55%)} }

/* Ambulance unit cards */
.unit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.unit-card {
  background: var(--dt-surface-2);
  border: 1px solid var(--dt-border);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
}
.unit-card::before {
  content:'';
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
  background: var(--unit-color, var(--dt-border));
}
.unit-card__id   { font-size:10px; font-weight:700; color:var(--dt-text-3); text-transform:uppercase; letter-spacing:.06em; }
.unit-card__pt   { font-size:12px; font-weight:600; color:var(--dt-text); }
.unit-card__crew { font-size:10px; color:var(--dt-text-3); }
.unit-card__eta  { font-size:18px; font-weight:800; line-height:1; }
.unit-card__status { font-size:9.5px; font-weight:600; padding:2px 7px; border-radius:20px; display:inline-block; width:fit-content; margin-top:2px; }

/* Incident table */
.incident-row {
  display: grid;
  grid-template-columns: 80px 1fr 110px 50px 80px 80px;
  gap: 10px;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid var(--dt-border);
  font-size: 11px;
  transition: background .15s;
}
.incident-row:hover { background: var(--dt-surface-2); }
.incident-row:last-child { border-bottom: none; }
.incident-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);
}
.sev-badge {
  font-size:9px; font-weight:700; padding:2px 6px;
  border-radius:4px; text-transform:uppercase; letter-spacing:.04em;
}

/* Resource tiles */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.resource-tile {
  background: var(--dt-surface-2);
  border: 1px solid var(--dt-border);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.resource-tile__label { font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--dt-text-3); }
.resource-tile__value { font-size:24px; font-weight:800; line-height:1; }
.resource-tile__sub   { font-size:9.5px; color:var(--dt-text-3); }
.resource-tile__bar   { height:4px; background:var(--dt-surface-3); border-radius:4px; overflow:hidden; margin-top:2px; }
.resource-tile__fill  { height:100%; border-radius:4px; }