/* =========================================================
   Components
   Buttons, fields, tables, tags, notifications, menus, modals, toggles,
   and tiles are Carbon's and come from assets/vendor/carbon/carbon.css.
   This file holds what Carbon has no component for (cards' insides,
   definition lists, timelines, people in a table, empty states) and the
   few places the console arranges Carbon components. Colours and type
   use Carbon's tokens, so light and dark both follow.
========================================================= */

/* ---- Cards (Carbon tiles) -------------------------------------------- */

.card {
    padding: 1.5rem;
}

/* A tile and a modal sit on the first layer, and what is inside them on the second, as
   Carbon's Layer component arranges it: the cds--layer-two class sets the tokens for the
   contents, and the surface itself keeps the first layer's colour. */

.card.cds--layer-two,
.cds--modal-container.cds--layer-two {
    background-color: var(--cds-layer-01);
}

.card-narrow {
    max-width: 40rem;
}

.card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.card-header h2,
.section-title {
    color: var(--cds-text-primary);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.75rem;
    letter-spacing: 0;
}

.card-header p {
    flex-basis: 100%;
    max-width: 40rem;
    color: var(--cds-text-secondary);
}

.card > * + *:not(.card-header) {
    margin-top: 1.5rem;
}

.card-note {
    color: var(--cds-text-helper);
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0.32px;
}

.grid-even {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: start;
}

/* ---- Definition list -------------------------------------------------- */

.definition-list {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
    gap: 1rem 2rem;
}

.definition-list dt {
    color: var(--cds-text-secondary);
}

.definition-list dd {
    min-width: 0;
    color: var(--cds-text-primary);
    overflow-wrap: anywhere;
}

.plain-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-left: 1rem;
    list-style: disc;
    color: var(--cds-text-secondary);
}

/* ---- Lists: needs attention, timelines --------------------------------- */

.attention-list li,
.timeline li {
    padding: 1rem 0;
    border-bottom: 1px solid var(--cds-border-subtle-01);
}

.attention-list li:first-child,
.timeline li:first-child {
    padding-top: 0;
}

.attention-list li:last-child,
.timeline li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.attention-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.timeline strong,
.timeline-title {
    color: var(--cds-text-primary);
}

.timeline .timeline-meta {
    display: block;
    margin-top: 0.25rem;
    color: var(--cds-text-secondary);
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0.32px;
}

.timeline .cds--tag {
    vertical-align: middle;
}

/* ---- Notices (Carbon inline notifications) ----------------------------- */

.content-inner .cds--inline-notification,
.session-banner .cds--inline-notification,
.cds--modal-content .cds--inline-notification {
    max-inline-size: none;
    margin: 0;
}

/* ---- Statuses ---------------------------------------------------------
   A status, such as Active or Invite expired, is plain text: no mark,
   box, or colour. */

.status-text {
    color: inherit;
    white-space: nowrap;
}

h1 .status-text {
    color: var(--cds-text-secondary);
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0.16px;
}

/* ---- Avatar ------------------------------------------------------------ */

.avatar {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cds-layer-accent-01);
    color: var(--cds-text-primary);
    font-size: 0.75rem;
    line-height: 1;
    letter-spacing: 0.32px;
}

.avatar-large {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.125rem;
}

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

.profile-header p {
    margin-top: 0.25rem;
    color: var(--cds-text-secondary);
    overflow-wrap: anywhere;
}

.page-breadcrumb + * {
    margin-top: -0.75rem;
}

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

/* Column headers a half step heavier than the rows, not Carbon's semibold. */

.cds--data-table thead th,
.cds--data-table thead th .cds--table-header-label {
    font-weight: 500;
}

.toolbar-count {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0 1rem;
    color: var(--cds-text-secondary);
    white-space: nowrap;
}

/* Filters in the toolbar line up with its 48px search. */

.cds--toolbar-content .cds--form-item {
    flex: 0 0 auto;
}

.cds--toolbar-content .cds--select-input {
    block-size: 3rem;
    min-inline-size: 10rem;
    border-block-end: 0;
}

