/* ============================================================
   v5 功能層樣式:搜尋 / 回收桶 / 歷史告警 / 容器 / 排程
   ------------------------------------------------------------
   刻意只用 ui-next.css 已經定義好的變數(--card / --line / --txt / --accent…),
   不重新定義配色 —— 這樣主題切換與六種主題色會自動跟著生效,不必在這裡複製一份。
   刪掉這個檔與 plus.js,整包 v5 功能就消失,既有頁面完全不受影響。
   ============================================================ */

/* ---------- 共用:工具列 / 空狀態 / 標籤頁 ---------- */
.plus-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.plus-head h2 { margin: 0; }
.plus-crumb { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .55; margin-bottom: 4px; }
.plus-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.plus-bar input[type="text"], .plus-bar input[type="number"], .plus-bar input[type="date"], .plus-bar select {
  background: var(--card, #12151f); color: var(--txt, #e7ecf5);
  border: 1px solid var(--line, #242a38); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13px;
}
.plus-bar input[type="text"]:focus, .plus-bar select:focus { outline: 2px solid var(--accent, #4f9dff); outline-offset: 1px; }
.plus-grow { flex: 1 1 220px; min-width: 160px; }
.plus-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; opacity: .85; cursor: pointer; user-select: none; }
.plus-note { font-size: 12.5px; opacity: .6; }
.plus-empty { padding: 40px 16px; text-align: center; opacity: .55; font-size: 14px; }
.plus-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.plus-tab { background: transparent; border: 1px solid var(--line, #242a38); color: inherit; border-radius: 999px;
  padding: 6px 14px; font-size: 13px; cursor: pointer; }
.plus-tab.active { background: color-mix(in srgb, var(--accent, #4f9dff) 18%, transparent); border-color: var(--accent, #4f9dff); }
.plus-pane.hidden { display: none; }

/* ---------- 卡片與統計小格 ---------- */
.plus-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-bottom: 18px; }
.plus-card { background: var(--card, #12151f); border: 1px solid var(--line, #242a38); border-radius: 14px; padding: 14px 16px; }
.plus-card .pc-label { font-size: 12px; opacity: .6; margin-bottom: 6px; }
/* grid 子項預設 min-width:auto,長路徑會把卡片撐爆疊到隔壁;路徑單行省略,完整內容看 title */
.plus-cards > .plus-card { min-width: 0; }
.plus-card .pc-path { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plus-card .pc-val { font-size: 22px; font-weight: 650; }
.plus-card .pc-sub { font-size: 12px; opacity: .55; margin-top: 4px; }
.plus-card.warn { border-color: #ffb454; }
.plus-card.crit { border-color: #ff5d6c; }

/* ---------- 搜尋結果 ---------- */
.plus-hits { max-height: 62vh; overflow: auto; border: 1px solid var(--line, #242a38); border-radius: 12px; }
.plus-hit { display: grid; grid-template-columns: 24px 1fr auto auto; gap: 10px; align-items: center;
  padding: 8px 12px; border-bottom: 1px solid var(--line, #242a38); font-size: 13.5px; cursor: pointer; }
.plus-hit:last-child { border-bottom: 0; }
.plus-hit:hover { background: color-mix(in srgb, var(--accent, #4f9dff) 8%, transparent); }
.plus-hit .ph-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* .ph-dir 是「第二行的小字路徑」,搜尋結果、最大檔清單、容器列、排程列都用得到,
   所以定義成全域規則而不是綁在 .plus-hit 底下(綁著的話其他表格會擠成一行)。 */
.ph-dir { font-size: 11.5px; opacity: .5; display: block; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.plus-hit .ph-snip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  opacity: .7; display: block; margin-top: 2px; white-space: pre-wrap; word-break: break-all; }
.plus-hit .ph-size, .plus-hit .ph-time { font-size: 12px; opacity: .6; white-space: nowrap; }

/* ---------- 歷史圖表 ---------- */
.plus-chart-wrap { background: var(--card, #12151f); border: 1px solid var(--line, #242a38);
  border-radius: 14px; padding: 14px 16px 8px; margin-bottom: 16px; }
.plus-chart-wrap h3 { margin: 0 0 10px; font-size: 14px; }
.plus-chart-body { height: 240px; }
.plus-ranges { display: flex; gap: 4px; flex-wrap: wrap; }
.plus-range { background: transparent; border: 1px solid var(--line, #242a38); color: inherit;
  border-radius: 8px; padding: 5px 11px; font-size: 12.5px; cursor: pointer; }
.plus-range.active { background: color-mix(in srgb, var(--accent, #4f9dff) 20%, transparent); border-color: var(--accent, #4f9dff); }

/* ---------- 告警 ---------- */
.plus-alert { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; padding: 9px 12px;
  border-bottom: 1px solid var(--line, #242a38); font-size: 13.5px; align-items: start; }
.plus-alert:last-child { border-bottom: 0; }
.plus-alert .pa-msg { line-height: 1.5; }
.plus-alert .pa-time { font-size: 11.5px; opacity: .55; white-space: nowrap; }
.plus-alert.ok { opacity: .65; }
.plus-alert.crit .pa-msg { color: #ff8d97; }
.plus-rule { display: grid; grid-template-columns: 1fr 90px 110px 60px; gap: 10px; align-items: center;
  padding: 8px 4px; border-bottom: 1px solid var(--line, #242a38); font-size: 13px; }
.plus-rule:last-child { border-bottom: 0; }
.plus-rule input[type="number"] { width: 100%; background: var(--card, #12151f); color: inherit;
  border: 1px solid var(--line, #242a38); border-radius: 8px; padding: 5px 8px; font: inherit; font-size: 12.5px; }

/* ---------- 容器日誌 ---------- */
.plus-log { background: #05070d; color: #cfe3ff; border-radius: 10px; padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.55;
  height: 60vh; overflow: auto; white-space: pre-wrap; word-break: break-all; }
.plus-log .pl-err { color: #ff9aa4; }
.plus-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px;
  border: 1px solid var(--line, #242a38); }
.plus-badge.run { color: #2fbf8f; border-color: #2fbf8f; }
.plus-badge.stop { color: #ff8d97; border-color: #ff8d97; }
.plus-badge.old { color: #ffb454; border-color: #ffb454; }

/* ---------- 排程任務 ---------- */
.plus-job-form { display: grid; gap: 10px; }
.plus-job-form label { font-size: 12.5px; opacity: .7; display: block; margin-bottom: 3px; }
/* :not([type="checkbox"]) 很重要 —— 少了它,勾選框也會被拉成整行寬,
   文字被擠到下一行,看起來就像一個孤零零置中的方框(手機上特別明顯)。 */
.plus-job-form input:not([type="checkbox"]), .plus-job-form select, .plus-job-form textarea {
  width: 100%; background: var(--card, #12151f); color: inherit; border: 1px solid var(--line, #242a38);
  border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13px;
}
.plus-job-form input[type="checkbox"] { width: auto; flex: 0 0 auto; margin: 0; }
.plus-check input[type="checkbox"] { width: auto; flex: 0 0 auto; }
.plus-job-form .pj-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plus-danger-note { border: 1px solid #ff5d6c; border-radius: 10px; padding: 8px 10px; font-size: 12.5px; }

/* ---------- 設定面板:2FA / 裝置 ---------- */
.plus-2fa-qr { display: grid; place-items: center; background: #fff; border-radius: 12px; padding: 12px; margin: 10px 0; }
.plus-2fa-qr svg { width: 190px; height: 190px; }
.plus-secret { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
  background: var(--card, #12151f); border: 1px solid var(--line, #242a38); border-radius: 8px;
  padding: 8px 10px; word-break: break-all; user-select: all; }
.plus-dev { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--line, #242a38); font-size: 13px; }
.plus-dev:last-child { border-bottom: 0; }
.plus-dev .pd-sub { font-size: 11.5px; opacity: .55; }

/* ---------- 手機 ---------- */
@media (max-width: 720px) {
  .plus-hit { grid-template-columns: 22px 1fr auto; }
  .plus-hit .ph-time { display: none; }
  /* 手機:藏掉「需連續超標幾秒」(進階設定,桌機再調),
     但保留單位欄 —— 少了它會分不出門檻是 % 還是 °C。三欄剛好排成一行。 */
  .plus-rule { grid-template-columns: 1fr 74px 30px; gap: 8px; }
  .plus-rule .pr-dur { display: none; }
  .plus-rule .plus-check { font-size: 12.5px; }
  .plus-chart-body { height: 200px; }
  .plus-job-form .pj-row { grid-template-columns: 1fr; }
}

/* ============================================================
   側邊欄:分組 + 可收合 + 圖示列
   ------------------------------------------------------------
   v4 只有 7 項時一列到底沒問題,v5 變成 14 項就太長了。這裡用兩種互補的做法:
     ① 分組 + 可收合(手風琴):暫時收起這陣子用不到的類別,狀態記在 localStorage
     ② 圖示列:整條縮到 76px 只留圖示,長期就想要窄一點的人用
   第三種「不靠側邊欄找頁面」的方式 ui-next.js 已經有了 —— Ctrl / ⌘ + K 命令面板,
   新分頁也一起收進去了(plus.js 刻意在它初始化之前就把項目插好)。
   ============================================================ */
.nav-grp { display: flex; flex-direction: column; gap: 4px; }
.nav-grp.hidden { display: none; }
.nav-sect { display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.nav-grp.collapsed .nav-sect { display: none; }

#nav .nav-group {
  display: flex; align-items: center; gap: 6px;
  margin-top: 14px; cursor: pointer; user-select: none;
  border-radius: 8px; transition: background .15s ease, color .15s ease;
}
#nav .nav-grp:first-child .nav-group { margin-top: 2px; }
#nav .nav-group:hover { background: var(--bg-hover, rgba(255,255,255,.05)); color: var(--txt, #e7ecf5); }
#nav .nav-group:focus-visible { outline: 2px solid var(--accent, #4f9dff); outline-offset: 2px; }
.gl-caret { font-size: 10px; opacity: .8; transition: transform .18s ease; }
.nav-grp.collapsed .gl-caret { transform: rotate(-90deg); }
.gl-txt { flex: 1; }
/* 收起來時才顯示「裡面還有幾項」,展開時看得到就不必再標一次 */
.gl-count { font-size: 10.5px; opacity: 0; padding: 1px 7px; border-radius: 999px;
  background: var(--line, #242a38); transition: opacity .15s ease; }
.nav-grp.collapsed .gl-count { opacity: .75; }

/* ---------- 圖示列(只在桌機;手機側邊欄本來就是抽屜)---------- */
@media (min-width: 769px) {
  body.nav-rail { --nx-rail: 76px; }
  body.nav-rail .sidebar { width: 76px; padding-left: 0; padding-right: 0; }
  body.nav-rail .brand { justify-content: center; padding: 0 0 4px; }
  body.nav-rail .brand-txt,
  body.nav-rail .ni-txt,
  body.nav-rail .gl-txt,
  body.nav-rail .gl-caret,
  body.nav-rail .gl-count,
  body.nav-rail .ws-text,
  body.nav-rail .uc-info,
  body.nav-rail .sidebar-copyright,
  body.nav-rail .logout span { display: none; }
  body.nav-rail #nav { padding: 0 10px; }
  body.nav-rail #nav a { justify-content: center; padding: 10px 0; position: relative; }
  /* 收合狀態在圖示列裡沒有意義(標題都看不到了),一律展開 */
  body.nav-rail .nav-grp.collapsed .nav-sect { display: flex; }
  /* 分組標題退化成一條細線,還是分得出類別,但不佔一整行文字的高度 */
  body.nav-rail #nav .nav-group {
    height: 1px; margin: 10px 8px; padding: 0; overflow: hidden;
    background: var(--line, #242a38); pointer-events: none;
  }
  body.nav-rail #nav .nav-grp:first-child .nav-group { display: none; }
  body.nav-rail .nav-dot { position: absolute; top: 4px; right: 10px; }
  body.nav-rail .sidebar-foot { justify-content: center; padding: 12px 0 6px; }
  body.nav-rail .user-chip { justify-content: center; padding: 8px 0; }
  body.nav-rail .foot-actions { flex-direction: column; gap: 8px; padding: 0 10px; }
  /* 登出鍵的內容是純文字節點「⎋ 登出」,沒有 span 可以藏。用 text-indent 把整串推出去,
     再用 ::after 補一個圖示 —— 這樣不必為了縮排版去動 index.html 的既有標記。 */
  body.nav-rail .logout {
    width: 100%; padding: 9px 0; position: relative;
    text-indent: -999px; overflow: hidden; white-space: nowrap;
  }
  body.nav-rail .logout::after {
    content: "⎋"; position: absolute; inset: 0; display: grid; place-items: center;
    text-indent: 0; font-size: 15px;
  }
}
#plus-rail { font-size: 15px; line-height: 1; }

/* ---------- 手機:表格轉卡片後的細節 ----------
   ui-next.css 會把 td 變成 flex(左邊欄位名、右邊值)。我的表格裡有些格子是
   「名稱 + 第二行小字路徑」,在 flex 底下會被排成左右並排、擠成一團。
   讓 .ph-dir 佔滿整行寬度,它就會掉到下一行,恢復成「名稱在上、路徑在下」。 */
@media (max-width: 640px) {
  .data-table.mcard td { flex-wrap: wrap; }
  .data-table.mcard td .ph-dir {
    flex: 1 0 100%; max-width: 100%; text-align: right;
    white-space: normal; word-break: break-all;
  }
}

/* ============================================================
   側邊欄高度:項目變多之後會超出畫面
   ------------------------------------------------------------
   .sidebar 是 height:100vh 的 flex 直欄,#nav 只有 flex:1 沒有 overflow ——
   v4 的 7 個項目塞得下,v5 變成 14 個項目 + 3 個分組標題就爆出去了:
   在 1080p 的筆電上,最下面的「使用者管理」會被切掉,而且整條側邊欄跟著頁面捲動。
   讓 #nav 自己捲(min-height:0 是關鍵 —— flex 子元素預設不會小於內容,
   少了它 overflow 不會生效),品牌與底部的使用者/登出就固定不動。
   ============================================================ */
#nav {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--line, #242a38) transparent;
  overscroll-behavior: contain;   /* 捲到底不要把整頁一起帶著捲 */
}
#nav::-webkit-scrollbar { width: 6px; }
#nav::-webkit-scrollbar-track { background: transparent; }
#nav::-webkit-scrollbar-thumb { background: var(--line, #242a38); border-radius: 3px; }
#nav:hover::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent, #4f9dff) 45%, transparent); }

/* 螢幕不高的時候先省版面,盡量不要一開始就出現捲軸 */
@media (min-width: 769px) and (max-height: 900px) {
  #nav a { padding: 9px 16px; }
  #nav .nav-group { margin-top: 10px; }
}
@media (min-width: 769px) and (max-height: 820px) {
  .sidebar-copyright { display: none; }
  .brand { padding-bottom: 0; }
}

/* ============================================================
   全區拖曳上傳的覆蓋層
   pointer-events:none 很重要:覆蓋層若會吃到滑鼠事件,它一出現就會讓
   底下的元素收到 dragleave → 覆蓋層閃爍消失,拖曳體驗會一直抖動。
   ============================================================ */
.plus-drop {
  position: fixed; inset: 0; z-index: 9500;
  display: grid; place-items: center; pointer-events: none;
  background: color-mix(in srgb, var(--bg, #070912) 72%, transparent);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: plusDropIn .12s ease-out;
}
.plus-drop.hidden { display: none; }
.plus-drop .pd-inner {
  border: 2px dashed var(--accent, #4f9dff); border-radius: 22px;
  padding: 34px 48px; text-align: center; max-width: 82vw;
  background: color-mix(in srgb, var(--accent, #4f9dff) 10%, rgba(10, 14, 24, .92));
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .7);
}
.plus-drop .pd-ico { font-size: 44px; line-height: 1; margin-bottom: 10px; }
.plus-drop .pd-title { font-size: 19px; font-weight: 700; }
.plus-drop .pd-dest {
  margin-top: 10px; font-size: 14px; padding: 6px 14px; border-radius: 999px;
  display: inline-block; background: rgba(255, 255, 255, .08);
}
.plus-drop .pd-hint { margin-top: 12px; font-size: 12.5px; opacity: .6; }
@keyframes plusDropIn { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .plus-drop { animation: none; } }

/* 舊的區域式覆蓋層由全區版本取代(它的事件在 capture 階段就被攔下,不會再觸發)。
   拿掉 plus.js / plus.css 就會自己回來。 */
#drop-overlay { display: none !important; }

/* 圖示列只有桌機有效果 —— 手機抽屜裡不要出現一個按了沒反應的按鈕 */
@media (max-width: 768px) { #plus-rail { display: none; } }

/* ============================================================
   桌機的彈窗也要能捲
   ------------------------------------------------------------
   `max-height + overflow-y:auto` 原本只寫在手機的底部抽屜規則(≤768px)裡;
   桌機的 .modal-box 沒有高度上限,內容一長就被視窗裁掉、而且**捲不到** ——
   .modal 是 position:fixed 置中,頁面捲動根本不會動到它。
   設定面板加了「兩步驟驗證」與「登入裝置」之後就會超過螢幕高度,這條是必要的。
   排除清單跟手機那條一致(文件預覽 / 編輯器 / 照片燈箱本來就走全螢幕)。
   ============================================================ */
@media (min-width: 769px) {
  .modal:not(.img-modal):not(#doc-modal):not(#editor-modal) > .modal-box {
    max-height: 88vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--line, #242a38) transparent;
  }
  .modal > .modal-box::-webkit-scrollbar { width: 8px; }
  .modal > .modal-box::-webkit-scrollbar-track { background: transparent; }
  .modal > .modal-box::-webkit-scrollbar-thumb { background: var(--line, #242a38); border-radius: 4px; }
}