/* ===== Attendance Calendar ===== */
.att-page { padding: 0; }
.att-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.att-month-nav { display: flex; align-items: center; gap: 8px; }
.att-month-nav button {
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  padding: 6px 14px; border-radius: var(--radius); cursor: pointer; font-size: 13px;
  transition: var(--transition);
}
.att-month-nav button:hover { border-color: var(--primary); color: var(--primary); }
.att-month-nav button.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.att-month-label { font-size: 16px; font-weight: 600; min-width: 80px; text-align: center; }

.att-filter-bar {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.att-filter-bar select {
  padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 13px; background: var(--card); min-width: 140px;
}
.att-legend { display: flex; gap: 14px; font-size: 12px; color: var(--text-secondary); margin-left: auto; }
.att-legend span { display: flex; align-items: center; gap: 4px; }
.att-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* 统计卡片 */
.att-stats { display: flex; gap: 16px; margin-bottom: 20px; }
.att-stat-card {
  flex: 1; background: var(--card); border-radius: var(--radius-lg);
  padding: 16px 20px; box-shadow: var(--shadow-sm); text-align: center;
}
.att-stat-card .num { font-size: 28px; font-weight: 700; }
.att-stat-card .label { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

/* 日历表格 — 全部员工视图 */
.att-cal-table {
  width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px;
  background: var(--card); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.att-cal-table th {
  background: #fafafa; font-weight: 600; color: var(--text-secondary);
  padding: 8px 4px; border-bottom: 1px solid var(--border);
  white-space: nowrap; text-align: center;
}
.att-cal-table th.att-name-col {
  position: sticky; left: 0; z-index: 3; min-width: 80px;
  background: #fafafa;
}
.att-cal-table th.att-we { color: var(--text-secondary); background: #fcfcfc; }
.att-cal-table td {
  padding: 6px 2px; text-align: center; border-bottom: 1px solid #f0f0f0;
  transition: background 0.15s;
}
.att-cal-table td.att-name {
  position: sticky; left: 0; z-index: 2; min-width: 80px;
  background: var(--card); font-weight: 600; white-space: nowrap;
  text-align: left; padding-left: 12px;
}
.att-cal-table tbody tr:hover td { background: var(--hover); }
.att-cal-table tbody tr:hover td.att-name { background: #f5f7fa; }

.att-cell {
  width: 28px; height: 28px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 6px; font-size: 11px; cursor: default;
}
.att-cell.clocked { background: var(--success-light); color: var(--success); }
.att-cell.leave { background: var(--danger-light); color: var(--danger); }
.att-cell.absent { background: #f5f5f5; color: #ccc; }
.att-cell.weekend { color: #ddd; }
.att-cell.future { color: #eee; }
.att-cell.today { outline: 2px solid var(--primary); }

/* 单员工详情日历 */
.att-detail-table {
  width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px;
  background: var(--card); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.att-detail-table th {
  background: #fafafa; font-weight: 600; padding: 10px 12px;
  border-bottom: 1px solid var(--border); text-align: left;
}
.att-detail-table td { padding: 10px 12px; border-bottom: 1px solid #f0f0f0; }
.att-detail-table tr:hover td { background: var(--hover); }

.att-badge {
  display: inline-block; padding: 2px 10px; border-radius: 12px;
  font-size: 12px; font-weight: 600;
}
.att-badge.clocked { background: var(--success-light); color: var(--success); }
.att-badge.leave { background: var(--danger-light); color: var(--danger); }
.att-badge.absent { background: #fff1f0; color: var(--danger); }
.att-badge.weekend { background: #f5f5f5; color: #aaa; }

.att-action-btn {
  padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--card); cursor: pointer; font-size: 12px;
  transition: var(--transition);
}
.att-action-btn:hover { border-color: var(--primary); color: var(--primary); }
.att-action-btn.danger:hover { border-color: var(--danger); color: var(--danger); }
.att-action-btn.success:hover { border-color: var(--success); color: var(--success); }

/* 浮动打卡按钮 */
.att-clock-fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
}
.att-clock-fab .status {
  margin-bottom: 8px; text-align: center; font-size: 12px;
  background: var(--card); padding: 6px 16px; border-radius: 20px;
  box-shadow: var(--shadow-md);
}
.att-clock-fab button {
  width: 64px; height: 64px; border-radius: 50%; border: none;
  background: linear-gradient(135deg, var(--primary), var(--success));
  color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: 0 4px 16px rgba(24,144,255,0.4);
  transition: transform 0.15s;
}
.att-clock-fab button:hover { transform: scale(1.08); }
.att-clock-fab button:active { transform: scale(0.95); }