/* >>> dark-theme:tokens (written by scripts/gen_dark_theme.py from PALETTE and TOKENS; edit them there) */
html[data-theme="dark"] {
    color-scheme: dark;
    --dk-page: #151c22;
    --dk-sunken: #19222a;
    --dk-panel: #1f2933;
    --dk-raised: #293742;
    --dk-hover: #30404d;
    --dk-border-soft: #2a3742;
    --dk-border: #30404d;
    --dk-border-strong: #394b59;
    --dk-text-strong: #f5f8fa;
    --dk-text: #d6e1ea;
    --dk-text-2: #a7b6c2;
    --dk-text-3: #8a9ba8;
    --dk-accent: #48aff0;
    --dk-teal: #5cc9c6;
    --bg-primary: var(--dk-panel);
    --bg-secondary: var(--dk-sunken);
    --bg-tertiary: var(--dk-raised);
    --light-bg: var(--dk-page);
    --text-color: var(--dk-text);
    --text-primary: var(--dk-text-strong);
    --text-secondary: var(--dk-text-2);
    --text-light: var(--dk-text-3);
    --border-color: var(--dk-border);
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.40);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(0 0 0 / 0.40);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.50), 0 4px 6px -4px rgb(0 0 0 / 0.45);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.55), 0 8px 10px -6px rgb(0 0 0 / 0.50);
}
/* <<< dark-theme:tokens */

/* Dark theme of Pando Utils — the hand-written layer.
 *
 * Every rule here starts with html[data-theme="dark"], which static/js/theme.js sets on <html> (see includes/theme_head.html),
 * so light mode cannot change. The palette (--dk-*) and the redefined light tokens are the block above. The mirror rules of
 * the stylesheets themselves are generated into the stylesheet that holds the light rule (scripts/gen_dark_theme.py); a rule
 * written here, or anywhere under html[data-theme="dark"], for the same selector wins over the generated one.
 */

/* The page. */
html[data-theme="dark"] {
    background-color: var(--dk-page);
    scrollbar-color: var(--dk-border-strong) transparent;
}

html[data-theme="dark"] body {
    background-color: var(--dk-page);
    color: var(--dk-text);
}

html[data-theme="dark"] ::selection {
    background-color: rgba(72, 175, 240, 0.35);
    color: #fff;
}

/* Native controls follow color-scheme; these give them the same look as the rest. :where() keeps the specificity low so a page's own rule for a state (error border, disabled) still wins. */
html[data-theme="dark"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]), select, textarea) {
    background-color: var(--dk-raised);
    color: var(--dk-text-strong);
    border-color: var(--dk-border-strong);
}

html[data-theme="dark"] ::placeholder {
    color: var(--dk-text-3);
    opacity: 1;
}

html[data-theme="dark"] :where(input, select, textarea):disabled {
    background-color: var(--dk-sunken);
    color: var(--dk-text-3);
}

html[data-theme="dark"] hr {
    border-color: var(--dk-border);
}

/* The top bar keeps its slate family; the logo is a black JPEG blended with mix-blend-mode: screen, so any dark backdrop works. */
html[data-theme="dark"] .navbar {
    background-color: #26323c;
    box-shadow: 0 1px 0 var(--dk-border);
}

html[data-theme="dark"] .user-info {
    color: var(--dk-text-2);
}

/* highlight.js ships a light GitHub theme from a CDN (chat, AI Protein Design): recolour its tokens with GitHub's dark ones. */
html[data-theme="dark"] .hljs {
    color: #c9d1d9;
    background: transparent;
}

html[data-theme="dark"] .hljs-comment,
html[data-theme="dark"] .hljs-quote {
    color: #8b949e;
}

html[data-theme="dark"] .hljs-keyword,
html[data-theme="dark"] .hljs-selector-tag,
html[data-theme="dark"] .hljs-literal,
html[data-theme="dark"] .hljs-doctag,
html[data-theme="dark"] .hljs-template-tag,
html[data-theme="dark"] .hljs-template-variable,
html[data-theme="dark"] .hljs-type {
    color: #ff7b72;
}

