/* =====================================================================
   OLIT Skin — Portainer-style shell theme
   ---------------------------------------------------------------------
   Loaded AFTER custom.css so it wins. Re-skins the whole shell:
   sidebar / top nav / panels / tables / forms / buttons / login / errors.

   設計語彙(對齊 Portainer CE):
     - 貼邊側欄,直角、無浮動陰影;整體低圓角(6px)、扁平、細框線
     - 深色為主視覺,但深/淺兩套都保留,由 html[data-skin-theme] 切換
     - 版位/按鈕布局完全不動,只換視覺;所有 --ol-* token 名稱與舊版一致
       (home.html / view.html / extapi 各頁都吃這組變數)

   舊版毛玻璃圓角風格備份於 olit-skin.classic.css,要還原直接覆蓋回來。
   ===================================================================== */

:root {
  /* ---- brand / status ---- */
  --ol-accent: #1e6fd9;
  --ol-accent-deep: #1758ad;
  --ol-accent-2: #2f9e5f;
  --ol-warn: #d9822b;
  --ol-danger: #d64550;
  --ol-blue: #1e6fd9;

  /* ---- light theme (default) ---- */
  --ol-bg: #f4f6f9;              /* 內容畫布 */
  --ol-bg-grad-1: transparent;   /* Portainer 是平色,不做光暈漸層 */
  --ol-bg-grad-2: transparent;
  --ol-rail: #ffffff;            /* 側欄 / 頂欄 / 卡片 */
  --ol-rail-border: #dde3ea;
  --ol-surface: #ffffff;
  --ol-text: #1c2430;
  --ol-muted: #6b7785;
  --ol-menu-text: #3a4655;
  --ol-menu-hover: #eef2f7;
  --ol-menu-active-bg: rgba(30, 111, 217, 0.10);
  --ol-table-line: #e7ebf1;
  --ol-table-head: #f2f5f9;
  /* 通知清單告警項的底色濃度(深色底要濃一點才看得出來) */
  --ol-msg-tint: 10%;
  --ol-msg-tint-hover: 20%;

  /* light-theme semantic button palette(扁平實色,不做漸層) */
  --ol-btn-default-bg: #ffffff;
  --ol-btn-default-border: #ccd4de;
  --ol-btn-default-text: #3a4655;
  --ol-btn-default-hover: #eef2f7;
  --ol-btn-primary-bg: #1e6fd9;
  --ol-btn-primary-hover: #1758ad;
  --ol-btn-primary-text: #ffffff;
  --ol-btn-success-bg: #2f9e5f;
  --ol-btn-success-hover: #26804d;
  --ol-btn-success-text: #ffffff;
  --ol-btn-info-bg: #1a8fa6;
  --ol-btn-info-hover: #147687;
  --ol-btn-info-text: #ffffff;
  --ol-btn-warning-bg: #d9822b;
  --ol-btn-warning-hover: #b56a20;
  --ol-btn-warning-text: #ffffff;
  --ol-btn-danger-bg: #d64550;
  --ol-btn-danger-hover: #b3353f;
  --ol-btn-danger-text: #ffffff;

  --ol-shadow: 0 1px 3px rgba(16, 24, 40, 0.10);
  --ol-radius: 6px;
  /* 基準字級。全站字級都由這個值 ±px 推導,所以四檔切換只會讓字變大變小,
     內距/寬度/版位仍是固定 px,元件的相對位置不會跑掉。 */
  --ol-fs: 14px;
  --ol-sidebar-pad: 10px;
  --ol-rail-w: 17%;              /* 側欄版位寬(展開) */
  --ol-rail-w-sm: 70px;          /* 側欄版位寬(收合) */
  --ol-topbar-h-shell: 56px;
}

:root[data-skin-theme="dark"] {
  --ol-accent: #4aa3f0;
  --ol-accent-deep: #2f7fd0;
  --ol-accent-2: #46b877;
  --ol-warn: #e0a34a;
  --ol-danger: #e2626f;
  --ol-blue: #4aa3f0;

  --ol-bg: #101317;              /* 內容畫布(比側欄再深一階) */
  --ol-bg-grad-1: transparent;
  --ol-bg-grad-2: transparent;
  --ol-rail: #1a1e25;            /* 側欄 / 頂欄 / 卡片 */
  --ol-rail-border: #2b313b;
  --ol-surface: #1a1e25;
  --ol-text: #e6eaf0;
  --ol-muted: #98a2b0;
  --ol-menu-text: #c2cad6;
  --ol-menu-hover: #262c36;
  --ol-menu-active-bg: rgba(74, 163, 240, 0.14);
  --ol-table-line: #262c35;
  --ol-table-head: #20252d;
  --ol-msg-tint: 18%;
  --ol-msg-tint-hover: 30%;

  /* dark-theme semantic button palette */
  --ol-btn-default-bg: #232932;
  --ol-btn-default-border: #39414d;
  --ol-btn-default-text: #dbe2ea;
  --ol-btn-default-hover: #2d343f;
  --ol-btn-primary-bg: #2b7fd0;
  --ol-btn-primary-hover: #3f95e4;
  --ol-btn-primary-text: #ffffff;
  --ol-btn-success-bg: #2f8f57;
  --ol-btn-success-hover: #3aa666;
  --ol-btn-success-text: #ffffff;
  --ol-btn-info-bg: #1a8299;
  --ol-btn-info-hover: #2497b0;
  --ol-btn-info-text: #ffffff;
  --ol-btn-warning-bg: #bd7526;
  --ol-btn-warning-hover: #d2872f;
  --ol-btn-warning-text: #ffffff;
  --ol-btn-danger-bg: #c14450;
  --ol-btn-danger-hover: #d4525e;
  --ol-btn-danger-text: #ffffff;

  --ol-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* ---- 字級四檔(由頂欄的「Aa」鈕切換,寫在 html 的 data-font-scale) ---- */
:root[data-font-scale="sm"] { --ol-fs: 13px; }
:root[data-font-scale="md"] { --ol-fs: 14px; }   /* 預設 */
:root[data-font-scale="lg"] { --ol-fs: 16px; }
:root[data-font-scale="xl"] { --ol-fs: 18px; }

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: ease-out;
}

body.olit-skin .left_col,
body.olit-skin .top_nav {
  view-transition-name: none;
}

/* ---------- page canvas -------------------------------------------- */
body.olit-skin {
  font-family: "Segoe UI", "Microsoft JhengHei", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--ol-fs);
  color: var(--ol-text);
  background: var(--ol-bg) !important;
  transition: background 0.2s ease, color 0.2s ease;
}
body.olit-skin.nav-md .container.body .right_col,
body.olit-skin .right_col {
  background: transparent !important;
}
body.olit-skin.nav-md .container.body .right_col {
  padding: 16px 20px 24px;
}

/* ===================================================================
   VIEWPORT LAYOUT — 固定殼、只有內容區捲動(沿用舊版做法,勿更動)
   Gentelella 的 JS 會塞 inline min-height 給 .right_col,這裡以 flex
   欄位佈局接管,避免多出整頁捲軸。
   =================================================================== */
html, body.olit-skin { height: 100%; }
html:has(body.olit-skin) { overflow: hidden; }
body.olit-skin { overflow: hidden; }
body.olit-skin .container.body,
body.olit-skin .main_container {
  height: 100vh;
  min-height: 0;
}
body.olit-skin .main_container {
  display: flex;
  flex-direction: column;
}
body.olit-skin .left_col { height: 100vh; }
/* OlitNav 的抽換容器要當透明 flex 傳遞層,否則 .right_col 拿不到高度 */
body.olit-skin #olit-content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
body.olit-skin .right_col {
  flex: 1 1 auto;
  min-height: 0 !important;
  overflow-y: auto;
  overflow-x: auto;
  transition: margin-left 0.2s ease;
}

/* ---- 側欄版位:貼邊,不留外距 ---- */
body.olit-skin.nav-md .container.body .col-md-3.left_col { width: var(--ol-rail-w); }
body.olit-skin.nav-md .container.body .top_nav,
body.olit-skin.nav-md .container.body .right_col { margin-left: var(--ol-rail-w); }
body.olit-skin.nav-sm .container.body .col-md-3.left_col { width: var(--ol-rail-w-sm); }
body.olit-skin.nav-sm .container.body .top_nav,
body.olit-skin.nav-sm .container.body .right_col { margin-left: var(--ol-rail-w-sm); }
body.olit-skin .nav_title { width: auto; }

/* ---- 嵌入模式(?embed=1):全覽畫面底欄的分析頁,只留內容區 ---- */
body.olit-skin.olit-embed .left_col,
body.olit-skin.olit-embed .top_nav,
body.olit-skin.olit-embed footer { display: none !important; }
body.olit-skin.olit-embed .container.body .right_col { margin-left: 0 !important; }