.cds--data-table .cell-shrink {
    width: 1%;
    white-space: nowrap;
}

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

.cds--data-table tr.is-clickable {
    cursor: pointer;
}

.cds--data-table .cds--tag {
    margin: 0;
}

.cell-primary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--cds-text-primary);
}

.cell-secondary {
    display: block;
    color: var(--cds-text-secondary);
}

.person {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.person-text {
    min-width: 0;
}

.person-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--cds-text-primary);
}

.person-name a {
    color: inherit;
    text-decoration: none;
}

.person-name a:hover {
    text-decoration: underline;
}

.person-email {
    display: block;
    overflow: hidden;
    color: var(--cds-text-secondary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cds--data-table-content > .state {
    background: var(--cds-layer-01);
}

/* ---- Audit events (assets/js/events.js) ---------------------------------- */

/* Filters above a table, each a labelled Carbon select. */

.filter-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1rem;
}

/* A secondary action at the end of a toolbar, such as Export CSV: a small ghost button
   in neutral text rather than Carbon's blue, so it does not compete with the table. */

.cds--toolbar-content > .cds--btn {
    flex-shrink: 0;
    align-self: center;
    margin-inline-end: 0.5rem;
}

.cds--toolbar-content > .cds--btn--ghost,
.cds--toolbar-content > .cds--btn--ghost .cds--btn__icon {
    color: var(--cds-text-secondary);
    fill: var(--cds-icon-secondary);
}

.cds--toolbar-content > .cds--btn--ghost:hover,
.cds--toolbar-content > .cds--btn--ghost:hover .cds--btn__icon {
    color: var(--cds-text-primary);
    fill: var(--cds-icon-primary);
}

.event-table .event-cell {
    width: auto;
}

.event-table .event-user {
    width: 14rem;
}

.event-table .event-time {
    width: 1%;
    white-space: nowrap;
}

.event-name {
    display: block;
    color: var(--cds-text-primary);
}

.event-facts {
    display: block;
    margin-top: 0.125rem;
    color: var(--cds-text-secondary);
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0.32px;
}

.event-fact-label {
    color: var(--cds-text-helper);
}

.event-table td {
    vertical-align: top;
    padding-block: 0.75rem;
}

.timestamp {
    color: var(--cds-text-primary);
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    font-size: 0.75rem;
    line-height: 1.25rem;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.audit-more:empty {
    display: none;
}

/* The role and permission matrix on the Help page. */

.matrix th:not(:first-child),
.matrix td {
    text-align: center;
}

.matrix th:not(:first-child) .cds--table-header-label {
    justify-content: center;
    text-align: center;
}

.matrix tbody th {
    font-weight: 400;
    text-align: left;
}

.matrix .is-yes {
    color: var(--cds-text-primary);
}

.matrix .is-no {
    color: var(--cds-text-disabled);
}

.matrix-mark {
    display: inline-flex;
}

/* Rows become stacked cards on phones. */

@media (max-width: 42rem) {
    .cds--data-table.is-stacking thead {
        display: none;
    }

    .cds--data-table.is-stacking tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        height: auto;
        border-bottom: 1px solid var(--cds-border-subtle-01);
    }

    .cds--data-table.is-stacking tbody tr td {
        height: auto;
        padding: 0;
        border: 0;
    }

    .cds--data-table.is-stacking td:first-child {
        grid-column: 1;
    }

    .cds--data-table.is-stacking td.cell-actions {
        grid-column: 2;
        grid-row: 1;
        width: auto;
    }

    .cds--data-table.is-stacking td:not(:first-child):not(.cell-actions) {
        grid-column: 1 / -1;
        width: auto;
    }

    .event-table.is-stacking td.event-user,
    .event-table.is-stacking td.event-time {
        width: auto;
    }

    .event-table.is-stacking td.event-user .cell-primary,
    .event-table.is-stacking td.event-user .cell-secondary {
        display: inline;
    }

    .event-table.is-stacking td.event-user .cell-secondary::before {
        content: " · ";
    }

    .cds--data-table.is-stacking td[data-label]:not(:empty)::before {
        content: attr(data-label) ": ";
        color: var(--cds-text-secondary);
    }

    .cds--table-toolbar,
    .cds--toolbar-content {
        flex-wrap: wrap;
        block-size: auto;
        height: auto;
    }

    .cds--toolbar-content .cds--search {
        flex-basis: 100%;
    }

    .cds--toolbar-content .cds--form-item {
        flex: 1 1 0;
    }

    .cds--toolbar-content .cds--select-input {
        min-inline-size: 0;
    }

    .toolbar-count {
        flex: 1 1 auto;
        padding: 0.75rem 1rem;
    }
}

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

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1rem;
}

