/* Global base (works alongside Tailwind) */
:root{
  --primary:#007BFF;
  --success:#28A745;
  --warning:#FFC107;
  --danger:#DC3545;
  --info:#17A2B8;
  --text:#212529;
  --bg:#F8F9FA;
  --border:#E0E0E0;
  --radius:14px;
  --shadow-card:0 6px 20px rgba(0,0,0,.06);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { background: var(--bg); color: var(--text); font-family: 'Poppins', sans-serif; }

/* Sidebar navigation link */
/* Sidebar navigation link */
.nav-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.9rem;
  border-radius: 0.75rem;
  color: #374151;
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;          /* 👈 prevents text wrapping */
  overflow: hidden;
  text-overflow: ellipsis;      /* 👈 graceful overflow */
}

.nav-link span:first-child {
  font-size: 1.1rem;
  color: var(--primary);
}

.nav-link span:last-child {
  flex: 1;
}

.nav-link:hover {
  background: #F3F4F6;
}

.nav-link.active {
  background: rgba(0, 123, 255, 0.08);
  color: var(--primary);
  font-weight: 600;

}
/* Sidebar width fix */
@media (min-width: 768px) {
  #sidebar { width: 16rem; }
}

/* Cards */
.card{
  background:#fff; border:1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* Buttons (utility if not using Tailwind classes) */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.625rem 1rem; border-radius:.75rem; font-weight:600; text-decoration:none;
}
.btn-primary{ background:var(--primary); color:#fff; }
.btn-primary:hover{ filter:brightness(.95); }

/* Scrollbar cosmetics */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:10px; }
*::-webkit-scrollbar-track{ background:#f1f5f9; }

/* Sidebar item fade-in animation */
@keyframes sidebarItemFadeIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

#sidebar.opening .nav-link {
  animation: sidebarItemFadeIn 0.25s ease forwards;
}

#sidebar.opening .nav-link:nth-child(1) { animation-delay: 0.05s; }
#sidebar.opening .nav-link:nth-child(2) { animation-delay: 0.1s; }
#sidebar.opening .nav-link:nth-child(3) { animation-delay: 0.15s; }
#sidebar.opening .nav-link:nth-child(4) { animation-delay: 0.2s; }
#sidebar.opening .nav-link:nth-child(5) { animation-delay: 0.25s; }
#sidebar.opening .nav-link:nth-child(6) { animation-delay: 0.3s; }
#sidebar.opening .nav-link:nth-child(7) { animation-delay: 0.35s; }
#sidebar.opening .nav-link:nth-child(8) { animation-delay: 0.4s; }
#sidebar.opening .nav-link:nth-child(9) { animation-delay: 0.45s; }
#sidebar.opening .nav-link:nth-child(10) { animation-delay: 0.5s; }

#sidebarOverlay {
  transition: opacity 0.3s ease;
}

#sidebarOverlay {
  backdrop-filter: blur(6px); /* Adjust from 3px–10px for your taste */
  -webkit-backdrop-filter: blur(6px);
  background-color: rgba(0, 0, 0, 0.45); /* slightly darker overlay */
}