/* ────────────────────────────────────────────────────────────────────────
 * Dark mode (BAS-154).
 *
 * Linked last, after `app.css` and `theme.css`, so it outranks them on ties.
 *
 * Three things live here and nothing else:
 *
 *  1. the dark values for the `--bu-*` tokens that `App/theme.tsx` reads,
 *     keyed off `body.bu-dark`. Every `Box` that takes its colour from
 *     `useTheme()` follows from this block alone.
 *  2. dark values for the `--chat-*` tokens in `chat.css`.
 *  3. one override per place where our own stylesheets pin a light colour
 *     onto a Blueprint selector. Blueprint 5 ships `bp5-dark`, which the
 *     toggle adds alongside `bu-dark`, but `:root body .bp5-x` in
 *     `theme.css` outranks `.bp5-dark .bp5-x`, so those rules would
 *     otherwise keep their light values. Each one below is listed with the
 *     rule it answers.
 *
 * Hardcoded hex in component files is NOT handled here and cannot be: `Box`
 * is aphrodite, and its generated class names are hashes. Those call sites
 * have to move to tokens at the source. See the scope note for the list.
 * ──────────────────────────────────────────────────────────────────────── */

body.bu-dark {
    /* Blueprint's dark greys, so our surfaces and Blueprint's agree.
     * BLACK #111418 / DARK_GRAY1 #1C2127 / DARK_GRAY2 #252A31 /
     * DARK_GRAY3 #2F343C / DARK_GRAY4 #383E47 / DARK_GRAY5 #404854. */
    --bu-background: #252a31;
    --bu-page-background: #1c2127;
    --bu-page-background-dark: #111418;
    --bu-filled-background: #2f343c;
    --bu-surface: #2f343c;
    --bu-dark-background: #111418;
    --bu-danger-background: #000000;

    --bu-border: #404854;
    --bu-border-light: #383e47;
    --bu-border-dark: #404854;
    --bu-inactive: #8f99a8;

    /* Brand blues are too dark to sit on a dark plane, so these step up to
     * Blueprint's dark-theme blues rather than keeping the brand values. */
    --bu-accent: #8abbff;
    --bu-primary: #4c90f0;
    --bu-secondary: #2d72d2;

    --bu-intent-primary: #4c90f0;
    --bu-intent-action: #4c90f0;
    --bu-intent-success: #32a467;
    --bu-intent-warning: #ec9a3c;
    --bu-intent-danger: #e76a6e;
    --bu-intent-none: #404854;

    --bu-text-light: #abb3bf;
    --bu-text-medium: #d3d8de;
    --bu-text-dark: #f6f7f9;
    --bu-text-danger: #fa999c;

    /* Elevation reads as depth against black, not against blue-grey. */
    --bu-shadow-ring: rgba(17, 20, 24, 0.6);
    --bu-shadow-drop: rgba(17, 20, 24, 0.4);

    /* Local to this file: the two neutrals the overrides below reach for. */
    --bu-hover: rgba(255, 255, 255, 0.08);
    --bu-active: rgba(255, 255, 255, 0.14);
    --bu-ring: rgba(255, 255, 255, 0.2);

    /*
     * Tints. Component files reached for these as literals, so they are
     * tokens now too. The light fallbacks stay at each call site, so these
     * only have to say what dark is.
     *
     * A tint is an alpha over the surface rather than a fixed colour: a
     * solid pastel reads as a sticker on a dark card, and the same token
     * then works on both the card and the plane behind it.
     */
    --bu-selected: rgba(76, 144, 240, 0.28);
    --bu-selected-soft: rgba(76, 144, 240, 0.18);
    --bu-success-subtle: rgba(50, 164, 103, 0.22);
    --bu-danger-subtle: rgba(231, 106, 110, 0.22);
    --bu-warning-subtle: rgba(236, 154, 60, 0.22);
    --bu-success-border: rgba(50, 164, 103, 0.5);
    --bu-hover-solid: #2f343c;
    --bu-neutral-subtle: rgba(143, 153, 168, 0.22);
    --bu-accent-subtle: rgba(147, 112, 219, 0.26);
}

/* The page behind the app, for overscroll and for the frame before React
 * mounts. `app.css` sets `body { background-color: #fff }`. */
body.bu-dark {
    background-color: #1c2127;
    color-scheme: dark;
}

/* ── chat.css tokens ─────────────────────────────────────────────────── */

body.bu-dark .chat-theme,
body.bu-dark .chat-transcript,
body.bu-dark .chat-composer-wrap {
    --chat-bg: #252a31;
    --chat-user-bg: #2f343c;
    --chat-fg: #f6f7f9;
    --chat-muted: #abb3bf;
    --chat-accent: #4c90f0;
    --chat-border: rgba(255, 255, 255, 0.12);
    --chat-border-strong: rgba(255, 255, 255, 0.2);
    --chat-subtle: #2f343c;
    --chat-danger: #e76a6e;
    --chat-danger-subtle: rgba(231, 106, 110, 0.15);
    --chat-warning: #ec9a3c;
    --chat-warning-subtle: rgba(236, 154, 60, 0.15);
}

/* ── theme.css: light values pinned onto Blueprint ───────────────────── */

/* `:root body .bp5-button:not(.bp5-minimal)...` sets a light fill, a light
 * hover, a light active and a dark inset ring on every default button. */
:root
    body.bu-dark
    .bp5-button:not(.bp5-minimal):not([class*='bp5-intent-']):not(
        :disabled
    ):not(.bp5-disabled),
