:root{
  --navy-950:#0e1b38; --navy-900:#12294f; --navy-800:#16305c;
  --blue:#2f5fd9; --blue-light:#eaf0ff;
  --pink:#ee4c96; --pink-light:#fdeaf3;
  --orange:#f6921e; --orange-light:#fff2e2;
  --yellow:#f7c600; --yellow-light:#fff8dd;
  --green:#22c55e; --green-light:#e8faef;
  --red:#ef4444; --red-light:#fdecec;
  --ink:#16305c; --muted:#6b7691; --line:#e8ecf5; --bg:#f4f6fb;
  --card:#ffffff;
  --shadow:0 10px 28px -14px rgba(14,33,68,.16);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Cairo','Tajawal',sans-serif;
  background:var(--bg); color:var(--ink);
}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
button,input,select,textarea{font-family:inherit;}

/* ===== Login page ===== */
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--navy-950),var(--navy-900) 60%,#1a3a70);
  padding:20px;
}
.login-card{
  width:100%;max-width:400px;background:#fff;border-radius:22px;
  padding:34px 30px;box-shadow:0 30px 60px -20px rgba(0,0,0,.4);
}
.login-brand{display:flex;align-items:center;gap:10px;margin-bottom:22px;}
.login-brand svg{width:38px;height:38px;}
.login-brand span{font-weight:800;font-size:17px;color:var(--navy-900);font-family:'Tajawal',sans-serif;}
.login-card h1{font-size:20px;font-weight:900;margin-bottom:6px;}
.login-card p.sub{font-size:12.5px;color:var(--muted);margin-bottom:22px;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:12.5px;font-weight:800;margin-bottom:6px;color:var(--navy-800);}
.field input{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:11px;
  font-size:13.5px;transition:.2s border-color;
}
.field input:focus{outline:none;border-color:var(--blue);}
.btn-submit{
  width:100%;padding:13px;background:var(--blue);color:#fff;border:none;border-radius:11px;
  font-weight:800;font-size:14px;cursor:pointer;margin-top:6px;transition:.2s background;
}
.btn-submit:hover{background:#2450bd;}
.alert{padding:11px 14px;border-radius:10px;font-size:12.5px;font-weight:700;margin-bottom:16px;}
.alert-error{background:var(--red-light);color:#b91c1c;}
.alert-success{background:var(--green-light);color:#15803d;}

/* ===== App shell ===== */
.app{display:flex;min-height:100vh;}
.sidebar{
  width:230px;flex:none;background:var(--navy-950);
  padding:26px 16px 20px;display:flex;flex-direction:column;gap:4px;
  position:sticky;top:0;height:100vh;
  overflow-y:auto;
}
.side-brand{display:flex;align-items:center;gap:10px;padding:0 6px 26px;}
.side-brand-logo{width:150px;height:auto;display:block;}
.cycle-switch-badge{display:flex;align-items:center;justify-content:space-between;gap:8px;background:rgba(255,255,255,.08);border-radius:12px;padding:10px 14px;margin:0 6px 20px;text-decoration:none;color:#fff;font-size:12px;font-weight:800;}
.cycle-switch-badge .switch-lab{font-size:10.5px;color:#9db0dd;font-weight:700;}
.side-brand span{color:#fff;font-weight:800;font-size:15px;font-family:'Tajawal',sans-serif;}
.nav-item{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;
  color:#aab4d6;font-size:13.5px;font-weight:700;transition:.2s all;
}
.nav-item .ic{width:20px;text-align:center;}
.nav-item.active,.nav-item:hover{background:var(--blue);color:#fff;}

.nav-group{display:flex;flex-direction:column;}
.nav-group-toggle{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;
  color:#aab4d6;font-size:13.5px;font-weight:700;background:none;border:none;
  cursor:pointer;font-family:inherit;width:100%;text-align:right;
}
.nav-group-toggle:hover{background:rgba(255,255,255,.06);}
.nav-group-toggle .ic{width:20px;text-align:center;}
.nav-group-toggle .arrow{margin-inline-start:auto;font-size:10px;transition:.2s transform;}
.nav-group.open .nav-group-toggle .arrow{transform:rotate(180deg);}
.nav-group.has-active .nav-group-toggle{color:#fff;}
.nav-subgroup{
  display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease;
}
.nav-group.open .nav-subgroup{grid-template-rows:1fr;}
.nav-subgroup-inner{overflow:hidden;}
.nav-subgroup .nav-item{
  padding-inline-start:38px;font-size:12.5px;
}

.side-foot{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.08);}
.side-user{display:flex;align-items:center;gap:10px;padding:8px 6px;}
.side-user .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--orange));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:12.5px;flex:none;}
.side-user .meta strong{display:block;color:#fff;font-size:12px;}
.side-user .meta span{display:block;color:#7c88ad;font-size:10.5px;}
.logout-link{display:flex;align-items:center;gap:10px;color:#e88;font-size:12.5px;font-weight:700;padding:10px 6px 0;}
.nav-unread-badge{position:absolute;top:6px;left:12px;background:var(--red);color:#fff;font-size:10px;font-weight:900;min-width:18px;height:18px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 4px;}

.main{flex:1;min-width:0;padding:30px 34px;}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:14px;}
.page-title{font-family:'Tajawal',sans-serif;font-weight:900;font-size:22px;}
.page-title span{display:block;font-family:'Cairo',sans-serif;font-weight:600;font-size:12px;color:var(--muted);margin-top:3px;}

.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px;}
.stat-card{background:var(--card);border-radius:16px;padding:18px;box-shadow:var(--shadow);display:flex;align-items:center;gap:14px;transition:.2s transform,.2s box-shadow;}
a.stat-card:hover{transform:translateY(-3px);box-shadow:0 14px 28px -10px rgba(20,40,90,.2);}
.stat-card .ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:19px;flex:none;}
.stat-card .val{font-size:21px;font-weight:900;}
.stat-card .lab{font-size:11px;color:var(--muted);font-weight:700;}

.card{background:var(--card);border-radius:16px;padding:22px;box-shadow:var(--shadow);}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.card-head h3{font-size:14.5px;font-weight:800;}

table{width:100%;border-collapse:collapse;font-size:13px;}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;}
.table-wrap table{min-width:640px;}
th{text-align:right;font-size:11px;color:var(--muted);font-weight:800;padding:10px 12px;border-bottom:2px solid var(--line);}
td{padding:12px;border-bottom:1px solid var(--line);font-weight:600;}
tr:last-child td{border:none;}

.mobile-menu-btn{display:none;}
.sidebar-overlay{display:none;}

@media(max-width:640px){
  .mobile-menu-btn{
    display:flex !important;align-items:center;justify-content:center;
    position:fixed;top:14px;right:14px;z-index:9999;
    width:46px;height:46px;border-radius:12px;
    background:#0e1b38;color:#fff;font-size:20px;border:none;
    box-shadow:0 8px 20px -6px rgba(0,0,0,.45);
  }
  .sidebar-overlay.open{
    display:block;position:fixed;top:0;left:0;right:0;bottom:0;
    background:rgba(14,20,40,.55);z-index:9990;
  }
  .sidebar{
    display:flex !important;
    position:fixed;top:0;right:0;bottom:0;
    width:78%;max-width:300px;
    transform:translateX(100%);
    transition:transform .3s ease;
    z-index:9995;
  }
  .sidebar.open{transform:translateX(0);}
  .main{padding:70px 16px 30px;overflow-x:hidden;}
  body{overflow-x:hidden;}
  .stat-grid{grid-template-columns:1fr 1fr;}
}

/* بحث فوري ديال التلاميذ (Live Search) */
.live-search-wrap{position:relative;flex:1;max-width:320px;}
.live-search-dropdown{display:none;position:absolute;top:100%;right:0;left:0;background:#fff;border:1.5px solid var(--line);border-radius:10px;box-shadow:0 8px 20px rgba(20,40,90,.12);margin-top:6px;max-height:280px;overflow-y:auto;z-index:50;}
.live-search-item{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;text-decoration:none;color:var(--navy-800);font-size:13px;font-weight:700;border-bottom:1px solid var(--line);}
.live-search-item:last-child{border:none;}
.live-search-item:hover{background:var(--bg);}
.live-search-item .ls-class{font-size:11px;color:var(--muted);font-weight:800;}
.live-search-empty{padding:14px;text-align:center;color:var(--muted);font-size:12.5px;}