/* =========================================================
   CAMPUSLY — Design System
   Palette: Deep indigo navy, warm coral, golden highlight,
   cream paper background. Friendly, trustworthy, professional.
   Type: Poppins (display) + Inter (body)
   Role colors: superadmin charcoal, admin indigo, teacher teal,
   student coral, parent purple — used consistently as badges
   and avatar rings throughout the app.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --navy:#1B2A4A;
  --navy-800:#233457;
  --navy-050:#EEF1F8;
  --coral:#FF7452;
  --coral-dim:#E85F3D;
  --gold:#FFC94D;
  --teal:#2AA198;
  --purple:#8E7CC3;
  --cream:#FBF8F3;
  --card:#FFFFFF;
  --ink:#232838;
  --ink-muted:#6B7280;
  --line:#ECE7DD;
  --danger:#E5484D;
  --success:#2FB170;
  --radius:16px;
  --shadow:0 14px 36px rgba(27,42,74,.10);
  --font-display:'Poppins', sans-serif;
  --font-body:'Inter', sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  margin:0;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display);}
a{text-decoration:none;}

.btn{border-radius:12px; font-weight:700; padding:.65rem 1.4rem; border:none; transition:.18s ease;}
.btn-coral{background:var(--coral); color:#fff;}
.btn-coral:hover{background:var(--coral-dim); color:#fff;}
.btn-navy{background:var(--navy); color:#fff;}
.btn-navy:hover{background:var(--navy-800); color:#fff;}
.btn-outline-navy{background:transparent; border:1.5px solid var(--navy); color:var(--navy);}
.btn-outline-navy:hover{background:var(--navy); color:#fff;}
.btn-gold{background:var(--gold); color:#4A3300;}
.btn-gold:hover{background:#f0ba3a; color:#4A3300;}

/* ---------- Landing Page ---------- */
.nav-landing{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(251,248,243,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-landing .brand{font-family:var(--font-display); font-weight:800; font-size:1.4rem; color:var(--navy);}
.nav-landing .brand span{color:var(--coral);}
.nav-landing a.nav-link-item{color:var(--ink-muted); font-weight:600; font-size:.92rem;}
.nav-landing a.nav-link-item:hover{color:var(--navy);}

.hero{
  min-height:100vh; display:flex; align-items:center;
  background:
    radial-gradient(circle at 90% 10%, rgba(255,201,77,.25) 0%, transparent 40%),
    radial-gradient(circle at 5% 95%, rgba(255,116,82,.16) 0%, transparent 42%),
    var(--navy);
  color:#fff; padding-top:96px; position:relative; overflow:hidden;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(255,201,77,.14); border:1px solid rgba(255,201,77,.4);
  padding:.4rem .9rem; border-radius:100px; font-size:.82rem; font-weight:700; color:var(--gold);
}
.hero h1{font-size:clamp(2.3rem,4.6vw,4rem); line-height:1.08; font-weight:800; margin:1.1rem 0 1.2rem;}
.hero h1 em{color:var(--coral); font-style:normal;}
.hero p.lead{color:#D7DCEA; font-size:1.14rem; max-width:520px;}
.hero-stats{display:flex; gap:2rem; margin-top:2.2rem; flex-wrap:wrap;}
.hero-stats .stat-num{font-family:var(--font-display); font-size:1.6rem; font-weight:800; color:#fff;}
.hero-stats .stat-label{font-size:.78rem; color:#B9C0D6; text-transform:uppercase; letter-spacing:.06em;}

/* Signature visual: report card mock */
.reportcard-mock{
  background:#fff; color:var(--ink); border-radius:20px; box-shadow:var(--shadow);
  padding:1.5rem; max-width:400px; position:relative;
}
.reportcard-mock .rc-head{display:flex; align-items:center; gap:.8rem; border-bottom:2px dashed var(--line); padding-bottom:1rem; margin-bottom:1rem;}
.reportcard-mock .rc-avatar{width:48px; height:48px; border-radius:50%; background:var(--coral); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-family:var(--font-display);}
.reportcard-mock .rc-row{display:flex; justify-content:space-between; align-items:center; padding:.45rem 0; border-bottom:1px solid var(--line); font-size:.9rem;}
.grade-pill{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:28px; border-radius:8px;
  font-weight:800; font-size:.85rem; color:#fff;
}
.grade-A{background:var(--success);}
.grade-B{background:var(--teal);}
.grade-C{background:var(--gold); color:#4A3300;}
.grade-D{background:var(--coral);}
.grade-F{background:var(--danger);}
.float-badge{
  position:absolute; top:-14px; right:26px; background:var(--gold); color:#4A3300;
  font-weight:800; font-size:.72rem; padding:.35rem .8rem; border-radius:100px; box-shadow:0 6px 16px rgba(255,201,77,.4);
}

.section-eyebrow{text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; font-weight:700; color:var(--coral);}
.section-title{font-size:clamp(1.7rem,3vw,2.5rem); color:var(--navy); font-weight:800;}
.section-title.on-dark{color:#fff;}

.feature-card{
  background:#fff; border-radius:var(--radius); padding:1.8rem; box-shadow:var(--shadow); height:100%;
  border:1px solid var(--line); transition:.22s ease;
}
.feature-card:hover{transform:translateY(-6px);}
.feature-card .ic{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--navy-050); color:var(--navy); font-size:1.35rem; margin-bottom:1rem;
}

.role-strip{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.6rem;}
.role-chip{padding:.4rem .9rem; border-radius:100px; font-size:.82rem; font-weight:700; color:#fff;}
.role-superadmin{background:#333;}
.role-admin{background:var(--navy);}
.role-teacher{background:var(--teal);}
.role-student{background:var(--coral);}
.role-parent{background:var(--purple);}

.step-item{display:flex; gap:1.2rem; align-items:flex-start;}
.step-num{font-family:var(--font-display); font-size:1.8rem; color:var(--gold); font-weight:800; min-width:50px;}

.pricing-card{background:#fff; border-radius:var(--radius); padding:2rem; box-shadow:var(--shadow); border:2px solid var(--line);}
.pricing-card.featured{border-color:var(--coral);}
.pricing-card .price{font-family:var(--font-display); font-size:2.3rem; color:var(--navy); font-weight:800;}

footer.site-footer{background:#12193000; background:var(--navy); color:#B9C0D6; padding:3rem 0 1.5rem;}
footer.site-footer a{color:#fff;}
.dev-credit{
  text-align:center; font-size:.85rem; color:rgba(255,255,255,.55); padding-top:1.2rem;
  border-top:1px solid rgba(255,255,255,.1); margin-top:1.5rem;
}

/* ---------- Auth pages ---------- */
.auth-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 85% 10%, rgba(255,201,77,.18) 0%, transparent 45%), var(--navy);
  padding:2rem 1rem;
}
.auth-card{background:#fff; border-radius:20px; box-shadow:var(--shadow); padding:2.4rem; width:100%; max-width:440px;}
.auth-card h2{color:var(--navy); font-weight:800;}
.form-control, .form-select{border-radius:10px; border:1.5px solid #e3ded2; padding:.6rem .9rem;}
.form-control:focus, .form-select:focus{border-color:var(--navy); box-shadow:0 0 0 3px rgba(255,116,82,.18);}

/* ---------- Dashboard ---------- */
.app-shell{display:flex; min-height:100vh; background:#F3F0E9;}
.app-sidebar{
  width:255px; background:var(--navy); color:#B9C0D6; flex-shrink:0;
  position:fixed; top:0; bottom:0; left:0; overflow-y:auto;
}
.app-sidebar .brand{color:#fff; font-family:var(--font-display); font-weight:800; font-size:1.25rem; padding:1.4rem 1.2rem; display:block; border-bottom:1px solid rgba(255,255,255,.1);}
.app-sidebar .brand span{color:var(--coral);}
.app-sidebar .side-role{padding:.6rem 1.2rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:#8792AC;}
.app-sidebar nav a{display:flex; align-items:center; gap:.7rem; padding:.72rem 1.2rem; color:#B9C0D6; font-weight:500; font-size:.93rem; border-left:3px solid transparent;}
.app-sidebar nav a:hover, .app-sidebar nav a.active{background:rgba(255,255,255,.06); color:#fff; border-left-color:var(--coral);}
.app-main{margin-left:255px; flex:1; padding:1.8rem 2rem;}
@media(max-width:900px){
  .app-sidebar{width:70px;}
  .app-sidebar .brand, .app-sidebar .side-role, .app-sidebar nav a span.label{display:none;}
  .app-main{margin-left:70px;}
}
.topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:1.6rem; flex-wrap:wrap; gap:.6rem;}
.card-stat{background:#fff; border-radius:var(--radius); padding:1.4rem; box-shadow:var(--shadow);}
.card-stat .num{font-family:var(--font-display); font-size:1.9rem; color:var(--navy); font-weight:800;}
.card-stat .label{color:var(--ink-muted); font-size:.83rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em;}
.card-stat.alert-stat .num{color:var(--danger);}
.card-panel{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:1.6rem;}

.badge-status{padding:.35rem .7rem; border-radius:100px; font-size:.76rem; font-weight:700;}
.badge-active{background:#DEF5E8; color:var(--success);}
.badge-inactive{background:#FBE3E3; color:var(--danger);}
.badge-pending{background:#FFF3DA; color:#A9762D;}
.badge-approved{background:#E3ECF7; color:#2E5A9C;}
.badge-submitted{background:#E3ECF7; color:#2E5A9C;}
.badge-published{background:#DEF5E8; color:var(--success);}
.badge-draft{background:#eee; color:#666;}

/* Badges & leaderboard */
.earned-badge{display:inline-flex; align-items:center; gap:.4rem; background:var(--navy-050); border:1px solid var(--aqua-200,#CFE8E6); border-radius:100px; padding:.4rem .9rem; font-weight:700; font-size:.85rem; color:var(--navy); margin:.2rem;}
.leaderboard-row{display:flex; align-items:center; justify-content:space-between; padding:.6rem .8rem; border-radius:10px; margin-bottom:.4rem;}
.leaderboard-row.rank-1{background:linear-gradient(90deg,#FFF3DA,#fff);}
.leaderboard-row.rank-2{background:linear-gradient(90deg,#F1F0EB,#fff);}
.leaderboard-row.rank-3{background:linear-gradient(90deg,#FBEAE2,#fff);}
.rank-badge{width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; background:var(--navy); color:#fff; font-size:.85rem;}

/* Report card */
.report-card{background:#fff; border:1px solid #e5e1d6; border-radius:16px; padding:2rem; max-width:820px; margin:0 auto;}
.report-card .rc-header{text-align:center; border-bottom:3px double var(--navy); padding-bottom:1rem; margin-bottom:1.2rem;}
.report-card .rc-logo{max-width:64px; max-height:64px; margin-bottom:.4rem;}
.report-card table.rc-table{width:100%; border-collapse:collapse;}
.report-card table.rc-table th, .report-card table.rc-table td{border:1px solid #e5e1d6; padding:.5rem .6rem; font-size:.9rem;}
.report-card table.rc-table th{background:var(--navy-050); color:var(--navy);}
.rc-summary-box{background:var(--navy-050); border-radius:12px; padding:1rem; text-align:center;}
.rc-signature-line{border-top:1px solid #999; width:200px; margin-top:2.5rem; padding-top:.3rem; font-size:.8rem; color:var(--ink-muted);}

.table thead th{color:var(--ink-muted); font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; border-bottom:2px solid #eee; font-weight:700;}
.warning-banner{background:#FFF3DA; border:1px solid var(--gold); color:#8A5A0E; padding:.9rem 1.2rem; border-radius:12px; margin-bottom:1.4rem; font-weight:600;}
.warning-banner.danger{background:#FBE3E3; border-color:var(--danger); color:#8C2E2E;}

/* Avatar */
.avatar-circle{
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:700; color:#fff; font-family:var(--font-display); flex-shrink:0; overflow:hidden; background:var(--navy);
}
.avatar-circle img{width:100%; height:100%; object-fit:cover;}
.avatar-lg{width:96px; height:96px; font-size:1.8rem;}

/* Credential reveal card (shown when a student/teacher/parent account is created) */
.credential-box{
  background:var(--navy-050); border:1.5px dashed var(--navy); border-radius:14px; padding:1rem 1.2rem; margin-top:.8rem;
}
.credential-box .cred-row{display:flex; justify-content:space-between; align-items:center; padding:.3rem 0; font-family:monospace; font-size:.95rem;}
.credential-box .cred-label{color:var(--ink-muted); font-family:var(--font-body); font-size:.8rem; text-transform:uppercase; letter-spacing:.04em;}

/* Public site */
.school-hero{background:var(--navy); color:#fff; padding:3.5rem 0; text-align:center;}
.school-hero img{width:100px; height:100px; border-radius:16px; object-fit:cover; background:#fff; padding:6px;}


@keyframes campusly-pulse-glow {
  0%   { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(220, 53, 69, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

@keyframes campusly-blink-text {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.blink-alert {
  animation: campusly-pulse-glow 1.6s infinite;
  border: 2px solid #DC3545;
  background: #FFF1F2;
  color: #7A1F2B;
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.blink-alert i {
  animation: campusly-blink-text 1.2s infinite;
  color: #DC3545;
}

.blink-alert.blink-warning {
  border-color: #E6A700;
  background: #FFF8E5;
  color: #7A5A0E;
}
.blink-alert.blink-warning i {
  color: #E6A700;
}

.blink-badge {
  animation: campusly-blink-text 1s infinite;
  background: #DC3545;
  color: #fff;
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
}