@charset "UTF-8";
/*--
Author: W3layouts
Author URL: http://w3layouts.com
--*/
/*!
 * Bootstrap v4.4.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

/* Flaticon Icon Font CSS */
@import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-bold-rounded/css/uicons-bold-rounded.css');
@import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-regular-rounded/css/uicons-regular-rounded.css');
@import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-thin-straight/css/uicons-thin-straight.css');
@import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-thin-rounded/css/uicons-thin-rounded.css');
@import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-thin-chubby/css/uicons-thin-chubby.css');
@import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-solid-chubby/css/uicons-solid-chubby.css');
@import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-solid-rounded/css/uicons-solid-rounded.css');
@import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-solid-straight/css/uicons-solid-straight.css');
@import url('https://cdn-uicons.flaticon.com/4.0.0/uicons-brands/css/uicons-brands.css');

.icon-align {
    font-size: 18px;
    margin-right: 0.3rem;
    vertical-align: middle;  
    line-height: 1;
}

.icon-align1 {
    margin-right: 0.8rem;
    font-size: 1.7rem;
    vertical-align: middle;    
}

.icon-align2 {  
    margin-right: 0.3rem;
    vertical-align: middle;
}

.icon-align3 {
    margin-right: 0.3rem;
    font-size: 17px;
    vertical-align: middle;
    line-height: 0;
}

.icon-align4 {
    margin-right: 0.3rem;
    font-size: 14px;
    vertical-align: middle;   
    line-height: 0.8;
}

/* 單獨 icon*/
.icon-align5 {
    margin-right: 0.3rem;
    font-size: 16px;
    vertical-align: middle;   
    line-height: 0.8;
}

/* 標籤頁、標籤頁樣式 */
.data-tabs .nav-tabs {
    border-bottom: none;
    background: transparent;
    display: flex;
    gap: 0;
    padding: 0;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    box-shadow: none;
}

/* 每個 nav-item 撐滿 */
.data-tabs .nav-tabs .nav-item {
    flex: 1;
}

/* 基本 Tab 樣式 */
.data-tabs .nav-tabs .nav-link {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 16px;
    font-size: 16px;
    font-weight: 600;
    color: #1F3E32;
    background: #ffffff;
    border: none;
    border-radius: 0;
    border-top: 1px solid #E2E4E0;
    border-right: 1px solid #E2E4E0;
    border-bottom: 3px solid #6a71fa2d;
    position: relative;
    transition: all 0.2s ease;
    white-space: nowrap;
}

/* 第一個 tab 左邊圓角 */
.data-tabs .nav-tabs .nav-item:first-child .nav-link {
    border-left: 1px solid #E2E4E0;
    border-radius: 12px 0 0 0;
}

/* 最後一個 tab 右邊圓角 */
.data-tabs .nav-tabs .nav-item:last-child .nav-link {
    border-radius: 0 12px 0 0;
}

/* 選中狀態 */
.data-tabs .nav-tabs .nav-link.active {
    border-bottom: 3px solid #92C0AD !important;
    background: #ffffff !important;
    color: #1F3D30;
    border-top: 1px solid #E2E4E0;
    border-right: 1px solid #E2E4E0;
    border-left: 1px solid #E2E4E0;
    font-weight: 700;
    z-index: 2;
}

/* 未選中但可用 - Hover */
.data-tabs .nav-tabs .nav-link:hover:not(.active) {
    background: #EEF5F2;
    color: #1F3D30;
    border-bottom: 3px solid #92C0AD;
}

/* Tab count badge */
.data-tabs .nav-tabs .nav-link .tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #2C604B;
    color: white;
    font-size: 14px;
    font-weight: 450;
    min-width: 35px;
    height: 20px;
    border-radius: 10px;
    padding: 0 6px;
}


/* 標籤相關 */
.category-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 6px;
}

.category-tag.synonym {
    background: #ffeaa7;
    color: #856404;
    border: 1px solid #ffeaa7;
}

.category-tag.abbreviation {
    background: #C5DDD4;
    color: #1B362C;
    border: 1px solid #C5DDD4;
}

.tab-count {
    display: inline-block;
    border-radius: 100%;
    padding: 4px 4px;
    background: #fff;
    border: 1px solid #fff;
}

.lcode {
    display: inline-block;
    border-radius: 25%;
    padding: 1px;
    background: #D0DFDA;
    border: 1px solid #fff;
}

/* 狀態按鈕樣式 */
.status-toggle-btn {
    font-size: 14px;
    padding: 6px 16px;
    border: none;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.status-toggle-btn.active {
    background: #335D4B;
    color: white;
}

.status-toggle-btn.inactive {
    background: #ECEDEB;
    color: #747A6F;
}

.status-toggle-btn:hover {
    transform: scale(1.05);
}

/* 表格操作欄：編輯／刪除等按鈕橫向並排、欄內置中 */
.action-btn-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    width: 100%;
}

/* 英雄區塊樣式 */
.hero-section {
    background: #1C362B;
    color: white;
    padding: 80px 0;
    text-align: center;
    margin-bottom: 50px;
}

.hero-section h1 {
    font-size: 2.5rem;
    color: white;
    font-weight: 600;
    margin-bottom: 20px;
}

.hero-section p {
    color: white;
    font-size: 1.2rem;
    opacity: 0.95;
}

.filter-search-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    padding: 16px 24px;
    border-radius: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 12px;
    border: 1px solid #E2E4E0;
}

.filter-left-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1;
}

/* ===== 版面佈局 知識庫後台 ===== */
.hospital-layout {
    display: flex; 
    gap: 20px; 
    align-items: flex-start;
    width: 100%; 
    padding: 0;
}

.hospital-left { 
    flex: 0 0 200px; 
}

.instrument-right { 
    flex: 1; min-width: 0; 
}

/* ===== 左側醫院清單 ===== */
.hospital-item {
    padding: 12px 15px; 
    cursor: pointer; 
    border-radius: 8px;
    transition: all 0.2s; 
    color: #303634; 
    margin-bottom: 5px;
}

.hospital-item:hover { 
    background-color: #F0F7F5; 
    color: #34775D; 
}

.hospital-item.active { 
    background-color: #EBF4F0; 
    color: #245441; 
    font-weight: bold; 
}

/* 個人與機構管理 */

/* 搜尋區塊 */
.instrument-search-row { margin-bottom: 16px; }
.instrument-search { display: flex; align-items: center; gap: 10px; }
.instrument-search .search-container { flex: 1; max-width: 400px; }

