:root { --green:#16a34a; --blue:#2563eb; --orange:#ea580c; --red:#dc2626; }
* { box-sizing:border-box; }
body { margin:0; background: linear-gradient(135deg,#f8fafc 0%,#eefbf3 48%,#f4f7ff 100%); }
button,input,select,textarea { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }
.glass-card { background:rgba(255,255,255,.58); border:1px solid rgba(255,255,255,.72); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:0 12px 35px rgba(15,23,42,.09); }
.shimmer-card { position:relative; overflow:hidden; }
.shimmer-card::after { content:""; position:absolute; inset:-30%; background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.68) 50%,transparent 65%); transform:translateX(-100%); animation:shimmer 2.3s infinite; pointer-events:none; }
@keyframes shimmer { 100% { transform:translateX(100%); } }
.label { display:block; margin-bottom:.35rem; font-size:.82rem; font-weight:700; color:#475569; }
.input { width:100%; border-radius:1rem; border:1px solid rgba(148,163,184,.35); background:rgba(255,255,255,.72); padding:.72rem .85rem; outline:none; transition:.18s ease; }
.input:focus { border-color:rgba(34,197,94,.55); box-shadow:0 0 0 4px rgba(34,197,94,.1); background:rgba(255,255,255,.95); }
.date-hint { margin-top:.3rem; font-size:.72rem; color:#94a3b8; min-height:1rem; }
.btn { border:0; border-radius:1rem; padding:.72rem 1rem; font-weight:800; box-shadow:0 8px 22px rgba(15,23,42,.08); transition:transform .18s ease, filter .18s ease, box-shadow .18s ease, background .18s ease; }
.btn:hover { transform:translateY(-2px); box-shadow:0 12px 26px rgba(15,23,42,.12); filter:saturate(1.08); }
.btn:active { transform:translateY(0); }
.btn-green { background:#16a34a; color:white; }
.btn-blue { background:#2563eb; color:white; }
.btn-purple { background:#7c3aed; color:white; }
.btn-orange { background:#ea580c; color:white; }
.btn-red { background:#dc2626; color:white; }
.btn-light { background:rgba(255,255,255,.76); color:#334155; border:1px solid rgba(148,163,184,.25); }
.nav-btn { min-width:0; border-radius:1rem; padding:.7rem .7rem; font-weight:800; color:white; border:0; box-shadow:0 7px 20px rgba(15,23,42,.1); opacity:.9; transition:.18s ease; }
.nav-btn.active,.nav-btn:hover { opacity:1; transform:translateY(-1px); box-shadow:0 12px 28px rgba(15,23,42,.14); }
.nav-green { background:#16a34a; } .nav-blue { background:#2563eb; } .nav-orange { background:#ea580c; } .nav-purple { background:#7c3aed; } .nav-red { background:#dc2626; }
.section-hero { border-radius:1.8rem; padding:1.2rem 1.25rem; display:flex; justify-content:space-between; align-items:center; overflow:hidden; box-shadow:0 14px 35px rgba(15,23,42,.1); position:relative; }
.section-hero::after { content:""; position:absolute; width:75%; height:140%; top:-20%; left:-10%; background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.3) 50%,transparent 65%); animation:heroShine 5s linear infinite; pointer-events:none; }
@keyframes heroShine { 0%{transform:translateX(-70%)} 45%{transform:translateX(110%)} 100%{transform:translateX(110%)} }
.hero-title { font-size:1.2rem; font-weight:900; color:white; position:relative; z-index:1; }
.hero-sub { font-size:.8rem; color:rgba(255,255,255,.88); margin-top:.15rem; position:relative; z-index:1; }
.hero-emoji { font-size:2.6rem; position:relative; z-index:1; }
.hero-green { background:linear-gradient(135deg,#16a34a,#22c55e); } .hero-blue { background:linear-gradient(135deg,#1d4ed8,#3b82f6); } .hero-purple { background:linear-gradient(135deg,#6d28d9,#8b5cf6); } .hero-orange { background:linear-gradient(135deg,#ea580c,#f97316); } .hero-red { background:linear-gradient(135deg,#dc2626,#ef4444); }
.badge { display:inline-flex; align-items:center; border-radius:999px; padding:.25rem .6rem; font-size:.72rem; font-weight:800; }
.badge-green { background:#dcfce7; color:#166534; } .badge-blue { background:#dbeafe; color:#1d4ed8; } .badge-orange { background:#ffedd5; color:#c2410c; } .badge-red { background:#fee2e2; color:#b91c1c; }
.status-btn { padding:.45rem .42rem; border-radius:.8rem; font-size:.8rem; font-weight:900; border:1px solid rgba(148,163,184,.25); background:rgba(255,255,255,.55); color:#94a3b8; transition:.2s ease; }
.status-btn.active { color:white; transform:translateY(-1px); box-shadow:0 7px 18px rgba(15,23,42,.12); }
.status-present.active { background:#16a34a; } .status-late.active { background:#f59e0b; } .status-leave.active { background:#2563eb; } .status-absent.active { background:#dc2626; }
.desktop-student-row { display:grid; grid-template-columns:100px minmax(220px,1.2fr) 100px 100px 310px minmax(160px,1fr); gap:1rem; align-items:center; }
.student-photo { width:100px; height:120px; object-fit:cover; border-radius:1.15rem; background:#e2e8f0; }
.dropzone { border:2px dashed rgba(100,116,139,.25); background:rgba(248,250,252,.72); border-radius:1.25rem; padding:1.2rem; text-align:center; cursor:pointer; transition:.2s; }
.dropzone.drag { border-color:#16a34a; background:#ecfdf5; transform:scale(1.01); }
.modal-dialog { width:min(96vw,720px); border:0; border-radius:1.8rem; padding:0; background:transparent; }
.modal-dialog::backdrop { background:rgba(15,23,42,.45); backdrop-filter:blur(5px); }
.modal-card { background:rgba(255,255,255,.96); border:1px solid white; border-radius:1.8rem; padding:1.25rem; box-shadow:0 30px 80px rgba(15,23,42,.25); max-height:90vh; overflow:auto; }
.admin-tab-btn { border:0; border-radius:1rem; padding:.7rem .8rem; background:rgba(255,255,255,.7); font-weight:900; box-shadow:0 7px 18px rgba(15,23,42,.07); transition:.18s; }
.admin-tab-btn.active { background:#111827; color:white; transform:translateY(-1px); }
.delete-progress-bar { background-image:linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent); background-size:1.25rem 1.25rem; animation:deleteProgressMove .7s linear infinite; }
@keyframes deleteProgressMove { from{background-position:0 0} to{background-position:1.25rem 0} }
.mobile-save { display:none; }
@media (max-width: 639px) {
  body { background:#f8fafc; }
  .glass-card { border-radius:1.25rem; }
  main { padding-top:0 !important; }
  .section-hero { border-radius:0; padding:1rem .85rem; }
  .glass-card.rounded-3xl { border-radius:1.15rem; }
  .desktop-only { display:none !important; }
  .desktop-student-row { display:none; }
  .mobile-save { display:block; }
  .status-btn { padding:.38rem .35rem; font-size:.76rem; }
  .mobile-name { font-size:.74rem; color:#94a3b8; line-height:1.2; }
  .mobile-nick-room { font-size:1.12rem; font-weight:900; color:#0f172a; line-height:1.25; }
  .mobile-status-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.35rem; }
}
@media (min-width: 640px) {
  .mobile-student-card { display:none; }
}

/* Leave remark selector: never disables pointer interaction; only dims when not applicable. */
.remark-input { cursor: pointer; transition: .2s ease; }
.remark-input.remark-disabled { opacity: .58; background: rgba(248,250,252,.72); }
.remark-input:not(.remark-disabled) { border-color: rgba(59,130,246,.45); box-shadow: 0 0 0 2px rgba(59,130,246,.06); }

/* ===== v8.4 Tablet / iPad responsive fixes ===== */
html, body { max-width:100%; overflow-x:hidden; }
#appScreen, main, header, footer, .page-section { width:100%; max-width:100%; min-width:0; }
.page-section .grid > *, .page-section .flex > *, header .flex > * { min-width:0; }
img, svg, canvas { max-width:100%; }

/* Keep wide data tables inside their own scroll area instead of stretching the page. */
.overflow-x-auto { max-width:100%; -webkit-overflow-scrolling:touch; }
#dailyTableWrap, #statsTableWrap, #historyTableWrap,
#studentAdminTable, #usersAdminTable, #bulkPreview { max-width:100%; min-width:0; }

/* Tablet: 640–1100 px. Use the compact student cards and a wrapped navigation. */
@media (min-width:640px) and (max-width:1100px) {
  header > div, header nav, main, footer {
    width:100%;
    max-width:100% !important;
    padding-left:1rem !important;
    padding-right:1rem !important;
  }

  header nav > div {
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.6rem !important;
  }
  header nav .nav-btn { width:100%; min-width:0; padding:.68rem .45rem; font-size:.82rem; }
  header nav .sm\:ml-auto { margin-left:0 !important; }

  /* Desktop attendance row is too wide for iPad portrait/most tablets. */
  .desktop-student-row { display:none !important; }
  .desktop-only { display:none !important; }
  .mobile-student-card { display:block !important; }
  .mobile-save { display:block !important; }

  .mobile-student-card { margin-left:0; margin-right:0; }
  .mobile-status-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.45rem; }

  /* Avoid 4/5 very narrow filter columns on tablet portrait. */
  #page-checkin .sm\:grid-cols-3,
  #page-history .sm\:grid-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #page-daily .sm\:grid-cols-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #page-stats .sm\:grid-cols-5 { grid-template-columns:repeat(2,minmax(0,1fr)); }

  #page-admin .sm\:grid-cols-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #page-admin .sm\:grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }

  .section-hero { max-width:100%; }
  .hero-title { font-size:1.08rem; }
  .hero-emoji { font-size:2.15rem; }

  .modal-dialog { width:min(94vw,720px); max-width:94vw; }
  .modal-card { max-width:100%; }
}

/* iPad portrait and smaller tablets: make navigation and forms even safer. */
@media (min-width:640px) and (max-width:820px) {
  header nav > div { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #page-checkin .sm\:grid-cols-3,
  #page-history .sm\:grid-cols-3,
  #page-daily .sm\:grid-cols-4,
  #page-stats .sm\:grid-cols-5 { grid-template-columns:repeat(2,minmax(0,1fr)); }

  #checkinSummary, #dailySummary { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .glass-card { max-width:100%; }
}

/* ===== v8.5 Bulk student photo upload ===== */
#bulkPhotoProgressBar { min-width:0; }
#admin-photos code { word-break:break-all; }
#bulkPhotoResults table, #bulkPhotoSelection table { border-collapse:collapse; }
@media (min-width:640px) and (max-width:1100px) {
  #page-admin .sm\:grid-cols-5 { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:640px) and (max-width:820px) {
  #page-admin .sm\:grid-cols-5 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Daily Report Required Field Highlight */
.input-error {
  border-color: #ef4444 !important;
  background-color: #fef2f2 !important;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.22) !important;
  animation: shakeInput 0.4s ease-in-out;
}
@keyframes shakeInput {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

/* Student Stay / Away Toggle Switch Animation */
.stay-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 86px;
  height: 32px;
  padding: 3px;
  border-radius: 9999px;
  border: 0;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  font-weight: 800;
  font-size: 11.5px;
  user-select: none;
  overflow: hidden;
  transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, transform 0.15s ease;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.12);
  vertical-align: middle;
}
.stay-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.16);
}
.stay-toggle:active {
  transform: translateY(0);
}
.stay-toggle.is-staying {
  background: linear-gradient(135deg, #15803d, #22c55e);
  color: #ffffff;
}
.stay-toggle.is-away {
  background: linear-gradient(135deg, #c2410c, #f97316);
  color: #ffffff;
}
.stay-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  z-index: 2;
}
.stay-toggle.is-staying .stay-toggle-thumb {
  transform: translateX(54px);
}
.stay-toggle.is-away .stay-toggle-thumb {
  transform: translateX(0);
}
.stay-toggle-label {
  position: absolute;
  font-weight: 800;
  white-space: nowrap;
  transition: opacity 0.2s ease;
  z-index: 1;
}
.stay-toggle.is-staying .stay-toggle-label {
  left: 14px;
  color: #ffffff;
}
.stay-toggle.is-away .stay-toggle-label {
  right: 12px;
  color: #ffffff;
}
.stay-toggle.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

/* Student Admin Compact Dashboard */
.student-dash-stat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(226, 232, 240, 0.8);
  min-width: 0;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
  transition: transform 0.18s ease;
}
.student-dash-stat:hover {
  transform: translateY(-1px);
}
.student-dash-icon {
  width: 30px;
  height: 30px;
  border-radius: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.student-dash-val {
  font-size: 1.15rem;
  font-weight: 850;
  line-height: 1.1;
  color: #0f172a;
}
.student-dash-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
  white-space: nowrap;
}
.student-room-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.55rem;
  border-radius: 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(248, 250, 252, 0.9);
  color: #334155;
  border: 1px solid rgba(203, 213, 225, 0.7);
}
.student-room-chip .count {
  font-weight: 800;
  color: #1e293b;
  background: white;
  padding: 0.08rem 0.35rem;
  border-radius: 0.35rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}