/* ═══════════════════════════════════════
   main.css  (v3 mobile-first — logo image version)
═══════════════════════════════════════ */
:root{
  --g1:#0a3d1f;--g2:#1a6b3a;--g3:#2a9d5c;
  --g4:#4ade80;--g5:#bbf7d0;--g6:#f0fdf4;
  --white:#fff;--gray:#64748b;
  --light:#f8fafc;--border:#e2e8f0;--text:#0f172a;
  --shadow:0 4px 24px rgba(10,61,31,.10);
  --shadow-lg:0 12px 48px rgba(10,61,31,.16);
  --radius:16px;--radius-sm:10px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'DM Sans',sans-serif;color:var(--text);min-height:100vh}

/* scrollbars desktop only */
@media(min-width:769px){
  ::-webkit-scrollbar{width:8px;height:8px}
  ::-webkit-scrollbar-track{background:#e8f5e9;border-radius:10px}
  ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--g3),var(--g2));border-radius:10px}
  ::-webkit-scrollbar-corner{background:#e8f5e9}
  *{scrollbar-width:thin;scrollbar-color:var(--g3) #e8f5e9}
}

/* ── LANDING ── */
.landing-body{
  background:linear-gradient(135deg,var(--g1) 0%,var(--g2) 50%,var(--g3) 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100vh;position:relative;overflow-x:hidden;overflow-y:auto;padding:1.5rem 1rem;
}
.landing-grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:60px 60px;}
.landing-content{position:relative;z-index:2;text-align:center;width:100%;max-width:700px}

/* ── LOGO IMAGE — landing page ── */
.brand-logo{display:inline-flex;align-items:center;justify-content:center;gap:12px;margin-bottom:.8rem}
.brand-logo-img img{
  height:72px;
  width:auto;
  object-fit:contain;
  display:block;
}

.brand-tagline{color:var(--g5);font-size:.86rem;font-weight:300;letter-spacing:2px;text-transform:uppercase;margin-bottom:2rem}
.login-cards{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-bottom:1.2rem}
.login-card{
  background:rgba(255,255,255,.08);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.15);border-radius:var(--radius);
  padding:1.8rem 2rem;cursor:pointer;
  transition:all .25s ease;text-align:center;
  flex:1;min-width:130px;max-width:220px;
  -webkit-tap-highlight-color:transparent;
}
.login-card:active{background:rgba(255,255,255,.2);transform:scale(.97)}
.login-card-icon{font-size:2.4rem;margin-bottom:.6rem}
.login-card-title{color:var(--white);font-size:1.05rem;font-weight:600;margin-bottom:.25rem}
.login-card-sub{color:var(--g5);font-size:.76rem}
.login-box{
  background:var(--white);border-radius:20px;padding:1.8rem 1.6rem;
  width:100%;max-width:420px;margin:0 auto 1rem;
  box-shadow:var(--shadow-lg);
  animation:popIn .3s cubic-bezier(.34,1.56,.64,1);
}
.login-box h2{font-family:'Playfair Display',serif;font-style:italic;color:var(--g1);font-size:1.45rem;margin-bottom:1.2rem}
.form-err{background:#fef2f2;color:#dc2626;border-radius:8px;padding:.6rem 1rem;font-size:.82rem;margin-bottom:.9rem}
.flash-error{background:rgba(220,38,38,.15);color:#fff;border:1px solid rgba(220,38,38,.3);border-radius:10px;padding:.7rem 1rem;margin-bottom:1.2rem;font-size:.86rem}
.btn-text{background:none;border:none;color:var(--gray);cursor:pointer;font-size:.85rem;margin-top:.6rem;display:block;width:100%;text-align:center;padding:.5rem;-webkit-tap-highlight-color:transparent}
.btn-text:hover{color:var(--g2)}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:.8rem 1.5rem;border-radius:var(--radius-sm);
  font-family:'DM Sans',sans-serif;font-size:.9rem;font-weight:600;
  cursor:pointer;border:none;transition:all .2s;text-decoration:none;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  min-height:44px;
}
.btn-primary{background:linear-gradient(135deg,var(--g2),var(--g3));color:white;width:100%}
.btn-primary:active{filter:brightness(1.1)}
.btn-secondary{background:var(--g6);color:var(--g2);border:1.5px solid var(--g5)}
.btn-secondary:active{background:var(--g5)}
.btn-danger{background:#fef2f2;color:#dc2626;border:1.5px solid #fee2e2}
.btn-danger:active{background:#fee2e2}
.btn-info{background:#eff6ff;color:#1d4ed8;border:1.5px solid #bfdbfe}
.btn-info:active{background:#dbeafe}
.btn-sm{padding:.44rem .9rem;font-size:.78rem;border-radius:7px;min-height:36px}

/* ── FORMS ── */
.form-group{margin-bottom:1rem}
.form-group label{display:block;font-size:.82rem;font-weight:600;color:var(--g1);margin-bottom:.32rem}
.form-group input,
.form-group select,
.form-group textarea{
  width:100%;padding:.82rem 1rem;
  border:1.5px solid var(--border);border-radius:var(--radius-sm);
  font-family:'DM Sans',sans-serif;
  font-size:16px;
  transition:border-color .2s,box-shadow .2s;outline:none;background:var(--light);
  -webkit-appearance:none;appearance:none;
}
.form-group input:focus,.form-group select:focus{border-color:var(--g3);box-shadow:0 0 0 3px rgba(42,157,92,.12);background:var(--white)}
.form-group select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}

/* ── MISC ── */
.subject-tag{display:inline-block;background:var(--g5);color:var(--g1);padding:3px 10px;border-radius:6px;font-size:.75rem;font-weight:600;margin:2px}
code{background:var(--g6);padding:2px 7px;border-radius:5px;font-size:.8rem;font-weight:600;color:var(--g1)}
.pct{font-weight:700}
.pct-high{color:#16a34a}.pct-mid{color:#d97706}.pct-low{color:#dc2626}
.divider{height:1px;background:var(--border);margin:1.2rem 0}
.empty-cell{text-align:center;color:var(--gray);padding:2rem!important;font-size:.88rem}

@keyframes popIn{from{opacity:0;transform:scale(.88) translateY(16px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* ── LOGO IMAGE — sidebar (desktop + mobile topbar) ── */
.sidebar-logo-img{
  height:44px;
  width:auto;
  max-width:160px;
  object-fit:contain;
  display:block;
  margin-bottom:.4rem;
}
.topbar-logo-img{
  height:32px;
  width:auto;
  max-width:140px;
  object-fit:contain;
  display:block;
}

/* ── MOBILE ── */
@media(max-width:480px){
  .brand-logo-img img{height:56px}
  .sidebar-logo-img{height:38px}
  .topbar-logo-img{height:28px}
  .login-card{padding:1.3rem 1.4rem}
  .login-box{padding:1.4rem 1rem;border-radius:14px}
}

/* ── DEMO CREDENTIALS BADGE (small, subtle) ── */
.landing-hint{color:rgba(255,255,255,.45);font-size:.72rem;margin-top:.5rem}
.demo-badge{
  display:inline-block;
  background:rgba(74,222,128,.12);
  color:rgba(255,255,255,.75);
  border:1px solid rgba(74,222,128,.2);
  border-radius:5px;
  padding:1px 7px;
  font-size:.7rem;
  font-family:'DM Sans',sans-serif;
  letter-spacing:.2px;
}

/* ── STUDENT HISTORY FILTER GRID ── */
.stu-filter-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:.7rem;
}
.stu-filter-grid .form-group{margin-bottom:0}
@media(max-width:768px){
  .stu-filter-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:420px){
  .stu-filter-grid{grid-template-columns:1fr}
}

/* ══════════════════════════════════
   LANDING PAGE FOOTER
══════════════════════════════════ */
.landing-footer {
  position:relative;z-index:2;
  width:100%;max-width:700px;
  margin-top:2.5rem;
  padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.12);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.4rem;
  text-align:left;
}
.lf-col { }
.lf-heading {
  font-size:.72rem;font-weight:700;
  color:var(--g4);
  letter-spacing:1px;text-transform:uppercase;
  margin-bottom:.6rem;
}
.lf-line {
  font-size:.74rem;color:rgba(255,255,255,.5);
  line-height:1.8;
}
.lf-line a {
  color:rgba(255,255,255,.6);text-decoration:none;
  transition:color .18s;
}
.lf-line a:hover { color:var(--g4) }
.lf-about {
  font-size:.7rem;color:rgba(255,255,255,.35);
  margin-top:.5rem;line-height:1.7;
}
.lf-bottom {
  position:relative;z-index:2;
  width:100%;max-width:700px;
  text-align:center;
  font-size:.68rem;
  color:rgba(255,255,255,.25);
  margin-top:1.2rem;
  padding-top:.8rem;
  border-top:1px solid rgba(255,255,255,.07);
  padding-bottom:1rem;
}

@media(max-width:600px){
  .landing-footer {
    grid-template-columns:1fr 1fr;
    gap:1.2rem;
  }
  .lf-col:last-child {
    grid-column:1/-1;
    border-top:1px solid rgba(255,255,255,.08);
    padding-top:1rem;
  }
}
@media(max-width:380px){
  .landing-footer { grid-template-columns:1fr }
  .lf-col:last-child { grid-column:1 }
}

/* ══════════════════════════════════════════
   BANNER SLIDER
   Full-width horizontal strip at top of page
   Each slide shows one banner image at a time
   with a smooth crossfade transition
══════════════════════════════════════════ */
/* ══════════════════════════════════════════
   BANNER SLIDER — sleek thin strip with glow
══════════════════════════════════════════ */
.banner-strip {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 64px;
  overflow: hidden;
  z-index: 50;
  background: #000;
  box-shadow: 0 1px 0 rgba(74,222,128,.25),
              0 2px 20px rgba(0,0,0,.5);
}

/* Thin green glow line at bottom of banner */
.banner-strip::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(74,222,128,.7) 30%,
    rgba(74,222,128,1) 50%,
    rgba(74,222,128,.7) 70%,
    transparent 100%);
  z-index: 6;
}

.banner-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.banner-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .8s ease-in-out;
  pointer-events: none;
}

.banner-slide.active {
  opacity: 1;
  pointer-events: auto;
}

.banner-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  filter: brightness(.85) contrast(1.05);
}

/* Subtle dark vignette on sides */
.banner-track::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(0,0,0,.35) 0%,
    transparent 15%,
    transparent 85%,
    rgba(0,0,0,.35) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Banner dots — tiny, low profile */
.banner-dots {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 5;
}

.banner-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .3s, transform .3s;
  -webkit-tap-highlight-color: transparent;
}

.banner-dot.active {
  background: rgba(74,222,128,.9);
  transform: scale(1.4);
}

/* Banner arrows — minimal */
.banner-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-60%);
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.8);
  font-size: 1.1rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: background .2s, border-color .2s;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
}

