@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&display=swap');

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Improved text readability */
p {
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Better heading spacing */
h1, h2, h3, h4, h5, h6 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.3;
}

h1:first-child,
h2:first-child,
h3:first-child {
    margin-top: 0;
}

/* Link styling */
a {
    transition: all 0.2s ease;
}

/* Better list spacing */
ul, ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

li {
    margin-bottom: 0.5rem;
}

/* Blockquote styling */
blockquote {
    border-left: 4px solid var(--mantine-color-blue-5);
    padding-left: 1rem;
    margin-left: 0;
    margin-right: 0;
    font-style: italic;
    color: var(--mantine-color-dimmed);
}

input:invalid {
    outline: none !important;
}

#wrapper {
    padding: 10px;
    margin-left: 320px;
    margin-right: 320px;
}

:root[data-mantine-color-scheme="dark"] #dark-theme-icon {
    display: none;
}

:root[data-mantine-color-scheme="light"] #light-theme-icon {
    display: none;
}

.demo-container {
    display: flex;
    max-width: 100%;
    overflow: hidden;
}

.demo-preview {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    justify-content: center;
}

.demo-controls {
    width: 250px;
    padding: 20px;
    gap: 10px;
}

.demo-control {
    margin: 10px;
}

@media only screen and (max-width: 750px) {
    .demo-container {
        flex-direction: column;
    }

    .demo-controls {
        width: 100%;
    }
}

.dmc-bar {
    background-image: linear-gradient(to right, yellow, orange);
}

.dmc-thumb {
    border-color: orange;
    height: 20px;
    width: 20px;
    background-color: white;
}

.mantine-Table-th {
    font-size: 15px;
    font-weight: 500;
}

.dmc-indicator {
  width: 12px;
  height: 4px;
  transition: width 250ms ease;

  &[data-active] {
    width: 40px;
  }
}

.dmc-control {
  &[data-inactive] {
    opacity: 0;
    cursor: default;
  }
}

.dmc-controls {
  transition: opacity 150ms ease;
  opacity: 0;
}

.dmc-root {
  &:hover {
    .dmc-controls {
      opacity: 1;
    }
  }
}



.dmc-slider-track {
  &::before {
    background-color: light-dark(var(--mantine-color-blue-1), var(--mantine-color-dark-3));
  }
}

.dmc-slider-mark {
  width: 6px;
  height: 6px;
  border-radius: 6px;
  transform: translateX(-3px) translateY(-2px);
  border-color: light-dark(var(--mantine-color-blue-1), var(--mantine-color-dark-3));

  &[data-filled] {
    border-color: var(--mantine-color-blue-6);
  }
}

.dmc-slider-markLabel {
  font-size: var(--mantine-font-size-sm);
  color: var(--mantine-color-green-5);
  margin-bottom: 5px;
  margin-top: 0;
}

.dmc-slider-thumb {
  height: 16px;
  width: 16px;
  background-color: var(--mantine-color-green-5);
  border-width: 1px;
  box-shadow: var(--mantine-shadow-lg);
}

.navbar-link {
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    transition: background 0.1s;
    color: inherit;
    display: inline-flex;
    gap: 0.5rem;

    &:hover {
        text-decoration: none;
        background: color-mix(in srgb, var(--mantine-color-gray-5), transparent 90%);
    }
}

/* Wide markdown tables scroll in their own box instead of dragging the
   whole page sideways on phones (a fork measured 105px of horizontal drag
   at 414px from one prop table). This is GitHub's markdown recipe:
   content-width, capped at the container, scrollable past it — a no-op for
   tables that already fit. Element+class selector so it outranks Mantine's
   own width rule regardless of stylesheet load order. markdown2dash stamps
   m2d-table on every table it renders, including kwargs prop tables. */
table.m2d-table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
}

/* Code blocks scroll inside their own box, wherever they sit (item 11,
   ported from the template's 1.6.39). CodeHighlight's <pre> already
   scrolls, but a flex parent with the default min-width:auto — Mantine's
   List item wrapper, a Blockquote, a Stack — refuses to shrink below the
   code's intrinsic width and drags the whole document wide. Public
   Mantine class names only — never the hashed .m_* internals. */
.mantine-List-itemWrapper,
.mantine-List-itemLabel,
.mantine-List-item,
.mantine-Blockquote-root,
.mantine-Timeline-itemBody,
.mantine-CodeHighlight-root,
.mantine-CodeHighlightTabs-root {
    min-width: 0;
    max-width: 100%;
}
.mantine-List-itemWrapper {
    width: 100%;
}
.mantine-List-itemLabel {
    flex: 1 1 auto;
}
/* Timeline bullets (/changelog): a Text in a no-wrap Group grows to its
   longest unbreakable token and leaves its card. */
