/* Theme "Registre": IBM Plex Sans for the interface, IBM Plex Mono for numbers, one teal accent that every tint
   derives from, a cool neutral ground with white surfaces in light mode and the same structure in dark mode.
   Everything here overrides Bootstrap's own CSS variables; the few plain rules cover what Bootstrap has no variable for. */
:root {
    --bs-body-font-size: 0.9375rem;
    --bs-border-radius: 0.5rem;
    --bs-border-radius-lg: 0.75rem;
    --bs-border-radius-sm: 0.375rem;
    --bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.25);
    --bs-font-monospace: "IBM Plex Mono", SFMono-Regular, Menlo, Consolas, monospace;
    --bs-font-sans-serif: "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Light: ground #F3F5F7, white surfaces, teal #0F6E56 */
:root,
:root[data-bs-theme="light"] {
    --app-accent-amber: #b8600f;
    --app-accent-blue: #1d5fbf;
    --app-accent-rose: #b8305a;
    --app-accent-teal: #0f6e56;
    --app-accent-violet: #6b3fb8;
    --app-accent-yellow: #9c7c00;
    --bs-body-bg: #f3f5f7;
    --bs-body-bg-rgb: 243, 245, 247;
    --bs-body-color: #17202a;
    --bs-body-color-rgb: 23, 32, 42;
    --bs-border-color: #d9e0e7;
    --bs-emphasis-color: #0b1220;
    --bs-emphasis-color-rgb: 11, 18, 32;
    --bs-heading-color: #17202a;
    --app-input-bg: #fff;
    --app-input-border: #b9c3ce;
    --bs-link-color: #0f6e56;
    --bs-link-color-rgb: 15, 110, 86;
    --bs-link-hover-color: #0b5a46;
    --bs-link-hover-color-rgb: 11, 90, 70;
    --bs-primary: #0f6e56;
    --bs-primary-bg-subtle: #e2f2ec;
    --bs-primary-border-subtle: #b8dfd1;
    --app-primary-hover: #0b5a46;
    --bs-primary-rgb: 15, 110, 86;
    --bs-primary-text-emphasis: #0b5a46;
    --bs-secondary-bg: #e6ebf0;
    --bs-secondary-bg-rgb: 230, 235, 240;
    --bs-secondary-color: #5f6b78;
    --bs-secondary-color-rgb: 95, 107, 120;
    --app-sidebar-bg: #fff;
    --app-surface-bg: #fff;
    --bs-tertiary-bg: #f4f6f8;
    --bs-tertiary-bg-rgb: 244, 246, 248;
    --bs-tertiary-color: #7a8794;
    --bs-tertiary-color-rgb: 122, 135, 148;
}

/* Dark: ground #0E1217, raised surfaces #141B23, the accent lifted so text and links stay readable on the ground */
:root[data-bs-theme="dark"] {
    --app-accent-amber: #cc6f1a;
    --app-accent-blue: #2f6fd1;
    --app-accent-rose: #cc3f6b;
    --app-accent-teal: #16846a;
    --app-accent-violet: #7c52cc;
    --app-accent-yellow: #b3950e;
    --bs-body-bg: #0e1217;
    --bs-body-bg-rgb: 14, 18, 23;
    --bs-body-color: #e8edf2;
    --bs-body-color-rgb: 232, 237, 242;
    --bs-border-color: #2a3441;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-heading-color: #e8edf2;
    --app-input-bg: #1b2430;
    --app-input-border: #3a4656;
    --bs-link-color: #7fd1b4;
    --bs-link-color-rgb: 127, 209, 180;
    --bs-link-hover-color: #a3e2cc;
    --bs-link-hover-color-rgb: 163, 226, 204;
    --bs-primary: #16846a;
    --bs-primary-bg-subtle: #143229;
    --bs-primary-border-subtle: #1f5a48;
    --app-primary-hover: #1e9a7c;
    --bs-primary-rgb: 22, 132, 106;
    --bs-primary-text-emphasis: #8fd9c0;
    --bs-secondary-bg: #232d3a;
    --bs-secondary-bg-rgb: 35, 45, 58;
    --bs-secondary-color: #9aa7b5;
    --bs-secondary-color-rgb: 154, 167, 181;
    --app-sidebar-bg: #121820;
    --app-surface-bg: #161e28;
    --bs-tertiary-bg: #111820;
    --bs-tertiary-bg-rgb: 17, 24, 32;
    --bs-tertiary-color: #7d8a98;
    --bs-tertiary-color-rgb: 125, 138, 152;
}

