/* ============================================
   BASE STYLES
   ============================================ */
body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ============================================
   HEADER/BANNER
   ============================================ */
#dcTopBanner {
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    line-height: 1;
    white-space: nowrap;
    z-index: 101;
    box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 0px 2px 2px rgba(0, 0, 0, 0.098), 0px 0px 5px 1px rgba(0, 0, 0, 0.084);
    background-color: #fff;
    position: relative;
}

#dcDevLogo {
    display: flex;
    height: 100%;
    width: 300px;
    background-color: #353535;
    padding: 15px 20px 8px;
}

#dcDevLogo a {
    display: flex;
    align-items: center;
    justify-content: stretch;
}

#dcDevLogo a::after {
    display: flex;
    height: 40px;
    line-height: 37px;
    padding: 0 0 0 10px;
    margin-left: 10px;
    border-left: 1px solid #bfbfbf;
    content: 'API reference';
    color: #bfbfbf;
}

#dcDevLogo img {
    padding-top: 5px;
    height: 38px;
    max-width: 111px;
}

/* Dark mode header */
[data-theme="dark"] #dcTopBanner {
    background-color: #2a2a2a;
    border-bottom: 1px solid #404040;
    /* box-shadow: 0px 0px 1px 1px rgba(255, 255, 255, 0.1); */
}

/* ============================================
   STOPLIGHT ELEMENTS LAYOUT
   ============================================ */
elements-api {
    height: 100vh;
}

.sl-elements-api {
    min-height: 100vh;
}

