/* 檔案位置: assets/css/style.css */
body { font-family: 'Noto Sans TC', sans-serif; background-color: #0b1120; color: #e2e8f0; }
.tech-font { font-family: 'Orbitron', sans-serif; }
.glass-card {
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(56, 189, 248, 0.15);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
}

/* --- Role: ControlRoom (中控室) 專用樣式 --- */
.role-control-room { overflow: hidden; height: 100vh; background-color: #000; }

/* role=controlroom：隱藏主版面與 footer；page=2 時主版面嵌入 LiSA 框內 */
body.controlroom-mode #global-footer { display: none !important; }
body.controlroom-mode:not(.controlroom-page-2) #app-container { display: none !important; }

/* page=2：LiSA 外框 + admin 內容區 */
body.controlroom-page-2 #lisa-stage {
    padding: 0.75rem !important;
    display: flex !important;
    flex-direction: column !important;
}
body.controlroom-page-2 #controlroom-lisa-page1 { display: none !important; }
body.controlroom-page-2 #controlroom-admin-host {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
}
body.controlroom-page-2 #app-container {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0.5rem 0.75rem !important;
}
body.controlroom-page-2 #historyModal {
    z-index: 10050 !important;
}
body.controlroom-page-2 #section-sensors {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
body.controlroom-page-2 #section-sensors #summary-grid {
    height: auto !important;
    max-height: none !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}
body.controlroom-mode #controlroom-view {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 9999 !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #000 !important;
}
body.controlroom-mode #controlroom-view > div {
    display: flex !important;
    flex-direction: column !important;
    width: 996px !important;
    max-width: 100vw !important;
    height: 1080px !important;
    max-height: 100vh !important;
}
body.controlroom-mode #lisa-stage {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}
body.controlroom-mode:not(.controlroom-page-2) #lisa-stage {
    display: block !important;
}
body.controlroom-mode #controlroom-view .context-card,
body.controlroom-mode #card-a {
    display: block !important;
    opacity: 1 !important;
    transform: scale(1) !important;
    visibility: visible !important;
}
.role-control-room .glass-card { border-width: 2px; box-shadow: none; background: rgba(15, 23, 42, 0.9); }
.role-control-room #summary-grid { 
    height: calc(100vh - 180px);
    grid-template-columns: repeat(3, 1fr); 
    align-content: start; 
    gap: 1.5rem;
}
.role-control-room .sensor-card { 
    height: 100%; display: flex; flex-direction: column; justify-content: center; 
}
/* [V14] 縮小 ControlRoom 字體以避免破版 */
.role-control-room .sensor-name { 
    font-size: 1rem; /* 原 1.25rem */
    margin-bottom: 0.5rem; 
    opacity: 0.9; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
}
.role-control-room .sensor-value { 
    font-size: 3.5rem; /* 原 5rem，縮小以容納長數字 */
    line-height: 1.1; 
    white-space: nowrap; /* 強制不換行 */
}
.role-control-room .sensor-unit { font-size: 1.25rem; margin-top: 0.5rem; }

/* --- Role: Guard (巡檢員) 專用微調 --- */
.role-guard ::-webkit-scrollbar { width: 0px; background: transparent; }

/* 共用捲軸樣式 */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }

.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.status-online { background-color: #22c55e; box-shadow: 0 0 10px #22c55e; animation: pulse-green 2s infinite; }
.status-warning { background-color: #eab308; box-shadow: 0 0 10px #eab308; }
.status-offline { background-color: #ef4444; box-shadow: 0 0 10px #ef4444; animation: blink-red 1s infinite; }
@keyframes pulse-green { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

.tech-input { background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(56, 189, 248, 0.3); color: white; padding: 0.5rem; border-radius: 0.25rem; outline: none; width: 100%; }
.tech-btn { background: linear-gradient(45deg, #0ea5e9, #22d3ee); color: #0f172a; font-weight: bold; padding: 0.5rem 1.5rem; border-radius: 0.25rem; width: 100%; cursor: pointer; transition: transform 0.2s; }
.tech-btn:active { transform: scale(0.98); }

.fade-in { animation: fadeIn 0.3s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

.weather-icon-anim { width: 24px; height: 24px; }
.sun { animation: spin 12s linear infinite; transform-origin: center; }
@keyframes spin { 100% { transform: rotate(360deg); } }
.rain { animation: drop 1s linear infinite; }
@keyframes drop { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(10px); opacity: 0; } }
.cloud { animation: float 4s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

/* 羅盤指針動畫 */
.compass-needle-transition { transition: transform 1.5s cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: center; }