/* =========================================================
   SVFAC CBT — Modern Gradient UI
   Visual-only layer. No PHP/database logic is changed.
   ========================================================= */

:root{
  --svfac-primary:#5b35f5;
  --svfac-primary-2:#7c3aed;
  --svfac-blue:#2563eb;
  --svfac-cyan:#06b6d4;
  --svfac-green:#059669;
  --svfac-orange:#f59e0b;
  --svfac-red:#ef4444;
  --svfac-ink:#102a56;
  --svfac-muted:#64748b;
  --svfac-bg:#f4f7ff;
  --svfac-card:rgba(255,255,255,.94);
  --svfac-border:rgba(148,163,184,.20);
  --svfac-shadow:0 18px 50px rgba(43,55,120,.10);
  --svfac-radius:18px;
}

html{scroll-behavior:smooth}

body{
  background:
    radial-gradient(circle at 8% 8%,rgba(124,58,237,.12),transparent 28%),
    radial-gradient(circle at 92% 12%,rgba(37,99,235,.10),transparent 25%),
    radial-gradient(circle at 55% 95%,rgba(6,182,212,.08),transparent 28%),
    var(--svfac-bg) !important;
  color:var(--svfac-ink) !important;
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:linear-gradient(135deg,rgba(255,255,255,.35),transparent 45%);
}

/* ---------- Admin shell ---------- */