.form-grid .span-2 {
    grid-column: span 2;
}

.cds--modal-content > * + * {
    margin-top: 1.5rem;
}

.dialog-intro {
    color: var(--cds-text-secondary);
}

.choice-description {
    display: block;
    margin-top: 0.125rem;
    color: var(--cds-text-secondary);
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0.32px;
}

.cds--radio-button-group--vertical .cds--radio-button-wrapper:not(:last-of-type) {
    margin-bottom: 1rem;
}

.cds--radio-button__label {
    align-items: flex-start;
}

.cds--radio-button-group > .cds--form__helper-text {
    margin-top: 1rem;
}

/* A text box and the button beside it. */

.input-row {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.input-row > :first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.input-row > .cds--btn {
    flex-shrink: 0;
}

.input-row .cds--form-item {
    flex: 0 0 auto;
}

.button-row {
    display: flex;
    gap: 1px;
    flex-wrap: wrap;
}

.toggle-field .cds--form__helper-text {
    margin-top: 0.5rem;
    max-width: 32rem;
}

.toggle-field .cds--toggle__label-text {
    color: var(--cds-text-primary);
    font-size: 0.875rem;
    line-height: 1.25rem;
    letter-spacing: 0.16px;
    margin-block-end: 0.5rem;
}

.code {
    padding: 0 0.25rem;
    background: var(--cds-layer-02);
    color: var(--cds-text-primary);
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    font-size: 0.75rem;
    overflow-wrap: anywhere;
}

/* ---- Modal --------------------------------------------------------------
   Carbon's modal drawn inside a native <dialog>: the browser handles focus
   and Escape, and Carbon's overlay replaces the dialog's own backdrop. */

dialog.cds--modal {
    width: 100vw;
    max-width: none;
    height: 100vh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--cds-text-primary);
    overflow: hidden;
}

dialog.cds--modal:not([open]) {
    display: none;
}

dialog.cds--modal::backdrop {
    background: transparent;
}

.dialog-error {
    max-inline-size: none;
}

/* ---- Menu ---------------------------------------------------------------- */

.menu-header {
    padding: 0.5rem 1rem 0.75rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--cds-border-subtle-01);
}

.account-identity strong {
    display: block;
    color: var(--cds-text-primary);
}

.account-identity span {
    display: block;
    color: var(--cds-text-secondary);
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0.32px;
    overflow-wrap: anywhere;
}

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

.toast-region {
    position: fixed;
    top: calc(var(--console-header-height) + 0.5rem);
    right: 1rem;
    z-index: 9100;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.toast-region .cds--toast-notification {
    margin: 0;
}

/* ---- Loading and empty ------------------------------------------------------ */

.skeleton-block {
    width: 100%;
    height: 6rem;
}

.state {
    padding: 3rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.state h3 {
    color: var(--cds-text-primary);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.75rem;
}

.state p {
    max-width: 30rem;
    color: var(--cds-text-secondary);
}

.state .cds--btn {
    margin-top: 1rem;
}

/* ---- Narrow screens ------------------------------------------------------- */

@media (max-width: 66rem) {
    .grid-even {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 42rem) {
    .card {
        padding: 1rem;
    }

    .form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .form-grid .span-2 {
        grid-column: auto;
    }

    .definition-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.25rem;
    }

    .definition-list dd {
        margin-bottom: 0.75rem;
    }

    .attention-list li {
        flex-direction: column;
        align-items: flex-start;
    }

    .toast-region {
        left: 1rem;
    }
}