/*
 * SLR Manager
 * Custom styles layered over Bootstrap 5.
 */

/* --------------------------------------------------------------------------
   Theme tokens
   -------------------------------------------------------------------------- */

:root {
    --bs-primary: #0f64a6;
    --bs-primary-rgb: 15, 100, 166;

    --slr-primary-dark: #093c64;

    --slr-primary-hover: #0c568f;
    --slr-primary-active: #094a7a;

    --app-statusbar-height: 3rem;

    --language-code-width: 4rem;
}

[data-bs-theme="light"] {
    --slr-highlight: #deebff;
    --slr-sidebar-bg: #f8f9fa;
    --slr-nav-color: var(--bs-primary);
    --slr-header-bg: #ffffff;
    --slr-statusbar-bg: var(--bs-tertiary-bg);
    --slr-button-bg: var(--bs-secondary-bg);
    --slr-button-hover-bg: var(--bs-body-bg);
    --slr-action: #d9ecff;
    --slr-danger: #f6d7dc;
    --slr-warning: #f6ebc7;
    --slr-go: #d8efdf;
    --slr-thumbnail-check: #e9ecef;
}

[data-bs-theme="dark"] {
    --slr-highlight: #273746;
    --slr-sidebar-bg: #181c20;
    --slr-nav-color: var(--bs-secondary-color);
    --slr-header-bg: var(--slr-primary-dark);
    --slr-statusbar-bg: #000000;
    --slr-button-bg: var(--bs-secondary-bg);
    --slr-button-hover-bg: var(--bs-tertiary-bg);
    --slr-action: #274b73;
    --slr-danger: #7a2836;
    --slr-warning: #9a5d17;
    --slr-go: #285c3a;
    --slr-thumbnail-check: #343a40;
}

[data-bs-theme="dark"] .btn {
    box-shadow: 0 0 7px rgba(255, 250, 240, 0.25);
}

/* --------------------------------------------------------------------------
   Typography and page behaviour
   -------------------------------------------------------------------------- */

html {
    overscroll-behavior: none;
}

body {
    overflow-y: scroll;
    font-family:
        "Helvetica Neue",
        "HelveticaNeue",
        "TeX Gyre Heros",
        "TeXGyreHeros",
        "FreeSans",
        "Nimbus Sans L",
        Helvetica,
        Arial,
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400;
}

/* --------------------------------------------------------------------------
   Application shell
   -------------------------------------------------------------------------- */

.app-header {
    background-color: var(--slr-header-bg);
}

.app-header .navbar-brand {
    color: var(--bs-primary);
}

[data-bs-theme="dark"] .app-header .navbar-brand {
    color: var(--bs-white);
}

.app-sidebar {
    width: 12rem;
    padding-top: 6rem;
    padding-bottom: var(--app-statusbar-height);
    background-color: var(--slr-sidebar-bg);
}

/* --------------------------------------------------------------------------
   Application navigation
   -------------------------------------------------------------------------- */

.appnav .nav-link {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--slr-nav-color);
    text-decoration: none;
}

.appnav .nav-link:hover {
    background-color: var(--slr-highlight);
}

.appnav .nav-link.active {
    color: #fff;
    background-color: var(--slr-primary-active);
}

.appnav .nav-link svg {
    width: 18px;
    height: 18px;
    margin: 0 0.5rem;
}

/* Mobile navigation */

@media (max-width: 767.98px) {

    .appnav .nav-link {
        position: relative;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .appnav .nav-link+.nav-link::before {
        content: "";
        position: absolute;
        top: 0;
        inset-inline-start: 3.5rem;
        inset-inline-end: 1.5rem;
        border-top: 1px solid var(--bs-border-color-translucent);
    }

}

/* --------------------------------------------------------------------------
   Application status bar
   -------------------------------------------------------------------------- */

.app-statusbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    height: var(--app-statusbar-height);
    font-size: 0.875rem;
    background-color: var(--slr-statusbar-bg);
}

