/*
    Administration workspace (redesign Phase 6): People & roles, Sessions & tokens, Activity, App settings, Database,
    Help & about, sign-in, setup and My account. Theme tokens only (Klar and Nucera, light and dark); layout of the
    pages, the blocks keep their own styles.
*/

/* ---------------------------------------------------------------------------------------------------------------
   shared
   --------------------------------------------------------------------------------------------------------------- */
.klar-admin-tabs {
    margin-top: 8px;
    border-bottom: 1px solid var(--klar-hairline);
}

.klar-admin-tabs .klar-tablist {
    border-bottom: none;
}

.klar-admin-name {
    display: block;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.klar-admin-sub {
    display: block;
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

.klar-admin-muted {
    color: var(--mud-palette-text-secondary);
}

.klar-admin-chips {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.klar-admin-more {
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
    padding: 0 4px;
}

.klar-admin-status {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

.klar-admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: 16px;
}

@media (min-width: 960px) {
    .klar-admin-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }

    .klar-admin-grid > .klar-admin-wide {
        grid-column: 1 / -1;
    }
}

.klar-admin-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.klar-admin-lines {
    list-style: none;
    margin: 0;
    padding: 0;
}

.klar-admin-lines > li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--klar-hairline);
    min-width: 0;
}

.klar-admin-lines > li:last-child {
    border-bottom: none;
}

.klar-admin-lines .klar-admin-line-main {
    flex: 1 1 auto;
    min-width: 0;
}

.klar-admin-lines .klar-admin-line-icon {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
}

.klar-admin-lines .klar-admin-line-actions {
    flex: 0 0 auto;
    display: inline-flex;
    gap: 8px;
}

.klar-admin-facts {
    display: grid;
    grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
    gap: 8px 16px;
    margin: 0;
}

.klar-admin-facts > dt {
    color: var(--mud-palette-text-secondary);
    font-size: .875rem;
}

.klar-admin-facts > dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.klar-admin-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

.klar-admin-hint {
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
    margin: 4px 0 0;
}

.klar-admin-empty-line {
    color: var(--mud-palette-text-secondary);
    padding: 8px 0;
}

.klar-admin-mono {
    font-family: var(--klar-font-mono);
    font-size: .8125rem;
}

.klar-admin-warn {
    color: var(--klar-tone-warning);
}

/* the quiet facts under a name: "dgross · Active · created 19 Mar 2025 · last sign-in today 08:12" */
.klar-admin-identity-sub {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 0;
}

.klar-admin-identity-sub > * + *:not(.klar-chip)::before,
.klar-admin-identity-sub > .klar-chip {
    margin-left: 8px;
}

.klar-admin-identity-sub > * + *:not(.klar-chip)::before {
    content: "·";
    margin-right: 8px;
    color: var(--mud-palette-text-disabled);
}

/* a secret on screen (SecretValue, SecretDialog): a new token, a generated password */
.klar-secret-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.klar-secret-warning {
    margin: 0 0 12px;
    color: var(--mud-palette-text-secondary);
}

.klar-secret-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.klar-secret-value {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 12px;
    font-family: var(--klar-font-mono);
    font-size: .9375rem;
    letter-spacing: .02em;
    overflow-wrap: anywhere;
    background: var(--mud-palette-background-gray);
    border: 1px solid var(--klar-hairline);
    border-radius: var(--klar-radius-control);
    color: var(--mud-palette-text-primary);
}

/* the fields of a step or a quick form, one under the other */
.klar-admin-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 560px;
}

.klar-mono-input input {
    font-family: var(--klar-font-mono);
}

/* one choice out of a few, each with a line of explanation (roles in AD-3, sign-in methods, presets) */
.klar-admin-choices {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: none;
    min-width: 0;
}

.klar-admin-choice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--klar-hairline);
    border-radius: var(--klar-radius-control);
    cursor: pointer;
    background: var(--mud-palette-surface);
}

.klar-admin-choice:hover {
    border-color: var(--mud-palette-lines-inputs);
}

