/* 文件交換系統專屬藍色系現代風格 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&display=swap');

body {
    font-family: 'Noto Sans TC', Arial, sans-serif;
    background: linear-gradient(135deg, #e3f0ff 0%, #f8fafc 100%);
    color: #1a237e;
    padding-top: 56px;
}

.container {
    margin-top: 32px;
    max-width: 1800px;
}

.card {
    border-radius: 20px;
    box-shadow: 0 6px 32px rgba(33, 150, 243, 0.10), 0 2px 8px rgba(0,0,0,0.04);
    border: none;
    background: #fff;
    margin: 20px auto; /* 增加卡片的上下間距 */
    padding: 20px; /* 增加內邊距，讓內容更透氣 */
}

.card-title {
    font-weight: 700;
    color: #1976d2;
    letter-spacing: 1px;
    border-bottom: 2px solid #90caf9;
    padding-bottom: 0.5rem;
    margin-bottom: 1.2rem;
}

.btn-primary {
    background: linear-gradient(90deg, #1976d2 0%, #42a5f5 100%);
    border: none;
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    transition: background 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(33,150,243,0.08);
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(90deg, #1565c0 0%, #64b5f6 100%);
    box-shadow: 0 4px 16px rgba(33,150,243,0.12);
}

input.form-control, select.form-control, textarea.form-control {
    border-radius: 10px;
    border: 1.5px solid #90caf9;
    box-shadow: none;
    transition: border-color 0.2s;
    background: #f4faff;
}
input.form-control:focus, select.form-control:focus, textarea.form-control:focus {
    border-color: #1976d2;
    box-shadow: 0 0 0 2px #bbdefb;
}

.navbar {
    background: linear-gradient(90deg, #1976d2 0%, #42a5f5 100%);
    border-bottom: none;
    box-shadow: 0 2px 12px rgba(33,150,243,0.10);
}
.navbar-brand {
    font-weight: bold;
    font-size: 1.6rem;
    letter-spacing: 2px;
    color: #fff !important;
}
.nav-link, .navbar-nav .nav-link {
    color: #e3f2fd !important;
    font-weight: 500;
    letter-spacing: 1px;
}
.nav-link.active, .nav-link:focus, .nav-link:hover {
    color: #fff !important;
    text-decoration: underline;
}

.flash-messages .alert {
    border-radius: 10px;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(33,150,243,0.08);
}

/* 美化表格 */
table.table {
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}
table.table th {
    background: #bbdefb;
    color: #1565c0;
    font-weight: 700;
    font-size: 1.08rem;
    letter-spacing: 1px;
}
table.table td {
    background: #f4faff;
}

/* 調整卡片和表格的樣式以減少擁擠感 */
.card {
    margin: 20px auto; /* 增加卡片的上下間距 */
    padding: 20px; /* 增加內邊距，讓內容更透氣 */
}

.table-responsive {
    padding: 10px; /* 增加表格容器的內邊距 */
}

/* 調整表格列的最小寬度，避免文字擠在一起 */
.table th, .table td {
    min-width: 100px;
    word-wrap: break-word;
}

/* 小細節 */
.form-label {
    font-weight: 600;
    color: #1976d2;
}
.form-text {
    color: #1565c0;
}

::-webkit-scrollbar {
    width: 8px;
    background: #e3f2fd;
}
::-webkit-scrollbar-thumb {
    background: #90caf9;
    border-radius: 8px;
}

/* Loading 遮罩美化 */
#uploadLoadingMask {
    background: rgba(255,255,255,0.90);
    z-index: 9999;
}
#uploadLoadingMask .spinner-border {
    width: 3.5rem;
    height: 3.5rem;
    color: #1976d2;
}
#uploadLoadingMask .mt-3 {
    color: #1976d2;
    font-weight: 600;
    font-size: 1.2rem;
}

/* 自訂按鈕樣式，減少 Bootstrap 既視感 */
.btn {
    font-family: 'Noto Sans TC', Arial, sans-serif;
    font-size: 1.08rem;
    border-radius: 10px;
    padding: 0.5rem 1.5rem;
    box-shadow: 0 1px 4px rgba(33,150,243,0.06);
    border: none;
}

/* 卡片標題加底線 */
.card-title {
    border-bottom: 2px solid #90caf9;
    padding-bottom: 0.5rem;
    margin-bottom: 1.2rem;
}

/* 表單欄位間距 */
.form-group, .mb-3 {
    margin-bottom: 1.5rem !important;
}

/* 讓管理面板更現代化 */
.admin-dashboard-metrics .card {
    background: linear-gradient(120deg, #e3f2fd 0%, #fff 100%);
    border: 1.5px solid #bbdefb;
}

/* 管理用戶專頁專屬樣式 */
#manage-users-page .table td, #manage-users-page .table th {
    padding: 0.4rem;
}

#manage-users-page .btn {
    font-size: 0.9rem;
    padding: 0.1rem 0.25rem;
}

