/* Skalexa components.css — cards, KPIs, panels, tables, badges, signals */

/* KPI row */
.kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-bottom: 1.25rem; }
.kpi {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow);
}
.kpi .label { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.kpi .value { font-size: 1.7rem; font-weight: 800; margin-top: .35rem; letter-spacing: -.02em; color: var(--text); }
.kpi .delta { font-size: .78rem; margin-top: .25rem; font-weight: 600; }
.kpi .delta.up { color: var(--green); }
.kpi .delta.down { color: var(--red); }

/* Health score ring */
.kpi.health .value { color: var(--blue); }
.health-bar { height: 6px; border-radius: 4px; background: #eef2f7; margin-top: .55rem; overflow: hidden; }
.health-bar > span { display: block; height: 100%; border-radius: 4px; background: var(--green); }

/* Panel grid */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--shadow);
  margin-bottom: 1rem;
}
.panel h3 { font-size: .95rem; font-weight: 700; margin-bottom: .9rem; display: flex; align-items: center; justify-content: space-between; }
.panel h3 .count { color: var(--muted); font-weight: 600; font-size: .8rem; }
.panel .empty { color: var(--muted); font-size: .85rem; padding: .5rem 0; }

/* Recommendation / signal list items */
.rec { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem 0; border-bottom: 1px solid var(--border); }
.rec:last-child { border-bottom: none; }
.rec .dot { width: 10px; height: 10px; border-radius: 50%; margin-top: .35rem; flex: 0 0 auto; }
.dot.green { background: var(--green); }
.dot.yellow { background: var(--orange); }
.dot.red { background: var(--red); }
.rec .body { flex: 1; }
.rec .title { font-weight: 600; font-size: .88rem; }
.rec .desc { color: var(--text-2); font-size: .8rem; margin-top: .15rem; }
.rec .meta { color: var(--muted); font-size: .72rem; margin-top: .2rem; }
.rec-actions { display: flex; gap: .35rem; margin-top: .4rem; }

/* Badges */
.badge { display: inline-block; padding: .15rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.badge.green { background: #ecfdf5; color: var(--green); }
.badge.yellow { background: #fffbeb; color: var(--orange); }
.badge.red { background: #fef2f2; color: var(--red); }
.badge.scale { background: #ecfdf5; color: var(--green); }
.badge.kill { background: #fef2f2; color: var(--red); }
.badge.hold { background: #fffbeb; color: var(--orange); }

/* Tables */
table { width: 100%; border-collapse: collapse; font-size: .85rem; }
th { text-align: left; padding: .55rem .5rem; color: var(--muted); border-bottom: 1px solid var(--border); font-weight: 600; white-space: nowrap; }
td { padding: .55rem .5rem; border-bottom: 1px solid #f1f3f5; white-space: nowrap; }
tr:hover td { background: #fafbfc; }

/* Fatigue meter */
.meter { display: inline-flex; align-items: center; gap: .4rem; }
.meter-bar { width: 60px; height: 6px; border-radius: 4px; background: #eef2f7; overflow: hidden; }
.meter-bar > span { display: block; height: 100%; }
.meter-bar > span.lo { background: var(--green); }
.meter-bar > span.mid { background: var(--orange); }
.meter-bar > span.hi { background: var(--red); }

/* Checklist */
.check-item { display: flex; gap: .55rem; align-items: flex-start; padding: .5rem 0; border-bottom: 1px solid #f1f3f5; font-size: .86rem; }
.check-item:last-child { border-bottom: none; }
.check-item input { margin-top: .2rem; }
.check-item.done label { text-decoration: line-through; color: var(--muted); }
.progress { height: 6px; background: #eef2f7; border-radius: 4px; margin-top: .6rem; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--blue); }

/* Alerts */
.alert-item { display: flex; gap: .5rem; align-items: flex-start; padding: .5rem 0; border-bottom: 1px solid #f1f3f5; font-size: .84rem; }
.alert-item:last-child { border-bottom: none; }

@media (max-width: 1024px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .grid-2 { grid-template-columns: 1fr; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
}