/* ============================================================
   ABSENSI PELATIHAN — absensi.css
   Menggunakan token warna & font yang sama dengan style.css
   (--torea, --royal, --iron, --ebony, --font-display, dst.)
   ============================================================ */

.sec-absensi{
  background: linear-gradient(135deg, #0a1929 0%, #0d2847 50%, #15325a 100%);
  position: relative;
  overflow: hidden;
}
.sec-absensi::before{
  content:'';
  position:absolute; top:-180px; right:-160px;
  width:520px; height:520px; border-radius:50%;
  background: radial-gradient(circle, rgba(20,58,162,.35) 0%, transparent 65%);
  pointer-events:none;
}

.absensi-toolbar{
  display:flex; justify-content:flex-end; margin-bottom:24px;
}
.absensi-refresh{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-size:12.5px; font-weight:600;
  color:rgba(211,212,215,.7);
  background:rgba(255,255,255,.04); border:1px solid rgba(211,212,215,.14);
  padding:9px 16px; border-radius:30px; cursor:pointer; transition:.2s;
}
.absensi-refresh:hover{ color:#fff; border-color:rgba(62,141,227,.4); background:rgba(62,141,227,.08); }
.absensi-refresh i{ transition:transform .5s ease; }
.absensi-refresh.spinning i{ transform:rotate(360deg); }

.absensi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:22px;
  position:relative; z-index:1;
}

.absensi-loading, .absensi-empty{
  grid-column:1/-1;
  text-align:center;
  color:rgba(211,212,215,.55);
  font-size:14px;
  padding:60px 20px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.absensi-empty i{ font-size:30px; color:rgba(62,141,227,.5); }

/* ---- glass card ---- */
.absensi-card{
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(211,212,215,.12);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 46px rgba(4,6,13,.35), inset 0 1px 0 rgba(255,255,255,.06);
  position: relative;
  overflow: hidden;
  display:flex; flex-direction:column; gap:16px;
  transition: transform .3s ease, border-color .3s ease;
}
.absensi-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(62,141,227,.55), transparent);
}
.absensi-card:hover{ transform: translateY(-4px); border-color: rgba(62,141,227,.3); }

