body { background-color: #f7f9fc; font-family: "Century Gothic", "Segoe UI", Arial, sans-serif; }
.card-kpi { min-width: 180px; }
.badge-stat { background-color: #dc3545; }
.badge-urgent { background-color: #fd7e14; }
.badge-routine { background-color: #198754; }

/* Circular badges for KPI cards */
.badge-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

/* KPI card animations and hover */
.kpi-card {
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
  animation: kpiPop .6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.kpi-card:hover {
  animation: hoverPop .3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  box-shadow: 0 .75rem 1.25rem rgba(0,0,0,.15);
}
@keyframes kpiPop {
  0% { opacity: 0; transform: translateY(16px) scale(0.98); }
  60% { opacity: 1; transform: translateY(-2px) scale(1.01); }
  100% { transform: translateY(0) scale(1); }
}

/* Staggered entrance for KPI cards */
.row.g-3.align-items-stretch > div:nth-child(1) .kpi-card { animation-delay: 0s; }
.row.g-3.align-items-stretch > div:nth-child(2) .kpi-card { animation-delay: .08s; }
.row.g-3.align-items-stretch > div:nth-child(3) .kpi-card { animation-delay: .16s; }
.row.g-3.align-items-stretch > div:nth-child(4) .kpi-card { animation-delay: .24s; }

/* Analytics page chart cards animation */
.analytics-card {
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
  animation: kpiPop .5s ease-out both;
}
.analytics-card:hover {
  animation: hoverLift .25s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.12);
}

/* Staggered entrance for Analytics chart cards */
.row.g-4 > div:nth-child(1) .analytics-card { animation-delay: 0s; }
.row.g-4 > div:nth-child(2) .analytics-card { animation-delay: .06s; }
.row.g-4 > div:nth-child(3) .analytics-card { animation-delay: .12s; }
.row.g-4 > div:nth-child(4) .analytics-card { animation-delay: .18s; }
.row.g-4 > div:nth-child(5) .analytics-card { animation-delay: .24s; }

/* Auth/Login card animation (subtle entrance, gentle hover) */
.auth-card {
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
  animation: kpiPop .6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.auth-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 .75rem 1.25rem rgba(0,0,0,.12);
}

/* Input group icon tint for login */
.input-group-text i {
  color: #0d6efd; /* Bootstrap primary */
}

/* Modern toast styles and animations */
.toast-modern {
  border-radius: .5rem;
  box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.2);
  backdrop-filter: saturate(1.2) blur(6px);
  animation: toastSlideIn .35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes toastSlideIn {
  0% { opacity: 0; transform: translate3d(16px, -8px, 0) scale(0.98); }
  60% { opacity: 1; transform: translate3d(0, 2px, 0) scale(1.01); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* Filter card dark theme tweaks */
.filter-card,
.filter-card .card-header,
.filter-card .card-body { background-color: #383E42 !important; color: #ffffff; }
.filter-card .card-header { border-bottom: 1px solid rgba(255,255,255,.15); }
.filter-card .nav-link { color: #e5e7eb; }
.filter-card .nav-link.active { color: #ffffff; }

/* Hover lift animations for cards */
@keyframes hoverLift {
  0%   { transform: translateY(0) scale(1); }
  60%  { transform: translateY(-6px) scale(1.02); }
  100% { transform: translateY(-4px) scale(1.01); }
}
@keyframes hoverPop {
  0%   { transform: translateY(0) scale(1); }
  60%  { transform: translateY(-10px) scale(1.03); }
  100% { transform: translateY(-8px) scale(1.02); }
}