/* =========================================================
   Dark Mode Foundation & Variable Mappings
   ========================================================= */

body.tsap-dark-mode {
  --bg-body: #111827;
  --bg-surface: #1f2937;
  --text-main: #e5e7eb;
  --text-heading: #f3f4f6;
  --text-muted: #cbd5e1;
  --text-span: #cbd5e1;
  --border-main: #374151;
  --border-sub: #374151;
  --border-hover: #4b5563;
  --link-color: #93c5fd;
  --link-hover: #bfdbfe;
  --table-th-bg: #374151;
  --table-th-text: #f3f4f6;
  --table-border: #4b5563;
  --btn-bg: #374151;
  --btn-hover: #4b5563;
  --btn-active: #1f2937;

  background: var(--bg-body) !important;
  background-image: none !important;
  color: var(--text-main) !important;
}

/* Structural cleanup overrides safely tied to framework layout values */
body.tsap-dark-mode .main-content,
body.tsap-dark-mode main,
body.tsap-dark-mode .content {
  background: var(--bg-surface) !important;
  color: var(--text-main) !important;
  box-shadow: none !important;
}

body.tsap-dark-mode h2 {
  border-bottom-color: var(--border-sub) !important;
}

body.tsap-dark-mode table {
  background: var(--bg-surface) !important;
  box-shadow: none !important;
}

body.tsap-dark-mode td,
body.tsap-dark-mode th {
  border-bottom-color: var(--table-border) !important;
}

body.tsap-dark-mode .breadcrumb {
  border-bottom-color: var(--border-main) !important;
}

/* Cluster List Overrides for Dark Mode */
body.tsap-dark-mode .meta {
  color: var(--text-muted) !important;
}

body.tsap-dark-mode .cluster-list a {
  color: var(--link-color) !important;
}

body.tsap-dark-mode .cluster-list a:hover {
  color: var(--link-hover) !important;
}

/* =========================================================
   Mobile Tracker Fixes (Issue #8 Audits)
   ========================================================= */

/* Top Utility Bar Fixes */
body.tsap-dark-mode [aria-label="Top utility bar"],
body.tsap-dark-mode .top-utility-bar,
body.tsap-dark-mode .top-bar {
  background-color: #182230 !important;
  color: #cbd5e1 !important;
  border-bottom: 1px solid #374151 !important;
}

/* Interactive Filter Controls & General Form Elements */
body.tsap-dark-mode .filter-controls,
body.tsap-dark-mode .filters,
body.tsap-dark-mode select,
body.tsap-dark-mode input {
  background-color: #1f2937 !important;
  color: #f3f4f6 !important;
  border: 1px solid #4b5563 !important;
}

/* Newest Pages / Coloured Content Cards */
body.tsap-dark-mode .card,
body.tsap-dark-mode .newest-pages-card,
body.tsap-dark-mode .content-card {
  background-color: #182230 !important;
  border: 1px solid #374151 !important;
  color: #e5e7eb !important;
  box-shadow: none !important;
}

/* =========================================================
   Header
   ========================================================= */

body.tsap-dark-mode .site-header {
  background: #182230 !important;
  border-bottom: 1px solid #374151 !important;
}

body.tsap-dark-mode .site-header .site-title a {
  color: #f3f4f6 !important;
}

body.tsap-dark-mode .site-header .site-title a:hover {
  color: #dbeafe !important;
}

body.tsap-dark-mode .site-header .site-title a:focus {
  outline-color: #dbeafe !important;
}

body.tsap-dark-mode .site-header .site-subtitle,
body.tsap-dark-mode .site-header .site-stats {
  color: #cbd5e1 !important;
}

body.tsap-dark-mode .site-header .site-stats a {
  color: #cbd5e1 !important;
  text-decoration-color: #64748b !important;
}

body.tsap-dark-mode .site-header .site-stats a:hover {
  color: #f3f4f6 !important;
  text-decoration-color: #f3f4f6 !important;
}

/* =========================================================
   Footer
   ========================================================= */

body.tsap-dark-mode footer {
  background: #182230 !important;
  border-top: 1px solid #374151 !important;
  color: #cbd5e1 !important;
}

body.tsap-dark-mode footer a {
  color: #dbeafe !important;
}

body.tsap-dark-mode footer a:hover {
  color: #ffffff !important;
}

body.tsap-dark-mode footer p a + a::before,
body.tsap-dark-mode footer .no-separator + a::before {
  color: #64748b !important;
}

body.tsap-dark-mode footer .version-tag,
body.tsap-dark-mode footer .footer-time {
  color: #94a3b8 !important;
}

/* =========================================================
   Footer Milestone Box
   ========================================================= */

