/* =============================================================================
   site.css  ·  application layer of the identity server
   -----------------------------------------------------------------------------
   Loaded after cd-tokens.css and cd-theme.css. It contains exclusively rules for
   the shell of this application (navigation bar, footer) and for its own
   building blocks.

   All values come from the --cd-* tokens - no hard-wired colour value, so that
   brand and colour mode changes work without further adjustment.
   ============================================================================= */

html {
    height: 100%;
}

body {
    min-height: 100%;
    background-color: var(--cd-body-bg);
    color: var(--cd-body-color);
    -webkit-font-smoothing: antialiased;
}

main > .container {
    max-width: 1140px;
}

/* Skip link for keyboard users */
.cd-skip-link {
    position: absolute;
    left: .75rem;
    top: -4rem;
    z-index: 1080;
    padding: .6rem 1rem;
    border-radius: var(--cd-radius-sm);
    background: var(--cd-brand-solid);
    color: var(--cd-brand-on-solid);
    font-weight: 600;
    text-decoration: none;
    transition: top var(--cd-transition);
}

.cd-skip-link:focus {
    top: .75rem;
    color: var(--cd-brand-on-solid);
}

/* Icons: 24px grid, stroke colour follows the text */
.cd-ico {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =============================================================================
   Navigation bar
   ============================================================================= */
.cd-navbar {
    background: var(--cd-surface);
    border-bottom: 1px solid var(--cd-border);
    box-shadow: var(--cd-shadow-sm);
    --bs-navbar-color: var(--cd-body-color);
    --bs-navbar-hover-color: var(--cd-brand-text);
    --bs-navbar-active-color: var(--cd-brand-text);
    --bs-navbar-brand-color: var(--cd-heading-color);
    --bs-navbar-brand-hover-color: var(--cd-heading-color);
    --bs-navbar-toggler-border-color: var(--cd-border);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%235B6672' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .cd-navbar {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23AAB3BF' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.cd-navbar .nav-link {
    font-weight: 500;
    border-radius: var(--cd-radius-sm);
    padding-inline: .7rem;
}

.cd-navbar .nav-link:hover {
    background: var(--cd-surface-2);
}

/* Word mark */
.cd-logo {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    text-decoration: none;
}

.cd-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--cd-brand-subtle-bg);
    color: var(--cd-brand-text);
}

.cd-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.cd-logo-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--cd-heading-color);
    letter-spacing: -.02em;
}

.cd-logo-sub {
    font-size: .7rem;
    color: var(--cd-muted-color);
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* =============================================================================
   Colour mode switcher
   ============================================================================= */
.cd-switcher {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.cd-mode-toggle {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background: var(--cd-surface-2);
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-pill);
}

.cd-mode-toggle button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 28px;
    padding: 0 .5rem;
    border: 0;
    border-radius: var(--cd-radius-pill);
    background: transparent;
    color: var(--cd-muted-color);
    cursor: pointer;
    transition: background-color var(--cd-transition), color var(--cd-transition);
}

.cd-mode-toggle button:hover {
    color: var(--cd-heading-color);
}

.cd-mode-toggle button[aria-pressed="true"] {
    background: var(--cd-surface);
    color: var(--cd-brand-text);
    box-shadow: var(--cd-shadow-sm);
}

.cd-mode-toggle .cd-ico {
    width: 16px;
    height: 16px;
}

/* =============================================================================
   Footer
   ============================================================================= */
.cd-footer {
    border-top: 1px solid var(--cd-border);
    background: var(--cd-surface);
    padding: 1.25rem 0;
    color: var(--cd-muted-color);
}

/* =============================================================================
   Building blocks of the identity server
   ============================================================================= */

/* Secrets shown once: client secret, authenticator key */
.secret-box {
    font-family: var(--cd-font-mono);
    word-break: break-all;
}

/* The action column of a table stays as narrow as possible */
.table td.actions {
    white-space: nowrap;
    width: 1%;
}

/* The server-side generated QR code of the two-factor setup.
   The code deliberately stays light - dark modules on a light background are the
   prerequisite for readers to recognise it. */
