/* attendance-style.css v1.1
   Enhanced visuals, forms and responsive tweaks
*/
.sa-root { font-family: Inter, system-ui, Arial, Helvetica, sans-serif; max-width:980px; margin:1rem auto; color:#123; }
.sa-center { display:flex; gap:1rem; justify-content:center; align-items:center; padding:2rem; }
.sa-btn { background:#e6f0ff; border:1px solid #bcd; padding:0.6rem 1rem; border-radius:10px; cursor:pointer; transition:all .12s; }
.sa-btn:hover { transform:translateY(-2px); }
.sa-btn-primary { background:#0073e6; color:white; border:none; box-shadow:0 4px 12px rgba(0,115,230,0.12); }
.sa-btn-ghost { background:transparent; border:1px solid #ccc; }
.sa-danger { background:#c0392b; color:white; }
.sa-small { padding:0.25rem 0.5rem; font-size:0.9rem; border-radius:8px; }
.sa-card { background:white; padding:1rem; border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,0.06); max-width:520px; margin:1rem auto; }
.sa-login label { display:block; margin-top:0.5rem; font-weight:600; color:#234; }
.sa-login input { width:100%; padding:0.5rem; margin-top:0.25rem; border-radius:8px; border:1px solid #e6eefc; background:#fbfdff; }
.sa-row { display:flex; gap:0.5rem; margin-top:0.75rem; align-items:center; }
.sa-msg { margin-top:0.5rem; color:#b00; }
.sa-topbar { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:0.5rem; }
.sa-tabs { display:flex; gap:0.5rem; flex-wrap:wrap; }
.sa-tab { padding:0.45rem 0.7rem; border-radius:8px; background:#f4f7fb; border:1px solid #e6eefc; cursor:pointer; font-weight:600; color:#235; }
.sa-active { background:#0073e6; color:#fff; border-color:#0073e6; box-shadow:0 6px 18px rgba(0,115,230,0.12); }
.sa-content { background:#fff; padding:1rem; border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,0.04); min-height:200px; }
.sa-table { width:100%; border-collapse:collapse; margin-top:1rem; font-size:0.95rem; }
.sa-table th, .sa-table td { padding:0.6rem 0.75rem; border-bottom:1px solid #eef2f7; text-align:left; vertical-align:middle; }
.sa-pending { background:#fbfbfb; color:#666; }
.sa-stats { display:flex; gap:1rem; justify-content:flex-start; margin-bottom:0.5rem; }
.sa-loading { padding:1rem; color:#666; }
.sa-error { padding:1rem; color:#b00; }
.sa-form-inline { display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; }
.sa-form-inline input, .sa-form-inline select { padding:0.4rem 0.5rem; border-radius:8px; border:1px solid #e6eefc; background:#fbfdff; }
.sa-settings label { display:block; margin-top:0.5rem; font-weight:600; }
.sa-teacher-card { max-width:520px; margin:auto; }
.sa-countdown { font-weight:700; margin:0.5rem 0; color:#045; }
pre { font-family:monospace; font-size:0.85rem; background:#f7f9fc; padding:0.5rem; border-radius:6px; }
@media (max-width:700px) {
    .sa-center { flex-direction:column; padding:1rem; }
    .sa-topbar { flex-direction:column; align-items:stretch; gap:0.5rem; }
    .sa-table thead { display:none; }
    .sa-table tr { display:block; margin-bottom:0.75rem; border:1px solid #f0f0f0; padding:0.5rem; border-radius:8px; }
    .sa-table td { display:flex; justify-content:space-between; }
}
/* Modal — ensure full-viewport coverage and mobile-friendly card */
.sa-modal {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  z-index: 99999;
  padding: 1rem; /* gives space for card on small screens */
}

.sa-modal.sa-show {
  display: flex;
}

.sa-modal .sa-modal-card {
  background: #fff;
  border-radius: 10px;
  max-width: 520px;
  width: 100%;
  max-height: calc(100vh - 2rem); /* fit within viewport */
  overflow: auto; /* allow card scrolling on very small screens */
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  padding: 1rem;
}

/* ensure buttons are visible and large enough on mobile */
.sa-modal .sa-btn {
  min-width: 80px;
  padding: 0.5rem 0.8rem;
}

/* on very small screens, make card use full width nicely */
@media (max-width:420px) {
  .sa-modal .sa-modal-card {
    padding: 0.75rem;
    border-radius: 8px;
    max-width: 100%;
  }
  .sa-modal .sa-modal-card #sa-modal-text { font-size: 0.95rem; }
}

/* Toast (inline notice) styles */
.sa-toast-container {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 11000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 320px;
  width: calc(100% - 2rem);
}
.sa-toast {
  display:flex;
  align-items:center;
  gap:0.5rem;
  padding:0.6rem 0.9rem;
  border-radius:10px;
  box-shadow:0 8px 20px rgba(0,0,0,0.12);
  color:#fff;
  font-weight:600;
  animation: sa-toast-in .18s ease;
}
.sa-toast--success { background: #2ecc71; }
.sa-toast--error   { background: #e74c3c; }
.sa-toast--info    { background: #0073e6; }
@keyframes sa-toast-in { from { transform: translateY(6px); opacity:0 } to { transform: translateY(0); opacity:1 } }

/* Mobile layout polish */
@media (max-width:480px) {
  .sa-btn { padding: 0.6rem 0.8rem; font-size: 0.95rem; border-radius: 10px; }
  .sa-form-inline { gap:0.4rem; }
  .sa-input-inline { width:4.5rem; }
  .sa-toast-container { left: 1rem; right: 1rem; bottom: 1rem; max-width:calc(100% - 2rem); }
  .sa-card, .sa-content { padding:0.75rem; }
}
/* Responsive stacked table view with column labels on mobile */
@media (max-width: 768px) {
  .sa-table {
    border: 0;
  }
  .sa-table thead {
    display: none; /* hide the header row */
  }
  .sa-table tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 0.5rem;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  }
  .sa-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.6rem;
    font-size: 0.95rem;
    border: none;
    border-bottom: 1px solid #f1f1f1;
  }
  .sa-table td:last-child {
    border-bottom: none;
  }
  .sa-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #0073e6;
    text-align: left;
  }
}