/* ============================================================
   ZEO Dimbulagala — Professional Educational Theme
   Palette: White + Dark Navy Blue + Light Sky Blue
   ============================================================ */
:root {
  /* ---- Brand palette ---- */
  --navy-900:#0a1e3f;      /* darkest — headers, footer */
  --navy-800:#0f2b55;      /* dark navy */
  --navy-700:#153a6e;      /* primary dark blue */
  --navy-600:#1c4c8a;      /* buttons, links */
  --navy-500:#2563b8;      /* accents */

  --sky-500:#3b9ae1;       /* light blue */
  --sky-400:#5eb0ef;       /* hover / highlights */
  --sky-200:#bae0f7;       /* soft backgrounds */
  --sky-100:#e1f0fb;       /* very light section fills */
  --sky-50:#f2f8fd;        /* page alternate rows */

  --gold-500:#f0a500;      /* subtle accent (used sparingly) */
  --gold-400:#ffc542;

  --white:#ffffff;
  --bg:#ffffff;
  --bg-alt:#f2f8fd;
  --bg-card:#ffffff;
  --text:#0f172a;
  --text-soft:#334155;
  --muted:#64748b;
  --border:#dbe6f1;
  --border-soft:#eaf2fa;
  --shadow-sm:0 2px 8px rgba(10,30,63,.06);
  --shadow-md:0 6px 20px rgba(10,30,63,.08);
  --shadow-lg:0 16px 40px rgba(10,30,63,.12);
}

/* ---- Dark mode keeps the same blue identity, just inverted surfaces ---- */
html[data-theme="dark"] {
  --bg:#0a1729;
  --bg-alt:#0f2038;
  --bg-card:#132a48;
  --text:#e6eefb;
  --text-soft:#c9d7ea;
  --muted:#8fa6c2;
  --border:#1f3b60;
  --border-soft:#17314f;
  --sky-100:#122a4a;
  --sky-50:#0f2038;
  --shadow-sm:0 2px 8px rgba(0,0,0,.35);
  --shadow-md:0 6px 20px rgba(0,0,0,.4);
  --shadow-lg:0 16px 40px rgba(0,0,0,.5);
}

/* ============================================================
   Base
   ============================================================ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Segoe UI','Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.65;
  font-size:15.5px;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--navy-600);text-decoration:none;transition:.18s}
html[data-theme="dark"] a{color:var(--sky-400)}
a:hover{color:var(--sky-500)}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.flex-between{display:flex;justify-content:space-between;align-items:center;gap:16px}

/* ============================================================
   Identity bar + Header
   ============================================================ */
.identity-bar{
  background:linear-gradient(90deg,var(--navy-900),var(--navy-700) 60%,var(--navy-600));
  color:#eaf3ff;font-size:12.5px;padding:8px 0;letter-spacing:.2px;
}
.identity-bar .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px}

.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 0 rgba(10,30,63,.02);
}
html[data-theme="dark"] .site-header{background:rgba(15,32,56,.96)}
.site-header .container{padding:14px 24px}

.brand{
  display:flex;align-items:center;gap:12px;
  font-weight:800;color:var(--navy-800);font-size:18px;letter-spacing:-.2px;
}
html[data-theme="dark"] .brand{color:var(--sky-400)}
.brand .logo{height:46px;width:auto}

.main-nav{display:flex;gap:26px;font-weight:500;font-size:15px}
.main-nav a{
  padding:8px 0;color:var(--text-soft);border-bottom:2px solid transparent;
  transition:.18s;position:relative;
}
.main-nav a:hover{color:var(--navy-700);border-bottom-color:var(--sky-500)}
html[data-theme="dark"] .main-nav a{color:var(--text-soft)}
html[data-theme="dark"] .main-nav a:hover{color:var(--sky-400)}

.header-actions{display:flex;gap:10px;align-items:center}

.lang-switch{
  display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;
  font-size:12.5px;background:var(--bg-card);
}
.lang-switch a{padding:6px 11px;color:var(--text-soft)}
.lang-switch a:hover{background:var(--sky-100);color:var(--navy-700)}
.lang-switch a.active{
  background:linear-gradient(135deg,var(--navy-700),var(--navy-600));
  color:#fff;font-weight:600;
}

