/* Type, headings, breadcrumbs, focus and icons. Taken from CX Engine's refreshed text.css so Auth's text reads like
   the portals'. Sizes, weights and colours come from the Chandler.CX.DesignSystem tokens; form labels and controls
   are styled by the package's forms.css. */

body {
    font-family: var(--cx-global-font-family);
    color: var(--cx-global-primary-text-color);
}

h1, h2, h3, h4 {
    margin-bottom: var(--cx-space-3);
    font-weight: var(--cx-font-weight-semibold);
}

h1 {
    font-size: var(--cx-font-size-h1);
}

h3 {
    font-size: var(--cx-font-size-h3);
}

h4 {
    font-size: var(--cx-font-size-lg);
    text-transform: none;
    color: var(--cx-global-primary-text-color);
}

h5 {
    font-size: var(--cx-font-size-h5);
}

/* ---- Page title and breadcrumbs ---- */

.breadcrumbs {
    text-overflow: ellipsis;
    white-space: nowrap;
}

.breadcrumbs:only-child {
    width: 95%;
    overflow: hidden;
}

.breadcrumbs h1 {
    display: inline-block;
    font-size: var(--cx-font-size-xl);
    width: 100%;
}

.breadcrumbs h1 a {
    font-weight: var(--cx-font-weight-regular);
    text-decoration: none;
}

.breadcrumbs a:hover {
    text-decoration: none;
}

/* ---- Small text ---- */

/* The xs type size (13px), e.g. the sign-in page's note under Remember me. */
.text-xs {
    font-size: var(--cx-font-size-xs);
}

/* ---- Preformatted text (e.g. Bulk Create's CSV example) ---- */

pre {
    outline: 1px solid var(--cx-global-border-color);
    padding: 15px;
    margin: 5px;
}

/* ---- Focus ring ---- */
/* One focus treatment for every interactive element: keyboard focus shows a ring, pointer focus shows nothing.
   :focus:not(:focus-visible) is more specific than :focus-visible, so it only strips the ring for pointer focus. */
:focus-visible {
    outline: var(--cx-focus-ring-width) solid var(--cx-global-focus-ring-color);
    outline-offset: var(--cx-focus-ring-offset);
}

:focus:not(:focus-visible) {
    outline: none;
}

/* ---- Icons ---- */
/* Font Awesome icons at the regular (400) weight, in one colour. The colour is applied at zero specificity with
   :where() so icons on primary buttons stay white and deliberate colours still win. An icon inside coloured
   status text keeps that text's colour (see below the colour rule). */
.fa, .fas, .far, .fal, .fat,
.fa-solid, .fa-regular, .fa-light, .fa-thin {
    font-weight: var(--cx-font-weight-regular);
}

:where(.fa, .fas, .far, .fal, .fat,
       .fa-solid, .fa-regular, .fa-light, .fa-thin) {
    color: var(--cx-global-icon-color);
}

/* The rule above matches the icon itself, which beats the colour it would inherit, so an icon inside red, green,
   amber or blue text (e.g. Bulk Create's ✓ valid / ✕ errors / ⚠ warnings) takes that text's colour again. An icon
   with a colour class of its own still wins: Bootstrap's text utilities are !important. */
:is(.text-danger, .text-success, .text-warning, .text-info, .text-primary)
    :is(.fa, .fas, .far, .fal, .fat, .fa-solid, .fa-regular, .fa-light, .fa-thin) {
    color: inherit;
}

/* The down-caret is drawn as the angle-down chevron throughout, as in the portals. */
.fa-caret-down::before {
    content: "\f107";
}

/* Page frame: the space the fixed top bar and side navigation leave for the page, the content padding and the
   sticky page header. Modelled on CX Engine's refreshed layout.css so Auth sits in the same frame as the portals.
   Colours, sizes and spacing come from the Chandler.CX.DesignSystem tokens. */

html {
    position: relative;
    min-height: 100%;
}

body {
    font-size: var(--cx-global-font-size-body);
    background-color: var(--cx-global-body-background);
    overflow-x: hidden;
}

/* The room a page footer had; the layout's footer is commented out (Views/Shared/_Layout.cshtml), but the margin and
   the shorter page below keep a short page from scrolling, so they stay. */
body.sticky-footer {
    margin-bottom: 40px;
}

body.sticky-footer .outer-wrapper {
    min-height: calc(100vh - 134px);
}

/* The page, below the top bar (68px) and right of the side navigation on desktop. */
.outer-wrapper {
    min-height: calc(100vh - 48px);
    width: 100%;
    margin: 68px 0 0 0;
}

@media (min-width: 992px) {
    .outer-wrapper {
        width: calc(100% - var(--cx-sidenav-width));
        margin-left: var(--cx-sidenav-width);
    }
}

.content-wrapper {
    padding: 15px;
}

@media (min-width: 992px) {
    .content-wrapper {
        padding: var(--cx-space-8);
    }
}

/* The page header (title, breadcrumbs, filters and tabs), pinned to the top of the page on desktop. */
.page-anchor-top {
    z-index: 1030;
    background-color: var(--cx-global-surface-color);
}

