/*
 * The BidToBuild admin theme, layered over AdminLTE v4 and Bootstrap 5.3.
 * Loaded on every page, the sign-in ones included, by the "Theme" plugin of
 * config/adminlte.php.
 *
 * It follows the brand of the customer app (../FE): ink and
 * safety yellow, IBM Plex Sans for text and Barlow Condensed for titles.
 * Colors come from the tokens below, so both color modes follow them.
 */

/* Tokens ----------------------------------------------------------------- */

/* The brand, the same in both color modes. */
:root {
    --app-ink-900: #17212e;
    --app-accent: #f2b705;
    --app-accent-hover: #e3ab00;
    --app-accent-active: #d19d00;
    --app-accent-ink: #1a1400;
    --app-sidebar-bg: #17212e;
    --app-logo-bg: #fff;
    --app-sidebar-border: rgba(255, 255, 255, .07);

    --app-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --app-font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;

    --app-radius: .5rem;
    --app-radius-sm: .375rem;
    --app-radius-xs: .25rem;

    --bs-font-sans-serif: var(--app-font-sans);
    --bs-body-font-family: var(--app-font-sans);
    --bs-body-font-size: .875rem;
    --bs-body-line-height: 1.5;
    --bs-border-radius: .375rem;
    --bs-border-radius-sm: .25rem;
    --bs-border-radius-lg: .5rem;
}

:root,
[data-bs-theme="light"] {
    --app-bg: #f5f6f8;
    --app-surface: #fff;
    --app-surface-muted: #f8f9fb;
    --app-surface-hover: #f2f4f7;
    --app-border: #e1e5ea;
    --app-border-strong: #cfd6de;
    --app-border-hover: #b6c0cb;
    --app-ink: #17212e;
    --app-muted: #52606f;
    --app-placeholder: #848f9c;
    --app-steel: #2b5a87;
    --app-steel-rgb: 43, 90, 135;
    --app-steel-strong: #1f4468;
    --app-steel-subtle: #e6eef6;
    --app-accent-subtle: #fdf3d0;
    --app-accent-text: #6b5000;
    --app-grid: #e8ebef;
    --app-tooltip-bg: #17212e;
    --app-tooltip-color: #fff;
    --app-tooltip-muted: #b4bfcc;
    --app-shadow: 0 1px 2px rgba(23, 33, 46, .05);
    --app-shadow-md: 0 8px 20px -10px rgba(23, 33, 46, .22);
    --app-shadow-lg: 0 18px 40px -14px rgba(23, 33, 46, .3);

    --bs-body-color: #17212e;
    --bs-body-color-rgb: 23, 33, 46;
    --bs-emphasis-color: #0e1620;
    --bs-emphasis-color-rgb: 14, 22, 32;
    --bs-secondary-color: #52606f;
    --bs-secondary-color-rgb: 82, 96, 111;
    --bs-secondary-bg: #e9edf1;
    --bs-secondary-bg-rgb: 233, 237, 241;
    --bs-tertiary-bg: #f2f4f7;
    --bs-tertiary-bg-rgb: 242, 244, 247;
    --bs-border-color: #e1e5ea;
    --bs-link-color: #2b5a87;
    --bs-link-color-rgb: 43, 90, 135;
    --bs-link-hover-color: #1f4468;
    --bs-link-hover-color-rgb: 31, 68, 104;
    --bs-form-invalid-color: #b3261e;
    --bs-form-invalid-border-color: #b3261e;

    --bs-primary: #2b5a87;
    --bs-primary-rgb: 43, 90, 135;
    --bs-primary-text-emphasis: #1f4468;
    --bs-primary-bg-subtle: #e6eef6;
    --bs-primary-border-subtle: #bcd0e3;
    --bs-success: #17703f;
    --bs-success-rgb: 23, 112, 63;
    --bs-success-text-emphasis: #0f5530;
    --bs-success-bg-subtle: #e3f2e9;
    --bs-success-border-subtle: #b3d9c2;
    --bs-danger: #b3261e;
    --bs-danger-rgb: 179, 38, 30;
    --bs-danger-text-emphasis: #8f1d18;
    --bs-danger-bg-subtle: #fbe9e7;
    --bs-danger-border-subtle: #f0bdb8;
    --bs-warning: #f2b705;
    --bs-warning-rgb: 242, 183, 5;
    --bs-warning-text-emphasis: #6b5000;
    --bs-warning-bg-subtle: #fdf3d0;
    --bs-warning-border-subtle: #f8de85;
    --bs-info-text-emphasis: #1c5a60;
    --bs-info-bg-subtle: #ddeff0;
    --bs-info-border-subtle: #a9d6da;
}

[data-bs-theme="dark"] {
    --app-bg: #10161e;
    --app-surface: #18212c;
    --app-surface-muted: #1c2632;
    --app-surface-hover: #212c39;
    --app-border: #2c3947;
    --app-border-strong: #3b4a5a;
    --app-border-hover: #51637a;
    --app-ink: #eef1f5;
    --app-muted: #a3afbd;
    --app-placeholder: #75828f;
    --app-steel: #6fa3d4;
    --app-steel-rgb: 111, 163, 212;
    --app-steel-strong: #9cc2e8;
    --app-steel-subtle: rgba(111, 163, 212, .15);
    --app-accent-subtle: rgba(242, 183, 5, .14);
    --app-accent-text: #f7cf5a;
    --app-grid: #263240;
    --app-tooltip-bg: #eef1f5;
    --app-tooltip-color: #17212e;
    --app-tooltip-muted: #52606f;
    --app-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    --app-shadow-md: 0 8px 20px -10px rgba(0, 0, 0, .6);
    --app-shadow-lg: 0 18px 40px -14px rgba(0, 0, 0, .75);

    --bs-body-bg: #18212c;
    --bs-body-bg-rgb: 24, 33, 44;
    --bs-body-color: #e3e8ee;
    --bs-body-color-rgb: 227, 232, 238;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: #a3afbd;
    --bs-secondary-color-rgb: 163, 175, 189;
    --bs-secondary-bg: #243040;
    --bs-secondary-bg-rgb: 36, 48, 64;
    --bs-tertiary-bg: #1f2935;
    --bs-tertiary-bg-rgb: 31, 41, 53;
    --bs-border-color: #2c3947;
    --bs-link-color: #6fa3d4;
    --bs-link-color-rgb: 111, 163, 212;
    --bs-link-hover-color: #9cc2e8;
    --bs-link-hover-color-rgb: 156, 194, 232;
    --bs-form-invalid-color: #ff8a80;
    --bs-form-invalid-border-color: #ff8a80;

    --bs-primary: #6fa3d4;
    --bs-primary-rgb: 111, 163, 212;
    --bs-primary-text-emphasis: #a9cbea;
    --bs-primary-bg-subtle: rgba(111, 163, 212, .15);
    --bs-primary-border-subtle: rgba(111, 163, 212, .35);
    --bs-success: #5fcf8f;
    --bs-success-rgb: 95, 207, 143;
    --bs-success-text-emphasis: #8fe0b0;
    --bs-success-bg-subtle: rgba(95, 207, 143, .13);
    --bs-success-border-subtle: rgba(95, 207, 143, .35);
    --bs-danger: #ff8a80;
    --bs-danger-rgb: 255, 138, 128;
    --bs-danger-text-emphasis: #ffb3ac;
    --bs-danger-bg-subtle: rgba(255, 138, 128, .13);
    --bs-danger-border-subtle: rgba(255, 138, 128, .35);
    --bs-warning: #f2b705;
    --bs-warning-rgb: 242, 183, 5;
    --bs-warning-text-emphasis: #f7cf5a;
    --bs-warning-bg-subtle: rgba(242, 183, 5, .13);
    --bs-warning-border-subtle: rgba(242, 183, 5, .35);
    --bs-info-text-emphasis: #8fd6dd;
    --bs-info-bg-subtle: rgba(90, 190, 200, .13);
    --bs-info-border-subtle: rgba(90, 190, 200, .35);
}

