/* styles.css - soft pink Student Attendance theme */
:root{
  --bg: #fdebee;            /* pale pink page */
  --card: #fff6f7;          /* card background light */
  --accent: #ff8fa3;        /* pink accent */
  --muted: #9b6b6f;
  --text: #2a1f22;
  --shadow: 0 18px 40px rgba(38,18,20,0.06);
  --radius: 18px;
}

/* base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Poppins', Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  padding:28px;
}

/* container */
.container{
  max-width:1200px;
  margin:0 auto;
}

/* title */
.container h1{
  font-size:30px;
  font-weight:700;
  margin:0 0 18px 0;
  letter-spacing: -0.5px;
}

/* controls row */
.controls{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:18px;
  flex-wrap:wrap;
}
.controls input[type="date"]{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(200,120,130,0.12);
  background: white;
  box-shadow: 0 6px 18px rgba(250,220,224,0.6) inset;
}
.controls button{
  padding:8px 12px;
  border-radius:10px;
  border:none;
  background:transparent;
  cursor:pointer;
  font-weight:600;
  color:var(--muted);
}

.topbar { display:flex; justify-content:space-between; align-items:center; padding:18px 28px;}
.brand { font-weight:700; font-size:22px; color:#3a2b2b; }
.user-controls { display:flex; align-items:center; gap:10px; }
.card { background:rgba(255,255,255,0.9); border-radius:12px; padding:18px; box-shadow:0 6px 18px rgba(0,0,0,0.04); }
.calendar { display:grid; grid-template-columns: repeat(7, 1fr); gap:6px; margin-top:10px; }
.cal-day { min-height:72px; border-radius:8px; padding:6px; border:1px solid rgba(0,0,0,0.03); position:relative; }
.cal-day .date { font-size:12px; color:#666; margin-bottom:6px; }


/* bulk actions */
.bulk-actions{ margin-left:auto; display:flex; gap:8px; align-items:center; }
.bulk-actions button{
  background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%);
  border:none;
  color:white;
  padding:8px 12px;
  border-radius:10px;
  font-weight:700;
  box-shadow: 0 8px 18px rgba(255,120,140,0.14);
  cursor:pointer;
}
.bulk-actions button.secondary{
  background:transparent;
  color:var(--muted);
  border:1px solid rgba(200,120,130,0.08);
  box-shadow:none;
}

/* table wrapper (employee box with glassmorphic blur) */
#tableWrap {
  margin-top: 8px;
  padding: 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.45); /* semi-transparent white layer */
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    0 8px 32px rgba(255, 182, 193, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
}

/* subtle hover effect for the glass box */
#tableWrap:hover {
  background: rgba(255, 255, 255, 0.55);
  box-shadow:
    0 12px 40px rgba(255, 160, 175, 0.35),
    inset 0 0 25px rgba(255, 255, 255, 0.18);
}

#tableWrap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(145deg, rgba(255,150,170,0.4), rgba(255,255,255,0.3));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}


/* table */
#attendanceTable{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
#attendanceTable thead th{
  text-align:left;
  padding:12px;
  color:var(--muted);
  font-weight:600;
  font-size:13px;
  border-bottom:1px solid rgba(220,180,185,0.6);
}
#attendanceTable td{
  padding:12px;
  border-bottom:1px dashed rgba(240,220,222,0.6);
  vertical-align:middle;
}
.rowSelect{ width:18px; height:18px; accent-color:var(--accent); }

/* status buttons inline */
.status-btn{
  padding:6px 10px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.04);
  margin-right:6px;
  font-weight:600;
  cursor:pointer;
  background:#fff;
}
.status-present{ background: #eaf7f0; color:#1b6b40; border-color:#ccead8; }
.status-absent{ background: #fff2f3; color:#8a2431; border-color:#f4c7cc; }
.status-company{ background:#f0eefc; color:#2b2b6b; border-color:#e2e1fb; }

/* summary */
.summary{
  margin-left:14px;
  font-weight:600;
  color:var(--muted);
}



/* responsive */
@media (max-width:900px){
  .bulk-actions{ width:100%; margin-top:8px; justify-content:flex-start; }
  .controls{ gap:8px; }
}