:root {
  --sidebar-width: 250px;
  --sidebar-bg: #1f2937;
  --sidebar-fg: #cbd5e1;
  --sidebar-active: #6366f1;
  --topbar-height: 56px;
  --content-bg: #f3f4f6;
}

[data-bs-theme="dark"] {
  --sidebar-bg: #111827;
  --content-bg: #1a1d23;
}

html, body { height: 100%; }
body { background: var(--content-bg); }

/* ---- App shell ---- */
.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  color: var(--sidebar-fg);
  flex-shrink: 0;
  transition: margin-left .25s ease;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.app-shell.sidebar-collapsed .app-sidebar { margin-left: calc(-1 * var(--sidebar-width)); }

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.sidebar-nav .nav-link {
  color: var(--sidebar-fg);
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem 1.25rem;
  border-left: 3px solid transparent;
  transition: background .15s ease, color .15s ease;
}

.sidebar-nav .nav-link i:first-child { width: 1.2rem; text-align: center; }
.sidebar-nav .nav-link .chevron { margin-left: auto; font-size: .7rem; transition: transform .2s ease; }
.sidebar-nav .nav-link:not(.collapsed) .chevron { transform: rotate(180deg); }

.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link.active {
  color: #fff;
  background: rgba(255, 255, 255, .06);
  border-left-color: var(--sidebar-active);
}

.sidebar-subnav { background: rgba(0, 0, 0, .2); }
.sidebar-subnav .nav-link { padding-left: 2.5rem; font-size: .925rem; }

/* ---- Topbar ---- */
.app-main { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }

.app-topbar {
  height: var(--topbar-height);
  background: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color);
  padding: 0 1rem;
  position: sticky;
  top: 0;
  z-index: 1020;
}

.app-topbar .btn-link { color: var(--bs-body-color); text-decoration: none; }
.user-menu span { margin-left: .4rem; }

/* ---- Content ---- */
.app-content { padding: 1.5rem; animation: fade-up .25s ease; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.card { border: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.card .card-header { background: transparent; font-weight: 600; }

.stat-card { transition: transform .15s ease, box-shadow .15s ease; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .1); }
.stat-card .stat-icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: .75rem;
  font-size: 1.25rem;
}

/* ---- Auth pages ---- */
.auth-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #1f2937 0%, #4338ca 100%);
}

.auth-card-wrapper { width: 100%; max-width: 420px; padding: 1rem; }
/* Widen the wrapper when it hosts the split-screen sign-in */
.auth-card-wrapper:has(.auth-split) { max-width: 940px; }

.auth-card {
  background: var(--bs-body-bg);
  border-radius: 1rem;
  padding: 2.25rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
  animation: fade-up .35s ease;
}

.auth-card .auth-logo {
  font-size: 2.25rem;
  color: #4338ca;
  text-align: center;
  margin-bottom: .5rem;
}

/* ---- Tables ---- */
.table thead th { white-space: nowrap; }

@media (max-width: 768px) {
  .app-sidebar { position: fixed; z-index: 1040; margin-left: calc(-1 * var(--sidebar-width)); }
  .app-shell.sidebar-collapsed .app-sidebar { margin-left: 0; }
}

/* ============================================================
   Phase 5 — design-system polish
   ============================================================ */