.page-anchor-top .page-title {
    padding: var(--cx-space-2) 15px;
    border-bottom: 1px solid var(--cx-global-border-color);
}

@media (min-width: 992px) {
    .page-anchor-top {
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
    }

    .page-anchor-top .page-title {
        padding: 0 25px 0 40px;
        min-height: 80px;
    }

    .page-anchor-top h1 {
        margin-top: 0;
        margin-bottom: 0;
    }
}

@media (max-width: 992px) {
    .page-anchor-top {
        padding-top: 10px;
    }
}

/* Navigation: the top bar (#global-nav), the side navigation (#mainNav) and the page tabs (.page-nav).
   Taken from CX Engine's refreshed nav.css, whose shell markup Auth shares, so Auth's navigation looks and behaves
   like the portals'. Colours, sizes and spacing come from the Chandler.CX.DesignSystem tokens. */

.nav-link {
    cursor: pointer;
    font-size: var(--cx-global-font-size-body);
    color: var(--cx-global-primary-text-color);
}

.nav-item .nav-link {
    padding-top: 5px;
    padding-bottom: 5px;
}

.nav-link-text {
    margin-left: var(--cx-space-2);
    margin-top: var(--cx-space-1);
    display: inline-block;
}

.nav-link i:not([data-bs-toggle="tooltip"]) {
    float: left;
    margin-top: 7px;
}

.nav-tabs .nav-item {
    margin-bottom: 0;
}

.navbar-nav > li a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navbar-light .navbar-nav .nav-link {
    color: var(--cx-navbar-link-color);
}

.navbar-toggler {
    margin-right: var(--cx-space-4);
}

/* ---- Top bar ---- */

#global-nav {
    z-index: 1035;
    padding: 14px var(--cx-space-4);
    background-color: var(--cx-global-surface-color);
    border-bottom: 1px solid var(--cx-global-border-color);
}

@media (min-width: 992px) {
    #global-nav #navbar-top {
        justify-content: space-between;
    }

    #global-nav .navbar-brand {
        margin-right: var(--cx-space-5);
    }
}

#global-nav .navbar-brand {
    min-width: 74px;
}

#global-nav .navbar-brand img {
    height: 26px;
    max-width: 170px;
    width: auto;
}

#global-nav .navbar-sidenav {
    gap: 10px;
}

#global-nav .nav-link {
    color: var(--cx-global-primary-text-color);
    height: 40px;
    padding-top: 10px;
    font-size: var(--cx-font-size-sm);
    min-width: 110px;
    text-align: center;
    border-radius: var(--cx-global-btn-radius);
}

#global-nav .nav-link.active {
    color: var(--cx-global-primary-contrast-color);
    background-color: var(--cx-btn-primary-bg);
    font-weight: var(--cx-font-weight-semibold);
}

#global-nav .nav-link:not(.active):hover {
    background-color: var(--cx-global-primary-surface-hover);
    font-weight: var(--cx-font-weight-semibold);
}

#global-nav .nav-link-text {
    margin-top: 0;
    margin-left: 0;
}

#global-nav .nav-link i:not([data-bs-toggle="tooltip"]) {
    margin-top: 2px;
    margin-right: var(--cx-space-2);
}

/* Log out posts a form (sign-out needs its antiforgery token), so its button is dressed as a top-bar link. */
#logoutForm button.nav-link {
    background: none;
    border: none;
    margin: 0;
    font: inherit;
    font-size: var(--cx-font-size-sm);
    line-height: inherit;
    cursor: pointer;
}

#logoutForm button.nav-link:not(:hover) {
    font-weight: inherit;
}

/* ---- Side navigation ---- */

#mainNav {
    z-index: 1031;
    border-bottom: 1px solid var(--cx-divider-translucent);
    padding-bottom: 0;
}

#mainNav .navbar-brand {
    display: flex;
    align-items: center;
}

#mainNav .navbar-brand img {
    height: 26px;
    max-width: 170px;
    width: auto;
}

#mainNav ul {
    height: 100vh;
}

#mainNav .nav-item .nav-link {
    min-height: 40px;
}

#mainNav .navbar-sidenav .nav-item:not(:last-of-type) .nav-link {
    border-bottom: 1px solid var(--cx-divider-translucent);
}

#mainNav .navbar-sidenav .nav-item .nav-link {
    padding: var(--cx-space-2) var(--cx-space-4) 10px var(--cx-space-4);
    margin: 2px var(--cx-sidenav-item-inset);
    border-radius: var(--cx-sidenav-item-radius);
}

#mainNav.navbar-light .navbar-collapse .navbar-sidenav li.active .nav-link {
    font-weight: var(--cx-font-weight-semibold);
    color: var(--cx-sidenav-item-active-text);
    background-color: var(--cx-sidenav-item-active-bg);
    border-radius: var(--cx-sidenav-item-radius);
}

.nav-item-subheading span {
    display: block;
    text-transform: capitalize;
}

.nav-item-subheading span {
    padding: var(--cx-space-3) var(--cx-space-4) var(--cx-space-1) var(--cx-space-5);
    font-size: var(--cx-global-font-size-body);
    font-weight: var(--cx-font-weight-semibold);
}