/* Accent choices (data-accent on <html>, see theme.js): each one redefines the primary scale and the link colors of
   both themes; teal, above, is the default. The dark rule of an accent sets every property its light rule sets, so
   that it wins over both the light rule and the dark theme block. */
:root[data-accent="blue"] {
    --bs-link-color: #1d5fbf;
    --bs-link-color-rgb: 29, 95, 191;
    --bs-link-hover-color: #174d9b;
    --bs-link-hover-color-rgb: 23, 77, 155;
    --bs-primary: #1d5fbf;
    --bs-primary-bg-subtle: #e3ecf9;
    --bs-primary-border-subtle: #b9cff0;
    --app-primary-hover: #174d9b;
    --bs-primary-rgb: 29, 95, 191;
    --bs-primary-text-emphasis: #174d9b;
}

:root[data-bs-theme="dark"][data-accent="blue"] {
    --bs-link-color: #8ab4f0;
    --bs-link-color-rgb: 138, 180, 240;
    --bs-link-hover-color: #aac8f5;
    --bs-link-hover-color-rgb: 170, 200, 245;
    --bs-primary: #2f6fd1;
    --bs-primary-bg-subtle: #142a4a;
    --bs-primary-border-subtle: #1f4480;
    --app-primary-hover: #3f80e3;
    --bs-primary-rgb: 47, 111, 209;
    --bs-primary-text-emphasis: #9cc0f5;
}

:root[data-accent="violet"] {
    --bs-link-color: #6b3fb8;
    --bs-link-color-rgb: 107, 63, 184;
    --bs-link-hover-color: #58339a;
    --bs-link-hover-color-rgb: 88, 51, 154;
    --bs-primary: #6b3fb8;
    --bs-primary-bg-subtle: #eee7f9;
    --bs-primary-border-subtle: #d1c0f0;
    --app-primary-hover: #58339a;
    --bs-primary-rgb: 107, 63, 184;
    --bs-primary-text-emphasis: #58339a;
}

:root[data-bs-theme="dark"][data-accent="violet"] {
    --bs-link-color: #b9a2ee;
    --bs-link-color-rgb: 185, 162, 238;
    --bs-link-hover-color: #cdbcf4;
    --bs-link-hover-color-rgb: 205, 188, 244;
    --bs-primary: #7c52cc;
    --bs-primary-bg-subtle: #251a40;
    --bs-primary-border-subtle: #3f2c6b;
    --app-primary-hover: #8d66d9;
    --bs-primary-rgb: 124, 82, 204;
    --bs-primary-text-emphasis: #c6b0f2;
}

:root[data-accent="rose"] {
    --bs-link-color: #b8305a;
    --bs-link-color-rgb: 184, 48, 90;
    --bs-link-hover-color: #98264a;
    --bs-link-hover-color-rgb: 152, 38, 74;
    --bs-primary: #b8305a;
    --bs-primary-bg-subtle: #f9e5ec;
    --bs-primary-border-subtle: #f0bccd;
    --app-primary-hover: #98264a;
    --bs-primary-rgb: 184, 48, 90;
    --bs-primary-text-emphasis: #98264a;
}

