@charset "utf-8";

/****************
 * theme-abyss.css - the abyss colour theme, after VS Code's Abyss: a navy-black ground,
 * steel-blue text, deep blue chrome and gold headings.
 *
 * Loaded and linked exactly as theme-blue.css is (see its header for why a theme is a file of its
 * own): after style.css on the application's pages, after pci-frame.css inside the PCI frame, and
 * in resources/xsl/raw.xsl.
 *
 * A dark theme needs more than the tokens. Bootstrap keys a few component rules on the literal
 * [data-bs-theme=dark] (the select's arrow, a switch's knob, the navbar toggler, the accordion
 * chevron, the close button's filter), and so does style.css for the TUI tree and grid filter.
 * None of those match "abyss", so each is restated below for this theme. Scripts that need to
 * know whether a theme is dark read the computed color-scheme, which this sheet declares.
 ****************/

[data-bs-theme="abyss"] {
    color-scheme: dark;
    /* Read back by the PCI bridge to tell that this sheet is loaded. See theme-blue.css. */
    --aib-theme-name: abyss;
    --bs-body-color: #6688cc;
    --bs-body-color-rgb: 102, 136, 204;
    --bs-body-bg: #000c18;
    --bs-body-bg-rgb: 0, 12, 24;
    --bs-emphasis-color: #bbccee;
    --bs-emphasis-color-rgb: 187, 204, 238;
    --bs-secondary-color: rgba(102, 136, 204, 0.8);
    --bs-secondary-color-rgb: 102, 136, 204;
    --bs-secondary-bg: #10192c;
    --bs-secondary-bg-rgb: 16, 25, 44;
    --bs-tertiary-color: rgba(102, 136, 204, 0.55);
    --bs-tertiary-color-rgb: 102, 136, 204;
    --bs-tertiary-bg: #060f22;
    --bs-tertiary-bg-rgb: 6, 15, 34;
    --bs-heading-color: #ddbb88;
    --bs-link-color: #5a9bff;
    --bs-link-color-rgb: 90, 155, 255;
    --bs-link-hover-color: #8cbaff;
    --bs-link-hover-color-rgb: 140, 186, 255;
    /* A muted primary for bg-primary, border-primary and the grids' pagination. White on it, and
       it on the background, both stay above 4:1. */
    --bs-primary: #4a6fb0;
    --bs-primary-rgb: 74, 111, 176;
    --bs-code-color: #f280d0;
    --bs-highlight-color: #ffeebb;
    --bs-highlight-bg: #770811;
    --bs-border-color: #24365a;
    --bs-border-color-translucent: rgba(102, 136, 204, 0.2);
    --bs-primary-text-emphasis: #8cbaff;
    --bs-secondary-text-emphasis: #8fa4cc;
    --bs-success-text-emphasis: #4ccc6c;
    --bs-info-text-emphasis: #5fc8e8;
    --bs-warning-text-emphasis: #ddbb88;
    --bs-danger-text-emphasis: #f07080;
    --bs-light-text-emphasis: #a8b8dd;
    --bs-dark-text-emphasis: #6688cc;
    --bs-primary-bg-subtle: #08286b;
    --bs-secondary-bg-subtle: #10192c;
    --bs-success-bg-subtle: #0a2a1a;
    --bs-info-bg-subtle: #062a3a;
    --bs-warning-bg-subtle: #2e2408;
    --bs-danger-bg-subtle: #2e0a10;
    --bs-light-bg-subtle: #10192c;
    --bs-dark-bg-subtle: #000610;
    --bs-primary-border-subtle: #2b4a8a;
    --bs-secondary-border-subtle: #24365a;
    --bs-success-border-subtle: #1a5a32;
    --bs-info-border-subtle: #145a75;
    --bs-warning-border-subtle: #6a5420;
    --bs-danger-border-subtle: #770811;
    --bs-light-border-subtle: #24365a;
    --bs-dark-border-subtle: #10192c;
    --bs-form-valid-color: #22aa44;
    --bs-form-valid-border-color: #22aa44;
    --bs-form-invalid-color: #f07080;
    --bs-form-invalid-border-color: #f07080;
    /* Bootstrap's dark navbar values, which it also sets only on [data-bs-theme=dark]. */
    --bs-navbar-color: rgba(187, 204, 238, 0.7);
    --bs-navbar-hover-color: rgba(187, 204, 238, 0.9);
    --bs-navbar-disabled-color: rgba(187, 204, 238, 0.3);
    --bs-navbar-active-color: #bbccee;
    --bs-navbar-brand-color: #bbccee;
    --bs-navbar-brand-hover-color: #ffffff;
    --bs-navbar-toggler-border-color: rgba(187, 204, 238, 0.15);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28187, 204, 238, 0.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
}

