/*
 * Armory Bot - Salamanders/Mechanicum Theme
 * Warhammer 40K inspired color scheme
 */

/* ============================================================================
 * COLOR PALETTE - Salamanders & Adeptus Mechanicus
 * ============================================================================ */

:root {
  /* Primary Colors - Aligned with Dashboard Forge Palette */
  --salamander-green: #3e7d54;        /* Primary Bright (matches dashboard) */
  --salamander-green-light: #4a9964;  /* Lighter for dark-mode accents */
  --salamander-green-dark: #1A3025;   /* Deep Nocturne Green (matches dashboard) */
  
  /* Secondary Colors - Ember Orange */
  --forge-orange: #E05A2B;            /* Accent Flame (matches dashboard) */
  --forge-orange-light: #e8753a;
  --forge-orange-dark: #c44e22;
  
  /* Accent Colors - Burnished Gold */
  --auric-gold: #D4AF37;             /* Accent Gold (matches dashboard) */
  --auric-gold-light: #e0c265;
  --auric-gold-dark: #b8962f;
  
  /* Alert Colors */
  --blood-red: #c44741;
  --blood-red-light: #d86b66;
  --blood-red-dark: #a83832;
  
  /* Neutral Colors - Forge Dark */
  --forge-black: #0f1412;            /* Body bg (matches dashboard) */
  --forge-gray: #1f2621;             /* Card bg (matches dashboard) */
  --forge-gray-light: #2a3530;
  --forge-white: #e8e6e3;            /* Parchment text (matches dashboard) */
  --text-muted: #8a8a8a;
  
  /* Deep Shadow (for scrollbar/overlays) */
  --deep-shadow: #0a0e0c;

  /* Mechanicum Colors - Adeptus Mechanicus Red & Bronze */
  --mechanicum-red: #8B1A1A;
  --mechanicum-red-light: #B82020;
  --mechanicum-red-dark: #5A0F0F;
  --mechanicum-bronze: #CD7F32;
  --mechanicum-bronze-light: #D4954A;
  --mechanicum-bronze-dark: #A66828;
  --mechanicum-bg: #0E0A0F;
  --mechanicum-card: #1A1520;
  --mechanicum-card-light: #241E2A;
  --mechanicum-text: #D4CFC8;
}

/* ============================================================================
 * MECHANICUM THEME - Adeptus Mechanicus (Dark Red/Bronze)
 * ============================================================================ */

[data-md-color-scheme="mechanicum"] {
  /* Inherit slate dark mode behavior */
  color-scheme: dark;
  
  --md-primary-fg-color: var(--mechanicum-red);
  --md-primary-fg-color--light: var(--mechanicum-red-light);
  --md-primary-fg-color--dark: var(--mechanicum-red-dark);
  --md-primary-bg-color: var(--mechanicum-bg);
  --md-primary-bg-color--light: var(--mechanicum-card);
  
  --md-accent-fg-color: var(--mechanicum-bronze);
  --md-accent-fg-color--transparent: rgba(205, 127, 50, 0.08);
  --md-accent-bg-color: var(--mechanicum-card);
  --md-accent-bg-color--light: var(--mechanicum-card-light);
  
  /* Links */
  --md-typeset-a-color: var(--mechanicum-bronze);
  
  /* Backgrounds - Dark metallic */
  --md-default-bg-color: var(--mechanicum-bg);
  --md-default-bg-color--light: var(--mechanicum-card);
  --md-default-bg-color--lighter: var(--mechanicum-card-light);
  --md-default-bg-color--lightest: #2E2836;
  --md-default-fg-color: var(--mechanicum-text);
  --md-default-fg-color--light: #A8A29E;
  --md-default-fg-color--lighter: #78716C;
  --md-default-fg-color--lightest: #57534E;
  
  /* Code blocks */
  --md-code-bg-color: var(--mechanicum-card);
  --md-code-fg-color: var(--mechanicum-bronze-light);
  --md-code-hl-color: rgba(205, 127, 50, 0.15);
  --md-code-hl-number-color: #F9A825;
  --md-code-hl-special-color: #F9A825;
  --md-code-hl-function-color: var(--mechanicum-bronze-light);
  --md-code-hl-constant-color: #EF5350;
  --md-code-hl-keyword-color: var(--mechanicum-red-light);
  --md-code-hl-string-color: #CE93D8;
  --md-code-hl-name-color: var(--mechanicum-text);
  --md-code-hl-operator-color: #EF9A9A;
  --md-code-hl-punctuation-color: #A8A29E;
  --md-code-hl-comment-color: #78716C;
  --md-code-hl-generic-color: #EF9A9A;
  --md-code-hl-variable-color: #EF9A9A;
  
  /* Footer */
  --md-footer-bg-color: var(--mechanicum-card);
  --md-footer-bg-color--dark: var(--mechanicum-bg);
  --md-footer-fg-color: var(--mechanicum-text);
  --md-footer-fg-color--light: #A8A29E;
  --md-footer-fg-color--lighter: #78716C;
  
  /* Header/Tabs */
  --md-typeset-color: var(--mechanicum-text);
  
  /* Shadows */
  --md-shadow-z1: 0 0.2rem 0.5rem rgba(0,0,0,.3), 0 0 0.05rem rgba(0,0,0,.2);
  --md-shadow-z2: 0 0.2rem 0.5rem rgba(0,0,0,.4), 0 0 0.05rem rgba(0,0,0,.3);
  --md-shadow-z3: 0 0.2rem 0.5rem rgba(0,0,0,.5), 0 0 0.05rem rgba(0,0,0,.4);
  
  /* Admonitions */
  --md-admonition-bg-color: rgba(139, 26, 26, 0.06);
  
  /* Header bar */
  --md-header-bg-color: var(--mechanicum-red-dark);
  
  /* Sidebar */
  --md-sidebar-bg-color: var(--mechanicum-bg);
}

