/* =========================================
   1. 核心色票定義 (DCT Collection 奶茶風)
   ========================================= */
:root {
    /* 背景色：溫暖的米白/燕麥色 */
    --bg-color: #F9F7F2;

    /* 文字色：深咖啡 (取代死黑) */
    --text-main: #5A4A42;
    --text-muted: #9C8C74;

    /* 主色調 (原本的藍色 btn-primary)：經典駝色/奶茶色 */
    --primary-color: #C5A080;
    --primary-hover: #B08D6B;

    /* 成功色 (原本的綠色 btn-success)：莫蘭迪綠/鼠尾草綠 */
    --success-color: #8A9A8C;
    --success-hover: #738275;

    /* 警告色 (原本的紅色 btn-danger)：乾燥玫瑰/磚紅 */
    --danger-color: #D48888;
    --danger-hover: #BA7575;

    /* 線條與邊框 */
    --border-color: #E8E0D5;
    --card-radius: 16px;
}

/* =========================================
   2. 全站基礎設定
   ========================================= */
body {
    background-color: var(--bg-color) !important;
    color: var(--text-main) !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 0.5px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-main);
    font-weight: 600;
}

/* 連結文字顏色 */
a {
    color: var(--primary-color);
    text-decoration: none;
}

a:hover {
    color: var(--primary-hover);
}

/* =========================================
   3. 消除 Bootstrap 原廠色 (按鈕整形)
   ========================================= */

/* 主按鈕 (原本是藍色，改奶茶色) */
.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff;
    border-radius: 50px;
    /* 橢圓按鈕比較優雅 */
    padding: 10px 24px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(197, 160, 128, 0.3);
    /* 柔和陰影 */
    transition: all 0.3s;
}

.btn-primary:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    transform: translateY(-2px);
}

/* 成功/存檔按鈕 (原本是鮮綠，改莫蘭迪綠) */
.btn-success {
    background-color: var(--success-color) !important;
    border-color: var(--success-color) !important;
    color: #fff;
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(138, 154, 140, 0.3);
}

.btn-success:hover {
    background-color: var(--success-hover) !important;
    border-color: var(--success-hover) !important;
}

/* 危險/刪除/未成交按鈕 (原本是鮮紅，改磚紅) */
.btn-danger {
    background-color: var(--danger-color) !important;
    border-color: var(--danger-color) !important;
    color: #fff;
    border-radius: 50px;
}

.btn-danger:hover {
    background-color: var(--danger-hover) !important;
    border-color: var(--danger-hover) !important;
}

/* 邊框按鈕 (未選中狀態) */
.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-success,
.btn-outline-danger {
    color: var(--text-muted) !important;
    border-color: var(--border-color) !important;
    background-color: #fff;
    border-radius: 12px;
    /* 方塊圓角 */
}

/* 選中狀態 (Radio/Checkbox) - 變成填滿的奶茶色 */
.btn-check:checked+.btn-outline-primary,
.btn-check:checked+.btn-outline-success,
.btn-check:checked+.btn-outline-danger,
.btn-check:checked+.selection-btn {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: white !important;
    box-shadow: 0 4px 10px rgba(197, 160, 128, 0.4);
    transform: translateY(-2px);
}

/* 管理後台的導覽列 (原本是死黑 bg-dark) -> 改成深咖啡 */
.bg-dark {
    background-color: #4A3B32 !important;
    /* 深咖啡色 */
}

/* =========================================
   4. 卡片與表單優化
   ========================================= */
.card {
    border: none;
    border-radius: var(--card-radius);
    box-shadow: 0 8px 20px rgba(90, 74, 66, 0.05);
    /* 極淡的暖色陰影 */
    background-color: #ffffff;
}

/* 輸入框優化 */
.form-control,
.form-select {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background-color: #FFFCF9;
    /* 極淡的米色底 */
    color: var(--text-main);
    padding: 12px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(197, 160, 128, 0.1);
    /* 聚焦時的光暈 */
}