.app-statusbar-sidebar {
    display: flex;
    align-items: center;
    width: 12rem;
    flex: 0 0 12rem;
    padding: 0.375rem 1rem;
    background-color: var(--slr-statusbar-bg);
}

.app-statusbar-main {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    padding: 0 1.5rem;
    color: var(--bs-secondary-color);
}

main {
    padding-bottom: calc(var(--app-statusbar-height) + 1rem);
}

/* --------------------------------------------------------------------------
   Login
   -------------------------------------------------------------------------- */
.login-page {
    min-height: 100vh;
}

.login-panel {
    max-width: 25rem;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn-wide {
    min-width: 9em;
}

.btn-wide svg {
    width: 24px;
    height: 24px;
    margin-inline-end: 0.25rem;
    padding-bottom: 0.25rem;
}

/*
 * Compact icon-only append control for instance list rows (Service Review and
 * Manage). Sized with table-row-nav icons so the glyph does not raise
 * input-group / form-control row height. Do not use for btn-wide actions.
 */
.btn-action.btn-row svg {
    width: 16px;
    height: 16px;
}

/* button glow effect */
.btn:not(:disabled):hover,
.btn:not(:disabled):focus-visible {
    background-image:
        radial-gradient(circle at center,
            rgba(255, 250, 240, 0.20) 0%,
            rgba(255, 250, 240, 0.10) 40%,
            transparent 100%);
}

/*
 * Glossy finish
 */

.btn-glossy {
    position: relative;
    overflow: hidden;
    background-image:
        linear-gradient(to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.3) 70%,
            rgba(255, 255, 255, 0) 70%,
            rgba(255, 255, 255, 0.2) 100%);
    background-blend-mode: overlay;
}

.btn-glossy:not(:disabled):hover,
.btn-glossy:not(:disabled):focus-visible,
.btn-glossy:not(:disabled):active {
    background-image:
        linear-gradient(to bottom,
            rgba(255, 255, 255, 0.2) 0%,
            rgba(255, 255, 255, 0.7) 70%,
            rgba(255, 255, 255, 0.4) 70%,
            rgba(255, 255, 255, 0.6) 100%);
    background-blend-mode: overlay;
}

/*
 * Button press movement
 */

.btn {
    transition:
        transform 0.1s ease,
        box-shadow 0.1s ease;
}

.btn:not(:disabled):active {
    transform: translateY(2px);
}

/*
 * Raised appearance
 */

.btn-raised {
    position: relative;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}

.btn-raised:not(:disabled):active {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/*
 * Disabled buttons remain pointer targets so clicks do not fall through
 * to nearby page text. Their disabled appearance remains stable through
 * pointer interaction.
 */
.btn:disabled,
.btn:disabled:hover,
.btn:disabled:focus,
.btn:disabled:active {
    color: var(--bs-btn-disabled-color);
    background-color: var(--bs-btn-disabled-bg);
    border-color: var(--bs-btn-disabled-border-color);
    opacity: var(--bs-btn-disabled-opacity);
    pointer-events: auto;
    cursor: default;
}

/*
 * Primary actions
 */

.btn-primary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);

    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--slr-primary-hover);
    --bs-btn-hover-border-color: var(--slr-primary-hover);

    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--slr-primary-active);
    --bs-btn-active-border-color: var(--slr-primary-active);
}

/*
 * Secondary actions
 */

.btn-secondary {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: var(--slr-button-bg);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--slr-button-hover-bg);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-color: var(--bs-body-color);
    --bs-btn-active-bg: var(--slr-button-hover-bg);
    --bs-btn-active-border-color: var(--bs-primary);
}

/*
 * Button modifiers for secondary actions
 */

