:root{--bg:#0f172a;--card:#ffffff;--accent:#2563eb;--accent-2:#7c3aed;--text:#0f172a;--muted:#6b7280;--success:#10b981;--danger:#ef4444}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:linear-gradient(180deg,var(--bg),#1e293b);color:var(--text)}
.container{max-width:1100px;margin:32px auto;padding:12px}
.card{background:var(--card);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.15);padding:20px}
h1,h2,h3{margin:0 0 10px 0}h1{color:#fff;text-align:center;font-weight:800;letter-spacing:.4px;margin-bottom:18px}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;color:#fff}
button,input,select{font:inherit}
.btn{appearance:none;border:none;border-radius:12px;padding:10px 16px;background:var(--accent);color:#fff;cursor:pointer;transition:transform .05s ease,opacity .2s ease}
.btn:hover{opacity:.95}.btn:active{transform:translateY(1px)}
.btn.secondary{background:var(--accent-2)}.btn.success{background:var(--success)}.btn.danger{background:var(--danger)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.3)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
input,select{padding:10px 12px;border:1px solid #e5e7eb;border-radius:10px;outline:none}
input:focus,select:focus{border-color:var(--accent)}
.table{width:100%;border-collapse:collapse;border-radius:12px;overflow:hidden}
.table th,.table td{padding:12px 10px;border-bottom:1px solid #eee;text-align:left}
.table th{background:#f8fafc;font-weight:700}
.kpi{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0 16px}
.kpi .item{flex:1 1 200px;background:#f8fafc;border-radius:12px;padding:14px;border:1px solid #eef2ff}
.kpi .value{font-size:26px;font-weight:800}
.badge{padding:4px 10px;border-radius:999px;font-size:12px;display:inline-block;background:#eef2ff;color:#1e3a8a}
footer{color:#cbd5e1;text-align:center;padding:30px 0}
.hidden{display:none !important}
.small{font-size:12px;color:var(--muted)}input[type=number]{width:110px}
.sticky-actions{position:sticky;bottom:0;background:#fff;padding:10px;border-top:1px solid #e5e7eb;display:flex;justify-content:flex-end;gap:10px}
#calendar{max-width:100%;}
.fc .fc-daygrid-day-top{display:flex;justify-content:center;align-items:center;padding:4px 6px}
.fc-daygrid-day-number{font-weight:700;text-align: center;flex: 1;}
.fc-event{border:none}
/* solid background events */
.fc { --fc-bg-event-opacity: .8; }
.fc .fc-daygrid-day.fc-day-other { opacity: 1 !important; }
/* style attendance count text */
.fc .att-count { 
  font-size: 11px; 
  font-weight: 700; 
  color: black;       /* white, good on black */
  margin-top: 2px;
}

/* Class details table styling */
#classDetailsTable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

#classDetailsTable th, 
#classDetailsTable td {
  border-bottom: 1px solid #e5e7eb;
  padding: 8px;
  text-align: left;
}

#classDetailsTable th {
  background: #f8fafc;
  font-weight: 700;
  font-size: 14px;
}

#classDetailsTable input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
}

#classDetailsTable input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 1px var(--accent);
}

/* Add period button */
#addRowBtn {
  margin-top: 10px;
  font-size: 14px;
  padding: 8px 14px;
}
.loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--accent);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
  margin: 20px auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}