/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--radius);
  border: 1px solid var(--border); background: transparent;
  font-weight: var(--w-semibold); font-size: 14px; line-height: 1.3;
  cursor: pointer; white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn--ghost:hover { background: var(--surface-strong); border-color: var(--accent); }
.btn--primary { background: var(--lean-blue); border-color: var(--lean-blue); color: var(--lean-offwhite); }
.btn--primary:hover { background: var(--lean-navy); border-color: var(--lean-navy); }
.btn--alert { border-color: var(--lean-yellow); }
.btn--alert:hover, .btn--alert[aria-pressed="true"] {
  background: var(--lean-yellow); color: var(--lean-navy); border-color: var(--lean-yellow);
}

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--half) var(--cell) var(--cell);
  min-width: 0;
  display: flex; flex-direction: column;
  transition: background-color .3s ease, border-color .3s ease;
}
.card__title { display: flex; align-items: center; gap: 8px; margin-bottom: var(--half); }
.chart { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart--ring svg { max-width: 280px; margin-inline: auto; }

.live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--good); flex: none;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .3; } }

/* KPI cards */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--half); }
.kpi {
  text-align: start; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--half) var(--cell);
  border-top: 4px solid var(--lean-blue);
  transition: transform .2s ease, border-color .2s ease, background-color .3s ease;
}
.kpi:nth-child(2) { border-top-color: var(--lean-green); }
.kpi:nth-child(3) { border-top-color: var(--lean-teal); }
.kpi:nth-child(4) { border-top-color: var(--lean-navy); }
.kpi:hover { transform: translateY(-2px); border-color: var(--accent); }
.kpi__label { font-weight: var(--w-semibold); color: var(--text-muted); font-size: 14px; }
.kpi__value { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
[dir="rtl"] .kpi__value.is-pct { flex-direction: row-reverse; justify-content: flex-end; }
.kpi__num { font-weight: var(--w-black); font-size: 40px; line-height: 1.15; }
.kpi__unit { font-weight: var(--w-bold); font-size: 18px; color: var(--text-muted); }
.kpi__meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; font-weight: var(--w-light); color: var(--text-muted); }
.kpi__delta { font-weight: var(--w-bold); color: var(--text); padding: 0 6px; border-radius: 4px; direction: ltr; }
.kpi__delta.is-good { background: rgba(34, 174, 136, 0.22); }
.kpi__delta.is-bad { background: rgba(249, 180, 80, 0.35); }
.kpis.is-outage .kpi { border-top-color: var(--lean-yellow); }

@media (max-width: 1199px) { .kpi__num { font-size: 32px; } }
@media (max-width: 759px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: 10px var(--half); }
  .kpi__num { font-size: 26px; }
}

/* Feed */
/* contain: size stops the feed from stretching the grid rows; it fills what the other cards define */
.feed {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px;
  overflow: hidden; flex: 1; min-height: 0; contain: size;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, #000 82%, transparent);
}
@media (max-width: 1199px) { .feed { contain: none; max-height: 520px; } }
.feed__item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start;
  padding: 8px 10px; border-radius: var(--radius);
  background: var(--surface); border-inline-start: 3px solid var(--lean-lightgray);
  transition: opacity .45s ease, transform .45s ease, background-color .3s ease;
}
.feed__item.is-entering { opacity: 0; transform: translateY(-12px); }
.feed__body { display: flex; flex-direction: column; min-width: 0; }
.feed__issue { font-weight: var(--w-semibold); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.feed__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--text-muted); }
.feed__time { font-size: 12px; font-weight: var(--w-light); color: var(--text-muted); }
.feed__prio {
  font-size: 11px; font-weight: var(--w-bold); padding: 1px 6px; border-radius: 4px;
  border: 1px solid var(--border); color: var(--text-muted);
}
.prio-P1 { background: var(--lean-yellow); color: var(--lean-navy); border-color: var(--lean-yellow); }
.prio-P2 { background: var(--lean-teal); color: var(--lean-offwhite); border-color: var(--lean-teal); }
.prio-P3 { background: var(--lean-blue); color: var(--lean-offwhite); border-color: var(--lean-blue); }
.status-new { color: var(--info); font-weight: var(--w-semibold); }
.status-inProgress { color: var(--text); font-weight: var(--w-semibold); }
.feed__status::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  margin-inline-end: 4px; vertical-align: middle; background: var(--lean-lightgray);
}
.status-new::before { background: var(--info); }
.status-inProgress::before { background: var(--good); }
.status-assigned::before { background: var(--lean-blue); }

/* Outage state: no red in the Lean palette, so Yellow + Navy signal the alert */
.feed__item.is-critical { border-inline-start-color: var(--lean-yellow); background: rgba(249, 180, 80, 0.22); }
.feed.is-outage .feed__item:not(.is-critical) { opacity: .7; }
.card--feed:has(.feed.is-outage) { border-color: var(--lean-yellow); box-shadow: inset 0 4px 0 var(--lean-yellow); }

.alert-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  padding: 10px var(--cell); background: var(--lean-yellow); color: var(--lean-navy);
  font-size: 15px; animation: banner-in .4s ease;
}
.alert-banner__icon {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--lean-navy); color: var(--lean-yellow); font-weight: var(--w-black);
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes banner-in { from { opacity: 0; transform: translateY(-8px); } }

/* Summary */
.summary__text { flex: 1; margin-bottom: var(--half); font-size: 15px; color: var(--text); }
.summary__text.is-empty { color: var(--text-muted); font-weight: var(--w-light); }
.summary__text.is-fresh { animation: banner-in .5s ease; }
.card--summary .btn { align-self: flex-start; }