/* =========================================
   5. 儀表板大按鈕 (您原本喜歡的這段)
   ========================================= */
.row.g-3 {
    --bs-gutter-x: 1.5rem;
}

.app-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border: 1px solid #F0EAE0;
    border-radius: 20px;
    padding: 30px 20px;
    text-decoration: none;
    color: var(--text-main) !important;
    font-weight: 600;
    letter-spacing: 1.5px;
    font-size: 1.1rem;
    box-shadow: 0 10px 25px rgba(197, 160, 128, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.app-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(197, 160, 128, 0.2);
    border-color: var(--primary-color);
}

.app-btn .icon-box {
    font-size: 2.5rem;
    margin-bottom: 15px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #F9F7F2;
    transition: all 0.3s ease;
}

/* 針對「新增客戶」的特別色 */
.btn-record .icon-box {
    color: #C5A080;
    background-color: rgba(197, 160, 128, 0.15);
}

/* 針對「每日心得」的特別色 */
.btn-report .icon-box {
    color: #8A9A8C;
    background-color: rgba(138, 154, 140, 0.15);
}

.app-btn:active {
    transform: scale(0.98);
}

/* 大按鈕選擇器 (add_record.php 用) */
.selection-btn {
    border: 1px solid #E8E0D5;
    background: white;
    color: var(--text-muted);
    padding: 12px;
    width: 100%;
    margin-bottom: 10px;
    border-radius: 12px;
    transition: all 0.2s;
    font-weight: 500;
}

/* =========================================
   6. 補完漏掉的 Bootstrap 顏色 (奶茶色系擴充)
   請貼在 style.css 的最下方
   ========================================= */

/* --- 修正「處理中」與「待簽收」的顏色 --- */

/* 1. Info (原本是亮藍色) -> 改為「迷霧灰藍」 (適合：處理中) */
.btn-info,
.bg-info {
    background-color: #AAB7B8 !important;
    /* 帶灰的藍色 */
    border-color: #AAB7B8 !important;
    color: #fff !important;
    /* 文字改白 */
}

.btn-info:hover {
    background-color: #8D9F9F !important;
    border-color: #8D9F9F !important;
}

/* 2. Warning (原本是亮黃色) -> 改為「蜂蜜芥末黃」 (適合：待簽收、門市收貨) */
.btn-warning,
.bg-warning {
    background-color: #E6C288 !important;
    /* 柔和的黃 */
    border-color: #E6C288 !important;
    color: #5A4A42 !important;
    /* 深咖啡文字 */
}

.btn-warning:hover {
    background-color: #D4B483 !important;
    /* 變深一點 */
    border-color: #D4B483 !important;
}

/* 3. Secondary (原本是灰色) -> 改為「暖灰/燕麥灰」 (適合：已完成、次要按鈕) */
.btn-secondary,
.bg-secondary {
    background-color: #B5B0A6 !important;
    border-color: #B5B0A6 !important;
}

.btn-secondary:hover {
    background-color: #A39D92 !important;
    border-color: #A39D92 !important;
}

/* --- 修正文字顏色 (讓文字不要出現亮藍亮紅) --- */

/* 讓 text-primary (標題/強調) 變成你的深奶茶色 */
.text-primary {
    color: var(--primary-color) !important;
}

/* 讓 text-success (金額/完成) 變成莫蘭迪綠 */
.text-success {
    color: var(--success-color) !important;
}

/* 讓 text-danger (錯誤/刪除) 變成磚紅色 */
.text-danger {
    color: var(--danger-color) !important;
}

/* 讓 text-muted (次要資訊) 變成暖灰色 */
.text-muted {
    color: #9C8C74 !important;
}

/* --- 修正 Badge (狀態標籤) 的圓角與間距 --- */
.badge {
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: 0.5em 0.8em;
    border-radius: 6px;
    /* 稍微方一點的圓角，比較有質感 */
}

