/* ============================================================
   全站共用覆寫樣式（i助理 2.0）
   載入順序在 web_style.css 之後，用來補強跨頁一致的互動標準。
   ============================================================ */

/* --- 全站標準：表格「整列」滑鼠移入高亮 ---
   套用對象：設定頁清單 .set-table、任務清單 .list_table，
   以及任何標記 .table-hoverable 的表格。
   ⚠ 規範：之後新增的所有清單功能一律沿用標準表格 class，自動具備此效果。

   注意：Bootstrap 5 的 .table 會把背景色設在每個 <td>（var(--bs-table-bg)），
   會蓋掉 <tr> 的背景，因此 hover 高亮必須套在「儲存格」上才看得到。 */
.set-table tbody tr,
.list_table tbody tr,
.table-hoverable tbody tr {
    cursor: pointer;
}
.set-table tbody tr > td,
.set-table tbody tr > th,
.list_table tbody tr > td,
.list_table tbody tr > th,
.table-hoverable tbody tr > td,
.table-hoverable tbody tr > th {
    transition: background-color 0.12s ease;
}

/* 整列每個儲存格都上色 → 整列變色 */
.set-table tbody tr:not(.no-hover):hover > td,
.set-table tbody tr:not(.no-hover):hover > th,
.list_table tbody tr:not(.no-hover):hover > td,
.list_table tbody tr:not(.no-hover):hover > th,
.table-hoverable tbody tr:not(.no-hover):hover > td,
.table-hoverable tbody tr:not(.no-hover):hover > th {
    background-color: #e8f1fd !important;
}

/* 第一格加左側主色強調條，更清楚標示目前列 */
.set-table tbody tr:not(.no-hover):hover > td:first-child,
.list_table tbody tr:not(.no-hover):hover > td:first-child,
.table-hoverable tbody tr:not(.no-hover):hover > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--primary);
}

/* 「載入中 / 查無資料」提示列不需要 hover 效果 */
.no-hover {
    cursor: default !important;
}

/* --- 全站標準：標示「剛點選來編輯／剛操作」的那一列（暖琥珀色，與藍色 hover 區隔，持續顯示） --- */
.set-table tbody tr.row-editing > td,
.list_table tbody tr.row-editing > td,
.table-hoverable tbody tr.row-editing > td {
    background-color: #fff3d6 !important;
}
.set-table tbody tr.row-editing > td:first-child,
.list_table tbody tr.row-editing > td:first-child,
.table-hoverable tbody tr.row-editing > td:first-child {
    box-shadow: inset 3px 0 0 0 #e0a800;
}
/* 編輯中的列被 hover 時，維持琥珀色（略深），不被藍色 hover 蓋掉 */
.set-table tbody tr.row-editing:hover > td,
.list_table tbody tr.row-editing:hover > td,
.table-hoverable tbody tr.row-editing:hover > td {
    background-color: #ffeac0 !important;
}

/* --- 全站標準：必填/格式驗證未過的欄位，提醒後暫時紅框高亮（搭配 SwalUtil.warnField） --- */
.field-invalid,
.field-invalid > .form-control,
.field-invalid > .form-select,
.field-invalid .dropdown-toggle.btn {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .25) !important;
    border-radius: .375rem;
    transition: box-shadow .15s ease, border-color .15s ease;
}

/* --- 全站標準：bootstrap-select 雙箭頭修正 ---
   bootstrap-select(1.14) 會把原生 select 的 class（含 form-select）複製到「外層 wrapper」，
   再加上 styleBase=form-select 又給「按鈕」一個 → 造成 wrapper 一個 SVG 箭頭（框外）＋ 按鈕一個（框內）。
   解法：外層 wrapper 還原為透明容器（不顯示箭頭/框線/內距），只在按鈕保留單一 SVG 箭頭。 */
.bootstrap-select.form-select {
    background-image: none !important;   /* 移除框外那個箭頭 */
    border: 0 !important;
    padding: 0 !important;
    height: auto !important;
    box-shadow: none !important;
}
/* 移除 Bootstrap caret 三角（::after / 舊版 .caret），只留按鈕的 form-select SVG 箭頭 */
.bootstrap-select > .dropdown-toggle::after,
.bootstrap-select > .dropdown-toggle .caret,
.bootstrap-select > .dropdown-toggle .bs-caret {
    display: none !important;
}
.bootstrap-select > .dropdown-toggle.form-select {
    padding-right: 2.25rem;
    background-position: right 0.75rem center;
}

/* --- 🔴 全站標準：bootstrap-select 隱藏原生 select 不得溢出（0727 第14/15頁 bug 根治）---
   bootstrap-select 會把原生 <select> 留在 wrapper 內、以
     position:absolute; left:50%; width:.5px !important; height:100%; opacity:0
   的方式隱藏（保留無障礙焦點）。
   ⚠ 但只要該 <select> 自帶 `min-width`（例如頁面寫 style="min-width:10rem"），
     min-width 會蓋過 width:.5px（CSS 規則：min-width 優先於 width，即使 width 有 !important），
     隱藏的 select 就變成 160px 寬，又因 left:50% 從容器中線往右長出去，
     **蓋住右邊的「查詢」按鈕** → 使用者點查詢卻打開了原生下拉選單
     （症狀：跑出來的選單沒有關鍵字搜尋框、位置偏右，因為那是原生 select 的選單）。
   此處一律把隱藏 select 的尺寸鎖死，任何頁面誤加 min-width/width 都不會再溢出。
   ⚠ 新增下拉時「視覺寬度請設在外層容器」，不要設在 <select> 上。 */
.bootstrap-select > select {
    min-width: 0 !important;
    max-width: .5px !important;
    min-height: 0 !important;
}

/* --- 全站標準：可搜尋下拉（bootstrap-select）字級與高度統一 ---
   各頁篩選列的 <select> 有的用 form-select-sm（字 0.875rem 偏小）、有的用標準 form-select，
   bootstrap-select 會把 -sm 複製到按鈕 → 下拉文字大小全站不一致。此處統一鎖定為標準字級與高度，
   不論頁面標記是否帶 -sm，皆呈現一致的搜尋列外觀（單一來源，免逐頁改 markup）。 */
.bootstrap-select > .dropdown-toggle.form-select,
.bootstrap-select > .dropdown-toggle.form-select-sm {
    font-size: 1rem !important;
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
    min-height: calc(1.5em + 0.75rem + 2px);
    line-height: 1.5;
}
.bootstrap-select .dropdown-menu,
.bootstrap-select .dropdown-menu .dropdown-item,
.bootstrap-select .bs-searchbox .form-control {
    font-size: 1rem;
}

/* --- 全站標準：bootstrap-select 複選 actions box（全選/清除勾選）兩鈕各佔 50% 撐滿 ---
   bootstrap-select(1.14) 的 actions box 用 BS4 的 btn-block 撐寬，Bootstrap 5 已移除該類別
   → 兩顆按鈕縮在左邊不滿版。改用 flex 讓按鈕均分整寬。 */
.bootstrap-select .bs-actionsbox .btn-group {
    display: flex;
    width: 100%;
}
.bootstrap-select .bs-actionsbox .btn-group .btn { flex: 1 1 50%; }

/* --- 全站標準：搜尋／篩選列（.search-bar）整條控件統一 ---
   在篩選列容器加 .search-bar，其內的關鍵字輸入框、原生下拉、input-group、查詢/清除/新增等按鈕
   一律 0.95rem 字級、等高（可搜尋下拉本身已由上方 bootstrap-select 規則統一），
   讓整條搜尋列不論頁面標記是否帶 -sm 都呈現一致外觀（單一來源，免逐頁清 -sm）。 */
.search-bar .form-control,
.search-bar .form-select,
.search-bar .input-group-text,
.search-bar .btn {
    font-size: 1rem !important;
}
.search-bar .form-control,
.search-bar .form-select:not(.bootstrap-select),
.search-bar .input-group-text,
.search-bar .btn {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    min-height: calc(1.5em + 0.75rem + 2px);
    line-height: 1.5;
}
/* 搜尋列的欄位標題（label）全站一致：比照看板「資料區間」＝ 1rem text-muted，
   蓋掉部分頁面 label 帶的 .small（0.875rem），讓全站搜尋標題字級一致。 */
.search-bar label,
.search-bar .form-label {
    font-size: 1rem;
}

/* ============================================================
   任務看板 Hero 右上角統計（精緻化：毛玻璃 chip + 完成率圓環）
   ============================================================ */
@property --pct { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

/* 統計區置右；三格等寬等高、撐高接近 banner 高度 */
.hero-content { align-items: stretch; }
.hero-content > .hero-greeting { flex: 0 0 auto; align-self: center; }
.hero-stats {
    gap: 12px !important;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-end;
}

/* 毛玻璃資訊卡：三格一致（直式置中、等寬等高、撐高、字加粗） */
.hero-stat.hs-chip {
    flex: 1 1 0;
    min-width: 138px;
    max-width: 188px;
    min-height: 138px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;   /* 上圖形撐開、標籤釘底 → 三格標籤同排對齊 */
    gap: 8px;
    text-align: center;
    padding: 16px 18px 13px;
    border-radius: 14px;
    /* 深底 + 頂部微光澤，玻璃立體感、白字對比佳 */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 55%), rgba(8, 27, 49, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.26);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    transition: transform 0.18s ease, background 0.18s ease;
}
/* 上方圖形區：撐滿剩餘高度並置中（給圓環/數字空間） */
.hs-chip .hs-top {
    flex: 1 1 auto;
    width: 100%;
    display: grid;
    place-items: center;
}
.hero-stat.hs-chip:hover {
    transform: translateY(-2px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 55%), rgba(8, 27, 49, 0.55);
}

/* 圖示徽章（直式置頂） */
.hs-chip .hs-ic {
    width: 40px; height: 40px;
    flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 1.2rem;
}
.hs-chip .hs-meta { line-height: 1.1; }
.hs-chip .hs-num {
    font-size: 2.75rem;
    font-weight: 900;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
}
.hs-chip .hs-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    margin-top: 0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.hs-chip .hs-label i {            /* 標籤文字前的小圖示 */
    font-size: 0.95em;
    color: rgba(255, 255, 255, 0.85);
}
.hs-chip .hs-sub { display: none; }   /* 三格一致：不顯示子行 */

/* 完成率圓環（顏色 --rc 由 JS 依完成率設定：0%深紅→100%綠） */
.hs-chip .hs-ring {
    position: relative;
    width: 92px; height: 92px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: conic-gradient(var(--rc, #1f9d8f) var(--pct, 0%), rgba(255, 255, 255, 0.20) 0);
    display: grid; place-items: center;
    transition: --pct 0.9s ease, background 0.4s ease;
}
.hs-chip .hs-ring::before {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: rgba(9, 32, 56, 0.55);
}
.hs-chip .hs-ring-val {
    position: relative;
    z-index: 1;
    font-size: 1.62rem;
    font-weight: 900;
    color: #fff;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
}

/* Hero 更新區：自動更新倒數膠囊（PPT 第3頁#2：白底黑字）*/
.hero-refresh .hero-countdown {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #1f2d44;
    background: #fff;
    border: 1px solid #d7dee8;
    font-variant-numeric: tabular-nums;
}
.hero-refresh .hero-countdown.counting {
    color: #15806f;            /* 倒數中：白底＋teal 字示意作用中 */
    border-color: #9fd8cf;
}
/* 自動更新頻率下拉（PPT 第3頁#2：白底黑字、深色箭頭；原生 select，不用關鍵字搜尋）*/
.hero-refresh .form-select#refreshInterval {
    width: auto;
    min-height: 0;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
    color: #1f2d44;
    background-color: #fff;
    border: 1px solid #d7dee8;
    border-radius: 999px;
    padding: 3px 30px 3px 12px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231f2d44' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-position: right 10px center;
    background-size: 11px;
    box-shadow: none;
    cursor: pointer;
}
.hero-refresh .form-select#refreshInterval:hover { background-color: #f1f5fa; }
.hero-refresh .form-select#refreshInterval:focus {
    border-color: #9fd8cf;
    box-shadow: 0 0 0 0.18rem rgba(31, 157, 143, 0.20);
}
/* 展開的選項清單在白底上用深色字（避免白字看不到） */
.hero-refresh .form-select#refreshInterval option { color: #1f2d44; background: #fff; }