.btn-secondary.btn-action {
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--slr-action);
    --bs-btn-hover-border-color: var(--bs-primary);

    --bs-btn-active-color: var(--bs-body-color);
    --bs-btn-active-bg: var(--slr-action);
    --bs-btn-active-border-color: var(--bs-primary);
}

.btn-secondary.btn-go {
    --slr-operation-bg: var(--slr-go);
    --slr-operation-glow: 190, 235, 205;
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--slr-go);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-color: var(--bs-body-color);
    --bs-btn-active-bg: var(--slr-go);
    --bs-btn-active-border-color: var(--bs-primary);
}

.btn-secondary.btn-danger {
    --slr-operation-bg: var(--slr-danger);
    --slr-operation-glow: 255, 200, 205;
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--slr-danger);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-color: var(--bs-body-color);
    --bs-btn-active-bg: var(--slr-danger);
    --bs-btn-active-border-color: var(--bs-primary);
}

.btn-secondary.btn-warning {
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--slr-warning);
    --bs-btn-hover-border-color: var(--bs-primary);

    --bs-btn-active-color: var(--bs-body-color);
    --bs-btn-active-bg: var(--slr-warning);
    --bs-btn-active-border-color: var(--bs-primary);
}

.btn-secondary.btn-action:not(:disabled):hover,
.btn-secondary.btn-action:not(:disabled):focus-visible {
    box-shadow:
        0 0 8px rgba(var(--bs-primary-rgb), 0.3),
        inset 0 0 6px rgba(var(--bs-primary-rgb), 0.2);
}

.btn-secondary.btn-go:not(:disabled):hover,
.btn-secondary.btn-go:not(:disabled):focus-visible {
    box-shadow:
        0 0 8px rgba(190, 235, 205, 0.3),
        inset 0 0 6px rgba(190, 235, 205, 0.3);
}

.btn-secondary.btn-danger:not(:disabled):hover,
.btn-secondary.btn-danger:not(:disabled):focus-visible {
    box-shadow:
        0 0 8px rgba(255, 200, 205, 0.3),
        inset 0 0 6px rgba(255, 200, 205, 0.3);
}

.btn-secondary.btn-warning:not(:disabled):hover,
.btn-secondary.btn-warning:not(:disabled):focus-visible {
    box-shadow:
        0 0 8px rgba(255, 250, 240, 0.3),
        inset 0 0 6px rgba(255, 225, 170, 0.3);
}

.btn-secondary.btn-cancel {
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--slr-warning);
    --bs-btn-hover-border-color: var(--bs-primary);

    --bs-btn-active-color: var(--bs-body-color);
    --bs-btn-active-bg: var(--slr-warning);
    --bs-btn-active-border-color: var(--bs-primary);
}

.btn-secondary.btn-cancel:not(:disabled):hover,
.btn-secondary.btn-cancel:not(:disabled):focus-visible {
    box-shadow:
        0 0 8px rgba(255, 250, 240, 0.3),
        inset 0 0 6px rgba(255, 225, 170, 0.3);
}

/*
 * Operational transition
 */

.btn-operating,
.btn-operating:hover,
.btn-operating:focus-visible {
    color: var(--bs-body-color);
    cursor: default;
    background-color: var(--slr-operation-bg);
    border-color: var(--bs-primary);
    animation: operational-pulse 1s ease-in-out infinite;
}

