/* ── netstat.css  (light theme) ── */

/* CSS custom properties – override all the scattered !important chains */
:root {
  --ns-bg:           #ffffff;
  --ns-border:       #dfe3eb;
  --ns-text:         #111111;
  --ns-muted:        #4b5563;
  --ns-number:       #111111;
  --ns-unit:         #2a2a2a;
  --ns-label:        #3a3a3a;
  --ns-box-shadow:   rgba(0,0,0,0.05);
  --ns-dl-color:     #1f7a3a;
  --ns-ul-color:     #1c63b8;
  --ns-total-color:  #222222;
  --ns-status-up:    #1e6b2f;
  --ns-status-down:  #b32020;
  --ns-sep:          #111111;
  --ns-summary-bg:   #f7f9fc;
  --ns-badge-bg:     #e0f2fe;
  --ns-badge-text:   #0369a1;
  --ns-mem-color:    #7c3aed;
  --ns-temp-color:   #dc2626;
  --ns-disk-color:   #0891b2;
  --ns-bar-bg:       #e5e7eb;
}

/* ── Widget wrapper ─────────────────────────────────────────────────────────── */
.stats-grid.netstat-wrap {
  padding: 10px 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", sans-serif !important;
  max-width: 1240px !important;
  width: 100% !important;
  margin: 0 auto !important;
}

.netstat-row {
  display: flex !important;
  gap: 10px !important;
  align-items: stretch !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;        /* single row on desktop */
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
}

/* ── Stat boxes ──────────────────────────────────────────────────────────────── */
.netstat-box {
  flex: 1 1 0 !important;             /* all boxes share space equally */
  min-width: 0 !important;
  max-width: none !important;
  padding: 12px 10px !important;
  background: var(--ns-bg) !important;
  border: 2px solid var(--ns-border) !important;
  border-radius: 12px !important;
  text-align: center !important;
  box-shadow: 0 2px 6px var(--ns-box-shadow) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.netstat-box:hover {
  border-color: #94a3b8 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.10) !important;
}

.netstat-center {
  flex: 1.2 1 0 !important;           /* status card slightly wider */
  min-width: 0 !important;
  border-style: dashed !important;
  border-width: 2px !important;
}

.netstat-info-card {
  flex: 1.2 1 0 !important;           /* info cards slightly wider for pill bars */
  min-width: 0 !important;
}

/* ── Typography ─────────────────────────────────────────────────────────────── */
.netstat-number {
  font-weight: 800 !important;
  font-size: 24px !important;
  color: var(--ns-number) !important;
  line-height: 1 !important;
}

.netstat-unit {
  font-weight: 700 !important;
  font-size: 12px !important;
  color: var(--ns-unit) !important;
  letter-spacing: 0.2px !important;
  margin-top: 4px !important;
}

.netstat-label {
  margin-top: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--ns-label) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
}

/* ── Center (status) card ─────────────────────────────────────────────────── */
.netstat-center-title {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--ns-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
}

.netstat-center-status {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--ns-status-up) !important;
  margin-top: 4px !important;
}

.netstat-center-sep {
  height: 1px !important;
  background: var(--ns-sep) !important;
  opacity: 0.15 !important;
  margin: 8px 0 !important;
}

.netstat-center-ip {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--ns-text) !important;
  font-family: "Lucida Console", "Courier New", monospace !important;
  word-break: break-all !important;
  margin-top: 4px !important;
}


/* ── Accent colours ─────────────────────────────────────────────────────────── */
.netstat-box.is-download   .netstat-number { color: var(--ns-dl-color)    !important; }
.netstat-box.is-upload     .netstat-number { color: var(--ns-ul-color)    !important; }
.netstat-box.is-total      .netstat-number { color: var(--ns-total-color) !important; }
.netstat-box.is-downloaded .netstat-number { color: var(--ns-dl-color)    !important; }
.netstat-box.is-uploaded   .netstat-number { color: var(--ns-ul-color)    !important; }
.netstat-box.is-down .netstat-center-status { color: var(--ns-status-down) !important; }

/* ── Downloaded / Uploaded stat box accent borders ─────────────────────────── */
.netstat-box.is-downloaded {
  border-color: color-mix(in srgb, var(--ns-dl-color) 35%, var(--ns-border)) !important;
}
.netstat-box.is-uploaded {
  border-color: color-mix(in srgb, var(--ns-ul-color) 35%, var(--ns-border)) !important;
}

/* Fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .netstat-box.is-downloaded { border-color: #a8d5b5 !important; }
  .netstat-box.is-uploaded   { border-color: #a8c8f0 !important; }
}

/* ── Stat box value row ──────────────────────────────────────────────────────── */
.ns-stat-value-row {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 4px !important;
}

