/* ============================================================
   app.enhance.css — 移动端与视觉增强层
   在 app.css 之后加载，只做增量覆盖，不改动原有规则
   ============================================================ */

/* ---------- 1. 触控友好：手机上按钮/链接达到 44px 触控标准 ---------- */
@media (max-width: 700px) {
  .button { min-height: 44px; padding: 10px 16px; }
  .button-quiet, .button-small { min-height: 38px; }
  .row-actions a, .row-actions .link-button {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 10px;
    border-radius: 6px;
    background: var(--surface-muted);
  }
  .page-link { min-width: 42px; min-height: 42px; }
}

/* ---------- 2. 主列表表格 → 手机端卡片化 ---------- */
/* 仅作用于标记了 .table-card 的容器，score-form 等已有适配的表格不受影响 */
@media (max-width: 700px) {
  .table-card { overflow: visible; border: 0; background: transparent; box-shadow: none; }
  .table-card table,
  .table-card thead,
  .table-card tbody,
  .table-card tr,
  .table-card td { display: block; width: 100%; }

  .table-card thead { display: none; }

  .table-card tbody tr {
    position: relative;
    margin-bottom: 12px;
    padding: 14px 16px 14px 18px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
  }
  .table-card tbody tr:hover { background: var(--surface); }
  .table-card tbody tr:last-child { margin-bottom: 0; }

  /* 左侧品牌色条，卡片更有层次 */
  .table-card tbody tr::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--accent);
    opacity: 0.85;
    content: "";
  }

  .table-card tbody td {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 7px 0;
    border-bottom: 1px dashed #eef2f0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .table-card tbody td:last-child { border-bottom: 0; }

  /* 用 data-label 注入列名，替代被隐藏的表头 */
  .table-card tbody td::before {
    color: var(--muted);
    content: attr(data-label);
    font-size: 12px;
    font-weight: 600;
  }
  .table-card tbody td[data-label=""]::before { content: none; }

  /* 首列（通常是主标识）放大突出 */
  .table-card tbody td.card-title {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    padding-top: 0;
    font-size: 16px;
    font-weight: 700;
  }
  .table-card tbody td.card-title::before {
    font-size: 11px;
    font-weight: 500;
  }

  /* 操作区变成底部按钮条 */
  .table-card tbody td.actions {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 12px;
    text-align: left;
  }
  .table-card tbody td.actions::before { content: none; }
  .table-card .row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .table-card .row-actions a,
  .table-card .row-actions .link-button { flex: 1; justify-content: center; }
  .table-card .row-actions form { flex: 1; margin: 0; }
  .table-card .row-actions form .link-button { width: 100%; }

  .table-card .empty {
    margin: 0;
    border: 1px dashed var(--line-strong);
    border-radius: 10px;
    background: var(--surface);
  }
  .table-card .empty::before { content: none; }
  .table-card tbody tr:has(.empty)::before { display: none; }
}

/* ---------- 3. 手机端筛选区可折叠，避免 7 个字段占满整屏 ---------- */
.filter-toggle { display: none; }

@media (max-width: 700px) {
  .filter-collapse > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
    padding: 0 4px;
    color: var(--ink);
    cursor: pointer;
    font-weight: 600;
    list-style: none;
  }
  .filter-collapse > summary::-webkit-details-marker { display: none; }
  .filter-collapse > summary::after {
    color: var(--muted);
    content: "展开";
    font-size: 13px;
    font-weight: 500;
  }
  .filter-collapse[open] > summary::after { content: "收起"; }
  .filter-collapse[open] > summary { margin-bottom: 12px; border-bottom: 1px solid var(--line); }
}

@media (min-width: 701px) {
  /* 桌面端不折叠：summary 隐藏，内容常驻 */
  .filter-collapse > summary { display: none; }
}

/* ---------- 4. 视觉打磨 ---------- */
/* 表头更克制的字重与字距 */
th {
  letter-spacing: 0.02em;
  text-transform: none;
}

/* 桌面端行悬停时左侧出现品牌色提示条 */
@media (min-width: 701px) {
  tbody tr { position: relative; }
  tbody tr td:first-child { position: relative; }
  tbody tr:hover td:first-child::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: var(--accent);
    content: "";
  }
}

/* 空状态更友好 */
.empty { font-size: 14px; }

/* 卡片容器阴影层次统一 */
.filter-bar, .form-panel, .section, .table-wrap {
  box-shadow: var(--shadow-sm);
}

/* 手机端内容区留白收紧，信息密度更高 */
@media (max-width: 560px) {
  .content { padding: 20px 14px 28px; }
  .page-head h1 { font-size: 21px; }
}

