/**
 * API Specification Renderer Styles v0.6
 * Aligned with NVIDIA Sphinx Theme Design System
 * Supports light and dark modes with NVIDIA brand colors
 * 
 * DESIGN PHILOSOPHY:
 * This stylesheet implements progressive simplification to handle deeply nested
 * schemas (4-5+ levels). Design lessons learned from Stripe, Twilio, GitHub APIs:
 * 
 * 1. Progressive Disclosure: Levels 0-2 expanded, 3+ collapsed by default
 * 2. Visual Weight Reduction: Less padding, borders, and decoration at depth
 * 3. Type Clarity: Type badges remain prominent at all levels
 * 4. Whitespace Over Decoration: Deep nesting uses minimal borders/backgrounds
 * 5. Scannable Hierarchy: Font sizes and spacing scale down with depth
 * 
 * NESTING STRATEGY:
 * - Level 0-1: Full rich styling (cards, colors, padding)
 * - Level 2: Slightly reduced (smaller padding)
 * - Level 3: Compact mode (minimal borders, smaller fonts, collapsed)
 * - Level 4+: Ultra minimal (dotted borders, tree-like, no backgrounds)
 * 
 * IMPLEMENTATION:
 * Uses data-depth attributes on .properties-container elements for clean,
 * maintainable depth-based styling instead of repetitive descendant selectors.
 * 
 * COLOR PALETTE:
 * Light Mode:
 * - Primary: #76b900 (NVIDIA Green)
 * - Object Type: #1976d2 (Blue)
 * - Primitive Type: #7b1fa2 (Purple)
 * - Neutrals: Grays (#1a1a1a, #333, #555, #666, #e0e0e0, #f5f5f5)
 * 
 * Dark Mode:
 * - Primary: #bff230 (Green Light 1)
 * - Object Type: #7cd7fe (Blue Light 1)
 * - Primitive Type: #c359ef (Purple Light 1)
 * - Accent: #ef9100 (Orange)
 */

:root {
    /* Light Mode Colors (default) */
    --api-bg-primary: #fafafa;
    --api-bg-secondary: #ffffff;
    --api-bg-hover: #f5f5f5;
    --api-bg-tertiary: #f9f9f9;
    --api-bg-union: #fff3e0;
    --api-bg-code: #f0f0f0;

    --api-border-primary: #e0e0e0;
    --api-border-light: #ffe0b2;

    --api-text-primary: #1a1a1a;
    --api-text-secondary: #555;
    --api-text-tertiary: #666;
    --api-text-light: #a7a7a7;

    --api-color-green: #76b900;
    --api-color-blue: #1976d2;
    --api-color-purple: #7b1fa2;
    --api-color-orange: #ff6f00;
    --api-color-orange-dark: #ff9800;

    --api-text-white: #ffffff;
}

/* Dark mode via system preference */
@media (prefers-color-scheme: dark) {
    :root {
        /* Dark Mode Colors */
        --api-bg-primary: #1a1a1a;
        --api-bg-secondary: #2d2d2d;
        --api-bg-hover: #3a3a3a;
        --api-bg-tertiary: #252525;
        --api-bg-union: #3f2410;
        --api-bg-code: #1a1a1a;

        --api-border-primary: #404040;
        --api-border-light: #5c3f2c;

        --api-text-primary: #e0e0e0;
        --api-text-secondary: #a7a7a7;
        --api-text-tertiary: #757575;
        --api-text-light: #757575;

        --api-color-green: #bff230;
        --api-color-blue: #7cd7fe;
        --api-color-purple: #c359ef;
        --api-color-orange: #ef9100;
        --api-color-orange-dark: #f9b233;

        --api-text-white: #ffffff;
    }
}

/* Dark mode via NVIDIA Sphinx theme data attributes */
html[data-theme="dark"],
html[data-mode="dark"] {
    --api-bg-primary: #1a1a1a;
    --api-bg-secondary: #2d2d2d;
    --api-bg-hover: #3a3a3a;
    --api-bg-tertiary: #252525;
    --api-bg-union: #3f2410;
    --api-bg-code: #1a1a1a;

    --api-border-primary: #404040;
    --api-border-light: #5c3f2c;

    --api-text-primary: #e0e0e0;
    --api-text-secondary: #a7a7a7;
    --api-text-tertiary: #757575;
    --api-text-light: #757575;

    --api-color-green: #bff230;
    --api-color-blue: #7cd7fe;
    --api-color-purple: #c359ef;
    --api-color-orange: #ef9100;
    --api-color-orange-dark: #f9b233;

    --api-text-white: #ffffff;
}

/* API Specification Container */
.api-spec {
    margin: 1rem 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--api-text-primary);
}

/* Property Item */
.api-property {
    margin: 0.5rem 0;
    padding: 0.75rem;
    border: 1px solid var(--api-border-primary);
    border-left: 2px solid var(--api-color-green);
    background-color: var(--api-bg-primary);
    border-radius: 4px;
    transition: background-color 0.2s ease;
    color: var(--api-text-secondary);
}