/* ---- 側欄內部:品牌/頁尾固定,只有選單捲動 ---- */
body.olit-skin .container.body > .main_container > .col-md-3.left_col {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.olit-skin.nav-sm .container.body > .main_container > .col-md-3.left_col {
  overflow: visible;
}
/* 收合時的層級:gentelella 的 `.nav-sm .main_container .top_nav{z-index:2}`
   權重比上面 body.olit-skin .top_nav 的 11000 高,頂欄的下拉(通知、帳號)會被
   內容蓋住;側欄則被拉到 9999,蓋過 Bootstrap 彈窗(backdrop 1040、modal 1050)。
   側欄壓在 1030:高於內容,低於彈窗。 */
body.olit-skin.nav-sm .main_container .top_nav { z-index: 11000; }
body.olit-skin.nav-sm .container.body .col-md-3.left_col { z-index: 1030; }
body.olit-skin .left_col .nav_title { flex: 0 0 auto; }
body.olit-skin #sidebar-menu {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 0 8px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 134, 152, 0.45) transparent;
  -ms-overflow-style: auto;
}
body.olit-skin.nav-sm #sidebar-menu {
  overflow: visible;
}
body.olit-skin #sidebar-menu::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
body.olit-skin #sidebar-menu::-webkit-scrollbar-track {
  background: transparent;
}
body.olit-skin #sidebar-menu::-webkit-scrollbar-thumb {
  background: rgba(120, 134, 152, 0.42);
  background-clip: padding-box;
  border: 2px solid transparent;
  border-radius: 999px;
}
body.olit-skin #sidebar-menu::-webkit-scrollbar-thumb:hover {
  background: var(--ol-accent);
}
/* 砍掉 Windows Chrome 的捲軸上下箭頭方塊 */
body.olit-skin #sidebar-menu::-webkit-scrollbar-button,
body.olit-skin #sidebar-menu::-webkit-scrollbar-button:single-button,
body.olit-skin #sidebar-menu::-webkit-scrollbar-button:vertical,
body.olit-skin #sidebar-menu::-webkit-scrollbar-button:vertical:start,
body.olit-skin #sidebar-menu::-webkit-scrollbar-button:vertical:end,
body.olit-skin #sidebar-menu::-webkit-scrollbar-button:increment,
body.olit-skin #sidebar-menu::-webkit-scrollbar-button:decrement,
body.olit-skin .left_col.scroll-view::-webkit-scrollbar-button,
body.olit-skin .left_col.scroll-view::-webkit-scrollbar-button:single-button,
body.olit-skin .left_col.scroll-view::-webkit-scrollbar-button:vertical,
body.olit-skin .left_col.scroll-view::-webkit-scrollbar-button:vertical:start,
body.olit-skin .left_col.scroll-view::-webkit-scrollbar-button:vertical:end,
body.olit-skin .left_col.scroll-view::-webkit-scrollbar-button:increment,
body.olit-skin .left_col.scroll-view::-webkit-scrollbar-button:decrement {
  -webkit-appearance: none;
  appearance: none;
  display: none;
  width: 0;
  height: 0;
  min-width: 0;
  min-height: 0;
  background: transparent;
  border: 0;
}
body.olit-skin .sidebar-footer { flex: 0 0 auto; margin-top: auto; }

/* ===================================================================
   SIDEBAR  (.left_col) — 貼邊直角深色欄
   =================================================================== */