@keyframes operational-pulse {

    0%,
    100% {
        box-shadow:
            0 0 6px rgba(var(--slr-operation-glow), 0.25),
            inset 0 0 5px rgba(var(--slr-operation-glow), 0.20);
    }

    50% {
        box-shadow:
            0 0 16px rgba(var(--slr-operation-glow), 0.75),
            inset 0 0 10px rgba(var(--slr-operation-glow), 0.50);
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-operating {
        animation: none;
    }
}

/*
 * Form disclosure buttons
 */

.btn-form {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: var(--slr-button-bg);
    --bs-btn-border-color: var(--bs-tertiary-color);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--slr-button-hover-bg);
    --bs-btn-hover-border-color: var(--bs-tertiary-color);
    --bs-btn-active-color: var(--bs-body-color);
    --bs-btn-active-bg: var(--slr-button-hover-bg);
    --bs-btn-active-border-color: var(--bs-secondary-color);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.multiline {
    white-space: pre-line;
}

.form-select {
    cursor: pointer;
    user-select: none;
    text-align: start;
}

/*
 * Trailing empty multivalue affordance.
 *
 * The template applies .multivalue-row-ghost only to that row. A single-space
 * placeholder enables :placeholder-shown without visible instructional text.
 */
.multivalue-row-ghost input:placeholder-shown:not(:focus),
.multilingual-row-ghost input:placeholder-shown:not(:focus),
.multilingual-row-ghost>.ts-wrapper.form-control:not(.has-items):not(.focus) {
    border-color: rgba(var(--bs-secondary-rgb), 0.25);
}

.form-control-static {
    color: var(--bs-secondary-color);
    background-color: var(--bs-secondary-bg);
}

.input-number {
    max-width: 4em;
}

.input-wide {
    max-width: 9em;
}

.indent {
    padding-inline-start: 0.75rem;
}

.language-code {
    width: var(--language-code-width);
}

/*
 * Compact language-code portion of multilingual Edit / Review input groups,
 * including the Tom Select-enhanced wrapper (inherits .language-code).
 */
.input-group>.language-code {
    flex: 0 0 auto;
    width: var(--language-code-width);
    max-width: var(--language-code-width);
}

/*
 * Progressive Tom Select enhancement of multilingual language-code inputs.
 *
 * Tom Select copies .form-control from the source input to its generated
 * wrapper. In a Bootstrap input-group the hidden source remains the first
 * child, so Bootstrap treats the visible wrapper as a later child and removes
 * its leading radius. Restore it here for the first multilingual control.
 *
 * The official Tom Select input-group-first pattern avoids this by omitting
 * .form-control from the source input, which is not suitable for our no-JS
 * progressive-enhancement fallback.
 */
.input-group>.ts-wrapper.language-code {
    min-width: 0;
    /*
     * .ts-wrapper.single reserves 2.25rem for a select caret. form-control
     * wrappers do not paint that caret, so reclaim the space for the code.
     */
    --ts-pr-caret: 0px;
    --ts-pr-min: 0.5rem;
}

.multilingual-rows .input-group.multilingual-row>.ts-wrapper.form-control.language-code.input-group-start {
    border-top-left-radius: var(--bs-border-radius);
    border-bottom-left-radius: var(--bs-border-radius);
}

.input-group>.ts-wrapper.language-code>.ts-control {
    flex-wrap: nowrap;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
}

.input-group>.ts-wrapper.language-code>.ts-control>.item {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

.input-group>.ts-wrapper.language-code>.ts-control>input {
    flex: 1 1 0;
    min-width: 0;
}

.input-group>.ts-wrapper.language-code .ts-dropdown {
    width: max-content;
    min-width: 15rem;
}

.language-code-option {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
}

.language-code-option-code {
    flex: 0 0 3ch;
}

.language-code-option-name {
    flex: 1 1 auto;
}




.channel {
    position: relative;
    width: 100%;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 64px 36px;
}

/* --------------------------------------------------------------------------
   Read-only form controls
   -------------------------------------------------------------------------- */

.readonly .form-control {
    background-color: var(--bs-tertiary-bg);
    cursor: default;
}

/*
 * Service Review delivery-instance disclosure.
 *
 * Expanded configuration rows are DOM children of <details> but use the
 * ordinary full-width Review field grid. The summary marker is suppressed on
 * the outer <summary> and restored on the delivery label so Priority stays
 * adjacent metadata in the label column.
 */
.delivery-instance>summary.delivery-instance-summary {
    display: block;
    list-style: none;
}

.delivery-instance>summary.delivery-instance-summary::-webkit-details-marker {
    display: none;
}

.delivery-instance>summary.delivery-instance-summary::marker {
    content: "";
}

.readonly .delivery-instance>summary .delivery-instance-label {
    cursor: pointer;
    display: list-item;
    list-style-position: inside;
    list-style-type: disclosure-closed;
}

.readonly .delivery-instance[open]>summary .delivery-instance-label {
    list-style-type: disclosure-open;
}

.section-heading .btn-group .btn-action svg {
    width: 24px;
    height: 24px;
}

/*
 * Ordered-collection selection row with optional appended action.
 *
 * Structure mirrors form.multivalue / form.multilingual: Bootstrap
 * .input-group joins the selectable content and a trailing action control.
 *
 * Do not reuse Bootstrap .form-control on the selection chrome. That class is
 * for real form controls and sets appearance/focus behaviour that can
 * interfere with nested native radios. Visual chrome stays local to
 * .instance-selection-row; the input-group child rule only supplies flex
 * growth so the row fills available width beside the action.
 *
 * The radio and <label for> remain siblings for native keyboard behaviour.
 * The appended Review link is a separate focusable control outside the label.
 */
.input-group>.instance-selection-row {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.instance-selection-row {
    display: flex;
    align-items: center;
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    padding-inline-start: 2.5rem;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.instance-selection-row:hover {
    background-color: var(--slr-highlight);
}

.instance-selection-row:focus-within {
    border-color: #86b7fe;
    z-index: 3;
}

.instance-selection-input {
    position: absolute;
    inset-inline-start: 0.75rem;
    margin: 0;
    z-index: 1;
}

.instance-selection-label {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Switches
   -------------------------------------------------------------------------- */

.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* --------------------------------------------------------------------------
   Tom Select

   Match Bootstrap form-control focus treatment on the generated wrapper.
   Keep open dropdown menus above the fixed application status bar.

   Vendor tom-select.bootstrap5.css hardcodes #343a40 on dropdown/control/input
   and only corrects that under .form-select. Our language picker and multiselect
   enhance .form-control inputs, so restore theme-aware text colour here.
   -------------------------------------------------------------------------- */

.ts-dropdown,
.ts-control,
.ts-control input {
    color: var(--bs-body-color);
}

.ts-wrapper.multi .ts-control>div {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
    border-left-color: var(--bs-border-color);
}

.ts-wrapper.plugin-remove_button.rtl .item .remove {
    border-right-color: var(--bs-border-color);
}

.ts-wrapper.form-select.focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.ts-wrapper.form-select.focus .ts-control {
    box-shadow: none;
}

.ts-dropdown {
    z-index: 1040;
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.table {
    --bs-table-striped-bg: var(--bs-tertiary-bg);
    --bs-table-hover-bg: var(--slr-highlight);
}

.table thead th {
    padding-bottom: 1rem;
}

.table-page-nav {
    min-height: 2rem;
}

.table-page-nav svg {
    width: 16px;
    height: 16px;
}

.table-page-nav-previous {
    margin-bottom: 0.5rem;
}

.table-page-nav-next {
    margin-top: 0.5rem;
}

.table-row-status {
    width: 6rem;
}

.table-row-nav {
    width: 2rem;
}

.table-hover.row-links-enabled tbody tr {
    cursor: pointer;
}

.table-hover tbody tr:hover>* {
    color: var(--bs-body-color);
}

.table td.table-row-nav,
.table-hover tbody tr:hover>td.table-row-nav {
    color: var(--bs-body-color);
}

.table-row-nav svg {
    width: 16px;
    height: 16px;
}

/* --------------------------------------------------------------------------
   Region Review tree
   -------------------------------------------------------------------------- */

.region-node-link:hover {
    background-color: var(--slr-highlight);
}

/* --------------------------------------------------------------------------
   From controls for read-only
   -------------------------------------------------------------------------- */

.readonly .form-control {
    min-height: calc(1.5em + 0.75rem + 2px);
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Application settings
   -------------------------------------------------------------------------- */

.app-settings .dropdown-toggle,
.app-settings .dropdown-menu {
    width: 100%;
}

.app-settings .dropdown-toggle {
    text-align: start;
}

/* --------------------------------------------------------------------------
      Status bar
      -------------------------------------------------------------------------- */

.app-statusbar {
    -webkit-user-select: none;
    user-select: none;
}

/* --------------------------------------------------------------------------
   Custom select menus
   -------------------------------------------------------------------------- */

.select-container {
    position: relative;
}

.select-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    padding: 0;
    margin: 0.25rem 0 0;
}

.select-menu.open {
    z-index: 100;
    max-height: 12rem;
    overflow-y: auto;
    overscroll-behavior: none;
    list-style: none;
    cursor: pointer;
    background-color: var(--bs-body-bg);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--bs-box-shadow);
}

.select-menu li {
    padding: 0.375rem 0.75rem;
}

.select-menu li.highlighted {
    background-color: var(--slr-highlight);
}

.select-menu li.selected {
    font-weight: 700;
}

.select-multi-item {
    margin-inline-end: 1rem;
    white-space: nowrap;
}

.select-multi-remove-btn {
    margin-inline-start: 0.375rem;
    color: var(--bs-primary);
    background: none;
    border: 0;
    border-radius: var(--bs-border-radius);
}

.select-multi-remove-btn:hover {
    background-color: var(--slr-highlight);
}

.select-button-container .button-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.select-button-container .button-dropdown-wrapper .form-select {
    text-align: center;
}

.select-button-container .button-dropdown-wrapper .select-menu {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    inset-inline-end: auto;
    width: max-content;
    min-width: 100%;
    max-height: none;
    overflow-y: auto;
}

/* --------------------------------------------------------------------------
   Animated mobile navigation toggle
   -------------------------------------------------------------------------- */

.navbar-toggler {
    border: 0;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-toggler span {
    position: relative;
    left: 0;
    display: block;
    width: 25px;
    height: 3px;
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: var(--bs-primary);
    opacity: 1;
    transition: all 0.35s ease-out;
    transform-origin: center left;
}

[data-bs-theme="dark"] .navbar-toggler span {
    background-color: var(--bs-white);
}

.navbar-toggler span:first-child {
    margin-top: 0.3em;
}

.navbar-toggler:not(.collapsed) span:nth-child(1) {
    transform: translate(15%, -33%) rotate(45deg);
}

.navbar-toggler:not(.collapsed) span:nth-child(2) {
    opacity: 0;
}

.navbar-toggler:not(.collapsed) span:nth-child(3) {
    transform: translate(15%, 33%) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Thumbnails
   -------------------------------------------------------------------------- */

.thumbnail-slot {
    width: 256px;
}

.thumbnail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 144px;
    width: fit-content;
    overflow: hidden;
    padding: 0;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-tertiary-bg);
    background-image:
        linear-gradient(45deg,
            var(--slr-thumbnail-check) 25%,
            transparent 25%,
            transparent 75%,
            var(--slr-thumbnail-check) 75%),
        linear-gradient(45deg,
            var(--slr-thumbnail-check) 25%,
            transparent 25%,
            transparent 75%,
            var(--slr-thumbnail-check) 75%);
    background-position: 0 0, 5px 5px;
    background-size: 10px 10px;
}

.thumbnail.thumbnail--pending {
    aspect-ratio: 16 / 9;
    width: auto;
}

.thumbnail img {
    display: block;
    height: 144px;
    width: auto;
    max-width: none;
    object-fit: contain;
}

.thumbnail-variant {
    min-width: 16rem;
}

/* --------------------------------------------------------------------------
   Toasts
   -------------------------------------------------------------------------- */

.toast {
    margin: 1rem;
}