.cd-qr {
    display: inline-block;
    padding: .5rem;
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius);
    background: #ffffff;
    line-height: 0;
}

/* Separator with an inset label ("or") between two equivalent sign-in
   paths. */
.cd-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--cd-muted-color);
    font-size: .875rem;
}

.cd-divider::before,
.cd-divider::after {
    content: "";
    flex: 1 1 auto;
    border-top: 1px solid var(--cd-border);
}

/* Buttons that carry text and icon side by side */
.cd-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

@media print {
    .cd-navbar,
    .cd-band,
    .cd-footer,
    .cd-skip-link,
    .cd-switcher,
    .cd-subnav,
    .cd-breadcrumb,
    .cd-navbar-settings {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }

    .card {
        box-shadow: none;
    }
}

/* =============================================================================
   Company logo of the tenant
   -----------------------------------------------------------------------------
   Takes the place of the system mark after signing in. The height is capped and
   the width follows along - this way both square image marks and wide word marks
   fit into the same header.
   ============================================================================= */
.cd-logo-mark-image {
    width: auto;
    min-width: 34px;
    max-width: 180px;
    background: transparent;
    border-radius: 0;
}

.cd-logo-image {
    display: block;
    max-height: 34px;
    max-width: 180px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Preview in the tenant administration */
.cd-logo-preview img {
    max-height: 64px;
    max-width: 260px;
    padding: .5rem;
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius);
    background: var(--cd-surface-2);
}

/* Preview in the application administration */
.cd-icon-preview {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.cd-icon-preview img {
    width: 56px;
    height: 56px;
    padding: .375rem;
    object-fit: contain;
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius);
    background: var(--cd-surface-2);
}

/* Small icon next to the name in the application list */
.cd-app-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    object-fit: contain;
}

/* =============================================================================
   Legal texts
   ============================================================================= */

/* Links of the footer. The separating dots live in the CSS and not in the markup -
   this keeps the text of the links what gets read out. */
.cd-footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1rem;
}

.cd-footer-links a + a {
    position: relative;
}

.cd-footer-links a + a::before {
    content: "·";
    position: absolute;
    left: -.6rem;
    color: var(--cd-border);
}

/* The maintained content of a legal text page. The rules apply to arbitrary
   markup, because the text comes from the administration and brings no classes
   of its own. */
.cd-legal {
    max-width: 70ch;
    line-height: 1.7;
}

.cd-legal h1,
.cd-legal h2,
.cd-legal h3,
.cd-legal h4 {
    margin-top: 2rem;
    margin-bottom: .75rem;
    color: var(--cd-heading-color);
}

.cd-legal h1:first-child,
.cd-legal h2:first-child,
.cd-legal h3:first-child {
    margin-top: 0;
}

.cd-legal h2 { font-size: 1.25rem; }
.cd-legal h3 { font-size: 1.05rem; }

.cd-legal p,
.cd-legal ul,
.cd-legal ol,
.cd-legal table {
    margin-bottom: 1rem;
}

.cd-legal li + li {
    margin-top: .25rem;
}

.cd-legal table {
    width: 100%;
    border-collapse: collapse;
}

.cd-legal th,
.cd-legal td {
    padding: .4rem .6rem;
    border: 1px solid var(--cd-border);
    text-align: left;
    vertical-align: top;
}

.cd-legal img {
    max-width: 100%;
    height: auto;
}

/* =============================================================================
   Navigation: entries, menus, sub navigation, breadcrumb
   -----------------------------------------------------------------------------
   The navigation carries icons throughout; they are the constant that a menu
   entry, a tile on the start page and the sub navigation of the account share.
   ============================================================================= */

/* Entry with icon and label - in the navigation bar and in the pill row */
.cd-nav-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.cd-nav-link .cd-ico {
    width: 18px;
    height: 18px;
    opacity: .85;
}

/* The open area stays recognisable while working within it */
.cd-navbar .nav-link.active {
    background: var(--cd-brand-subtle-bg);
    color: var(--cd-brand-text);
}

