/* Dataface color palette - Red, Black, White */
:root {
  /* Primary red color */
  --md-primary-fg-color:        #DC2626;
  --md-primary-fg-color--light: #EF4444;
  --md-primary-fg-color--dark:  #B91C1C;

  /* Accent color - vibrant red */
  --md-accent-fg-color:         #DC2626;
  --md-accent-fg-color--transparent: rgba(220, 38, 38, 0.1);
}

/* Dark mode adjustments */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #DC2626;
  --md-primary-fg-color--light: #EF4444;
  --md-primary-fg-color--dark:  #B91C1C;
  --md-accent-fg-color:         #DC2626;
}

/* Hide Print Version from navigation */
.md-nav__item:has(a[href*="print"]) {
    display: none !important;
}

/* Alternative selector for Material theme */
.md-nav__link[href*="print"] {
    display: none !important;
}

/* Hide from tabs navigation */
.md-tabs__item:has(a[href*="print"]) {
    display: none !important;
}

/* Reduce sidebar and TOC padding to give content more room */
.md-sidebar {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
}

.md-sidebar--secondary {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
}

/* Increase content max-width for more space */
.md-content {
    --md-content-max-width: 75rem; /* Increased from default ~60rem */
}

.md-content__inner {
    max-width: 100%;
}

/* Ensure active navigation items are clearly highlighted */
.md-nav__link--active {
    color: var(--md-primary-fg-color);
    font-weight: 600;
}

.md-nav__item--active > .md-nav__link {
    color: var(--md-primary-fg-color);
    font-weight: 600;
}

/* ============================================
   Code Block Styling - Match render_example
   ============================================ */

/* Material theme highlight blocks - add grey background */
.md-content .highlight {
    background-color: #f8f8f8 !important;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-sizing: border-box;
    overflow-x: auto;
    max-width: 100%;
    margin: 1em 0;
}

/* Pre elements inside highlight should inherit */
.md-content .highlight pre {
    background-color: transparent !important;
    margin: 0 !important;
    padding: 1em !important;
    overflow-x: auto;
}

/* Code inside pre */
.md-content .highlight pre code {
    background-color: transparent !important;
    white-space: pre;
    word-wrap: normal;
    display: block;
}

/* Standalone pre elements (not in highlight) */
.md-content pre:not(.highlight pre) {
    background-color: #f8f8f8 !important;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 1em;
    overflow-x: auto;
    max-width: 100%;
}

/* Ensure code blocks don't overflow container */
.md-content__inner > .highlight,
.md-content__inner > pre {
    max-width: 100%;
    box-sizing: border-box;
}

/* Inline code styling */
.md-content code:not(pre code):not(.highlight code) {
    background-color: #f0f0f0;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 0.9em;
}

/* ============================================
   Light Mode Syntax Highlighting
   Override dark Pygments colors for light background
   ============================================ */

/* Override Material theme CSS variables for code highlighting */
:root {
    --md-code-hl-keyword-color: #DC2626;  /* Dataface red for tags/keywords */
    --md-code-hl-name-color: #333;
    --md-code-hl-string-color: #059669;   /* Green for strings */
    --md-code-hl-number-color: #D97706;   /* Orange for numbers */
    --md-code-hl-comment-color: #6B7280;  /* Gray for comments */
    --md-code-hl-constant-color: #7C3AED; /* Purple for constants */
    --md-code-hl-punctuation-color: #4B5563;
}

/* YAML Keys (Name.Tag) - Dataface Red - with maximum specificity */
.md-content .highlight .nt,
.md-content .yaml .nt,
.highlight .nt,
.yaml .nt {
    color: #DC2626 !important;
}

/* Strings - Green */
.md-content .highlight .s,
.md-content .highlight .s1,
.md-content .highlight .s2,
.md-content .yaml .s,
.md-content .yaml .s1,
.md-content .yaml .s2 {
    color: #059669 !important;
}

/* Numbers - Orange */
.md-content .highlight .m,
.md-content .highlight .mi,
.md-content .highlight .mf,
.md-content .yaml .m,
.md-content .yaml .mi,
.md-content .yaml .mf {
    color: #D97706 !important;
}

/* Keywords/Constants (true, false, null) - Purple */
.md-content .highlight .k,
.md-content .highlight .kc,
.md-content .yaml .k,
.md-content .yaml .kc {
    color: #7C3AED !important;
}

/* Comments - Gray italic */
.md-content .highlight .c,
.md-content .highlight .c1,
.md-content .highlight .cm,
.md-content .yaml .c,
.md-content .yaml .c1,
.md-content .yaml .cm {
    color: #6B7280 !important;
    font-style: italic;
}

/* Punctuation (colons, brackets, pipes) - Dark gray */
.md-content .highlight .p,
.md-content .yaml .p {
    color: #4B5563 !important;
}

/* Names (SQL identifiers and unquoted YAML values) - readable on light code backgrounds */
.md-content .highlight .n,
.md-content .highlight .no,
.md-content .highlight .nx,
.md-content .yaml .n,
.md-content .yaml .no,
.md-content .yaml .nx {
    color: #374151 !important;
}

/* Jinja expressions - Teal */
.md-content .highlight .si,
.md-content .yaml .si {
    color: #0891B2 !important;
}

/* Default text - Dark */
.md-content .highlight,
.md-content .yaml {
    color: #333 !important;
}

/* Dark mode code blocks */
[data-md-color-scheme="slate"] .md-content .highlight {
    background-color: #1e1e1e !important;
    border-color: #3a3a3a;
}

[data-md-color-scheme="slate"] .md-content pre:not(.highlight pre) {
    background-color: #1e1e1e !important;
    border-color: #3a3a3a;
}

