/*
 * ════════════════════════════════════════════════════════════════
 *   IQRA CMS — Master Theme
 *   Single external stylesheet for the entire project.
 *   Color system: navy #112254 · orange #F15C0B · bg #F4F7FC
 * ════════════════════════════════════════════════════════════════
 */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §1  CSS VARIABLES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  --navy:       #0b1a3e;
  --navy-mid:   #112254;
  --navy-dark:  #0D1B3E;
  --navy-light: #1a3580;
  --orange:     #F15C0B;
  --orange-lt:  #FF7A2F;
  --orange-2:   #F97316;
  --offwhite:   #F4F7FC;
  --white:      #FFFFFF;
  --border:     #E2E8F2;
  --border-2:   #DDE4F0;
  --text:       #112254;
  --text-2:     #1e2d4f;
  --muted:      #6B7C99;
  --muted-2:    #9BA8BB;
  --danger:     #E53E3E;
  --success:    #22C55E;
  --radius:     14px;
  --sb-width:   268px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §2  BASE RESET
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Project-wide safety net: a page whose content overflows sideways (a wide
   table, a long unbroken string, a fixed-width element someone forgot to
   cap) should clip at the viewport edge, not force the ENTIRE page to
   scroll horizontally — that's what was letting the topbar's own overflow
   spill sideways instead of just looking cramped. Doesn't affect
   position:sticky/fixed elements; only the true root scroller is touched. */
html { overflow-x: hidden; max-width: 100%; }
body { font-family: 'Inter', 'Segoe UI', sans-serif; overflow-x: hidden; max-width: 100%; }

@keyframes dropIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ping {
  0%, 100% { opacity: 1; }
  50%       { opacity: .25; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(1.4); }
}
@keyframes ddIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §3  LOGIN PAGE   (body.pg-login)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body.pg-login {
  background: var(--offwhite);
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

/* Left panel */
.panel-left {
  flex: 0 0 46%;
  background: linear-gradient(145deg, var(--navy) 0%, var(--navy-mid) 60%, #1e2e6e 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 56px;
  position: relative;
  overflow: hidden;
}
.panel-left::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: rgba(255,255,255,.045);
}
.panel-left::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -80px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: rgba(241,92,11,.20);
}
.deco-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.07);
}
.deco-ring-1 { width: 200px; height: 200px; top: 10%;  right: 8%; }
.deco-ring-2 { width: 120px; height: 120px; bottom: 18%; right: 20%; }
.deco-ring-3 { width:  80px; height:  80px; top: 38%;  left: 6%; }

.panel-left-content { position: relative; z-index: 2; text-align: center; }

.brand-logo-wrap {
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 24px;
  padding: 22px 32px;
  display: inline-block;
  margin-bottom: 40px;
}
.brand-logo-wrap img { height: 64px; object-fit: contain; display: block; }

.panel-left h1 {
  color: #fff;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.5px;
  margin-bottom: 14px;
}
.panel-left h1 span { color: var(--orange-lt); }

.panel-left p {
  color: rgba(255,255,255,.62);
  font-size: .96rem;
  line-height: 1.7;
  max-width: 340px;
  margin: 0 auto 48px;
}

.stats-row { display: flex; gap: 20px; justify-content: center; }
.stat-card-login {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 16px 22px;
  text-align: center;
  backdrop-filter: blur(6px);
}
.stat-card-login .num { display: block; font-size: 1.5rem; font-weight: 800; color: #fff; }
.stat-card-login .lbl { font-size: .75rem; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .8px; margin-top: 2px; }

/* Right panel */
.panel-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
  background: var(--offwhite);
  overflow-y: auto;
}
.login-card { width: 100%; max-width: 460px; }
.login-card-header { margin-bottom: 36px; }
.login-card-header .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(241,92,11,.1);
  color: var(--orange);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .9px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 50px;
  margin-bottom: 14px;
}
.login-card-header .eyebrow i { font-size: .8rem; }
.login-card-header h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.5px;
  line-height: 1.2;
  margin-bottom: 8px;
}
.login-card-header p { color: var(--muted); font-size: .9rem; }

/* Form fields */
.field-group { margin-bottom: 20px; }
.field-group label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.field-group label .req { color: var(--orange); margin-left: 2px; }

.input-wrap { position: relative; }
.input-wrap .field-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: .95rem;
  pointer-events: none;
  transition: color .2s;
}
.input-wrap input,
.input-wrap select {
  width: 100%;
  padding: 13px 48px 13px 46px;
  font-family: 'Inter', sans-serif;
  font-size: .92rem;
  color: var(--text);
  background: var(--white);
  border: 1.5px solid var(--border-2);
  border-radius: var(--radius);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  appearance: none;
  -webkit-appearance: none;
}
.input-wrap select { cursor: pointer; }
.input-wrap input::placeholder { color: #aab4c8; }
.input-wrap input:focus,
.input-wrap select:focus {
  border-color: var(--navy-mid);
  box-shadow: 0 0 0 4px rgba(17,34,84,.12);
}
.input-wrap .select-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: .8rem;
  pointer-events: none;
}
.toggle-pw {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: .95rem;
  padding: 4px;
  transition: color .2s;
}
.toggle-pw:hover { color: var(--navy-mid); }
.input-wrap input.is-invalid,
.input-wrap select.is-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px rgba(229,62,62,.1);
}
.field-error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  font-size: .8rem;
  color: var(--danger);
  font-weight: 500;
}

/* Remember / Forgot */
.form-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 0 28px;
}
.remember-label {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: .85rem;
  color: var(--muted);
  font-weight: 500;
  user-select: none;
}
.remember-label input[type="checkbox"] { display: none; }
.custom-check {
  width: 18px; height: 18px;
  border: 2px solid var(--border-2);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  flex-shrink: 0;
}
.remember-label input:checked + .custom-check {
  background: var(--orange);
  border-color: var(--orange);
}
.remember-label input:checked + .custom-check::after {
  content: '';
  width: 5px; height: 9px;
  border: 2px solid #fff;
  border-top: none; border-left: none;
  transform: rotate(45deg);
  margin-top: -2px;
  display: block;
}
.forgot-link {
  font-size: .85rem;
  font-weight: 600;
  color: var(--navy-mid);
  text-decoration: none;
  transition: color .2s;
}
.forgot-link:hover { color: var(--orange); }

/* Submit button */
.btn-signin {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--navy-mid) 0%, var(--orange) 100%);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: .97rem;
  font-weight: 700;
  letter-spacing: .3px;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 8px 24px rgba(17,34,84,.30);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn-signin:hover {
  opacity: .92;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(241,92,11,.35);
}
.btn-signin:active { transform: translateY(0); }

/* Divider */
.divider {
  text-align: center;
  position: relative;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: .78rem;
  letter-spacing: .5px;
}
.divider::before, .divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 38%;
  height: 1px;
  background: var(--border-2);
}
.divider::before { left: 0; }
.divider::after  { right: 0; }

/* Login footer */
.login-footer {
  margin-top: 32px;
  text-align: center;
  font-size: .78rem;
  color: var(--muted);
}
.login-footer a { color: var(--navy-mid); font-weight: 600; text-decoration: none; }
.login-footer a:hover { color: var(--orange); }

