/*
 * A project's theme changes only these values, so every screen keeps the same contrast:
 *   --apollo-brand       white text on it, 4.5:1 or more
 *   --apollo-brand-ink   brand text on light surfaces, 7:1 or more on white
 *   --apollo-brand-tint  the brand as "r g b", for the translucent layers
 *   --apollo-accent-soft pale brand background
 * Data text needs 7:1 and other text 4.5:1, on the lightest and the darkest point under the glass,
 * so the data sits on a solid sheet inside a glass frame. Everything else is neutral or a state colour.
 */
:root {
    --apollo-brand: #3d5a80;
    --apollo-brand-ink: #1f3550;
    --apollo-brand-tint: 61 90 128;
    --apollo-accent-soft: #dfe8f3;

    --apollo-ink: #16191d;
    --apollo-ink-2: #3b424b;
    --apollo-line: #d5d9de;
    --apollo-line-soft: #e6e9ec;
    --apollo-control-line: #868f9a;
    --apollo-surface: #ffffff;
    --apollo-ok: #124f2a;
    --apollo-ok-bg: #e3f2e8;
    --apollo-warn: #5f3a00;
    --apollo-warn-bg: #fdf0d5;
    --apollo-err: #8a1f17;
    --apollo-err-bg: #fbe4e1;
    --apollo-off-bg: #eceef1;
    --apollo-radius-glass: 18px;
    --apollo-radius-sheet: 16px;
    --apollo-radius-section: 10px;
    --apollo-radius-control: 8px;
    --apollo-radius-pill: 999px;
    --apollo-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --apollo-max-width: 1320px;

    /* Bootstrap, from the tokens above. */
    --bs-primary: var(--apollo-brand);
    --bs-link-color: var(--apollo-brand-ink);
    --bs-link-hover-color: var(--apollo-ink);
    --bs-body-color: var(--apollo-ink);
    --bs-body-font-family: var(--apollo-font);
    --bs-body-font-size: 13px;
    --bs-body-line-height: 1.45;
    --bs-secondary-color: var(--apollo-ink-2);
    --bs-border-color: var(--apollo-line);
    --bs-border-radius: var(--apollo-radius-control);
}

body.apollo {
    min-height: 100vh;
    color: var(--apollo-ink);
    font-variant-numeric: tabular-nums;
    background:
        radial-gradient(1100px 700px at 0% 0%, rgb(var(--apollo-brand-tint) / 0.38), transparent 62%),
        radial-gradient(900px 600px at 100% 10%, rgb(var(--apollo-brand-tint) / 0.22), transparent 60%),
        radial-gradient(1000px 700px at 60% 110%, rgb(var(--apollo-brand-tint) / 0.20), transparent 60%),
        linear-gradient(180deg, #f3f1ef, #e9ecef);
    background-attachment: fixed;
}

.apollo-wrap {
    max-width: var(--apollo-max-width);
    margin: 0 auto;
    padding: 0 16px;
}

/* The change animates only after the first paint (apollo-ready), so a saved preference does not
   slide in on load. */
.apollo-wide .apollo-wrap {
    max-width: 100vw;
}

.apollo-ready .apollo-wrap {
    transition: max-width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
    .apollo-ready .apollo-wrap {
        transition: none;
    }
}

/* Glass: frosted, tinted, with a light edge on top. */
.apollo-glass {
    background:
        linear-gradient(180deg, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.30)),
        rgb(var(--apollo-brand-tint) / 0.06);
    border: 1px solid rgb(255 255 255 / 0.75);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.95),
        inset 0 -1px 0 rgb(255 255 255 / 0.35),
        inset 0 0 18px rgb(255 255 255 / 0.25),
        0 10px 30px rgb(var(--apollo-brand-tint) / 0.16),
        0 1px 2px rgb(0 0 0 / 0.06);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    backdrop-filter: blur(26px) saturate(180%);
}

/* A backdrop-filter inside another one blurs nothing: while a dropdown is open inside a glass
   surface (the menu, "Mais"), the surface gives up its own blur so the dropdown's works. */
.apollo-glass:has(.dropdown-menu.show) {
    background: rgb(255 255 255 / 0.94);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .apollo-glass {
        background: rgb(255 255 255 / 0.96);
    }
}


/* Plain links take the brand ink; :where keeps Bootstrap's components (buttons, menus, pages)
   in charge of their own colours. */
:where(body.apollo) a:where(:not([class])) {
    color: var(--apollo-brand-ink);
}

/* Focus: 3px of solid brand, 3:1 or more on white and on the glass in both palettes. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.page-link:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--apollo-brand);
    outline-offset: 2px;
    box-shadow: none;
}

.apollo .form-control:focus,
.apollo .form-select:focus {
    border-color: var(--apollo-brand);
    box-shadow: 0 0 0 3px rgb(var(--apollo-brand-tint) / 0.35);
}

/* Top bar: menu on the left, the site and the user on the right, as in the current products. */
.apollo-topbar {
    position: sticky;
    top: 10px;
    z-index: 1020;
    margin-top: 10px;
    padding: 6px 8px;
    gap: 4px;
    border-radius: var(--apollo-radius-glass);
    flex-wrap: wrap;
}

