/* Dashboard responsive behavior. Keep this file last in the numbered sequence. */

@media (max-width: 1200px) {
    .dashboard-top-grid {
        grid-template-columns: 1fr;
    }

    .overview-agent-grid,
    .chiller-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .overview-summary-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .agent-page-grid,
    .chiller-two-column {
        grid-template-columns: 1fr;
    }

    .dashboard-expanded-overview {
        grid-template-columns: repeat(3, minmax(180px, 1fr));
        overflow-x: auto;
    }

    .dashboard-digital-twin {
        min-height: 720px;
    }
}

@media (max-width: 768px) {
    .dashboard-shell {
        padding: 16px;
    }

    .dashboard-context-bar {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 12px;
    }

    .dashboard-context-primary {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .dashboard-view-switch {
        width: 100%;
    }

    .dashboard-view-mode-button {
        flex: 1 1 50%;
    }

    .dashboard-digital-twin {
        min-height: 0;
        padding: 14px;
    }

    .digital-twin-toolbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .digital-twin-config-summary {
        width: 100%;
        justify-content: space-between;
        text-align: left;
    }

    .digital-twin-floorplan {
        min-height: 660px;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(440px, 1fr) auto;
    }

    .digital-twin-support-rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: 1fr;
    }

    .digital-twin-device {
        padding: 9px;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto auto;
        text-align: center;
    }

    .digital-twin-device-heading {
        justify-content: center;
    }

    .digital-twin-device-visual {
        width: 44px;
        height: 38px;
        margin: 4px auto;
        grid-row: auto;
    }

    .digital-twin-device-detail,
    .digital-twin-device-status {
        text-align: center;
    }

    .digital-twin-chilled-water-line {
        display: none;
    }

    .digital-twin-metric-rail {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(188px, auto) repeat(6, minmax(72px, auto));
    }

    .digital-twin-legend-metric {
        grid-column: auto;
    }

    .dashboard-context-title {
        font-size: 22px;
    }

    .dashboard-expanded-overview {
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .expanded-overview-card,
    .dashboard-expanded-agent-card {
        min-height: 190px;
    }

    .dashboard-account-label {
        font-size: 12px;
    }

    .dashboard-account-value {
        max-width: 130px;
        font-size: 13px;
    }

    .dashboard-chat-header,
    .dashboard-chat-history {
        padding-left: 18px;
        padding-right: 18px;
    }

    .dashboard-chat-bubble {
        max-width: 86%;
    }

    .dashboard-chat-widget {
        right: 12px;
        bottom: 12px;
    }

    .dashboard-chat-launcher {
        width: 62px;
        height: 62px;
    }

    .dashboard-chat-composer {
        left: 16px;
        right: 16px;
        bottom: 16px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(18px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    }

    .dashboard-chat-composer.dashboard-chat-composer-mobile-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .dashboard-chat-send {
        right: 8px;
        width: 36px;
        min-width: 36px;
    }

    .dashboard-controls-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-current-time-control {
        align-items: flex-start;
        min-width: 0;
    }

    .dashboard-time-text {
        font-size: 40px;
    }

    .overview-agent-grid,
    .dashboard-kpi-grid,
    .chiller-kpi-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-kpi-item,
    .dashboard-kpi-item:first-child,
    .dashboard-kpi-item:last-child {
        padding: 20px 0;
    }

    .dashboard-kpi-item + .dashboard-kpi-item {
        border-top: 1px solid var(--edm-outline);
        border-left: 0;
    }

    .overview-summary-card {
        grid-template-columns: 1fr;
    }

    .agent-card-title {
        font-size: 24px;
    }

    .agent-metric-value {
        font-size: 44px;
    }
}