@media (prefers-color-scheme: dark) {
    :root {
      --primary: #00599d;
      --primary-fg: #f7f7f7;

      --body-fg: #eeeeee;
      --body-bg: #131722;
      --body-quiet-color: #d0d0d0;
      --body-medium-color: #e0e0e0;
      --body-loud-color: #ffffff;

      --breadcrumbs-link-fg: #e0e0e0;
      --breadcrumbs-bg: var(--primary);

      --link-fg: #81d4fa;
      --link-hover-color: #4ac1f7;
      --link-selected-fg: #6f94c6;

      --hairline-color: #272727;
      --border-color: #353535;

      --error-fg: #e35f5f;
      --message-success-bg: #006b1b;
      --message-warning-bg: #583305;
      --message-error-bg: #570808;

      --darkened-bg: #2426424e;
      --selected-bg: #1b1b1b;
      --selected-row: #3b6298;

      --table-header-bg: #2a3f55;
      --table-row-odd: #0c1a26;
      --table-row-even: #132535;
      --form-row-bg: #0f2030;

      --close-button-bg: #333333;
      --close-button-hover-bg: #666666;

      color-scheme: dark;
    }
  }


html[data-theme="dark"] {
    --primary: #26355d;
    --primary-fg: #f7f7f7;

    --body-fg: #eeeeee;
    --body-bg: #07151f;
    --body-quiet-color: #d0d0d0;
    --body-medium-color: #e0e0e0;
    --body-loud-color: #ffffff;

    --breadcrumbs-link-fg: #e0e0e0;
    --breadcrumbs-bg: var(--primary);

    --link-fg: #81d4fa;
    --link-hover-color: #4ac1f7;
    --link-selected-fg: #6f94c6;

    --hairline-color: #272727;
    --border-color: #353535;

    --error-fg: #e35f5f;
    --message-success-bg: #006b1b;
    --message-warning-bg: #583305;
    --message-error-bg: #570808;

    --darkened-bg: #1d3e6366;
    --selected-bg: #1b1b1b;
    --selected-row: #3b6298;

    --table-header-bg: #2a3f55;
    --table-row-odd: #0c1a26;
    --table-row-even: #132535;
    --form-row-bg: #0f2030;

    --close-button-bg: #333333;
    --close-button-hover-bg: #666666;

    color-scheme: dark;
}

/* THEME SWITCH */
.theme-toggle {
    cursor: pointer;
    border: none;
    padding: 0;
    background: transparent;
    vertical-align: middle;
    margin-inline-start: 5px;
    margin-top: -1px;
}

.theme-toggle svg {
    vertical-align: middle;
    height: 1.5rem;
    width: 1.5rem;
    display: none;
}

/*
Fully hide screen reader text so we only show the one matching the current
theme.
*/
.theme-toggle .visually-hidden {
    display: none;
}

html[data-theme="auto"] .theme-toggle .theme-label-when-auto {
    display: block;
}

html[data-theme="dark"] .theme-toggle .theme-label-when-dark {
    display: block;
}

html[data-theme="light"] .theme-toggle .theme-label-when-light {
    display: block;
}

/* ICONS */
.theme-toggle svg.theme-icon-when-auto,
.theme-toggle svg.theme-icon-when-dark,
.theme-toggle svg.theme-icon-when-light {
    fill: var(--header-link-color);
    color: var(--header-bg);
}

html[data-theme="auto"] .theme-toggle svg.theme-icon-when-auto {
    display: block;
}

html[data-theme="dark"] .theme-toggle svg.theme-icon-when-dark {
    display: block;
}

html[data-theme="light"] .theme-toggle svg.theme-icon-when-light {
    display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Dark Mode Scrollbar Styles for EasyMDE Editor
   ═══════════════════════════════════════════════════════════════════════════ */

/* CodeMirror scrollbar - dark mode */
html[data-theme="dark"] .EasyMDEContainer .CodeMirror-vscrollbar,
html[data-theme="dark"] .EasyMDEContainer .CodeMirror-hscrollbar {
    scrollbar-color: rgba(180, 180, 180, 0.4) transparent;
}

html[data-theme="dark"] .EasyMDEContainer .CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
html[data-theme="dark"] .EasyMDEContainer .CodeMirror-hscrollbar::-webkit-scrollbar-thumb {
    background: rgba(180, 180, 180, 0.4);
}

html[data-theme="dark"] .EasyMDEContainer .CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .EasyMDEContainer .CodeMirror-hscrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(180, 180, 180, 0.6);
}

/* Phone content scrollbar - dark mode */
html[data-theme="dark"] .phone-content {
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

html[data-theme="dark"] .phone-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
}

html[data-theme="dark"] .phone-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* Auto dark mode (prefers-color-scheme) */
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .EasyMDEContainer .CodeMirror-vscrollbar,
    html[data-theme="auto"] .EasyMDEContainer .CodeMirror-hscrollbar {
        scrollbar-color: rgba(180, 180, 180, 0.4) transparent;
    }

    html[data-theme="auto"] .EasyMDEContainer .CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
    html[data-theme="auto"] .EasyMDEContainer .CodeMirror-hscrollbar::-webkit-scrollbar-thumb {
        background: rgba(180, 180, 180, 0.4);
    }

    html[data-theme="auto"] .phone-content {
        scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
    }

    html[data-theme="auto"] .phone-content::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.25);
    }

    /* Auto dark mode - CodeMirror cursor and active line */
    html[data-theme="auto"] .EasyMDEContainer .CodeMirror-cursor {
        border-left-color: #fff !important;
        border-left-width: 2px;
    }

    html[data-theme="auto"] .EasyMDEContainer .CodeMirror-activeline-background {
        background: rgba(255, 255, 255, 0.05) !important;
    }

    html[data-theme="auto"] .EasyMDEContainer .CodeMirror-selected {
        background: rgba(100, 150, 255, 0.3) !important;
    }
}