/* ==========================================================================
   吃茶三千 CRM 基礎樣式 (base.css)
   Operate 模式 · 引用 tokens.css · 設計權威 DESIGN.md
   ========================================================================== */

/* 1. 字型定義 (@font-face)
   GenYoGothic2 TW 子集（SIL OFL），三個字重：Light 300, Regular 400, Medium 500
   微軟正黑體不得出現在 font-family
   ========================================================================== */
@font-face {
  font-family: "GenYoGothic TW";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/GenYoGothic2TW-L.subset.woff2") format("woff2");
}

@font-face {
  font-family: "GenYoGothic TW";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/GenYoGothic2TW-R.subset.woff2") format("woff2");
}

@font-face {
  font-family: "GenYoGothic TW";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/GenYoGothic2TW-M.subset.woff2") format("woff2");
}

/* 2. 全域排版 (Global Typography & Reset)
   Body: 16px / 1.7 / 1px letter-spacing
   Label: 14px / 500 / 1.4 / 1px letter-spacing
   Numeric: tabular-nums
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: var(--color-semantic-surface-default);
  color: var(--color-semantic-text-default);
  font-family: var(--font-semantic-body);
  font-size: var(--typography-semantic-body-font-size);
  font-weight: var(--typography-semantic-body-font-weight);
  line-height: var(--typography-semantic-body-line-height);
  letter-spacing: var(--typography-semantic-body-letter-spacing);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[hidden] {
  display: none !important;
}

::selection {
  background-color: var(--color-semantic-surface-raised);
  color: var(--color-semantic-text-default);
}

/* 標題階層 (Headings) */
h1, .t-display {
  font-family: var(--typography-semantic-display-font-family);
  font-size: var(--typography-semantic-display-font-size);
  font-weight: var(--typography-semantic-display-font-weight);
  line-height: var(--typography-semantic-display-line-height);
  letter-spacing: var(--typography-semantic-display-letter-spacing);
  color: var(--color-semantic-text-default);
  margin-top: 0;
  margin-bottom: var(--dimension-semantic-spacing-sm);
}

h2, .t-headline {
  font-family: var(--typography-semantic-headline-font-family);
  font-size: var(--typography-semantic-headline-font-size);
  font-weight: var(--typography-semantic-headline-font-weight);
  line-height: var(--typography-semantic-headline-line-height);
  color: var(--color-semantic-text-default);
  margin-top: 0;
  margin-bottom: var(--dimension-semantic-spacing-sm);
}

h3, h4 {
  font-family: var(--font-semantic-body);
  font-size: var(--typography-semantic-body-font-size);
  font-weight: var(--fontWeight-primitive-medium);
  line-height: 1.4;
  color: var(--color-semantic-text-default);
  margin-top: 0;
  margin-bottom: var(--dimension-semantic-spacing-xs);
}

p {
  margin-top: 0;
  margin-bottom: var(--dimension-semantic-spacing-md);
}

label, .t-label {
  font-family: var(--typography-semantic-label-font-family);
  font-size: var(--typography-semantic-label-font-size);
  font-weight: var(--typography-semantic-label-font-weight);
  line-height: var(--typography-semantic-label-line-height);
  letter-spacing: var(--typography-semantic-label-letter-spacing);
  color: var(--color-semantic-text-default);
}

.t-numeric, .num, [data-numeric], .tabular {
  font-family: var(--typography-semantic-numeric-font-family);
  font-variant-numeric: tabular-nums;
}

.muted, small.muted {
  color: var(--color-semantic-text-muted);
}

/* 3. 共用元件 (Common Components)
   ========================================================================== */

/* 按鈕共用屬性 */
button, .btn {
  font-family: var(--typography-semantic-label-font-family);
  font-size: var(--typography-semantic-label-font-size);
  font-weight: var(--typography-semantic-label-font-weight);
  line-height: var(--typography-semantic-label-line-height);
  min-height: 40px;
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, opacity 150ms ease;
}

button:disabled, .btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

/* 主要按鈕：綠底黑字、方角、40px 高 (Operate 密度) */
button.primary, .btn-primary {
  background-color: var(--color-semantic-action-primary);
  border: 1px solid var(--color-semantic-action-primary);
  border-radius: var(--dimension-semantic-radius-none);
  color: var(--color-semantic-text-on-action);
}

button.primary:hover:not(:disabled), .btn-primary:hover:not(:disabled) {
  background-color: var(--color-semantic-action-primary-hover);
  border-color: var(--color-semantic-action-primary-hover);
  color: var(--color-semantic-text-on-action);
}

/* 次要按鈕：白底黑框、方角 */
button.secondary, .btn-secondary {
  background-color: var(--color-semantic-surface-default);
  border: 1px solid var(--color-semantic-border-default);
  border-radius: var(--dimension-semantic-radius-none);
  color: var(--color-semantic-text-default);
}

button.secondary:hover:not(:disabled), .btn-secondary:hover:not(:disabled) {
  background-color: var(--color-semantic-surface-raised);
  border-color: var(--color-semantic-text-default);
  color: var(--color-semantic-text-default);
}

/* 文字連結：黑字底線 */
button.quiet, button.text-link, a.text-link {
  background: transparent;
  border: none;
  color: var(--color-semantic-text-default);
  text-decoration: underline;
  padding: 4px 8px;
  min-height: auto;
}

