/* ==========================================================================
   components.css — Reusable pieces: buttons, fields, cards, modals, toasts,
   tables, badges and the empty/error states.
   ========================================================================== */

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    font-family: inherit;
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text);
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}

.btn:hover:not(:disabled) {
    background: var(--surface-hover);
}

.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn--primary {
    color: var(--accent-contrast);
    background: var(--accent);
    border-color: var(--accent);
}

.btn--primary:hover:not(:disabled) {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.btn--danger {
    color: #ffffff;
    background: var(--danger);
    border-color: var(--danger);
}

.btn--danger:hover:not(:disabled) {
    filter: brightness(1.1);
}

.btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-muted);
}

.btn--ghost:hover:not(:disabled) {
    color: var(--text);
    background: var(--surface-hover);
}

.btn--block {
    width: 100%;
}

.btn--sm {
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm);
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.icon-btn:hover {
    color: var(--text);
    background: var(--surface-hover);
}

/* --- Form fields --- */
.field {
    margin-bottom: var(--sp-4);
}

.field__label {
    display: block;
    margin-bottom: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted);
}

.field__input,
.field__select {
    width: 100%;
    padding: var(--sp-3);
    font-family: inherit;
    font-size: var(--fs-base);
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition);
}

.field__input:focus,
.field__select:focus {
    border-color: var(--accent);
    outline: none;
}

.field__input::placeholder {
    color: var(--text-faint);
}

.field__hint {
    margin-top: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--text-faint);
}

/* --- Inline message (form errors) --- */
.message {
    padding: var(--sp-3);
    margin-bottom: var(--sp-4);
    font-size: var(--fs-sm);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
}

.message--error {
    color: var(--danger);
    background: var(--danger-dim);
    border-color: var(--danger);
}

.message[hidden] {
    display: none;
}

/* --- Card --- */
.card {
    padding: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* --- Badges --- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 2px var(--sp-2);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    background: var(--surface-hover);
    color: var(--text-muted);
}

.badge--accent {
    color: var(--accent);
    background: var(--accent-dim);
}

.badge--normal {
    color: var(--status-normal);
    background: var(--status-normal-dim);
}

.badge--warning {
    color: var(--status-warning);
    background: var(--status-warning-dim);
}

.badge--critical {
    color: var(--status-critical);
    background: var(--status-critical-dim);
}

/* --- Table --- */
.table-wrap {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.table th,
.table td {
    padding: var(--sp-3);
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.table th {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-faint);
    background: var(--surface-raised);
}

.table tbody tr:last-child td {
    border-bottom: none;
}

.table tbody tr:hover td {
    background: var(--surface-raised);
}

.table__mono {
    font-family: var(--font-mono);
    color: var(--text-muted);
}

/* --- Empty state --- */
.empty {
    padding: var(--sp-8) var(--sp-4);
    text-align: center;
    color: var(--text-muted);
}

.empty__title {
    margin-bottom: var(--sp-2);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text);
}

/* --- Modal --- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    background: var(--scrim);
}

.modal {
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border-bottom: 1px solid var(--border);
}

.modal__title {
    font-size: var(--fs-md);
}

.modal__body {
    padding: var(--sp-4);
}

.modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
    padding: var(--sp-4);
    border-top: 1px solid var(--border);
}

/* --- Toasts --- */
.toast-stack {
    position: fixed;
    right: var(--sp-4);
    bottom: var(--sp-4);
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    max-width: calc(100vw - var(--sp-8));
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--text);
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    animation: toast-in 180ms ease;
}

.toast--success {
    border-left-color: var(--status-normal);
}