:root[data-bs-theme="dark"][data-accent="rose"] {
    --bs-link-color: #ee98b6;
    --bs-link-color-rgb: 238, 152, 182;
    --bs-link-hover-color: #f4b9cb;
    --bs-link-hover-color-rgb: 244, 185, 203;
    --bs-primary: #cc3f6b;
    --bs-primary-bg-subtle: #40172a;
    --bs-primary-border-subtle: #6b2742;
    --app-primary-hover: #d9557f;
    --bs-primary-rgb: 204, 63, 107;
    --bs-primary-text-emphasis: #f2a6c0;
}

:root[data-accent="amber"] {
    --bs-link-color: #b8600f;
    --bs-link-color-rgb: 184, 96, 15;
    --bs-link-hover-color: #99500c;
    --bs-link-hover-color-rgb: 153, 80, 12;
    --bs-primary: #b8600f;
    --bs-primary-bg-subtle: #faeedf;
    --bs-primary-border-subtle: #f0d1a8;
    --app-primary-hover: #99500c;
    --bs-primary-rgb: 184, 96, 15;
    --bs-primary-text-emphasis: #99500c;
}

:root[data-bs-theme="dark"][data-accent="amber"] {
    --bs-link-color: #eeb57a;
    --bs-link-color-rgb: 238, 181, 122;
    --bs-link-hover-color: #f3c99b;
    --bs-link-hover-color-rgb: 243, 201, 155;
    --bs-primary: #cc6f1a;
    --bs-primary-bg-subtle: #3d2510;
    --bs-primary-border-subtle: #6b4119;
    --app-primary-hover: #dc8030;
    --bs-primary-rgb: 204, 111, 26;
    --bs-primary-text-emphasis: #f1c08a;
}

/* Surfaces that Bootstrap paints with the body background sit on the ground as raised panels instead */
.card {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    --bs-card-bg: var(--app-surface-bg);
    --bs-card-border-color: var(--bs-border-color);
    --bs-card-border-radius: var(--bs-border-radius-lg);
    --bs-card-cap-bg: var(--bs-tertiary-bg);
    --bs-card-inner-border-radius: calc(var(--bs-border-radius-lg) - 1px);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--app-surface-bg);
    --bs-dropdown-link-active-bg: var(--bs-primary);
}

.modal {
    --bs-modal-bg: var(--app-surface-bg);
}

/* Inputs: white (or the dark surface) with a slightly firmer hairline than the dividers; Bootstrap paints them with
   the body background, which is the ground here */
.form-control, .form-select {
    background-color: var(--app-input-bg);
    border-color: var(--app-input-border);
}

.form-control:disabled, .form-select:disabled {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
}

.form-check-input {
    border-color: var(--app-input-border);
    --bs-form-check-bg: var(--app-input-bg);
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

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

/* Rich text editor (rich-text.js, Quill "snow" theme): painted like a form-control in both themes, its link tooltip
   labelled from data attributes (the theme hard-codes English text) */
.rich-text .ql-toolbar.ql-snow {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--app-input-border);
    border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
}

.rich-text .ql-container.ql-snow {
    background-color: var(--app-input-bg);
    border-color: var(--app-input-border);
    border-radius: var(--bs-border-radius);
    font-family: inherit;
    font-size: inherit;
}

.rich-text .ql-toolbar.ql-snow + .ql-container.ql-snow {
    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
}

.rich-text .ql-container.ql-snow.ql-disabled {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
}

.rich-text .ql-snow .ql-stroke {
    stroke: var(--bs-body-color);
}

.rich-text .ql-snow .ql-fill {
    fill: var(--bs-body-color);
}

.rich-text .ql-snow .ql-picker-options {
    background-color: var(--app-surface-bg);
    border-color: var(--bs-border-color);
}

/* The colour palette opens towards the left so it stays on a phone screen */
.rich-text .ql-snow .ql-color-picker .ql-picker-options {
    right: 0;
}