/* 統計卡片 */
.instrument-stats { 
    display: flex; align-items: stretch; gap: 14px; width: 100%; flex-wrap: nowrap; 
}
.card-a {
    background: #fff; border-radius: 14px; padding: 22px 26px;
    border: 1px solid #E9ECE8; box-shadow: 0 2px 8px rgba(0,0,0,.06);
    flex: 1; min-width: 0; min-height: 110px;
}
.card-a .ca-label { font-size: 16px; color: #747A6F; font-weight: 500; margin-bottom: 6px; }
.card-a .ca-value { font-size: 38px; font-weight: 700; color: #1B372C; line-height: 1.1; }
.card-a .ca-divider { border: none; border-top: 1px solid #F1F2F0; margin: 16px 0; }
.card-a .ca-sub-row { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; }
.card-a .ca-sub-label { font-size: 16px; color: #B4B9B1; }
.card-a .ca-sub-value { font-size: 16px; font-weight: 600; color: #4F544C; }

/* 各醫院統計卡片 Grid */
.hospital-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.hosp-card {
    background: #fff; 
    border: 1px solid #E9ECE8; 
    border-radius: 14px;
    padding: 18px 20px; 
    cursor: pointer; 
    transition: all 0.22s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,.05); 
    position: relative; 
    overflow: hidden;
}

.hosp-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #3D8A6B, #386F59); opacity: 0; transition: opacity 0.22s;
}

.hosp-card:hover { border-color: #3D8A6B; box-shadow: 0 6px 20px rgba(61, 138, 107,.2); transform: translateY(-3px); }
.hosp-card:hover::before { opacity: 1; }
.hosp-card-name {
    font-size: 16px; font-weight: 600; color: #354740;
    margin-bottom: 14px; display: flex; align-items: center; gap: 7px;
}

.hosp-card-name i { color: #3D8A6B; }
.hosp-card-stats { display: flex; justify-content: space-between; gap: 8px; }
.hosp-stat-item { flex: 1; text-align: center; }
.hosp-stat-num { font-size: 24px; font-weight: 700; color: #1B372C; line-height: 1; }
.hosp-stat-label { font-size: 14px; color: #B4B9B1; margin-top: 3px; }
.hosp-card-divider { width: 1px; background: #F1F2F0; align-self: stretch; }

/* 各醫院總覽區塊的小標題 */
.overview-section-label {
    font-weight: 600; 
    color: #4C5347;
    margin: 20px 0 4px; 
    letter-spacing: 0.3px;
    display: flex; 
    align-items: center; 
    gap: 6px;
}
.overview-section-label span { 
    color: #364f64bd; 
    font-weight: 400; 
    font-size: 14px; 
}

/* 麵包屑返回列 */
.hospital-breadcrumb {
    display: flex; 
    align-items: center; 
    gap: 8px;
    margin-bottom: 16px; 
    font-size: 14px; 
    color: #747A6F;
}

.breadcrumb-back {
    width: 16%;
    background: #F0F7F5; 
    border: none; 
    color: #386F59;
    font-weight: 600; 
    font-size: 14px; 
    padding: 7px 16px;
    border-radius: 20px; 
    cursor: pointer;
    display: inline-flex; 
    align-items: center; 
    gap: 4px; 
    transition: all 0.2s; 
    white-space: nowrap;
}

.breadcrumb-back:hover { background: #386F59; color: #fff; }
.breadcrumb-sep { color: #E2E4E0; margin: 0 4px; }
.breadcrumb-current { font-weight: 600; color: #354740; font-size: 16px; }

/* ===== 各醫院條列式統計 ===== */
.hospital-stats-header {
    font-weight: 600;
    color: #354740;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    margin-bottom: 8px;
}
.hospital-stats-header i {
    color: #3D8A6B;
}
.hospital-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    margin-bottom: 8px;
    background: #F9F9F9;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border-left: 3px solid transparent;
}
.hospital-stat-row:hover {
    background: #EBF4F0;
    border-left-color: #3D8A6B;
    transform: translateX(4px);
}
.hospital-stat-name {
    font-weight: 600;
    color: #354740;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.hospital-stat-name i {
    color: #3D8A6B;
    font-size: 16px;
}
.hospital-stat-values {
    display: flex;
    gap: 24px;
    align-items: center;
}
.hospital-stat-item {
    text-align: right;
}
.hospital-stat-item-label {
    font-size: 12px;
    color: #B4B9B1;
    margin-bottom: 2px;
}
.hospital-stat-item-value {
    font-size: 20px;
    font-weight: 700;
    color: #1B372C;
}

/* 卡片容器 */
.feature-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

/* Part 卡片 */
.part-card {
    background: #fff;
    border-radius: 8px;
    border: 1.5px solid #D9EBE4;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.part-card:hover {
    border-color: #386F59;
}
.part-card-label {
    background: #386F59;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 5px 10px;
}
.part-card-input {
    width: 100%;
    border: none;
    outline: none;
    padding: 8px 10px;
    font-size: 14px;
    font-weight: 600;
    color: #354740;
    background: #fff;
    transition: background 0.2s;
}
.part-card-input[readonly] {
    color: #878C84;
    background: #FBFBFB;
    cursor: default;
}
.part-card-input:not([readonly]):focus {
    background: #F0F7F5;
    box-shadow: inset 0 0 0 2px #3D8A6B;
}

/* 組套推薦分組樣式 */
.panel-group-block {
    border: 1.5px solid #CEE4DB;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(61, 138, 107,0.07);
}

.panel-group-header {
    background: linear-gradient(90deg, #1B372C 0%, #214D3B 100%);
    color: #fff;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-weight: 700;
    font-size: 14px;
}

.panel-group-header .header-badge {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 14px;
    font-weight: 600;
}

.panel-group-header .header-loinc {
    color: #9CC6B6;
    font-size: 16px;
    font-weight: 700;
}

.panel-member-table {
    width: 100%;
    border-collapse: collapse;
}

.panel-member-table thead tr th {
    background: #1B372C;
    color: #ffffff;
    padding: 8px 12px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid #50584B;
    white-space: nowrap;
}

.panel-member-table tbody td {
    padding: 9px 12px;
    border: 1px solid #E2E4E0;
    text-align: center;
    vertical-align: middle;
    background: #fff;
    font-size: 14px;
}

.panel-member-table tbody tr:hover td {
    background: #F0F7F5;
}

.panel-member-table tbody tr.panel-selected td {
    background: #EAF4F0;
}

.panel-rel-tag {
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
}

.panel-sim-high   { color: #1a8f5a; font-weight: 700; }
.panel-sim-medium { color: #b07d00; font-weight: 700; }
.panel-sim-low    { color: #c0392b; font-weight: 700; }

.roc-check {
    color: #1a8f5a;
    font-weight: 700;
    font-size: 16px;
}

/* 單一卡片樣式 */
.feature-card {
    background: white;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
    border-top: 4px solid #1C362B;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.feature-card h3 {
    color: #303634;
    font-size: 1.5rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.feature-card .icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(#1C362B 0%, #1C362B 100%);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    line-height: 0.3;
}

.feature-card ul {
      padding-left: 20px;
      list-style: none;
    }
    
    .feature-card ul li {
      margin-bottom: 12px;
      line-height: 1.6;
      position: relative;
      padding-left: 10px;
    }
    
    .feature-card ul li::before {
      content: "✓";
      position: absolute;
      left: -15px;
      color: #3D8A6B;
      font-weight: bold;
    }
    
    .feature-card ul li strong {
      display: inline-block;
      margin-right: 5px;
      white-space: nowrap;
    }
    
    /* 確保文字不會斷行在奇怪的地方 */
    .feature-card ul li {
      word-wrap: break-word;
      overflow-wrap: break-word;
    }

/* ── flex-wrap 表單區塊 ── */
.form-section {
    padding: 5px;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border: 1px solid #E2E4E0;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 5px;
}

.form-field {
    display: flex;
    flex-direction: column;
    min-width: 120px;
    flex: 1 1 120px;
    border-right: 1px solid #E2E4E0;
    border-bottom: 1px solid #E2E4E0;
}

.form-field:last-child { border-right: none; }
/* 當 wrap 時最後一欄也去掉右邊框 */
.form-field.no-right { border-right: none; }

.form-field-label {
    background: #354740;
    color: #fff;
    padding: 5px;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
}

.form-field input[type=text] {
    border: none; outline: none;
    padding: 7px 10px;
    background: #fff;
    width: 100%;
    transition: background 0.15s;
}

.form-field input[type=text]:focus {
    background: #F0F7F5;
    box-shadow: inset 0 0 0 2px #3D8A6B;
}

.form-field input[type=text][readonly] {
    background: #F9F9F9; color: #313735; cursor: default;
}

.form-field input[type=text].modified {
    background: #fff3cd !important;
}

/* 序號欄特殊 */
.form-field.field-no {
    flex: 0 0 60px; min-width: 60px;
}

/* 儲存 / 推薦列 */
.action-row {
    display: flex;
    justify-content: space-between;
    align-items: center;   /* ← 確認有這行，讓「對應至」和按鈕同行 */
}

/* 區塊分隔標題 */
.block-title {
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #878C84;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 8px;
}
.block-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #E0E1DF;
}

.mapping-to-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mapping-to-label {
    font-weight: 600; 
    color: #4F544C;
}

.mapping-to-input {
    padding: 6px 14px;
    border: 2px solid #E2E4E0;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #354740;
    width: 100%;
}

.step-tooltip-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.step-tooltip-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #E9ECE7;
    color: #3D8A6B;
    font-size: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    font-weight: 700;
    flex-shrink: 0;
    border: 1px solid #CBDCD7;
}

/* tooltip 掛在 body，用 JS 定位 */
#stepTooltipGlobal {
    display: none;
    position: fixed;
    background: #354740;
    color: white;
    border-radius: 10px;
    padding: 10px 14px;
    z-index: 99999;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0,0,0,0.22);
    pointer-events: none;
}

#stepTooltipGlobal::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #354740;
}

.step-tooltip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-size: 0.82rem;
}

.step-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.step-dot.done   { background: #28a745; }
/* 與匯入紀錄「目前步驟」藥丸一致：第 5 步為綠色，其餘進行中為藍 */
.step-dot.active { background: #3D8A6B; }
.step-dot.active.final { background: #28a745; }
.step-dot.todo   { background: #D4D6D2; }


/* 推薦序 */
.recommend-toolbar {
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.recommend-title {
    font-weight: 700;
    display: flex; 
    align-items: center; 
    gap: 8px;
}

.toolbar-right {
    display: flex; 
    align-items: center; 
    gap: 8px;
}

.toolbar-label { 
    font-weight: 600;
    white-space: nowrap; 
}

.sim-select {
    padding: 6px 12px; 
    border: 2px solid #E2E4E0; 
    border-radius: 6px;
    font-size: 14px; 
    font-weight: 600; 
    color: #354740;
    background: #fff; 
    cursor: pointer;
}

.partial-input {
    padding: 6px 10px; 
    border: 2px solid #3D8A6B; 
    border-radius: 6px;
    color: #354740; 
    width: 300px;
    display: none;
}

.partial-input.show { 
    display: inline-block; 
}

/* 推薦表格 */
.rec-table-wrap {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid #E2E4E0;
}

.rec-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}

.rec-table thead tr:first-child th {
    background: #354740;
    color: #fff;
    padding: 10px 12px;
    text-align: center;
    font-weight: 700;
    border: 1px solid #50584B;
    white-space: nowrap;
}

.rec-table thead tr.sub-header th {
    background: #50584B;
    color: #D2DFDB;
    padding: 8px 10px;
    text-align: center;
    font-weight: 600;
    border: 1px solid #2E5546;
}

.rec-table tbody td {
    padding: 9px 10px;
    border: 1px solid #E2E4E0;
    text-align: center;
    vertical-align: middle;
    background: #fff;
}

.rec-table tbody tr:hover td { background: #F0F7F5; }
.rec-table tbody tr.selected-row td { background: #EAF4F0; }

/* Part cell */
.part-cell { min-width: 88px; }
.part-text { color: #303634; font-weight: 500; }
.part-detail {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 4px;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s,
    max-height 0.3s,
    margin-top 0.3s;
}

.part-detail.show {
    opacity: 1;
    max-height:
    30px;
    margin-top: 4px;
}

/* 關係 tag — FHIR ConceptMap equivalence */
.rel-tag {
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    white-space: nowrap;
}

.rel-equivalent { background:#e6f9f0; color:#1a8f5a; border:1px solid #a8e6c8; }
.rel-equal      { background:#EBF4F0; color:#2D6850; border:1px solid #B1D3C5; }
.rel-wider      { background:#fff8e1; color:#b07d00; border:1px solid #ffe082; }
.rel-narrower   { background:#E8F3EE; color:#25553E; border:1px solid #ACD0BF; }
.rel-relatedto  { background:#fdecea; color:#c0392b; border:1px solid #f5b7b1; }
.rel-inexact    { background:#fff3e0; color:#e65100; border:1px solid #ffcc80; }
.rel-unmatched  { background:#F0F0F0; color:#989C96;    border:1px solid #DDDEDC; }

.score-text { font-size: 14px; font-weight: 700; }
.score-high   { color: #1a8f5a; }
.score-medium { color: #b07d00; }
.score-low    { color: #c0392b; }

/* 對應欄 radio */
.radio-circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #CCCECA;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    margin: auto;
}
.radio-circle:hover { border-color: #3D8A6B; }

.radio-circle.selected {
    border-color: #3D8A6B;
    background: #3D8A6B;
}

.radio-circle.selected::after {
    content: '';
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
}

/* 推薦序 badge */
.rank-num {
    font-weight: 700;
    font-size: 14px;
    color: #354740;
}

/* 對應原因 */
.reason-text {
    font-size: 14px;
    color: #555852;
    text-align: left;
    line-height: 1.5;
    white-space: normal;
    word-break: break-word;
}

/* stagger animation for part-detail */
.rec-table tbody tr:nth-child(1)  .part-detail.show { transition-delay: 0.00s; }
.rec-table tbody tr:nth-child(2)  .part-detail.show { transition-delay: 0.04s; }
.rec-table tbody tr:nth-child(3)  .part-detail.show { transition-delay: 0.08s; }
.rec-table tbody tr:nth-child(4)  .part-detail.show { transition-delay: 0.12s; }
.rec-table tbody tr:nth-child(5)  .part-detail.show { transition-delay: 0.16s; }
.rec-table tbody tr:nth-child(6)  .part-detail.show { transition-delay: 0.20s; }
.rec-table tbody tr:nth-child(7)  .part-detail.show { transition-delay: 0.24s; }
.rec-table tbody tr:nth-child(8)  .part-detail.show { transition-delay: 0.28s; }
.rec-table tbody tr:nth-child(9)  .part-detail.show { transition-delay: 0.32s; }
.rec-table tbody tr:nth-child(10) .part-detail.show { transition-delay: 0.36s; }


/* -個人與機構管理 主要區塊分隔樣式- */
/* 用戶資訊區域 */
.user-info {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.user-info i {
    font-size: 1.5rem;
    color: #87AF9F;
    width: 30px;
    text-align: center;
}

.user-name {
    font-weight: 600;
    color: #354740;
    font-size: 1.1rem;
    margin-bottom: 0.2rem;
    text-align: left;
}

.user-position {
    font-size: 1rem;
    color: #747A6F;
}
.main-section {
    background: #fff;
    border-radius: 15px;
    border: 2px solid #ECEDEB;
    overflow: hidden;
    margin-bottom: 1rem;
}

.section-header {
    background: linear-gradient(135deg, #f8f4a4 0%, #b5b686 100%);
    color: white;
    padding: 12px 20px;
    border-bottom: none;
}

.section-header.darkblue-header{
    background: #1B372C;
}


.section-header.profile-header {
    background: #386F59;
}

.section-header.info-header {
    background: linear-gradient(135deg, #a7d3b2 0%, #4A8872 100%);
}

.section-header.member-header {
    background: linear-gradient(135deg, #FFE5B4 0%, #ebcd75 100%);
}

.section-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.493);
}

.section-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 3px;
    color: #fff;
}

.section-subtitle {
    margin: 7px 0 0 0;
    font-size: 1rem;
    opacity: 0.95;
    font-weight: 500;
    color: #ffffff;
}

.section-content {
    padding: 15px 20px;
    display: grid;
    gap: 2px 2px;
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.profile-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.profile-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #EEEEEE;
}
.info-row:last-child {
    border-bottom: none;
}
.info-label {
    font-weight: 600;
    color: #303634;
    min-width: 120px;
}
.info-value {
    color: #656963;
    flex: 1;
    text-align: right;
}
/* 邀請成員 Modal 專用樣式 */
.invite-form-group {
    margin-bottom: 10px;
}

.invite-label {
    font-weight: 600;
    color: #303634;
    margin-bottom: 0.5rem;
    display: block;
}

.invite-input {
    border: 2px solid #ECEDEB;
    border-radius: 8px;
    padding: 0.3rem 0.8rem;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.invite-input:focus {
    border-color: #87AF9F;
    box-shadow: 0 0 0 0.2rem rgba(135, 175, 159, 0.25);
    outline: none;
}

.invite-notice {
    background: linear-gradient(135deg, #E7F2EE 0%, #F0F7F5 100%);
    border: 1px solid #CCE4DA;
    border-radius: 12px;
    padding: 1.25rem;
}

/* Modal 尺寸調整 */
.modal-lg {
    max-width: 650px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #386F59;
    color: white;
    border-radius: 16px 16px 0 0;
    padding: 20px 25px;
    min-height: 60px;
}

.modal-header h2,
.modal-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.4;
    color: white;
}

.modal-header h2 i,
.modal-title i {
    font-size: 1.4rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.modal-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.3s ease;
    margin: 0;
}

.modal-close i {
    font-size: 1rem;
    line-height: 0;
    display: block;
    margin: 0;
    padding: 0;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 10px;
}
.stat-label {
    font-size: 1rem;
    color: #656963;
}

/* 統計數據區塊 */
.stats-section {
    background: #F9F9F9;
    padding: 60px 0;
    margin: 50px 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    text-align: center;
}

.stat-item {
    background: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

.stat-number {
    color: #386F59;
}   

/* 已啟用 - 改成更鮮豔的綠色 */
.status-badge {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    background-color: #c9ecd5;
    color: #1C362D;
}

/* 待審核 - 改成更鮮豔的橘色 */
.status-pending {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    background-color: #f2d1d1;
    color: #5e0c0c;
}

/* 已停用 - 改成灰色 */
.status-inactive {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    background-color: #E8E8E8;
    color: #47504D;
}

/* 待補件 - 改成黃色 */
.status-badge-file {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    background-color: #fae1bc;
    color: #503b1d;
}

/* v82.68：準備中（PENDING / status_code = 0），淺藍灰底色 */
.status-preparing {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    background-color: #E2E7DE;
    color: #3B4E47;
}

.status-grid {
    font-family: Roboto, "Noto Sans TC", sans-serif;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.status-box {
    background: #fff;
    border: 1px solid #E0E1DF;
    border-radius:15px;
    padding: 30px 18px;
    flex: 1 1 150px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.status-box .info-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: #303634;
    margin-bottom: 10px;
}

.status-box .info-value {      
    font-size: 0.95rem;
    color: #555852;
}

/* 排序圖標樣式（全站統一：▲ 升冪 / ▼ 降冪或未使用） */
.sortable-header,
th.hir-sortable,
th.nhi-sortable,
th.nlm-th-sort {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 20px;
}

.sortable-header:hover,
th.hir-sortable:hover,
th.nhi-sortable:hover,
th.nlm-th-sort:hover {
    background: #012964e5;
}

.sort-icon,
.hir-sort-ind,
.nhi-sort-ind,
.nlm-sort-ind {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    line-height: 1;
    opacity: 0.35;
    color: inherit;
}

.sortable-header.asc .sort-icon,
.sortable-header.desc .sort-icon,
th.hir-sortable.asc .sort-icon,
th.hir-sortable.desc .sort-icon,
th.nhi-sortable.asc .sort-icon,
th.nhi-sortable.desc .sort-icon,
th.nlm-th-sort[aria-sort] .sort-icon {
    opacity: 1;
    font-weight: 700;
}

/* 時間軸樣式 */
.timeline-section {
    padding: 20px;
}

.timeline-header {
    text-align: center;
    margin-bottom: 20px;
}

.timeline-header h2 {
    font-size: 2rem;
    color: #303634;
    margin-bottom: 5px;
}

.timeline-header p {
    color: #656963;
    font-size: 1.1rem;
}

.activity-list {
    background: white;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.activity-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #F0F0F0;
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient( #386F59 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    margin-right: 20px;
    flex-shrink: 0;
}

.activity-content h4 {
    color: #303634;
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.activity-content p {
    color: #656963;
    margin: 0;
}

.action-footer {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: white;
    border-top: 1px solid #E6E7E5;
    padding: 12px 32px;
    z-index: 200;
}
.action-footer .action-buttons {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto;
}
.action-footer .action-buttons .btn {
    flex: 1 1 0;
    min-height: 46px;
    white-space: nowrap;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
/* -成員列表網格布局- */
#membersList {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}
/* -成員管理樣式- */
.member-card {
    border: 1px solid #E2E4E0;
    border-radius: 16px;
    margin-bottom: 0;
    transition: all 0.3s ease;
    background: #fff;
    height: 320px;
    display: flex;
    flex-direction: column; 
}

.member-card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    transform: translateY(-4px);
}

.member-header {
    background: linear-gradient(135deg, #F9F9F9 0%, #ECEDEB 100%);
    padding: 0.9rem;
    border-bottom: 1px solid #E2E4E0;
    border-radius: 12px 12px 0 0;
    flex-shrink: 0;
}

.member-body {
    padding: 0.9rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.member-body p {
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
    line-height: 1.3;
}

.member-body p strong {
    font-size: 0.8rem;
    display: inline-block;
    min-width: 70px;
}

.role-badge {
    font-size: 0.9rem; /* 調小字體 */
    padding: 3px 8px; /* 調小 */
    border-radius: 10px;
    background-color: #F0F7F4;
    color: #1C362B;
}

.search-box {
    background: linear-gradient(135deg, #F9F9F9 0%, #ECEDEB 100%);
    padding: 0.7rem 1rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    border: 1px solid #E2E4E0;
}

.action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
    margin-top: auto;
}

/* 三個點點 功能操作 */
.action-dropdown {
    position: relative;
    display: inline-block;
}

.action-dropdown-btn {
    background: #F0F7F5;
    border: 1px solid #D4E6DE;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    color: #3D8A6B;
    transition: all 0.2s ease;
    letter-spacing: 1px;
}

.action-dropdown-btn:hover {
    background: #3D8A6B;
    color: white;
}

.action-dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 36px;
    background: white;
    border: 1px solid #E2E4E0;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 1000;
    min-width: 130px;
    overflow: hidden;
}

.action-dropdown-menu.show {
    display: block;
}

.action-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #4F544C;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    transition: background 0.2s;
    white-space: nowrap;
}

.action-dropdown-item:hover {
    background: #F0F7F5;
    color: #3D8A6B;
}

.action-dropdown-item.danger:hover {
    background: #fff0f0;
    color: #dc3545;
}

/* -成員詳細資訊區域- */
.member-details {
    margin-bottom: 0.8rem;
    flex: 1;
}

.member-details p {
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
    line-height: 1.3;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.member-details p strong {
    font-size: 0.8rem;
    min-width: 65px;
    flex-shrink: 0;
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
    border-radius: 6px;
    white-space: nowrap;
    line-height: 1.2;
}
/* 機構主標題 */
.org-header {
    background: linear-gradient(135deg, #F5F9F8 0%, #E7F2EE 100%);
    padding: 12px 16px;
    border-bottom: 1px solid #ECEDEB;
    cursor: pointer;
    transition: all 0.2s ease;
}

.org-header:hover {
    background: linear-gradient(135deg, #E7F2EE 0%, #CCE4DA 100%);
}

.org-header-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.org-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #87AF9F 0%, #347058 100%);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.org-main-info {
    flex: 1;
}

.org-title {
    font-size: 1rem;
    font-weight: 600;
    color: #354740;
    margin: 0;
}

.org-count {
    font-size: 0.85rem;
    color: #747A6F;
    margin-top: 2px;
}

.org-toggle {
    color: #87AF9F;
    font-size: 0.9rem;
    transition: transform 0.2s ease;
}

.org-toggle.expanded {
    transform: rotate(180deg);
}

/* 單位列表 */
.dept-list {
    display: none;
    padding: 0;
    background: #ffffff;
}

.dept-list.show {
    display: block;
}

.dept-item {
    padding: 8px 16px 8px 60px;
    border-bottom: 1px solid #F9F9F9;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.dept-item:last-child {
    border-bottom: none;
}

.dept-item:hover {
    background-color: #F5F9F8;
}

.dept-item.selected {
    background-color: #E7F2EE;
    border-left: 4px solid #347058;
    padding-left: 56px;
}

.dept-item.selected::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #347058;
    border-radius: 50%;
}

.dept-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dept-name {
    font-size: 0.9rem;
    color: #354740;
    font-weight: 500;
}

.dept-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.current-badge {
    background: #28a745;
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
}

.dept-radio {
    width: 16px;
    height: 16px;
    accent-color: #347058;
}

.pending-badge {
    background: #ffc107;
    color: #303634;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
}

/* 機構群組樣式 */
.org-group {
    background: #ffffff;
    border: 1px solid #ECEDEB;
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.org-group:hover {
    border-color: #87AF9F;
    box-shadow: 0 2px 8px rgba(135, 175, 159, 0.1);
}
/* -統計卡片- */
.stats-card {
    background: #F4F5F3;
    border: 1px solid #ECEDEB;
    border-radius: 15px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
}

.stats-card:hover {
    transform: translateY(-3px);
}

.stats-number {
    font-size: 2rem;
    font-weight: 700;
    color: #87AF9F;
    margin-bottom: 0.5rem;
}

.stats-label {
    color: #656963;
    font-weight: 500;
}

.custom-toast {
    min-width: 350px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    border-left: 4px solid;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideInRight 0.3s ease-out;
    position: relative;
    overflow: hidden;
  }

  .custom-toast::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
    animation: shimmer 2s infinite;
  }

  .custom-toast.success {
    border-left-color: #28a745;
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
  }

  .custom-toast.warning {
    border-left-color: #ffc107;
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
  }

  .custom-toast.info {
    border-left-color: #2A614C;
    background: linear-gradient(135deg, #D5E7E0 0%, #C5DDD4 100%);
  }

  .custom-toast.error {
    border-left-color: #dc3545;
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
  }

.button-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 1rem;
    transform: translateX(-20px);
}

/* -成員頭部布局- */
.member-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.member-title-section {
    flex: 1;
    min-width: 0;
}

.member-title {
    margin: 0 0 0.2rem 0;
    font-size: 1.05rem; /* 稍微調小 */
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-subtitle {
    font-size: 0.8rem;
    color: #747A6F;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-badges {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-end;
    flex-shrink: 0;
}

/* -表格樣式- */
.member-table {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin-bottom: 0;
}

    .member-table thead th {
        background: linear-gradient(135deg, #3D8A6B 0%, #386F59 100%);
        color: white;
        font-weight: 600;
        font-size: 1rem;
        border: none;
        padding: 0.8rem 0.6rem; /* 減少 padding */
        white-space: nowrap;
        text-align: center;
    }

    .member-table tbody tr {
        border-bottom: 1px solid #F2F3F2;
        transition: all 0.3s ease;
    }

    .member-table tbody tr:hover {
        background-color: #D6E3DF;
        transform: scale(1.01);
    }

    .member-table tbody tr:last-child {
        border-bottom: none;
    }

    .member-table td {
        padding: 0.75rem 0.6rem; /* 減少垂直 padding */
        vertical-align: middle;
        border: none;
        font-size: 1rem;
        text-align: center;
    }

/* -表格按鈕區域- */
.action-buttons-table {
    display: flex;
    gap: 0.1rem; /* 減少間距 */
    flex-wrap: nowrap; /* 不換行 */
    justify-content: flex-start;
}

.btn-xs {
    padding: 0; /* 移除所有 padding */
    font-size: 0.65rem;
    border-radius: 4px;
    border: none;
    min-width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    line-height: 1; /* 確保行高為 1 */
}

.btn-xs i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0; /* 移除任何邊距 */
}

.text-link {
  color: #87AF9F;
  text-decoration: none;
  font-weight: 600;
}

.text--link:hover {
  color: #347058;
  text-decoration: underline;
}

/* -載入狀態樣式- */
.spinner-border {
    width: 1.5rem;
    height: 1.5rem;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
}

/* -頁碼區塊樣式- */
.pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.pagination-wrapper {
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: #c5d1dfdc;
    border: 1px solid #ECEDEB;
    border-radius: 14px;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}

.page-size-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #4F544C;
    white-space: nowrap;
}

.page-size-selector .custom-select {
    width: 70px;
    height: 32px;
    border: 1px solid #D4D6D2;
    border-radius: 6px;
    font-size: 0.9rem;
}

/* 分頁整體（全站統一：第一頁 / 上一頁 / 頁碼 / 下一頁 / 最後頁） */
.pagination-controls .pagination,
.pagination-container .pagination,
ul.pagination {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.pagination .page-item {
    margin: 0;
}

/* 頁碼按鈕：白底描邊 pill，支援中文標籤（勿固定 32×32） */
.pagination .page-link,
.pagination .page-item > span.page-link {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 44px;
    height: auto;
    min-height: 36px;
    padding: 6px 14px;
    margin: 0;
    border: 1px solid #E2E4E0;
    border-radius: 6px;
    background-color: #fff;
    color: #386F59;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pagination .page-item:not(.disabled):not(.active) .page-link:hover {
    background-color: #EAEFE8;
    color: #285341;
    border-color: #E2E4E0;
}

.pagination .page-item.active .page-link {
    background-color: #386F59;
    color: #fff;
    border-color: #386F59;
    font-weight: 600;
}

.pagination .page-item.active .page-link:hover {
    background-color: #386F59;
    color: #fff;
    border-color: #386F59;
}

.pagination .page-item.disabled .page-link,
.pagination .page-item.disabled > span.page-link {
    color: #B4B9B1;
    background-color: #F9F9F9;
    border-color: #ECEDEB;
    cursor: not-allowed;
    pointer-events: none;
}

.pagination-info {
    font-size: 0.9rem;
    color: #4F544C;
    white-space: nowrap;
}

/* 浮動分頁控制樣式 */
.sticky-pagination {
  position: sticky;
  bottom: 10px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 5;
  border-radius: 15px;
  transition: all 0.3s ease;
  width: fit-content;
}
/* 控制面板樣式 */        
.control-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.control-title {
  font-weight: 600;
  color: #4F544C;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
}

.control-actions {
  display: flex;
  align-items: center;
  gap: 25px;
  flex-wrap: wrap;
}

.control-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.control-label {
  font-weight: 600;
  color: #4F544C;
  white-space: nowrap;
}

.file-info {
  font-size: 0.9rem;
  color: #747A6F;
  line-height: 1.4;
}

.form-select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #D4D6D2;
  border-radius: 4px;
  background-color: white;
  font-size: 14px;
}

.form-select:focus {
  border-color: #A2CABA;
  outline: 0;
}

.form-label {
  font-weight: 500;
  margin-bottom: 8px;
  display: block;
}

.login-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  text-align:center;
}

/* -流程圖樣式- */
.process-flow {
  background: linear-gradient(180deg, #F9F9F9 0%, #EAF3EF 100%);
  border-radius: 16px;
  padding: 25px;
  margin-bottom: 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.process-steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.process-step {
  flex: 1;
  min-width: 150px;
  text-align: center;
  position: relative;
}

.step-number {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #A7ACA4;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
  margin: 0 auto 10px;
  transition: all 0.3s ease;
}

/* 已完成的步驟 */
.process-step.completed .step-number {
    background: #28a745;
    color: white;
    box-shadow: 0 3px 10px rgba(40, 167, 69, 0.3);
}

.process-step.completed .step-arrow {
    color: #55d37b;
}

/* 當前進行中的步驟 */
.process-step.active .step-number {
    background: #3D8A6B;
    color: white;
    box-shadow: 0 0 0 4px rgba(52, 119, 93, 0.2);
    animation: pulse-active 2s infinite;
}

.process-step.active .step-title {
    color: #1B362C;
    font-weight: 700;
}

.process-steps{
    display:flex;
    align-items:flex-start; /* 讓所有東西從上緣對齊 */
    justify-content:space-between;
    gap: 0;
}

/* 箭頭連接器：獨立一格，永遠在兩個 step 中間 */
.process-connector{
    width: 90px;           /* 箭頭區塊寬度 */
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding-top: 12px;     /* 讓箭頭高度靠近圓圈中線，可微調 */
}

.process-connector .arrow-icon{
    font-size: 22px;
    line-height: 1;
    color:#767B73;
}

.process-connector .arrow-text{
    margin-top: 4px;
    font-size: 14px;
    color:#878C84;
    white-space: nowrap;
    text-align:center;
}

/* 脈動動畫 */
@keyframes pulse-active {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(52, 119, 93, 0.2);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(52, 119, 93, 0.3);
    }
}

.step-title {
  font-weight: 600;
  color: #4F544C;
  margin-bottom: 5px;
  font-size: 15px;
}

.step-description {
  font-size: 13.5px;
  color: #747A6F;
}

.step-arrow {
  position: absolute;
  top: 25px;
  right: -15px;
  color: #747A6F;
  font-size: 20px;
  z-index: 1;
}

.process-step:last-child .step-arrow {
  display: none;
}

.required-field {
  color: #dc3545;
  font-weight: bold;
}

.selection-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  padding: 5px 8px 2px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: bold;
  min-height: 20px;
  vertical-align: middle;
}

.status-complete {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.status-incomplete {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.upload-section {
    background: linear-gradient(180deg, #F9F9F9 0%, #EAF3EF 100%);
    border: 1px solid #E2E4E0;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
}

.upload-ready {
    background: linear-gradient(180deg, #F9F9F9 0%, #EAF3EF 100%);
}

.file-upload-container {
    position: relative;
    margin-bottom: 5px;
}

.file-upload-display {
    background-color: white;
    border: 2px dashed #E2E4E0;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.file-upload-display:hover {
    border-color: #34775D;
    background-color: #F9F9F9;
}

.file-upload-display {
    background-color: white;
    border: 2px dashed #E2E4E0;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}

.file-upload-display:hover {
    border-color: #34775D;
    background-color: #F9F9F9;
}

.file-upload-display.has-file {
    border-color: #57b86f;
    background-color: #57b86f21;
}

/* 檔案名稱樣式 */
.file-name {
    font-weight: 600;
    color: #354740;
    font-size: 1rem;
    margin-bottom: 5px;
}

.file-link {
    color: #3D8A6B;
    text-decoration: none;
    font-size: 0.85rem;
}

.file-link:hover {
    text-decoration: underline;
}

.help-text {
    font-size: 14px;
    color: #747A6F;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.help-text i {
    font-size: 14px;
    color: #3D8A6B !important;
}

.form-section-title {
    font-size: 18px;
    font-weight: 600;
    color: #354740;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #386F59;
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-section-title i {
    color: #386F59;
    font-size: 20px;
}

.field-error {
    border-color: #dc3545 !important;
    background-color: #fff5f5;
}

.error-message.show {
    display: block;
}

.alert-custom {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.alert-custom strong {
    color: #856404;
}

.alert-custom ul {
    margin: 10px 0 0 0;
    padding-left: 20px;
    color: #856404;
}

.optional-badge {
    display: inline-block;
    padding: 2px 8px;
    background: #ECEDEB;
    color: #747A6F;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    margin-left: 5px;
}

/* 控制面板 */
.control-panel {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    margin-bottom: 25px;
}

.filter-section {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 15px;
    align-items: end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-label {
    font-weight: 600;
    color: #4F544C;
    font-size: 0.9rem;
}

.filter-select {
    padding: 10px 15px;
    border: 2px solid #ECEDEB;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.filter-select:focus {
    outline: none;
    border-color: #3D8A6B;
    box-shadow: 0 0 0 3px rgba(61, 138, 107, 0.1);
}

.button-group-horizontal {
    display: flex;
    justify-content: center;
    gap: 15px;
    align-items: center;
}

.button-group-horizontal .btn {
    padding: 12px 24px;
    font-size: 14px;
}

/* 登入容器 */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 500px;
    padding: 0px 20px;
}

/* 登入主區塊 */
.login-main-section {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border: 2px solid #ECEDEB;
    overflow: hidden;
    width: 100%;
    max-width: 600px;
}

/* 表單內容區塊 */
.login-section-content {
    padding: 30px 25px;
}

/* 表單群組 */
.form-group {
    margin-bottom: 20px;
}

/* 登入／忘記密碼－算術驗證碼（外層不加框線，與表單其他欄位一致） */
.math-captcha-wrap {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
/* inline-flex：列寬僅包住「圖片＋重整」，不拉滿表單寬度，按鈕自然緊貼圖片右側 */
.math-captcha-row {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    margin-bottom: 10px;
    max-width: 100%;
    min-width: 0;
    vertical-align: top;
}
.math-captcha-img {
    flex: 0 0 auto;
    height: 48px;
    width: auto;
    max-width: min(100%, 260px);
    border: 1px solid #E2E4E0;
    border-radius: 4px;
    object-fit: contain;
    background: #fff;
    display: block;
}
.math-captcha-refresh-slot {
    flex: 0 0 auto;
    width: max-content;
    max-width: 100%;
    min-width: 0;
}
.math-captcha-refresh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: #386F59;
    cursor: pointer;
    padding: 6px 0;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.3;
    white-space: nowrap;
    width: max-content;
    max-width: 100%;
    box-sizing: border-box;
}
.math-captcha-refresh:hover {
    color: #2C604B;
    text-decoration: underline;
}
.math-captcha-refresh svg {
    flex-shrink: 0;
}
/* 滑鼠點擊時隱藏系統粗框；鍵盤 Tab 仍顯示自訂 focus-visible */
.math-captcha-refresh:focus:not(:focus-visible) {
    outline: none;
}
.math-captcha-refresh:focus-visible {
    outline: 2px solid #386F59;
    outline-offset: 2px;
    border-radius: 4px;
}

/* 忘記密碼頁：驗證碼圖略小 */
.math-captcha-wrap--forgot .math-captcha-img {
    height: 40px;
    max-width: min(100%, 200px);
}

/* 登入頁 Cloudflare Turnstile */
.login-turnstile-wrap {
    margin-top: 4px;
}
.login-turnstile-hint {
    margin: 0 0 8px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #303634;
}
.login-turnstile-hint--pending {
    background: #fff8e6;
    border-left: 4px solid #e6a817;
}
.login-turnstile-hint--ok {
    background: #e8f7ee;
    border-left: 4px solid #28a745;
    color: #1e5631;
}

/* 註冊區塊 */
.signup-text {
    color: #656963;
    font-size: 0.9rem;
    margin: 0;
    text-align: center;
}

/* 訊息提示框樣式 */
.message-box {
    background: linear-gradient(135deg, #fae4ae 0%, #fde198 100%);
    border-left: 5px solid #ccb57b;
    border-radius: 16px;
    padding: 10px 25px;
    margin: -15px 0px 20px 0px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.message-box p {
    margin: 0;
    line-height: 1.8;
    color: #1C362B;
    font-size: 0.95rem;
}

.message-box2 {
    background: linear-gradient(135deg, #BAD2C9 0%, #93B8A9 100%);
    border-left: 5px solid #386F59;
    border-radius: 16px;
    padding: 10px 25px;
    margin: -15px 0px 20px 0px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-top: 0.75rem;
}

.message-box2 p {
    margin: 0;
    line-height: 1.8;
    color: #1C362B;
    font-size: 1rem;
}

.message-box3 {
    background: linear-gradient(135deg, #bfe7ba 0%, #89d3a5 100%);
    border-left: 5px solid #498669;
    border-radius: 16px;
    padding: 10px 25px;
    margin: -15px 0px 20px 0px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-top: 0.75rem;
}

.message-box3 p {
    margin: 0;
    line-height: 1.8;
    color: #1C362B;
    font-size: 1rem;
}

.search-input {
    width: 100%;
    min-width: 270px;    
    padding: 12px 45px 12px 15px !important;
    height: 40px !important;
    line-height: normal !important;
    border: 2px solid #ECEDEB;
    border-radius: 25px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: #fff;
    box-sizing: border-box;
  }
  .search-input:focus {
    outline: none;
    border-color: #3D8A6B;
    box-shadow: 0 0 0 3px rgba(52, 119, 93,0.1);
  }
  
.search-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #747A6F;
  font-size: 16px;
}

.search-container {
  position: relative;
  flex: 1;
  min-width: 270px;
  max-width: none !important;
}

.form1 {
    position: relative;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: all 1s;
    width: 50px;
    height: 50px;
    background: white;
    box-sizing: border-box;
    border-radius: 25px;
    border: 4px solid white;
    padding: 5px;
}

  .form1:hover {
      width: 300px;
      cursor: pointer;
  }
  .form1:hover input {
    display: block;
  }
  .form1:hover .fi {
    background: #3D8A6B;
    color: white;
  }


.input1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 42.5px;
    line-height: 30px;
    outline: 0;
    border: 0;
    display: none;
    font-size: 1rem;
    border-radius: 20px;  
    padding: 0 20px;
}

.fi1 {
  box-sizing: border-box;
  padding: 10px;
  width: 42.5px;
  height: 42.5px;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 50%;
  color: #3D8A6B;
  text-align: center;
  transition: all 1s;
}

/* 大標題：唯一例外，不限 16px */
.error-title {
    font-size: 1.9rem;
    font-weight: 700;
    color: #1B372C;
    margin-bottom: 12px;
    line-height: 1.3;
}

.error-subtitle {
    font-size: 16px;
    color: #747A6F;
    margin-bottom: 20px;
    line-height: 1.7;
}

.error-divider {
    border: none;
    border-top: 1.5px solid #ECEDEB;
    margin: 0 auto 20px;
    width: 60%;
}

.reason-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 36px;
    text-align: left;
}
.reason-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #F9F9F9;
    border-radius: 10px;
    padding: 11px 16px;
    color: #4F544C;
}

.error-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.error-code-label {
    margin-top: 36px;
    font-size: 16px;
    color: #B4B9B1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.error-code-label span {
    background: #F3F3F3;
    border-radius: 6px;
    padding: 2px 10px;
    font-family: var(--tw-font-mono);
    font-size: 16px;
    color: #8D9389;
}


/* ── 建立合併按鈕區 ── */
.create-merge-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border);
}

.create-merge-bar .note {
    color: #747A6F;
}

/* 合併 Modal 內部樣式 */
.merge-step-guide {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 14px 22px;
    background: #F0F7F5;
    border-bottom: 1px solid #E4F0EB;
    flex-wrap: wrap;
}
.merge-step-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.85rem;
    color: #747A6F;
    font-weight: 500;
}
.merge-step-num {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #D4D6D2;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.merge-step-arrow { margin: 0 10px; color: #D4D6D2; }

/* 合併選擇表格 */
.merge-file-table {
    width: 100%;
    border-collapse: collapse;
}
.merge-file-table thead th {
    background: #F0F7F5;
    color: #1B372C;
    padding: 10px 12px;
    border-bottom: 2px solid #E2E4E0;
    text-align: center;   /* ← 修正1：置中 */
    white-space: nowrap;
}
.merge-file-table thead th:nth-child(2) { text-align: left; } /* 檔案名稱靠左 */
.merge-file-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #F2F3F2;
    vertical-align: middle;
    text-align: center;
}
.merge-file-table tbody td:nth-child(2) { text-align: left; }
.merge-file-table tbody tr { cursor: pointer; transition: background 0.15s; }
.merge-file-table tbody tr:hover { background: #F0F7F5; }
.merge-file-table tbody tr.merge-selected { background: #EBF4F0; }
.merge-file-table tbody tr.merge-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: #F9F9F9;
}

/* 自訂 checkbox */
.merge-check {
    width: 18px; height: 18px;
    border-radius: 4px;
    border: 2px solid #D4D6D2;
    background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    margin: 0 auto;
}
.merge-check.checked {
    background: #3D8A6B;
    border-color: #3D8A6B;
}
.merge-check.checked::after {
    content: '✓';
    color: #fff;
}

/* 已選 chips */
.merge-chips-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 22px;
    background: #F9FAF9;
    border-top: 1px solid #E4F0EB;
    flex-wrap: wrap;
    min-height: 48px;
}
.merge-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #3D8A6B;
    color: #fff;
    padding: 4px 10px 4px 12px;
    border-radius: 16px;
    animation: chipPop 0.2s ease;
}
@keyframes chipPop {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}
.merge-chip-remove {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.merge-chip-remove:hover { background: rgba(255,255,255,0.55); }
.merge-chip-placeholder {
    color: #BBBDB9;
    align-self: center;
}

/* 合併設定欄 */
.merge-config-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px;
    border-top: 1px solid #E2E4E0;
    background: #FEFCFB;
    flex-wrap: wrap;
}
.merge-config-input {
    flex: 1;
    min-width: 200px;
    max-width: 360px;
    padding: 8px 14px;
    border: 1.5px solid #E2E4E0;
    border-radius: 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.merge-config-input:focus {
    outline: none;
    border-color: #3D8A6B;
    box-shadow: 0 0 0 3px rgba(61, 138, 107,0.12);
}

/* 合併 Modal footer */
.merge-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    border-top: 2px solid #E2E4E0;
    background: #F9FAF9;
    gap: 10px;
    flex-wrap: wrap;
}
.merge-modal-footer .alert-hint {
    color: #1B372C;
    background: #E7F2EE;
    border-left: 3px solid #3D8A6B;
    border-radius: 0 6px 6px 0;
    padding: 7px 12px;
}

/* -表格- */
.enhanced-table {
    margin: 0;
    border: none;
    font-size: 16px;
    width: 100%;
    border: 0.0625rem solid #E0E1DF;
    border-radius: 0.5rem;
}

/* 表頭 - 參考智慧醫療學校的深藍色設計 */
.enhanced-table thead th {
    background-color: #1B372C;
    color: #fff;
    font-weight: 600;
    padding: 12px;
    border: none;
    font-size: 16px;
    white-space: nowrap;
    vertical-align: middle;
}

/* 每一列 - 參考智慧醫療學校的邊框分隔線設計 */
.enhanced-table tbody td {
    padding: 12px;
    border: none;
    border-bottom: 0.0625rem solid #E0E1DF;
    vertical-align: middle;
    font-size: 16px;
    white-space: nowrap;
}

/* hover 效果 */
.enhanced-table tbody tr:hover {
    background-color: #F0F7F5;
    transition: background-color 0.2s ease;
}

/* 最後一筆不顯示下邊框 */
.enhanced-table tbody tr:last-child td {
    border-bottom: none;
}

.radio-cell {
    text-align: center;
    width: 60px;
    padding: 15px 10px;
}

.radio-choice {
    width: 18px;
    height: 18px;
    cursor: pointer;
    transform: scale(1.2);
}

.choice-progress {
  position: relative !important;
  margin: 22px 0 !important;
}
.choice-progress .progress {        
  height: 30px;
  background: #E7E7E7 !important;  /* 淺藍灰底色 */
  border-radius: 15px;
  overflow: hidden;
  border: 2px solid #ffffff !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1) !important;
}

.choice-progress .progress-bar.bg-warning {
  background: linear-gradient(135deg, #5589d3d0 0%, #3e6abbc2 100%) !important;
}

.choice-progress .progress-bar.bg-success {
  background: linear-gradient(135deg, #8ed355 0%, #3ebb53 100%) !important;
}
.choice-progress .progress-bar {
  font-weight: 700;
  line-height: 28px;
}
.choice-progress .progress-label {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  color: #1C362B !important;
  pointer-events: none !important;
}

.tutorial-content {
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin: 5px 0;
}

.tutorial-header {
    border-bottom: 2px solid #87AF9F;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.tutorial-title {
    font-size: 28px;
    font-weight: 600;
    color: #303634;
    margin-bottom: 15px;
}

.tutorial-meta {
    display: flex;
    gap: 20px;
    color: #656963;
    font-size: 15px;
}

.tutorial-meta i {
    margin-right: 5px;
    color: #87AF9F;
}

.tutorial-body {
    color: #404845;
    font-size: 16px;
}

/* 版本資訊 Icon 樣式 */
.version-info-icon {
    display: flex;
    align-items: center;
    justify-content:center;
    width: 40px;
    height: 38px;
    background: linear-gradient(135deg, #3D8A6B 0%, #386F59 100%);
    border-radius: 50%;
    cursor: help;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.version-info-icon i {
    color: white;
    font-size: 16px;
}

.version-info-icon:hover {
    transform: scale(1.1);
}

/* 問題類別卡片 */
.category-cards {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.category-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 2px solid #E2E4E0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s ease;
    background: #fff;
    font-weight: 500;
    color: #4F544C;
    font-size: 16px;
    white-space: nowrap;
}

.category-card:hover {
    border-color: #3D8A6B;
    color: #386F59;
    background: #F0F7F5;
}

.category-card.selected {
    border-color: #386F59;
    background: linear-gradient(135deg, #EDF5F2 0%, #E0EFE9 100%);
    color: #386F59;
    box-shadow: 0 2px 8px rgba(56, 111, 89,0.15);
}

/* 問題區塊卡片 */
.question-card {
    background: #fff;
    border-radius: 14px;
    padding: 28px 32px;
    margin-bottom: 16px;
    border: 1px solid #E2E4E0;
}

.question-card .section-label {
    font-weight: 600;
    color: #354740;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.question-card .section-label i {
    color: #3D8A6B;
}

.question-card .required-mark {
    color: #e74c3c;
    margin-left: 3px;
}

/* 文字輸入框 */
.q-textarea {
    width: 100%;
    min-height: 140px;
    padding: 14px 16px;
    border: 2px solid #E2E4E0;
    border-radius: 10px;
    line-height: 1.7;
    resize: vertical;
    transition: border-color 0.25s;
    color: #354740;
    font-family: inherit;
}

.q-textarea:focus {
    outline: none;
    border-color: #3D8A6B;
    box-shadow: 0 0 0 3px rgba(61, 138, 107,0.12);
}

.q-textarea::placeholder {
    color: #B4B9B1;
}

/* 字數計數 */
.char-count {
    text-align: right;
    color: #B4B9B1;
    margin-top: 6px;
}

/* 附件上傳區 */
.upload-zone {
    border: 2px dashed #CEE4DB;
    border-radius: 12px;
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #FEFBF9;
    position: relative;
}

.upload-zone:hover,
.upload-zone.drag-over {
    border-color: #3D8A6B;
    background: #EEF6F2;
}

.upload-zone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.upload-zone .upload-icon {
    font-size: 32px;
    color: #3D8A6B;
    margin-bottom: 8px;
    display: block;
}

.upload-zone .upload-text {
    color: #747A6F;
    margin-bottom: 4px;
}

.upload-zone .upload-hint {
    font-size: 14px;
    color: #B4B9B1;
}

/* 已上傳檔案列表 */
.uploaded-files-list {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.uploaded-file-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    background: #F0F7F5;
    border-radius: 8px;
    font-size: 14px;
    color: #386F59;
    animation: slideUp 0.2s ease;
}

.uploaded-file-item i {
    font-size: 16px;
    flex-shrink: 0;
}

.uploaded-file-item .file-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uploaded-file-item .remove-file {
    cursor: pointer;
    color: #B4B9B1;
    background: none;
    border: none;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color 0.2s;
}

.uploaded-file-item .remove-file:hover {
    color: #e74c3c;
}

/* 優先順序選項樣式 */
.priority-option {
    display: flex;
    align-items: center;
    padding: 15px;
    border: 2px solid #ECEDEB;
    border-radius: 8px;
    cursor: move;
    transition: all 0.3s ease;
    background: #fff;
    position: relative;
    user-select: none;
}

.priority-option:hover {
    border-color: #93C0AD;
    background: #FEFBF9;
    transform: scale(1.02);
}

.priority-option.dragging {
    opacity: 0.5;
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.priority-option.drag-over {
    border-color: #FFD700;
    background: #fffef0;
    border-style: dashed;
}

/* 拖曳手柄 */
.drag-handle {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-right: 12px;
    cursor: move;
    opacity: 0.4;
    transition: opacity 0.3s;
}

.priority-option:hover .drag-handle {
    opacity: 0.8;
}

.drag-handle span {
    width: 20px;
    height: 3px;
    background: #747A6F;
    border-radius: 2px;
}

/* 順序標籤 */
.priority-number {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #93C0AD 0%, #3B7C61 100%);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    border-radius: 50%;
    margin-right: 12px;
    box-shadow: 0 2px 6px rgba(147, 192, 173, 0.3);
}

.option-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.option-title {
    font-weight: 600;
    color: #1B372C;
}

.priority-badge {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #fff;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 10px;
    margin-left: auto;
}

.option-desc {
    font-size: 14px;
    color: #747A6F;
    line-height: 1.5;
}

/* 提示區塊 */
.drag-hint {
    background: linear-gradient(135deg, #ECF4F1 0%, #F0F7F5 100%);
    border: 1px solid #93C0AD;
    border-radius: 8px;
    padding: 5px 15px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.drag-hint i {
    color: #93C0AD;
    font-size: 16px;
}

.drag-hint p {
    margin: 0;
    font-size: 14px;
    color: #1B372C;
    font-weight: 500;
}
/* twLOINC申請頁相關 */
/* 展開列 */
/* ── expand chips 修正 ── */
.expand-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}
.expand-chip {
    display: inline-flex;
    flex-direction: column;
    background: #EFF6F3;
    border: 1px solid #D5E9E1;
    border-radius: 10px;
    padding: 6px 14px;
    min-width: 110px;
}
.expand-chip .chip-label {
    font-size: 0.72rem;
    color: #747A6F;
    font-weight: 600;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
}
.expand-chip .chip-val {
    font-size: 0.95rem;
    color: #1F3D30;
    font-weight: 600;
}
.expand-chip.approved-chip {
    background: #e6f4ea;
    border-color: #a8d5b0;
}
.expand-chip.approved-chip .chip-label { color: #2e7d32; }
.expand-chip.approved-chip .chip-val   { color: #1b5e20; }

.expand-row {
    display: none;
}

.expand-row.open {
    display: table-row;
}

.expand-row > td {
    padding: 0 !important;
    border-bottom: 3px solid #3D8A6B;
}

.expand-inner {
    padding: 16px 24px 16px 32px;
    background: #F4F9F7;
    border-top: 1px solid #E1EFE9;
    animation: expandFadeIn 0.2s ease;
}

.expand-section-label {
    font-size: 14px;
    color: #747A6F;
    margin-bottom: 8px;
}

.expand-timeline {
    display: flex;
    align-items: flex-start;
}

.etl-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.etl-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 13px;
    left: 50%;
    right: -50%;
    height: 2px;
    background: #E2E4E0;
    z-index: 0;
}

.etl-step.done-line:not(:last-child)::after {
    background: #28a745;
}

.etl-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    z-index: 1;
    position: relative;
    flex-shrink: 0;
}

.etl-dot.done {
    background: #d1e7dd;
    color: #198754;
    border: 2px solid #198754;
}

.etl-dot.current {
    background: #fff3cd;
    color: #856404;
    border: 2px solid #ffc107;
}

.etl-dot.pending {
    background: #ECEDEB;
    color: #747A6F;
    border: 2px solid #E2E4E0;
}

.etl-label {
    font-size: 14px;
    color: #565B53;
    text-align: center;
    margin-top: 5px;
    font-weight: 500;
}

.etl-date {
    font-size: 14px;
    color: #747A6F;
    text-align: center;
    margin-top: 1.5px;
}

tr.row-open > td {
    background: #EDF5F2 !important;
}

.application-link.is-expanded {
    font-weight: 700;
    color: #1B362B;
}

/* ════ 統計卡片（Stat Cards）════ */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #E2E4E0;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: box-shadow 0.2s;
}

.stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.stat-icon.blue {
    background: #EBF4F0;
    color: #386F59;
}

.stat-icon.orange {
    background: #fff3e0;
    color: #f0a500;
}

.stat-icon.green {
    background: #e8f5e9;
    color: #28a745;
}

.stat-icon.red {
    background: #fce4ec;
    color: #e53935;
}

.stat-info {
    flex: 1;
}

.stat-num {
    font-size: 26px;
    font-weight: 700;
    color: #354740;
    line-height: 1;
}

.stat-label {
    font-size: 14px;
    color: #747A6F;
    margin-top: 4px;
}

.stat-change {
    font-size: 14px;
    margin-top: 6px;
}

.stat-change.up {
    color: #28a745;
}


/* ════ 圖表（Chart）════ */
.chart-row {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.chart-card {
    flex: 1;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #E2E4E0;
    overflow: hidden;
}

.mini-bar-chart {
    padding: 0 6px;
}

.bar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.bar-label {
    width: 80px;
    flex-shrink: 0;
    color: #354740;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bar-track {
    flex: 1;
    height: 10px;
    background: #F3F4F3;
    border-radius: 10px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 0.6s ease;
}

.bar-val {
    width: 24px;
    flex-shrink: 0;
    text-align: right;
    color: #747A6F;
    font-size: 14px;
}


/* ════ 區塊卡片（Section Card）════ */

.section-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #E2E4E0;
    overflow: hidden;
    margin-bottom: 10px;
}

.section-card-body {
    padding: 20px;
}


/* ════ 篩選（Filter）════ */

.control-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.control-label {
    font-weight: 500;
    color: #4F544C;
    white-space: nowrap;
    margin: 0;
}


/* ════ 狀態徽章（Status Badges）════ */
.badge-stage {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    background: #F0F7F5;
    color: #386F59;
    border: 1px solid #E1EFE9;
    white-space: nowrap;
}


/* ════ 展開列（Expand Row）— 改為純摘要，移除操作功能 ════ */
.expand-row {
    display: none;
}

.expand-row.open {
    display: table-row;
}

.expand-row > td {
    padding: 0 !important;
    border-bottom: 3px solid #3D8A6B;
}

.expand-inner {
    padding: 16px 22px;
    background: #F4F9F7;
    border-top: 1px solid #E1EFE9;
    animation: expandFadeIn 0.2s ease;
}

@keyframes expandFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ════ 純摘要版展開（expand）— 一行式 chips + CTA ════ */

.expand-summary {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

.expand-chips-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
}

.expand-chip {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #CBE2D9;
    border-radius: 8px;
    padding: 5px 12px;
    min-width: 100px;
}

.expand-chip .chip-label {
    font-size: 14px;
    font-weight: 800;
    color: #3D8A6B;
    letter-spacing: 0.04em;
}

.expand-chip .chip-val {
    font-size: 14px;
    font-weight: 700;
    color: #1B362B;
    margin-top: 1px;
}

.expand-chip.approved-chip {
    border-color: #28a745;
}

.expand-chip.approved-chip .chip-label {
    color: #198754;
}

.expand-chip.approved-chip .chip-val {
    color: #0a5c36;
}


/* ════ 摘要右側 CTA 區 ════ */
.expand-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.expand-desc {
    font-size: 14px;
    color: #747A6F;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #E1EFE9;
    width: 100%;
}


/* ════ 說明文字提示（引導使用者用 Modal 操作）════ */
.expand-hint {
    font-size: 14px;
    color: #A8AFA3;
    display: flex;
    align-items: center;
    gap: 4px;
}


/* ════ 進度點（Progress dots：簡化版）════ */

.progress-dots {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.prog-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #E2E4E0;
    background: #ffffff;
    flex-shrink: 0;
}

.prog-dot.done {
    background: #28a745;
    border-color: #28a745;
}

.prog-dot.current {
    background: #ffc107;
    border-color: #ffc107;
    animation: pulseDot 1.5s infinite;
}

.prog-dot.pending {
    background: #ECEDEB;
    border-color: #E2E4E0;
}

@keyframes pulseDot {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.5);
    }
    50% {
        box-shadow: 0 0 0 5px rgba(255, 193, 7, 0);
    }
}

.prog-label {
    font-size: 14px;
    color: #4F544C;
    font-weight: 600;
}


/* ════ 審核 Modal 分頁（Review Modal Tabs）════ */
.rm-tabs {
    display: flex;
    border-bottom: 2px solid #E8EBE7;
    background: #FBFBFB;
    padding: 0 20px;
}

.rm-tab {
    padding: 12px 18px;
    font-weight: 500;
    cursor: pointer;
    color: #747A6F;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    display: flex;
    align-items: center;
    transition: all 0.2s;
}

.rm-tab:hover {
    color: #386F59;
}

.rm-tab.active {
    color: #386F59;
    border-bottom-color: #386F59;
    font-weight: 700;
}

.rm-panel {
    display: none;
    padding: 24px;
    max-height: 62vh;
    overflow-y: auto;
}

.rm-panel.active {
    display: block;
}


/* ════ 表單欄位（Form fields）════ */

.rm-group {
    margin-bottom: 14px;
}

.rm-label {
    font-size: 14px;
    font-weight: 600;
    color: #1B362B;
    margin-bottom: 5px;
    display: block;
}

.rm-input,
.rm-textarea {
    width: 100%;
    border: 1px solid #E8EBE7;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s;
    background: #ffffff;
    color: #354740;
    box-sizing: border-box;
}

.rm-input:focus,
.rm-textarea:focus {
    outline: none;
    border-color: #3D8A6B;
    box-shadow: 0 0 0 3px rgba(61, 138, 107, 0.12);
}

.rm-input[readonly],
.rm-textarea[readonly] {
    background: #F9F9F9;
    color: #747A6F;
    cursor: default;
}

.rm-textarea {
    resize: vertical;
    min-height: 72px;
}

.rm-input.loinc {
    border-color: #B1D3C5;
    background: #F0F7F5;
    font-weight: 600;
}

.rm-input.loinc:focus {
    border-color: #386F59;
    background: #ffffff;
}

.rm-input.loinc[readonly] {
    background: #F9F9F9;
    border-color: #E8EBE7;
}

.rm-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.rm-row3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}

.rm-banner {
    border-radius: 8px;
    padding: 8px 8px;
    font-size: 14px;
    margin-top: -15px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.rm-banner.warning {
    background: #fff8e1;
    color: #856404;
    border: 1px solid #ffe082;
}

.rm-banner.success {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}

.rm-banner.danger {
    background: #fce4ec;
    color: #b71c1c;
    border: 1px solid #ef9a9a;
}


/* ════ 時間軸（Timeline：水平）════ */

.rm-timeline {
    display: flex;
    gap: 0;
    margin-bottom: 4px;
}

.rm-tl-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.rm-tl-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 15px;
    left: 50%;
    width: 100%;
    height: 3px;
    background: #E8EBE7;
    z-index: 0;
}

.rm-tl-step.done:not(:last-child)::after {
    background: #28a745;
}

.rm-tl-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid #E8EBE7;
    background: #ffffff;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    position: relative;
}

.rm-tl-step.done .rm-tl-dot {
    background: #28a745;
    border-color: #28a745;
    color: #ffffff;
}

.rm-tl-step.current .rm-tl-dot {
    background: #ffffff;
    border-color: #386F59;
    color: #386F59;
    animation: rm-pulse 1.5s infinite;
}

.rm-tl-step.pending .rm-tl-dot {
    background: #F9F9F9;
    border-color: #E2E4E0;
    color: #AAADA7;
}

@keyframes rm-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(56, 111, 89, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(56, 111, 89, 0);
    }
}

.rm-tl-label {
    font-size: 14px;
    font-weight: 600;
    margin-top: 8px;
    text-align: center;
    color: #354740;
}

.rm-tl-date {
    font-size: 14px;
    color: #747A6F;
    margin-top: 2px;
    text-align: center;
}


/* ════ 操作按鈕（Action Buttons）════ */
.rm-btn {
    height: 36px;
    padding: 0 16px;
    border-radius: 7px;
    border: 1px solid #E8EBE7;
    background: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    color: #354740;
    font-family: inherit;
}

.rm-btn:hover {
    border-color: #3D8A6B;
    color: #386F59;
    background: #ECF5F2;
}

.rm-btn.primary {
    background: #386F59;
    border-color: #386F59;
    color: #ffffff;
}

.rm-btn.primary:hover {
    background: #2A5946;
}

.rm-btn.success {
    background: #28a745;
    border-color: #28a745;
    color: #ffffff;
}

.rm-btn.success:hover {
    background: #218838;
}

.rm-btn.danger {
    background: #dc3545;
    border-color: #dc3545;
    color: #ffffff;
}

.rm-btn.danger:hover {
    background: #c82333;
}

.rm-btn.warn {
    background: #fd7e14;
    border-color: #fd7e14;
    color: #ffffff;
}

.rm-btn.warn:hover {
    background: #e8610a;
}


/* ════ 裁決按鈕區（新：視覺權重分層）════ */

.verdict-area {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 10px;
    margin-top: 4px;
}

.verdict-btn-approve {
    background: #28a745;
    color: #ffffff;
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity 0.2s;
}

.verdict-btn-approve:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

.verdict-btn-needinfo {
    background: #ffffff;
    color: #fd7e14;
    border: 2px solid #fd7e14;
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}

.verdict-btn-needinfo:hover {
    background: #fff3e0;
}

.verdict-btn-reject {
    background: #ffffff;
    color: #dc3545;
    border: 2px solid #dc3545;
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}

.verdict-btn-reject:hover {
    background: #f8d7da;
}


/* ════ 階段前進（Stage advance）════ */
.rm-advance-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}


/* ════ Toast 動畫（Toast）════ */

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}


/* ════ 核准二次確認 Modal ════ */

.confirm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 11000;
    align-items: center;
    justify-content: center;
}

.confirm-overlay.open {
    display: flex;
}

.confirm-box {
    background: #ffffff;
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    margin: 20px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
    animation: confirmPop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes confirmPop {
    from {
        opacity: 0;
        transform: scale(0.88);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.confirm-header {
    background: linear-gradient(135deg, #28a745, #1e7e34);
    padding: 20px 24px;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 12px;
}

.confirm-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.confirm-header-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
}

.confirm-header-sub {
    font-size: 14px;
    opacity: 0.85;
    margin-top: 2px;
}

.confirm-body {
    padding: 22px 24px;
}

.confirm-summary {
    background: #F0F7F5;
    border: 1px solid #E1EFE9;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.confirm-summary-row {
    display: flex;
    gap: 8px;
    align-items: baseline;
    margin-bottom: 6px;
}

.confirm-summary-row:last-child {
    margin-bottom: 0;
}

.cs-label {
    font-weight: 600;
    min-width: 90px;
    flex-shrink: 0;
}

.cs-val {
    color: #3D8A6B;
    font-weight: 700;
}

.cs-val.code {
    color: #3D8A6B;
    letter-spacing: 0.05em;
    background: #fff;
    padding: 2px 10px;
    border-radius: 6px;
}

.confirm-warning {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 8px;
    padding: 10px 14px;
    color: #856404;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.confirm-actions {
    display: flex;
    gap: 10px;
}

.confirm-btn-cancel {
    flex: 1;
    padding: 11px;
    border-radius: 8px;
    border: 2px solid #E2E4E0;
    background: #ffffff;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    color: #747A6F;
    transition: all 0.2s;
    font-family: inherit;
}

.confirm-btn-cancel:hover {
    border-color: #B4B9B1;
    color: #4F544C;
}

.confirm-btn-ok {
    flex: 2;
    padding: 11px;
    border-radius: 8px;
    border: none;
    background: #28a745;
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: opacity 0.2s;
    font-family: inherit;
}

.confirm-btn-ok:hover {
    opacity: 0.88;
}


/* ════ 儀表板（Dashboard：Actionable 加強）════ */

.dashboard-cols {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 16px;
    margin-bottom: 20px;
}


/* ════ 逾期警示清單（Urgent List）════ */

.urgent-card {
    background: #ffffff;
    border-radius: 12px;
    border: 2px solid #ffc107;
    overflow: hidden;
}

.urgent-header {
    background: linear-gradient(135deg, #fff8e1, #fff3cd);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #ffe082;
}

.urgent-title {
    font-weight: 700;
    color: #856404;
    font-size: 14px;
    flex: 1;
}

.urgent-count {
    background: #ffc107;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
}

.urgent-list {
    padding: 6px 0;
}

.urgent-item {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #F9F9F9;
    transition: background 0.15s;
    cursor: pointer;
}

.urgent-item:last-child {
    border-bottom: none;
}

.urgent-item:hover {
    background: #fffbf0;
}

.urgent-days {
    font-size: 14px;
    font-weight: 800;
    border-radius: 6px;
    padding: 3px 8px;
    flex-shrink: 0;
    white-space: nowrap;
}

.urgent-days.red {
    background: #f8d7da;
    color: #842029;
}

.urgent-days.orange {
    background: #fff3cd;
    color: #856404;
}

.urgent-item-name {
    flex: 1;
}

.urgent-item-title {
    font-size: 14px;
    font-weight: 600;
    color: #354740;
}

.urgent-item-sub {
    font-size: 14px;
    color: #747A6F;
    margin-top: 1px;
}

.urgent-item-stage {
    font-size: 14px;
    padding: 2px 8px;
    border-radius: 20px;
    background: #EBF4F0;
    color: #386F59;
    font-weight: 700;
    flex-shrink: 0;
}

.urgent-action {
    font-size: 14px;
    color: #386F59;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}


/* ════ 審核員負載（Reviewer）════ */
.reviewer-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #E2E4E0;
    overflow: hidden;
}

.reviewer-header {
    background: linear-gradient(135deg, #F0F7F5, #EBF4F0);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #E1EFE9;
}

.reviewer-title {
    font-weight: 700;
    color: #1B362B;
    font-size: 14px;
}

.reviewer-list {
    padding: 8px 0;
}

.reviewer-item {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.reviewer-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
}

.reviewer-name {
    font-size: 14px;
    font-weight: 600;
    color: #354740;
}

.reviewer-sub {
    font-size: 14px;
    color: #747A6F;
    margin-top: 1px;
}

.reviewer-bar-wrap {
    flex: 1;
}

.reviewer-bar-track {
    height: 8px;
    background: #F3F4F3;
    border-radius: 10px;
    overflow: hidden;
}

.reviewer-bar-fill {
    height: 100%;
    border-radius: 10px;
}

.reviewer-num {
    font-size: 14px;
    font-weight: 700;
    color: #354740;
    flex-shrink: 0;
}

/* ── 操作紀錄 log 樣式 ── */
.rm-log {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid #F2F3F2;
}
.rm-log:last-child { border-bottom: none; }

.rm-log-av {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.rm-log-act {
    font-size: 0.95rem;
    font-weight: 600;
    color: #354740;
    margin-bottom: 3px;
}

.rm-log-time {
    font-size: 0.83rem;
    color: #747A6F;
    line-height: 1.5;
}

/* rmPanel padding */
#rmPanel-history {
    padding: 20px 28px;
}

/* 選項表格 */
.select-table {
    width: 100%;
    border-collapse: collapse;
}

.select-table th {
    background: #F0F7F5;
    color: #4F544C;
    font-weight: 600;
    padding: 9px 10px;
    border-bottom: 2px solid #E1EFE9;
    text-align: center;
    white-space: nowrap;
}

.select-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #F0F0F0;
    vertical-align: middle;
    text-align: center;
}

.select-table tr:hover td {
    background: #F5F9F8;
}

.select-table input[type=checkbox] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #3D8A6B;
}

/* 申請表唯讀 */
.form-view-label {
    font-weight: 700;
    color: #1B362B;
    margin-top: 10px;
    margin-bottom: 3px;
    letter-spacing: 0.03em;
}

.form-view-value {
    color: #222826;
    background: #F9F9F9;
    border-radius: 6px;
    padding: 7px 12px;
    min-height: 36px;
    border: 1px solid #ECEDEB;
    word-break: break-all;
}

.nonapproved-banner {
    background: #fff5f5;
    border: 1px solid #e53935;
    border-radius: 8px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    margin-top: -20px;
    margin-bottom: 16px;
    color: #c62828;
    font-weight: 600;
}

.replacement-banner {
    background: #fffbf0;
    border: 1px solid #f0a500;
    border-radius: 8px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    margin-top: -20px;
    margin-bottom: 16px;
    color: #856404;
    font-weight: 600;
}

.review-banner {
    background: #EBF4F0;
    border: 1px solid #386F59;
    border-radius: 8px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    margin-top: -20px;
    margin-bottom: 5px;
    color: #386F59;
    font-weight: 600;
}

.approved-banner {
    background: #e6f9f0;
    border: 1px solid #28a745;
    border-radius: 8px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    margin-top: -20px;
    margin-bottom: 5px;
    color: #0a5c36;
    font-weight: 600;
}

.editing-banner {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: -20px;
    margin-bottom: 15px;
    color: #856404;
    font-size: 14px;
}

.af-label {
    font-weight: 700;
    color: #1B362B;
    margin-bottom: 4px;
}

/* 表格資料列的按鈕樣式（含 mappingTable .data-table／合併檔表，提高權重避免 tbody／Bootstrap 覆寫） */
.upload-actions-inline,
.data-table .upload-actions-inline,
#mergedFilesTable .upload-actions-inline {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}
.upload-actions-inline .upload-inline-btn,
.data-table .upload-actions-inline .upload-inline-btn,
#mergedFilesTable .upload-actions-inline .upload-inline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    color: #4F544C;
    border: 1px solid #D4E6DE;
    background: #FEFBF9;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
    line-height: 1;
    flex-shrink: 0;
    vertical-align: middle;
    box-sizing: border-box;
    font: inherit;
    appearance: none;
    -webkit-appearance: none;
}
.upload-actions-inline .upload-inline-btn > i,
.data-table .upload-actions-inline .upload-inline-btn > i,
#mergedFilesTable .upload-actions-inline .upload-inline-btn > i {
    font-size: 16px;
    line-height: 1;
}
.upload-actions-inline .upload-inline-btn:hover,
.data-table .upload-actions-inline .upload-inline-btn:hover,
#mergedFilesTable .upload-actions-inline .upload-inline-btn:hover {
    background: #F0F7F5;
    color: #3D8A6B;
}
.upload-actions-inline .upload-inline-btn.danger,
.data-table .upload-actions-inline .upload-inline-btn.danger,
#mergedFilesTable .upload-actions-inline .upload-inline-btn.danger {
    border-color: #f0c2c2;
    color: #c0392b;
}
.upload-actions-inline .upload-inline-btn.danger:hover,
.data-table .upload-actions-inline .upload-inline-btn.danger:hover,
#mergedFilesTable .upload-actions-inline .upload-inline-btn.danger:hover {
    background: #fff0f0;
    color: #dc3545;
}

/* -按鈕樣式- */
.btn-mogo-dg {
    color: #fff !important;
    background-color: #1B362B !important;
    border-color: #1B362B !important;
    border-radius: 50px !important; /* 圓角效果 */
    padding: 10px 30px !important; /* 調整內距 */
    min-width: fit-content !important;
}

	.btn-mogo-dg:hover {
	    color: #fff !important;
	    background-color: #3C6E59 !important;
	    border-color: #3C6E59 !important;
	}
	
	.btn-mogo-dg:focus, .btn-mogo-dg.focus {
	    color: #fff !important;
	    background-color: #1B362B !important;
	    border-color: #93C0AD !important;
	    box-shadow: 0 0 0 3px #93C0AD !important; /* Focus 外框效果 */
	}
	
	.btn-mogo-dg.disabled, .btn-mogo-dg:disabled {
	    color: #fff !important;
	    background-color: #A6C4B7 !important;
	    border-color: #A6C4B7 !important;
	    opacity: 0.7 !important; /* 視覺上更明顯的禁用狀態 */
	}
	
	.btn-mogo-dg:not(:disabled):not(.disabled):active, 
	.btn-mogo-dg:not(:disabled):not(.disabled).active,
	.show > .btn-mogo-dg.dropdown-toggle {
	    color: #fff !important;
	    background-color: #295542 !important; /* Pressed 狀態顏色 */
	    border-color: #295542 !important;
	}
	
	.btn-mogo-dg:not(:disabled):not(.disabled):active:focus, 
	.btn-mogo-dg:not(:disabled):not(.disabled).active:focus,
	.show > .btn-mogo-dg.dropdown-toggle:focus {
	    box-shadow: 0 0 0 3px #93C0AD !important;
	}

/* 登入按鈕 */
.btn-mogo-login {
    color: #3C6E59 !important;
    background-color: #fff !important;
    border: 2px solid #3C6E59 !important; /* 這行就夠了,移除下面的 border-color */
    border-radius: 50px !important; /* 修正這行!移除 #3C6E59 */
    padding: 10px 30px !important;
    min-width: fit-content !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.btn-mogo-login:hover {
    color: #fff !important;
    background-color: #3C6E59 !important;
    border-color: #3C6E59 !important;
    text-decoration: none !important;
}

.btn-mogo-login:focus, 
.btn-mogo-login.focus {
    color: #3C6E59 !important;
    background-color: #fff !important;
    border-color: #93C0AD !important;
    box-shadow: 0 0 0 3px rgba(147, 192, 173, 0.3) !important;
    outline: none !important;
    text-decoration: none !important;
}

.btn-mogo-login.disabled, 
.btn-mogo-login:disabled {
    color: #A6C4B7 !important;
    background-color: #fff !important;
    border-color: #A6C4B7 !important;
    opacity: 0.6 !important;
}

.btn-mogo-login:not(:disabled):not(.disabled):active, 
.btn-mogo-login:not(:disabled):not(.disabled).active,
.show > .btn-mogo-login.dropdown-toggle {
    color: #fff !important;
    background-color: #3C6E59 !important;
    border-color: #3C6E59 !important;
}

.btn-mogo-login:not(:disabled):not(.disabled):active:focus, 
.btn-mogo-login:not(:disabled):not(.disabled).active:focus,
.show > .btn-mogo-login.dropdown-toggle:focus {
    box-shadow: 0 0 0 3px rgba(147, 192, 173, 0.3) !important;
}

/* 註冊按鈕 */
.btn-mogo-signup {
    color: #fff !important;
    background-color: #3C6E59 !important;
    border: 2px solid #3C6E59 !important;
    border-radius: 50px !important;
    padding: 10px 30px !important;
    min-width: fit-content !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.btn-mogo-signup:hover {
    color: #fff !important;
    background-color: #93C0AD !important;
    border-color: #93C0AD !important;
    text-decoration: none !important;
}

.btn-mogo-signup:focus, 
.btn-mogo-signup.focus {
    color: #fff !important;
    background-color: #3C6E59 !important;
    border-color: #93C0AD !important;
    box-shadow: 0 0 0 3px rgba(147, 192, 173, 0.4) !important;
    outline: none !important;
    text-decoration: none !important;
}

.btn-mogo-signup.disabled, 
.btn-mogo-signup:disabled {
    color: #fff !important;
    background-color: #A6C4B7 !important;
    border-color: #A6C4B7 !important;
    opacity: 0.7 !important;
}

.btn-mogo-signup:not(:disabled):not(.disabled):active, 
.btn-mogo-signup:not(:disabled):not(.disabled).active {
    color: #fff !important;
    background-color: #295542 !important;
    border-color: #295542 !important;
}

.btn-mogo {
    color: #fff !important;
    background-color: #2B634D !important;
    border-color: #306E55 !important;
    border-radius: 12px !important;
    padding: 12px 28px !important;
    font-weight: 500 !important;
    min-width: 64px !important;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    .btn-mogo:hover {
        color: #fff !important;
	    background-color: #2B634D !important; /* 稍深的藍色 */
	    border-color: #2B634D !important;
    }

    .btn-mogo:focus, .btn-mogo.focus {
        color: #fff !important;
	    background-color: #306E55 !important;
    }

    .btn-mogo.disabled, .btn-mogo:disabled {
        color: rgba(0, 0, 0, 0.26) !important;
	    background-color: rgba(0, 0, 0, 0.12) !important;
	    border-color: rgba(0, 0, 0, 0.12) !important;
	    box-shadow: none !important;
	    cursor: default !important;
    }

    .btn-mogo:not(:disabled):not(.disabled):active, 
    .btn-mogo:not(:disabled):not(.disabled).active,
    .show > .btn-mogo.dropdown-toggle {
        color: #fff !important;
	    background-color: #2B634D !important;
	    box-shadow: none !important;
	}
	
	.btn-mogo:not(:disabled):not(.disabled):active:focus, 
	.btn-mogo:not(:disabled):not(.disabled).active:focus,
	.show > .btn-mogo.dropdown-toggle:focus {
	    box-shadow: none !important;
	}

.btn-mogo-blue {
    color: #fff !important;
    background-color: #1E3A2F !important;
    border-color: #1E3A2F !important;
    border-radius: 12px !important;
    padding: 12px 28px !important;
    font-weight: 500 !important;
    min-width: 64px !important;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.btn-mogo-blue:hover {
    color: #fff !important;
    background-color: #1B372C !important;
    border-color: #1B372C !important;
}

.btn-mogo-blue:focus, .btn-mogo-blue.focus {
    color: #fff !important;
    background-color: #1E3A2F !important;
}

.btn-mogo-blue.disabled, .btn-mogo-blue:disabled {
    color: rgba(0, 0, 0, 0.26) !important;
    background-color: rgba(0, 0, 0, 0.12) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    box-shadow: none !important;
    cursor: default !important;
}

.btn-mogo-blue:not(:disabled):not(.disabled):active, 
.btn-mogo-blue:not(:disabled):not(.disabled).active,
.show > .btn-mogo-blue.dropdown-toggle {
    color: #fff !important;
    background-color: #1B372C !important;
    box-shadow: none !important;
}

.btn-mogo-blue:not(:disabled):not(.disabled):active:focus, 
.btn-mogo-blue:not(:disabled):not(.disabled).active:focus,
.show > .btn-mogo-blue.dropdown-toggle:focus {
    box-shadow: none !important;
}

.btn-mogo-whiteblue {
    color: #2B634D !important;
    background-color: #fff !important;
    border: 1px solid #2B634D !important;
    border-radius: 12px !important;
    padding: 12px 28px !important;
    font-weight: 500 !important;
    min-width: 64px !important;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    .btn-mogo-whiteblue:hover {
        color: #2B634D !important;
	    background-color: #E6F2ED !important; /* 稍深的藍色 */
	    border: 1px solid #2B634D !important;
    }

    .btn-mogo-whiteblue:focus, .btn-mogo-whiteblue.focus {
        color: #2B634D !important;
	    background-color: #fff !important;
    }

    .btn-mogo-whiteblue.disabled, .btn-mogo-whiteblue:disabled {
        color: rgba(0, 0, 0, 0.26) !important;
	    background-color: rgba(0, 0, 0, 0.12) !important;
	    border-color: rgba(0, 0, 0, 0.12) !important;
	    box-shadow: none !important;
	    cursor: default !important;
    }

    .btn-mogo-whiteblue:not(:disabled):not(.disabled):active, 
    .btn-mogo-whiteblue:not(:disabled):not(.disabled).active,
    .show > .btn-mogo-whiteblue.dropdown-toggle {
        color: #2B634D !important;
	    background-color: #fff !important;
	    box-shadow: none !important;
	}
	
	.btn-mogo-whiteblue:not(:disabled):not(.disabled):active:focus, 
	.btn-mogo-whiteblue:not(:disabled):not(.disabled).active:focus,
	.show > .btn-mogo-whiteblue.dropdown-toggle:focus {
	    box-shadow: none !important;
	}

.btn-mogo-grey2 {
    color: #fff !important;
    background-color: #3F534C !important;
    border-color: #3F534C !important;
    border-radius: 12px !important;
    padding: 12px 28px !important;
    font-weight: 500 !important;
    min-width: 64px !important;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.btn-mogo-grey2:hover {
    color: #fff !important;
    background-color: #354740 !important;
    border-color: #354740 !important;
}

.btn-mogo-grey2:focus, .btn-mogo-grey.focus {
    color: #fff !important;
    background-color: #3F534C !important;
}

.btn-mogo-grey2.disabled, .btn-mogo-grey:disabled {
    color: rgba(0, 0, 0, 0.26) !important;
    background-color: rgba(0, 0, 0, 0.12) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    box-shadow: none !important;
    cursor: default !important;
}

.btn-mogo-grey2:not(:disabled):not(.disabled):active, 
.btn-mogo-grey2:not(:disabled):not(.disabled).active,
.show > .btn-mogo-grey.dropdown-toggle {
    color: #fff !important;
    background-color: #354740 !important;
    box-shadow: none !important;
}

.btn-mogo-grey2:not(:disabled):not(.disabled):active:focus, 
.btn-mogo-grey2:not(:disabled):not(.disabled).active:focus,
.show > .btn-mogo-grey2.dropdown-toggle:focus {
    box-shadow: none !important;
}

/* -黃色按鈕樣式- */
.btn-mogo-yellow {
    color: #524a37 !important;
    background-color: #fcc538 !important;
    border-color: #fcc538 !important;
    border-radius: 12px !important;
    padding: 12px 28px !important;
    font-weight: 500 !important;
    min-width: 64px !important;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    .btn-mogo-yellow:hover {
        color: #524a37 !important;
	    background-color: #e6a90f !important; /* 稍深的黃色 */
	    border-color: #e6a90f !important;
    }

    .btn-mogo-yellow:focus, .btn-mogo-yellow.focus {
        color: #524a37 !important;
	    background-color: #fcc538 !important;
    }

    .btn-mogo-yellow.disabled, .btn-mogo-yellow:disabled {
        color: rgba(0, 0, 0, 0.26) !important;
	    background-color: rgba(0, 0, 0, 0.12) !important;
	    border-color: rgba(0, 0, 0, 0.12) !important;
	    box-shadow: none !important;
	    cursor: default !important;
    }

    .btn-mogo-yellow:not(:disabled):not(.disabled):active, 
    .btn-mogo-yellow:not(:disabled):not(.disabled).active,
    .show > .btn-mogo-yellow.dropdown-toggle {
        color: #524a37 !important;
	    background-color: #e6a90f !important;
	    box-shadow: none !important;
	}
	
	.btn-mogo-yellow:not(:disabled):not(.disabled):active:focus, 
	.btn-mogo-yellow:not(:disabled):not(.disabled).active:focus,
	.show > .btn-mogo-yellow.dropdown-toggle:focus {
	    box-shadow: none !important;
	}

/* -白灰色按鈕樣式- */
.btn-mogo-grey {
    color: rgba(0, 0, 0, 0.87) !important;
    background-color: #F4F9F7 !important;
    border-color: #F4F9F7 !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 28px !important;
    font-weight: 500 !important;
    min-width: 64px !important;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

	.btn-mogo-grey:hover {
	    color: rgba(0, 0, 0, 0.87) !important;
	    background-color: #ECF4F0 !important; /* 稍深一點的灰藍色 */
	    border-color: #ECF4F0 !important;
	    box-shadow: none !important;
	}
	
	.btn-mogo-grey:focus, .btn-mogo-grey.focus {
	    color: rgba(0, 0, 0, 0.87) !important;
	    background-color: #F4F9F7 !important;
	    border-color: #F4F9F7 !important;
	    box-shadow: none !important;
	}
	
	.btn-mogo-grey.disabled, .btn-mogo-grey:disabled {
	    color: rgba(0, 0, 0, 0.26) !important;
	    background-color: rgba(0, 0, 0, 0.12) !important;
	    border-color: rgba(0, 0, 0, 0.12) !important;
	    box-shadow: none !important;
	    cursor: default !important;
	}
	
	.btn-mogo-grey:not(:disabled):not(.disabled):active, 
	.btn-mogo-grey:not(:disabled):not(.disabled).active,
	.show > .btn-mogo-grey.dropdown-toggle {
	    color: rgba(0, 0, 0, 0.87) !important;
	    background-color: #ECF4F0 !important;
	    border-color: #ECF4F0 !important;
	    box-shadow: none !important;
	}
	
	.btn-mogo-grey:not(:disabled):not(.disabled):active:focus, 
	.btn-mogo-grey:not(:disabled):not(.disabled).active:focus,
	.show > .btn-mogo-grey.dropdown-toggle:focus {
	    box-shadow: none !important;
	}

/* 深灰 */
.btn-mogo-darkgrey {
    color: #000 !important;
    background-color: #D8DAD6 !important;
    border-color: #D8DAD6 !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 28px !important;
    font-weight: 500 !important;
    min-width: 64px !important;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

	.btn-mogo-darkgrey:hover {
	    color: #000 !important;
	    background-color: #ECF4F0 !important; /* 稍深一點的灰藍色 */
	    border-color: #ECF4F0 !important;
	    box-shadow: none !important;
	}
	
	.btn-mogo-darkgrey:focus, .btn-mogo-darkgrey.focus {
	    color: #000 !important;
	    background-color: #D8DAD6 !important;
	    border-color: #D8DAD6 !important;
	    box-shadow: none !important;
	}
	
	.btn-mogo-darkgrey.disabled, .btn-mogo-darkgrey:disabled {
	    color: rgba(0, 0, 0, 0.26) !important;
	    background-color: rgba(0, 0, 0, 0.12) !important;
	    border-color: rgba(0, 0, 0, 0.12) !important;
	    box-shadow: none !important;
	    cursor: default !important;
	}
	
	.btn-mogo-darkgrey:not(:disabled):not(.disabled):active, 
	.btn-mogo-darkgrey:not(:disabled):not(.disabled).active,
	.show > .btn-mogo-darkgrey.dropdown-toggle {
	    color: #000 !important;
	    background-color: #ECF4F0 !important;
	    border-color: #ECF4F0 !important;
	    box-shadow: none !important;
	}
	
	.btn-mogo-darkgrey:not(:disabled):not(.disabled):active:focus, 
	.btn-mogo-darkgrey:not(:disabled):not(.disabled).active:focus,
	.show > .btn-mogo-darkgrey.dropdown-toggle:focus {
	    box-shadow: none !important;
	}

/* 綠色按鈕樣式 */
.btn-mogo-green {
    color: #fff !important;
    background-color: #4bad62 !important;
    border-color: #306E55 !important;
    border-radius: 12px !important;
    padding: 12px 28px !important;
    font-weight: 500 !important;
    min-width: 64px !important;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    .btn-mogo-green:hover {
        color: #fff !important;
	    background-color: #4bad62 !important; /* 稍深的藍色 */
	    border-color: #4bad62 !important;
    }

    .btn-mogo-green:focus, .btn-mogo-green.focus {
        color: #fff !important;
	    background-color: #306E55 !important;
    }

    .btn-mogo-green.disabled, .btn-mogo-green:disabled {
        color: rgba(0, 0, 0, 0.26) !important;
	    background-color: rgba(0, 0, 0, 0.12) !important;
	    border-color: rgba(0, 0, 0, 0.12) !important;
	    box-shadow: none !important;
	    cursor: default !important;
    }

    .btn-mogo-green:not(:disabled):not(.disabled):active, 
    .btn-mogo-green:not(:disabled):not(.disabled).active,
    .show > .btn-mogo-green.dropdown-toggle {
        color: #fff !important;
	    background-color: #4bad62 !important;
	    box-shadow: none !important;
	}
	
	.btn-mogo-green:not(:disabled):not(.disabled):active:focus, 
	.btn-mogo-green:not(:disabled):not(.disabled).active:focus,
	.show > .btn-mogo-green.dropdown-toggle:focus {
	    box-shadow: none !important;
	}

/* 淡紅色按鈕樣式 */
.btn-mogo-lightred {
    color: #fff !important;
    background-color: #CC8181 !important;
    border-color: #CC8181 !important;
    border-radius: 12px !important;
    padding: 12px 28px !important;
    font-weight: 500 !important;
    min-width: 64px !important;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    .btn-mogo-lightred:hover {
        color: #fff !important;
	    background-color: #CC8181 !important; /* 稍深的藍色 */
	    border-color: #CC8181 !important;
    }

    .btn-mogo-lightred:focus, .btn-mogo-lightred.focus {
        color: #fff !important;
	    background-color: #CC8181 !important;
    }

    .btn-mogo-lightred.disabled, .btn-mogo-lightred:disabled {
        color: rgba(0, 0, 0, 0.26) !important;
	    background-color: rgba(0, 0, 0, 0.12) !important;
	    border-color: rgba(0, 0, 0, 0.12) !important;
	    box-shadow: none !important;
	    cursor: default !important;
    }

    .btn-mogo-lightred:not(:disabled):not(.disabled):active, 
    .btn-mogo-lightred:not(:disabled):not(.disabled).active,
    .show > .btn-mogo-lightred.dropdown-toggle {
        color: #fff !important;
	    background-color: #CC8181 !important;
	    box-shadow: none !important;
	}
	
	.btn-mogo-lightred:not(:disabled):not(.disabled):active:focus, 
	.btn-mogo-lightred:not(:disabled):not(.disabled).active:focus,
	.show > .btn-mogo-lightred.dropdown-toggle:focus {
	    box-shadow: none !important;
	}

/* 紅色按鈕樣式 */
.btn-mogo-red {
    color: #fff !important;
    background-color: #dc3545 !important;
    border-color: #306E55 !important;
    border-radius: 12px !important;
    padding: 12px 28px !important;
    font-weight: 500 !important;
    min-width: 64px !important;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    .btn-mogo-red:hover {
        color: #fff !important;
	    background-color: #dc3545 !important; /* 稍深的藍色 */
	    border-color: #dc3545 !important;
    }

    .btn-mogo-red:focus, .btn-mogo-red.focus {
        color: #fff !important;
	    background-color: #306E55 !important;
    }

    .btn-mogo-red.disabled, .btn-mogo-red:disabled {
        color: rgba(0, 0, 0, 0.26) !important;
	    background-color: rgba(0, 0, 0, 0.12) !important;
	    border-color: rgba(0, 0, 0, 0.12) !important;
	    box-shadow: none !important;
	    cursor: default !important;
    }

    .btn-mogo-red:not(:disabled):not(.disabled):active, 
    .btn-mogo-red:not(:disabled):not(.disabled).active,
    .show > .btn-mogo-red.dropdown-toggle {
        color: #fff !important;
	    background-color: #dc3545 !important;
	    box-shadow: none !important;
	}
	
	.btn-mogo-red:not(:disabled):not(.disabled):active:focus, 
	.btn-mogo-red:not(:disabled):not(.disabled).active:focus,
	.show > .btn-mogo-red.dropdown-toggle:focus {
	    box-shadow: none !important;
	}

/* 棕色按鈕樣式 */
.btn-mogo-brown {
    color: #000 !important;
    background-color: #d1c6b4 !important;
    border-color: #306E55 !important;
    border-radius: 12px !important;
    padding: 12px 28px !important;
    font-weight: 500 !important;
    min-width: 64px !important;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    .btn-mogo-brown:hover {
        color: #000 !important;
	    background-color: #d1c6b4 !important; /* 稍深的藍色 */
	    border-color: #d1c6b4 !important;
    }

    .btn-mogo-brown:focus, .btn-mogo-brown.focus {
        color: #000 !important;
	    background-color: #306E55 !important;
    }

    .btn-mogo-brown.disabled, .btn-mogo-brown:disabled {
        color: rgba(0, 0, 0, 0.26) !important;
	    background-color: rgba(0, 0, 0, 0.12) !important;
	    border-color: rgba(0, 0, 0, 0.12) !important;
	    box-shadow: none !important;
	    cursor: default !important;
    }

    .btn-mogo-brown:not(:disabled):not(.disabled):active, 
    .btn-mogo-brown:not(:disabled):not(.disabled).active,
    .show > .btn-mogo-brown.dropdown-toggle {
        color: #000 !important;
	    background-color: #d1c6b4 !important;
	    box-shadow: none !important;
	}
	
	.btn-mogo-brown:not(:disabled):not(.disabled):active:focus, 
	.btn-mogo-brown:not(:disabled):not(.disabled).active:focus,
	.show > .btn-mogo-brown.dropdown-toggle:focus {
	    box-shadow: none !important;
	}



/* -響應式設計- */
@media (max-width: 768px) {
  .button-group-horizontal {
      flex-direction: column;
      gap: 10px;
  }
        
  .button-group-horizontal .btn {
      width: 100%;
      margin-left: 0 !important;
  }

  .login-main-section {
      max-width: 100%;
  }
  
  .login-section-content {
      padding: 20px;
  }

  .process-steps {
      flex-direction: column;
      gap: 20px;
  }
  
  .step-arrow {
      display: none;
  }
  
  .nav-tabs {
      padding: 0 15px;
  }
  
  .nav-tabs .nav-link {
      padding: 15px 20px;
      font-size: 1rem;
  }
  
  .tab-pane {
      padding: px;
  }
  
  .control-header {
      flex-direction: column;
      align-items: stretch;
  }
  
  .control-actions {
      justify-content: center;
      gap: 15px;
  }
  
  .pagination-container {
      flex-direction: column;
      text-align: center;
  }
  
  .enhanced-table {
      font-size: 0.75rem;
  }
  
  .enhanced-table thead th,
  .enhanced-table tbody td {
      padding: 8px 6px;
  }

  .sticky-pagination {
      bottom: 10px;
      padding: 12px 15px;
  }
  .hero-section h1 {
      font-size: 2rem;
  }
    
  .feature-cards {
      grid-template-columns: 1fr;
  }
  
  .stats-grid {
      grid-template-columns: repeat(2, 1fr);
  }

  .modal-lg {
      max-width: 95%;
      margin: 1rem auto;
    }

  .modal-body {
      padding: 1.5rem !important;
    }

  .modal-footer {
      padding: 1rem 1.5rem !important;
    }

  .invite-form-group {
      margin-bottom: 1.25rem;
    }
  .user-info {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.2rem;
    }
    
  .action-buttons-table {
      gap: 0.15rem; /* 手機版減少間距 */
    }

  .btn-xs {
      min-width: 20px;
      height: 20px;
      font-size: 0.6rem;
      padding: 0; /* 確保手機版也是 0 padding */
    }

    .member-card {
      height: auto;
      min-height: 280px;
    }
    
    .action-buttons {
      grid-template-columns: 1fr;
      gap: 0.4rem;
    }
    
    .member-header-top {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
    }
    
    .member-badges {
      flex-direction: row;
      align-items: flex-start;
    }

    .upload-tab {
    font-size: 14px;
    padding: 12px 15px;
    }
    
    .form-group-section {
    padding: 15px;
    }
    
    .record-header {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .record-actions {
        justify-content: space-between;
    }

    .details-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 992px) {
    .stats-cards {
        grid-template-columns: 1fr;
    }

    .filter-section {
        grid-template-columns: 1fr;
    }

    .details-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 窄螢幕：寬表搭配 .table-responsive 以橫向捲動呈現；儲存格允許換行，避免 nowrap 造成欄位重疊 */
@media (max-width: 991.98px) {
  .enhanced-table thead th,
  .enhanced-table tbody td {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .table-responsive > .enhanced-table {
    width: max-content;
    max-width: none;
    min-width: 100%;
    table-layout: auto;
  }
}
/* ===== 前台操作紀錄（frontendActivityLog.jsp）===== */
.frontend-activity-scope {
  font-size: 16px;
}
.frontend-activity-scope .err {
  color: #b91c1c;
  padding: 12px;
  background: #fef2f2;
  border-radius: 8px;
  margin-bottom: 12px;
  display: none;
}
.frontend-activity-scope .audit-hint {
  font-size: 15px;
  color: #757B70;
  margin: 0 0 16px 0;
}
.frontend-activity-scope .search-container--date {
  min-width: 0 !important;
  max-width: 132px;
  flex: 0 1 auto;
}
.frontend-activity-scope .search-container--date .search-input {
  min-width: 0 !important;
  width: 100%;
  max-width: 100% !important;
}
.frontend-activity-scope .control-group--actions {
  flex-shrink: 0;
}
.frontend-activity-scope .filter-actions-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  flex-shrink: 0;
}
.frontend-activity-scope .filter-actions-row .btn {
  min-width: 88px;
  white-space: nowrap;
  flex-shrink: 0;
}
.fa-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.fa-summary-card {
  background: #fff;
  border: 1px solid #E8E9E7;
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
}
.fa-summary-card .num {
  font-size: 28px;
  font-weight: 700;
  color: #29604A;
  line-height: 1.2;
}
.fa-summary-card .lbl {
  font-size: 14px;
  color: #757B70;
  margin-top: 4px;
}
.fa-section-title {
  font-size: 18px;
  font-weight: 600;
  color: #1B372C;
  margin: 24px 0 12px 0;
}
.fa-chart-wrap {
  background: #fff;
  border: 1px solid #E8E9E7;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 8px;
  overflow: hidden;
  isolation: isolate;
  position: relative;
  z-index: 1;
}
.fa-chart-canvas {
  position: relative;
  height: 320px;
  width: 100%;
}
.fa-chart-wrap canvas {
  border-radius: 8px;
}
body.modal-open .frontend-activity-scope .fa-chart-wrap {
  visibility: hidden;
}
.frontend-activity-scope .main-section .enhanced-table {
  table-layout: fixed;
  width: 100%;
  font-size: 16px !important;
}
.frontend-activity-scope .main-section .enhanced-table thead th,
.frontend-activity-scope .main-section .enhanced-table tbody td {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-size: 16px !important;
  vertical-align: middle;
  text-align: center;
}
.frontend-activity-scope .main-section .enhanced-table thead th.col-left,
.frontend-activity-scope .main-section .enhanced-table tbody td.col-left {
  text-align: left;
}
.fa-stat-link {
  color: #29604A;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fa-stat-link:hover {
  color: #327358;
}
.fa-stat-zero {
  color: #A5AAA1;
}
.fa-org-link {
  color: #29604A;
  cursor: pointer;
  font-weight: 600;
}
.fa-org-link:hover {
  text-decoration: underline;
}
.fa-org-hint {
  font-size: 13px;
  color: #A5AAA1;
  margin-top: 6px;
}
.frontend-activity-scope .badge-cat {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: #E6F2ED;
  color: #29604A;
  font-size: 13px;
}
.frontend-activity-scope .pagination-container,
.frontend-activity-scope .pagination-info {
  font-size: 16px !important;
}

/* 前台操作紀錄 — 明細彈窗（對齊 mappingTable / loginAuditLog modal） */
#faDetailModal .modal-dialog,
#faDetailModal .fa-detail-modal-dialog {
  max-width: min(1440px, 98vw) !important;
  width: min(1440px, 98vw) !important;
  max-height: calc(100vh - 24px);
  height: calc(100vh - 24px);
  margin: -96px auto 0 auto;
}
#faDetailModal .modal-content {
  border-radius: 16px;
  overflow: hidden;
  border: none;
  height: 100%;
  display: flex;
  flex-direction: column;
}
#faDetailModal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #3D8A6B 0%, #386F59 100%);
  color: #fff;
  border-radius: 16px 16px 0 0;
  padding: 20px 25px;
  min-height: 60px;
  flex-shrink: 0;
}
#faDetailModal .modal-header h2 {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.4;
  color: #fff;
  flex: 1;
  min-width: 0;
}
#faDetailModal .modal-header h2 span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#faDetailModal .modal-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
  padding: 0;
}
#faDetailModal .modal-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}
#faDetailModal .modal-body {
  font-size: 16px;
  padding: 25px 30px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#faDetailModal .fa-detail-sub {
  font-size: 15px;
  color: #565C52;
  margin-bottom: 16px;
  line-height: 1.5;
  flex-shrink: 0;
}
#faDetailModal .fa-detail-table-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
#faDetailModal .fa-detail-table-wrap .main-section {
  margin-bottom: 0;
}
#faDetailModal .fa-detail-table-wrap .table-responsive {
  overflow-x: auto;
}
#faDetailModal .fa-detail-table-wrap .enhanced-table {
  table-layout: auto !important;
  width: 100%;
  min-width: 1040px;
}
#faDetailModal .fa-detail-table-wrap .enhanced-table thead th,
#faDetailModal .fa-detail-table-wrap .enhanced-table tbody td {
  font-size: 15px !important;
  padding: 10px 12px;
}
#faDetailModal .fa-detail-table-wrap .enhanced-table tbody td:nth-child(1) {
  white-space: nowrap;
}
#faDetailModal .fa-detail-table-wrap .enhanced-table tbody td:nth-child(2) {
  white-space: nowrap;
  min-width: 200px;
}
#faDetailModal .fa-detail-table-wrap .enhanced-table tbody td:nth-child(3),
#faDetailModal .fa-detail-table-wrap .enhanced-table tbody td:nth-child(4) {
  min-width: 100px;
}
#faDetailModal .pagination-container {
  margin-top: 12px;
  margin-bottom: 0;
  flex-shrink: 0;
}