/* Base ------------------------------------------------------------------- */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body,
.app-main {
    background-color: var(--app-bg);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

::selection {
    color: var(--app-accent-ink);
    background-color: rgba(242, 183, 5, .45);
}

a {
    text-underline-offset: .2em;
}

hr {
    border-color: var(--app-border);
    opacity: 1;
}

/* Header ----------------------------------------------------------------- */

.app-header {
    min-height: 3.5rem;
    background-color: var(--app-surface);
    border-bottom: 1px solid var(--app-border);
}

.app-header .navbar-nav {
    align-items: center;
}

.app-header .nav-link {
    display: flex;
    align-items: center;
    height: 2.25rem;
    padding-inline: .625rem;
    margin-inline: .0625rem;
    color: var(--app-muted);
    border-radius: var(--app-radius-sm);
}

.app-header .nav-link:hover,
.app-header .nav-link:focus-visible,
.app-header .show > .nav-link {
    color: var(--app-ink);
    background-color: var(--app-surface-hover);
}

.app-header .nav-link > .bi {
    font-size: 1.0625rem;
    line-height: 1;
}

/* The sidebar toggler is the main control on phones, so it stays easy to spot. */
.app-header [data-lte-toggle="sidebar"] {
    color: var(--app-ink);
}

.app-header [data-lte-toggle="sidebar"] > .bi {
    font-size: 1.375rem;
}

@media (max-width: 767.98px) {
    .app-header [data-lte-toggle="fullscreen"] {
        display: none;
    }
}

/* The wordmark in the header, while the sidebar is folded away. */
.app-header .navbar-wordmark,
.app-header .navbar-wordmark:hover {
    padding-inline: .25rem;
    color: var(--app-ink);
    background: none;
}

.navbar-wordmark .brand-wordmark {
    font-size: 1.375rem;
}

/* The environment of a non-production install, next to the sidebar toggler. */
.env-badge {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    margin-left: .5rem;
    padding: .25rem .5rem;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--app-accent-text);
    background-color: var(--app-accent-subtle);
    border: 1px solid rgba(242, 183, 5, .5);
    border-radius: var(--app-radius-xs);
}

.env-badge::before {
    width: .375rem;
    height: .375rem;
    content: "";
    background-color: var(--app-accent);
    border-radius: 50%;
}

/* The user menu: the toggler shows the initials avatar next to the name. */
.navbar-nav > .user-menu > .nav-link {
    gap: .5rem;
    padding-inline: .25rem .5rem;
    color: var(--app-ink);
    font-weight: 500;
}

.navbar-nav > .user-menu .user-image {
    float: none;
    width: 2rem;
    height: 2rem;
    margin: 0;
    box-shadow: none !important;
}