/* Login responsive */
@media (max-width: 860px) {
  body.pg-login { flex-direction: column; overflow: auto; }
  .panel-left { flex: 0 0 auto; padding: 40px 28px 36px; min-height: auto; }
  .stats-row { display: none; }
  .panel-left p { display: none; }
  .panel-left h1 { font-size: 1.5rem; margin-bottom: 0; }
  .brand-logo-wrap { margin-bottom: 20px; padding: 16px 24px; }
  .brand-logo-wrap img { height: 44px; }
  .panel-right { padding: 36px 20px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §4  MAIN DASHBOARD — index.php   (body.pg-home)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body.pg-home {
  background: var(--offwhite);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--text);
}

/* Navbar */
.top-nav {
  background: var(--navy-mid);
  height: 68px;
  padding: 0 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 999;
  box-shadow: 0 4px 24px rgba(17,34,84,.30);
}
.nav-brand img { height: 44px; object-fit: contain; display: block; }
.nav-right { display: flex; align-items: center; gap: 18px; }
.nav-user-info { text-align: right; }
.nav-welcome { display: block; font-size: .70rem; color: rgba(255,255,255,.50); line-height: 1; }
.nav-name    { display: block; font-size: .875rem; font-weight: 600; color: #fff; margin-top: 3px; }

.nav-avatar-wrap { position: relative; cursor: pointer; }
.nav-avatar {
  width: 42px; height: 42px;
  background: var(--orange);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700;
  border: 2.5px solid rgba(255,255,255,.20);
  transition: border-color .2s, transform .2s;
  user-select: none;
}
.nav-avatar-wrap:hover .nav-avatar,
.nav-avatar-wrap.open  .nav-avatar {
  border-color: rgba(255,255,255,.60);
  transform: scale(1.05);
}
.nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(17,34,84,.18);
  border: 1px solid var(--border);
  min-width: 190px;
  padding: 8px;
  animation: dropIn .18s ease;
}
.nav-avatar-wrap.open .nav-dropdown { display: block; }
.nav-dropdown a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  font-size: .85rem; font-weight: 500;
  color: var(--text); text-decoration: none;
  transition: background .15s;
}
.nav-dropdown a:hover { background: var(--offwhite); }
.nav-dropdown a i    { width: 16px; color: var(--muted); }
.logout-link   { color: #D62839 !important; }
.logout-link i { color: #D62839 !important; }
.nav-divider { height: 1px; background: var(--border); margin: 6px 0; }

/* Hero banner */
.hero-banner {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 55%, var(--navy-light) 100%);
  padding: 44px 40px 52px;
  position: relative;
  overflow: hidden;
}
.hero-deco { position: absolute; inset: 0; pointer-events: none; }
.hero-circle { position: absolute; border-radius: 50%; background: rgba(255,255,255,.04); }
.hero-circle.c1 { width: 380px; height: 380px; top: -130px; right: -100px; }
.hero-circle.c2 { width: 200px; height: 200px; bottom: -70px; right: 240px; }
.hero-circle.c3 { width: 100px; height: 100px; top: 20px; right: 320px; background: rgba(241,92,11,.12); }

.hero-content { position: relative; z-index: 2; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(241,92,11,.15);
  border: 1px solid rgba(241,92,11,.35);
  color: var(--orange-lt);
  font-size: .75rem; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 6px 14px; border-radius: 50px;
  margin-bottom: 16px;
}
.hero-banner h1 {
  font-size: 2rem; font-weight: 800;
  color: #fff; line-height: 1.22;
  letter-spacing: -.5px; margin-bottom: 10px;
}
.hero-banner p { color: rgba(255,255,255,.52); font-size: .92rem; }
.hero-date {
  position: absolute; bottom: 24px; right: 40px; z-index: 2;
  color: rgba(255,255,255,.40);
  font-size: .80rem; font-weight: 500;
  display: flex; align-items: center; gap: 7px;
}

/* Modules section */
.modules-section { flex: 1; padding: 36px 40px; }
.modules-section .section-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 28px;
  background: none;
  border: none;
  border-left: none;
  border-radius: 0;
  padding: 0;
  color: var(--text);
}
.modules-section .section-header h2 { font-size: 1.2rem; font-weight: 700; color: var(--text); }
.modules-section .section-header span { font-size: .78rem; color: var(--muted); }

.modules-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1400px;
}
@media (max-width: 1200px) { .modules-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .modules-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .modules-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .modules-section { padding: 24px 20px; }
  .hero-banner { padding: 32px 20px 40px; }
  .top-nav { padding: 0 18px; }
  .hero-date { display: none; }
}

