/* Map height is 100vh minus the navbar height (56px) */
#map { height: calc(100vh - 56px); }
/* 自定義樣式 */
.glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 確保地圖在手機上也能滿版 */
@media (max-width: 768px) {
    .container-fluid { padding: 0; }
    #map { height: 80vh; }
}

/* 電量顏色輔助類別 */
.bg-green { background-color: #d4edda !important; color: #155724 !important; }
.bg-yellow { background-color: #fff3cd !important; color: #856404 !important; }
.bg-red { background-color: #f8d7da !important; color: #721c24 !important; }

/* --- Node Card Styles (Extracted from Dashboard) --- */
:root { --glass: rgba(255, 255, 255, 0.9); }

.node-card { 
    background: var(--glass); 
    border: none; 
    border-radius: 15px; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.05); 
    transition: transform 0.3s ease; 
    margin-bottom: 20px; 
}
.node-card:hover { transform: translateY(-5px); }

.status-badge { 
    padding: 5px 12px; 
    border-radius: 20px; 
    font-size: 0.85rem; 
    font-weight: 600; 
}

/* Dark Mode Node Card */
body.dark-mode .node-card { 
    background: rgba(30, 30, 30, 0.8); 
    box-shadow: 0 4px 20px rgba(0,0,0,0.5); 
}
body.dark-mode .node-card .card-header h5 a { color: #e0e0e0 !important; }

/* Offline State */
.node-card.offline { 
    background-color: #d1d5db; 
    border-color: #adb5bd; 
    opacity: 0.9; 
}
.node-card.offline .card-title a,
.node-card.offline .card-title { color: #6c757d !important; }
.node-card.offline .status-badge { opacity: 0.6; }

body.dark-mode .node-card.offline { 
    background-color: #2b2b2b; 
    border: 1px solid #dc3545; 
    opacity: 0.85; 
}

/* Offline Chart Grayscale */
.node-card.offline canvas {
    filter: grayscale(100%) opacity(0.5);
}

/* Offline Watermark */
.offline-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    font-weight: bold;
    color: rgba(108, 117, 125, 0.4);
    pointer-events: none;
    z-index: 10;
    white-space: nowrap;
}
body.dark-mode .offline-watermark {
    color: rgba(255, 255, 255, 0.2);
}