/* Daily check-ins (工作汇报 → 打卡记录). Scoped to #attendanceView; colours follow the work overview. */
#attendanceView {
  --at-ink: #1b1916; --at-honey: #ffb028; --at-line: rgba(31, 35, 33, .1); --at-muted: #6d726f; --at-soft: #f6f5f1;
  --at-done: #2f7d55; --at-done-bg: #e5f3ea; --at-wait: #a86a00; --at-wait-bg: #fdf0d6; --at-warn: #b84b3d; --at-warn-bg: #f8e4e0;
}
#attendanceView .attendance-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
#attendanceView .attendance-head h2 { margin: 0 0 4px; font-size: 18px; }
#attendanceView .attendance-head p { margin: 0; max-width: 720px; font-size: 13px; line-height: 1.6; color: var(--at-muted); }
#attendanceView .attendance-date { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--at-muted); flex: none; }
#attendanceView .attendance-empty { margin: 0; font-size: 13px; color: var(--at-muted); background: var(--at-soft); border-radius: 10px; padding: 14px; text-align: center; }

#attendanceView .attendance-summary { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border: 1px solid var(--at-line); border-radius: 14px; overflow: hidden; margin-bottom: 16px; }
#attendanceView .attendance-tile { padding: 16px 18px; border-right: 1px solid var(--at-line); min-width: 0; }
#attendanceView .attendance-tile:last-child { border-right: 0; }
#attendanceView .attendance-tile small { display: block; font-size: 12px; color: var(--at-muted); }
#attendanceView .attendance-tile strong { display: block; font-size: 28px; font-weight: 650; line-height: 1.2; margin: 6px 0 2px; }
#attendanceView .attendance-tile span { font-size: 12px; color: var(--at-muted); }
#attendanceView .attendance-tile.is-main { background: var(--at-ink); color: #fff; border-color: var(--at-ink); }
#attendanceView .attendance-tile.is-main strong { color: var(--at-honey); }
#attendanceView .attendance-tile.is-main small, #attendanceView .attendance-tile.is-main span { color: #cfc8b8; }
#attendanceView .attendance-tile.is-warn strong { color: var(--at-warn); }

#attendanceView .attendance-alert { background: var(--at-warn-bg); color: #6f2a20; border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; font-size: 13px; line-height: 1.6; }
#attendanceView .attendance-alert ul { margin: 6px 0; padding-left: 18px; }
#attendanceView .attendance-alert p { margin: 0; }

#attendanceView .attendance-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
#attendanceView .attendance-card { background: #fff; border: 1px solid var(--at-line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
#attendanceView .attendance-card.is-selected { border-color: var(--at-honey); box-shadow: 0 0 0 2px rgba(255, 176, 40, .18); }
#attendanceView .attendance-card header { display: flex; align-items: flex-start; gap: 12px; }
#attendanceView .attendance-card header > div { min-width: 0; flex: 1; }
#attendanceView .attendance-card h3 { margin: 0; font-size: 16px; }
#attendanceView .attendance-card header small { color: var(--at-muted); font-size: 12px; }
#attendanceView .attendance-card > .button { align-self: flex-start; }
#attendanceView .attendance-badge { display: inline-flex; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; flex: none; }
#attendanceView .attendance-badge.is-done { background: var(--at-done-bg); color: var(--at-done); }
#attendanceView .attendance-badge.is-wait { background: var(--at-wait-bg); color: var(--at-wait); }
#attendanceView .attendance-badge.is-warn { background: var(--at-warn-bg); color: var(--at-warn); }
#attendanceView .attendance-badge.is-idle { background: #eeeeec; color: #777; }
#attendanceView .attendance-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#attendanceView .attendance-facts > div { background: var(--at-soft); border-radius: 10px; padding: 9px 11px; min-width: 0; }
#attendanceView .attendance-facts small, #attendanceView .attendance-facts i { display: block; font-size: 11px; font-style: normal; color: var(--at-muted); }
#attendanceView .attendance-facts b { display: block; font-size: 18px; line-height: 1.35; font-variant-numeric: tabular-nums; }
#attendanceView .attendance-facts b.is-ok { color: var(--at-done); }
#attendanceView .attendance-facts > div.is-warn { background: var(--at-warn-bg); }
#attendanceView .attendance-facts > div.is-warn b, #attendanceView .attendance-facts > div.is-warn i { color: var(--at-warn); }
#attendanceView .attendance-health { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
#attendanceView .attendance-health li { font-size: 12px; padding: 3px 8px; border-radius: 6px; background: var(--at-done-bg); color: var(--at-done); }
#attendanceView .attendance-health li.is-warn { background: var(--at-warn-bg); color: var(--at-warn); }
#attendanceView .attendance-note { margin: 0; font-size: 12px; line-height: 1.55; color: var(--at-muted); }

