/* ==============================================================================
 * Protocol    : Deep State of Mind (DSOM) For My AI
 * Stylesheet  : Custom Design System (Extra CSS)
 * Theme Source: Follows cmsfornerd2.onrender.com Colors, Fonts & Glassmorphism
 * Author      : Harisfazillah Jamel (LinuxMalaysia)
 * Co-Author   : Jules (AI Assistant)
 * Timestamp   : 2026-08-01
 * ==============================================================================
 */

:root {
  /* Fonts - Follows --f-sans and --f-mono from cmsfornerd2 */
  --md-text-font: "Inter", system-ui, -apple-system, sans-serif !important;
  --md-code-font: "SF Mono", "Cascadia Code", "Fira Code", monospace !important;

  /* --- LIGHT THEME TOKENS (cmsfornerd2.onrender.com theme-light) --- */
  --lab-bg: #f8f9fa;
  --lab-surface: #ffffff;
  --lab-text: #1e293b;
  --lab-muted: #64748b;
  --lab-border: #e2e8f0;
  --lab-primary: #0f172a;
  --lab-purple: #8e44ad;

  /* Material Design Overrides for Light Mode */
  --md-primary-fg-color: #0f172a !important;
  --md-primary-fg-color--light: #334155 !important;
  --md-primary-fg-color--dark: #020617 !important;

  --md-accent-fg-color: #8e44ad !important;
  --md-accent-fg-color--transparent: rgba(142, 68, 173, 0.1) !important;
  --md-accent-bg-color: #8e44ad !important;
  --md-accent-bg-color--transparent: rgba(142, 68, 173, 0.1) !important;

  --md-typeset-a-color: #6d28d9 !important;

  --md-default-bg-color: #f8f9fa !important;
  --md-default-bg-color--light: #ffffff !important;
  --md-default-fg-color: #1e293b !important;
  --md-default-fg-color--light: #64748b !important;
  --md-default-fg-color--lighter: #e2e8f0 !important;
  --md-default-fg-color--lightest: #f1f5f9 !important;

  /* Custom Glassmorphism variables */
  --lab-glass-bg: rgba(255, 255, 255, 0.4);
  --lab-glass-border: rgba(255, 255, 255, 0.2);
  --lab-blur: 12px;
  --radius: 12px;

  /* Centralised sticky header offsets */
  --toc-sticky-top: 90px;
  --toc-scroll-offset: 120px;
}

[data-md-color-scheme="slate"] {
  /* --- DARK THEME TOKENS (cmsfornerd2.onrender.com theme-dark) --- */
  --lab-bg: #0f172a;
  --lab-surface: #1e293b;
  --lab-text: #f8fafc;
  --lab-muted: #94a3b8;
  --lab-border: #334155;
  --lab-primary: #020617;
  --lab-purple: #a855f7;

  /* Material Design Overrides for Dark Mode */
  --md-primary-fg-color: #020617 !important;
  --md-primary-fg-color--light: #0f172a !important;
  --md-primary-fg-color--dark: #000000 !important;

  --md-accent-fg-color: #a855f7 !important;
  --md-accent-fg-color--transparent: rgba(168, 85, 247, 0.1) !important;
  --md-accent-bg-color: #a855f7 !important;
  --md-accent-bg-color--transparent: rgba(168, 85, 247, 0.1) !important;

  --md-typeset-a-color: #38bdf8 !important;

  --md-default-bg-color: #0f172a !important;
  --md-default-bg-color--light: #1e293b !important;
  --md-default-fg-color: #f8fafc !important;
  --md-default-fg-color--light: #94a3b8 !important;
  --md-default-fg-color--lighter: #334155 !important;
  --md-default-fg-color--lightest: #1e293b !important;

  /* Custom Glassmorphism variables for Dark Mode */
  --lab-glass-bg: rgba(15, 23, 42, 0.4);
  --lab-glass-border: rgba(255, 255, 255, 0.05);
}

/* Hyperlinks High Contrast Rules for Light and Dark Modes */
.md-typeset a,
.md-content a {
  color: #38bdf8 !important;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(56, 189, 248, 0.4);
}

/* Dark Mode Links (slate) */
[data-md-color-scheme="slate"] .md-typeset a,
[data-md-color-scheme="slate"] .md-content a,
body[data-md-color-scheme="slate"] a {
  color: #38bdf8 !important; /* Sky Blue - Ultra High Contrast on Dark Slate */
  text-decoration-color: rgba(56, 189, 248, 0.6) !important;
}

[data-md-color-scheme="slate"] .md-typeset a:hover,
body[data-md-color-scheme="slate"] a:hover {
  color: #7dd3fc !important;
}

/* Light Mode Links (default) */
[data-md-color-scheme="default"] .md-typeset a,
[data-md-color-scheme="default"] .md-content a,
body[data-md-color-scheme="default"] a {
  color: #6d28d9 !important; /* Deep Purple - High Contrast on Light Background */
  text-decoration-color: rgba(109, 40, 217, 0.4) !important;
}

[data-md-color-scheme="default"] .md-typeset a:hover,
body[data-md-color-scheme="default"] a:hover {
  color: #8b5cf6 !important;
}

/* Glassmorphism Header Implementation */
.md-header {
  background-color: var(--lab-glass-bg) !important;
  backdrop-filter: blur(var(--lab-blur));
  -webkit-backdrop-filter: blur(var(--lab-blur));
  border-bottom: 1px solid var(--lab-glass-border) !important;
  transition: background-color 0.25s, border-color 0.25s;
}