.nav-item-subheading {
    margin-top: var(--cx-space-3);
}

@media (max-width: 992px) {
    .nav-item-subheading:not(.ext) {
        display: none;
    }
}

.navbar-brand h1 {
    text-align: left;
    font-size: var(--cx-font-size-3xl);
    margin: var(--cx-space-1);
    color: var(--cx-global-primary-text-color);
}

@media (min-width: 992px) {
    #mainNav {
        left: 0;
        top: 0;
        bottom: 0;
        position: fixed;
        right: auto;
        width: var(--cx-sidenav-width);
        padding: 64px 0 0 0;
        box-shadow: none;
        border-right: 1px solid var(--cx-global-border-color);
    }

    #mainNav ul {
        height: auto;
    }

    #mainNav .navbar-brand {
        position: absolute;
        top: 64px;
        left: var(--cx-space-5);
        height: 75px;
        background-color: var(--cx-global-surface-color);
        display: block;
    }

    #mainNav .navbar-collapse {
        overflow: visible;
        max-height: none;
    }

    #mainNav .navbar-collapse .navbar-sidenav {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        flex-direction: column;
        margin-top: 68px;
        height: calc(100vh - 139px);
        padding-top: 0;
    }

    #mainNav .navbar-sidenav .nav-item:first-of-type {
        margin-top: 0;
    }

    #mainNav .navbar-sidenav .nav-item:not(:last-of-type) .nav-link {
        border-bottom: none;
    }

    #mainNav .navbar-sidenav .nav-item .nav-link {
        padding-left: var(--cx-space-4);
    }

    #mainNav.navbar-light .navbar-collapse .navbar-sidenav > .nav-item > .nav-link {
        color: var(--cx-global-primary-text-color);
    }

    #mainNav.navbar-light .navbar-collapse .navbar-sidenav > .nav-item > .nav-link:hover {
        background-color: var(--cx-sidenav-item-hover-bg);
        font-weight: var(--cx-font-weight-semibold);
    }
}

/* ---- Page tabs (the strip under a page title) ---- */

.page-nav {
    background-color: var(--cx-tab-nav-bg);
    border-bottom: 1px solid var(--cx-global-border-color);
}

.page-nav > ul.nav {
    background-color: var(--cx-tab-nav-bg);
    color: var(--cx-global-primary-contrast-color);
    border: 0;
    margin: 0 15px;
}

@media (min-width: 992px) {
    .page-nav > ul.nav {
        margin: 0;
    }

    .page-nav > ul.nav > li:first-of-type {
        margin-left: 40px;
    }
}

.page-nav > ul.nav > li {
    height: 60px;
    margin-right: 15px;
}

.page-nav > ul.nav > li > a {
    padding: 18px var(--cx-space-2) 6px var(--cx-space-2);
    border: 0;
    border-radius: 0;
}

.page-nav .nav-link {
    color: var(--cx-global-primary-text-color);
}

.page-nav .nav-link.active {
    font-weight: var(--cx-font-weight-semibold);
    color: var(--cx-global-primary-text-color);
    border-bottom: 3px solid var(--cx-tab-active-border);
    background-color: transparent;
}

.page-nav .nav-link:hover {
    border-bottom: 3px solid var(--cx-tab-hover-border);
    font-weight: var(--cx-font-weight-semibold);
}

/* Reserve the semibold label's width so a tab doesn't shift when it becomes active or hovered. */
.page-nav .nav-link::after {
    display: block;
    content: attr(title);
    font-weight: var(--cx-font-weight-semibold);
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

/* The filter row in a page header (.report-filter): the list pages' search box and action, and the Modules page's
   search box and Tile View / List View picker, each in its own div. Taken from CX Engine's refreshed filter.css so
   a header's controls sit where the portals' do. Colours and sizes come from the Chandler.CX.DesignSystem tokens. */

.report-filter {
    clear: both;
    font-size: var(--cx-global-font-size-body);
    padding-bottom: 5px;
}

.report-filter > div,
.report-filter > .btn {
    padding-top: 5px;
    width: 100%;
    text-align: center;
    clear: both;
}

.report-filter .btn {
    font-size: var(--cx-global-font-size-body);
    width: 100%;
    margin-top: 5px;
    margin-right: 0;
    height: 46px;
}

/* A search box: in the filter row, or (as on Users) beside a grid's buttons. It's filled with the surface colour
   (white), not the filter toggles' transparent fill, so it shows on the page's grey too (e.g. over the Modules
   tiles), in every state. */
.report-filter input[type=text],
.search-input {
    display: flex;
    font-size: var(--cx-global-font-size-body);
    height: 46px;
    padding: .375rem var(--cx-space-4);
    color: var(--cx-dropdown-filter-toggle-text);
    border-radius: var(--cx-dropdown-filter-toggle-radius);
    background-color: var(--cx-global-surface-color);
    border: 1px solid var(--cx-dropdown-filter-toggle-border);
    width: 100%;
}

.report-filter input[type=text]:hover,
.report-filter input[type=text]:focus,
.search-input:hover,
.search-input:focus {
    color: var(--cx-dropdown-filter-toggle-text);
    background-color: var(--cx-global-surface-color);
    border: var(--cx-dropdown-filter-toggle-hover-border-width) solid var(--cx-dropdown-filter-toggle-hover-border);
    box-shadow: none;
}

/* A filter dropdown in the row (<cx-filter-dropdown>, styled by the package's filter-dropdown.css): its label on
   the left and its caret on the right, as the native select it replaced read. */
.report-filter .cx-filter-dropdown > .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
}