.klar-admin-choice.is-on {
    border-color: var(--mud-palette-primary);
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
}

.klar-admin-choice:focus-within {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.klar-admin-choice > input {
    margin: 3px 0 0;
    accent-color: var(--mud-palette-primary);
    flex: 0 0 auto;
}

.klar-admin-choice-main {
    flex: 1 1 auto;
    min-width: 0;
}

/* SI-2 "Show details": what the standard model adds, grouped */
.klar-setup-details {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) 1fr;
    gap: .25rem .75rem;
    margin: .5rem 0 0;
    font-size: .8125rem;
}

.klar-setup-details dt {
    font-weight: 600;
}

.klar-setup-details dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 599.98px) {
    .klar-setup-details {
        grid-template-columns: 1fr;
    }
}

.klar-admin-choice-side {
    flex: 0 0 auto;
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.klar-admin-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-weight: 600;
    font-size: .875rem;
    color: var(--klar-primary-ink);
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    flex: 0 0 auto;
}

/* "Max will be able to": what a role allows and what not */
.klar-admin-can {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.klar-admin-can > li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .875rem;
}

.klar-admin-can > li > .mud-icon-root {
    margin-top: 1px;
    flex: 0 0 auto;
}

.klar-admin-can > li.klar-admin-cannot {
    color: var(--mud-palette-text-secondary);
}

/* ---------------------------------------------------------------------------------------------------------------
   AD-4 deactivate (the content of the confirmation)
   --------------------------------------------------------------------------------------------------------------- */
.klar-deactivate-when {
    border: none;
    margin: 0 0 12px;
    padding: 0;
    min-width: 0;
}

.klar-deactivate-list {
    list-style: none;
    padding-left: 0;
}

.klar-deactivate-list > li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* ---------------------------------------------------------------------------------------------------------------
   AD-3 add person
   --------------------------------------------------------------------------------------------------------------- */
.klar-add-person-id {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

/* ---------------------------------------------------------------------------------------------------------------
   AD-5 roles and role page
   --------------------------------------------------------------------------------------------------------------- */
.klar-admin-allows {
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

.klar-admin-foot {
    margin-top: 8px;
}

/* the ⋯ of a row sits above the stretched row link */
.klar-row-menu {
    position: relative;
    z-index: 1;
}

.klar-danger-item {
    color: var(--klar-tone-error);
}

.klar-role-description {
    align-items: center;
}

.klar-role-description-field {
    min-width: min(480px, 100%);
}

.klar-role-memberlist {
    gap: 6px;
}

.klar-role-member {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 2px 0 10px;
    border: 1px solid var(--klar-hairline);
    border-radius: 999px;
    font-size: .875rem;
}

.klar-role-member.is-added {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

.klar-role-member.is-inactive a {
    color: var(--mud-palette-text-secondary);
}

.klar-role-area + .klar-role-area {
    margin-top: 12px;
}

.klar-role-area-title {
    margin: 0 0 4px;
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mud-palette-text-secondary);
}

.klar-role-toggles {
    list-style: none;
    margin: 0;
    padding: 0;
}

.klar-role-toggles > li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
    padding: 4px 8px;
    margin: 0 -8px;
    border-radius: var(--klar-radius-control);
}

.klar-role-toggles > li > .klar-admin-sub {
    flex: 1 1 100%;
    padding-left: 52px;
}

.klar-role-toggles > li.is-changed {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

.klar-role-changed {
    font-size: .75rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
}

.klar-role-note {
    flex: 1 1 100%;
    padding-left: 52px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.klar-role-move {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.klar-role-move-select {
    min-width: 200px;
    flex: 0 1 240px;
}

/* ---------------------------------------------------------------------------------------------------------------
   AD-8 activity
   --------------------------------------------------------------------------------------------------------------- */
.klar-activity-about {
    display: inline-flex;
    align-items: center;
}

.klar-activity-jump {
    max-width: 190px;
}

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

.klar-activity-day-title {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0;
    padding: 8px 16px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--klar-hairline);
}

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

.klar-activity-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--klar-hairline);
}

.klar-activity-time {
    flex: 0 0 3.5rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    font-size: .875rem;
}

.klar-activity-icon {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
    margin-top: 1px;
}

.klar-activity-main {
    flex: 1 1 auto;
    min-width: 0;
}

.klar-activity-reason,
.klar-activity-summary {
    color: var(--mud-palette-text-secondary);
}

.klar-activity-toggle {
    border: none;
    background: none;
    padding: 0;
    margin-left: 4px;
    vertical-align: middle;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.klar-activity-toggle:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.klar-activity-details {
    margin: 4px 0 0;
    padding-left: 20px;
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 599px) {
    .klar-activity-row {
        flex-wrap: wrap;
        padding: 8px 12px;
    }
}

/* ---------------------------------------------------------------------------------------------------------------
   AD-9 app settings
   --------------------------------------------------------------------------------------------------------------- */
.klar-settings-form {
    max-width: none;
}

.klar-settings-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.klar-settings-field.is-changed .mud-input-outlined-border {
    border-color: var(--mud-palette-primary);
}

.klar-settings-more > summary {
    cursor: pointer;
    color: var(--mud-palette-primary);
    font-size: .875rem;
    padding: 4px 0;
}

.klar-settings-more[open] > summary {
    margin-bottom: 8px;
}

.klar-settings-more > .klar-settings-field + .klar-settings-field {
    margin-top: 12px;
}

.klar-settings-table {
    display: grid;
    grid-template-columns: minmax(120px, auto) minmax(80px, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) auto;
    font-size: .875rem;
}

/* a row is a subgrid: the columns line up over all rows, and a row places and orders its own cells (with "display:
   contents" a missing cell shifted every later row by a column, and "order" on a phone moved all values to the end) */
.klar-settings-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
}

.klar-settings-row > span {
    padding: 8px 8px 8px 0;
    border-bottom: 1px solid var(--klar-hairline);
    min-width: 0;
    overflow-wrap: anywhere;
}

.klar-settings-head > span {
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.klar-settings-value {
    white-space: pre-wrap;
}

.klar-settings-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--klar-hairline);
}

