/* ===== 员工考勤 · 青蓝紫炫彩浅色 ===== */

/* 汇总统计卡 */
#attendance-page .att-metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:16px}
#attendance-page .att-metric{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:var(--ui-radius,12px);background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(248,246,255,.9));border:1px solid rgba(var(--admin-accent-2-rgb),.18);box-shadow:0 10px 28px rgba(var(--brand-indigo-rgb),.07);position:relative;overflow:hidden}
#attendance-page .att-metric:after{content:"";position:absolute;right:-24px;top:-24px;width:90px;height:90px;border-radius:var(--ui-radius,12px);opacity:.14;filter:blur(14px);pointer-events:none}
#attendance-page .att-metric.days:after{background:var(--admin-accent)}
#attendance-page .att-metric.hours:after{background:var(--admin-accent-2)}
#attendance-page .att-metric.late:after{background:var(--brand-amber)}
#attendance-page .att-metric.early:after{background:var(--admin-accent-3)}
#attendance-page .att-metric.missing:after{background:var(--brand-rose)}
#attendance-page .att-metric-icon{width:42px;height:42px;border-radius:var(--ui-radius,12px);display:grid;place-items:center;font-size:var(--fs-2xl);flex:none;position:relative;z-index:1}
#attendance-page .att-metric.days .att-metric-icon{background:rgba(var(--admin-accent-rgb),.12)}
#attendance-page .att-metric.hours .att-metric-icon{background:rgba(var(--admin-accent-2-rgb),.12)}
#attendance-page .att-metric.late .att-metric-icon{background:rgba(var(--brand-amber-rgb),.14)}
#attendance-page .att-metric.early .att-metric-icon{background:rgba(var(--admin-accent-3-rgb),.12)}
#attendance-page .att-metric.missing .att-metric-icon{background:rgba(var(--brand-rose-rgb),.12)}
#attendance-page .att-metric span{display:block;color:var(--admin-text-muted);font-size:var(--fs-sm);font-weight:600;position:relative;z-index:1}
#attendance-page .att-metric strong{display:block;font-size:var(--fs-2xl);font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums;position:relative;z-index:1;color:var(--admin-text)}