@media (min-width: 992px) {
    .report-filter {
        padding: 10px 0 10px 15px;
        clear: none;
        text-align: right;
        display: flex;
        flex-wrap: wrap;
    }

    .report-filter .btn {
        width: auto;
        margin-top: 0;
    }

    .report-filter > .btn,
    .report-filter > div {
        text-align: left;
        clear: none;
        margin-left: 10px;
        display: inline-block;
        width: auto;
    }

    .report-filter .cx-filter-dropdown > .dropdown-toggle {
        min-width: 160px;
    }

    /* A header search box (as on CX Engine's list pages). */
    .report-filter .search-input {
        min-width: 200px;
        max-width: 600px;
        width: auto;
    }
}

/* Auth's lists. The grids themselves (header, rows, footer, pager) are the design system's datatables.css and
   CxDataTables; this sheet places the search box Auth keeps above some lists (AuthDataTables.searchable in
   js/site.js) and lines up rows' action buttons. Colours and sizes come from the Chandler.CX.DesignSystem tokens. */

/* A row's actions, right-aligned (td.text-end, e.g. Users' Edit and Delete). The package's datatables.css left-aligns
   every grid cell with !important, which beats Bootstrap's .text-end, so an explicit .text-end cell wins here. The
   last button sits on the cell's edge, without the package's 6px trailing button margin. */
table.dataTable > tbody > tr > td.text-end {
    text-align: right !important;
}

.table td.text-end .btn:last-child {
    margin-right: 0;
}

/* The audit log (Admin › Audit log) fits the card instead of scrolling sideways: fixed column widths (its columnDefs)
   and long values (GUIDs, JSON, email addresses) wrapping inside their cell. The package keeps every grid cell on one
   line, for grids that scroll. */
#auditTable {
    table-layout: fixed;
}

#auditTable > thead > tr > th,
#auditTable > tbody > tr > td {
    white-space: normal;
    overflow-wrap: anywhere;
}

div.dt-container .table-search {
    margin-bottom: var(--cx-space-3);
}

div.dt-container .dt-search {
    display: flex;
    align-items: center;
    gap: var(--cx-space-2);
}

div.dt-container .dt-search label {
    font-weight: var(--cx-font-weight-medium);
}

div.dt-container .dt-search input.dt-input {
    width: 100%;
    max-width: 320px;
    height: var(--cx-input-height);
    margin-left: 0;
    padding: var(--cx-input-padding-y) var(--cx-input-padding-x);
    font-size: var(--cx-global-font-size-body);
    color: var(--cx-input-text);
    background-color: var(--cx-input-bg);
    border: 1px solid var(--cx-global-input-border);
    border-radius: var(--cx-input-radius);
}

/* The Modules page's tiles (Views/Home/_ApplicationsTile.cshtml): one card per application a user can open, grouped
   by tenant. Each card's environment is a status badge (the design system's .status-badge shape), coloured by
   environment from the status token families: production blue, staging and test amber, dev violet, local red,
   anything else neutral grey. Colours and sizes come from the Chandler.CX.DesignSystem tokens. */

/* The Modules page's title row (Views/Home/_ModulesToolbar.cshtml), at the top of the list view's card and over the
   tiles: "Search Modules" (the settings card heading) with the module count beside it in a pill of the selected-item
   tint, and the search box on the right, at least 300px wide and, on a desktop, 35% of the row, capped at 600px
   (as Users' search). */
.modules-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--cx-space-3);
    margin-bottom: var(--cx-space-6);
}

.modules-toolbar-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cx-space-2);
    margin: 0;
}

.modules-count {
    padding: 2px var(--cx-space-3);
    font-size: var(--cx-font-size-xs);
    font-weight: var(--cx-font-weight-semibold);
    line-height: var(--cx-line-height-normal);
    color: var(--cx-global-primary-brand-color);
    background-color: var(--cx-active-surface);
    border-radius: var(--cx-radius-pill);
}

.modules-toolbar .search-input {
    width: auto;
    min-width: min(300px, 100%);
}

@media (min-width: 992px) {
    .modules-toolbar .search-input {
        min-width: clamp(300px, 35%, 600px);
    }
}

/* One group per tenant, spaced by the gap, so groups the search hides (d-none) leave no space behind. */
.application-tiles {
    display: flex;
    flex-direction: column;
    gap: var(--cx-space-8);
}

.application-tiles__company {
    margin: 0 0 var(--cx-space-4);
    font-size: var(--cx-font-size-lg);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* As many 280px columns as fit, left-aligned. */
.application-tiles__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, 280px);
    justify-content: start;
    gap: var(--cx-space-6);
}