.klar-settings-logo.is-changed {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

.klar-settings-logo-image {
    flex: 0 0 64px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--klar-hairline);
    border-radius: var(--klar-radius-control);
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

.klar-settings-logo-image img {
    max-width: 60px;
    max-height: 44px;
}

.klar-settings-appbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--klar-radius-control);
    background: var(--mud-palette-appbar-background);
    color: var(--mud-palette-appbar-text);
}

.klar-settings-appbar .klar-admin-sub {
    color: inherit;
    opacity: .8;
}

.klar-settings-signin {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--klar-hairline);
    border-radius: var(--klar-radius-card);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

@media (max-width: 599px) {
    .klar-settings-table {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .klar-settings-row > span:nth-child(3),
    .klar-settings-row > span:nth-child(4) {
        display: none;
    }

    .klar-settings-row > span:nth-child(2) {
        grid-column: 1 / -1;
        order: 3;
    }
}

/* AD-10 third-party licenses (library · license) and the license files of System information */
.klar-thirdparty-table {
    grid-template-columns: minmax(0, 1fr) auto;
}

@media (max-width: 599px) {
    .klar-thirdparty-table .klar-settings-row > span:nth-child(2) {
        grid-column: auto;
        order: 0;
    }
}

.klar-system-license + .klar-system-license {
    margin-top: 12px;
}

/* AD-10 environment variables: name · value · Reveal. Each row is a grid of its own - the five columns of the settings
   table let the three cells of a row run on into the next one, and on a phone the value moved below all names and
   the Reveal button was hidden */
.klar-system-table {
    display: block;
}

.klar-system-table .klar-settings-row {
    display: grid;
    grid-template-columns: minmax(10rem, 30%) minmax(0, 1fr) minmax(5.5rem, auto);
    align-items: start;
    column-gap: 8px;
}

.klar-system-table .klar-settings-row > span {
    padding-right: 0;
}

.klar-system-table .klar-settings-row > span:nth-child(3) {
    text-align: end;
}

@media (max-width: 599px) {
    .klar-system-table .klar-settings-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .klar-system-table .klar-settings-row > span {
        border-bottom: 0;
    }

    .klar-system-table .klar-settings-row > span:nth-child(3) {
        display: block;
    }

    .klar-system-table .klar-settings-row > span:nth-child(2) {
        grid-column: 1 / -1;
        order: 3;
        padding-top: 0;
        border-bottom: 1px solid var(--klar-hairline);
    }

    .klar-system-table .klar-settings-head > span:nth-child(2) {
        display: none;
    }
}

/* ---------------------------------------------------------------------------------------------------------------
   AD-1 people on a phone (SH-7 "tables become two-line rows"): name and status, then roles and last sign-in - a
   table of five columns scrolled sideways and left the status off screen
   --------------------------------------------------------------------------------------------------------------- */
@media (max-width: 599.98px) {
    .klar-admin-people .klar-list-table,
    .klar-admin-people .klar-list-table tbody {
        display: block;
        width: 100%;
    }

    .klar-admin-people .klar-list-table colgroup,
    .klar-admin-people .klar-list-table thead {
        display: none;
    }

    .klar-admin-people .klar-list-table tbody tr {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "check name status"
            "check roles last";
        align-items: center;
        column-gap: .5rem;
        row-gap: .25rem;
        padding: .5rem .25rem;
        border-bottom: 1px solid var(--klar-hairline);
    }

    .klar-admin-people .klar-list-table tbody td {
        display: none;
        padding: 0;
        border: 0;
        min-width: 0;
    }

    .klar-admin-people .klar-list-table tbody td.klar-list-check {
        display: block;
        grid-area: check;
        width: auto;
        padding-inline: .25rem;
    }

    .klar-admin-people .klar-list-table tbody td.klar-col-name {
        display: block;
        grid-area: name;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* "Anja Schleith  aschleith" on one line */
    .klar-admin-people .klar-list-table tbody td.klar-col-name .klar-admin-name,
    .klar-admin-people .klar-list-table tbody td.klar-col-name .klar-admin-sub {
        display: inline;
    }

    .klar-admin-people .klar-list-table tbody td.klar-col-name .klar-admin-sub {
        margin-inline-start: .5rem;
    }

    .klar-admin-people .klar-list-table tbody td.klar-col-roles {
        display: block;
        grid-area: roles;
        overflow: hidden;
    }

    .klar-admin-people .klar-list-table tbody td.klar-col-roles .klar-admin-chips {
        flex-wrap: nowrap;
    }

    .klar-admin-people .klar-list-table tbody td.klar-col-last {
        display: block;
        grid-area: last;
        justify-self: end;
        font-size: .75rem;
        color: var(--mud-palette-text-secondary);
    }

    .klar-admin-people .klar-list-table tbody td.klar-col-status {
        display: block;
        grid-area: status;
        justify-self: end;
    }
}

/* ---------------------------------------------------------------------------------------------------------------
   AD-3 roles and AD-5 sessions & tokens on a phone (SH-7 "tables become two-line rows", as the people list): the
   tables of four and eight columns scrolled sideways with the actions off screen
   - roles: name and the menu, then what the role is for
   - sessions & tokens: kind, name or device and the action, then the person, the expiry and the last use
   --------------------------------------------------------------------------------------------------------------- */
@media (max-width: 599.98px) {
    .klar-admin-roles .klar-list-table,
    .klar-admin-roles .klar-list-table tbody,
    .klar-admin-sessions .klar-list-table,
    .klar-admin-sessions .klar-list-table tbody {
        display: block;
        width: 100%;
    }

    .klar-admin-roles .klar-list-table colgroup,
    .klar-admin-roles .klar-list-table thead,
    .klar-admin-sessions .klar-list-table colgroup,
    .klar-admin-sessions .klar-list-table thead {
        display: none;
    }

    .klar-admin-roles .klar-list-table tbody td,
    .klar-admin-sessions .klar-list-table tbody td {
        display: none;
        padding: 0;
        border: 0;
        min-width: 0;
    }

    .klar-admin-roles .klar-list-table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "name menu"
            "purpose purpose";
        align-items: center;
        column-gap: .5rem;
        row-gap: .25rem;
        padding: .5rem .25rem;
        border-bottom: 1px solid var(--klar-hairline);
    }

    .klar-admin-roles .klar-list-table tbody td.klar-col-name {
        display: block;
        grid-area: name;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .klar-admin-roles .klar-list-table tbody td.klar-col-menu {
        display: block;
        grid-area: menu;
        justify-self: end;
    }

    .klar-admin-roles .klar-list-table tbody td.klar-col-purpose {
        display: block;
        grid-area: purpose;
        font-size: .8125rem;
        color: var(--mud-palette-text-secondary);
    }

    .klar-admin-sessions .klar-list-table tbody tr {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "type name action"
            "person expires used";
        align-items: center;
        column-gap: .5rem;
        row-gap: .25rem;
        padding: .5rem .25rem;
        border-bottom: 1px solid var(--klar-hairline);
    }

    .klar-admin-sessions .klar-list-table tbody td.klar-col-type {
        display: block;
        grid-area: type;
    }

    .klar-admin-sessions .klar-list-table tbody td.klar-col-name {
        display: block;
        grid-area: name;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .klar-admin-sessions .klar-list-table tbody td.klar-col-action {
        display: block;
        grid-area: action;
        justify-self: end;
    }

    .klar-admin-sessions .klar-list-table tbody td.klar-col-person {
        display: block;
        grid-area: person;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .klar-admin-sessions .klar-list-table tbody td.klar-col-expires {
        display: block;
        grid-area: expires;
        font-size: .75rem;
    }

    .klar-admin-sessions .klar-list-table tbody td.klar-col-used {
        display: block;
        grid-area: used;
        justify-self: end;
        font-size: .75rem;
        color: var(--mud-palette-text-secondary);
    }
}

/* ---------------------------------------------------------------------------------------------------------------
   AD-2 person page
   --------------------------------------------------------------------------------------------------------------- */
.klar-person-rolelist > li.is-removed .klar-admin-sub {
    text-decoration: line-through;
}

.klar-person-rolelist > li.is-added {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    margin: 0 -8px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: var(--klar-radius-control);
}

.klar-person-can > dd span[title] {
    cursor: help;
}

.klar-person-can .klar-person-only {
    font-weight: 600;
    color: var(--mud-palette-primary);
}

/* R3-P3-56 person page: the server is still working on the deactivation (the dialog is closed already) */
.klar-person-busy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 12px;
}

/* R3-P3-59 token wizard: the chosen permissions by area ("Products: create, rename") */
.klar-token-areas {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: .875rem;
}

@media (max-width: 599px) {
    .klar-admin-facts {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .klar-admin-facts > dd {
        margin-bottom: 8px;
    }

    .klar-admin-lines > li {
        flex-wrap: wrap;
    }
}

/* ---------------------------------------------------------------------------------------------------------------
   SI-1 sign-in, SI-2 setup, SI-4 My account
   --------------------------------------------------------------------------------------------------------------- */
.klar-signin-title {
    margin: 0;
}

.klar-signin-context {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 12px;
    color: var(--mud-palette-text-secondary);
    font-size: .875rem;
}

.klar-signin-message {
    margin-top: 12px;
}

.klar-signin-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    flex-wrap: wrap;
    margin-top: 16px;
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

.klar-setup {
    max-width: 1100px;
    margin: 32px auto;
    padding: 0 16px;
}

.klar-me-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    flex-wrap: wrap;
}

.klar-admin-form + .klar-me-row,
p + .klar-me-row {
    margin-top: 12px;
}

.klar-me-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}

.klar-me-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

.klar-me-name > .mud-input-control {
    flex: 1 1 auto;
}

.klar-me-can-sentence {
    margin: 8px 0 0;
}

.klar-me-can {
    margin-top: 8px;
}

.klar-me-can > summary {
    cursor: pointer;
    padding: 4px 0;
    color: var(--mud-palette-primary);
    font-weight: 500;
}

.klar-me-can > summary:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: var(--klar-radius-control);
}

.klar-admin-rule {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: -4px 0 4px;
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

.klar-admin-rule.is-met {
    color: var(--mud-palette-success);
}

@media (max-width: 599px) {
    .klar-me-pair {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* ---------------------------------------------------------------------------------------------------------------
   MA-1 database page, MA-2 health, MA-3 restore
   --------------------------------------------------------------------------------------------------------------- */
.klar-db-backup-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .875rem;
}

.klar-db-backup-state.is-success {
    color: var(--mud-palette-success);
}

.klar-db-backup-state.is-warning {
    color: var(--mud-palette-warning-darken, var(--mud-palette-warning));
}

.klar-db-backup-state.is-error {
    color: var(--mud-palette-error);
}

.klar-db-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

.klar-db-table th {
    text-align: left;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    padding: 8px 12px;
    border-bottom: 1px solid var(--klar-hairline);
}

.klar-db-table td {
    padding: 6px 12px;
    border-bottom: 1px solid var(--klar-hairline);
    vertical-align: middle;
}

.klar-db-table .klar-db-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.klar-db-table .klar-db-menu {
    width: 40px;
    text-align: right;
    padding-right: 4px;
}

.klar-db-table tr.is-selected td {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

.klar-db-kept {
    vertical-align: middle;
    margin-left: 4px;
    color: var(--mud-palette-primary);
}

.klar-db-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 10px 12px;
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

/* R3-P3-94: "… · Folder D:\QmDb\backups" has no place to break: it was clipped at 375 px */
.klar-db-foot > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.klar-db-danger .klar-danger-action + .klar-danger-action {
    border-top: 1px solid var(--klar-hairline);
}

.klar-db-group-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.klar-db-count {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.klar-db-compare {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
    margin: 12px 0;
}

.klar-db-compare th,
.klar-db-compare td {
    padding: 6px 12px 6px 0;
    border-bottom: 1px solid var(--klar-hairline);
    text-align: left;
}

/* a comparison or import table wider than its card scrolls inside it, never out of the screen (R3-P3-67) */
.klar-db-scroll {
    max-width: 100%;
    overflow-x: auto;
}

.klar-db-compare td.klar-db-num,
.klar-db-compare th.klar-db-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.klar-db-checks {
    list-style: none;
    margin: 8px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.klar-db-checks > li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* MA-1: a backup being written ("Creating backup… 38 % · about 20 s left") */
.klar-db-table tr.klar-db-running td {
    color: var(--mud-palette-text-secondary);
}

.klar-db-table .klar-db-running-text {
    white-space: nowrap;
}

.klar-db-table .klar-db-running-text > * {
    vertical-align: middle;
}

.klar-db-table .klar-db-contents {
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 599px) {
    .klar-db-table .klar-db-by,
    .klar-db-table .klar-db-contents {
        display: none;
    }

    .klar-db-table .klar-db-running-text {
        white-space: normal;
    }
}
/* MA-5: the maintenance banner of every session, above the page */
.klar-maintenance-banner {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: var(--klar-radius-control);
    background: color-mix(in srgb, var(--mud-palette-warning) 18%, var(--mud-palette-surface));
    color: var(--mud-palette-text-primary);
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 55%, transparent);
    font-size: .875rem;
}

.klar-maintenance-banner .mud-icon-root {
    color: var(--mud-palette-warning);
    flex: 0 0 auto;
    margin-top: 1px;
}

.klar-health-products {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.klar-health-products > li {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    align-items: baseline;
}

.klar-restore-file {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

/* MA-3 the upload in slices: the line with [Pause] / [Resume] */
.klar-restore-upload-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.klar-restore-upload-line .klar-restore-upload {
    margin: 0;
}
/* SI-5 command-line consent */
.cli-facts {
    display: grid;
    grid-template-columns: minmax(100px, max-content) minmax(0, 1fr);
    gap: 6px 16px;
    margin: 0 0 12px;
}

.cli-facts > dt {
    color: var(--mud-palette-text-secondary);
}

.cli-facts > dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.cli-mono,
.cli-code input {
    font-family: var(--klar-font-mono, ui-monospace, monospace);
}

.cli-code input {
    font-size: 1.5rem;
    letter-spacing: .08em;
}

.cli-details > summary {
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    font-size: .8125rem;
}

.cli-claims {
    max-height: 220px;
    overflow-y: auto;
    padding-top: 4px;
}

.cli-countdown {
    font-size: .875rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.cli-expired {
    color: var(--mud-palette-error);
}
.klar-db-sub {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

@media (max-width: 599px) {
    /* the backups as two-line rows */
    .klar-db-table,
    .klar-db-table tbody {
        display: block;
        width: 100%;
    }

    .klar-db-table thead {
        display: none;
    }

    .klar-db-table tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) max-content 40px;
        grid-template-areas: "when size menu" "kind kind menu";
        align-items: center;
        padding: 6px 0;
        border-bottom: 1px solid var(--klar-hairline);
    }

    .klar-db-table td {
        border-bottom: none;
        padding: 1px 12px;
        min-width: 0;
    }

    .klar-db-table td:nth-child(1) {
        grid-area: when;
    }

    .klar-db-table td:nth-child(2) {
        grid-area: kind;
        color: var(--mud-palette-text-secondary);
    }

    .klar-db-table td.klar-db-num {
        grid-area: size;
    }

    .klar-db-table td.klar-db-menu {
        grid-area: menu;
        width: auto;
        min-width: 0;
        justify-self: end;
    }

    /* MA-1: the row of a backup being written: when · kind / its progress */
    .klar-db-table tr.klar-db-running {
        grid-template-areas: "when when when" "kind kind kind" "text text text";
    }

    .klar-db-table td.klar-db-running-text {
        grid-area: text;
    }
}

/* MA-6 on a phone: the column mapping as rows - the name of the column of the file, its first values, the select
   under them - instead of three columns the 'Imported as' selects fall out of (R3-P3-67) */
@media (max-width: 599px) {
    .klar-import-columns thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .klar-import-columns tbody tr {
        display: grid;
        gap: 4px;
        padding: 8px 0;
        border-bottom: 1px solid var(--klar-hairline);
    }

    .klar-import-columns tbody th,
    .klar-import-columns tbody td {
        display: block;
        padding: 0;
        border-bottom: 0;
        overflow-wrap: anywhere;
    }
}
/* ---------------------------------------------------------------------------------------------------------------
   AD-9 / B11 the settings the application knows: the picker of the "Add key" dialog (grouped, each with what it does
   and its default), the editors per kind and the suggestions of App settings. Long keys wrap instead of overflowing.
   --------------------------------------------------------------------------------------------------------------- */
.klar-setting-picker {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: min(60vh, 520px);
    overflow-y: auto;
}

.klar-setting-group-title {
    margin: 4px 0;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: .02em;
}

.klar-setting-choice {
    display: grid;
    gap: 2px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--klar-hairline);
    border-radius: var(--klar-radius-card);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.klar-setting-choice + .klar-setting-choice {
    margin-top: 6px;
}

.klar-setting-choice:hover,
.klar-setting-choice:focus-visible {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
}

.klar-setting-key {
    font-size: .875rem;
    overflow-wrap: anywhere;
}

.klar-setting-text {
    font-size: .875rem;
}

.klar-setting-default {
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

.klar-setting-back {
    align-self: flex-start;
}

.klar-setting-languages {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
}

@media (max-width: 599px) {
    .klar-setting-languages {
        grid-template-columns: minmax(0, 1fr);
    }
}

.klar-setting-suggestions {
    margin: 0;
    padding: 0;
    list-style: none;
}

.klar-setting-suggestion {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--klar-hairline);
}

.klar-setting-suggestion-text {
    display: grid;
    gap: 2px;
    flex: 1;
    min-width: 0;
}