.apollo-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px 0 4px;
    color: var(--apollo-brand-ink);
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
}

.apollo-mark {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--apollo-brand);
    color: #fff;
}

.apollo-menu {
    gap: 2px;
}

.apollo-menu .nav-link {
    padding: 7px 12px;
    border-radius: var(--apollo-radius-pill);
    color: var(--apollo-ink);
    font-weight: 550;
}

.apollo-menu .nav-link:hover,
.apollo-menu .nav-link.show {
    background: rgb(var(--apollo-brand-tint) / 0.12);
    color: var(--apollo-brand-ink);
}

/* The current group: the brand fill and aria-current, never the colour alone. */
.apollo-menu .nav-link[aria-current] {
    background: var(--apollo-brand);
    color: #fff;
}

.apollo-menu .dropdown-menu {
    min-width: 240px;
}

.apollo-menu .dropdown-item {
    padding: 7px 10px;
    border-radius: 8px;
}

.apollo-menu .dropdown-header {
    padding: 8px 10px 4px;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.apollo-who {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    color: var(--apollo-ink-2);
    white-space: nowrap;
}

.apollo-who b {
    color: var(--apollo-ink);
    font-weight: 600;
}

.apollo-pill {
    padding: 5px 11px;
    border: 1px solid var(--apollo-line);
    border-radius: var(--apollo-radius-pill);
    background: rgb(255 255 255 / 0.7);
    color: var(--apollo-ink);
}

.apollo-icon-button {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--apollo-ink-2);
    text-decoration: none;
}

.apollo-icon-button[aria-pressed="true"] {
    background: rgb(var(--apollo-brand-tint) / 0.16);
    color: var(--apollo-brand-ink);
}

.apollo-icon-button:hover {
    background: rgb(var(--apollo-brand-tint) / 0.12);
    color: var(--apollo-ink);
}

/* Page header: breadcrumb and title on the left; system date, user and client logo on the right. */
.apollo-pagehead {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 16px 0 12px;
    padding: 14px 18px;
    border-radius: var(--apollo-radius-glass);
}

.apollo-pagehead .breadcrumb {
    --bs-breadcrumb-divider-color: var(--apollo-ink-2);
    --bs-breadcrumb-item-active-color: var(--apollo-ink-2);
    margin-bottom: 2px;
    font-size: 12px;
}

.apollo-pagehead .breadcrumb a {
    color: var(--apollo-ink-2);
}

.apollo-pagehead h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.apollo-pagehead-meta {
    margin-left: auto;
    color: var(--apollo-ink-2);
    font-size: 12px;
    line-height: 1.6;
    text-align: right;
}

.apollo-pagehead-meta b {
    color: var(--apollo-ink);
    font-weight: 600;
}

.apollo-client-logo:empty {
    display: none;
}

/* The bar has the glass radius, never a capsule, because it wraps to a second line on narrower
   screens. Below 768px the .apollo-secondary actions move to the .apollo-more menu. */
.apollo-toolbar {
    /* Above the content that follows, so its dropdowns open over the data. */
    position: relative;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    padding: 6px;
    border-radius: var(--apollo-radius-glass);
}

/* A form in the bar (a select and its button, or one button that posts) sits in the line. */
.apollo-toolbar form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.apollo-toolbar-end {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}

.apollo-more {
    display: none;
}

/* The "Mais" menu is Bootstrap's dropdown (dropdown-menu-end): Popper keeps it on the screen,
   and Esc or a click outside closes it. */
.apollo-toolbar .dropdown-menu,
.apollo-menu .dropdown-menu {
    --bs-dropdown-bg: rgb(255 255 255 / 0.92);
    --bs-dropdown-border-color: rgb(255 255 255 / 0.75);
    --bs-dropdown-border-radius: 14px;
    --bs-dropdown-font-size: 13px;
    --bs-dropdown-link-color: var(--apollo-ink);
    --bs-dropdown-link-hover-color: var(--apollo-ink);
    --bs-dropdown-link-hover-bg: rgb(var(--apollo-brand-tint) / 0.10);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: var(--apollo-brand);
    --bs-dropdown-header-color: var(--apollo-ink-2);
    padding: 6px;
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    backdrop-filter: blur(26px) saturate(180%);
}

.apollo-toolbar .dropdown-item {
    padding: 7px 10px;
    border-radius: 8px;
}

.apollo-toolbar .dropdown-item.apollo-danger {
    color: var(--apollo-err);
}

.apollo-separator {
    width: 1px;
    height: 22px;
    margin: 0 4px;
    background: var(--apollo-line);
}