.toast--error {
    border-left-color: var(--danger);
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Loading --- */
.loading {
    padding: var(--sp-6);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

/* --- Panel grid (Início) --- */
.view-stamp {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    white-space: nowrap;
}

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-5);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
    font-size: var(--fs-sm);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.legend__item {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.legend__dot {
    width: 12px;
    height: 12px;
    flex: none;
    border-radius: 3px;
}

.legend__dot--normal {
    background: var(--status-normal);
}

.legend__dot--warning {
    background: var(--status-warning);
}

.legend__dot--critical {
    background: var(--status-critical);
}

.legend__hint {
    color: var(--text-faint);
    font-size: var(--fs-xs);
}

/* Every panel has the same viewBox, so the grid is a single row of equal
   columns: one track per panel. auto-fit collapses any track left empty,
   which keeps the row flush to the right edge. The 200px floor fits the seven
   panels on one row from roughly 1768px of viewport upwards; below that the
   row wraps instead of squeezing the drawings into illegible slivers. */
.panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sp-3);
    align-items: start;
}

.panel {
    min-width: 0;
}

.panel-svg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

@media (max-width: 599px) {
    .panel-grid {
        grid-template-columns: 1fr;
        max-width: 300px;
        margin: 0 auto;
    }
}

/* --- Toolbar (filters above a table) --- */
.toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-4);
}

.toolbar__label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted);
}

.toolbar__spacer {
    flex: 1;
    min-width: 0;
}

.field__select--inline {
    width: auto;
    min-width: 170px;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm);
}

/* --- Table extras --- */
.table__strong {
    font-weight: 600;
}

.table__wrap {
    white-space: normal;
    min-width: 220px;
}

.table__actions {
    display: flex;
    gap: var(--sp-1);
}

.table__note {
    font-size: var(--fs-xs);
    color: var(--text-faint);
}

.icon-btn--sm {
    width: 30px;
    height: 30px;
}

.icon-btn--danger:hover {
    color: var(--danger);
    background: var(--danger-dim);
}

/* --- Pagination --- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-3);
}

.pagination__info {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.pagination__controls {
    display: flex;
    gap: var(--sp-2);
}

/* --- Panel detail page --- */
.panel-detail {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    gap: var(--sp-4);
}

.toolbar--range {
    margin-bottom: 0;
}

.toolbar__status {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.toolbar__note {
    font-size: var(--fs-xs);
    color: var(--status-warning);
}

.field__input--inline {
    width: auto;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm);
}

/* --- Range field: our own dd/mm/aaaa text plus a hidden native calendar --- */
.datetime-field {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
}

/* Read-only on purpose: the day comes from the calendar, never from typing.
   The pointer says so, and the text stays selectable-looking rather than
   greyed out, since the field is not disabled. */
.datetime-field__text {
    width: 8.5em;
    font-family: var(--font-mono);
    cursor: pointer;
}

/* The native control exists only to open the picker. It cannot be display:none
   or hidden: showPicker() refuses to run on a field that is not rendered, so it
   is parked under the button at one pixel and made invisible instead. */
.datetime-field__picker {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* Browsers without showPicker: the read-only field would be a dead end, so the
   native control takes the slot. Its layout follows the browser locale, which
   is the compromise for keeping the screen usable at all. */
.datetime-field--native .datetime-field__text,
.datetime-field--native .datetime-field__button {
    display: none;
}

.datetime-field--native .datetime-field__picker {
    position: static;
    width: auto;
    height: auto;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border);
    opacity: 1;
    pointer-events: auto;
}

/* --- The four reading tables --- */
.detail-tables {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3);
}

.reading-table {
    padding: var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

.reading-table:hover {
    border-color: var(--border-strong);
}

.reading-table.is-selected {
    border-color: var(--accent);
    background: var(--accent-dim);
}

.reading-table__title {
    margin-bottom: var(--sp-2);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-faint);
}

.reading-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-2);
    border-radius: var(--radius-sm);
}

.reading-row + .reading-row {
    border-top: 1px solid var(--border);
}

.reading-table[data-group="measures"] .reading-row {
    cursor: pointer;
}

.reading-table[data-group="measures"] .reading-row:hover {
    background: var(--surface-hover);
}

