/* 確保頁面內容夠長時，Footer 能穩穩在最下方 */
html, body {
    height: 100%;
    background-color: #121212 !important; /* 覆蓋 Bootstrap 預設，使用更深的純黑 */
}

body {
    display: flex;
    flex-direction: column;
}

/* 微調導覽列的黑，使其與背景有些微層次 */
.navbar.bg-dark {
    background-color: #1a1a1a !important;
}

/* 卡片黑底微調 */
.card.bg-dark {
    background-color: #1e1e1e !important;
}

/* 自訂強調色 */
.text-warning { color: #f39c12 !important; }
.text-info { color: #3498db !important; }
.btn-outline-info {
    color: #3498db;
    border-color: #3498db;
}
.btn-outline-info:hover {
    background-color: #3498db;
    color: #fff;
}
/* ==========================================
   後台卡片與表格：黑色磨砂玻璃質感 (Glassmorphism)
   ========================================== */

/* 1. 讓後台卡片變成半透明黑，並加上磨砂模糊效果 */
.card.bg-dark {
    background: rgba(20, 20, 20, 0.65) !important; /* 半透明純黑 */
    backdrop-filter: blur(12px); /* 磨砂模糊效果 */
    -webkit-backdrop-filter: blur(12px); /* 支援 Safari */
    border: 1px solid rgba(255, 255, 255, 0.08) !important; /* 邊緣微光增添立體感 */
}

/* 2. 強制把表格原本的灰藍底色抽掉，變成透明，讓底下的磨砂感透上來 */
.table-dark, 
.table-dark tbody tr td, 
.table-dark thead tr th {
    background-color: transparent !important; 
    border-bottom-color: rgba(255, 255, 255, 0.05) !important; /* 讓表格分隔線變暗變細緻 */
}

/* 3. 表格標題列 (thead) 稍微加深一點點，增加層次 */
.table-dark thead.table-active tr th {
    background-color: rgba(0, 0, 0, 0.4) !important;
}

/* 4. 滑鼠移過去 (Hover) 的高光微調 - 灰色半透明質感 */
.table-dark.table-hover tbody tr:hover > td, 
.table-dark.table-hover tbody tr:hover > th {
    background-color: rgba(255, 255, 255, 0.08) !important; /* 微微的半透明白灰亮光 */
    color: #ffffff !important; /* 確保字體還是清晰的白色 */
    transition: background-color 0.2s ease; /* 加上一點漸變動畫，看起來更滑順 */
}
/* ==========================================
   彈出視窗 (Modal)：黑色磨砂玻璃質感
   ========================================== */

/* 1. 讓視窗主體變成半透明純黑 + 磨砂模糊 */
.modal-content.bg-dark {
    background: rgba(20, 20, 20, 0.85) !important; /* 比卡片稍微不透明一點，確保文字清晰 */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important; /* 加深陰影產生立體浮空感 */
}

/* 2. 讓視窗內的輸入框 (Input) 也融入暗黑風格 */
.modal-content .form-control {
    background-color: rgba(0, 0, 0, 0.4) !important; /* 輸入框微透黑 */
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    transition: all 0.3s ease;
}

/* 3. 當點擊輸入框 (Focus) 時的高光發光效果 */
.modal-content .form-control:focus {
    background-color: rgba(0, 0, 0, 0.7) !important;
    border-color: #3498db !important; /* 科技藍邊框 */
    box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.25) !important; /* 科技藍光暈 */
}

/* 4. 微調視窗頭尾的分隔線，讓它更細緻 */
.modal-header.border-secondary, 
.modal-footer.border-secondary {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ==========================================
   前台側滑選單 (Offcanvas)：半邊螢幕與黑色磨砂質感
   ========================================== */
@media (max-width: 991.98px) { /* 在手機與平板模式下觸發 */
    .offcanvas {
        width: 50vw !important; /* 強制縮小為 1/2 螢幕寬度 */
        background: rgba(20, 20, 20, 0.90) !important; /* 暗黑磨砂感 */
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border-left: 1px solid rgba(255, 255, 255, 0.1) !important; /* 加上微光邊框提升立體感 */
    }
}