/* ============================================================================
 * DARK MODE - Forge Theme (aligned with Dashboard)
 * ============================================================================ */

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--salamander-green);
  --md-primary-fg-color--light: var(--salamander-green-light);
  --md-primary-fg-color--dark: var(--salamander-green-dark);
  
  --md-accent-fg-color: var(--auric-gold);
  --md-accent-fg-color--transparent: rgba(212, 175, 55, 0.08);
  
  /* Links */
  --md-typeset-a-color: var(--salamander-green-light);
  
  /* Backgrounds - matches dashboard */
  --md-default-bg-color: var(--forge-black);
  --md-default-fg-color: var(--forge-white);
  
  /* Code blocks */
  --md-code-bg-color: var(--forge-gray);
  --md-code-fg-color: var(--salamander-green-light);
  
  /* Footer */
  --md-footer-bg-color: var(--forge-gray);
  --md-footer-fg-color: var(--forge-white);
}

/* ============================================================================
 * CUSTOM COMPONENT STYLING
 * ============================================================================ */

/* Headers - Clean, minimal styling */
.md-typeset h1 {
  color: var(--salamander-green);
  border-bottom: 2px solid rgba(45, 125, 77, 0.2);
  padding-bottom: 0.5rem;
  font-weight: 600;
}

[data-md-color-scheme="slate"] .md-typeset h1 {
  color: var(--salamander-green-light);
  border-bottom: 2px solid rgba(45, 125, 77, 0.3);
}

.md-typeset h2 {
  color: var(--salamander-green-dark);
  border-left: 3px solid var(--salamander-green);
  padding-left: 0.75rem;
  font-weight: 600;
}

[data-md-color-scheme="slate"] .md-typeset h2 {
  color: var(--salamander-green-light);
  border-left: 3px solid var(--salamander-green-light);
}

.md-typeset h3 {
  color: var(--forge-orange-dark);
  font-weight: 600;
}

[data-md-color-scheme="slate"] .md-typeset h3 {
  color: var(--auric-gold);
}

/* Buttons - Clean style */
.md-button {
  background-color: var(--salamander-green) !important;
  border: 1px solid var(--salamander-green) !important;
  color: white !important;
  transition: all 0.2s ease;
}

