/*
 * ui.css — 关同学系统管理后台设计令牌 + 组件类(唯一来源)
 * 契约:设计规范-v1-2026-08-18.md 第二节。管理页引用本表,不再各自内联整套样式
 * (仅会议页 p4 因全屏特殊布局允许保留自有局部样式,不受本文件约束)。
 * 接入方式见同目录 README.md。
 */

:root{
  /* 色板(现状固化) */
  --bg:#f5f7fa;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#e5e7eb;
  --primary:#2563eb;
  --primary-dark:#1d4ed8;
  --success:#16a34a;
  --success-bg:#f0fdf4;
  --warn:#d97706;
  --warn-bg:#fffbeb;
  --danger:#dc2626;
  --danger-bg:#fef2f2;
  --info:#1e40af;
  --info-bg:#eff6ff;

  /* 角色色(参会角色,见 p4-join.html captionRoleColor 既有取值,本文件固化为唯一来源) */
  --role-candidate:var(--primary);   /* 候选人 = 蓝 */
  --role-ai:#6366f1;                 /* 关同学 = 靛紫 */
  --role-host:var(--success);        /* 主持人 = 绿 */
  --role-hr:var(--warn);             /* 人事 = 橙 */
  --role-dept:#06b6d4;               /* 需求部门 = 青 */
  --role-unknown:#9ca3af;

  /* 间距(4 的倍数) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;

  /* 圆角 */
  --radius-card:14px;
  --radius-control:10px;

  /* 字号 */
  --fs-page-title:20px;
  --fs-card-title:15px;
  --fs-body:14px;
  --fs-aux:12.5px;
  --lh:1.6;
}

/* ---------- 基础重置 ---------- */
*{box-sizing:border-box;}
[hidden]{display:none !important;}
html,body{margin:0;}
body{
  background:var(--bg); color:var(--text); font-size:var(--fs-body); line-height:var(--lh);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}
h1,h2,h3,h4,p{margin:0;}
a{color:var(--primary);}

/* ---------- 页面骨架 ---------- */
.page{max-width:960px; margin:0 auto; padding:var(--sp-5) var(--sp-4) 90px;}
header.top{padding:var(--sp-2) 0 var(--sp-4);}
header.top h1{font-size:var(--fs-page-title); margin:0 0 var(--sp-1);}
header.top p.sub{margin:0; color:var(--muted); font-size:13px;}

/* ---------- 卡片 ---------- */
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-card); padding:var(--sp-5);}
.card + .card{margin-top:var(--sp-4);}
.card-title{font-size:var(--fs-card-title); font-weight:600; margin:0 0 var(--sp-3);}

