.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.mud-warning-lighten-5 {
    background-color: rgba(255, 152, 0, 0.1);
}

/* Prevent background scroll when a dialog is open */
body:has(.mud-overlay) {
    overflow: hidden;
}

/* ============================================================================
   SURU dashboard design system (2026-07). Inter typeface + navy/cyan tokens and
   soft, rounded surfaces. Applied globally so every page adopts the look; the
   MudTheme in MainLayout carries the palette + typography, while these rules add
   the finishing polish (radii, shadows, backgrounds) the theme can't express.
   Selectors target MudBlazor's stable public classes — a miss is inert, never
   breaking, so this degrades gracefully across MudBlazor point releases.
   ============================================================================ */
:root {
    --suru-ink: #192A4C;
    --suru-ink-muted: #5C7091;
    --suru-bg: #F4F6FA;
    --suru-border: #E6EAF2;
    --suru-card-radius: 14px;
    --suru-card-shadow: 0 1px 2px rgba(25, 42, 76, 0.05), 0 1px 3px rgba(25, 42, 76, 0.04);
}

html, body {
    background-color: var(--suru-bg);
    font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--suru-ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* The page canvas sits on the tinted background; the navy app bar is the anchor. */
.mud-main-content {
    background-color: var(--suru-bg);
}

/* Cards: white, soft-rounded, whisper shadow + hairline border — the mockup's signature surface. */
.mud-paper.mud-paper-outlined {
    border: 1px solid var(--suru-border);
    border-radius: var(--suru-card-radius);
    box-shadow: var(--suru-card-shadow);
}

/* App bar: flat navy with a hairline base instead of a heavy drop shadow. */
.mud-appbar {
    box-shadow: 0 1px 0 rgba(25, 42, 76, 0.12);
}

/* Buttons: generously rounded, sentence-case, semibold — filled = navy, text/outlined = ink. */
.mud-button-root {
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0;
    border-radius: 10px;
}

/* Outlined input fields adopt the 10px field radius from the mockup. */
.mud-input.mud-input-outlined > .mud-input-outlined-border {
    border-radius: 10px;
}

/* Chips read as pills with a touch more weight (alarm/status pills in the cards). */
.mud-chip {
    font-weight: 600;
}

/* Tabs: quiet inactive labels, bold active — sentence case to match the design. */
.mud-tabs .mud-tab {
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0;
}

/* Left priority strip on a high-risk card: a full-height pale panel carrying the alarm volume,
   tinted inline from the row's severity hex (Critical / Leak / Pipe-freeze) — or the alarm-volume
   colour when a row carries no risk classification. It sits flush inside the card's rounded, clipped
   frame, so it takes no radius of its own and stretches to the full row height. */
.suru-count-strip {
    flex: 0 0 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 12px 8px;
    text-align: center;
    align-self: stretch;
}
.suru-count-strip .suru-count {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
}
.suru-count-strip .suru-count-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    opacity: 0.85;
}

/* Pill used for alarm-summary + status badges on the cards (fully rounded, tinted inline). */
.suru-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: normal;
}

/* Alarm-breakdown "card-in-card": the light, rounded, bordered panel that wraps the per-alarm-type
   detection table on each worklist card, matching the Matilda mockup. The wrapper clips its children
   so the tinted header follows the rounded corners; the header row is a slightly deeper tint and
   body rows are divided by hairline separators. */
.suru-breakdown {
    border: 1px solid #EEF1F7;
    border-radius: 10px;
    overflow: hidden;
    background: #FBFCFE;
}
.suru-breakdown table {
    width: 100%;
    /* PS-1871: fixed layout + per-table <colgroup> widths so the Count/First/Last columns land at the
       same x on every card (auto layout let each row's alarm-name width shift the numeric columns). */
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.72rem;
    line-height: 1.25;
}
.suru-breakdown thead th {
    background: #F4F7FB;
    border-bottom: 1px solid #EEF1F7;
    padding: 4px 12px;
    font-weight: 700;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #A8A8A8;
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
}
.suru-breakdown tbody td {
    padding: 2px 12px;
    border-top: 1px solid #F3F5F9;
    color: var(--suru-ink-muted);
    white-space: nowrap;
    vertical-align: middle;
}
.suru-breakdown tbody td.alarm-name {
    white-space: normal;
}
.suru-breakdown thead th.num,
.suru-breakdown tbody td.num {
    text-align: right;
}

/* Actions column: the whole cell (not just the tiny glyph) is the kebab activator, giving a large,
   easy click target that fills the card's Actions column. The MudMenu root and its activator wrapper
   are stretched to the row height so the inner activator can fill it; a subtle hover tint signals it
   is interactive. */
.suru-actions-menu {
    display: flex;
    align-self: stretch;
}
.suru-actions-menu > * {
    display: flex;
    align-self: stretch;
    align-items: stretch;
}
.suru-actions-activator {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    align-self: stretch;
    padding: 0 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--suru-ink-muted);
    transition: background 0.15s ease, color 0.15s ease;
}
.suru-actions-activator:hover {
    background: #EEF1F6;
    color: var(--suru-ink);
}
.suru-actions-activator:focus-visible {
    outline: 2px solid var(--suru-ink);
    outline-offset: -2px;
}

/* Worklist status tabs (All / New / Contacted / Resolved / Self-resolved) — a quiet underline tab bar
   with a count badge per tab, matching the Matilda worklist. Active reads as ink with a solid
   underline + dark badge; inactive is muted with a grey badge. */
.suru-status-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--suru-border);
    margin-bottom: 14px;
}
.suru-status-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--suru-ink-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s ease, border-color .15s ease;
}
.suru-status-tab:hover {
    color: var(--suru-ink);
}
.suru-status-tab.active {
    color: var(--suru-ink);
    border-bottom-color: var(--suru-ink);
}
.suru-status-tab:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}
.suru-status-tab:disabled:hover {
    color: var(--suru-ink-muted);
}
.suru-status-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    background: #EEF1F6;
    color: var(--suru-ink-muted);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}
.suru-status-tab.active .suru-status-tab-count {
    background: var(--suru-ink);
    color: #fff;
}
/* Vertical rule separating the monitor-only "Watch list" tab from the case-status buckets. */
.suru-status-tab-divider {
    width: 1px;
    align-self: stretch;
    margin: 6px 6px;
    background: var(--suru-border);
}

/* Pro Monitoring: roomier alarm-types dropdown popover (wider + comfortable rows). */
.pm-alarm-popover {
    min-width: 440px;
}
.pm-alarm-popover .mud-list-item {
    padding-top: 2px;
    padding-bottom: 2px;
}
/* Each row is a fixed-height flex row. The per-type "min" numeric field (shown once a row is
   selected) carries MudBlazor's default vertical margin, which would make selected rows taller than
   unselected ones and overflow the popover. Zero it so selecting only swaps the severity label for
   the field WITHOUT changing the row height — the list stays compact and fully open. */
.pm-alarm-popover .pm-alarm-min.mud-input-control {
    margin-top: 0;
    margin-bottom: 0;
}