.topbar{
  background:linear-gradient(110deg,#ffffff 0%,#f8f7ff 55%,#f2f7ff 100%) !important;
  border-bottom:1px solid rgba(91,53,245,.12) !important;
  box-shadow:0 5px 24px rgba(42,55,100,.07) !important;
}

.top-brand,
.brand,
.login-brand{
  color:var(--svfac-ink) !important;
}

.logo,
.brand-mark,
.stat-icon{
  background:linear-gradient(135deg,#5b35f5,#7c3aed 55%,#2563eb) !important;
  box-shadow:0 10px 24px rgba(91,53,245,.25) !important;
}

.sidebar{
  background:linear-gradient(180deg,#ffffff 0%,#faf9ff 100%) !important;
  border-right:1px solid rgba(91,53,245,.10) !important;
  box-shadow:8px 0 28px rgba(40,50,100,.04) !important;
}

.sidebar a{
  transition:all .18s ease !important;
}

.sidebar a:hover{
  transform:translateX(3px);
  background:linear-gradient(90deg,rgba(91,53,245,.11),rgba(37,99,235,.04)) !important;
  color:#4f2bd8 !important;
}

.sidebar a.active{
  background:linear-gradient(100deg,#ede9fe,#e0e7ff) !important;
  color:#4f2bd8 !important;
  box-shadow:inset 4px 0 0 #5b35f5,0 6px 18px rgba(91,53,245,.10) !important;
}

.role-pill,.role{
  background:linear-gradient(135deg,#ede9fe,#dbeafe) !important;
  color:#4f2bd8 !important;
  border:1px solid rgba(91,53,245,.12) !important;
}

.content{
  position:relative;
}

.page-head h1,
.page-head h2{
  letter-spacing:-.4px;
}

.panel,
.card,
.box,
.form-panel,
.question-container,
.exam-form-panel,
.login-card,
.profile-card,
.exam-card,
.qr-card,
.rank-card{
  background:var(--svfac-card) !important;
  border:1px solid var(--svfac-border) !important;
  box-shadow:var(--svfac-shadow) !important;
  border-radius:var(--svfac-radius) !important;
  backdrop-filter:blur(12px);
}

.panel-head,
.card-head{
  background:linear-gradient(100deg,rgba(248,250,255,.92),rgba(245,243,255,.75)) !important;
  border-bottom:1px solid rgba(148,163,184,.15) !important;
}

.stat-card,
.stat,
.mini-stat,
.score-box,
.meta-box,
.info-row,
.detail-row,
.attempt-info,
.exam-meta,
.exam-schedule,
.exam-message{
  background:linear-gradient(145deg,#ffffff,#f6f7ff) !important;
  border:1px solid rgba(148,163,184,.16) !important;
  box-shadow:0 8px 24px rgba(42,55,100,.06) !important;
  border-radius:14px !important;
}

/* ---------- Buttons ---------- */

button,
.primary-btn,
.primary,
.btn-primary,
.subject-btn-primary,
.rank-btn,
.login-button,
.next,
.submit,
.action-btn{
  background:linear-gradient(135deg,#5b35f5 0%,#7c3aed 48%,#2563eb 100%) !important;
  border:0 !important;
  color:#fff !important;
  box-shadow:0 9px 22px rgba(91,53,245,.22) !important;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease !important;
}

button:hover,
.primary-btn:hover,
.primary:hover,
.btn-primary:hover,
.subject-btn-primary:hover,
.rank-btn:hover,
.login-button:hover,
.next:hover,
.submit:hover,
.action-btn:hover{
  transform:translateY(-2px) !important;
  filter:saturate(1.08) !important;
  box-shadow:0 13px 28px rgba(91,53,245,.30) !important;
}

.secondary,
.secondary-btn,
.btn-secondary,
.subject-btn-secondary,
.back-link,
.admit-card-link{
  background:linear-gradient(135deg,#ffffff,#f1f5ff) !important;
  color:#315dcc !important;
  border:1px solid rgba(37,99,235,.18) !important;
  box-shadow:0 7px 18px rgba(37,99,235,.08) !important;
}

.danger-link,
.action-delete{
  border-radius:9px !important;
}

/* ---------- Forms ---------- */

input,
select,
textarea{
  border:1px solid #dbe2f0 !important;
  border-radius:11px !important;
  background:#fff !important;
  color:var(--svfac-ink) !important;
  transition:border-color .18s,box-shadow .18s,transform .18s !important;
}

input:focus,
select:focus,
textarea:focus{
  outline:none !important;
  border-color:#7c5cff !important;
  box-shadow:0 0 0 4px rgba(91,53,245,.10) !important;
}

/* ---------- Tables ---------- */

table{
  border-collapse:separate !important;
  border-spacing:0 !important;
  overflow:hidden;
}

thead th{
  background:linear-gradient(100deg,#f5f3ff,#eff6ff) !important;
  color:#425778 !important;
  border-bottom:1px solid #e2e8f0 !important;
}

tbody tr{
  transition:background .15s ease,transform .15s ease !important;
}

tbody tr:hover{
  background:linear-gradient(90deg,rgba(91,53,245,.045),rgba(37,99,235,.035)) !important;
}

.badge,
.status,
.rank,
.difficulty-badge{
  border-radius:999px !important;
  font-weight:800 !important;
}

/* ---------- Alerts ---------- */

.alert,
.alert-success,
.success,
.subject-alert-success{
  background:linear-gradient(135deg,#ecfdf5,#dcfce7) !important;
  border:1px solid #bbf7d0 !important;
  color:#166534 !important;
  border-radius:12px !important;
}

.alert-error,
.error,
.subject-alert-error{
  background:linear-gradient(135deg,#fff1f2,#ffe4e6) !important;
  border:1px solid #fecdd3 !important;
  color:#9f1239 !important;
  border-radius:12px !important;
}

/* ---------- Candidate Login ---------- */

.login-page{
  min-height:100vh;
  background:
    radial-gradient(circle at 12% 18%,rgba(124,58,237,.25),transparent 30%),
    radial-gradient(circle at 88% 12%,rgba(37,99,235,.23),transparent 28%),
    radial-gradient(circle at 50% 100%,rgba(6,182,212,.18),transparent 32%),
    linear-gradient(135deg,#f8f7ff,#eef4ff) !important;
}

.login-wrapper{
  filter:drop-shadow(0 22px 45px rgba(54,63,120,.12));
}

.login-card{
  overflow:hidden;
  position:relative;
}

.login-card:before{
  content:"";
  display:block;
  height:7px;
  margin:-1px -1px 22px;
  background:linear-gradient(90deg,#5b35f5,#7c3aed,#2563eb,#06b6d4);
}

.login-button{
  width:100%;
}

/* ---------- Candidate Examination ---------- */

.exam-card{
  overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease !important;
}

.exam-card:hover{
  transform:translateY(-5px) !important;
  box-shadow:0 24px 55px rgba(43,55,120,.15) !important;
}

.exam-card-header,
.profile-card{
  background:linear-gradient(135deg,#ffffff,#f7f5ff) !important;
}

.exam-code{
  color:#5b35f5 !important;
  font-weight:800 !important;
}

.exam-card:before{
  content:"";
  display:block;
  height:5px;
  background:linear-gradient(90deg,#5b35f5,#2563eb,#06b6d4);
}

/* ---------- Result ---------- */

.result-header,
.result-header-top{
  background:linear-gradient(135deg,#5b35f5 0%,#7c3aed 42%,#2563eb 100%) !important;
  color:#fff !important;
  border-radius:18px !important;
  box-shadow:0 20px 45px rgba(91,53,245,.22) !important;
}

.result-header *,
.result-header-top *{
  color:inherit;
}

.qr-card{
  background:linear-gradient(145deg,#ffffff,#f5f3ff) !important;
}

.review-button,
.pdf-button{
  border-radius:11px !important;
}

/* ---------- Exam screen ---------- */

.top,
.nav{
  background:linear-gradient(100deg,#ffffff,#f6f5ff,#eff6ff) !important;
  box-shadow:0 6px 25px rgba(40,50,100,.08) !important;
}

.timer{
  background:linear-gradient(135deg,#5b35f5,#2563eb) !important;
  color:#fff !important;
  border-radius:12px !important;
  box-shadow:0 9px 20px rgba(37,99,235,.20) !important;
}

.question,
.card{
  box-shadow:var(--svfac-shadow) !important;
}

.opt{
  border:1px solid #dce4f2 !important;
  border-radius:12px !important;
  transition:all .16s ease !important;
}

.opt:hover{
  border-color:#8b75ff !important;
  background:#f7f5ff !important;
  transform:translateX(2px);
}

.opt.selected{
  border-color:#6d4aff !important;
  background:linear-gradient(135deg,#ede9fe,#dbeafe) !important;
  box-shadow:0 6px 18px rgba(91,53,245,.12) !important;
}

/* ---------- Verification ---------- */

.verify{
  background:
    radial-gradient(circle at 10% 10%,rgba(91,53,245,.15),transparent 30%),
    radial-gradient(circle at 90% 10%,rgba(37,99,235,.14),transparent 30%),
    linear-gradient(135deg,#f8f7ff,#eef5ff) !important;
}

.verify .card{
  border-top:6px solid transparent !important;
  border-image:linear-gradient(90deg,#5b35f5,#2563eb,#06b6d4) 1 !important;
}

/* ---------- Mobile ---------- */

@media(max-width:760px){
  .content{padding:18px !important}
  .page-head{gap:12px !important}
  .stats-grid,
  .grid-two,
  .form-grid,
  .result-hero,
  .stat-grid{
    grid-template-columns:1fr !important;
  }
  .sidebar{
    width:100% !important;
    position:relative !important;
  }
  .layout{display:block !important}
  .topbar{padding:0 15px !important}
}

/* Reduce motion for accessibility */
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
    scroll-behavior:auto !important;
    transition:none !important;
    animation:none !important;
  }
}


/* =========================================================
   SVFAC CBT — Section-wise Colour System
   ========================================================= */

/* Dashboard / overview */
.dashboard-section,
.overview-section,
.stats-section,
.dashboard-panel{
  background:
    linear-gradient(135deg,rgba(255,255,255,.97),rgba(239,246,255,.92)) !important;
}

/* Candidates */
.candidates-section,
.candidate-section,
.candidates-panel{
  background:
    linear-gradient(135deg,rgba(255,255,255,.98),rgba(240,253,250,.90)) !important;
}

/* Subjects */
.subjects-section,
.subject-section,
.subjects-panel{
  background:
    linear-gradient(135deg,rgba(255,255,255,.98),rgba(245,243,255,.94)) !important;
}

/* Question Bank */
.question-bank-section,
.question-section,
.question-bank-panel{
  background:
    linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,247,237,.92)) !important;
}

/* Exams */
.exams-section,
.exam-section,
.exams-panel{
  background:
    linear-gradient(135deg,rgba(255,255,255,.98),rgba(239,246,255,.94)) !important;
}

/* Assignments */
.assignments-section,
.assignment-section,
.assignments-panel{
  background:
    linear-gradient(135deg,rgba(255,255,255,.98),rgba(236,253,245,.92)) !important;
}

/* Attempts */
.attempts-section,
.attempt-section,
.attempts-panel{
  background:
    linear-gradient(135deg,rgba(255,255,255,.98),rgba(254,249,195,.58)) !important;
}

/* Results */
.results-section,
.result-section,
.results-panel{
  background:
    linear-gradient(135deg,rgba(255,255,255,.98),rgba(238,242,255,.96)) !important;
}

/* Candidate examination */
.my-exams-section,
.examination-section,
.candidate-exams-section{
  background:
    linear-gradient(135deg,rgba(255,255,255,.98),rgba(240,249,255,.94)) !important;
}

/* Admit card */
.admit-section,
.admit-card-section,
.admit-card-panel{
  background:
    linear-gradient(135deg,rgba(255,255,255,.98),rgba(245,243,255,.96)) !important;
}

/* Result summary */
.result-summary,
.result-summary-section{
  background:
    linear-gradient(135deg,#f5f3ff,#eff6ff,#ecfeff) !important;
  border:1px solid rgba(91,53,245,.12) !important;
}

/* Answer review */
.answer-review-section,
.review-section,
.answer-review-panel{
  background:
    linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,247,237,.90)) !important;
}

/* Verification */
.verification-section,
.verify-section,
.verification-panel{
  background:
    linear-gradient(135deg,#ecfdf5,#eff6ff,#f5f3ff) !important;
}

/* Settings */
.settings-section,
.settings-panel{
  background:
    linear-gradient(135deg,rgba(255,255,255,.98),rgba(248,250,252,.96)) !important;
}

/* Login / authentication */
.auth-section,
.login-section{
  background:
    linear-gradient(135deg,#f5f3ff,#eff6ff,#ecfeff) !important;
}

/* Give common standalone panels subtle individual colour bands */
.panel,
.card,
.form-panel,
.profile-card,
.exam-card,
.question-card,
.login-card{
  position:relative;
  overflow:hidden;
}

.panel::before,
.card::before,
.form-panel::before,
.profile-card::before,
.exam-card::before,
.question-card::before,
.login-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg,#5b35f5,#7c3aed,#2563eb,#06b6d4);
  opacity:.9;
  pointer-events:none;
}

/* Alternate internal cards for richer section depth */
.stat-card:nth-child(4n+1),
.stat:nth-child(4n+1){
  background:linear-gradient(135deg,#f5f3ff,#ffffff) !important;
}

.stat-card:nth-child(4n+2),
.stat:nth-child(4n+2){
  background:linear-gradient(135deg,#eff6ff,#ffffff) !important;
}

.stat-card:nth-child(4n+3),
.stat:nth-child(4n+3){
  background:linear-gradient(135deg,#ecfeff,#ffffff) !important;
}

.stat-card:nth-child(4n+4),
.stat:nth-child(4n+4){
  background:linear-gradient(135deg,#ecfdf5,#ffffff) !important;
}

/* Section headings */
.section-title,
.panel-title,
.card-title{
  position:relative;
}

.section-title::after,
.panel-title::after,
.card-title::after{
  content:"";
  display:block;
  width:54px;
  height:4px;
  margin-top:8px;
  border-radius:99px;
  background:linear-gradient(90deg,#5b35f5,#06b6d4);
}

/* Colourful section spacing */
.section,
.dashboard-section,
.content-section,
.panel-section{
  border-radius:20px !important;
  padding:4px !important;
}

/* Soft coloured page zones */
.page-dashboard,
.page-candidates,
.page-subjects,
.page-question-bank,
.page-exams,
.page-assignments,
.page-attempts,
.page-results{
  background:
    radial-gradient(circle at 10% 0%,rgba(124,58,237,.07),transparent 22%),
    radial-gradient(circle at 95% 15%,rgba(6,182,212,.07),transparent 22%) !important;
}


/* Premium contrast layer */
body.admin-page .sidebar{background:linear-gradient(180deg,#0b1f3a,#102b50,#132f59)!important}
body.admin-page .sidebar a{color:#d6e0ef!important}
body.admin-page .sidebar a:hover{background:linear-gradient(90deg,rgba(99,56,245,.42),rgba(37,99,235,.18))!important;color:#fff!important}
body.admin-page .sidebar a.active{background:linear-gradient(100deg,#6338f5,#7c3aed 55%,#2563eb)!important;color:#fff!important;box-shadow:0 9px 24px rgba(99,56,245,.30),inset 3px 0 #fff!important}
body.admin-page .sidebar .nav-title{color:#9eb0ca!important}
body.admin-page .content{background:transparent!important}