body.olit-skin .container.body > .main_container > .col-md-3.left_col {
  background: var(--ol-rail) !important;
  border: 0;
  border-right: 1px solid var(--ol-rail-border);
  border-radius: 0;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: width 0.2s ease;
}
body.olit-skin .container.body > .main_container > .col-md-3.left_col > .left_col.scroll-view {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.olit-skin.nav-sm .container.body > .main_container > .col-md-3.left_col > .left_col.scroll-view {
  overflow: visible;
}

/* ---- 品牌列:與頂欄同高,底線對齊 ---- */
body.olit-skin .left_col.scroll-view { overflow-x: hidden; }
body.olit-skin .left_col .nav_title {
  background: transparent !important;
  height: var(--ol-topbar-h-shell);
  min-height: var(--ol-topbar-h-shell);
  margin: 0;
  padding: 0 14px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--ol-rail-border);
}
body.olit-skin .site_title,
body.olit-skin .site_title:hover,
body.olit-skin .site_title:focus {
  color: var(--ol-text) !important;
  font-size: calc(var(--ol-fs) + 2px);
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  line-height: 1.2;
  margin: 0;
  padding: 0;
  border: 0 !important;
}
body.olit-skin .site_title i {
  display: inline-flex;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
}
body.olit-skin .site_title i img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  vertical-align: middle;
}
body.olit-skin .site_title span {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.olit-skin.nav-sm .menu_section h3,
body.olit-skin.nav-sm .menu_case {
  display: none;
}

/* ---- 分區標題:Portainer 的小型全大寫灰標 ---- */
body.olit-skin .menu_section { margin-bottom: 4px; }
body.olit-skin .menu_section h3 {
  color: var(--ol-muted);
  letter-spacing: 0.8px;
  font-size: calc(var(--ol-fs) - 2px);
  line-height: 1.4;
  text-transform: uppercase;
  padding: 0 14px;
  margin: 16px 0 4px;
  font-weight: 600;
  text-shadow: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.olit-skin .menu_case {
  color: var(--ol-accent);
  font-size: calc(var(--ol-fs) - 1px);
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 1.4;
  padding: 0 14px;
  margin: 0 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- 第一層選單:方形列、左側 active 條 ---- */
body.olit-skin .side-menu { padding: 0 var(--ol-sidebar-pad); }
body.olit-skin .side-menu > li { position: relative; }
body.olit-skin .side-menu > li > a {
  color: var(--ol-menu-text) !important;
  border-radius: var(--ol-radius);
  margin: 1px 0;
  padding: 9px 10px;
  font-size: var(--ol-fs);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-left: 3px solid transparent;
  transition: background 0.12s ease, color 0.12s ease;
}
body.olit-skin .side-menu > li > a i:first-child {
  flex: 0 0 20px;
  width: 20px !important;
  font-size: calc(var(--ol-fs) + 2px);
  margin: 0 !important;
  text-align: center;
}
body.olit-skin .side-menu > li > a span:not(.fa) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.olit-skin .side-menu > li > a:hover {
  background: var(--ol-menu-hover) !important;
  color: var(--ol-text) !important;
}
body.olit-skin .nav.side-menu > li.active,
body.olit-skin .nav.side-menu > li.current-page,
body.olit-skin.nav-sm .nav.side-menu > li.active-sm {
  border-right: 0 !important;
}
/* .active 只代表「展開中」,不等於高亮;中和 gentelella 的深色漸層 */
body.olit-skin .side-menu > li.active > a {
  background: transparent;
  text-shadow: none;
  box-shadow: none;
}
/* 當前頁分組:淡藍底 + 左藍條 + 藍字(Portainer 的 active 樣式) */
body.olit-skin .side-menu > li.current-page > a {
  background: var(--ol-menu-active-bg) !important;
  border-left-color: var(--ol-accent);
  color: var(--ol-accent) !important;
  font-weight: 600;
  box-shadow: none;
  text-shadow: none;
}
body.olit-skin .nav.side-menu > li.current-page {
  background: transparent !important;
}
body.olit-skin .side-menu > li > a .fa-chevron-down,
body.olit-skin .side-menu > li > a .fa-chevron-up {
  margin-left: auto;
  font-size: calc(var(--ol-fs) - 3px);
  opacity: 0.6;
}
body.olit-skin .side-menu > li.active > a:after { border: 0; }

/* ---- 收合模式(nav-sm):icon 上、小標題下 ---- */
body.olit-skin.nav-sm .left_col .nav_title {
  padding: 0;
  justify-content: center;
}
body.olit-skin.nav-sm .site_title {
  width: auto;
  justify-content: center;
  gap: 0;
}
body.olit-skin.nav-sm .site_title span { display: none; }
body.olit-skin.nav-sm .site_title i { flex: 0 0 auto; }
body.olit-skin.nav-sm .side-menu { padding: 0 6px; }
body.olit-skin.nav-sm .side-menu > li > a {
  width: auto;
  min-height: 46px;
  margin: 2px 0;
  padding: 8px 4px;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  font-size: calc(var(--ol-fs) - 2px);
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  overflow: hidden;
  word-break: break-word;
  border-left: 0;
  border-bottom: 2px solid transparent;
}
body.olit-skin.nav-sm .side-menu > li.current-page > a {
  border-left: 0;
  border-bottom-color: var(--ol-accent);
}
body.olit-skin.nav-sm .side-menu > li > a .fa-chevron-down,
body.olit-skin.nav-sm .side-menu > li > a .fa-chevron-up {
  display: none !important;
}
body.olit-skin.nav-sm .side-menu > li > a i:first-child {
  flex: 0 0 auto;
  width: 100% !important;
  margin: 0 !important;
  font-size: calc(var(--ol-fs) + 5px) !important;
  text-align: center;
}

/* ---- 子選單 ---- */
body.olit-skin .child_menu {
  padding-left: 0;
  position: relative;
}
body.olit-skin.nav-md ul.nav.child_menu::before {
  display: none !important;
}
/* 左側細導引線(對齊第一層 icon 中心) */
body.olit-skin.nav-md ul.nav.child_menu {
  background-image: linear-gradient(var(--ol-rail-border), var(--ol-rail-border)) !important;
  background-position: 16px 0 !important;
  background-repeat: no-repeat !important;
  background-size: 1px 100% !important;
}
body.olit-skin .child_menu li:hover,
body.olit-skin .child_menu li.active,
body.olit-skin .child_menu li.current-page {
  background: transparent !important;
}
body.olit-skin.nav-md ul.nav.child_menu li {
  padding-left: 24px !important;
  padding-right: 6px !important;
}
body.olit-skin.nav-md ul.nav.child_menu li::before,
body.olit-skin.nav-md ul.nav.child_menu li::after,
body.olit-skin.nav-md ul.nav.child_menu li:last-child::after {
  display: none !important;
}
body.olit-skin .child_menu li a {
  color: var(--ol-muted) !important;
  border-radius: var(--ol-radius);
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 7px 10px;
  margin: 1px 0;
  font-size: calc(var(--ol-fs) - 1px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.olit-skin .child_menu li a:hover {
  background: var(--ol-menu-hover) !important;
  color: var(--ol-text) !important;
}
body.olit-skin .child_menu li.current-page a {
  color: var(--ol-accent) !important;
  background: var(--ol-menu-active-bg) !important;
  font-weight: 600;
}
/* 收合時子選單改浮出面板 */
body.olit-skin.nav-sm ul.nav.child_menu {
  left: 100%;
  top: 0;
  width: 220px;
  min-width: 220px;
  padding: 6px;
  background: var(--ol-rail) !important;
  border: 1px solid var(--ol-rail-border);
  border-radius: var(--ol-radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  background-image: none !important;
  z-index: 10050;
}
body.olit-skin.nav-sm ul.nav.child_menu::before {
  display: none;
}
body.olit-skin.nav-sm ul.nav.child_menu li {
  padding: 0 !important;
}
body.olit-skin.nav-sm ul.nav.child_menu li::before,
body.olit-skin.nav-sm ul.nav.child_menu li::after {
  display: none;
}
body.olit-skin.nav-sm ul.nav.child_menu li a {
  color: var(--ol-menu-text) !important;
  text-align: left !important;
  font-size: calc(var(--ol-fs) - 1px);
  font-weight: 500;
  padding: 8px 10px;
  margin: 1px 0;
  border-radius: var(--ol-radius);
}
body.olit-skin.nav-sm ul.nav.child_menu li a:hover,
body.olit-skin.nav-sm ul.nav.child_menu li.current-page a {
  background: var(--ol-menu-hover) !important;
  color: var(--ol-accent) !important;
}

/* ---- 側欄底部快捷鍵 ---- */
body.olit-skin .sidebar-footer {
  position: static;
  left: auto;
  bottom: auto;
  width: auto;
  height: 42px;                     /* 與右側 footer 同高,底線才對齊 */
  background: var(--ol-rail) !important;
  border-top: 1px solid var(--ol-rail-border);
  border-radius: 0;
  display: flex;
  gap: 4px;
  justify-content: space-between;   /* 四顆鈕左右對齊,兩端各留一段空白 */
  align-items: center;
  padding: 4px 32px;
  box-shadow: none;
  z-index: 2;
}
body.olit-skin .sidebar-footer a {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--ol-radius);
  color: var(--ol-muted) !important;
  background: transparent;
  transition: background 0.12s ease, color 0.12s ease;
}
body.olit-skin .sidebar-footer a:hover {
  color: var(--ol-accent) !important;
  background: var(--ol-menu-hover);
}

/* ===================================================================
   TOP NAVIGATION (.top_nav .nav_menu) — 貼齊的扁平列
   =================================================================== */
body.olit-skin .top_nav {
  background: transparent;
  display: flow-root;
  overflow: visible;
  position: relative;
  z-index: 11000;
}
body.olit-skin .top_nav .nav_menu {
  background: var(--ol-rail) !important;
  border: 0;
  border-bottom: 1px solid var(--ol-rail-border);
  border-radius: 0;
  margin: 0;
  min-height: var(--ol-topbar-h-shell);
  float: none;
  width: auto;
  display: flex;
  align-items: center;
  overflow: visible;
  position: relative;
  z-index: 11000;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.olit-skin .top_nav .nav_menu nav {
  width: 100%;
  display: flex;
  align-items: center;
  overflow: visible;
}
body.olit-skin .nav.toggle {
  width: 40px;
  height: var(--ol-topbar-h-shell);
  margin: 0 4px 0 8px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.olit-skin #menu_toggle {
  width: 32px;
  height: 32px;
  line-height: 1;
  padding: 0;
  border-radius: var(--ol-radius);
  background: transparent;
  color: var(--ol-muted);
  font-size: calc(var(--ol-fs) + 4px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.olit-skin #menu_toggle:hover {
  color: var(--ol-accent);
  background: var(--ol-menu-hover);
}

/* ---- 深淺色切換鈕(SVG 日/月變形,由 data-skin-theme 驅動) ---- */
body.olit-skin a.ol-themetoggle,
body.olit-skin a.ol-themetoggle:hover,
body.olit-skin a.ol-themetoggle:focus,
body.olit-skin a.ol-themetoggle:active {
  color: var(--ol-muted) !important;
  background-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}
body.olit-skin a.ol-themetoggle:hover {
  color: var(--ol-accent) !important;
  background-color: var(--ol-menu-hover) !important;
}
body.olit-skin a.ol-themetoggle svg {
  flex: none;
  width: 24px;
  height: 24px;
  display: block;
}
/* 日→月的變形靠 stroke-dasharray 收光芒 + mask 圓斜切,不要改動這幾條 */
body.olit-skin .ol-tt-circle {
  fill: var(--ol-text);   /* Gentelella 會硬塞連結色,currentColor 不可靠 */
  transform: scale(0.6);
  transform-origin: center;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), fill 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
body.olit-skin .ol-tt-circle[data-mask="true"] { fill: #fff; }
body.olit-skin .ol-tt-mask {
  fill: #000;
  transform: translate3d(100%, -100%, 0);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
body.olit-skin .ol-tt-path {
  stroke: var(--ol-text);
  fill: none;
  stroke-linecap: round;
  stroke-width: 3;
  stroke-dasharray: 7 7;
  stroke-dashoffset: 0;
  opacity: 1;
  transition: stroke-dashoffset 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0.3s;
}
html[data-skin-theme="dark"] body.olit-skin .ol-tt-circle { transform: none; transition-delay: 0.3s; }
html[data-skin-theme="dark"] body.olit-skin .ol-tt-mask { transform: none; transition-delay: 0.3s; }
html[data-skin-theme="dark"] body.olit-skin .ol-tt-path { stroke-dashoffset: 7; opacity: 0; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  body.olit-skin .ol-tt-circle,
  body.olit-skin .ol-tt-mask,
  body.olit-skin .ol-tt-path { transition: none; }
}

/* ---- 右側工具列 ----------------------------------------------------
   Bootstrap 3 的 .navbar-right 是 float:right,包在 flex 的 nav 裡 float
   完全失效,ul 會被 custom.css 撐成固定寬度、整組鈕停在版面中段(離右緣
   還差三百多 px)。改成 flex 項目 + margin-left:auto 才會真的貼右緣。 */
body.olit-skin .top_nav .navbar-right {
  float: none !important;
  width: auto !important;
  margin: 0 0 0 auto;
  padding-right: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  overflow: visible;
}
body.olit-skin .top_nav .navbar-right > li {
  float: none;
  display: inline-flex;
  align-items: center;
  position: relative !important;   /* 數字牌是 absolute,錨點要在自己這一層 */
}
/* Gentelella 用 `.nav.navbar-nav>li>a{color:#515356!important}` 硬鎖成灰色,
   深色模式會看不清,必須以同等 !important 蓋回主題色 */
body.olit-skin .nav.navbar-nav > li > a,
body.olit-skin .nav.navbar-nav > li > a .fa,
body.olit-skin .nav.navbar-nav > li > a span {
  color: var(--ol-text) !important;
}
body.olit-skin .nav.navbar-nav > li > a:hover,
body.olit-skin .nav.navbar-nav > li > a:focus,
body.olit-skin .nav.navbar-nav > li.open > a,
body.olit-skin .nav.navbar-nav > li.open > a:hover,
body.olit-skin .nav.navbar-nav > li.open > a:focus {
  background: var(--ol-menu-hover) !important;
  color: var(--ol-text) !important;
  border-radius: var(--ol-radius);
}
body.olit-skin .ol-iconbtn {
  width: 36px;
  height: 36px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: var(--ol-radius);
  padding: 0 !important;
  margin: 0 3px;
}
body.olit-skin .info-number { position: relative; }
/* 數字牌顏色維持原樣(custom.css 的 .bg-green),這裡只負責把它定回鈴鐺右上角 */
body.olit-skin .info-number .badge {
  position: absolute;
  top: 2px;
  right: 0;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 5px;
  min-width: 16px;
  text-align: center;
  box-shadow: none;
}
body.olit-skin .user-profile {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  border-radius: var(--ol-radius);
  padding: 6px 10px !important;
  color: var(--ol-text) !important;
  font-weight: 500;
}
body.olit-skin .user-profile img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  margin: 0;
}

/* ---- 下拉面板 ---- */
body.olit-skin .navbar-nav .open .dropdown-menu,
body.olit-skin .top_nav .dropdown-menu {
  position: absolute;
  float: left;
  background: var(--ol-rail) !important;
  border: 1px solid var(--ol-rail-border) !important;
  border-radius: var(--ol-radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  padding: 4px;
  margin-top: 6px;
  z-index: 11050;
}
body.olit-skin .dropdown-usermenu { min-width: 200px; }
body.olit-skin .msg_list { min-width: 280px; }
body.olit-skin .dropdown-usermenu li,
body.olit-skin .msg_list li {
  background: transparent;
  border: 0;
}
body.olit-skin .dropdown-usermenu a,
body.olit-skin .msg_list a {
  color: var(--ol-menu-text) !important;
  border-radius: var(--ol-radius);
  padding: 8px 10px;
  font-size: var(--ol-fs);
}
body.olit-skin .dropdown-usermenu a:hover,
body.olit-skin .msg_list li:hover,
body.olit-skin .msg_list a:hover {
  background: var(--ol-menu-hover) !important;
  color: var(--ol-text) !important;
}
/* ---- 字級選單(頂欄 Aa 鈕) ---- */
body.olit-skin .ol-fontmenu { min-width: 160px; }
body.olit-skin .ol-fontmenu a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
/* 每一檔用它自己的字級呈現,選之前就看得出差別 */
body.olit-skin .ol-fontmenu a[data-font-scale="sm"] { font-size: 13px; }
body.olit-skin .ol-fontmenu a[data-font-scale="md"] { font-size: 14px; }
body.olit-skin .ol-fontmenu a[data-font-scale="lg"] { font-size: 16px; }
body.olit-skin .ol-fontmenu a[data-font-scale="xl"] { font-size: 18px; }
body.olit-skin .ol-fontmenu a.ol-fs-active {
  color: var(--ol-accent) !important;
  background: var(--ol-menu-active-bg) !important;
  font-weight: 600;
}
body.olit-skin .ol-fontmenu a.ol-fs-active::after {
  content: "\f00c";           /* FontAwesome 打勾 */
  font-family: FontAwesome;
  font-size: 11px;
}

body.olit-skin .msg_list .title { color: var(--ol-text); font-weight: 600; }
body.olit-skin .msg_list .time,
body.olit-skin .msg_list .message { color: var(--ol-muted); }
/* 告警項目:等級顏色只當強調色(左側色條 + 淡底),不再整塊填滿飽和色。
   --ol-msg-color 由 top_navigation.html 依該筆告警的門檻顏色寫入,
   顏色是資料帶的 CSS 色名(red / orange / darkred …),所以用 color-mix
   即時調淡,不必在這裡逐色列舉。 */
body.olit-skin .msg_list li.ol-msg-alarm {
  background: color-mix(in srgb, var(--ol-msg-color, var(--ol-danger)) var(--ol-msg-tint), transparent) !important;
  border-left: 3px solid var(--ol-msg-color, var(--ol-danger));
  border-radius: var(--ol-radius);
  margin: 2px 0;
}
body.olit-skin .msg_list li.ol-msg-alarm:hover {
  background: color-mix(in srgb, var(--ol-msg-color, var(--ol-danger)) var(--ol-msg-tint-hover), transparent) !important;
}
/* 標題/時間/內容改成三行:custom.css 把 .time 設成 absolute,擠在標題上會疊字 */
body.olit-skin .msg_list .title { display: block; }
body.olit-skin .msg_list .time {
  position: static;
  display: block;
  width: auto;
  margin-top: 2px;
}
body.olit-skin .msg_list li.ol-msg-alarm .title { color: var(--ol-text); }
body.olit-skin .msg_list li.ol-msg-alarm .message { color: var(--ol-muted); }

/* ===================================================================
   CONTENT — 頁標題 / 面板卡片
   =================================================================== */
body.olit-skin .right_col { color: var(--ol-text); }
/* 排除 .btn:不少地方是拿 <a class="btn btn-primary"> 當按鈕用,這條的權重
   (0,2,1)比色系規則 .btn-primary(0,2,0)高,會把按鈕文字染成連結藍 ——
   深色模式就變成「藍底藍字」(個人基本資料的「驗證(Mail)」就是這樣)。 */
body.olit-skin .right_col a:not(.btn) { color: var(--ol-accent); }
body.olit-skin .page-title {
  padding: 0 0 12px;
  border-bottom: 1px solid var(--ol-rail-border);
  margin-bottom: 16px;
}
body.olit-skin .page-title .title_left h1,
body.olit-skin .page-title .title_left h2,
body.olit-skin .page-title .title_left h3 {
  color: var(--ol-text);
  font-weight: 600;
  font-size: calc(var(--ol-fs) + 7px);
  margin: 0;
}
body.olit-skin .page-title .title_right { color: var(--ol-muted); }

/* Portainer 卡片:白/深底、細框、低圓角、無陰影 */
body.olit-skin .x_panel {
  background: var(--ol-surface) !important;
  border: 1px solid var(--ol-rail-border) !important;
  border-radius: var(--ol-radius);
  box-shadow: var(--ol-shadow);
  padding: 0;
  margin-bottom: 16px;
  opacity: 1;
}
body.olit-skin .x_title {
  border-bottom: 1px solid var(--ol-rail-border);
  padding: 12px 16px;
  margin: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
/* 面板右上角的收合/工具/關閉三顆鈕。
   x_title 裡是「h2 + ul.panel_toolbox + div.clearfix」三個子元素,原本用
   space-between 均分,0 寬的 clearfix 佔住右端 → 三顆鈕被推到中間。
   clearfix 是給 float 版面用的,在 flex 裡沒作用,直接藏掉並讓工具列
   吃掉剩餘空間,才會真的貼齊右緣。 */
body.olit-skin .x_title > .clearfix { display: none; }
body.olit-skin .x_title .panel_toolbox {
  float: none;
  width: auto;
  min-width: 0;
  margin: 0 0 0 auto !important;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}
body.olit-skin .x_title .panel_toolbox > li { float: none; }
body.olit-skin .x_title h1,
body.olit-skin .x_title h2,
body.olit-skin .x_title h3 {
  color: var(--ol-text);
  font-size: calc(var(--ol-fs) + 1px);
  font-weight: 600;
  margin: 0;
}
body.olit-skin .x_title small,
body.olit-skin .x_title span { color: var(--ol-muted); }
body.olit-skin .x_content,
body.olit-skin .x_content p,
body.olit-skin .help-block { color: var(--ol-text); }
body.olit-skin .x_content {
  padding: 16px;
  margin: 0;
}
/* 收合/工具/關閉三顆鈕。custom.css 給的 hover 是寫死的 #F5F7FA 方塊,深色
   模式下就是一格白底;改成圓形底色並接主題色。滑鼠移開後還留著底色的話
   通常是 :focus 沒清掉,所以 focus 這裡不另外上底色。 */
body.olit-skin .panel_toolbox { margin: 0; }
body.olit-skin .panel_toolbox > li > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  color: var(--ol-muted);
  background: transparent;
  transition: background-color 0.12s ease, color 0.12s ease;
}
body.olit-skin .panel_toolbox > li > a:hover,
body.olit-skin .panel_toolbox > li.open > a {
  background: var(--ol-menu-active-bg);
  color: var(--ol-accent);
}
body.olit-skin .panel_toolbox > li > a:focus { background: transparent; }

/* ===================================================================
   儀表板小元件(系統伺服主機運行狀態 /system/info、首頁磚塊等)
   這些是 gentelella 自帶的元件,底色/框線/文字色都寫死成淺色系,
   之前完全沒接主題 → 深色模式下是一塊塊白卡片配淺灰字。
   =================================================================== */
body.olit-skin .tile-stats {
  background: var(--ol-surface);
  border: 1px solid var(--ol-rail-border);
  border-radius: var(--ol-radius);
  color: var(--ol-text);
}
body.olit-skin .tile-stats .count { color: var(--ol-text); }
body.olit-skin .tile-stats h3 {
  color: var(--ol-muted);
  font-size: calc(var(--ol-fs) + 1px);
  font-weight: 600;
}
body.olit-skin .tile-stats p {
  color: var(--ol-muted);
  font-size: calc(var(--ol-fs) - 1px);
}
/* 磚塊右側那個大圖示是裝飾用的,壓到跟框線同一階,別跟數字搶 */
body.olit-skin .tile-stats .icon i { color: var(--ol-rail-border); }
body.olit-skin .tile-stats:hover .icon i { color: var(--ol-muted); }

body.olit-skin .dashboard-widget-content .sidebar-widget {
  background: var(--ol-surface);
  border: 1px solid var(--ol-rail-border);
  border-radius: var(--ol-radius);
  color: var(--ol-text);
}
body.olit-skin ul.quick-list li { color: var(--ol-text); }
body.olit-skin ul.quick-list li i { color: var(--ol-muted); }
body.olit-skin .goal-wrapper .gauge-value,
body.olit-skin .goal-wrapper .goal-value,
body.olit-skin .sidebar-widget h4 { color: var(--ol-muted); }
body.olit-skin .x_content h4 { color: var(--ol-text); }
/* 這頁的頁面標題直接寫在 .right_col 裡,不是 .page-title */
body.olit-skin .right_col > div > h3 {
  color: var(--ol-text);
  font-size: calc(var(--ol-fs) + 5px);
  font-weight: 600;
}

/* 進度條:bootstrap 的軌道是 #f5f5f5 + inset 陰影,深色底上是一條白槓 */
body.olit-skin .progress {
  background: var(--ol-menu-hover);
  border-radius: var(--ol-radius);
  box-shadow: none;
  overflow: hidden;
}
body.olit-skin .progress-bar { box-shadow: none; }
body.olit-skin .widget_summary .w_left span,
body.olit-skin .widget_summary .w_right span { color: var(--ol-text); }

/* ===================================================================
   TABLES — 直角、細橫線、表頭灰底
   =================================================================== */
body.olit-skin .table,
body.olit-skin table.dataTable,
body.olit-skin table.jambo_table {
  font-size: var(--ol-fs);
  background: transparent;
  border: 1px solid var(--ol-rail-border);
  border-radius: var(--ol-radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  color: var(--ol-text);
  width: 100%;
}
body.olit-skin .table-bordered > thead > tr > th,
body.olit-skin .table-bordered > thead > tr > td,
body.olit-skin .table-bordered > tbody > tr > th,
body.olit-skin .table-bordered > tbody > tr > td,
body.olit-skin .table-bordered > tfoot > tr > th,
body.olit-skin .table-bordered > tfoot > tr > td {
  border: 0;
}
body.olit-skin .table > thead > tr > th,
body.olit-skin table.dataTable thead th,
body.olit-skin table.jambo_table thead {
  background: var(--ol-table-head) !important;
  color: var(--ol-muted) !important;
  border-bottom: 1px solid var(--ol-rail-border) !important;
  font-size: calc(var(--ol-fs) - 1px);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 10px 12px;
  white-space: nowrap;
}
body.olit-skin .table > tbody > tr,
body.olit-skin .table-striped > tbody > tr:nth-of-type(odd),
body.olit-skin .table-striped > tbody > tr:nth-of-type(even),
body.olit-skin table.dataTable tbody tr,
body.olit-skin table.dataTable tbody tr.odd,
body.olit-skin table.dataTable tbody tr.even,
body.olit-skin table.jambo_table tbody tr {
  background: transparent !important;
}
body.olit-skin .table > tbody > tr > th,
body.olit-skin .table > tbody > tr > td,
body.olit-skin table.dataTable tbody th,
body.olit-skin table.dataTable tbody td,
body.olit-skin table.jambo_table tbody td {
  border-top: 0;
  border-bottom: 1px solid var(--ol-table-line);
  color: var(--ol-text);
  padding: 9px 12px;
  vertical-align: middle;
}
body.olit-skin .table > tbody > tr:last-child > th,
body.olit-skin .table > tbody > tr:last-child > td {
  border-bottom: 0;
}
body.olit-skin .table-hover > tbody > tr:hover,
body.olit-skin table.dataTable tbody tr:hover,
body.olit-skin table.dataTable tbody tr:hover td,
body.olit-skin table.jambo_table tbody tr:hover,
body.olit-skin table.jambo_table tbody tr:hover td {
  background: var(--ol-menu-hover) !important;
}
body.olit-skin .table-responsive,
body.olit-skin .dataTables_wrapper,
body.olit-skin .dataTables_scroll {
  border: 0;
}
body.olit-skin .dataTables_wrapper > .row { margin: 0; }
body.olit-skin .dataTables_length,
body.olit-skin .dataTables_filter,
body.olit-skin .dataTables_info,
body.olit-skin .dataTables_paginate {
  color: var(--ol-muted);
}
body.olit-skin .dataTables_length label,
body.olit-skin .dataTables_filter label {
  color: var(--ol-muted);
  font-weight: 500;
}
body.olit-skin .dataTables_length select,
body.olit-skin .dataTables_filter input {
  background: var(--ol-rail);
  border: 1px solid var(--ol-rail-border);
  border-radius: var(--ol-radius);
  color: var(--ol-text);
  padding: 4px 8px;
}
body.olit-skin .dataTables_scrollHead,
body.olit-skin .dataTables_scrollBody { background: transparent; }
body.olit-skin .dataTables_processing {
  background: var(--ol-rail);
  border: 1px solid var(--ol-rail-border);
  border-radius: var(--ol-radius);
  color: var(--ol-text);
}
body.olit-skin table.dataTable th.focus,
body.olit-skin table.dataTable td.focus {
  outline: 2px solid var(--ol-accent);
}

/* ===================================================================
   FORMS
   =================================================================== */
body.olit-skin .form-control,
body.olit-skin .input-group-addon,
body.olit-skin .select2-container--default .select2-selection--single,
body.olit-skin .select2-container--default .select2-selection--multiple {
  font-size: var(--ol-fs);
  background: var(--ol-rail) !important;
  border: 1px solid var(--ol-rail-border) !important;
  border-radius: var(--ol-radius) !important;
  color: var(--ol-text) !important;
  box-shadow: none;
}
body.olit-skin .form-control:focus,
body.olit-skin .select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--ol-accent) !important;
  box-shadow: 0 0 0 2px var(--ol-menu-active-bg);
}
body.olit-skin .form-control::placeholder { color: var(--ol-muted); }
body.olit-skin label,
body.olit-skin .control-label { color: var(--ol-text); font-weight: 500; }
body.olit-skin input[type="date"],
body.olit-skin input[type="month"],
body.olit-skin input[type="datetime-local"],
body.olit-skin input[type="time"] {
  color-scheme: light;
}
html[data-skin-theme="dark"] body.olit-skin input[type="date"],
html[data-skin-theme="dark"] body.olit-skin input[type="month"],
html[data-skin-theme="dark"] body.olit-skin input[type="datetime-local"],
html[data-skin-theme="dark"] body.olit-skin input[type="time"] {
  color-scheme: dark;
}
/* 日期欄位多半沒掛 .form-control(分析頁、報表頁是手寫的 <input type="month">),
   落回瀏覽器預設的 inset 灰框 —— 跟旁邊的下拉選單是兩種東西。外觀比照 .form-control。 */
body.olit-skin input[type="date"]:not(.form-control),
body.olit-skin input[type="month"]:not(.form-control),
body.olit-skin input[type="datetime-local"]:not(.form-control),
body.olit-skin input[type="time"]:not(.form-control) {
  height: 34px;
  padding: 6px 12px;
  font-size: var(--ol-fs);
  line-height: 1.42857;
  background: var(--ol-rail);
  border: 1px solid var(--ol-rail-border);
  border-radius: var(--ol-radius);
  color: var(--ol-text);
  box-shadow: none;
  outline: none;
}
body.olit-skin input[type="date"]:not(.form-control):focus,
body.olit-skin input[type="month"]:not(.form-control):focus,
body.olit-skin input[type="datetime-local"]:not(.form-control):focus,
body.olit-skin input[type="time"]:not(.form-control):focus {
  border-color: var(--ol-accent);
  box-shadow: 0 0 0 2px var(--ol-menu-active-bg);
}
/* 「起 到 迄」一組:分析頁把兩格各寫死 200px,欄寬不夠就把第二格擠到下一行。
   改成同一列平分,「到」夾在中間。 */
body.olit-skin .input-group-prepend:has(> input[type="month"], > input[type="date"]) {
  display: flex;
  align-items: center;
  gap: 8px;
}
body.olit-skin .input-group-prepend > input[type="month"],
body.olit-skin .input-group-prepend > input[type="date"] {
  flex: 1 1 0;
  min-width: 0;
  width: auto !important;
}
body.olit-skin .input-group-prepend:has(> input[type="month"], > input[type="date"]) > .input-group-text {
  padding: 0;
  background: none;
  border: 0;
  color: var(--ol-text);
}

/* 勾選框。全站的 class="flat" 由 iCheck 換成 .icheckbox_flat-green / .iradio_flat-green,
   底圖是白底淺灰框的 sprite —— 深色模式下幾乎看不見。改用主題色畫,狀態 class
   (checked / hover / disabled)是 iCheck 掛在外層 div 上的。沒走 iCheck 的原生
   勾選框用 accent-color 跟主題色。 */
body.olit-skin input[type="checkbox"],
body.olit-skin input[type="radio"] { accent-color: var(--ol-accent); }
html[data-skin-theme="dark"] body.olit-skin input[type="checkbox"],
html[data-skin-theme="dark"] body.olit-skin input[type="radio"] { color-scheme: dark; }
body.olit-skin .icheckbox_flat-green,
body.olit-skin .iradio_flat-green {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: var(--ol-rail) !important;
  border: 1px solid var(--ol-rail-border);
  border-radius: 4px;
  box-sizing: border-box;
  vertical-align: middle;
  cursor: pointer;
}
body.olit-skin .iradio_flat-green { border-radius: 50%; }
body.olit-skin .icheckbox_flat-green.hover,
body.olit-skin .iradio_flat-green.hover { border-color: var(--ol-accent); }
body.olit-skin .icheckbox_flat-green.checked,
body.olit-skin .iradio_flat-green.checked {
  background: var(--ol-accent) !important;
  border-color: var(--ol-accent);
}
body.olit-skin .icheckbox_flat-green.checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
body.olit-skin .iradio_flat-green.checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}
body.olit-skin .icheckbox_flat-green.disabled,
body.olit-skin .iradio_flat-green.disabled { opacity: .5; cursor: not-allowed; }

/* 勾選框與文字同一列、不折行(分析頁的「選擇日期首月為基準」被擠成兩行)。
   有的頁面沒初始化 iCheck(箱梁頁),是原生勾選框 —— 兩種都要涵蓋。 */
body.olit-skin label:has(> .icheckbox_flat-green, > .iradio_flat-green),
body.olit-skin label > div:has(> .icheckbox_flat-green),
body.olit-skin .checkbox > label:has(> input[type="checkbox"]),
body.olit-skin .checkbox > label > div:has(> input[type="checkbox"]) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
body.olit-skin .checkbox > label:has(> .icheckbox_flat-green, > div, > input[type="checkbox"]) {
  padding-left: 0;
}
body.olit-skin .checkbox > label > div:has(> input[type="checkbox"]) { display: flex; }
body.olit-skin .checkbox > label > input[type="checkbox"],
body.olit-skin .checkbox > label > div > input[type="checkbox"] {
  position: static;
  margin: 0;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
/* 分析頁的篩選列:勾選欄跟日期欄並排,對齊到輸入框那一列(扣掉上方「選擇日期:」標題的高度)。 */
body.olit-skin .x_content .checkbox[class*="col-"]:has(.icheckbox_flat-green, input[type="checkbox"]) {
  margin-top: 25px;
  min-height: 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
body.olit-skin .x_content .checkbox[class*="col-"] > label { margin: 0; }

/* 分析頁的期間切換列(app/analyze/templates/_period_bar.html) */
body.olit-skin .analyze-period-row { margin-top: 12px; }
body.olit-skin .analyze-period-row > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
body.olit-skin .analyze-period-row .control-label { margin: 0; }
body.olit-skin .analyze-period-bar { display: inline-flex; flex-wrap: wrap; float: none; }
body.olit-skin .analyze-period-bar > .btn { white-space: pre; float: none; }

/* ===================================================================
   BUTTONS — 扁平實色、4px 圓角(布局/尺寸不動)
   =================================================================== */
/* 基底同時當「沒有色系 class 的按鈕」的保底外觀。BS3 只有 default/primary/
   success/info/warning/danger 六種有配色,像 btn-upload(上傳照片)、或 BS4 才有
   的 btn-secondary / btn-outline-primary,在這裡完全沒有規則 → 背景透明、字色
   沿用內文色。淺色模式看起來只是「不像按鈕」,深色模式直接變不見。
   下面各色系規則排在本區塊之後,權重相同、後者勝出,不會被這段蓋掉。 */
body.olit-skin .btn {
  border-radius: var(--ol-radius);
  font-size: var(--ol-fs);
  font-weight: 500;
  background: var(--ol-btn-default-bg);
  border: 1px solid var(--ol-btn-default-border);
  color: var(--ol-btn-default-text);
  box-shadow: none;
  text-shadow: none;
  background-image: none;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
body.olit-skin .btn:hover,
body.olit-skin .btn:focus {
  background: var(--ol-btn-default-hover);
  color: var(--ol-btn-default-text);
}
body.olit-skin .btn:focus,
body.olit-skin .btn:active:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--ol-menu-active-bg);
}
/* 表格操作欄常是三顆 btn-sm 擠在 ~180px 的 cell 裡,原本 padding 會多出幾 px
   而折成兩行。收窄內距讓一列放得下,順便貼近 Portainer 的小按鈕比例。 */
body.olit-skin .btn-sm,
body.olit-skin .btn-xs {
  padding: 4px 8px;
  font-size: calc(var(--ol-fs) - 1px);
  line-height: 1.5;
  white-space: nowrap;
}
/* 有些頁面用 <p class="btn"> 當按鈕,p 的 margin-bottom 會讓同列高低不齊 */
body.olit-skin p.btn {
  margin: 0 2px 4px 0;
  vertical-align: middle;
}
body.olit-skin td .btn + .btn,
body.olit-skin th .btn + .btn { margin-left: 2px; }
/* 圖示按鈕(只有一個 <i>)不要被文字用的左右內距撐開 */
body.olit-skin .btn > .fa:only-child { margin: 0; }
body.olit-skin .btn-default {
  background: var(--ol-btn-default-bg);
  border-color: var(--ol-btn-default-border);
  color: var(--ol-btn-default-text);
}
body.olit-skin .btn-default:hover,
body.olit-skin .btn-default:focus,
body.olit-skin .btn-default:active,
body.olit-skin .btn-default.active {
  background: var(--ol-btn-default-hover);
  border-color: var(--ol-btn-default-border);
  color: var(--ol-btn-default-text);
}
body.olit-skin .btn-primary {
  background: var(--ol-btn-primary-bg);
  color: var(--ol-btn-primary-text);
  border-color: var(--ol-btn-primary-bg);
}
body.olit-skin .btn-success {
  background: var(--ol-btn-success-bg);
  color: var(--ol-btn-success-text);
  border-color: var(--ol-btn-success-bg);
}
body.olit-skin .btn-info {
  background: var(--ol-btn-info-bg);
  color: var(--ol-btn-info-text);
  border-color: var(--ol-btn-info-bg);
}
body.olit-skin .btn-warning {
  background: var(--ol-btn-warning-bg);
  color: var(--ol-btn-warning-text);
  border-color: var(--ol-btn-warning-bg);
}
body.olit-skin .btn-danger {
  background: var(--ol-btn-danger-bg);
  color: var(--ol-btn-danger-text);
  border-color: var(--ol-btn-danger-bg);
}
body.olit-skin .btn-primary:hover,
body.olit-skin .btn-primary:focus,
body.olit-skin .btn-primary:active,
body.olit-skin .btn-primary.active {
  background: var(--ol-btn-primary-hover);
  border-color: var(--ol-btn-primary-hover);
  color: var(--ol-btn-primary-text);
}
body.olit-skin .btn-success:hover,
body.olit-skin .btn-success:focus,
body.olit-skin .btn-success:active,
body.olit-skin .btn-success.active {
  background: var(--ol-btn-success-hover);
  border-color: var(--ol-btn-success-hover);
  color: var(--ol-btn-success-text);
}
body.olit-skin .btn-info:hover,
body.olit-skin .btn-info:focus,
body.olit-skin .btn-info:active,
body.olit-skin .btn-info.active {
  background: var(--ol-btn-info-hover);
  border-color: var(--ol-btn-info-hover);
  color: var(--ol-btn-info-text);
}
body.olit-skin .btn-warning:hover,
body.olit-skin .btn-warning:focus,
body.olit-skin .btn-warning:active,
body.olit-skin .btn-warning.active {
  background: var(--ol-btn-warning-hover);
  border-color: var(--ol-btn-warning-hover);
  color: var(--ol-btn-warning-text);
}
body.olit-skin .btn-danger:hover,
body.olit-skin .btn-danger:focus,
body.olit-skin .btn-danger:active,
body.olit-skin .btn-danger.active {
  background: var(--ol-btn-danger-hover);
  border-color: var(--ol-btn-danger-hover);
  color: var(--ol-btn-danger-text);
}

/* ---- BS3 沒有、但版面上有人用的色系 ---------------------------------- */
/* btn-secondary(BS4):當次要動作,外觀與 btn-default 一致 */
body.olit-skin .btn-secondary {
  background: var(--ol-btn-default-bg);
  border-color: var(--ol-btn-default-border);
  color: var(--ol-btn-default-text);
}
body.olit-skin .btn-secondary:hover,
body.olit-skin .btn-secondary:focus,
body.olit-skin .btn-secondary:active {
  background: var(--ol-btn-default-hover);
  border-color: var(--ol-btn-default-border);
  color: var(--ol-btn-default-text);
}
/* btn-outline-primary(BS4):線框按鈕 */
body.olit-skin .btn-outline-primary {
  background: transparent;
  border-color: var(--ol-accent);
  color: var(--ol-accent);
}
body.olit-skin .btn-outline-primary:hover,
body.olit-skin .btn-outline-primary:focus,
body.olit-skin .btn-outline-primary:active,
body.olit-skin .btn-outline-primary.active {
  background: var(--ol-menu-active-bg);
  border-color: var(--ol-accent);
  color: var(--ol-accent);
}
/* btn-link:要維持「看起來是連結」,不能吃到上面的保底按鈕外觀 */
body.olit-skin .btn-link {
  background: transparent;
  border-color: transparent;
  color: var(--ol-accent);
}
body.olit-skin .btn-link:hover,
body.olit-skin .btn-link:focus {
  background: transparent;
  color: var(--ol-accent);
  text-decoration: underline;
}
/* 停用狀態:BS3 只靠 opacity,深色底下會糊成一團,補一組明確的底色 */
body.olit-skin .btn[disabled],
body.olit-skin .btn.disabled,
body.olit-skin fieldset[disabled] .btn {
  background: var(--ol-btn-default-bg);
  border-color: var(--ol-btn-default-border);
  color: var(--ol-muted);
  opacity: 0.65;
  box-shadow: none;
}

/* ---- 分頁 ---- */
/* custom.css 用 `.dataTables_paginate a{background:#ddd!important}` 硬鎖淺灰,
   深色模式會變成淺灰底配淺字(看不見),只能以同等 !important 蓋掉 */
body.olit-skin .pagination > li > a,
body.olit-skin .pagination > li > span,
body.olit-skin .dataTables_paginate a {
  background: var(--ol-rail) !important;
  border: 1px solid var(--ol-rail-border) !important;
  color: var(--ol-text) !important;
  border-radius: 0;
}
body.olit-skin .pagination > li:first-child > a { border-radius: var(--ol-radius) 0 0 var(--ol-radius); }
body.olit-skin .pagination > li:last-child > a { border-radius: 0 var(--ol-radius) var(--ol-radius) 0; }
body.olit-skin .pagination > li > a:hover,
body.olit-skin .pagination > li > a:focus,
body.olit-skin .dataTables_paginate a:hover {
  background: var(--ol-menu-hover) !important;
  border-color: var(--ol-rail-border) !important;
  color: var(--ol-text) !important;
}
body.olit-skin .pagination > .active > a,
body.olit-skin .pagination > .active > a:hover,
body.olit-skin .paging_full_numbers a.paginate_active {
  background: var(--ol-accent) !important;
  border-color: var(--ol-accent) !important;
  color: #fff !important;
}
/* Bootstrap 給 .disabled 的 #ddd 淺灰底,配深色模式的淺字等於看不見 */
body.olit-skin .pagination > .disabled > a,
body.olit-skin .pagination > .disabled > a:hover,
body.olit-skin .pagination > .disabled > span,
body.olit-skin .dataTables_paginate .paginate_button.disabled a {
  background: transparent !important;
  border-color: var(--ol-rail-border) !important;
  color: var(--ol-muted) !important;
  cursor: not-allowed;
}

/* ---- 模態框 / 提示 ---- */
body.olit-skin .modal-content {
  background: var(--ol-surface);
  border: 1px solid var(--ol-rail-border);
  border-radius: var(--ol-radius);
  color: var(--ol-text);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
body.olit-skin .modal-header,
body.olit-skin .modal-footer {
  border-color: var(--ol-rail-border);
}
body.olit-skin .modal-title { color: var(--ol-text); font-weight: 600; }
/* 關閉的「×」:bootstrap 是 color:#000 + 白色 text-shadow,深色標題列上等於看不見 */
body.olit-skin .close,
body.olit-skin .modal-header .close {
  color: var(--ol-muted);
  text-shadow: none;
  opacity: 0.8;
}
body.olit-skin .close:hover,
body.olit-skin .modal-header .close:hover {
  color: var(--ol-text);
  opacity: 1;
}
body.olit-skin .modal-backdrop.in { opacity: 0.6; }

/* 彈窗垂直置中。bootstrap 3 只給 margin-top:30px,視窗一開就卡在最上緣、
   壓在頂欄上,標題列看起來像被切掉。改用 flex + margin:auto(不是
   align-items:center):內容比視窗高時 auto 邊界會歸零從頂端排,才不會
   把上半截推到捲動範圍外。 */
body.olit-skin .modal.in {
  display: flex !important;
  padding: 24px 0;
}
body.olit-skin .modal.in > .modal-dialog { margin: auto; }
@media (max-width: 767px) {
  body.olit-skin .modal.in > .modal-dialog { width: calc(100% - 20px); }
}
/* 標題列:h5/h6 是 block、close 是 float:right,兩個排在一起時「×」會被
   擠到標題下面一行。排成 flex 才會一左一右。 */
body.olit-skin .modal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
}
body.olit-skin .modal-header > .modal-title { flex: 1 1 auto; margin: 0; }
body.olit-skin .modal-header > .close {
  float: none;
  flex: 0 0 auto;
  margin: 0;
  font-size: calc(var(--ol-fs) + 6px);
  line-height: 1;
}
body.olit-skin .modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
}
body.olit-skin .modal-footer .btn + .btn { margin-left: 0; }
/* 沒放東西的 footer(例如專案用戶選擇窗)不要佔一條空白 */
body.olit-skin .modal-footer:empty { display: none; }

/* Bootstrap4Dialog(刪除確認那種)吐的是 bootstrap 4 的 utility class,
   但站上只有 bootstrap 3 的樣式表:.bg-primary 在 BS3 是整塊亮藍實心底、
   .text-primary 是亮藍字,套進深色彈窗就成了一條刺眼藍色標題列配看不清的
   內文,.btn-light / .btn-secondary 則根本沒有樣式。這段把它們接回皮膚色。 */
body.olit-skin .modal-header.bg-primary,
body.olit-skin .modal-header.bg-secondary,
body.olit-skin .modal-header.bg-info,
body.olit-skin .modal-header.bg-light,
body.olit-skin .modal-header.bg-dark,
body.olit-skin .modal-header.bg-success,
body.olit-skin .modal-header.bg-warning,
body.olit-skin .modal-header.bg-danger {
  background: var(--ol-table-head);
  color: var(--ol-text);
}
body.olit-skin .modal-header .modal-title.text-white,
body.olit-skin .modal-header .modal-title.text-black { color: var(--ol-text); }
body.olit-skin .modal-body.text-primary,
body.olit-skin .modal-body.text-secondary,
body.olit-skin .modal-body.text-info,
body.olit-skin .modal-body.text-light,
body.olit-skin .modal-body.text-dark,
body.olit-skin .modal-body.text-black,
body.olit-skin .modal-body.text-white { color: var(--ol-text); }
body.olit-skin .modal-body.text-success { color: var(--ol-accent-2); }
body.olit-skin .modal-body.text-warning { color: var(--ol-warn); }
body.olit-skin .modal-body.text-danger { color: var(--ol-danger); }
body.olit-skin .btn-light,
body.olit-skin .btn-secondary {
  background: var(--ol-btn-default-bg);
  border: 1px solid var(--ol-btn-default-border);
  color: var(--ol-btn-default-text);
}
body.olit-skin .btn-light:hover,
body.olit-skin .btn-light:focus,
body.olit-skin .btn-secondary:hover,
body.olit-skin .btn-secondary:focus {
  background: var(--ol-btn-default-hover);
  border-color: var(--ol-btn-default-border);
  color: var(--ol-btn-default-text);
}

/* 內容區的下拉選單(面板工具列的扳手選單等)。頂欄那組另有更明確的規則,
   不受這段影響;沒有這段的話,深色模式下會冒出一塊全白的選單。 */
body.olit-skin .dropdown-menu {
  background: var(--ol-rail);
  border: 1px solid var(--ol-rail-border);
  border-radius: var(--ol-radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  padding: 4px;
}
body.olit-skin .dropdown-menu > li > a {
  color: var(--ol-menu-text);
  border-radius: var(--ol-radius);
  padding: 7px 10px;
  font-size: var(--ol-fs);
}
body.olit-skin .dropdown-menu > li > a:hover,
body.olit-skin .dropdown-menu > li > a:focus {
  background: var(--ol-menu-hover);
  color: var(--ol-text);
}
body.olit-skin .dropdown-menu > .active > a,
body.olit-skin .dropdown-menu > .active > a:hover {
  background: var(--ol-menu-active-bg);
  color: var(--ol-accent);
}
body.olit-skin .dropdown-menu .divider { background: var(--ol-rail-border); }

/* 按鈕群組:每顆都圓角會讓接縫看起來斷開,只留頭尾 */
body.olit-skin .btn-group > .btn { border-radius: 0; }
body.olit-skin .btn-group > .btn:first-child { border-radius: var(--ol-radius) 0 0 var(--ol-radius); }
body.olit-skin .btn-group > .btn:last-child { border-radius: 0 var(--ol-radius) var(--ol-radius) 0; }
body.olit-skin .btn-group > .btn:only-child { border-radius: var(--ol-radius); }
/* 提示條:custom.css 是整條 0.88 不透明的高飽和色塊(綠/藍/橘/紅),在深色底
   上很刺眼。改成 Portainer 的淡底 + 左側色條 + 同色文字。 */
body.olit-skin .alert {
  border-radius: var(--ol-radius);
  border-width: 1px;
  border-style: solid;
  padding: 10px 14px;
  font-size: var(--ol-fs);
}
body.olit-skin .alert.alert-success {
  background: color-mix(in srgb, var(--ol-accent-2) 14%, transparent);
  border-color: color-mix(in srgb, var(--ol-accent-2) 40%, transparent);
  border-left: 3px solid var(--ol-accent-2);
  color: var(--ol-text);
}
body.olit-skin .alert.alert-info {
  background: color-mix(in srgb, var(--ol-accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--ol-accent) 40%, transparent);
  border-left: 3px solid var(--ol-accent);
  color: var(--ol-text);
}
body.olit-skin .alert.alert-warning {
  background: color-mix(in srgb, var(--ol-warn) 14%, transparent);
  border-color: color-mix(in srgb, var(--ol-warn) 40%, transparent);
  border-left: 3px solid var(--ol-warn);
  color: var(--ol-text);
}
body.olit-skin .alert.alert-danger,
body.olit-skin .alert.alert-error {
  background: color-mix(in srgb, var(--ol-danger) 14%, transparent);
  border-color: color-mix(in srgb, var(--ol-danger) 40%, transparent);
  border-left: 3px solid var(--ol-danger);
  color: var(--ol-text);
}
body.olit-skin .alert .close { color: var(--ol-muted); opacity: 0.8; text-shadow: none; }
body.olit-skin .nav-tabs {
  border-bottom: 1px solid var(--ol-rail-border);
}
body.olit-skin .nav-tabs > li > a {
  border-radius: var(--ol-radius) var(--ol-radius) 0 0;
  color: var(--ol-muted);
  border-color: transparent;
}
body.olit-skin .nav-tabs > li.active > a,
body.olit-skin .nav-tabs > li.active > a:hover,
body.olit-skin .nav-tabs > li.active > a:focus {
  background: var(--ol-surface);
  border-color: var(--ol-rail-border);
  border-bottom-color: transparent;
  color: var(--ol-accent);
}

/* ---- 圖表容器 ---- */
body.olit-skin .x_content > [id^="echart"],
body.olit-skin .x_content > [id*="echart"],
body.olit-skin .x_content > [id^="show"],
body.olit-skin .x_content > [id^="strain"],
body.olit-skin .demo-placeholder,
body.olit-skin .chart {
  background: transparent;
  border-radius: var(--ol-radius);
}
body.olit-skin .x_content > [id^="echart"],
body.olit-skin .x_content > [id*="echart"],
body.olit-skin .x_content > [id^="show"],
body.olit-skin .x_content > [id^="strain"] {
  color: var(--ol-text);
}

/* ---- daterangepicker ---- */
body.olit-skin .daterangepicker {
  background: var(--ol-rail);
  border: 1px solid var(--ol-rail-border);
  border-radius: var(--ol-radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  color: var(--ol-text);
}
body.olit-skin .daterangepicker:before,
body.olit-skin .daterangepicker:after { display: none; }
body.olit-skin .daterangepicker .calendar-table,
body.olit-skin .daterangepicker .calendar,
body.olit-skin .daterangepicker .ranges {
  background: transparent;
  border: 0;
}
body.olit-skin .daterangepicker .calendar-table th,
body.olit-skin .daterangepicker .calendar-table td {
  color: var(--ol-text);
  background: transparent;
}
body.olit-skin .daterangepicker td.off,
body.olit-skin .daterangepicker td.off.in-range,
body.olit-skin .daterangepicker td.off.start-date,
body.olit-skin .daterangepicker td.off.end-date {
  background: transparent;
  color: var(--ol-muted);
  opacity: 0.5;
}
body.olit-skin .daterangepicker td.in-range {
  background: var(--ol-menu-active-bg);
  color: var(--ol-text);
}
body.olit-skin .daterangepicker td.active,
body.olit-skin .daterangepicker td.active:hover,
body.olit-skin .daterangepicker .ranges li.active,
body.olit-skin .daterangepicker .ranges li:hover {
  background: var(--ol-accent);
  color: #fff;
}
body.olit-skin .daterangepicker td.available:hover,
body.olit-skin .daterangepicker th.available:hover {
  background: var(--ol-menu-hover);
  color: var(--ol-text);
}
body.olit-skin .daterangepicker .ranges li {
  color: var(--ol-text);
  border-radius: var(--ol-radius);
}
body.olit-skin .daterangepicker .input-mini,
body.olit-skin .daterangepicker select.monthselect,
body.olit-skin .daterangepicker select.yearselect,
body.olit-skin .daterangepicker select.hourselect,
body.olit-skin .daterangepicker select.minuteselect,
body.olit-skin .daterangepicker select.secondselect,
body.olit-skin .daterangepicker select.ampmselect {
  background: var(--ol-rail);
  border: 1px solid var(--ol-rail-border);
  border-radius: var(--ol-radius) !important;
  color: var(--ol-text);
}
body.olit-skin .daterangepicker .drp-buttons {
  border-top: 1px solid var(--ol-rail-border);
}
body.olit-skin .daterangepicker .drp-selected { color: var(--ol-muted); }

/* ---------- footer ------------------------------------------------- */
body.olit-skin footer {
  background: transparent;
  color: var(--ol-muted);
  padding: 10px 20px;
  border-top: 1px solid var(--ol-rail-border);
  display: flow-root;
  /* 固定字級,不跟 --ol-fs 走:頁尾總高 42px 要與左側 .sidebar-footer 等高 */
  font-size: 14px;
  line-height: 21px;
}
/* bootstrap .clearfix 的 ::after 會在浮動下方再墊一行,溢出頁尾底 10px;
   body 因此多出捲動量,任何 scrollIntoView / 焦點移動都會把整個殼捲上去 */
body.olit-skin footer > .clearfix { display: none; }
body.olit-skin footer a { color: var(--ol-accent); }

/* ---------- label(角色用戶清單等) -------------------------------- */
body.olit-skin .label {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 8px;
  margin: 2px 2px 2px 0;
  border-radius: var(--ol-radius);
}
body.olit-skin .label-success {
  background: var(--ol-btn-success-bg);
  color: var(--ol-btn-success-text);
}

/* ===================================================================
   LOGIN  (body.login) — 置中登入卡
   登入頁跟著 data-skin-theme 走(和頂欄那顆切換鈕同一個 key),
   深淺兩套顏色都由這裡的 --ol-login-* 推導。
   =================================================================== */
body.olit-skin.login {
  --ol-login-card: #ffffff;
  --ol-login-field: #ffffff;
  --ol-login-border: #d7dee7;
  --ol-login-shadow: 0 18px 50px rgba(16, 24, 40, 0.13);
  --ol-login-focus: rgba(30, 111, 217, 0.16);

  /* !important:上面 body.olit-skin 的底色也是 !important,不加蓋不過去 */
  background:
    radial-gradient(900px 520px at 12% -12%, rgba(30, 111, 217, 0.12), transparent 62%),
    radial-gradient(760px 480px at 108% 112%, rgba(47, 158, 95, 0.10), transparent 58%),
    #eef1f6 !important;
  min-height: 100vh;
  overflow: auto;
  color: var(--ol-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html[data-skin-theme="dark"] body.olit-skin.login {
  --ol-login-card: #1a1e25;
  --ol-login-field: #232932;
  --ol-login-border: #333b47;
  --ol-login-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  --ol-login-focus: rgba(74, 163, 240, 0.22);

  background:
    radial-gradient(900px 520px at 12% -12%, rgba(74, 163, 240, 0.16), transparent 62%),
    radial-gradient(760px 480px at 108% 112%, rgba(70, 184, 119, 0.10), transparent 58%),
    #0b0e13 !important;
}

/* config.py 有設 BACK_IMG 時改用背景圖,上面壓一層遮罩讓卡片外的字還讀得到 */
body.olit-skin.login.has-back-img {
  background:
    linear-gradient(rgba(240, 243, 248, 0.72), rgba(240, 243, 248, 0.72)),
    var(--ol-login-backimg) center / cover no-repeat fixed !important;
}
html[data-skin-theme="dark"] body.olit-skin.login.has-back-img {
  background:
    linear-gradient(rgba(8, 11, 16, 0.72), rgba(8, 11, 16, 0.72)),
    var(--ol-login-backimg) center / cover no-repeat fixed !important;
}

/* 重影修正:custom.css 給 .login_content 加了 text-shadow: 0 1px 0 #fff,
   淺底上看起來是浮雕、深底上直接變成錯開一格的白色重影。整頁關掉。 */
body.olit-skin.login,
body.olit-skin.login .login_content,
body.olit-skin.login .login_content * { text-shadow: none; }

/* ---- 版面:整頁置中 ---- */
body.olit-skin.login .ol-login-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
}
body.olit-skin.login .login_wrapper {
  position: relative;
  width: 100%;
  max-width: 420px;
  right: auto;
  margin: 0;
}
/* 登入表單留在文件流裡(整張卡才量得到高度、才置中得了),
   註冊表單疊在它上面,由下面的 :target 規則決定誰看得見。 */
body.olit-skin.login .login_wrapper .login_form {
  position: relative;
  z-index: 22;
  visibility: visible;
  pointer-events: auto;
}
body.olit-skin.login .login_wrapper .registration_form {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 21;
  visibility: hidden;
  pointer-events: none;
}
body.olit-skin.login #signup:target ~ .login_wrapper .registration_form,
body.olit-skin.login #signin:target ~ .login_wrapper .login_form {
  visibility: visible;
  pointer-events: auto;
}
body.olit-skin.login #signup:target ~ .login_wrapper .login_form,
body.olit-skin.login #signin:target ~ .login_wrapper .registration_form {
  visibility: hidden;
  pointer-events: none;
}

/* ---- 深淺色切換鈕:固定在右上角 ---- */
body.olit-skin a.ol-login-theme {
  position: fixed;
  top: 16px;
  right: 18px;
  z-index: 30;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---- 卡片 ---- */
body.olit-skin.login .login_content {
  position: relative;
  background: var(--ol-login-card);
  border: 1px solid var(--ol-login-border);
  border-radius: 12px;
  box-shadow: var(--ol-login-shadow);
  padding: 36px 32px 24px;
  margin: 0;
  min-width: 0;
  color: var(--ol-text);
  text-align: center;
  /* 讓頂端色條的兩端被卡片的圓角切齊,不然 3px 高的方頭會凸出圓角外 */
  overflow: hidden;
}
/* 卡片頂端的品牌色條:取 Olitglobal 標誌的紅橘→橘→金黃 */
body.olit-skin.login .login_content:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #e0451f 0%, #f0801e 48%, #f5c800 100%);
}
body.olit-skin.login .login_content form { margin: 0; }
body.olit-skin.login .login_content a { color: var(--ol-accent); }

/* ---- 品牌區 ---- */
body.olit-skin.login .ol-login-brand { margin: 0 0 24px; }
/* logo 依主題換圖,不墊底板:VIEW_ICON 是白字版(深底用)、MAIN_ICON 是灰字版
   (淺底用),和 view 頁工具列同一組圖。 */
/* 容器高度寫死:兩張圖的畫布高度不一樣(68 / 47),不固定的話整張卡片會
   跟著主題差 21px。圖片在框內置中,看到的 logo 大小仍然一致。 */
body.olit-skin.login .ol-login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 68px;
  margin: 0 0 16px;
}
body.olit-skin.login .ol-login-logo img {
  display: block;
  margin: 0;
  width: auto;
  max-width: 100%;
  height: auto;
}
body.olit-skin.login .ol-login-logo .ol-logo--dark { display: none; }
html[data-skin-theme="dark"] body.olit-skin.login .ol-login-logo .ol-logo--light { display: none; }
html[data-skin-theme="dark"] body.olit-skin.login .ol-login-logo .ol-logo--dark { display: block; }
/* 兩張圖的 logo 本體一樣大,但畫布留白差很多(thsrc.png 300×120,內容只佔高度
   的 59%;view_thsrc.png 249×83,內容佔 86%)。同一個 max-height 會讓深色版看
   起來大 1.45 倍,所以各自換算成「內容高約 40px」的畫布高度:
     淺 40 × 120/71 ≈ 68    深 40 × 83/71 ≈ 47 */
body.olit-skin.login .ol-login-logo .ol-logo--light { max-height: 68px; }
body.olit-skin.login .ol-login-logo .ol-logo--dark { max-height: 47px; }
body.olit-skin.login .ol-login-title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--ol-text);
}
body.olit-skin.login .ol-login-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ol-muted);
}

/* ---- 錯誤訊息 ---- */
body.olit-skin.login .ol-login-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 9px 12px;
  border-radius: 6px;
  border: 1px solid rgba(214, 69, 80, 0.45);
  background: rgba(214, 69, 80, 0.12);
  color: var(--ol-danger);
  font-size: 13px;
  text-align: left;
}

/* ---- 輸入框 ---- */
body.olit-skin.login .login_content .form-control {
  width: 100%;
  height: 44px;
  margin: 0 0 18px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--ol-login-border);
  background: var(--ol-login-field);
  color: var(--ol-text);
  font-size: 14px;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.olit-skin.login .login_content .form-control::placeholder { color: var(--ol-muted); }
body.olit-skin.login .login_content .form-control:focus {
  border-color: var(--ol-accent);
  box-shadow: 0 0 0 3px var(--ol-login-focus);
  background: var(--ol-login-field);
  color: var(--ol-text);
  outline: none;
}

/* 浮動標籤 + 顯示密碼眼睛(由 login.js 產生的結構) */
body.olit-skin.login .login_content .ol-field { position: relative; }
body.olit-skin.login .login_content .ol-field-label {
  position: absolute;
  left: 10px;
  top: 22px;
  transform: translateY(-50%);
  padding: 0 6px;
  background: var(--ol-login-field);
  color: var(--ol-muted);
  font-size: 13px;
  font-weight: 400;
  pointer-events: none;
  transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease;
}
/* 標籤浮上邊框後底色要換成卡片色,不然會在框線上留一段輸入框底色 */
body.olit-skin.login .login_content .ol-field input:focus ~ .ol-field-label,
body.olit-skin.login .login_content .ol-field input:not(:placeholder-shown) ~ .ol-field-label {
  top: 0;
  font-size: 11px;
  color: var(--ol-accent);
  background: var(--ol-login-card);
}
body.olit-skin.login .login_content .ol-has-eye .form-control { padding-right: 42px; }
body.olit-skin.login .login_content .ol-eye {
  position: absolute;
  right: 6px;
  top: 22px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--ol-muted);
  cursor: pointer;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.olit-skin.login .login_content .ol-eye:hover { color: var(--ol-accent); }

/* ---- 送出鈕 ---- */
body.olit-skin.login .login_content .btn.submit,
body.olit-skin.login .login_content .btn-default {
  width: 100%;
  height: 44px;
  margin: 2px 0 0;
  border-radius: 6px;
  border: 1px solid var(--ol-btn-primary-bg);
  background: var(--ol-btn-primary-bg);
  color: var(--ol-btn-primary-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.06em;
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
body.olit-skin.login .login_content .btn.submit:hover,
body.olit-skin.login .login_content .btn-default:hover,
body.olit-skin.login .login_content .btn.submit:focus,
body.olit-skin.login .login_content .btn-default:focus {
  background: var(--ol-btn-primary-hover);
  border-color: var(--ol-btn-primary-hover);
  color: var(--ol-btn-primary-text);
}
body.olit-skin.login .login_content .change_link {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--ol-muted);
}

/* ---- 卡片頁尾 ---- */
body.olit-skin.login .ol-login-foot {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--ol-login-border);
}
body.olit-skin.login .ol-login-brandline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ol-text);
}
/* 這顆標誌是橘黃色畫在透明背景上的,深淺色都直接用,不需要墊底色 */
body.olit-skin.login .ol-login-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}
body.olit-skin.login .ol-login-mark img {
  display: block;
  width: 100%;
  height: auto;
}
body.olit-skin.login .ol-login-copy {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ol-muted);
}

