/* HR Executive · Team Attendance (attendance.js) — Figma 5143:63382. Tokens only; classes prefixed att-. */

/* Month view: calendar + 320 day panel share one card (Figma "Card · Attendance calendar" 5199:17768) */
.att-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:stretch}
@media (max-width:1200px){.att-body{grid-template-columns:1fr}.att-panel{border-left:0;padding-left:0;border-top:1px solid var(--border-default);padding-top:16px}}
.att-calcol{display:flex;flex-direction:column;gap:14px;min-width:0}
.att-calbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.att-calbar .cal-legend{margin-left:auto}
/* Calendar day · Attendance — status block reads uppercase; every block type carries its 12 px icon */
.att-calcol .blk{text-transform:uppercase}
.att-calcol .blk svg{flex:none}

/* Day panel (Figma "Day panel" 5199:18036) */
.att-panel{display:flex;flex-direction:column;gap:12px;border-left:1px solid var(--border-default);padding:4px 0 0 20px;min-width:0}
.att-panel-top{display:flex;flex-direction:column;gap:6px}
.att-panel-top .row{gap:8px}
.att-sum{display:flex;gap:6px;flex-wrap:wrap}
.att-people{display:flex;flex-direction:column;max-height:378px;overflow:auto}
.att-group{display:flex;align-items:center;gap:10px;padding:12px 0 6px}
.att-group .tile{color:var(--text-brand)}
.att-group .rule{flex:1;height:1px;background:var(--border-default)}
.att-cnt{height:20px;min-width:20px;padding:0 8px;border-radius:var(--r-full);font-size:12px;font-weight:700;display:inline-grid;place-items:center}
.att-cnt.success{background:var(--success-bg);color:var(--success-text)}.att-cnt.info{background:var(--info-bg);color:var(--info-text)}
.att-cnt.neutral{background:var(--neutral-bg);color:var(--neutral-text)}.att-cnt.error{background:var(--error-bg);color:var(--error-text)}
.att-cnt.warning{background:var(--warning-bg);color:var(--warning-text)}
.att-person{display:flex;align-items:center;gap:10px;min-height:40px;padding-right:4px;border-bottom:1px solid var(--border-default)}
.att-person .nm{flex:1;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-pa{width:28px;height:28px;border-radius:var(--r-sm);background:var(--bg-subtle);color:var(--text-secondary);display:grid;place-items:center;flex:none;border:0;padding:0}
button.att-pa{cursor:pointer;color:var(--text-brand);transition:background var(--dur-fast) var(--ease-standard)}
button.att-pa:hover{background:var(--bg-brand-subtle)}
.att-resync{display:flex;flex-direction:column;gap:6px;padding-top:12px;border-top:1px solid var(--border-default);margin-top:auto}
.att-resync .btn{width:100%;justify-content:center}

/* Empty state icon tile 48 (H10) */
.tile.att-t48{width:48px;height:48px;border-radius:var(--r-lg)}

/* Destructive icon button S (row delete, §10.2) */
.icon-btn.att-del{color:var(--error-solid);border-color:var(--error-border)}
.icon-btn.att-del:hover{background:var(--error-bg)}
.att-act{display:inline-flex;gap:8px;justify-content:flex-end}

/* Add holiday · Generate with AI */
.att-ai-box{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid var(--border-default);border-radius:var(--r-2xl)}
.att-ai-box .grow{flex:1;min-width:0}
.att-ai-list{display:flex;flex-direction:column}
.att-ai-row{display:grid;grid-template-columns:20px 150px minmax(0,1fr) 130px 36px 32px;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--border-default)}
.att-ai-row.off .input,.att-ai-row.off .att-wd{opacity:.5}
.att-ai-row .input{height:36px}
.att-wd{font-size:12px;color:var(--text-secondary)}
.att-ai-tools{display:flex;gap:8px;padding-top:8px}
.att-skel{height:12px;border-radius:var(--r-xs);background:var(--bg-subtle);animation:attPulse 1.1s var(--ease-standard) infinite alternate}
.att-skel.box{height:36px;border-radius:var(--r-md)}
@keyframes attPulse{from{background:var(--bg-subtle)}to{background:var(--table-header)}}