/* ================================================================
   VPS Monitor — Nothing Phone dark theme
   ================================================================ */

:root {
  --bg:           #111111;
  --bg-card:      #1a1a1a;
  --bg-card-2:    #1f1f1f;
  --bg-header:    rgba(17, 17, 17, 0.95);

  --pink:         #e8265e;
  --pink-light:   #f05580;
  --pink-dim:     rgba(232, 38, 94, 0.1);
  --pink-glow:    rgba(232, 38, 94, 0.2);
  --pink-border:  rgba(232, 38, 94, 0.4);

  --text:         #cccccc;
  --text-dim:     #555;
  --text-muted:   #333;
  --text-bright:  #f0f0f0;

  --online:       #3ddc84;
  --online-glow:  rgba(61, 220, 132, 0.25);
  --offline:      #2a2a2a;

  --cpu-color:    #e8265e;
  --ram-color:    #9d4dff;
  --disk-color:   #3d8bff;
  --net-rx:       #00c8e0;
  --net-tx:       #e07840;

  --warn:         #e07840;
  --danger:       #e03030;

  --progress-bg:  rgba(255, 255, 255, 0.05);
  --radius:       8px;
  --radius-sm:    5px;

  --font: 'JetBrains Mono', 'Courier New', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background:  #111111;
  color:       var(--text);
  font-family: var(--font);
  font-size:   13px;
  min-height:  100vh;
  overflow-x:  hidden;
}

/* ── Nothing Phone 2 background layer ── */
.bg-layer {
  position:       fixed;
  inset:          0;
  z-index:        0;
  pointer-events: none;
  overflow:       hidden;
}

.bg-glyph {
  width:    100%;
  height:   100%;
  display:  block;
}

/* Lift content above background */
.header, .main {
  position: relative;
  z-index:  1;
}

/* ── scrollbar ── */
::-webkit-scrollbar              { width: 5px; }
::-webkit-scrollbar-track        { background: var(--bg); }
::-webkit-scrollbar-thumb        { background: #2e2e2e; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: #3a3a3a; }

/* ── header ── */
.header {
  position:   sticky;
  top:        0;
  z-index:    100;
  background: var(--bg-header);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.header-inner {
  max-width:      1600px;
  margin:         0 auto;
  padding:        0 24px;
  height:         56px;
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  gap:            16px;
}

.header-brand {
  display:     flex;
  align-items: center;
  gap:         10px;
}

.brand-icon {
  font-size: 20px;
  color:     var(--pink);
  display:   inline-block;
}

.brand-text {
  font-size:   18px;
  font-weight: 700;
  letter-spacing: 3px;
  color:       var(--text-bright);
}

.brand-text .accent {
  color:       var(--pink);
  text-shadow: 0 0 12px var(--pink-glow);
}

.header-meta {
  display:     flex;
  align-items: center;
  gap:         20px;
}

/* WS indicator */
.ws-indicator {
  display:     flex;
  align-items: center;
  gap:         7px;
  font-size:   11px;
  color:       var(--text-dim);
}

.ws-dot {
  width:        8px;
  height:       8px;
  border-radius: 50%;
  background:   var(--text-muted);
  transition:   background 0.4s, box-shadow 0.4s;
}

.ws-dot.connected {
  background: var(--online);
}

.ws-dot.error {
  background: var(--danger);
}

.header-counts {
  font-size: 11px;
  color:     var(--text-dim);
}
.count-online { color: var(--online); }
.sep          { margin: 0 4px; color: var(--text-muted); }
.count-total  { color: var(--text-dim); }

.header-time {
  font-size: 11px;
  color:     var(--text-dim);
  min-width: 80px;
  text-align: right;
}

/* ── main ── */
.main {
  max-width: 1600px;
  margin:    0 auto;
  padding:   24px;
}

/* ── grid ── */
.vps-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap:                   20px;
}

/* ── empty state ── */
.empty-state {
  grid-column: 1 / -1;
  display:     flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding:     80px 20px;
  gap:         14px;
  color:       var(--text-muted);
}

.empty-icon {
  font-size: 40px;
  color:     #2a2a2a;
}

/* ── VPS card ── */
.vps-card {
  background:    var(--bg-card);
  border:        1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius);
  overflow:      hidden;
  transition:    border-color 0.2s, opacity 0.3s;
}

.vps-card:hover {
  border-color: rgba(255, 255, 255, 0.14);
}

.vps-card.offline {
  border-color: rgba(255, 255, 255, 0.04);
  opacity:      0.45;
}

.vps-card.offline:hover {
  opacity: 0.6;
}