.mantine-Timeline-root .mantine-Text-root,
.mantine-Timeline-root .mantine-Code-root {
    min-width: 0;
    overflow-wrap: anywhere;
}
code.m2d-codespan,
.mantine-Code-root:not(.mantine-CodeHighlight-code) {
    overflow-wrap: anywhere;
    white-space: normal;
}
.mantine-CodeHighlight-root pre,
.mantine-CodeHighlightTabs-root pre,
.mantine-AppShell-main pre {
    overflow-x: auto;
    max-width: 100%;
}

/* Skip link (item 16, ported from the template's 1.6.41): the first tab
   stop, off-screen until keyboard focus, then pinned top-left above the
   header. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    background: var(--mantine-primary-color-filled);
    color: var(--mantine-color-white);
    padding: 8px 14px;
    border-radius: 0 0 8px 0;
    font-weight: 600;
    text-decoration: none;
}
.skip-link:focus {
    left: 0;
}

/* NEVER style Mantine's hashed .m_* classes — they are private internals,
   version-coupled by construction. A rule that stops matching after a bump
   fails silently; one that starts matching applies geometry to the wrong
   component. Four fossils from the fork era lived here until the gate-wave
   pass (.m_b8a05bbd pinning the old floating drawer at 63vh — the exact
   class that left emojimart's drawer stuck, .m_46b77525 !important margin
   on every Input wrapper, .m_5caae85b dead in DMC 2.7 and 2.8, .m_9cdde9a
   restating Mantine's own aside declarations). tests/test_css_hygiene.py
   now fails on any hashed selector; use the static
   mantine-<Component>-<part> classes like the rule below. */

/* Rank the AppShell sections: the aside under the header, always.
   The Clerk avatar dropdown renders INSIDE the header, so no z-index on the
   menu itself (it ships with 10000 inline) can lift it above anything that
   outranks the header's own stacking context — and Mantine gives the aside
   calc(shell + 1), later in the DOM, so the open menu painted underneath
   the Table of Contents.

   Overriding --app-shell-aside-z-index on the shell root does NOT work:
   Mantine stamps that variable INLINE on the <aside> element itself, and an
   element's own inline declaration beats anything inherited. The inline
   style only carries the variable though — the z-index PROPERTY comes from
   the stylesheet — so overriding the property on the section wins. Static
   selector per the DMC Styles API guidance (never the hashed m_* classes).
   10 keeps the aside above page content and below every piece of chrome. */
aside.mantine-AppShell-aside {
    z-index: 10 !important;
    /* Rescued from the retired .m_9cdde9a fossil: the one intentful pixel
       in that copied block was this breathing gap between the header line
       and the top of the TOC. */
    margin-top: 15px;
}

:root[data-mantine-color-scheme="dark"] {
    --mantine-color-anchor: #74c0fc !important;
    --mantine-color-dark-light: rgba(63, 63, 70, 0.15);
    --mantine-color-dark-light-hover: rgba(63, 63, 70, 0.2);
    --mantine-color-dark-outline-hover: rgba(113, 113, 122, 0.05);
}

img[alt=logo] { width: 100%; }

/* Theme-aware code blocks */
:root[data-mantine-color-scheme="light"] pre,
:root[data-mantine-color-scheme="light"] code {
    background-color: #f8f9fa;
    color: #1a1b1e;
}

:root[data-mantine-color-scheme="dark"] pre,
:root[data-mantine-color-scheme="dark"] code {
    background-color: #1a1b1e;
    color: #c1c2c5;
}

/* Inline code */
:root[data-mantine-color-scheme="light"] code {
    background-color: #f1f3f5;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

:root[data-mantine-color-scheme="dark"] code {
    background-color: #25262b;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

/* Code blocks */
:root[data-mantine-color-scheme="light"] pre {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 16px;
    overflow-x: auto;
}

:root[data-mantine-color-scheme="dark"] pre {
    background-color: #1a1b1e;
    border: 1px solid #373a40;
    border-radius: 8px;
    padding: 16px;
    overflow-x: auto;
}

/* Code inside pre blocks */
:root[data-mantine-color-scheme="light"] pre code {
    background-color: transparent;
    padding: 0;
    color: #1a1b1e;
}

:root[data-mantine-color-scheme="dark"] pre code {
    background-color: transparent;
    padding: 0;
    color: #c1c2c5;
}

/* Sun icon rotation animations - direction based on scroll */
@keyframes rotate-sun-clockwise {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes rotate-sun-counter-clockwise {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

/* Clockwise rotation (scroll down) */
#light-theme-icon.rotating-down,
#light-theme-icon.rotating-down svg,
#light-theme-icon.rotating-down iconify-icon {
    animation: rotate-sun-clockwise 1.2s ease-out infinite;
    display: inline-block;
}

/* Counter-clockwise rotation (scroll up) */
#light-theme-icon.rotating-up,
#light-theme-icon.rotating-up svg,
#light-theme-icon.rotating-up iconify-icon {
    animation: rotate-sun-counter-clockwise 1.2s ease-out infinite;
    display: inline-block;
}

/* Smooth transition when stopping */
#light-theme-icon,
#light-theme-icon svg,
#light-theme-icon iconify-icon {
    transition: transform 0.3s ease-out;
    display: inline-block;
}

/* Typewriter cursor animation for Dash Docs title */
@keyframes blink-cursor {
    0%, 49% {
        opacity: 1;
    }
    50%, 100% {
        opacity: 0;
    }
}

/* Add blinking cursor while typing */
#dash-docs-title.typing::after {
    content: '▋';
    animation: blink-cursor 1s step-end infinite;
    margin-left: 2px;
    color: #03c7e5;
}

