html, body {
    font-family: 'Inter', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* FocusOnNavigate moves focus to the page heading; it needs no visible ring. */
h1:focus {
    outline: none;
}

/* Readings are compared down a column: tabular figures keep the digits aligned. */
.mud-table-cell {
    font-variant-numeric: tabular-nums;
}

/* Timestamps (Painel, Logs) stay on one line instead of splitting date and hour. */
.mud-table-cell[data-label="Data/hora"] {
    white-space: nowrap;
}

/* Stacked (phone) table rows: the caption takes the free space, so a cell's
   content (two action buttons, a chip) stays together at the right edge. */
.mud-table-cell::before {
    margin-right: auto;
}

/* Expanded detail rows (devices of a plant, log details) span the whole card:
   no empty caption, and the content may shrink to the card width. */
.mud-table-cell[colspan]::before {
    content: none;
}

.mud-table-cell[colspan] > * {
    flex: 1 1 auto;
    min-width: 0;
}

/* A table nested in an expanded row scrolls sideways on its own
   instead of widening the outer table past the screen. */
.mud-table-cell .mud-simple-table {
    width: 0;
    min-width: 100%;
}

/* App bar. The teal "waterline" along its lower edge is the one accent of the shell. */
.app-bar.mud-appbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--mud-palette-secondary);
    pointer-events: none;
}

.app-bar .mud-button-root:focus-visible {
    outline: 2px solid #4DD0C4;
    outline-offset: 2px;
}

/* Wordmark in the app bar and on the login card: the SMI suffix reads like an equipment nameplate. */
.app-wordmark {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 4px;
    white-space: nowrap;
}

.app-wordmark__mark {
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: -0.01em;
}

.app-wordmark__suffix {
    font-weight: 600;
    font-size: 0.6875rem;
    line-height: 1;
    letter-spacing: 0.08em;
    padding: 3px 6px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 4px;
}

.app-user {
    line-height: 1.2;
    text-align: right;
}

.app-user__name {
    font-weight: 600;
    font-size: 0.875rem;
}

.app-user__plant {
    font-size: 0.75rem;
    opacity: 0.78;
}

/* Drawer and navigation */
.app-drawer.mud-drawer {
    border-right: 1px solid var(--mud-palette-lines-default);
}

.app-nav {
    padding: 12px 0;
}

.app-nav .mud-nav-link {
    width: calc(100% - 12px);
    margin: 2px 12px 2px 0;
    padding-left: 20px;
    border-radius: 0 8px 8px 0;
}

/* Active item: a level marker flush with the drawer edge. */
.app-nav.mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: var(--mud-palette-primary);
    background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
    box-shadow: inset 3px 0 0 var(--mud-palette-secondary);
}

.app-nav.mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon {
    color: var(--mud-palette-primary);
}

.app-nav .mud-nav-link:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.app-nav__section {
    display: block;
    padding: 4px 20px 4px;
    color: var(--mud-palette-text-secondary);
}

.app-content {
    padding-top: 24px;
    padding-bottom: 40px;
}

