/* ============================================================
   ca_tokens.css — Coffee Alley 後台設計 token（單一真相來源）
   v1（2026-08-19）
   用法：<link rel="stylesheet" href="ca_tokens.css?v=1">
        （ca_filter.js 會在缺少時自動注入，故新頁面可省略）
   規則：共用元件與新頁面一律用 var(--ca-*)，不要再各自硬寫色碼／高度。
        既有頁面的舊 CSS 不動，逐步汰換即可。
   ============================================================ */
:root{
  /* ── 色彩：深焙咖啡色系 ── */
  --ca-ink:        #1A0A02;   /* 主文字 */
  --ca-ink-soft:   #5C3D1E;   /* 次級文字／品牌深色 */
  --ca-muted:      #8A7A6A;   /* 說明文字 */
  --ca-line:       #D1C9C0;   /* 控制項邊框 */
  --ca-line-soft:  #E5DBCC;   /* 分隔線 */
  --ca-surface:    #FFFFFF;   /* 卡片底 */
  --ca-bg:         #F7F2EA;   /* 頁面底 */
  --ca-hover:      #F5EDE4;   /* hover 底色 */
  --ca-brand:      #5C3D1E;   /* 主色（主要按鈕底） */
  --ca-accent:     #7C5C3E;   /* 次色（圖示） */
  --ca-on-brand:   #FFFFFF;

  /* ── 語意色 ── */
  --ca-ok:      #15803D;
  --ca-warn:    #B45309;
  --ca-danger:  #B91C1C;
  --ca-info:    #1D4ED8;

  /* ── 尺寸 ── */
  --ca-control-h: 32px;       /* 所有輸入框／下拉／按鈕同高 */
  --ca-radius:    6px;
  --ca-radius-lg: 12px;
  --ca-gap:       8px;
  --ca-gap-lg:    12px;

  /* ── 字體 ── */
  --ca-font:      'Noto Sans TC', sans-serif;
  --ca-font-mono: 'DM Mono', monospace;
  --ca-font-brand:'DM Serif Display', serif;
  --ca-fs-label:  12px;       /* 欄位標籤 */
  --ca-fs-control:13px;       /* 控制項內文 */
  --ca-fs-sm:     11.5px;
}

/* ============================================================
   篩選列骨架（新頁面直接套；舊頁面沿用自己的 class 也能被 ca_filter.js 接管）
   結構：
   <div class="ca-fbar">
     <div class="ca-field"><label class="ca-label">分店</label><select class="ca-input">…</select></div>
     …
     <div class="ca-actions"><button class="ca-btn primary">查詢</button></div>
   </div>
   ============================================================ */
.ca-fbar{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--ca-gap-lg);
  background:var(--ca-surface); border:1px solid var(--ca-line-soft);
  border-radius:var(--ca-radius-lg); padding:12px 14px; margin-bottom:var(--ca-gap-lg);
}
.ca-field{ display:flex; flex-direction:column; gap:4px; }
.ca-label{ font-size:var(--ca-fs-label); color:var(--ca-muted); font-weight:600; }
.ca-input,.ca-fbar select,.ca-fbar input[type=text],.ca-fbar input[type=date]{
  height:var(--ca-control-h); box-sizing:border-box;
  border:1px solid var(--ca-line); border-radius:var(--ca-radius);
  padding:0 10px; font-size:var(--ca-fs-control); font-family:inherit;
  color:var(--ca-ink); background:var(--ca-surface);
}
/* 動作區一律推到最右（全站規範） */
.ca-actions{ display:flex; align-items:center; gap:var(--ca-gap); margin-left:auto; }
.ca-btn{
  display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  height:var(--ca-control-h); padding:0 14px; box-sizing:border-box;
  border:1px solid var(--ca-line); border-radius:var(--ca-radius);
  background:var(--ca-surface); color:var(--ca-ink-soft);
  font-size:var(--ca-fs-control); font-family:inherit;
  transition:background .12s,border-color .12s;
}
.ca-btn:hover{ background:var(--ca-hover); border-color:var(--ca-accent); }
.ca-btn.primary{ background:var(--ca-brand); border-color:var(--ca-brand); color:var(--ca-on-brand); }
.ca-btn.primary:hover{ opacity:.9; background:var(--ca-brand); }

/* 條件摘要列 */
.ca-sum{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  font-size:var(--ca-fs-sm); color:var(--ca-muted);
  margin:-6px 0 var(--ca-gap-lg); padding:0 2px;
}
.ca-sum b{ color:var(--ca-ink-soft); font-weight:600; }
.ca-sum .ca-sum-dot{ color:var(--ca-line); }