.application-tiles .card {
    height: 200px;
    margin-bottom: 0;
    overflow: hidden;
    background-color: var(--cx-global-surface-color);
    transition: transform var(--cx-transition-fast), box-shadow var(--cx-transition-fast), border-color var(--cx-transition-fast);
}

.application-tiles .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--cx-shadow-raised);
    border-color: var(--cx-gray-600);
}

/* The whole card opens the application. */
.application-tiles .card__link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.application-tiles .card__link:hover {
    color: inherit;
    text-decoration: none;
}

.application-tiles .card__body {
    padding: var(--cx-space-6) var(--cx-space-4) var(--cx-space-4);
    text-align: center;
}

.application-tiles .card__header {
    margin-bottom: var(--cx-space-3);
}

.application-tiles .card__title {
    margin: 0 0 var(--cx-space-3);
    font-size: var(--cx-font-size-xl);
    font-weight: var(--cx-font-weight-semibold);
    color: var(--cx-global-primary-text-color);
}

.application-tiles .card__title--small {
    font-size: var(--cx-font-size-md);
}

.application-tiles .card__module-label {
    margin: 0;
    padding-top: var(--cx-space-4);
    font-size: var(--cx-font-size-2xs);
    font-weight: var(--cx-font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cx-global-primary-text-color);
}

.application-tiles .card__module-name {
    margin: var(--cx-space-1) 0 0;
    font-size: var(--cx-global-font-size-body);
    color: var(--cx-global-primary-text-color);
}

/* ---- Environment badges ----
   An application's environment (Views/Shared/_EnvironmentBadge.cshtml), on the Modules tiles and list and System
   Admin's Applications grid: the design system's .status-badge, coloured from the status token families. */

.status-badge.env-badge--production {
    color: var(--cx-status-scheduled-text);
    background: var(--cx-status-scheduled-bg);
    border-color: var(--cx-status-scheduled-border);
}

.status-badge.env-badge--production::before {
    color: var(--cx-status-scheduled-icon);
}

.status-badge.env-badge--staging,
.status-badge.env-badge--test {
    color: var(--cx-status-paused-text);
    background: var(--cx-status-paused-bg);
    border-color: var(--cx-status-paused-border);
}

.status-badge.env-badge--staging::before,
.status-badge.env-badge--test::before {
    color: var(--cx-status-paused-icon);
}

.status-badge.env-badge--dev {
    color: var(--cx-status-validating-text);
    background: var(--cx-status-validating-bg);
    border-color: var(--cx-status-validating-border);
}

.status-badge.env-badge--dev::before {
    color: var(--cx-status-validating-icon);
}

.status-badge.env-badge--localhost,
.status-badge.env-badge--local {
    color: var(--cx-status-error-text);
    background: var(--cx-status-error-bg);
    border-color: var(--cx-status-error-border);
}

.status-badge.env-badge--localhost::before,
.status-badge.env-badge--local::before {
    color: var(--cx-status-error-icon);
}

/* The permission picker (Admin > Users > Permissions and the bulk editor): one collapsible card per application,
   with a filter box above. The cards, their headers and the collapse links are the design system's (cards.css);
   this sheet sets the filter's width and the cards' inner spacing. Sizes come from the Chandler.CX.DesignSystem
   tokens. */

.permissions-filter {
    width: 100%;
    max-width: 420px;
}

#permissionAccordion .card-body {
    padding-top: 0;
}

#permissionAccordion .form-check-label {
    margin-top: 0.15rem;
}

/* "(3 of 7 selected)" beside each application's name. */
#permissionAccordion .check-count {
    font-size: var(--cx-font-size-xs);
    font-weight: var(--cx-font-weight-regular);
    color: var(--cx-text-secondary);
}

/* The sign-in pages (Views/Shared/_LayoutLogin.cshtml, which gives the body .login-page): one card centred on the
   page background. Buttons, fields, checkboxes and validation messages are the design system's; colours and sizes
   come from its tokens. */

body.login-page {
    display: flex;
    min-height: 100vh;
    margin-bottom: 0;
}

.login-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    max-width: 500px;
    margin: auto;
    padding: 50px;
    background-color: var(--cx-global-surface-color);
    border: 1px solid var(--cx-global-border-color);
    border-radius: var(--cx-radius);
}

.login-content > form,
.login-content > .row,
.login-content section {
    width: 100%;
}

.login-content .logo {
    height: 37px;
    width: auto;
    margin-bottom: var(--cx-space-5);
}

.login-content p {
    margin-bottom: 40px;
}

.login-content .field-validation-error {
    display: inline-block;
    margin-top: var(--cx-space-2);
}

/* The page's one action fills the card's width. */
.login-content .btn {
    width: 100%;
    padding: var(--cx-space-3);
    margin-top: 40px;
}

/* ---- Status pages (Account/AccessDenied and Lockout, Shared/Error and Unauthorised) ----
   A page that tells the user where they stand sets ViewData["LoginVariant"] = "status". _LayoutLogin then puts
   the logo above the card, and the card holds an icon, a heading, an explanation, the page's one action and, on
   the error pages, the request ID to quote to support:

       <section class="login-status">
           <span class="login-status-icon" aria-hidden="true"><i class="fa-regular fa-lock"></i></span>
           <h1 class="login-status-title">You don't have access to this resource</h1>
           <p class="login-status-message">Your account doesn't have permission to view this. ...</p>
           <a class="btn btn-primary" href="/">Back to dashboard</a>
           <p class="login-status-reference">Request ID: <code>00-…</code></p>
       </section> */

