/* home.css - Enhanced styling for Test/Home.cshtml */
:root {
  --hb-bg: #ffffff; /* light background */
  --hb-bg-alt: #f8fafc;
  --hb-primary: #0d6efd;
  --hb-primary-rgb: 13,110,253;
  --hb-gradient: linear-gradient(135deg,#0d6efd 0%,#6610f2 100%);
  --hb-card-radius: 18px;
  --hb-text-light: #0f172a; /* use dark text on light bg */
  --hb-text-muted: #64748b;
  --hb-shadow: 0 4px 16px -2px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.08);
  --hb-ring: 0 0 0 3px rgba(var(--hb-primary-rgb),.25);
  --hb-transition: .25s cubic-bezier(.4,0,.2,1);
}

/* Page background - keep white */
body, .main-content {
  background: var(--hb-bg);
  min-height: 100vh;
  color: var(--hb-text-light);
}

/* Heading accent underline */
.main-content h2 {
  position: relative;
  font-weight: 700;
  letter-spacing: .5px;
  background: linear-gradient(90deg,#0f172a,#334155 60%,#64748b 95%);
  -webkit-background-clip: text;
  color: transparent;
}
.main-content h2:after {
  content:"";
  position:absolute;
  left:0;bottom:-6px;
  width:64px;height:4px;
  border-radius:6px;
  background: var(--hb-gradient);
  box-shadow:0 2px 6px rgba(var(--hb-primary-rgb),.25);
}

/* Grid spacing enhancements */
#examGrid { margin-top: .25rem; }
#examGrid .col { display:flex; }

/* Card styling */
.exam-card {
  background: linear-gradient(145deg,#ffffff 0%,#f8fafc 60%,#f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: var(--hb-card-radius);
  position: relative;
  overflow: hidden;
  transition: var(--hb-transition);
  cursor: pointer;
}
.exam-card:before {
  content:"";position:absolute;inset:0;
  background: radial-gradient(circle at 85% 15%, rgba(var(--hb-primary-rgb),.12), transparent 60%);
  opacity:.5;pointer-events:none;
}
.exam-card:hover, .exam-card:focus-within {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--hb-shadow);
  border-color: rgba(var(--hb-primary-rgb),.35);
}
.exam-card:active { transform: translateY(-2px) scale(.99); }
.exam-card .card-title { font-size: 1rem; font-weight:600; color:#0f172a; }
.exam-card .card-text { color:#475569; }

/* Badge styling */
.exam-badge { background: rgba(var(--hb-primary-rgb),.10); color: var(--hb-primary); font-weight:600; padding:.35rem .75rem; }
.exam-badge i { opacity:.85; }

/* Avatar (initials) */
.exam-avatar {
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.85rem;letter-spacing:.5px;
  background: var(--hb-gradient);color:#fff;
  box-shadow:0 4px 12px -2px rgba(var(--hb-primary-rgb),.35);
}

/* Search bar - light theme */
#examSearch { background:#ffffff; border:1px solid #e2e8f0; color:#0f172a; }
#examSearch:focus { outline:none; box-shadow: var(--hb-ring); border-color: var(--hb-primary); }
#examSearch::placeholder { color:#94a3b8; }
.input-group-text.bg-white { background:#ffffff !important; border:1px solid #e2e8f0; color:#64748b; }
#clearSearch { transition: var(--hb-transition); }
#clearSearch:not(.d-none):hover { background:#f1f5f9; color:#0f172a; }

/* Smooth fade when filtering */
.exam-col { transition: opacity .25s ease, transform .25s ease; }
.exam-col[style*='display: none'] { opacity:0; transform: scale(.9); }

/* Scrollbar subtle theme for WebKit */
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:#f8fafc; }
::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:20px; border:2px solid #f8fafc; }
::-webkit-scrollbar-thumb:hover { background:#94a3b8; }

/* Focus ring for keyboard navigation */
.exam-card[tabindex="0"]:focus { outline:none; box-shadow: var(--hb-ring); }

/* Responsive tweaks */
@media (max-width: 575.98px){
  .exam-card { border-radius:14px; }
  .main-content h2 { font-size:1.65rem; }
  #examGrid { margin-top:.75rem; }
}
@media (prefers-reduced-motion: reduce){
  .exam-card, .exam-col { transition:none; }
}

/* Glow pulse animation for badge */
@keyframes glowPulse { 0%{box-shadow:0 0 0 0 rgba(var(--hb-primary-rgb),.35);} 70%{box-shadow:0 0 0 8px rgba(var(--hb-primary-rgb),0);} 100%{box-shadow:0 0 0 0 rgba(var(--hb-primary-rgb),0);} }
.exam-badge { animation: glowPulse 3.2s ease-in-out infinite; }

/* Optional dark sidebar refinements (kept dark to contrast white content) */
.sidebar-custom { background: linear-gradient(180deg,#0f172a,#1e293b); }
.sidebar-custom a.nav-link { transition: var(--hb-transition); border-radius:8px; }
.sidebar-custom a.nav-link:hover { background:#1e293b; }
.sidebar-custom .btn-outline-danger, .sidebar-custom .btn-outline-primary { border-width:2px; }