.login-card .ghost {
  border-color: #cad3e1;
  color: #53647b;
  background: #fff;
}

.login-card .ghost:hover {
  border-color: var(--primary);
  color: var(--primary);
}

body {
  overflow-x: hidden;
}

.metric-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .metric-grid { grid-template-columns: 1fr; }
  .mode-banner button,
  .section-head .updated {
    display: none;
  }

  .section-head {
    align-items: flex-start;
  }
}
/* 角色授權選單與舊功能承載區 */
.nav {
  overflow-y: auto;
  min-height: 0;
  padding-right: 3px;
}

.nav-group {
  margin: 12px 10px 1px;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

.nav-loading,
.nav-empty {
  margin: 8px;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.6;
}

.nav .nav-item { width: 100%; }

.legacy-view {
  height: calc(100vh - 92px);
  padding-top: 20px;
}

.legacy-view.active { display: block; }

#legacyFrame {
  width: 100%;
  height: 100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

@media (max-width: 760px) {
  .legacy-view { height: calc(100vh - 76px); }
}

/* 設備監控狀態：正常綠、離線橘、異常紅。 */
.status.offline {
  background: #fff4df;
  color: #b96808;
}

.status.abnormal {
  background: #fff0f3;
  color: #ce365a;
}

.device-card.state-offline { border-color: #f2cb86; }
.device-card.state-abnormal { border-color: #f2a4b7; box-shadow: 0 18px 45px rgba(206, 54, 90, .1); }
.device-card.state-offline .device-symbol { background: #fff4df; color: #b96808; }
.device-card.state-abnormal .device-symbol { background: #fff0f3; color: #ce365a; }

/* 每個感測數值顯示最後一次資料上傳時間。 */
.sensor-upload-time {
  display: block;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #e6ebf2;
  color: #8492a6;
  font-size: 10px;
  line-height: 1.35;
  text-align: right;
  white-space: nowrap;
}

/* 精簡設備卡片後，突出即時感測數值。 */
.device-card > .sensor-list { margin-top: 20px; }
.device-card .sensor { padding: 16px; }
.device-card .sensor > small { font-size: 12px; }
.device-card .sensor > strong {
  margin-top: 10px;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -.02em;
}
.device-card .sensor > strong small {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0;
}
.sensor-control { display: flex; flex-direction: column; }
.sensor-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  margin-top: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #66758b;
  font-weight: 800;
}
.sensor-switch > span {
  position: relative;
  width: 52px;
  height: 29px;
  border-radius: 999px;
  background: #c8ced7;
  box-shadow: inset 0 0 0 1px rgba(20, 34, 56, .08);
  transition: .2s ease;
}
.sensor-switch > span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(20, 34, 56, .25);
  transition: .2s ease;
}
.sensor-switch.on { color: #13865f; }
.sensor-switch.on > span { background: #18a874; }
.sensor-switch.on > span::after { transform: translateX(23px); }
.sensor-switch:focus-visible > span { outline: 3px solid rgba(37, 99, 235, .25); outline-offset: 2px; }
.sensor-switch:disabled { cursor: not-allowed; opacity: .48; }
.sensor-control .sensor-upload-time { margin-top: auto; padding-top: 12px; }
.device-name-line { display: flex; align-items: center; gap: 7px; }
.device-name-line h3 { margin-right: 0; }
.device-name-edit {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  flex: none;
  padding: 0;
  border: 1px solid #dbe3ee;
  border-radius: 8px;
  background: #fff;
  color: #718096;
  font-size: 14px;
  transition: .18s ease;
}
.device-name-edit:hover { border-color: #8cb2f9; background: #f4f8ff; color: #2563eb; }
.device-name-dialog { width: min(540px, 94vw); }
.device-name-dialog > label { display: grid; gap: 8px; margin-top: 20px; color: #53627a; font-size: 13px; font-weight: 800; }
.device-name-dialog input, .device-name-dialog select { height: 49px; padding: 0 14px; border: 1px solid #dbe3ee; border-radius: 11px; outline: 0; color: var(--ink); background: #fff; }
.device-name-dialog input:focus, .device-name-dialog select:focus { border-color: #4384f5; box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.device-name-help { margin: 12px 0 0; color: #718096; font-size: 11px; line-height: 1.6; }
.sensor-name-line { display: flex; align-items: center; gap: 7px; min-width: 0; }
.sensor-name-line > small { flex: 1; }
.sensor-name-edit { flex: none; width: 25px; height: 25px; border: 0; border-radius: 7px; background: transparent; color: #8291a8; font-size: 14px; padding: 0; }
.sensor-name-edit:hover { color: var(--primary); background: var(--primary-soft); }

/* 依需求移除所有頁面的權限連線橫幅與側欄 API 狀態文字。 */
.mode-banner,
.sidebar-foot .connection {
  display: none !important;
}

@media (max-width: 760px) {
  .device-card .sensor > strong { font-size: 25px; }
}