/* Make sure header text/icons are properly readable */
.md-header__title, .md-header__button {
  color: var(--md-default-fg-color) !important;
}

.md-header__button.md-logo img {
  filter: drop-shadow(0 0 4px rgba(142, 68, 173, 0.3));
}

/* Interactive accent color on search and links */
.md-search__input:focus {
  background-color: var(--lab-surface) !important;
}

/* Hover link effects to match cmsfornerd's hover behavior */
a.md-nav__link:hover, .md-nav__link--active {
  color: var(--lab-purple) !important;
}

/* Rounded Cards & Glass effects for elements */
.md-content__inner {
  font-family: var(--md-text-font);
}

.md-typeset h1, .md-typeset h2, .md-typeset h3 {
  font-family: var(--md-text-font);
  color: var(--md-default-fg-color);
  font-weight: 700;
}

.md-typeset h1 {
  border-bottom: 3px solid var(--lab-purple);
  padding-bottom: 8px;
  margin-top: 1.5em;
}

.md-typeset h2 {
  border-bottom: 1px solid var(--lab-border);
  padding-bottom: 6px;
  margin-top: 1.2em;
}

/* Code block adjustments for cmsfornerd2-style dark syntax background */
.md-typeset pre, .md-typeset code {
  font-family: var(--md-code-font) !important;
}

/* Customize hover styles for table rows to increase clarity */
.md-typeset table:not([class]) th {
  background-color: var(--lab-primary);
  color: #ffffff;
  font-family: var(--md-code-font);
  font-size: 0.85rem;
}

.md-typeset table:not([class]) tr:hover {
  background-color: var(--md-accent-fg-color--transparent);
}

/* Standardizing focus rings & selection to follow theme purple */
::selection {
  background-color: var(--md-accent-fg-color--transparent);
  color: var(--lab-purple);
}

/* Scrollbars customized to purple accent */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: var(--lab-purple);
  border-radius: var(--radius);
}

::-webkit-scrollbar-track {
  background: var(--lab-bg);
}

/* ==============================================================================
 * Custom 3-Button Theme Mode Controller (MODE : LIGHT | DARK | AUTO)
 * ============================================================================== */
.theme-mode-toggle-container {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--md-text-font);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-left: auto;
  margin-right: 12px;
  z-index: 10;
}

.theme-mode-label {
  color: var(--lab-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.theme-mode-segmented-control {
  display: inline-flex;
  background: var(--lab-surface);
  border: 1px solid var(--lab-border);
  border-radius: 8px;
  overflow: hidden;
  padding: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.theme-mode-btn {
  background: transparent;
  border: none;
  color: var(--lab-muted);
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s ease-in-out;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.theme-mode-btn:hover {
  color: var(--lab-text);
  background: rgba(142, 68, 173, 0.05);
}

.theme-mode-btn.active {
  background: var(--lab-bg);
  color: var(--lab-purple);
  box-shadow: 0 1px 4px rgba(142, 68, 173, 0.2);
  border: 1px solid var(--lab-border);
}

/* ==============================================================================
 * Automated Dynamic Table of Contents (TOC) Card Design System
 * ============================================================================== */
.custom-toc-card {
  background: var(--lab-surface);
  border: 1px solid var(--lab-border);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  position: sticky;
  top: var(--toc-sticky-top);
  max-height: calc(100vh - var(--toc-scroll-offset));
  overflow-y: auto;
  font-family: var(--md-text-font);
  margin-bottom: 24px;

  /* Standard cross-browser scrollbar properties for Firefox compatibility */
  scrollbar-width: thin;
  scrollbar-color: var(--lab-border) transparent;
}

/* Scrollbar customizations for TOC card */
.custom-toc-card::-webkit-scrollbar {
  width: 4px;
}
.custom-toc-card::-webkit-scrollbar-thumb {
  background: var(--lab-border);
  border-radius: 2px;
}

.custom-toc-header {
  color: var(--lab-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--lab-border);
}

.custom-toc-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.custom-toc-sublist {
  list-style: none !important;
  padding-left: 14px !important;
  margin-top: 4px !important;
  margin-bottom: 6px !important;
  border-left: 1px solid var(--lab-border);
}

.custom-toc-item {
  margin-bottom: 8px !important;
  line-height: 1.4;
  font-size: 0.85rem;
}

.custom-toc-item--h3 {
  font-size: 0.8rem;
  margin-bottom: 6px !important;
}

.custom-toc-link {
  color: var(--lab-muted) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  /* transition limited to non-layout properties so padding adjustments do not animate layout */
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  display: block;
  cursor: pointer;
  border-radius: 4px;
}

.custom-toc-link:hover {
  color: var(--lab-purple) !important;
  padding-left: 4px;
}

.custom-toc-link:focus-visible {
  outline: 2px solid var(--lab-purple);
  outline-offset: 2px;
}

.custom-toc-link.active {
  color: var(--lab-purple) !important;
  font-weight: 700 !important;
  border-left: 2px solid var(--lab-purple);
  padding-left: 6px;
  margin-left: -2px;
}

/* Hide MkDocs default TOC titles / navigation when using the custom card and active */
body.custom-toc-active .md-sidebar--secondary .md-nav--secondary {
  display: none !important;
}