.theme-toggle{
  font-size:17px;padding:6px 11px;border-radius:8px;
  background:var(--bg-card);border:1px solid var(--border);
  cursor:pointer;color:var(--text-soft);transition:.18s;
}
.theme-toggle:hover{background:var(--sky-100);border-color:var(--sky-400)}

.btn-outline{
  padding:7px 18px;border:1.5px solid var(--navy-600);border-radius:8px;
  color:var(--navy-600);font-size:14px;font-weight:600;transition:.18s;
  background:var(--bg-card);
}
.btn-outline:hover{background:var(--navy-600);color:#fff}
html[data-theme="dark"] .btn-outline{border-color:var(--sky-500);color:var(--sky-400);background:transparent}
html[data-theme="dark"] .btn-outline:hover{background:var(--sky-500);color:var(--navy-900)}

.hamburger{
  display:none;background:none;border:0;font-size:22px;cursor:pointer;
  color:var(--navy-700);padding:6px;
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;min-height:520px;
  background:linear-gradient(135deg,var(--navy-900) 0%,var(--navy-700) 55%,var(--navy-600) 100%);
  color:#fff;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:100px 24px;overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 15% 25%,rgba(59,154,225,.35),transparent 55%),
    radial-gradient(circle at 85% 75%,rgba(94,176,239,.25),transparent 55%);
}
.hero::after{
  content:"";position:absolute;bottom:0;left:0;right:0;height:6px;
  background:linear-gradient(90deg,var(--sky-500),var(--sky-400),var(--navy-600));
}
.hero-content{position:relative;max-width:820px;z-index:2}
.hero h1{
  font-size:clamp(28px,4.2vw,48px);margin:0 0 18px;font-weight:800;
  line-height:1.15;letter-spacing:-.5px;
}
.hero p{font-size:18.5px;opacity:.92;margin-bottom:30px;font-weight:400}
.btn-primary{
  display:inline-block;padding:14px 34px;
  background:linear-gradient(135deg,var(--sky-500),var(--sky-400));
  color:#fff;font-weight:700;border-radius:8px;border:0;cursor:pointer;
  box-shadow:0 10px 26px rgba(59,154,225,.35);transition:.22s;font-size:15px;
  letter-spacing:.3px;
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(59,154,225,.5);
  color:#fff;
}

/* ============================================================
   Stats strip
   ============================================================ */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:20px;margin:-50px auto 50px;position:relative;z-index:5;
}
.stat-card{
  background:var(--bg-card);border-radius:14px;padding:26px 22px;text-align:center;
  box-shadow:var(--shadow-md);border-top:4px solid var(--sky-500);
  transition:.25s;border:1px solid var(--border-soft);
}
.stat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.stat-value{
  font-size:36px;font-weight:800;color:var(--navy-700);letter-spacing:-1px;
  line-height:1.1;
}
html[data-theme="dark"] .stat-value{color:var(--sky-400)}
.stat-label{
  color:var(--muted);font-weight:500;font-size:13.5px;
  text-transform:uppercase;letter-spacing:.8px;margin-top:6px;
}

/* ============================================================
   Content cards — Vision / Mission
   ============================================================ */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:40px auto}
.card{
  background:var(--bg-card);border-radius:14px;padding:32px 30px;
  box-shadow:var(--shadow-sm);border:1px solid var(--border-soft);
  border-left:5px solid var(--navy-600);
  transition:.22s;position:relative;overflow:hidden;
}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card.accent-gold{border-left-color:var(--sky-500)}
.card h2{
  margin:0 0 14px;font-size:20px;color:var(--navy-700);
  letter-spacing:-.2px;display:flex;align-items:center;gap:10px;
}
html[data-theme="dark"] .card h2{color:var(--sky-400)}
.card h2::before{
  content:"";width:6px;height:22px;border-radius:3px;
  background:linear-gradient(180deg,var(--sky-500),var(--navy-600));
}
.card p{color:var(--text-soft);margin:0;font-size:15px;line-height:1.75}

/* ============================================================
   Director message
   ============================================================ */
