/* =========================================================
   Certify Management Hub theme

   Follows the Certify dashboard design system: one type family,
   hairline borders instead of shadows, tight radii, no gradients,
   white surfaces on a slightly sunken page, and colour reserved for
   status and the primary action. Colours come from the MudBlazor
   palette in AppThemeDefinition.cs, so light and dark mode both
   follow from it.
   ========================================================= */

@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --hub-radius-sm: 6px;
    --hub-radius: 8px;
    --hub-shadow-overlay: 0 8px 24px -8px rgba(15, 23, 42, .22), 0 2px 6px -2px rgba(15, 23, 42, .12);
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#loadingscreen {
    width: 100%;
    height: 100vh;
    color: whitesmoke;
    font-family: Inter, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-weight: 100;
    padding-top: 24vh;
    padding-left: 24vw;
    margin-top: 0;
    font-size: 4vh;
    background: #252525;
    text-shadow: 3px 3px 5px #00000059;
}

#loadingprogress {
    color: #808080;
    margin-top: 2vh;
    font-size: 4vh;
}

#loadinginfo {
    font-size: 2vh;
    margin-left: 40vw;
    padding-top: 4vh;
}

/* https://loading.io/css/ */
.lds-dual-ring {
    display: inline-block;
    width: 4vh;
    height: 4vh;
}

    .lds-dual-ring:after {
        content: " ";
        display: block;
        width: 4vh;
        height: 4vh;
        margin: 0;
        border-radius: 50%;
        border: 0.3vh solid #fff;
        border-color: #27ee58 transparent #fff transparent;
        animation: lds-dual-ring 1.2s linear infinite;
    }

@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ---------------------------------------------------------------------------
   App shell
   --------------------------------------------------------------------------- */

.mud-appbar.app-bar {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.app-brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    margin-inline-start: 0.25rem;
    font-size: 0.9375rem;
    white-space: nowrap;
    color: var(--mud-palette-appbar-text);
}

.app-brand-name {
    font-weight: 600;
    letter-spacing: -0.011em;
}

.app-brand-sep {
    margin: 0 0.6rem;
    color: var(--mud-palette-lines-inputs);
    font-weight: 300;
}

.app-brand-app {
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.app-bar-status {
    display: inline-flex;
    align-items: center;
    padding: 0 0.625rem;
}

    .app-bar-status i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
    }

.app-bar-status-live {
    background: var(--mud-palette-success);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-success) 22%, transparent);
}

.app-bar-status-off {
    background: var(--mud-palette-text-disabled);
}

/* The view scope picker reads as a quiet control while showing everything, and as a tinted pill naming the tags
   while the view is narrowed, so it is always clear that pages are filtered. */
.view-scope {
    min-width: 0;
}

.view-scope-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 32px;
    max-width: min(46vw, 440px);
    padding: 0 0.4rem 0 0.6rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--hub-radius-sm);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}

    .view-scope-button:hover {
        background: var(--mud-palette-background);
        color: var(--mud-palette-text-primary);
    }

    .view-scope-button .mud-icon-root {
        flex: 0 0 auto;
        font-size: 1.05rem;
    }

.view-scope-active {
    color: var(--mud-palette-text-primary);
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mud-palette-lines-default));
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--mud-palette-surface));
}

    .view-scope-active > .mud-icon-root:first-child {
        color: var(--mud-palette-primary);
    }

.view-scope-value {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .view-scope-value + .view-scope-value::before {
        content: "\00b7";
        color: var(--mud-palette-text-secondary);
    }

    .view-scope-value i {
        flex: 0 0 auto;
        width: 8px;
        height: 8px;
        border-radius: 2px;
    }

.view-scope-clear {
    margin-inline-start: 0.125rem;
}

#main-nav-drawer {
    border-inline-end: 1px solid var(--mud-palette-lines-default);
}