.rich-text .ql-snow .ql-tooltip {
    background-color: var(--app-surface-bg);
    border-color: var(--bs-border-color);
    box-shadow: var(--bs-box-shadow-sm);
    color: var(--bs-body-color);
    max-width: 100%;
    white-space: normal;
}

.rich-text .ql-snow .ql-tooltip input[type=text] {
    background-color: var(--app-input-bg);
    border-color: var(--app-input-border);
    color: var(--bs-body-color);
}

.rich-text .ql-snow .ql-tooltip::before {
    content: attr(data-link-visit);
}

.rich-text .ql-snow .ql-tooltip[data-mode=link]::before {
    content: attr(data-link-enter);
}

.rich-text .ql-snow .ql-tooltip a.ql-action::after {
    content: attr(data-link-edit);
}

.rich-text .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    content: attr(data-link-save);
}

.rich-text .ql-snow .ql-tooltip a.ql-remove::before {
    content: attr(data-link-remove);
}

/* One line, truncated with an ellipsis when the column is too narrow; labels.js puts the full text in the title of
   the labels that are actually truncated */
.form-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The page title receives focus after an enhanced navigation (FocusOnNavigate); no ring on it */
h1:focus {
    outline: none;
}

/* Type: tighter, heavier headings; the page title is the only large one */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    letter-spacing: -0.01em;
}

h1, .h1 {
    font-size: 1.875rem;
    letter-spacing: -0.02em;
}

.btn {
    --bs-btn-font-weight: 500;
}

.btn-primary {
    --bs-btn-active-bg: var(--app-primary-hover);
    --bs-btn-active-border-color: var(--app-primary-hover);
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-hover-bg: var(--app-primary-hover);
    --bs-btn-hover-border-color: var(--app-primary-hover);
}

.btn-outline-primary {
    --bs-btn-active-bg: var(--app-primary-hover);
    --bs-btn-active-border-color: var(--app-primary-hover);
    --bs-btn-border-color: var(--app-input-border);
    --bs-btn-color: var(--bs-link-color);
    --bs-btn-disabled-border-color: var(--app-input-border);
    --bs-btn-disabled-color: var(--bs-link-color);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
}

/* Secondary and danger outlines: body or danger text on a neutral hairline, never a grey or red frame */
.btn-outline-secondary {
    --bs-btn-active-bg: var(--bs-secondary-bg);
    --bs-btn-active-border-color: var(--app-input-border);
    --bs-btn-active-color: var(--bs-emphasis-color);
    --bs-btn-bg: var(--app-surface-bg);
    --bs-btn-border-color: var(--app-input-border);
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-disabled-border-color: var(--bs-border-color);
    --bs-btn-disabled-color: var(--bs-secondary-color);
    --bs-btn-hover-bg: var(--bs-tertiary-bg);
    --bs-btn-hover-border-color: var(--app-input-border);
    --bs-btn-hover-color: var(--bs-emphasis-color);
}

.btn-outline-danger {
    --bs-btn-bg: var(--app-surface-bg);
    --bs-btn-border-color: var(--app-input-border);
}

/* Pagination as a row of small rounded pills, the current page filled with the accent */
.pagination {
    gap: 0.125rem;
    --bs-pagination-active-bg: var(--bs-primary);
    --bs-pagination-active-border-color: var(--bs-primary);
    --bs-pagination-bg: transparent;
    --bs-pagination-border-width: 0;
    --bs-pagination-color: var(--bs-body-color);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-color: var(--bs-tertiary-color);
    --bs-pagination-focus-bg: var(--bs-secondary-bg);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
    --bs-pagination-focus-color: var(--bs-emphasis-color);
    --bs-pagination-font-size: 0.875rem;
    --bs-pagination-hover-bg: var(--bs-secondary-bg);
    --bs-pagination-hover-color: var(--bs-emphasis-color);
    --bs-pagination-padding-x: 0.75rem;
    --bs-pagination-padding-y: 0.45rem;
}