/* Accessible focus ring (keyboard only) */
:focus-visible {
  outline: 2px solid var(--brand-2, #4338ca);
  outline-offset: 2px;
  border-radius: .25rem;
}
.btn:focus-visible { outline-offset: 3px; }

/* Skip link */
.skip-link {
  position: fixed;
  top: -60px;
  left: 1rem;
  z-index: 2000;
  background: #4338ca;
  color: #fff;
  padding: .5rem 1rem;
  border-radius: .5rem;
  transition: top .2s ease;
}
.skip-link:focus { top: 1rem; color: #fff; }

/* Top page-progress bar (navigation / form submit) */
.page-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #6366f1, #22d3ee);
  z-index: 2000;
  opacity: 0;
  transition: width .2s ease, opacity .3s ease;
}
.page-progress.active { opacity: 1; }

.app-content:focus { outline: none; }

/* Page header (reusable partial) */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.page-header h1 { margin: 0; font-size: 1.5rem; font-weight: 600; }
.page-header .subtitle { color: var(--bs-secondary-color); margin: .15rem 0 0; }
.page-header .actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Empty state (reusable partial) */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--bs-secondary-color);
}
.empty-state .empty-icon {
  font-size: 2.5rem;
  color: var(--bs-border-color);
  margin-bottom: .75rem;
}
.empty-state h2 { font-size: 1.05rem; font-weight: 600; color: var(--bs-body-color); }
.empty-state p { margin-bottom: 1rem; }

/* Buttons: subtle press feedback */
.btn { transition: transform .06s ease, box-shadow .15s ease, background-color .15s ease; }
.btn:active { transform: translateY(1px); }

/* Icon-only action buttons: consistent square hit area */
.btn-sm.btn-icon { width: 2rem; height: 2rem; padding: 0; display: inline-grid; place-items: center; }

/* ---- Kruti Dev (legacy non-Unicode Hindi) ----
   Hindi columns store Kruti Dev glyph codes, not Unicode Devanagari, so any
   control or cell that shows them must render with this font (same font file
   the legacy app and the certificate renderer use). */
@font-face {
  font-family: 'Kruti Dev 010';
  src: url('../fonts/KRDV010.TTF') format('truetype');
}

.krutidev,
.krutidev option {
  font-family: 'Kruti Dev 010', sans-serif;
  font-size: 1.375rem; /* Kruti Dev renders small; 22px matches the legacy forms */
  line-height: 1.2;
}

td.krutidev { font-size: 1.25rem; }

/* Tables: rounded, quieter header, row hover lift */
.card .table { margin-bottom: 0; }
.table > thead th {
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--bs-secondary-color);
  border-bottom-width: 1px;
}
.table-hover > tbody > tr { transition: background-color .12s ease; }

/* Form controls: comfortable focus + invalid affordance */
.form-control, .form-select { transition: border-color .12s ease, box-shadow .12s ease; }
.form-label { font-weight: 500; }
.was-validated .form-control:invalid, .form-control.input-validation-error {
  border-color: var(--bs-danger);
}
.field-validation-error { color: var(--bs-danger); font-size: .85rem; }

/* Skeleton loading utility */
.skeleton {
  background: linear-gradient(90deg, rgba(0,0,0,.06) 25%, rgba(0,0,0,.12) 37%, rgba(0,0,0,.06) 63%);
  background-size: 400% 100%;
  animation: skeleton 1.4s ease infinite;
  border-radius: .35rem;
}
[data-bs-theme="dark"] .skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.12) 37%, rgba(255,255,255,.06) 63%);
  background-size: 400% 100%;
}
@keyframes skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ============================================================
   Phase 6 — "next level" visual polish
   ============================================================ */