.app-nav {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 0.5rem 0.5rem 0.75rem;
}

    .app-nav .mud-nav-link {
        padding: 0.375rem 0.5rem;
        font-size: 0.875rem;
        line-height: 1.5;
        color: var(--mud-palette-drawer-text);
    }

    .app-nav .mud-nav-link .mud-nav-link-icon {
        font-size: 1.125rem;
        margin-top: 0.125rem;
    }

    .app-nav .mud-nav-link .mud-nav-link-text {
        margin-inline-start: 0.625rem;
    }

    .app-nav .mud-nav-link:hover:not(.mud-nav-link-disabled) {
        background-color: var(--mud-palette-background);
        color: var(--mud-palette-text-primary);
    }

    .app-nav .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) {
        background-color: var(--mud-palette-background);
        color: var(--mud-palette-text-primary);
        font-weight: 600 !important;
    }

    /* group headers read as section labels rather than as links */
    .app-nav .mud-nav-group > .mud-nav-link {
        margin-top: 0.75rem;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
        font-size: 0.6875rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--mud-palette-text-secondary);
    }

        .app-nav .mud-nav-group > .mud-nav-link > .mud-nav-link-text {
            margin-inline-start: 0;
            font-weight: 600;
        }

        .app-nav .mud-nav-group > .mud-nav-link .mud-nav-link-expand-icon {
            font-size: 1rem;
            opacity: 0.7;
        }

    .app-nav .mud-nav-group * .mud-navmenu .mud-nav-item .mud-nav-link {
        padding-inline-start: 0.5rem;
    }

.app-nav-foot {
    margin-top: auto;
    padding: 1rem 0.5rem 0;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.app-page {
    padding-top: 1.25rem;
    padding-bottom: 3rem;
}

/* ---------------------------------------------------------------------------
   Page structure, shared by every page
   --------------------------------------------------------------------------- */

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

    .page-header h1 {
        margin: 0;
    }

.page-sub {
    margin: 0.2rem 0 0;
    max-width: 78ch;
    color: var(--mud-palette-text-secondary);
}

.page-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* a titled white surface, the basic block of every page */
.panel {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--hub-radius);
    padding: 1rem 1.25rem 1.125rem;
}

.panel-flush {
    padding: 0;
    overflow: hidden;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    flex-wrap: wrap;
    min-height: 1.75rem;
    margin-bottom: 0.75rem;
}

.panel-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.006em;
    color: var(--mud-palette-text-primary);
}

.panel-meta {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.panel-attention {
    border-color: color-mix(in srgb, var(--mud-palette-warning) 35%, var(--mud-palette-lines-default));
}

/* a panel title which shows and hides the panel's content */
.panel-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0 -0.25rem;
    padding: 0.125rem 0.25rem;
    border: none;
    border-radius: var(--hub-radius-sm);
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

    .panel-toggle:hover {
        background: var(--mud-palette-background);
    }

    .panel-toggle .mud-icon-root {
        color: var(--mud-palette-text-secondary);
    }

.panel-collapsed .panel-head {
    margin-bottom: 0;
}

.attention-list {
    list-style: none;
    margin: 0 -1.25rem;
    padding: 0;
}

    .attention-list > li {
        padding: 0.75rem 1.25rem;
        border-top: 1px solid var(--mud-palette-lines-default);
    }

    .attention-list .attention-icon {
        margin-top: 0.15rem;
    }

    .attention-list .attention-title {
        font-weight: 500;
    }

.count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
}

.count-badge-error {
    color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 8%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-error) 25%, transparent);
}

.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mud-palette-success);
}

    .live-badge::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
    }

/* A row of figures sharing hairline dividers. A figure that filters something is a button. */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--mud-palette-lines-default);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--hub-radius);
    overflow: hidden;
}

.stat {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.875rem 1rem 0.9375rem;
    background: var(--mud-palette-surface);
    border: none;
    font: inherit;
    color: inherit;
    text-align: start;
}

button.stat {
    cursor: pointer;
    transition: background-color .12s ease;
}

    button.stat:hover {
        background: color-mix(in srgb, var(--mud-palette-background) 60%, var(--mud-palette-surface));
    }

    button.stat:focus-visible {
        outline-offset: -3px;
        box-shadow: none;
    }

.stat-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

    .stat-head i {
        width: 8px;
        height: 8px;
        border-radius: 2px;
        background: var(--stat-color, var(--mud-palette-lines-inputs));
    }