button.quiet:hover:not(:disabled), button.text-link:hover:not(:disabled), a.text-link:hover {
  background-color: var(--color-semantic-surface-raised);
}

a {
  color: var(--color-semantic-text-default);
  text-decoration: underline;
}

/* 輸入框與下拉選單：4px 圓角、40px 高 */
input, select, textarea {
  font-family: inherit;
  font-size: var(--typography-semantic-body-font-size);
  color: var(--color-semantic-text-default);
  background-color: var(--color-semantic-surface-default);
  border: 1px solid var(--color-semantic-border-default);
  border-radius: var(--dimension-semantic-radius-sm);
  padding: 8px 12px;
  min-height: 40px;
  width: 100%;
  transition: border-color 150ms ease, outline 150ms ease;
}

textarea {
  min-height: 80px;
  resize: vertical;
}

/* 表格 (Table)：表頭 surface.raised、數字靠右、選中列左側 4px 品牌綠標記 */
table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: var(--typography-semantic-label-font-size);
}

th {
  background-color: var(--color-semantic-surface-raised);
  font-family: var(--typography-semantic-label-font-family);
  font-size: var(--typography-semantic-label-font-size);
  font-weight: var(--typography-semantic-label-font-weight);
  color: var(--color-semantic-text-default);
  border-bottom: 1px solid var(--color-semantic-border-default);
  padding: 10px 14px;
  white-space: nowrap;
}

td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-semantic-surface-raised);
  color: var(--color-semantic-text-default);
}

th.num, td.num, th[data-numeric], td[data-numeric], .table-numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

tr:hover td {
  background-color: color-mix(in srgb, var(--color-semantic-text-default) 2%, transparent);
}

tr.selected td:first-child, tr[aria-selected="true"] td:first-child {
  box-shadow: inset 4px 0 var(--color-semantic-action-primary);
}

/* 4. 引言狀態區塊 (Callout Status Boxes)
   DESIGN.md：「狀態不另加色」
   - 正常／已完成：品牌綠圖示 (✓) ＋ 文字
   - 需注意／待更新：黑色警示圖示 (!) ＋ 文字；可用 surface.raised 底色區塊
   - 錯誤／阻擋：品牌紅圖示 (✕) ＋ 紅字
   - 未知／不可得：灰字「未知」或「—」，絕不顯示 0
   ========================================================================== */
.callout:empty,
.notice:empty {
  display: none !important;
}

.callout, .notice {
  padding: 12px 16px;
  border: 1px solid var(--color-semantic-border-default);
  background-color: var(--color-semantic-surface-default);
  color: var(--color-semantic-text-default);
  font-size: var(--typography-semantic-label-font-size);
  line-height: 1.5;
  margin-bottom: var(--dimension-semantic-spacing-md);
  display: flex;
  align-items: flex-start;
  gap: var(--dimension-semantic-spacing-sm);
}

/* 正常／已完成 */
.callout-normal, .status-normal, .callout-success {
  border-color: var(--color-semantic-border-default);
  background-color: var(--color-semantic-surface-default);
  color: var(--color-semantic-text-default);
}

.callout-normal::before, .status-normal::before, .callout-success::before {
  content: "✓";
  color: var(--color-semantic-action-primary);
  font-weight: bold;
  flex-shrink: 0;
}

/* 需注意／不完整／待更新 */
.callout-warning, .status-warning, .callout-notice, .action-note.note-pending, .action-note.note-masked {
  background-color: var(--color-semantic-surface-raised);
  border: 1px solid var(--color-semantic-border-default);
  color: var(--color-semantic-text-default);
}

.callout-warning::before, .status-warning::before, .callout-notice::before {
  content: "!";
  color: var(--color-semantic-text-default);
  font-weight: bold;
  flex-shrink: 0;
}

/* 錯誤／阻擋 */
.callout-error, .status-error, .notice.error, .cat-msg.error {
  border-color: var(--color-semantic-feedback-danger);
  background-color: var(--color-semantic-surface-default);
  color: var(--color-semantic-feedback-danger);
}

.callout-error::before, .status-error::before, .notice.error::before, .cat-msg.error::before {
  content: "✕";
  color: var(--color-semantic-feedback-danger);
  font-weight: bold;
  flex-shrink: 0;
}

/* 未知／不可得 */
.status-unknown, .val-unknown, .sx-unknown {
  color: var(--color-semantic-text-muted);
  font-style: normal;
}

/* 5. 焦點規範 (Focus 2px Black Border)
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--color-primitive-brand-black);
  outline-offset: 2px;
}

h1:focus,
h1:focus-visible,
h2:focus,
h2:focus-visible,
h3:focus,
h3:focus-visible,
[tabindex="-1"]:not(button):not(input):not(select):not(textarea):not(summary):not(a):focus,
[tabindex="-1"]:not(button):not(input):not(select):not(textarea):not(summary):not(a):focus-visible {
  outline: none;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-primitive-brand-black);
  outline-offset: 1px;
  border-color: var(--color-primitive-brand-black);
}

/* 6. 動態與 Reduced Motion (≤200ms)
   ========================================================================== */
button, input, select, textarea, a, .nav-item, .cat-tabs button {
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, opacity 150ms ease, box-shadow 150ms ease;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}