.login-status-page {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 500px;
    margin: auto;
    padding: var(--cx-space-8) var(--cx-space-4);
}

.login-status-logo {
    height: 34px;
    width: auto;
    margin-bottom: 40px;
}

.login-content.login-status-card {
    display: block;
    margin: 0;
    padding: 48px;
    border-color: var(--cx-global-border-color);
    border-radius: var(--cx-radius);
    box-shadow: var(--cx-shadow);
}

@media (max-width: 575.98px) {
    .login-content.login-status-card {
        padding: var(--cx-space-8) var(--cx-space-6);
    }
}

.login-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--cx-space-6);
    font-size: var(--cx-font-size-xl);
    background-color: var(--cx-active-surface);
    border-radius: var(--cx-radius-circle);
}

/* Beats the shared icon colour (text.css), which is applied at zero specificity. */
.login-status-icon i {
    color: var(--cx-global-primary-brand-color);
}

.login-status-title {
    margin: 0 0 var(--cx-space-3);
    font-size: var(--cx-font-size-h3);
    font-weight: var(--cx-font-weight-semibold);
    line-height: 1.3;
    color: var(--cx-global-primary-text-color);
}

.login-content .login-status-message {
    margin-bottom: 0;
    font-family: var(--cx-global-font-family);
    font-size: var(--cx-global-font-size-body);
    color: var(--cx-global-primary-text-color);
}

.login-status .btn {
    font-size: var(--cx-font-size-md);
    font-weight: var(--cx-font-weight-semibold);
}

/* The request ID under the button: small secondary text, wrapping anywhere (the ID is one long token). */
.login-content .login-status-reference {
    margin: var(--cx-space-5) 0 0;
    font-size: var(--cx-font-size-xs);
    color: var(--cx-text-secondary);
    overflow-wrap: anywhere;
}

.login-status-reference code {
    font-size: inherit;
    color: inherit;
}

/* Under a status card, for a signed-in user: who they are and Log out (site.css .link-button). */
.login-status-signout {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--cx-space-2);
    margin-top: var(--cx-space-5);
    font-size: var(--cx-font-size-sm);
    color: var(--cx-text-secondary);
}

/* Auth's own page rules. Everything shared with the CX portals (buttons, links, forms, checkboxes, Select2, cards,
   alerts, badges, grids, modals, tooltips) comes from the Chandler.CX.DesignSystem package; colours and sizes here
   come from its tokens. */

/* A text area for long text opens tall enough to read it: a certificate or a description (.textarea-tall), or a list
   of users typed or pasted in (.textarea-entry). auto-resize (js/site.js) grows a box to fit what's in it. */
textarea.textarea-tall {
    min-height: 200px;
}

textarea.textarea-entry {
    min-height: 400px;
}

/* A validation summary lists its messages without bullets. */
.validation-summary-errors ul,
.validation-summary-valid ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.alert p:last-of-type {
    margin-bottom: 0;
}

/* A button that reads as a text link, for an action that stays on the page (e.g. Bulk Create's Add 5 Rows): the
   package's link colour, underline and hover (its base.css a rules), on a real <button>. */
.link-button {
    padding: 0;
    font: inherit;
    color: var(--cx-global-link-text-color);
    text-decoration: underline;
    text-underline-offset: 3px;
    background: none;
    border: 0;
    cursor: pointer;
}

.link-button:hover,
.link-button:focus-visible {
    color: var(--cx-global-link-hover-color);
}

/* ---- Settings forms (form.edit-form) ----
   As on CX Engine's settings pages (its site.css): each label / field / validation row is centred on itself. The
   package's forms.css caps the label column at 330px. (Engine also holds labels to one line on very wide screens;
   Auth's labels are longer, "Allowed domains of external users (separate each with a comma)", so they wrap.) */

form.edit-form .row {
    align-items: center;
}

/* A horizontal rule as in the CX portals (CX Engine's text.css): Bootstrap's translucent line with 8px above and below
   it. A rule between the sections of a form takes more room from a spacing utility (e.g. <hr class="my-4" />). */
hr {
    margin-top: var(--cx-space-2);
    margin-bottom: var(--cx-space-2);
}

/* ---- Users ---- */

/* The row above the users grid: its search box (filter.css's .search-input) on the left and the page's buttons
   on the right, 10px apart (as the page header's filter row spaces its controls). The box is as tall as the
   buttons and at least 300px wide (never wider than the card); on a desktop it takes 35% of the card, capped at
   the header search boxes' 600px, so a full email address fits without the box running across the card. The row
   has 10px of room above it, under the card's title. */
.users-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 10px;
}

.users-actions .search-input {
    height: auto;
    width: auto;
    min-width: min(300px, 100%);
    margin-right: auto;
}

@media (min-width: 992px) {
    .users-actions .search-input {
        min-width: clamp(300px, 35%, 600px);
    }
}