.navbar-nav > .user-menu > .dropdown-menu {
    padding: 0;
    overflow: hidden;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header {
    min-height: 0;
    padding: 1.5rem 1rem 1.25rem;
    background-color: var(--app-surface-muted);
    border-bottom: 1px solid var(--app-border);
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header > img {
    width: 4rem;
    height: 4rem;
    border: 0;
    box-shadow: none !important;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header > p {
    margin: .75rem 0 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header > p > small {
    margin-top: .125rem;
    font-size: .8125rem;
    font-weight: 400;
    color: var(--app-muted);
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
    display: flex;
    gap: .5rem;
    padding: .75rem;
    background-color: var(--app-surface);
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn {
    flex: 1;
    float: none !important;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer::after {
    content: none;
}

/* Dropdowns, the color mode menu included. */
.dropdown-menu {
    --bs-dropdown-bg: var(--app-surface);
    --bs-dropdown-color: var(--bs-body-color);
    --bs-dropdown-border-color: var(--app-border);
    --bs-dropdown-border-radius: var(--app-radius);
    --bs-dropdown-inner-border-radius: calc(var(--app-radius) - 1px);
    --bs-dropdown-box-shadow: var(--app-shadow-lg);
    --bs-dropdown-font-size: .875rem;
    --bs-dropdown-padding-x: .375rem;
    --bs-dropdown-padding-y: .375rem;
    --bs-dropdown-item-padding-y: .4375rem;
    --bs-dropdown-link-color: var(--bs-body-color);
    --bs-dropdown-link-hover-color: var(--app-ink);
    --bs-dropdown-link-hover-bg: var(--app-surface-hover);
    --bs-dropdown-link-active-color: var(--app-ink);
    --bs-dropdown-link-active-bg: var(--app-steel-subtle);
    box-shadow: var(--bs-dropdown-box-shadow);
}

.dropdown-item {
    border-radius: var(--app-radius-xs);
}

/* Sidebar ---------------------------------------------------------------- */

/* A deep ink panel in both color modes, a step darker than the dark page. */
.app-sidebar,
[data-bs-theme="dark"].app-sidebar {
    --lte-sidebar-color: #b4bfcc;
    --lte-sidebar-hover-color: #fff;
    --lte-sidebar-hover-bg: rgba(255, 255, 255, .05);
    --lte-sidebar-active-color: #fff;
    --lte-sidebar-menu-active-color: #fff;
    --lte-sidebar-menu-active-bg: rgba(255, 255, 255, .08);
    --lte-sidebar-header-color: #7d8a99;
    background-color: var(--app-sidebar-bg);
    border-right: 1px solid var(--app-sidebar-border);
}

[data-bs-theme="dark"] .app-sidebar {
    --app-sidebar-bg: #0b1118;
}

.sidebar-brand {
    height: 3.5rem;
    justify-content: flex-start;
    padding-inline: 1.125rem;
    border-bottom-color: var(--app-sidebar-border) !important;
}

.sidebar-brand .brand-link {
    gap: .625rem;
    min-width: 0;
}

.sidebar-brand .brand-link .brand-image {
    float: none;
    width: 1.875rem;
    height: 1.875rem;
    max-height: none;
    margin: 0 !important;
    box-shadow: none !important;
}

.sidebar-brand .brand-text {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: #fff;
}

/* The wordmark of getbidtobuild.com: "To" sits on a yellow block. */
.brand-wordmark {
    font-family: var(--app-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .01em;
    white-space: nowrap;
}

.brand-to {
    display: inline-block;
    padding: .06em .2em 0;
    margin: 0 .14em;
    color: var(--app-accent-ink);
    background-color: var(--app-accent);
}

.brand-tag {
    padding: .25rem .375rem;
    font-size: .625rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9aa6b4;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--app-radius-xs);
}

/* "Super Admin" doesn't fit beside the wordmark in the sidebar, so it takes two lines there. */
.sidebar-brand .brand-text {
    gap: .375rem;
}

.sidebar-brand .brand-tag {
    max-width: 3.75rem;
    padding: .25rem .3125rem;
    line-height: 1.2;
    letter-spacing: .08em;
    text-align: center;
    white-space: normal;
}

.sidebar-wrapper {
    padding: .5rem .625rem 1rem;
}

.sidebar-menu .nav-header {
    padding: 1.25rem .75rem .5rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.sidebar-menu .nav-link {
    padding: .5rem .75rem;
    margin-bottom: .125rem;
    font-weight: 500;
    border-radius: var(--app-radius-sm);
}

.sidebar-menu .nav-link .nav-icon {
    font-size: 1.0625rem;
    color: #8592a1;
    transition: color .15s ease;
}

.sidebar-menu .nav-link:hover .nav-icon {
    color: #fff;
}

/* The current section: a yellow edge and icon, like a marked-up drawing. */
.sidebar-wrapper .sidebar-menu > .nav-item > .nav-link.active {
    box-shadow: inset 3px 0 0 var(--app-accent);
}

.sidebar-wrapper .sidebar-menu > .nav-item > .nav-link.active .nav-icon {
    color: var(--app-accent);
}

/* Content and page header ------------------------------------------------ */

.app-main .app-content {
    padding: 1.75rem .75rem 3rem !important;
}

@media (max-width: 575.98px) {
    .app-main .app-content {
        padding: 1.25rem .25rem 2.5rem !important;
    }
}

/* The title of a page, with its breadcrumb, description and main actions. */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin-bottom: 1.5rem;
}

.page-header-main {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.page-header-text {
    min-width: 0;
}

.page-breadcrumb {
    --bs-breadcrumb-divider: "/";
    --bs-breadcrumb-divider-color: var(--app-border-hover);
    --bs-breadcrumb-item-active-color: var(--app-muted);
    --bs-breadcrumb-item-padding-x: .375rem;
    margin-bottom: .25rem;
    font-size: .8125rem;
    font-weight: 500;
}

.page-breadcrumb .breadcrumb-item.active {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page-breadcrumb a {
    color: var(--app-muted);
    text-decoration: none;
}

.page-breadcrumb a:hover {
    color: var(--app-steel);
    text-decoration: underline;
}

.page-title {
    margin: 0;
    font-family: var(--app-font-display);
    font-size: 2.125rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .005em;
    color: var(--bs-emphasis-color);
    overflow-wrap: anywhere;
}

.page-description {
    max-width: 52rem;
    margin: .375rem 0 0;
    color: var(--app-muted);
}

.page-description a {
    font-weight: 500;
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--app-border-hover);
}

.page-description a:hover {
    color: var(--app-steel);
    text-decoration-color: currentcolor;
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

@media (max-width: 575.98px) {
    .page-title {
        font-size: 1.875rem;
    }

    .page-actions {
        width: 100%;
    }

    .page-actions > .btn {
        flex: 1 1 auto;
    }
}

/* Cards ------------------------------------------------------------------ */

.card {
    --bs-card-bg: var(--app-surface);
    --bs-card-color: var(--bs-body-color);
    --bs-card-border-color: var(--app-border);
    --bs-card-border-radius: var(--app-radius);
    --bs-card-inner-border-radius: calc(var(--app-radius) - 1px);
    --bs-card-cap-bg: var(--app-surface);
    --bs-card-cap-padding-y: .875rem;
    --bs-card-cap-padding-x: 1.25rem;
    --bs-card-spacer-y: 1.25rem;
    --bs-card-spacer-x: 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--app-shadow);
}

.card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    min-height: 3.5rem;
    border-bottom-color: var(--app-border);
}

.card-header::after {
    content: none;
}

.card-header .card-title {
    float: none;
    margin: 0;
}

.card-header > .card-tools {
    display: flex;
    align-items: center;
    gap: .5rem;
    float: none;
    margin: 0 0 0 auto;
}

.card-title {
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--bs-emphasis-color);
}

.card-subtitle {
    margin: .125rem 0 0;
    font-size: .8125rem;
    color: var(--app-muted);
}

.card-footer {
    padding: .875rem 1.25rem;
    background-color: var(--app-surface-muted);
    border-top-color: var(--app-border);
}

/* The toolbar of a list: search and filters on the left, the count on the right. */
.card-toolbar {
    gap: .5rem .75rem;
}

.toolbar-count {
    margin-left: auto;
    font-size: .8125rem;
    color: var(--app-muted);
    white-space: nowrap;
}

/* A danger zone: the destructive action of a page, kept apart from the form. */
.danger-zone {
    --bs-card-border-color: var(--bs-danger-border-subtle);
}

.danger-zone .card-title {
    color: var(--bs-danger-text-emphasis);
}

.danger-action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
}

.danger-action p {
    max-width: 30rem;
    margin: 0;
    color: var(--app-muted);
}

/* Hidden until Alpine starts, so an x-show element doesn't flash. */
[x-cloak] {
    display: none !important;
}

/* A sign-in link shown once on a user's page, to copy and send. */
.login-link-url {
    font-size: .8125rem;
}

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

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--bs-body-color);
    --bs-table-hover-bg: var(--app-surface-hover);
    --bs-table-hover-color: var(--bs-body-color);
    --bs-table-border-color: var(--app-border);
    margin-bottom: 0;
}

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

.table > :not(caption) > * > *:first-child {
    padding-left: 1.25rem;
}

.table > :not(caption) > * > *:last-child {
    padding-right: 1.25rem;
}

.table > thead > tr > th {
    padding-block: .625rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--app-muted);
    background-color: var(--app-surface-muted);
}

.table > tbody > tr:last-child > * {
    border-bottom: 0;
}

/* The main column of a list takes the free width and truncates its text,
   so the row actions stay in view on narrow screens. */
.table .cell-fill {
    width: 100%;
    max-width: 0;
}

.table .cell-actions {
    width: 1%;
    text-align: end;
    white-space: nowrap;
}

.table .cell-number {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .table > :not(caption) > * > * {
        padding-inline: .5rem;
    }

    .table > :not(caption) > * > *:first-child {
        padding-left: 1rem;
    }

    .table > :not(caption) > * > *:last-child {
        padding-right: 1rem;
    }
}

/* A name with an avatar, and a second muted line under it. */
.entity {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.entity-body {
    min-width: 0;
}

.entity-name {
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

a.entity-name {
    text-decoration: none;
}

a.entity-name:hover {
    color: var(--app-steel);
    text-decoration: underline;
}

.entity-meta {
    font-size: .8125rem;
    color: var(--app-muted);
}

.entity-icon {
    margin-right: .25rem;
    color: var(--app-muted);
}

/* Small tags: a user's companies, a member's roles. */
.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    min-width: 0;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
    max-width: 100%;
    padding: .1875rem .5rem;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--app-ink);
    text-decoration: none;
    white-space: nowrap;
    background-color: var(--app-surface-muted);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-xs);
}

.chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.chip > .bi {
    flex: none;
    font-size: .75rem;
    color: var(--app-muted);
}

a.chip:hover {
    color: var(--app-ink);
    background-color: var(--app-surface-hover);
    border-color: var(--app-border-hover);
}

.chip-owner {
    color: var(--app-accent-text);
    background-color: var(--app-accent-subtle);
    border-color: rgba(242, 183, 5, .5);
}

.chip-owner > .bi {
    color: inherit;
}

a.chip-owner:hover {
    color: var(--app-accent-text);
    background-color: var(--app-accent-subtle);
    border-color: var(--app-accent);
}

.chip-more {
    color: var(--app-muted);
    background-color: transparent;
    border-style: dashed;
}

/* A status that isn't the normal one, such as a paused project. */
.chip-muted {
    color: var(--app-muted);
}

/* A company's logo. Logos are usually made for white, so the box stays white in dark mode too. */
.company-logo {
    flex: none;
    object-fit: contain;
    background-color: var(--app-logo-bg);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
}

.company-logo-lg {
    width: 3.25rem;
    height: 3.25rem;
    padding: .25rem;
}

.company-logo-preview {
    width: 5rem;
    height: 5rem;
    padding: .375rem;
}

.company-logo-empty {
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    color: var(--app-placeholder);
    background-color: var(--app-surface-muted);
}

.company-logo-field {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.brand-color-field .form-control-color {
    flex: 0 0 3rem;
    max-width: 3rem;
}

/* A share of a whole, such as a role's permissions out of all of them. The
   track is a lighter step of the fill's own color. */
.meter {
    display: flex;
    align-items: center;
    gap: .625rem;
}

.meter-track {
    position: relative;
    flex: none;
    width: 4.5rem;
    height: .375rem;
    overflow: hidden;
    background-color: var(--app-steel-subtle);
    border-radius: 999px;
}

.meter-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background-color: var(--app-steel);
    border-radius: inherit;
}

