/* ── Reset & variables ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
  --bg:        #0a0e1a;
  --surface:   #111827;
  --border:    #1e293b;
  --card:      #141b2d;
  --text:      #e2e8f0;
  --text-sec:  #94a3b8;
  --text-dim:  #64748b;
  --primary:   #6366f1;
  --success:   #10b981;
  --danger:    #ef4444;
  --warning:   #f59e0b;
  --info:      #3b82f6;
  --radius:    12px;
  --glow:      0 0 20px rgba(99,102,241,.15);
}

html { font-size: 15px }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* ── Header ───────────────────────────────────────────────────── */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 2rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.header-left {
  display: flex;
  align-items: center;
  gap: .8rem;
}
.header-icon {
  width: 32px;
  height: 32px;
  color: var(--primary);
}
header h1 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.header-sub {
  font-size: .8rem;
  color: var(--text-dim);
}
.header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.badge-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--success);
  background: rgba(16,185,129,.1);
  padding: 4px 10px;
  border-radius: 20px;
}
.pulse {
  width: 8px; height: 8px;
  background: var(--success);
  border-radius: 50%;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.5) }
  70%  { box-shadow: 0 0 0 8px rgba(16,185,129,0) }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0) }
}
.badge-live.error { color: var(--danger); background: rgba(239,68,68,.1) }
.badge-live.error .pulse { background: var(--danger); animation: none }
.last-update {
  font-size: .75rem;
  color: var(--text-dim);
}

/* ── Main ─────────────────────────────────────────────────────── */
main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
}

/* ── Metrics grid ─────────────────────────────────────────────── */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-bottom: 2.5rem;
}
.metric-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  transition: border-color .2s, box-shadow .2s;
}
.metric-card:hover {
  border-color: var(--primary);
  box-shadow: var(--glow);
}
.metric-info h3 {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-dim);
  margin-bottom: .4rem;
}
.metric-info p {
  font-size: .85rem;
  color: var(--text-sec);
  line-height: 1.5;
}

/* ── Gauge (SVG ring) ─────────────────────────────────────────── */
.gauge-wrap {
  position: relative;
  width: 90px;
  height: 90px;
  flex-shrink: 0;
}
.gauge { width: 100%; height: 100%; transform: rotate(-90deg) }
.gauge-bg {
  fill: none;
  stroke: var(--border);
  stroke-width: 8;
}
.gauge-fill {
  fill: none;
  stroke: var(--primary);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset .8s ease, stroke .4s;
}
.gauge-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 700;
}

/* colour thresholds */
.gauge-fill.ok      { stroke: var(--success) }
.gauge-fill.warn    { stroke: var(--warning) }
.gauge-fill.danger  { stroke: var(--danger)  }

/* ── Uptime card ──────────────────────────────────────────────── */
.metric-uptime { gap: 1rem }
.uptime-icon {
  width: 42px; height: 42px;
  color: var(--info);
  flex-shrink: 0;
}
.uptime-value {
  font-size: 1.15rem !important;
  font-weight: 600;
  color: var(--text) !important;
}

/* ── Containers section ───────────────────────────────────────── */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1rem;
}
.section-header h2 {
  font-size: 1.1rem;
  font-weight: 600;
}
.container-count {
  font-size: .8rem;
  color: var(--text-dim);
}
.container-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem;
  color: var(--text-dim);
}

/* ── Container card ───────────────────────────────────────────── */
.ct-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-dim);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  transition: border-color .2s, transform .15s;
}
.ct-card:hover {
  transform: translateY(-2px);
  border-color: var(--border);
}
.ct-card.running  { border-left-color: var(--success) }
.ct-card.exited   { border-left-color: var(--danger)  }
.ct-card.restarting { border-left-color: var(--warning) }

.ct-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .5rem;
}
.ct-name {
  font-weight: 600;
  font-size: .95rem;
}
.ct-state {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 2px 8px;
  border-radius: 10px;
}
.ct-state.running    { color: var(--success); background: rgba(16,185,129,.12) }
.ct-state.exited     { color: var(--danger);  background: rgba(239,68,68,.12)  }
.ct-state.restarting { color: var(--warning); background: rgba(245,158,11,.12) }
.ct-state.created    { color: var(--info);    background: rgba(59,130,246,.12)  }

.ct-clickable { cursor: pointer }
.ct-clickable:hover { border-color: var(--info); box-shadow: 0 0 20px rgba(59,130,246,.15) }
.ct-link {
  display: inline-block;
  font-size: .78rem;
  color: var(--info);
  margin-top: .2rem;
}
.ct-status {
  font-size: .78rem;
  color: var(--text-sec);
  margin-bottom: .2rem;
}
.ct-ports {
  font-size: .73rem;
  color: var(--text-dim);
  font-family: 'Cascadia Code', 'Fira Code', monospace;
}

/* ── Footer ───────────────────────────────────────────────────── */
footer {
  text-align: center;
  padding: 2rem;
  font-size: .75rem;
  color: var(--text-dim);
}

/* ── Modal ────────────────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  z-index: 100;
  align-items: center;
  justify-content: center;
}
.modal-overlay.open { display: flex }
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 90%;
  max-width: 720px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0,0,0,.4);
  animation: modalIn .2s ease;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(16px) scale(.97) }
  to   { opacity: 1; transform: translateY(0) scale(1) }
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--border);
}
.modal-header h2 { font-size: 1rem; font-weight: 600 }
.modal-close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
  transition: color .15s;
}
.modal-close:hover { color: var(--text) }
.modal-body {
  padding: 1rem 1.4rem;
  overflow-y: auto;
}

/* ── Process table ────────────────────────────────────────────── */
.proc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
}
.proc-table th {
  text-align: left;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
  padding: .5rem .4rem;
  border-bottom: 1px solid var(--border);
}
.proc-table td {
  padding: .45rem .4rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
  color: var(--text-sec);
}
.proc-table tr:hover td { background: rgba(255,255,255,.03) }
.proc-table .pid  { color: var(--text-dim); font-family: monospace; width: 60px }
.proc-table .name { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.proc-table .mem  { font-family: monospace; white-space: nowrap }
.proc-table .pct  { font-family: monospace; white-space: nowrap; width: 55px }
.bar-col { width: 120px }
.proc-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
}
.proc-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .3s;
}
.proc-bar-fill.ok     { background: var(--success) }
.proc-bar-fill.warn   { background: var(--warning) }
.proc-bar-fill.danger { background: var(--danger)  }

.click-hint {
  font-size: .7rem;
  color: var(--info);
  opacity: .7;
}

/* clickable memory card */
.metric-card.clickable { cursor: pointer }
.metric-card.clickable:hover { border-color: var(--info); box-shadow: 0 0 20px rgba(59,130,246,.15) }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .metrics { grid-template-columns: repeat(2, 1fr) }
  main { padding: 1.2rem }
}
@media (max-width: 520px) {
  .metrics { grid-template-columns: 1fr }
  header { flex-direction: column; gap: .6rem; align-items: flex-start }
  .header-right { align-self: flex-end }
  .container-grid { grid-template-columns: 1fr }
}