@media (max-width: 599.98px) {
    .app-content {
        padding-top: 16px;
        padding-bottom: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mud-drawer,
    .mud-main-content,
    .mud-appbar {
        transition: none !important;
    }
}

/* Login page (static server rendering, plain HTML form).
   Navy field with a hard teal waterline; the lower band is the reservoir. */
.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background:
        linear-gradient(to bottom,
            transparent 0 62%,
            #1D9A8A 62% calc(62% + 3px),
            #08304B calc(62% + 3px) 100%),
        #0B3C5D;
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: #FFFFFF;
    color: #1F2933;
    border-radius: 12px;
    padding: 32px 28px;
    box-shadow: 0 1px 2px rgba(8, 43, 67, 0.2), 0 18px 48px rgba(8, 43, 67, 0.4);
}

.login-card__brand {
    margin-bottom: 28px;
}

.login-card__brand .app-wordmark {
    margin-left: 0;
}

.login-card__brand .app-wordmark__mark {
    font-size: 1.6rem;
    color: #0B3C5D;
}

.login-card__brand .app-wordmark__suffix {
    color: #137A6D;
    border-color: #1D9A8A;
}

.login-card__tagline {
    margin: 8px 0 0;
    color: #52606D;
    font-size: 0.9rem;
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.login-field label {
    font-size: 0.85rem;
    font-weight: 600;
}

.login-field input {
    font: inherit;
    color: inherit;
    padding: 10px 12px;
    border: 1px solid #7F8E9D;
    border-radius: 8px;
    background: #FFFFFF;
}

.login-field input:focus {
    outline: 2px solid #1D9A8A;
    outline-offset: 0;
    border-color: #1D9A8A;
}

.login-field .validation-message {
    color: #C62828;
    font-size: 0.85rem;
}

.login-error {
    margin-bottom: 16px;
    padding: 10px 12px;
    border-left: 3px solid #C62828;
    border-radius: 0 8px 8px 0;
    background: #FDECEA;
    color: #8E1B1B;
    font-size: 0.85rem;
}

.login-submit {
    width: 100%;
    font: inherit;
    font-weight: 600;
    color: #FFFFFF;
    background: #0B3C5D;
    border: none;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
}

.login-submit:hover {
    background: #145C7E;
}

.login-submit:focus-visible {
    outline: 2px solid #1D9A8A;
    outline-offset: 2px;
}

/* Blazor unhandled-error bar from the template */
#blazor-error-ui {
    color-scheme: light only;
    background: #FFF4D6;
    color: #1F2933;
    border-top: 3px solid #F2A900;
    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: "Ocorreu um erro.";
}

/* Painel: readings tables (admin hours with devices, operator's yesterday).
   Colour only marks state (status, picked device, manual); everything else stays neutral. */
.readings-table .mud-table-head .mud-table-cell {
    padding: 10px 12px;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: bottom;
    color: var(--mud-palette-text-secondary);
    border-bottom: 2px solid var(--mud-palette-lines-default);
}

.readings-table .readings-unit {
    display: block;
    font-weight: 500;
}

.readings-table .mud-table-body .mud-table-cell {
    padding: 10px 12px;
    vertical-align: middle;
}

.readings-table .readings-time {
    font-weight: 600;
}

/* Table: the hour tile, then the date. The tile is a little flatter than on the cards, so a row keeps its height. */
.readings-when {
    display: flex;
    align-items: center;
    gap: 12px;
}

.readings-when .hour-tile {
    padding: 2px 8px;
}

.readings-when > span {
    color: var(--mud-palette-text-secondary);
}

/* Admin table: column widths are fixed, so opening an hour (longer device names, the plant-reading tag)
   never resizes the columns. Every column has a width, so a wider screen shares the free width among all of
   them in proportion instead of leaving it to one column (Data/hora used to take it all and push the values
   to the right edge). Only while the table has rows: MudBlazor's
   "no records" and loading rows are one cell with a huge colspan, which a fixed layout would turn into
   phantom columns that take the free width. The table's Breakpoint.Md stacks the rows up to 1280px (MudBlazor's
   max-width: 1280px), so none of this applies there. */
@media (min-width: 1280.02px) {
    .readings-table--hours .mud-table-root:has(.readings-time) {
        table-layout: fixed;
        width: 100%;
        min-width: 1094px;
    }

    /* 2 Data/hora, 3 Dispositivo, 4-6 Cota absoluta, Cota 1, Cota 2, 7 QVERT, 8 PVERT, 9 Ativa G, 10 PEF, 11 Perda, 12 IVV,
       13 Status; together they make the min-width. */
    .readings-table--hours thead th:nth-child(1) { width: 56px; }
    .readings-table--hours thead th:nth-child(2) { width: 164px; }
    .readings-table--hours thead th:nth-child(3) { width: 128px; }
    .readings-table--hours thead th:nth-child(4) { width: 84px; }
    .readings-table--hours thead th:nth-child(5) { width: 68px; }
    .readings-table--hours thead th:nth-child(6) { width: 68px; }
    .readings-table--hours thead th:nth-child(7) { width: 84px; }
    .readings-table--hours thead th:nth-child(8) { width: 76px; }
    .readings-table--hours thead th:nth-child(9) { width: 76px; }
    .readings-table--hours thead th:nth-child(10) { width: 76px; }
    .readings-table--hours thead th:nth-child(11) { width: 76px; }
    .readings-table--hours thead th:nth-child(12) { width: 68px; }
    .readings-table--hours thead th:nth-child(13) { width: 70px; }
}

/* From the stacked cards up to 1440px the drawer leaves the table less than its full width (about 950px at 1281px): tighter
   cells and narrower columns, Data/hora takes what is left, and the date drops under the hour tile when Data/hora is too narrow,
   so the page never scrolls sideways. */
@media (min-width: 1280.02px) and (max-width: 1439.98px) {
    .readings-table--hours .mud-table-root:has(.readings-time) {
        min-width: 0;
    }

    .readings-table--hours .mud-table-head .mud-table-cell,
    .readings-table--hours .mud-table-body .mud-table-cell {
        padding-left: 6px;
        padding-right: 6px;
    }

    .readings-table--hours thead th:nth-child(1) { width: 46px; }
    .readings-table--hours thead th:nth-child(2) { width: auto; }
    .readings-table--hours thead th:nth-child(3) { width: 120px; }
    .readings-table--hours thead th:nth-child(4) { width: 74px; }
    .readings-table--hours thead th:nth-child(5) { width: 56px; }
    .readings-table--hours thead th:nth-child(6) { width: 56px; }
    .readings-table--hours thead th:nth-child(7) { width: 72px; }
    .readings-table--hours thead th:nth-child(8) { width: 68px; }
    .readings-table--hours thead th:nth-child(9) { width: 68px; }
    .readings-table--hours thead th:nth-child(10) { width: 68px; }
    .readings-table--hours thead th:nth-child(11) { width: 68px; }
    .readings-table--hours thead th:nth-child(12) { width: 58px; }
    .readings-table--hours thead th:nth-child(13) { width: 60px; }

    .readings-table--hours .readings-when {
        flex-wrap: wrap;
        gap: 4px 8px;
    }
}

.readings-empty {
    color: var(--mud-palette-text-secondary);
    opacity: 0.7;
}

/* Role (Principal / Reserva) and the manual mark are pills. */
.readings-table .role-pill.mud-chip {
    margin: 0;
    border-radius: 999px;
    font-weight: 600;
}

.readings-table .manual-pill.mud-chip,
.readings-legend .manual-pill.mud-chip {
    margin: 0;
    border-radius: 999px;
    font-weight: 700;
}

/* Status: soft tinted pill with a leading dot; the text stays in the neutral text colour for contrast. */
.status-dot--success {
    --pill: var(--mud-palette-success);
}

.status-dot--retrying {
    --pill: var(--mud-palette-warning);
}

.status-dot--failed {
    --pill: var(--mud-palette-error);
}

/* A reading's status is just its colour; the tooltip (ReadingStatusDot) carries the label and the detail. */
.status-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--pill, var(--mud-palette-text-secondary));
    vertical-align: middle;
    cursor: default;
}

