/*-- scss:defaults --*/

// Dark mode color overrides for Hardware Kits Theme
// This file is applied when users toggle dark mode on the website

// Redefine teal accent to be brighter for dark mode
$kits-accent: #1ABC9C;  // Brighter teal for dark backgrounds
$kits-accent-dark: $kits-accent;  // Alias for clarity

// Dark mode specific colors
$body-bg-dark: #1a1a1a;
$body-color-dark: #e6e6e6;
$link-color-dark: $kits-accent;
$link-hover-color-dark: lighten($kits-accent, 10%);

// Sidebar and navigation
$sidebar-bg-dark: #212529;
$navbar-bg-dark: #212529;
$border-color-dark: #454d55;

/*-- scss:rules --*/

// Main body styling
body {
  background-color: $body-bg-dark;
  color: $body-color-dark;
}

// Links in dark mode - brighter teal with better contrast
a {
  color: lighten($kits-accent, 10%) !important;

  &:hover {
    color: lighten($kits-accent, 25%) !important;
    text-decoration: underline;
  }

  &:visited {
    color: lighten($kits-accent, 8%) !important;
  }
}

// Content area
.content,
main,
article,
#quarto-content {
  background-color: $body-bg-dark;
  color: $body-color-dark;
}

// Sidebar - match TOC styling with muted colors
.sidebar,
.sidebar-navigation,
#quarto-sidebar,
.sidebar.sidebar-navigation {
  background-color: $sidebar-bg-dark;
  border-color: $border-color-dark;

  // Section headers - keep teal accent
  .sidebar-item.sidebar-item-section > .sidebar-item-toggle,
  .sidebar-item.sidebar-item-section .sidebar-item-toggle {
    color: $kits-accent-dark !important;
    font-weight: 600;
  }

  // ALL navigation links - muted gray
  a,
  .sidebar-link,
  .sidebar-item a,
  .sidebar-item-text,
  .menu-text,
  .chapter-number {
    color: #888888 !important;
    font-weight: 400 !important;

    &:hover {
      color: $kits-accent-dark !important;
      background-color: rgba($kits-accent-dark, 0.15) !important;
    }

    &.active,
    &[aria-current="page"] {
      color: $kits-accent-dark !important;
      background-color: rgba($kits-accent-dark, 0.2) !important;
      font-weight: 500 !important;
    }
  }

  // Section containers
  .sidebar-item-container,
  .sidebar-item,
  .sidebar-item-text {
    color: #888888 !important;
  }
}

// Additional high-specificity rules for stubborn elements
#quarto-sidebar .sidebar-menu a:not(.active),
#quarto-sidebar .sidebar-menu .sidebar-link:not(.active),
#quarto-sidebar .menu-text {
  color: #888888 !important;
}

// Ensure active/hover states work
#quarto-sidebar a.active,
#quarto-sidebar a[aria-current="page"],
#quarto-sidebar .sidebar-link.active {
  color: $kits-accent-dark !important;
}

// TOC (table of contents) - Right sidebar "On this page"
.table-of-contents,
#TOC,
.quarto-toc,
nav[role="doc-toc"],
.sidebar.toc-left,
div[role="doc-toc"] {
  background-color: transparent;
  border-left-color: $kits-accent-dark;

  // TOC title
  .toc-title,
  .sidebar-title,
  h2 {
    color: #e6e6e6 !important;
    border: none !important;
  }

  // All links in TOC
  a,
  .nav-link {
    color: #888888 !important;

    &:hover {
      color: $kits-accent-dark !important;
    }
  }

  .active,
  .nav-link.active {
    color: $kits-accent-dark !important;
    font-weight: 500 !important;
  }

  // Nested lists
  ul, ol {
    li {
      color: #888888;

      a {
        color: #888888 !important;
      }
    }
  }
}

// Headers - adjust border colors for dark mode
.content h2,
main h2,
article h2,
#quarto-content h2 {
  border-left-color: $kits-accent-dark;
  border-bottom-color: rgba($kits-accent-dark, 0.4);
  color: #e6e6e6;
}

.content h3,
main h3,
article h3,
#quarto-content h3 {
  border-left-color: $kits-accent-dark;
  border-bottom-color: rgba($kits-accent-dark, 0.35);
  color: #d0d0d0;
}

.content h4,
main h4,
article h4,
#quarto-content h4 {
  border-left-color: $kits-accent-dark;
  border-bottom-color: rgba($kits-accent-dark, 0.3);
  color: #c0c0c0;
}

.content h5,
main h5,
article h5,
#quarto-content h5 {
  border-left-color: $kits-accent-dark;
  border-bottom-color: rgba($kits-accent-dark, 0.25);
  color: #b0b0b0;
}

.content h6,
main h6,
article h6,
#quarto-content h6 {
  border-left-color: $kits-accent-dark;
  border-bottom-color: rgba($kits-accent-dark, 0.2);
  color: #a0a0a0;
}

