:root,
[data-coreui-theme=light] {
    --bg-primary: #004EAA;
    --cui-blue: #0D6EFD;
    --cui-indigo: #6610F2;
    --cui-purple: #6F42C1;
    --cui-pink: #D63384;
    --cui-red: #DC3545;
    --cui-orange: #FD7E14;
    --cui-yellow: #FFC107;
    --cui-green: #198754;
    --cui-teal: #20C997;
    --cui-cyan: #0DCAF0;
    --cui-black: #080A0C;
    --cui-white: #FFFFFF;
    --cui-gray: #6D7D9C;
    --cui-gray-dark: #323A49;
    --cui-gray-100: #F3F4F7;
    --cui-gray-200: #E7EAEE;
    --cui-gray-300: #DBDFE6;
    --cui-gray-400: #CFD4DE;
    --cui-gray-500: #AAB3C5;
    --cui-gray-600: #6D7D9C;
    --cui-gray-700: #4A566D;
    --cui-gray-800: #323A49;
    --cui-gray-900: #212631;
    --cui-primary: #004EAA;
    --cui-secondary: #6B7785;
    --cui-success: #6ABF4B;
    --cui-info: #2ECDDC;
    --cui-warning: #FFC600;
    --cui-danger: #D40019;
    --cui-light: #F3F4F7;
    --cui-dark: #212631;

    --cui-primary-rgb: 0, 78, 170;
    --cui-secondary-rgb: 107, 119, 133;
    --cui-success-rgb: 106, 191, 75;
    --cui-info-rgb: 46, 205, 220;
    --cui-warning-rgb: 255, 198, 0;
    --cui-danger-rgb: 212, 0, 25;
    --cui-light-rgb: 243, 244, 247;
    --cui-dark-rgb: 33, 38, 49;

    --cui-primary-text-emphasis: #003A80;
    --cui-secondary-text-emphasis: #505A64;
    --cui-success-text-emphasis: #4F8F38;
    --cui-info-text-emphasis: #239AA5;
    --cui-warning-text-emphasis: #BF9400;
    --cui-danger-text-emphasis: #9F0012;
    --cui-light-text-emphasis: #4A566D;
    --cui-dark-text-emphasis: #323A49;

    --cui-primary-bg-subtle: #BFD2EA;
    --cui-secondary-bg-subtle: #DADDE1;
    --cui-success-bg-subtle: #DAEFC9;
    --cui-info-bg-subtle: #CBEFF5;
    --cui-warning-bg-subtle: #FFF1BF;
    --cui-danger-bg-subtle: #F5BFC7;
    --cui-light-bg-subtle: #F9F9FB;
    --cui-dark-bg-subtle: #CFD4DE;

    --cui-primary-border-subtle: #80A6D5;
    --cui-secondary-border-subtle: #B5BBC2;
    --cui-success-border-subtle: #B5DFA5;
    --cui-info-border-subtle: #97E6EE;
    --cui-warning-border-subtle: #FFE380;
    --cui-danger-border-subtle: #EA8094;
    --cui-light-border-subtle: #E7EAEE;
    --cui-dark-border-subtle: #AAB3C5;

    --cui-white-rgb: 255, 255, 255;
    --cui-black-rgb: 8, 10, 12;
    --cui-primary-start: #004EAA;
    --cui-primary-stop: #004387;
    --cui-secondary-start: #6B7785;
    --cui-secondary-stop: #5C6672;
    --cui-success-start: #6ABF4B;
    --cui-success-stop: #5BA841;
    --cui-info-start: #2ECDDC;
    --cui-info-stop: #28B3C0;
    --cui-warning-start: #FFC600;
    --cui-warning-stop: #D6A800;
    --cui-danger-start: #D40019;
    --cui-danger-stop: #B30015;
    --cui-light-start: #FFFFFF;
    --cui-light-stop: #E3E8ED;
    --cui-dark-start: #3C4B64;
    --cui-dark-stop: #212333;

    --cui-body-color: rgba(37, 42, 54, 0.95);
    --cui-body-bg: #FFFFFF;
    --cui-emphasis-color: #080A0C;
    --cui-secondary-color: rgba(37, 42, 54, 0.68);
    --cui-secondary-bg: #E7EAEE;
    --cui-tertiary-color: rgba(37, 42, 54, 0.38);
    --cui-tertiary-bg: #F3F4F7;

    --cui-body-color-rgb: 37, 42, 54;
    --cui-body-bg-rgb: 255, 255, 255;
    --cui-emphasis-color-rgb: 8, 10, 12;
    --cui-secondary-color-rgb: 37, 42, 54;
    --cui-secondary-bg-rgb: 231, 234, 238;
    --cui-tertiary-color-rgb: 37, 42, 54;
    --cui-tertiary-bg-rgb: 243, 244, 247;

    --cui-body-color-dark: rgba(255, 255, 255, 0.87);
    --cui-body-bg-dark: #212631;
    --cui-emphasis-color-dark: #FFFFFF;
    --cui-secondary-color-dark: rgba(255, 255, 255, 0.60);
    --cui-secondary-bg-dark: #323A49;
    --cui-tertiary-color-dark: rgba(255, 255, 255, 0.38);
    --cui-tertiary-bg-dark: #29303D;
    --cui-link-color: #004EAA;
    --cui-link-hover-color: #80A6D5;
    --cui-code-color: #D63384;
    --cui-border-color: #DBDFE6;
    --cui-border-color-translucent: rgba(8, 10, 12, 0.17);
    --cui-focus-ring-color: rgba(88, 86, 214, 0.25);
    --cui-form-valid-color: #6ABF4B;
    --cui-form-invalid-color: #D40019;
}