#all-archives-page .btn {
    font-size: 0.8rem;
    padding: 0.1rem 0.25rem;
}
/* 調整用戶名篩選 select2 下拉選單的樣式 */
#username-filter {
    min-width: 300px;
    max-width: 100%;
    padding: 0.3rem 0.5rem;
    font-size: 1rem;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(33,150,243,0.1);
    margin-bottom: 1rem;
}
/* 調整 select2 多選標籤間距 */
#username-filter + .select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin: 2px 6px 2px 0;
    font-size: 0.9rem;
    border-radius: 6px;
}

/* DataTables 分頁按鈕間距優化 */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    margin: 0 6px;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #90caf9;
    background-color: #f4faff;
    color: #1565c0 !important;
    cursor: pointer;
    user-select: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #1976d2;
    color: white !important;
    border-color: #1976d2;
}

/* DataTables 表格標題排序底線強調 */
table.dataTable thead th {
    border-bottom: 3px solid #1976d2 !important;
    position: relative;
    padding-right: 25px !important;
    cursor: pointer;
}

table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    margin-top: -6px;
    border: 6px solid transparent;
    opacity: 0.5;
}

table.dataTable thead th.sorting:after {
    border-bottom-color: #ccc;
}

table.dataTable thead th.sorting_asc:after {
    border-bottom-color: #1976d2;
    opacity: 1;
}
.filename-cell {
    max-width: 100%;
    padding: 0;
}

.filename-scroll {
    white-space: normal;
    word-break: break-all;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

#all-archives-page .filename-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#all-archives-page .filename-scroll::-webkit-scrollbar {
    width: 4px;
}

#all-archives-page .filename-scroll::-webkit-scrollbar-thumb {
    background: #90caf9;
    border-radius: 8px;
}

#all-archives-page .card-body {
    padding-left: 2rem;
    padding-right: 2rem;
}
#all-archives-page table.table td {
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

#all-archives-page table.table th {
    white-space: nowrap;
    vertical-align: middle;
}

#all-archives-page .btn {
    vertical-align: middle;
}
/* 調整 all-archives 頁面文件名水平滾輪高度 */
#all-archives-page .filename-scroll::-webkit-scrollbar {
    height: 4px;
    width: 4px;
}
#all-archives-page .filename-scroll::-webkit-scrollbar-thumb {
    background: #90caf9;
    border-radius: 8px;
}

table.dataTable thead th.sorting_desc:after {
    border-top-color: #1976d2;
    opacity: 1;
}

/* 調整 all-archives 頁面文件名滾輪寬度 */
#all-archives-page .filename-scroll::-webkit-scrollbar {
    width: 2px;
}
#all-archives-page .filename-scroll::-webkit-scrollbar-thumb {
    background: #90caf9;
    border-radius: 8px;
}

/* 調整 DataTables info 的樣式 */
.dataTables_info {
    margin-top: 10px; /* 增加上方間距 */
    font-size: 0.9rem; /* 調整字體大小 */
    color: #555; /* 修改文字顏色 */
}

/* 調整 DataTables 分頁按鈕和 info 區域的間距 */
.dataTables_wrapper .dataTables_info {
    margin-bottom: 20px; /* 增加下方間距，避免與分頁按鈕擠在一起 */
}

.dataTables_wrapper .dataTables_paginate {
    margin-top: 10px; /* 增加上方間距，讓分頁按鈕與其他內容分開 */
}

/* 調整 DataTables 每頁顯示選項的間距 */
.dataTables_wrapper .dataTables_length {
    margin-bottom: 20px; /* 增加下方間距，避免與其他元素擠在一起 */
}
/* === 文件上傳頁面 inline style 對應 class === */
.fs-095 { font-size: 0.95em !important; }
.upload-mask { display: none; position: fixed; z-index: 9999; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(255,255,255,0.7); }
.upload-mask-inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; }
.w-3rem { width: 3rem !important; }
.h-3rem { height: 3rem !important; }
/* === Admin 區常用 inline style 對應 class === */
.w-100 { width: 100% !important; }
.w-15 { width: 15% !important; }
.w-10 { width: 10% !important; }
.fs-22 { font-size: 2.2rem !important; }
.fs-15 { font-size: 1.5rem !important; }
.fs-108 { font-size: 1.08rem !important; }
.maxh-400 { max-height: 400px !important; overflow-y: auto !important; }
.maxh-600 { max-height: 600px !important; overflow-y: auto !important; }
.table-fixed { table-layout: fixed !important; }
/* === Documents 目錄常用 inline style 對應 class === */
.d-inline-block { display: inline-block !important; }
.d-inline { display: inline !important; }
.fs-095 { font-size: 0.95em !important; }
.fs-22 { font-size: 2.2rem !important; }
.h-40 { height: 40px !important; }
/* === Auth 目錄 inline style 對應 class === */
.d-none { display: none !important; }
.mr-10 { margin-right: 10px !important; }

/* 統一 select2 下拉選單字體與高度 */
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single {
    min-height: 38px;
    font-size: 1rem;
    line-height: 1.5;
    padding: 0.375rem 0.75rem;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 2.2;
}
.select2-container .select2-selection--multiple .select2-selection__rendered {
    line-height: 2.2;
}
.select2-container--default .select2-selection--single {
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
}
.select2-container--default .select2-selection--multiple {
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
}