/*
 * NOTE: Colors should match the shared theme in packages/theme/theme.css
 * MkDocs cannot import npm packages, so this file must be updated manually.
 * If you update colors here, also update: packages/theme/theme.css
 *
 * Background: #152836
 */

/* Hide header theme toggle and sidebar toggle controls. */
button[aria-label="Toggle theme"],
button[title="Toggle theme"],
button[aria-label="Toggle color scheme"],
button[title="Toggle color scheme"],
button[aria-label="Toggle layout"],
button[title="Toggle layout"],
header .theme-toggle,
header .theme-switch {
  display: none !important;
}

button[aria-label="Toggle sidebar"],
button[aria-label="Open sidebar"],
button[aria-label="Toggle navigation"],
button[aria-label="Open navigation"],
button[aria-label="Toggle menu"],
button[title="Toggle navigation"],
header .sidebar-toggle,
header .nav-toggle {
  display: none !important;
}

/* Hide header divider bars. */
header .bg-border {
  display: none !important;
}

header [data-orientation="vertical"],
header [role="separator"] {
  display: none !important;
}

/* Box in the main content area. */
header {
  border-bottom: 1px solid var(--border) !important;
}

/* Left nav column divider (single line). */
.group\/sidebar-wrapper [class*="no-scrollbar"][class*="flex-col"][class*="min-w-0"] {
  border-right: 1px solid var(--border) !important;
}

/* Remove right-side divider. */
main [class*="top-[calc(var(--header-height)+1px)]"][class*="w-72"] {
  border-left: none !important;
}

/* Continuous left divider from header to footer. */
.group\/sidebar-wrapper {
  background-image: linear-gradient(var(--border), var(--border));
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position: var(--sidebar-width) 0;
}

/* Align docs palette with marketing site. */
:root {
  --background: 205 44% 15%;
  --foreground: 60 15% 98%;
  --card: 204 46% 12%;
  --card-foreground: 210 40% 98%;
  --popover: 205 44% 15%;
  --popover-foreground: 210 40% 98%;
  --primary: 41 100% 62%;
  --primary-foreground: 206 43% 15%;
  --secondary: 217 33% 17%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217 33% 17%;
  --muted-foreground: 226 25% 77%;
  --accent: 210 39% 7%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 63% 31%;
  --destructive-foreground: 210 40% 98%;
  --border: 210 39% 7%;
  --input: 210 39% 7%;
  --ring: 213 27% 84%;
  --radius: 0.5rem;
  --surface: 205 44% 15%;
  --surface-foreground: 210 40% 98%;
  --selection: 210 40% 98%;
  --selection-foreground: 206 43% 15%;
  --code: 210 39% 7%;
  --code-foreground: 210 40% 98%;
  --code-highlight: 210 39% 10%;
  --code-number: 226 25% 77%;
  --warning: 41 100% 62%;
  --warning-foreground: 206 43% 15%;
  --sidebar: 205 44% 15%;
  --sidebar-foreground: 210 40% 98%;
  --sidebar-accent: 210 39% 7%;
  --sidebar-accent-foreground: 210 40% 98%;
  --sidebar-border: 210 39% 7%;
  --sidebar-ring: 213 27% 84%;
  --sidebar-primary: 41 100% 62%;
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-surface: hsl(var(--surface));
  --color-code: hsl(var(--code));
  --color-code-foreground: hsl(var(--code-foreground));
  --color-code-highlight: hsl(var(--code-highlight));
  --color-code-number: hsl(var(--code-number));
  --color-warning: hsl(var(--warning));
  --color-sidebar: hsl(var(--sidebar));
  --color-sidebar-accent: hsl(var(--sidebar-accent));
  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
  --color-sidebar-ring: hsl(var(--sidebar-ring));
  --color-selection: hsl(var(--selection));
}

/* Code block cards (docs + fenced blocks). */
main pre,
main .highlight,
main table.highlighttable {
  margin: 1.25rem 0;
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  background: hsl(var(--code));
  overflow: hidden;
  box-shadow: 0 12px 30px -24px rgb(0 0 0 / 0.6);
}

main pre {
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
  line-height: 1.6;
}

main pre code {
  display: block;
}

main .highlight pre,
main table.highlighttable pre {
  margin: 0;
  padding: 1rem 1.25rem;
  background: transparent;
}

