/* MSRS custom styles */
/*body { background: #f7f9fc; }*/

body {
  background: url('https://plus.unsplash.com/premium_photo-1682144551791-e400fcae2a2a?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=870') no-repeat center center fixed;
  background-size: cover;
  background-attachment: fixed;
  /*background-color: #f7f9fc;*/
}


.brand-line { font-weight: 600; color: #0d6efd; }
.card { box-shadow: 0 8px 24px rgba(0,0,0,0.08); border-radius: 12px; transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.10); }
.fade-in { opacity: 0; transform: translateY(6px); animation: fadeIn 400ms ease forwards; }
@keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }
.footer-note { font-size: 12px; color: #6c757d; }

/* Dashboard metric icon circle */
.metric-icon { width: 48px; height: 48px; font-size: 1.4rem; }
/* Elegant global background with subtle accents */
:root {
  --bg-deep-1: #0f172a; /* slate-900 */
  --bg-deep-2: #111827; /* gray-900 */
  --accent-cyan: #0ea5e9; /* cyan-500 */
  --accent-violet: #8b5cf6; /* violet-500 */
}

html, body { height: 100%; }

body {
  position: relative;
  background:
    radial-gradient(1200px circle at 12% 8%, rgba(14,165,233,0.06), transparent 55%),
    radial-gradient(900px circle at 78% 18%, rgba(139,92,246,0.05), transparent 60%),
    linear-gradient(180deg, var(--bg-deep-1), var(--bg-deep-2));
}

/* Particle canvas sits behind content */
#particle-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.15;
  pointer-events: none;
}

/* Subtle fade-in utility used across cards */
.fade-in { animation: fadeIn 260ms ease-out both; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Keep cards readable on the deep background without overpowering */
.card { background-color: rgba(255,255,255,0.9); backdrop-filter: blur(2px); }