/* 文件路徑: /var/www/html/ob/assets/css/admin.css */

/*
* 該文件專用於後台介面佈局、卡片、置中表單和列表的樣式。
* 基礎顏色和字體樣式請在 global.css 中定義。
*/


/* ====================================
   1. 通用置中容器 (用於表單和列表頁面)
   ==================================== */

/* 用於所有單頁表單 (登入、設定、新增/編輯用戶) */
.centered-form-container {
    max-width: 750px; /* 增加寬度以容納水平多欄位 */
    margin: 50px auto; /* 關鍵：上下 50px，左右 auto 實現水平置中 */
    padding: 30px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 用於所有列表頁面 (用戶列表、收發件列表、報表等) */
.centered-list-container {
    max-width: 1200px; 
    margin: 30px auto; /* 實現置中 */
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}


/* ====================================
   2. 儀表板卡片佈局
   ==================================== */

.data-card-container {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* 卡片間距 */
    margin-bottom: 30px;
}

.dashboard-card { 
    flex-basis: 32%; /* 三個卡片平均分配空間 */
    padding: 20px; 
    border-radius: 8px; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
    background-color: white; 
    text-align: center; 
    border: 1px solid #eee;
}

.data-value { 
    font-size: 36px; 
    font-weight: bold; 
    margin: 10px 0; 
}


/* ====================================
   3. 表單佈局 (用於用戶表單、設定表單等)
   ==================================== */

/* 用於水平排列多個輸入欄位 */
.form-row {
    display: flex;
    flex-wrap: wrap; 
    gap: 20px; 
    margin-bottom: 20px;
}

.form-group {
    /* 讓 label 和 input 垂直排列 */
    display: flex;
    flex-direction: column; 
}

/* 輸入框樣式通用設定 */
input[type="text"], 
input[type="password"],
input[type="email"],
select,
textarea {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box; /* 確保 padding 不影響寬度計算 */
}

/* 確保全寬輸入框在容器內正確佔用空間 */
.full-width-input {
    width: 100%;
}


/* ====================================
   4. 數據表格樣式 (用於 user_list, receive_list)
   ==================================== */

.data-table {
    width: 100%;
    border-collapse: collapse; 
    margin-top: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.data-table th, .data-table td {
    border: 1px solid #ddd;
    padding: 12px 15px;
    text-align: left;
    vertical-align: middle;
}

.data-table th {
    background-color: #f8f8f8;
    color: #333;
    font-weight: bold;
}

.data-table tbody tr:hover {
    background-color: #f1f1f1;
}

/* --- 緊湊操作按鈕組 (解決按鈕換行和過大的問題) --- */
.action-group {
    display: flex; /* 啟用 Flexbox */
    gap: 4px; /* 按鈕間的微小間距 */
    justify-content: center; /* 讓整個群組在單元格內置中 */
    align-items: center;
}

/* 調整 btn-sm 樣式 */
.btn-sm {
    padding: 4px 8px; /* 縮小按鈕尺寸 */
    font-size: 0.9em;
    white-space: nowrap; /* 防止按鈕內的文字換行 */
}


/* ====================================
   5. 訊息與警示條樣式
   ==================================== */

.alert-success {
    background-color: #d4edda;
    color: #155724;
    padding: 15px;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    margin-bottom: 20px;
    font-weight: bold;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    padding: 15px;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    margin-bottom: 20px;
    font-weight: bold;
}