/* ===================================================================
   ATTENDANCE PAGE
   =================================================================== */

/* ---- Summary: ring + 3 chips in one row ---- */
.att-summary{
  background:var(--rawm-surface);
  border:1px solid var(--rawm-line);
  border-radius:16px;
  padding:16px;
}
.att-summary-inner{
  display:flex;
  align-items:center;
  gap:16px;
}

/* Donut ring */
.att-ring-wrap{
  flex:0 0 auto;
  width:72px;
  height:72px;
  position:relative;
}
.att-ring-wrap svg{ width:100%; height:100%; }
.att-ring-pct{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-display);
  font-size:13px;
  font-weight:700;
  color:var(--rawm-ink);
}

/* 3 chips side by side */
.att-chips-row{
  flex:1 1 auto;
  display:flex;
  gap:6px;
}
.att-chip{
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  padding:8px 4px;
  border-radius:12px;
  font-family:var(--font-display);
  font-size:15px;
  font-weight:700;
  color:var(--rawm-ink);
}
.att-chip i{ font-size:15px; }
.att-chip-label{
  font-family:var(--font-body);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--rawm-charcoal-2);
  font-family:var(--font-body);
}
.att-chip-present{ background:#E5F3EA; }
.att-chip-present i{ color:#2C8A53; }
.att-chip-present span:not(.att-chip-label){ color:#2C8A53; }
.att-chip-absent{ background:#FEE2E2; }
.att-chip-absent i{ color:#EF4444; }
.att-chip-absent span:not(.att-chip-label){ color:#EF4444; }
.att-chip-holiday{ background:var(--rawm-orange-tint); }
.att-chip-holiday i{ color:var(--rawm-orange-deep); }
.att-chip-holiday span:not(.att-chip-label){ color:var(--rawm-orange-deep); }

/* ---- Daily record list ---- */
.att-list-wrap{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.att-card{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--rawm-surface);
  border:1px solid var(--rawm-line);
  border-radius:13px;
  padding:12px 14px;
}
.att-card.status-present{ border-left:4px solid #2C8A53; }
.att-card.status-absent{ border-left:4px solid #EF4444; }
.att-card.status-holiday{ border-left:4px solid var(--rawm-orange-deep); }
.att-card.status-leave{ border-left:4px solid #7C3AED; }

.att-date-col{
  flex:0 0 auto;
  text-align:center;
  min-width:40px;
}
.att-date-col .att-d{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:700;
  color:var(--rawm-ink);
  line-height:1;
}
.att-date-col .att-m{
  font-size:9.5px;
  font-weight:700;
  color:var(--rawm-charcoal-2);
  letter-spacing:.05em;
  text-transform:uppercase;
}

.att-info-col{ flex:1 1 auto; min-width:0; }
.att-info-col .att-day{
  font-size:13px;
  font-weight:600;
  color:var(--rawm-ink);
  margin:0 0 2px;
}
.att-info-col .att-note{
  font-size:11px;
  color:var(--rawm-charcoal-2);
  margin:0;
}

.att-pill{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:10.5px;
  font-weight:700;
  padding:4px 10px;
  border-radius:20px;
}
.att-pill.present{ background:#E5F3EA; color:#2C8A53; }
.att-pill.absent{ background:#FEE2E2; color:#EF4444; }
.att-pill.holiday{ background:var(--rawm-orange-tint); color:var(--rawm-orange-deep); }
.att-pill.leave{ background:#EDE9FE; color:#7C3AED; }