.cd-navbar .nav-link.active .cd-ico {
    opacity: 1;
}

/* Colour mode and language sit at the right-hand end of the menu bar; on a
   narrow screen they move below the entries with a separating line. */
.cd-navbar-settings {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding-block: .75rem;
    border-top: 1px solid var(--cd-border);
}

@media (min-width: 992px) {
    .cd-navbar-settings {
        padding-block: 0;
        border-top: 0;
    }
}

/* -----------------------------------------------------------------------------
   Dropdowns of the administration and of the account
   -------------------------------------------------------------------------- */
.cd-menu {
    --bs-dropdown-min-width: 15rem;
    --bs-dropdown-bg: var(--cd-surface);
    --bs-dropdown-border-color: var(--cd-border);
    --bs-dropdown-link-color: var(--cd-body-color);
    --bs-dropdown-link-hover-bg: var(--cd-surface-2);
    --bs-dropdown-link-hover-color: var(--cd-heading-color);
    --bs-dropdown-header-color: var(--cd-muted-color);
    --bs-dropdown-link-active-bg: var(--cd-brand-subtle-bg);
    --bs-dropdown-link-active-color: var(--cd-brand-text);
    --bs-dropdown-padding-y: .5rem;
    box-shadow: var(--cd-shadow-md);
}

.cd-menu .dropdown-header {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.cd-menu-item {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    border: 0;
    background: none;
    text-align: start;
}

.cd-menu-item .cd-ico {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--cd-muted-color);
}

.cd-menu-item:hover .cd-ico,
.cd-menu-item.active .cd-ico {
    color: var(--cd-brand-text);
}

.cd-menu-item.active {
    background: var(--cd-brand-subtle-bg);
    color: var(--cd-brand-text);
    font-weight: 600;
}

/* Name and e-mail address above the entries of the account menu */
.cd-menu-identity {
    display: flex;
    flex-direction: column;
    padding: .25rem 1rem .5rem;
    line-height: 1.3;
}

.cd-menu-identity-name {
    font-weight: 600;
    color: var(--cd-heading-color);
}

.cd-menu-identity-mail {
    font-size: .8125rem;
    color: var(--cd-muted-color);
    word-break: break-all;
}

/* The tenant the user works in, with the shortcut to the switch */
.cd-menu-identity-tenant {
    display: block;
    margin-top: .25rem;
    font-size: .8125rem;
    color: var(--cd-muted-color);
}

/* -----------------------------------------------------------------------------
   Account button in the menu bar
   -------------------------------------------------------------------------- */
.cd-account-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .5rem;
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius-pill);
    background: var(--cd-surface-2);
    color: var(--cd-body-color);
    font-size: .9375rem;
    line-height: 1.4;
}

.cd-account-button:hover,
.cd-account-button:focus-visible {
    color: var(--cd-heading-color);
    background: var(--cd-surface);
}

.cd-account-name {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cd-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--cd-brand-solid);
    color: var(--cd-brand-on-solid);
    font-weight: 700;
    font-size: .8125rem;
}

/* A release the user has not looked at yet (see _UserMenu); anchored to the button */
.cd-news-dot {
    position: absolute;
    top: .1rem;
    left: 1.75rem;
    width: .625rem;
    height: .625rem;
    border: 2px solid var(--cd-surface-2);
    border-radius: 50%;
    background: var(--bs-danger);
}

/* -----------------------------------------------------------------------------
   Changelog
   -------------------------------------------------------------------------- */
.cd-changelog-entries li {
    display: flex;
    align-items: baseline;
    gap: .625rem;
    padding: .375rem 0;
}

.cd-changelog-entries li + li {
    border-top: 1px solid var(--cd-border);
}

/* Equal width, so that the texts line up below one another */
.cd-changelog-kind {
    flex: 0 0 6.5rem;
    text-align: center;
}

.cd-changelog-older > summary {
    cursor: pointer;
    color: var(--cd-brand-text);
}

/* -----------------------------------------------------------------------------
   Sub navigation of the account
   -------------------------------------------------------------------------- */