#attendanceView .attendance-calendar { margin-top: 20px; background: #fff; border: 1px solid var(--at-line); border-radius: 14px; padding: 18px; }
#attendanceView .attendance-calendar header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
#attendanceView .attendance-calendar h3 { margin: 0; font-size: 16px; }
#attendanceView .attendance-calendar header small { color: var(--at-muted); font-size: 12px; }
#attendanceView .attendance-month { display: flex; align-items: center; gap: 10px; }
#attendanceView .attendance-month .button { min-width: 36px; padding-inline: 10px; }
#attendanceView .attendance-month-summary { margin: 12px 0; font-size: 13px; color: var(--at-muted); }
#attendanceView .attendance-weekdays, #attendanceView .attendance-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
#attendanceView .attendance-weekdays li { font-size: 11px; color: var(--at-muted); text-align: center; padding-bottom: 4px; }
#attendanceView .attendance-day { min-height: 58px; border-radius: 10px; padding: 6px 8px; background: var(--at-soft); display: flex; flex-direction: column; gap: 2px; min-width: 0; border: 1px solid transparent; }
#attendanceView .attendance-day span { font-size: 12px; font-weight: 650; }
#attendanceView .attendance-day b { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#attendanceView .attendance-day i { font-size: 10.5px; font-style: normal; }
#attendanceView .attendance-day.is-blank { background: transparent; }
#attendanceView .attendance-day.is-done { background: var(--at-done-bg); color: var(--at-done); }
#attendanceView .attendance-day.is-wait { background: var(--at-wait-bg); color: var(--at-wait); }
#attendanceView .attendance-day.is-warn { background: var(--at-warn-bg); color: var(--at-warn); }
#attendanceView .attendance-day.is-idle { color: #a3a6a4; }
#attendanceView .attendance-day.is-unpaid { border-color: var(--at-warn); }
#attendanceView .attendance-day.is-unpaid i { color: var(--at-warn); }
#attendanceView .attendance-day.is-today { box-shadow: inset 0 0 0 2px var(--at-ink); }
#attendanceView .attendance-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 0; font-size: 12px; color: var(--at-muted); }
#attendanceView .attendance-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
#attendanceView .attendance-legend .is-done::before { background: var(--at-done-bg); border: 1px solid var(--at-done); }
#attendanceView .attendance-legend .is-wait::before { background: var(--at-wait-bg); border: 1px solid var(--at-wait); }
#attendanceView .attendance-legend .is-warn::before { background: var(--at-warn-bg); border: 1px solid var(--at-warn); }
#attendanceView .attendance-legend .is-unpaid::before { background: #fff; border: 1px solid var(--at-warn); }

@media (max-width: 760px) {
  #attendanceView .attendance-head { flex-direction: column; align-items: stretch; }
  #attendanceView .attendance-summary { grid-template-columns: repeat(2, 1fr); }
  #attendanceView .attendance-tile:nth-child(2) { border-right: 0; }
  #attendanceView .attendance-tile:nth-child(-n + 2) { border-bottom: 1px solid var(--at-line); }
  /* Too narrow for times: each day shows its date and colour; the legend explains them. */
  #attendanceView .attendance-day { min-height: 40px; padding: 4px; align-items: center; justify-content: center; }
  #attendanceView .attendance-day b, #attendanceView .attendance-day i { display: none; }
  #attendanceView .attendance-day.is-unpaid { border-width: 2px; }
}