/* ============================================================
 * 袁大钰工作管理系统 · 全局样式
 * Step 7 — UI 主题令牌 (003.md 第13节设计变量)
 * ============================================================ */

/* ─── CSS 设计令牌 (token) ─────────────────────────────────── */
:root {
  /* 品牌色 */
  --color-brand-cyan:    #06B6D4;
  --color-brand-aqua:    #3ECFEC;
  --color-action-primary:#006879;

  /* 页面/卡片/输入背景 */
  --color-page-bg:   #F5FAFC;
  --color-card-bg:   #FFFFFF;
  --color-input-bg:  #EFF5F7;
  --color-sub-bg:    #E9EFF1;

  /* 边框 */
  --color-border-primary:   #BCC9CD;
  --color-border-secondary: #E2E8F0;
  --color-border-lighter:   #E9EFF1;

  /* 文字 */
  --color-text-primary:   #161D1E;
  --color-text-secondary: #3C494C;
  --color-text-tertiary:  #6C797D;
  --color-text-placeholder:#BCC9CD;
  --color-text-disabled:  #94A3B8;

  /* 语义状态色 */
  --color-state-warning: #FFAD47;
  --color-state-danger:  #BA1A1A;

  /* 圆角 */
  --radius-input: 8px;
  --radius-card:  12px;
  --radius-pill:  9999px;

  /* 阴影 */
  --shadow-card:          0 1px 2px rgba(0,0,0,0.05);
  --shadow-button-primary:0 10px 15px -3px rgba(0,104,121,0.2), 0 4px 6px -4px rgba(0,104,121,0.2);
  --shadow-fab:           0 25px 50px -12px rgba(0,0,0,0.25);

  /* 字体 */
  --font-sans:   'MiSans', 'MiSans VF', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-number: 'Inter', system-ui, sans-serif;
}

/* ─── 基础重置 ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-tap-highlight-color: transparent; }

body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-primary);
  background-color: var(--color-page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── 数字字体类 ──────────────────────────────────────────── */
.font-number { font-family: var(--font-number); }

/* ─── 自定义滚动条 ────────────────────────────────────────── */
::-webkit-scrollbar           { width: 4px; height: 4px; }
::-webkit-scrollbar-track     { background: transparent; }
::-webkit-scrollbar-thumb     { background: var(--color-border-primary); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-disabled); }

/* ─── 通用过渡 ────────────────────────────────────────────── */
a, button { transition: color 150ms ease, background-color 150ms ease,
                         border-color 150ms ease, box-shadow 150ms ease, opacity 150ms ease; }

/* ─── 表单输入通用样式 ────────────────────────────────────── */
.form-input {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  background-color: var(--color-input-bg);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-input);
  font-size: 14px;
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  outline: none;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}
.form-input::placeholder { color: var(--color-text-placeholder); }
.form-input:focus {
  border-color: var(--color-brand-cyan);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(6,182,212,0.12);
}
textarea.form-input { height: auto; padding: 12px 16px; resize: vertical; }
select.form-input   { cursor: pointer; }

/* ─── 卡片 ────────────────────────────────────────────────── */
.card {
  background: var(--color-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border-lighter);
}

/* ─── 按钮 ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 20px; height: 48px;
  border-radius: var(--radius-input);
  font-size: 14px; font-weight: 600; font-family: var(--font-sans);
  cursor: pointer; border: none; outline: none;
  transition: background-color 150ms ease, box-shadow 150ms ease, transform 100ms ease;
}
.btn:active { transform: scale(0.975); }

.btn-primary {
  background: var(--color-action-primary);
  color: #fff;
  box-shadow: var(--shadow-button-primary);
}
.btn-primary:hover { background: #005566; }

.btn-secondary {
  background: #fff;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-secondary);
}
.btn-secondary:hover { background: var(--color-page-bg); }

.btn-aqua {
  background: var(--color-brand-aqua);
  color: var(--color-text-primary);
}
.btn-aqua:hover { background: #2cc4e0; }

.btn-danger {
  background: var(--color-state-danger);
  color: #fff;
}
.btn-danger:hover { background: #9c1515; }

.btn-sm { height: 36px; padding: 0 14px; font-size: 13px; }

/* ─── 状态胶囊 ────────────────────────────────────────────── */
.status-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 500; line-height: 1.6;
  white-space: nowrap;
}
.status-pending      { background: rgba(236,254,255,0.8); color: var(--color-brand-cyan); }
.status-inprogress   { background: rgba(62,207,236,0.15); color: #0e7a90; }
.status-feedback     { background: rgba(255,173,71,0.15);  color: #b06000; }
.status-scoring      { background: rgba(6,182,212,0.14);   color: #006879; }
.status-done         { background: var(--color-sub-bg);    color: var(--color-text-tertiary); }
.status-overdue      { background: rgba(186,26,26,0.1);    color: var(--color-state-danger); }
.status-overdue-done { background: rgba(255,173,71,0.15);  color: #8a4800; }

/* ─── 优先级左边框 ────────────────────────────────────────── */
.priority-low    { border-left: 3px solid var(--color-brand-cyan); }
.priority-medium { border-left: 3px solid var(--color-state-warning); }
.priority-high   { border-left: 3px solid var(--color-state-danger); }

/* ─── Toast 通知 ──────────────────────────────────────────── */
#toast-container {
  position: fixed; top: 16px; right: 16px; z-index: 9999;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  pointer-events: all;
  min-width: 240px; max-width: 320px;
  background: #fff;
  border-radius: var(--radius-card);
  padding: 12px 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
  border: 1px solid var(--color-border-secondary);
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px;
  animation: toastIn 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.toast.removing { animation: toastOut 0.2s ease forwards; }
@keyframes toastIn  { from { transform: translateX(110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastOut { to   { transform: translateX(110%); opacity: 0; } }

/* ─── 确认弹窗 ────────────────────────────────────────────── */
.dialog-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(2px);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: fadeIn 0.15s ease;
}
.dialog-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  width: 100%; max-width: 360px;
  animation: scaleIn 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ─── 页面过渡占位 ────────────────────────────────────────── */
.page-fade-in { animation: fadeIn 0.2s ease; }

.task-card {
  animation: taskCardIn 0.22s ease;
}

@keyframes taskCardIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}