/* ============================================================================================ */
/* DARK THEME: BASE                                                                              */
/* Document, typography, links and Bootstrap/Pixel Admin color utilities.                        */
/* Every rule is scoped to html[data-theme="dark"]; colors come from css/theme/tokens.css.       */
/* ============================================================================================ */

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

/* TYPOGRAPHY: :where() keeps these at element-level specificity, so they only replace         */
/* Bootstrap's element defaults and never outrank a component or page class.                   */
:where(html[data-theme="dark"]) :where(h1, h2, h3, h4, h5, h6, legend, label) {
    color: inherit;
}
:where(html[data-theme="dark"]) a {
    color: var(--app-link);
}
:where(html[data-theme="dark"]) a:hover {
    color: var(--app-link-hover);
}
html[data-theme="dark"] hr {
    border-color: var(--app-border);
    color: var(--app-border);
    opacity: 1;
}
html[data-theme="dark"] code {
    color: #f78fb3;
}
html[data-theme="dark"] pre,
html[data-theme="dark"] kbd {
    background-color: var(--app-surface-2);
    border-color: var(--app-border);
    color: var(--app-text);
}
html[data-theme="dark"] mark,
html[data-theme="dark"] .mark {
    background-color: #5c4d12;
    color: var(--app-text-strong);
}
html[data-theme="dark"] small,
html[data-theme="dark"] .small {
    color: inherit;
}

/* COLOR UTILITIES ---------------------------------------------------------------------------- */
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .help-block,
html[data-theme="dark"] .form-text {
    color: var(--app-text-muted) !important;
}
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-black,
html[data-theme="dark"] .text-body {
    color: var(--app-text) !important;
}
html[data-theme="dark"] .text-secondary {
    color: var(--app-text-secondary) !important;
}
html[data-theme="dark"] .text-primary {
    color: var(--app-link) !important;
}
html[data-theme="dark"] .text-info {
    color: #6edff6 !important;
}
html[data-theme="dark"] .text-success {
    color: #75b798 !important;
}
html[data-theme="dark"] .text-danger {
    color: #ea868f !important;
}
html[data-theme="dark"] .text-warning {
    color: #ffda6a !important;
}
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-body,
html[data-theme="dark"] .background-white {
    background-color: var(--app-surface) !important;
}
html[data-theme="dark"] .bg-light {
    background-color: var(--app-surface-1) !important;
    color: var(--app-text);
}
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end,
html[data-theme="dark"] .border-light {
    border-color: var(--app-border) !important;
}
html[data-theme="dark"] .shadow,
html[data-theme="dark"] .shadow-sm {
    box-shadow: 0 0.125rem 0.5rem var(--app-shadow-color) !important;
}

/* CLOSE BUTTONS: Bootstrap draws the X as a dark SVG, so invert it --------------------------- */
html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}
html[data-theme="dark"] button.close,
html[data-theme="dark"] .close,
html[data-theme="dark"] .bootbox-close-button {
    color: var(--app-text);
    text-shadow: none;
    opacity: 0.75;
}

/* SPLASH / LOADING --------------------------------------------------------------------------- */
html[data-theme="dark"] .splash .message {
    color: var(--app-text);
}
html[data-theme="dark"] .modal-backdrop.show {
    opacity: 0.7;
}