main table.highlighttable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

main table.highlighttable td {
  padding: 0;
  vertical-align: top;
}

main table.highlighttable td.linenos,
main table.highlighttable .linenodiv {
  background: hsl(var(--code-highlight));
  color: hsl(var(--code-number));
}

main table.highlighttable td.linenos {
  border-right: 1px solid hsl(var(--border));
}

/* JSON syntax colors aligned to marketing hero preview. */
.highlight .nt,
.highlight .na {
  color: #7dd3fc;
}

.highlight .s,
.highlight .s1,
.highlight .s2,
.highlight .sa,
.highlight .sb,
.highlight .sc,
.highlight .sd,
.highlight .se,
.highlight .sh,
.highlight .si,
.highlight .sx {
  color: #c4b5fd;
}

.highlight .mi,
.highlight .mf,
.highlight .mh,
.highlight .il,
.highlight .mo,
.highlight .mb,
.highlight .mx {
  color: #a5b4fc;
}

.highlight .kc,
.highlight .kd,
.highlight .kn,
.highlight .kp,
.highlight .kr,
.highlight .kt,
.highlight .nb,
.highlight .bp,
.highlight .no {
  color: #f9a8d4;
}

/* Force dark color scheme. */
html,
body {
  color-scheme: dark;
}

/* Add dark class to enable dark mode styles */
html {
  color: hsl(var(--foreground));
  background: hsl(var(--background));
}

/* Force text visibility in article content */
article,
article p,
article li,
article td,
article th,
article strong {
  color: hsl(var(--foreground));
}

header {
  border-bottom: 1px solid var(--color-border) !important;
}

header [data-slot="dialog-trigger"] {
  background-color: hsl(var(--input));
  color: hsl(var(--foreground));
}

header a[data-slot="button"][href="http://127.0.0.1:8000/"],
header a[data-slot="button"][href="/"],
header a[data-slot="button"][href] h1 {
  background-color: transparent !important;
  color: inherit !important;
}

header a[data-slot="button"][href="http://127.0.0.1:8000/"]:hover,
header a[data-slot="button"][href="/"]:hover,
header a[data-slot="button"][href="http://127.0.0.1:8000/"]:focus-visible,
header a[data-slot="button"][href="/"]:focus-visible {
  background-color: transparent !important;
  color: inherit !important;
}

[data-page-actions-menu] [role="menuitem"] {
  color: hsl(var(--foreground));
}

[data-page-actions-menu] a[role="menuitem"] {
  text-decoration: none;
}

[data-page-actions-menu] [role="menuitem"]:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

[data-page-actions-menu] [role="menuitem"]:hover .lucide-arrow-up-right {
  color: hsl(var(--accent-foreground));
}

/* Remove header permalink paragraph markers. */
.headerlink,
a.headerlink {
  display: none !important;
}

/* Footer text */
footer,
[role="contentinfo"] {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
}

footer > *,
[role="contentinfo"] > * {
  display: none !important;
}

footer::before,
[role="contentinfo"]::before {
  content: "© Chickadee Software 2026";
  color: var(--muted-foreground);
  font-size: 0.875rem;
}

/* Page actions trigger: outlined (shadcn outline variant) */
button.page-actions-trigger-btn {
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

button.page-actions-trigger-btn:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.page-actions-toast {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  background: var(--popover);
  color: var(--popover-foreground);
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.2),
    0 4px 6px -4px rgb(0 0 0 / 0.2);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
  z-index: 60;
}

.page-actions-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Cap layout at 1280px for xl and above */
@media (min-width: 1280px) {
  .group\/sidebar-wrapper,
  .container-wrapper {
    max-width: 1280px;
  }
}

/* Admonition blocks use card color */
article .admonition,
article .admonition.note,
article .admonition.info,
article .admonition.tip,
article .admonition.warning,
article .admonition.danger,
.md-typeset .admonition,
.md-typeset details {
  background-color: hsl(var(--card)) !important;
  border-color: hsl(var(--border)) !important;
  border-left-color: hsl(var(--primary)) !important;
}

article .admonition > p.admonition-title,
.md-typeset .admonition-title,
.md-typeset details summary {
  background-color: hsl(var(--card)) !important;
}