.meter-label {
    font-size: .8125rem;
    color: var(--app-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* A company at its project limit, in the yellow of the brand, and one over it in red.
   The label says the same in words, so the color is never the only cue. */
.meter.is-full .meter-track {
    background-color: var(--app-accent-subtle);
}

.meter.is-full .meter-fill {
    background-color: var(--app-accent);
}

.meter.is-over .meter-track {
    background-color: var(--bs-danger-bg-subtle);
}

.meter.is-over .meter-fill {
    background-color: var(--bs-danger);
}

.meter.is-full .meter-label,
.meter.is-over .meter-label {
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

.meter-warning {
    color: var(--app-accent-text);
    font-weight: 500;
}

/* Square icon buttons for the actions of a table row. */
.btn-icon {
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    width: 2rem;
    height: 2rem;
}

.row-actions {
    display: inline-flex;
    gap: .25rem;
}

/* In place of an action that doesn't apply to the row, with the reason on hover. */
.row-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-size: .875rem;
    color: var(--app-placeholder);
    cursor: help;
}

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

.btn {
    --bs-btn-font-size: .875rem;
    --bs-btn-font-weight: 500;
    --bs-btn-padding-x: .875rem;
    --bs-btn-padding-y: .4375rem;
    --bs-btn-border-radius: var(--app-radius-sm);
    --bs-btn-focus-box-shadow: 0 0 0 .1875rem rgba(var(--app-steel-rgb), .35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    white-space: nowrap;
}

.btn-sm {
    --bs-btn-font-size: .8125rem;
    --bs-btn-padding-x: .625rem;
    --bs-btn-padding-y: .3125rem;
    --bs-btn-border-radius: var(--app-radius-xs);
}

/* The main action of a page: safety yellow with ink text, as on getbidtobuild.com. */
.btn-primary {
    --bs-btn-color: var(--app-accent-ink);
    --bs-btn-bg: var(--app-accent);
    --bs-btn-border-color: var(--app-accent);
    --bs-btn-hover-color: var(--app-accent-ink);
    --bs-btn-hover-bg: var(--app-accent-hover);
    --bs-btn-hover-border-color: var(--app-accent-hover);
    --bs-btn-active-color: var(--app-accent-ink);
    --bs-btn-active-bg: var(--app-accent-active);
    --bs-btn-active-border-color: var(--app-accent-active);
    --bs-btn-disabled-color: var(--app-accent-ink);
    --bs-btn-disabled-bg: var(--app-accent);
    --bs-btn-disabled-border-color: var(--app-accent);
    --bs-btn-focus-box-shadow: 0 0 0 .1875rem rgba(242, 183, 5, .45);
    font-weight: 600;
}

.btn-outline-secondary {
    --bs-btn-color: var(--app-ink);
    --bs-btn-bg: var(--app-surface);
    --bs-btn-border-color: var(--app-border-strong);
    --bs-btn-hover-color: var(--app-ink);
    --bs-btn-hover-bg: var(--app-surface-hover);
    --bs-btn-hover-border-color: var(--app-border-hover);
    --bs-btn-active-color: var(--app-ink);
    --bs-btn-active-bg: var(--bs-secondary-bg);
    --bs-btn-active-border-color: var(--app-border-hover);
    --bs-btn-disabled-color: var(--app-muted);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--app-border);
}

.btn-outline-danger {
    --bs-btn-color: var(--bs-danger-text-emphasis);
    --bs-btn-bg: var(--app-surface);
    --bs-btn-border-color: var(--bs-danger-border-subtle);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #b3261e;
    --bs-btn-hover-border-color: #b3261e;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #8f1d18;
    --bs-btn-active-border-color: #8f1d18;
    --bs-btn-focus-box-shadow: 0 0 0 .1875rem rgba(179, 38, 30, .3);
}

.btn-ghost,
.btn-ghost-danger {
    --bs-btn-box-shadow: none;
    box-shadow: none;
}

.btn-ghost {
    --bs-btn-color: var(--app-muted);
    --bs-btn-hover-color: var(--app-ink);
    --bs-btn-hover-bg: var(--app-surface-hover);
    --bs-btn-active-bg: var(--bs-secondary-bg);
    --bs-btn-active-color: var(--app-ink);
}

.btn-ghost-danger {
    --bs-btn-color: var(--app-muted);
    --bs-btn-hover-color: var(--bs-danger-text-emphasis);
    --bs-btn-hover-bg: var(--bs-danger-bg-subtle);
    --bs-btn-active-bg: var(--bs-danger-bg-subtle);
    --bs-btn-active-color: var(--bs-danger-text-emphasis);
}

/* Spelled-out delete buttons stay red; the row icons only turn red on hover. */
.btn-ghost-danger:not(.btn-icon) {
    --bs-btn-color: var(--bs-danger-text-emphasis);
}

.btn .spinner-border-sm {
    width: .875rem;
    height: .875rem;
    border-width: .14em;
}

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

.form-label {
    margin-bottom: .375rem;
    font-weight: 500;
    color: var(--bs-emphasis-color);
}

.form-control,
.form-select {
    min-height: 2.375rem;
    padding-block: .4375rem;
    font-size: .875rem;
    color: var(--bs-body-color);
    background-color: var(--app-surface);
    border-color: var(--app-border-strong);
    border-radius: var(--app-radius-sm);
}

.form-control:hover:not(:disabled):not(:focus):not(.is-invalid),
.form-select:hover:not(:disabled):not(:focus):not(.is-invalid) {
    border-color: var(--app-border-hover);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--app-steel);
    box-shadow: 0 0 0 .1875rem rgba(var(--app-steel-rgb), .2);
}

.form-control::placeholder {
    color: var(--app-placeholder);
}

.form-control-sm,
.form-select-sm {
    min-height: 2rem;
    padding-block: .3125rem;
    font-size: .8125rem;
    border-radius: var(--app-radius-xs);
}

.form-control:disabled,
.form-select:disabled {
    color: var(--app-muted);
    background-color: var(--app-surface-muted);
}

.form-text {
    font-size: .8125rem;
    color: var(--app-muted);
}

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

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

.form-check-input:focus {
    border-color: var(--app-steel);
    box-shadow: 0 0 0 .1875rem rgba(var(--app-steel-rgb), .2);
}

/* On the light steel of the dark mode, the check mark is drawn in ink. */
[data-bs-theme="dark"] .form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2310161e' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

/* A search box with its magnifier inside, for the list toolbars. */
.search-field {
    position: relative;
    width: 100%;
    max-width: 20rem;
}

.search-field > .bi {
    position: absolute;
    top: 50%;
    left: .75rem;
    font-size: .8125rem;
    color: var(--app-muted);
    pointer-events: none;
    transform: translateY(-50%);
}

.search-field > .form-control {
    padding-left: 2.125rem;
}

/* A project limit: a short number with its unit. */
.limit-input {
    max-width: 15rem;
}

/* A fieldset groups related inputs, without the box AdminLTE draws around it. */
fieldset:not(.permission-group) {
    padding: 0;
    margin-bottom: 1rem;
    border: 0;
}

fieldset:not(.permission-group) > legend {
    float: none;
    width: auto;
    padding: 0;
    margin-bottom: .5rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--bs-emphasis-color);
}

/* The "Add a member" form under a company's team. */
.card-footer.add-member {
    padding: 1.25rem;
}