/* ---------- 按钮:一次一个主动作 ---------- */
button,.btn{
  font-family:inherit; font-size:14px; font-weight:600; border:none; border-radius:var(--radius-control);
  padding:0 var(--sp-5); min-height:44px; line-height:1.2; cursor:pointer; white-space:nowrap;
  transition:opacity .15s, transform .05s, background .15s; display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.btn-primary{background:var(--primary); color:#fff;}
.btn-primary:hover:not(:disabled){background:var(--primary-dark);}
.btn-secondary{background:#fff; color:var(--text); border:1px solid var(--border);}
.btn-secondary:hover:not(:disabled){background:#f9fafb;}
.btn-danger{background:var(--danger); color:#fff;}
.btn-danger:hover:not(:disabled){background:#b91c1c;}
.btn-ghost{background:transparent; color:var(--muted);}
.btn-ghost:hover:not(:disabled){background:#f3f4f6; color:var(--text);}
button:active:not(:disabled){transform:scale(.98);}
button:disabled{opacity:.55; cursor:not-allowed;}
.btn-sm{min-height:36px; padding:0 var(--sp-3); font-size:13px;}
.btn-block{width:100%;}

/* ---------- 横幅(banner,失败/提示态用) ---------- */
.banner{border-radius:var(--radius-control); padding:var(--sp-3) var(--sp-4); font-size:13px; margin:0 0 var(--sp-4); display:flex; gap:var(--sp-2); align-items:flex-start;}
.banner-info{background:var(--info-bg); color:var(--info); border:1px solid #bfdbfe;}
.banner-success{background:var(--success-bg); color:#166534; border:1px solid #bbf7d0;}
.banner-warn{background:var(--warn-bg); color:#92400e; border:1px solid #fde68a;}
.banner-danger{background:var(--danger-bg); color:#991b1b; border:1px solid #fecaca;}

/* ---------- 徽标(账号角色 + 参会角色两套) ---------- */
.badge{display:inline-block; font-size:11.5px; font-weight:600; padding:2px 9px; border-radius:999px; white-space:nowrap;}
.badge-admin{background:#eef2ff; color:#4338ca;}
.badge-operator{background:var(--success-bg); color:#047857;}
.badge-interviewer{background:var(--warn-bg); color:#c2410c;}
.badge-candidate{background:var(--info-bg); color:var(--role-candidate);}
.badge-ai{background:#eef2ff; color:var(--role-ai);}
.badge-host{background:var(--success-bg); color:#166534;}
.badge-hr{background:var(--warn-bg); color:#92400e;}
.badge-dept{background:#ecfeff; color:#0e7490;}
.badge-muted{background:#f3f4f6; color:var(--muted);}

/* ---------- 表格 ---------- */
.table{width:100%; border-collapse:collapse; font-size:14px;}
.table th,.table td{text-align:left; padding:var(--sp-2) var(--sp-3); border-bottom:1px solid var(--border); vertical-align:middle;}
.table th{color:var(--muted); font-weight:600; font-size:var(--fs-aux);}
.table tr:last-child td{border-bottom:none;}
.table-empty td{text-align:center; color:var(--muted); padding:var(--sp-6) 0;}

/* ---------- 表单字段 ---------- */
.field{margin:0 0 var(--sp-4);}
.field:last-child{margin-bottom:0;}
.field label{display:block; font-size:13px; color:#374151; font-weight:600; margin:0 0 var(--sp-1);}
.field .hint{font-size:var(--fs-aux); color:var(--muted); margin-top:var(--sp-1);}
.field .error{font-size:var(--fs-aux); color:var(--danger); margin-top:var(--sp-1);}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--danger);}

input[type=text],input[type=password],input[type=number],input[type=email],input[type=search],input[type=tel],select,textarea{
  width:100%; font-size:15px; padding:10px var(--sp-3); border:1px solid var(--border); border-radius:9px;
  background:#fff; color:var(--text); font-family:inherit; min-height:44px;
}
textarea{min-height:80px; resize:vertical; line-height:1.5;}
input:focus,select:focus,textarea:focus{outline:2px solid #bfdbfe; outline-offset:1px; border-color:var(--primary);}

/* ---------- 状态四件套:加载 spinner ---------- */
.spinner{width:16px; height:16px; border:2px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; display:inline-block; animation:ui-spin .8s linear infinite;}
.spinner-dark{border:2px solid #cbd5e1; border-top-color:var(--primary);}
@keyframes ui-spin{to{transform:rotate(360deg);}}

/* ---------- 状态四件套:成功(toast,不弹全局横幅) ---------- */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(8px);
  background:#111827; color:#f9fafb; font-size:13.5px; padding:10px 18px; border-radius:var(--radius-control);
  box-shadow:0 4px 16px rgba(0,0,0,.2); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  z-index:300; max-width:90vw; text-align:center;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.toast-success{background:#166534;}
.toast-danger{background:#991b1b;}

/* ---------- 确认弹层(危险/不可逆动作统一样式,须复述对象) ---------- */
.modal-mask{position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; padding:var(--sp-5); z-index:280;}
.modal-mask[hidden]{display:none;}
.modal{background:#fff; border-radius:var(--radius-card); padding:var(--sp-5); max-width:420px; width:100%; max-height:86vh; overflow-y:auto;}
.modal h3{margin:0 0 var(--sp-3); font-size:16px;}
.modal p{font-size:13px; color:#4b5563; margin:6px 0;}
.modal .actions{display:flex; gap:var(--sp-3); margin-top:var(--sp-4);}
.modal .actions button{flex:1;}

/* ---------- 空态 ---------- */
.empty-state{text-align:center; color:var(--muted); padding:40px var(--sp-5); font-size:13.5px;}
.empty-state .btn-primary{margin-top:var(--sp-3);}

/* ---------- 移动端断点:管理页手机竖屏可用,点击区 ≥44px ---------- */
@media (max-width:480px){
  .page{padding:var(--sp-4) var(--sp-3) 90px;}
  .card{padding:var(--sp-4);}
  button,.btn{min-height:46px;}
  .table th,.table td{padding:var(--sp-2) var(--sp-1); font-size:13px;}
}