[data-theme] .modal-card,
[data-theme] .modal-card .modal-card-body,
[data-theme] .modal-card .modal-card-head,
[data-theme] .modal-card .modal-card-foot {
    background: var(--surface, #ffffff);
    color: var(--text-primary, #222222);
}

    [data-theme] .modal-card .modal-card-head.has-background-danger {
        background: var(--danger, #A92C4C) !important;
        color: var(--button-danger-text, #ffffff) !important;
    }

    [data-theme] .modal-card .modal-card-head {
        background: var(--modal-card-head-bg, #222222);
        color: var(--modal-card-head-text, #ffffff);
    }

    [data-theme] .modal-card .modal-card-title {
        color: var(--modal-card-head-text, #ffffff);
    }

[data-theme] .modal-background {
    background-color: var(--modal-overlay, rgba(0, 0, 0, 0.35));
}

[data-theme] .modal-card :focus {
    outline: none;
    box-shadow: 0 0 0 0.125em color-mix(in srgb, var(--primary, #808080) 18%, transparent);
}

[data-theme] .modal-card .table {
    width: 100%;
}

    [data-theme] .modal-card .table td,
    [data-theme] .modal-card .table th {
        vertical-align: middle;
    }

/* Telemetry chart modal */
.telemetry-modal-card {
    width: min(900px, 96vw);
    max-height: 90vh;
}

.telemetry-modal-card .modal-card-body {
    overflow-y: auto;
}

.telemetry-chart-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

@media (max-width: 640px) {
    .telemetry-chart-grid {
        grid-template-columns: 1fr;
    }
}

.telemetry-chart-wrapper {
    height: 220px;
    position: relative;
    overflow: hidden;
}

.telemetry-chart-wrapper canvas {
    display: block;
}

/* Date/time range selection toolbar */
.telemetry-range-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1.25rem;
    justify-content: flex-start;
}

/* Bulma gives each .buttons child a 0.5rem bottom margin (normally cancelled by a
   negative margin on the container). Our mb-0 zeroes that container margin, leaving
   phantom space below the buttons that pushes them above the From/To fields under
   flex-end. Zero the child margins so the presets bottom-align with the date inputs. */
.telemetry-range-bar .buttons {
    margin-bottom: 0;
}

.telemetry-range-bar .buttons .button {
    margin-bottom: 0;
}

.telemetry-range-custom {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
}

.telemetry-range-custom .field {
    margin-bottom: 0;
}

.telemetry-range-custom .input {
    width: auto;
}