/* Attendance Sheet - Admin + Front styles */
.as-container{
  max-width:100%;
  margin:10px auto;
  font-family: "Cairo", "Tajawal", Arial, sans-serif;
  direction: rtl;
  color: #0f172a;
}

/* controls */
.as-controls{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:8px;
}
.as-controls label { font-weight:600; font-size:14px; }
.as-controls input, .as-controls select { padding:6px 8px; border:1px solid #d1d5db; border-radius:6px; }

.as-quick-actions { margin:8px 0; display:flex; gap:8px; }
#as-message { font-size:14px; color:#064e3b; min-height:20px; }

.as-table-wrapper{
  overflow-x:auto;
  border:1px solid #e2e8f0;
  background:#fff;
  padding:6px;
  border-radius:8px;
  box-shadow: 0 1px 3px rgba(2,6,23,0.04);
}

/* use table */
.as-grid{
  width:100%;
  border-collapse:collapse;
  min-width:680px;
  table-layout:fixed;
  font-size:14px;
}
.as-grid th, .as-grid td{
  border:1px solid #e6eef6;
  padding:0;
  vertical-align:middle;
  text-align:center;
  word-break:break-word;
  background:#fff;
}

/* first two columns */
.as-grid th.first-col, .as-grid td.first-col{
  width:48px;
  position:sticky;
  left:0;
  background:#f8fafc;
  z-index:3;
  text-align:center;
  font-weight:600;
  padding:10px 6px;
}

.as-grid th.name-col, .as-grid td.name-col{
  min-width:280px;
  max-width:520px;
  white-space: normal;
  word-break: break-word;
  text-align:right;
  padding:12px 14px;
  position:sticky;
  left:48px;
  background:#fff;
  z-index:2;
  font-weight:600;
}

/* headers */
.as-grid thead th{ background:#f1f5f9; font-weight:700; text-align:center; font-size:14px; padding:8px; }
.as-day-row th{ background:#fff8dc; font-weight:700; font-size:15px; text-align:center; padding:12px; }

/* row height for touch */
.as-grid tbody tr { min-height:44px; height:auto; }

/* box occupies entire cell so click anywhere toggles */
.as-box {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  min-height:44px;
  padding:10px 6px;
  border-radius:6px;
  line-height:1;
  font-size:16px;
  cursor:pointer;
  user-select:none;
  box-sizing:border-box;
}
.as-state-0 { background:transparent; color:#94a3b8; border:0; }
.as-state-1 { background:#e6f9ec; color:#0b6b2f; border:1px solid rgba(11,107,47,0.12); }
.as-state-2 { background:#fff0f0; color:#b91c1c; border:1px solid rgba(185,28,28,0.06); }

.as-grid td { cursor:pointer; }
.as-grid td:hover { background:#fbfdff; }

@media (max-width:900px){
  .as-grid { min-width:640px; }
  .as-grid th.name-col, .as-grid td.name-col { min-width:200px; max-width:340px; padding:10px 12px; }
  .as-grid tbody tr { min-height:48px; }
  .as-box { min-height:48px; padding:12px 8px; font-size:15px; }
}

/* admin inline editing style (used in admin page) */
.as-admin-input { width:100%; padding:6px; border:1px solid #d1d5db; border-radius:4px; }

/* print fallback */
@media print {
  body * { visibility: hidden; }
  .as-print-area, .as-print-area * { visibility: visible; }
  .as-print-area { position: absolute; left:0; top:0; width:100%; padding:10px; }
  .as-print-area table { width:100%; border-collapse:collapse; font-size:12px; }
  .as-grid th, .as-grid td { border:1px solid #999; padding:6px; text-align:center; vertical-align:middle; }
  .as-grid th.name-col, .as-grid td.name-col { white-space: normal !important; word-break: break-word; text-align:right; padding-right:8px; }
  .as-grid th.first-col, .as-grid td.first-col { width:48px; }
  .as-grid .first-col, .as-grid .name-col { position: static !important; left: auto !important; z-index: auto !important; }
}