/* ===== Global ===== */
body{margin:0;font-family:'Poppins',sans-serif;background:#F3F4F6;color:#111827}
h1,h2,h3{font-weight:600;margin:0}a{text-decoration:none;color:inherit}

/* ===== Sidebar ===== */
.sidebar{width:220px;background:#1E3A8A;color:#fff;height:100vh;padding:20px;position:fixed;top:0;left:0;transform:translateX(-100%);transition:.3s;z-index:999}
.sidebar.active{transform:translateX(0)}.sidebar h2{margin-bottom:20px;font-weight:600}
.sidebar ul{list-style:none;padding:0}.sidebar ul li{margin:15px 0}
.sidebar ul li a{color:#fff;font-weight:500;display:block;padding:8px;border-radius:6px;transition:.3s}
.sidebar ul li a:hover,.sidebar ul li a.active{background:#2563EB;font-weight:600}

/* ===== Overlay ===== */
.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:998;display:none}
.overlay.active{display:block}

/* ===== Main Content ===== */
.main-content{margin-left:0;padding:20px;transition:.3s}
.sidebar.active~.main-content{margin-left:220px;filter:blur(3px)}
header,.site-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding:15px 20px;background:#1E3A8A;color:#fff}
.header-left{display:flex;align-items:center;gap:10px}.logo{height:50px;width:auto}
.site-header h1{font-size:22px;font-weight:600;color:#fff}

/* ===== Toggle Button ===== */
.toggle-btn{background:#2563EB;color:#fff;border:none;padding:8px 12px;border-radius:6px;cursor:pointer;font-size:18px;line-height:1;transition:.3s;margin-right:10px}
.toggle-btn:hover{background:#1E40AF}

/* ===== Table ===== */
.table-section{margin-top:20px}.table-section h2{margin-bottom:15px;color:#1E3A8A}
table{width:100%;border-collapse:collapse;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.1);border-radius:8px;overflow:hidden;margin-top:10px}
th,td{padding:12px;text-align:left;border-bottom:1px solid #eee}th{background:#F9FAFB;font-weight:600}

/* ===== Badge & Button ===== */
.badge{padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600}
.badge.success{background:#D1FAE5;color:#065F46}.badge.danger{background:#FEE2E2;color:#991B1B}
.btn,.btn-edit,.btn-delete{padding:6px 12px;border:none;border-radius:6px;cursor:pointer;transition:.3s}
.btn{background:#2563EB;color:#fff}.btn-edit{background:#3B82F6;color:#fff}.btn-delete{background:#EF4444;color:#fff}
.btn:hover,.btn-edit:hover,.btn-delete:hover{opacity:.8}

/* ===== Login Page ===== */
.login-page{display:flex;justify-content:center;align-items:center;height:100vh;background:url('../img/school-bg.jpg') no-repeat center/cover}
.login-card{background:rgba(255,255,255,.2);padding:30px;border-radius:10px;backdrop-filter:blur(10px);width:300px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,.2);color:#FF0000}
.login-card h2{color:#fff;margin-bottom:20px}
.login-card h4{color:#fff;margin-bottom:20px}
.input-transparent{background:transparent;border:1px solid #fff;color:#fff;padding:10px;margin-bottom:15px;width:100%;border-radius:6px}
.input-transparent::placeholder{color:#e5e5e5}
.btn-gradient{background:linear-gradient(45deg,#2196F3,#4CAF50);border:none;padding:10px;color:#fff;cursor:pointer;width:100%;border-radius:6px;font-weight:600}
.btn-gradient:hover{opacity:.9}

/* ===== Public Page ===== */
.public-header{text-align:center;padding:30px;background:#1E3A8A;color:#fff}
.public-header h1{font-size:28px}.public-header p{font-size:16px;margin-top:5px}
.public-content{padding:20px;max-width:1000px;margin:auto}
.filter-section{margin:20px 0;text-align:center}
.filter-section select{padding:8px;border-radius:6px;border:1px solid #ccc;font-size:14px}
.history-section{margin-top:30px;background:#F9FAFB;padding:20px;border-radius:8px}
.history-section h2{margin-bottom:15px;font-weight:600;color:#1E3A8A}
.history-section ul{list-style:none;padding:0}
.history-section ul li{margin:8px 0;padding:8px;background:#fff;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.public-footer,.site-footer{text-align:center;padding:15px;background:#1E3A8A;color:#fff;margin-top:30px}

/* ===== Card ===== */
.dashboard-section{margin-top:30px}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.card{background:#fff;padding:20px;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.1);text-align:center}
.card h3{margin-bottom:10px;color:#1E3A8A}.card p{font-size:14px;color:#374151;margin-bottom:15px}
.card a{display:inline-block;padding:8px 16px;background:#2563EB;color:#fff;border-radius:6px;text-decoration:none;font-weight:600}
.card a:hover{background:#1E40AF}
.card form{display:flex;flex-direction:column;gap:10px}
.card form label{font-weight:500;text-align:left}
.card form select,.card form input{padding:8px;border:1px solid #ccc;border-radius:6px}
.card form button{margin-top:10px}.card canvas{margin-top:15px;max-width:100%}

/* ===== Welcome & Slider ===== */
.welcome-section{background:#F9FAFB;padding:15px;border-radius:8px;margin-bottom:20px;font-size:16px;color:#1E3A8A;box-shadow:0 2px 6px rgba(0,0,0,.1)}
.slider-section{margin-bottom:20px}
.slider{position:relative;width:100vw;height:100vh;margin:0;overflow:hidden}
.slides{display:flex;transition:margin-left .5s ease;width:300%}
.slides img{width:100vw;height:100vh;object-fit:cover}
.prev,.next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.5);color:#fff;border:none;padding:10px;cursor:pointer;border-radius:50%;z-index:10}
.prev{left:20px}.next{right:20px}
.prev:hover,.next:hover{background:rgba(0,0,0,.8)}

/* ===== Splash Screen ===== */
.splash-screen{display:flex;justify-content:center;align-items:center;height:100vh;background:#1E3A8A;color:#fff;flex-direction:column}
.splash-screen img{width:120px;height:auto;margin-bottom:20px}
.splash-screen h1{font-size:20px;font-weight:600}
.splash-screen .loader{border:4px solid #fff;border-top:4px solid transparent;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin-top:15px}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

/* ===== Responsive ===== */
@media(max-width:768px){
  .sidebar{left:-220px}.sidebar.active{left:0}
  .toggle-btn{display:block;position:fixed;top:10px;left:10px;z-index:1000}
  .main-content{margin-left:0;padding-top:50px}
  .card-grid{grid-template-columns:1fr}
}