/* =====================================================
   DASHBOARD.CSS — Metric Cards, Progress Bars, Neofetch
   ===================================================== */

/* ---- Metrics Grid ---- */
.metrics-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:1.15rem;
  margin-bottom:1.75rem;
}

.metric-card {
  background:var(--surface);
  border:var(--border-thick);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
  padding:1.25rem;
  transition:transform 0.18s var(--ease-bounce), box-shadow 0.18s var(--ease-bounce);
  animation:fadeUp 0.4s var(--ease-out) backwards;
}
.metric-card:nth-child(1) { animation-delay:0.05s; }
.metric-card:nth-child(2) { animation-delay:0.10s; }
.metric-card:nth-child(3) { animation-delay:0.15s; }
.metric-card:nth-child(4) { animation-delay:0.20s; }
.metric-card:nth-child(5) { animation-delay:0.25s; }
.metric-card:hover { transform:translate(-3px,-3px); box-shadow:var(--shadow-lg); }

.metric-top {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem;
}
.metric-icon {
  width:44px; height:44px; border-radius:var(--radius-sm);
  border:var(--border); box-shadow:var(--shadow-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem;
}
.mi-yellow { background:var(--yellow); }
.mi-cyan   { background:var(--cyan-lt); }
.mi-coral  { background:var(--coral-lt); }
.mi-lime   { background:var(--lime-lt); }
.mi-purple { background:var(--purple-lt); }

.metric-label {
  font-family:var(--mono); font-size:0.72rem; font-weight:800;
  text-transform:uppercase; letter-spacing:0.05em; color:var(--txt-secondary);
  margin-bottom:0.25rem;
}
.metric-value {
  font-family:var(--mono); font-size:2rem; font-weight:900; color:var(--ink);
  letter-spacing:-0.03em; line-height:1;
}
.metric-sub {
  font-size:0.78rem; color:var(--txt-muted); margin-top:0.3rem; font-weight:600;
}

/* Progress Bar */
.prog-wrap {
  height:14px; background:#E8E4DC;
  border:var(--border); border-radius:4px;
  overflow:hidden; margin-top:0.75rem;
  box-shadow:inset 1px 1px 0 rgba(0,0,0,0.1);
}
.prog-bar {
  height:100%; width:0%;
  border-radius:0;
  transition:width 0.6s var(--ease-out);
  background-image:linear-gradient(
    45deg,
    rgba(255,255,255,0.2) 25%, transparent 25%,
    transparent 50%, rgba(255,255,255,0.2) 50%,
    rgba(255,255,255,0.2) 75%, transparent 75%, transparent
  );
  background-size:20px 20px;
  animation:barStripe 1.5s linear infinite;
}
.pb-yellow { background-color:var(--yellow); }
.pb-cyan   { background-color:var(--cyan); }
.pb-coral  { background-color:var(--coral); }
.pb-lime   { background-color:var(--lime); }
.pb-purple { background-color:var(--purple); }

/* ---- Stat Chips Row ---- */
.stat-chips {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr));
  gap:0.85rem; margin-bottom:1.75rem;
}
.stat-chip {
  background:var(--surface); border:var(--border-thick); border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm); padding:1rem 1.1rem;
  display:flex; align-items:center; gap:0.85rem;
  transition:transform 0.15s var(--ease-bounce), box-shadow 0.15s;
}
.stat-chip:hover { transform:translate(-2px,-2px); box-shadow:var(--shadow-md); }
.stat-chip-ico {
  width:38px; height:38px; border-radius:var(--radius-sm);
  border:var(--border); display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0;
}
.stat-chip-label { font-size:0.72rem; color:var(--txt-muted); font-weight:700; text-transform:uppercase; letter-spacing:0.04em; }
.stat-chip-val   { font-family:var(--mono); font-size:1.15rem; font-weight:900; color:var(--ink); margin-top:2px; }

/* ---- Neofetch / System Panel ---- */
.sysinfo-panel {
  background:var(--surface-deep);
  border:var(--border-thick); border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
  overflow:hidden; margin-bottom:1.75rem;
}
.sysinfo-bar {
  display:flex; align-items:center; gap:0.5rem;
  padding:0.65rem 1rem; background:rgba(255,255,255,0.06);
  border-bottom:2px solid rgba(255,255,255,0.08);
}
.sysinfo-dots { display:flex; gap:5px; }
.sysinfo-dot {
  width:12px; height:12px; border-radius:50%; border:1px solid rgba(255,255,255,0.2);
}
.sd-red    { background:#FF5F57; }
.sd-yellow { background:#FFBD2E; }
.sd-green  { background:#28C840; }
.sysinfo-title { font-family:var(--mono); font-size:0.75rem; color:rgba(255,255,255,0.45); margin-left:0.5rem; }

.sysinfo-body {
  display:flex; flex-direction:row; align-items:center; justify-content:center;
  padding:1.75rem 2rem; gap:2.5rem;
  width:100%; box-sizing:border-box;
}
.sysinfo-ascii {
  font-family:'Courier New', Courier, monospace;
  font-size:0.72rem;
  line-height:1.15;
  letter-spacing:0;
  text-align:left; white-space:pre;
  padding:0; border:none;
  display:inline-block;
  flex-shrink:0;
}
.sysinfo-ascii .r { color:#E04037; font-weight:700; }
.sysinfo-ascii .w { color:#FFFFFF; font-weight:700; text-shadow:0 0 3px rgba(255,255,255,0.4); }

.neofetch-svg-wrap {
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
  background:rgba(224,64,55,0.08);
  border:3px solid #E04037;
  border-radius:50%;
  box-shadow:0 0 25px rgba(224,64,55,0.2), 4px 4px 0px #111;
  transition:transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
}
.neofetch-svg-wrap:hover {
  transform:scale(1.05) rotate(5deg);
}
.neofetch-svg-logo {
  filter:drop-shadow(0 2px 8px rgba(224,64,55,0.4));
}
.sysinfo-rows {
  flex:1; max-width:540px; box-sizing:border-box;
  padding:1.25rem 1.5rem;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius-sm);
  display:flex; flex-direction:column; gap:0.4rem;
}
.sysinfo-row {
  display:flex; align-items:center; gap:0.75rem;
  font-family:var(--mono); font-size:0.82rem; padding:0.2rem 0;
}
.sysinfo-key { color:var(--cyan); font-weight:800; width:110px; flex-shrink:0; }
.sysinfo-val { color:rgba(255,255,255,0.85); font-weight:500; word-break:break-word; }

.sysinfo-palette { display:flex; gap:5px; margin-top:0.75rem; }
.sysinfo-swatch {
  width:22px; height:22px; border-radius:3px;
  border:1px solid rgba(255,255,255,0.2);
}

/* ---- Two-column Dashboard Grid ---- */
.dash-grid-2 {
  display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin-bottom:1.75rem;
}
@media(max-width:900px) { .dash-grid-2 { grid-template-columns:1fr; } }

.sys-table-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:0.6rem 1rem; border-bottom:1px solid rgba(0,0,0,0.07);
  font-size:0.85rem;
}
.sys-table-row:last-child { border-bottom:none; }
.sys-table-row .label { color:var(--txt-secondary); font-weight:600; }
.sys-table-row .val   { font-family:var(--mono); font-weight:800; font-size:0.82rem; }