/* View Source (raw.xsl): Abyss's own syntax colours. :root[...] so that they outrank the
   listing's inline :root defaults, which come after this sheet. */
:root[data-bs-theme="abyss"] {
    --aib-xml-tag: #4499ff;
    --aib-xml-attr: #ddbb88;
    --aib-xml-value: #22aa44;
    --aib-xml-ns: #9966b8;
    --aib-xml-comment: #384887;
    --aib-xml-pi: #f280d0;
}

/* Bootstrap's dark-only component rules, restated. */
[data-bs-theme="abyss"] .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236688cc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
[data-bs-theme="abyss"] .form-switch .form-check-input:not(:checked):not(:focus) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28102, 136, 204, 0.5%29'/%3e%3c/svg%3e");
}
[data-bs-theme="abyss"] .accordion-button::after {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235a9bff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235a9bff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
}

/* Abyss's buttons: a muted slate rather than Bootstrap's bright blue. */
[data-bs-theme="abyss"] .btn-primary {
    --bs-btn-color: #e0e8ff;
    --bs-btn-bg: #2b3c5d;
    --bs-btn-border-color: #3a5079;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #3a5079;
    --bs-btn-hover-border-color: #4a6290;
    --bs-btn-focus-shadow-rgb: 89, 111, 153;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #445c8a;
    --bs-btn-active-border-color: #596f99;
    --bs-btn-disabled-color: rgba(224, 232, 255, 0.6);
    --bs-btn-disabled-bg: #2b3c5d;
    --bs-btn-disabled-border-color: #2b3c5d;
}
[data-bs-theme="abyss"] .btn-outline-primary {
    --bs-btn-color: #5a9bff;
    --bs-btn-border-color: #3a5079;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #2b3c5d;
    --bs-btn-hover-border-color: #3a5079;
    --bs-btn-focus-shadow-rgb: 89, 111, 153;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #445c8a;
    --bs-btn-active-border-color: #596f99;
    --bs-btn-disabled-color: #3a5079;
    --bs-btn-disabled-border-color: #3a5079;
}
[data-bs-theme="abyss"] .form-control:focus,
[data-bs-theme="abyss"] .form-select:focus,
[data-bs-theme="abyss"] .form-check-input:focus,
[data-bs-theme="abyss"] .ts-wrapper.focus .ts-control {
    border-color: #596f99;
    box-shadow: 0 0 0 .25rem rgba(89, 111, 153, 0.35);
}
[data-bs-theme="abyss"] .form-control,
[data-bs-theme="abyss"] .form-select,
[data-bs-theme="abyss"] .ts-control {
    background-color: #181f2f;
}