body.tsap-dark-mode footer .tsap-milestone {
  background: linear-gradient(
    135deg,
    #4a3410 0%,
    #6b4f1d 45%,
    #7a5a1f 100%
  ) !important;
  color: #f8e7b5 !important;
  border-color: #b8891f !important;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.35),
    0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

body.tsap-dark-mode footer .tsap-milestone strong {
  color: #ffe082 !important;
}

body.tsap-dark-mode footer .tsap-milestone .milestone-date {
  color: #f6d98b !important;
}

body.tsap-dark-mode footer .tsap-milestone a {
  color: #fff3c4 !important;
}

body.tsap-dark-mode footer .tsap-milestone a:hover {
  color: #ffffff !important;
}

/* =========================================================
   Navbar
   ========================================================= */

body.tsap-dark-mode .navbar {
  background: linear-gradient(
    to bottom,
    #243244 0%,
    #1b2636 100%
  ) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35) !important;
}

body.tsap-dark-mode .navbar a {
  color: #e5e7eb !important;
  border-right-color: rgba(255,255,255,0.08) !important;
}

body.tsap-dark-mode .navbar a:hover {
  background: linear-gradient(
    to bottom,
    #355070 0%,
    #2c435f 100%
  ) !important;
  color: #ffffff !important;
}

body.tsap-dark-mode .navbar a.active {
  background: linear-gradient(
    to bottom,
    #406080 0%,
    #314b66 100%
  ) !important;
  color: #ffffff !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.35) !important;
}

body.tsap-dark-mode .navbar a:focus {
  outline-color: #dbeafe !important;
}

/* =========================================================
   Mobile Navbar
   ========================================================= */

@media (max-width: 768px) {
  body.tsap-dark-mode .navbar-toggle {
    background: linear-gradient(
      to bottom,
      #314b66 0%,
      #243244 100%
    ) !important;
    color: #f3f4f6 !important;
  }

  body.tsap-dark-mode .navbar ul {
    background: linear-gradient(
      to bottom,
      #243244 0%,
      #1b2636 100%
    ) !important;
  }

  body.tsap-dark-mode .navbar a {
    border-bottom-color: rgba(255,255,255,0.08) !important;
  }

  body.tsap-dark-mode .navbar ul.open {
    box-shadow: 0 8px 18px rgba(0,0,0,0.4) !important;
  }
}

/* =========================================================
   Page Information 
   ========================================================= */

body.tsap-dark-mode .page-info {
  color: #cbd5e1 !important;
}

body.tsap-dark-mode .page-info a {
  color: #93c5fd !important;
}

body.tsap-dark-mode .page-info a:hover,
body.tsap-dark-mode .page-info a:focus {
  color: #bfdbfe !important;
}

body.tsap-dark-mode .github-preview .tooltip {
  background: #374151 !important;
  color: #f3f4f6 !important;
}

body.tsap-dark-mode .github-preview .tooltip::after {
  border-color: #374151 transparent transparent transparent !important;
}

/* =========================================================
   Media Articles & Component Illustrations
   ========================================================= */

body.tsap-dark-mode .media-details {
  background: #243244 !important;
  border-color: #374151 !important;
  color: #e5e7eb !important;
  box-shadow: none !important;
}

body.tsap-dark-mode .media-details dt {
  color: #f3f4f6 !important;
}

body.tsap-dark-mode .media-details dd {
  color: #cbd5e1 !important;
}

body.tsap-dark-mode .highlighted-text {
  background: #2f2a18 !important;
  border-left-color: #d4a72c !important;
  color: #e5e7eb !important;
}

body.tsap-dark-mode .highlighted-text h3 {
  color: #f3f4f6 !important;
}

body.tsap-dark-mode .copy-btn-full {
  background: #374151 !important;
  border-color: #4b5563 !important;
  color: #f3f4f6 !important;
}

body.tsap-dark-mode .copy-btn-full:hover {
  background: #4b5563 !important;
}

body.tsap-dark-mode .copy-btn-full:focus {
  outline-color: #fbbf24 !important;
}

/* Global figure caption and illustration styles */
body.tsap-dark-mode .media-image img,
body.tsap-dark-mode .bio-photo-img,
body.tsap-dark-mode .content-img,
body.tsap-dark-mode .wikimedia-embed-frame {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

body.tsap-dark-mode .media-image figcaption,
body.tsap-dark-mode .bio-photo-caption,
body.tsap-dark-mode .content-img-caption,
body.tsap-dark-mode .wikimedia-embed-caption,
body.tsap-dark-mode .person-photo figcaption,
body.tsap-dark-mode .video-caption {
  color: #cbd5e1 !important;
}

body.tsap-dark-mode .wikimedia-embed-caption a,
body.tsap-dark-mode .person-photo figcaption a,
body.tsap-dark-mode .video-caption a {
  color: #38bdf8 !important;
}

body.tsap-dark-mode .wikimedia-embed-caption a:hover,
body.tsap-dark-mode .person-photo figcaption a:hover,
body.tsap-dark-mode .video-caption a:hover {
  color: #7dd3fc !important;
  text-decoration: underline !important;
}

/* =========================================================
   Cluster Dynamic Index Pages & Filtering Controls
   ========================================================= */

body.tsap-dark-mode .desc {
  color: var(--text-muted) !important;
}

body.tsap-dark-mode .cluster-sort button {
  background-color: #1f2937 !important;
  color: var(--text-main) !important;
  border-color: #4b5563 !important;
}

body.tsap-dark-mode .cluster-sort button:hover {
  background-color: #374151 !important;
  border-color: #64748b !important;
}

body.tsap-dark-mode .cluster-sort button.active-sort {
  background-color: #1d4ed8 !important; /* Rich accessible royal blue */
  color: #ffffff !important;
  border-color: #2563eb !important;
}

/* =========================================================
   Categories
   ========================================================= */

body.tsap-dark-mode #catlinks {
  background-color: #243244 !important;
  border-color: #374151 !important;
  color: #e5e7eb !important;
}