.users-actions .btn {
    margin-right: 0;
}

/* A disabled user's row: greyed and struck through, its actions still usable. */
tr.user-disabled {
    background-color: var(--cx-surface-muted);
}

tr.user-disabled td:not(:last-child) {
    text-decoration: line-through;
    font-style: italic;
}

tr.user-disabled td:not(:last-child) a {
    color: var(--cx-global-primary-text-color);
}

/* The domains a tenant user administrator may manage (Users > Edit). */
#domainList .list-group {
    margin-left: var(--cx-space-4);
}

#domainList .form-check {
    margin-bottom: var(--cx-space-1);
}

#domainList .form-check > label {
    margin-left: var(--cx-space-2);
}

/* User types: the drag handle column. */
.sort-order {
    margin-left: var(--cx-space-4);
}

/* Bulk Create's cards run: authentication methods by domain, the guide, the user to copy, then the user list.
   Bulk Create's guide: its three steps side by side from 768px (one under another below), each a bordered tile with
   a numbered circle (the active tint and brand colour, as the sign-in status pages' icon), a title, what to do and
   a secondary note. The tiles share the row's height. */
.bulk-steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cx-space-4);
    margin: 0 0 var(--cx-space-4);
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .bulk-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* The authentication methods card's two tiles (SSO / username and password) share the steps' tile look. */
.bulk-step,
.bulk-auth-method {
    padding: var(--cx-space-5);
    border: 1px solid var(--cx-global-border-color);
    border-radius: var(--cx-radius);
}

.bulk-auth-method .bulk-step-title i {
    margin-right: var(--cx-space-1);
    color: var(--cx-global-icon-color);
}

/* A method's domains: the package's status badges, wrapping with room between them. */
.bulk-auth-domains {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cx-space-2);
}

.bulk-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-bottom: var(--cx-space-3);
    border-radius: var(--cx-radius-circle);
    background-color: var(--cx-active-surface);
    color: var(--cx-global-primary-brand-color);
    font-weight: var(--cx-font-weight-semibold);
}

.bulk-step-title {
    margin-bottom: var(--cx-space-2);
    font-size: var(--cx-font-size-md);
    font-weight: var(--cx-font-weight-semibold);
}

.bulk-step p {
    margin-bottom: var(--cx-space-3);
}

.bulk-step p:last-child {
    margin-bottom: 0;
}

.bulk-step-options {
    display: flex;
    flex-direction: column;
    gap: var(--cx-space-3);
    margin: 0 0 var(--cx-space-3);
    padding: 0;
    list-style: none;
}

.bulk-step-options li,
.bulk-step-note {
    display: flex;
    gap: var(--cx-space-2);
}

.bulk-step-options i,
.bulk-step-note i {
    flex: none;
    width: 16px;
    margin-top: 3px;
    color: var(--cx-global-icon-color);
}

.bulk-step-note {
    font-size: var(--cx-font-size-xs);
    color: var(--cx-text-secondary);
}

/* The "CSV Format Guide & Examples" toggle under the steps reads in the body text colour, not Bootstrap's link
   blue, in every state. */
.bulk-guide-toggle {
    --bs-btn-color: var(--cx-global-primary-text-color);
    --bs-btn-hover-color: var(--cx-global-primary-text-color);
    --bs-btn-active-color: var(--cx-global-primary-text-color);
}

/* The permissions of the template user (Create batch of new users), which the new users copy: a summary line, then
   a tile per application in a grid of as many 280px columns as fit, each with its name, a count and its
   permissions ticked, a permission's description under it in the secondary colour. */
.bulk-permissions {
    margin-top: var(--cx-space-4);
}

.bulk-permissions-message,
.bulk-permissions-summary {
    margin-bottom: var(--cx-space-3);
    color: var(--cx-text-secondary);
}

.bulk-permissions-summary strong {
    font-weight: var(--cx-font-weight-semibold);
    color: var(--cx-global-primary-text-color);
}

.bulk-permissions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--cx-space-4);
}

.bulk-permissions-app {
    padding: var(--cx-space-4);
    border: 1px solid var(--cx-global-border-color);
    border-radius: var(--cx-radius);
}

.bulk-permissions-app-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--cx-space-2);
    padding-bottom: var(--cx-space-3);
    margin-bottom: var(--cx-space-3);
    border-bottom: 1px solid var(--cx-global-border-color);
}

.bulk-permissions-app-name {
    margin: 0;
    font-size: var(--cx-font-size-sm);
    font-weight: var(--cx-font-weight-semibold);
}

/* The application's permission count, a small circle in the selected-item tint. */
.bulk-permissions-count {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 var(--cx-space-1);
    font-size: var(--cx-font-size-xs);
    font-weight: var(--cx-font-weight-semibold);
    color: var(--cx-global-primary-brand-color);
    background-color: var(--cx-active-surface);
    border-radius: var(--cx-radius-pill);
}