/* ===== 看板表頭精簡（PPT 第3頁#1#2#3）：移除問候語、移出統計卡後縮短，標題＋更新列同排 ===== */
.hero-banner.hero-slim { padding: 14px 26px; }
.hero-banner.hero-slim .hero-content { align-items: center; }
.hero-title { font-size: 1.5rem; font-weight: 700; color: #fff; line-height: 1.2; }
/* 立即更新按鈕（PPT 第3頁#2：白底黑字，與「暫不更新／自動更新」三者統一）*/
.hero-refresh-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 4px 12px; min-height: 0;
    border-radius: 999px;
    font-size: 0.78rem; line-height: 1.4; color: #1f2d44;
    background: #fff;
    border: 1px solid #d7dee8;
    cursor: pointer;
    transition: background 0.15s ease;
}
.hero-refresh-btn:hover { background: #f1f5fa; }
.hero-refresh-btn:focus { outline: none; border-color: #9fd8cf; box-shadow: 0 0 0 0.18rem rgba(31, 157, 143, 0.20); }
.hero-refresh-btn i { font-size: 0.95rem; }

/* ===== 看板快捷選取（本日/本週/本月）選中態（0701 調整第2頁）=====
   原 Bootstrap btn-primary 亮藍太突兀，改為系統主色調藍綠漸層（與全站清單表頭同色系）。
   JS 仍切換 btn-primary class，僅在 .quick-pick 範圍覆寫外觀。 */
.quick-pick .btn.btn-primary {
    background: linear-gradient(180deg, #1B8FA0 0%, #137386 100%);
    border-color: #137386;
    color: #fff;
}
.quick-pick .btn.btn-primary:hover,
.quick-pick .btn.btn-primary:focus,
.quick-pick .btn.btn-primary:active {
    background: linear-gradient(180deg, #1f9fb1 0%, #15808f 100%);
    border-color: #137386;
    color: #fff;
}
.quick-pick .btn.btn-primary:focus,
.quick-pick .btn.btn-primary:focus-visible {
    box-shadow: 0 0 0 0.18rem rgba(27, 143, 160, 0.25);
}

/* ===== 全站切換型按鈕（btn-check radio toggle）選中態統一藍綠漸層（0701 調整第2頁「統一」）=====
   對象：出勤結算「當日/區間查詢」、新增任務「取送件/勞務」等 btn-outline-primary toggle，
   與看板快捷選取同色系。派送/派取(btn-outline-secondary)屬次階選項、刻意維持灰階，不套用。 */
.btn-check:checked + .btn-outline-primary {
    background: linear-gradient(180deg, #1B8FA0 0%, #137386 100%);
    border-color: #137386;
    color: #fff;
}
.btn-check:checked + .btn-outline-primary:hover {
    background: linear-gradient(180deg, #1f9fb1 0%, #15808f 100%);
    border-color: #137386;
    color: #fff;
}
.btn-check:checked + .btn-outline-primary:focus,
.btn-check:focus-visible + .btn-outline-primary {
    box-shadow: 0 0 0 0.18rem rgba(27, 143, 160, 0.25);
}

/* 區塊橫幅上的 toggle：選中態原為白底黑字（web_style .task-section-head），
   一併統一為藍綠漸層白字（同選擇器特異度、本檔後載入故覆寫生效）。未選中維持灰階。
   ⚠ 0811 第1頁起「指定起迄地/單一地點」已移到基本列（改用 btn-outline-primary），此規則目前無人使用；
      保留供日後其他區塊橫幅放 toggle 時沿用。 */
.task-section-head .btn-group .btn-check:checked + .btn {
    background: linear-gradient(180deg, #1B8FA0 0%, #137386 100%);
    color: #fff;
    font-weight: 700;
}

/* ===== KPI 卡（PPT 第3頁#3：彙總3卡＋狀態5卡同一排等寬，共 8 卡；RWD）===== */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);   /* 手機 2 欄 */
    gap: 1rem;
}
@media (min-width: 576px)  { .kpi-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 992px)  { .kpi-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { .kpi-grid { grid-template-columns: repeat(8, 1fr); } }  /* 寬螢幕 8 卡同排 */

/* 8 卡同排（較 9 卡寬鬆）：卡內適度縮放（僅作用於 .kpi-grid 內，不影響其他統計卡）*/
.kpi-grid .stat-card { padding: 1rem 0.6rem; }
.kpi-grid .stat-card .stat-icon { width: 46px; height: 46px; margin-bottom: 0.5rem; font-size: 1.35rem; border-radius: 13px; }
.kpi-grid .stat-card .stat-num { font-size: 2.1rem; line-height: 1.1; }
.kpi-grid .stat-card .stat-label { font-size: 0.95rem; white-space: nowrap; }

/* 前 3 張彙總卡＝維持投影片原始深色玻璃 hs-chip 樣式（深底白字＋圓環）。
   原 hs-chip 為 hero 內固定 138px 卡；於 KPI 同排需去除固定寬高、縮放圓環與數字，
   並交由 grid 的 align-items:stretch 與右側淺色 stat-card 自動等高。*/
.kpi-grid .hero-stat.hs-chip {
    flex: initial;            /* 取消 hero 內的 flex:1 1 0 */
    min-width: 0; max-width: none; min-height: 0;
    padding: 1rem 0.6rem;
    gap: 6px;
    border-radius: 14px;      /* 與 stat-card 一致 */
    /* 原 hs-chip 底色為 42% 半透明深藍（靠 hero 深底才顯深藍）；移到白底區會被沖淡成灰藍，
       故改實心深藍（比照投影片 hero 藍 #0f2c4d→#15497a→#1f7a8c）＋頂部微光澤，維持投影片深藍卡。*/
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 55%),
                linear-gradient(135deg, #15497a 0%, #123f6b 55%, #0f2c4d 100%);
    border: 1px solid rgba(255, 255, 255, 0.16);
}
.kpi-grid .hero-stat.hs-chip:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%),
                linear-gradient(135deg, #1a5288 0%, #154677 55%, #103257 100%);
}
.kpi-grid .hs-chip .hs-num { font-size: 2.1rem; }
.kpi-grid .hs-chip .hs-label { font-size: 0.95rem; }
.kpi-grid .hs-chip .hs-ring { width: 60px; height: 60px; }
.kpi-grid .hs-chip .hs-ring-val { font-size: 1rem; }

/* 彙總群（前3卡）與狀態群（後5卡）之間的分隔線（PPT 第3頁#4「中間要有分隔線」）。
   畫在「異常」卡左側＝執行人員與異常之間。各斷點（2/4/8 欄）下「異常」皆非該列首張，
   故位置永遠落在兩群之間，全斷點顯示。
   ⚠ .stat-card 預設 overflow:hidden 會把畫在卡外（間隔內）的分隔線裁掉，
     故此卡改 overflow:visible，並把淡底 ::before 加圓角避免方角外露。*/
.kpi-grid .kpi-divider { position: relative; overflow: visible; }
.kpi-grid .kpi-divider::before { border-radius: 14px; }
.kpi-grid .kpi-divider::after {
    content: ""; position: absolute; top: 4px; bottom: 4px; left: -0.5rem;
    width: 2px; border-radius: 2px; background: #aeb8c7;
    z-index: 2;
}

/* ===== 全站區塊標題列統一樣式（查詢條件 / 統計摘要 / 清單 / 明細 …）=====
   單一來源：全站凡 .section-title 皆自動套用，勿在各頁寫 inline。
   ⚠ 僅作用於「卡片/列表/查詢」這類內容區塊標題；不影響左側選單、上方 Banner、
     麵包屑、表格 thead、按鈕、頁籤、Modal 標題、一般內文。
   配色：底＝淺藍漸層、左槓 #1B9AAA、文字 #14566A、icon #1B9AAA。
   保留 inline-flex（多處與按鈕/徽章並排於同列），避免破壞既有版面。 */
.section-title {
    background: linear-gradient(90deg, #EAF7FB 0%, #F6FBFD 100%);
    border-left: 4px solid #1B9AAA;
    color: #14566A;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 8px;
    line-height: 1.2;
}
/* 舊的 ::before 漸層小槓改由 border-left 取代，避免雙槓 */
.section-title::before { display: none; }
/* 標題內 icon 統一色 */
.section-title i { color: #1B9AAA; }

/* ===== 執行人員任務進度（PPT 第5頁）===== */
/* #1：進度條改藍綠漸層（與本頁進度視覺一致）；標題列改用上方統一樣式 */
.worker-row .progress-bar.wk-bar { background: linear-gradient(90deg, var(--primary), var(--accent-teal)) !important; }
.worker-row .wk-accent { color: var(--accent-teal); }
/* #2：整列可點擊→跳任務管理該人員今日任務 */
.worker-row.worker-clickable { cursor: pointer; border-radius: 10px; transition: background 0.15s ease; }
/* 0730 第4頁：看板狀態卡可點擊跳任務管理 */
.stat-card[data-status] { cursor: pointer; }
.worker-row.worker-clickable:hover { background: rgba(31, 157, 143, 0.07); }

/* ============================================================
   任務管理：狀態統計膠囊 / 檢視欄列 / 歷程時間軸
   ============================================================ */
.task-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.task-pill {
    border: 1px solid var(--line, #e3e9f1);
    background: #fff;
    border-radius: 999px;
    padding: 4px 13px;
    font-size: 0.82rem;
    color: #5b6b82;
    cursor: pointer;
    transition: all 0.15s ease;
}
.task-pill b { color: #1f2d44; margin-left: 2px; }
.task-pill:hover { border-color: #235eb7; color: #235eb7; }
.task-pill.active { background: #235eb7; border-color: #235eb7; color: #fff; }
.task-pill.active b { color: #fff; }

/* ===== 狀態快捷膠囊依狀態色（PPT 第9頁；色＝第1頁狀態色）。全部(tp-all)維持原樣 ===== */
.task-pill.tp-pending  { background: #FB8E3C; border-color: #FB8E3C; color: #fff; }
.task-pill.tp-unread   { background: #9A80E1; border-color: #9A80E1; color: #fff; }
.task-pill.tp-waiting  { background: #4291E5; border-color: #4291E5; color: #fff; }
.task-pill.tp-accepted { background: #4291E5; border-color: #4291E5; color: #fff; }
.task-pill.tp-done     { background: #5AAF6B; border-color: #5AAF6B; color: #fff; }
.task-pill.tp-issue    { background: #FF6074; border-color: #FF6074; color: #fff; }
.task-pill.tp-reject   { background: #FF6074; border-color: #FF6074; color: #fff; }
.task-pill.tp-delay    { background: #FF6074; border-color: #FF6074; color: #fff; } /* 任務延遲（0730 第6頁；異常紅系，同看板異常延遲） */
.task-pill.tp-cancel   { background: #7F7F7F; border-color: #7F7F7F; color: #fff; }
.task-pill.tp-self     { background: #1f9d8f; border-color: #1f9d8f; color: #fff; } /* 自主回報（0911 第2頁；任務完成子集，teal 與完成綠區分） */
/* 0911：系統／任務編號旁「自主」小標（自主回報＝App 外勤人員自行建立、建立即完成的紀錄）；任務清單、總表、檢視燈箱共用 */
.self-tag {
    display: inline-block; vertical-align: middle; margin-left: .15rem;
    padding: 0 .38rem; border-radius: 4px; line-height: 1.35;
    font-size: .68rem; font-weight: 700; letter-spacing: .04em;
    color: #0f766e; background: #ccfbf1; border: 1px solid #5eead4;
}
/* 彩色膠囊內計數、hover、作用中（以深色描邊環標示選取，底色維持狀態色）*/
.task-pill[class*="tp-"]:not(.tp-all) b { color: #fff; }
.task-pill[class*="tp-"]:not(.tp-all):hover { color: #fff; filter: brightness(0.93); }
.task-pill[class*="tp-"]:not(.tp-all).active { box-shadow: 0 0 0 2.5px rgba(31, 45, 68, 0.55); font-weight: 700; }

/* ===== 新增任務彈窗（PPT 第11頁#1）：加寬避免欄位被裁切；起訖資訊中間加垂直分隔線 ===== */
/* 新增/編輯任務彈窗寬度 ≈ 視窗 80%（原約 60%）；上限 1600px 避免超寬螢幕過寬 */
@media (min-width: 992px) {
    .modal-dialog.create-modal-wide { max-width: min(80vw, 1600px); }
}
/* 起點/迄點兩欄之間的垂直分隔線（僅 lg 以上雙欄並排時）*/
@media (min-width: 992px) {
    .dual-loc .dual-col-end { position: relative; }
    .dual-loc .dual-col-end::before {
        content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--bs-gutter-x, 1.5rem) / -2);
        width: 1px; background: #e3e9f1;
    }
}
/* 常用地點挑選彈窗疊在「新增/編輯任務」彈窗之上（避免被蓋在底層）。
   新增任務彈窗 .modal=1055；此彈窗提到 1065，其遮罩由 JS 提到 1060。*/
/* ⚠ 稽核結果彈窗 2026-08-12 由 #collabAudit_modal 改名 #auditResult_modal，此選擇器要一起改，
   否則它疊在編輯/檢視燈箱之上時會被上層遮罩蓋住＝頁籤與關閉鈕點不到。
   #taskFieldModal（0828 第6頁欄位顯示設定）同屬疊在任務燈箱上的子彈窗。 */
#locPick_modal, #auditResult_modal, #taskFieldModal { z-index: 1065; }

/* 檢視任務燈箱：放寬視窗（約 7 成寬），內容改左右兩欄卡片流 */
@media (min-width: 992px) {
    .modal-dialog.view-modal-wide { max-width: min(72vw, 1280px); }
}
#view_modal .modal-body {
    max-height: calc(86vh - 9.5rem); /* 扣掉漸層標題列與按鈕列，整窗高約落在 86vh 內 */
    overflow-y: auto;
}
.tv-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    /* 卡片為直接子元素、依 DOM 順序左右成對；同一列兩卡等高（stretch）→ 上下緣切齊不錯落 */
}
.tv-cols > .um-card { margin-top: 0 !important; } /* 間距交給 grid gap，蓋掉 .um-card + .um-card 規則 */
.tv-cols > .tv-span { grid-column: 1 / -1; }
@media (max-width: 991.98px) {
    .tv-cols { grid-template-columns: 1fr; }
    .tv-cols > .tv-span { grid-column: auto; }
}

/* 檢視燈箱執行狀態卡（0720 第2頁）：上方整單摘要橫排＋下方 per 人員回報表 */
.tv-exec-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.75rem;
    padding: .3rem .1rem .7rem;
}
.tv-exec-meta .tv-mi { display: flex; align-items: baseline; gap: .5rem; font-size: .9rem; }
.tv-exec-meta .tv-mi-k { color: #5b6b82; font-weight: 600; white-space: nowrap; }
.tv-exec-meta .tv-mi-v { color: #1f2d44; word-break: break-word; }

/* 檢視明細：標籤 / 值 兩欄列 */
.um-card .tv-row {
    display: flex;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px dashed #eef2f7;
    font-size: 0.9rem;
}
.um-card .tv-row:last-child { border-bottom: none; }
.um-card .tv-k { flex: 0 0 96px; color: #5b6b82; font-weight: 600; }
.um-card .tv-v { flex: 1 1 auto; color: #1f2d44; word-break: break-word; }

/* 歷程時間軸 */
.task-timeline { position: relative; padding-left: 6px; }
.task-timeline .tl-item { position: relative; padding: 0 0 14px 22px; border-left: 2px solid #e3e9f1; }
.task-timeline .tl-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.task-timeline .tl-dot {
    position: absolute; left: -7px; top: 2px;
    width: 12px; height: 12px; border-radius: 50%;
    background: #235eb7; border: 2px solid #fff; box-shadow: 0 0 0 2px #cdd8e8;
}
.task-timeline .tl-time { font-weight: 700; color: #1f2d44; margin-right: 6px; }
.task-timeline .tl-meta { font-size: 0.82rem; color: #5b6b82; margin-top: 2px; }
.task-timeline .tl-fields { font-size: 0.8rem; color: #6b7280; margin-top: 2px; }

/* 大甜甜圈：弧色改為依完成率動態（--donut-c 由 JS 設定） */
.donut {
    background: conic-gradient(var(--donut-c, #1f9d8f) 0, var(--donut-c, #1f9d8f) var(--pct, 0%), #e9edf2 var(--pct, 0%) 100%) !important;
}

/* ============================================================
   三階折疊選單（第一階 → 第二階群組開關 → 第三階功能連結）
   ============================================================ */
.m_menu_list1 li.submenu-group {
    padding: 0;
    margin: 0.1em 0;
    background: none;
    border-radius: 0;
}
/* 第二階：可開關的群組標題 */
.submenu-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    border: none;
    background: none;
    text-align: left;
    color: var(--sidebar-text);
    padding: 0.42em 0.5em;
    border-radius: 0.4em;
    font-weight: 600;
    font-size: 0.92rem;
}
.submenu-toggle:hover {
    color: #fff;
    background: var(--sidebar-hover);
}
.submenu-toggle > span {
    flex: 1 1 auto;
}
.submenu-toggle .submenu-caret {
    width: auto;
    color: inherit;
    font-size: 0.72rem;
    opacity: 0.7;
    transition: transform 0.2s;
}
.submenu-toggle[aria-expanded="true"] .submenu-caret {
    transform: rotate(180deg);
}
/* 第三階：功能連結（縮排 + 左側連接線） */
.submenu-list {
    list-style: none;
    margin: 0.1em 0 0.3em 0.55em;
    padding-left: 0.55em;
    border-left: 1px solid var(--sidebar-line);
}
.submenu-list li.active {
    text-align: left;
}

/* --- 全站標準：選單項目不折行（小筆電亦然） ---
   收斂三階縮排 + 略縮第三階字級，並對所有選單連結/按鈕 nowrap，
   確保長項目（如「執行人員帳號管理」）單行顯示且不被裁切。 */
.main_menu .m_menu_list1 {
    margin-left: 0.9em;          /* 原 1.4em → 收斂，釋出文字寬度 */
    padding-right: 0.2em;
}
.submenu-list {
    margin-left: 0.3em;          /* 第三階縮排收斂（仍保留左側連接線） */
    padding-left: 0.5em;
}
.submenu-list li {
    padding-left: 0.45em;
    padding-right: 0.25em;
}
.m_menu_btn .menu_button,
.m_menu_btn .accordion-button,
.submenu-toggle,
.m_menu_list1 li > a {
    white-space: nowrap;          /* 一律不折行 */
}
.submenu-list li > a {
    display: block;
    font-size: 0.875rem;          /* 第三階略縮，確保長項目單行 */
}

/* ============================================================
   側欄選單整體設計感優化
   ============================================================ */
/* 平滑過渡 */
.m_menu_btn .accordion-button,
.m_menu_btn .menu_button,
.submenu-toggle,
.submenu-list li,
.menu_user .user_name_link,
.menu_user .logout_btn {
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

/* 選單文字調亮（非作用中），提升深底上的清晰度
   ※ 第三階用「直接子層 li 非 active」精準排除，避免外層 li 連帶把作用中連結也改亮 */
.m_menu_btn .menu_button:not(.active),
.m_menu_btn .accordion-button:not(.active),
.submenu-toggle,
.submenu-list li:not(.active) > a {
    color: #eef4fc;
}
/* 第一階字重略加，更好讀 */
.m_menu_btn .menu_button:not(.active),
.m_menu_btn .accordion-button:not(.active) {
    font-weight: 600;
}

/* 第一階一般項目 hover：圓角底色（作用中白膠囊除外，避免被深底蓋掉變黑塊） */
.m_menu_btn .menu_button:not(.active):hover,
.m_menu_btn .accordion-button:not(.active):hover {
    background: var(--sidebar-hover);
    border-radius: 0.6em;
}
/* 作用中（白膠囊）hover：維持白底＋深色字（覆蓋 web_style 的 .active:hover{color:#000}） */
.m_menu_btn .menu_button.active:hover,
.m_menu_btn .accordion-button.active:hover {
    background: #fff;
    color: #0f2c4d;
    border-radius: 0.6em;
}

/* 圖示微互動（hover 放大一點） */
.m_menu_btn i,
.m_menu_list1 i {
    transition: transform 0.18s ease, color 0.18s ease;
}
.m_menu_btn .menu_button:hover i,
.m_menu_btn .accordion-button:hover i,
.submenu-toggle:hover > i:first-child {
    transform: scale(1.12);
}

/* 作用中（白色膠囊）：柔和陰影 + 左側 teal 色條，更立體 */
.m_menu_btn .menu_button.active,
.m_menu_btn .accordion-button.active {
    border-radius: 0.6em;
    box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.5), inset 4px 0 0 0 var(--accent-teal);
}

/* 第三階連結：hover 與 active 精緻化 */
.submenu-list li:hover {
    background: var(--sidebar-hover);
}
.submenu-list li.active {
    background: linear-gradient(90deg, var(--sidebar-active-bg) 0%, rgba(255, 255, 255, 0.92) 100%);
    box-shadow: inset 3px 0 0 0 var(--accent-teal);
}

/* 統計報表子項（直掛第一階清單）：比照「帳號與權限」第三階的點選樣式
   —— 白膠囊漸層底＋teal 左色條、靠左、hover 圓底，取代原本的實色底＋靠右(text-align:right)。
   以清單 id 精準限定，不影響其他第一階直掛項目（目前僅統計報表為此型態）。 */
/* 統計報表子項在階層上等同第二層（直掛第一階「統計報表」下），
   字級／字重比照第二層「帳號與權限／任務參數」(.submenu-toggle 0.92rem/600)，
   不沿用第三階連結的較小字級(0.875rem)。 */
#collapse_report li > a {
    font-size: 0.92rem;
    font-weight: 600;
}
#collapse_report li:not(.active) > a {
    color: #eef4fc;
}
#collapse_report li:hover {
    background: var(--sidebar-hover);
}
#collapse_report li.active {
    background: linear-gradient(90deg, var(--sidebar-active-bg) 0%, rgba(255, 255, 255, 0.92) 100%);
    box-shadow: inset 3px 0 0 0 var(--accent-teal);
    text-align: left;
}

/* LOGO 區柔光襯底 */
.sys_title {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0));
}

/* 側欄細捲軸 */
.main_menu {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.main_menu::-webkit-scrollbar {
    width: 6px;
}
.main_menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 3px;
}
.main_menu::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.32);
}
.main_menu::-webkit-scrollbar-track {
    background: transparent;
}

/* ============================================================
   側欄圖示：圓角底色徽章（每個模組不同顏色）
   --mc = 徽章底色(RGB)、--mi = 圖示色(RGB，較亮以利深底辨識)
   ============================================================ */
.mico-blue   { --mc: 35, 94, 183;  --mi: 134, 178, 240; }  /* 看板=藍 */
.mico-green  { --mc: 22, 163, 74;  --mi: 95, 208, 138; }   /* 任務=綠 */
.mico-orange { --mc: 217, 119, 6;  --mi: 242, 177, 92; }   /* 報表=橘 */
.mico-teal   { --mc: 31, 157, 143; --mi: 127, 212, 200; }  /* 設定=teal */

.m_menu_btn .menu_button > i,
.m_menu_btn .accordion-button > i,
.submenu-toggle > i:first-child,
.menu_user .user_name_link > i {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 9px;
    background: rgba(var(--mc, 31, 157, 143), 0.16);
    color: rgb(var(--mi, 127, 212, 200));
    margin-right: 0.55em;
    flex: 0 0 auto;
    vertical-align: middle;
    font-size: 0.98rem;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

/* hover：徽章提亮（仍是該模組色） */
.m_menu_btn .menu_button:hover > i,
.m_menu_btn .accordion-button:hover > i,
.submenu-toggle:hover > i:first-child,
.menu_user .user_name_link:hover > i {
    background: rgba(var(--mc, 31, 157, 143), 0.34);
    color: #fff;
    transform: scale(1.06);
}

/* 作用中（白色膠囊）：徽章變該模組實色、圖示轉白，最醒目 */
.m_menu_btn .menu_button.active > i,
.m_menu_btn .accordion-button.active > i {
    background: rgb(var(--mc, 35, 94, 183));
    color: #fff;
}
/* 作用中項目 hover 時徽章維持實色（不被一般 hover 的半透明色蓋掉） */
.m_menu_btn .menu_button.active:hover > i,
.m_menu_btn .accordion-button.active:hover > i {
    background: rgb(var(--mc, 35, 94, 183));
    color: #fff;
}

/* 使用者區：卡片化 + 登出鈕回饋 */
.menu_user .user_name_link {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.55em 0.7em;
    margin-bottom: 0.6em;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.6em;
}
.menu_user .user_name_link:hover {
    background: rgba(255, 255, 255, 0.13);
    color: #fff;
}
.menu_user .logout_btn:hover {
    background: #e25563;
    border-color: #e25563;
    color: #fff;
}
/* 登入者名稱資訊：完整呈現（不截斷）。名稱較長時自動換行、不撐破側欄寬度（避免跑版） */
.menu_user .user_name_link {
    overflow: hidden;
}
.menu_user .user_name_link .user_text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;        /* 允許換行，完整顯示 */
    overflow-wrap: anywhere;    /* 過長字串也能在側欄內斷行，不溢出 */
    font-size: 0.86rem;
    line-height: 1.25;
}

/* --- 全站共用分頁列（createPager 產生） --- */
.pager-bar {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--line);
    font-size: 0.9rem;
}
.pager-bar .page-info {
    color: var(--text-muted);
}
.pager-bar .pagination .page-link {
    color: var(--primary);
    min-width: 36px;
    text-align: center;
    cursor: pointer;
}
.pager-bar .pagination .page-item.active .page-link {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.pager-bar .pagination .page-item.disabled .page-link {
    color: #b9c2cf;
}
.pager-bar .pager-jump,
.pager-bar .pager-size {
    color: var(--text-muted);
    white-space: nowrap;
}

/* ============================================================
   醒目分頁（膠囊式，全站可用）
   ============================================================ */
.set-tabs.set-tabs-bold .nav-tabs {
    border-bottom: none;
    gap: 0.5rem;
    background: #eef2f7;
    padding: 0.35rem;
    border-radius: 12px;
    display: inline-flex;
}
.set-tabs.set-tabs-bold .nav-tabs .nav-link {
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 1rem;
    padding: 0.55rem 1.8rem;
    margin-bottom: 0;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.set-tabs.set-tabs-bold .nav-tabs .nav-link:hover {
    color: var(--primary);
    background: #ffffff;
}
.set-tabs.set-tabs-bold .nav-tabs .nav-link.active {
    color: #ffffff;
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 4px 12px -3px rgba(35, 94, 183, 0.55);
}
@media (max-width: 575.98px) {
    .set-tabs.set-tabs-bold .nav-tabs { display: flex; width: 100%; }
    .set-tabs.set-tabs-bold .nav-tabs .nav-item { flex: 1 1 0; }
    .set-tabs.set-tabs-bold .nav-tabs .nav-link { width: 100%; padding-left: 0.5rem; padding-right: 0.5rem; }
}

/* ============================================================
   全站通用彈窗樣式（漸層標題列）
   用法：<div class="modal-content app-modal"> +
         <div class="modal-header grad-header">
            <div class="modal-avatar"><i class="bi bi-xxx"></i></div>
            <div class="flex-fill"><h5 class="modal-title">標題</h5>
                 <div class="modal-subtitle">副標</div></div>
            <button class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
         </div>
   ============================================================ */
.modal-content.app-modal {
    border: none;
    border-radius: 16px;
    /* 不可用 overflow:hidden（會裁切下拉選單）；改由標題/底部各自做圓角 */
    box-shadow: 0 24px 60px -15px rgba(15, 44, 77, 0.45);
}
.app-modal .grad-header {
    background: linear-gradient(135deg, #0f2c4d 0%, #15497a 45%, #1f7a8c 100%);
    color: #fff;
    border-bottom: none;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.3rem;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}
.app-modal .grad-header .modal-title {
    color: #fff;
    font-weight: 700;
}
.modal-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #fff;
}
.app-modal .modal-subtitle {
    font-size: 0.8rem;
    opacity: 0.85;
    margin-top: 2px;
}

/* --- app-modal 分區卡片（帶圖示的區塊標題，全站通用） --- */
.app-modal .modal-body.um-body {
    background: #f5f7fa;
}
.app-modal .um-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1rem 1.1rem 1.1rem;
    box-shadow: 0 2px 10px rgba(15, 44, 77, 0.05);
}
.app-modal .um-card + .um-card {
    margin-top: 1rem;
}
.app-modal .um-card-title {
    font-weight: 700;
    margin-bottom: 0.9rem;
    padding-left: 0.65rem;
    border-left: 4px solid var(--primary);
    line-height: 1.35;
}
.app-modal .um-card-title i { margin-right: 0.4rem; }
.app-modal .um-card-title.accent-primary { border-left-color: #235eb7; color: #1d4ed8; }
.app-modal .um-card-title.accent-teal { border-left-color: #1f9d8f; color: #16756a; }
.app-modal .um-card-title.accent-blue { border-left-color: #2b8fd6; color: #1f6fb0; }
/* 0806 第4頁：執行狀態專屬色 #156082（檢視燈箱的執行狀態卡，與編輯燈箱 .head-exec 橫幅同色） */
.app-modal .um-card-title.accent-exec { border-left-color: #156082; color: #156082; }

/* 0806 第4頁（驗收回饋）：執行狀態人員回報表欄寬校正——.set-table 為 table-layout:fixed，欄寬只看表頭 width；
   人員欄原本過寬（實際只有姓名＋角色小字），時間類欄位反而要保證「yyyy-MM-dd HH:mm」單行不折。
   編輯燈箱 #execStatusTable 與檢視燈箱 #viewExecTable 共用同一組規則。 */
#execStatusTable td, #viewExecTable td { white-space: nowrap; }
#execStatusTable td:last-child, #viewExecTable td:last-child { white-space: normal; overflow-wrap: anywhere; }
#execStatusTable .small, #viewExecTable .small { white-space: nowrap; }
/* 窄畫面（燈箱寬度不足）＝出水平捲軸而非壓縮欄位，符合全站清單欄寬規則 */
#execStatusTable, #viewExecTable { min-width: 820px; }

/* --- app-modal 表單可讀性：標籤對比 + 欄位區隔 --- */
.app-modal .modal-body .form-label {
    color: #44556e;          /* 比 text-muted 深，對比更清楚 */
    font-weight: 600;
}
/* 唯讀顯示值：淺灰圓角框 + 深色字，明確是「資料」而非可輸入 */
.app-modal .modal-body .form-control-plaintext {
    background: #f3f5f8;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    padding: 0.45rem 0.75rem;
    color: #1f2937;
    min-height: calc(1.5em + 0.9rem + 2px);   /* 與輸入框等高，排列整齊 */
}
.app-modal .modal-footer {
    border-top: 1px solid var(--line);
    padding: 0.85rem 1.3rem;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

/* ============================================================
   全站清單表格表頭統一樣式（品牌深藍綠）
   單一來源：套用於後台兩個清單表格 class（.set-table 設定類／.list_table 任務報表類）。
   ⚠ 僅作用於 thead th；不影響資料列文字/底色、區塊標題、按鈕、狀態標籤。
     Modal/表單排版/特殊報表用的純 .table 不在這兩個 class 內，故不受影響。
   配色：底＝深藍綠漸層、白字、底線 #0B5668(3px)、欄分隔線 rgba(255,255,255,.25)。
   ============================================================ */
.set-table thead th,
.list_table thead th {
    background: linear-gradient(180deg, #1B8FA0 0%, #137386 100%);
    color: #FFFFFF;
    font-weight: 900;
    font-size: 1rem;
    letter-spacing: 0.02em;
    border-top: 1px solid #137386;
    border-bottom: 3px solid #0B5668;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    white-space: nowrap;
    vertical-align: middle;
    /* 厚實感：同色微陰影把字撐厚（不模糊），再加極淡底部暗影做立體 */
    text-shadow: 0 0 0.5px #FFFFFF, 0 1px 1px rgba(0, 0, 0, 0.15);
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}
/* 圓角修正：Bootstrap 對 table 預設 border-collapse:collapse，此模式下儲存格的
   border-radius 無法裁切「合併後的邊框」——表頭 border-top(1px)/border-bottom(3px)
   仍以直線畫到方形邊界，於首/末欄圓角旁突出一小截線。改 separate + border-spacing:0
   讓儲存格圓角正確裁切邊框（外觀不變、消除突角線）。 */
.set-table,
.list_table {
    border-collapse: separate;
    border-spacing: 0;
}
/* 首/末欄上方圓角，與資料列形成明顯區隔 */
.set-table thead th:first-child,
.list_table thead th:first-child {
    border-left: none;
    border-top-left-radius: 7px;
}
.set-table thead th:last-child,
.list_table thead th:last-child {
    border-top-right-radius: 7px;
}
.set-table tbody td {
    padding-top: 0.62rem;
    padding-bottom: 0.62rem;
    border-bottom: 1px solid #eef1f5;
}
.set-table tbody tr:last-child td {
    border-bottom: none;
}

/* 例外：Modal（彈窗）內的清單／表單選取表格，維持原本淺色表頭，
   不套深藍綠（屬「Modal/表單排版表格」排除範圍，避免彈窗內過於厚重）。 */
.app-modal .set-table thead th,
.app-modal .list_table thead th,
.modal .set-table thead th,
.modal .list_table thead th {
    background: linear-gradient(180deg, #f5f9fe 0%, #e9f1fb 100%);
    color: #1f2d44;
    font-size: 0.95rem;
    border-top: none;
    border-left: none;
    border-bottom: 2px solid #cdddf2;
    text-shadow: none;
}
.app-modal .set-table thead th.sortable:hover,
.app-modal .list_table thead th.sortable:hover,
.modal .set-table thead th.sortable:hover,
.modal .list_table thead th.sortable:hover {
    color: var(--primary);
    background: #eef2f7;
}

/* 可排序表頭（點選升/降冪）— 全站統一：set-table 與 list_table 皆顯示 ⇅/▲/▼ 排序指示
   深色表頭上 icon 與 hover 一律白色系，確保清晰可見 */
.set-table thead th.sortable,
.list_table thead th.sortable {
    cursor: pointer;
    user-select: none;
}
.set-table thead th.sortable:hover,
.list_table thead th.sortable:hover {
    color: #FFFFFF;
    background: linear-gradient(180deg, #1f9fb1 0%, #15808f 100%);
}
.set-table thead th.sortable::after,
.list_table thead th.sortable::after {
    content: " ⇅";
    opacity: 0.6;
    font-size: 0.85em;
}
.set-table thead th.sortable.sort-asc::after,
.list_table thead th.sortable.sort-asc::after {
    content: " ▲";
    opacity: 0.9;
}
.set-table thead th.sortable.sort-desc::after,
.list_table thead th.sortable.sort-desc::after {
    content: " ▼";
    opacity: 0.9;
}

/* 狀態膠囊加上小圓點，更醒目 */
.set-table .badge-on,
.set-table .badge-off {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.set-table .badge-on::before,
.set-table .badge-off::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

/* 列內動作按鈕：hover 時填色，更有回饋 */
.set-table .btn-outline-primary2:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.set-table .btn-outline-danger:hover {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
}

/* ===== 任務管理：批次工具列（Phase B） ===== */
.batch-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .55rem .9rem;
    border-radius: 10px;
    background: linear-gradient(90deg, #eff6ff, #f5f3ff);
    border: 1px solid #dbeafe;
}
.batch-bar .batch-info { color: #1e40af; font-size: .92rem; }
.batch-bar .batch-info b { font-size: 1.05rem; margin: 0 .15rem; }
.batch-bar .batch-actions { display: flex; gap: .4rem; flex-wrap: wrap; }

/* ===== 任務匯入（Phase B） ===== */
.import-steps { padding-left: 1.1rem; margin-bottom: .5rem; color: #475569; font-size: .9rem; }
.import-steps li { margin-bottom: .15rem; }
.import-summary .badge { font-size: .82rem; }
.import-box { border-radius: 8px; padding: .6rem .8rem; margin-top: .6rem; font-size: .9rem; }
.import-box ul { margin: .3rem 0 0; padding-left: 1.2rem; max-height: 220px; overflow-y: auto; }
.import-box .ib-title { font-weight: 600; }
.import-box-err { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.import-box-warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.import-box-ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }

/* ===== 全站任務狀態徽章標準：放大易讀、底色等寬（以4字為準，3字置中） =====
   套用對象：所有任務/處理狀態徽章一律加 .status-badge（任務管理清單、統計報表、看板異常回報、檢視/歷程…）。 */
.status-badge,
#taskTable td[data-th="狀態"] .badge {
    font-size: .85rem;
    padding: .42em .6em;
    font-weight: 600;
    letter-spacing: .5px;
    display: inline-block;
    min-width: 5.8em;       /* 容納 4 個全形字＋內距；3 字者置中、底色等寬 */
    text-align: center;
    box-sizing: border-box;
}

/* 使用情境徽章（回報選項清單）：比照任務管理清單狀態欄 .status-badge（放大、等寬置中、不換行、無前置圓點）。
   直接鎖定 #repoptTable 儲存格內的徽章（ID 特異性最高、不依賴 JS 加的 class，避免 JS 快取時失效）。 */
#repoptTable tbody td .badge-on::before,
#repoptTable tbody td .badge-off::before,
#repoptTable tbody td .badge-noreach::before { content: none !important; display: none !important; }
#repoptTable tbody td .badge-on,
#repoptTable tbody td .badge-off,
#repoptTable tbody td .badge-noreach {
    display: inline-block !important;
    font-size: .85rem !important;
    padding: .42em .6em !important;
    font-weight: 600 !important;
    letter-spacing: .5px;
    min-width: 5.8em;
    text-align: center;
    box-sizing: border-box;
    white-space: nowrap !important;
    gap: 0 !important;
}
/* 使用情境欄整格不換行（覆寫 set-table td 的 overflow-wrap:anywhere） */
#repoptTable tbody td:nth-child(2) { white-space: nowrap; }

/* --- 新增/編輯任務：指定時間先後即時防呆（0727 使用者追加）---
   .ag-err＝該組時間列下方的紅字訊息（獨佔整列；無訊息時不佔空間）；
   .appt-invalid＝出錯欄位的常駐紅框。
   ⚠ 刻意不用 .field-invalid：那是 SwalUtil.warnField 的暫時高亮（1.8 秒後自動移除），
     兩者混用會讓常駐紅框被清掉。 */
.appt-group .ag-err {
    flex: 0 0 100%;
    color: #dc3545;
    font-size: .8rem;
    line-height: 1.25;
    margin-top: .1rem;
}
.appt-group .ag-err:empty { display: none; }
.appt-group .appt-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .2);
}

/* --- 全站標準：唯讀狀態格「狀態膠囊＋鎖頭」不換行（0727 第11/12頁破版修正）---
   無變更權限的列會在狀態欄輸出「膠囊＋鎖頭 icon」。原本兩者直接並排，
   遇到窄欄（是否啟用欄僅 100px，膠囊又有 min-width:5.8em）就會把鎖頭擠到下一行。
   一律包在 .status-lock 裡：整組 inline-flex 不換行，且內部膠囊取消 min-width 讓它只佔文字寬。
   新增這類「唯讀狀態＋鎖頭」的清單一律沿用，勿再自行並排。 */
.status-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    white-space: nowrap;
}
.status-lock .badge-on,
.status-lock .badge-off {
    min-width: 0 !important;
}
.status-lock > .bi {
    flex: 0 0 auto;
    line-height: 1;
}

/* 回報選項篩選列「使用情境」下拉：加寬並鎖定 bootstrap-select 按鈕文字不折行
   （bootstrap-select 會把 select 換成 .bootstrap-select 容器，故直接鎖容器寬度與按鈕文字）。 */
.repopt-filter .bootstrap-select { width: 200px !important; }
.repopt-filter .bootstrap-select > .dropdown-toggle { white-space: nowrap !important; }
.repopt-filter .bootstrap-select .filter-option,
.repopt-filter .bootstrap-select .filter-option-inner,
.repopt-filter .bootstrap-select .filter-option-inner-inner {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 執行人員「類別」徽章（cat-pill）：字級與等寬比照任務狀態徽章（放大、等寬置中、短字不縮短），
   僅統一尺寸，保留類別原本的 teal 配色（與狀態徽章色彩區隔）。 */
.cat-pill {
    font-size: .85rem;
    padding: .42em .6em;
    font-weight: 600;
    letter-spacing: .5px;
    min-width: 5.8em;
    text-align: center;
    box-sizing: border-box;
}

/* ===== 執行人員「App 通知狀態」膠囊（0805 第③頁）＝唯讀顯示，非可切換開關 =====
   資料源 tbSDEmp.IsAppPushEnabled（1 上線／0 勿擾），由執行人員自己在 App 設定。
   刻意做成低調的資訊型膠囊（不用 .badge-on/.badge-off 綠紅），避免與同列「狀態（啟用/停用）」搶視線、被誤讀成可操作。 */
.notify-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: .85rem;
    font-weight: 600;
    padding: .42em .7em;
    border-radius: 999px;
    min-width: 5.2em;
    justify-content: center;
    white-space: nowrap;
}
/* 上線＝淺藍底＋深藍字（沿用全站既有配色對：#dbeafe 底／#1d4ed8 深藍字，同紀錄單 subHead、勿另創色）。
   底色刻意比列 hover 的 #e8f1fd 深一階，滑過整列時膠囊不會融進背景。 */
.notify-pill.notify-on  { background: #dbeafe; color: #1d4ed8; }
.notify-pill.notify-dnd { background: #fff2e0; color: #b26a00; }   /* 勿擾＝琥珀，提醒「推播暫時收不到」 */

/* 上下線通知歷程燈箱（2026-08-05）：沿用全站 .task-timeline，僅把「切成勿擾」那筆的節點改琥珀，
   一眼看出上線/勿擾的交替節奏（同 issue.css 用 .is-report 改紅點的做法）。 */
#pushlog_modal .task-timeline { max-height: 52vh; overflow-y: auto; padding-right: .25rem; }
#pushlog_modal .tl-item.is-dnd .tl-dot { background: #e0892b; box-shadow: 0 0 0 2px #f6ddbc; }
#pushlog_modal .modal-subtitle .notify-pill { font-size: .78rem; padding: .2em .55em; min-width: 0; }

/* ===== 全系統「任務狀態」色彩標準（單一來源，勿在各頁分散寫死）=====
   依 i助理2.0-系統調整建議 PPT 第 1 頁「任務建立後狀態流程」定案：
   8 個狀態共用 6 個色碼（尚未接單＝接單完成同藍；問題回報＝無法接單同紅）。
   套用方式：徽章 class 加 .status-badge 再加對應 .ts-* 。
   ⚠ 不沿用 bg-warning2/bg-info3 等（那些另被進度條等元件共用，不可改值）。 */
.status-badge.ts-pending  { background-color: #FB8E3C !important; color: #fff !important; } /* 待派單 */
.status-badge.ts-unread   { background-color: #9A80E1 !important; color: #fff !important; } /* 任務未讀 */
.status-badge.ts-waiting  { background-color: #4291E5 !important; color: #fff !important; } /* 尚未接單 */
.status-badge.ts-accepted { background-color: #4291E5 !important; color: #fff !important; } /* 接單完成 */
.status-badge.ts-done     { background-color: #5AAF6B !important; color: #fff !important; } /* 任務完成 */
.status-badge.ts-issue    { background-color: #FF6074 !important; color: #fff !important; } /* 問題回報 */
.status-badge.ts-reject   { background-color: #FF6074 !important; color: #fff !important; } /* 無法接單 */
.status-badge.ts-delay    { background-color: #FF6074 !important; color: #fff !important; } /* 任務延遲（0730 第6頁：加掛在原狀態徽章下方的虛擬狀態標籤） */
.status-badge.ts-cancel   { background-color: #7F7F7F !important; color: #fff !important; } /* 任務取消 */

/* ===== 全系統「異常處理狀態」色彩標準（PPT 第4頁#3；異常回報表＋異常處理彈窗共用，單一來源）=====
   待處理橘 / 處理中藍 / 重新指派綠 / 已結案灰。*/
.status-badge.iss-pending    { background-color: #FB8E3C !important; color: #fff !important; } /* 待處理 */
.status-badge.iss-processing { background-color: #4291E5 !important; color: #fff !important; } /* 處理中 */
.status-badge.iss-reassign   { background-color: #5AAF6B !important; color: #fff !important; } /* 重新指派 */
.status-badge.iss-closed     { background-color: #7F7F7F !important; color: #fff !important; } /* 已結案 */

/* 異常類別徽章（PPT 第4頁#1）：問題回報/無法接單/異常延遲三類統一紅色 #FF6074（0717 驗收回饋），尺寸比照 .status-badge */
.badge.cat-issue { background-color: #FF6074 !important; color: #fff !important; }

/* 批次功能（0721 第2頁）：啟用色＝全站狀態共用色 指派#4291E5/通知#FB8E3C/匯出#5AAF6B/取消#FF6074；
   batch-hidden＝依任務狀態隱藏（獨立於權限 d-none，勿混用） */
.btn-assign2 {
    --bs-btn-color: #fff;
    --bs-btn-bg: #4291E5;
    --bs-btn-border-color: #4291E5;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2f7fd4;
    --bs-btn-hover-border-color: #2f7fd4;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #2673c4;
    --bs-btn-active-border-color: #2673c4;
}
.btn-notify2 {
    --bs-btn-color: #fff;
    --bs-btn-bg: #FB8E3C;
    --bs-btn-border-color: #FB8E3C;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #ea7d2b;
    --bs-btn-hover-border-color: #ea7d2b;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #dd7322;
    --bs-btn-active-border-color: #dd7322;
}
.btn-export2 {
    --bs-btn-color: #fff;
    --bs-btn-bg: #5AAF6B;
    --bs-btn-border-color: #5AAF6B;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #4a9d5b;
    --bs-btn-hover-border-color: #4a9d5b;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #418f51;
    --bs-btn-active-border-color: #418f51;
}
.btn-cancel2 {
    --bs-btn-color: #fff;
    --bs-btn-bg: #FF6074;
    --bs-btn-border-color: #FF6074;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #ef4a60;
    --bs-btn-hover-border-color: #ef4a60;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #e23a51;
    --bs-btn-active-border-color: #e23a51;
}
/* 不可點選＝統一灰底白字 #7F7F7F（0721 第2頁 Bug 修正；蓋掉 Bootstrap 只降透明度的預設） */
.batch-actions .btn:disabled,
.batch-actions .btn.disabled {
    background-color: #7F7F7F;
    border-color: #7F7F7F;
    color: #fff;
    opacity: 1;
}
.batch-actions .batch-hidden { display: none !important; }

/* 檔案拖曳上傳區（0717 第6頁：匯入燈箱；任務匯入/常用地點匯入共用，js/common/fileDrop.js） */
.file-drop-zone {
    border: 2px dashed #b6c6dd;
    border-radius: 10px;
    padding: 16px 12px;
    text-align: center;
    color: #6b7a90;
    background: #f8fafc;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s, background-color .15s;
}
.file-drop-zone i { font-size: 1.6rem; color: #8fa4c0; display: block; margin-bottom: 2px; }
.file-drop-zone .fdz-link { color: var(--primary, #235eb7); text-decoration: underline; }
.file-drop-zone.drag-over { border-color: var(--primary, #235eb7); background: #e8f1fd; color: #235eb7; }
.file-drop-zone.drag-over i { color: #235eb7; }
.file-drop-zone .fdz-file { margin-top: 4px; font-weight: 600; color: #1f7a8c; }

/* 系統/任務編號欄：清單內容字級比照「指定時間」(.875em)；任務管理與報表一致 */
#taskTable td[data-th="系統/任務編號"],
#rptTable td[data-th="系統/任務編號"] { font-size: .875em; }
/* 內層任務編號(原 .small)不再二次縮小，與系統編號同字級 */
#taskTable td[data-th="系統/任務編號"] .small,
#rptTable td[data-th="系統/任務編號"] .small { font-size: 1em; }

/* ===== 統計報表「任務狀態」色（PPT 第15頁）：未完成藍 / 任務完成綠 / 異常回報紅 / 異常延遲橘 ===== */
.status-badge.rs-incomplete { background-color: #4291E5 !important; color: #fff !important; } /* 未完成 */
.status-badge.rs-done       { background-color: #5AAF6B !important; color: #fff !important; } /* 任務完成 */
.status-badge.rs-abnormal   { background-color: #FF6074 !important; color: #fff !important; } /* 異常回報 */
.status-badge.rs-delay      { background-color: #FB8E3C !important; color: #fff !important; } /* 異常延遲 */

/* ===== 任務清單：14吋/1080p 視窗優化（短欄位不折行、長欄位限寬於欄內折行） ===== */
/* 短內容欄位不折行：建單日期、系統/任務編號、型態、執行人員、狀態 */
#taskTable td[data-th="建單日期"],
#taskTable td[data-th="系統/任務編號"],
#taskTable td[data-th="型態"],
#taskTable td[data-th="執行人員"],
#taskTable td[data-th="狀態"],
#taskTable td[data-th="完成時間"] {
    white-space: nowrap;
}

/* ===== 任務清單功能鈕（PPT 第8頁#3）：4 鈕等寬對齊＋指定色碼 ===== */
.btn-fn { width: 34px; padding-left: 0; padding-right: 0; }
.btn-fn-issue  { background: #FBBF24; border-color: #FBBF24; color: #fff; } /* 異常（有異常時亮黃）*/
.btn-fn-log    { background: #156082; border-color: #156082; color: #fff; } /* 歷程 */
.btn-fn-edit   { background: #72C8D9; border-color: #72C8D9; color: #fff; } /* 編輯 */
.btn-fn-view   { background: #5AAF6B; border-color: #5AAF6B; color: #fff; } /* 檢視（完成後）*/
.btn-fn-cancel { background: #FF6074; border-color: #FF6074; color: #fff; } /* 取消 */
.btn-fn-off    { background: #f1f3f5; border-color: #dee2e6; color: #adb5bd; } /* 反灰不可點 */
.btn-fn-issue:hover,  .btn-fn-issue:focus  { background: #ecab15; border-color: #ecab15; color: #fff; }
.btn-fn-log:hover,    .btn-fn-log:focus    { background: #114e69; border-color: #114e69; color: #fff; }
.btn-fn-edit:hover,   .btn-fn-edit:focus   { background: #57b8cb; border-color: #57b8cb; color: #fff; }
.btn-fn-view:hover,   .btn-fn-view:focus   { background: #4c9d5c; border-color: #4c9d5c; color: #fff; }
.btn-fn-cancel:hover, .btn-fn-cancel:focus { background: #f0405a; border-color: #f0405a; color: #fff; }
/* ============================================================
   全站清單欄寬固定（table-layout: fixed）
   欄寬只依「表頭」決定 → 換頁／排序／重新查詢後即使資料內容改變，欄位寬度與位置都不會跑掉。
   - .set-table（設定類清單）不做 RWD 卡片化 → 全寬度套用。
   - .list_table.rwd-table（任務/報表類）於 ≤960px 會切成卡片式 → fixed 僅於桌面(>960px)套用。
   - fixed 下長內容以 overflow-wrap 斷行，避免溢出到鄰欄。
   ※ 各表的欄寬於該表 <th> 以 style="width:..." 指定；未指定寬度的「文字彈性欄」自動均分剩餘空間。
   ============================================================ */
table.set-table { table-layout: fixed; }
@media (min-width: 961px) { table.list_table { table-layout: fixed; } }
.list_table tbody td, .set-table tbody td { overflow-wrap: anywhere; }

/* 設定類清單（.set-table 無 RWD 卡片化）欄位較多者：太窄時由 .table-responsive 出現水平捲軸、
   欄位維持可讀寬度，避免彈性欄被壓窄擠成多行。（與任務清單/總表的處理一致）
   欄位少的小表（標籤/部門/類別/回報選項/稽核單…）刻意不加，避免不必要的水平捲動。 */
#locTable { min-width: 1080px; }   /* 機構/聯絡人/Email/縣市/行政區/地址 */
#userTable { min-width: 1040px; }  /* 名稱/帳號/部門/電話/信箱 五個彈性欄 */
#workerTable { min-width: 1050px; } /* 姓名/類別/部門/手機 彈性欄＋狀態110/通知狀態110/功能150（0805 加通知狀態 900→1010，再加歷程鈕功能欄 110→150 故 →1050） */
#custTable { min-width: 820px; }   /* 客戶名稱/聯絡人/電話/部門 四個彈性欄 */

/* 全站欄位間隔：fixed 下相鄰欄位太貼近，補左右內距讓視覺有呼吸空間（表頭與儲存格一致） */
.list_table thead th, .list_table tbody td,
.set-table thead th, .set-table tbody td {
    padding-left: 0.7rem;
    padding-right: 0.7rem;
}

/* 日期／時間類資料欄不折行（全站）：日期為固定格式，折行不美觀 */
#rptTable td[data-th="派單日期"],
#rptTable td[data-th="指定時間"],
#rptTable td[data-th="完成時間"],
#rptTable td[data-th="已延遲天數"] {
    white-space: nowrap;
}

/* 螢幕縮小時，欄寬維持不壓縮：內容區小於此下限即由 .table-responsive 出現水平捲軸，
   避免「任務地點/任務地址」被壓到近 0 而文字溢出、與鄰欄重疊。
   下限＝各欄固定寬度總和（36+108+120+156+64+150+234+108+92+146(完成時間)+178＝1392）。
   0817 欄寬重分配：建單日期 116→108、指定起始時間 128→120、系統/任務編號 172→156、執行人員 118→108
   （皆收斂到「表頭字數×16px＋排序指示 ⇅ 約 18px＋左右 padding 22.4px」的實際需求），
   省下的 42px 撥給 完成時間(118→146，日期+時間單行不折) 與 任務地址(220→234)；總寬維持不變。
   僅桌面(>960px)套用；≤960px 為 RWD 卡片式不受影響。 */
@media (min-width: 961px) { #taskTable { min-width: var(--tasklist-minw, 1392px); } }
/* 0828 第1頁：任務清單改動態欄位（欄位顯示設定）＝min-width 改由 list.js renderHead() 加總「目前顯示欄」
   的表頭欄寬寫入 CSS 變數 --tasklist-minw（動態欄位表全站標準，同 #rptTable 的 --rpt-minw 模式）；
   1392px 為預設欄位組合的總寬（fallback，＝改版前的值）。各欄寬定義集中在 list.js 的 COLS。 */

/* ===== 任務清單欄位顯示設定燈箱（0828 第1頁）：左「隱藏欄位」/右「顯示欄位」雙桶＋點擊切換＋拖曳排序 ===== */
.col-grid { display: grid; grid-template-columns: 1fr 44px 1fr; gap: 12px; align-items: stretch; }
.col-move-center { display: flex; align-items: center; justify-content: center; color: #9aa8b1; font-size: 1.3rem; }
.col-bucket { border: 1px solid #d8e3e7; border-radius: 10px; background: #fbfcfd; overflow: hidden; display: flex; flex-direction: column; }
.col-bucket-head {
    padding: 10px 14px; background: #f0f6f8; border-bottom: 1px solid #d8e3e7;
    display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: #365b6a;
}
.col-count { min-width: 24px; text-align: center; background: #dbe9ed; color: #416979; border-radius: 12px; padding: 1px 8px; font-size: .78rem; }
.col-bucket-list { padding: 10px; min-height: 260px; }
.col-chip {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 12px; margin-bottom: 8px; border: 1px solid #d6e1e5; border-radius: 8px;
    background: #fff; color: #314c5a; cursor: pointer; user-select: none; transition: .15s;
}
.col-chip:hover { border-color: #1597a6; background: #f2fbfc; }
.col-chip.dragging { opacity: .45; }
.col-chip.col-chip-locked { cursor: grab; background: #f7fafb; }
.col-chip.col-chip-hidden i { color: var(--primary, #235eb7); }
.col-chip .bi-x-lg { color: #c96a6a; font-size: .8rem; }
@media (max-width: 720px) {
    .col-grid { grid-template-columns: 1fr; }
    .col-move-center { transform: rotate(90deg); height: 28px; }
    .col-bucket-list { min-height: 120px; }
}

/* RWD 卡片模式通則：無 data-th（或空值）的儲存格不顯示「 : 」標籤前綴
   （web_style 的 .rwd-table td:before 用 attr(data-th)，空值會殘留一個孤兒冒號） */
@media screen and (max-width: 960px) {
    .rwd-table td:not([data-th])::before,
    .rwd-table td[data-th=""]::before { display: none; }
}

/* ============================================================
   出勤與酬勞結算表（#summaryTable / #attTable）RWD
   - 桌面：欄寬下限 → 視窗過窄改出水平捲軸，表頭不再擠壓折行。
   - ≤960px 卡片模式：主列靠 data-th 顯示標籤（attendance.js 已加）；
     展開明細列（.att-detail）內層表格「恢復為一般表格」並獨立水平捲動，
     否則 .rwd-table 的卡片化規則會連內層明細儲存格一起直排、表頭被藏掉（跑版主因）。
   ============================================================ */
#summaryTable { min-width: 960px; }
#summaryTable th { white-space: nowrap; }
@media (min-width: 961px) { #attTable { min-width: 1160px; } }

/* 查詢列日期框固定寬（配合 col-auto）：type=date 不參與 flex 伸縮，
   足夠顯示 yyyy/MM/dd＋日曆圖示；空間不足時整組換行、不再溢出壓到鄰欄 */
.search-bar .date-fixed { width: 9.5rem; flex: 0 0 auto; }

/* 展開明細：內層表格獨立捲動容器（桌面與手機皆適用），巢狀表不受外層 fixed/卡片化影響 */
#attTable .att-detail-scroll { overflow-x: auto; }
#attTable .att-detail table {
    min-width: 920px;
    table-layout: auto !important;   /* 蓋過 table.list_table 的 fixed（內層以內容自適應） */
    margin-bottom: 0;
}
#attTable .att-detail table th { white-space: nowrap; }

@media screen and (max-width: 960px) {
    /* 明細列本身佔滿一列、不顯示卡片標籤 */
    #attTable .att-detail > td { display: block; width: 100%; }
    #attTable .att-detail > td::before { display: none; }
    /* 內層明細表恢復表格呈現（覆寫 .rwd-table th{display:none} / td{display:block}） */
    #attTable .att-detail table th { display: table-cell; text-align: left; }
    #attTable .att-detail table td { display: table-cell; width: auto; }
    #attTable .att-detail table td::before { display: none; content: none; }
}

/* ===== 出勤結算 0828 第5頁：出勤狀態六態徽章色（六態全套投影片參考 HTML 色碼；本頁專屬 .att-*，
   與卡片底部圖例同色，不動全站其他頁的 bg-success/bg-warning 徽章） ===== */
.status-badge.att-normal    { background-color: #159447 !important; color: #fff !important; } /* 正常 */
/* 0901 調整：遲到／早退色票改 #FF6074（與全站異常紅一致）；「遲到/早退」組合態＝兩者皆是，跟著同色 */
.status-badge.att-late      { background-color: #FF6074 !important; color: #fff !important; } /* 遲到 */
.status-badge.att-early     { background-color: #FF6074 !important; color: #fff !important; } /* 早退 */
.status-badge.att-lateearly { background-color: #FF6074 !important; color: #fff !important; } /* 遲到/早退 */
.status-badge.att-abnormal  { background-color: #ff9800 !important; color: #fff !important; } /* 異常（只打其中一卡） */
.status-badge.att-absent    { background-color: #545b62 !important; color: #fff !important; } /* 未出勤 */
/* 人工調整過的核定工時＝橘底標示（PPT 定案；圖例說明區同款小色塊共用） */
.att-adjusted {
    background: #fff6e8;
    color: #f57c00;
    font-weight: 700;
    border: 1px solid #ff9e24;
    border-radius: 6px;
    padding: 2px 8px;
    display: inline-block;
}
/* 出勤狀態圖例（清單卡片底部） */
.att-legend { display: flex; gap: 14px; flex-wrap: wrap; }
.att-legend .att-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; }

/* 長內容欄位於欄內自動折行（fixed 後欄寬由表頭決定，cell-od 撐滿該欄即可，不再需要固定 px）
   同時覆寫 web_style.css 的 .cell-od{white-space:nowrap}，避免長地點名稱/地址溢出鄰欄重疊。
   任務清單(#taskTable) 與 任務管理總表(#rptTable) 共用同一組規則。 */
#taskTable td[data-th="任務地點"],
#taskTable td[data-th="任務地址"],
#rptTable td[data-th="任務地點"],
#rptTable td[data-th="任務地址"],
#rptTable td[data-th="異常描述"] { white-space: normal; }
#taskTable .cell-od,
#rptTable .cell-od { white-space: normal !important; overflow-wrap: anywhere; word-break: break-all; line-height: 1.3; }
#taskTable td[data-th="任務地點"] .cell-od,
#taskTable td[data-th="任務地址"] .cell-od,
#rptTable td[data-th="任務地點"] .cell-od,
#rptTable td[data-th="任務地址"] .cell-od { width: auto; }
/* 指定時間：日期與時間自然斷在空白（兩行可接受），但不從中間斷字 */
#taskTable td[data-th="指定時間"] { white-space: normal; overflow-wrap: normal; word-break: keep-all; }
/* 欄位間隔：與全站一致（fixed + min-width 後欄寬充裕，不再需要紧缩） */
#taskTable th, #taskTable td { padding-left: .7rem !important; padding-right: .7rem !important; }

/* ============================================================
   側欄收合(.w_40，44px)：頂層按鈕只置中顯示圖示徽章，避免 30px 徽章被截斷
   （僅作用於 .m_menu_btn 的直接子按鈕，不影響收合時 hover 飛出的子選單浮層）
   ============================================================ */
.w_40 .m_menu_btn > .menu_button,
.w_40 .m_menu_btn > .accordion-button {
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: center;
    text-align: center;
}
/* 徽章置中、去除右邊距，完整顯示於 44px 內 */
.w_40 .m_menu_btn > .menu_button > i,
.w_40 .m_menu_btn > .accordion-button > i {
    margin-right: 0;
}
/* 收合時隱藏頂層文字標籤與群組展開箭頭（靠 tooltip 提示名稱） */
.w_40 .m_menu_btn > .menu_button span,
.w_40 .m_menu_btn > .accordion-button span { display: none; }
.w_40 .m_menu_btn > .accordion-button::after { display: none; }

/* 收合時作用中項目：不要整塊白底（窄欄會顯得突兀），改以徽章本身的實色表示作用中 */
.w_40 .m_menu_btn > .menu_button.active,
.w_40 .m_menu_btn > .accordion-button.active {
    background: transparent !important;
    box-shadow: none !important;
}

/* 收合：下方使用者區（名稱／登出）也只置中顯示圖示，避免 30px 徽章被截斷 */
.w_40 .menu_user { padding: 0.5em 0; }
.w_40 .menu_user .user_name_link {
    padding: 0;
    justify-content: center;
    background: transparent;
    border: 0;
    margin-bottom: 0.4em;
}
.w_40 .menu_user .user_name_link > i { margin: 0; }
.w_40 .menu_user .logout_btn {
    width: 30px;
    margin: 0 auto;
    padding: 0.2em 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.w_40 .menu_user .logout_btn i { margin: 0; }

/* ===== 新增任務：自由接單啟用→明顯紅色背景（V4） ===== */
#taskCreateModal .um-body.grab-on {
    background: #fff1f1;
    box-shadow: inset 0 0 0 2px #dc3545;
    border-radius: 8px;
}
#taskCreateModal .um-body.grab-on #grabBanner {
    background: #dc3545 !important;
    color: #fff !important;
    border: 0 !important;
    font-weight: 600;
}

/* ===== 新增任務：[任務指派] 區塊（0805 第2頁）=====
   自由接單勾選欄移入本區塊，做成淡紫方框＝與同區塊其他欄位（有標籤＋輸入框）齊高、視覺不落單。
   紫色系＝區塊標題 #9A80E1 的淡化，非自創色。 */
#assignRow .grab-box {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    /* 高度＝標籤(約25px)＋輸入框(38px)：方框與右側「標籤＋下拉」整組等高、上下緣切齊（比照 0805 第2頁版面） */
    min-height: 63px;
    margin: 0;
    padding: 0 0.75rem;
    border: 1px solid #d9cff5;
    border-radius: 0.375rem;
    background: #f6f2fe;
    white-space: nowrap;
}
#assignRow .grab-box .form-check-input { margin: 0; float: none; }
#assignRow .grab-box .form-check-label { font-weight: 600; color: #5b46a8; cursor: pointer; }
#assignRow .grab-box .form-check-input:checked { background-color: #9a80e1; border-color: #9a80e1; }
/* 自由接單啟用（全區轉紅）時，方框跟著轉紅，不要留一塊紫的 */
#taskCreateModal .um-body.grab-on #assignRow .grab-box {
    border-color: #f1aeb5;
    background: #fff5f5;
}
#taskCreateModal .um-body.grab-on #assignRow .grab-box .form-check-label { color: #b02a37; }

/* ===== 新增任務：指定起始／完成時間（0708 規劃拍板；起點=指定起始時間、迄點=指定完成時間、勞務=指定時間；
   每組一列＝一筆任務、日期必填時間選填）===== */
/* 標籤列：固定最小高度＝起點與迄點同高，左右各組列平行對齊
   （0810 改3：手動「新增一組」鈕已移除，標籤列只剩標籤，仍保留最小高度維持左右對齊） */
.loc-fields .appt-head { min-height: 31px; }
/* 指定時間列：日期欄固定寬、星期緊貼日期後；時間欄給足寬度讓 12 小時制「下午08:20」完整顯示；
   列有 flex-wrap（雙地點半欄寬放不下時，時間整段折下一行、不擠壓變形） */
.appt-groups .appt-group .ag-date { max-width: 10rem; flex: 0 1 auto; }
.appt-groups .appt-group input[type=time] { min-width: 9.5rem; max-width: 11rem; flex: 0 1 auto; }
.appt-groups .appt-group .ag-wd {
    min-width: 1.6rem; font-variant-numeric: tabular-nums; font-weight: 600;
    color: var(--primary, #235eb7);
}
/* 編輯模式（#taskCreateModal.appt-single）＝單筆：隱藏週期性鈕與面板 */
#taskCreateModal.appt-single .ag-cycle,
#taskCreateModal.appt-single .appt-cycle { display: none !important; }

/* ===== 週期性（0806 第3頁；0810 改3 起成為唯一的批次建立方式）=====
   .ag-cycle＝時間欄右側切換鈕（active＝已啟用，實底）；.appt-cycle＝展開的設定列（加天數／截止時間／共 N 筆任務）。 */
.appt-groups .appt-group .ag-cycle { flex-shrink: 0; padding: .15rem .5rem; line-height: 1.35; white-space: nowrap; }
.appt-groups .appt-group .ag-cycle.active {
    background: var(--primary, #235eb7);
    border-color: var(--primary, #235eb7);
    color: #fff;
}
.appt-cycle {
    margin-top: .4rem;
    padding: .5rem .75rem;
    background: #f2f7fd;
    border: 1px solid #cfe0f5;
    border-radius: .5rem;
}
/* 面板內每一橫列（0811 第2頁：面板由單列改多列，故改用 .cyc-row 排列） */
.appt-cycle .cyc-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.appt-cycle .cyc-interval { width: auto; min-width: 4.5rem; flex: 0 0 auto; }
.appt-cycle .cyc-unit { width: auto; min-width: 5rem; flex: 0 0 auto; }
.appt-cycle .cyc-monthday { width: auto; min-width: 7rem; flex: 0 0 auto; }
.appt-cycle .cyc-until { width: auto; min-width: 9.5rem; flex: 0 0 auto; }
.appt-cycle .cyc-count { font-size: .85rem; font-weight: 600; color: var(--primary, #235eb7); }
/* 單位專屬設定區（週＝重複星期、月＝重複日期） */
.appt-cycle .cyc-detail { margin-top: .6rem; padding-top: .55rem; border-top: 1px dashed #cfe0f5; }
.appt-cycle .cyc-detail-title { font-size: .82rem; font-weight: 700; color: #35506d; margin-bottom: .4rem; }
.appt-cycle .cyc-hint { margin-top: .4rem; font-size: .78rem; color: #728397; line-height: 1.5; }
.appt-cycle .cyc-weekdays { display: flex; flex-wrap: wrap; gap: .4rem; }
.appt-cycle .cyc-wd {
    width: 2.25rem; height: 2.25rem; padding: 0;
    border: 1px solid #cbd8e6; border-radius: 50%;
    background: #fff; color: #3e5369; font-size: .9rem; line-height: 1;
    transition: background .12s, color .12s, border-color .12s;
}
.appt-cycle .cyc-wd:hover { background: #e8f1fd; }
.appt-cycle .cyc-wd.active {
    background: var(--primary, #235eb7);
    border-color: var(--primary, #235eb7);
    color: #fff; font-weight: 700;
}
/* 選擇常用地點燈箱（0708 驗收回饋：原 modal-lg 太小）：70% 寬高；
   body 改直向 flex，清單區彈性撐滿可捲動、分頁列固定在下方 */
#locPick_modal .modal-dialog { max-width: 70vw; }
#locPick_modal .modal-content { height: 70vh; }
#locPick_modal .modal-body { display: flex; flex-direction: column; overflow: hidden; }
#locPick_modal .locpick-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
@media (max-width: 992px) {
    #locPick_modal .modal-dialog { max-width: 96vw; }
    #locPick_modal .modal-content { height: 90vh; }
}

/* ===== 新增/編輯任務：協作人員標籤＋拒單/異常紅標（0716 調整第1頁，比照 1.0）=====
   已選協作人員在下拉下方一人一枚小標籤（沿用 .item-tag 膠囊外觀、無序號、✕可移除）；
   拒單者：標籤紅底白字、下拉選項紅字⚠（option data-content → .opt-reject）、
   執行人員選中拒單者＝bootstrap-select 按鈕紅字紅框（.reject-selected）。 */
.collab-chips { display: flex; flex-wrap: wrap; gap: .35rem .3rem; }
.collab-chips .collab-chip { margin: 0; }
.collab-chips .collab-chip .chip-x { font-size: .8rem; }
.collab-chips .collab-chip.chip-reject {
    background: #dc3545; border-color: #c82333; color: #fff; font-weight: 600;
}
.collab-chips .collab-chip.chip-reject .chip-x { color: rgba(255, 255, 255, .85); }
.collab-chips .collab-chip.chip-reject .chip-x:hover { color: #fff; }
/* 下拉選項紅字（含選取反白時維持紅字＝比照 1.0）；!important 蓋過 .dropdown-item.active 的白字 */
.opt-reject { color: #dc3545 !important; font-weight: 600; }
/* 執行人員選中拒單者：按鈕紅框紅字。
   ⚠ 本專案 initSearchSelect 用 styleBase:"form-select"，bootstrap-select 按鈕沒有 .btn class，
   要用 .dropdown-toggle 才選得到（UI 驗測抓到的雷）。 */
.bootstrap-select.reject-selected > .dropdown-toggle {
    border-color: #dc3545 !important;
    box-shadow: inset 0 0 0 1px #dc3545;
}
.bootstrap-select.reject-selected > .dropdown-toggle .filter-option-inner-inner { color: #dc3545; font-weight: 600; }

/* ===== 任務「執行車牌」下拉三欄對齊（0716 第3頁驗收回饋）=====
   選項以 data-content 呈現「車種｜類型｜車牌」固定欄寬三欄，各選項上下對齊；
   選中後按鈕內同樣式。未設車種顯示「—」淡色佔位。 */
.car-opt { display: inline-flex; align-items: center; white-space: nowrap; max-width: 100%; }
.car-opt .car-opt-type { flex: 0 0 6em; overflow: hidden; text-overflow: ellipsis; }
.car-opt .car-opt-kind { flex: 0 0 3.2em; color: var(--text-muted, #6b7385); }
.car-opt .car-opt-lic { flex: 1 1 auto; font-variant-numeric: tabular-nums; }
.car-opt .car-opt-none { color: #adb5bd; }   /* 未設車種的「—」佔位淡化 */

/* 任務明細版面依型態（0722 使用者定案；create.js 切 #taskDetailRow.detail-deliv，CSS order 重排不動 DOM）：
   勞務＝2x2（任務說明｜任務項目 ／ 其他連結｜是否需稽核，維持 DOM 原序）；
   取送件＝任務說明｜其他連結 同列＋任務項目獨佔整列（是否需稽核已隱藏）。
   選擇器 2 ID+class 特異性壓過 .col-lg-6，免 !important。 */
#taskDetailRow.detail-deliv #noteWrap { order: 1; }
#taskDetailRow.detail-deliv #linkWrap { order: 2; }
#taskDetailRow.detail-deliv #itemWrap { order: 3; flex: 0 0 100%; width: 100%; max-width: 100%; }

/* 新增/編輯任務：縣市/行政區下拉加寬（PPT 0706 第二批第3頁「太窄應展開」）。外觀維持與其他下拉一致，不另加色框。
   行政區連動所選縣市（見 create.js）。 */
.loc-fields .bootstrap-select { width: 100% !important; }
.loc-fields .bootstrap-select .dropdown-menu { min-width: 240px; }
/* 縣市/行政區下拉 data-container="body"：選單掛到 body，需高於 modal(1055) 才不被蓋住，並給足最小寬度 */
.bs-container { z-index: 1060; }
.bs-container .dropdown-menu { min-width: 240px; }

/* ===== 任務清單預設排序設定（拖曳列） ===== */
#sortList .sort-row {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .7rem; margin-bottom: .5rem;
    background: #fff; border: 1px solid #dbe3ef; border-radius: 8px;
    cursor: grab;
}
#sortList .sort-row.dragging { opacity: .5; border-style: dashed; }
#sortList .sort-no { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #6c757d; color: #fff; font-size: 12px; font-weight: 700; flex-shrink: 0; }
#sortList .sort-grip { cursor: grab; font-size: 1.1rem; }
#sortList .sort-name { font-weight: 600; }
/* 固定正序欄位（路順＝合車配送順序，倒序無語意）：不畫升/降序鈕，改灰字提示；
   寬度對齊按鈕組（.btn-group-sm 兩顆四字鈕）以免各列尾端參差。 */
#sortList .sort-dir-fixed {
    display: inline-flex; align-items: center; justify-content: center; gap: .1rem;
    min-width: 8.6rem; padding: .25rem .5rem; font-size: .8125rem; white-space: nowrap;
    background: #f6f8fb; border: 1px dashed #cfd8e6; border-radius: .25rem;
}

/* ===== 地圖燈箱 iframe 底色（全站標準）=====
   iframe 文件送達前（網路／Razor 編譯延遲）會透出父層白底造成開啟瞬間白閃；
   底色改成與 MapLoading 過場同款漸層，一開燈箱即無縫接到讀取動畫
   （地圖頁本身首繪的白閃由 mapLoading.js 於 <head> 先漆 html 底色處理）。
   涵蓋：任務清單執行人員地圖／貨態查詢外勤地圖(#mapFrame)、出勤打卡定位(#gpsFrame)、圖片拍照位置(#imgMapFrame)。
   新增地圖燈箱 iframe 一律沿用（把 id 加進此選擇器）。 */
#mapFrame, #gpsFrame, #imgMapFrame {
    background: linear-gradient(135deg, #0f2c4d, #15497a, #1f7a8c);
}

/* ===== 分段控制（seg-control）改醒目膠囊風格（0707：與 set-tabs-bold／看板行事曆切換統一，作用中＝主色實底白字）
   使用處：任務表單設定「套用範圍」「任務型態預設」。 ===== */
.seg-control {
    background: #eef2f7;
    border: none;
    border-radius: 12px;
    padding: .35rem;
    gap: .5rem;
}
.seg-control .seg-btn {
    border: 1px solid transparent;
    border-radius: 9px;
    font-weight: 600;
    font-size: 1rem;
    padding: .55rem 1.8rem;
}
/* 小尺寸變體（0730 第5頁：任務查詢「日期篩選」切換，高度貼齊查詢列的 form-control） */
.seg-control.seg-sm { padding: .25rem; border-radius: 10px; }
.seg-control.seg-sm .seg-btn { font-size: .875rem; padding: .32rem .9rem; border-radius: 8px; }
.seg-control .seg-btn:hover { color: var(--primary); background: #fff; }
.seg-control .seg-btn.active {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 4px 12px -3px rgba(35, 94, 183, .55);
}

/* ===== 任務查詢兩列排版（0730）：第一列等寬欄（裸 col-xl 均分）給最小寬度下限——
   夠寬時一列排滿，視窗過窄時整欄自然折行，不會把日期欄壓到裁字。
   選擇器只命中裸 col-xl（col-xl-2/3/6 是不同 token），目前僅任務管理查詢列使用。 ===== */
.search-bar .row > .col-xl { min-width: 9.5rem; }