/* =========================================
   7. 強力掃除殘餘藍色 (針對分頁籤與細節)
   請貼在 style.css 的最下方
   ========================================= */

/* --- A. 修正「分頁籤 (Tabs)」的藍色 --- */
/* 未選中的分頁文字 */
.nav-pills .nav-link {
    color: var(--text-muted) !important;
    /* 平常是灰色 */
    background-color: transparent !important;
}

/* 選中時 (原本是藍色背景) -> 改為奶茶色 */
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

/* --- B. 修正「外框按鈕 (Outline)」的藍色文字 --- */
/* Bootstrap 的 outline-primary 預設文字是藍色，要改掉 */
.btn-outline-primary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* 滑鼠移過去變成填滿時 */
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

/* --- C. 修正「文字」與「連結」的殘餘藍色 --- */
/* 強制所有 .text-primary (例如任務類型的標題) 變色 */
.text-primary {
    color: var(--primary-color) !important;
}

/* 強制所有一般連結變色 */
a {
    color: var(--primary-color);
    text-decoration: none;
}

a:hover {
    color: var(--primary-hover);
}

/* --- D. 修正「輸入框聚焦」時的藍色光暈 --- */
/* 點擊輸入框或按鈕時，原本會有一圈藍光，改為奶茶色光暈 */
.form-control:focus,
.form-select:focus,
.btn-check:focus+.btn,
.btn:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.25rem rgba(197, 160, 128, 0.25) !important;
    /* 奶茶色透明光暈 */
}

/* --- E. 針對 add_task.php 的按鈕再次加強 --- */
/* 如果主要按鈕還是藍色，這條規則會強制覆蓋 */
.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

/* =========================================
   8. 補漏網之魚：強制覆寫 Bootstrap 背景工具類別
   ========================================= */

/* 修正像 badge bg-primary 這種標籤 */
.bg-primary {
    background-color: var(--primary-color) !important;
    color: #fff !important;
    /* 確保文字是白色 */
}

/* 如果有用到 bg-success (例如門市已收的標籤) */
.bg-success {
    background-color: var(--success-color) !important;
    color: #fff !important;
}

/* 如果有用到 bg-danger (例如錯誤標籤) */
.bg-danger {
    background-color: var(--danger-color) !important;
    color: #fff !important;
}

/* 修正 add_task.php 這種獨立頁面的按鈕 (雙重保險) */
button.btn-primary,
a.btn-primary,
input[type="submit"].btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

/* =========================================
   9. 首頁大按鈕專屬色 (任務追蹤 & 標準流程)
   ========================================= */
.app-btn.btn-task {
    background-color: #FFFCF9;
    border: 1px dashed var(--primary-color);
    color: var(--primary-color) !important;
}

.app-btn.btn-task .icon-box {
    color: var(--primary-color);
    background-color: rgba(197, 160, 128, 0.15);
}

.app-btn.btn-sop {
    background-color: #F9F7F2;
    border: 1px dashed #AAB7B8;
    color: #8D9F9F !important;
}

.app-btn.btn-sop .icon-box {
    color: #AAB7B8;
    background-color: rgba(170, 183, 184, 0.15);
}

/* =========================================
   10. SOP 閱讀狀態切換
   ========================================= */
.sop-unread {
    background-color: #FFFCF9 !important;
    color: var(--primary-color) !important;
}

.sop-read {
    background-color: var(--bg-color) !important;
    color: var(--text-muted) !important;
}

/* =========================================
   11. 徹底消除手風琴 (Accordion) 點擊與展開的預設藍色
   ========================================= */

/* 消除展開時底部的預設陰影 */
.accordion-button:not(.collapsed) {
    box-shadow: none !important;
}

/* 消除點擊瞬間的「藍色光暈」，改成溫柔的奶茶色光暈 */
.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(197, 160, 128, 0.25) !important;
    border-color: var(--primary-color) !important;
}