/* ===========================================================
   THE MERITPLUS — Admin Panel
   Design tokens
   =========================================================== */
:root{
  --mp-purple:        #3B2C8C;
  --mp-purple-dark:   #241B5C;
  --mp-purple-light:  #EFEBFB;
  --mp-orange:        #F5A623;
  --mp-orange-dark:   #DB8B0B;
  --mp-cream:         #FAF7F1;
  --mp-ink:           #221C3E;
  --mp-gray:          #6B6B80;
  --mp-gray-light:    #E7E4EF;
  --mp-white:         #FFFFFF;
  --mp-danger:        #D6455B;
  --mp-radius:        14px;
  --mp-shadow:        0 4px 18px rgba(36,27,92,0.07);
  --mp-shadow-lift:   0 10px 30px rgba(36,27,92,0.14);
  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

*{ box-sizing:border-box; }

html,body{
  height:100%;
  background:var(--mp-cream);
  font-family:var(--font-body);
  color:var(--mp-ink);
}

h1,h2,h3,h4,.mp-display{
  font-family:var(--font-display);
  color:var(--mp-purple-dark);
  letter-spacing:-0.01em;
}

a{ text-decoration:none; }

/* ---------- Layout shell ---------- */
.mp-shell{
  display:flex;
  min-height:100vh;
}

/* ---------- Sidebar ---------- */
.mp-sidebar{
  width:264px;
  flex-shrink:0;
  background:linear-gradient(185deg,var(--mp-purple) 0%, var(--mp-purple-dark) 100%);
  color:#EDEBFA;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
  z-index:20;
}
.mp-brand{
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:1.5rem 1.4rem 1.1rem;
}
.mp-brand-mark{
  width:38px;height:38px;
  border-radius:10px;
  background:var(--mp-orange);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-weight:700;
  color:var(--mp-purple-dark);
  font-size:1.05rem;
}
.mp-brand-text{ line-height:1.1; }
.mp-brand-text strong{
  font-family:var(--font-display);
  font-size:1.15rem;
  color:#fff;
  display:block;
}
.mp-brand-text span{
  font-size:.62rem;
  letter-spacing:.14em;
  color:#C9BEF2;
  text-transform:uppercase;
}

.mp-nav{
  flex:1;
  padding:.5rem .9rem;
  overflow-y:auto;
}
.mp-nav-label{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#9C8FDA;
  margin:1.1rem .6rem .4rem;
}
.mp-nav a{
  display:flex;
  align-items:center;
  gap:.7rem;
  color:#D9D3F5;
  padding:.62rem .8rem;
  border-radius:10px;
  font-size:.92rem;
  margin-bottom:.15rem;
  transition:background .15s ease, color .15s ease;
}
.mp-nav a i{ font-size:1.05rem; width:1.2rem; text-align:center; }
.mp-nav a:hover{ background:rgba(255,255,255,.08); color:#fff; }
.mp-nav a.active{
  background:var(--mp-orange);
  color:var(--mp-purple-dark);
  font-weight:600;
}

.mp-sidebar-foot{
  padding:1rem 1.4rem 1.4rem;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:.78rem;
  color:#B4A9E8;
}

/* ---------- Topbar ---------- */
.mp-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.1rem 1.8rem;
  background:var(--mp-white);
  border-bottom:1px solid var(--mp-gray-light);
  position:sticky;
  top:0;
  z-index:10;
}
.mp-topbar h1{
  font-size:1.35rem;
  margin:0;
}
.mp-topbar .mp-eyebrow{
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--mp-orange-dark);
  font-weight:700;
  margin-bottom:.15rem;
}
.mp-admin-chip{
  display:flex;align-items:center;gap:.6rem;
  background:var(--mp-purple-light);
  padding:.4rem .8rem .4rem .4rem;
  border-radius:100px;
}
.mp-admin-chip .avatar{
  width:32px;height:32px;border-radius:50%;
  background:var(--mp-purple);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:.85rem;
  font-family:var(--font-display);
}

.mp-main{
  flex:1;
  min-width:0;
}
.mp-content{
  padding:1.8rem;
}

/* ---------- Cards ---------- */
.mp-card{
  background:var(--mp-white);
  border:1px solid var(--mp-gray-light);
  border-radius:var(--mp-radius);
  box-shadow:var(--mp-shadow);
}
.mp-stat{
  border-radius:var(--mp-radius);
  padding:1.3rem 1.4rem;
  background:var(--mp-white);
  border:1px solid var(--mp-gray-light);
  border-top:4px solid var(--mp-orange);
  box-shadow:var(--mp-shadow);
}
.mp-stat .num{
  font-family:var(--font-display);
  font-size:2.1rem;
  color:var(--mp-purple-dark);
  line-height:1;
}
.mp-stat .label{
  color:var(--mp-gray);
  font-size:.82rem;
  margin-top:.35rem;
}
.mp-stat i{
  color:var(--mp-orange-dark);
  font-size:1.3rem;
}