.api-property:hover {
    background-color: var(--api-bg-hover);
}

/* Nested level 1 properties */
.properties-container .api-property {
    border-left-color: var(--api-color-purple);
    background-color: var(--api-bg-secondary);
}

.properties-container .api-property:hover {
    background-color: var(--api-bg-hover);
}

/* Nested level 2 properties - slightly reduced */
.properties-container .properties-container .api-property {
    border-left-color: var(--api-color-orange-dark);
    background-color: var(--api-bg-primary);
    padding: 0.6rem;
}

/* ========================================
   PROGRESSIVE SIMPLIFICATION (Level 3+)
   Design Lesson: Reduce visual weight at depth
   ======================================== */

/* Level 3 - Compact mode with subtle styling */
.properties-container[data-depth="3"] .api-property {
    padding: 0.4rem 0.5rem;
    border-left: 1px solid var(--api-border-primary);
    border-right: none;
    border-top: none;
    border-bottom: none;
    background-color: transparent;
    margin: 0.25rem 0;
}

.properties-container[data-depth="3"] .api-property:hover {
    background-color: var(--api-bg-tertiary);
}

/* Level 3 Property headers - smaller, more compact */
.properties-container[data-depth="3"] .property-header {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
    gap: 0.4rem;
}

/* Level 3 Type badges - more subtle */
.properties-container[data-depth="3"] .type-badge {
    font-size: 0.75rem;
    padding: 1px 6px;
}

/* Level 3 Descriptions - smaller text */
.properties-container[data-depth="3"] .property-description {
    font-size: 0.85rem;
    margin: 0.25rem 0;
}

/* Level 4+ - Ultra minimal, tree-like */
.properties-container[data-depth="4"] .api-property,
.properties-container[data-depth="5"] .api-property {
    padding: 0.3rem 0.4rem;
    border-left: 1px dotted var(--api-text-light);
    margin: 0.15rem 0;
    background-color: transparent;
}

.properties-container[data-depth="4"] .api-property:hover,
.properties-container[data-depth="5"] .api-property:hover {
    background-color: transparent;
}

/* Level 4+ headers - even smaller */
.properties-container[data-depth="4"] .property-header,
.properties-container[data-depth="5"] .property-header {
    font-size: 0.85rem;
    margin-bottom: 0.15rem;
}

/* Level 4+ type badges - minimal */
.properties-container[data-depth="4"] .type-badge,
.properties-container[data-depth="5"] .type-badge {
    font-size: 0.7rem;
    padding: 1px 5px;
}

/* Property Header */
.property-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--api-text-primary);
}

/* Required Indicator */
.required-indicator {
    color: #d32f2f;
    font-weight: bold;
    font-size: 1.1rem;
    margin-left: 2px;
}

/* Dark mode required indicator */
@media (prefers-color-scheme: dark) {
    .required-indicator {
        color: #ef5350;
    }
}

html[data-theme="dark"] .required-indicator,
html[data-mode="dark"] .required-indicator {
    color: #ef5350;
}

/* Type Badges */
.type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: capitalize;
}

.type-object {
    background-color: var(--api-color-blue);
    color: var(--api-text-white);
}

.type-primitive {
    background-color: var(--api-color-purple);
    color: var(--api-text-white);
}

.type-union {
    background-color: var(--api-color-orange);
    color: var(--api-text-white);
}

/* Property Description */
.property-description {
    font-size: 0.9rem;
    color: var(--api-text-secondary);
    margin: 0.375rem 0;
    line-height: 1.4;
}

/* ========================================
   EXPANDABLE SECTIONS
   Design Lesson: Clear interaction affordances
   ======================================== */

.property-toggle {
    cursor: pointer;
    user-select: none;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--api-color-blue);
    margin: 0.5rem 0 0.375rem 0;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    transition: color 0.2s ease;
}

.property-toggle:hover {
    color: var(--api-color-green);
}

.property-toggle::before {
    content: '▶';
    display: inline-block;
    transition: transform 0.2s ease;
    font-size: 0.75rem;
}

details[open]>.property-toggle::before {
    transform: rotate(90deg);
}

/* Level 3+ toggles - more subtle */
.properties-container[data-depth="3"] .property-toggle,
.properties-container[data-depth="4"] .property-toggle,
.properties-container[data-depth="5"] .property-toggle {
    font-size: 0.85rem;
    margin: 0.3rem 0 0.25rem 0;
}

.properties-container[data-depth="3"] .property-toggle::before,
.properties-container[data-depth="4"] .property-toggle::before,
.properties-container[data-depth="5"] .property-toggle::before {
    font-size: 0.65rem;
}

.properties-container {
    margin-top: 0.5rem;
    padding-left: 0;
}

/* ========================================
   COLLAPSIBLE SECTIONS & PROGRESSIVE DISCLOSURE
   Design Lesson: Collapsed by default at depth
   ======================================== */