.cd-subnav {
    margin-bottom: 1.25rem;
}

.cd-subnav .nav-pills {
    --bs-nav-pills-border-radius: var(--cd-radius-pill);
    --bs-nav-link-color: var(--cd-muted-color);
    --bs-nav-link-hover-color: var(--cd-heading-color);
    --bs-nav-pills-link-active-bg: var(--cd-brand-subtle-bg);
    --bs-nav-pills-link-active-color: var(--cd-brand-text);
    gap: .25rem;
}

.cd-subnav .nav-link {
    padding: .4rem .85rem;
    font-size: .9375rem;
    font-weight: 500;
}

/* -----------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */
.cd-breadcrumb {
    margin-bottom: 1rem;
}

.cd-breadcrumb .breadcrumb {
    --bs-breadcrumb-divider-color: var(--cd-border);
    --bs-breadcrumb-item-active-color: var(--cd-muted-color);
    font-size: .875rem;
}

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

.cd-breadcrumb a:hover {
    color: var(--cd-brand-text);
    text-decoration: underline;
}

/* =============================================================================
   Tiles of the start page
   -----------------------------------------------------------------------------
   The same areas as in the menu, but laid out flat: one glance shows what this
   server can do and what this user is allowed to do.
   ============================================================================= */
.cd-tiles + .cd-tiles {
    margin-top: 1.75rem;
}

.cd-tiles-title {
    margin-bottom: .75rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--cd-muted-color);
}

.cd-tile {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    height: 100%;
    padding: 1rem;
    border: 1px solid var(--cd-border);
    border-radius: var(--cd-radius);
    background: var(--cd-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--cd-transition), box-shadow var(--cd-transition), transform var(--cd-transition);
}

.cd-tile:hover,
.cd-tile:focus-visible {
    border-color: var(--cd-brand-solid);
    box-shadow: var(--cd-shadow-sm);
    color: inherit;
}

.cd-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: var(--cd-radius-sm);
    background: var(--cd-brand-subtle-bg);
    color: var(--cd-brand-text);
}

/* An uploaded application icon brings its own colours: it gets a neutral
   surface instead of the brand tint, and a little more room than a line icon. */
.cd-tile-icon:has(.cd-ico-image) {
    background: var(--cd-surface-2);
}

.cd-tile-icon .cd-ico-image {
    width: 26px;
    height: 26px;
}

/* Uploaded icon in place of an inline SVG (see _NavigationIcon) */
.cd-ico-image {
    object-fit: contain;
    border-radius: 3px;
}