/* Hour cards: at 1280px and below (the tables' Breakpoint.Md, where MudBlazor stacks the rows) each hour row shows only
   its card cell, and an open hour lists its devices inside the card instead of as child rows. Above, the card cell hides. */
.readings-table .readings-card-cell {
    display: none;
}

@media (max-width: 1280px) {
    .readings-table .mud-table-body .mud-table-row:has(> .readings-card-cell) > .mud-table-cell:not(.readings-card-cell),
    .readings-table .mud-table-body .readings-child {
        display: none;
    }

    .readings-table .mud-table-body .readings-card-cell {
        display: block;
        padding: 0;
    }
}

.reading-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
}

.reading-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* The hour tile ("HORA" over the time) of the hour cards and the readings tables. */
.hour-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: none;
    min-width: 56px;
    padding: 4px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: rgba(var(--mud-palette-primary-rgb), 0.06);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.hour-tile strong {
    font-size: 0.95rem;
    letter-spacing: 0;
    color: var(--mud-palette-text-primary);
}

.reading-card__when {
    font-weight: 600;
}

/* The status dot and the pills sit at the top right of a card. They wrap instead of widening the card, so a card never
   gets wider than the screen. */
.reading-card__chips {
    align-self: flex-start;
    justify-content: flex-end;
    min-width: 0;
    margin-left: auto;
}

.reading-card__detail {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.reading-card__toggle {
    justify-content: space-between;
    border-top: 1px solid var(--mud-palette-lines-default);
    border-radius: 0;
}

.reading-card__devices {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-left: 8px;
    padding-left: 14px;
    border-left: 2px solid var(--mud-palette-lines-default);
}

.readings-measures {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 12px;
}

.readings-measure {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.readings-measure__label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.readings-measure__unit {
    font-weight: 500;
    text-transform: none;
}

.readings-measure__value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.readings-measures--tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.readings-measures--tiles .readings-measure {
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: rgba(var(--mud-palette-primary-rgb), 0.03);
}

.readings-measures--tiles .readings-measure__value {
    font-size: 1.25rem;
}

.device-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
}

/* The plant's reading: the same secondary bar the table puts on the picked device row. */
.device-card--picked {
    border-color: rgba(var(--mud-palette-secondary-rgb), 0.6);
    box-shadow: inset 3px 0 0 var(--mud-palette-secondary);
}

.device-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
}

.device-card__tag {
    align-self: flex-start;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--mud-palette-secondary);
    color: var(--mud-palette-secondary-text);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.device-card__pick {
    align-self: flex-start;
}

/* Devices of an expanded hour: tinted band, the picked one carries a bar on its left edge. */
.readings-table .readings-child > .mud-table-cell {
    background: rgba(var(--mud-palette-primary-rgb), 0.03);
}

.readings-table .readings-child--picked > .mud-table-cell {
    background: rgba(var(--mud-palette-secondary-rgb), 0.1);
}

.readings-table .readings-child--picked > .mud-table-cell:first-child {
    box-shadow: inset 3px 0 0 var(--mud-palette-secondary);
}

/* Content of a table cell that holds several inline items; the td itself stays a table cell. */
.readings-cell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
}

.readings-device__arrow {
    color: var(--mud-palette-text-secondary);
}

.readings-device__name {
    font-weight: 600;
}

.readings-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 0 16px;
    width: 100%;
}

.readings-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.readings-legend__title {
    font-weight: 600;
}

/* Page header: title on the left, the two actions on the right, same height as the filter controls. */
.readings-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 16px;
}

.readings-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.readings-actions .mud-button-root,
.readings-filters .mud-button-root {
    height: 40px;
    white-space: nowrap;
}

