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.
The header stays in view while the page scrolls. The window is what scrolls (MudLayout and MudMainContent have no
overflow of their own, and the table has no Height), and the app bar is fixed (MudAppBar's Fixed defaults to true:
position: fixed, 64px from --mud-appbar-height, with MudMainContent padded by the same amount), so the header
sticks at the bar's bottom edge instead of 0, which would slide it under the bar. The cell is the sticky element
because the thead and tr take no height of their own. Below Breakpoint.Md the rows stack as cards and the thead
is hidden, so there is nothing to stick there. */
.readings-table .mud-table-head .mud-table-cell {
position: sticky;
top: var(--mud-appbar-height);
z-index: 2;
background: var(--mud-palette-surface);
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);
}
/* The sticky cells are opaque, so the first and last follow the Paper's rounded top corners instead of covering them. */
.readings-table .mud-table-head .mud-table-cell:first-child { border-top-left-radius: var(--mud-default-borderradius); }
.readings-table .mud-table-head .mud-table-cell:last-child { border-top-right-radius: var(--mud-default-borderradius); }
/* MudBlazor gives the table's container overflow-y: auto, which makes it the scroll container a sticky header
sticks to (a container that never scrolls, so the header would not move). Visible hands that back to the window. */
.readings-table .mud-table-container {
overflow: visible;
}
.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 filled and 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;
border-color: transparent;
background: var(--mud-palette-primary);
color: var(--mud-palette-primary-text);
}
.readings-when .hour-tile strong {
color: inherit;
}
.readings-when > span {
color: var(--mud-palette-text-secondary);
}
.readings-hour--open .readings-when .hour-tile {
background: var(--mud-palette-secondary-darken);
color: var(--mud-palette-secondary-text);
}
/* 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: 1080px;
}
/* 2 Estrutura / Data & hora / Canal, 3 Dispositivo, 4-5 Cota absoluta, Cota, 6 QVERT, 7 PVERT, 8 Ativa G, 9 PEF, 10 Perda, 11 IVV,
12 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: 196px; }
.readings-table--hours thead th:nth-child(3) { width: 150px; }
.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: 84px; }
.readings-table--hours thead th:nth-child(7) { width: 76px; }
.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: 68px; }
.readings-table--hours thead th:nth-child(12) { 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, and Estrutura takes what is left, 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: 72px; }
.readings-table--hours thead th:nth-child(7) { width: 68px; }
.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: 58px; }
.readings-table--hours thead th:nth-child(12) { 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 (P / R) and the manual mark (M) 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;
}
/* One sensor of a device card: its title with the plant-reading tag or the pick button, then its six values. */
.device-card__sensor {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 10px;
border-top: 1px solid var(--mud-palette-lines-default);
}
.device-card__sensor-head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 4px 8px;
}
.device-card__sensor-title {
font-weight: 600;
}
/* Admin table as a tree (owner, 2026-10-30): hour, then its devices, then an opened device's sensors. The open hour is tinted, in bold
and carries a bar on its left edge; the children stay on the plain surface, and only the picked device and sensor are tinted. Cota abs. and
Ativa G are the key values (.readings-key): bold on hours and devices, and on a sensor only when it is the picked one. */
.readings-table--hours {
--readings-cell-x: 12px;
--readings-tree-line: 1px solid var(--mud-palette-lines-default);
}
.readings-table .readings-key {
font-weight: 700;
}
.readings-table .readings-hour--open > .mud-table-cell {
background: rgba(var(--mud-palette-primary-rgb), 0.05);
font-weight: 700;
}
.readings-table .readings-hour--open > .mud-table-cell:first-child {
box-shadow: inset 4px 0 0 var(--mud-palette-primary);
}
.readings-table .readings-device--picked > .mud-table-cell,
.readings-table .readings-sensor--picked > .mud-table-cell {
background: rgba(var(--mud-palette-secondary-rgb), 0.08);
}
/* The header of the chevrons' column holds the "Expandir tudo" icon button, wider than the column's padded width. */
.readings-table--hours .mud-table-head .mud-table-cell:first-child {
padding-inline: 4px;
vertical-align: middle;
}
/* The chevrons and the tree's trunk share the first column's centre. */
.readings-table--hours .mud-table-body .mud-table-cell:first-child {
text-align: center;
}
.readings-table .readings-child > .mud-table-cell:nth-child(-n+2) {
position: relative;
}
/* The trunk: down the first column of every child row, from the hour's chevron. */
.readings-table .readings-child > .mud-table-cell:first-child::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
border-left: var(--readings-tree-line);
}
/* A device's branch: from the trunk to the device icon, across the first column and the second column's padding. */
.readings-table .readings-device > .mud-table-cell:first-child::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
right: 0;
border-top: var(--readings-tree-line);
}
.readings-table .readings-device > .mud-table-cell:nth-child(2)::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: calc(var(--readings-cell-x) - 2px);
border-top: var(--readings-tree-line);
}
/* An opened device's own trunk: from under its icon (20px wide) down to its sensors. */
.readings-table .readings-device--open > .mud-table-cell:nth-child(2)::after {
content: "";
position: absolute;
top: calc(50% + 10px);
bottom: 0;
left: calc(var(--readings-cell-x) + 10px);
border-left: var(--readings-tree-line);
}
/* A sensor sits one level deeper: its radio starts past the device's trunk, which runs down to the last sensor's branch. */
.readings-table .readings-sensor > .mud-table-cell:nth-child(2) {
padding-left: calc(var(--readings-cell-x) + 28px);
}
.readings-table .readings-sensor > .mud-table-cell:nth-child(2)::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: calc(var(--readings-cell-x) + 10px);
border-left: var(--readings-tree-line);
}
.readings-table .readings-sensor--last > .mud-table-cell:nth-child(2)::before {
bottom: 50%;
}
.readings-table .readings-sensor > .mud-table-cell:nth-child(2)::after {
content: "";
position: absolute;
top: 50%;
left: calc(var(--readings-cell-x) + 10px);
width: 16px;
border-top: var(--readings-tree-line);
}
@media (min-width: 1280.02px) and (max-width: 1439.98px) {
.readings-table--hours {
--readings-cell-x: 6px;
}
}
/* The device's name opens it into its sensors: a plain button, the icon, the name and a small chevron. */
.readings-tree__toggle {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0;
border: 0;
background: none;
font: inherit;
color: inherit;
text-align: left;
cursor: pointer;
}
.readings-tree__toggle:disabled {
cursor: default;
}
.readings-tree__toggle:hover:not(:disabled) .readings-device__name {
text-decoration: underline;
}
.readings-tree__toggle:focus-visible {
outline: 2px solid var(--mud-palette-primary);
outline-offset: 2px;
border-radius: 4px;
}
.readings-tree__icon,
.readings-tree__chevron {
color: var(--mud-palette-text-secondary);
}
.readings-cell--nowrap {
flex-wrap: nowrap;
white-space: nowrap;
}
/* 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);
}
/* The text buttons (Filtrar) take the row; the icon buttons (the month and year steppers' arrows) keep their size, or each one takes
the bar's width and the page grows past the screen. */
.readings-filters .mud-button-root:not(.mud-icon-button) {
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), the owner's layout of 2026-10-30: one grid of seven columns, Sunday first, the days divided by lines
instead of spaced boxes. A day carries its number (the weekday is the column's), a pill of its newest daily POST's state (the only
colour, so the problems stand out of a calm grid) and a foot with when it went out or CCEE's ticket and an icon.
Today has a navy frame; the day shown in the panel a teal one. Under the grid, the legend of the five states with their counts. */
.day-calendar {
container-type: inline-size;
padding: 0;
overflow: hidden;
}
/* 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));
}
.day-calendar__weekdays {
border-bottom: 1px solid var(--mud-palette-lines-default);
background: color-mix(in srgb, var(--mud-palette-background-gray) 60%, var(--mud-palette-surface));
color: var(--mud-palette-text-secondary);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.04em;
text-align: center;
text-transform: uppercase;
}
.day-calendar__weekdays > span {
padding: 10px 4px;
border-right: 1px solid var(--mud-palette-lines-default);
}
.day-calendar__weekdays > span:last-child,
.day-calendar__grid > :nth-child(7n) {
border-right: 0;
}
.day-cell {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
min-height: 88px;
padding: 10px;
border: 0;
border-right: 1px solid var(--mud-palette-lines-default);
border-bottom: 1px solid var(--mud-palette-lines-default);
border-radius: 0;
background: var(--mud-palette-surface);
color: var(--mud-palette-text-primary);
font: inherit;
text-align: left;
cursor: pointer;
}
.day-cell:hover:not(:disabled) {
background: rgba(var(--mud-palette-primary-rgb), 0.04);
}
.day-cell:focus-visible {
outline: 2px solid var(--mud-palette-primary);
outline-offset: -2px;
}
.day-cell--blank {
background: color-mix(in srgb, var(--mud-palette-background-gray) 50%, var(--mud-palette-surface));
cursor: default;
}
/* Today and later: never sent before tomorrow, so muted and without a pill. */
.day-cell--future {
color: var(--mud-palette-text-disabled);
cursor: default;
}
.day-cell--today {
box-shadow: inset 0 0 0 2px var(--mud-palette-primary);
}
.day-cell--selected {
box-shadow: inset 0 0 0 2px var(--mud-palette-secondary);
}
.day-cell__head {
display: flex;
align-items: center;
gap: 6px;
}
.day-cell__number {
font-size: 1rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.day-cell__weekday {
display: none;
}
.day-cell__today {
padding: 1px 6px;
border-radius: 4px;
background: var(--mud-palette-primary);
color: var(--mud-palette-primary-text);
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* The state pill (and the legend's swatches): a dot and the word, tinted by the state. */
.day-cell__pill,
.day-calendar__swatch {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
padding: 2px 8px;
border: 1px solid var(--mud-palette-lines-default);
border-radius: 4px;
font-size: 0.75rem;
font-weight: 700;
line-height: 1.4;
white-space: nowrap;
}
/* In a day the pill is a block, so a word too long for the column ends in an ellipsis (a flex box would clip it). */
.day-cell__pill {
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
.day-cell__pill::before {
display: inline-block;
margin-right: 6px;
vertical-align: 1px;
}
.day-cell__pill::before,
.day-calendar__swatch::before {
content: "";
flex: none;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--mud-palette-text-secondary);
}
.day-cell--accepted .day-cell__pill,
.day-calendar__swatch--accepted {
border-color: rgba(var(--mud-palette-primary-rgb), 0.35);
background: rgba(var(--mud-palette-primary-rgb), 0.1);
}
.day-cell--awaiting .day-cell__pill,
.day-calendar__swatch--awaiting {
border-color: rgba(var(--mud-palette-primary-rgb), 0.2);
background: rgba(var(--mud-palette-primary-rgb), 0.05);
}
.day-cell--accepted .day-cell__pill::before,
.day-calendar__swatch--accepted::before,
.day-cell--awaiting .day-cell__pill::before,
.day-calendar__swatch--awaiting::before {
background: var(--mud-palette-primary);
}
.day-cell--rejected .day-cell__pill,
.day-cell--failed .day-cell__pill,
.day-calendar__swatch--rejected {
border-color: color-mix(in srgb, var(--mud-palette-error) 45%, transparent);
background: color-mix(in srgb, var(--mud-palette-error) 8%, var(--mud-palette-surface));
}
.day-cell--rejected .day-cell__pill::before,
.day-cell--failed .day-cell__pill::before,
.day-calendar__swatch--rejected::before {
background: var(--mud-palette-error);
}
/* Sem resposta: the hours went out but CCEE never answered, so the dot is hollow. */
.day-cell--unanswered .day-cell__pill::before,
.day-calendar__swatch--unanswered::before {
background: transparent;
box-shadow: inset 0 0 0 1.5px var(--mud-palette-text-secondary);
}
/* 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 .day-cell__pill,
.day-calendar__swatch--notsent {
border-style: dashed;
border-color: var(--mud-palette-lines-inputs);
color: var(--mud-palette-text-secondary);
}
.day-cell--notsent .day-cell__pill::before,
.day-calendar__swatch--notsent::before {
background: var(--mud-palette-text-disabled);
}
.day-cell__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
min-height: 24px;
margin-top: auto;
padding-top: 6px;
border-top: 1px solid var(--mud-palette-lines-default);
color: var(--mud-palette-text-secondary);
font-size: 0.6875rem;
white-space: nowrap;
}
.day-cell__foot > span {
overflow: hidden;
text-overflow: ellipsis;
}
.day-cell__icon.mud-icon-root {
flex: none;
font-size: 1rem;
}
.day-cell--accepted .day-cell__icon {
color: var(--mud-palette-secondary);
}
.day-cell--awaiting .day-cell__icon {
color: var(--mud-palette-text-primary);
}
.day-cell--unanswered .day-cell__icon {
color: var(--mud-palette-warning-darken);
}
.day-cell--rejected .day-cell__icon,
.day-cell--failed .day-cell__icon {
color: var(--mud-palette-error);
}
.day-calendar__legend {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 12px 16px 6px;
border-top: 1px solid var(--mud-palette-lines-default);
}
.day-calendar__legend-title {
display: inline-flex;
align-items: center;
gap: 6px;
margin-right: 8px;
color: var(--mud-palette-text-secondary);
font-size: 0.78rem;
font-weight: 600;
}
.day-calendar__swatch b {
margin-left: 6px;
padding: 0 6px;
border-radius: 3px;
background: var(--mud-palette-surface);
font-variant-numeric: tabular-nums;
}
.day-calendar__total {
padding: 4px 16px 12px;
color: var(--mud-palette-text-secondary);
font-size: 0.78rem;
}
.day-calendar__total strong {
color: var(--mud-palette-text-primary);
}
/* The calendar answers its own width, not the window's (container queries): beside the day panel on a laptop it is as narrow as on a
tablet. Up to 840px a day has no room for the pill's frame and the foot's icon: the state is the dot and the word, the foot the text. */
@container (max-width: 840px) {
.day-calendar .day-cell {
padding: 8px;
min-height: 80px;
}
.day-calendar .day-cell .day-cell__pill {
padding: 0;
border: 0;
background: none;
font-size: 0.6875rem;
}
.day-calendar .day-cell__icon.mud-icon-root {
display: none;
}
}
/* Up to 640px seven columns cannot hold a day: the month becomes a list, one row per day up to today (the later days carry nothing),
each with its number and weekday, the state's pill and the foot, so nothing is lost on a phone. */
@container (max-width: 639.98px) {
.day-calendar__weekdays,
.day-calendar .day-cell--blank,
.day-calendar .day-cell--future:not(.day-cell--today) {
display: none;
}
.day-calendar__grid {
grid-template-columns: minmax(0, 1fr);
}
.day-calendar .day-cell {
flex-direction: row;
align-items: center;
gap: 12px;
min-height: 0;
padding: 10px 14px;
border-right: 0;
}
.day-calendar .day-cell__head {
flex: none;
width: 92px;
}
.day-calendar .day-cell__weekday {
display: inline;
color: var(--mud-palette-text-secondary);
font-size: 0.75rem;
}
.day-calendar .day-cell .day-cell__pill {
flex: 0 1 auto;
font-size: 0.75rem;
}
.day-calendar .day-cell__foot {
min-height: 0;
margin: 0 0 0 auto;
padding: 0;
border: 0;
}
.day-calendar .day-cell__icon.mud-icon-root {
display: inline-block;
}
}
/* The day panel (DayDetail) under the calendar: the day and its status, the newest POST with its hours, the older POSTs collapsed. */
.day-detail {
padding: 12px 16px 16px;
}
.day-detail__head {
display: flex;
align-items: center;
gap: 4px;
margin: 0 -6px 4px;
}
.day-detail__title {
margin: 0 4px;
font-size: 1.125rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.day-detail__close {
margin-left: auto;
}
.day-detail__status {
margin-bottom: 4px;
}
/* Fechamentos daily view (owner, 2026-10-30): the calendar and the day panel side by side, so a day's POSTs never sit under the month.
The panel sticks under the app bar and scrolls on its own; with no day open it says what it is for. Up to 1280px there is no room
beside the month: the panel is a sheet over the page's foot, shown only while a day is open, and the hint goes. */
.closing-daily {
display: grid;
gap: 16px;
align-items: start;
}
.closing-daily__hint {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 32px 24px;
border: 1px dashed var(--mud-palette-lines-inputs);
border-radius: var(--mud-default-borderradius);
color: var(--mud-palette-text-secondary);
text-align: center;
}
.closing-daily__hint p {
max-width: 28ch;
margin: 0;
font-size: 0.875rem;
}
@media (min-width: 1280.02px) {
.closing-daily {
grid-template-columns: minmax(0, 1fr) minmax(360px, 32%);
}
.closing-daily__panel {
position: sticky;
top: calc(var(--mud-appbar-height) + 16px);
max-height: calc(100vh - var(--mud-appbar-height) - 32px);
overflow-y: auto;
}
}
@media (max-width: 1280px) {
.closing-daily__panel {
display: none;
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 1250;
max-height: 75vh;
overflow-y: auto;
border-radius: 12px 12px 0 0;
background: var(--mud-palette-surface);
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
}
.closing-daily--open .closing-daily__panel {
display: block;
}
/* Room under the month for the open sheet, so the last days can still be scrolled above it. */
.closing-daily--open {
padding-bottom: 50vh;
}
.closing-daily__panel .day-detail {
border: 0;
}
}
.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;
}
@media (max-width: 599.98px) {
.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(240px, 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;
}
}
/* Indicadores page (spec 6 to 9). The header and the filters reuse .readings-header and .readings-filters. */
.indicators-headline {
padding: 16px 20px;
border-left: 4px solid var(--mud-palette-text-secondary);
}
.indicators-headline--ok {
border-left-color: var(--mud-palette-success);
}
.indicators-headline--reduced {
border-left-color: var(--mud-palette-error);
}
.indicators-headline__text {
line-height: 1.45;
}
/* The indicators board (owner 2026-11-10). Wide: a table whose columns are the indicators and whose rows are the period (tinted, large) and the
all-time total, the scope column naming each row once with its days; every column is a subgrid of the board's three rows, so the rows line
up across columns. The adjusted guarantee is a separate navy strip: below the table, or beside it from 1700px. Compact on purpose (owner
2026-11-10: the board took too much of the first screen), so the table holds down to a 1280px window. */
.indicators-board {
display: grid;
gap: 8px;
}
.indicators-board__grid {
display: grid;
grid-template-columns: minmax(130px, auto) repeat(6, minmax(0, 1fr));
grid-template-rows: auto auto auto;
border: 1px solid var(--mud-palette-lines-default);
border-radius: var(--mud-default-borderradius);
background: var(--mud-palette-surface);
overflow: hidden;
}
.indicators-board__scopes,
.indicators-metric {
display: grid;
grid-row: 1 / span 3;
grid-template-rows: subgrid;
min-width: 0;
}
.indicators-metric {
border-left: 1px solid var(--mud-palette-lines-default);
}
.indicators-scope,
.indicators-metric__cell {
display: flex;
flex-direction: column;
justify-content: center;
gap: 1px;
padding: 6px 12px;
border-top: 1px solid var(--mud-palette-lines-default);
min-width: 0;
}
.indicators-scope--period,
.indicators-metric__cell--period {
background: rgba(var(--mud-palette-primary-rgb), 0.05);
}
.indicators-scope--period {
box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}
.indicators-scope__name {
font-size: 0.75rem;
font-weight: 700;
}
.indicators-scope__range,
.indicators-scope__hours {
font-size: 0.6875rem;
color: var(--mud-palette-text-secondary);
font-variant-numeric: tabular-nums;
}
.indicators-metric__name {
align-self: end;
padding: 8px 12px 4px;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.25;
color: var(--mud-palette-text-secondary);
}
/* The row name inside a cell: only for screen readers while the scope column names the rows, shown when the board stacks. */
.indicators-metric__scope {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.indicators-metric__value {
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.indicators-metric__cell--period .indicators-metric__value {
font-size: clamp(1rem, 1.1vw, 1.1875rem);
font-weight: 600;
line-height: 1.2;
}
.indicators-metric__cell--total .indicators-metric__value {
font-size: 0.875rem;
font-weight: 500;
line-height: 1.25;
}
.indicators-metric__detail {
font-size: 0.6875rem;
color: var(--mud-palette-text-secondary);
font-variant-numeric: tabular-nums;
}
.indicators-board__guarantee {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 2px 16px;
padding: 8px 16px;
border-radius: var(--mud-default-borderradius);
background: var(--mud-palette-primary);
color: var(--mud-palette-primary-text);
}
.indicators-board__guarantee-name {
font-size: 0.8125rem;
font-weight: 600;
}
.indicators-board__guarantee-value {
font-size: 1.125rem;
font-weight: 700;
line-height: 1.2;
font-variant-numeric: tabular-nums;
}
.indicators-board__guarantee-detail {
font-size: 0.6875rem;
opacity: 0.85;
font-variant-numeric: tabular-nums;
}
@media (min-width: 1700px) {
.indicators-board {
grid-template-columns: minmax(0, 1fr) 200px;
}
.indicators-board__guarantee {
flex-direction: column;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: center;
}
}
/* Stacked (the menu takes ~240px, so the table needs a window wider than 1280px): the two row names with their days head the board side by
side, then one block per indicator, each naming its two rows. */
@media (max-width: 1280px) {
.indicators-board__grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-template-rows: none;
}
.indicators-board__scopes {
grid-column: 1 / -1;
grid-row: auto;
grid-template-rows: none;
grid-template-columns: 1fr 1fr;
}
.indicators-board__corner {
display: none;
}
.indicators-scope {
border-top: 0;
}
.indicators-metric {
grid-row: auto;
grid-template-rows: none;
border-left: 0;
border-top: 1px solid var(--mud-palette-lines-default);
padding: 2px 0 6px;
}
.indicators-metric__name {
padding: 6px 12px 2px;
}
.indicators-metric__cell {
display: grid;
grid-template-columns: 4.5rem 1fr;
align-items: baseline;
column-gap: 8px;
padding: 2px 12px;
border-top: 0;
background: none;
}
.indicators-metric__scope {
position: static;
width: auto;
height: auto;
overflow: visible;
clip: auto;
font-size: 0.6875rem;
color: var(--mud-palette-text-secondary);
}
.indicators-metric__detail {
grid-column: 2;
}
}
@media (max-width: 600px) {
.indicators-board__scopes {
grid-template-columns: 1fr;
}
}
/* The ruler: labels float above and below a 14px bar; labels, markers and zones are all positioned as a percentage of the same box (the scale, as wide as the track), labels centred by a -50% shift. */
.indicators-gauge {
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px 20px;
border: 1px solid var(--mud-palette-lines-default);
border-radius: var(--mud-default-borderradius);
background: var(--mud-palette-surface);
}
.indicators-gauge__title {
font-weight: 600;
}
.indicators-gauge__scale {
position: relative;
padding: 44px 0 28px;
}
.indicators-gauge__track {
position: relative;
height: 14px;
border-radius: 7px;
background: var(--mud-palette-lines-default);
}
.indicators-gauge__zone {
position: absolute;
top: 0;
bottom: 0;
left: 0;
}
.indicators-gauge__zone--neutral {
width: 100%;
border-radius: 7px;
background: var(--mud-palette-text-secondary);
opacity: 0.35;
}
.indicators-gauge__zone--ok {
border-radius: 7px 0 0 7px;
background: var(--mud-palette-success);
}
.indicators-gauge__zone--over {
border-radius: 0 7px 7px 0;
background: var(--mud-palette-error);
}
.indicators-gauge__tick {
position: absolute;
top: -6px;
bottom: -6px;
width: 2px;
margin-left: -1px;
background: var(--mud-palette-text-primary);
}
.indicators-gauge__marker {
position: absolute;
top: 50%;
width: 18px;
height: 18px;
margin: -9px 0 0 -9px;
border: 3px solid var(--mud-palette-surface);
border-radius: 50%;
background: var(--mud-palette-text-primary);
box-shadow: 0 0 0 1px var(--mud-palette-text-primary);
}
.indicators-gauge__marker--hollow {
background: var(--mud-palette-surface);
border-color: var(--mud-palette-error);
box-shadow: none;
}
.indicators-gauge__label {
position: absolute;
bottom: calc(100% - 28px);
transform: translateX(-50%);
white-space: nowrap;
font-size: 0.75rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.indicators-gauge__label--far {
bottom: calc(100% - 8px);
color: var(--mud-palette-error);
}
.indicators-gauge__label--below {
top: calc(100% - 20px);
bottom: auto;
color: var(--mud-palette-text-secondary);
}
.indicators-gauge__ends {
display: flex;
justify-content: space-between;
font-size: 0.6875rem;
color: var(--mud-palette-text-secondary);
}
/* The guarantee panel: two cards side by side, one under the other on narrow screens. */
.indicators-guarantee {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
gap: 12px;
}
.indicators-guarantee__card {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
padding: 16px 20px;
}
.indicators-steps {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
padding-left: 22px;
}
.indicators-steps__item {
display: list-item;
padding-left: 4px;
}
.indicators-steps__item::marker {
font-weight: 700;
color: var(--mud-palette-text-secondary);
}
.indicators-steps__formula {
display: block;
font-size: 0.8125rem;
color: var(--mud-palette-text-secondary);
}
.indicators-steps__value {
font-variant-numeric: tabular-nums;
}
.indicators-bands {
overflow-x: auto;
}
.indicators-bands th,
.indicators-bands td {
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.indicators-bands__row--current td {
font-weight: 700;
background: rgba(var(--mud-palette-primary-rgb), 0.1);
}
.indicators-registration {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 8px 16px;
margin: 0;
}
.indicators-registration dt {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--mud-palette-text-secondary);
}
.indicators-registration dd {
margin: 0;
font-variant-numeric: tabular-nums;
}
/* Charts: a paper with the title and the chart, a small gap between the stacked blocks. */
.indicators-chart {
min-width: 0;
padding: 16px 20px;
}
.indicators-chart__title {
margin-bottom: 8px;
}
.indicators-small-charts {
display: flex;
flex-direction: column;
gap: 4px;
}
.indicators-small-chart__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 4px 16px;
}
.indicators-small-chart__name {
font-weight: 600;
}
.indicators-small-chart__unit,
.indicators-small-chart__range {
font-size: 0.75rem;
font-weight: 400;
color: var(--mud-palette-text-secondary);
font-variant-numeric: tabular-nums;
}
.indicators-notes {
padding: 16px 20px;
}
/* The tabs under the cards (owner 2026-11-06): each panel stacks its blocks with the page's own gap. */
.indicators-tabs__panel {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
}
.indicators-notes p {
margin: 8px 0 0;
line-height: 1.55;
}
/* The hour card under the mouse in every Indicadores chart (owner 2026-11-10); ApexCharts draws its box and theme around it. */
.indicators-tooltip {
display: flex;
flex-direction: column;
gap: 3px;
padding: 8px 12px;
font-size: 0.8125rem;
font-variant-numeric: tabular-nums;
}
.indicators-tooltip__hour {
margin-bottom: 2px;
color: var(--mud-palette-text-secondary);
}
.indicators-tooltip__row,
.indicators-tooltip__pending {
display: flex;
align-items: center;
gap: 6px;
}
.indicators-tooltip__pending {
font-weight: 600;
}
.indicators-tooltip__marker {
width: 10px;
height: 10px;
border-radius: 2px;
flex: none;
}
.indicators-tooltip__value {
font-weight: 600;
}