.nimbus-support-action {
    position: relative;
    min-width: 0;
}

/* Under the field, over whatever follows it, as the dropdowns' lists are. */
.nimbus-support-action__suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 260px;
    overflow-y: auto;
    padding: var(--spacing-1);
    background-color: var(--bg-surface-primary);
    border: 1px solid var(--border-40);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

.nimbus-support-action__suggestions[hidden] {
    display: none;
}
/* A value, and a person's address and job title under it where the value is a person. */
.nimbus-support-change-value {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.nimbus-support-change-value__details {
    font-size: var(--font-size-xs);
    color: var(--text-paragraph);
}

/* One line each, cut with an ellipsis, as the table shows them; the whole value is in the title. */
.nimbus-support-change-value__main--clip,
.nimbus-support-change-value__details--clip {
    display: block;
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Whole, as the drawer shows them: wrapped at any character if it must, line breaks kept. */
.nimbus-support-change-value__main:not(.nimbus-support-change-value__main--clip),
.nimbus-support-change-value__details:not(.nimbus-support-change-value__details--clip) {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
/* The design system's info items (.card__info-item and its label and value), one per field, stacked
   full width down the drawer. */
.nimbus-support-audit-entry {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    margin: 0;
}

.nimbus-support-audit-entry__field {
    margin: 0;
}

/* The one change from the design system's item: the value is shown whole. .card__info-value keeps
   it to one line with an ellipsis; here it wraps, at any character if it must, so a long unbroken
   value (an email, a storage path) stays inside the drawer, and a note keeps its line breaks.
   Scoped through the list, so it outweighs .card__info-value whichever stylesheet loads last. */
.nimbus-support-audit-entry .nimbus-support-audit-entry__value {
    display: flex;
    flex-direction: column;
    margin: 0;
    white-space: pre-wrap;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

/* What the value is, or the same time in UTC: quieter, under it. */
.nimbus-support-audit-entry__aside {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    color: var(--text-paragraph);
}

.nimbus-support-audit-entry__link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.nimbus-support-audit-entry__heading {
    margin: var(--spacing-5) 0 var(--spacing-2);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    color: var(--text-title);
}

.nimbus-support-audit-entry__changes {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A field's before and after, side by side where the drawer is wide enough, stacked where not. */
.nimbus-support-audit-entry__sides {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--spacing-3);
    margin: 0;
}

.nimbus-support-audit-entry__sides dt {
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    color: var(--text-paragraph);
}

.nimbus-support-audit-entry__sides dd,
.nimbus-support-audit-entry__set {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--text-title);
}
/* Table supplies the grid, surfaces and cell padding; these are the extras around it, as
   nimbus-overview's organisations table has them. */

.nimbus-support-audit-table__scroll {
    background-color: var(--bg-surface-primary);
    border: 1px solid var(--border-20);
    border-radius: var(--radius-md);
    /* Six columns of real text: below a laptop's width the table scrolls in its own box
       rather than pushing the page sideways. */
    overflow-x: auto;
    transition: opacity var(--transition-fast);
}

.nimbus-support-audit-table__scroll--loading {
    opacity: 0.6;
}

.nimbus-support-audit-table .table__header-cell {
    border-bottom: 1px solid var(--border-40);
    white-space: nowrap;
}

.nimbus-support-audit-table .table__header-cell:first-child {
    border-top-left-radius: var(--radius-md);
}

.nimbus-support-audit-table .table__header-cell:last-child {
    border-top-right-radius: var(--radius-md);
}

.nimbus-support-audit-table .table__body .table__row:not(:last-child) > * {
    border-bottom: 1px solid var(--border-20);
}

/* A change's fields, opened under it: no rule between them and their change, and quieter. */
.nimbus-support-audit-table
    .table__body
    .nimbus-support-audit-table__row:has(+ .nimbus-support-audit-table__row--detail)
    > *,
.nimbus-support-audit-table
    .table__body
    .nimbus-support-audit-table__row--detail:has(+ .nimbus-support-audit-table__row--detail)
    > * {
    border-bottom-color: transparent;
}

.nimbus-support-audit-table__row--detail > * {
    padding-top: var(--spacing-1);
    padding-bottom: var(--spacing-1);
    font-size: var(--font-size-xs);
    color: var(--text-paragraph);
}

/* Alternate changes tinted, as the design shows, so a long run of them can be followed across.
   Tinted by change rather than by row, so a change and the fields opened under it read as one. */
.nimbus-support-audit-table .table__body .nimbus-support-audit-table__row--shaded > * {
    background-color: var(--bg-surface-secondary);
}

/* The whole row opens the change in full, so it has to look like it does. Painted on the cells, as
   the tint above is, so the hover shows on the tinted rows too. */
.nimbus-support-audit-table__row {
    cursor: pointer;
}

.nimbus-support-audit-table__row > * {
    transition: background-color var(--transition-fast);
}

.nimbus-support-audit-table .table__body .nimbus-support-audit-table__row:hover > * {
    background-color: var(--bg-cs-bg);
}

/* Inset, because an offset ring would sit in the gap between rows. */
.nimbus-support-audit-table__row:focus-visible {
    outline: 2px solid var(--border-brand);
    outline-offset: -2px;
}

.nimbus-support-audit-table__when {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.nimbus-support-audit-table__time {
    color: var(--text-paragraph);
}

.nimbus-support-audit-table__item {
    font-weight: var(--font-weight-regular);
    text-align: left;
}

/* One line, cut with an ellipsis; the whole value is in the title. */
.nimbus-support-audit-table__clip {
    display: block;
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nimbus-support-audit-table__detail {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-paragraph);
}

.nimbus-support-audit-table__description {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2);
}

/* The change's fields, on demand: small, and quiet until pointed at. */
.nimbus-support-audit-table__expand {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: 2px var(--spacing-2);
    border: 1px solid var(--border-40);
    border-radius: var(--radius-sm);
    background: var(--bg-surface-primary);
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    color: var(--text-paragraph);
    cursor: pointer;
}

.nimbus-support-audit-table__expand:hover {
    color: var(--text-title);
    border-color: var(--border-60);
}

.nimbus-support-audit-table__expand:focus-visible {
    outline: 2px solid var(--border-brand);
    outline-offset: 1px;
}

.nimbus-support-audit-table__chevron {
    transition: transform var(--transition-fast);
}

.nimbus-support-audit-table__chevron--open {
    transform: rotate(180deg);
}

/* Links out to the Nimbus overview: the text's own colour, underlined, so a row does not turn blue. */
.nimbus-support-audit-table__link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--border-60);
    text-underline-offset: 2px;
}

.nimbus-support-audit-table__link:hover {
    text-decoration-color: currentColor;
}
.nimbus-support-date .input {
    position: relative;
}

.nimbus-support-date__text {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.nimbus-support-date__calendar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--icon-secondary);
    cursor: pointer;
}