.apollo .btn {
    --bs-btn-padding-x: 14px;
    --bs-btn-padding-y: 6px;
    --bs-btn-font-size: 13px;
    --bs-btn-font-weight: 550;
    --bs-btn-border-radius: var(--apollo-radius-pill);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.apollo .btn-light {
    --bs-btn-bg: rgb(255 255 255 / 0.75);
    --bs-btn-border-color: rgb(255 255 255 / 0.9);
    --bs-btn-color: var(--apollo-ink);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #b9c0c8;
    --bs-btn-hover-color: var(--apollo-ink);
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #b9c0c8;
    --bs-btn-active-color: var(--apollo-ink);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}

.apollo .btn-light.apollo-danger {
    --bs-btn-color: var(--apollo-err);
    --bs-btn-hover-color: var(--apollo-err);
    --bs-btn-active-color: var(--apollo-err);
}

.apollo .btn-primary {
    --bs-btn-bg: var(--apollo-brand);
    --bs-btn-border-color: var(--apollo-brand);
    --bs-btn-hover-bg: var(--apollo-brand-ink);
    --bs-btn-hover-border-color: var(--apollo-brand-ink);
    --bs-btn-active-bg: var(--apollo-brand-ink);
    --bs-btn-active-border-color: var(--apollo-brand-ink);
}

/* Search panel: opens and closes like "Pesquisar" in the current products. */
.apollo-search {
    margin: 0 0 12px;
    padding: 4px 6px;
    border-radius: var(--apollo-radius-glass);
}

.apollo-search summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.apollo-search summary::-webkit-details-marker {
    display: none;
}

.apollo-search summary::before {
    content: "\F282"; /* bi-chevron-down */
    font-family: "bootstrap-icons";
    font-size: 11px;
    transform: rotate(-90deg);
}

.apollo-search[open] summary::before {
    transform: none;
}

.apollo-search-count {
    color: var(--apollo-ink-2);
    font-weight: 500;
}

.apollo-search .form-label {
    color: var(--apollo-ink);
}

.apollo-search-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px 14px;
    align-items: end;
    padding: 4px 10px 12px;
}

/* Fields */
.apollo .form-label {
    margin-bottom: 4px;
    color: var(--apollo-ink-2);
    font-size: 12px;
    font-weight: 600;
}

.apollo .form-control,
.apollo .form-select {
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 10px;
    border-color: var(--apollo-control-line);
    border-radius: var(--apollo-radius-control);
    color: var(--apollo-ink);
    font-size: 13px;
}

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

.apollo .form-check-label {
    margin-left: 0.25rem;
}

.apollo .form-check-input {
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.1rem;
    border-color: var(--apollo-control-line);
}

.apollo-toolbar .form-select {
    width: auto;
    border-radius: var(--apollo-radius-pill);
}

/* Data: a solid sheet inside a glass frame. */
.apollo-sheet {
    background: var(--apollo-surface);
    background-clip: padding-box;
    border: 6px solid rgb(255 255 255 / 0.45);
    border-radius: var(--apollo-radius-sheet);
    box-shadow: inset 0 0 0 1px var(--apollo-line), 0 10px 30px rgb(var(--apollo-brand-tint) / 0.14);
    /* The content keeps to the rounded corners. A select or a date picker opens outside the page
       and is not cut; a Bootstrap dropdown would be, so it goes in the toolbar, not in a sheet. */
    overflow: hidden;
}

.apollo-table-wrap {
    overflow: auto;
}

.apollo-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.apollo-table th,
.apollo-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--apollo-line-soft);
    text-align: left;
    white-space: nowrap;
}

.apollo-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f4f5f7;
    color: var(--apollo-ink-2);
    font-size: 12px;
    font-weight: 650;
}

.apollo-table thead tr.apollo-group th {
    background: var(--apollo-accent-soft);
    border-bottom: 1px solid #fff;
    color: var(--apollo-brand-ink);
    text-align: left;
}

.apollo-table thead tr.apollo-group th.apollo-num {
    text-align: right;
}

/* A thin vertical line between the column groups, in the header and in the rows. */
.apollo-table th.apollo-g,
.apollo-table td.apollo-g {
    border-left: 1px solid #d9dde2;
}

.apollo-table tbody tr:hover td {
    background: #f7f8fa;
}

.apollo-table .apollo-num {
    text-align: right;
}

.apollo-table td.apollo-open {
    width: 34px;
}

.apollo-table td a {
    color: var(--apollo-brand-ink);
    font-weight: 600;
    text-decoration: none;
}

.apollo-table td a:hover {
    text-decoration: underline;
}

.apollo-table td.apollo-open a {
    color: var(--apollo-ink-2);
}

/* States: a word with a dot on a pale background; the word carries the meaning. */
.apollo-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 8px;
    border-radius: var(--apollo-radius-pill);
    font-size: 12px;
    font-weight: 600;
    vertical-align: middle;
}

.apollo-tag::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.apollo-tag-ok { color: var(--apollo-ok); background: var(--apollo-ok-bg); }
.apollo-tag-warn { color: var(--apollo-warn); background: var(--apollo-warn-bg); }
.apollo-tag-err { color: var(--apollo-err); background: var(--apollo-err-bg); }
.apollo-tag-off { color: var(--apollo-ink-2); background: var(--apollo-off-bg); }

.apollo-sheet-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    color: var(--apollo-ink-2);
    font-size: 12px;
}

