/* ============================================================
   NMDC v3 ADDITIONS
   Preloader · Scroll Bar · Dark Mode · Skip Link ·
   WhatsApp Float · Focus-visible · Form Validation ·
   Lightbox · Sticky Sidebar
   ============================================================ */

/* ── SKIP LINK ── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--primary);
  color: #fff;
  padding: 10px 20px;
  border-radius: 0 0 var(--radius) var(--radius);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  z-index: 9999;
  transition: top .3s;
  text-decoration: none;
}
.skip-link:focus {
  top: 0;
  color: #fff;
}

/* ── SCROLL PROGRESS BAR ── */
#scrollProgress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--accent));
  z-index: 9998;
  transition: width .1s linear;
  border-radius: 0 2px 2px 0;
}

/* ── DARK MODE TOGGLE BUTTON ── */
.dark-toggle {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.85);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}
.dark-toggle:hover { background: var(--gold); color: var(--text-dark); }
.dark-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── DARK MODE THEME ── */
[data-theme="dark"] {
  --bg-page:        #111827;
  --bg-white:       #1f2937;
  --bg-subtle:      #1a2535;
  --text-dark:      #f1f5f9;
  --text-body:      #cbd5e1;
  --text-muted:     #94a3b8;
  --text-light:     #64748b;
  --border:         #2d3748;
  --border-dark:    #374151;
  --primary-pale:   #1e3a5f;
  --accent-pale:    #3d1a18;
  --green-pale:     #14332a;
}
[data-theme="dark"] .topbar           { background: #0a1628; }
[data-theme="dark"] .site-header      { background: linear-gradient(120deg, #061020 0%, #0d2a4a 55%, #163960 100%); }
[data-theme="dark"] .main-nav         { background: #0d2040; }
[data-theme="dark"] .dropdown-menu    { background: #0d2040; border-top-color: var(--gold); }
[data-theme="dark"] .ticker-bar       { background: #1a2535; border-bottom-color: #2d3748; }
[data-theme="dark"] .quick-links      { background: #1f2937; border-bottom-color: #2d3748; }
[data-theme="dark"] .quick-links .ql-item:hover { background: #1e3a5f; }
[data-theme="dark"] .panel, [data-theme="dark"] .c-card, [data-theme="dark"] .history-block,
[data-theme="dark"] .notice-board, [data-theme="dark"] .sidebar-widget,
[data-theme="dark"] .news-card, [data-theme="dark"] .award-card,
[data-theme="dark"] .teacher-card, [data-theme="dark"] .person-card,
[data-theme="dark"] .filter-bar, [data-theme="dark"] .search-filter-bar,
[data-theme="dark"] .cinfo-card, [data-theme="dark"] .elig-card,
[data-theme="dark"] .act-card, [data-theme="dark"] .video-card,
[data-theme="dark"] .mag-card, [data-theme="dark"] .dl-row,
[data-theme="dark"] .lib-stat, [data-theme="dark"] .step-card,
[data-theme="dark"] .result-search-wrap, [data-theme="dark"] .award-highlight
                                      { background: #1f2937; border-color: #2d3748; }
[data-theme="dark"] .news-card .nc-body h6 a,
[data-theme="dark"] .notice-text a,
[data-theme="dark"] .tc-name,
[data-theme="dark"] .msg-body .name   { color: #e2e8f0; }
[data-theme="dark"] .notice-item:hover,
[data-theme="dark"] .dl-row:hover,
[data-theme="dark"] .msg-card:hover,
[data-theme="dark"] .award-highlight:hover { background: #243044; }
[data-theme="dark"] .sw-nav-link:hover,
[data-theme="dark"] .sw-nav-link.active,
[data-theme="dark"] .imp-link-item:hover  { background: #0d2040; }
[data-theme="dark"] .t-custom tbody td   { color: #cbd5e1; }
[data-theme="dark"] .t-custom tbody tr:nth-child(even) td { background: #243044; }
[data-theme="dark"] .t-custom tbody tr:hover { background: #2d3a50; }
[data-theme="dark"] .form-control-c     { background: #1f2937; border-color: #374151; color: #e2e8f0; }
[data-theme="dark"] .form-control-c::placeholder { color: #64748b; }
[data-theme="dark"] .page-banner        { background: linear-gradient(135deg, #061020, #0d2a4a); }
[data-theme="dark"] .site-footer        { background: linear-gradient(180deg, #060f1a 0%, #030810 100%); }
[data-theme="dark"] .footer-bottom      { background: rgba(0,0,0,.5); }
[data-theme="dark"] .back-top           { background: #0d2040; border-color: #163960; }
[data-theme="dark"] .section-stripe     { background: linear-gradient(135deg, #061020 0%, #0d2a4a 100%); }
[data-theme="dark"] .pre-inner > p      { color: rgba(255,255,255,.5); }
[data-theme="dark"] .album-tab button   { background: #1f2937; border-color: #374151; color: #cbd5e1; }

/* ── FOCUS-VISIBLE (keyboard users only) ── */
.user-is-tabbing a:focus,
.user-is-tabbing button:focus,
.user-is-tabbing input:focus,
.user-is-tabbing select:focus,
.user-is-tabbing textarea:focus,
.user-is-tabbing [tabindex]:focus {
  outline: 3px solid var(--gold) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px rgba(212,172,13,.2) !important;
}

/* ── FORM VALIDATION ── */
.form-field { position: relative; }

.form-control-c.is-invalid {
  border-color: var(--accent) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23c0392b' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm.93 9.588-1.86 1.86a.25.25 0 0 1-.353 0l-1.86-1.86a.25.25 0 0 1 .353-.354l1.683 1.683 1.683-1.683a.25.25 0 0 1 .354.354zm0-4.236-1.86 1.86a.25.25 0 0 1-.353 0l-1.86-1.86a.25.25 0 0 1 .353-.354l1.683 1.683 1.683-1.683a.25.25 0 0 1 .354.354z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px !important;
}
.form-control-c.is-valid {
  border-color: var(--green) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%231a7a4a' viewBox='0 0 16 16'%3E%3Cpath d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px !important;
}
.field-error {
  display: none;
  color: var(--accent);
  font-size: 12px;
  font-family: var(--font-ui);
  margin-top: 4px;
}
.field-error::before {
  content: '⚠ ';
}

/* ── LIGHTBOX ── */
#lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.94);
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: lbFadeIn .22s ease;
}
@keyframes lbFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.lb-img-wrap img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
  display: block;
  object-fit: contain;
}
.lb-close {
  position: absolute;
  top: 18px; right: 22px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
  cursor: pointer;
}
.lb-close:hover { background: var(--accent); }
.lb-prev, .lb-next {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
  cursor: pointer;
}
.lb-prev { left: 20px; }
.lb-next { right: 20px; }
.lb-prev:hover, .lb-next:hover { background: var(--primary); }
.lb-counter {
  position: absolute;
  bottom: 18px;
  left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.7);
  font-size: 13px;
  font-family: var(--font-ui);
  background: rgba(0,0,0,.4);
  padding: 4px 14px;
  border-radius: var(--radius-full);
}

/* ── SCREEN-READER ONLY UTILITY ── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── BREADCRUMB SCHEMA (visual only, schema in HTML) ── */
.breadcrumb { margin: 0; padding: 0; background: none; }

/* ── PRINT ENHANCEMENTS (supplement the one in page-specific) ── */
@media print {
  #scrollProgress,
  .back-top, .dark-toggle { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
}

/* ── RESPONSIVE ADDITIONS ── */
@media (max-width: 767px) {
  .back-top       { right: 20px; bottom: 24px; }
  .lb-prev        { left: 8px; }
  .lb-next        { right: 8px; }
}