.nimbus-support-date__calendar:hover {
    color: var(--text-title);
}

.nimbus-support-date__calendar:focus-visible {
    outline: 2px solid var(--border-brand);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* The browser's calendar opens from here, so it has to be in the layout, under the button, but
   nobody should see or reach it. */
.nimbus-support-date__picker {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}
.nimbus-support-audit__form {
    /* Laid out by its own width, not the window's: the shell's sidebar takes a share of the
       window that changes as it collapses. */
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

/* Every filter and Search on one grid, so the fields line up and Search sits level with them at the
   end. Where it sits depends on the width alone, never on what is filled in. Two rows where there is
   room: which organisation and when, then who, what and how, Search at the end of the second. */
.nimbus-support-audit__filters {
    display: grid;
    gap: var(--spacing-4);
    align-items: start;
    grid-template-columns:
        minmax(0, 1.3fr) minmax(10rem, 11rem) minmax(8.5rem, 9.5rem) minmax(8.5rem, 9.5rem)
        minmax(0, 1fr);
    grid-template-areas:
        "organisation period start end site"
        "user type action action search";
}

.nimbus-support-audit__filter--organisation {
    grid-area: organisation;
}
.nimbus-support-audit__filter--period {
    grid-area: period;
}
.nimbus-support-audit__filter--start {
    grid-area: start;
}
.nimbus-support-audit__filter--end {
    grid-area: end;
}
.nimbus-support-audit__filter--site {
    grid-area: site;
}
.nimbus-support-audit__filter--user {
    grid-area: user;
}
.nimbus-support-audit__filter--type {
    grid-area: type;
}
.nimbus-support-audit__filter--action {
    grid-area: action;
}

.nimbus-support-audit__filter {
    min-width: 0;
}

/* Level with the fields rather than their labels: the buttons have none, so they drop by a label's
   height and the gap under it. */
.nimbus-support-audit__search {
    grid-area: search;
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-2);
    padding-top: calc(var(--font-size-xs) * 1.5 + var(--spacing-1));
}

/* Clear filters with nothing to clear: out of sight, and out of reach — visibility takes it out of
   the tab order and the accessibility tree — but still holding its room, so Search stays put. */
.nimbus-support-audit__clear--hidden {
    visibility: hidden;
}

/* The export, at the far end above the table. */
.nimbus-support-audit__results-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--spacing-3);
}

.nimbus-support-audit__results-toolbar .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
}

/* The export's word on what it made, between the toolbar and the table. */
.nimbus-support-audit__results .inline-message {
    margin-bottom: var(--spacing-3);
}

/* Pairs where the two rows would squeeze the fields, Search the width of the form at the foot. */
@container (max-width: 60rem) {
    .nimbus-support-audit__filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "organisation period"
            "start end"
            "site user"
            "type action"
            "search search";
    }
}

/* One column on a phone. */
@container (max-width: 36rem) {
    .nimbus-support-audit__filters {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "organisation" "period" "start" "end" "site" "user" "type" "action" "search";
    }

    .nimbus-support-audit__search {
        padding-top: 0;
    }

    .nimbus-support-audit__search .btn {
        flex: 1;
    }
}

.nimbus-support-audit__status {
    color: var(--text-paragraph);
    font-size: var(--font-size-sm);
}