/* Operator: the day pager under the table. */
.readings-pages {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

/* Filter bar: one row of compact controls on desktop, two columns on tablet, one on phone. */
.readings-filters {
    display: grid;
    grid-template-columns: minmax(180px, 1.3fr) minmax(200px, 1.2fr) minmax(150px, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 16px;
}

/* A long plant name is cut with an ellipsis instead of widening its column past the bar. */
.readings-filters > * {
    min-width: 0;
}

.readings-filters .mud-input-control {
    margin: 0;
    min-width: 0;
}

/* Logs: five filters and the free-text search. Usina takes two columns of the first row; the search takes the
   first four of the second, next to the button. */
.readings-filters--logs {
    grid-template-columns: minmax(200px, 1.3fr) minmax(130px, 0.7fr) minmax(130px, 0.7fr) minmax(160px, 1fr) auto;
}

.readings-filters--logs .readings-filters__fill {
    grid-column: span 2;
}

.readings-filters--logs .readings-filters__wide {
    grid-column: 1 / span 4;
}

/* Operator: the period and the button, at the start of the bar. */
.readings-filters--period {
    grid-template-columns: minmax(200px, 320px) auto;
    justify-content: start;
}

@media (max-width: 959.98px) {
    .readings-filters,
    .readings-filters--logs,
    .readings-filters--period {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .readings-filters--logs .readings-filters__fill {
        grid-column: auto;
    }

    .readings-filters--logs .readings-filters__wide {
        grid-column: 1 / -1;
    }
}

@media (max-width: 599.98px) {
    .readings-filters,
    .readings-filters--logs,
    .readings-filters--period {
        grid-template-columns: minmax(0, 1fr);
    }

    .readings-filters .mud-button-root {
        width: 100%;
    }

    .readings-actions,
    .readings-actions .mud-button-root {
        width: 100%;
    }
}

/* Logs page: details block inside an expanded row */
.log-details {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--mud-palette-background-gray);
}

/* The monthly view of the Fechamentos page: the plant and the year arrows in the filter bar, the facts line, the twelve month cards. */
.readings-filters--closing {
    grid-template-columns: minmax(200px, 320px) auto;
    justify-content: start;
}

.closing-year {
    display: flex;
    align-items: center;
    gap: 4px;
}

.closing-year__value {
    min-width: 3.5em;
    text-align: center;
    font-weight: 600;
}

/* A strip of facts above a page's content: on the monthly view of the Fechamentos page the next closing and how far the holidays are loaded, on the
   admin's Painel when the Service runs its jobs next and last ran (red when a job is late). */
.info-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 28px;
    margin-bottom: 20px;
    padding: 10px 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

.info-strip__item {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.info-strip strong {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.info-strip__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mud-palette-success);
}

.info-strip__dot--off {
    background: var(--mud-palette-text-disabled);
}

.info-strip__dot--late {
    background: var(--mud-palette-error);
}

.info-strip__item--late,
.info-strip__item--late strong,
.info-strip__item--late .info-strip__note {
    color: var(--mud-palette-error);
}

.info-strip__note {
    color: var(--mud-palette-text-secondary);
}

.info-strip__tag {
    padding: 1px 8px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    color: var(--mud-palette-primary);
    font-size: 0.75rem;
    font-weight: 600;
}

.closing-section {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--mud-palette-divider);
    color: var(--mud-palette-primary);
}

.closing-section__title {
    margin: 0;
    color: var(--mud-palette-text-primary);
    font-size: 1.125rem;
    font-weight: 600;
}

/* A month card: number, name and badge; the closing day in a box; strips for a manual run and for the holidays; the foot with when it
   ran and "Verificar agora". The next closing is outlined in navy, a month that needs a review in red on a faint red ground. */
.closing-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    padding: 14px 16px 12px;
}

.closing-card--next {
    border-color: var(--mud-palette-primary);
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
}

.closing-card--review {
    border-color: var(--mud-palette-error);
    box-shadow: inset 0 0 0 1px var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 4%, var(--mud-palette-surface));
}

.closing-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.closing-card__number {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: var(--mud-palette-background-gray);
    font-size: 0.875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.closing-card--next .closing-card__number {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.closing-card--review .closing-card__number {
    background: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
}

.closing-card__title {
    flex: 1;
    min-width: 0;
    font-weight: 600;
}

/* The badge keeps the colour the month's status has elsewhere (Labels.ColorOf). */
.closing-card__badge {
    flex: none;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.closing-card__badge--primary {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.closing-card__badge--error {
    background: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
}

.closing-card__badge--success {
    background: color-mix(in srgb, var(--mud-palette-success) 14%, transparent);
    color: var(--mud-palette-success);
}

.closing-card__badge--warning {
    background: color-mix(in srgb, var(--mud-palette-warning) 16%, transparent);
    color: var(--mud-palette-warning-darken);
}

.closing-card__badge--info {
    background: color-mix(in srgb, var(--mud-palette-info) 14%, transparent);
    color: var(--mud-palette-info);
}

.closing-card__date-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
}

.closing-card--next .closing-card__date-box {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
}

.closing-card--review .closing-card__date-box {
    border-color: color-mix(in srgb, var(--mud-palette-error) 35%, transparent);
}

.closing-card__date-label {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
}

.closing-card__date {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.closing-card--review .closing-card__date {
    color: var(--mud-palette-error);
}

.closing-card__date--unknown {
    color: var(--mud-palette-text-secondary);
    font-size: 0.95rem;
    font-weight: 400;
}

.closing-card__strip {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-info) 35%, transparent);
    border-radius: 4px;
    background: color-mix(in srgb, var(--mud-palette-info) 10%, var(--mud-palette-surface));
    font-size: 0.78rem;
    line-height: 1.4;
}

.closing-card__strip .mud-icon-root {
    flex: none;
    color: var(--mud-palette-info);
}

.closing-card__strip--manual {
    border-color: color-mix(in srgb, var(--mud-palette-tertiary) 50%, transparent);
    background: color-mix(in srgb, var(--mud-palette-tertiary) 14%, var(--mud-palette-surface));
}

.closing-card__strip--manual .mud-icon-root {
    color: var(--mud-palette-text-primary);
}

.closing-card__strip--adjusted {
    border-color: color-mix(in srgb, var(--mud-palette-tertiary) 50%, transparent);
    background: color-mix(in srgb, var(--mud-palette-tertiary) 14%, var(--mud-palette-surface));
}

.closing-card__strip--adjusted .mud-icon-root {
    color: var(--mud-palette-text-primary);
}

.closing-card__strip-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.closing-card__date-box--editable {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.closing-card__date-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.closing-card__quiet {
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
    font-style: italic;
}

.closing-card__error {
    padding: 6px 10px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--mud-palette-error) 8%, transparent);
    color: var(--mud-palette-error);
    font-size: 0.8rem;
}

.closing-card__details-toggle {
    align-self: flex-start;
    margin-left: -6px;
}

.closing-card__details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.closing-card__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}