.sl-overflow-y-auto.sl-flex-1.sl-w-full.sl-px-24.sl-bg-canvas {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.sl-overflow-y-auto.sl-flex-1.sl-w-full.sl-px-24.sl-bg-canvas>div {
    flex: 1;
}

/* ============================================
   SIDEBAR (Always Dark - DigiCert Navy)
   ============================================ */
.sl-elements-api>.sl-flex>div:first-child,
.sl-elements-api .sl-sticky {
    /* Text colors */
    --color-text-heading: #ffffff;
    --color-text: #e5e5e5;
    --color-text-paragraph: rgba(229, 229, 229, 0.9);
    --color-text-muted: rgba(229, 229, 229, 0.7);
    --color-text-light: rgba(229, 229, 229, 0.55);
    --color-text-disabled: rgba(229, 229, 229, 0.3);

    /* Backgrounds */
    --color-canvas: #004a80;
    --color-canvas-pure: #002d4d;
    --color-canvas-50: #005a99;
    --color-canvas-100: #004a80;
    --color-canvas-200: #353535;
    --color-canvas-300: #00253d;
    --color-canvas-400: #001929;
    --color-canvas-500: #001015;

    /* Borders */
    --color-border-dark: rgba(255, 255, 255, 0.2);
    --color-border: rgba(255, 255, 255, 0.15);
    --color-border-light: rgba(255, 255, 255, 0.1);
    --color-border-input: rgba(255, 255, 255, 0.25);
    --color-border-button: rgba(255, 255, 255, 0.4);

    /* Primary colors */
    --color-text-primary: #66c7ff;
    --color-primary: #0f9dff;
    --color-primary-dark: #0174C3;
    --color-primary-darker: #015A99;
    --color-primary-light: #52bfff;
    --color-primary-tint: rgba(15, 157, 255, .15);

    /* Status colors */
    --color-text-success: #41f1ab;
    --color-success: #62b54e;
    --color-text-warning: #ffaa66;
    --color-warning: #ff8833;
    --color-text-danger: #ff6b6b;
    --color-danger: #ff5252;
}

/* Sidebar text overrides */
.sl-elements-api .sl-sticky h4.sl-text-heading,
.sl-elements-api .sl-sticky [title],
.sl-elements-api .sl-sticky div[title],
.sl-elements-api .sl-sticky .sl-uppercase,
a.ElementsTableOfContentsItem {
    color: white !important;
}

/* Powered by link */
.sl-elements-api .sl-flex .sl-sticky>a:last-child div {
    --color-text: rgba(255, 255, 255, 0.7) !important;
    --color-text-primary: #66c7ff !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border-top-color: #0174C3 !important;
}

/* HTTP method badge visibility */
.sl-elements-api .sl-sticky .sl-text-success {
    color: #41f1ab !important;
}

/* Selected item */
.sl-elements-api .sl-sticky .sl-bg-primary-tint {
    background: #0789e1 !important;
    color: #ffffff !important;
}

/* Hover state */
.sl-elements-api .sl-sticky .hover\:sl-bg-canvas-200:hover {
    background: #0174C3 !important;
}

/* ============================================
   SIDEBAR ICONS (FontAwesome)
   ============================================ */
.sl-elements-api .sl-sticky .hover\:sl-bg-canvas-200 .fa-bullseye,
.sl-elements-api .sl-sticky .hover\:sl-bg-canvas-200 .fa-bullseye path {
    color: #0f9dff !important;
    fill: currentColor !important;
}


sl-elements-api .sl-sticky .sl-bg-primary-tint .fa-bullseye,
.sl-elements-api .sl-sticky .sl-bg-primary-tint .fa-bullseye path {
    color: #fff !important;
    fill: currentColor !important;
}

/* Method-specific icon colors */
.sl-elements-api .sl-text-xs .sl-text-success { /* GET */
    border-radius: 3px;
    padding: 1px 3px;
    background-color: var(--color-success) !important;
    color: white !important;
}

.sl-elements-api .sl-text-xs .sl-text-primary { /* POST */
    border-radius: 3px;
    padding: 1px 3px;
    background-color: var(--color-primary) !important;
}

.sl-elements-api .sl-text-xs .sl-text-warning { /* PUT/PATCH */
    border-radius: 3px;
    padding: 1px 3px;
    background-color: var(--color-warning) !important;
}

.sl-elements-api .sl-text-danger { /* DELETE */
    background-color: var(--color-danger) !important;
    border-radius: 3px;
    padding: 1px 3px;
}

.sl-elements-api .sl-bg-primary-tint {
    color: white !important;
}

.sl-elements-api .sl-sticky a:hover {
    filter: brightness(1.2);
    transition: filter 0.2s ease;
}

/* ============================================
   THEME TOGGLE SWITCH
   ============================================ */
.theme-toggle-container {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 102;
}

.theme-toggle-switch {
    width: 50px;
    height: 26px;
    background-color: #ccc;
    border-radius: 13px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.theme-toggle-switch:hover {
    background-color: #b0b0b0;
}

.theme-toggle-slider {
    width: 22px;
    height: 22px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.theme-icon {
    width: 20px;
    height: 20px;
    color: #666;
    transition: color 0.3s ease, opacity 0.3s ease;
}

.sun-icon {
    color: #0174C3;
}

.moon-icon {
    color: #999;
    opacity: 0.5;
}

/* Dark mode toggle states */
[data-theme="dark"] .theme-toggle-switch {
    background-color: #5e6c75;
}

[data-theme="dark"] .theme-toggle-slider {
    transform: translateX(24px);
}

[data-theme="dark"] .sun-icon {
    color: #999;
    opacity: 0.5;
}

[data-theme="dark"] .moon-icon {
    color: #fff;
    opacity: 1;
}

/* ============================================
   MAIN CONTENT DARK THEME
   ============================================ */
[data-theme="dark"] body {
    background: #1a1a1a;
}
[data-theme="dark"] .sl-elements-api {
    /* Backgrounds */
    --color-canvas: #1a1a1a;
    --color-canvas-pure: #000000;
    --color-canvas-50: #2a2a2a;
    --color-canvas-100: #333333;
    --color-canvas-200: #404040;
    --color-canvas-300: #4d4d4d;
    
    /* Text colors */
    --color-text: #e0e0e0;
    --color-text-heading: #ffffff;
    --color-text-paragraph: #cccccc;
    --color-text-muted: #999999;
    --color-text-light: #666666;
    --color-text-disabled: #4d4d4d;
    
    /* Borders */
    --color-border: #333333;
    --color-border-light: #2a2a2a;
    --color-border-dark: #404040;
    
    /* Primary colors (consistent) */
    --color-primary: #0f9dff;
    --color-primary-dark: #0174C3;
    --color-primary-light: #52bfff;
}

/* Keep sidebar navy in dark mode */
[data-theme="dark"] .sl-elements-api .sl-sticky {
    --color-canvas: #004a80;
    --color-text-heading: #ffffff;
    --color-text: #e5e5e5;
}

/* ============================================
   CODE BLOCKS
   ============================================ */

/* Light mode (default) */
.sl-elements-api pre.sl-code-viewer {
    background-color: #24292e !important;
    color: #fafaf6 !important;
}

.sl-panel__content pre.sl-code-viewer {
    background-color: var(--color-canvas-50) !important;
    color: #24292e !important;
}

.sl-elements-api code {
    background-color: #fafaf6 !important;
    color: #24292e !important;
}

/* Dark mode */
[data-theme="dark"] .sl-elements-api pre,
[data-theme="dark"] .sl-elements-api code {
    background-color: #161b22 !important;
    color: #e1e4e8 !important;
}

[data-theme="dark"] .sl-elements-api .sl-bg-canvas-100 pre {
    background-color: #161b22 !important;
    border: 1px solid #30363d !important;
}

/* Inline code */
[data-theme="dark"] .sl-elements-api code:not(pre code) {
    background-color: #30363d !important;
    color: #79c0ff !important;
    padding: 2px 4px;
    border-radius: 3px;
}

/* ============================================
   PRISM.JS SYNTAX HIGHLIGHTING (Dark Mode)
   ============================================ */
[data-theme="dark"] .token.comment,
[data-theme="dark"] .token.prolog,
[data-theme="dark"] .token.doctype,
[data-theme="dark"] .token.cdata {
    color: #8b949e !important;
}

[data-theme="dark"] .token.punctuation {
    color: #79c0ff !important;
}

[data-theme="dark"] .token.namespace {
    opacity: 0.7;
}

[data-theme="dark"] .token.property,
[data-theme="dark"] .token.tag,
[data-theme="dark"] .token.constant,
[data-theme="dark"] .token.symbol,
[data-theme="dark"] .token.deleted {
    color: #7ee83f !important;
}

[data-theme="dark"] .token.boolean,
[data-theme="dark"] .token.number {
    color: #79c0ff !important;
}

[data-theme="dark"] .token.selector,
[data-theme="dark"] .token.attr-name,
[data-theme="dark"] .token.string,
[data-theme="dark"] .token.char,
[data-theme="dark"] .token.builtin,
[data-theme="dark"] .token.inserted {
    color: #a5d6ff !important;
}

[data-theme="dark"] .token.operator,
[data-theme="dark"] .token.entity,
[data-theme="dark"] .token.url,
[data-theme="dark"] .language-css .token.string,
[data-theme="dark"] .style .token.string {
    color: #ff7b72 !important;
}

[data-theme="dark"] .token.atrule,
[data-theme="dark"] .token.attr-value,
[data-theme="dark"] .token.keyword {
    color: #ff7b72 !important;
}

[data-theme="dark"] .token.function,
[data-theme="dark"] .token.class-name {
    color: #d2a8ff !important;
}

[data-theme="dark"] .token.regex,
[data-theme="dark"] .token.important,
[data-theme="dark"] .token.variable {
    color: #ffa657 !important;
}

[data-theme="dark"] .token.important,
[data-theme="dark"] .token.bold {
    font-weight: bold;
}

[data-theme="dark"] .token.italic {
    font-style: italic;
}

[data-theme="dark"] .token.entity {
    cursor: help;
}

/* JSON specific */
[data-theme="dark"] .sl-elements-api .language-json .token.property {
    color: #79c0ff !important;
}

[data-theme="dark"] .sl-elements-api .language-json .token.string {
    color: #a5d6ff !important;
}

/* ============================================
   MOSAIC CODE VIEWER
   ============================================ */
[data-theme="dark"] .sl-elements-api [class*="CodeViewer"] {
    background-color: #161b22 !important;
}

[data-theme="dark"] .sl-elements-api [class*="CodeViewer"] pre {
    background-color: transparent !important;
}

/* Line numbers */
[data-theme="dark"] .sl-elements-api .line-numbers .line-numbers-rows {
    border-right: 1px solid #30363d !important;
}

[data-theme="dark"] .sl-elements-api .line-numbers .line-numbers-rows span {
    color: #484f58 !important;
}

/* Copy button */
[data-theme="dark"] .sl-elements-api [class*="CopyButton"] {
    background-color: #21262d !important;
    color: #c9d1d9 !important;
    border: 1px solid #30363d !important;
}

[data-theme="dark"] .sl-elements-api [class*="CopyButton"]:hover {
    background-color: #30363d !important;
    color: #ffffff !important;
}

/* Tab panels */
[data-theme="dark"] .sl-elements-api [role="tabpanel"] pre {
    background-color: #0d1117 !important;
    border: 1px solid #30363d !important;
}

/* [data-theme="dark"] .sl-elements-api [role="tab"] {
    background-color: #161b22 !important;
    color: #c9d1d9 !important;
    border-color: #30363d !important;
}

[data-theme="dark"] .sl-elements-api [role="tab"][aria-selected="true"] {
    background-color: #0d1117 !important;
    border-bottom-color: #0d1117 !important;
} */

/* Scrollbars */
[data-theme="dark"] .sl-elements-api pre::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

[data-theme="dark"] .sl-elements-api pre::-webkit-scrollbar-track {
    background: #161b22;
}

[data-theme="dark"] .sl-elements-api pre::-webkit-scrollbar-thumb {
    background: #484f58;
    border-radius: 4px;
}

[data-theme="dark"] .sl-elements-api pre::-webkit-scrollbar-thumb:hover {
    background: #6e7681;
}

/* ============================================
   TRANSITIONS
   ============================================ */
.sl-elements-api,
.sl-elements-api *,
.sl-elements-api pre,
.sl-elements-api code,
.sl-elements-api .token {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}