/* ============================================================================
   晟景科技 Scendia — CRM Design Tokens  ·  對齊 CIS v5.0
   來源：assets/cis.html（品牌識別指南 CIS v5.0）
   品牌基因：取自 logo 的「紫紅 × 青綠」漸層，落在溫潤的米白畫布上。
     晟紫 Scendia Magenta #8B158B（主色 / 重點 / 主按鈕）
     景青 Scendia Teal    #1F8E86（輔色 / 連結 / 高亮）
     漸層 Brand Gradient  120deg #1F8E86 → #6B4FB0 → #8B158B
     畫布 Cream           #F6F2EA（app 底）/ Paper #FCFAF5（卡片）
     墨   Ink             #2A2230（文字 / sidebar）
   字體哲學（CIS §05）：襯線承載編輯質感、黑體承載閱讀、等寬呼應工程 DNA。
     標題 = Noto Serif TC / Source Serif 4（襯線）
     內文 = Source Sans 3 / Noto Sans TC（黑體）
     標籤/數據 = JetBrains Mono（等寬）
   註：CIS v5.0 色票為「近似值，正式定稿以原始向量檔校正」。全站換色只改下方變數。
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400..600;1,8..60,400..500&family=Noto+Serif+TC:wght@400;500;600;700&family=Source+Sans+3:ital,wght@0,300..600;1,400&family=Noto+Sans+TC:wght@300;400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── 品牌原色（CIS v5.0，取自 logo）── */
  --scendia-magenta: #8B158B;
  --scendia-magenta-deep: #660F66;
  --scendia-magenta-hover: #57095a;
  --scendia-magenta-soft: #f4e3f1;     /* 淺紫底 / pill */
  --scendia-magenta-bg: #faf0f7;
  --scendia-teal: #1F8E86;
  --scendia-teal-deep: #14716A;
  --scendia-teal-hover: #0f5a55;
  --scendia-teal-soft: #cfe7e4;
  --scendia-teal-bg: #eaf4f3;
  --scendia-violet: #6B4FB0;            /* 漸層中段 / 點綴 */
  --brand-gradient: linear-gradient(120deg, #1F8E86 0%, #6B4FB0 52%, #8B158B 100%);

  /* ── 米白畫布 / 墨 ── */
  --paper: #FCFAF5;
  --cream: #F6F2EA;
  --cream-2: #EFEADF;
  --ink: #2A2230;
  --ink-2: #4C4452;
  --ink-soft: #3a3142;                  /* sidebar hover */
  --scendia-gray: #6F6675;
  --scendia-white: #ffffff;

  /* ── 語意對映（沿用既有變數名，向下相容，避免動 12 個模板）── */
  --brand-primary: var(--scendia-magenta);
  --brand-primary-hover: var(--scendia-magenta-deep);
  --brand-secondary: var(--scendia-teal);
  --brand-accent: var(--scendia-teal);
  /* 舊變數沿用 → 導到 v5.0 對應值（模板/JS 裡仍引用這些名字） */
  --scendia-navy: var(--ink);
  --scendia-navy-soft: var(--ink-soft);
  --scendia-purple: var(--scendia-magenta);
  --scendia-purple-soft: var(--scendia-magenta-soft);

  /* ── 背景 / 文字 / 邊框 ── */
  --bg-base: var(--paper);
  --bg-app: var(--cream);
  --bg-subtle: #F3EEE3;                 /* 卡片表頭 / 區塊底 */
  --bg-muted: var(--cream-2);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted: var(--scendia-gray);
  --text-on-brand: #ffffff;
  --border: #E8E1D5;
  --border-strong: #DBD2C4;

  /* ── 狀態色（皆暖化以融入米白，AA on 卡片底）── */
  --success: #1f7a52;
  --success-bg: #e7f1ea;
  --warning: #9a6a1c;
  --warning-bg: #f6ecd9;
  --danger:  #b3261e;
  --danger-bg: #f7e7e3;
  --info:    var(--scendia-teal-deep);
  --info-bg: var(--scendia-teal-bg);

  /* ── 字體（CIS §05）── */
  --font-body: 'Source Sans 3', 'Noto Sans TC', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-heading: 'Noto Serif TC', 'Source Serif 4', Georgia, serif;
  --font-serif-en: 'Source Serif 4', 'Noto Serif TC', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ── 形狀 / 陰影 / 版面（CIS 柔長陰影）── */
  --radius-sm: 7px;
  --radius: 11px;
  --radius-lg: 16px;
  --shadow-sm: 0 14px 32px -26px rgba(42, 34, 48, .30);
  --shadow-md: 0 20px 44px -30px rgba(42, 34, 48, .34);
  --shadow-lg: 0 30px 64px -42px rgba(42, 34, 48, .34);
  --sidebar-width: 252px;
  --topbar-height: 58px;
}