[data-coreui-theme=dark] {
    color-scheme: dark;
    --cui-body-color: rgba(255, 255, 255, 0.87);
    --cui-body-bg: #212631;
    --cui-emphasis-color: #FFFFFF;
    --cui-secondary-color: rgba(255, 255, 255, 0.60);
    --cui-secondary-bg: #323A49;
    --cui-tertiary-color: rgba(255, 255, 255, 0.38);
    --cui-tertiary-bg: #29303D;
    --cui-primary: #004EAA;
    --cui-success: #6ABF4B;
    --cui-info: #2ECDDC;
    --cui-warning: #FFC600;
    --cui-danger: #D40019;
    --cui-primary-text-emphasis: #003A80;
    --cui-success-text-emphasis: #4F8F38;
    --cui-info-text-emphasis: #239AA5;
    --cui-warning-text-emphasis: #BF9400;
    --cui-danger-text-emphasis: #9F0012;
    --cui-border-color: #323A49;
    --cui-border-color-translucent: rgba(255, 255, 255, 0.10);
    --cui-link-color: #5E5CCF;
    --cui-link-hover-color: #7E7CD9;
}

/* ── Subscription page ─────────────────────────────────────────────── */

/*
 * The tab strip scrolls sideways rather than wrapping. A wrapped strip changes height as groups are
 * added and pushes the list around; at phone width with several groups it would take most of the
 * screen.
 */
.subscription-tabs-scroller {
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

/*
 * While a search is running every pane is shown at once, so a match is visible whichever group it
 * belongs to. Overrides the .fade/.show mechanics the Tab plugin drives, hence the !important --
 * the plugin owns those classes and will keep setting them.
 */
.tab-content.is-searching > .tab-pane {
    display: block !important;
    opacity: 1 !important;
}

.tab-content.is-searching > .tab-pane.has-no-matches {
    display: none !important;
}

/*
 * .form-check reserves space on the left for a statically positioned input and floats it. Both fight
 * a flex row that puts the state pill beside the switch, so they are zeroed here -- which is what
 * makes the 2px below the only gap in play.
 */
.subscription-switch {
    padding-left: 0;
    min-height: 0;
}

.subscription-switch .form-check-input {
    float: none;
    margin-left: 0;
    margin-top: 0;
    width: 2.5em;
    height: 1.25em;
    cursor: pointer;
}

/*
 * The requested 2px between the pill and the switch, in rem so it tracks the root font size. It is
 * deliberately tiny: the pill is the switch's <label for>, so keeping the two click targets nearly
 * contiguous is the point of the pairing.
 */
.subscription-pill {
    margin-left: 0.125rem;
    cursor: pointer;
}

/*
 * text-truncate does nothing to a flex child unless the child is allowed to shrink below its
 * content width. CoreUI ships no min-width utility, so this is a rule rather than a class.
 */
.subscription-row-main {
    min-width: 0;
}

.subscription-row {
    transition: background-color 0.15s ease-in-out;
}

.subscription-row:hover {
    background-color: var(--cui-tertiary-bg);
}

.subscription-disclosure svg {
    transition: transform 0.15s ease-in-out;
}

.subscription-disclosure[aria-expanded="true"] svg {
    transform: rotate(90deg);
}

/* Reserves the line so a row does not jump when "Saving…" appears and clears. */
.subscription-status:not(:empty) {
    min-height: 1.2em;
}

.subscription-search-wrap {
    min-width: 12rem;
}

.pref-toggle.form-check-input {
    cursor: pointer;
}

/*
 * Rich-text editing of the ServiceNow analysis fields (T-US-139-P4).
 *
 * The fallback textarea is visible by default and hidden by snow_editor.js once Quill has attached.
 * Doing it this way round rather than hiding it in the markup means a failed script leaves a usable
 * control rather than an invisible one.
 */
.snow-editor-surface {
    min-height: 12rem;
    background: var(--bs-body-bg);
}

.snow-editor-surface .ql-editor {
    min-height: 10rem;
    font-size: 0.95rem;
}

/* Quill renders its own toolbar border; avoid doubling it against the surface. */
.snow-editor-surface + .snow-editor-fallback {
    margin-top: 0.5rem;
}

/*
 * The circle-i beside each ServiceNow analysis field label, whose popover holds the raw column name.
 *
 * `line-height: 0` keeps the inline SVG from adding descender space and pushing the label off the
 * control's baseline. `cursor: help` because hover is the whole affordance -- the element is focusable
 * for keyboard users but does nothing on click.
 */
.snow-field-help {
    cursor: help;
    line-height: 0;
}