.absensi-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.absensi-live{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; letter-spacing:.03em;
  color:#28C840; background:rgba(40,200,64,.1); border:1px solid rgba(40,200,64,.25);
  padding:4px 10px; border-radius:20px; flex-shrink:0;
}
.absensi-live .dot{ width:6px;height:6px;border-radius:50%; background:#28C840; animation:absLivePulse 1.6s ease-in-out infinite; }
@keyframes absLivePulse{ 0%,100%{opacity:1;} 50%{opacity:.3;} }

.absensi-card h3{
  font-family: var(--font-display); font-size:17px; font-weight:700;
  color:#fff; line-height:1.35;
}

.absensi-meta{ display:flex; flex-direction:column; gap:8px; }
.absensi-meta-row{
  display:flex; align-items:center; gap:9px;
  font-size:13px; color:rgba(211,212,215,.75);
}
.absensi-meta-row i{ color:var(--royal-light,#5BA3F0); width:14px; text-align:center; font-size:12.5px; }

.absensi-stat{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:12px; color:rgba(211,212,215,.55);
}
.absensi-stat strong{ color:#fff; font-weight:700; }
.absensi-progress-track{
  height:6px; border-radius:6px; background:rgba(211,212,215,.12); overflow:hidden;
}
.absensi-progress-fill{
  height:100%; border-radius:6px;
  background:linear-gradient(90deg, var(--torea), var(--royal));
  transition: width .6s ease;
}

.absensi-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-display); font-weight:700; font-size:13.5px;
  padding:12px 20px; border-radius:var(--radius-md); border:none; cursor:pointer;
  background:linear-gradient(135deg, var(--torea), var(--royal)); color:#fff;
  box-shadow: 0 12px 28px rgba(20,58,162,.3);
  transition: transform .2s, box-shadow .2s;
  width:100%;
}
.absensi-cta:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(20,58,162,.42); }

/* ============================================================
   MODAL
   ============================================================ */
.absensi-modal-overlay{
  position:fixed; inset:0; z-index:2000;
  background:rgba(4,6,13,.6);
  backdrop-filter: blur(4px);
  display:none; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; transition: opacity .25s ease;
}
.absensi-modal-overlay.open{ display:flex; }
.absensi-modal-overlay.visible{ opacity:1; }

.absensi-modal{
  width:100%; max-width:420px;
  max-height:88vh;
  background: linear-gradient(160deg, #0d2847 0%, #15325a 100%);
  border:1px solid rgba(211,212,215,.14);
  border-radius: var(--radius-lg);
  padding:28px 26px 24px;
  box-shadow: 0 30px 70px rgba(4,6,13,.55);
  position:relative;
  display:flex; flex-direction:column;
  transform: translateY(16px) scale(.98);
  opacity:0;
  transition: transform .3s cubic-bezier(.2,.9,.2,1), opacity .3s ease;
}
.absensi-modal-overlay.visible .absensi-modal{ transform:translateY(0) scale(1); opacity:1; }

.absensi-modal-close{
  position:absolute; top:16px; right:16px;
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.06); border:1px solid rgba(211,212,215,.15);
  color:rgba(211,212,215,.8); cursor:pointer; font-size:13px;
  display:flex; align-items:center; justify-content:center;
  transition:.2s;
}
.absensi-modal-close:hover{ background:rgba(255,255,255,.12); color:#fff; }

.absensi-modal-head{ margin-bottom:18px; padding-right:30px; }
.absensi-modal-eyebrow{
  display:block; font-family:var(--font-display); font-size:11.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--royal-light,#5BA3F0);
  margin-bottom:6px;
}
.absensi-modal-head h3{ font-family:var(--font-display); font-size:19px; color:#fff; font-weight:800; }

.absensi-modal-body{ flex:1; min-height:0; display:flex; flex-direction:column; }

.absensi-search-wrap{
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.05); border:1px solid rgba(211,212,215,.14);
  border-radius:12px; padding:11px 14px; margin-bottom:14px;
}
.absensi-search-wrap i{ color:rgba(211,212,215,.45); font-size:13px; }
.absensi-search-wrap input{
  flex:1; background:transparent; border:none; outline:none; color:#fff;
  font-family:var(--font-body); font-size:14px;
}
.absensi-search-wrap input::placeholder{ color:rgba(211,212,215,.4); }

.absensi-name-list{
  overflow-y:auto; max-height:260px;
  display:flex; flex-direction:column; gap:6px;
  padding-right:4px;
}
.absensi-name-list::-webkit-scrollbar{ width:5px; }
.absensi-name-list::-webkit-scrollbar-thumb{ background:rgba(211,212,215,.2); border-radius:4px; }

.absensi-name-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; border-radius:10px; border:1px solid transparent;
  background:rgba(255,255,255,.03);
  color:rgba(211,212,215,.85); font-size:13.5px; cursor:pointer; transition:.18s;
  text-align:left; width:100%;
}
.absensi-name-item:hover{ background:rgba(62,141,227,.1); }
.absensi-name-item.selected{
  background:rgba(62,141,227,.18); border-color:rgba(62,141,227,.5); color:#fff;
}
.absensi-name-item.done{
  opacity:.45; cursor:not-allowed;
}
.absensi-name-item.done:hover{ background:rgba(255,255,255,.03); }
.absensi-name-tag{
  font-size:10.5px; font-weight:700; color:#28C840;
  display:inline-flex; align-items:center; gap:4px;
}
.absensi-name-empty{
  text-align:center; color:rgba(211,212,215,.45); font-size:13px; padding:24px 10px;
}

.absensi-modal-footer{ margin-top:18px; }
.absensi-submit-btn{ width:100%; }
.absensi-submit-btn:disabled{
  opacity:.4; cursor:not-allowed; transform:none !important; box-shadow:none !important;
}

.absensi-result{
  margin-top:16px; padding:14px 16px; border-radius:12px;
  font-size:13.5px; display:flex; align-items:flex-start; gap:10px; line-height:1.5;
}
.absensi-result.ok{ background:rgba(40,200,64,.1); border:1px solid rgba(40,200,64,.3); color:#8CF0A4; }
.absensi-result.err{ background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3); color:#FCA5A5; }
.absensi-result i{ margin-top:1px; }

@media (max-width:480px){
  .absensi-modal{ max-width:100%; }
  .absensi-grid{ grid-template-columns:1fr; }
}