html[data-theme="dark"] .hljs-string,
html[data-theme="dark"] .hljs-regexp,
html[data-theme="dark"] .hljs-meta .hljs-string {
    color: #a5d6ff;
}

html[data-theme="dark"] .hljs-number,
html[data-theme="dark"] .hljs-attr,
html[data-theme="dark"] .hljs-attribute,
html[data-theme="dark"] .hljs-variable,
html[data-theme="dark"] .hljs-selector-attr,
html[data-theme="dark"] .hljs-selector-class,
html[data-theme="dark"] .hljs-selector-id,
html[data-theme="dark"] .hljs-meta {
    color: #79c0ff;
}

html[data-theme="dark"] .hljs-title,
html[data-theme="dark"] .hljs-section,
html[data-theme="dark"] .hljs-name {
    color: #d2a8ff;
}

html[data-theme="dark"] .hljs-built_in,
html[data-theme="dark"] .hljs-symbol,
html[data-theme="dark"] .hljs-bullet,
html[data-theme="dark"] .hljs-link {
    color: #ffa657;
}

html[data-theme="dark"] .hljs-addition {
    color: #aff5b4;
    background-color: #033a16;
}

html[data-theme="dark"] .hljs-deletion {
    color: #ffdcd7;
    background-color: #67060c;
}

/* Content that is white by nature (a matplotlib or RDKit picture, a documentation screenshot, a model-written HTML chart in an
   iframe) stays white and sits in the dark page as a card. Put the class on the element or on a wrapper around it. */
html[data-theme="dark"] .paper-surface {
    background-color: #fff;
    color: #0f172a;
    color-scheme: light;
    border: 1px solid var(--dk-border-strong);
    border-radius: 8px;
}

/* The hardware-kind label of the Resources popup is coloured by a hue that is chosen for a white page (--sf-hue: #2a78d6 is 3.3:1 on a dark panel); lift it toward white. */
html[data-theme="dark"] .sf-res-family-kind {
    color: color-mix(in srgb, var(--sf-hue) 62%, white);
}

/* Native file pickers: Chromium draws the button as a flat grey chip; give it the palette of the other secondary buttons. */
html[data-theme="dark"] input[type="file"]::file-selector-button {
    margin-right: 0.6rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--dk-border-strong);
    border-radius: 6px;
    background-color: var(--dk-raised);
    color: var(--dk-text);
    font: inherit;
    cursor: pointer;
}

html[data-theme="dark"] input[type="file"]::file-selector-button:hover {
    background-color: var(--dk-hover);
}

/* A button with no border of its own keeps the browser's 2px outset border, which turns white in a dark page; use the palette's. :where() keeps it weaker than any page rule. */
html[data-theme="dark"] :where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
    border-color: var(--dk-border-strong);
}

/* Keyboard focus: a visible accent ring wherever a page did not draw its own. */
html[data-theme="dark"] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--dk-accent);
    outline-offset: 2px;
}

/* highlight.js tokens the block above did not cover (interpolation in template strings and f-strings, operators, punctuation, emphasis). */
html[data-theme="dark"] .hljs-subst,
html[data-theme="dark"] .hljs-operator,
html[data-theme="dark"] .hljs-punctuation,
html[data-theme="dark"] .hljs-property,
html[data-theme="dark"] .hljs-params {
    color: #c9d1d9;
}

html[data-theme="dark"] .hljs-emphasis {
    color: #c9d1d9;
    font-style: italic;
}

html[data-theme="dark"] .hljs-strong {
    color: #c9d1d9;
    font-weight: bold;
}

html[data-theme="dark"] .hljs-formula {
    background-color: #1f2933;
}

/* App icons are SVG files with a dark-scheme block of their own (static/img/*-icon.svg): the page's color-scheme reaches an <img> SVG as prefers-color-scheme.
   With "normal" Chromium falls back to the operating system, so a light page on a dark system would get the dark icons; light says it outright. It changes
   nothing else: normal already renders as light. */