.md-button:hover {
  background-color: var(--salamander-green-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(45, 125, 77, 0.2);
}

.md-button--primary {
  background-color: var(--forge-orange) !important;
  border-color: var(--forge-orange) !important;
}

.md-button--primary:hover {
  background-color: var(--forge-orange-dark) !important;
  box-shadow: 0 2px 8px rgba(232, 117, 58, 0.2);
}

/* Code blocks - Clean, readable */
.md-typeset code {
  background-color: rgba(45, 125, 77, 0.06);
  color: var(--salamander-green-dark);
  border: 1px solid rgba(45, 125, 77, 0.12);
  padding: 0.1em 0.4em;
  border-radius: 3px;
  font-family: 'Roboto Mono', 'Courier New', monospace;
  font-size: 0.9em;
}

[data-md-color-scheme="slate"] .md-typeset code {
  background-color: rgba(45, 125, 77, 0.12);
  color: var(--salamander-green-light);
  border: 1px solid rgba(45, 125, 77, 0.2);
}

.md-typeset pre {
  background-color: #f8f8f8;
  border: 1px solid rgba(45, 125, 77, 0.15);
  border-radius: 4px;
}

[data-md-color-scheme="slate"] .md-typeset pre {
  background-color: var(--forge-gray);
  border-color: rgba(45, 125, 77, 0.25);
}

.md-typeset pre > code {
  background-color: transparent;
  border: none;
}

/* Admonitions - Clean, subtle styling */
.md-typeset .admonition {
  border-left-width: 3px;
  border-radius: 0 4px 4px 0;
}

.md-typeset .admonition.note {
  border-left-color: var(--salamander-green);
  background-color: rgba(45, 125, 77, 0.04);
}

.md-typeset .admonition.tip {
  border-left-color: var(--auric-gold);
  background-color: rgba(212, 165, 116, 0.04);
}

.md-typeset .admonition.warning {
  border-left-color: var(--forge-orange);
  background-color: rgba(232, 117, 58, 0.04);
}

.md-typeset .admonition.danger {
  border-left-color: var(--blood-red);
  background-color: rgba(196, 71, 65, 0.04);
}

[data-md-color-scheme="slate"] .md-typeset .admonition.note {
  background-color: rgba(45, 125, 77, 0.08);
}

[data-md-color-scheme="slate"] .md-typeset .admonition.tip {
  background-color: rgba(212, 165, 116, 0.08);
}

[data-md-color-scheme="slate"] .md-typeset .admonition.warning {
  background-color: rgba(232, 117, 58, 0.08);
}

[data-md-color-scheme="slate"] .md-typeset .admonition.danger {
  background-color: rgba(196, 71, 65, 0.08);
}

/* Tables - Clean, minimal */
.md-typeset table:not([class]) {
  border: 1px solid rgba(45, 125, 77, 0.15);
  border-radius: 4px;
  overflow: hidden;
}

.md-typeset table:not([class]) th {
  background-color: rgba(45, 125, 77, 0.08);
  color: var(--salamander-green-dark);
  font-weight: 600;
  border-bottom: 2px solid rgba(45, 125, 77, 0.2);
}

.md-typeset table:not([class]) tr:hover {
  background-color: rgba(45, 125, 77, 0.02);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
  border-color: rgba(45, 125, 77, 0.25);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background-color: rgba(45, 125, 77, 0.12);
  color: var(--salamander-green-light);
  border-bottom-color: rgba(45, 125, 77, 0.3);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:hover {
  background-color: rgba(45, 125, 77, 0.06);
}

/* Navigation - Clean styling */
.md-nav__link--active {
  color: var(--salamander-green) !important;
  font-weight: 600;
}

.md-nav__link:hover {
  color: var(--forge-orange) !important;
}

/* Links */
.md-typeset a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease;
}

.md-typeset a:hover {
  border-bottom-color: currentColor;
}

/* Search */
.md-search__input {
  border: 1px solid rgba(45, 125, 77, 0.2);
  border-radius: 4px;
}

.md-search__input:focus {
  border-color: var(--salamander-green);
}

/* Tags */
.md-tag {
  background-color: rgba(45, 125, 77, 0.1) !important;
  color: var(--salamander-green-dark) !important;
  border: 1px solid rgba(45, 125, 77, 0.2);
}

.md-tag:hover {
  background-color: rgba(45, 125, 77, 0.15) !important;
}

[data-md-color-scheme="slate"] .md-tag {
  background-color: rgba(45, 125, 77, 0.15) !important;
  color: var(--salamander-green-light) !important;
}

/* Custom Hero Section - Clean, subtle */
.hero-section {
  background: linear-gradient(135deg, 
    rgba(45, 125, 77, 0.05) 0%, 
    rgba(45, 125, 77, 0.08) 100%);
  padding: 3rem 2rem;
  text-align: center;
  border-radius: 6px;
  margin: 2rem 0;
  border-left: 4px solid var(--salamander-green);
}

[data-md-color-scheme="slate"] .hero-section {
  background: linear-gradient(135deg, 
    rgba(45, 125, 77, 0.08) 0%, 
    rgba(45, 125, 77, 0.12) 100%);
}

.hero-section h1 {
  color: var(--salamander-green) !important;
  border: none !important;
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

[data-md-color-scheme="slate"] .hero-section h1 {
  color: var(--salamander-green-light) !important;
}

.hero-section p {
  font-size: 1.1rem;
  color: var(--text-muted);
}

[data-md-color-scheme="slate"] .hero-section p {
  color: var(--forge-white);
  opacity: 0.8;
}

/* Feature Card Links - Entire card is clickable */
.feature-card-link {
  display: block;
  text-decoration: none !important;
  color: inherit !important;
  border-bottom: none !important;
  cursor: pointer;
}

.feature-card-link:hover {
  text-decoration: none !important;
  color: inherit !important;
  border-bottom: none !important;
}

.feature-card-link .feature-card {
  margin: 0;
}

.feature-card-link .feature-card h3,
.feature-card-link .feature-card p,
.feature-card-link .feature-card li {
  color: inherit;
}

[data-md-color-scheme="slate"] .feature-card-link .feature-card h3 {
  color: var(--salamander-green-light);
}

[data-md-color-scheme="slate"] .feature-card-link .feature-card p,
[data-md-color-scheme="slate"] .feature-card-link .feature-card li {
  color: var(--forge-white);
}

[data-md-color-scheme="mechanicum"] .feature-card-link .feature-card h3 {
  color: var(--mechanicum-bronze);
}

[data-md-color-scheme="mechanicum"] .feature-card-link .feature-card p,
[data-md-color-scheme="mechanicum"] .feature-card-link .feature-card li {
  color: var(--mechanicum-text);
}

/* Feature Cards - Clean, minimal */
.feature-card {
  border: 1px solid rgba(45, 125, 77, 0.15);
  border-radius: 6px;
  padding: 1.5rem;
  margin: 1rem 0;
  background-color: rgba(45, 125, 77, 0.02);
  transition: all 0.2s ease;
}

.feature-card:hover {
  border-color: var(--salamander-green);
  box-shadow: 0 2px 8px rgba(45, 125, 77, 0.1);
  transform: translateY(-2px);
  background-color: rgba(45, 125, 77, 0.04);
}

.feature-card h3 {
  color: var(--salamander-green-dark);
  margin-top: 0;
  font-weight: 600;
}

[data-md-color-scheme="slate"] .feature-card {
  border-color: rgba(45, 125, 77, 0.25);
  background-color: rgba(45, 125, 77, 0.05);
}

[data-md-color-scheme="slate"] .feature-card:hover {
  border-color: var(--salamander-green-light);
  box-shadow: 0 2px 8px rgba(45, 125, 77, 0.15);
  background-color: rgba(45, 125, 77, 0.08);
}

[data-md-color-scheme="slate"] .feature-card h3 {
  color: var(--salamander-green-light);
}

/* ============================================================================
 * MECHANICUM COMPONENT OVERRIDES
 * ============================================================================ */

/* Headers */
[data-md-color-scheme="mechanicum"] .md-typeset h1 {
  color: var(--mechanicum-red-light);
  border-bottom: 2px solid rgba(139, 26, 26, 0.4);
}

[data-md-color-scheme="mechanicum"] .md-typeset h2 {
  color: var(--mechanicum-bronze);
  border-left: 3px solid var(--mechanicum-red);
}

[data-md-color-scheme="mechanicum"] .md-typeset h3 {
  color: var(--mechanicum-bronze-light);
}

/* Buttons */
[data-md-color-scheme="mechanicum"] .md-button {
  background-color: var(--mechanicum-red) !important;
  border-color: var(--mechanicum-red) !important;
}

[data-md-color-scheme="mechanicum"] .md-button:hover {
  background-color: var(--mechanicum-red-dark) !important;
  box-shadow: 0 2px 8px rgba(139, 26, 26, 0.3);
}

[data-md-color-scheme="mechanicum"] .md-button--primary {
  background-color: var(--mechanicum-bronze) !important;
  border-color: var(--mechanicum-bronze) !important;
  color: #0E0A0F !important;
}

[data-md-color-scheme="mechanicum"] .md-button--primary:hover {
  background-color: var(--mechanicum-bronze-dark) !important;
  box-shadow: 0 2px 8px rgba(205, 127, 50, 0.3);
}

/* Code */
[data-md-color-scheme="mechanicum"] .md-typeset code {
  background-color: rgba(139, 26, 26, 0.12);
  color: var(--mechanicum-bronze-light);
  border: 1px solid rgba(139, 26, 26, 0.2);
}

[data-md-color-scheme="mechanicum"] .md-typeset pre {
  background-color: var(--mechanicum-card);
  border-color: rgba(139, 26, 26, 0.25);
}

/* Admonitions */
[data-md-color-scheme="mechanicum"] .md-typeset .admonition.note {
  border-left-color: var(--mechanicum-red);
  background-color: rgba(139, 26, 26, 0.08);
}

[data-md-color-scheme="mechanicum"] .md-typeset .admonition.tip {
  border-left-color: var(--mechanicum-bronze);
  background-color: rgba(205, 127, 50, 0.08);
}

[data-md-color-scheme="mechanicum"] .md-typeset .admonition.warning {
  border-left-color: var(--mechanicum-bronze-light);
  background-color: rgba(212, 149, 74, 0.08);
}

[data-md-color-scheme="mechanicum"] .md-typeset .admonition.danger {
  border-left-color: var(--mechanicum-red-light);
  background-color: rgba(184, 32, 32, 0.08);
}

/* Tables */
[data-md-color-scheme="mechanicum"] .md-typeset table:not([class]) {
  border-color: rgba(139, 26, 26, 0.25);
}

[data-md-color-scheme="mechanicum"] .md-typeset table:not([class]) th {
  background-color: rgba(139, 26, 26, 0.12);
  color: var(--mechanicum-bronze);
  border-bottom-color: rgba(139, 26, 26, 0.3);
}

[data-md-color-scheme="mechanicum"] .md-typeset table:not([class]) tr:hover {
  background-color: rgba(139, 26, 26, 0.06);
}

/* Navigation */
[data-md-color-scheme="mechanicum"] .md-nav__link--active {
  color: var(--mechanicum-red-light) !important;
}

[data-md-color-scheme="mechanicum"] .md-nav__link:hover {
  color: var(--mechanicum-bronze) !important;
}

/* Hero section */
[data-md-color-scheme="mechanicum"] .hero-section {
  background: linear-gradient(135deg,
    rgba(139, 26, 26, 0.08) 0%,
    rgba(139, 26, 26, 0.12) 100%);
  border-left-color: var(--mechanicum-red);
}

[data-md-color-scheme="mechanicum"] .hero-section h1 {
  color: var(--mechanicum-red-light) !important;
  border: none !important;
}

[data-md-color-scheme="mechanicum"] .hero-section p {
  color: var(--mechanicum-text);
  opacity: 0.8;
}

/* Feature cards */
[data-md-color-scheme="mechanicum"] .feature-card {
  border-color: rgba(139, 26, 26, 0.25);
  background-color: rgba(139, 26, 26, 0.05);
}

[data-md-color-scheme="mechanicum"] .feature-card:hover {
  border-color: var(--mechanicum-red-light);
  box-shadow: 0 2px 8px rgba(139, 26, 26, 0.15);
  background-color: rgba(139, 26, 26, 0.08);
}

[data-md-color-scheme="mechanicum"] .feature-card h3 {
  color: var(--mechanicum-bronze);
}

/* Quick links */
[data-md-color-scheme="mechanicum"] .quick-link {
  border-color: rgba(139, 26, 26, 0.25);
  background: rgba(139, 26, 26, 0.04);
}

[data-md-color-scheme="mechanicum"] .quick-link:hover {
  border-color: var(--mechanicum-red);
  background: rgba(139, 26, 26, 0.1);
  box-shadow: 0 4px 12px rgba(139, 26, 26, 0.1);
}

/* Command badges */
[data-md-color-scheme="mechanicum"] .command-badge {
  background-color: rgba(139, 26, 26, 0.15);
  color: var(--mechanicum-bronze-light);
  border-color: rgba(139, 26, 26, 0.3);
}

/* Forge panel */
[data-md-color-scheme="mechanicum"] .forge-panel {
  background-color: rgba(139, 26, 26, 0.08);
  border-color: rgba(139, 26, 26, 0.2);
}

/* Command example */
[data-md-color-scheme="mechanicum"] .command-example {
  background-color: rgba(139, 26, 26, 0.06);
  border-left-color: var(--mechanicum-red);
}

/* Divider */
[data-md-color-scheme="mechanicum"] .forge-divider {
  background: linear-gradient(to right,
    transparent,
    rgba(139, 26, 26, 0.4) 20%,
    rgba(139, 26, 26, 0.4) 80%,
    transparent
  );
}

/* Tags */
[data-md-color-scheme="mechanicum"] .md-tag {
  background-color: rgba(139, 26, 26, 0.15) !important;
  color: var(--mechanicum-bronze) !important;
  border-color: rgba(139, 26, 26, 0.3);
}

/* Permission badges */
[data-md-color-scheme="mechanicum"] .permission-badge {
  background-color: rgba(205, 127, 50, 0.12);
  color: var(--mechanicum-bronze);
  border-color: rgba(205, 127, 50, 0.3);
}

/* Version badge */
[data-md-color-scheme="mechanicum"] .version-badge {
  background-color: rgba(139, 26, 26, 0.15);
  color: var(--mechanicum-red-light);
  border-color: rgba(139, 26, 26, 0.3);
}

/* Search */
[data-md-color-scheme="mechanicum"] .md-search__input {
  border-color: rgba(139, 26, 26, 0.2);
}

[data-md-color-scheme="mechanicum"] .md-search__input:focus {
  border-color: var(--mechanicum-red);
}

/* Copy button */
[data-md-color-scheme="mechanicum"] .md-clipboard:hover {
  color: var(--mechanicum-red-light) !important;
}

/* Sidebar active */
[data-md-color-scheme="mechanicum"] .md-nav__item--active > .md-nav__link {
  color: var(--mechanicum-red-light) !important;
}

/* Breadcrumb */
[data-md-color-scheme="mechanicum"] .md-path a {
  color: var(--mechanicum-red-light) !important;
}

/* Mobile nav */
@media screen and (max-width: 76.1875em) {
  [data-md-color-scheme="mechanicum"] .md-nav--primary .md-nav__title {
    background-color: var(--mechanicum-red-dark);
    color: var(--mechanicum-text);
  }
}

/* Header bar */
[data-md-color-scheme="mechanicum"] .md-header {
  background-color: var(--mechanicum-red-dark) !important;
}

/* Tabs bar */
[data-md-color-scheme="mechanicum"] .md-tabs {
  background-color: var(--mechanicum-red-dark) !important;
}

/* Sidebar */
[data-md-color-scheme="mechanicum"] .md-sidebar {
  background-color: var(--mechanicum-bg);
}

/* Nav items */
[data-md-color-scheme="mechanicum"] .md-nav__link {
  color: var(--mechanicum-text);
}

/* Footer */
[data-md-color-scheme="mechanicum"] .md-footer {
  background-color: var(--mechanicum-card);
}

/* Content area */
[data-md-color-scheme="mechanicum"] .md-main {
  background-color: var(--mechanicum-bg);
}

/* Scrollbar styling */
[data-md-color-scheme="mechanicum"] ::-webkit-scrollbar-track {
  background: var(--mechanicum-bg);
}

[data-md-color-scheme="mechanicum"] ::-webkit-scrollbar-thumb {
  background: var(--mechanicum-red-dark);
  border-radius: 3px;
}

[data-md-color-scheme="mechanicum"] ::-webkit-scrollbar-thumb:hover {
  background: var(--mechanicum-red);
}

/* Feature Grid */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

/* Command badges - Clean, readable */
.command-badge {
  display: inline-block;
  background-color: rgba(45, 125, 77, 0.1);
  color: var(--salamander-green-dark);
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  border: 1px solid rgba(45, 125, 77, 0.2);
  font-family: 'Roboto Mono', monospace;
  font-size: 0.85rem;
  margin: 0.2rem;
  font-weight: 500;
}

[data-md-color-scheme="slate"] .command-badge {
  background-color: rgba(45, 125, 77, 0.15);
  color: var(--salamander-green-light);
  border-color: rgba(45, 125, 77, 0.3);
}

.command-badge.economy {
  background-color: rgba(212, 165, 116, 0.1);
  color: var(--auric-gold-dark);
  border-color: rgba(212, 165, 116, 0.3);
}

.command-badge.moderation {
  background-color: rgba(232, 117, 58, 0.1);
  color: var(--forge-orange-dark);
  border-color: rgba(232, 117, 58, 0.3);
}

.command-badge.admin {
  background-color: rgba(196, 71, 65, 0.1);
  color: var(--blood-red-dark);
  border-color: rgba(196, 71, 65, 0.3);
}

.command-badge.error {
  background-color: rgba(196, 71, 65, 0.1);
  color: var(--blood-red);
  border-color: rgba(196, 71, 65, 0.3);
}

/* Command Example Block */
.command-example {
  background-color: rgba(45, 125, 77, 0.03);
  border-left: 3px solid var(--salamander-green);
  padding: 1rem 1.5rem;
  margin: 1rem 0;
  border-radius: 0 4px 4px 0;
}

[data-md-color-scheme="slate"] .command-example {
  background-color: rgba(45, 125, 77, 0.06);
}

/* Info Panel */
.forge-panel {
  background-color: rgba(45, 125, 77, 0.04);
  border: 1px solid rgba(45, 125, 77, 0.15);
  border-radius: 6px;
  padding: 1.5rem;
  margin: 1.5rem 0;
}

[data-md-color-scheme="slate"] .forge-panel {
  background-color: rgba(45, 125, 77, 0.08);
  border-color: rgba(45, 125, 77, 0.2);
}

/* Status indicators */
.status-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.5rem;
}

.status-indicator.online {
  background-color: var(--salamander-green);
}

.status-indicator.warning {
  background-color: var(--forge-orange);
}

.status-indicator.error {
  background-color: var(--blood-red);
}

/* Dividers - Simple, clean */
.forge-divider {
  height: 1px;
  background: linear-gradient(to right, 
    transparent,
    rgba(62, 125, 84, 0.3) 20%,
    rgba(62, 125, 84, 0.3) 80%,
    transparent
  );
  border: none;
  margin: 2rem 0;
}

/* ============================================================================
 * PERMISSION & VERSION BADGES (popular bot-docs pattern)
 * ============================================================================ */

.permission-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background-color: rgba(212, 175, 55, 0.1);
  color: var(--auric-gold-dark);
  padding: 0.15rem 0.55rem;
  border-radius: 3px;
  border: 1px solid rgba(212, 175, 55, 0.25);
  font-size: 0.8rem;
  font-weight: 500;
  vertical-align: middle;
}