:root {
  --grad-brand: linear-gradient(135deg, #1a3291 0%, #4338ca 55%, #6d5cf6 100%);
}

/* ---- Sidebar: gradient brand + smoother active state ---- */
.sidebar-brand {
  background: linear-gradient(120deg, rgba(99, 102, 241, .22), transparent);
}
.sidebar-brand i { color: #a5b4fc; }
.sidebar-nav .nav-link { position: relative; border-radius: 0 .5rem .5rem 0; }
.sidebar-nav .nav-link.active {
  background: linear-gradient(90deg, rgba(99, 102, 241, .22), rgba(99, 102, 241, .04));
}
.sidebar-nav .nav-link i:first-child { transition: transform .15s ease; }
.sidebar-nav .nav-link:hover i:first-child { transform: translateX(2px) scale(1.08); }

/* ---- Topbar subtle depth ---- */
.app-topbar { box-shadow: 0 1px 0 var(--bs-border-color), 0 8px 24px -20px rgba(15, 23, 42, .5); }

/* ---- Cards: refined elevation + gradient accent on hover ---- */
.card {
  border-radius: .85rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  transition: box-shadow .2s ease, transform .2s ease;
}

/* ---- Stat cards: gradient icon tiles + hover lift + top accent ---- */
.stat-card { position: relative; overflow: hidden; }
.stat-card::after {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-brand);
  opacity: 0; transition: opacity .2s ease;
}
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(26, 50, 145, .45); }
.stat-card:hover::after { opacity: 1; }
.stat-card .stat-icon {
  box-shadow: 0 8px 18px -8px rgba(26, 50, 145, .55);
  transition: transform .2s ease;
}
.stat-card:hover .stat-icon { transform: scale(1.06) rotate(-3deg); }
.stat-card .stat-value { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* ---- Primary buttons: gradient + sheen sweep ---- */
.btn-primary {
  position: relative;
  overflow: hidden;
  border: none;
  background: var(--grad-brand);
  box-shadow: 0 12px 24px -14px rgba(67, 56, 202, .8);
}
.btn-primary:hover, .btn-primary:focus { background: var(--grad-brand); filter: brightness(1.06); }
.btn-primary::after {
  content: "";
  position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-18deg);
  transition: left .6s ease;
}
.btn-primary:hover::after { left: 140%; }

/* ---- Auth pages: split-screen with campus photograph ---- */
.auth-body {
  background: var(--grad-brand);
  padding: 1rem;
}
.auth-split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  width: 100%;
  max-width: 920px;
  min-height: 540px;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 40px 80px -24px rgba(15, 23, 42, .6);
  animation: fade-up .45s ease;
}
.auth-visual {
  position: relative;
  color: #fff;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
}
.auth-visual::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background-image: url('../images/campus-login.jpg');
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  animation: authZoom 20s ease-in-out infinite alternate;
}
.auth-visual::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(15, 22, 60, .45) 0%, rgba(26, 50, 145, .85) 100%);
}
@keyframes authZoom { to { transform: scale(1.12); } }
.auth-visual .visual-brand {
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 700; font-size: 1.15rem; margin-bottom: auto;
}
/* Brand crest: colourful logo on a white rounded plate so it reads on any bg */
.brand-logo-plate {
  display: grid; place-items: center;
  padding: .3rem;
  background: #fff;
  border-radius: .6rem;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .35);
}
.brand-logo { height: 1.9rem; width: auto; display: block; }
.brand-logo-lg { height: 3.5rem; }
.auth-logo .brand-logo { margin: 0 auto; }
.auth-visual h2 { font-weight: 800; letter-spacing: -.02em; text-shadow: 0 2px 20px rgba(0, 0, 0, .4); }
.auth-visual .visual-points { list-style: none; padding: 0; margin: 1rem 0 0; }
.auth-visual .visual-points li { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; opacity: .95; }
.auth-visual .visual-points i { color: #fbbf24; }

.auth-panel {
  background: var(--bs-body-bg);
  padding: 2.75rem 2.5rem;
  display: flex; flex-direction: column; justify-content: center;
}
.auth-panel .auth-logo { font-size: 2.25rem; color: #4338ca; margin-bottom: .5rem; }

/* Keep the old single-card auth path working as a graceful fallback */
.auth-card { background: var(--bs-body-bg); border-radius: 1rem; padding: 2.25rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3); animation: fade-up .35s ease; }

@media (max-width: 767px) {
  .auth-split { grid-template-columns: 1fr; max-width: 440px; min-height: 0; }
  .auth-visual { min-height: 200px; padding: 1.75rem; }
  .auth-panel { padding: 2rem 1.75rem; }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .auth-visual::before, .stat-card, .card { animation: none; transform: none; }
  .btn-primary::after { display: none; }
}