// Tables - improved contrast for dark mode
table {
  background-color: #1a1a1a;

  th {
    background-color: #2c2c2c !important;
    border-bottom: 2px solid $kits-accent-dark !important;
    color: #f0f0f0 !important;
    font-weight: 600;
  }

  td {
    background-color: #242424 !important;
    border-bottom-color: #454d55 !important;
    color: #e0e0e0 !important;
  }

  tbody tr:nth-child(even) {
    background-color: #1e1e1e;

    td {
      background-color: #1e1e1e !important;
    }
  }

  tbody tr:hover {
    background-color: #2a2a2a !important;

    td {
      background-color: #2a2a2a !important;
    }
  }

  td:first-child,
  th:first-child {
    background-color: #323232 !important;
    border-right-color: #454d55;
    font-weight: 500;
  }
}

// Table container
.table-container,
.cell-output-display {
  table {
    th {
      background-color: #2c2c2c !important;
      color: #f0f0f0 !important;
    }

    td {
      background-color: #242424 !important;
      color: #e0e0e0 !important;
    }
  }
}

// Code blocks
pre {
  background-color: #2c2c2c;
  color: #e6e6e6;
  border: 1px solid #454d55;
}

// Inline code
code {
  background-color: #2c2c2c;
  color: #1ABC9C;  // Teal for visibility
  padding: 0.2em 0.4em;
  border-radius: 3px;
}

// Code blocks inside pre (override inline styling)
pre code {
  color: #e6e6e6;
  background-color: transparent;
  padding: 0;
}

// Figures and captions
.figure-caption,
.caption,
figure figcaption,
.quarto-figure figcaption {
  color: #c0c0c0 !important;
  background-color: transparent !important;
}

// Images - add white background for visibility in dark mode
figure img,
.quarto-figure img {
  background-color: white !important;
  padding: 1rem !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

// Footnotes and margin notes
.sidenote,
.marginnote,
.margin-note,
aside,
.aside,
.column-margin,
.column-margin p,
.margin-caption,
div[class*="margin"] {
  color: #c0c0c0 !important;
  background-color: transparent !important;
}

// Footnote references and content
.footnote-ref,
.footnotes,
.footnotes p,
.footnotes li,
#footnotes {
  color: #c0c0c0 !important;
}

// Navbar
.navbar {
  background-color: $navbar-bg-dark !important;
  border-bottom: 1px solid $border-color-dark;
}

.navbar-nav .nav-link {
  color: #adb5bd !important;

  &:hover {
    color: $link-color-dark !important;
  }

  &.active {
    color: $link-color-dark !important;
  }

  .bi {
    color: inherit !important;
    fill: currentColor !important;
  }

  svg {
    fill: currentColor !important;
  }
}

// Dark mode toggle
.quarto-color-scheme-toggle {
  color: #adb5bd !important;

  &:hover {
    color: $link-color-dark !important;
  }
}

// Sun icon in dark mode (indicates "switch to light mode")
.quarto-color-scheme-toggle.alternate .bi::before,
body.quarto-dark .quarto-color-scheme-toggle .bi::before,
html[data-bs-theme="dark"] .quarto-color-scheme-toggle .bi::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23d1d5db" class="bi bi-sun-fill" viewBox="0 0 16 16"><path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.414a.5.5 0 1 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707z"/></svg>') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  content: "" !important;
  display: inline-block !important;
  width: 1em !important;
  height: 1em !important;
}

// Footer
.page-footer,
.footer,
.nav-footer,
footer {
  background-color: $navbar-bg-dark !important;
  border-top-color: $border-color-dark !important;
  color: #adb5bd !important;

  p, span, div {
    color: #adb5bd !important;
  }

  a {
    color: lighten($kits-accent, 10%) !important;

    &:hover {
      color: lighten($kits-accent, 25%) !important;
    }
  }
}

// Blockquotes
blockquote {
  border-left-color: #8a93a0 !important;
  background-color: #2a2a2a !important;
  color: #e0e0e0 !important;

  p, cite, em, strong {
    color: #e0e0e0 !important;
  }

  cite {
    color: #c0c0c0 !important;
  }
}

// Standard Quarto callouts - dark mode support
.callout,
.callout-note,
.callout-tip,
.callout-important,
.callout-caution,
.callout-warning,
.callout-example,
.callout-danger {
  background-color: #212529 !important;
  border-color: #454d55 !important;
  color: #e6e6e6 !important;

  .callout-header,
  .callout-title,
  .callout-title-container {
    color: #f0f0f0 !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
  }

  .callout-body,
  .callout-content {
    color: #e6e6e6 !important;

    p, li, span, div {
      color: #e6e6e6 !important;
    }
  }

  .callout-icon {
    opacity: 0.9;
  }

  a {
    color: lighten($kits-accent, 10%) !important;

    &:hover {
      color: lighten($kits-accent, 25%) !important;
    }
  }

  code {
    background-color: #2c2c2c !important;
    color: #1ABC9C !important;
  }

  pre code {
    color: #e6e6e6 !important;
  }
}

// Specific callout type adjustments for dark mode
.callout-note {
  border-left-color: #6b8cae !important;

  .callout-header {
    background-color: rgba(107, 140, 174, 0.12) !important;
  }
}