.reading-row.is-selected {
    background: var(--accent-dim);
    box-shadow: inset 2px 0 0 var(--accent);
}

.reading-row__label {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.reading-row__value {
    font-family: var(--font-mono);
    font-size: var(--fs-base);
    font-weight: 600;
    white-space: nowrap;
}

.reading--normal {
    color: var(--status-normal);
}

.reading--warning {
    color: var(--status-warning);
}

.reading--critical {
    color: var(--status-critical);
}

/* --- Chart: fills everything between the tables and the footer --- */
.detail-chart {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 260px;
    padding: var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.detail-chart__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.detail-chart__title {
    font-size: var(--fs-md);
}

.detail-chart__hint {
    font-size: var(--fs-xs);
    color: var(--text-faint);
}

.detail-chart__canvas {
    position: relative;
    flex: 1;
    min-height: 0;
}

.detail-chart__state {
    padding: var(--sp-6);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.detail-chart__state[hidden] {
    display: none;
}

/* --- Summary tables under the chart --- */
/* Not clickable, unlike the reading tables above: these report the range, they
   do not select anything. Same grid so both bands line up column by column. */
.detail-summary {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.detail-summary__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.detail-summary__title {
    font-size: var(--fs-md);
}

/* Shows the window the numbers refer to, which is the chart's x axis and not
   the range inputs whenever the user has zoomed in. */
.detail-summary__hint {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-faint);
}

.summary-table {
    padding: var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.summary-table__title {
    margin-bottom: var(--sp-2);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-faint);
}

.summary-row {
    display: grid;
    grid-template-columns: minmax(3.5em, auto) 1fr 1fr;
    align-items: baseline;
    gap: var(--sp-2);
    padding: var(--sp-2) 0;
}

.summary-row + .summary-row {
    border-top: 1px solid var(--border);
}

.summary-row--head {
    padding-top: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-faint);
}

.summary-row__label {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

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

.summary-cell__value {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
}

.summary-cell__time {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-faint);
    white-space: nowrap;
}

/* The accumulated energy is one number for the window, not a pair, so it takes
   the space of both columns. */
.summary-cell--wide {
    grid-column: span 2;
}

/* Doubled through --summary-total-fs. At that size the label and the value no
   longer share a line inside a quarter-width card, so this row drops the
   columns and stacks. The timestamps stay small: they are a footnote to the
   number, not part of it. */
.summary-row--total {
    grid-template-columns: 1fr;
    gap: 2px;
}

.summary-row--total .summary-cell--wide {
    grid-column: auto;
}

.summary-row--total .summary-row__label,
.summary-row--total .summary-cell__value {
    font-size: var(--summary-total-fs);
    line-height: 1.2;
}

.summary-row--total .summary-cell__value {
    color: var(--accent);
}

/* --- Clickable panels on the dashboard grid --- */
.panel--clickable {
    cursor: pointer;
    border-radius: var(--radius);
    transition: transform var(--transition), box-shadow var(--transition);
}

.panel--clickable:hover {
    transform: translateY(-2px);
}

.panel--clickable:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* --- Tooltip: single balloon that follows the cursor --- */
/* Sits above the content and the sidebar, but below modals and toasts. It
   never receives pointer events, so it cannot block the click it announces. */
.tooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
    padding: 0.35em 0.7em;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    color: var(--text);
    font-size: var(--tooltip-fs);
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: var(--shadow);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
}

.tooltip.is-visible {
    opacity: 1;
    visibility: visible;
}

/* Touch screens have no hover: the balloon would only flash on tap. */
@media (hover: none) {
    .tooltip {
        display: none;
    }
}

@media (max-width: 1000px) {
    .detail-tables {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 599px) {
    .detail-tables {
        grid-template-columns: 1fr;
    }

    .panel-detail {
        gap: var(--sp-3);
    }

    .detail-chart {
        min-height: 320px;
    }
}