/* ── Rate box layout ────────────────────────────────────────────────────────── */
.ns-spark {
  width: 90px !important;
  height: 28px !important;
  margin: 0 auto 4px !important;
  display: block !important;
}

.ns-rate-row {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 4px !important;
}

.ns-peak {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--ns-muted) !important;
  margin-top: 2px !important;
  letter-spacing: 0.2px !important;
}

/* ── Trend arrows ───────────────────────────────────────────────────────────── */
.ns-trend {
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  margin-left: 2px !important;
}

.ns-trend-up   { color: #1f7a3a !important; }
.ns-trend-down { color: #b32020 !important; }
.ns-trend-flat { color: #9ca3af !important; font-size: 8px !important; }

/* ── Info card ───────────────────────────────────────────────────────────────── */
.netstat-info-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 10px !important;
}

.ns-info-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 0 !important;
}

.ns-info-icon {
  font-size: 18px !important;
  line-height: 1 !important;
  width: 24px !important;
  text-align: center !important;
}

.ns-info-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.ns-info-value {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--ns-number) !important;
  line-height: 1 !important;
  font-family: "Lucida Console", "Courier New", monospace !important;
}

.ns-info-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--ns-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-top: 2px !important;
}

.ns-info-block-grow {
  flex: 1 !important;
  min-width: 0 !important;
}

.ns-info-top-row {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 4px !important;
}

.ns-info-sublabel {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--ns-muted) !important;
  white-space: nowrap !important;
}

/* ── Info tag label (RAM / CPU TEMP / STORAGE) ──────────────────────────────── */
.ns-info-tag {
  font-size: 9px !important;
  font-weight: 800 !important;
  color: var(--ns-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.7px !important;
  margin-top: 3px !important;
}

/* ── Pill bar (RAM / STORAGE) ────────────────────────────────────────────────── */
.ns-pill-bar {
  position: relative !important;
  height: 18px !important;
  background: var(--ns-bar-bg) !important;
  border-radius: 20px !important;
  margin-top: 4px !important;
  overflow: hidden !important;
  width: 100% !important;
}

.ns-pill-fill {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  border-radius: 20px !important;
  transition: width 0.5s ease !important;
  opacity: 0.30 !important;
}

.ns-pill-text {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  text-align: center !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  color: var(--ns-text) !important;
  line-height: 18px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding: 0 6px !important;
}

#ns-mem-bar  { background: var(--ns-mem-color)  !important; }
#ns-disk-bar { background: var(--ns-disk-color) !important; }

/* ── Temperature value colour ───────────────────────────────────────────────── */
.ns-temp-val { color: var(--ns-temp-color) !important; }

/* ── Responsive ─────────────────────────────────────────────────────────────── */

/* Tablet: wrap into 2 columns */
@media (max-width: 900px) {
  .netstat-row {
    flex-wrap: wrap !important;
    padding: 0 10px !important;
    gap: 10px !important;
  }

  .netstat-box,
  .netstat-center,
  .netstat-info-card {
    flex: 1 1 calc(50% - 10px) !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  /* Status card full width, placed after rate+total boxes */
  .netstat-center {
    flex: 1 1 100% !important;
    order: 5 !important;
  }
}

/* Mobile: 2 compact columns, explicit order matching screenshot */
@media (max-width: 600px) {
  .netstat-row {
    flex-wrap: wrap !important;
    padding: 0 8px !important;
    gap: 8px !important;
  }

  .netstat-box,
  .netstat-center,
  .netstat-info-card {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 10px 8px !important;
    box-sizing: border-box !important;
  }

  /* Mobile order: download | upload → status(full) → info | temp → downloaded | uploaded */
  .netstat-box.is-download   { order: 1 !important; }
  .netstat-box.is-upload     { order: 2 !important; }
  .netstat-center            { order: 3 !important; flex: 1 1 100% !important; }
  .netstat-info-card         { order: 4 !important; }
  .netstat-box.is-downloaded { order: 5 !important; }
  .netstat-box.is-uploaded   { order: 6 !important; }

  .netstat-number { font-size: 20px !important; }
  .netstat-unit   { font-size: 11px !important; }

  .ns-spark {
    width: 100% !important;
    max-width: 80px !important;
  }

  .netstat-info-card {
    padding: 8px !important;
  }
}

/* Very small phones: single column */
@media (max-width: 360px) {
  .netstat-box,
  .netstat-center,
  .netstat-info-card {
    flex: 1 1 100% !important;
  }
}