/* ==========================================
   1. 基礎與字型設定
   ========================================== */
:root {
  /* 背景色 */
  --bg-main: #FAF8F5;
  --bg-surface: #FFFFFF;
  --bg-subtle: #F0EDE6;

  /* 側邊欄專屬色 (暖深褐色系) */
  --bg-sidebar: #3B3631; 
  --bg-sidebar-head: #2E2A25; 
  --border-sidebar: #524B44;

  /* 文字色 */
  --text-primary: #2B2B2B;
  --text-secondary: #595959;
  --text-muted: #8C8C8C;

  /* 品牌與按鈕 */
  --btn-primary-bg: #4A3F35;
  --btn-primary-text: #FFFFFF;
  --btn-hover: #63564A;

  /* 線條與邊框 */
  --border-light: #E6E2DA;
  --border-focus: #A69C8E;
  
  /* 點綴色（抹茶綠） */
  --accent-green: #8E9675;

  /* 字體家族 */
  --font-heading: "Noto Serif TC", "Songti TC", "Apple LiMin", "微軟正明體", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

body {
  background-color: var(--bg-main);
  color: var(--text-secondary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.8; 
  font-size: 16px;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--text-primary);
  font-weight: 700;
  letter-spacing: 0.06em; 
  line-height: 1.4; 
  margin-top: 0;
}

h1 { font-size: 2.25rem; margin-bottom: 1.5rem; }
h2 { font-size: 1.75rem; margin-bottom: 1.25rem; }
h3 { font-size: 1.35rem; margin-bottom: 1rem; }

p {
  margin-bottom: 1.5rem;
  letter-spacing: 0.03em;
}

.text-muted {
  color: var(--text-muted);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

button, .btn {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ==========================================
   2. UI 細節與捲軸美化
   ========================================== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }

/* 隱藏原生 color input 的外觀，只保留點擊功能 */
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: none; }

/* Vue 防閃爍機制 */
[v-cloak] { display: none !important; }

/* 訂貨單特定文字對齊 */
.text-justify-last { 
    text-align: justify; 
    text-align-last: justify; 
    display: inline-block; 
}

/* ==========================================
   3. 列印專屬設定 (@media print)
   ========================================== */
.print-exact { 
    print-color-adjust: exact; 
    -webkit-print-color-adjust: exact; 
}

@media print {
    @page { 
        size: A4 portrait; 
        margin: 2mm 10mm 10mm 10mm; /* 縮小上方邊界 */
    }
    
    /* 解除網頁版高度與捲軸限制，讓 PDF 能自動跨頁 */
    body, html, #app, main, .overflow-y-auto, .overflow-x-auto {
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
        display: block !important;
    }
    
    /* 釋放 PDF 容器固定寬高 */
    #pdf-content {
        width: 100% !important;
        min-height: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 防止重要元素被切斷 */
    .avoid-page-break { 
        page-break-inside: avoid !important; 
    }
}