.closing-card__list-title {
    margin: 6px 0 0;
    font-size: 0.8rem;
    font-weight: 600;
}

/* The verification's counts: label and number in two columns. */
.closing-card__counts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 12px;
    margin: 0;
    font-size: 0.8rem;
}

.closing-card__counts dt {
    color: var(--mud-palette-text-secondary);
}

.closing-card__counts dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* Fechamentos: the head and the switch between the daily and the monthly view. */
.fechamentos-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 16px;
}

.view-switch {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
}

.view-switch__item {
    padding: 6px 18px;
    border-radius: 6px;
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    text-decoration: none;
}

.view-switch__item--current {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.view-switch__item:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* A POST to CCEE (SubmissionTicket): the status and the ticket, when it was sent and answered, CCEE's replies and the two actions. */
.ticket-line {
    display: grid;
    gap: 4px;
    padding: 10px 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.ticket-line__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    font-size: 0.85rem;
}

.ticket-line__meta {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
}

/* CCEE's replies about a ticket, newest first (plan 4c). */
.ticket-line__replies {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding-left: 12px;
    list-style: none;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

.ticket-line__reply::before {
    content: "↳ ";
}

.ticket-line__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: -6px;
}

.closing-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.closing-card__footer .mud-button-root {
    flex: none;
    white-space: nowrap;
}

.closing-card__state {
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
    font-weight: 500;
}

.closing-card--review .closing-card__state {
    color: var(--mud-palette-error);
    font-weight: 600;
}

/* The cards fade while the next year or plant loads; they are replaced when it arrives. */
.closing-grid--loading {
    opacity: 0.6;
}

@media (max-width: 599.98px) {
    .readings-filters--closing {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Fechamentos, daily view: the month stepper's value ("Setembro 2026") is wider than a year. */
.closing-year__value--month {
    min-width: 9em;
}

/* The daily calendar (DayCalendar): seven columns, Sunday first. A day is a button whose border and a light tint carry its newest daily
   POST's state, never a filled block, so the problems stand out of a calm grid; a 24-segment bar of the hours that POST sent; the word
   of state at the foot; the legend of the five coloured states under the grid. */
.day-calendar {
    padding: 16px 18px 14px;
}

/* The calendar fades while another plant or month loads and takes no click; it is replaced when it arrives. */
.day-calendar__wrap--loading {
    opacity: 0.6;
    pointer-events: none;
}

.day-calendar__weekdays,
.day-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

.day-calendar__weekdays {
    margin-bottom: 6px;
    padding: 0 2px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
}

.day-cell {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    min-height: 76px;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.day-cell:hover:not(:disabled):not(.day-cell--selected) {
    box-shadow: 0 0 0 1px var(--mud-palette-lines-inputs);
}

.day-cell:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.day-cell--blank {
    border: 0;
    background: transparent;
    cursor: default;
}

/* Today and later: never sent before tomorrow, so the number alone, muted. */
.day-cell--future {
    border-color: var(--mud-palette-background-gray);
    background: transparent;
    color: var(--mud-palette-text-disabled);
    cursor: default;
}

/* A past day without a POST is neutral on purpose: it may have had nothing to send, and the verification sends what escaped. */
.day-cell--notsent {
    border-style: dashed;
    color: var(--mud-palette-text-secondary);
}

.day-cell--awaiting {
    border-color: var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 7%, var(--mud-palette-surface));
}

.day-cell--accepted {
    border-color: color-mix(in srgb, var(--mud-palette-success) 55%, var(--mud-palette-lines-default));
    background: color-mix(in srgb, var(--mud-palette-success) 5%, var(--mud-palette-surface));
}

.day-cell--rejected,
.day-cell--failed {
    border-color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 6%, var(--mud-palette-surface));
}

.day-cell--unanswered {
    border-color: var(--mud-palette-warning);
}

/* The day shown in the panel, outlined in navy like the next-closing card; the state's border stays inside the ring. */
.day-cell--selected {
    box-shadow: 0 0 0 2px var(--mud-palette-primary);
}

.day-cell__number {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.day-cell__bar {
    display: grid;
    grid-template-columns: repeat(24, minmax(0, 1fr));
    gap: 1px;
    height: 5px;
    margin: 6px 0;
}

.day-cell__bar i {
    display: block;
    border-radius: 1px;
    background: var(--mud-palette-lines-default);
}

.day-cell--accepted .day-cell__bar i.on {
    background: var(--mud-palette-success);
}

.day-cell--awaiting .day-cell__bar i.on {
    background: var(--mud-palette-warning);
}

.day-cell--rejected .day-cell__bar i.on {
    background: var(--mud-palette-error);
}

/* Sem resposta: the hours went out but CCEE never answered, so the bar is hollow. */
.day-cell--unanswered .day-cell__bar i.on {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--mud-palette-warning);
}

.day-cell__state {
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
}

.day-cell--accepted .day-cell__state {
    color: var(--mud-palette-success);
}

.day-cell--awaiting .day-cell__state,
.day-cell--unanswered .day-cell__state {
    color: var(--mud-palette-warning-darken);
}

.day-cell--rejected .day-cell__state,
.day-cell--failed .day-cell__state {
    color: var(--mud-palette-error);
}

.day-calendar__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    padding: 12px 2px 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
}

.day-calendar__swatch::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    vertical-align: -2px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 3px;
}