[data-md-color-scheme="slate"] .permission-badge {
  background-color: rgba(212, 175, 55, 0.12);
  color: var(--auric-gold);
  border-color: rgba(212, 175, 55, 0.3);
}

.permission-badge.admin {
  background-color: rgba(196, 71, 65, 0.1);
  color: var(--blood-red);
  border-color: rgba(196, 71, 65, 0.25);
}

.permission-badge.mod {
  background-color: rgba(224, 90, 43, 0.1);
  color: var(--forge-orange);
  border-color: rgba(224, 90, 43, 0.25);
}

.version-badge {
  display: inline-block;
  background-color: rgba(62, 125, 84, 0.1);
  color: var(--salamander-green);
  padding: 0.1rem 0.5rem;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid rgba(62, 125, 84, 0.2);
  vertical-align: middle;
  margin-left: 0.5rem;
}

[data-md-color-scheme="slate"] .version-badge {
  background-color: rgba(62, 125, 84, 0.15);
  color: var(--salamander-green-light);
}

/* ============================================================================
 * QUICK-LINKS GRID (landing page cards)
 * ============================================================================ */

.quick-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}

@media screen and (max-width: 960px) {
  .quick-links {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 600px) {
  .quick-links {
    grid-template-columns: 1fr;
  }
}

.quick-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(62, 125, 84, 0.15);
  border-radius: 6px;
  background: rgba(62, 125, 84, 0.02);
  text-decoration: none !important;
  color: inherit !important;
  transition: all 0.2s ease;
  min-width: 0;
}

