/* 檔案：custom-theme.css (全站共用樣式庫) */

/* =========================================================
   1. 全域 UI 優化與修復
   ========================================================= */
/* 深色風格 CSS 縮寫... */
        [data-bs-theme="dark"] body { background-color: #141414 !important; color: #cfd4d9 !important; }
        [data-bs-theme="dark"] .navbar.bg-dark { background-color: #0d1117 !important; border-bottom: 1px solid #2d2d2d; }
        [data-bs-theme="dark"] .card, [data-bs-theme="dark"] .offcanvas { background-color: #1e1e1e !important; border-color: #333333 !important; }
        [data-bs-theme="dark"] .card-header, [data-bs-theme="dark"] .offcanvas-header { background-color: #252526 !important; border-bottom: 1px solid #333333 !important; }
        [data-bs-theme="dark"] .table { color: #cfd4d9 !important; border-color: #333333 !important; }
        [data-bs-theme="dark"] .table-light th, [data-bs-theme="dark"] .table-light td { background-color: #222222 !important; color: #cfd4d9 !important; border-bottom: 2px solid #007bff !important; }
        [data-bs-theme="dark"] .table-hover tbody tr:hover { background-color: #2a2d31 !important; color: #ffffff !important; }
        [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select, [data-bs-theme="dark"] textarea { background-color: #222222 !important; color: #cfd4d9 !important; border-color: #444444 !important; }
        [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { background-color: #2a2a2a !important; color: #ffffff !important; border-color: #007bff !important; box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25) !important; }
        [data-bs-theme="dark"] .modal-content { background-color: #1e1e1e !important; border-color: #444444 !important; }
        [data-bs-theme="dark"] .text-dark { color: #e0e0e0 !important; }
        [data-bs-theme="dark"] .bg-white { background-color: #1e1e1e !important; }
        [data-bs-theme="dark"] .bg-light { background-color: #252526 !important; }
        [data-bs-theme="dark"] .btn-light { background-color: #333333 !important; color: #e0e0e0 !important; border-color: #444444 !important; }
        [data-bs-theme="dark"] .btn-light:hover { background-color: #444444 !important; color: #ffffff !important; }

/* 修正頂部導覽列層級，防止下拉選單被表格 sticky-top 遮擋 */
.navbar { position: relative; z-index: 1050 !important; }

/* 防止表格內容過長撐破版面 */
.wrap-table td, .wrap-table th { word-wrap: break-word; white-space: normal; }
.nowrap-col { white-space: nowrap !important; }

/* 修正系統工具選單 Hover 被反白看不清的問題 */
.custom-panel-menu .dropdown-item { transition: background-color 0.2s ease; }
.custom-panel-menu .dropdown-item:hover, .custom-panel-menu .dropdown-item:focus { background-color: #e9ecef !important; color: #212529 !important; }
.custom-panel-menu .dropdown-item:hover .form-check-label { color: #212529 !important; }

/* 狀態指示燈 (呼吸燈) 動畫 */
@keyframes pulse-green { 0% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.7); } 70% { box-shadow: 0 0 0 8px rgba(25, 135, 84, 0); } 100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); } }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.status-dot.active { background-color: #198754; animation: pulse-green 2s infinite; }
.status-dot.inactive { background-color: #dc3545; }

/* 審核者懸浮資訊框 (MAC / 802.1X 共用) */
.applicant-box { position: relative; display: inline-block; cursor: pointer; }
.applicant-box .audit-info { display: none; white-space: nowrap; min-width: 150px; z-index: 100; }
.applicant-box:hover .audit-info { display: block; }


/* =========================================================
   2. 共通表格與排版組件 (明亮模式基礎)
   ========================================================= */
/* 統一卡片與表頭樣式 */
.settings-header { background-color: #f8f9fa; border-bottom: 2px solid #e9ecef; }
.table th, .table td { vertical-align: middle; }

/* 🌟 隱藏 .table-responsive 的橫向捲軸，但保留手機版觸控滑動功能 */
.table-responsive::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}
.table-responsive {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */
}

/* 待審核清單 (Pending) 專用底色 */
.row-pending { background-color: #fffdf0 !important; color: #212529 !important; }
.row-pending td { border-bottom: 1px solid #ffeeba !important; }
.row-handled { background-color: #ffffff !important; color: #212529 !important; }

/* 子層展開列底色 (MAC) */
tr.child-row > td { background-color: #f8f9fa !important; }

/* 灰階分頁按鈕設計 (Auth Logs) */
.page-link-gray { background-color: #f8f9fa !important; color: #000 !important; border-color: #dee2e6 !important; font-weight: bold; }
.page-link-gray:hover { background-color: #e9ecef !important; color: #000 !important; }
.page-item.active .page-link-gray { background-color: #ced4da !important; border-color: #adb5bd !important; color: #000 !important; font-weight: 900; }

/* RADIUS 斷線原因切換 (Auth Logs) */
.term-cause-raw { display: none; font-family: monospace; } 
.show-raw .term-cause-raw { display: inline; } 
.show-raw .term-cause-friendly { display: none; }


/* =========================================================
   3. 全域通用：將所有實體色塊改為「鏤空邊框文字盒」 
   ========================================================= */
.outline-badge { background-color: transparent !important; border-width: 1px; border-style: solid; font-weight: bold; }
/* 攔截原有的行內顏色標籤 */
.table .badge[style*="#34495e"] { background-color: transparent !important; color: #34495e !important; border: 1px solid #34495e !important; }
.table .badge[style*="#6f42c1"] { background-color: transparent !important; color: #6f42c1 !important; border: 1px solid #6f42c1 !important; }
/* 攔截 Bootstrap 預設背景標籤 */
.table .badge.bg-dark { background-color: transparent !important; color: #212529 !important; border: 1px solid #212529 !important; }
.table .badge.bg-success { background-color: transparent !important; color: #198754 !important; border: 1px solid #198754 !important; }
.table .badge.bg-danger { background-color: transparent !important; color: #dc3545 !important; border: 1px solid #dc3545 !important; }
.table .badge.bg-info { background-color: transparent !important; color: #087990 !important; border: 1px solid #087990 !important; box-shadow: none !important; }


/* =========================================================
   🌙 4. 護眼模式 (Dark Mode) 專屬色彩與亮度適配
   ========================================================= */
/* 4.1 卡片表頭與特殊底色暗化 */
[data-bs-theme="dark"] .settings-header { background-color: #252526 !important; border-bottom-color: #333 !important; }
[data-bs-theme="dark"] tr.child-row > td { background-color: #1a1a1a !important; border-bottom-color: #333 !important; }
[data-bs-theme="dark"] .row-pending { background-color: rgba(255, 193, 7, 0.05) !important; color: #e6edf3 !important; }
[data-bs-theme="dark"] .row-pending td { border-bottom-color: rgba(255, 193, 7, 0.2) !important; }
[data-bs-theme="dark"] .row-handled { background-color: transparent !important; color: #c9d1d9 !important; }
[data-bs-theme="dark"] .alert[style*="#e0f8f1"] { background-color: rgba(25, 135, 84, 0.1) !important; color: #56d364 !important; } /* Online 提示框 */

/* 4.2 強制去除「死白底色」與「淺灰底色」，改為透明或深灰 */
[data-bs-theme="dark"] .table .bg-white, 
[data-bs-theme="dark"] .card-footer.bg-white,
[data-bs-theme="dark"] .bg-white { background-color: transparent !important; }
[data-bs-theme="dark"] .table .bg-light,
[data-bs-theme="dark"] .table-light th { background-color: rgba(255, 255, 255, 0.03) !important; color: #c9d1d9 !important; border-color: #333 !important; }
[data-bs-theme="dark"] .table-secondary { background-color: #252526 !important; color: #c9d1d9 !important; border-color: #333 !important; }

/* 4.3 修正「一般字體看不見」的問題 (強制調亮) */
[data-bs-theme="dark"] .text-dark, [data-bs-theme="dark"] .table .text-dark { color: #e6edf3 !important; }
[data-bs-theme="dark"] .text-secondary, [data-bs-theme="dark"] .table .text-secondary { color: #c9d1d9 !important; }
[data-bs-theme="dark"] .text-muted, [data-bs-theme="dark"] .table .text-muted { color: #8b949e !important; }
[data-bs-theme="dark"] .text-primary, [data-bs-theme="dark"] .table .text-primary { color: #8ab4f8 !important; }
[data-bs-theme="dark"] .text-info, [data-bs-theme="dark"] .table .text-info { color: #41b4d0 !important; }

/* 4.4 護眼模式下的鏤空邊框顏色 (切換成高亮度粉彩螢光色) */
[data-bs-theme="dark"] .table .badge[style*="#34495e"] { color: #8ab4f8 !important; border-color: #8ab4f8 !important; }
[data-bs-theme="dark"] .table .badge[style*="#6f42c1"] { color: #b685ff !important; border-color: #b685ff !important; }
[data-bs-theme="dark"] .table .badge.bg-dark { color: #c9d1d9 !important; border-color: #c9d1d9 !important; }
[data-bs-theme="dark"] .table .badge.bg-success { color: #56d364 !important; border-color: #56d364 !important; }
[data-bs-theme="dark"] .table .badge.bg-danger { color: #f85149 !important; border-color: #f85149 !important; }
[data-bs-theme="dark"] .table .badge.bg-info { color: #41b4d0 !important; border-color: #41b4d0 !important; }

/* 4.5 底部頁碼區塊暗化 (包含一般按鈕與 Auth Logs 的灰階按鈕) */
[data-bs-theme="dark"] .page-link, [data-bs-theme="dark"] .page-link-gray { background-color: #252526 !important; border-color: #333 !important; color: #c9d1d9 !important; }
[data-bs-theme="dark"] .page-item.active .page-link, [data-bs-theme="dark"] .page-item.active .page-link-gray { background-color: #4a627a !important; color: #fff !important; border-color: #4a627a !important; }
[data-bs-theme="dark"] .page-link:hover, [data-bs-theme="dark"] .page-link-gray:hover { background-color: #333 !important; color: #fff !important; }

/* 4.6 🎨 解決操作按鈕 (編輯/停用/刪除) 在深色模式下太暗的問題 */
[data-bs-theme="dark"] .btn-outline-primary { color: #8ab4f8 !important; border-color: #8ab4f8 !important; }
[data-bs-theme="dark"] .btn-outline-primary:hover, [data-bs-theme="dark"] .btn-outline-primary:focus { background-color: #8ab4f8 !important; color: #212529 !important; }
[data-bs-theme="dark"] .btn-outline-info { color: #41b4d0 !important; border-color: #41b4d0 !important; }
[data-bs-theme="dark"] .btn-outline-info:hover, [data-bs-theme="dark"] .btn-outline-info:focus { background-color: #41b4d0 !important; color: #212529 !important; }

/* =========================================================
   5. 表單設定頁面與輸入框 (Settings & Forms) 通用適配
   ========================================================= */
/* 大型切換開關 (Form Switch Large) */
.form-switch-lg .form-check-input { width: 3rem; height: 1.5rem; cursor: pointer; margin-top: 0.15rem; }
.form-switch-lg .form-check-label { font-size: 1.1rem; cursor: pointer; padding-top: 0.15rem; }

/* 提醒天數專用小輸入框 */
.day-input { 
    width: 60px; 
    height: 35px; 
    border: 1px solid #ced4da; 
    border-radius: 4px; 
    text-align: center; 
    font-weight: bold; 
}

/* 設定說明文字 (Setting Description) */
.setting-desc { 
    font-size: 0.9rem; 
    color: #6c757d; 
    margin-top: 0.25rem; 
    margin-left: 4.2rem; /* 完美對齊開關的縮排距離 */
    /* 強制指定現代黑體，防止 Windows 降級為新細明體 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft JhengHei", sans-serif;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* 🌙 護眼模式：表單輸入框、下拉選單與天數輸入框底色 */
[data-bs-theme="dark"] .form-control, 
[data-bs-theme="dark"] .form-select, 
[data-bs-theme="dark"] textarea,
[data-bs-theme="dark"] .day-input { 
    background-color: #222222 !important; 
    color: #e6edf3 !important; 
    border-color: #444444 !important; 
}
[data-bs-theme="dark"] .form-control:focus, 
[data-bs-theme="dark"] .form-select:focus,
[data-bs-theme="dark"] .day-input:focus { 
    background-color: #2a2a2a !important; 
    border-color: #8ab4f8 !important; 
    box-shadow: 0 0 0 0.25rem rgba(138, 180, 248, 0.25) !important; 
}

/* 🌙 護眼模式：設定說明文字與其餘彩色文字 (紅/綠/黃) 強制提亮 */
[data-bs-theme="dark"] .setting-desc { color: #8b949e !important; }
[data-bs-theme="dark"] .text-success { color: #56d364 !important; }
[data-bs-theme="dark"] .text-danger { color: #f85149 !important; }
[data-bs-theme="dark"] .text-warning { color: #e3b341 !important; }

/* 🌙 護眼模式：擴充 bg-light 到所有卡片內容與提示區塊 */
[data-bs-theme="dark"] .card-body.bg-light,
[data-bs-theme="dark"] .alert-info.bg-light,
[data-bs-theme="dark"] .bg-light { 
    background-color: rgba(255, 255, 255, 0.03) !important; 
    color: #c9d1d9 !important; 
    border-color: #333 !important; 
}

/* 🌙 護眼模式：輸入框的高亮彩色邊框適配 */
[data-bs-theme="dark"] .border-primary { border-color: #8ab4f8 !important; }
[data-bs-theme="dark"] .border-danger { border-color: #f85149 !important; }
[data-bs-theme="dark"] .border-warning { border-color: #e3b341 !important; }
[data-bs-theme="dark"] .border-success { border-color: #56d364 !important; }
[data-bs-theme="dark"] .border-info { border-color: #41b4d0 !important; }


/* =========================================================
   6. SweetAlert2 與 終端機日誌 (Log) 模組全域適配
   ========================================================= */
/* 6.1 明亮模式 (預設) 的終端機方塊與字體顏色 */
.terminal-log-box {
    background-color: #f8f9fa;
    color: #212529;
    border: 1px solid #dee2e6;
}
.terminal-server { color: #0dcaf0; font-weight: bold; }
.terminal-client { color: #ffc107; font-weight: bold; }
.terminal-error  { color: #dc3545; font-weight: bold; }

/* 6.2 🌙 護眼模式 (Dark Mode)：SweetAlert2 本體暗化 */
[data-bs-theme="dark"] .swal2-popup {
    background-color: #1e1e1e !important;
    border: 1px solid #444444 !important;
}
[data-bs-theme="dark"] .swal2-title {
    color: #e6edf3 !important;
}
[data-bs-theme="dark"] .swal2-html-container {
    color: #c9d1d9 !important;
}
[data-bs-theme="dark"] .swal2-close {
    color: #c9d1d9 !important;
}
[data-bs-theme="dark"] .swal2-close:hover {
    color: #ffffff !important;
}

/* 6.3 🌙 護眼模式 (Dark Mode)：終端機方塊與字體顏色提亮 */
[data-bs-theme="dark"] .terminal-log-box {
    background-color: #0b0c10 !important;
    color: #d3d3d3 !important;
    border-color: #454a50 !important;
}
[data-bs-theme="dark"] .terminal-server { color: #41b4d0 !important; } /* 適配主題的亮青色 */
[data-bs-theme="dark"] .terminal-client { color: #e3b341 !important; } /* 適配主題的亮黃色 */
[data-bs-theme="dark"] .terminal-error  { color: #f85149 !important; } /* 適配主題的亮紅色 */

/* 6.4 🌙 護眼模式 (Dark Mode)：SweetAlert2 錯誤驗證訊息框暗化 */
[data-bs-theme="dark"] .swal2-validation-message {
    background-color: rgba(220, 53, 69, 0.1) !important;
    color: #f85149 !important;
    border: 1px solid #dc3545 !important;
    border-radius: 8px;
    font-weight: bold;
    font-size: 0.95rem;
}

/* 隱藏預設那個醜醜的驚嘆號圖示 (可選) */
[data-bs-theme="dark"] .swal2-validation-message::before {
    display: none !important;
}


/* =========================================================
   7. SSL 憑證狀態面板 (Status Panel) 專用
   ========================================================= */
.status-panel { border-left: 5px solid; }
.status-success { border-color: #198754; background-color: #d1e7dd; color: #0f5132; }
.status-danger { border-color: #dc3545; background-color: #f8d7da; color: #842029; }

/* 🌙 護眼模式：SSL 面板適配 */
[data-bs-theme="dark"] .status-success { 
    background-color: rgba(25, 135, 84, 0.1) !important; 
    color: #56d364 !important; 
    border-color: #198754 !important; 
}
[data-bs-theme="dark"] .status-danger { 
    background-color: rgba(220, 53, 69, 0.1) !important; 
    color: #f85149 !important; 
    border-color: #dc3545 !important; 
}

/* =========================================================
   8. 全域表單元素優化 (隱藏數字輸入框的上下箭頭)
   ========================================================= */
/* 隱藏 Chrome, Safari, Edge, Opera 的上下箭頭 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* 隱藏 Firefox 的上下箭頭 */
input[type="number"] {
    -moz-appearance: textfield;
}