.day-calendar__swatch--accepted::before {
    border-color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
}

.day-calendar__swatch--awaiting::before {
    border-color: var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, transparent);
}

.day-calendar__swatch--rejected::before {
    border-color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
}

.day-calendar__swatch--unanswered::before {
    border-color: var(--mud-palette-warning);
}

.day-calendar__swatch--notsent::before {
    border-style: dashed;
    border-color: var(--mud-palette-text-secondary);
}

/* The day panel (DayDetail) under the calendar: the day and its status, the newest POST with its hours, the older POSTs collapsed. */
.day-detail {
    margin-top: 16px;
    padding: 16px 18px;
}

.day-detail__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.day-detail__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.day-detail__empty {
    margin: 8px 0 0;
    color: var(--mud-palette-text-secondary);
}

.day-detail__toggle {
    justify-self: start;
    align-self: flex-start;
    margin-left: -6px;
}

.day-detail__previous {
    display: grid;
}

/* The hours a POST sent: the Painel's numbers, right-aligned, in a dense table that scrolls sideways on a narrow screen. */
.sent-hours__scroll {
    overflow-x: auto;
}

.sent-hours {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.sent-hours th,
.sent-hours td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    text-align: right;
    white-space: nowrap;
}

.sent-hours th {
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
}

.sent-hours th:nth-child(-n + 2),
.sent-hours td:nth-child(-n + 2) {
    text-align: left;
}

.sent-hours__unit {
    font-weight: 400;
}

.sent-hours__device {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sent-hours .role-pill.mud-chip,
.sent-hours .manual-pill.mud-chip {
    margin: 0;
    border-radius: 999px;
    font-weight: 600;
}

/* Below 960px a cell is too narrow for gaps between 24 segments: the bar becomes one continuous fill. */
@media (max-width: 959.98px) {
    .day-cell__bar {
        gap: 0;
    }
}

/* On a phone the cells keep the number and the bar and drop the word; the legend carries the meaning. */
@media (max-width: 599.98px) {
    .day-calendar {
        padding: 12px 10px;
    }

    .day-calendar__weekdays,
    .day-calendar__grid {
        gap: 4px;
    }

    .day-cell {
        min-height: 56px;
        padding: 6px;
    }

    .day-cell__state {
        display: none;
    }

    .day-detail {
        padding: 12px;
    }
}

/* Plant picker (Painel, Fechamentos, Logs, user dialog). The field copies an outlined MudBlazor input: the label sits on the
   border, 40px in the filter bars (--dense), 56px in the forms. It shows the picked plant's code and a small status pill. */
.plant-picker {
    position: relative;
    min-width: 0;
}

.plant-picker__field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 56px;
    padding: 0 8px 0 14px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.plant-picker--dense .plant-picker__field {
    height: 40px;
}

.plant-picker__field:hover:not(:disabled) {
    border-color: var(--mud-palette-text-primary);
}

.plant-picker--open .plant-picker__field,
.plant-picker__field:focus-visible {
    border-color: var(--mud-palette-primary);
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
    outline: none;
}

.plant-picker__field:disabled {
    border-color: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-disabled);
    cursor: default;
}

.plant-picker__label {
    position: absolute;
    top: 0;
    left: 10px;
    transform: translateY(-50%);
    padding: 0 4px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    line-height: 1;
}

.plant-picker--open .plant-picker__label {
    color: var(--mud-palette-primary);
}

.plant-picker__value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.plant-picker__value--empty {
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

.plant-picker__field:disabled .plant-picker__value {
    color: inherit;
}

/* Ativa: green, like the Ativo chips; Inativa: grey. */
.plant-picker__status {
    flex: none;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
    color: var(--mud-palette-success);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
}

.plant-picker__status--inactive {
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

.plant-picker__chevron {
    flex: none;
    margin-left: auto;
    color: var(--mud-palette-action-default);
    transition: transform 150ms ease;
}

.plant-picker--open .plant-picker__chevron {
    transform: rotate(180deg);
}

/* The open list: search, tabs, then the plants grouped by status. It is at least as wide as the field and 320px. */
.plant-picker__popover {
    min-width: 320px;
    max-width: calc(100vw - 32px);
}

.plant-picker__panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 12px 0;
}

.plant-picker__panel .mud-input-control {
    margin: 0;
}

.plant-picker__tabs {
    display: flex;
    gap: 6px;
}

.plant-picker__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 0;
    border-radius: 6px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.plant-picker__tab:hover {
    background: var(--mud-palette-lines-default);
}

.plant-picker__tab--current,
.plant-picker__tab--current:hover {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.plant-picker__tab:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.plant-picker__count {
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}

.plant-picker__list {
    max-height: 320px;
    margin: 0 -12px;
    padding-bottom: 6px;
    overflow-y: auto;
    border-top: 1px solid var(--mud-palette-divider);
}

.plant-picker__group {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 4px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
}

.plant-picker__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mud-palette-success);
}