.banner-arrow:hover {
  background: rgba(74,222,128,.3);
  border-color: rgba(74,222,128,.6);
}
.banner-prev { left: 8px }
.banner-next { right: 8px }

/* Push landing content below the banner */
.landing-body {
  padding-top: 74px;
}

@media(max-width:600px){
  .banner-strip  { height: 52px }
  .landing-body  { padding-top: 62px }
  .banner-arrow  { width:18px; height:18px; font-size:.9rem }
  .banner-dot    { width:4px; height:4px }
}

/* ══════════════════════════════════════════
   TEAM SLIDESHOW — bigger card with full info
══════════════════════════════════════════ */
.team-section {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 460px;
  margin: 2.2rem auto 0;
}

.team-heading {
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  color: var(--g4);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}

.team-carousel {
  position: relative;
  width: 100%;
  min-height: 380px;
}

.team-track {
  position: relative;
  width: 100%;
  min-height: 360px;
}

/* Each team slide */
.team-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(20px) scale(.97);
  transition: opacity .55s ease, transform .55s ease;
  pointer-events: none;
}

.team-slide.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  position: relative;
}

.team-slide.exit {
  opacity: 0;
  transform: translateY(-20px) scale(.97);
  position: absolute;
  top: 0; left: 0; right: 0;
}