/* ---------- Buttons ---------- */
.btn-mp-primary{
  background:var(--mp-purple);
  border-color:var(--mp-purple);
  color:#fff;
  font-weight:600;
}
.btn-mp-primary:hover{ background:var(--mp-purple-dark); border-color:var(--mp-purple-dark); color:#fff; }
.btn-mp-orange{
  background:var(--mp-orange);
  border-color:var(--mp-orange);
  color:var(--mp-purple-dark);
  font-weight:600;
}
.btn-mp-orange:hover{ background:var(--mp-orange-dark); border-color:var(--mp-orange-dark); color:var(--mp-purple-dark); }
.btn-mp-ghost{
  background:transparent;
  border:1px solid var(--mp-gray-light);
  color:var(--mp-ink);
}
.btn-mp-ghost:hover{ background:var(--mp-purple-light); border-color:var(--mp-purple-light); }

/* ---------- Grade / class chip grid ---------- */
.mp-class-card{
  border-radius:var(--mp-radius);
  border:1px solid var(--mp-gray-light);
  background:var(--mp-white);
  box-shadow:var(--mp-shadow);
  overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease;
  height:100%;
}
.mp-class-card:hover{ transform:translateY(-3px); box-shadow:var(--mp-shadow-lift); }
.mp-class-card .head{
  background:linear-gradient(135deg,var(--mp-purple),var(--mp-purple-dark));
  color:#fff;
  padding:1rem 1.1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.mp-class-card .head .grade{
  font-family:var(--font-display);
  font-size:1.3rem;
}
.mp-class-card .body{ padding:1rem 1.1rem 1.2rem; }
.mp-class-card .body .muted{ color:var(--mp-gray); font-size:.85rem; }

/* ---------- Topic pill card (mirrors the syllabus PDF language) ---------- */
.mp-topic{
  border-radius:12px;
  border:1px solid var(--mp-gray-light);
  background:var(--mp-white);
  margin-bottom:.85rem;
  overflow:hidden;
}
.mp-topic .pill{
  background:var(--mp-purple);
  color:#fff;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.02em;
  padding:.5rem 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.mp-topic .pill .actions button{
  background:transparent;
  border:none;
  color:#EDEBFA;
  font-size:.95rem;
  padding:.1rem .35rem;
}
.mp-topic .pill .actions button:hover{ color:var(--mp-orange); }
.mp-topic .desc{
  padding:.75rem 1rem .9rem;
  font-size:.88rem;
  color:var(--mp-ink);
}

/* ---------- Badges ---------- */
.badge-mp{
  background:var(--mp-purple-light);
  color:var(--mp-purple-dark);
  font-weight:600;
  font-size:.72rem;
  padding:.35rem .6rem;
  border-radius:100px;
}
.badge-mp-orange{
  background:#FDF0DA;
  color:var(--mp-orange-dark);
  font-weight:600;
  font-size:.72rem;
  padding:.35rem .6rem;
  border-radius:100px;
}

/* ---------- Table ---------- */
.table-mp thead th{
  border-bottom:2px solid var(--mp-gray-light);
  color:var(--mp-gray);
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
}
.table-mp td{ vertical-align:middle; }
.table-mp tbody tr:hover{ background:var(--mp-purple-light); }

/* ---------- Empty state ---------- */
.mp-empty{
  text-align:center;
  padding:3rem 1rem;
  color:var(--mp-gray);
}
.mp-empty i{ font-size:2.2rem; color:var(--mp-orange); margin-bottom:.6rem; display:block; }

/* ---------- Modal tweaks ---------- */
.modal-content{ border-radius:16px; border:none; }
.modal-header{ border-bottom:1px solid var(--mp-gray-light); }
.form-label{ font-weight:600; font-size:.85rem; color:var(--mp-ink); }
.form-control:focus, .form-select:focus{
  border-color:var(--mp-purple);
  box-shadow:0 0 0 .2rem rgba(59,44,140,.15);
}

/* ---------- Mobile ---------- */
.mp-sidebar-toggle{ display:none; }
@media (max-width: 991.98px){
  .mp-sidebar{
    position:fixed;
    left:-280px;
    transition:left .2s ease;
    height:100vh;
  }
  .mp-sidebar.open{ left:0; }
  .mp-sidebar-toggle{ display:inline-flex; }
  .mp-content{ padding:1.1rem; }
}

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:#C9BEF2; border-radius:8px; }