/* 表格状态徽标 */
.att-badge{display:inline-block;padding:3px 9px;border-radius:var(--ui-radius,12px);font-size:var(--fs-sm);font-weight:600;white-space:nowrap;line-height:var(--lh-normal)}
.att-badge.late{background:#fff3df;color:var(--brand-amber-deep);border:1px solid rgba(var(--brand-amber-rgb),.32)}
.att-badge.early{background:#ffe4f1;color:var(--brand-pink-deep);border:1px solid rgba(var(--admin-accent-3-rgb),.32)}
.att-badge.missing{background:#ffe4e9;color:var(--brand-rose-deep);border:1px solid rgba(var(--brand-rose-rgb),.32)}
.att-badge+.att-badge{margin-left:4px}
.att-ok{display:inline-block;padding:3px 9px;border-radius:var(--ui-radius,12px);font-size:var(--fs-sm);font-weight:600;background:#e7f8f0;color:var(--success-deep);border:1px solid rgba(var(--brand-emerald-rgb),.3);white-space:nowrap}

/* 快捷打卡弹窗 */
#attendance-quick-modal .dialog{width:min(420px,94vw)}
#attendance-quick-modal .title-icon{background:linear-gradient(135deg,var(--admin-accent),var(--admin-accent-2));color:#fff;box-shadow:0 8px 20px rgba(var(--admin-accent-rgb),.28)}
.quick-clock{display:grid;gap:14px}
.quick-clock label{display:grid;gap:7px;font-size:var(--fs-md);font-weight:600;color:var(--admin-text)}
.quick-clock select{width:100%;border:1px solid rgba(120,130,255,.22);padding:10px 12px;background:#fff;color:var(--admin-text)}
.quick-clock select:focus{border-color:var(--admin-accent);box-shadow:0 0 0 3px rgba(var(--admin-accent-rgb),.14);outline:none}
.quick-clock-employee{display:flex;align-items:center;justify-content:center;gap:8px;font-size:var(--fs-md);color:var(--admin-text-muted);padding:10px 12px;border-radius:var(--ui-radius,12px);background:#fff;border:1px solid rgba(120,130,255,.22)}
.quick-clock-employee b{color:var(--admin-text);font-weight:700}
.att-employee-display{display:flex;align-items:center;min-height:38px;padding:8px 12px;border-radius:var(--ui-radius,12px);background:#fff;border:1px solid rgba(120,130,255,.22);font-size:var(--fs-md);color:var(--admin-text);font-weight:600}
.quick-clock-now{text-align:center;font-size:var(--fs-md);color:var(--admin-text-muted);padding:10px;border-radius:var(--ui-radius,12px);background:linear-gradient(135deg,rgba(var(--admin-accent-rgb),.08),rgba(var(--admin-accent-2-rgb),.08));border:1px solid rgba(var(--admin-accent-2-rgb),.14)}
.quick-clock-now b{display:block;font-size:34px;font-weight:800;color:var(--admin-text);font-variant-numeric:tabular-nums;letter-spacing:2px;margin-top:2px}
.quick-clock-btns{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quick-btn{border:0;border-radius:var(--ui-radius,12px);padding:14px 12px;font:inherit;font-size:var(--fs-lg);font-weight:700;color:#fff;cursor:pointer;transition:transform .15s,box-shadow .15s}
.quick-btn:hover{transform:translateY(-1px)}
.quick-btn.in{background:linear-gradient(135deg,var(--admin-accent),var(--admin-accent-ink));box-shadow:0 8px 20px rgba(var(--admin-accent-rgb),.3)}
.quick-btn.in:hover{box-shadow:0 12px 26px rgba(var(--admin-accent-rgb),.4)}
.quick-btn.out{background:linear-gradient(135deg,var(--admin-accent-2),var(--brand-violet-deep));box-shadow:0 8px 20px rgba(var(--admin-accent-2-rgb),.3)}
.quick-btn.out:hover{box-shadow:0 12px 26px rgba(var(--admin-accent-2-rgb),.4)}
.quick-btn.done{background:#e7eaf3;color:#8a90b5;box-shadow:none;cursor:default}
.quick-btn.done:hover{transform:none;box-shadow:none}

/* 绩效表格里的异常提示 */
.perf-table .att-warn{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:var(--ui-radius,12px);font-size:var(--fs-xs);font-weight:600;background:#ffe4e9;color:var(--brand-rose-deep)}

@media(max-width:900px){#attendance-page .att-metrics{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){#attendance-page .att-metrics{grid-template-columns:1fr}}

/* ===== 全勤奖励：满屏鲜花弹窗 ===== */
.att-reward-overlay{position:fixed;inset:0;z-index:20000;display:none;
  background:radial-gradient(circle at 50% 20%,#ffe0ec 0%,#ffd6e8 30%,#f6c7e0 55%,#eeb3d6 100%)}
.att-reward-overlay.show{display:block}
.att-reward-flower{position:absolute;top:-10%;pointer-events:none;opacity:0;animation:att-fall linear forwards}
@keyframes att-fall{
  0%{transform:translateY(0) rotate(0deg);opacity:0}
  6%{opacity:.95}
  100%{transform:translateY(120vh) rotate(360deg);opacity:.85}
}
.att-reward-dialog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.7);
  width:min(460px,92vw);background:#fff;border-radius:var(--ui-radius,12px);padding:34px 30px 28px;
  box-shadow:0 40px 120px rgba(190,60,120,.35),inset 0 0 0 1px rgba(255,255,255,.6);
  opacity:0;transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .35s;text-align:center;z-index:2}
.att-reward-overlay.show .att-reward-dialog{transform:translate(-50%,-50%) scale(1);opacity:1}
.att-reward-note{position:relative;margin:-58px auto 22px;width:82%;padding:24px 18px 20px;
  background:linear-gradient(160deg,#fff9e6,#fdf0c8);box-shadow:0 12px 30px rgba(180,120,40,.22);
  transform:rotate(-2deg);border-radius:var(--ui-radius,12px)}
.att-reward-note:before,.att-reward-note:after{content:"";position:absolute;top:-14px;width:88px;height:26px;
  background:var(--admin-surface-soft);border:1px dashed rgba(190,150,80,.35)}
.att-reward-note:before{left:18px;transform:rotate(-8deg)}
.att-reward-note:after{right:18px;transform:rotate(8deg)}
.att-reward-note .tape{position:absolute;top:-16px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:96px;height:30px;background:linear-gradient(135deg,rgba(255,255,255,.85),rgba(255,255,255,.4));
  box-shadow:0 2px 6px rgba(150,100,40,.2);border-radius:var(--ui-radius,12px)}
.att-reward-note .msg{font-family:"KaiTi","STKaiti","楷体",serif;font-size:var(--fs-2xl);font-weight:700;
  color:var(--brand-amber-deep);letter-spacing:1px;line-height:var(--lh-relaxed)}
.att-reward-note .msg .big{display:block;font-size:var(--fs-3xl);color:var(--brand-rose-deep)}
.att-reward-dialog h2{font-size:var(--fs-2xl);color:var(--admin-text);margin:0 0 8px}
.att-reward-dialog .sub{font-size:var(--fs-md);color:var(--admin-text-muted);line-height:var(--lh-relaxed);margin-bottom:6px}
.att-reward-amount{display:inline-flex;align-items:baseline;gap:3px;font-size:40px;font-weight:800;
  color:transparent;background:linear-gradient(135deg,var(--brand-rose),var(--brand-rose-deep));-webkit-background-clip:text;background-clip:text;margin:4px 0 2px}
.att-reward-amount small{font-size:var(--fs-xl)}
.att-reward-meta{font-size:var(--fs-base);color:#8a92b5;margin-top:4px}
.att-reward-actions{margin-top:22px;display:flex;gap:12px;justify-content:center}
.att-reward-btn{border:0;border-radius:var(--ui-radius,12px);padding:12px 30px;font:600 var(--fs-lg)/1 inherit;cursor:pointer;transition:transform .15s,box-shadow .15s}
.att-reward-btn.primary{background:linear-gradient(135deg,var(--brand-rose),var(--brand-rose-deep));color:#fff;box-shadow:0 10px 26px rgba(var(--brand-rose-rgb),.35)}
.att-reward-btn.primary:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(var(--brand-rose-rgb),.45)}
.att-reward-glow{position:absolute;left:50%;bottom:-80px;transform:translateX(-50%);width:70vw;height:180px;
  background:radial-gradient(ellipse at center,var(--admin-surface),transparent 70%);pointer-events:none}

/* ===== 排班设置 ===== */
.schedule-shifts-block .sf-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;color:var(--text-sub);font-size:12px}
.sf-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.sf-row input[type=time]{flex:1}
.sf-row .sf-del{width:26px;height:26px;border:0;border-radius:var(--ui-radius,12px);background:transparent;color:var(--text-sub);cursor:pointer;font-size:14px;line-height:1}
.sf-row .sf-del:hover{background:rgba(220,38,38,.08);color:var(--danger)}
.sf-preview-title,.sf-history-title{color:var(--text-sub);font-size:12px;margin:10px 0 6px}
.sf-preview-row{display:flex;align-items:center;gap:10px;padding:6px 10px;border:1px solid var(--line);border-radius:var(--ui-radius,12px);margin-bottom:6px;font-size:12px}
.sf-preview-row span{width:48px;color:var(--text-sub);flex:none}
.sf-preview-row em{font-style:normal;color:var(--text-placeholder);flex:1}
.sf-preview-row b{color:var(--text-title)}
.sf-history-row{display:flex;gap:10px;padding:5px 10px;font-size:12px;color:var(--text-body)}
.sf-history-row span{color:var(--text-placeholder);flex:none}
.sf-history-row b{flex:none}
.sf-history-row em{font-style:normal;color:var(--text-sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf-history-empty{color:var(--text-placeholder);font-size:12px;padding:5px 10px}
.quick-clock-shift{margin-top:8px;font-size:13px;color:var(--text-sub)}
.quick-clock-shift b{color:var(--text-title)}