/* Module card */
.module-card {
  background: #fff;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  box-shadow: 0 2px 12px rgba(17,34,84,.06);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.module-card:hover { transform: translateY(-7px); box-shadow: 0 20px 48px rgba(17,34,84,.13); }

.mc-c1:hover { border-color: #112254; }
.mc-c2:hover { border-color: #7B2FBE; }
.mc-c3:hover { border-color: #0F9B8E; }
.mc-c4:hover { border-color: #F15C0B; }
.mc-c5:hover { border-color: #2563EB; }
.mc-c6:hover { border-color: #D62839; }

.mc-top { padding: 26px 24px 20px; position: relative; overflow: hidden; }
.mc-c1 .mc-top { background: #eaecf5; }
.mc-c2 .mc-top { background: #f3e8ff; }
.mc-c3 .mc-top { background: #e6faf8; }
.mc-c4 .mc-top { background: #fff1ea; }
.mc-c5 .mc-top { background: #e7f0ff; }
.mc-c6 .mc-top { background: #ffe8eb; }

.mc-glow {
  position: absolute; top: -50px; right: -50px;
  width: 140px; height: 140px;
  border-radius: 50%; opacity: .15;
}
.mc-c1 .mc-glow { background: #112254; }
.mc-c2 .mc-glow { background: #7B2FBE; }
.mc-c3 .mc-glow { background: #0F9B8E; }
.mc-c4 .mc-glow { background: #F15C0B; }
.mc-c5 .mc-glow { background: #2563EB; }
.mc-c6 .mc-glow { background: #D62839; }

.mc-icon {
  width: 52px; height: 52px;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; color: #fff;
  position: relative; z-index: 1;
}
.mc-c1 .mc-icon { background: #112254; box-shadow: 0 6px 20px rgba(17,34,84,.35); }
.mc-c2 .mc-icon { background: #7B2FBE; box-shadow: 0 6px 20px rgba(123,47,190,.35); }
.mc-c3 .mc-icon { background: #0F9B8E; box-shadow: 0 6px 20px rgba(15,155,142,.35); }
.mc-c4 .mc-icon { background: #F15C0B; box-shadow: 0 6px 20px rgba(241,92,11,.35); }
.mc-c5 .mc-icon { background: #2563EB; box-shadow: 0 6px 20px rgba(37,99,235,.35); }
.mc-c6 .mc-icon { background: #D62839; box-shadow: 0 6px 20px rgba(214,40,57,.35); }

.mc-body { padding: 20px 24px 14px; flex: 1; }
.mc-label {
  font-size: .70rem; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); display: block; margin-bottom: 6px;
}
.mc-title  { font-size: 1.08rem; font-weight: 700; color: var(--text); margin-bottom: 8px; line-height: 1.3; }
.mc-desc   { font-size: .82rem; color: var(--muted); line-height: 1.65; }

.mc-btn {
  margin: 0 24px 24px;
  padding: 11px 16px;
  border-radius: 10px;
  font-family: inherit; font-size: .84rem; font-weight: 600;
  text-decoration: none;
  display: flex; align-items: center; justify-content: space-between;
  border: 1.5px solid;
  transition: background .2s, color .2s;
}
.mc-btn i { transition: transform .2s; font-size: .8rem; }
.mc-btn:hover i { transform: translateX(5px); }
.mc-c1 .mc-btn { background: #eaecf5; color: #112254; border-color: rgba(17,34,84,.25); }
.mc-c2 .mc-btn { background: #f3e8ff; color: #7B2FBE; border-color: rgba(123,47,190,.25); }
.mc-c3 .mc-btn { background: #e6faf8; color: #0F9B8E; border-color: rgba(15,155,142,.25); }
.mc-c4 .mc-btn { background: #fff1ea; color: #F15C0B; border-color: rgba(241,92,11,.25); }
.mc-c5 .mc-btn { background: #e7f0ff; color: #2563EB; border-color: rgba(37,99,235,.25); }
.mc-c6 .mc-btn { background: #ffe8eb; color: #D62839; border-color: rgba(214,40,57,.25); }
.mc-c1 .mc-btn:hover { background: #112254; color: #fff; }
.mc-c2 .mc-btn:hover { background: #7B2FBE; color: #fff; }
.mc-c3 .mc-btn:hover { background: #0F9B8E; color: #fff; }
.mc-c4 .mc-btn:hover { background: #F15C0B; color: #fff; }
.mc-c5 .mc-btn:hover { background: #2563EB; color: #fff; }
.mc-c6 .mc-btn:hover { background: #D62839; color: #fff; }

/* Site footer */
.site-footer {
  background: #fff;
  border-top: 1px solid var(--border);
  padding: 18px 40px;
  text-align: center;
  font-size: .80rem;
  color: var(--muted);
  margin-top: auto;
}
.site-footer strong { color: var(--navy-mid); }
.heart { color: #D62839; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §5  MODULE TEMPLATE — GLOBAL  (head-links.php + all module pages)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Error field highlight */
.error-field {
  border: 1px solid red !important;
  background-color: #ffe6ea !important;
}

/* Table action icon buttons */
.link-edit-btn, .link-delete-btn, .link-view-btn,
.link-form-btn, .link-admission-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  text-decoration: none;
  transition: opacity .15s;
}
.link-edit-btn:hover, .link-delete-btn:hover, .link-view-btn:hover,
.link-form-btn:hover, .link-admission-btn:hover { opacity: .75; }

.link-edit-btn      { color: green;   background-color: #ccfbdb; }
.link-delete-btn    { color: red;     background-color: #ffcccc; }
.link-view-btn      { color: blue;    background-color: #add8e6; }
.link-form-btn      { color: #6f42c1; background-color: #e8d5ff; }
.link-admission-btn { color: #f15c0b; background-color: #ffe0cc; }

a:has(> .link-edit-btn), a:has(> .link-delete-btn), a:has(> .link-view-btn),
a:has(> .link-form-btn), a:has(> .link-admission-btn) {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
td:has(.link-edit-btn), td:has(.link-delete-btn), td:has(.link-view-btn),
td:has(.link-form-btn), td:has(.link-admission-btn) {
  white-space: nowrap;
  vertical-align: middle;
}
td .link-edit-btn + a, td .link-delete-btn + a, td .link-view-btn + a,
td .link-form-btn + a, td .link-admission-btn + a,
td a + a { margin-left: 5px; }

@media (max-width: 575px) {
  .link-edit-btn, .link-delete-btn, .link-view-btn,
  .link-form-btn, .link-admission-btn { width: 28px; height: 28px; font-size: 12px; }
}

/* Status badges */
.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.status-query       { background-color: #fd7e14; color: #fff; }
.status-form-issued { background-color: #dc3545; color: #fff; }
.status-submitted   { background-color: #28a745; color: #fff; }
.status-enrolled    { background-color: #28a745; color: #fff; }
.status-rejected    { background-color: #dc3545; color: #fff; }
.status-pending     { background-color: #ffc107; color: #fff; }
.table-status-active   { color: green; font-weight: 700; }
.table-status-inactive { color: red;   font-weight: 700; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §6  MODULE TEMPLATE — SIDEBAR & LAYOUT OVERRIDES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Layout ──────────────────────────────────────────────────── */
.left-side-bar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  width: 268px !important;
  background: var(--navy-dark) !important;
  box-shadow: 4px 0 24px rgba(0,0,0,.28) !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 1000 !important;
}
.header {
  position: fixed !important;
  top: 0 !important;
  left: 268px !important;
  width: calc(100% - 268px) !important;
  height: 62px !important;
  padding: 0 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #fff !important;
  box-shadow: 0 1px 0 var(--border), 0 4px 16px rgba(17,34,84,.06) !important;
  border-bottom: none !important;
  z-index: 900 !important;
}
.main-container {
  margin-left: 268px !important;
  padding: 62px 0 0 0 !important;
  background: var(--offwhite) !important;
}

/* ── Sidebar Logo ────────────────────────────────────────────── */
.sb-logo {
  padding: 20px 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.sb-logo img { height: 38px; filter: brightness(0) invert(1); }
.sb-logo-text .t1 {
  font-size: .72rem; font-weight: 700; color: #fff;
  letter-spacing: 1.5px; text-transform: uppercase; display: block;
}
.sb-logo-text .t2 { font-size: .62rem; color: rgba(255,255,255,.40); display: block; margin-top: 2px; }

.sb-close {
  margin-left: auto;
  background: none; border: none;
  color: rgba(255,255,255,.45);
  cursor: pointer; font-size: 1.1rem;
  padding: 4px; line-height: 1; display: none;
}
@media (max-width: 1024px) { .sb-close { display: block; } }

/* ── Sidebar Nav ─────────────────────────────────────────────── */
.sb-nav {
  padding: 12px 0 20px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.12) transparent;
}
.sb-nav::-webkit-scrollbar { width: 4px; }
.sb-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 2px; }

.sb-section {
  font-size: .72rem; font-weight: 700;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: rgba(255,255,255,.28);
  padding: 14px 18px 5px;
  display: block;
}
.sb-divider { height: 1px; background: rgba(255,255,255,.06); margin: 8px 0; }

.sb-item { position: relative; }
.sb-item > a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 18px;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  font-size: .94rem; font-weight: 500;
  border-left: 3px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.sb-item > a:hover { background: rgba(255,255,255,.05); color: #fff; text-decoration: none; }
.sb-item > a.sb-active { background: rgba(241,92,11,.14); color: #fff; border-left-color: var(--orange); }
.sb-item.open > a    { background: rgba(255,255,255,.05); color: #fff; }

.sb-icon  { width: 17px; text-align: center; font-size: .88rem; flex-shrink: 0; }
.sb-arrow { margin-left: auto; font-size: .65rem; color: rgba(255,255,255,.30); transition: transform .22s; }
.sb-item.open > a .sb-arrow { transform: rotate(90deg); }

.sb-sub { display: none; background: rgba(0,0,0,.22); padding: 3px 0; }
.sb-item.open .sb-sub { display: block; }
.sb-sub a {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 18px 7px 46px;
  color: rgba(255,255,255,.52);
  text-decoration: none;
  font-size: .90rem;
  transition: color .15s, background .15s;
}
.sb-sub a:hover { color: #fff; background: rgba(255,255,255,.04); text-decoration: none; }
.sb-sub a .s-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(241,92,11,.6); flex-shrink: 0;
}
.sb-sub a.sb-active-link { color: #fff; }

/* ── Page Header & Breadcrumb ────────────────────────────────── */
.pd-ltr-20, .xs-pd-20-10 { background: var(--offwhite) !important; }
.main-heading-color,
.page-header .title h2,
.page-header h2 {
  color: var(--navy-mid) !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  letter-spacing: -.3px !important;
}
.breadcrumb { background: transparent !important; padding: 4px 0 0 !important; margin: 0 !important; }
.breadcrumb-item a { color: var(--orange) !important; text-decoration: none !important; font-weight: 500 !important; }
.breadcrumb-item.active { color: var(--muted) !important; font-weight: 500 !important; }
.breadcrumb-item + .breadcrumb-item::before { color: #C4CDD8 !important; }

/* ── Card Box ────────────────────────────────────────────────── */
.card-box {
  background: #fff !important;
  border-radius: 14px !important;
  border: 1.5px solid var(--border) !important;
  box-shadow: 0 2px 12px rgba(17,34,84,.05) !important;
}

/* ── Form Labels ─────────────────────────────────────────────── */
.form-group > label, .form-group label {
  font-size: .82rem !important;
  font-weight: 600 !important;
  color: var(--navy-mid) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* ── Form Controls ───────────────────────────────────────────── */
.form-control {
  border: 1.5px solid var(--border-2) !important;
  border-radius: 9px !important;
  font-size: .875rem !important;
  color: var(--navy-mid) !important;
  padding: 9px 13px !important;
  height: auto !important;
  line-height: 1.5 !important;
  background: #fff !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.form-control::placeholder { color: #aab4c8 !important; }
.form-control:focus {
  border-color: var(--navy-mid) !important;
  box-shadow: 0 0 0 3.5px rgba(17,34,84,.10) !important;
  outline: none !important;
  background: #fff !important;
}
.form-control:disabled, .form-control[readonly] {
  background: var(--offwhite) !important;
  color: var(--muted) !important;
  cursor: default !important;
}
input.error-field, select.error-field,
textarea.error-field, .form-control.error-field {
  border-color: var(--danger) !important;
  background: #FFF5F5 !important;
  box-shadow: 0 0 0 3px rgba(229,62,62,.09) !important;
}

/* ── Select2 ─────────────────────────────────────────────────── */
.select2-container--default .select2-selection--single {
  border: 1.5px solid var(--border-2) !important;
  border-radius: 9px !important;
  height: auto !important;
  padding: 8px 13px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.5 !important; padding: 0 !important;
  color: var(--navy-mid) !important; font-size: .875rem !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100% !important; top: 0 !important; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: #aab4c8 !important; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open  .select2-selection--single {
  border-color: var(--navy-mid) !important;
  box-shadow: 0 0 0 3.5px rgba(17,34,84,.10) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--navy-mid) !important; }
.select2-search--dropdown .select2-search__field {
  border: 1.5px solid var(--border-2) !important;
  border-radius: 7px !important;
  padding: 7px 10px !important;
  font-size: .84rem !important;
}
.select2-search--dropdown .select2-search__field:focus { border-color: var(--navy-mid) !important; outline: none !important; }
.select2-dropdown {
  border: 1.5px solid var(--border-2) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 32px rgba(17,34,84,.12) !important;
  overflow: hidden !important;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn { border-radius: 9px !important; font-weight: 600 !important; font-size: .875rem !important; padding: 9px 22px !important; transition: background .2s, border-color .2s, transform .15s, box-shadow .2s !important; }
.btn-primary { background: var(--navy-mid) !important; border-color: var(--navy-mid) !important; color: #fff !important; }
.btn-primary:hover, .btn-primary:focus {
  background: var(--navy) !important; border-color: var(--navy) !important; color: #fff !important;
  transform: translateY(-1px) !important; box-shadow: 0 6px 18px rgba(17,34,84,.25) !important;
}
.btn-secondary { background: var(--offwhite) !important; border-color: var(--border-2) !important; color: var(--muted) !important; }
.btn-secondary:hover { background: var(--border) !important; color: var(--navy-mid) !important; border-color: #C4CDD8 !important; }
.btn-success, .btn-danger, .btn-info, .btn-warning { border-radius: 9px !important; font-weight: 600 !important; }
.btn-sm { padding: 6px 14px !important; font-size: .80rem !important; }

/* ── Alerts ──────────────────────────────────────────────────── */
.alert { border-radius: 10px !important; font-size: .875rem !important; font-weight: 500 !important; border: none !important; padding: 14px 18px !important; }
.alert-success { background: #F0FDF4 !important; color: #15803D !important; border-left: 4px solid var(--success) !important; }
.alert-danger  { background: #FFF5F5 !important; color: #C53030 !important; border-left: 4px solid var(--danger) !important; }
.alert-warning { background: #FFFBEB !important; color: #92400E !important; border-left: 4px solid #F59E0B !important; }
.alert-info    { background: #EFF6FF !important; color: #1E40AF !important; border-left: 4px solid #3B82F6 !important; }

/* ── Tables & DataTables ─────────────────────────────────────── */
.table thead th {
  background: var(--navy-mid) !important; color: #fff !important;
  font-size: .76rem !important; font-weight: 600 !important;
  letter-spacing: .5px !important; text-transform: uppercase !important;
  border: none !important; padding: 11px 14px !important; white-space: nowrap !important;
}
.table tbody td {
  vertical-align: middle !important; font-size: .84rem !important;
  color: var(--text-2) !important; border-color: var(--border) !important; padding: 10px 14px !important;
}
.table-striped tbody tr:nth-of-type(odd) { background: #F7F9FC !important; }
.table tbody tr:hover { background: #EEF2FF !important; }

.dataTables_filter input, .dataTables_length select {
  border: 1.5px solid var(--border-2) !important; border-radius: 8px !important;
  padding: 7px 12px !important; font-size: .84rem !important;
  color: var(--navy-mid) !important; background: #fff !important; height: auto !important;
}
.dataTables_filter input:focus, .dataTables_length select:focus {
  border-color: var(--navy-mid) !important; box-shadow: 0 0 0 3px rgba(17,34,84,.10) !important; outline: none !important;
}
.dataTables_info { font-size: .82rem !important; color: var(--muted) !important; }
.page-item.active .page-link { background: var(--navy-mid) !important; border-color: var(--navy-mid) !important; }
.page-link { color: var(--navy-mid) !important; border-radius: 7px !important; margin: 0 2px !important; }
.page-link:hover { background: #EEF2FF !important; border-color: var(--border-2) !important; color: var(--navy-mid) !important; }

/* ── Misc ────────────────────────────────────────────────────── */
.badge { border-radius: 6px !important; font-weight: 600 !important; font-size: .72rem !important; padding: 4px 9px !important; }
.link-back-btn {
  background: var(--navy-mid) !important; padding: 9px 22px !important;
  color: #fff !important; text-decoration: none !important;
  font-size: .875rem !important; font-weight: 600 !important;
  border-radius: 9px !important; display: inline-block !important;
  transition: background .2s !important;
}
.link-back-btn:hover { background: var(--navy) !important; color: #fff !important; }

.modal-content { border-radius: 14px !important; border: none !important; box-shadow: 0 24px 64px rgba(17,34,84,.18) !important; }
.modal-header {
  background: var(--navy-mid) !important; border-radius: 13px 13px 0 0 !important;
  border-bottom: none !important; padding: 18px 24px !important;
}
.modal-header .modal-title { color: #fff !important; font-weight: 700 !important; font-size: 1rem !important; }
.modal-header .close { color: rgba(255,255,255,.7) !important; }
.modal-header .close:hover { color: #fff !important; }
.modal-footer { border-top: 1px solid var(--border) !important; padding: 14px 24px !important; }

/* ── Header user display ─────────────────────────────────────── */
.header .user-name { color: var(--navy-mid) !important; font-weight: 600 !important; }
.header .user-info-dropdown .dropdown-menu {
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(17,34,84,.14) !important;
  border: 1px solid var(--border) !important;
}

/* ── Desktop: override vendor's 1300px sidebar-hide ─────────── */
@media (min-width: 1025px) {
  .left-side-bar { left: 0 !important; transition: none !important; }
  .header { left: 268px !important; width: calc(100% - 268px) !important; }
  .main-container { margin-left: 268px !important; }
  .hamburger-menu { display: none !important; }
}

/* ── Mobile ≤ 1024px ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .left-side-bar { left: -268px !important; transition: left .3s ease !important; }
  .left-side-bar.open,
  .left-side-bar.open-sidebar { left: 0 !important; }
  .header { left: 0 !important; width: 100% !important; }
  .main-container { margin-left: 0 !important; padding-top: 70px !important; }
  .main-wrap { margin-left: 0 !important; padding-top: 70px !important; }
  .hamburger-menu { display: flex !important; align-items: center; justify-content: center; }
  .header-nav-label { display: none !important; }
}
@media (max-width: 576px) {
  .header .user-name { display: none !important; }
  .header-home-link { padding: 7px 10px !important; }
  .header .user-notification { display: none !important; }
}

/* ── Topbar (.tb-left/.tb-right and their children) on phones ──────────
   .tb-module's label text, .campus-pill, and .tb-uname have no built-in
   shrink/hide behavior of their own, and .header has no flex-wrap — so on
   a narrow phone their combined width can exceed the viewport, and instead
   of wrapping to a second row, .tb-right's own content (the notif bell
   included, since it's the FIRST item inside .tb-right) gets squeezed
   left until it visually collides with .tb-left's hamburger/module label
   ("notifications touch the left side of the topbar"). Trimming
   non-essential text/pills at each breakpoint — same intent the OLD
   .header .user-name / .user-notification rules above already had, just
   never ported to the rebuilt .tb-* markup — keeps the header (and so the
   notif bell + its dropdown) exactly where it belongs. */
@media (max-width: 1024px) {
  .header { padding: 0 14px !important; }
  .tb-left, .tb-right { min-width: 0; }
  .tb-right { gap: 8px; }
}
@media (max-width: 768px) {
  .campus-pill { display: none !important; }
}
@media (max-width: 576px) {
  .tb-uname { display: none !important; }
  .tb-user-btn { padding: 4px !important; gap: 0 !important; }
  .tb-chev { display: none !important; }
  .header { padding: 0 10px !important; }
}
@media (max-width: 400px) {
  .tb-module { display: none !important; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §7  MODULE TEMPLATE — FORM STYLES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Section Header (inside card-box) ────────────────────────── */
.card-box .section-header {
  background: linear-gradient(135deg, #0D1B3E 0%, #112254 100%) !important;
  color: #fff !important;
  padding: 11px 18px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: .93rem !important;
  margin-bottom: 22px !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  letter-spacing: .2px !important;
  border-left: 4px solid var(--orange) !important;
}
.sub-section-header {
  background: #EEF2FF !important;
  color: var(--navy-mid) !important;
  padding: 9px 16px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: .84rem !important;
  margin-bottom: 16px !important;
  display: block !important;
  border-left: 3px solid var(--navy-mid) !important;
  letter-spacing: .3px !important;
  text-transform: uppercase !important;
}

/* ── Nav Pills / Tabs ────────────────────────────────────────── */
.nav-pills {
  border-bottom: 2px solid var(--border) !important;
  padding-bottom: 0 !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
  background: #F9FAFB !important;
  border-radius: 14px 14px 0 0 !important;
  padding-top: 14px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.tab-heads {
  background: #fff !important;
  color: var(--navy-mid) !important;
  border-radius: 9px 9px 0 0 !important;
  font-size: .83rem !important;
  font-weight: 600 !important;
  margin: 0 2px !important;
  padding: 10px 18px !important;
  border: 1.5px solid var(--border) !important;
  border-bottom: none !important;
  transition: background .15s, color .15s !important;
}
.tab-heads i { color: var(--orange) !important; font-size: .85rem !important; }
.tab-heads:hover { background: #EEF2FF !important; color: var(--navy-mid) !important; text-decoration: none !important; }
.nav-link.active.tab-heads {
  background: var(--navy-mid) !important;
  color: #fff !important;
  border-color: var(--navy-mid) !important;
}
.nav-link.active.tab-heads i { color: var(--orange) !important; }

.tab-con {
  border: 1.5px solid var(--border) !important;
  border-radius: 0 0 12px 12px !important;
  border-top: none !important;
  background: #fff !important;
}

/* ── Document Upload Card ────────────────────────────────────── */
.doc-section-header {
  border-bottom: 2px solid var(--border) !important;
  padding-bottom: 14px !important;
  margin-bottom: 22px !important;
}
.doc-section-header h4 { color: var(--navy-mid) !important; font-weight: 700 !important; font-size: 1rem !important; }

.doc-upload-card {
  border: 2px dashed #C4CDD8 !important;
  border-radius: 12px !important;
  padding: 20px 15px;
  text-align: center;
  cursor: pointer;
  position: relative;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #F9FAFB !important;
  transition: border-color .2s, background .2s !important;
  overflow: hidden;
  margin-bottom: 10px;
}
.doc-upload-card.portrait { min-height: 360px; }
.doc-upload-card.portrait .preview-img { max-height: 320px !important; }
.doc-upload-card:hover { border-color: var(--navy-mid) !important; background: #EEF2FF !important; }
.doc-upload-card input[type="file"] {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0; cursor: pointer; z-index: 2;
}
.doc-upload-card .upload-placeholder { z-index: 1; pointer-events: none; }
.doc-upload-card .upload-icon { font-size: 36px; color: #C4CDD8 !important; margin-bottom: 10px; display: block; transition: color .2s; }
.doc-upload-card:hover .upload-icon { color: var(--navy-mid) !important; }
.doc-upload-card .upload-text { color: var(--muted-2); font-size: .84rem; line-height: 1.6; }
.doc-upload-card .preview-img { max-width: 100%; max-height: 170px; border-radius: 8px; display: none; object-fit: contain; z-index: 1; }
.doc-upload-card .pdf-indicator { display: none; flex-direction: column; align-items: center; z-index: 1; pointer-events: none; }
.doc-upload-card .pdf-indicator i { font-size: 44px; color: var(--danger); margin-bottom: 8px; }
.doc-upload-card .pdf-name { font-size: .78rem; color: var(--muted); word-break: break-all; }
.doc-upload-card.has-file { border-color: var(--success) !important; background: #F0FDF4 !important; border-style: solid !important; }
.doc-upload-card.has-file .upload-placeholder { display: none; }
.doc-upload-card.has-image .preview-img { display: block; }
.doc-upload-card.has-pdf   .pdf-indicator { display: flex; }
.doc-upload-card .remove-file {
  position: absolute; top: 8px; right: 8px;
  background: var(--danger); color: #fff; border: none;
  border-radius: 50%; width: 28px; height: 28px;
  font-size: 15px; font-weight: bold; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  z-index: 10; padding: 0; line-height: 1;
}
.doc-upload-card.has-file .remove-file { display: flex; }

.doc-label {
  font-weight: 700 !important;
  font-size: .82rem !important;
  color: var(--navy-mid) !important;
  background: #EEF2FF !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
  margin-bottom: 10px !important;
  display: inline-block !important;
  letter-spacing: .2px !important;
}

/* ── ID Type Toggle ──────────────────────────────────────────── */
.id-type-selector {
  display: flex; gap: 0;
  border: 1.5px solid var(--border-2) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  width: fit-content;
  margin-bottom: 22px !important;
}
.id-type-btn {
  padding: 10px 26px !important;
  font-size: .875rem !important;
  font-weight: 600 !important;
  border: none; cursor: pointer;
  background: #fff !important;
  color: var(--navy-mid) !important;
  transition: background .15s, color .15s !important;
  display: flex; align-items: center; gap: 7px;
}
.id-type-btn:not(:last-child) { border-right: 1.5px solid var(--border-2) !important; }
.id-type-btn.active { background: var(--navy-mid) !important; color: #fff !important; }
.id-type-btn:not(.active):hover { background: #EEF2FF !important; }

/* ── Fee Textbox ─────────────────────────────────────────────── */
.fee-textbox {
  background: #FFF7ED !important;
  border-color: var(--orange-2) !important;
  color: #9A3412 !important;
  font-weight: 600 !important;
}
.fee-textbox:focus {
  border-color: var(--orange-2) !important;
  box-shadow: 0 0 0 3px rgba(249,115,22,.12) !important;
}

/* ── Fee Info Banners ────────────────────────────────────────── */
#feeForInfo {
  display: none;
  background: #EEF2FF !important;
  border-left: 4px solid var(--navy-mid) !important;
  border-radius: 9px !important;
  padding: 11px 16px !important;
  margin-bottom: 20px !important;
}
#feeForInfo i { color: var(--navy-mid) !important; }
#feeNotSelected {
  background: #FFFBEB !important;
  border-left: 4px solid #F59E0B !important;
  border-radius: 9px !important;
  padding: 11px 16px !important;
  margin-bottom: 20px !important;
}
#cnic-section { display: none; }

/* ── Year Picker ─────────────────────────────────────────────── */
.yr-picker-wrap { position: relative; }
.yr-picker-grid {
  display: none; position: absolute; top: 100%; left: 0;
  z-index: 9999; background: #fff;
  border: 1.5px solid var(--border-2) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 32px rgba(17,34,84,.12) !important;
  padding: 10px; width: 224px; margin-top: 4px;
}
.yr-picker-grid.open { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; }
.yr-picker-grid span {
  text-align: center; padding: 7px 4px;
  border-radius: 7px !important; cursor: pointer;
  font-size: .82rem !important;
  border: 1px solid var(--border) !important;
  color: var(--navy-mid) !important;
}
.yr-picker-grid span:hover { background: #EEF2FF !important; border-color: var(--navy-mid) !important; }
.yr-picker-grid span.yr-active { background: var(--navy-mid) !important; color: #fff !important; border-color: var(--navy-mid) !important; }

/* ── List Group (subjects) ───────────────────────────────────── */
.list-group-item { font-size: .875rem !important; color: var(--navy-mid) !important; border-color: var(--border) !important; padding: 10px 16px !important; }
.list-group-item:first-child { border-radius: 10px 10px 0 0 !important; }
.list-group-item:last-child  { border-radius: 0 0 10px 10px !important; }
.list-group-item.text-muted  { color: var(--muted-2) !important; font-style: italic !important; }

/* ── Misc text helpers ───────────────────────────────────────── */
.sub-text { color: var(--muted-2) !important; font-size: .78rem !important; }

/* ── Custom Radio / Checkbox ─────────────────────────────────── */
.custom-control-label { font-size: .875rem !important; color: var(--navy-mid) !important; font-weight: 500 !important; }
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--navy-mid) !important;
  border-color: var(--navy-mid) !important;
}
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 3px rgba(17,34,84,.12) !important; }

/* ── Side Badges ─────────────────────────────────────────────── */
.side-badge { display: inline-block; font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 12px; margin-left: 6px; vertical-align: middle; }
.side-front { background: var(--navy-mid) !important; color: #fff; }
.side-back  { background: var(--orange) !important; color: #fff; }

/* ── Table inline header color fix ──────────────────────────── */
.table thead tr th[style*="background-color"] { background-color: var(--navy-mid) !important; }

/* ── Combo subject badges ────────────────────────────────────── */
.list-group-item span[style*="background:#0e2058"],
.list-group-item span[style*="background: #0e2058"] {
  background: var(--navy-mid) !important;
  border-radius: 6px !important;
  font-size: .78rem !important;
  padding: 3px 10px !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §8  ADMISSION MANAGEMENT DASHBOARD — standalone  (body.pg-dash)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body.pg-dash {
  background: var(--offwhite);
  min-height: 100vh;
  display: flex;
  color: var(--text);
}


/* Main wrapper */
.main-wrap {
  margin-left: var(--sb-width);
  padding-top: 62px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left .3s cubic-bezier(.4,0,.2,1);
}
.main-wrap.sb-full { margin-left: 0; }

/* Topbar */
.topbar {
  background: #fff;
  height: 62px;
  padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 900;
  box-shadow: 0 1px 0 var(--border), 0 4px 16px rgba(17,34,84,.06);
  flex-shrink: 0;
}
.tb-left { display: flex; align-items: center; gap: 14px; }
.sb-toggle {
  background: none; border: none; cursor: pointer;
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--navy-mid); font-size: 1.05rem;
  transition: background .15s;
}
.sb-toggle:hover { background: var(--offwhite); }
.tb-module { display: flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 700; color: var(--navy-mid); }
.tb-module .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }

.tb-right { display: flex; align-items: center; gap: 12px; }
.campus-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: #EEF2FF; border: 1px solid rgba(17,34,84,.10);
  border-radius: 50px; padding: 5px 13px;
  font-size: .76rem; font-weight: 600; color: var(--navy-mid);
}
.campus-pill i { color: var(--orange); font-size: .72rem; }

.tb-user { position: relative; cursor: pointer; }
.tb-user-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: 50px; border: 1.5px solid var(--border);
  transition: border-color .2s;
}
.tb-user:hover .tb-user-btn { border-color: var(--navy-mid); }
.tb-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--orange); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 700;
}
.tb-avatar-img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: block; }
.tb-uname { font-size: .80rem; font-weight: 600; color: var(--navy-mid); }
.tb-chev  { font-size: .62rem; color: var(--muted-2); }

.tb-dd {
  display: none; position: absolute;
  top: calc(100% + 10px); right: 0;
  background: #fff; border-radius: 11px;
  box-shadow: 0 16px 40px rgba(17,34,84,.15);
  border: 1px solid var(--border);
  min-width: 175px; padding: 7px;
  animation: ddIn .15s ease;
}
.tb-user.open .tb-dd { display: block; }
.tb-dd a {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: 7px;
  font-size: .81rem; font-weight: 500;
  color: var(--navy-mid); text-decoration: none;
  transition: background .15s;
}
.tb-dd a:hover { background: var(--offwhite); }
.tb-dd a i { width: 13px; color: var(--muted); }
.tb-dd-sep { height: 1px; background: var(--border); margin: 5px 0; }
.tb-dd .danger { color: #D62839 !important; }
.tb-dd .danger i { color: #D62839 !important; }

/* Page content */
.pg-content { flex: 1; padding: 30px 32px; }

/* Hero (admission dashboard) */
body.pg-dash .hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 55%, var(--navy-light) 100%);
  border-radius: 16px;
  padding: 34px 40px;
  position: relative; overflow: hidden;
  margin-bottom: 30px;
}
body.pg-dash .hero-deco { position: absolute; inset: 0; pointer-events: none; }
.hc { position: absolute; border-radius: 50%; }
.hc1 { width: 340px; height: 340px; top: -110px; right: -90px; background: rgba(255,255,255,.04); }
.hc2 { width: 170px; height: 170px; bottom: -55px; right: 200px; background: rgba(255,255,255,.04); }
.hc3 { width:  80px; height:  80px; top: 24px; right: 260px; background: rgba(241,92,11,.12); }

.hero-body { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
body.pg-dash .hero-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(241,92,11,.15);
  border: 1px solid rgba(241,92,11,.35);
  color: var(--orange-lt);
  font-size: .68rem; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 5px 12px; border-radius: 50px;
  margin-bottom: 11px;
}
body.pg-dash .hero h1 { font-size: 1.65rem; font-weight: 800; color: #fff; line-height: 1.25; letter-spacing: -.3px; margin-bottom: 8px; }
body.pg-dash .hero p  { color: rgba(255,255,255,.50); font-size: .86rem; }

.hero-clock {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 14px 22px;
  text-align: center;
  min-width: 190px;
}
#liveTime  { font-size: 1.9rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: 3px; display: block; }
#liveDate2 { font-size: .73rem; color: rgba(255,255,255,.50); margin-top: 5px; display: block; }

/* Section header (dashboard) */
.sec-hdr { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.sec-hdr .bar { width: 4px; height: 17px; background: var(--orange); border-radius: 2px; }
.sec-hdr h2  { font-size: .97rem; font-weight: 700; color: var(--navy-mid); }
.live-ping { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; animation: ping 1.5s infinite; }

/* Stat cards (admission dashboard) */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
@media (max-width: 1100px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .stat-row { grid-template-columns: 1fr; } }

body.pg-dash .stat-card {
  background: #fff;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  box-shadow: 0 2px 10px rgba(17,34,84,.05);
  padding: 20px;
  display: flex; align-items: center; gap: 15px;
  transition: transform .22s ease, box-shadow .22s ease;
}
body.pg-dash .stat-card:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(17,34,84,.12); }

.st-icon {
  width: 52px; height: 52px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; color: #fff; flex-shrink: 0;
}
.ic-b { background: linear-gradient(135deg,#1e40af,#3b82f6); box-shadow: 0 5px 16px rgba(59,130,246,.28); }
.ic-r { background: linear-gradient(135deg,#be123c,#f43f5e); box-shadow: 0 5px 16px rgba(244,63,94,.28); }
.ic-o { background: linear-gradient(135deg,#c2410c,#f97316); box-shadow: 0 5px 16px rgba(249,115,22,.28); }
.ic-g { background: linear-gradient(135deg,#15803d,#22c55e); box-shadow: 0 5px 16px rgba(34,197,94,.28); }

.st-lbl { font-size: .67rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 4px; }
.st-val { font-size: 1.9rem; font-weight: 800; color: var(--navy-mid); line-height: 1; margin-bottom: 3px; }
.st-sub { font-size: .70rem; color: var(--muted-2); }

/* Quick access grid */
.qa-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
@media (max-width: 900px) { .qa-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .qa-grid { grid-template-columns: 1fr; } }

.qa-card {
  background: #fff;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  padding: 16px 18px;
  display: flex; align-items: center; gap: 13px;
  text-decoration: none;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.qa-card:hover { border-color: var(--navy-mid); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(17,34,84,.10); text-decoration: none; }
.qa-ico { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: .95rem; flex-shrink: 0; }
.qa-ico-blue   { background: #EEF2FF; color: #3B82F6; }
.qa-ico-red    { background: #FFF1F2; color: #F43F5E; }
.qa-ico-orange { background: #FFF7ED; color: #F97316; }
.qa-ico-green  { background: #F0FDF4; color: #22C55E; }
.qa-ico-purple { background: #F5F3FF; color: #7C3AED; }
.qa-ico-navy   { background: #EFF6FF; color: #112254; }
.qa-title { font-size: .86rem; font-weight: 700; color: var(--navy-mid); margin-bottom: 2px; }
.qa-desc  { font-size: .72rem; color: var(--muted); }
.qa-arr   { margin-left: auto; color: #C4CDD8; font-size: .78rem; transition: transform .2s, color .2s; }
.qa-card:hover .qa-arr { transform: translateX(4px); color: var(--navy-mid); }

/* Page footer (admission dashboard) */
.pg-footer {
  background: #fff; border-top: 1px solid var(--border);
  padding: 15px 32px; text-align: center;
  font-size: .76rem; color: var(--muted);
  flex-shrink: 0;
}
.pg-footer strong { color: var(--navy-mid); }

/* Overlay (mobile) */
.sb-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 999; }
.sb-overlay.on { display: block; }

/* Admission dashboard responsive */
@media (max-width: 860px) {
  .main-wrap { margin-left: 0; }
  .pg-content { padding: 20px 16px; }
  body.pg-dash .hero { padding: 22px 20px; }
  .hero-clock { display: none; }
  .topbar { padding: 0 16px; }
  .campus-pill .cp-text { display: none; }
  .tb-uname { display: none; }
  .tb-chev  { display: none; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   §9  USER & CAMPUS MANAGEMENT DASHBOARD  (template-based pages)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Section title */
.section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--navy-mid);
  border-left: 4px solid var(--navy-mid);
  padding-left: 10px;
  margin-bottom: 16px;
}

/* Stat card (user/campus management) */
.stat-card {
  border-radius: 10px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.stat-card .stat-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.stat-card .stat-body  { flex: 1; }
.stat-card .stat-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; opacity: .75; margin-bottom: 4px; }
.stat-card .stat-value { font-size: 32px; font-weight: 800; line-height: 1; margin: 0; }
.stat-card .stat-sub   { font-size: 11px; opacity: .6; margin-top: 4px; }

.stat-blue   { background: #e8eeff; color: #0E2058; }
.stat-blue   .stat-icon { background: #0E2058; color: #fff; }
.stat-orange { background: #fff3e8; color: #b85c00; }
.stat-orange .stat-icon { background: #f97316; color: #fff; }
.stat-green  { background: #e8f8f0; color: #155724; }
.stat-green  .stat-icon { background: #28a745; color: #fff; }
.stat-red    { background: #fdecea; color: #7b1e1e; }
.stat-red    .stat-icon { background: #dc3545; color: #fff; }
.stat-purple { background: #f3eeff; color: #3d1a8f; }
.stat-purple .stat-icon { background: #6f42c1; color: #fff; }

.stat-card .stat-value.updating { opacity: .4; transition: opacity .2s; }

/* Live dot */
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #28a745;
  display: inline-block;
  margin-right: 5px;
  animation: pulse 1.5s infinite;
}

/* Recent user table helpers */
.recent-user-img  { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid #ddd; }
.recent-user-icon { font-size: 28px; color: #bbb; }

/* Dashboard info / clock pill */
.dashboard-topbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.um-pill {
  background: linear-gradient(135deg, #0E2058, #1a3a8f);
  border-radius: 10px;
  padding: 10px 22px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 3px 10px rgba(14,32,88,.25);
}
.um-pill-icon { color: rgba(255,255,255,.7); font-size: 16px; }
.um-pill-text { font-size: 15px; font-weight: 600; color: #fff; letter-spacing: .5px; }
.um-clock-time { font-size: 20px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: 2px; }
.um-clock-date { font-size: 14px; color: rgba(255,255,255,.8); letter-spacing: .5px; }
.um-clock-sep  { color: rgba(255,255,255,.3); font-size: 16px; }

/* Welcome banner text */
.welcome-sub   { font-size: 25px; font-weight: 500; letter-spacing: -1px; color: var(--orange); margin: 10px 0; }
.welcome-title { font-size: 35px; font-weight: 800; letter-spacing: 5px; line-height: 40px; color: #1b00ff; }
.welcome-url   { font-size: 18px; font-weight: 500; letter-spacing: 5px; color: var(--orange); }

/* View all link */
.view-all-link { font-size: 13px; color: #0E2058; font-weight: 600; text-decoration: none; }
.view-all-link:hover { color: var(--orange); text-decoration: none; }
.view-all-wrap { text-align: right; margin-top: 12px; }

/* No-data empty state */
.empty-state-text { text-align: center; padding: 30px 0; color: var(--muted); }

/* ════════════════════════════════════════════════════════════════════
   §10  MANAGE / REPORT PAGE COMMON COMPONENTS
════════════════════════════════════════════════════════════════════ */

/* Filter bar */
.filter-bar { background: #F4F7FC; border-radius: 10px; padding: 14px 20px; margin-bottom: 16px; }

/* Live search */
.live-search-wrap { position: relative; }
.live-search-wrap .fa-search { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #aab4c8; pointer-events: none; }
.live-search-wrap input { padding-left: 30px !important; }
tr.search-hidden { display: none !important; }
#liveSearchCount { font-size: 12px; color: #9BA8BB; margin-left: 6px; }

/* Form number badge */
.badge-form { background: var(--navy-mid); color: #fff; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 20px; }

/* Pagination info */
.pagination-info { font-size: 14px; color: #6B7C99; }

/* Admission query button hover */
.link-admission-btn:hover { color: #c44a08 !important; background-color: #ffcfad !important; }

/* Select2 new-tag option */
.select2-new-tag { color: #28a745; font-weight: 500; }
.select2-new-tag i { margin-right: 4px; }

/* Status badge variants (used by document pages) */
.status-badge { font-size: 12px; padding: 3px 10px; border-radius: 12px; font-weight: 600; }
.status-active   { background: #d4edda; color: #155724; }
.status-inactive { background: #f8d7da; color: #721c24; }

/* Document thumbnail */
.doc-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; border: 1px solid #DDE4F0; cursor: pointer; }
.doc-pdf-icon { font-size: 28px; color: #dc3545; }

/* Toggle status button */
.toggle-btn { border: none; background: transparent; padding: 2px 6px; cursor: pointer; font-size: 20px; }
.toggle-btn.active   { color: #28a745; }
.toggle-btn.inactive { color: #dc3545; }

/* Student info bar */
.student-info-bar { background: #EEF2FF; border-left: 4px solid var(--navy-mid); border-radius: 6px; padding: 12px 18px; margin-bottom: 24px; }

/* ── Document card (student-documents-view) ──────────────────────── */
.doc-card { border: 1px solid #E2E8F2; border-radius: 12px; overflow: hidden; margin-bottom: 20px; transition: box-shadow .2s; }
.doc-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.10); }
.doc-card-header { background: var(--navy-mid); color: #fff; padding: 10px 14px; font-weight: 600; font-size: 14px; display: flex; justify-content: space-between; align-items: center; }
.doc-card-body { min-height: 180px; display: flex; align-items: center; justify-content: center; background: #F4F7FC; padding: 16px; }
.doc-card-body img { max-width: 100%; max-height: 180px; object-fit: contain; border-radius: 4px; cursor: pointer; }
.doc-card-footer { padding: 8px 14px; background: #fff; border-top: 1px solid #E2E8F2; font-size: 13px; color: #6B7C99; }
.doc-missing { color: #aab4c8; font-size: 13px; text-align: center; }
.doc-missing i { font-size: 36px; display: block; margin-bottom: 8px; }

/* ── Report page ─────────────────────────────────────────────────── */
.rpt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rpt-table th { background: var(--navy-mid); color: #fff; padding: 8px 10px; text-align: left; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rpt-table td { padding: 7px 10px; border-bottom: 1px solid #E2E8F2; vertical-align: middle; }
.rpt-table tr:nth-child(even) td { background: #F7F9FC; }
.rpt-table tfoot td { background: #e8eeff; font-weight: 700; color: var(--navy-mid); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rpt-table tbody tr:hover td { background: #EEF2FF; }

.badge-q  { background: #e8eeff; color: var(--navy-mid); padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.badge-fi { background: #f3e8ff; color: #6f42c1; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.badge-s  { background: #e8f8f0; color: #28a745; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.badge-t  { background: #fff3cd; color: #856404; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }

.kpi-card { background: #fff; border-radius: 10px; padding: 18px 22px; box-shadow: 0 2px 12px rgba(17,34,84,.08); border-left: 4px solid var(--navy-mid); }
.kpi-val  { font-size: 32px; font-weight: 800; line-height: 1; color: var(--navy-mid); }
.kpi-lbl  { font-size: 11px; font-weight: 600; text-transform: uppercase; color: #9BA8BB; margin-top: 4px; }
.kpi-sub  { font-size: 12px; color: #6B7C99; margin-top: 4px; }

.tab-bar  { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.tab-btn  { cursor: pointer; padding: 8px 14px; border: none; background: #e8eeff; color: var(--navy-mid); border-radius: 6px; font-weight: 600; font-size: 14px; transition: .15s; }
.tab-btn:hover  { background: #c5cff7; }
.tab-btn.active { background: var(--navy-mid); color: #fff; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

.funnel-bar   { height: 34px; border-radius: 4px; display: flex; align-items: center; padding: 0 12px; color: #fff; font-weight: 700; font-size: 13px; min-width: 60px; }
.funnel-track { background: #E2E8F2; border-radius: 4px; overflow: hidden; height: 34px; position: relative; }
.funnel-fill  { height: 100%; border-radius: 4px; transition: width .4s; }
.funnel-lbl   { font-size: 12px; color: #6B7C99; margin-top: 3px; }

.pbar-wrap { background: #e8eeff; border-radius: 20px; height: 10px; overflow: hidden; }
.pbar-fill { height: 100%; border-radius: 20px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

.print-header { display: none; text-align: center; margin-bottom: 20px; border-bottom: 2px solid var(--navy-mid); padding-bottom: 12px; }
.print-header h2 { font-size: 20px; font-weight: 800; color: var(--navy-mid); margin: 0; }
.print-header p  { font-size: 12px; color: #6B7C99; margin: 4px 0 0; }

/* ── Form view page ──────────────────────────────────────────────── */
.view-tab-btn { font-size: 15px; font-weight: 700; background: #E2E8F2; margin: 5px 6px; color: var(--orange); border-radius: 6px !important; }
.view-tab-btn i { color: var(--orange); }
.nav-link.active.view-tab-btn { background: var(--navy-mid) !important; color: #fff !important; }
.nav-link.active.view-tab-btn i { color: var(--orange) !important; }

.sec-hdr { background: var(--navy-mid); color: #fff; padding: 8px 14px; border-radius: 6px; font-weight: 600; font-size: 15px; margin: 18px 0 14px; display: block; }
.sec-hdr i { margin-right: 6px; }

.info-row { display: flex; flex-wrap: wrap; margin-bottom: 4px; }
.info-label { font-weight: 600; color: #6B7C99; font-size: 13px; min-width: 160px; padding: 6px 8px 6px 0; }
.info-value { font-size: 14px; color: #1e2d4f; padding: 6px 0; flex: 1; }

.field-card { background: #F7F9FC; border: 1px solid #E2E8F2; border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; }
.field-card .lbl { font-size: 12px; color: #9BA8BB; font-weight: 600; margin-bottom: 2px; }
.field-card .val { font-size: 14px; color: #1e2d4f; font-weight: 500; }

.profile-header { background: linear-gradient(135deg, var(--navy-mid) 0%, #1a3a8c 100%); color: #fff; border-radius: 10px; padding: 16px 24px 16px 16px; margin-bottom: 20px; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 16px; }
.profile-photo { width: 110px; height: 140px; border-radius: 6px; border: 3px solid #fff; background: rgba(255,255,255,.15); display: flex !important; align-items: center; justify-content: center; font-size: 48px; color: rgba(255,255,255,.6); flex: 0 0 110px; overflow: hidden; margin: 0 !important; }
.profile-photo img { width: 110px; height: 140px; border-radius: 4px; object-fit: cover; display: block; }
.profile-info { flex: 0 0 auto; margin: 0 !important; }
.profile-info h3 { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: #fff; }
.profile-info p  { margin: 0 0 2px; font-size: 13px; opacity: .85; }
.form-badge { display: inline-block; background: var(--orange); color: #fff; font-size: 13px; font-weight: 700; padding: 3px 12px; border-radius: 20px; margin-bottom: 6px; }
.status-badge-v { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 12px; margin-left: 8px; }

.fee-table { width: 100%; border-collapse: collapse; }
.fee-table th { background: var(--navy-mid); color: #fff; padding: 8px 12px; font-size: 13px; text-align: left; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.fee-table td { padding: 8px 12px; font-size: 13px; border-bottom: 1px solid #E2E8F2; }
.fee-table tr:last-child td { border-bottom: none; font-weight: 700; background: #EEF2FF; }
.fee-net { color: #28a745; font-weight: 700; }

.doc-view-card { border: 1px solid #E2E8F2; border-radius: 10px; overflow: hidden; margin-bottom: 20px; }
.doc-view-card .doc-head { background: var(--navy-mid); color: #fff; padding: 7px 14px; font-size: 13px; font-weight: 600; }
.doc-view-card .doc-body { background: #F7F9FC; text-align: center; padding: 16px; min-height: 120px; display: flex; align-items: center; justify-content: center; }
.doc-view-card img { max-width: 100%; max-height: 260px; border-radius: 4px; object-fit: contain; }
.doc-empty { color: #aab4c8; font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.doc-empty i { font-size: 36px; }

.student-pic-card { text-align: center; margin-bottom: 24px; }
.student-pic-card img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; border: 4px solid var(--navy-mid); box-shadow: 0 4px 16px rgba(0,0,0,.15); }
.student-pic-card .pic-name { font-size: 18px; font-weight: 700; color: var(--navy-mid); margin-top: 10px; }
.student-pic-card .pic-form { font-size: 13px; color: #9BA8BB; }
.pic-placeholder { width: 160px; height: 160px; border-radius: 50%; background: #e8ecf7; border: 4px solid var(--navy-mid); display: inline-flex; align-items: center; justify-content: center; font-size: 60px; color: #b0bad8; }

/* ── Form edit page extras ───────────────────────────────────────── */
.edit-badge { background: #fff3cd; color: #856404; padding: 10px 16px; border-radius: 8px; border-left: 4px solid #ffc107; margin-bottom: 18px; font-size: 14px; }
.doc-upload-card.existing-doc { border-color: var(--navy-mid) !important; background: #EEF2FF !important; }
.doc-upload-card.existing-doc .upload-placeholder { display: none; }
.doc-upload-card .existing-preview { max-width: 100%; max-height: 170px; border-radius: 6px; object-fit: contain; z-index: 1; }
.doc-upload-card.portrait .existing-preview { max-height: 320px; }
.doc-upload-card .existing-pdf-indicator { display: flex; flex-direction: column; align-items: center; z-index: 1; pointer-events: none; }
.doc-upload-card .existing-pdf-name { font-size: 13px; color: #6B7C99; word-break: break-all; }
.doc-upload-card .existing-badge { position: absolute; top: 8px; left: 8px; background: var(--navy-mid); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 3px; letter-spacing: .5px; z-index: 5; }
.doc-upload-card .replace-hint { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(14,32,88,.75); color: #fff; font-size: 11px; padding: 5px 0; text-align: center; z-index: 3; pointer-events: none; }
.doc-upload-card.existing-doc .remove-file { display: flex; }

/* ── Shared header extras ────────────────────────────────────────── */
.hamburger-menu { display: none; background: none; border: none; cursor: pointer; padding: 10px; z-index: 999; }
.header-home-link { display: inline-flex; align-items: center; gap: 9px; margin-left: 14px; padding: 8px 18px; background: var(--navy-mid); color: #fff; border-radius: 6px; font-size: 16px; font-weight: 600; text-decoration: none; letter-spacing: .3px; }
.header-home-link:hover { background: var(--navy-dark); color: #fff; text-decoration: none; }
.header-home-icon { font-size: 20px; }
.header-user-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }

/* ── Print media (shared) ────────────────────────────────────────── */
@media print {
  .no-print, .left-side-bar, .header, .mobile-menu-overlay,
  .breadcrumb, .page-header, .filter-bar, .tab-bar,
  .main-nav, .header-wrap, .btn { display: none !important; }
  .main-container { margin: 0 !important; padding: 0 !important; }
  .pd-ltr-20 { padding: 0 !important; }
  .card-box { box-shadow: none !important; border: 1px solid #ddd; }
  .tab-con  { border: none !important; }
  .print-header { display: block !important; }
  .tab-pane { display: none !important; }
  .tab-pane.print-active { display: block !important; }
  body { font-size: 12px; }
  .profile-header, .sec-hdr, .fee-table th,
  .rpt-table th, .rpt-table tr:nth-child(even) td,
  .rpt-table tfoot td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .kpi-card { border: 1px solid #ccc !important; box-shadow: none !important; page-break-inside: avoid; }
  .page-break { page-break-before: always; }
}

/* ── Global utility classes ──────────────────────────────────── */
.table-action-icon-color        { color: var(--orange) !important; }
.table-action-icon-color-delete { color: #D62839 !important; }
.required                       { color: var(--orange) !important; }