html[data-theme="light"] {
    color-scheme: light;
}

/* Dialogs: the same panel colour as the cards behind them, so they separate by edge, depth and a darker backdrop. */
html[data-theme="dark"] :is(.modal-content, .team-identity-modal-panel, .home-dashboard__share-card, .dlprep-card, .parallel-cost-dialog-box, .ve-modal-box, .admin-modal) {
    border: 1px solid var(--dk-border-strong);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] :is(.modal-overlay, .admin-modal-overlay) {
    background-color: rgba(7, 11, 15, 0.72);
}

/* Documentation call-outs: a box has to read as a box. Info gets a clearer blue tint; the neutral call-out is one step above the page. */
html[data-theme="dark"] .docs-content .docs-callout {
    background-color: var(--dk-raised);
}

html[data-theme="dark"] .docs-info {
    background-color: #1b3350;
}


/* Leftovers of the page-by-page sweep: controls that kept a browser or Bootstrap default (or a light-page colour) in dark. Each rule is dark-only and changes colours,
   never a size, so the layout is the same in both themes. */

/* Secondary buttons: Bootstrap grey, and where a page leaves the border to the browser a 2px outset bevel (a steel-blue top-left edge and a black bottom-right edge on a
   dark card). The bevel is made transparent and a 1px outline inside the box draws the edge, so no border width changes (some pages give these buttons no border at all).
   Same family as the dialog footers above (`.modal-footer .btn-secondary`, whose own rule is more specific and wins). :where() leaves a page's own rule the win. */
html[data-theme="dark"] :where(.btn-secondary) {
    background-color: var(--dk-raised);
    color: var(--dk-text);
    border-color: transparent;
    outline: 1px solid #374b62;
    outline-offset: -1px;
}

html[data-theme="dark"] :where(.btn-secondary):hover {
    background-color: var(--dk-hover);
}

html[data-theme="dark"] .btn-outline-secondary {
    border-color: transparent;
}

/* The "Select folder..." buttons of the batch pages paint #6c757d inline; an inset ring gives them the edge without adding a pixel. */
html[data-theme="dark"] #fastq-select-folder-btn[style*="#6c757d"] {
    background: var(--dk-raised) !important;
    color: var(--dk-text) !important;
    box-shadow: inset 0 0 0 1px #374b62;
}

/* Navbar buttons that kept the light theme's #4a4a4a: one step above the bar instead of a neutral grey. */
html[data-theme="dark"] .navbar-links a.github-btn,
html[data-theme="dark"] .navbar-links .theme-toggle {
    background-color: var(--dk-border-strong);
}

html[data-theme="dark"] .navbar-links a.github-btn:hover,
html[data-theme="dark"] .navbar-links .theme-toggle:hover {
    background-color: var(--primary-color);
}

/* Scheduled Tasks toggle: the generated twin turned the knob dark but the #ccc track stayed, a glaring pill in a dark table. */
html[data-theme="dark"] .sched-toggle-slider {
    background: var(--dk-border-strong);
}

html[data-theme="dark"] .sched-toggle-slider::before {
    background: var(--dk-text);
}

/* A native fieldset draws a 2px groove in the browser's grey; the groove's inner half is a lighter shade of whatever colour it is given, so it is made solid (the width stays). */
html[data-theme="dark"] .sched-settings-field {
    border-style: solid;
    border-color: var(--dk-border-strong);
}

/* Native checkboxes, radios and sliders: the brand teal (the one pandodb_query.css and the pKa page already use, so no two teals sit side by side) instead of the browser's pale blue. */
html[data-theme="dark"] :where(input[type="checkbox"], input[type="radio"], input[type="range"]) {
    accent-color: var(--pando-teal);
}

/* Links without a class in an info box have no colour of their own and showed the browser's lavender. */
html[data-theme="dark"] .info-box a:not([class]) {
    color: var(--dk-accent);
}