@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================
   School ERP · "Smart Campus" premium school management UI
   Purple · lavender · white cards design system
   ============================================================ */

:root{
  --primary:#4F3B78;
  --primary-dark:#38285F;
  --primary-light:#6C5AA8;
  --soft:#E9E5F5;
  --soft-2:#F4F1FB;
  --bg:#F1F0F7;
  --card:#FFFFFF;
  --green:#43B96B;
  --green-l:#E6F6EC;
  --yellow:#F7C515;
  --yellow-l:#FEF6DA;
  --coral:#F38C88;
  --coral-l:#FDECEB;
  --text:#202020;
  --muted:#777777;
  --border:#E8E6EF;

  --font-head:'Poppins','Inter',system-ui,sans-serif;
  --font-body:'Inter','Poppins',system-ui,sans-serif;

  --r-lg:18px; --r-md:14px; --r-sm:9px;
  --shadow-sm:0 2px 6px rgba(79,59,120,.06),0 6px 16px -8px rgba(79,59,120,.10);
  --shadow:0 10px 30px -14px rgba(79,59,120,.22);
  --shadow-lg:0 24px 60px -28px rgba(56,40,95,.35);
  --t-fast:.18s ease; --t-med:.3s cubic-bezier(.5,.4,0,1);

  --grad-purple:linear-gradient(135deg,#6C5AA8,#4F3B78);
  --grad-blue:linear-gradient(135deg,#8E79D6,#5B48A0);
  --grad-green:linear-gradient(135deg,#5ED689,#34A25A);
  --grad-yellow:linear-gradient(135deg,#FFD757,#EDB100);
  --grad-coral:linear-gradient(135deg,#FFA79F,#EE6E66);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text-dark,#202020);
  font-size:.92rem; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{ font-family:var(--font-head); font-weight:600; letter-spacing:-.01em; }
a{ text-decoration:none; }
::selection{ background:var(--primary-light); color:#fff; }
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background:#CFC9E2; border-radius:20px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:#B5AEDA; background-clip:content-box; }

.bg-soft{ background:var(--bg) !important; }
.text-primary-gradient, .text-gradient{ background:linear-gradient(135deg,var(--primary) 20%,var(--primary-light) 70%,#9B8AEF 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ============================================================
   LAYOUT SHELL
   ============================================================ */
.sb-overlay{
  position:fixed; inset:0; background:rgba(25,16,48,.45); z-index:1045;
  opacity:0; pointer-events:none; transition:opacity var(--t-med); backdrop-filter:blur(2px);
}
.main-wrap{
  margin-left:260px; min-height:100vh;
  display:flex; flex-direction:column;
  transition:margin-left var(--t-med);
}
.page{ flex:1; padding:14px 22px 30px; max-width:1600px; width:100%; }
@media (min-width:1680px){ .page{ margin:0 auto; } }

/* ============================================================
   SIDEBAR — deep purple
   ============================================================ */
.sidebar{
  position:fixed; top:0; left:0; bottom:0; width:260px; z-index:1050;
  background:linear-gradient(180deg,#432E77 0%,#38285F 40%,#2B1E4A 100%);
  color:#C9BFE8; display:flex; flex-direction:column;
  overflow:hidden; transition:width var(--t-med), transform var(--t-med);
  box-shadow:12px 0 34px -22px rgba(20,12,45,.7);
}
.sidebar::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 120% -10%, rgba(255,255,255,.09) 0, transparent 45%),
             radial-gradient(circle at -20% 110%, rgba(247,197,21,.10) 0, transparent 50%);
}
.sidebar .brand{
  display:flex; align-items:center; gap:.85rem; padding:1.15rem 1.1rem;
  position:relative; z-index:2; min-height:76px; white-space:nowrap;
}
.sidebar .brand .logo{
  width:44px; height:44px; flex:0 0 44px; border-radius:14px;
  display:grid; place-items:center; color:#fff; font-size:1.3rem;
  background:var(--grad-purple); box-shadow:0 10px 22px -6px rgba(0,0,0,.45);
}
.sidebar .brand .brand-txt{
  font-family:var(--font-head); font-weight:700; font-size:1.04rem; color:#fff;
  overflow:hidden; text-overflow:ellipsis;
}
.sidebar .brand .brand-txt small{
  display:block; color:#9E90CE; font-size:.58rem; font-weight:600;
  letter-spacing:1.4px; text-transform:uppercase;
}
.side-menu{ flex:1; overflow-y:auto; overflow-x:hidden; padding:.7rem .85rem 1rem; position:relative; z-index:2; scrollbar-width:thin; }
.side-menu::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); }
.side-menu .menu-label{
  font-size:.6rem; font-weight:700; letter-spacing:1.8px; text-transform:uppercase;
  color:#83759F; padding:.9rem .6rem .35rem; display:flex; align-items:center; gap:.4rem;
  white-space:nowrap;
}
.side-menu .menu-label::after{ content:""; height:1px; flex:1; margin-left:.5rem; background:rgba(255,255,255,.08); }
.side-menu a{
  display:flex; align-items:center; gap:.72rem; width:100%;
  color:#CFC6EC; padding:.6rem .72rem; margin:2.5px 0;
  border-radius:12px; font-size:.875rem; font-weight:500; font-family:var(--font-body);
  white-space:nowrap; transition:all var(--t-fast); position:relative;
}
.side-menu a .ic{
  width:30px; height:30px; flex:0 0 30px; border-radius:9px;
  display:grid; place-items:center; font-size:.92rem;
  color:#B8AEE0; background:rgba(255,255,255,.06);
  transition:all var(--t-fast);
}
.side-menu a:hover{ background:rgba(255,255,255,.08); color:#fff; }
.side-menu a:hover .ic{ background:#6C5AA8; color:#fff; }
.side-menu a.active{
  background:#FFFFFF; color:var(--primary);
  box-shadow:0 10px 22px -12px rgba(20,10,42,.55);
}
.side-menu a.active .ic{ background:var(--soft-2); color:var(--primary-light); }
.side-menu a.active::after{
  content:""; position:absolute; left:-.85rem; top:50%;
  transform:translateY(-50%); width:4px; height:58%; border-radius:0 6px 6px 0; background:#fff;
}
.side-menu a .menu-txt{ overflow:hidden; text-overflow:ellipsis; }
.side-menu .chip{
  margin-left:auto; background:var(--yellow); color:#4A3808; font-weight:800;
  font-size:.6rem; border-radius:20px; padding:.14rem .5rem; box-shadow:0 3px 8px -3px rgba(0,0,0,.4);
}
.badge-dot{ width:8px; height:8px; border-radius:50%; background:var(--green); display:inline-block; }

/* sidebar decoration artwork */
.side-deco{
  position:relative; z-index:2; margin:0 .9rem .9rem; padding:.9rem; text-align:center;
  border-radius:16px; background:linear-gradient(160deg,#2B1E4A,#3A2A66);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
.side-deco svg{ width:120px; height:74px; display:block; margin:0 auto .4rem; }
.side-deco .deco-txt{ font-family:var(--font-head); color:#fff; font-size:.8rem; font-weight:600; }
.side-deco .deco-sub{ color:#9E90CE; font-size:.62rem; }

.side-foot{
  display:flex; align-items:center; gap:.7rem; padding:.85rem 1rem;
  position:relative; z-index:2; border-top:1px solid rgba(255,255,255,.09);
}
.side-foot .u-avatar{ width:38px; height:38px; border-radius:12px; object-fit:cover; border:2px solid rgba(255,255,255,.25); }
.side-foot .u-name{ color:#fff; font-size:.8rem; font-weight:600; font-family:var(--font-head); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.side-foot .u-role{ color:#9E90CE; font-size:.66rem; white-space:nowrap; text-transform:capitalize; }

/* collapsed */
body.sidebar-collapsed .sidebar{ width:84px; }
body.sidebar-collapsed .sidebar .brand{ justify-content:center; padding:.9rem .5rem; }
body.sidebar-collapsed .sidebar .brand .brand-txt,
body.sidebar-collapsed .side-menu .menu-label,
body.sidebar-collapsed .side-menu a .menu-txt,
body.sidebar-collapsed .side-menu a .chip,
body.sidebar-collapsed .side-deco,
body.sidebar-collapsed .side-foot .u-name,
body.sidebar-collapsed .side-foot .u-role{ display:none; }
body.sidebar-collapsed .side-menu a{ justify-content:center; padding:.6rem; }
body.sidebar-collapsed .side-menu a.active::after{ display:none; }
body.sidebar-collapsed .side-foot{ justify-content:center; }
body.sidebar-collapsed .main-wrap{ margin-left:84px; }

/* ============================================================
   TOP HEADER — floating white rounded bar
   ============================================================ */
.topbar{
  position:sticky; top:14px; z-index:1040;
  display:flex; align-items:center; gap:1rem;
  margin:16px 22px 6px; padding:.6rem .9rem .6rem 1.1rem;
  background:var(--card); border-radius:18px; box-shadow:var(--shadow-sm);
  flex-wrap:nowrap;
}
.tb-greet{ line-height:1.15; }
.tb-greet .tb-tiny{ font-size:.6rem; color:var(--muted,#777); }
.tb-greet .tb-name{ font-family:var(--font-head); font-weight:600; font-size:.9rem; color:var(--text-dark); }

.toggler,.icon-btn{
  width:38px; height:38px; flex:0 0 38px; border:0; border-radius:12px;
  display:grid; place-items:center; background:var(--soft-2); color:var(--primary);
  font-size:1.1rem; cursor:pointer; transition:all var(--t-fast);
}
.toggler:hover,.icon-btn:hover{ background:var(--primary); color:#fff; transform:translateY(-1px); box-shadow:var(--shadow-sm); }

.head-search{
  position:relative; flex:1; max-width:400px; margin:0 .2rem;
}
.head-search > i{ position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:#9C93B8; font-size:.92rem; }
.head-search input{
  width:100%; background:#F6F5FB; border:1.5px solid #EFEDF6; border-radius:12px;
  padding:.58rem .9rem .58rem 2.4rem; font-size:.85rem; font-family:var(--font-body);
  transition:all var(--t-fast); outline:none; color:var(--text-dark);
}
.head-search input:focus{ border-color:var(--primary-light); background:#fff; box-shadow:0 0 0 4px rgba(108,90,168,.12); }
.head-search .kbd{
  position:absolute; right:.85rem; top:50%; transform:translateY(-50%);
  background:var(--soft-2); color:#8A7FB0; font-size:.62rem; font-weight:700;
  border:1px solid #E4E1EF; padding:.08rem .45rem; border-radius:7px;
  font-family:var(--font-body);
}
.search,.search-in{ position:relative; }
.search input,.search-in input{
  width:230px; max-width:100%; height:40px; background:#F6F5FB; border:1.5px solid #EFEDF6;
  border-radius:12px; padding:.5rem .8rem .5rem 2.2rem; font-size:.84rem;
  font-family:var(--font-body); transition:all var(--t-fast); outline:none;
}
.search input:focus,.search-in input:focus{ border-color:var(--primary-light); background:#fff; box-shadow:0 0 0 4px rgba(108,90,168,.12); }
.search > i,.search-in > i{ position:absolute; left:.85rem; top:50%; transform:translateY(-50%); color:#9C93B8; }

.icon-btn.notif-btn{ position:relative; }
.notif-btn .ping{
  position:absolute; top:-4px; right:-4px; min-width:17px; height:17px; padding:0 4px;
  border-radius:20px; background:var(--coral); color:#fff; font-size:.6rem; font-weight:700;
  display:grid; place-items:center; border:2px solid #fff;
}
.dropdown-menu{
  border:0; border-radius:16px; box-shadow:var(--shadow-lg);
  padding:.4rem; font-family:var(--font-body);
}
.dropdown-item{ border-radius:10px; padding:.5rem .7rem; font-size:.84rem; }
.dropdown-item:hover{ background:var(--soft-2); color:var(--primary); }
.dropdown-header{ color:var(--primary); font-family:var(--font-head); }

/* header notifications */
.notif-item{
  display:flex; gap:.7rem; align-items:flex-start; padding:.6rem .5rem;
  border-radius:12px; transition:background var(--t-fast); color:inherit;
}
.notif-item:hover{ background:var(--soft-2); }
.notif-item.unread{ background:var(--soft-2); position:relative; }
.notif-item.unread::after{ content:""; position:absolute; right:.7rem; top:50%; width:7px; height:7px; border-radius:50%; background:var(--primary-light); }
.notif-item .n-ic{
  width:34px; height:34px; flex:0 0 34px; border-radius:10px; display:grid; place-items:center;
  background:var(--soft-2); color:var(--primary-light); font-size:.9rem;
}
.n-info{ background:#EFF4FF !important; color:#4A6FD9 !important; }
.n-warning{ background:var(--yellow-l) !important; color:#B8860B !important; }
.n-danger{ background:var(--coral-l) !important; color:#D9605A !important; }
.n-success{ background:var(--green-l) !important; color:#2F9B55 !important; }
.n-reminder{ background:var(--coral-l) !important; color:#D47B46 !important; }
.n-alert{ background:var(--coral-l) !important; color:#D9605A !important; }
.n-primary{ background:var(--soft-2) !important; color:var(--primary) !important; }

/* ============================================================
   PAGE HEAD
   ============================================================ */
.page-head{ display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-end; justify-content:space-between; margin:6px 2px 20px; }
.crumb-wrap{ display:flex; align-items:center; gap:.8rem; }
.crumb-ico{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  background:var(--grad-purple); color:#fff; font-size:1.15rem;
  box-shadow:0 8px 18px -8px rgba(56,40,95,.6);
}
.crumb{ display:flex; align-items:center; gap:.4rem; font-size:.7rem; color:var(--muted); font-weight:500; }
.crumb a{ color:var(--muted); display:inline-flex; align-items:center; gap:.35rem; }
.crumb a:hover{ color:var(--primary); }
.crumb .sep{ color:#C9C3DD; }
.page-head h1{ font-size:1.35rem; font-weight:700; margin:.1rem 0 0; color:var(--text-dark); }
.row-count{ font-weight:600; }

.section-title{ display:flex; align-items:center; gap:.5rem; font-family:var(--font-head); font-weight:600; color:var(--text); margin:0 0 1rem; }
.section-title::before{ content:""; width:4px; height:18px; border-radius:4px; background:var(--primary); }

/* ============================================================
   CARDS
   ============================================================ */
.card{
  background:var(--card); border:1px solid #F0EEF7; border-radius:var(--r-lg);
  box-shadow:0 4px 20px rgba(60,50,90,.05);
  transition:box-shadow var(--t-fast), transform var(--t-fast);
}
.card.hoverable:hover{ transform:translateY(-3px); box-shadow:0 14px 34px -16px rgba(56,40,95,.28); }
.card .card-header{
  background:transparent; border:0; border-bottom:1px solid #F3F1F9;
  padding:1rem 1.15rem; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; justify-content:space-between;
}
.card .card-title{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-head); font-weight:600; font-size:.95rem; color:var(--text-dark); margin:0; }
.card .card-title .ti{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:var(--soft-2); color:var(--primary); font-size:.9rem;
}
.card-body{ padding:1.15rem; }
.card-footer{ border:0; background:var(--soft-2); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{ border-radius:12px; padding:.55rem 1rem; font-size:.85rem; font-weight:600; font-family:var(--font-body); }
.btn:active{ transform:scale(.97); }
.btn-gradient{
  background:var(--grad-purple); color:#fff; border:0;
  box-shadow:0 8px 18px -8px rgba(56,40,95,.55);
  transition:all var(--t-fast);
}
.btn-gradient:hover{ color:#fff; box-shadow:0 12px 24px -8px rgba(56,40,95,.65); transform:translateY(-1px); filter:brightness(1.05); }
.btn-ghost{ background:#fff; color:var(--primary); border:1.5px solid #E2DEFA; transition:all var(--t-fast); }
.btn-ghost:hover{ background:var(--soft-2); color:var(--primary); border-color:var(--soft-2); }
.btn-primary{ background:var(--primary); border:0; }
.btn-primary:hover,.btn-primary:focus{ background:var(--primary-dark); }
.btn-danger{ background:var(--coral); border:0; }
.btn-danger:hover{ background:#E26E66; }
.btn-success{ background:var(--green); border:0; }

/* icon action buttons */
.btn-icon-link{
  width:32px; height:32px; border-radius:9px; display:inline-grid; place-items:center;
  background:#fff; border:1.5px solid #E8E6F7; color:#7772a0; font-size:.82rem;
  transition:all var(--t-fast); box-shadow:0 2px 8px -4px rgba(32,32,32,.12);
}
.btn-icon-link:hover{ transform:translateY(-2px); }
.btn-icon-link.v:hover{ background:var(--green); border-color:var(--green); color:#fff; }
.btn-icon-link.e:hover{ background:var(--primary); border-color:var(--primary); color:#fff; }
.btn-icon-link.d{ color:#DD6A61; }
.btn-icon-link.d:hover{ background:var(--coral); border-color:var(--coral); color:#fff; }

/* ============================================================
   TABLES
   ============================================================ */
.table-card{
  background:var(--card); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:0 4px 20px rgba(60,50,90,.06); border:1px solid #F0EEF7;
}
.table-card .table{ margin-bottom:0; font-size:.85rem; }
.table-card thead th{
  background:#F6F4FB; color:var(--primary-light); font-family:var(--font-head);
  font-size:.72rem; text-transform:uppercase; letter-spacing:.45px;
  border:0; padding:.85rem 1rem; white-space:nowrap;
}
.table-card tbody td{ padding:.8rem 1rem; border-color:#F3F1F9; vertical-align:middle; }
.table-card tbody tr{ transition:background var(--t-fast); }
.table-card tbody tr:hover{ background:#FAF8FF; }
.table-card tbody tr:last-child td{ border-bottom:0; }
.table-card .table-responsive{ border-radius:var(--r-lg); }
.table{ --bs-table-hover-bg:transparent; }

.user-init{
  width:36px; height:36px; flex:0 0 36px; border-radius:50%; display:grid; place-items:center;
  background:var(--soft-2); color:var(--primary); font-weight:700; font-size:.78rem;
  text-transform:uppercase; font-family:var(--font-head);
}
.table-avatar{ width:38px; height:38px; border-radius:50%; object-fit:cover; background:#EFEBFA; }
.avatar-lg{ width:64px; height:64px; border-radius:18px; object-fit:cover; }
.chip-name{ display:flex; align-items:center; gap:.6rem; color:var(--text-dark); font-weight:600; }
.chip-name:hover{ color:var(--primary); }

.tbl-toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; }
.pagination{ gap:.3rem; }
.page-link{
  border:0; border-radius:9px !important; color:var(--primary); background:#fff;
  margin:0 1px; font-weight:600; font-size:.82rem; min-width:34px; text-align:center;
}
.page-link:hover{ background:var(--soft-2); color:var(--primary); }
.page-item.active .page-link{ background:var(--primary); border:0; box-shadow:0 6px 14px -6px rgba(56,40,95,.6); }

/* ============================================================
   BADGES / CHIPS
   ============================================================ */
.badge{ font-weight:600; font-size:.68rem; padding:.35em .7em; border-radius:999px; letter-spacing:.2px; }
.badge.text-bg-primary{ background:var(--primary) !important; }
.badge.text-bg-success{ background:var(--green) !important; }
.badge.text-bg-warning{ background:var(--yellow) !important; color:#4A3808 !important; }
.badge.text-bg-danger{ background:var(--coral) !important; }
.badge.text-bg-info{ background:#8FB6F0 !important; }
.badge.text-bg-secondary{ background:#A6A0B8 !important; }
.badge.text-bg-light{ background:var(--soft-2) !important; color:var(--primary-light) !important; border:1px solid #E8E5F4; }
.badge.text-bg-dark{ background:#2E2747 !important; }
.badge.text-bg-primary{ background:var(--primary) !important; }
.status-pill{ display:inline-flex; align-items:center; gap:.3rem; }
.status-pill i{ font-size:.5rem; }

.user-init{ background:var(--grad-purple); color:#fff; } /* avatar placeholder */

/* ============================================================
   FORMS
   ============================================================ */
.form-label{ font-weight:600; font-size:.78rem; color:#46406B; margin-bottom:.4rem; }
.form-control,.form-select{
  background:#FAF9FD; border:1.5px solid #E7E4F2; border-radius:10px;
  font-size:.87rem; padding:.55rem .8rem; color:var(--text-dark); font-family:var(--font-body);
  transition:all var(--t-fast);
}
.form-control:focus,.form-select:focus{ background:#fff; border-color:var(--primary-light); box-shadow:0 0 0 4px rgba(108,90,168,.12); color:var(--text-dark); }
.form-control.is-invalid,.is-invalid.form-select{ border-color:var(--coral); }
.form-check-input:checked{ background-color:var(--primary); border-color:var(--primary); }
.input-group-text{ background:#F6F5FB; border-color:#E7E4F2; color:#8A84A6; }
::placeholder{ color:#AEA9C5; }

/* ============================================================
   NAV TABS
   ============================================================ */
.nav-tabs{ border:0; gap:.4rem; }
.nav-tabs .nav-link{
  border:0; border-radius:11px; color:#585171; font-weight:600; font-size:.83rem;
  padding:.5rem 1rem; background:transparent;
}
.nav-tabs .nav-link:hover{ background:var(--soft-2); color:var(--primary); }
.nav-tabs .nav-link.active{ background:var(--primary); color:#fff; box-shadow:0 6px 14px -7px rgba(56,40,95,.55); }

/* ============================================================
   MODALS
   ============================================================ */
.modal-content{ border:0; border-radius:20px; box-shadow:var(--shadow-lg); }
.modal-header{ border:0; padding:1.2rem 1.4rem .5rem; }
.modal-title{ font-family:var(--font-head); font-weight:600; }
.modal-body{ padding:1rem 1.4rem; }
.modal-footer{ border:0; padding:0 1.4rem 1.3rem; }

/* ============================================================
   LISTS / WIDGETS
   ============================================================ */
.b:list-group-item{ background:transparent; border-color:#F3F1F9; }

.quick-action{
  display:flex; align-items:center; gap:.8rem; padding:.65rem .7rem; margin:3px 0;
  border-radius:13px; background:#FAF9FD; transition:all var(--t-fast); color:var(--text-dark);
}
.quick-action:hover{ background:var(--soft-2); transform:translateX(3px); }
.quick-action .qa-ic{
  width:34px; height:34px; flex:0 0 34px; border-radius:10px; display:grid; place-items:center;
  background:var(--grad-purple); color:#fff; font-size:.9rem;
}
.quick-action small{ color:var(--muted); }
.quick-action .arrow{ margin-left:auto; color:#B9B3D0; }
.quick-action:hover .arrow{ color:var(--primary); transform:translateX(3px); }

.mlist{ padding:0; margin:0; list-style:none; }
.mlist li{ display:flex; align-items:center; gap:.7rem; padding:.65rem .1rem; border-bottom:1px dashed #F0EEF7; }
.mlist li:last-child{ border:0; }
.mlist .ml-ic{ width:34px; height:34px; flex:0 0 34px; border-radius:10px; display:grid; place-items:center; color:#fff; font-size:.82rem; }
.ml-ic.i1{ background:var(--grad-purple); }
.ml-ic.i2{ background:var(--grad-green); }
.ml-ic.i3{ background:var(--grad-yellow); color:#4A3808; }
.ml-ic.i4{ background:var(--grad-coral); }
.mlist-item{ display:flex; align-items:center; gap:.6rem; padding:.5rem .2rem; }
.mlist-item:last-child{ padding-bottom:0; }
.ml-amount{ margin-left:auto; font-weight:600; }

/* parent dashboard - child rows */
.child-row{ display:flex; align-items:center; flex-wrap:wrap; gap:.9rem; padding:.85rem .2rem; }
.child-row.border-top{ border-top:1px solid #F0EEF7; }
.child-photo{ flex:0 0 46px; width:46px; height:46px; border-radius:14px; overflow:hidden; background:var(--soft-2); display:grid; place-items:center; }
.child-photo img{ width:100%; height:100%; object-fit:cover; }
.child-photo .user-init{ width:100%; height:100%; border-radius:0; display:grid; place-items:center; font-size:1rem; }
.child-t{ flex-grow:1; min-width:170px; line-height:1.25; }
.child-stat{ min-width:74px; }
.child-stat .sc-val{ font-size:.95rem; }
@media (max-width:575.98px){ .child-stat{ min-width:0; flex:1 1 32%; } }

.timeline{ position:relative; padding-left:.9rem; }
.timeline::before{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:2px; background:#E5E1F4; border-radius:2px; }
.tl-item{ position:relative; padding:0 0 1rem .9rem; }
.tl-item .dot{ position:absolute; left:-.99rem; top:.35rem; width:12px; height:12px; border-radius:50%; background:#fff; border:3px solid var(--primary-light); }
.tl-item .dot::after{ content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid rgba(108,90,168,.18); }
.tl-item .tl-t{ font-weight:600; font-size:.83rem; color:var(--text-dark); }
.tl-item .tl-d{ font-size:.74rem; color:var(--muted); }

.empty{ text-align:center; padding:1.4rem 1rem; color:var(--muted); }
.empty .empty-ico{ width:60px; height:60px; margin:0 auto .8rem; border-radius:50%; background:var(--soft-2); display:grid; place-items:center; font-size:1.5rem; color:var(--primary-light); }
.empty p{ margin-top:.2rem; }
.empty .empty-hint{ font-size:.8rem; }

/* progress */
.progress{ border-radius:40px; background:#F0EEF7; height:8px; }
.progress-bar{ background:var(--grad-purple); border-radius:40px; }

/* chips / pills used in modules */
.chip-name small{ color:var(--muted); }

/* ============================================================
   TOASTS
   ============================================================ */
.toast-stack{ position:fixed; top:18px; right:18px; z-index:2000; display:flex; flex-direction:column; gap:.6rem; max-width:340px; width:calc(100vw - 40px); }
.toast-item{
  background:#fff; border-radius:14px; box-shadow:var(--shadow-lg);
  padding:.8rem .9rem; display:flex; gap:.7rem; align-items:flex-start;
  border-left:4px solid var(--primary-light); animation:slideIn .3s ease both;
  font-family:var(--font-body);
}
.toast-item.success{ border-left-color:var(--green); }
.toast-item.danger{ border-left-color:var(--coral); }
.toast-item.warning{ border-left-color:var(--yellow); }
.toast-item.info{ border-left-color:#8F9BF0; }
.toast-item.out{ animation:toastOut .4s ease both; }
.toast-item .t-ic{ font-size:1.05rem; color:var(--primary-light); margin-top:1px; }
.toast-item.succ .t-ic{ color:var(--green); }
@keyframes tost-io{from{opacity:0; transform:translateY(-8px)} to{opacity:1;transform:none}}
@keyframes toastOut{ to{opacity:0; transform:translateY(-8px) scale(.97)} }

/* ============================================================
   ANIMATIONS
   ============================================================ */
.a-rise{ animation:riseIn .5s ease both; }
.a-pop{ animation:popIn .35s cubic-bezier(.2,1.4,.4,1) both; }
.stagger > *{ animation:riseIn .5s ease both; animation-delay:calc(var(--d,0)*90ms); }
[data-reveal]{ opacity:0; transform:translateY(12px); }
.rev-in{ animation:riseIn .6s ease both; }
.wow-fade{ animation:fadeUp .5s ease both; }
@keyframes riseIn{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
@keyframes fadeUp{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
@keyframes popIn{ from{opacity:0; transform:scale(.92)} to{opacity:1; transform:scale(1)} }
@keyframes logoPop{ 0%{opacity:0; transform:rotate(-8deg) scale(.7)} 100%{opacity:1; transform:rotate(-4deg) scale(1)} }

/* ============================================================
   DASHBOARD WIDGETS
   ============================================================ */
.dbwelcome{
  background:linear-gradient(120deg,#4F3B78 0%,#6C5AA8 70%,#7C6BC0 100%);
  border-radius:22px; color:#fff; padding:1.4rem 1.6rem; position:relative; overflow:hidden;
  box-shadow:0 18px 44px -20px rgba(56,40,95,.6);
}
.dbwelcome h3{ font-size:1.35rem; font-weight:700; margin:0 0 .25rem; }
.dbwelcome p{ color:#D9D2F0; font-size:.85rem; margin:0; }
.dbwelcome .db-orn{ position:absolute; right:-16px; bottom:-34px; font-size:9rem; opacity:.12; transform:rotate(-12deg); pointer-events:none; }
.dbwelcome::before{ content:""; position:absolute; right:60px; top:-70px; width:230px; height:230px; border-radius:50%; background:rgba(255,255,255,.07); pointer-events:none; }
.dbwelcome::after{ content:""; position:absolute; right:-50px; bottom:-90px; width:230px; height:230px; border-radius:50%; background:rgba(255,255,255,.06); pointer-events:none; }

.stat-card{
  background:#fff; border-radius:var(--r-lg); padding:1.1rem 1.15rem;
  box-shadow:0 4px 20px rgba(60,50,90,.06); border:1px solid #F0EEF7;
  position:relative; overflow:hidden; transition:transform var(--t-fast), box-shadow var(--t-fast);
}
.stat-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; border-radius:0 4px 4px 0; pointer-events:none; }
.stat-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.stat-card:hover .sc-ico{ transform:translateY(-3px) rotate(-4deg); }
.sc-lbl{ font-size:.72rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; font-family:var(--font-head); }
.sc-val{ font-family:var(--font-head); font-weight:700; font-size:1.7rem; color:var(--text-dark); line-height:1.15; }
.stat-card .sc-foot{ font-size:.72rem; color:var(--muted); margin-top:.35rem; }
.sc-ico{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  font-size:1.25rem; color:#fff; transition:all var(--t-fast);
}
.stat-card .dec{ position:absolute; right:1.1rem; bottom:.5rem; font-size:2.6rem; opacity:.07; pointer-events:none; }
.sc-ico.ic-1, .stat-card.c-coral::before{ background:var(--grad-coral); }
.sc-ico.ic-2, .stat-card.c-purple::before{ background:var(--grad-purple); }
.sc-ico.ic-3, .stat-card.c-yellow::before{ background:var(--grad-yellow); color:#4A3808; }
.sc-ico.ic-4, .stat-card.c-green::before{ background:var(--grad-green); }
.sc-ico.ic-5, .stat-card.c-blue::before{ background:linear-gradient(135deg,#9DB1F5,#5E7BE6); }
.sc-ico.ic-6{ background:var(--grad-coral); }

/* calendar + attendance */
.cal-wrap{ font-size:.8rem; }
.cal-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem; }
.cal-top .cal-m{ font-family:var(--font-head); font-weight:600; font-size:1rem; color:var(--text-dark); }
.cal-nav{ display:flex; gap:.3rem; }
.cal-nav button{
  width:28px; height:28px; border-radius:8px; border:1.5px solid #E7E4F2; background:#fff;
  color:var(--primary); cursor:pointer; font-size:.75rem; transition:all var(--t-fast);
}
.cal-nav button:hover{ background:var(--primary); color:#fff; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-dow{ text-align:center; font-size:.62rem; font-weight:700; color:#A29AC0; text-transform:uppercase; padding:.25rem 0; }
.cal-day{
  aspect-ratio:1; border-radius:10px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:2px; font-size:.72rem; font-weight:600; color:#3D3760; position:relative;
}
.cal-day.other{ color:#C9C4DE; }
.cal-day.today{ background:var(--primary); color:#fff; box-shadow:0 6px 12px -6px rgba(56,40,95,.5); }
.cal-dot{ width:5px; height:5px; border-radius:50%; }
.cd-green{ background:var(--green); }
.cd-coral{ background:var(--coral); }
.cd-yellow{ background:var(--yellow); }
.cd-purple{ background:#9B8CE0; }
.cal-legend{ display:flex; gap:.9rem; margin-top:.6rem; font-size:.66rem; color:var(--muted); flex-wrap:wrap; }
.cal-legend span{ display:inline-flex; align-items:center; gap:.3rem; }

/* activity feed */
.av-item{ display:flex; gap:.7rem; padding:.6rem .2rem; border-bottom:1px dashed #F3F1F9; }
.av-item:last-child{ border:0; }
.av-item .av-av{ width:36px; height:36px; flex:0 0 36px; border-radius:12px; display:grid; place-items:center; font-size:.95rem; color:#fff; }
.av-item .av-t{ font-weight:600; font-size:.82rem; color:var(--text-dark); }
.av-item .av-d{ font-size:.72rem; color:var(--muted); }
.av-item .av-time{ margin-left:auto; font-size:.66rem; color:#B3ADC9; white-space:nowrap; }

/* top students / score cards */
.score-row{ display:flex; align-items:center; gap:.75rem; padding:.55rem .2rem; }
.score-av{ width:42px; height:42px; border-radius:14px; object-fit:cover; border:2px solid #fff; box-shadow:0 0 0 2px var(--soft-2); }
.score-t .sc-name{ font-weight:600; font-size:.83rem; color:var(--text-dark); }
.score-t .sc-info{ font-size:.68rem; color:var(--muted); }
.score-medal{ font-size:1rem; }
.score-medal.g{ color:var(--yellow); } .score-medal.p{ color:var(--primary-light); } .score-medal.b{ color:#8F9BF0; }
.score-pct{ margin-left:auto; text-align:right; }
.score-pct b{ font-family:var(--font-head); font-weight:700; color:var(--text-dark); font-size:.9rem; }
.score-pct small{ display:block; color:var(--muted); font-size:.62rem; }

.perf-bar{ height:8px; border-radius:20px; background:#F0EDF7; overflow:hidden; }
.perf-bar i{ display:block; height:100%; border-radius:20px; background:var(--grad-purple); }

.mini-stat{ display:flex; flex-direction:column; gap:.2rem; background:#FAF9FD; border-radius:14px; padding:.7rem .85rem; }
.legend-dot{ width:10px; height:10px; border-radius:4px; display:inline-block; margin-right:.3rem; }

.profile-mini{ display:flex; align-items:center; gap:.6rem; }
.profile-mini img{ width:40px; height:40px; border-radius:12px; object-fit:cover; }

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-page{
  min-height:100vh; display:grid; grid-template-columns:1.05fr 1fr;
}
.login-brand{
  position:relative; overflow:hidden; color:#fff;
  background:radial-gradient(130% 120% at 0% 0%, #6C5AA8 0%, #4F3B78 45%, #2B1E4A 100%);
  display:flex; align-items:center; padding:clamp(2rem,6vw,4.5rem);
}
.login-brand::before{ content:""; position:absolute; inset:0; opacity:.4;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.14) 1px, transparent 1.4px);
  background-size:22px 22px; }
.login-brand .lb-inner{ position:relative; z-index:2; max-width:520px; }
.login-brand .kicker{
  display:inline-flex; align-items:center; gap:.45rem; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:.35rem .85rem;
  font-size:.72rem; font-weight:600; letter-spacing:.3px; backdrop-filter:blur(4px);
}
.login-brand h1{ font-size:clamp(1.8rem,4vw,2.9rem); font-weight:700; line-height:1.18; margin:1.2rem 0 1rem; }
.login-brand h1 .y{ color:var(--yellow); }
.login-brand p{ color:#C9BEE6; font-size:.9rem; max-width:440px; }
.login-brand .lb-badges{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem; }
.login-brand .lb-badge{ display:flex; align-items:center; gap:.6rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); padding:.4rem .7rem; border-radius:999px; font-size:.75rem; font-weight:600; }
.login-brand .lb-badge .ib{ width:28px; height:28px; border-radius:9px; display:grid; place-items:center; font-size:.72rem; }
.login-brand .lb-sticker{ position:absolute; font-size:1.8rem; opacity:.85; filter:drop-shadow(0 8px 16px rgba(0,0,0,.25)); animation:logoPop 1s var(--t-slow) both; }
.login-brand .s1{ top:14%; left:8%; animation-delay:.2s; } .login-brand .s2{ top:22%; right:8%; animation-delay:.4s; }
.login-brand .s3{ bottom:16%; left:12%; animation-delay:.6s; } .login-brand .s4{ bottom:24%; right:12%; animation-delay:.3s; }
.login-brand .s5{ top:8%; left:44%; animation-delay:.5s; }

.login-panel{ display:flex; align-items:center; justify-content:center; padding:2rem; background:var(--bg); }
.login-card{
  width:100%; max-width:430px; background:#fff; border-radius:24px; box-shadow:var(--shadow-lg);
  padding:2.3rem 2.2rem;
}
.login-logo{
  width:60px; height:60px; margin:0 auto 1.1rem; border-radius:18px;
  display:grid; place-items:center; font-size:1.6rem; color:#fff;
  background:var(--grad-purple); box-shadow:0 14px 30px -12px rgba(56,40,95,.7);
}
.login-card h2{ font-family:var(--font-head); font-size:1.4rem; font-weight:700; }
.login-card .sub{ color:var(--muted); font-size:.84rem; }
.login-card .form-control{ background:#FAF9FD; }
.login-card .btn-login{ background:var(--grad-purple); color:#fff; border:0; border-radius:12px; padding:.85rem; font-weight:600; font-size:.9rem; box-shadow:0 14px 28px -12px rgba(56,40,95,.6); transition:all var(--t-fast); width:100%; }
.login-card .btn-login:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.login-card .forgot{ font-size:.78rem; font-weight:600; color:var(--primary-light); }
.login-card .forgot:hover{ color:var(--primary); }
.demo-box{ background:var(--soft-2); border:1px solid #E8E5F4; border-radius:14px; padding:.9rem 1rem; font-size:.78rem; color:#5A5472; }
.demo-box code{ background:#fff; border:1px solid #E5E1F4; padding:1px 6px; border-radius:6px; color:var(--primary); }

/* ============================================================
   FOOTER
   ============================================================ */
.app-footer{
  padding:1rem 2rem; margin-top:0; font-size:.78rem; color:#8A84A8;
  background:transparent;
}
.app-footer .af-inner{ max-width:1500px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.app-footer .af-brand{ color:var(--primary); font-family:var(--font-head); font-weight:600; }
.app-footer .af-mini i{ color:var(--coral); }

/* mslist helpers */
.ml-item{ color:inherit; }
.mt-2,.mb-2,.py-3{ }

/* misc */
.form-switch .form-check-input{ width:2em; height:1em; }
.spinner-ring{ width:28px; height:28px; border-radius:50%; border:3px solid var(--soft-2); border-top-color:var(--primary); animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }
.skeleton{ background:linear-gradient(90deg,#EFEDF6 25%,#F8F6FD 50%,#EFEDF6 75%); background-size:200% 100%; animation:shim 1.2s infinite; border-radius:8px; }
@keyframes shim{ to{ background-position:-200% 0 } }

.att-cell{ width:30px; height:30px; border-radius:8px; border:1.5px solid #E3DFF2; background:#fff; display:inline-grid; place-items:center; font-weight:700; font-size:.7rem; cursor:pointer; font-family:var(--font-body); }
.att-cell.p{ background:var(--green); border-color:var(--green); color:#fff; }
.att-cell.a{ background:var(--coral); border-color:var(--coral); color:#fff; }
.att-cell.l{ background:var(--yellow); border-color:var(--yellow); color:#4A3808; }
.att-cell.h{ background:var(--primary-light); border-color:var(--primary-light); color:#fff; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1200px){
  .head-search{ max-width:320px; }
}
@media (max-width:991px){
  .sidebar{ transform:translateX(-105%); width:268px !important; }
  body.sidebar-open .sidebar{ transform:translateX(0); }
  body.sidebar-open .sb-overlay{ opacity:1; pointer-events:auto; }
  .main-wrap{ margin-left:0 !important; }
  body.sidebar-collapsed .main-wrap{ margin-left:0 !important; }
  .topbar{ margin:12px; }
  .page{ padding:10px 14px 26px; }
  .login-page{ grid-template-columns:1fr; }
  .login-brand{ display:none; }
  .head-search{ display:none; }
  .tb-greet{ display:none; }
}
@media (max-width:576px){
  .page-head h1{ font-size:1.15rem; }
  .page-head{ margin-bottom:14px; }
  .stat3card .sc-val{ font-size:1.4rem; }
}

/* print */
@media print{
  .sidebar,.topbar,.no-print,.toast-stack{ display:none !important; }
  .main-wrap{ margin-left:0; }
  .page{ padding:0; }
  .card,.welcome{ box-shadow:none !important; border:1px solid #ddd; border-radius:8px; }
  body{ background:#fff; }
}