.plant-picker__dot--inactive {
    background: var(--mud-palette-text-disabled);
}

/* One plant: a check column, the code, and the company's name smaller below. The picked plant carries the teal bar of the app bar's
   waterline on its left edge. */
.plant-picker__option {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    padding: 8px 16px 8px 13px;
    border-left: 3px solid transparent;
    cursor: pointer;
}

.plant-picker__option:hover,
.plant-picker__option--highlight {
    background: var(--mud-palette-action-default-hover);
}

.plant-picker__option--selected {
    border-left-color: var(--mud-palette-secondary);
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
}

.plant-picker__option--selected.plant-picker__option--highlight,
.plant-picker__option--selected:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

.plant-picker__check {
    display: flex;
    padding-top: 1px;
    color: var(--mud-palette-secondary);
}

.plant-picker__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
}

.plant-picker__option-code {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.plant-picker__option-name {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
}

.plant-picker__option--inactive .plant-picker__option-code {
    color: var(--mud-palette-text-secondary);
}

.plant-picker__option--inactive .plant-picker__option-name {
    color: var(--mud-palette-text-disabled);
}

.plant-picker__none {
    margin: 0;
    padding: 16px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
}

@media (prefers-reduced-motion: reduce) {
    .plant-picker__chevron {
        transition: none;
    }
}

.plants-table .plant-row--inactive > .mud-table-cell {
    color: var(--mud-palette-text-secondary);
}

/* The Usinas warning about plants with no device: a count with "Ver usinas", which opens their codes and names in columns that
   scroll once the list grows. */
.plants-left-out .mud-alert-message {
    flex: 1;
    min-width: 0;
}

.plants-left-out__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
}

.plants-left-out__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px 24px;
    max-height: 240px;
    margin: 8px 0 4px;
    padding: 8px 0 0;
    overflow-y: auto;
    border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
    list-style: none;
}

.plants-left-out__item {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 0.8125rem;
    line-height: 1.35;
}

.plants-left-out__item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.85;
}

/* Usinas on a phone or a tablet, where the table stacks (960px): each plant is a card headed by its name, with editing, (in)activating
   and expanding at its right and the code, the device count and the status on the line below. Its devices sit in a tinted band. */
@media (max-width: 960px) {
    .plants-table.mud-sm-table .mud-table-body > .mud-table-row:not(.plant-child) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 16px;
        padding: 12px 8px 12px 16px;
        border-bottom: 1px solid var(--mud-palette-table-lines);
    }

    /* Ends the first line after the expand button: the code, the count and the status always start the second. */
    .plants-table.mud-sm-table .mud-table-body > .mud-table-row:not(.plant-child)::after {
        content: "";
        order: 3;
        flex-basis: 100%;
        height: 0;
    }

    .plants-table.mud-sm-table .mud-table-row .mud-table-cell.plant-cell--name,
    .plants-table.mud-sm-table .mud-table-row .mud-table-cell.plant-cell--code,
    .plants-table.mud-sm-table .mud-table-row .mud-table-cell.plant-cell--count,
    .plants-table.mud-sm-table .mud-table-row .mud-table-cell.plant-cell--status,
    .plants-table.mud-sm-table .mud-table-row .mud-table-cell.plant-cell--actions,
    .plants-table.mud-sm-table .mud-table-row .mud-table-cell.plant-cell--expand {
        padding: 0;
        border: none;
    }

    .plants-table.mud-sm-table .mud-table-cell.plant-cell--name {
        order: 1;
        flex: 1 1 0;
        min-width: 0;
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .plants-table.mud-sm-table .mud-table-cell.plant-cell--actions {
        order: 2;
        justify-content: flex-end;
    }

    .plants-table.mud-sm-table .mud-table-cell.plant-cell--expand {
        order: 3;
    }

    .plants-table.mud-sm-table .mud-table-cell.plant-cell--code {
        order: 4;
    }

    .plants-table.mud-sm-table .mud-table-cell.plant-cell--count {
        order: 5;
    }

    .plants-table.mud-sm-table .mud-table-cell.plant-cell--status {
        order: 6;
    }

    .plants-table.mud-sm-table .mud-table-cell.plant-cell--name::before,
    .plants-table.mud-sm-table .mud-table-cell.plant-cell--status::before,
    .plants-table.mud-sm-table .mud-table-cell.plant-cell--actions::before,
    .plants-table.mud-sm-table .plant-child > .mud-table-cell::before {
        content: none;
    }

    .plants-table.mud-sm-table .mud-table-cell.plant-cell--code::before,
    .plants-table.mud-sm-table .mud-table-cell.plant-cell--count::before {
        padding-inline-end: 6px;
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--mud-palette-text-secondary);
    }

    .plants-table.mud-sm-table .plant-child > .mud-table-cell {
        display: block;
        border-bottom: 1px solid var(--mud-palette-table-lines);
    }

    .plants-table .plant-devices {
        background: rgba(var(--mud-palette-primary-rgb), 0.03);
        box-shadow: inset 3px 0 0 rgba(var(--mud-palette-primary-rgb), 0.35);
    }

    .plants-table .plant-devices__of {
        display: none;
    }

    .plants-table .plant-devices__header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .plants-table .plant-devices__header .mud-button-root {
        white-space: nowrap;
    }
}

