:root {
    /* 改為極簡黑白配色 */
    --paper-bg: #ffffff;      /* 純白背景 */
    --deep-green: #000000;    /* 黑色：主視覺、按鈕、導覽 */
    --wood-brown: #333333;    /* 深灰：主要文字 */
    --ink-black: #000000;     /* 純黑：標題 */
    --accent-red: #ff0000;    /* 純紅：警示/報價金額 */
    --soft-border: #e0e0e0;   /* 淺灰邊框 */
    --quote-gray: #999999;
}

/* 確保圖片與內容不超出螢幕 */
img, canvas { max-width: 100%; height: auto !important; }

/* 容器寬度調整 */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* 手機版隱藏非必要元素 */
@media (max-width: 768px) {
    .dashboard-header { flex-direction: column; align-items: flex-start; gap: 20px; }
    .mini-stats { width: 100%; overflow-x: auto; padding-bottom: 10px; }
    .stats-grid { grid-template-columns: 1fr 1fr !important; } /* 統計卡片改兩欄 */
}

/* 針對導覽列的 RWD 修正 */
header nav {
    display: flex;
    flex-wrap: wrap; /* 讓選單在空間不足時自動換行 */
    justify-content: center;
    gap: 10px;
    padding: 10px;
}

header nav a {
    font-size: 14px; /* 手機版稍微縮小字體 */
    white-space: nowrap; /* 避免單個選項文字斷行 */
}

/* 針對螢幕寬度小於 600px 的特別調整 */
@media (max-width: 600px) {
    .quote-container {
        padding: 10px 0; /* 縮減容器間距，騰出更多空間給報價單 */
    }
    
    .table-responsive-desktop {
        width: 100%; /* 手機版佔滿螢幕寬度 */
        border-radius: 0; /* 移除圓角省空間 */
    }

    .quote-sheet {
        padding: 15px; /* 縮減報價單內邊距 */
        /* 保持原本的 min-width: 750px，確保表格內容不縮水 */
    }
}
body {
    background-color: #fff; 
    color: var(--wood-brown);
    /* 指定思源黑體 (Noto Sans TC) */
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

.container {
    background: #fff
    padding: 40px;
    min-height: 80vh;
    width: 95%;
    max-width: 1000px;
}

header h1 {
    font-size: 1.8rem;
    color: var(--ink-black);
    border-bottom: 2px solid var(--ink-black); /* 改為單線更加現代 */
    display: inline-block;
    margin-bottom: 30px;
    font-weight: 700;
}

/* 按鈕風格：純黑白 */
.btn {
    background: white;
    color: black;
    border: 1px solid black;
    padding: 6px 15px;
    cursor: pointer;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s;
    font-size: 0.9rem;
}

.btn:hover {
    background: black;
    color: white;
}

/* 數據卡片：黑白簡約 */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; }
.stat-card { 
    border: 1px solid var(--soft-border); 
    background: white; 
    padding: 20px; 
    transition: transform 0.2s;
}
.stat-card:hover { transform: translateY(-2px); border-color: black; }
.stat-card h3 { margin: 0; font-size: 0.85rem; color: #666; font-weight: 500; }
.stat-card p { margin: 10px 0 0 0; font-size: 1.5rem; font-weight: 700; color: black; }

/* 表格與狀態 */
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th { 
    background: #f8f8f8;
    border-bottom: 1px solid black; 
    text-align: left; 
    padding: 12px 10px; 
    color: black; 
    font-size: 0.9rem; 
    font-weight: 700;
}
td { padding: 15px 10px; border-bottom: 1px solid #eee; font-size: 0.95rem; }

.status-quote { color: var(--quote-gray); }
.status-making { color: black; font-weight: 700; }
.status-done { color: #666; text-decoration: line-through; }

/* 報價單專用：黑白印刷感 */
.quote-sheet { 
    background-color: white; 
    padding: 40px; 
    margin: 0 auto; 
    box-shadow: none; 
}
.active { background-color: black !important; color: white !important; }
@media (max-width: 768px) {
    /* 1. 隱藏表頭 */
    manage-table thead { display: none; }

    /* 2. 讓表格列變成獨立卡片 */
    manage-table tr {
        display: block;
        border: 1px solid #eee;
        border-radius: 8px;
        margin-bottom: 15px;
        padding: 10px;
        background: #fff;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    /* 3. 讓每個單元格變成一列 */
    manage-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px dashed #f0f0f0;
        padding: 8px 5px !important;
        text-align: right;
        font-size: 0.9rem;
    }


    /* 4. 使用偽元素加上標籤 (Label) */
    table td::before {
        content: attr(data-label); /* 這裡要在 HTML 補上 data-label */
        font-weight: bold;
        color: var(--deep-green);
        margin-right: auto;
        text-align: left;
    }
    
    /* 5. 針對管理欄位特別調整 */
    .manage-cell { width: 100%; justify-content: flex-end; }
}