.callout-tip {
  border-left-color: $kits-accent-dark !important;

  .callout-header {
    background-color: rgba($kits-accent, 0.12) !important;
  }
}

.callout-important {
  border-left-color: #e85d75 !important;

  .callout-header {
    background-color: rgba(232, 93, 117, 0.15) !important;
  }
}

.callout-caution,
.callout-warning {
  border-left-color: #d4a017 !important;

  .callout-header {
    background-color: rgba(212, 160, 23, 0.12) !important;
  }
}

// Button styling
.btn-primary {
  background-color: $kits-accent-dark;
  border-color: $kits-accent-dark;
  color: #1a1a1a;
  font-weight: 500;

  &:hover {
    background-color: lighten($kits-accent-dark, 10%);
    border-color: lighten($kits-accent-dark, 10%);
  }
}

// Back to top button
.back-to-top,
#quarto-back-to-top {
  background-color: $kits-accent-dark !important;
  color: #1a1a1a !important;
  border: 1px solid lighten($kits-accent-dark, 10%);

  &:hover {
    background-color: lighten($kits-accent-dark, 15%) !important;
  }
}

// =============================================================================
// LANDING PAGE COMPONENTS - DARK MODE
// =============================================================================

// Carousel
#hardwareCarousel {
  .carousel-inner {
    background: #2a2a2a;
    border-color: #454d55;
  }

  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    background-color: rgba($kits-accent-dark, 0.85);
  }

  .carousel-indicators button {
    background-color: $kits-accent-dark;
  }
}

// Caption bar
.carousel-caption-bar {
  background: $kits-accent-dark;

  p {
    color: white !important;
  }
}

// Platform cards
.platform-card {
  background-color: #2a2a2a;
  border-color: #454d55;

  &:hover {
    border-color: $kits-accent-dark;
    box-shadow: 0 4px 12px rgba($kits-accent-dark, 0.25);
  }

  h4 {
    color: $kits-accent-dark;
  }

  .price {
    color: #c0c0c0;
  }

  .text-muted {
    color: #888888 !important;
  }

  img {
    background-color: white !important;
    padding: 0.5rem !important;
    border-radius: 6px !important;
  }
}

// Capability items
.capability-item {
  background: linear-gradient(135deg, rgba($kits-accent-dark, 0.1) 0%, rgba($kits-accent-dark, 0.05) 100%);
  border-left-color: $kits-accent-dark;

  h4 {
    color: $kits-accent-dark;
  }

  p {
    color: #c0c0c0;
  }
}

// Ecosystem links
.ecosystem-link {
  background-color: #2a2a2a;
  border-color: $kits-accent-dark !important;

  h5 a {
    color: $kits-accent-dark;
  }

  .text-muted {
    color: #888888 !important;
  }
}

.ecosystem-current {
  background-color: #323232 !important;

  h5 {
    color: $kits-accent-dark;
  }

  .text-muted {
    color: #888888 !important;
  }
}

// Border utility overrides
.border {
  border-color: #454d55 !important;
}

.rounded {
  background-color: #2a2a2a;
}

// Small text
.small,
small {
  color: #888888 !important;
}

// =============================================================================
// CO-LABS LANDING PAGE - DARK MODE
// =============================================================================

// Hero section - already dark, but ensure consistency
.hero-section {
  background: linear-gradient(135deg, #0d0d1a 0%, #111827 50%, #0a1628 100%);

  &::before {
    background: radial-gradient(circle at 30% 20%, rgba(37, 99, 235, 0.2) 0%, transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(233, 69, 96, 0.15) 0%, transparent 50%);
  }
}

// Content section
.content-section {
  background-color: $body-bg-dark;

  h2 {
    color: #e6e6e6 !important;
    border-bottom-color: #454d55;
  }

  p {
    color: #c0c0c0 !important;
  }
}

// Journey cards
.journey-cards {
  .journey-card {
    background: #2a2a2a;
    border-color: #454d55;

    &:hover {
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
      border-color: #555;
    }

    h3 {
      color: #e6e6e6 !important;
    }

    p {
      color: #a0a0a0 !important;
    }

    a {
      color: #3b82f6 !important;

      &:hover {
        color: #60a5fa !important;
      }
    }

    &.active {
      background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
      border-color: transparent;

      h3, p {
        color: white !important;
      }

      .current {
        background: rgba(255, 255, 255, 0.2);
        color: white !important;
      }
    }
  }
}

// Topic grid
.topic-grid {
  .topic-card {
    background: #2a2a2a;
    border-color: #454d55;

    &:hover {
      border-color: #3b82f6;
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
    }

    h4 {
      color: #60a5fa !important;
      border-bottom-color: #454d55;
    }

    li {
      color: #c0c0c0 !important;

      &::before {
        color: #6b7280;
      }
    }
  }
}

// CTA buttons
.cta-section {
  .cta-btn {
    &.primary {
      background: #3b82f6;

      &:hover {
        background: #2563eb;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
      }
    }

    &.secondary {
      background: #374151;
      color: #e5e7eb !important;
      border-color: #4b5563;

      &:hover {
        background: #4b5563;
        color: white !important;
      }
    }
  }
}