/**
 * Dark Theme Components - VPS Terminal Component Styles
 * ===========================================================
 *
 * SPDX-License-Identifier: LicenseRef-Kodachi-SAN-1.0
 * Copyright (c) 2013-2026 Warith Al Maawali
 *
 * This file is part of Kodachi OS.
 * For full license terms, see LICENSE.md or visit:
 * http://kodachi.cloud/wiki/bina/license.html
 *
 * Commercial or organizational use requires a written license.
 * Contact: warith@digi77.com
 *
 * Author: Warith Al Maawali
 * Version: 9.0.1
 * Last updated: 2026-03-07
 *
 * Description:
 * Dark theme component styles for the Kodachi wiki.
 * Color variables are defined in kodachi-variables-dark.css.
 *
 * Links:
 * - Website: https://www.digi77.com
 * - Website: https://www.kodachi.cloud
 * - GitHub: https://github.com/WMAL
 * - Discord: https://discord.gg/KEFErEx
 * - LinkedIn: https://om.linkedin.com/in/warith1977
 * - X (Twitter): https://x.com/warith2020
 */

/* Kodachi Dark Theme - Component Styles Only */
/* Color variables are defined in kodachi-variables-dark.css */

/* Typography - Orbitron for Headings (VPS Style) */
[data-md-color-scheme="slate"] h1,
[data-md-color-scheme="slate"] h2,
[data-md-color-scheme="slate"] h3,
[data-md-color-scheme="slate"] h4,
[data-md-color-scheme="slate"] h5,
[data-md-color-scheme="slate"] h6,
[data-md-color-scheme="slate"] .md-header__title,
[data-md-color-scheme="slate"] .md-nav__title {
  font-family: "Orbitron", system-ui, sans-serif !important;
}