.form-section-title {
    margin: 0 0 .25rem;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

.form-section-text {
    margin-bottom: 1rem;
    font-size: .8125rem;
    color: var(--app-muted);
}

/* Badges ----------------------------------------------------------------- */

.badge {
    padding: .3em .55em;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .02em;
    border-radius: var(--app-radius-xs);
}

/* A company's owner, in the brand yellow. */
.badge-owner {
    color: var(--app-accent-ink);
    background-color: var(--app-accent);
}

/* A role shared by every company. */
.badge-template {
    color: var(--app-steel-strong);
    background-color: var(--app-steel-subtle);
}

.badge-neutral {
    color: var(--app-muted);
    background-color: var(--app-surface-muted);
    border: 1px solid var(--app-border);
}

/* An account staff have blocked. */
.badge-blocked {
    color: var(--bs-danger-text-emphasis);
    background-color: var(--bs-danger-bg-subtle);
}

.badge-active {
    color: var(--bs-success-text-emphasis);
    background-color: var(--bs-success-bg-subtle);
}

/* A contact request nobody has handled yet. */
.badge-new {
    color: var(--app-accent-ink);
    background-color: var(--app-accent);
}

/* The account an email already belongs to, on the company form. */
.owner-match {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem .75rem;
    background-color: var(--app-steel-subtle);
    border-radius: var(--app-radius-sm);
}

/* BidToBuild's estimators to tick on the new company form: name, badges, then the email. */
.estimator-option {
    margin-bottom: .5rem;
}

.estimator-option .form-check-label {
    min-width: 0;
    max-width: 100%;
}

/* Activity log ----------------------------------------------------------- */

.activity-feed {
    padding: 0;
    margin: 0;
    list-style: none;
}

.activity-entry {
    display: flex;
    gap: .75rem;
    padding: .875rem 1.25rem;
    border-bottom: 1px solid var(--app-border);
}

.activity-entry:last-child {
    border-bottom: 0;
}

.activity-system {
    color: var(--app-muted);
    background-color: var(--app-surface-muted);
    border: 1px solid var(--app-border);
}

.activity-body {
    flex: 1;
    min-width: 0;
}

.activity-summary {
    margin: 0;
    overflow-wrap: anywhere;
}

.activity-summary .badge {
    vertical-align: .1em;
}

.activity-subject {
    font-weight: 600;
}

span.activity-subject {
    color: var(--bs-emphasis-color);
}

.activity-changes {
    display: grid;
    gap: .25rem;
    padding: .5rem .75rem;
    margin: .5rem 0 0;
    font-size: .8125rem;
    list-style: none;
    background-color: var(--app-surface-muted);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
}

.activity-changes li {
    overflow-wrap: anywhere;
}

.activity-field {
    margin-right: .375rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

.activity-old {
    color: var(--app-muted);
    text-decoration: line-through;
    text-decoration-color: var(--app-border-hover);
}

.activity-arrow {
    margin: 0 .25rem;
    font-size: .75rem;
    color: var(--app-muted);
}

.activity-new,
.activity-added {
    color: var(--bs-emphasis-color);
}

.activity-added {
    margin-right: .5rem;
    color: var(--bs-success-text-emphasis);
}

.activity-removed {
    color: var(--bs-danger-text-emphasis);
}

.activity-meta {
    margin: .25rem 0 0;
    font-size: .75rem;
    color: var(--app-muted);
}

/* Avatars ---------------------------------------------------------------- */

.avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .02em;
    border-radius: 50%;
    user-select: none;
}

.avatar-sm {
    width: 1.75rem;
    height: 1.75rem;
    font-size: .625rem;
}

.avatar-lg {
    width: 3.25rem;
    height: 3.25rem;
    font-size: 1rem;
}

.avatar-square {
    border-radius: var(--app-radius-sm);
}

.avatar-lg.avatar-square {
    border-radius: var(--app-radius);
}

/* Six muted tones that sit with the ink and yellow of the brand. The tone is
   picked from the name, so a name always gets the same one. */
.avatar-tone-0 { color: #1f4468; background-color: #e3ecf5; }
.avatar-tone-1 { color: #3a4654; background-color: #e7eaee; }
.avatar-tone-2 { color: #6b5000; background-color: #fbefc9; }
.avatar-tone-3 { color: #1d5a36; background-color: #e2f0e6; }
.avatar-tone-4 { color: #7a3b22; background-color: #f6e4dc; }
.avatar-tone-5 { color: #1c5a60; background-color: #ddeff0; }

[data-bs-theme="dark"] .avatar-tone-0 { color: #a9cbea; background-color: rgba(111, 163, 212, .17); }
[data-bs-theme="dark"] .avatar-tone-1 { color: #cbd3dc; background-color: rgba(163, 175, 189, .15); }
[data-bs-theme="dark"] .avatar-tone-2 { color: #f7cf5a; background-color: rgba(242, 183, 5, .15); }
[data-bs-theme="dark"] .avatar-tone-3 { color: #8fe0b0; background-color: rgba(95, 207, 143, .14); }
[data-bs-theme="dark"] .avatar-tone-4 { color: #f0b49a; background-color: rgba(230, 140, 100, .16); }
[data-bs-theme="dark"] .avatar-tone-5 { color: #8fd6dd; background-color: rgba(90, 190, 200, .14); }

/* Dashboard -------------------------------------------------------------- */

.stat-card {
    display: block;
    height: calc(100% - 1.5rem);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.stat-card:hover {
    color: inherit;
    border-color: var(--app-border-strong);
    box-shadow: var(--app-shadow-md);
}

.stat-card:focus-visible {
    outline: 2px solid var(--app-steel);
    outline-offset: 2px;
}

.stat-card .card-body {
    display: flex;
    flex-direction: column;
    padding: 1.125rem 1.25rem 1.25rem;
}

.stat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.stat-label {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--app-muted);
}

.stat-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
    color: var(--app-muted);
    background-color: var(--app-surface-muted);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.stat-card:hover .stat-icon {
    color: var(--app-accent-ink);
    background-color: var(--app-accent);
    border-color: var(--app-accent);
}

/* A standalone figure keeps its proportional digits. */
.stat-value {
    margin: .5rem 0 0;
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--bs-emphasis-color);
}

.stat-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .375rem;
    margin: .5rem 0 0;
    font-size: .8125rem;
    color: var(--app-muted);
}

.stat-delta {
    display: inline-flex;
    align-items: center;
    gap: .125rem;
    padding: .0625rem .375rem;
    font-weight: 600;
    color: var(--bs-success-text-emphasis);
    background-color: var(--bs-success-bg-subtle);
    border-radius: var(--app-radius-xs);
}

@media (max-width: 575.98px) {
    .stat-card .card-body {
        padding: 1rem;
    }

    .stat-value {
        font-size: 1.75rem;
    }

    .stat-icon {
        width: 1.75rem;
        height: 1.75rem;
        font-size: .875rem;
    }
}

/* The sign-up chart: one series of columns on a recessive grid. The space
   above the plot holds the tooltip of the column under the pointer. */
.chart-total {
    text-align: right;
}

.chart-total-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--bs-emphasis-color);
}

.chart-total-label {
    font-size: .75rem;
    color: var(--app-muted);
}

.bar-chart {
    --chart-height: 11rem;
    position: relative;
    padding: 2.75rem 0 0 2rem;
    border-radius: var(--app-radius-xs);
}

.bar-chart:focus {
    outline: none;
}

.bar-chart:focus-visible {
    outline: 2px solid var(--app-steel);
    outline-offset: 4px;
}

.bar-chart-plot {
    position: relative;
    height: var(--chart-height);
}

.bar-chart-gridline {
    position: absolute;
    right: 0;
    left: 0;
    height: 0;
    border-top: 1px solid var(--app-grid);
}

.bar-chart-gridline.is-baseline {
    border-top-color: var(--app-border-strong);
}

.bar-chart-gridline > span {
    position: absolute;
    top: 0;
    right: calc(100% + .5rem);
    font-size: .6875rem;
    line-height: 1;
    color: var(--app-muted);
    font-variant-numeric: tabular-nums;
    transform: translateY(-50%);
}

.bar-chart-bars {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    gap: 2px;
}

.bar-chart-col {
    position: relative;
    display: flex;
    flex: 1 1 0;
    align-items: flex-end;
    justify-content: center;
    min-width: 0;
    height: 100%;
}

.bar-chart-col::before {
    position: absolute;
    inset: 0;
    content: "";
    border-radius: var(--app-radius-xs);
}

.bar-chart-col.is-active::before {
    background-color: rgba(var(--app-steel-rgb), .07);
}

.bar-chart-bar {
    position: relative;
    width: 100%;
    max-width: 1.5rem;
    background-color: var(--app-steel);
    border-radius: 4px 4px 0 0;
    transition: filter .15s ease;
}

.bar-chart-col.is-active .bar-chart-bar {
    filter: brightness(1.2);
}

.bar-chart-tip {
    position: absolute;
    bottom: calc(100% + .5rem);
    left: 50%;
    z-index: 2;
    padding: .375rem .5625rem;
    font-size: .75rem;
    line-height: 1.35;
    color: var(--app-tooltip-color);
    white-space: nowrap;
    pointer-events: none;
    visibility: hidden;
    background-color: var(--app-tooltip-bg);
    border-radius: var(--app-radius-xs);
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity .1s ease;
}

.bar-chart-col.is-start .bar-chart-tip {
    left: 0;
    transform: none;
}

.bar-chart-col.is-end .bar-chart-tip {
    right: 0;
    left: auto;
    transform: none;
}

.bar-chart-col.is-active .bar-chart-tip {
    visibility: visible;
    opacity: 1;
}

.bar-chart-tip strong {
    display: block;
    font-weight: 600;
}

.bar-chart-tip span {
    color: var(--app-tooltip-muted);
}

.bar-chart-x {
    position: relative;
    height: 1.25rem;
    margin-top: .5rem;
}

.bar-chart-x > span {
    position: absolute;
    top: 0;
    font-size: .6875rem;
    color: var(--app-muted);
    white-space: nowrap;
    transform: translateX(-50%);
}

.bar-chart-x > span:first-child {
    transform: none;
}

.bar-chart-x > span:last-child {
    transform: translateX(-100%);
}

/* The numbers behind the chart, one click away. */
.chart-table {
    margin-top: 1rem;
    font-size: .8125rem;
}

.chart-table > summary {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-weight: 500;
    color: var(--app-muted);
    cursor: pointer;
}

.chart-table > summary:hover {
    color: var(--app-steel);
}

.chart-table .table {
    margin-top: .75rem;
}

.chart-table .table > :not(caption) > * > * {
    padding-block: .375rem;
}

/* Shortcuts to the create pages. */
.quick-actions {
    display: grid;
    gap: .5rem;
}

.quick-action {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem .75rem;
    color: var(--bs-body-color);
    text-decoration: none;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    transition: background-color .15s ease, border-color .15s ease;
}

.quick-action:hover {
    color: var(--bs-emphasis-color);
    background-color: var(--app-surface-muted);
    border-color: var(--app-border-strong);
}

.quick-action:focus-visible {
    outline: 2px solid var(--app-steel);
    outline-offset: 2px;
}

.quick-action-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1rem;
    color: var(--app-steel);
    background-color: var(--app-steel-subtle);
    border-radius: var(--app-radius-sm);
    transition: color .15s ease, background-color .15s ease;
}

.quick-action:hover .quick-action-icon {
    color: var(--app-accent-ink);
    background-color: var(--app-accent);
}

.quick-action .bi-chevron-right {
    margin-left: auto;
    color: var(--app-muted);
}

/* Lists inside cards, such as the newest companies. */
.card > .list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-color: var(--bs-body-color);
    --bs-list-group-border-color: var(--app-border);
    --bs-list-group-action-hover-bg: var(--app-surface-hover);
    --bs-list-group-action-hover-color: var(--bs-body-color);
    --bs-list-group-action-active-bg: var(--bs-secondary-bg);
    --bs-list-group-item-padding-x: 1.25rem;
    --bs-list-group-item-padding-y: .75rem;
}

.list-group-item-action:focus-visible {
    outline: 2px solid var(--app-steel);
    outline-offset: -2px;
}

/* Empty states ----------------------------------------------------------- */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1.5rem;
    text-align: center;
}

.empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    color: var(--app-steel);
    background-color: var(--app-steel-subtle);
    border-radius: var(--app-radius);
}

.empty-state-title {
    margin-bottom: .25rem;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--bs-emphasis-color);
}

.empty-state-text {
    max-width: 24rem;
    margin-bottom: 1.25rem;
    font-size: .875rem;
    color: var(--app-muted);
}

.empty-state-text:last-child {
    margin-bottom: 0;
}

/* Role form -------------------------------------------------------------- */

/* The permissions of an area, as one checkbox group with a select-all toggle. */
.permission-group {
    position: relative;
    height: 100%;
    padding: .875rem 1rem 1rem;
    margin: 0;
    background-color: var(--app-surface-muted);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
}

/* Floated, so the legend sits inside the box, in line with the toggle. */
.permission-group legend {
    float: left;
    width: 100%;
    padding: 0 5rem 0 0;
    margin-bottom: .625rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--app-muted);
}

.permission-group .form-check {
    clear: left;
}

.permission-group .form-check + .form-check {
    margin-top: .375rem;
}

.permission-toggle {
    position: absolute;
    top: .6875rem;
    right: .75rem;
    padding: .125rem .25rem;
    font-size: .75rem;
    font-weight: 500;
    color: var(--app-steel);
    background: none;
    border: 0;
    border-radius: var(--app-radius-xs);
}

.permission-toggle:hover {
    text-decoration: underline;
}

.permission-summary {
    font-size: .8125rem;
    color: var(--app-muted);
    font-variant-numeric: tabular-nums;
}

/* Settings: the tabs in the card header. */
.card-header-tabs-underline {
    min-height: 0;
    padding-bottom: 0;
}

.card-header-tabs-underline .nav-underline {
    --bs-nav-underline-gap: 1.5rem;
    --bs-nav-underline-border-width: .1875rem;
    --bs-nav-link-padding-y: .875rem;
    --bs-nav-underline-link-active-color: var(--bs-emphasis-color);
    margin-bottom: -1px;
}

.card-header-tabs-underline .nav-link {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-weight: 500;
    color: var(--app-muted);
}

.card-header-tabs-underline .nav-link:hover {
    color: var(--app-ink);
}

.card-header-tabs-underline .nav-link.active {
    border-bottom-color: var(--app-accent);
}

/* Pagination ------------------------------------------------------------- */

.pagination {
    --bs-pagination-padding-x: .625rem;
    --bs-pagination-padding-y: .3125rem;
    --bs-pagination-font-size: .8125rem;
    --bs-pagination-color: var(--app-ink);
    --bs-pagination-bg: var(--app-surface);
    --bs-pagination-border-color: var(--app-border-strong);
    --bs-pagination-border-radius: var(--app-radius-sm);
    --bs-pagination-hover-color: var(--app-ink);
    --bs-pagination-hover-bg: var(--app-surface-hover);
    --bs-pagination-hover-border-color: var(--app-border-strong);
    --bs-pagination-focus-color: var(--app-ink);
    --bs-pagination-focus-bg: var(--app-surface-hover);
    --bs-pagination-focus-box-shadow: 0 0 0 .1875rem rgba(var(--app-steel-rgb), .25);
    --bs-pagination-active-color: var(--app-accent-ink);
    --bs-pagination-active-bg: var(--app-accent);
    --bs-pagination-active-border-color: var(--app-accent);
    --bs-pagination-disabled-color: var(--app-muted);
    --bs-pagination-disabled-bg: var(--app-surface-muted);
    --bs-pagination-disabled-border-color: var(--app-border);
    margin: 0;
}

.page-item.active .page-link {
    font-weight: 600;
}

.card-footer nav p.small {
    margin: 0;
    color: var(--app-muted);
}

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

.toast {
    --bs-toast-bg: var(--app-surface);
    --bs-toast-border-color: var(--app-border);
    --bs-toast-border-radius: var(--app-radius);
    --bs-toast-box-shadow: var(--app-shadow-lg);
    --bs-toast-font-size: .875rem;
    color: var(--bs-body-color);
    border-left: 3px solid var(--app-steel);
}

.toast-success {
    border-left-color: var(--bs-success);
}

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

.toast-warning {
    border-left-color: var(--app-accent);
}

.toast-icon {
    flex: none;
    font-size: 1.125rem;
    line-height: 1.3;
}

/* The warning icon reads better in the text color of the warning palette. */
.toast-icon.text-warning {
    color: var(--app-accent-text) !important;
}

/* Modals ----------------------------------------------------------------- */

.modal-content {
    --bs-modal-bg: var(--app-surface);
    border-color: var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-lg);
}

.modal-header,
.modal-footer {
    border-color: var(--app-border);
}

.modal-title {
    font-size: 1rem;
    font-weight: 600;
}

.modal-footer {
    background-color: var(--app-surface-muted);
    border-bottom-right-radius: var(--app-radius);
    border-bottom-left-radius: var(--app-radius);
}

.modal-backdrop.show {
    --bs-backdrop-bg: #0b1118;
    --bs-backdrop-opacity: .55;
}

/* Sign-in pages ---------------------------------------------------------- */

/* A brand panel next to the form, folded into a band above it on phones. */
.auth-page {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--app-bg);
}

.auth-aside {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding: 2.5rem 3rem;
    overflow: hidden;
    color: #eef1f5;
    background-color: var(--app-ink-900);
    isolation: isolate;
}

/* A drafting grid, and the yellow block of the brand mark. */
.auth-aside::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 2rem 2rem;
}