/* Pagination in capsules (Bootstrap's markup). */
.apollo .pagination {
    --bs-pagination-padding-x: 0;
    --bs-pagination-padding-y: 0;
    --bs-pagination-font-size: 13px;
    --bs-pagination-color: var(--apollo-ink);
    --bs-pagination-border-color: var(--apollo-line);
    --bs-pagination-hover-color: var(--apollo-ink);
    --bs-pagination-active-bg: var(--apollo-brand);
    --bs-pagination-active-border-color: var(--apollo-brand);
    --bs-pagination-disabled-color: var(--apollo-ink-2);
    gap: 4px;
    margin: 0;
}

.apollo .pagination .page-link {
    display: grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    margin-left: 0;
    border-radius: var(--apollo-radius-pill);
}

/* Form: sections with a title bar and a grid of three columns from lg, two from sm, one below. */
.apollo-section {
    margin-bottom: 12px;
}

.apollo-section > h2 {
    margin: 0;
    padding: 9px 14px;
    border-bottom: 1px solid var(--apollo-line-soft);
    border-radius: var(--apollo-radius-section) var(--apollo-radius-section) 0 0;
    background: linear-gradient(var(--apollo-accent-soft), #fff 140%);
    color: var(--apollo-brand-ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.apollo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 22px;
    margin: 0;
    padding: 14px;
}

.apollo-grid .apollo-wide {
    grid-column: 1 / -1;
}

.apollo-readonly {
    padding: 6px 0;
    font-weight: 500;
}

/* Read-only data: the label small, upper case and muted; the value larger and strong. */
.apollo-dl {
    gap: 0;
    padding: 0;
}

.apollo-dl > div {
    padding: 9px 14px 10px;
    border-right: 1px solid var(--apollo-off-bg);
    border-bottom: 1px solid var(--apollo-off-bg);
}

.apollo-dl > div:nth-child(3n) {
    border-right: 0;
}

.apollo-dl dt {
    margin: 0 0 2px;
    color: var(--apollo-ink-2);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.apollo-dl dd {
    margin: 0;
    color: var(--apollo-ink);
    font-size: 14px;
    font-weight: 600;
}

/* Dense grid, close to the current products' screens: the label takes about 44 % of the cell, so
   a label like "Número do documento" fits on one line at 1440px. */
.apollo-grid.apollo-dense {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px 18px;
    padding: 10px 14px;
    --apollo-wide-label: calc(11% - 8px);
}

.apollo-grid.apollo-dense > div {
    display: grid;
    grid-template-columns: minmax(96px, 44%) 1fr;
    align-items: center;
    gap: 10px;
}

.apollo-grid.apollo-dense > .apollo-wide {
    grid-template-columns: minmax(96px, var(--apollo-wide-label)) 1fr;
}

.apollo-grid.apollo-dense .form-label {
    margin: 0;
    text-align: right;
}

.apollo-grid.apollo-dense .form-control,
.apollo-grid.apollo-dense .form-select {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 8px;
}

.apollo-grid.apollo-dense .apollo-readonly {
    padding: 4px 0;
}

/* Each column is a label and a value sized to their content, the same in every row (subgrid): a
   value grows sideways while the row has room and wraps only when it has none. */
.apollo-dl.apollo-dense {
    --apollo-dl-columns: 4;
    grid-template-columns: repeat(var(--apollo-dl-columns), max-content auto);
    gap: 0;
    padding: 0;
}

.apollo-dl.apollo-dense > div {
    display: grid;
    grid-column: span 2;
    grid-template-columns: subgrid;
    align-items: baseline;
    gap: 0;
    padding: 6px 12px;
}

.apollo-dl.apollo-dense > div:nth-child(3n) {
    border-right: 1px solid var(--apollo-off-bg);
}

.apollo-dl.apollo-dense > div:nth-child(4n) {
    border-right: 0;
}

/* Read-only view only: a short bar between the label and the value, like the separator of the
   action bar. The forms have none, their read-only fields included. */
.apollo-dl.apollo-dense dt {
    position: relative;
    margin: 0 10px 0 0;
    padding-right: 10px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-align: right;
    text-transform: none;
}

.apollo-dl.apollo-dense dt::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 14px;
    transform: translateY(-50%);
    background: var(--apollo-line);
}

/* A value never crosses its cell's border: a long code breaks inside it. */
.apollo-dl.apollo-dense dd {
    min-width: 0;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.apollo-dl dd.apollo-empty {
    color: var(--apollo-ink-2);
    font-weight: 400;
}

@media (max-width: 1399.98px) {
    .apollo-grid.apollo-dense:not(.apollo-dl) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .apollo-dl.apollo-dense {
        --apollo-dl-columns: 3;
    }

    .apollo-grid.apollo-dense {
        --apollo-wide-label: calc(14.67% - 8px);
    }

    .apollo-dl.apollo-dense > div:nth-child(4n) {
        border-right: 1px solid var(--apollo-off-bg);
    }

    .apollo-dl.apollo-dense > div:nth-child(3n) {
        border-right: 0;
    }
}

.apollo-audit {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin-top: 10px;
    padding: 4px 6px 0;
    color: var(--apollo-ink);
    font-size: 12px;
}

.apollo-audit b {
    color: var(--apollo-ink);
    font-weight: 600;
}

/* Children in tabs (Bootstrap's nav-pills and tab panes). */
.apollo-tabs {
    width: max-content;
    max-width: 100%;
    margin: 4px 0 10px;
    padding: 6px;
    border-radius: var(--apollo-radius-pill);
    overflow-x: auto;
    flex-wrap: nowrap;
}

.apollo-tabs .nav-link {
    padding: 6px 14px;
    border-radius: var(--apollo-radius-pill);
    color: var(--apollo-ink-2);
    font-weight: 550;
    white-space: nowrap;
}

.apollo-tabs .nav-link.active {
    background: #fff;
    color: var(--apollo-ink);
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
}

.apollo-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin: 22px 0 16px;
    padding: 10px 16px;
    border-radius: var(--apollo-radius-glass);
    color: var(--apollo-ink-2);
    font-size: 12px;
}

.apollo-footer a {
    color: var(--apollo-ink-2);
}

/* Loading. Everything that waits shows only after 150ms, so a quick answer never flashes.
     .apollo-load       a part loaded after the page (Html.ApolloLoad), or that failed to load
     .apollo-busy       a part being reloaded: its data stays under a "A carregar…" chip, faded
                        below AAA on purpose while it is no longer the current data
     [aria-busy] .btn   a button that saves (data-apollo-busy), locked until the answer arrives
     .apollo-progress   the thin bar at the top of the window while the page changes */
.apollo-spinner {
    --bs-spinner-width: 1em;
    --bs-spinner-height: 1em;
    --bs-spinner-border-width: 0.15em;
    flex: none;
    color: var(--apollo-brand);
    vertical-align: -0.15em;
}

.btn-primary .apollo-spinner {
    color: #fff;
}

/* Bootstrap fades a disabled button to 65%; a busy one keeps its colours and contrast. */
.btn[aria-busy="true"] {
    --bs-btn-disabled-opacity: 1;
    --bs-btn-disabled-bg: var(--bs-btn-bg);
    --bs-btn-disabled-border-color: var(--bs-btn-border-color);
    --bs-btn-disabled-color: var(--bs-btn-color);
    cursor: progress;
}

.apollo-load {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 14px;
    min-height: 120px;
    padding: 14px;
    color: var(--apollo-ink-2);
    font-weight: 500;
}

.apollo-load > .apollo-spinner {
    font-size: 18px;
}

.apollo-load-failed {
    color: var(--apollo-err);
    font-weight: 550;
}

.apollo-busy {
    position: relative;
}

.apollo-busy > :not(.apollo-busy-chip) {
    opacity: 0.45;
    transition: opacity 0.15s 0.15s;
}

.apollo-busy-chip {
    position: absolute;
    top: 10px;
    left: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    transform: translateX(-50%);
    border: 1px solid var(--apollo-line);
    border-radius: var(--apollo-radius-pill);
    background: #fff;
    box-shadow: 0 4px 14px rgb(var(--apollo-brand-tint) / 0.18);
    color: var(--apollo-ink);
    font-weight: 550;
    animation: apollo-appear 0s 0.15s both;
}

.apollo-progress {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1090;
    display: none;
    height: 3px;
    overflow: hidden;
    pointer-events: none;
}

.apollo-progress::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 40%;
    border-radius: 0 3px 3px 0;
    background: var(--apollo-brand);
    box-shadow: 0 0 6px rgb(var(--apollo-brand-tint) / 0.55);
    animation: apollo-progress 1.4s ease-in-out infinite;
}

.apollo-navigating .apollo-progress {
    display: block;
    animation: apollo-appear 0s 0.15s both;
}

@keyframes apollo-appear {
    from {
        visibility: hidden;
    }
}

@keyframes apollo-progress {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(250%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .apollo-progress::before {
        width: 100%;
        animation: none;
    }
}

@media (max-width: 767.98px) {
    .apollo-toolbar .apollo-secondary {
        display: none;
    }

    .apollo-toolbar .apollo-more {
        display: block;
    }
}

/* A list on the left and the selected item on the right (the roles of the access centre). The
   list folds to a narrow strip with its toggle. */
.apollo-split {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.apollo-split-collapsed {
    grid-template-columns: 44px minmax(0, 1fr);
}

.apollo-split-collapsed .apollo-list-pane > :not(.apollo-list-toggle) {
    display: none;
}

.apollo-split-collapsed .apollo-list-toggle {
    height: 180px;
    padding: 12px 10px;
    border: 0;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.apollo-split-collapsed .apollo-list-toggle .bi {
    display: none;
}

.apollo-list-toggle {
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid var(--apollo-line-soft);
    background: none;
    color: var(--apollo-ink-2);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
}

.apollo-list-find {
    padding: 10px;
    border-bottom: 1px solid var(--apollo-line-soft);
}

.apollo-list {
    max-height: 560px;
    margin: 0;
    padding: 4px;
    overflow: auto;
    list-style: none;
}

.apollo-list a {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 8px;
    padding: 8px 10px;
    border-radius: var(--apollo-radius-control);
    color: var(--apollo-ink);
    text-decoration: none;
}

.apollo-list a:hover {
    background: var(--apollo-off-bg);
}

.apollo-list a[aria-current] {
    background: var(--apollo-accent-soft);
    box-shadow: inset 3px 0 0 var(--apollo-brand);
}

.apollo-list-name {
    font-weight: 600;
}

.apollo-list-count {
    grid-row: 1 / 3;
    grid-column: 2;
    align-self: center;
    color: var(--apollo-ink-2);
    font-size: 12px;
}

.apollo-code {
    color: var(--apollo-ink-2);
    font: 12px/1.3 ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* The log screen: the message on one line in the list, and a text as written in the detail. */
.apollo-log-message {
    max-width: 48ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.apollo-pre {
    margin: 10px 12px;
    padding: 10px 12px;
    max-height: 420px;
    overflow: auto;
    border-radius: var(--apollo-radius-control);
    background: var(--apollo-off-bg);
    font: 12px/1.45 ui-monospace, "Cascadia Mono", Consolas, monospace;
    white-space: pre-wrap;
    word-break: break-word;
}

.apollo-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.apollo-chip {
    padding: 1px 8px;
    border: 1px solid var(--apollo-line);
    border-radius: var(--apollo-radius-pill);
    background: var(--apollo-surface);
    font-size: 12px;
    font-weight: 550;
}

.apollo-chip-added {
    border-color: transparent;
    background: var(--apollo-ok-bg);
    color: var(--apollo-ok);
}

.apollo-chip-removed {
    border-color: transparent;
    background: var(--apollo-err-bg);
    color: var(--apollo-err);
    text-decoration: line-through;
}

/* A choice from a long list: a button that opens a panel with a search and the list, by group. */
.apollo-picker {
    position: relative;
}

.apollo-picker > summary {
    list-style: none;
}

.apollo-picker > summary::-webkit-details-marker {
    display: none;
}

.apollo-picker-panel {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    left: 0;
    width: min(520px, 90vw);
    padding: 8px;
    border-radius: var(--apollo-radius-glass);
    background: rgb(255 255 255 / 0.96);
}

.apollo-list-group {
    padding: 8px 10px 2px;
    color: var(--apollo-ink-2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* "View as": above the page while the mode lasts, in a colour no project theme uses. */
.apollo-viewas-bar {
    position: sticky;
    top: 0;
    z-index: 1040;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: var(--apollo-warn);
    color: #fff;
    font-weight: 600;
}

.apollo-viewas-bar form {
    margin-left: auto;
}

/* The toast of a change saved: at the bottom, in the middle, above the page's last bar. */
.apollo-toast {
    position: fixed;
    bottom: 64px;
    left: 50%;
    z-index: 1060;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--apollo-radius-glass);
    transform: translateX(-50%);
    white-space: nowrap;
}

.apollo-toast[hidden] {
    display: none;
}

/* A button that opens a small form beside it (a new role); a second click closes it. */
.apollo-inline-form > summary {
    list-style: none;
}

.apollo-inline-form > summary::-webkit-details-marker {
    display: none;
}

.apollo-inline-form > form {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.apollo-inline-form .form-control {
    width: 150px;
}

/* A matrix of boxes: rows grouped by module, operations in columns, the actions of each row on a
   line below it. A thicker line separates the rows. */
.apollo-matrix .apollo-matrix-op {
    width: 76px;
    text-align: center;
}

.apollo-matrix .apollo-matrix-all {
    border-right: 1px solid var(--apollo-line);
}

/* A thin line above each module's band, so two folded modules one after the other stay apart. */
.apollo-matrix .apollo-matrix-module th {
    position: static;
    border-top: 1px solid var(--apollo-line);
    background: var(--apollo-accent-soft);
    color: var(--apollo-brand-ink);
}

/* The header of a group of rows that folds them (data-apollo-fold), with the triangles of a <summary>. */
.apollo-fold {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
}

.apollo-fold::before {
    content: "\25BC";
    display: inline-block;
    width: 1.1em;
    font-size: 0.8em;
}

.apollo-fold[aria-expanded="false"]::before {
    content: "\25B6";
}

.apollo-matrix .apollo-matrix-name {
    min-width: 180px;
    white-space: normal;
}

.apollo-matrix .apollo-matrix-name .apollo-code {
    display: block;
}

.apollo-matrix .form-check-input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.apollo-matrix tr:has(+ .apollo-matrix-actions) td {
    border-bottom: 0;
}

.apollo-matrix .apollo-matrix-actions td {
    padding-top: 8px;
    padding-bottom: 8px;
    border-top: 1px dashed var(--apollo-line);
    border-bottom: 2px solid var(--apollo-control-line);
    background: #fbfbfc;
}

.apollo-matrix-actions summary {
    width: max-content;
    margin-bottom: 6px;
    color: var(--apollo-ink-2);
    font-weight: 600;
    cursor: pointer;
}

.apollo-matrix-actions-count {
    margin-left: 10px;
    font-weight: 400;
}

.apollo-matrix-actions details[open] .apollo-matrix-actions-count {
    display: none;
}

.apollo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.apollo-action {
    display: inline-grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 8px;
    padding: 3px 9px;
    border: 1px solid var(--apollo-line);
    border-radius: var(--apollo-radius-control);
    background: var(--apollo-surface);
    line-height: 1.25;
    cursor: pointer;
}

.apollo-action:has(:checked) {
    border-color: #b7dcc4;
    background: var(--apollo-ok-bg);
}

.apollo-action > span {
    display: grid;
}

.apollo-action b {
    font-size: 12px;
    font-weight: 600;
}

.apollo-action .apollo-code {
    font-size: 11px;
}

/* The catalog on the screen: a grip drags a row to another module; a pencil beside a name opens its
   fields in the line; a manual action that nobody uses has a cross; "+" opens a new action at the
   end of the line. */
.apollo-grip {
    margin-right: 4px;
    color: var(--apollo-ink-2);
    cursor: grab;
}

.apollo-inline-edit {
    display: inline-block;
    vertical-align: middle;
}

.apollo-inline-edit > summary.apollo-icon-button {
    display: inline-grid;
    width: 24px;
    height: 24px;
    opacity: 0.55;
}

.apollo-inline-edit > summary.apollo-icon-button:hover,
.apollo-inline-edit > summary.apollo-icon-button:focus-visible {
    opacity: 1;
}

.apollo-inline-form > span {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.apollo-inline-form > span .form-control,
.apollo-inline-form > span .form-select {
    width: 190px;
}

.apollo-action-new > summary.apollo-action {
    min-width: 34px;
    border-style: dashed;
    color: var(--apollo-brand-ink);
    font-size: 16px;
    font-weight: 600;
    place-items: center;
}

.apollo-action-delete {
    padding: 0 2px;
    border: 0;
    background: none;
    color: var(--apollo-ink-2);
}

.apollo-action-delete:hover {
    color: var(--apollo-err);
}

/* A box that cannot change keeps a lock beside it. */
[data-access-center-locked] {
    opacity: 0.45;
    cursor: not-allowed;
}

.apollo-lock {
    margin-left: 4px;
    color: var(--apollo-ink-2);
}

.apollo-footnote {
    margin: 6px 12px 10px;
    color: var(--apollo-ink-2);
    font-size: 11px;
}

.apollo-mark-yes {
    color: var(--apollo-ok);
    font-weight: 700;
}

.apollo-mark-no {
    color: var(--apollo-ink-2);
}

/* Below lg: the menu opens as a panel, grids take two columns, minor columns hide. */
@media (max-width: 991.98px) {
    /* The list goes above the item, full width; a wide item scrolls inside its own sheet and never
       widens the page. Folded, the toggle lies flat. */
    .apollo-split,
    .apollo-split-collapsed {
        grid-template-columns: minmax(0, 1fr);
    }

    .apollo-split-collapsed .apollo-list-toggle {
        height: auto;
        writing-mode: horizontal-tb;
        transform: none;
    }

    .apollo-list {
        max-height: 220px;
    }

    /* The menu opens as a panel over the page, just below the top bar, without pushing the page:
       nearly opaque glass, a strong shadow, a darker page behind it and its own scroll. Groups
       open inside it, one below the other (Bootstrap's collapse and dropdowns underneath). */
    .apollo-topbar .navbar-collapse {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        left: 0;
        z-index: 1030;
        max-height: calc(100vh - 90px);
        padding: 8px;
        overflow-y: auto;
        border: 1px solid rgb(255 255 255 / 0.9);
        border-radius: var(--apollo-radius-glass);
        background: rgb(255 255 255 / 0.94);
        box-shadow: 0 18px 40px rgb(0 0 0 / 0.18), inset 0 1px 0 #fff;
        -webkit-backdrop-filter: blur(26px) saturate(180%);
        backdrop-filter: blur(26px) saturate(180%);
    }

    /* A backdrop-filter inside another one blurs nothing, so the bar gives up its own while the
       panel is open. */
    .apollo-topbar:has(#apollo-menu.show, #apollo-menu.collapsing) {
        background: rgb(255 255 255 / 0.94);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    body.apollo:has(#apollo-menu.show, #apollo-menu.collapsing)::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 1010;
        background: rgb(0 0 0 / 0.25);
    }

    .apollo-menu {
        gap: 2px;
    }

    .apollo-menu .nav-link {
        width: 100%;
        padding: 10px 14px;
        text-align: left;
    }

    .apollo-menu .dropdown-menu {
        padding: 0 0 4px 12px;
        border: 0;
        background: none;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .apollo-grid,
    .apollo-grid.apollo-dense:not(.apollo-dl) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .apollo-dl.apollo-dense {
        --apollo-dl-columns: 2;
    }

    .apollo-grid.apollo-dense {
        --apollo-wide-label: calc(22% - 8px);
    }

    .apollo-dl > div:nth-child(3n),
    .apollo-dl.apollo-dense > div:nth-child(3n) {
        border-right: 1px solid var(--apollo-off-bg);
    }

    .apollo-dl > div:nth-child(2n),
    .apollo-dl.apollo-dense > div:nth-child(2n) {
        border-right: 0;
    }

    .apollo-pagehead-meta,
    .apollo-client-logo {
        display: none;
    }

    .apollo-hide-sm {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .apollo-grid,
    .apollo-grid.apollo-dense:not(.apollo-dl) {
        grid-template-columns: 1fr;
    }

    .apollo-dl.apollo-dense {
        --apollo-dl-columns: 1;
    }

    .apollo-dl > div,
    .apollo-dl > div:nth-child(n) {
        border-right: 0;
    }

    /* One column. In the forms the label goes back above the field; in the read-only view it
       stays on the left of the value, with the bar. */
    .apollo-grid.apollo-dense:not(.apollo-dl) > div {
        display: block;
    }

    .apollo-grid.apollo-dense .form-label {
        margin: 0 0 2px;
        text-align: left;
    }

}

/* Last, so it wins over every surface above: no transparency at all. */
@media (prefers-reduced-transparency: reduce) {
    .apollo-glass,
    .apollo-topbar .navbar-collapse,
    .apollo-toolbar .dropdown-menu,
    .apollo-menu .dropdown-menu {
        --bs-dropdown-bg: #fff;
        background: #fff;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* The text sits on the band's solid part and the fade takes at least 96px, so no word stands on the
   light end. The fade has many eased stops, so it shows no steps. A logo with its own white
   background reads as part of the glass plate. */
.apollo-signin-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 72px;
    margin-top: 10px;
}

.apollo-signin-band {
    display: flex;
    flex: 0 1 50%;
    min-height: 48px;
}

.apollo-signin-band::after {
    content: "";
    flex: 1 0 96px;
    background: linear-gradient(90deg,
        rgb(var(--apollo-brand-tint) / 1) 0%,
        rgb(var(--apollo-brand-tint) / 0.86) 14%,
        rgb(var(--apollo-brand-tint) / 0.66) 30%,
        rgb(var(--apollo-brand-tint) / 0.44) 48%,
        rgb(var(--apollo-brand-tint) / 0.24) 66%,
        rgb(var(--apollo-brand-tint) / 0.09) 84%,
        rgb(var(--apollo-brand-tint) / 0) 100%);
}

.apollo-signin-text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 12px;
    padding: 8px 4px 8px 10px;
    border-radius: var(--apollo-radius-glass) 0 0 var(--apollo-radius-glass);
    background: var(--apollo-brand);
    color: #fff;
}

.apollo-signin-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 650;
    white-space: nowrap;
}

.apollo-signin-text .apollo-mark {
    background: #fff;
    color: var(--apollo-brand-ink);
}

.apollo-signin-site {
    white-space: nowrap;
}

.apollo-signin-site::before {
    content: "·";
    margin-right: 12px;
}

.apollo-signin-language {
    padding: 0 7px;
    border: 1px solid rgb(255 255 255 / 0.6);
    border-radius: var(--apollo-radius-pill);
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
}

.apollo-signin-client {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    height: 64px;
    max-width: 264px;
    padding: 4px 12px;
    border-radius: var(--apollo-radius-control);
}

.apollo-signin-client img {
    width: auto;
    height: auto;
    max-width: 240px;
    max-height: 56px;
    object-fit: contain;
}

/* A project sets its photograph with .apollo-signin-photo { background-image: url("...") } and the
   side of the box with --apollo-signin-justify (flex-start or flex-end) in its theme. */
.apollo-signin {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: var(--apollo-signin-justify, flex-start);
    min-height: max(520px, calc(100vh - 190px));
    margin-top: 12px;
    padding: 32px;
    overflow: hidden;
    border-radius: var(--apollo-radius-glass);
}

.apollo-signin-photo {
    position: absolute;
    inset: 6px;
    border-radius: calc(var(--apollo-radius-glass) - 6px);
    background: url("signin.svg") center / cover no-repeat;
}

.apollo-signin-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, rgb(var(--apollo-brand-tint) / 0.28), rgb(var(--apollo-brand-tint) / 0.08));
}

.apollo-signin-box {
    position: relative;
    width: 100%;
    max-width: 380px;
    padding: 8px;
    border-radius: var(--apollo-radius-glass);
}

.apollo-signin-box > .apollo-sheet {
    border-width: 0;
    border-radius: calc(var(--apollo-radius-glass) - 6px);
}

.apollo-signin-form {
    display: grid;
    gap: 12px;
    padding: 20px;
}

.apollo-signin-form h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.apollo-signin-form .btn {
    width: 100%;
}

/* The one message of a failed sign-in, from the validation summary, without its list. */
.apollo-signin-form .alert {
    margin: 0;
    padding: 10px 12px;
}

.apollo-signin-form .alert ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.apollo-signin-notice {
    margin: 12px 4px 0;
    color: var(--apollo-ink-2);
    font-size: 12px;
}

@media (max-width: 767.98px) {
    .apollo-signin-head {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .apollo-signin-band::after {
        content: none;
    }

    .apollo-signin-text {
        flex: 1;
        padding-right: 12px;
        border-radius: var(--apollo-radius-glass);
    }

    .apollo-signin-client {
        align-self: center;
        height: 48px;
    }

    .apollo-signin-client img {
        max-width: 180px;
        max-height: 40px;
    }

    .apollo-signin {
        display: block;
        min-height: 0;
        padding: 6px;
    }

    .apollo-signin-photo {
        position: relative;
        inset: auto;
        height: 160px;
    }

    .apollo-signin-box {
        max-width: none;
        margin-top: 6px;
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}