@media (max-width: 479.98px) {
  body.olit-skin.login .login_content { padding: 28px 20px 20px; }
  body.olit-skin.login .ol-login-page { padding: 24px 12px; }
}

/* ===================================================================
   ERROR PAGES  (.error-number)
   =================================================================== */
body.olit-skin .error-number {
  font-size: clamp(90px, 16vw, 170px);
  font-weight: 700;
  line-height: 1;
  color: var(--ol-accent);
}
body.olit-skin .col-middle h2 { color: var(--ol-text); font-weight: 600; }
body.olit-skin .col-middle p { color: var(--ol-muted); }
body.olit-skin .col-middle .form-control { border-radius: var(--ol-radius) 0 0 var(--ol-radius); }
body.olit-skin .col-middle .btn-default { border-radius: 0 var(--ol-radius) var(--ol-radius) 0; }

/* ---------- responsive tiers — 三檔位邊界 480 / 768 / 1024 -----------
   斷點必須排在上方桌機 nav-md/nav-sm 寬度規則之後,media 命中時才會勝出。
   邊界「歸上一檔」:768→平板、1024→桌機,故下限用 .98px。 */

/* 檔位 2 — 平板(768–1024px):側欄一律收成 icon rail */
@media (max-width: 1023.98px) {
  body.olit-skin.nav-md .container.body .col-md-3.left_col { width: var(--ol-rail-w-sm); }
  body.olit-skin.nav-md .container.body .top_nav,
  body.olit-skin.nav-md .container.body .right_col { margin-left: var(--ol-rail-w-sm); }
}

