﻿/* =========================================================
   Facility details dialog
   Explicit light/dark class from ThemeService.
   ========================================================= */

.facility-details-dialog {
    --fd-bg: #ffffff;
    --fd-card-bg: #ffffff;
    --fd-muted-bg: #f1f5f9;
    --fd-border: rgba(15, 23, 42, 0.12);
    --fd-border-strong: rgba(15, 23, 42, 0.22);
    --fd-text-primary: #0f172a;
    --fd-text-muted: #64748b;
}

.facility-details-dialog-dark {
    --fd-bg: #151515;
    --fd-card-bg: #1f1f1f;
    --fd-muted-bg: #111827;
    --fd-border: rgba(255, 255, 255, 0.10);
    --fd-border-strong: rgba(255, 255, 255, 0.18);
    --fd-text-primary: #f8fafc;
    --fd-text-muted: #94a3b8;
}

.facility-details-dialog-light {
    --fd-bg: #ffffff;
    --fd-card-bg: #ffffff;
    --fd-muted-bg: #f1f5f9;
    --fd-border: rgba(15, 23, 42, 0.12);
    --fd-border-strong: rgba(15, 23, 42, 0.22);
    --fd-text-primary: #0f172a;
    --fd-text-muted: #64748b;
}

.mud-dialog.facility-details-dialog {
    background: var(--fd-bg) !important;
    color: var(--fd-text-primary) !important;
}

.facility-details-dialog .mud-dialog-title {
    padding: 20px 24px 14px 24px;
    border-bottom: 1px solid var(--fd-border);
    background: var(--fd-bg) !important;
    color: var(--fd-text-primary) !important;
}

.facility-details-dialog .mud-dialog-content {
    padding: 18px 24px 24px 24px;
    background: var(--fd-bg) !important;
    color: var(--fd-text-primary) !important;
}

.facility-details-dialog .mud-dialog-close-button {
    top: 18px;
    right: 18px;
    color: var(--fd-text-muted) !important;
}

.facility-dialog-content {
    width: min(100%, 1240px);
    min-width: 420px;
}

.facility-header-meta {
    color: var(--fd-text-muted) !important;
}

    .facility-header-meta .mud-icon-root {
        color: var(--fd-text-muted) !important;
    }

.facility-metric-card,
.facility-section-card {
    border: 1px solid var(--fd-border) !important;
    background: var(--fd-card-bg) !important;
    color: var(--fd-text-primary) !important;
    border-radius: 18px;
}

.facility-metric-card {
    padding: 18px;
    min-height: 138px;
}

.facility-section-card {
    padding: 18px;
}

    .facility-metric-card .mud-typography,
    .facility-section-card .mud-typography {
        color: inherit;
    }

.facility-metric-footer {
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--fd-muted-bg) !important;
    color: var(--fd-text-muted) !important;
    font-size: 0.875rem;
}

.facility-dialog-empty {
    padding: 16px;
    border-radius: 16px;
    border: 1px dashed var(--fd-border-strong);
    background: transparent;
    text-align: center;
}

.facility-latest-log-box {
    padding: 14px;
    border-radius: 16px;
    background: var(--fd-muted-bg) !important;
    color: var(--fd-text-primary) !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.facility-latest-log-message {
    line-height: 1.5;
    white-space: pre-wrap;
}

/* Alarm rows */
.facility-alarm-row {
    padding: 12px;
    border-radius: 16px;
    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

    .facility-alarm-row:hover {
        transform: translateY(-1px);
    }

.facility-alarm-row-error {
    border: 1px solid rgba(var(--mud-palette-error-rgb), 0.42) !important;
    background: rgba(var(--mud-palette-error-rgb), 0.07) !important;
}

    .facility-alarm-row-error:hover {
        border-color: rgba(var(--mud-palette-error-rgb), 0.70) !important;
        background: rgba(var(--mud-palette-error-rgb), 0.11) !important;
    }

.facility-alarm-row-warning {
    border: 1px solid rgba(var(--mud-palette-warning-rgb), 0.46) !important;
    background: rgba(var(--mud-palette-warning-rgb), 0.08) !important;
}

    .facility-alarm-row-warning:hover {
        border-color: rgba(var(--mud-palette-warning-rgb), 0.74) !important;
        background: rgba(var(--mud-palette-warning-rgb), 0.12) !important;
    }

.facility-alarm-indicator {
    width: 10px;
    height: 42px;
    border-radius: 999px;
    flex-shrink: 0;
}

.facility-alarm-indicator-error {
    background: var(--mud-palette-error);
}

.facility-alarm-indicator-warning {
    background: var(--mud-palette-warning);
}

.facility-alarm-title {
    font-weight: 700;
    line-height: 1.25;
}

/* Remove old styling from previous dialog version */
.facility-info-card,
.facility-summary-card,
.facility-log-card,
.facility-alarms-card,
.facility-stat-box,
.wash-count-card,
.alarm-count-card,
.hmi-status-card {
    height: auto;
    min-height: unset;
    background: unset;
    border: unset;
    padding: unset;
    border-radius: unset;
}

@media (max-width: 900px) {
    .facility-details-dialog .mud-dialog-title {
        padding: 18px 18px 12px 18px;
    }

    .facility-details-dialog .mud-dialog-content {
        padding: 16px 18px 20px 18px;
    }

    .facility-dialog-content {
        min-width: unset;
    }

    .facility-metric-card {
        min-height: unset;
    }
}

@media (max-width: 600px) {
    .facility-details-dialog .mud-dialog-title {
        padding-right: 52px;
    }
}