/* Each page is a target at least 36px square */
.page-link {
    border-radius: var(--bs-border-radius-sm);
    min-width: 2.25rem;
    text-align: center;
}

/* Data tables: muted uppercase header on the tertiary tint, hairline rows, slightly smaller text */
.table {
    font-size: 0.875rem;
    --bs-table-bg: transparent;
}

.table > :not(caption) > * > * {
    padding: 0.6875rem 1rem;
}

.table > thead > tr > th {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Sortable header: the link is stretched over the cell, so the whole cell lights up on hover; the sort arrow sits
   beside the text, a hair below the baseline like the design's */
.table > thead > tr > th.sortable:hover {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-emphasis-color);
}

.table > thead > tr > th .sort-arrow {
    margin-left: 0.25rem;
    vertical-align: -0.125em;
}

/* Search fields have their own clear link: the browser's built-in one (Chrome, Edge, Safari) is hidden */
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* Eyebrow above a page title: the section it belongs to */
.text-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.breadcrumb {
    --bs-breadcrumb-divider: "\203A";
    --bs-breadcrumb-font-size: 0.8125rem;
}

.valid.modified:not([type=checkbox]) {
    border-color: var(--bs-success);
}

.invalid {
    border-color: var(--bs-danger);
}

.validation-message {
    color: var(--bs-danger-text-emphasis);
}