/* Photo — larger circle */
.team-photo-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(74,222,128,.55);
  box-shadow: 0 0 0 6px rgba(74,222,128,.08),
              0 12px 36px rgba(0,0,0,.4);
  margin-bottom: 1.1rem;
  background: rgba(255,255,255,.06);
  flex-shrink: 0;
}

.team-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.team-photo-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.05);
}

.team-photo-wrap img[src]:not([src=""]) + .team-photo-placeholder {
  display: none;
}

/* Info card below photo */
.team-info-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(74,222,128,.18);
  border-radius: 14px;
  padding: 1.1rem 1.6rem 1rem;
  width: 100%;
  text-align: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.team-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: .22rem;
  letter-spacing: .2px;
}

.team-designation {
  font-size: .78rem;
  font-weight: 600;
  color: var(--g4);
  margin-bottom: .18rem;
  letter-spacing: .3px;
}

.team-subject {
  font-size: .76rem;
  color: rgba(187,247,208,.75);
  margin-bottom: .15rem;
}

.team-qualification {
  font-size: .72rem;
  color: rgba(255,255,255,.4);
  font-style: italic;
  margin-top: .1rem;
}

/* Divider line inside card */
.team-divider {
  width: 36px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(74,222,128,.6), transparent);
  margin: .5rem auto .55rem;
}

/* Team dots */
.team-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 1.2rem;
}

.team-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .3s, transform .3s;
  -webkit-tap-highlight-color: transparent;
}

.team-dot.active {
  background: var(--g4);
  transform: scale(1.35);
}

/* Team arrows */
.team-arrow {
  position: absolute;
  top: 70px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.7);
  font-size: 1.3rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, border-color .2s;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
}

.team-arrow:hover {
  background: rgba(74,222,128,.2);
  border-color: rgba(74,222,128,.5);
}
.team-prev { left: -16px }
.team-next { right: -16px }

@media(max-width:520px){
  .team-section    { max-width: 320px }
  .team-photo-wrap { width: 130px; height: 130px }
  .team-info-card  { padding: .9rem 1.1rem .8rem }
  .team-name       { font-size: .95rem }
  .team-prev       { left: -8px }
  .team-next       { right: -8px }
  .team-carousel   { min-height: 340px }
  .team-track      { min-height: 320px }
}