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

:root{
  --indigo:#4F46E5;
  --indigo-dark:#3730A3;
  --violet:#7C3AED;
  --sky:#0EA5E9;
  --amber:#F59E0B;
  --emerald:#10B981;
  --rose:#F43F5E;
  --bg:#F3F5FB;
  --card:#FFFFFF;
  --ink:#1E1B4B;
  --muted:#6B7280;
  --line:#E7E9F5;
  --shadow: 0 10px 30px -12px rgba(79,70,229,.25);
  --shadow-sm: 0 4px 14px -6px rgba(30,27,75,.12);
  --r-lg:22px;
  --r-md:16px;
  --r-sm:10px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:'Poppins',sans-serif;
  background:
    radial-gradient(1200px 600px at -10% -10%, #EEF0FF 0%, transparent 60%),
    radial-gradient(1000px 500px at 110% 0%, #FFF3E0 0%, transparent 55%),
    var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Baloo 2',sans-serif; margin:0;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;cursor:pointer;}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-thumb{background:#D4D8F5;border-radius:20px;}
::-webkit-scrollbar-track{background:transparent;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:14px;border:none;font-weight:600;font-size:14px;
  transition:all .18s ease; white-space:nowrap;
}
.btn-primary{background:linear-gradient(135deg,var(--indigo),var(--violet));color:#fff;box-shadow:0 8px 20px -6px rgba(79,70,229,.55);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 24px -6px rgba(79,70,229,.6);}
.btn-outline{background:#fff;color:var(--indigo);border:1.5px solid var(--line);}
.btn-outline:hover{border-color:var(--indigo);transform:translateY(-1px);}
.btn-amber{background:linear-gradient(135deg,#F59E0B,#F97316);color:#fff;box-shadow:0 8px 20px -6px rgba(245,158,11,.5);}
.btn-emerald{background:linear-gradient(135deg,#10B981,#059669);color:#fff;box-shadow:0 8px 20px -6px rgba(16,185,129,.5);}
.btn-sm{padding:7px 14px;font-size:12.5px;border-radius:10px;}
.btn-danger{background:#FFE4E8;color:#E11D48;}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}
.btn-icon{width:38px;height:38px;padding:0;border-radius:12px;background:#fff;border:1.5px solid var(--line);}

/* ---------- Inputs ---------- */
.field{margin-bottom:14px;}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:6px;letter-spacing:.2px;}
.field input, .field select, .field textarea{
  width:100%;padding:11px 14px;border-radius:12px;border:1.6px solid var(--line);
  font-family:inherit;font-size:14px;background:#FAFBFF;color:var(--ink);transition:.15s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;border-color:var(--indigo);background:#fff;box-shadow:0 0 0 4px rgba(79,70,229,.1);
}
.field textarea{resize:vertical;min-height:80px;}
.field-row{display:flex;gap:12px;}
.field-row .field{flex:1;}

/* ---------- Layout shells ---------- */
.app-shell{display:flex;min-height:100vh;}
.sidebar{
  width:250px;flex-shrink:0;background:linear-gradient(180deg,var(--indigo-dark),var(--indigo) 60%,var(--violet));
  color:#fff;padding:22px 16px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
}
.brand{display:flex;align-items:center;gap:10px;padding:8px 8px 22px;}
.brand .logo{font-size:30px;background:rgba(255,255,255,.15);width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.brand .logo img{width:100%;height:100%;object-fit:cover;border-radius:14px;}
.brand .txt b{display:block;font-family:'Baloo 2';font-size:15px;line-height:1.15;}
.brand .txt span{font-size:10.5px;opacity:.75;}

.nav{display:flex;flex-direction:column;gap:3px;flex:1;overflow-y:auto;}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:13px;
  font-size:14px;font-weight:500;opacity:.82;transition:.15s;
}
.nav-item .ic{font-size:17px;width:20px;text-align:center;}
.nav-item:hover{background:rgba(255,255,255,.1);opacity:1;}
.nav-item.active{background:#fff;color:var(--indigo);opacity:1;font-weight:700;box-shadow:var(--shadow-sm);}

.side-foot{border-top:1px solid rgba(255,255,255,.18);padding-top:14px;margin-top:10px;}
.side-user{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;}

/* ---------- Mobile responsiveness: sidebar becomes a slide-out drawer on phones ---------- */
.hamburger-btn{display:none;background:rgba(255,255,255,.15);border:none;width:38px;height:38px;border-radius:12px;font-size:18px;cursor:pointer;color:#fff;flex-shrink:0;}
.sidebar-backdrop{display:none;}
@media(max-width:860px){
  .app-shell{display:block;}
  .sidebar{position:fixed;top:0;left:-270px;width:250px;height:100vh;z-index:900;transition:left .25s ease;box-shadow:0 0 40px rgba(0,0,0,.35);}
  .sidebar.open{left:0;}
  .hamburger-btn{display:flex;align-items:center;justify-content:center;}
  .main{padding:16px 14px 50px;}
  .topbar h1{font-size:19px;}
  .topbar{justify-content:flex-start;}
  .topbar-right{margin-left:auto;}
  .sidebar-backdrop.show{display:block;position:fixed;inset:0;background:rgba(20,18,50,.45);z-index:850;}
}
.side-user .av{width:36px;height:36px;background:rgba(255,255,255,.18);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;}
.side-user b{font-size:13px;display:block;}
.side-user span{font-size:11px;opacity:.7;text-transform:capitalize;}
.logout-link{display:flex;align-items:center;gap:8px;font-size:13px;opacity:.75;margin-top:10px;padding:8px;border-radius:10px;}
.logout-link:hover{background:rgba(255,255,255,.1);opacity:1;}

.main{flex:1;min-width:0;padding:26px 32px 60px;}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:14px;}
.topbar h1{font-size:23px;}
.topbar .sub{color:var(--muted);font-size:13.5px;margin-top:2px;}
.topbar-right{display:flex;align-items:center;gap:10px;}
.pill{background:#fff;border:1.5px solid var(--line);padding:8px 14px;border-radius:30px;font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:7px;box-shadow:var(--shadow-sm);}

.notif-bell-wrap{position:relative;}
.notif-bell{background:#fff;border:1.5px solid var(--line);width:42px;height:42px;border-radius:50%;font-size:18px;cursor:pointer;box-shadow:var(--shadow-sm);position:relative;display:flex;align-items:center;justify-content:center;}
.notif-badge{position:absolute;top:-4px;right:-4px;background:#F43F5E;color:#fff;font-size:10px;font-weight:800;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;}
.notif-panel{position:absolute;top:52px;right:0;width:340px;max-height:440px;overflow-y:auto;background:#fff;border-radius:16px;box-shadow:0 20px 50px -14px rgba(30,27,75,.35);border:1px solid var(--line);display:none;z-index:500;}
.notif-panel.show{display:block;}
.notif-panel-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);font-weight:800;font-size:13.5px;}
.notif-panel-head button{background:none;border:none;color:var(--indigo);font-size:11.5px;font-weight:700;cursor:pointer;}
.notif-item{padding:12px 16px;border-bottom:1px solid var(--line);cursor:pointer;}
.notif-item:hover{background:#F8F9FF;}
.notif-item.unread{background:#F5F3FF;}
.notif-item .nt-title{font-size:13px;font-weight:700;margin-bottom:2px;}
.notif-item .nt-body{font-size:12px;color:var(--muted);}
.notif-item .nt-time{font-size:10.5px;color:#B0B3C7;margin-top:4px;}
.notif-empty{padding:30px;text-align:center;color:var(--muted);font-size:12.5px;}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--emerald);box-shadow:0 0 0 3px rgba(16,185,129,.2);}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:6px;margin-bottom:22px;flex-wrap:wrap;background:#fff;padding:6px;border-radius:16px;border:1px solid var(--line);width:fit-content;box-shadow:var(--shadow-sm);}
.tab-btn{padding:10px 18px;border-radius:12px;border:none;background:transparent;font-weight:600;font-size:13.5px;color:var(--muted);transition:.15s;}
.tab-btn:hover{color:var(--indigo);}
.tab-btn.active{background:linear-gradient(135deg,var(--indigo),var(--violet));color:#fff;box-shadow:0 6px 14px -4px rgba(79,70,229,.5);}
.tab-panel{display:none;animation:fadeUp .35s ease;}
.tab-panel.active{display:block;}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:18px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:680px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}}

.card{background:var(--card);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow-sm);border:1px solid var(--line);}
.card-pad-lg{padding:26px;}

.stat-card{position:relative;overflow:hidden;padding:20px;border-radius:var(--r-lg);color:#fff;box-shadow:var(--shadow);}
.stat-card .icon{font-size:26px;opacity:.9;}
.stat-card .num{font-size:30px;font-weight:800;font-family:'Baloo 2';margin-top:8px;}
.stat-card .lbl{font-size:12.5px;opacity:.9;margin-top:2px;}
.stat-card::after{content:"";position:absolute;right:-30px;bottom:-30px;width:110px;height:110px;background:rgba(255,255,255,.15);border-radius:50%;}
.grad-1{background:linear-gradient(135deg,#4F46E5,#7C3AED);}
.grad-2{background:linear-gradient(135deg,#F59E0B,#F97316);}
.grad-3{background:linear-gradient(135deg,#10B981,#059669);}
.grad-4{background:linear-gradient(135deg,#0EA5E9,#2563EB);}
.grad-5{background:linear-gradient(135deg,#F43F5E,#E11D48);}
.grad-6{background:linear-gradient(135deg,#8B5CF6,#6D28D9);}

.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.section-title h3{font-size:17px;}
.section-title .hint{font-size:12px;color:var(--muted);}

/* ---------- Table ---------- */
.table-wrap{overflow-x:auto;border-radius:var(--r-md);border:1px solid var(--line);}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px;}
thead th{background:#F7F8FE;text-align:left;padding:12px 14px;font-weight:700;color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--line);}
tbody td{padding:11px 14px;border-bottom:1px solid #F1F2FA;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:#FAFBFF;}
.table-input{width:70px;padding:6px 8px;border-radius:8px;border:1.5px solid var(--line);font-size:13px;text-align:center;}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:20px;font-size:11.5px;font-weight:700;}
.b-green{background:#D1FAE5;color:#047857;}
.b-red{background:#FEE2E2;color:#B91C1C;}
.b-amber{background:#FEF3C7;color:#B45309;}
.b-blue{background:#DBEAFE;color:#1D4ED8;}
.b-violet{background:#EDE9FE;color:#6D28D9;}
.b-gray{background:#F1F2F6;color:#6B7280;}

/* ---------- Attendance / status buttons ---------- */
.status-btns{display:flex;gap:6px;}
.status-btn{padding:6px 12px;border-radius:9px;border:1.6px solid var(--line);background:#fff;font-size:12px;font-weight:700;}
.status-btn.present.on{background:#D1FAE5;border-color:#10B981;color:#047857;}
.status-btn.absent.on{background:#FEE2E2;border-color:#F43F5E;color:#B91C1C;}
.status-btn.leave.on{background:#FEF3C7;border-color:#F59E0B;color:#B45309;}

/* ---------- Notice cards ---------- */
.notice-card{border-radius:var(--r-md);padding:16px 18px;border:1px solid var(--line);background:#fff;display:flex;gap:14px;margin-bottom:12px;box-shadow:var(--shadow-sm);}
.notice-card .ic{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.notice-sports .ic{background:#DBEAFE;}
.notice-holiday .ic{background:#FEF3C7;}
.notice-celebration .ic{background:#FCE7F3;}
.notice-general .ic{background:#EDE9FE;}
.notice-card h4{font-size:14.5px;margin-bottom:3px;}
.notice-card p{font-size:13px;color:var(--muted);margin:0;line-height:1.5;}
.notice-card .meta{font-size:11px;color:#9CA3AF;margin-top:6px;}

/* ---------- Modal ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(30,27,75,.45);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:999;padding:20px;opacity:0;pointer-events:none;transition:.2s;}
.modal-overlay.show{opacity:1;pointer-events:auto;}
.modal{background:#fff;border-radius:22px;max-width:520px;width:100%;max-height:88vh;overflow-y:auto;padding:26px;box-shadow:0 30px 60px -20px rgba(30,27,75,.4);transform:translateY(14px);transition:.2s;}
.modal-overlay.show .modal{transform:translateY(0);}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.modal-head h3{font-size:18px;}
.modal-close{width:32px;height:32px;border-radius:10px;background:#F3F4F8;border:none;font-size:16px;color:var(--muted);}

/* ---------- Toast ---------- */
#toast{position:fixed;bottom:24px;right:24px;z-index:1000;display:flex;flex-direction:column;gap:10px;}
.toast-item{background:#1E1B4B;color:#fff;padding:13px 20px;border-radius:14px;font-size:13.5px;font-weight:600;box-shadow:0 12px 24px -8px rgba(0,0,0,.35);animation:slideIn .25s ease;display:flex;align-items:center;gap:8px;}
.toast-item.err{background:#E11D48;}
.toast-item.ok{background:#059669;}
@keyframes slideIn{from{transform:translateX(60px);opacity:0;}to{transform:translateX(0);opacity:1;}}

/* ---------- Chat ---------- */
.chat-shell{display:flex;height:520px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);}
.chat-list{width:230px;background:#FAFBFF;border-right:1px solid var(--line);overflow-y:auto;flex-shrink:0;}
.chat-contact{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid #F1F2FA;font-size:13px;font-weight:600;}
.chat-contact:hover{background:#F1F2FA;}
.chat-contact.active{background:#EEF0FF;color:var(--indigo);}
.chat-contact .av{width:32px;height:32px;border-radius:9px;background:#EDE9FE;display:flex;align-items:center;justify-content:center;font-size:16px;}
.chat-main{flex:1;display:flex;flex-direction:column;}
.chat-msgs{flex:1;padding:18px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;background:#F8F9FF;}
.msg-bubble{max-width:70%;padding:10px 15px;border-radius:16px;font-size:13.5px;line-height:1.4;}
.msg-bubble.mine{align-self:flex-end;background:linear-gradient(135deg,var(--indigo),var(--violet));color:#fff;border-bottom-right-radius:4px;}
.msg-bubble.theirs{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px;}
.msg-bubble .t{display:block;font-size:10px;opacity:.65;margin-top:4px;}
.chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:#fff;}
.chat-input input{flex:1;}
.chat-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted);font-size:13.5px;flex-direction:column;gap:8px;}

/* ---------- Map ---------- */
#busMap, .bus-map{width:100%;height:380px;border-radius:var(--r-lg);border:1px solid var(--line);}
.bus-live-card{display:flex;align-items:center;gap:14px;padding:16px;border-radius:16px;background:linear-gradient(135deg,#0EA5E9,#4F46E5);color:#fff;margin-bottom:16px;}
.bus-live-card .bicon{font-size:34px;background:rgba(255,255,255,.18);width:58px;height:58px;border-radius:16px;display:flex;align-items:center;justify-content:center;}
.pulse-dot{width:10px;height:10px;border-radius:50%;background:#4ADE80;display:inline-block;box-shadow:0 0 0 0 rgba(74,222,128,.7);animation:pulse 1.5s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.6);}70%{box-shadow:0 0 0 10px rgba(74,222,128,0);}100%{box-shadow:0 0 0 0 rgba(74,222,128,0);}}

/* ---------- Misc ---------- */
.empty-state{text-align:center;padding:50px 20px;color:var(--muted);}
.empty-state .em{font-size:44px;margin-bottom:10px;}
.chip{display:inline-block;background:#F1F2F6;padding:4px 11px;border-radius:20px;font-size:11.5px;font-weight:600;margin:2px;}
.loader{display:flex;align-items:center;justify-content:center;padding:40px;}
.spin{width:32px;height:32px;border:4px solid #E7E9F5;border-top-color:var(--indigo);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.progress-bar{height:8px;border-radius:20px;background:#EEF0FA;overflow:hidden;}
.progress-bar .fill{height:100%;border-radius:20px;background:linear-gradient(90deg,var(--indigo),var(--violet));}
.avatar-lg{width:54px;height:54px;border-radius:16px;background:#EDE9FE;display:flex;align-items:center;justify-content:center;font-size:26px;}
.hover-card{transition:.2s;}
.hover-card:hover{transform:translateY(-3px);box-shadow:0 16px 30px -12px rgba(79,70,229,.25);}
.class-topper-card{background:linear-gradient(135deg,#FFF7ED,#FEF3C7);border:1px solid #FDE68A;border-radius:16px;padding:14px 16px;display:flex;align-items:center;gap:12px;}
.mini-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.mini-bar-row .lab{width:90px;font-size:12px;color:var(--muted);font-weight:600;}
.mini-bar-track{flex:1;height:10px;border-radius:10px;background:#EEF0FA;overflow:hidden;}
.mini-bar-fill{height:100%;border-radius:10px;}
.mini-bar-val{width:36px;text-align:right;font-size:12px;font-weight:700;}

/* ---------- Notification bell ---------- */
.notif-bell-wrap{position:relative;}
.notif-bell-btn{background:rgba(255,255,255,.15);border:none;width:38px;height:38px;border-radius:12px;font-size:17px;cursor:pointer;position:relative;color:#fff;}
.notif-badge{position:absolute;top:-4px;right:-4px;background:#F43F5E;color:#fff;font-size:10px;font-weight:800;min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;}
.notif-dropdown{position:absolute;top:48px;right:0;width:340px;max-height:420px;overflow-y:auto;background:#fff;border-radius:16px;box-shadow:0 24px 50px -16px rgba(30,27,75,.35);z-index:500;padding:8px;}
.notif-item{display:flex;gap:10px;padding:10px;border-radius:10px;cursor:pointer;}
.notif-item:hover{background:#F8F9FF;}
.notif-item.unread{background:#F3F4FF;}
.notif-item .ic{font-size:18px;}
.notif-item .title{font-size:12.5px;font-weight:700;color:#1E1B4B;margin-bottom:2px;}
.notif-item .body{font-size:11.5px;color:var(--muted);line-height:1.4;}
.notif-item .time{font-size:10px;color:#B0B3C7;margin-top:3px;}
.notif-empty{text-align:center;padding:30px 10px;color:var(--muted);font-size:12.5px;}
.notif-enable-row{padding:10px;text-align:center;border-bottom:1px solid var(--line);margin-bottom:6px;}
.notif-enable-row button{background:var(--indigo);color:#fff;border:none;padding:7px 14px;border-radius:10px;font-size:11.5px;font-weight:700;cursor:pointer;}

/* ---------- AI Assistant result box ---------- */
.ai-result{margin-top:14px;}
.ai-result:empty{display:none;}
.ai-result .ai-loading{color:var(--muted);font-size:13px;font-style:italic;}
.ai-result .ai-error{background:#FEE2E2;color:#B91C1C;padding:12px 14px;border-radius:12px;font-size:13px;}
.ai-result .ai-answer{background:#F8F9FF;border:1px solid #E4E6FA;border-radius:14px;padding:16px 18px;font-size:13.5px;line-height:1.7;white-space:pre-wrap;color:#1E1B4B;}