.director{
  display:grid;grid-template-columns:220px 1fr;gap:32px;align-items:center;
  background:linear-gradient(135deg,var(--sky-50),var(--white));
  border-radius:14px;padding:34px;margin:40px auto;
  box-shadow:var(--shadow-sm);border:1px solid var(--border-soft);
  border-left:5px solid var(--sky-500);
}
html[data-theme="dark"] .director{background:linear-gradient(135deg,var(--bg-alt),var(--bg-card))}
.director img{
  border-radius:50%;border:5px solid var(--white);
  outline:3px solid var(--sky-400);
  width:190px;height:190px;object-fit:cover;
  background:#cbd5e1;box-shadow:var(--shadow-md);
}
.director h2{margin-top:0;color:var(--navy-700);font-size:22px}
html[data-theme="dark"] .director h2{color:var(--sky-400)}
.director p{color:var(--text-soft);font-size:15.5px;line-height:1.8}

/* ============================================================
   Section titles
   ============================================================ */
.section-title{
  font-size:26px;margin:50px 0 24px;color:var(--navy-800);
  font-weight:800;letter-spacing:-.3px;position:relative;padding-bottom:14px;
}
html[data-theme="dark"] .section-title{color:var(--sky-400)}
.section-title::after{
  content:"";position:absolute;bottom:0;left:0;width:80px;height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--sky-500),var(--navy-600));
}

/* ============================================================
   News grid
   ============================================================ */
.news-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:26px;margin-bottom:60px;
}
.news-card{
  background:var(--bg-card);border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow-sm);transition:.28s;
  border:1px solid var(--border-soft);display:flex;flex-direction:column;
}
.news-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--sky-200)}
.news-card img{height:190px;width:100%;object-fit:cover;background:var(--sky-100)}
.news-body{padding:20px 22px 22px;flex:1;display:flex;flex-direction:column}
.news-body h3{
  margin:0 0 10px;font-size:17px;color:var(--navy-800);
  font-weight:700;line-height:1.4;letter-spacing:-.2px;
}
html[data-theme="dark"] .news-body h3{color:var(--sky-400)}
.news-body p{color:var(--muted);font-size:14px;margin:0 0 14px;flex:1;line-height:1.65}
.news-body small{
  color:var(--navy-600);font-size:12.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.6px;
}
html[data-theme="dark"] .news-body small{color:var(--sky-400)}

/* ============================================================
   Auth (login)
   ============================================================ */