.quick-link:hover {
  border-color: var(--salamander-green);
  background: rgba(62, 125, 84, 0.06);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(62, 125, 84, 0.1);
}

[data-md-color-scheme="slate"] .quick-link {
  border-color: rgba(62, 125, 84, 0.25);
  background: rgba(62, 125, 84, 0.04);
}

[data-md-color-scheme="slate"] .quick-link:hover {
  background: rgba(62, 125, 84, 0.1);
}

.quick-link .ql-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  line-height: 1;
  width: 1.8rem;
  text-align: center;
}

.quick-link .ql-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.quick-link .ql-label {
  font-weight: 600;
  font-size: 0.95rem;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quick-link .ql-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: block;
  margin-top: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================================
 * COMMAND PARAMETER TABLE (popular bot-docs pattern)
 * ============================================================================ */

.param-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.param-table th {
  text-align: left;
  padding: 0.6rem 0.75rem;
  background-color: rgba(62, 125, 84, 0.08);
  border-bottom: 2px solid rgba(62, 125, 84, 0.2);
  font-weight: 600;
  color: var(--salamander-green);
}

.param-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(62, 125, 84, 0.08);
}

.param-table .required {
  color: var(--blood-red);
  font-weight: 600;
  font-size: 0.75rem;
}

.param-table .optional {
  color: var(--text-muted);
  font-size: 0.75rem;
}