/* A plant's devices on a phone: each PLC a small card, its name at the top with the actions beside it, the role and the status
   below, then the AMS Net ID and the serial as label and value. */
@media (max-width: 599.98px) {
    .plants-table .plant-devices.pa-4 {
        padding: 12px !important;
    }

    .plants-table .device-list {
        background: transparent;
        box-shadow: none;
    }

    .plants-table .device-list table thead {
        display: none;
    }

    .plants-table .device-list table,
    .plants-table .device-list table tbody {
        display: block;
    }

    .plants-table .device-list table tbody tr {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 6px 8px;
        margin-bottom: 8px;
        padding: 12px;
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: var(--mud-default-borderradius);
        background: var(--mud-palette-surface);
    }

    .plants-table .device-list table tbody tr:last-child {
        margin-bottom: 0;
    }

    .plants-table .device-list.mud-simple-table table tbody tr > td {
        display: block;
        padding: 0;
        border: none;
    }

    .plants-table .device-list table tbody tr > td.device-cell--name {
        grid-column: 1 / 4;
        grid-row: 1;
        font-weight: 600;
        overflow-wrap: anywhere;
    }

    .plants-table .device-list table tbody tr > td.device-cell--actions {
        grid-column: 4;
        grid-row: 1;
        white-space: nowrap;
    }

    .plants-table .device-list table tbody tr > td.device-cell--role {
        grid-column: 1;
        grid-row: 2;
    }

    .plants-table .device-list table tbody tr > td.device-cell--status {
        grid-column: 2;
        grid-row: 2;
    }

    .plants-table .device-list table tbody tr > td.device-cell--ams,
    .plants-table .device-list table tbody tr > td.device-cell--serial {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        grid-column: 1 / -1;
        overflow-wrap: anywhere;
    }

    .plants-table .device-list table tbody tr > td.device-cell--ams::before,
    .plants-table .device-list table tbody tr > td.device-cell--serial::before {
        content: attr(data-label);
        flex: none;
        color: var(--mud-palette-text-secondary);
    }
}

/* Form dialogs (usina, dispositivo, usuário): titled sections of a two-column grid that falls to one column on a phone. The title and
   the buttons stay put; when the screen is too short only the body scrolls, above a hairline that marks the buttons' bar. */
.form-dialog .form-dialog__body {
    padding: 4px 24px 12px;
}

.form-dialog .form-dialog__actions {
    padding: 10px 24px 14px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.form-section + .form-section {
    margin-top: 16px;
}

.form-section__title {
    margin: 0 0 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

.form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 16px;
}

.form-section__note {
    margin: 8px 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
}

/* The plant's PEF factor, recalculated while the two percentages are typed: the one figure the dialog puts forward, read like a meter
   beside the two fields that make it. It takes the outlined fields' top margin (MudBlazor gives a field with a floating label 8px
   above) and at least the height of their 56px box, so it stands on the line of the boxes whatever else shares the row. */
.pef-factor {
    align-self: start;
    box-sizing: border-box;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 8px 0 0;
    padding: 4px 14px;
    border-left: 3px solid var(--mud-palette-primary);
    border-radius: 0 var(--mud-default-borderradius) var(--mud-default-borderradius) 0;
    background: rgba(var(--mud-palette-primary-rgb), 0.06);
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

/* The installed max power field with its info icon beside it, the icon on the line of the field's box (8px of label margin plus
   half the 56px box, less half the icon). */
.pef-max-power {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.pef-max-power > .mud-input-control {
    flex: 1 1 auto;
    min-width: 0;
}

.pef-max-power__info {
    flex: none;
    margin-top: 26px;
    color: var(--mud-palette-text-secondary);
    cursor: help;
}

/* The installed max power's range, on one line beside the field (under it on a narrow screen), on the line of the field's box. */
.pef-max-power__note {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.pef-factor strong {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mud-palette-primary);
}

@media (min-width: 600px) {
    .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-grid > .form-grid__wide {
        grid-column: 1 / -1;
    }

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

    .form-grid--pef > .pef-max-power__note {
        grid-column: span 2;
        align-self: start;
        display: flex;
        align-items: center;
        min-height: 56px;
        margin-top: 8px;
    }
}

@media (max-width: 599.98px) {
    .mud-dialog.form-dialog.mud-dialog-width-full {
        width: calc(100% - 32px);
    }

    .mud-dialog.form-dialog {
        max-height: calc(100dvh - 32px);
    }

    .form-dialog .form-dialog__body {
        padding: 4px 16px 16px;
    }

    .form-dialog .form-dialog__actions {
        padding: 12px 16px;
    }
}