/* ========== Theme ==========
   Fresh gradient brand, soft glass, micro-interactions */
:root{
  --brand:#0b63f6;
  --brand-2:#6d28d9;
  --accent:#16a34a;
  --bg:#eef2ff;          /* lavender-ish background */
  --card:rgba(255,255,255,.85);
  --text:#0f172a;
  --muted:#64748b;
  --danger:#dc2626;

  --radius:16px;
  --radius-sm:12px;
  --shadow-lg:0 18px 45px rgba(2,6,23,.15);
  --shadow-md:0 8px 20px rgba(2,6,23,.10);
  --ring:0 0 0 3px rgba(11,99,246,.22);
}

/* Base reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,"Noto Sans",sans-serif;
  color:var(--text); margin:0; padding:24px;
  /* Unique gradient canvas with subtle pattern */
  background:
    radial-gradient(1200px 800px at -20% -10%, rgba(109,40,217,.12), transparent 60%),
    radial-gradient(1000px 600px at 120% 0%, rgba(11,99,246,.10), transparent 55%),
    linear-gradient(180deg, #f8fafc 0%, var(--bg) 100%);
}

/* Light motion preferences */
@media (prefers-reduced-motion:no-preference){
  .lift{transition:transform .25s ease, box-shadow .25s ease, filter .2s ease}
  .lift:hover{transform:translateY(-2px)}
}

/* Layout */
.container{max-width:1100px;margin:0 auto}
.card{
  background:var(--card); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-lg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border:1px solid rgba(99,102,241,.12);
}

h1,h2,h3{margin:.2rem 0 1rem}
h2{letter-spacing:.2px}

/* Header */
.header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.header .logo{
  width:52px;height:52px;border-radius:14px;
  background:conic-gradient(from 180deg at 50% 50%, var(--brand), #22c55e, #f97316, var(--brand) 360deg);
  box-shadow:0 6px 20px rgba(99,102,241,.25);
}

/* Buttons */
button,.btn{
  appearance:none; border:none; cursor:pointer; line-height:1;
  padding:10px 16px; font-weight:700; color:#fff; border-radius:14px;
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow:0 8px 18px rgba(11,99,246,.25);
}
button:hover,.btn:hover{filter:brightness(.98)}
button:focus,.btn:focus{box-shadow:var(--ring)}

.btn-accent{
  background:linear-gradient(135deg, #10b981, var(--accent));
  box-shadow:0 8px 18px rgba(16,185,129,.25);
}
.btn-danger{
  background:linear-gradient(135deg, #ef4444, var(--danger));
  box-shadow:0 8px 18px rgba(239,68,68,.25);
}

/* Inputs */
input[type=text],input[type=file],select{
  width:100%; padding:10px 12px;
  border:1px solid #e5e7eb; border-radius:12px; background:#fff;
  box-shadow:inset 0 1px 0 rgba(2,6,23,.02);
}
input:focus,select:focus{
  outline:none; box-shadow:var(--ring);
}

/* Forms */
.form-row{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin:8px 0}

/* Sections (control groups) */
.sections{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:12px; margin:12px 0;
}
.section{
  border:1px solid rgba(15,23,42,.06);
  border-radius:14px; padding:12px; background:rgba(255,255,255,.9);
  box-shadow:var(--shadow-md);
}
.section h3{
  margin:0 0 8px; font-size:1.02rem; color:#0f172a; display:flex; align-items:center; gap:8px;
}
.section .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.section .row > *{flex:0 1 auto}
.section .row select,.section .row input[type="text"]{min-width:180px}
.danger h3{color:#b91c1c}
.muted{color:var(--muted)}
.muted-small{color:var(--muted);font-size:.9rem;margin-top:6px}

/* Tiles (dashboard counters) */
.dash{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}
.tile{
  flex:1 1 160px; min-width:160px; border-radius:14px; padding:14px; text-align:center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.85)),
    radial-gradient(400px 200px at 0% 0%, rgba(11,99,246,.08), transparent 60%);
  border:1px solid rgba(2,6,23,.06);
  box-shadow:var(--shadow-md);
}
.tile h4{margin:0;color:#111827}
.tile .n{font-size:1.6rem;font-weight:800;margin-top:4px}

/* Class chips */
.classdash{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 12px}
.classpill{
  border:1px solid rgba(2,6,23,.08); border-radius:999px; padding:6px 12px; background:#fff;
  box-shadow:0 2px 6px rgba(2,6,23,.06);
}

/* Table */
.table-wrap{overflow:auto;border:1px solid rgba(2,6,23,.08);border-radius:14px;background:#fff}
table{width:100%;border-collapse:separate;border-spacing:0}
th,td{padding:12px 10px;border-bottom:1px solid #eef2f7;text-align:left;white-space:nowrap}
th{
  position:sticky; top:0; z-index:1;
  background:linear-gradient(180deg,#f0f6ff,#eaf2ff);
  text-transform:uppercase; font-size:.78rem; letter-spacing:.04em; color:#334155;
  border-bottom:1px solid #dbeafe;
}
tbody tr:hover{background:#f9fbff}
td:nth-child(2),td:nth-child(3),td:nth-child(6),td:nth-child(7){text-align:center}
.badge{
  display:inline-block; padding:4px 10px; border-radius:999px; color:#0f172a;
  background:linear-gradient(135deg,#eef2ff,#e0e7ff); border:1px solid #e2e8f0;
  box-shadow:inset 0 1px 0 #fff, 0 1px 3px rgba(2,6,23,.06);
}

/* Pagination */
.pagination{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:12px 0}
.pagination a,.pagination span{
  padding:8px 12px;border:1px solid #e5e7eb;border-radius:999px;text-decoration:none;color:#0f172a;background:#fff
}
.pagination .active{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-color:transparent}

/* User header pieces */
.userbox{margin-left:auto;display:flex;gap:8px;align-items:center}

/* Old actions row (reused in table) */
.actions{display:flex;gap:8px;flex-wrap:wrap}

/* School header */
.school-header{text-align:center;margin:0 0 18px}
.school-header img{width:120px;height:auto;margin-bottom:8px}
.school-name{font-size:1.6rem;font-weight:900;color:#1a73e8;letter-spacing:.2px}
.school-details{font-size:.95rem;color:#475569}
@media (max-width:420px){ .school-header img{width:100px} }

.signatures{display:flex;justify-content:space-between;align-items:center;margin-top:50px}
.signatures .qr-code img{width:100px;height:100px;margin:0 20px}

/* Responsive helpers */
@media (max-width:560px){
  .section .row select,.section .row input[type="text"]{min-width:0;flex:1 1 160px}
}