:root body.bu-dark .bp5-html-select select:not(:disabled) {
    background-color: #383e47;
    color: #f6f7f9;
}

:root
    body.bu-dark
    .bp5-button:not(.bp5-minimal):not([class*='bp5-intent-']):not(
        :disabled
    ):not(.bp5-disabled):hover,
:root body.bu-dark .bp5-html-select select:not(:disabled):hover {
    background-color: #404854;
}

:root
    body.bu-dark
    .bp5-button:not(.bp5-minimal):not([class*='bp5-intent-']):not(
        :disabled
    ):not(.bp5-disabled):active,
:root
    body.bu-dark
    .bp5-button:not(.bp5-minimal):not([class*='bp5-intent-']):not(
        :disabled
    ):not(.bp5-disabled).bp5-active {
    background-color: #2f343c;
}

:root
    body.bu-dark
    .bp5-button:not(.bp5-minimal):not(:disabled):not(.bp5-disabled),
:root body.bu-dark .bp5-html-select select:not(:disabled) {
    box-shadow: inset 0 0 0 1px var(--bu-ring);
}

/* `:root body .new-table-frame { border: ... #cecfd0 !important }` */
:root body.bu-dark .new-table-frame {
    border-color: #404854 !important;
}

/* `:root body .plot-card { border: 1px solid #cecfd0 }` and
 * `:root body .plot-title { color: black }` */
:root body.bu-dark .plot-card {
    border-color: #404854;
}

:root body.bu-dark .plot-title {
    color: #f6f7f9;
}

/* The segmented control is drawn by hand in `theme.css`, light throughout. */
:root body.bu-dark .bp5-segmented-control {
    background-color: #1c2127;
    border-color: var(--bu-ring);
}

:root body.bu-dark .bp5-segmented-control > .bp5-button {
    background-color: transparent;
    color: #abb3bf;
}

:root body.bu-dark .bp5-segmented-control > .bp5-button + .bp5-button {
    border-left-color: var(--bu-ring);
}

:root
    body.bu-dark
    .bp5-segmented-control
    > .bp5-button.bp5-minimal:hover:not(:disabled) {
    background-color: var(--bu-hover) !important;
}

/* The grouped table header: dark ink, a grey icon and a light hover. */
:root body.bu-dark .table-header-group strong {
    color: #f6f7f9;
}

:root body.bu-dark .table-header-group .bp5-icon svg {
    color: #abb3bf;
}

:root body.bu-dark .table-header-group[tabindex]:hover {
    background-color: var(--bu-hover) !important;
}

/* `:root body .page-toolbar ~ .page-wrapper... { border-top: ... #e5e7eb }` */
:root body.bu-dark .page-toolbar ~ .page-wrapper:not(:has(> .new-table)) {
    border-top-color: #383e47;
}

/* ── management/styles/app.css ───────────────────────────────────────── */

body.bu-dark .context-item:hover {
    background-color: var(--bu-hover) !important;
}

body.bu-dark .page-description {
    color: #abb3bf !important;
}

body.bu-dark .bp5-input:disabled,
body.bu-dark .bp5-input.bp5-disabled {
    color: rgba(171, 179, 191, 0.6);
}

body.bu-dark .autocomplete-container {
    background-color: #2f343c;
    border-top-color: #404854;
    box-shadow: 0 2px 4px rgba(17, 20, 24, 0.6);
}

body.bu-dark .user-group-menu .bp5-tree-node.dimmed {
    background: rgba(255, 255, 255, 0.04);
}

body.bu-dark .user-group-menu .bp5-tree-node-label::after {
    background: #404854;
}

/* `#bu-report-view-content` is white only inside `@media print`, which is
 * right: a printed report is on paper. Nothing to do here. The charts in it
 * are Nivo, which themes from a JS prop rather than CSS, so they are still
 * light on screen. */

body.bu-dark .plot-container > div {
    border-color: var(--bu-ring);
}

/* The Connect API guide is a standalone light document. */
body.bu-dark .connect-guide {
    color: #d3d8de;
}

body.bu-dark .connect-guide h1,
body.bu-dark .connect-guide h2,
body.bu-dark .connect-guide h3 {
    color: #f6f7f9;
}

body.bu-dark .connect-guide h2 {
    border-top-color: #383e47;
}

body.bu-dark .connect-guide a {
    color: #8abbff;
}

body.bu-dark .connect-guide code,
body.bu-dark .connect-guide pre,
body.bu-dark .connect-guide th {
    background-color: #2f343c;
    border-color: #404854;
}

body.bu-dark .connect-guide td {
    border-color: #404854;
}

body.bu-dark .connect-guide blockquote {
    border-left-color: #404854;
}

/* ── shell.css ───────────────────────────────────────────────────────── */

body.bu-dark .shell-rail-nested--ruled.shell-rail-nested--open {
    border-left-color: #383e47;
}

body.bu-dark .shell-resizer:hover::after,
body.bu-dark .shell-resizer:focus-visible::after,
body.bu-dark .shell-resizer--active::after {
    background-color: rgba(255, 255, 255, 0.24);
}

/* The live dot's halo is the card it sits on. */
body.bu-dark .shell-icon-label--dot > .bp5-icon::after {
    border-color: #252a31;
}

/* ── ramp/frontend/vendor/styles/app.css ─────────────────────────────── */

/* The vendor portal is its own SPA with no Blueprint and a four-rule
 * stylesheet, so this is the whole of it. */

body.bu-dark {
    color: #f6f7f9;
}

body.bu-dark a {
    color: #8abbff;
}

body.bu-dark a:hover {
    color: #99c4ff;
}