.auth-aside::after {
    position: absolute;
    right: -3rem;
    bottom: -3rem;
    z-index: -1;
    width: 12rem;
    height: 12rem;
    content: "";
    background-color: var(--app-accent);
}

/* On short screens the pitch would reach down to the block. */
@media (max-height: 560px) {
    .auth-aside::after {
        display: none;
    }
}

.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    color: #fff;
    text-decoration: none;
}

.auth-brand:hover {
    color: #fff;
}

.auth-brand .brand-wordmark {
    font-size: 1.875rem;
}

.auth-headline {
    max-width: 26rem;
    margin: 0 0 1rem;
    font-family: var(--app-font-display);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

.auth-lead {
    max-width: 26rem;
    margin: 0 0 1.5rem;
    font-size: 1rem;
    color: #b4bfcc;
}

.auth-points {
    display: grid;
    gap: .75rem;
    max-width: 26rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.auth-points li {
    display: flex;
    gap: .75rem;
    color: #dbe1e8;
}

.auth-points .bi {
    flex: none;
    color: var(--app-accent);
}

/* Kept clear of the yellow block in the corner. */
.auth-footnote {
    max-width: calc(100% - 7.5rem);
    margin: 0;
    font-size: .8125rem;
    color: #8592a1;
}

.auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
}

.auth-panel {
    width: 100%;
    max-width: 24rem;
}

.auth-title {
    margin: 0 0 .375rem;
    font-family: var(--app-font-display);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.05;
}

.auth-subtitle {
    margin: 0 0 1.75rem;
    color: var(--app-muted);
}

.auth-panel .form-control {
    min-height: 2.75rem;
}

.auth-panel .btn-lg {
    --bs-btn-padding-y: .625rem;
    --bs-btn-font-size: .9375rem;
    width: 100%;
}

.auth-help {
    margin: 1.5rem 0 0;
    font-size: .8125rem;
    color: var(--app-muted);
}

.auth-user {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem;
    margin-bottom: 1.5rem;
    background-color: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
}

@media (max-width: 991.98px) {
    .auth-page {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 1fr;
    }

    .auth-aside {
        padding: 1.125rem 1.5rem;
    }

    .auth-aside::after {
        right: -1.5rem;
        bottom: -1.5rem;
        width: 4.5rem;
        height: 4.5rem;
    }

    .auth-pitch,
    .auth-footnote {
        display: none;
    }

    .auth-brand .brand-wordmark {
        font-size: 1.5rem;
    }

    .auth-main {
        align-items: flex-start;
        padding-top: 3rem;
    }
}

/* Loading ---------------------------------------------------------------- */

/* While a list reloads, it keeps its last render, dimmed. */
.is-loading {
    pointer-events: none;
    opacity: .55;
    transition: opacity .15s ease;
}

@media (prefers-reduced-motion: reduce) {
    .stat-card,
    .stat-icon,
    .quick-action,
    .quick-action-icon,
    .bar-chart-bar,
    .bar-chart-tip,
    .sidebar-menu .nav-link .nav-icon,
    .is-loading {
        transition: none;
    }
}