/* AG Grid Dark Mode Support */
/* Override AG Grid theme colors for dark mode */
:root[data-mantine-color-scheme="dark"] .ag-theme-alpine {
    /* Core background colors */
    --ag-background-color: #1a1b1e;
    --ag-foreground-color: #c1c2c5;
    --ag-border-color: #373a40;
    --ag-secondary-border-color: #2c2e33;

    /* Header colors */
    --ag-header-background-color: #25262b;
    --ag-header-foreground-color: #c1c2c5;

    /* Row colors */
    --ag-odd-row-background-color: #1a1b1e;
    --ag-row-hover-color: #25262b;
    --ag-selected-row-background-color: #373a40;

    /* Control panel (filters, pagination) */
    --ag-control-panel-background-color: #25262b;

    /* Input colors */
    --ag-input-border-color: #373a40;
    --ag-input-disabled-border-color: #2c2e33;
    --ag-input-disabled-background-color: #25262b;

    /* Pagination and widgets */
    --ag-disabled-foreground-color: #5c5f66;
    --ag-chip-background-color: #373a40;

    /* Hover and focus states */
    --ag-row-border-color: #2c2e33;
    --ag-cell-horizontal-border: solid #2c2e33;

    /* Filter colors */
    --ag-input-focus-border-color: #5c5f66;

    /* Icons */
    color-scheme: dark;
}

/* Light mode adjustments (ensure proper contrast) */
:root[data-mantine-color-scheme="light"] .ag-theme-alpine {
    --ag-background-color: #ffffff;
    --ag-foreground-color: #1a1b1e;
    --ag-border-color: #dee2e6;
    --ag-header-background-color: #f8f9fa;
    --ag-row-hover-color: #f1f3f5;
}

/* Custom AG Grid Cell Styling - Light Mode */
:root[data-mantine-color-scheme="light"] .ag-theme-alpine .timestamp-cell {
    font-family: monospace;
    font-size: 14px;
}

:root[data-mantine-color-scheme="light"] .ag-theme-alpine .bot-type-cell {
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
}

:root[data-mantine-color-scheme="light"] .ag-theme-alpine .bot-training {
    background-color: #ffe0e0;
    color: #c92a2a;
}

:root[data-mantine-color-scheme="light"] .ag-theme-alpine .bot-search {
    background-color: #d0ebff;
    color: #1971c2;
}

:root[data-mantine-color-scheme="light"] .ag-theme-alpine .bot-traditional {
    background-color: #d3f9d8;
    color: #2f9e44;
}

:root[data-mantine-color-scheme="light"] .ag-theme-alpine .bot-unknown {
    background-color: #f1f3f5;
    color: #868e96;
    font-weight: 400;
}

:root[data-mantine-color-scheme="light"] .ag-theme-alpine .page-cell {
    font-family: monospace;
    font-size: 12px;
    background-color: #f8f9fa;
    padding: 4px 6px;
    border-radius: 4px;
}

:root[data-mantine-color-scheme="light"] .ag-theme-alpine .user-agent-cell {
    font-size: 12px;
    color: #868e96;
}

/* Custom AG Grid Cell Styling - Dark Mode */
:root[data-mantine-color-scheme="dark"] .ag-theme-alpine .timestamp-cell {
    font-family: monospace;
    font-size: 14px;
}

:root[data-mantine-color-scheme="dark"] .ag-theme-alpine .bot-type-cell {
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
}

:root[data-mantine-color-scheme="dark"] .ag-theme-alpine .bot-training {
    background-color: #5c1414;
    color: #ffa8a8;
}

:root[data-mantine-color-scheme="dark"] .ag-theme-alpine .bot-search {
    background-color: #1c3d5a;
    color: #74c0fc;
}

:root[data-mantine-color-scheme="dark"] .ag-theme-alpine .bot-traditional {
    background-color: #1b4332;
    color: #8ce99a;
}

:root[data-mantine-color-scheme="dark"] .ag-theme-alpine .bot-unknown {
    background-color: #373a40;
    color: #909296;
    font-weight: 400;
}

:root[data-mantine-color-scheme="dark"] .ag-theme-alpine .page-cell {
    font-family: monospace;
    font-size: 12px;
    background-color: #25262b;
    padding: 4px 6px;
    border-radius: 4px;
}

:root[data-mantine-color-scheme="dark"] .ag-theme-alpine .user-agent-cell {
    font-size: 12px;
    color: #909296;
}