/* Body Background - Pure Black VPS Style */
body[data-md-color-scheme="slate"] {
  background: #000000;
  font-family: var(--md-text-font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

/* Layout shell */
html {
  overflow-x: hidden;
  overflow-x: clip;
}

:root {
  --kd-page-max-width: min(2000px, calc(100vw - 1.25rem));
  --kd-page-padding-x: clamp(1rem, 1.6vw, 1.75rem);
  --kd-sidebar-primary-width: clamp(13.5rem, 15vw, 15rem);
  --kd-sidebar-secondary-width: clamp(11rem, 12vw, 12.5rem);
}

[data-md-color-scheme="slate"] .md-grid {
  max-width: var(--kd-page-max-width) !important;
}

[data-md-color-scheme="slate"] .md-main__inner {
  gap: clamp(1rem, 1.4vw, 1.75rem) !important;
}

[data-md-color-scheme="slate"] .md-content,
[data-md-color-scheme="slate"] .md-content__inner,
[data-md-color-scheme="slate"] .md-typeset {
  max-width: none !important;
}

/* Keep the article wide on desktop and only retain the right TOC on truly wide displays. */
@media screen and (min-width: 76.25rem) {
  [data-md-color-scheme="slate"] .md-main__inner {
    grid-template-columns:
      minmax(var(--kd-sidebar-primary-width), var(--kd-sidebar-primary-width))
      minmax(0, 1fr)
      minmax(var(--kd-sidebar-secondary-width), var(--kd-sidebar-secondary-width)) !important;
  }

  [data-md-color-scheme="slate"] .md-content__inner {
    margin: 0 !important;
    padding-inline: var(--kd-page-padding-x) !important;
  }
}

@media screen and (min-width: 76.25rem) and (max-width: 105rem) {
  [data-md-color-scheme="slate"] .md-main__inner {
    grid-template-columns:
      minmax(var(--kd-sidebar-primary-width), var(--kd-sidebar-primary-width))
      minmax(0, 1fr) !important;
  }

  [data-md-color-scheme="slate"] .md-sidebar--secondary {
    display: none !important;
  }
}

@media screen and (min-width: 60rem) and (max-width: 76.234375rem) {
  [data-md-color-scheme="slate"] .md-main__inner {
    grid-template-columns: minmax(13rem, 14rem) minmax(0, 1fr) !important;
  }

  [data-md-color-scheme="slate"] .md-content__inner {
    padding-inline: 1.25rem !important;
  }
}

[data-md-color-scheme="slate"] .md-typeset__scrollwrap,
[data-md-color-scheme="slate"] .md-typeset__table {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

[data-md-color-scheme="slate"] .md-typeset__table {
  display: block;
}

[data-md-color-scheme="slate"] .md-typeset__table > table {
  width: max-content;
  min-width: 100%;
}

/* Header/Navigation Bar - VPS Terminal Style */
[data-md-color-scheme="slate"] .md-header {
  background: #000000;
  border-bottom: 1px solid rgba(159, 239, 0, 0.3);
  box-shadow: 0 2px 10px rgba(159, 239, 0, 0.1);
}

[data-md-color-scheme="slate"] .md-header__title {
  color: #9FEF00;
  font-weight: 600;
  text-shadow: 0 0 10px rgba(159, 239, 0, 0.5);
}

/* Navigation Sidebar - Solid Black */
[data-md-color-scheme="slate"] .md-sidebar {
  background: #000000;
  border-right: 1px solid rgba(159, 239, 0, 0.2);
}

[data-md-color-scheme="slate"] .md-nav__title {
  background: #000000;
  color: #9FEF00;
  font-weight: 600;
  border-left: 2px solid #9FEF00;
}

[data-md-color-scheme="slate"] .md-nav__link {
  color: #999999;
  transition: color 0.2s ease;
}

[data-md-color-scheme="slate"] .md-nav__link:hover {
  color: #9FEF00;
  background: rgba(159, 239, 0, 0.05);
}

[data-md-color-scheme="slate"] .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav__item .md-nav__link--active {
  color: #9FEF00;
  background: rgba(159, 239, 0, 0.05);
  font-weight: 600;
  border-left: 2px solid #9FEF00;
}

/* Nested Navigation Items */
[data-md-color-scheme="slate"] .md-nav__item--nested > .md-nav__link {
  color: var(--kodachi-text-primary);
  font-weight: 500;
  background: var(--kodachi-bg-tertiary);
  border-radius: 6px;
  margin-bottom: 0.2rem;
}

[data-md-color-scheme="slate"] .md-nav__item--nested > .md-nav__link:hover {
  background: rgba(159, 239, 0, 0.08);
  box-shadow: 0 0 20px rgba(159, 239, 0, 0.2);
}

[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav,
[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav__list,
[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav .md-nav {
  padding-left: 0 !important;
  margin-left: 0 !important;
  border-left: none !important;
}

[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav__item,
[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav__item--nested {
  margin-left: 0 !important;
}

[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav__item > .md-nav__link,
[data-md-color-scheme="slate"] .md-sidebar--primary .md-nav__item--nested > .md-nav__link {
  margin-left: 0 !important;
  padding-left: 0.85rem !important;
}

[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav,
[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__list,
[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav .md-nav {
  padding-left: 0 !important;
  margin-left: 0 !important;
  border-left: none !important;
}

[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__item {
  margin-left: 0 !important;
}

[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__item > .md-nav__link,
[data-md-color-scheme="slate"] .md-sidebar--secondary .md-nav__item > .md-toc__link {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  margin-left: 0 !important;
  padding-left: 0.85rem !important;
}

[data-md-color-scheme="slate"] .md-sidebar--secondary .kd-toc-link-parent::after {
  content: "\25BE";
  flex: 0 0 auto;
  color: #9FEF00;
  font-size: 0.78rem;
  line-height: 1.2;
  opacity: 0.95;
}

/* Hide the source viewer modal until explicitly opened. */
.source-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.84);
  backdrop-filter: blur(6px);
}

.source-modal-overlay.active {
  display: flex;
}

.source-modal {
  width: min(960px, 100%);
  max-height: min(88vh, 920px);
  display: flex;
  flex-direction: column;
  background: #000000;
  border: 1px solid rgba(159, 239, 0, 0.28);
  border-radius: 18px;
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.source-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(159, 239, 0, 0.14);
  background: linear-gradient(180deg, rgba(159, 239, 0, 0.08), rgba(159, 239, 0, 0.02));
}

.source-modal-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: #9FEF00;
  font-size: 1rem;
  font-weight: 600;
}

.source-modal-title svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.source-modal-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.source-modal-btn,
.source-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(159, 239, 0, 0.2);
  border-radius: 10px;
  background: rgba(159, 239, 0, 0.06);
  color: #9FEF00;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.source-modal-btn:hover,
.source-modal-close:hover {
  background: rgba(159, 239, 0, 0.12);
  border-color: rgba(159, 239, 0, 0.38);
  transform: translateY(-1px);
}

.source-modal-btn svg,
.source-modal-close svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.source-modal-btn .check-icon {
  display: none;
}

.source-modal-btn.copied .copy-icon {
  display: none;
}

.source-modal-btn.copied .check-icon {
  display: block;
}

.source-modal-content {
  position: relative;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.source-code-container {
  height: 100%;
  padding: 20px 22px 22px;
  overflow: auto;
}

.source-code-pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.source-loading,
.source-error {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 32px 20px;
  text-align: center;
  color: #cfd8dc;
}

.source-error svg {
  width: 32px;
  height: 32px;
}

.source-loading-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(159, 239, 0, 0.18);
  border-top-color: #9FEF00;
  border-radius: 50%;
  animation: source-modal-spin 0.8s linear infinite;
}

@keyframes source-modal-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 768px) {
  .source-modal-overlay {
    padding: 12px;
  }

  .source-modal {
    max-height: 92vh;
    border-radius: 14px;
  }

  .source-modal-header {
    padding: 14px 16px;
  }

  .source-code-container {
    padding: 16px;
  }
}

/* Search */
[data-md-color-scheme="slate"] .md-search__form {
  background: var(--kodachi-bg-tertiary);
  border: 1px solid rgba(159, 239, 0, 0.3);
  border-radius: 8px;
  transition: all 0.3s ease;
}

[data-md-color-scheme="slate"] .md-search__form:hover,
[data-md-color-scheme="slate"] .md-search__form:focus-within {
  border-color: var(--kodachi-neon-green);
  box-shadow: 0 0 20px var(--kodachi-neon-green-glow);
}

[data-md-color-scheme="slate"] .md-search__input {
  color: var(--kodachi-text-primary);
  font-family: var(--md-text-font);
}

[data-md-color-scheme="slate"] .md-search__input::placeholder {
  color: var(--kodachi-text-muted);
  font-style: italic;
}

/* Content Typography */
[data-md-color-scheme="slate"] .md-typeset {
  color: var(--kodachi-text-primary);
}

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4,
[data-md-color-scheme="slate"] .md-typeset h5,
[data-md-color-scheme="slate"] .md-typeset h6 {
  color: var(--kodachi-text-bright);
  font-weight: 600;
}

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] h1 {
  color: #9FEF00 !important;
  text-shadow: 0 0 10px rgba(159, 239, 0, 0.5) !important;
}

[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] h2 {
  color: #9FEF00 !important;
  text-shadow: 0 0 10px rgba(159, 239, 0, 0.5) !important;
  border-bottom: 1px solid rgba(159, 239, 0, 0.3) !important;
}

[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] h3 {
  color: #9FEF00 !important;
  text-shadow: 0 0 8px rgba(159, 239, 0, 0.4) !important;
}

/* Links */
[data-md-color-scheme="slate"] .md-typeset a {
  color: var(--kodachi-neon-green);
  text-decoration: none;
  position: relative;
  transition: all 0.3s ease;
}

[data-md-color-scheme="slate"] .md-typeset a:hover {
  color: var(--kodachi-neon-green-bright);
  text-shadow: 0 0 10px var(--kodachi-neon-green-glow);
  text-decoration: underline;
  text-decoration-color: var(--kodachi-neon-green);
  text-underline-offset: 4px;
}

/* Code Blocks */
[data-md-color-scheme="slate"] .md-typeset code {
  background: var(--kodachi-code-bg);
  color: var(--kodachi-neon-green);
  border: 1px solid rgba(159, 239, 0, 0.2);
  border-radius: 6px;
  padding: 0.2em 0.4em;
  font-family: var(--md-code-font);
  font-size: 75%;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-md-color-scheme="slate"] .md-typeset pre {
  background: #000000;
  border: 1px solid rgba(159, 239, 0, 0.3);
  border-radius: 6px;
  padding: 1em 1.2em;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

[data-md-color-scheme="slate"] .md-typeset pre code {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 80%;
  line-height: 1.4;
  color: var(--kodachi-code-text);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: none;
  display: block;
}

/* Copy button for code blocks - Enhanced */
[data-md-color-scheme="slate"] .md-clipboard {
  color: var(--kodachi-text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.2rem;
  transition: all 0.3s ease;
  top: 0.5em;
  right: 0.5em;
  padding: 0.25rem;
}

[data-md-color-scheme="slate"] .md-clipboard:hover {
  color: var(--kodachi-neon-green);
  background-color: rgba(159, 239, 0, 0.1);
  border-color: var(--kodachi-neon-green);
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px var(--kodachi-neon-green-glow));
  box-shadow: 0 0 10px var(--kodachi-neon-green-glow);
}

[data-md-color-scheme="slate"] .md-clipboard:active {
  transform: scale(0.95);
  opacity: 0.8;
}

/* Success state for code copy buttons */
[data-md-color-scheme="slate"] .md-clipboard.copied {
  color: var(--kodachi-neon-green) !important;
  filter: drop-shadow(0 0 12px var(--kodachi-neon-green-glow));
  animation: pulse-success 0.4s ease-out;
}

/* Simplified pulse for success states only */
@keyframes pulse-success {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Tables */
[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
  background: var(--kodachi-bg-secondary);
  border: 1px solid rgba(159, 239, 0, 0.2);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background: #000000;
  color: #9FEF00;
  font-weight: 600;
  border-bottom: 1px solid rgba(159, 239, 0, 0.3);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) td {
  border-top: 1px solid rgba(159, 239, 0, 0.1);
  color: var(--kodachi-text-primary);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:hover {
  background: rgba(159, 239, 0, 0.05);
  box-shadow: inset 0 0 30px rgba(159, 239, 0, 0.02);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) tbody tr:nth-child(odd) {
  background: rgba(159, 239, 0, 0.04);
}

/* Admonitions */
[data-md-color-scheme="slate"] .md-typeset .admonition,
[data-md-color-scheme="slate"] .md-typeset details {
  background: var(--kodachi-bg-tertiary);
  border: 1px solid rgba(159, 239, 0, 0.2);
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  position: relative;
}

[data-md-color-scheme="slate"] .md-typeset .admonition::before,
[data-md-color-scheme="slate"] .md-typeset details::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--kodachi-neon-green);
}

[data-md-color-scheme="slate"] .md-typeset .admonition-title,
[data-md-color-scheme="slate"] .md-typeset summary {
  background: rgba(159, 239, 0, 0.1);
  border-bottom: 1px solid rgba(159, 239, 0, 0.2);
  color: var(--kodachi-neon-green);
  font-weight: 600;
}

/* Info admonition */
[data-md-color-scheme="slate"] .md-typeset .admonition.info,
[data-md-color-scheme="slate"] .md-typeset details.info {
  border-color: rgba(159, 239, 0, 0.3);
}

[data-md-color-scheme="slate"] .md-typeset .info::before {
  background: var(--kodachi-blue-electric);
}

[data-md-color-scheme="slate"] .md-typeset .info > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .info > summary {
  background: rgba(159, 239, 0, 0.1);
  color: var(--kodachi-blue-electric);
  border-bottom-color: rgba(159, 239, 0, 0.2);
}

/* Warning admonition */
[data-md-color-scheme="slate"] .md-typeset .admonition.warning,
[data-md-color-scheme="slate"] .md-typeset details.warning {
  border-color: rgba(245, 158, 11, 0.3);
}

[data-md-color-scheme="slate"] .md-typeset .warning::before {
  background: var(--kodachi-warning);
}

[data-md-color-scheme="slate"] .md-typeset .warning > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .warning > summary {
  background: rgba(245, 158, 11, 0.1);
  color: var(--kodachi-warning);
  border-bottom-color: rgba(245, 158, 11, 0.2);
}

/* Danger admonition */
[data-md-color-scheme="slate"] .md-typeset .admonition.danger,
[data-md-color-scheme="slate"] .md-typeset details.danger {
  border-color: rgba(239, 68, 68, 0.3);
}

[data-md-color-scheme="slate"] .md-typeset .danger::before {
  background: var(--kodachi-error);
}

[data-md-color-scheme="slate"] .md-typeset .danger > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .danger > summary {
  background: rgba(239, 68, 68, 0.1);
  color: var(--kodachi-error);
  border-bottom-color: rgba(239, 68, 68, 0.2);
}

/* Success admonition */
[data-md-color-scheme="slate"] .md-typeset .admonition.success,
[data-md-color-scheme="slate"] .md-typeset details.success {
  border-color: rgba(16, 185, 129, 0.3);
}

[data-md-color-scheme="slate"] .md-typeset .success::before {
  background: var(--kodachi-success);
}

[data-md-color-scheme="slate"] .md-typeset .success > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .success > summary {
  background: rgba(16, 185, 129, 0.1);
  color: var(--kodachi-success);
  border-bottom-color: rgba(16, 185, 129, 0.2);
}

/* Buttons: primary = solid neon (dark text), secondary/base = ghost outline
   (neon text on transparent). Previously BOTH were solid neon, so a primary +
   secondary pair (e.g. "Get Kodachi Desktop" / "Get Terminal Server") read as two
   identical loud green blocks with no visual hierarchy. */
[data-md-color-scheme="slate"] .md-typeset .md-button {
  background: transparent;
  color: #9FEF00;
  border: 1px solid rgba(159, 239, 0, 0.5);
  transition: all 0.2s ease;
  box-shadow: none;
}

[data-md-color-scheme="slate"] .md-typeset .md-button:hover {
  background: rgba(159, 239, 0, 0.08);
  border-color: #9FEF00;
  transform: translateY(-2px);
  box-shadow: none;
}

[data-md-color-scheme="slate"] .md-typeset .md-button--primary {
  background: #9FEF00;
  color: #041106;
  border-color: #9FEF00;
  box-shadow: 0 2px 8px rgba(159, 239, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

[data-md-color-scheme="slate"] .md-typeset .md-button--primary:hover {
  background: #b6ff2a;
  color: #020a03;
  transform: translateY(-2px);
  box-shadow:
    0 8px 25px rgba(159, 239, 0, 0.4),
    0 0 30px rgba(159, 239, 0, 0.5);
}

/* Text colors: primary = dark on neon; secondary = neon on transparent. */
[data-md-color-scheme="slate"] .md-typeset a.md-button--primary,
[data-md-color-scheme="slate"] .md-typeset a.md-button--primary:visited {
  color: #041106 !important;
  text-shadow: none !important;
  font-weight: 700;
}

[data-md-color-scheme="slate"] .md-typeset a.md-button:not(.md-button--primary),
[data-md-color-scheme="slate"] .md-typeset a.md-button:not(.md-button--primary):visited {
  color: #9FEF00 !important;
  text-shadow: none !important;
  font-weight: 700;
}

[data-md-color-scheme="slate"] .md-typeset a.md-button--primary:hover {
  color: #020a03 !important;
  text-shadow: none !important;
}
[data-md-color-scheme="slate"] .md-typeset a.md-button:not(.md-button--primary):hover {
  color: #b6ff2a !important;
  text-shadow: none !important;
}

/* Tabs */
[data-md-color-scheme="slate"] .md-typeset .tabbed-labels {
  background: var(--kodachi-bg-tertiary);
  border-bottom: 2px solid rgba(159, 239, 0, 0.2);
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

[data-md-color-scheme="slate"] .md-typeset .tabbed-labels label {
  color: var(--kodachi-text-muted);
  transition: all 0.3s ease;
}

[data-md-color-scheme="slate"] .md-typeset .tabbed-labels label:hover {
  color: var(--kodachi-neon-green);
  background: rgba(159, 239, 0, 0.05);
}

[data-md-color-scheme="slate"] .md-typeset .tabbed-labels label.active {
  color: var(--kodachi-neon-green);
  background: rgba(159, 239, 0, 0.1);
  border-bottom: 2px solid var(--kodachi-neon-green);
  text-shadow: 0 0 10px var(--kodachi-neon-green-glow);
}

/* Blockquotes */
[data-md-color-scheme="slate"] .md-typeset blockquote {
  border-left: 4px solid var(--kodachi-neon-green);
  background: var(--kodachi-bg-tertiary);
  color: var(--kodachi-text-secondary);
  padding: 0.5em 1em;
  border-radius: 6px;
  box-shadow: inset 0 0 20px rgba(159, 239, 0, 0.02);
}

/* Footer */
[data-md-color-scheme="slate"] .md-footer {
  background: #000000;
  border-top: 1px solid rgba(159, 239, 0, 0.2);
}

[data-md-color-scheme="slate"] .md-footer__link {
  color: var(--kodachi-text-muted);
  transition: all 0.3s ease;
}

[data-md-color-scheme="slate"] .md-footer__link:hover {
  color: var(--kodachi-neon-green);
  text-shadow: 0 0 10px var(--kodachi-neon-green-glow);
}

/* Top navigation tabs */
[data-md-color-scheme="slate"] .md-tabs {
  background: #000000;
  border-bottom: 1px solid rgba(159, 239, 0, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

[data-md-color-scheme="slate"] .md-tabs__link {
  color: var(--kodachi-text-muted);
  transition: all 0.3s ease;
}

[data-md-color-scheme="slate"] .md-tabs__link:hover {
  color: var(--kodachi-neon-green);
  background: rgba(159, 239, 0, 0.05);
}

[data-md-color-scheme="slate"] .md-tabs__link--active {
  color: var(--kodachi-neon-green);
  border-bottom: 2px solid var(--kodachi-neon-green);
  background: rgba(159, 239, 0, 0.08);
  text-shadow: 0 0 15px var(--kodachi-neon-green-glow);
}

/* Grouped top-tab dropdown menus */
body[data-md-color-scheme="slate"].kd-preview-layout .md-tabs,
body[data-md-color-scheme="slate"].kd-preview-layout .md-tabs .md-grid,
body[data-md-color-scheme="slate"].kd-preview-layout .md-tabs .md-tabs__list {
  overflow: visible;
}

body[data-md-color-scheme="slate"].kd-preview-layout .md-tabs .md-tabs__list {
  contain: none;
}

body[data-md-color-scheme="slate"].kd-preview-layout .md-tabs {
  position: relative;
  z-index: 5000;
  isolation: isolate;
}

body[data-md-color-scheme="slate"].kd-preview-layout .md-tabs .md-tabs__item.kd-top-dropdown-wrap,
body[data-md-color-scheme="slate"].kd-preview-layout .md-tabs details.kd-top-dropdown {
  position: relative;
}

body[data-md-color-scheme="slate"].kd-preview-layout .md-tabs details.kd-top-dropdown > summary.kd-top-dropdown__trigger {
  list-style: none;
  cursor: pointer;
  user-select: none;
}

body[data-md-color-scheme="slate"].kd-preview-layout .md-tabs details.kd-top-dropdown > summary.kd-top-dropdown__trigger::-webkit-details-marker {
  display: none;
}

body[data-md-color-scheme="slate"].kd-preview-layout .md-tabs details.kd-top-dropdown > summary.kd-top-dropdown__trigger::after {
  content: "\25BE";
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.72rem;
  opacity: 0.85;
  transition: transform 0.15s ease;
}

body[data-md-color-scheme="slate"].kd-preview-layout .md-tabs details.kd-top-dropdown[open] > summary.kd-top-dropdown__trigger::after {
  transform: rotate(180deg);
}

body[data-md-color-scheme="slate"].kd-preview-layout .md-tabs .kd-top-dropdown__menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  z-index: 1200;
  display: none;
  min-width: 14rem;
  max-height: min(70vh, 24rem);
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  border-radius: 0.55rem;
  border: 1px solid rgba(159, 239, 0, 0.35);
  background: #000000;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.55);
  overflow-y: auto;
}

body[data-md-color-scheme="slate"].kd-preview-layout .md-tabs details.kd-top-dropdown[open] > .kd-top-dropdown__menu {
  display: block;
}

body[data-md-color-scheme="slate"].kd-preview-layout .md-tabs .kd-top-dropdown__menu li {
  margin: 0;
  padding: 0;
}

body[data-md-color-scheme="slate"].kd-preview-layout .md-tabs .kd-top-dropdown__link {
  display: block;
  padding: 0.45rem 0.9rem;
  font-size: 0.8rem;
  color: var(--kodachi-text-muted);
  text-decoration: none;
  white-space: nowrap;
}

body[data-md-color-scheme="slate"].kd-preview-layout .md-tabs .kd-top-dropdown__link:hover,
body[data-md-color-scheme="slate"].kd-preview-layout .md-tabs .kd-top-dropdown__link:focus-visible {
  color: var(--kodachi-neon-green);
  background: rgba(159, 239, 0, 0.1);
  outline: none;
}

@media screen and (min-width: 60rem) and (max-width: 76.234375rem) {
  body[data-md-color-scheme="slate"].kd-preview-layout .md-tabs {
    display: block;
  }

  body[data-md-color-scheme="slate"].kd-preview-layout .md-tabs .md-tabs__list {
    gap: 0;
  }

  body[data-md-color-scheme="slate"].kd-preview-layout .md-tabs__link,
  body[data-md-color-scheme="slate"].kd-preview-layout .md-tabs details.kd-top-dropdown > summary.kd-top-dropdown__trigger {
    padding-inline: 0.35rem;
    font-size: 0.68rem;
  }

  body[data-md-color-scheme="slate"].kd-preview-layout .md-tabs .kd-top-dropdown__menu {
    max-width: min(22rem, calc(100vw - 2rem));
  }
}

/* Scrollbars - VPS Terminal Style */
[data-md-color-scheme="slate"] ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background: #000000;
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-track {
  background: #000000;
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb {
  background: #9FEF00;
  border-radius: 6px;
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb:hover {
  background: #9FEF00;
}

/* Search results */
[data-md-color-scheme="slate"] .md-search-result {
  background: var(--kodachi-bg-secondary);
  border-bottom: 1px solid rgba(159, 239, 0, 0.1);
}

[data-md-color-scheme="slate"] .md-search-result__link:hover {
  background: rgba(159, 239, 0, 0.05);
}

[data-md-color-scheme="slate"] .md-search-result__meta {
  background: var(--kodachi-bg-tertiary);
  color: var(--kodachi-text-muted);
}

/* Syntax highlighting adjustments */
[data-md-color-scheme="slate"] .highlight .k { color: var(--kodachi-code-keyword) !important; }
[data-md-color-scheme="slate"] .highlight .s { color: var(--kodachi-code-string) !important; }
[data-md-color-scheme="slate"] .highlight .c { color: var(--kodachi-code-comment) !important; }
[data-md-color-scheme="slate"] .highlight .n { color: var(--kodachi-code-text) !important; }
[data-md-color-scheme="slate"] .highlight .o { color: var(--kodachi-pink-cyber) !important; }
[data-md-color-scheme="slate"] .highlight .p { color: var(--kodachi-text-muted) !important; }
[data-md-color-scheme="slate"] .highlight .m { color: var(--kodachi-code-number) !important; }
[data-md-color-scheme="slate"] .highlight .nf { color: var(--kodachi-code-function) !important; }
[data-md-color-scheme="slate"] .highlight .nv { color: var(--kodachi-code-variable) !important; }
[data-md-color-scheme="slate"] .highlight .nb { color: var(--kodachi-blue-electric) !important; }

/* Custom welcome box styling - VPS Terminal Style */
[data-md-color-scheme="slate"] .md-typeset div[style*="linear-gradient"] {
  background: rgba(159, 239, 0, 0.05) !important;
  border: 1px solid rgba(159, 239, 0, 0.3);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* Welcome box title - Simple VPS Style */
[data-md-color-scheme="slate"] .md-typeset div[style*="linear-gradient"] h2 {
  color: #9FEF00 !important;
  text-shadow: 0 0 10px rgba(159, 239, 0, 0.5);
  font-weight: 600;
}

/* Terminal-style elements */
[data-md-color-scheme="slate"] .terminal {
  background: #000000;
  border: 1px solid var(--kodachi-neon-green);
  border-radius: 8px;
  padding: 1rem;
  font-family: var(--md-code-font);
  color: var(--kodachi-neon-green);
  box-shadow:
    0 0 20px rgba(159, 239, 0, 0.2),
    inset 0 0 20px rgba(0, 0, 0, 0.5);
  position: relative;
}

[data-md-color-scheme="slate"] .terminal::before {
  content: '$ ';
  color: var(--kodachi-blue-electric);
  font-weight: bold;
}

/* Remove elaborate pulse animation - not in VPS theme */

/* Icon enhancements */
[data-md-color-scheme="slate"] .md-icon {
  color: var(--kodachi-neon-green);
  filter: drop-shadow(0 0 3px var(--kodachi-neon-green-glow));
}

[data-md-color-scheme="slate"] .md-icon:hover {
  transform: scale(1.2);
  filter: drop-shadow(0 0 8px var(--kodachi-neon-green-glow));
}

/* Version selector */
[data-md-color-scheme="slate"] .md-version__current {
  background: var(--kodachi-bg-tertiary);
  color: var(--kodachi-neon-green);
  border: 1px solid rgba(159, 239, 0, 0.3);
}

[data-md-color-scheme="slate"] .md-version__list {
  background: var(--kodachi-bg-secondary);
  border: 1px solid rgba(159, 239, 0, 0.2);
}

[data-md-color-scheme="slate"] .md-version__link {
  color: var(--kodachi-text-secondary);
}

[data-md-color-scheme="slate"] .md-version__link:hover {
  background: rgba(159, 239, 0, 0.1);
  color: var(--kodachi-neon-green);
}

/* Images with cyber frame */
[data-md-color-scheme="slate"] .md-typeset img {
  border: 1px solid rgba(159, 239, 0, 0.2);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

[data-md-color-scheme="slate"] .md-typeset img:hover {
  border-color: var(--kodachi-neon-green);
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(159, 239, 0, 0.2);
  transform: scale(1.02);
}

/* Horizontal rules - Simple VPS Style */
[data-md-color-scheme="slate"] .md-typeset hr {
  border: none;
  height: 1px;
  background: rgba(159, 239, 0, 0.3);
  margin: 2rem 0;
}

/* Remove responsive size overrides - use default sizes */

/* Back to top button fix - prevent movement on hover */
[data-md-color-scheme="slate"] .md-top,
[data-md-color-scheme="slate"] .md-top:hover {
  background-color: var(--kodachi-neon-green) !important;
  color: var(--kodachi-bg-primary) !important;
  transform: translate(-50%) !important; /* Keep consistent - prevents movement */
  transition: color 125ms, background-color 125ms, opacity 125ms !important;
}

/* RTL support for back to top button */
[dir="rtl"] [data-md-color-scheme="slate"] .md-top,
[dir="rtl"] [data-md-color-scheme="slate"] .md-top:hover {
  background-color: var(--kodachi-neon-green) !important;
  color: var(--kodachi-bg-primary) !important;
  transform: translate(50%) !important; /* RTL uses positive translate */
  transition: color 125ms, background-color 125ms, opacity 125ms !important;
}

/* Hash copy buttons now use standard md-clipboard class */
/* Custom styles removed - using MkDocs Material theme styles */

/* Hide MkDocs Material copy notification/snackbar */
.md-dialog,
.md-snackbar,
.md-clipboard__message,
[data-md-component="dialog"],
[data-md-component="snackbar"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Development Progress Overview Title - Dark Theme */
/* Removed :contains() - not valid CSS */
[data-md-color-scheme="slate"] h2 + .dev-progress-container ~ h2:first-of-type {
  color: var(--kodachi-text-bright) !important;
  font-weight: 600 !important;
  margin: 2rem 0 1.5rem 0 !important;
  font-size: 1.5rem !important;
  text-shadow: 0 0 10px rgba(159, 239, 0, 0.3) !important;
}

/* Generic h2 targeting for development progress section - removed duplicate to avoid conflicts */

/* Ultra small font for status badges */
[data-md-color-scheme="slate"] .font-ultra-micro {
  font-size: 0.5rem !important; /* 3 times smaller than normal */
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
}

/* Development Progress Card Layout - Dark Theme */
[data-md-color-scheme="slate"] .dev-progress-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

[data-md-color-scheme="slate"] .progress-card {
  background: #000000;
  border: 1px solid rgba(159, 239, 0, 0.3);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  transition: border-color 0.2s ease;
}

[data-md-color-scheme="slate"] .progress-card:hover {
  border-color: #9FEF00;
}

[data-md-color-scheme="slate"] .progress-card.completed {
  border-color: #9FEF00;
  background: rgba(159, 239, 0, 0.05);
}

[data-md-color-scheme="slate"] .progress-card.in-progress {
  border-color: #9FEF00;
  background: rgba(159, 239, 0, 0.05);
}

[data-md-color-scheme="slate"] .progress-card.planned {
  border-color: #666666;
  background: #000000;
}

[data-md-color-scheme="slate"] .progress-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  border: 2px solid rgba(159, 239, 0, 0.3);
}

[data-md-color-scheme="slate"] .progress-card.completed .progress-icon {
  background: #9FEF00;
  color: #000000;
  border-color: #9FEF00;
}

[data-md-color-scheme="slate"] .progress-card.in-progress .progress-icon {
  background: #9FEF00;
  color: #000000;
  border-color: #9FEF00;
}

[data-md-color-scheme="slate"] .progress-card.planned .progress-icon {
  background: #000000;
  color: #666666;
  border-color: #666666;
}

[data-md-color-scheme="slate"] .progress-title {
  color: var(--kodachi-text-bright) !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  margin: 0 0 8px 0 !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

[data-md-color-scheme="slate"] .progress-description {
  color: var(--kodachi-text-secondary) !important;
  font-size: 0.875rem !important;
  margin: 0 0 16px 0 !important;
  line-height: 1.5 !important;
}

[data-md-color-scheme="slate"] .status-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: relative;
  overflow: hidden;
}

[data-md-color-scheme="slate"] .status-badge.complete {
  background: rgba(16, 185, 129, 0.15);
  color: var(--kodachi-success);
  border: 1px solid var(--kodachi-success);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

[data-md-color-scheme="slate"] .status-badge.progress {
  background: rgba(255, 140, 0, 0.15);
  color: #ff8c00;
  border: 1px solid #ff8c00;
  box-shadow: 0 0 10px rgba(255, 140, 0, 0.2);
}

[data-md-color-scheme="slate"] .status-badge.planned {
  background: rgba(138, 148, 168, 0.15);
  color: var(--kodachi-text-muted);
  border: 1px solid var(--kodachi-text-muted);
  box-shadow: 0 0 10px rgba(138, 148, 168, 0.1);
}

/* Print styles */
@media print {
  [data-md-color-scheme="slate"] {
    --kodachi-bg-primary: #ffffff;
    --kodachi-text-primary: #000000;
    --kodachi-neon-green: #008000;
  }
}