/* ---------- 5. 手机横向导航增加右侧渐隐，提示可滑动 ---------- */
@media (max-width: 900px) {
  .sidebar { position: relative; }
  .sidebar::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 28px;
    background: linear-gradient(to right, rgba(32, 39, 36, 0), var(--nav));
    content: "";
    pointer-events: none;
  }
}

/* ---------- 验证码：输入框在左，图片在右，点图片换一张 ---------- */
.captcha-control {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.captcha-control input[type=text] {
  order: 1;
  min-height: 42px;
  height: 42px;
}

.captcha-control .captcha {
  order: 2;
  width: 132px;
  height: 42px;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.captcha-control .captcha:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(22, 115, 90, 0.12);
}

/* 刷新按钮改由点击图片触发，按钮本身隐藏 */
.captcha-control .captcha-refresh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .captcha-control { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .captcha-control .captcha { width: 118px; }
}

/* ============================================================
   手机端导航与卡片修复（2026-08-24）
   ============================================================ */

/* ---------- 导航：白底胶囊，取代深黑横条 ---------- */
@media (max-width: 900px) {
  .sidebar {
    /* 关键修复：基础样式里的 top:64px 在 relative 下会生效并整条下移 */
    top: auto;
    padding: 10px 13px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 6px rgba(27, 42, 35, 0.05);
  }
  .sidebar nav { gap: 7px; }
  .sidebar a {
    min-height: 36px;
    padding: 7px 15px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #f1f5f3;
    color: #4a5751;
    font-size: 14px;
    font-weight: 600;
  }
  .sidebar a:hover { background: #e6ece9; color: var(--ink); }
  .sidebar a.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
  .sidebar a.active::before { display: none; }
  .sidebar::after {
    width: 26px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--surface));
  }
}

/* ---------- 卡片内部排版修正 ---------- */
@media (max-width: 700px) {
  /* 补充说明（部门、逾期提示等）与主内容同列，不要掉到标签列 */
  .table-card tbody td:not(.card-title):not(.actions) > * { grid-column: 2; }
  .table-card tbody td.card-title > * { grid-column: 1; }

  /* 状态标签保持紧凑，不被拉伸成整行 */
  .table-card tbody td > .status { justify-self: start; }

  .table-card tbody td .table-subtitle {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 12.5px;
  }

  /* 操作区：兼容有无 .row-actions 容器 */
  .table-card tbody td.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid #eef2f0;
  }
  .table-card tbody td.actions::before { content: none; }
  .table-card tbody td.actions > .row-actions { flex: 1 1 100%; gap: 8px; }
  .table-card tbody td.actions > form { flex: 1; margin: 0; }
  .table-card tbody td.actions a,
  .table-card tbody td.actions .link-button {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: #fff;
    color: #3f4d47;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
  }
  .table-card tbody td.actions .link-button { width: 100%; }
  .table-card tbody td.actions a:hover { border-color: var(--accent); color: var(--accent); }
  .table-card tbody td.actions .danger-link { border-color: #e4c4c4; color: var(--danger); }
}

/* ---------- 登录页：按钮 / 分割线 / 表单之间留出呼吸 ---------- */
.login-panel .login-divider { margin: 16px 0; }

/* 花名册中信息待补录的档案提示 */
.profile-todo { display: block; margin-top: 3px; color: #9a681b; font-size: 12px; }
.inline-bind-form { display: flex; gap: 7px; align-items: center; margin-top: 6px; }

/* 建档 / 同步确认页 */
.select-col { width: 56px; text-align: center; }
.select-col input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); }
.sync-from { color: var(--muted); text-decoration: line-through; }
.sync-arrow { margin: 0 7px; color: var(--muted); }
.sync-to { color: var(--accent); }

@media (max-width: 700px) {
  .table-card tbody td.select-col { text-align: left; }
  .table-card tbody td.select-col::before { content: attr(data-label); }
}
.sync-change { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px; }

/* ============================================================
   创建考核任务表单修复（2026-08-24）
   ============================================================ */

/* 问题一：Django 的 RadioSelect attrs 会把 class 加到每个 <input> 上，
   于是 .scope-options 的 grid 规则同时作用在容器和 radio 圆点本身。
   问题二：app.css 的 .field input:not([type=checkbox]) 给 radio 套上了
   min-height:42px 与输入框的 padding/border，把圆点撑得很大。
   下面把 radio 的样式彻底还原成一个圆点。 */
.field input[type=radio],
input.scope-options,
input.reviewer-options {
  display: inline-block;
  width: 16px;
  height: 16px;
  min-height: 0;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  gap: 0;
  grid-template-columns: none;
  background: none;
  box-shadow: none;
  accent-color: var(--accent);
  flex: 0 0 auto;
}

.field input[type=radio]:focus,
input.scope-options:focus {
  outline: 2px solid rgba(22, 115, 90, 0.35);
  outline-offset: 2px;
  box-shadow: none;
}