@media screen and (max-width: 1100px) {
  .quick-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .quick-link {
    padding: 0.8rem 0.85rem;
  }

  .param-table {
    font-size: 0.82rem;
  }

  .param-table th,
  .param-table td {
    padding: 0.45rem 0.55rem;
  }
}

@media screen and (max-width: 760px) {
  .quick-links {
    grid-template-columns: 1fr;
  }

  .quick-link {
    gap: 0.55rem;
  }

  .quick-link .ql-icon {
    width: 1.4rem;
    font-size: 1.2rem;
  }

  .quick-link .ql-label {
    font-size: 0.86rem;
  }

  .quick-link .ql-desc {
    font-size: 0.74rem;
  }

  .param-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .md-typeset .feature-grid,
  .feature-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

/* ============================================================================
 * RESPONSIVE IMPROVEMENTS
 * ============================================================================ */

/* Compact navigation on mobile */
@media screen and (max-width: 76.1875em) {
  .md-nav--primary .md-nav__title {
    background-color: var(--salamander-green-dark);
    color: var(--forge-white);
  }
}

/* Better content width on large screens */
@media screen and (min-width: 100em) {
  .md-grid {
    max-width: 75rem;
  }
}

/* Feature grid stacks on mobile */
@media screen and (max-width: 600px) {
  .feature-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .hero-section {
    padding: 2rem 1rem;
  }
  
  .hero-section h1 {
    font-size: 1.8rem !important;
  }
}

/* ============================================================================
 * SIDEBAR ENHANCEMENTS
 * ============================================================================ */

/* Active section highlighting */
.md-nav__item--active > .md-nav__link {
  color: var(--salamander-green) !important;
  font-weight: 600;
}

/* Section labels */
.md-nav__item--section > .md-nav__link {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--text-muted) !important;
}

/* Nested navigation indent */
.md-nav--secondary .md-nav__link {
  font-size: 0.85rem;
}

/* ============================================================================
 * BREADCRUMB PATH STYLING
 * ============================================================================ */

.md-path {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.md-path a {
  color: var(--salamander-green) !important;
}

/* ============================================================================
 * COPY BUTTON POLISH
 * ============================================================================ */

.md-clipboard {
  color: var(--text-muted) !important;
}

.md-clipboard:hover {
  color: var(--salamander-green) !important;
}

/* ============================================================================
 * PRINT OVERRIDES
 * ============================================================================ */

@media print {
  .hero-section {
    background: none !important;
    border: 1px solid #ccc;
  }
  
  .feature-card {
    break-inside: avoid;
    border: 1px solid #ddd;
    box-shadow: none !important;
  }
}