.blazor-error-boundary {
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
    padding: 1rem;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

:root[data-accent="yellow"] {
    --bs-link-color: #9c7c00;
    --bs-link-color-rgb: 156, 124, 0;
    --bs-link-hover-color: #816600;
    --bs-link-hover-color-rgb: 129, 102, 0;
    --bs-primary: #9c7c00;
    --bs-primary-bg-subtle: #faf3d4;
    --bs-primary-border-subtle: #ecdc8f;
    --app-primary-hover: #816600;
    --bs-primary-rgb: 156, 124, 0;
    --bs-primary-text-emphasis: #816600;
}

:root[data-bs-theme="dark"][data-accent="yellow"] {
    --bs-link-color: #e6cf5a;
    --bs-link-color-rgb: 230, 207, 90;
    --bs-link-hover-color: #efdc82;
    --bs-link-hover-color-rgb: 239, 220, 130;
    --bs-primary: #b3950e;
    --bs-primary-bg-subtle: #3a3010;
    --bs-primary-border-subtle: #665518;
    --app-primary-hover: #c7a71a;
    --bs-primary-rgb: 179, 149, 14;
    --bs-primary-text-emphasis: #f0d868;
}

/* Theme toggle: each button holds both options; only the one for the theme that is not active is shown. */
:root:not([data-bs-theme="dark"]) .theme-toggle-light,
:root[data-bs-theme="dark"] .theme-toggle-dark {
    display: none !important;
}

/* Accent swatches in the user menu: a round chip of each accent, the chosen one ringed and ticked */
.accent-swatch {
    height: 1.5rem;
    width: 1.5rem;
}

.accent-swatch .accent-check {
    display: none;
}

:root[data-accent="amber"] .accent-swatch[data-accent-choice="amber"],
:root[data-accent="blue"] .accent-swatch[data-accent-choice="blue"],
:root[data-accent="rose"] .accent-swatch[data-accent-choice="rose"],
:root[data-accent="teal"] .accent-swatch[data-accent-choice="teal"],
:root[data-accent="violet"] .accent-swatch[data-accent-choice="violet"],
:root[data-accent="yellow"] .accent-swatch[data-accent-choice="yellow"] {
    box-shadow: 0 0 0 2px var(--app-surface-bg), 0 0 0 4px var(--bs-primary);
}

:root[data-accent="amber"] .accent-swatch[data-accent-choice="amber"] .accent-check,
:root[data-accent="blue"] .accent-swatch[data-accent-choice="blue"] .accent-check,
:root[data-accent="rose"] .accent-swatch[data-accent-choice="rose"] .accent-check,
:root[data-accent="teal"] .accent-swatch[data-accent-choice="teal"] .accent-check,
:root[data-accent="violet"] .accent-swatch[data-accent-choice="violet"] .accent-check,
:root[data-accent="yellow"] .accent-swatch[data-accent-choice="yellow"] .accent-check {
    display: inline;
}

/* Sidebar: its own surface, body-colored links with the active one on a soft tint of the accent, small-caps group
   headings; the organization chip and user menu sit at the bottom. */
/* The page content is a flex column next to the sidebar; without this a wide table (table-responsive) would widen the
   column to the table's full width and push the content below the sidebar instead of scrolling inside the card. */
main {
    min-width: 0;
}

.sidebar {
    background-color: var(--app-sidebar-bg) !important;
    /* !important: from md up Bootstrap's .offcanvas-md forces a transparent background */
    --bs-offcanvas-bg: var(--app-sidebar-bg);
}

.sidebar .nav {
    gap: 0.125rem;
    --bs-nav-link-color: var(--bs-body-color);
    --bs-nav-link-font-size: 0.875rem;
    --bs-nav-link-font-weight: 500;
    --bs-nav-link-hover-color: var(--bs-emphasis-color);
    --bs-nav-link-padding-x: 0.625rem;
    --bs-nav-link-padding-y: 0.5625rem;
    --bs-nav-pills-border-radius: var(--bs-border-radius);
    --bs-nav-pills-link-active-bg: var(--bs-primary-bg-subtle);
    --bs-nav-pills-link-active-color: var(--bs-primary-text-emphasis);
}

/* Navigation icons: Lucide outline glyphs (lucide-static font) sized like the text, 18px at 14px links */
.sidebar .nav-icon {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1;
}

.sidebar .avatar {
    font-size: 0.6875rem;
    height: 1.75rem;
    width: 1.75rem;
}

/* Initials chip of the client card on a document */
.avatar-lg {
    height: 2.75rem;
    width: 2.75rem;
}

.sidebar .nav h6 {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

/* The active link's label is bolder; the icon glyph keeps its weight so it is not distorted */
.sidebar .nav-link.active .sidebar-label {
    font-weight: 600;
}

/* Sidebar: fixed width (as in the Bootstrap sidebars example) and viewport height, so the user menu sits at the bottom. */
@media (min-width: 768px) {
    .sidebar {
        height: 100vh;
        width: 256px;
    }

    /* Collapsed sidebar (data-sidebar on <html>, see sidebar.js): a narrow rail of centered icons, labels left to
       the links' tooltips. */
    :root[data-sidebar="collapsed"] .sidebar {
        width: 4.5rem;
    }

    :root[data-sidebar="collapsed"] .sidebar .nav-link,
    :root[data-sidebar="collapsed"] .sidebar .sidebar-brand,
    :root[data-sidebar="collapsed"] .sidebar .sidebar-org {
        justify-content: center;
        --bs-nav-link-padding-x: 0.5rem;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* The user menu shows the avatar alone, without its caret, so it centers like the icons */
    :root[data-sidebar="collapsed"] .sidebar .dropdown-toggle::after {
        display: none;
    }

    :root[data-sidebar="collapsed"] .sidebar .sidebar-label {
        display: none !important;
    }

    :root[data-sidebar="collapsed"] .sidebar .dropdown-menu {
        width: auto !important;
    }

    /* The seam toggle's chevron points right (expand) while collapsed. */
    :root[data-sidebar="collapsed"] .sidebar-toggle .bi {
        display: inline-block;
        transform: rotate(180deg);
    }
}

/* The suggestions of an Autosuggest field (autosuggest.js) scroll past this height: Bootstrap has no max-height
   utility, and a dropdown of 50 items would run off the screen. */
.autosuggest-menu {
    max-height: 20rem;
}