[data-md-color-scheme="slate"] .md-content code:not(pre code):not(.highlight code) {
    background-color: #2d2d2d;
}

/* Dark mode - restore original pygments colors */
[data-md-color-scheme="slate"] .md-content .highlight .nt,
[data-md-color-scheme="slate"] .md-content .yaml .nt {
    color: #FF5370 !important;
}

[data-md-color-scheme="slate"] .md-content .highlight .s,
[data-md-color-scheme="slate"] .md-content .highlight .s1,
[data-md-color-scheme="slate"] .md-content .highlight .s2,
[data-md-color-scheme="slate"] .md-content .yaml .s,
[data-md-color-scheme="slate"] .md-content .yaml .s1,
[data-md-color-scheme="slate"] .md-content .yaml .s2 {
    color: #C3E88D !important;
}

[data-md-color-scheme="slate"] .md-content .highlight .k,
[data-md-color-scheme="slate"] .md-content .highlight .kc,
[data-md-color-scheme="slate"] .md-content .yaml .k,
[data-md-color-scheme="slate"] .md-content .yaml .kc {
    color: #89DDFF !important;
}

[data-md-color-scheme="slate"] .md-content .highlight .p,
[data-md-color-scheme="slate"] .md-content .yaml .p {
    color: #89DDFF !important;
}

[data-md-color-scheme="slate"] .md-content .highlight,
[data-md-color-scheme="slate"] .md-content .yaml {
    color: #EFF !important;
}

/* ============================================
   SQL Tokens inside Dataface YAML blocks
   Applied to SQL block scalar bodies in .yaml / .dataface-example .example-code
   Token classes emitted by Pygments SqlLexer:
     .k  = Keyword (SELECT, FROM, WHERE, GROUP, ORDER, …)
     .kd = Keyword.DML (SELECT, INSERT, UPDATE, DELETE)
     .kn = Keyword.Namespace (AS, ON, …)
     .kr = Keyword.Reserved
     .n  = Name  (table/column identifiers)
     .s  = String literals inside SQL
   ============================================ */

/* SQL DML keywords (SELECT, INSERT, UPDATE, DELETE) — blue-teal */
.yaml .kd,
.dataface-example .example-code .kd {
    color: #0369A1 !important;
    font-weight: 600;
}

/* General SQL keywords (FROM, WHERE, GROUP BY, ORDER BY, JOIN, …) — blue-teal */
.yaml .k,
.dataface-example .example-code .k {
    color: #0369A1 !important;
    font-weight: 600;
}

/* SQL keyword type / namespace (AS, ON, IN, …) — slightly lighter blue */
.yaml .kn,
.yaml .kr,
.dataface-example .example-code .kn,
.dataface-example .example-code .kr {
    color: #0284C7 !important;
}

/* Dark mode SQL keywords */
[data-md-color-scheme="slate"] .yaml .kd,
[data-md-color-scheme="slate"] .dataface-example .example-code .kd,
[data-md-color-scheme="slate"] .yaml .k,
[data-md-color-scheme="slate"] .dataface-example .example-code .k {
    color: #38BDF8 !important;
}

[data-md-color-scheme="slate"] .yaml .kn,
[data-md-color-scheme="slate"] .yaml .kr,
[data-md-color-scheme="slate"] .dataface-example .example-code .kn,
[data-md-color-scheme="slate"] .dataface-example .example-code .kr {
    color: #7DD3FC !important;
}

/* ============================================
   DFT Palette Previews
   ============================================ */

.dft-palette {
    margin: 1.25rem 0 1.5rem;
}

.dft-palette__swatches {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.75rem 0 1rem;
}

.dft-palette__swatch {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    align-items: stretch;
    min-width: 0;
    border: 1px solid rgba(26, 26, 26, 0.08);
    border-radius: 0.75rem;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(26, 26, 26, 0.04);
}

.dft-palette__color {
    height: 100%;
    min-height: 3rem;
}

.dft-palette__meta {
    padding: 0.55rem 0.75rem 0.6rem;
    font-size: 0.72rem;
    line-height: 1.35;
    background: #faf8f5;
}

.dft-palette__name {
    display: block;
    font-weight: 700;
    color: #1a1a1a;
}

.dft-palette__hex {
    display: block;
    margin-top: 0.15rem;
    color: #5b6470;
    font-family: var(--md-code-font-family);
}

[data-md-color-scheme="slate"] .dft-palette__swatch {
    border-color: rgba(255, 255, 255, 0.08);
    background: #1f242b;
    box-shadow: none;
}

[data-md-color-scheme="slate"] .dft-palette__meta {
    background: #161a20;
}

[data-md-color-scheme="slate"] .dft-palette__name {
    color: #f3f5f7;
}

[data-md-color-scheme="slate"] .dft-palette__hex {
    color: #b8c0cc;
}

/* ============================================
   Playground Button in Navigation
   ============================================ */

.playground-nav-button {
    display: inline-flex;
    align-items: center;
    margin-left: 0.6rem;
    margin-right: 0.6rem;
    padding: 0.35rem 0.75rem;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1.2;
}

.playground-nav-button:hover {
    background-color: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    color: #ffffff;
    text-decoration: none;
}

/* Mobile: hide text, show icon only */
@media screen and (max-width: 76.1875em) {
    .playground-nav-button {
        padding: 0.4rem;
        margin-left: 0.4rem;
        margin-right: 0.4rem;
        min-width: 2rem;
    }
    .playground-nav-button::before {
        content: "▶";
        display: inline-block;
    }
    .playground-nav-button::after {
        content: "";
    }
}