/* style.css's dark-only TUI tree and grid filter rules, restated. */
[data-bs-theme="abyss"] .tui-tree-wrap {
    background-color: var(--bs-body-bg);
}
[data-bs-theme="abyss"] .tui-tree-text {
    color: var(--bs-secondary-color);
}
[data-bs-theme="abyss"] .tui-tree-opened > .tui-tree-content-wrapper .tui-tree-text,
[data-bs-theme="abyss"] .tui-tree-root > .tui-tree-opened > .tui-tree-content-wrapper .tui-tree-text,
[data-bs-theme="abyss"] .tui-tree-toggle-btn {
    color: var(--bs-body-color);
}
[data-bs-theme="abyss"] .tui-tree-content-wrapper:hover,
[data-bs-theme="abyss"] .tui-tree-hover > .tui-tree-content-wrapper {
    background-color: #061940;
}
[data-bs-theme="abyss"] .tui-tree-selected > .tui-tree-content-wrapper {
    background-color: #08286b;
}
[data-bs-theme="abyss"] .tui-grid-height-resize-handle {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
}
[data-bs-theme="abyss"] .tui-grid-filter-container {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
[data-bs-theme="abyss"] .tui-grid-filter-dropdown {
    border-color: var(--bs-border-color);
}
[data-bs-theme="abyss"] .tui-grid-filter-dropdown select,
[data-bs-theme="abyss"] .tui-grid-filter-container .tui-grid-filter-input {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}
[data-bs-theme="abyss"] .tui-grid-filter-input::placeholder {
    color: var(--bs-secondary-color);
}
[data-bs-theme="abyss"] .tui-grid-filter-comparator span,
[data-bs-theme="abyss"] .tui-grid-filter-list-container .tui-grid-filter-list-item {
    color: var(--bs-body-color);
}
[data-bs-theme="abyss"] .tui-grid-filter-list-container .tui-grid-filter-list {
    border-color: var(--bs-border-color);
}
[data-bs-theme="abyss"] .tui-grid-filter-list .tui-grid-filter-list-item-checked {
    background-color: var(--bs-primary-bg-subtle);
}

/* The application chrome: Abyss's activity bar and title bar. */
[data-bs-theme="abyss"] #aib-header {
    background-color: #051336;
    border-bottom-color: #08286b;
    color: #bbccee;
}
[data-bs-theme="abyss"] #aib-header a,
[data-bs-theme="abyss"] #aib-header .btn,
[data-bs-theme="abyss"] #aib-header .navbar-brand {
    color: #bbccee;
}
[data-bs-theme="abyss"] #aib-header .dropdown-menu {
    --bs-dropdown-bg: #10192c;
    --bs-dropdown-border-color: #24365a;
    --bs-dropdown-link-color: #bbccee;
    --bs-dropdown-link-hover-bg: #061940;
    --bs-dropdown-link-hover-color: #ffffff;
    --bs-dropdown-link-active-bg: #08286b;
    --bs-dropdown-link-active-color: #ffffff;
}
[data-bs-theme="abyss"] ::selection {
    background-color: #770811;
    color: #ffeebb;
}

/* The essay editor: Toast UI's dark sheet (applied by extended-text.js when the theme is dark)
   in its own neutral greys, recoloured to this palette. */
[data-bs-theme="abyss"] .toastui-editor-dark .toastui-editor-md-container,
[data-bs-theme="abyss"] .toastui-editor-dark .toastui-editor-ww-container,
[data-bs-theme="abyss"] .toastui-editor-dark .toastui-editor-mode-switch,
[data-bs-theme="abyss"] .toastui-editor-dark .toastui-editor-popup,
[data-bs-theme="abyss"] .toastui-editor-dark .toastui-editor-context-menu {
    background-color: #000c18;
}
[data-bs-theme="abyss"] .toastui-editor-dark .toastui-editor-defaultUI-toolbar,
[data-bs-theme="abyss"] .toastui-editor-dark .toastui-editor-dropdown-toolbar {
    background-color: #10192c;
    border-color: #24365a;
}
[data-bs-theme="abyss"] .toastui-editor-dark .toastui-editor-toolbar-icons {
    background-color: #10192c;
    border-color: #10192c;
}
[data-bs-theme="abyss"] .toastui-editor-dark.toastui-editor-defaultUI {
    border-color: #24365a;
}
[data-bs-theme="abyss"] .toastui-editor-dark .ProseMirror,
[data-bs-theme="abyss"] .toastui-editor-dark .toastui-editor-contents p {
    color: #bbccee;
}