.stat-value {
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

.stat-foot {
    display: block;
    min-height: 1.1rem;
    margin-top: 0.2rem;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.stat-success { --stat-color: var(--mud-palette-success); }
.stat-warning { --stat-color: var(--mud-palette-warning); }
.stat-error { --stat-color: var(--mud-palette-error); }
.stat-paused { --stat-color: var(--mud-palette-tertiary); }

/* a zero count is not a problem, so it stays quiet */
.stat-zero .stat-value {
    color: var(--mud-palette-text-disabled);
}

/* each health status's share of all certificates, as one segmented bar */
.health-bar {
    display: flex;
    gap: 2px;
    height: 6px;
    margin-top: 0.75rem;
    border-radius: 3px;
    overflow: hidden;
    background: var(--mud-palette-background);
}

    .health-bar > span {
        display: block;
        height: 100%;
    }

/* ---------------------------------------------------------------------------
   Instance picker: filters above a list that scrolls within the picker's height
   --------------------------------------------------------------------------- */

.instance-picker {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
}

.instance-picker-filters {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem 0.5rem;
}

    .instance-picker-filters .mud-input-control {
        margin: 0;
    }

.instance-picker-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

    .instance-picker-chips .mud-chip {
        margin: 0;
    }

.instance-picker-count {
    padding: 0.375rem 1rem;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.instance-picker-list {
    flex: 1 1 auto;
    min-height: 8rem;
    overflow-y: auto;
    padding: 0.25rem 0.5rem;
}

.instance-picker-empty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.5rem;
    color: var(--mud-palette-text-secondary);
}

.instance-picker-row {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.625rem;
    width: 100%;
    min-height: 52px;
    padding: 0.5rem;
    border: none;
    border-radius: var(--hub-radius-sm);
    background: none;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
}

    .instance-picker-row:hover {
        background: var(--mud-palette-background);
    }

    .instance-picker-row .mud-icon-root {
        flex: 0 0 auto;
        margin-top: 0.125rem;
    }

.instance-picker-selected {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

    .instance-picker-selected .instance-picker-title {
        font-weight: 600;
    }

.instance-picker-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.instance-picker-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.instance-picker-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5rem;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

    .instance-picker-meta > span:not(.sr-only) + span::before {
        content: "\00b7";
        margin-inline-end: 0.5rem;
        color: var(--mud-palette-text-disabled);
    }

/* in the drawer, a fixed header with the picker filling the remaining height */
.instance-drawer .mud-drawer-content {
    height: 100%;
}

.instance-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    padding: 0.75rem 0.75rem 0.5rem 1rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.instance-drawer-picker {
    flex: 1 1 auto;
}

/* the button and chip which open the drawer */
.instance-chooser {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

    .instance-chooser .mud-chip {
        margin: 0;
    }

/* in place of the button when the instance cannot be changed, lined up with the button's icon and text */
.instance-chooser-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.stat-value-of {
    margin-inline-start: 0.15rem;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--mud-palette-text-secondary);
}

/* the certificates summary: a column of rows, each row one or two panels */
.summary {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

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

.summary-row-wide {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

@media (max-width: 960px) {
    .summary-row, .summary-row-wide {
        grid-template-columns: minmax(0, 1fr);
    }
}

.health-ok { background: var(--mud-palette-success); }
.health-warning { background: var(--mud-palette-warning); }
.health-error { background: var(--mud-palette-error); }
.health-paused { background: var(--mud-palette-tertiary); }
.health-none { background: var(--mud-palette-lines-inputs); }

/* certificate counts by CA or key type: a title and count over a bar scaled to the largest count */
.group-counts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.group-count {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.25rem 1rem;
    width: 100%;
    margin: 0;
    padding: 0.4rem 0.5rem;
    background: none;
    border: none;
    border-radius: 4px;
    font: inherit;
    font-size: 0.8125rem;
    color: inherit;
    text-align: start;
}

button.group-count {
    cursor: pointer;
}

    button.group-count:hover {
        background: var(--mud-palette-background);
    }

.group-count-none {
    color: var(--mud-palette-text-secondary);
}

.group-count-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-count-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.group-count-bar {
    grid-column: 1 / -1;
    height: 4px;
    border-radius: 2px;
    background: var(--mud-palette-background);
    overflow: hidden;
}

    .group-count-bar > span {
        display: block;
        height: 100%;
        background: var(--mud-palette-primary);
    }

.group-count-none .group-count-bar > span {
    background: var(--mud-palette-lines-inputs);
}

/* ---------------------------------------------------------------------------
   MudBlazor component adjustments
   --------------------------------------------------------------------------- */

.tab-left {
    justify-content: normal;
    padding-left: 2em;
}

/* fix clipped hovering input labels*/
.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    line-height: inherit;
}

h1.mud-typography-h1, h2.mud-typography-h2, h3.mud-typography-h3, h4.mud-typography-h4, h5.mud-typography-h5, h6.mud-typography-h6 {
    margin-bottom: 0.6rem;
}

.mud-button, .mud-tab, .mud-chip {
    font-weight: 500;
}

.mud-button-filled, .mud-button-filled:hover {
    box-shadow: none;
}

.mud-button-outlined.mud-button-outlined-default {
    border-color: var(--mud-palette-lines-inputs);
}

/* outlined surfaces are the panels of the design, with the slightly larger radius */
.mud-paper-outlined, .mud-table-outlined {
    border-radius: var(--hub-radius);
    border-color: var(--mud-palette-lines-default);
}

/* things that float keep a soft shadow, everything else is flat */
.mud-popover, .mud-dialog {
    box-shadow: var(--hub-shadow-overlay);
}

.mud-popover {
    border: 1px solid var(--mud-palette-lines-default);
}

.mud-table-head .mud-table-cell {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.mud-breadcrumbs {
    padding: 0 0 0.75rem;
    font-size: 0.8125rem;
}

    .mud-breadcrumbs .mud-breadcrumb-item, .mud-breadcrumbs .mud-breadcrumb-item > a {
        color: var(--mud-palette-text-secondary);
    }

    .mud-breadcrumbs .mud-breadcrumb-item .mud-icon-root {
        font-size: 1rem;
    }

    .mud-breadcrumbs .mud-breadcrumb-separator {
        color: var(--mud-palette-lines-inputs);
    }

.mud-alert {
    border-radius: var(--hub-radius);
}

pre.code {
    /*exception and log results*/
    max-width: 70vw;
    overflow: overlay;
    font-size: smaller;
    padding: 1em;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--hub-radius-sm);
}

.disable-select {
    user-select: none;
}

.constrained-view {
    overflow-y: auto; 
    max-height: 50vh;
}

.constrained-table-container {
    max-width: 100%;
    overflow-x: auto;
}

.constrained-table-container .mud-table-root {
    min-width: var(--constrained-table-min-width, 1100px);
}

.constrained-table .sticky-actions-column {
    position: sticky;
    right: 0;
    z-index: 2;
    width: 1%;
    white-space: nowrap;
    background: var(--mud-palette-surface);
}

.constrained-table thead .sticky-actions-column {
    z-index: 3;
}

/* ---------------------------------------------------------------------------
   Accessibility
   --------------------------------------------------------------------------- */

/* MudBlazor ships `a:focus-visible{outline:none}` and substitutes a background tint of
   --mud-palette-action-default-hover, which measures ~1.14:1 against a white surface and is
   effectively invisible. Restore a real focus ring across every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.mud-nav-link:focus-visible,
.mud-button-root:focus-visible,
.mud-table-sort-label:focus-visible,
.mud-tab:focus-visible,
.mud-chip:focus-visible,
.mud-breadcrumb-item > a:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    /* keeps the ring visible where it would otherwise sit on a primary-coloured surface */
    box-shadow: 0 0 0 4px var(--mud-palette-background);
}

@media (forced-colors: active) {
    a:focus-visible,
    button:focus-visible,
    [tabindex]:focus-visible {
        outline: 2px solid Highlight;
    }
}

/* Skip link: visually hidden until focused, then pinned to the top-left above the app bar. */
.skip-to-content {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 0.75rem 1.25rem;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 2px solid var(--mud-palette-primary);
    border-radius: 0 0 4px 0;
    text-decoration: none;
}

.skip-to-content:focus {
    left: 0;
}

/* Row status indicator: pairs the status text colour with a shape, so health is not colour-only. */
.status-indicator {
    display: inline-flex;
    align-items: center;
    vertical-align: text-bottom;
    margin-inline-end: 4px;
}

.status-indicator .mud-icon-root {
    font-size: 1rem !important;
    margin-right: 0 !important;
    margin-inline-end: 0 !important;
}

/* Screen-reader-only text, for labels that should not be shown visually. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Summary tiles filter the certificate list, so they are buttons; this keeps them looking like the plain
   linked cards they replaced. */
.summary-tile {
    display: block;
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
    cursor: pointer;
}

.summary-tile:hover .mud-paper {
    border-color: var(--mud-palette-primary);
}

/* Row/card titles that open an item. MudTable rows and MudPaper cards are plain click targets with no keyboard
   equivalent, so the title is rendered as a real button while still reading as the text it replaced. */
.row-title-button {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: start;
    cursor: pointer;
}

.row-title-button:hover {
    text-decoration: underline;
}

.row-title-button:hover .status-indicator {
    text-decoration: none;
}

/* MudSwitch renders as a <label> around both the toggle and its text, which a stack or flex parent then
   stretches across the full width of the row, so a click anywhere on that row flips the switch. Where a
   switch reconfigures the form beneath it that is far too easy to hit by accident, so keep the pointer
   hit area on the toggle itself. Keyboard and screen reader behaviour is unchanged: the label still names
   the input and space still toggles it. */
.switch-toggle-only {
    pointer-events: none;
}

.switch-toggle-only .mud-switch-span {
    pointer-events: auto;
}

/* Activity and request progress */
.activity-feed {
    list-style: none;
    margin: 0;
    padding: 0;
}

.activity-feed > li {
    display: grid;
    grid-template-columns: 4.5rem 1.5rem 1fr auto;
    gap: 0.5rem;
    align-items: start;
    padding: 0.4rem 0.25rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.activity-feed > li:first-child {
    border-top: none;
}

.activity-feed .activity-time {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.activity-feed .activity-detail {
    display: block;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.activity-feed .activity-group {
    margin-top: 0.4rem;
    padding: 0.4rem 0.5rem;
    background: var(--mud-palette-background-gray);
    border-radius: 4px;
}

.activity-fresh {
    animation: activity-fresh 2.5s ease-out;
}

@keyframes activity-fresh {
    from { background: var(--mud-palette-success-lighten); }
    to { background: transparent; }
}

@media (max-width: 600px) {
    .activity-feed > li {
        grid-template-columns: 3.5rem 1.25rem 1fr;
    }

    .activity-feed > li > .activity-instance {
        display: none;
    }
}

.stage-stepper {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 4px;
}

.stage-stepper > li {
    border-top: 3px solid var(--mud-palette-lines-default);
    padding-top: 4px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-disabled);
    min-width: 0;
}

.stage-stepper .stage-name {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stage-stepper .stage-time {
    display: block;
    font-variant-numeric: tabular-nums;
}

.stage-stepper > li.stage-done {
    border-color: var(--mud-palette-success);
    color: var(--mud-palette-text-secondary);
}

.stage-stepper > li.stage-done .stage-name {
    color: var(--mud-palette-text-primary);
}

.stage-stepper > li.stage-active {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-text-primary);
    font-weight: 500;
}

.stage-stepper > li.stage-failed {
    border-color: var(--mud-palette-error);
    color: var(--mud-palette-error);
}

.stage-stepper > li.stage-paused {
    border-color: var(--mud-palette-tertiary);
    color: var(--mud-palette-tertiary);
}

.stage-stepper > li.stage-warning {
    border-color: var(--mud-palette-warning);
    color: var(--mud-palette-warning);
}

@media (max-width: 760px) {
    .stage-stepper {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        row-gap: 8px;
    }
}

.run-log {
    list-style: none;
    margin: 0.5rem 0 0 0;
    padding: 0;
    font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    max-height: 18rem;
    overflow-y: auto;
}

.run-log > li {
    display: grid;
    grid-template-columns: 5rem 1fr;
    gap: 0.5rem;
}

.run-log > li.run-log-error {
    color: var(--mud-palette-error);
}

.dns-record {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.25rem 0.75rem;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: var(--mud-palette-background-gray);
    border-radius: 4px;
}

.dns-record .dns-value {
    font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.connection-strip {
    display: flex;
    height: 10px;
    border-radius: 2px;
    overflow: hidden;
    min-width: 80px;
    background: var(--mud-palette-background-gray);
}

.connection-strip > span {
    display: block;
    height: 100%;
}

.connection-connected { background: var(--mud-palette-success); }
.connection-away { background: var(--mud-palette-warning); }
.connection-disconnected { background: var(--mud-palette-error); }
.connection-unknown { background: var(--mud-palette-lines-default); }

.activity-chart > svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
    max-width: 640px;
}

.activity-chart .chart-grid {
    stroke: var(--mud-palette-lines-default);
    stroke-width: 1;
}

.activity-chart .chart-label {
    fill: var(--mud-palette-text-secondary);
    font-size: 10px;
}

.activity-chart .chart-bar-planned { fill: var(--mud-palette-primary); }
.activity-chart .chart-bar-window { fill: var(--mud-palette-info); }
.activity-chart .chart-bar-success { fill: var(--mud-palette-success); }
.activity-chart .chart-bar-error { fill: var(--mud-palette-error); }
.activity-chart .chart-bar-paused { fill: var(--mud-palette-tertiary); }
.activity-chart .chart-bar-deferred { fill: var(--mud-palette-text-disabled); }
.activity-chart .chart-risk { fill: var(--mud-palette-error); }

.activity-chart .chart-day {
    cursor: pointer;
}

.activity-chart .chart-day:focus-visible rect.chart-hit {
    outline: none;
    stroke: var(--mud-palette-primary);
    stroke-width: 2;
}

.activity-chart rect.chart-hit {
    fill: transparent;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.chart-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.chart-legend i {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
    .activity-fresh {
        animation: none;
    }
}