div.scope-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 640px;
}

div.reviewer-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 440px;
}

/* 问题二：原样式用了未定义的 var(--border)，边框整个失效 */
div.scope-options > div label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color 140ms ease, background-color 140ms ease;
}

div.scope-options > div label:hover { border-color: var(--accent); }

div.scope-options > div:has(input:checked) label {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

/* 抄送人：25 个复选框平铺会占掉半屏，改为限高滚动的面板 */
.performance-form #id_cc_users {
  max-height: 232px;
  overflow-y: auto;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
}

.performance-form #id_cc_users label {
  padding: 4px 2px;
  border-radius: 5px;
}

.performance-form #id_cc_users label:hover { background: #fff; }

/* 表单分节标题之间留出呼吸 */
.form-section + .form-section { margin-top: 26px; }
.form-section-head h2 { font-size: 16px; }

@media (max-width: 700px) {
  div.scope-options { grid-template-columns: 1fr; gap: 8px; max-width: none; }
  div.reviewer-options { grid-template-columns: 1fr; max-width: none; }
  .performance-form #id_cc_users { max-height: 200px; }
}

/* ============================================================
   绩效考核设置与员工入口（2026-08-26）
   ============================================================ */

/* 按月下发说明 */
.monthly-intro h2 { margin: 0 0 14px; font-size: 16px; }
.flow-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 10px;
  color: #43514b;
  line-height: 1.75;
}
.flow-list li { padding-left: 4px; }
.flow-list strong { color: var(--ink); }
.flow-list::marker { color: var(--accent); }

/* 开关式复选框 */
.switch-field { gap: 8px; }
.switch-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
}
.switch-label:hover { border-color: var(--accent); }
.switch-label input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); }
.switch-label:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

/* 员工入口受阻提示 */
.blocked-panel { max-width: 560px; padding: 32px 30px; text-align: center; }
.blocked-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #fff2d9;
  color: #9a681b;
  font-size: 24px;
  font-weight: 700;
}
.blocked-panel h2 { margin: 0 0 10px; font-size: 18px; }
.blocked-message {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.8;
}
.blocked-panel .muted { margin: 0; font-size: 13px; }

/* 设置页抄送人沿用限高滚动面板 */
.performance-form #id_default_cc_users {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 18px;
  max-height: 232px;
  overflow-y: auto;
  margin-top: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
}
.performance-form #id_default_cc_users label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  border-radius: 5px;
  font-weight: 500;
  cursor: pointer;
}
.performance-form #id_default_cc_users label:hover { background: #fff; }
.performance-form #id_default_cc_users input { flex: 0 0 auto; margin: 0; }

@media (max-width: 900px) {
  .performance-form #id_default_cc_users { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .performance-form #id_default_cc_users { grid-template-columns: 1fr; }
  .blocked-panel { padding: 26px 20px; }
}

/* 开关文字被 .field label span 的必填色染红，此处还原 */
.switch-label span { margin-left: 0; color: inherit; }
.switch-field { margin-bottom: 4px; }

/* 每月截止日是个 1-28 的小数字，不需要占满整列 */
#id_due_day { max-width: 150px; }

/* 抄送人区块与上方说明文字拉开距离 */
.performance-form .field.wide { margin-top: 18px; }
.performance-form .field.wide > label { margin-bottom: 2px; }

/* 上一版优先级不足：.field label span 比 .switch-label span 更具体 */
.field .switch-label span { margin-left: 0; color: inherit; }

/* ============================================================
   自评填写页：可增删的绩效目标行（2026-09-01）
   ============================================================ */
.weight-summary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.weight-summary-bar h2 { margin: 0 0 4px; font-size: 17px; }
.weight-total {
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  white-space: nowrap;
}
.weight-total strong { font-size: 17px; }
.weight-total.is-ok { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.weight-total.is-off { border-color: #e0c48a; background: #fff8e8; color: #9a681b; }

.goal-rows { display: grid; gap: 14px; }
.goal-row {
  position: relative;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.goal-row-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 120px 120px auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 14px;
}
.goal-index {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}
.goal-remove { margin-bottom: 2px; border-color: #e4c4c4; color: var(--danger); }
.goal-remove:hover { border-color: var(--danger); background: #fdf4f4; }
.goal-actions { margin-top: 16px; }
.goal-actions .button { border-style: dashed; }
.goal-row .field + .field { margin-top: 12px; }

@media (max-width: 760px) {
  .weight-summary-bar { flex-direction: column; align-items: flex-start; }
  .goal-row-head {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 10px;
  }
  .goal-index { grid-column: 1 / -1; margin-bottom: 0; }
  .goal-category { grid-column: 1 / -1; }
  .goal-remove { grid-column: 1 / -1; width: 100%; margin-bottom: 0; }
}