/* ── AssetMonitoring/Components/AssetMonitoringComponent.razor ── */
/*
 * :root completo eliminado: todos sus valores (--kpi-primary var(--atlas-blue-600), --kpi-success/warning/danger,
 * --kpi-info, --card-bg, --body-bg var(--atlas-gray-100), --text-primary, --text-secondary) son BYTE-IDÉNTICOS al
 * canónico (css/components/kpiDashboard.css).
 * .asset-dashboard eliminado (idéntico, salvo background-color vs background shorthand — mismo
 * resultado). .kpi-stat-card eliminado (el flex-direction:row extra es el valor por defecto de
 * cualquier flex container, no-op). .kpi-stat-card::after/.kpi-icon-wrapper/.kpi-content/.kpi-value/
 * .kpi-label/.accent-primary/.accent-success/.accent-warning/.accent-danger/.accent-info eliminados:
 * BYTE-IDÉNTICOS al canónico (incluida la opacidad de ::after y el --atlas-color-primary-soft, que
 * resuelve al mismo var(--atlas-color-primary-soft)).
 * .dashboard-banner/.banner-title/.banner-subtitle eliminados: solo drift de margin-bottom/font-size/
 * line-height/margin-top sin justificación — gana el canónico.
 * .dashboard-card se mantiene INLINE (parcial) en AssetMonitoringComponent.razor: necesita
 * display:flex;flex-direction:column para que .card-body-clean (flex-grow:1) rellene el alto
 * restante bajo .card-header-clean; moverlo aquí forzaría flex-column en TODO .dashboard-card de
 * la app (fuga global). El resto de propiedades (box-shadow, hover, height:100%, overflow) son
 * idénticas al canónico y ya las cubre kpiDashboard.css.
 * .leaflet-popup-content-wrapper/.leaflet-popup-tip y .pagination(.page-link/.page-item.*) se
 * mantienen INLINE: son selectores genéricos de librerías compartidas (Leaflet / Bootstrap
 * pagination) usados por otras páginas (p.ej. QatarPM también pinta popups Leaflet) — globalizarlos
 * cambiaría su aspecto en cualquier mapa o tabla paginada de la app.
 */

.card-header-clean {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    flex-shrink: 0;
}

.card-title-clean {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-body-clean {
    padding: 1.5rem;
    flex-grow: 1;
    overflow: hidden;
}

/* Map */
.map-header-clean {
    background: var(--atlas-white);
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--atlas-gray-200);
    border-radius: 12px 12px 0 0;
    font-weight: 700;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.map-wrapper {
    position: relative;
    z-index: 1;
    height: 500px; /* Fixed height */
}

#assetMap {
    height: 100%;
    width: 100%;
    border-radius: 0 0 12px 12px;
}

/* Right Sidebar Widgets */
.sidebar-widget {
    margin-bottom: 1.5rem;
}

.sidebar-widget-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.weather-widget {
    background: linear-gradient(135deg, var(--atlas-blue-500) 0%, var(--atlas-blue-600) 100%);
    color: white;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}

.weather-temp {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0.5rem 0;
}

.weather-desc {
    opacity: 0.9;
    font-size: 0.9rem;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-input, .filter-select {
    background: var(--atlas-white);
    border: 1px solid var(--atlas-gray-200);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 0.625rem;
    font-size: 0.875rem;
    width: 100%;
}

.filter-input:focus, .filter-select:focus {
    border-color: var(--kpi-primary);
    outline: none;
    box-shadow: 0 0 0 2px var(--atlas-color-primary-soft);
}

/* Chart List */
#contractorList {
    max-height: 300px;
    overflow-y: auto;
}

/* Table */
.asset-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.asset-table th {
    background: var(--atlas-gray-50);
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    padding: 1rem;
    border-bottom: 1px solid var(--atlas-gray-200);
}

.asset-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--atlas-gray-100);
    color: var(--text-primary);
    font-size: 0.875rem;
    vertical-align: middle;
}

.asset-table tr:hover td {
    background: var(--atlas-gray-50);
}