/* Scoped to API spec to prevent sidebar interference */
.api-spec details {
    margin: 0.5rem 0;
}

.api-spec details>summary {
    list-style: none;
}

.api-spec details>summary::-webkit-details-marker {
    display: none;
}

.api-spec details .properties-container {
    margin-top: 0.5rem;
}

/* Level 3+ details: Collapsed by default, lighter border */
.properties-container[data-depth="3"] details,
.properties-container[data-depth="4"] details,
.properties-container[data-depth="5"] details {
    margin: 0.25rem 0;
}

.properties-container[data-depth="3"] details .properties-container {
    margin-left: 0.5rem;
    padding-left: 0.4rem;
    border-left: 1px solid var(--api-border-primary);
}

/* Level 4+ details: Even more minimal */
.properties-container[data-depth="4"] details .properties-container,
.properties-container[data-depth="5"] details .properties-container {
    margin-left: 0.4rem;
    padding-left: 0.3rem;
    border-left: 1px dotted var(--api-border-primary);
}

/* Metadata Sections */
.default-value,
.required-fields,
.enum-values,
.constraints,
.array-items,
.additional-properties,
.discriminator,
.examples {
    margin: 0.375rem 0;
    font-size: 0.9rem;
    color: var(--api-text-secondary);
}

/* Level 3+ metadata - more compact */
.properties-container[data-depth="3"] .default-value,
.properties-container[data-depth="3"] .required-fields,
.properties-container[data-depth="3"] .enum-values,
.properties-container[data-depth="3"] .constraints,
.properties-container[data-depth="3"] .examples {
    margin: 0.25rem 0;
    font-size: 0.85rem;
}

/* Level 4+ metadata - minimal */
.properties-container[data-depth="4"] .default-value,
.properties-container[data-depth="4"] .required-fields,
.properties-container[data-depth="4"] .enum-values,
.properties-container[data-depth="4"] .constraints,
.properties-container[data-depth="4"] .examples,
.properties-container[data-depth="5"] .default-value,
.properties-container[data-depth="5"] .required-fields,
.properties-container[data-depth="5"] .enum-values,
.properties-container[data-depth="5"] .constraints,
.properties-container[data-depth="5"] .examples {
    margin: 0.15rem 0;
    font-size: 0.8rem;
}

.enum-list,
.example-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.25rem;
}

.enum-list code,
.example-list code {
    background-color: var(--api-bg-code);
    color: var(--api-text-primary);
    padding: 2px 6px;
    border-radius: 2px;
    font-size: 0.85rem;
    border: 1px solid var(--api-border-primary);
}

.constraints {
    color: var(--api-text-tertiary);
    font-style: italic;
}

/* Array Items Styling */
.array-items {
    background-color: var(--api-bg-tertiary);
    color: var(--api-text-secondary);
    padding: 0.5rem;
    border-left: 2px solid var(--api-color-green);
    margin-left: 0;
}

/* Level 3+ array items - more subtle */
.properties-container[data-depth="3"] .array-items {
    padding: 0.4rem;
    border-left-width: 1px;
    background-color: transparent;
}

/* Level 4+ array items - minimal */
.properties-container[data-depth="4"] .array-items,
.properties-container[data-depth="5"] .array-items {
    padding: 0.3rem;
    border-left: 1px dotted var(--api-color-green);
}

/* Union Types (anyOf, oneOf, allOf) */
.union-types {
    margin: 0.5rem 0;
    padding: 0.5rem;
    background-color: var(--api-bg-union);
    border-left: 2px solid var(--api-color-orange);
    border-radius: 2px;
    color: var(--api-text-secondary);
}

.union-list {
    margin-top: 0.375rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.union-item {
    padding: 0.375rem;
    background-color: var(--api-bg-secondary);
    border: 1px solid var(--api-border-light);
    border-radius: 2px;
}

.union-option {
    font-size: 0.9rem;
    color: var(--api-text-secondary);
}

/* Level 3+ union types - more compact */
.properties-container[data-depth="3"] .union-types {
    padding: 0.4rem;
    margin: 0.3rem 0;
    border-left-width: 2px;
}

.properties-container[data-depth="3"] .union-item {
    padding: 0.25rem;
}

.properties-container[data-depth="3"] .union-option {
    font-size: 0.85rem;
}

/* Level 4+ union types - minimal */
.properties-container[data-depth="4"] .union-types,
.properties-container[data-depth="5"] .union-types {
    padding: 0.3rem;
    margin: 0.2rem 0;
    border-left: 1px solid var(--api-color-orange);
}

.properties-container[data-depth="4"] .union-item,
.properties-container[data-depth="5"] .union-item {
    padding: 0.2rem;
}

.properties-container[data-depth="4"] .union-option,
.properties-container[data-depth="5"] .union-option {
    font-size: 0.8rem;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .property-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .type-badge {
        margin-top: 0.25rem;
    }
}