/* 檔位 3 — 手機(<768px):nav-md 隱藏側欄、內容全寬 */
@media (max-width: 767.98px) {
  body.olit-skin .left_col { border-radius: 0; margin: 0; min-height: 100vh; height: 100vh; }
  body.olit-skin .ol-topsearch { display: none; }
  body.olit-skin.nav-md .container.body .right_col { padding: 12px; }

  body.olit-skin.nav-md .container.body > .main_container > .col-md-3.left_col {
    display: none !important;
  }
  body.olit-skin.nav-md .container.body .top_nav,
  body.olit-skin.nav-md .container.body .right_col {
    margin-left: 0 !important;
    width: 100%;
  }
}

/* ---- Markdown 編輯器(EasyMDE,訊息發佈) ---- */
/* 表格鈕的 class 就叫 table,會吃到 Bootstrap 的 .table{width:100%} */
body.olit-skin .editor-toolbar button.table { width: 30px; margin: 0; }
body.olit-skin .editor-toolbar,
body.olit-skin .EasyMDEContainer .CodeMirror {
  background: var(--ol-surface);
  border-color: var(--ol-table-line);
  color: var(--ol-text);
}
body.olit-skin .EasyMDEContainer .CodeMirror-cursor { border-left-color: var(--ol-text); }
body.olit-skin .editor-toolbar button { color: var(--ol-text); }
body.olit-skin .editor-toolbar button:hover,
body.olit-skin .editor-toolbar button.active { background: var(--ol-menu-hover); border-color: var(--ol-table-line); }
body.olit-skin .editor-toolbar i.separator { border-color: var(--ol-table-line); }
body.olit-skin .EasyMDEContainer .editor-preview,
body.olit-skin .EasyMDEContainer .editor-preview-side { background: var(--ol-bg); color: var(--ol-text); border-color: var(--ol-table-line); }
body.olit-skin .editor-preview img { max-width: 100%; }
body.olit-skin .editor-statusbar { color: var(--ol-muted); }

/* <480px:只留頭像,隱藏使用者名 */
@media (max-width: 479.98px) {
  body.olit-skin .user-profile .ol-username { display: none; }
  body.olit-skin .user-profile img { margin-right: 0; }
}