/* =====================================================================
   Miro 设计系统样式层
   来源：tmp_source/awesome-design/Miro_DESIGN.md（version: alpha）
   用途：为 html/ 下三个页面提供 Miro 风格视觉 token 与组件。
   覆盖策略：
     1) 静态 HTML 直接使用下方 m-* 组件类；
     2) JS 动态生成元素（模板字符串）一律不改 JS，
        用「作用域选择器 + !important」覆盖规则换皮。
   优先级：本文件 <link> 置于 Tailwind CDN 与页面内联 <style> 之后。
   ===================================================================== */

/* ========== Design Tokens ========== */
:root {
  /* Colors */
  --m-primary: #1c1c1e;
  --m-charcoal: #2c2c34;
  --m-on-primary: #ffffff;
  --m-brand-yellow: #ffd02f;
  --m-yellow-deep: #fcb900;
  --m-yellow-light: #fff4c4;
  --m-yellow-dark: #746019;
  --m-brand-blue: #4262ff;
  --m-blue-pressed: #2a41b6;
  --m-coral-light: #ffc6c6;
  --m-coral-dark: #600000;
  --m-rose-light: #fde0f0;
  --m-teal: #0fbcb0;
  --m-teal-light: #c3faf5;
  --m-moss-dark: #187574;
  --m-success: #00b473;
  --m-canvas: #ffffff;
  --m-surface: #f7f8fa;
  --m-surface-yellow: #fff8e0;
  --m-surface-purple: #f5f3ff;
  --m-hairline: #e0e2e8;
  --m-hairline-soft: #eef0f3;
  --m-hairline-strong: #c7cad5;
  --m-ink: #1c1c1e;
  --m-ink-deep: #050038;
  --m-slate: #555a6a;
  --m-steel: #6b6f7e;
  --m-stone: #8e91a0;
  --m-muted: #a5a8b5;
  --m-footer-bg: #1c1c1e;
  --m-on-dark-muted: #a5a8b5;

  /* Rounded */
  --m-r-md: 8px;
  --m-r-lg: 12px;
  --m-r-xl: 16px;
  --m-r-xxl: 20px;
  --m-r-xxxl: 28px;
  --m-r-feature: 32px;
  --m-r-full: 9999px;

  /* Elevation */
  --m-elev-1: rgba(5, 0, 56, 0.04) 0px 1px 2px 0px;
  --m-elev-2: rgba(5, 0, 56, 0.06) 0px 4px 12px 0px;
  --m-elev-3: rgba(5, 0, 56, 0.08) 0px 12px 32px -4px;
  --m-elev-4: rgba(5, 0, 56, 0.12) 0px 16px 48px -8px;

  /* Typography */
  --m-font: "Roobert PRO", "Noto Sans", -apple-system, BlinkMacSystemFont,
            "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --m-font-cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

/* ========== 全局字体：全站无衬线（Roobert PRO fallback 链） ========== */
body, h1, h2, h3, h4, h5, .font-brand, .font-num,
input, select, textarea, button {
  font-family: var(--m-font) !important;
}

/* ========== 组件类 ========== */

/* 主按钮：黑色 pill（button-primary） */
.m-btn-primary {
  background: var(--m-primary) !important;
  color: var(--m-on-primary) !important;
  border: 1px solid var(--m-primary) !important;
  border-radius: var(--m-r-full) !important;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  transition: background .15s ease;
  cursor: pointer;
}
.m-btn-primary:hover { background: var(--m-charcoal) !important; }
.m-btn-primary:disabled {
  background: var(--m-hairline) !important;
  color: var(--m-muted) !important;
  border-color: var(--m-hairline) !important;
  cursor: not-allowed;
}

/* 次级按钮：描边 pill（button-secondary） */
.m-btn-secondary {
  background: transparent !important;
  color: var(--m-ink) !important;
  border: 1px solid var(--m-hairline-strong) !important;
  border-radius: var(--m-r-full) !important;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  transition: border-color .15s ease, color .15s ease;
  cursor: pointer;
}
.m-btn-secondary:hover { border-color: var(--m-ink) !important; }
.m-btn-secondary:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* 危险按钮：珊瑚描边 pill（清空/删除类） */
.m-btn-danger {
  background: transparent !important;
  color: var(--m-coral-dark) !important;
  border: 1px solid var(--m-coral-light) !important;
  border-radius: var(--m-r-full) !important;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
}
.m-btn-danger:hover { background: var(--m-coral-light) !important; }

/* 成功按钮：绿色 pill（确认/采纳类） */
.m-btn-success {
  background: var(--m-success) !important;
  color: var(--m-on-primary) !important;
  border: 1px solid var(--m-success) !important;
  border-radius: var(--m-r-full) !important;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
}
.m-btn-success:hover { background: #00935e !important; }

/* 幽灵按钮：无边框矩形（调整日志/版本管理等次要动作） */
.m-btn-ghost {
  background: transparent !important;
  color: var(--m-ink) !important;
  border: 1px solid var(--m-hairline) !important;
  border-radius: var(--m-r-md) !important;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
}
.m-btn-ghost:hover { background: var(--m-surface) !important; }

/* 卡片：白底 + hairline-soft 边框 */
.m-card {
  background: var(--m-canvas);
  border: 1px solid var(--m-hairline-soft);
  border-radius: var(--m-r-xl);
}

/* 输入框 */
.m-input {
  background: var(--m-canvas);
  color: var(--m-ink);
  border: 1px solid var(--m-hairline-strong);
  border-radius: var(--m-r-md);
  padding: 8px 16px;
  height: 44px;
  font-size: 14px;
  line-height: 1.5;
  box-sizing: border-box;
}
.m-input:focus {
  outline: none;
  border: 2px solid var(--m-brand-blue);
  padding: 7px 15px;
}

/* 徽章体系（对应 badge-promo / badge-tag-* / badge-success） */
.m-badge {
  display: inline-block;
  border-radius: var(--m-r-full);
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.m-badge-yellow { background: var(--m-brand-yellow); color: var(--m-primary); }
.m-badge-tag-yellow { background: var(--m-surface-yellow); color: var(--m-yellow-dark); }
.m-badge-tag-purple { background: var(--m-surface-purple); color: var(--m-brand-blue); }
.m-badge-tag-coral { background: var(--m-coral-light); color: var(--m-coral-dark); }
.m-badge-tag-teal { background: var(--m-teal-light); color: var(--m-moss-dark); }
.m-badge-success { background: var(--m-success); color: var(--m-on-primary); }
.m-badge-gray { background: var(--m-surface); color: var(--m-steel); }

/* ========== 动态元素覆盖规则（JS 模板生成，不改 JS） ========== */

/* ---- 右上角登录状态（index.html auth-box，JS renderGuest/renderUser 生成） ---- */
#auth-box button.bg-sky-500 {
  background: var(--m-primary) !important;
  border-radius: var(--m-r-full) !important;
  border: 1px solid var(--m-primary) !important;
}
#auth-box button.bg-sky-500:hover { background: var(--m-charcoal) !important; }
#auth-box button.border {
  border-radius: var(--m-r-full) !important;
  border-color: var(--m-hairline-strong) !important;
}

/* ---- Tab 导航（medical_schedule.html）---- */
.tab-btn {
  background: var(--m-canvas) !important;
  color: var(--m-steel) !important;
  border: 1px solid var(--m-hairline) !important;
  border-radius: var(--m-r-full) !important;
}
.tab-btn.active {
  background: var(--m-primary) !important;
  color: var(--m-on-primary) !important;
  border-color: var(--m-primary) !important;
}
/* 移动端底部导航：无边框、激活黑 pill */
.bottom-nav .tab-btn {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--m-steel) !important;
}
.bottom-nav .tab-btn.active {
  background: var(--m-primary) !important;
  color: var(--m-on-primary) !important;
  border-radius: var(--m-r-full) !important;
  border: none !important;
}