.bulk-permissions-list {
    display: flex;
    flex-direction: column;
    gap: var(--cx-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bulk-permissions-list li {
    display: flex;
    gap: var(--cx-space-2);
}

.bulk-permissions-list li > i {
    flex: none;
    margin-top: 3px;
    color: var(--cx-status-complete-icon);
}

.bulk-permissions-name {
    display: block;
    font-weight: var(--cx-font-weight-medium);
}

.bulk-permissions-description {
    display: block;
    font-size: var(--cx-font-size-xs);
    color: var(--cx-text-secondary);
}

/* Bulk Create's entry bar, over a hairline: Grid Entry / Text Entry as sub tabs on the left, drawn as CX Engine's
   .sub-nav draws its tabs (the active one a semibold label on the active tint, a lighter tint on hover), and Upload
   CSV / Download Template as small secondary buttons on the right. The grid's Add 5 Rows / Clear All are text links
   (.bulk-grid-actions, .link-button); each grid row's delete is the package's icon-only .btn-icon. */
.bulk-entry-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--cx-space-3);
    padding-bottom: var(--cx-space-3);
    margin-bottom: var(--cx-space-4);
    border-bottom: 1px solid var(--cx-global-border-color);
}

.bulk-entry-tabs {
    display: flex;
    gap: 6px;
}

.bulk-entry-tabs .nav-link {
    padding: 7px 14px;
    line-height: 20px;
    font-size: var(--cx-global-font-size-body);
    color: var(--cx-global-primary-text-color);
    background-color: transparent;
    border: 0;
    border-radius: var(--cx-tab-active-radius);
}

.bulk-entry-tabs .nav-link.active {
    font-weight: var(--cx-font-weight-semibold);
    color: var(--cx-tab-active-color);
    background-color: var(--cx-tab-active-bg);
}

.bulk-entry-tabs .nav-link:not(.active):hover {
    background-color: var(--cx-global-primary-surface-hover);
}

/* Reserves the semibold label's width (from the title), so a tab doesn't shift when it becomes active. */
.bulk-entry-tabs .nav-link::after {
    display: block;
    content: attr(title);
    font-weight: var(--cx-font-weight-semibold);
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

.bulk-entry-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cx-space-2);
}

.bulk-entry-actions .btn {
    margin-right: 0;
}

/* The grid entry table: fixed column widths sized to what each column holds. The email address is widest; user type,
   job title and mobile (its flag and an international number) next; then the names; status fits its badge; the
   row number and delete stay narrow. Under 960px the table scrolls sideways in its frame rather than squeezing the
   fields. */
#userDataGrid {
    table-layout: fixed;
    min-width: 960px;
    /* A hovered row takes the grids' hover tint (datatables.css .shade-hover) instead of Bootstrap's grey. */
    --bs-table-hover-bg: var(--cx-global-secondary-surface-hover);
}

/* The header has no tint of its own: it takes the card's surface, which also keeps it opaque while it sticks to
   the top of the table's frame over the rows scrolling beneath. */
#userDataGrid > thead > tr > th {
    background-color: var(--cx-global-surface-color);
}

#userDataGrid col.bulk-col-number {
    width: 48px;
}

#userDataGrid col.bulk-col-email {
    width: 25%;
}

#userDataGrid col.bulk-col-usertype,
#userDataGrid col.bulk-col-jobtitle,
#userDataGrid col.bulk-col-mobile {
    width: 14%;
}

#userDataGrid col.bulk-col-firstname {
    width: 11%;
}

#userDataGrid col.bulk-col-lastname {
    width: 12%;
}

/* Status holds a status badge, up to "WARNING" (about 92px) plus the cell's padding. */
#userDataGrid col.bulk-col-status {
    width: 120px;
}

#userDataGrid col.bulk-col-action {
    width: 72px;
}

/* A row with a warning (only a doubtful mobile number): the status badge in the paused state's amber, the
   warning palette, with the settled dot rather than the paused bars. The package's badge has no warning state. */
.status-badge.status-badge-warning {
    color: var(--cx-status-paused-text);
    background: var(--cx-status-paused-bg);
    border-color: var(--cx-status-paused-border);
}

.status-badge.status-badge-warning::before {
    color: var(--cx-status-paused-icon);
}

/* A field's heading starts where the field's text does: the cell's padding, the control's 1px border and its
   padding. The user type select takes the inputs' padding so all the fields' text lines up. */
#userDataGrid th.bulk-field-heading {
    text-align: left;
    padding-left: calc(var(--cx-table-row-padding-x) + 1px + var(--cx-input-padding-x));
}

#userDataGrid .form-select-sm {
    padding-left: var(--cx-input-padding-x);
}

/* The grid's frame: the table scrolls inside it once it's taller than 500px, so the page doesn't grow with it. */
.bulk-grid-frame {
    max-height: 500px;
    overflow-y: auto;
}

/* A row's mobile number shows its country's flag (flagcdn.com, 24x18) at 20x15. */
.country-flag {
    width: 20px;
    height: 15px;
}

/* The row over the grid ("Add users (0/n)", then Add 5 Rows / Clear All), with 10px of room under it. */
.bulk-grid-toolbar {
    padding-bottom: 10px;
}

.bulk-grid-actions {
    display: flex;
    gap: var(--cx-space-4);
}

/* ---- Legal ---- */

.eula-container {
    max-width: 900px;
}