/* PlantSupport Functional 2.2.1
   Только раскладка новых функций. Цвета, карточки и исходная тема не меняются. */

.functional-compact-header {
    padding-top: 12px;
    padding-bottom: 12px;
    gap: 12px;
}

#headerFirmwareVersion[role="button"] {
    cursor: pointer;
}

#headerFirmwareVersion[role="button"]:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.functional-inline-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px 42px;
    gap: 8px;
    width: 100%;
    align-items: start;
}

.functional-inline-editor textarea {
    min-height: 92px;
    resize: vertical;
}

.functional-inline-editor button {
    width: 42px;
    min-width: 42px;
    min-height: 42px;
    margin: 0;
    padding: 0;
}

.functional-toast-stack {
    position: fixed;
    z-index: 1400;
    top: 18px;
    right: 18px;
    display: grid;
    gap: 10px;
    width: min(390px, calc(100vw - 36px));
    pointer-events: none;
}

.functional-toast {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px;
    gap: 10px;
    align-items: center;
    margin: 0;
    padding: 14px 14px 14px 16px;
    pointer-events: auto;
}

.functional-toast-copy {
    white-space: pre-line;
    line-height: 1.5;
}

.functional-toast-close {
    width: 36px;
    min-width: 36px;
    min-height: 36px;
    margin: 0;
    padding: 0;
}

.functional-dialog-message {
    white-space: pre-line;
}

.functional-dialog-field {
    margin: 16px 0;
}

.functional-dialog-field textarea {
    min-height: 120px;
}

.functional-more-button {
    display: none;
}

.functional-more-menu {
    position: fixed;
    z-index: 130;
    width: min(310px, calc(100vw - 24px));
}

.functional-more-menu .header-plant-option {
    grid-template-columns: minmax(0, 1fr) 22px;
}

.functional-sensor-panel {
    scroll-margin-top: 170px;
}

.functional-sensor-global-actions {
    margin-top: 14px;
}

.functional-sensor-list {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.functional-sensor-row {
    display: grid;
    grid-template-columns: minmax(190px, 0.8fr) minmax(0, 2fr);
    gap: 14px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
}

.functional-sensor-copy {
    display: grid;
    gap: 5px;
}

.functional-sensor-copy small {
    color: var(--muted);
    line-height: 1.4;
}

.functional-sensor-actions {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    align-items: center;
}

.functional-sensor-actions button,
.functional-sensor-actions select {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    margin: 0;
}

@media (max-width: 980px) {
    .functional-sensor-row {
        grid-template-columns: 1fr;
    }

    .functional-sensor-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .functional-compact-header {
        padding: 10px 12px;
    }

    .dashboard-tabs .tab-button[data-tab-button="settings"],
    .dashboard-tabs .tab-button[data-tab-button="diagnostics"],
    .dashboard-tabs .tab-button[data-tab-button="firmware"],
    .dashboard-tabs .tab-button[data-tab-button="telegram"],
    .dashboard-tabs .tab-button[data-tab-button="events"] {
        display: none !important;
    }

    .functional-more-button:not([hidden]) {
        display: block;
    }

    .functional-toast-stack {
        top: 12px;
        right: 12px;
        width: calc(100vw - 24px);
    }
}

@media (max-width: 560px) {
    .functional-inline-editor {
        grid-template-columns: minmax(0, 1fr) 40px 40px;
    }

    .functional-sensor-actions {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .functional-compact-header .header-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
        width: 100%;
    }

    .functional-compact-header .header-plant-switcher {
        grid-column: 1 / -1;
    }

    .functional-compact-header .online,
    .functional-compact-header .admin-button {
        width: 100%;
        min-width: 0;
    }

    .overall-status-heading .overall-status-title,
    .overall-status-heading .overall-status-message {
        display: block;
    }
}

@media (max-width: 760px) {
    .dashboard-tabs {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        overflow: visible;
    }

    .dashboard-tabs > .tab-button,
    .dashboard-tabs > .functional-more-button {
        width: 100%;
        min-width: 0;
        padding-right: 7px;
        padding-left: 7px;
        font-size: 12px;
        white-space: nowrap;
    }
}

.functional-more-menu {
    left: auto;
}