/* PAOS Dashboard Styles — extracted from app-p0.js inline style by uclaude 2026-06-30 */

/* Glossy ring cards */
.rings-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.ring-card {
  font-weight: 600;
  font-size: 14px;
}

/* Device grid */
.device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
.device-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 14px;
}
.dev-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.dev-card-name {
  font-weight: 600;
  font-size: 14px;
  color: #eaf2ff;
  flex: 1;
}
.dev-card-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.dev-card-dot.online { background: var(--green, #22c55e); }
.dev-card-dot.offline { background: var(--muted, #6b7280); }
.device-specs { font-size: 12px; }
.spec-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
}
.spec-label { color: var(--muted, #a0b8d8); }
.spec-value { color: #eaf2ff; }

/* KPI cards */
.kpi-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  padding: 12px 16px;
  min-width: 100px;
}
.kpi-num { font-size: 22px; font-weight: 700; color: #eaf2ff; }
.kpi-label { font-size: 11px; color: var(--muted, #a0b8d8); margin-top: 2px; }

/* Agent card grid */
.agent-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}
.agent-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: background .2s;
}
.agent-card:hover { background: rgba(255,255,255,.06); }
.agent-card.idle { cursor: default; opacity: .7; }
.agent-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.agent-avatar { position: relative; font-size: 28px; }
.agent-avatar-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,.5);
}
.agent-card-body { margin-top: 8px; }

/* Charts row */
.chart-row {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 12px;
  margin-bottom: 16px;
}
.chart-box {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 14px;
}
.chart-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #a0b8d8);
  margin-bottom: 12px;
}

/* Watch rings */
.watch-rings {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
.watch-center {
  text-align: center;
  padding: 8px;
}

/* Device table */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.data-table th {
  text-align: left;
  padding: 8px;
  color: var(--muted, #a0b8d8);
  font-weight: 600;
  border-bottom: 2px solid rgba(255,255,255,.06);
}
.data-table td {
  padding: 8px;
  border-bottom: 1px solid rgba(255,255,255,.03);
}
.emp-row { cursor: pointer; }
.emp-row:hover { background: rgba(255,255,255,.04); }

/* Pulse dot animation for online agents */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.4); }
  50% { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}
.pulse-dot { animation: pulse 1s infinite; }