/**
 * Custom styling for ARD Documentation
 * Matches the dark theme from the main application
 */

:root {
  /* ARD Brand Colors - matching ard-vue-frontend/src/assets/main.css */
  --md-primary-fg-color: hsl(263.4, 70%, 50.4%);
  --md-primary-fg-color--light: hsl(263.4, 70%, 60%);
  --md-primary-fg-color--dark: hsl(263.4, 70%, 40%);
  --md-primary-bg-color: hsl(210, 20%, 98%);

  /* Accent colors */
  --md-accent-fg-color: hsl(263.4, 70%, 50.4%);
  --md-accent-fg-color--transparent: hsla(263.4, 70%, 50.4%, 0.1);

  /* Background colors - dark theme */
  --md-default-bg-color: hsl(224, 71.4%, 4.1%);
  --md-default-fg-color: hsl(210, 20%, 98%);
  --md-default-fg-color--light: hsl(217.9, 10.6%, 64.9%);
  --md-default-fg-color--lighter: hsl(217.9, 10.6%, 74.9%);
  --md-default-fg-color--lightest: hsl(217.9, 10.6%, 84.9%);

  /* Code block colors */
  --md-code-bg-color: hsl(215, 27.9%, 16.9%);
  --md-code-fg-color: hsl(210, 20%, 98%);

  /* Footer and header */
  --md-footer-bg-color: hsl(224, 71.4%, 4.1%);
  --md-footer-bg-color--dark: hsl(224, 71.4%, 2%);
}

/* Dark theme adjustments */
[data-md-color-scheme="slate"] {
  --md-hue: 263.4;

  /* Override Material dark theme with ARD colors */
  --md-default-bg-color: hsl(224, 71.4%, 4.1%);
  --md-default-fg-color: hsl(210, 20%, 98%);

  --md-typeset-a-color: hsl(263.4, 70%, 60%);
}

/* Custom scrollbar to match app */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(155, 155, 155, 0.5);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(155, 155, 155, 0.7);
}

/* Admonitions styling */
.md-typeset .admonition,
.md-typeset details {
  border-left: 4px solid hsl(263.4, 70%, 50.4%);
}

/* Code blocks */
.md-typeset code {
  background-color: hsl(215, 27.9%, 16.9%);
  color: hsl(210, 20%, 98%);
}

/* Tables */
.md-typeset table:not([class]) {
  border: 1px solid hsl(215, 27.9%, 16.9%);
}

.md-typeset table:not([class]) th {
  background-color: hsl(215, 27.9%, 16.9%);
  color: hsl(210, 20%, 98%);
}

/* Navigation tabs */
.md-tabs {
  background-color: hsl(224, 71.4%, 4.1%);
}

/* Search */
.md-search__input {
  background-color: hsl(215, 27.9%, 16.9%);
}

.md-search__input::placeholder {
  color: hsl(217.9, 10.6%, 64.9%);
}

/* Links */
.md-typeset a {
  color: hsl(263.4, 70%, 60%);
}

.md-typeset a:hover {
  color: hsl(263.4, 70%, 70%);
}

/* Header */
.md-header {
  background-color: hsl(224, 71.4%, 4.1%);
}

/* Sidebar */
.md-sidebar {
  background-color: hsl(224, 71.4%, 4.1%);
}

/* Footer */
.md-footer {
  background-color: hsl(224, 71.4%, 4.1%);
}

.md-footer-meta {
  background-color: hsl(224, 71.4%, 2%);
}

/* Buttons */
.md-button {
  color: hsl(210, 20%, 98%);
  background-color: hsl(263.4, 70%, 50.4%);
}

.md-button:hover {
  background-color: hsl(263.4, 70%, 60%);
}

.md-button--primary {
  background-color: hsl(263.4, 70%, 50.4%);
  border-color: hsl(263.4, 70%, 50.4%);
}

.md-button--primary:hover {
  background-color: hsl(263.4, 70%, 60%);
  border-color: hsl(263.4, 70%, 60%);
}

/* Tooltips matching app style */
.md-tooltip {
  background-color: hsl(263.4, 70%, 50.4%);
  color: hsl(210, 20%, 98%);
}

/* Navigation items */
.md-nav__link--active {
  color: hsl(263.4, 70%, 60%);
}

.md-nav__link:hover {
  color: hsl(263.4, 70%, 60%);
}

/* Top navigation tabs */
.md-tabs__link--active,
.md-tabs__link:hover {
  color: hsl(263.4, 70%, 60%);
}

/* Copy button for code blocks */
.md-clipboard {
  color: hsl(210, 20%, 98%);
}

.md-clipboard:hover {
  color: hsl(263.4, 70%, 60%);
}

/* Typst Math Rendering Styles */
.typst-math > svg {
    overflow: visible;
    vertical-align: middle;
}
div.typst-math {
    display: flex;
    justify-content: center;
}

/*
    https://v3.tailwindcss.com/docs/screen-readers
    will interrupt the selection, thus unusable
*/
.sr-only {
    position: absolute;
    left: -9999px;
}