/* card header */
.card-header {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       11px 14px;
  background:    var(--bg-card-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.vps-badge {
  flex-shrink:   0;
  background:    var(--pink);
  color:         #fff;
  font-size:     10px;
  font-weight:   700;
  letter-spacing: 1px;
  padding:       2px 7px;
  border-radius: 3px;
}

.card-hostname {
  flex:          1;
  font-size:     12px;
  font-weight:   500;
  color:         var(--text-bright);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.card-uptime {
  font-size:  10px;
  color:      var(--text-dim);
  white-space: nowrap;
}

.status-dot {
  flex-shrink:   0;
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--offline);
  transition:    background 0.3s;
}

.status-dot.online {
  background: var(--online);
}

/* card body */
.card-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── stat block ── */
.stat-block {}

.stat-header {
  display:       flex;
  align-items:   baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}

.stat-label {
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 2px;
  color:          var(--text-dim);
  text-transform: uppercase;
}

.stat-value {
  font-size:   12px;
  font-weight: 500;
  color:       var(--text-bright);
}

/* ── progress bar ── */
.progress-track {
  height:        6px;
  background:    var(--progress-bg);
  border-radius: 3px;
  overflow:      hidden;
  position:      relative;
}

.progress-fill {
  height:        100%;
  border-radius: 3px;
  transition:    width 0.6s ease, background-color 0.6s ease;
  min-width:     2px;
  position:      relative;
}

.progress-fill::after {
  content:       '';
  position:      absolute;
  right:         0;
  top:           0;
  height:        100%;
  width:         20px;
  background:    linear-gradient(to right, transparent, rgba(255,255,255,0.25));
  border-radius: 0 3px 3px 0;
}

.fill-cpu  { background: linear-gradient(90deg, #c4155a, var(--cpu-color)); }
.fill-ram  { background: linear-gradient(90deg, #7c1fc4, var(--ram-color)); }
.fill-disk { background: linear-gradient(90deg, #1a6acc, var(--disk-color)); }
.fill-warn { background: linear-gradient(90deg, #cc5a00, var(--warn)); }
.fill-danger { background: linear-gradient(90deg, #cc1a1a, var(--danger)); }

/* ── CPU cores ── */
.cores-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  gap:                   5px;
  margin-top:            8px;
}

.core-item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            3px;
  background:     rgba(255, 255, 255, 0.02);
  border:         1px solid rgba(255, 255, 255, 0.05);
  border-radius:  var(--radius-sm);
  padding:        5px 4px 4px;
}

.core-num {
  font-size:  9px;
  color:      var(--text-dim);
  letter-spacing: 0.5px;
}

.core-track {
  width:         100%;
  height:        4px;
  background:    var(--progress-bg);
  border-radius: 2px;
  overflow:      hidden;
}

.core-fill {
  height:        100%;
  border-radius: 2px;
  transition:    width 0.6s ease, background-color 0.5s ease;
  min-width:     1px;
  background:    var(--cpu-color);
}

.core-pct {
  font-size:   9px;
  font-weight: 600;
  color:       var(--text);
}

/* ── Disk list ── */
.disk-list {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

.disk-row {
  display:     flex;
  flex-direction: column;
  gap:         4px;
}

.disk-row-header {
  display:     flex;
  justify-content: space-between;
  font-size:   10px;
}

.disk-mount {
  color:       var(--pink-light);
  font-weight: 600;
}

.disk-info-text {
  color:       var(--text-dim);
}

/* ── Network ── */
.net-rows {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   8px;
}

.net-item {
  background:    rgba(255, 255, 255, 0.02);
  border:        1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  padding:       7px 10px;
  display:       flex;
  flex-direction: column;
  gap:           3px;
}

.net-dir {
  font-size:      9px;
  font-weight:    600;
  letter-spacing: 2px;
  color:          var(--text-dim);
  text-transform: uppercase;
}

.net-speed {
  font-size:   14px;
  font-weight: 600;
}

.net-speed.rx { color: var(--net-rx); }
.net-speed.tx { color: var(--net-tx); }

.net-total {
  font-size: 9px;
  color:     var(--text-muted);
}

/* ── divider ── */
.card-divider {
  height:     1px;
  background: rgba(255, 255, 255, 0.05);
}

/* ── responsive ── */
@media (max-width: 600px) {
  .main              { padding: 12px; }
  .vps-grid          { grid-template-columns: 1fr; gap: 12px; }
  .header-inner      { padding: 0 12px; }
  .header-counts     { display: none; }
  .net-rows          { grid-template-columns: 1fr; }
}

/* ── glow pulse on update ── */
.vps-card.updated {
  /* no animation */
}