/* ── Bootstrap 變數對齊品牌（只覆寫變數，不改 Bootstrap 檔）── */
:root {
  --bs-primary: var(--scendia-magenta);
  --bs-primary-rgb: 139, 21, 139;
  --bs-link-color: var(--scendia-teal-deep);
  --bs-link-color-rgb: 20, 113, 106;
  --bs-link-hover-color: var(--scendia-teal-hover);
  --bs-body-color: var(--text-primary);
  --bs-body-bg: var(--cream);
  --bs-body-font-family: var(--font-body);
  --bs-border-color: var(--border);
  --bs-border-radius: var(--radius-sm);
}

/* ──────────────────────────────────────────────
   全域排版 — 襯線標題 / 黑體內文
   ────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-app);
  background-image:
    radial-gradient(46% 32% at 96% -2%, rgba(139, 21, 139, .045), transparent 60%),
    radial-gradient(42% 28% at 2% 102%, rgba(31, 142, 134, .05), transparent 60%);
  background-attachment: fixed;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.005em;
}

a {
  color: var(--scendia-teal-deep);
  text-decoration: none;
}
a:hover { color: var(--scendia-teal-hover); }

.text-muted { color: var(--text-muted) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger  { color: var(--danger)  !important; }
.text-info    { color: var(--info)    !important; }

/* 品牌漸層文字（標題重點字用） */
.grad-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 等寬小標 / eyebrow（呼應工程 DNA） */
.eyebrow, .mono { font-family: var(--font-mono); }

/* ──────────────────────────────────────────────
   按鈕 — 主按鈕＝晟紫實心、輔助＝景青
   ────────────────────────────────────────────── */
.btn {
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.btn-primary {
  background-color: var(--scendia-magenta);
  border-color: var(--scendia-magenta);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--scendia-magenta-deep) !important;
  border-color: var(--scendia-magenta-deep) !important;
  color: #fff !important;
}

.btn-outline-primary {
  color: var(--scendia-magenta);
  border-color: var(--scendia-magenta);
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
  background-color: var(--scendia-magenta) !important;
  border-color: var(--scendia-magenta) !important;
  color: #fff !important;
}

/* 次要動作＝景青（連結、排程、輔助操作） */
.btn-secondary {
  background-color: var(--scendia-teal-deep);
  border-color: var(--scendia-teal-deep);
  color: #fff;
}
.btn-secondary:hover, .btn-secondary:focus {
  background-color: var(--scendia-teal-hover) !important;
  border-color: var(--scendia-teal-hover) !important;
}

.btn-outline-secondary {
  color: var(--text-secondary);
  border-color: var(--border-strong);
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
  background-color: var(--bg-muted) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}

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

.btn-xs {
  padding: 2px 8px;
  font-size: 0.75rem;
  line-height: 1.4;
  border-radius: var(--radius-sm);
}

/* ──────────────────────────────────────────────
   表單
   ────────────────────────────────────────────── */
.form-control, .form-select {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: var(--paper);
  border-radius: var(--radius-sm);
}
.form-control:focus, .form-select:focus {
  border-color: var(--scendia-magenta);
  box-shadow: 0 0 0 .2rem rgba(139, 21, 139, .15);
}
.form-control::placeholder { color: var(--text-muted); }
.form-label {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--text-secondary);
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ──────────────────────────────────────────────
   卡片 — Paper 質感
   ────────────────────────────────────────────── */
.card {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card-header {
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--ink);
}
.modal-content {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.modal-header, .modal-footer { border-color: var(--border); }
.modal-title { font-family: var(--font-heading); }