/* ============================================================================
   panel-dashboard.css — Enrichissement visuel du tableau de bord
   ----------------------------------------------------------------------------
   Dérive des variables de marque (--brand vert émeraude). Ciblé sur
   #view-dashboard. À charger après style.css.
   ========================================================================== */

#view-dashboard {
  --db-shadow: 0 8px 24px -12px rgba(15,42,32,.16), 0 2px 6px rgba(0,0,0,.04);
  --db-shadow-hover: 0 16px 34px -14px rgba(15,42,32,.26), 0 4px 10px rgba(0,0,0,.06);
}

/* ===== Bande de déploiement / bandeau d'accueil — dégradé marque ======== */
#view-dashboard .deploy-band {
  background: linear-gradient(120deg, var(--brand) 0%, var(--brand-dark) 75%, var(--ink) 130%);
  border: none;
  border-radius: 16px;
  color: #fff;
  box-shadow: var(--db-shadow);
  position: relative;
  overflow: hidden;
}
#view-dashboard .deploy-band::after {
  content: "";
  position: absolute; top: -70px; right: -50px;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(255,255,255,.16) 0%, transparent 70%);
  pointer-events: none;
}
#view-dashboard .deploy-band .muted,
#view-dashboard .deploy-band .text-sm { color: rgba(255,255,255,.85) !important; }
#view-dashboard .deploy-tag {
  background: rgba(255,255,255,.20);
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
}

/* ===== Cartes de service ================================================ */
#view-dashboard .svc-card,
#view-dashboard .card {
  border: none;
  border-radius: 14px;
  box-shadow: var(--db-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
#view-dashboard .svc-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--db-shadow-hover);
}
/* Icône de service teintée par famille */
#view-dashboard .svc-ic {
  border-radius: 12px;
  background: var(--brand-tint);
  color: var(--brand-dark);
}

/* ===== Bande de ressources (CPU / RAM / disque) — jauges ================ */
#view-dashboard .res-strip {
  background: linear-gradient(160deg, var(--brand-tint), var(--surface) 65%);
  border: none;
  border-radius: 14px;
  box-shadow: var(--db-shadow);
}
#view-dashboard .r-value { font-weight: 700; color: var(--brand-dark); }
#view-dashboard .r-bar {
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  border-radius: 999px;
  overflow: hidden;
}
#view-dashboard .r-bar > * {
  background: linear-gradient(90deg, var(--brand), var(--brand-light));
}

/* Anneaux de jauge : la couleur de progression suit la marque */
#view-dashboard .ring {
  --ring-color: var(--brand);
}

/* ===== Tuiles de serveur de jeu — accent orange marque ================= */
#view-dashboard .game-tile {
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: var(--db-shadow);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  position: relative;
  overflow: hidden;
}
#view-dashboard .game-tile::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--acc-game);
}
#view-dashboard .game-tile:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--acc-game) 50%, transparent);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--acc-game) 20%, transparent);
}
#view-dashboard .game-mono {
  background: color-mix(in srgb, var(--acc-game) 15%, var(--surface));
  color: var(--acc-game);
  border-radius: 11px;
}

/* ===== Étapes / onboarding ============================================= */
#view-dashboard .step.is-done .step-mark {
  background: var(--brand); color: #fff;
}
#view-dashboard .step.is-locked .step-mark {
  background: var(--border); color: var(--text-faint);
}

/* ===== Panneau d'offre (plan-panel) ==================================== */
#view-dashboard .plan-panel {
  border: none;
  border-radius: 16px;
  background: linear-gradient(160deg, var(--brand-tint), var(--surface) 60%);
  box-shadow: var(--db-shadow);
}

/* ===== Boutons ========================================================= */
#view-dashboard .btn-primary {
  background: linear-gradient(120deg, var(--brand), var(--brand-dark));
  border: none;
  box-shadow: var(--shadow-brand);
}
#view-dashboard .btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* ===== Alertes ======================================================== */
#view-dashboard .dash-alert.is-urgent {
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
  background: linear-gradient(90deg, var(--warning-tint), var(--surface));
}

/* ===== Tags de statut ================================================= */
#view-dashboard .tag-ok   { background: var(--brand-tint);   color: var(--brand-dark); }
#view-dashboard .tag-warn { background: var(--warning-tint); color: var(--warning); }
#view-dashboard .tag-off  { background: var(--danger-tint);  color: var(--danger); }