/* Configly Documentation - Custom Theme
   Matches the Configly app: dark mode, cyan accent (#06b6d4), DM Sans font
   ========================================================================= */

/* Import DM Sans */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');

/* Font override */
:root {
  --md-text-font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --md-code-font: "JetBrains Mono", "Fira Code", monospace;
}

/* ── Slate (dark mode) palette overrides ── */
[data-md-color-scheme="slate"] {
  /* Background - match app's #09090b */
  --md-default-bg-color: #0a0a0c;
  --md-default-bg-color--light: #111114;
  --md-default-bg-color--lighter: #18181b;
  --md-default-bg-color--lightest: #27272a;

  /* Text */
  --md-default-fg-color: #fafafa;
  --md-default-fg-color--light: #a1a1aa;
  --md-default-fg-color--lighter: #71717a;
  --md-default-fg-color--lightest: #52525b;

  /* Primary - cyan accent */
  --md-primary-fg-color: #06b6d4;
  --md-primary-fg-color--light: #22d3ee;
  --md-primary-fg-color--dark: #0891b2;
  --md-primary-bg-color: #fafafa;

  /* Accent */
  --md-accent-fg-color: #22d3ee;
  --md-accent-fg-color--transparent: rgba(6, 182, 212, 0.1);
  --md-accent-bg-color: #fafafa;

  /* Code blocks */
  --md-code-bg-color: #111114;
  --md-code-fg-color: #e4e4e7;
  --md-code-hl-color: rgba(6, 182, 212, 0.15);

  /* Typeset */
  --md-typeset-color: #fafafa;
  --md-typeset-a-color: #06b6d4;

  /* Footer */
  --md-footer-bg-color: #09090b;
  --md-footer-bg-color--dark: #050506;
  --md-footer-fg-color: #a1a1aa;
  --md-footer-fg-color--light: #71717a;
  --md-footer-fg-color--lighter: #52525b;
}

/* ── Header bar ── */
.md-header {
  background-color: #09090b;
  border-bottom: 1px solid #27272a;
}

/* ── Navigation sidebar ── */
.md-sidebar {
  background-color: #0a0a0c;
}

.md-nav__link:hover,
.md-nav__link:focus {
  color: #06b6d4;
}

.md-nav__link--active {
  color: #06b6d4 !important;
  font-weight: 700;
}

/* ── Admonitions (info boxes) ── */
.md-typeset .admonition,
.md-typeset details {
  border-color: #27272a;
  background-color: #111114;
}

.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: #06b6d4;
}

.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: #f59e0b;
}

/* ── Tables ── */
.md-typeset table:not([class]) {
  background-color: #111114;
  border: 1px solid #27272a;
}

.md-typeset table:not([class]) th {
  background-color: #18181b;
  color: #06b6d4;
  font-weight: 700;
}

.md-typeset table:not([class]) td {
  border-color: #27272a;
}

.md-typeset table:not([class]) tr:hover td {
  background-color: rgba(6, 182, 212, 0.05);
}

/* ── Code blocks ── */
.md-typeset code {
  background-color: #18181b;
  color: #22d3ee;
  border-radius: 4px;
  padding: 0.1em 0.4em;
}

.md-typeset pre > code {
  background-color: #111114;
  color: #e4e4e7;
}

.highlight .hll {
  background-color: rgba(6, 182, 212, 0.1);
}

/* ── Search ── */
.md-search__input {
  background-color: #18181b;
  color: #fafafa;
}

.md-search__input::placeholder {
  color: #71717a;
}

/* ── Content cards (Quick Links style) ── */
.md-typeset .grid .card {
  background-color: #111114;
  border: 1px solid #27272a;
  border-radius: 8px;
  transition: border-color 0.2s;
}

.md-typeset .grid .card:hover {
  border-color: #06b6d4;
}

/* ── Keyboard keys ── */
.md-typeset .keys kbd {
  background-color: #18181b;
  border-color: #3f3f46;
  color: #fafafa;
  box-shadow: 0 1px 0 #27272a;
}

/* ── Logo text in header ── */
.md-header__topic {
  font-weight: 700;
  letter-spacing: -0.5px;
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #09090b;
}

::-webkit-scrollbar-thumb {
  background: #27272a;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #3f3f46;
}

/* ── Selection ── */
::selection {
  background-color: rgba(6, 182, 212, 0.3);
  color: #fafafa;
}

/* ── Tabs ── */
.md-typeset .tabbed-labels > label {
  color: #a1a1aa;
}

.md-typeset .tabbed-labels > label--active,
.md-typeset .tabbed-labels > label:hover {
  color: #06b6d4;
}

/* ── Status badges ── */
.md-typeset .md-tag {
  background-color: #18181b;
  color: #06b6d4;
  border: 1px solid #27272a;
}