body.tsap-dark-mode #mw-normal-catlinks a {
  color: #93c5fd !important;
}

body.tsap-dark-mode #mw-normal-catlinks a:hover,
body.tsap-dark-mode #mw-normal-catlinks a:focus {
  color: #bfdbfe !important;
}

/* =========================================================
   Back to Top
   ========================================================= */

body.tsap-dark-mode .back-to-top {
  color: #93c5fd !important;
}

body.tsap-dark-mode .back-to-top:hover,
body.tsap-dark-mode .back-to-top:focus {
  color: #bfdbfe !important;
}

/* =========================================================
   Author Attribution
   ========================================================= */

body.tsap-dark-mode .author-divider {
  border-top-color: #374151 !important;
}

body.tsap-dark-mode .author-box {
  color: #e5e7eb !important;
}

body.tsap-dark-mode .author-icon {
  color: #93c5fd !important;
}

body.tsap-dark-mode .author-label {
  color: #f3f4f6 !important;
}

body.tsap-dark-mode .author-names {
  color: #cbd5e1 !important;
}

/* =========================================================
   Publications
   ========================================================= */

body.tsap-dark-mode .pub-details {
  background: #1f2937;
  border-color: #475569;
  color: #e5e7eb;
}

body.tsap-dark-mode .pub-details dt {
  color: #cfe3ff;
}

body.tsap-dark-mode .pub-details dd {
  color: #d1d5db;
}

body.tsap-dark-mode .pub-details a.btn {
  background: #1f5fbf;
  color: #ffffff;
}

body.tsap-dark-mode .pub-details a.btn:hover {
  background: #184c99;
}

body.tsap-dark-mode .pdf-frame {
  border-color: #475569;
}

body.tsap-dark-mode .highlighted-text {
  background-color: #3b3415;
  border-left-color: #d4b84f;
  color: #f1f1f1;
}

body.tsap-dark-mode pre {
  background-color: #1f2937;
  border-color: #475569;
  color: #f1f1f1;
}

body.tsap-dark-mode code {
  color: #f1f1f1;
}

body.tsap-dark-mode .copy-btn,
body.tsap-dark-mode .copy-btn-full {
  background: #334155;
  border-color: #475569;
  color: #f1f1f1;
}

body.tsap-dark-mode .copy-btn:hover,
body.tsap-dark-mode .copy-btn-full:hover {
  background: #475569;
}

@media (prefers-reduced-motion: reduce) {
  .pub-details a.btn,
  .copy-btn,
  .copy-btn-full {
    transition: none;
  }
}

/* =========================================================
   Universal Link and Hover Contrast Overrides
   ========================================================= */

body.tsap-dark-mode a {
  color: #38bdf8 !important; /* Luminous sky blue for high-contrast dark reading */
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}

/* Clear, accessible state on user interaction */
body.tsap-dark-mode a:hover,
body.tsap-dark-mode a:focus {
  color: #7dd3fc !important; /* Brighter tint on hover */
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* Section anchor links (🔗 icons beside titles) - Hidden by default, visible on hover */
body.tsap-dark-mode .header-link {
  opacity: 0 !important;
  transition: opacity 0.15s ease, color 0.15s ease;
}

/* Reveal the icon beautifully only when the parent heading is hovered or focused */
body.tsap-dark-mode h1:hover .header-link,
body.tsap-dark-mode h2:hover .header-link,
body.tsap-dark-mode h3:hover .header-link,
body.tsap-dark-mode h4:hover .header-link,
body.tsap-dark-mode .header-link:hover,
body.tsap-dark-mode .header-link:focus {
  opacity: 0.8 !important;
  color: #38bdf8 !important;
}

/* Horizontal Rules & Article Separators */
body.tsap-dark-mode hr,
body.tsap-dark-mode .article-separator {
  border: none !important;
  border-top: 1px solid var(--border-main, #374151) !important;
}

/* Breadcrumb navigation link spacing and clarity */
body.tsap-dark-mode .breadcrumb a {
  color: #94a3b8 !important; /* Muted gray for past steps */
}

body.tsap-dark-mode .breadcrumb a:hover {
  color: #38bdf8 !important;
}

body.tsap-dark-mode .breadcrumb span {
  color: #f3f4f6 !important; /* Clean white for active page */
}