/* =========================================================
   Imia Ajiolo Secondary School Portal
   Theme: Modern Blue & White
========================================================= */
:root{
    --primary: #0b5ed7;
    --primary-dark: #0a3f9c;
    --primary-light: #e8f1ff;
    --accent: #1fb6ff;
    --navy: #051c40;
    --white: #ffffff;
    --gray-50: #f7f9fc;
    --gray-100: #eef2f8;
    --gray-500: #6b7688;
    --gray-800: #1e2433;
    --radius: 14px;
    --shadow-soft: 0 10px 30px rgba(11, 94, 215, 0.08);
    --shadow-hover: 0 16px 40px rgba(11, 94, 215, 0.16);
}

*{box-sizing:border-box;}

body{
    font-family: 'Inter', 'Segoe UI', sans-serif;
    background: var(--gray-50);
    color: var(--gray-800);
    line-height: 1.6;
}

h1,h2,h3,h4,h5,.brand-font{
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 600;
    color: var(--navy);
}

a{ text-decoration:none; }

/* ---------- Buttons ---------- */
.btn-primary{
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border: none;
    border-radius: 10px;
    padding: 10px 24px;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(11,94,215,.25);
    transition: all .25s ease;
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 10px 22px rgba(11,94,215,.35); background: linear-gradient(135deg, var(--primary-dark), var(--primary)); }
.btn-outline-primary{ border-radius:10px; font-weight:600; }
.btn-accent{ background: var(--accent); color:#fff; border-radius:10px; font-weight:600; border:none; }

/* ---------- Public Navbar ---------- */
.navbar-school{
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 18px rgba(5,28,64,.06);
    padding: 14px 0;
    position: sticky; top:0; z-index: 1030;
}
.navbar-school .navbar-brand{
    font-family:'Poppins',sans-serif;
    font-weight:700;
    color: var(--navy);
    display:flex; align-items:center; gap:10px;
}
.navbar-school .navbar-brand img{ height:42px; width:42px; object-fit:contain; border-radius:8px; }
.navbar-school .nav-link{
    font-weight:500; color: var(--gray-800); margin: 0 6px; position:relative;
}
.navbar-school .nav-link:hover{ color: var(--primary); }
.navbar-school .nav-link.active{ color: var(--primary); font-weight:600; }

/* ---------- Hero / Slider ---------- */
.hero-slider{
    position: relative;
    height: 88vh;
    min-height: 520px;
    overflow: hidden;
}
.hero-slide{
    position:absolute; inset:0;
    background-size: cover; background-position:center;
    opacity:0; transition: opacity 1.2s ease;
}
.hero-slide.active{ opacity:1; }
.hero-slide::after{
    content:'';
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(5,28,64,.55) 0%, rgba(5,28,64,.75) 100%);
}
.hero-content{
    position:relative; z-index:2;
    height:100%;
    display:flex; flex-direction:column; justify-content:center;
    color:#fff; max-width: 760px;
}
.hero-content .eyebrow{
    text-transform:uppercase; letter-spacing:3px; font-size:.8rem; color: var(--accent); font-weight:700;
}
.hero-content h1{ color:#fff; font-size: clamp(2rem, 5vw, 3.4rem); margin-bottom:18px; }
.hero-content p{ font-size:1.15rem; color:#e7eefc; margin-bottom: 28px; }
.hero-dots{ position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:10px; }
.hero-dots span{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.45); cursor:pointer; transition:.3s; }
.hero-dots span.active{ background:#fff; width:28px; border-radius:6px; }
.hero-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.35); color:#fff; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.25s; }
.hero-arrow:hover{ background:rgba(255,255,255,.3); }
.hero-arrow.left{ left:22px; } .hero-arrow.right{ right:22px; }

/* ---------- Sections ---------- */
.section{ padding: 90px 0; }
.section-title{ margin-bottom:48px; }
.section-title .eyebrow{
    color: var(--primary); font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:.8rem;
}
.section-title h2{ font-size: clamp(1.6rem, 3vw, 2.3rem); }
.bg-soft{ background: var(--primary-light); }

/* ---------- Cards ---------- */
.card-modern{
    background:#fff; border:none; border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    transition: all .3s ease;
    overflow:hidden;
    height:100%;
}
.card-modern:hover{ transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.icon-box{
    width:58px; height:58px; border-radius:14px;
    background: var(--primary-light); color: var(--primary);
    display:flex; align-items:center; justify-content:center; font-size:1.5rem;
    margin-bottom:16px;
}

.event-card .event-date{
    background: var(--primary); color:#fff; border-radius:10px;
    width:60px; text-align:center; padding:8px 0; font-weight:700; line-height:1.1;
}
.event-card .event-date span{ display:block; font-size:.7rem; font-weight:500; text-transform:uppercase; }

.announcement-item{
    border-left:4px solid var(--primary);
    background:#fff; border-radius:10px; padding:18px 20px; box-shadow: var(--shadow-soft);
}

/* ---------- Footer ---------- */
.footer-school{ background: var(--navy); color:#c9d6ec; padding:60px 0 20px; }
.footer-school h5{ color:#fff; }
.footer-school a{ color:#c9d6ec; }
.footer-school a:hover{ color: var(--accent); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:36px; padding-top:20px; font-size:.9rem; }

/* ---------- Auth Pages ---------- */
.auth-wrap{
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    background: linear-gradient(135deg, var(--navy), var(--primary-dark));
    padding: 40px 16px;
}
.auth-card{
    background:#fff; border-radius: 20px; box-shadow: 0 25px 60px rgba(0,0,0,.3);
    max-width: 460px; width:100%; padding: 40px 36px;
}
.auth-card .logo{ height:56px; margin-bottom:14px; }
.form-control, .form-select{
    border-radius:10px; padding:11px 14px; border:1.5px solid #dfe6f2;
}
.form-control:focus, .form-select:focus{ border-color: var(--primary); box-shadow:0 0 0 .2rem rgba(11,94,215,.12); }

/* ---------- Dashboard Layout ---------- */
.dash-body{ background: var(--gray-100); min-height:100vh; }
.sidebar{
    width:260px; background: var(--navy); min-height:100vh; position:fixed; top:0; left:0; z-index:1040;
    color:#cfdcf3; transition: all .3s ease;
}
.sidebar .brand{ padding:22px 22px; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,.08); }
.sidebar .brand img{ height:38px; width:38px; border-radius:8px; }
.sidebar .brand span{ color:#fff; font-weight:700; font-family:'Poppins',sans-serif; font-size:1rem; }
.sidebar-nav{ padding:18px 12px; }
.sidebar-nav a{
    display:flex; align-items:center; gap:12px; color:#b9c8e5; padding:12px 16px; border-radius:10px;
    margin-bottom:4px; font-weight:500; font-size:.94rem; transition:.2s;
}
.sidebar-nav a i{ width:20px; text-align:center; }
.sidebar-nav a:hover{ background: rgba(255,255,255,.06); color:#fff; }
.sidebar-nav a.active{ background: var(--primary); color:#fff; box-shadow: 0 6px 16px rgba(11,94,215,.35); }

.main-content{ margin-left:260px; padding: 26px 30px 60px; }
.topbar{
    background:#fff; border-radius:14px; padding:16px 22px; display:flex; align-items:center; justify-content:space-between;
    box-shadow: var(--shadow-soft); margin-bottom:26px;
}
.topbar .user-chip{ display:flex; align-items:center; gap:10px; }
.avatar{
    width:40px; height:40px; border-radius:50%; background: var(--primary-light); color:var(--primary);
    display:flex; align-items:center; justify-content:center; font-weight:700;
}
.stat-card{ border-radius: var(--radius); padding:24px; color:#fff; box-shadow: var(--shadow-soft); position:relative; overflow:hidden; }
.stat-card h3{ color:#fff; font-size:2rem; margin-bottom:2px; }
.stat-card p{ margin:0; opacity:.9; }
.stat-card i{ position:absolute; right:18px; top:18px; font-size:2.2rem; opacity:.35; }
.stat-1{ background: linear-gradient(135deg,#0b5ed7,#1fb6ff); }
.stat-2{ background: linear-gradient(135deg,#0a3f9c,#0b5ed7); }
.stat-3{ background: linear-gradient(135deg,#12b886,#0ca678); }
.stat-4{ background: linear-gradient(135deg,#f59f00,#f76707); }

.table-modern{ background:#fff; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-soft); }
.table-modern thead{ background: var(--primary-light); }
.table-modern thead th{ border:none; color: var(--navy); font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.5px; }
.table-modern td, .table-modern th{ vertical-align:middle; padding:14px 16px; }

.badge-status{ padding:6px 14px; border-radius:20px; font-weight:600; font-size:.78rem; }
.badge-pending{ background:#fff4e0; color:#b96b00; }
.badge-approved{ background:#e2f9ee; color:#0ca678; }
.badge-rejected{ background:#fde7e9; color:#d6336c; }
.badge-active{ background:#e2f9ee; color:#0ca678; }
.badge-inactive{ background:#f1f3f5; color:#868e96; }

.content-card{ background:#fff; border-radius: var(--radius); padding:24px; box-shadow: var(--shadow-soft); margin-bottom:24px; }

@media (max-width: 991px){
    .sidebar{ left:-260px; }
    .sidebar.show{ left:0; }
    .main-content{ margin-left:0; padding:20px 14px 50px; }
}

/* AOS "push up" feel - custom easing tweak, complements AOS attrs used inline */
[data-aos]{ transition-property: transform, opacity; }