.auth-wrap{
  min-height:70vh;display:flex;align-items:center;justify-content:center;
  padding:50px 24px;
  background:linear-gradient(135deg,var(--navy-900) 0%,var(--navy-700) 55%,var(--navy-600) 100%);
  position:relative;overflow:hidden;
}
.auth-wrap::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 20%,rgba(59,154,225,.3),transparent 50%),
    radial-gradient(circle at 80% 80%,rgba(94,176,239,.22),transparent 50%);
}
.auth-card{
  position:relative;z-index:2;
  background:var(--bg-card);border-radius:16px;padding:44px 40px;
  width:100%;max-width:430px;box-shadow:0 24px 60px rgba(0,0,0,.35);
  border:1px solid var(--border-soft);
}
.auth-card h1{
  margin:0 0 6px;font-size:24px;color:var(--navy-800);
  letter-spacing:-.3px;
}
html[data-theme="dark"] .auth-card h1{color:var(--sky-400)}
.auth-card::before{
  content:"Zonal Education Office";
  display:block;font-size:12px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--sky-500);margin-bottom:8px;
}
.auth-card label{
  display:block;margin-bottom:16px;font-weight:600;font-size:13.5px;
  color:var(--text-soft);letter-spacing:.2px;
}
.auth-card input{
  width:100%;padding:13px 15px;border:1.5px solid var(--border);border-radius:9px;
  font-size:15px;margin-top:7px;background:var(--bg);color:var(--text);
  transition:.18s;font-family:inherit;
}
.auth-card input:focus{
  outline:none;border-color:var(--sky-500);
  box-shadow:0 0 0 4px rgba(59,154,225,.15);
  background:var(--white);
}
html[data-theme="dark"] .auth-card input:focus{background:var(--bg-alt)}
.auth-card .btn-primary{
  width:100%;margin-top:12px;padding:14px;
  background:linear-gradient(135deg,var(--navy-700),var(--sky-500));
  letter-spacing:.5px;
}
.auth-card .btn-primary:hover{
  background:linear-gradient(135deg,var(--navy-800),var(--sky-500));
}
.alert-error{
  background:#fee2e2;color:#991b1b;padding:12px 16px;border-radius:9px;
  margin-bottom:18px;font-size:14px;border-left:4px solid #dc2626;
}
html[data-theme="dark"] .alert-error{background:#450a0a;color:#fecaca;border-color:#dc2626}
.muted{color:var(--muted);font-size:13px;text-align:center;margin-top:18px}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  background:linear-gradient(180deg,var(--navy-900),#061530);
  color:#c9d7ea;margin-top:70px;padding-top:60px;
  border-top:4px solid var(--sky-500);
}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1.3fr;gap:40px;padding-bottom:40px}
.footer-grid h3{
  color:var(--white);margin:0 0 18px;font-size:15px;font-weight:700;
  letter-spacing:.4px;text-transform:uppercase;position:relative;padding-bottom:10px;
}
.footer-grid h3::after{
  content:"";position:absolute;left:0;bottom:0;width:36px;height:3px;border-radius:2px;
  background:var(--sky-500);
}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid ul li{margin-bottom:9px}
.footer-grid a{color:#a9bcd6;font-size:14.5px}
.footer-grid a:hover{color:var(--sky-400)}
.footer-grid p{color:#a9bcd6;font-size:14.5px;margin:6px 0;line-height:1.7}

.socials{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.socials a{
  background:rgba(59,154,225,.14);padding:9px 16px;border-radius:8px;
  font-size:13.5px;font-weight:600;color:var(--sky-400);
  border:1px solid rgba(59,154,225,.25);transition:.2s;
}
.socials a:hover{background:var(--sky-500);color:#fff;border-color:var(--sky-500)}

.counters{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.counter-box{
  background:rgba(59,154,225,.08);padding:14px 12px;border-radius:10px;
  text-align:center;border:1px solid rgba(59,154,225,.18);
}
.counter-box .num{
  font-size:23px;font-weight:800;color:var(--sky-400);letter-spacing:-.5px;
}
.counter-box .online{color:#4ade80;display:flex;align-items:center;justify-content:center;gap:7px}
.counter-box .dot{
  width:9px;height:9px;border-radius:50%;background:#4ade80;
  animation:pulse 1.4s infinite;display:inline-block;
  box-shadow:0 0 0 0 rgba(74,222,128,.6);
}
.counter-box .lbl{
  font-size:11.5px;opacity:.75;margin-top:4px;
  text-transform:uppercase;letter-spacing:.6px;
}
@keyframes pulse{
  0%{opacity:1;box-shadow:0 0 0 0 rgba(74,222,128,.6)}
  70%{opacity:.6;box-shadow:0 0 0 10px rgba(74,222,128,0)}
  100%{opacity:1;box-shadow:0 0 0 0 rgba(74,222,128,0)}
}
.copyright{
  border-top:1px solid rgba(59,154,225,.15);padding:20px;
  text-align:center;font-size:13px;opacity:.7;letter-spacing:.3px;
}

/* ============================================================
   Admin panel
   ============================================================ */
.admin-body{
  display:grid;grid-template-columns:260px 1fr;min-height:100vh;
  background:var(--bg-alt);margin:0;
}
.admin-sidebar{
  background:linear-gradient(180deg,var(--navy-900),#061530);
  color:#c9d7ea;padding:24px 18px;display:flex;flex-direction:column;gap:20px;
  border-right:1px solid rgba(59,154,225,.12);
}
.admin-brand{
  display:flex;align-items:center;gap:12px;font-weight:800;
  color:var(--white);font-size:16px;letter-spacing:-.2px;
  padding-bottom:16px;border-bottom:1px solid rgba(59,154,225,.18);
}
.admin-brand img{height:36px;width:auto}
.admin-sidebar nav{display:flex;flex-direction:column;gap:4px;flex:1}
.admin-sidebar hr{border:0;border-top:1px solid rgba(59,154,225,.15);margin:10px 0}
.admin-link{
  padding:11px 15px;border-radius:9px;font-size:14px;color:#a9bcd6;
  transition:.18s;font-weight:500;display:flex;align-items:center;
}
.admin-link:hover{background:rgba(59,154,225,.12);color:#fff}
.admin-link.active{
  background:linear-gradient(135deg,var(--navy-600),var(--sky-500));
  color:#fff;font-weight:600;box-shadow:0 4px 14px rgba(59,154,225,.35);
}
.admin-link.danger{color:#fca5a5}
.admin-link.danger:hover{background:rgba(220,38,38,.15);color:#fecaca}

.admin-user{
  display:flex;align-items:center;gap:12px;padding:12px;
  background:rgba(59,154,225,.1);border-radius:11px;
  border:1px solid rgba(59,154,225,.18);
}
.admin-user .avatar{
  width:40px;height:40px;
  background:linear-gradient(135deg,var(--sky-500),var(--navy-600));
  color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:16px;
}
.admin-user .name{font-weight:700;font-size:14px;color:var(--white)}
.admin-user .role{
  font-size:11.5px;opacity:.75;text-transform:uppercase;letter-spacing:.6px;
  color:var(--sky-400);
}

.admin-main{padding:28px 32px;background:var(--bg-alt)}
html[data-theme="dark"] .admin-main{background:var(--bg)}
.admin-topbar{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:26px;flex-wrap:wrap;gap:12px;
}
.admin-topbar h1{
  margin:0;font-size:26px;color:var(--navy-800);letter-spacing:-.4px;
}
html[data-theme="dark"] .admin-topbar h1{color:var(--sky-400)}
.admin-top-actions a{
  color:var(--navy-600);font-weight:600;font-size:13.5px;padding:0 6px;
}
html[data-theme="dark"] .admin-top-actions a{color:var(--sky-400)}

.admin-cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:20px;margin-bottom:26px;
}
.admin-card{
  padding:24px;border-radius:13px;color:#fff;position:relative;overflow:hidden;
  box-shadow:var(--shadow-md);transition:.25s;border:1px solid transparent;
}
.admin-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.admin-card.blue{background:linear-gradient(135deg,var(--navy-700),var(--navy-600))}
.admin-card.green{background:linear-gradient(135deg,#047857,#10b981)}
.admin-card.gold{background:linear-gradient(135deg,#b45309,var(--gold-500))}
.admin-card.red{background:linear-gradient(135deg,#b91c1c,#ef4444)}
.admin-card .num{font-size:34px;font-weight:800;letter-spacing:-1px;line-height:1.1}
.admin-card .lbl{
  opacity:.9;margin-top:6px;font-size:13px;
  text-transform:uppercase;letter-spacing:.7px;font-weight:500;
}
.admin-panel{
  background:var(--bg-card);border-radius:14px;padding:28px;
  box-shadow:var(--shadow-sm);border:1px solid var(--border-soft);
}
.admin-panel h2{margin-top:0;color:var(--navy-800);font-size:20px}
html[data-theme="dark"] .admin-panel h2{color:var(--sky-400)}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:900px){
  .two-col,.director{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .admin-body{grid-template-columns:1fr}
  .admin-sidebar{
    position:fixed;left:-280px;top:0;bottom:0;width:260px;
    transition:.3s;z-index:100;
  }
  .admin-sidebar.open{left:0}
  .director img{margin:0 auto}
}
@media(max-width:640px){
  .main-nav{
    position:absolute;top:100%;left:0;right:0;background:var(--bg-card);
    flex-direction:column;padding:16px;gap:8px;
    border-bottom:1px solid var(--border);display:none;
    box-shadow:var(--shadow-md);
  }
  .main-nav.open{display:flex}
  .hamburger{display:block}
  .footer-grid{grid-template-columns:1fr}
  .header-actions .btn-outline{display:none}
  .hero{min-height:400px;padding:70px 20px}
  .hero h1{font-size:26px}
  .hero p{font-size:16px}
  .container{padding:0 18px}
  .admin-main{padding:20px}
}