.cd-tile-body {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.cd-tile-name {
    font-weight: 600;
    color: var(--cd-heading-color);
}

.cd-tile-text {
    font-size: .875rem;
    color: var(--cd-muted-color);
}

@media (prefers-reduced-motion: reduce) {
    .cd-tile {
        transition: none;
    }
}

/* Quick switch of the tenant in the navigation bar: kept narrow so that the
   account menu stays reachable on small screens. */
.cd-tenant-switcher .form-select {
    max-width: 12rem;
}

.cd-tenant-switcher-icon {
    color: var(--cd-muted-color);
}

/* Masked values (_SecretValue): identifier, eye button, copy button in one line. */
.cd-secret {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    white-space: nowrap;
}

.cd-secret-mask {
    letter-spacing: .1em;
    color: var(--cd-muted-color);
}

.cd-secret-btn {
    display: inline-flex;
    align-items: center;
    padding: .1rem;
    border: 0;
    background: transparent;
    color: var(--cd-muted-color);
    border-radius: .25rem;
    line-height: 1;
}

.cd-secret-btn:hover,
.cd-secret-btn:focus-visible {
    color: var(--cd-body-color);
    background: var(--bs-secondary-bg);
}

.cd-secret-btn .cd-ico {
    width: 1rem;
    height: 1rem;
}

/* Countdown until a revealed value hides itself again. */
.cd-secret-timer {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    color: var(--cd-muted-color);
}

.cd-secret-ring {
    width: 1rem;
    height: 1rem;
    transform: rotate(-90deg);
}

.cd-secret-ring circle {
    fill: none;
    stroke-width: 2.5;
}

.cd-secret-ring-track {
    stroke: var(--bs-secondary-bg);
}

.cd-secret-ring-fill {
    stroke: currentColor;
    stroke-linecap: round;
    /* circumference of r=8 */
    stroke-dasharray: 50.27;
    stroke-dashoffset: 0;
}

.cd-secret-timer.is-running .cd-secret-ring-fill {
    animation: cd-secret-drain var(--cd-secret-seconds, 10s) linear forwards;
}

@keyframes cd-secret-drain {
    to { stroke-dashoffset: 50.27; }
}

@media (prefers-reduced-motion: reduce) {
    .cd-secret-timer.is-running .cd-secret-ring-fill {
        animation: none;
        stroke-dashoffset: 0;
    }
}

/* Colour fields of the tenant colours: the picker greys out while the field is empty. */
.cd-color-field .form-control-color {
    max-width: 3rem;
}

.cd-color-field.is-empty .form-control-color {
    opacity: .35;
}

/* Lets long text inside a flex row shrink instead of pushing the buttons out */
.min-w-0 {
    min-width: 0;
}

/* Changed values in the audit log: long values wrap instead of widening the table */
.cd-audit-changes td {
    max-width: 28ch;
    overflow-wrap: anywhere;
}

.cd-audit-changes td:first-child {
    white-space: nowrap;
}

/* Status notice of an application in the menu and on the tiles */
.cd-status-badge {
    margin-inline-start: .375rem;
    font-size: .7rem;
    font-weight: 600;
    vertical-align: .1em;
}

.cd-menu-item .cd-status-badge {
    margin-inline-start: auto;
}

.cd-tile-status {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .5rem;
    font-size: .8125rem;
    color: var(--cd-heading-color);
}

/* ---------------------------------------------------------------------------
   Error pages (Pages/Error): the status code as a large, quiet figure above
   the heading.
   --------------------------------------------------------------------------- */
.cd-error-code {
    font-size: clamp(3rem, 8vw, 4.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--cd-brand-text);
}

/* ---------------------------------------------------------------------------
   DataTables (wwwroot/lib/datatables, js/cd-datatables.js).
   Most lists sit in a card around a .table-responsive: the search, page size,
   info and paging rows get the card's inner spacing and a hairline towards
   the table, the table itself stays flush with the card edges.
   --------------------------------------------------------------------------- */
.card .table-responsive > .dt-container > .row:not(.dt-layout-table) {
    margin: 0;
    padding: .75rem 1rem;
}

.card .table-responsive > .dt-container > .row:not(.dt-layout-table):first-child {
    border-bottom: 1px solid var(--cd-border);
}

.card .table-responsive > .dt-container > .row:not(.dt-layout-table):last-child {
    border-top: 1px solid var(--cd-border);
}

.dt-container > .row.dt-layout-table {
    margin-top: 0;
}

.dt-container .dt-search input {
    width: min(18rem, 100%);
}

.dt-container .dt-info {
    color: var(--cd-muted-color);
    font-size: .875rem;
}

.dt-container .pagination {
    margin-bottom: 0;
}

.card .table-responsive > .dt-container > .row.dt-layout-table > * {
    padding-inline: 0;
}

/* Keep the columns aligned as designed: DataTables right-aligns everything it
   detects as a number or a date (sort values in data-order included). An
   explicit .text-end in the markup still wins. */
table.dataTable th.dt-type-numeric,
table.dataTable th.dt-type-date,
table.dataTable td.dt-type-numeric,
table.dataTable td.dt-type-date {
    text-align: start;
}

table.dataTable th.dt-type-numeric div.dt-column-header,
table.dataTable th.dt-type-date div.dt-column-header {
    flex-direction: row;
}

/* Tables whose rows open a detail row on click (data-dt-row-toggle). */
table.dataTable[data-dt-row-toggle].collapsed > tbody > tr:not(.child) {
    cursor: pointer;
}