/* ---- 弹窗内按钮（modal-body，JS 生成）---- */
/* 主操作（保存/确认/添加类）→ 黑色 pill */
#modal-body button.bg-sky-500,
#modal-body button.bg-blue-500,
#modal-body button.bg-teal-600,
#modal-body button.bg-indigo-500,
#modal-body button.bg-amber-500,
#modal-body button.bg-emerald-500 {
  background: var(--m-primary) !important;
  color: var(--m-on-primary) !important;
  border: 1px solid var(--m-primary) !important;
  border-radius: var(--m-r-full) !important;
}
#modal-body button.bg-sky-500:hover,
#modal-body button.bg-blue-500:hover,
#modal-body button.bg-teal-600:hover,
#modal-body button.bg-indigo-500:hover,
#modal-body button.bg-amber-500:hover,
#modal-body button.bg-emerald-500:hover { background: var(--m-charcoal) !important; }
/* 取消/次级 → 描边 pill */
#modal-body button.border,
#modal-body button.bg-slate-100 {
  background: transparent !important;
  color: var(--m-ink) !important;
  border: 1px solid var(--m-hairline-strong) !important;
  border-radius: var(--m-r-full) !important;
}
#modal-body button.border:hover,
#modal-body button.bg-slate-100:hover { border-color: var(--m-ink) !important; }

/* ---- 流程引导条 step-bar（JS 生成）---- */
#step-bar .bg-sky-500 { background: var(--m-primary) !important; }
#step-bar .bg-blue-500 { background: var(--m-success) !important; }

/* ---- 空状态插画圆块（emptyState，JS 生成）---- */
div.w-20.rounded-2xl.bg-sky-50 { background: var(--m-surface-yellow) !important; }

/* ---- 值班均衡柱状图（JS 生成，渐变 → 纯品牌色）---- */
div.w-6.rounded-t.bg-gradient-to-t { background: var(--m-teal) !important; }

/* ---- 弹窗浮层：Miro modal elevation ---- */
#modal-body { border-radius: var(--m-r-xxl) !important; }
.modal-mask { background: rgba(5, 0, 56, .45) !important; }

/* ---- 排班表：Q4 保留业务样式，仅统一字体/边框圆角 ---- */
.sched-table th, .sched-table td { border-color: var(--m-hairline) !important; }
.sched-table td.sticky-col, .sched-table th.sticky-col { background: var(--m-surface) !important; }

/* ---- 快捷下拉菜单（quick-pick / sp-emp-list 浮动列表）---- */
.quick-pick { border-radius: var(--m-r-lg) !important; border-color: var(--m-hairline) !important; }
#sp-emp-list { border-radius: var(--m-r-lg) !important; border-color: var(--m-hairline-strong) !important; }

/* ---- 卡片 hover：Miro elevation 3（替代 sky 光晕）---- */
.entry-card:hover { box-shadow: var(--m-elev-3) !important; }