/* ===========================================================
   Al-Huda School — Modern Front-end Stylesheet
   =========================================================== */
:root{
  --primary: #146356;      /* deep teal-green */
  --primary-dark: #0d4a40;
  --accent: #e0a13a;       /* warm gold accent */
  --site-name-size: 1.25rem;
  --ink: #16241f;
  --muted: #5c6c66;
  --bg: #f6f8f7;
  --card: #ffffff;
  --border: #e6ebe8;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(20,99,86,.10);
  --shadow-sm: 0 2px 10px rgba(20,99,86,.08);
  font-size: 16px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.65;
}
h1,h2,h3,h4{font-family:'Georgia', 'Times New Roman', serif; line-height:1.2; margin:0 0 .5em; color:var(--primary-dark);}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.container{max-width:1180px; margin:0 auto; padding:0 24px;}
.section{padding:72px 0;}
.section-alt{background:#eef4f1;}
.eyebrow{color:var(--accent); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:.78rem;}
.muted{color:var(--muted);}
.center{text-align:center;}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:999px;
  font-weight:600; font-size:.95rem; border:2px solid transparent; cursor:pointer; transition:.2s;
}
.btn-primary{background:var(--primary); color:#fff;}
.btn-primary:hover{background:var(--primary-dark); transform:translateY(-2px);}
.btn-outline{border-color:var(--primary); color:var(--primary); background:transparent;}
.btn-outline:hover{background:var(--primary); color:#fff;}
.btn-gold{background:var(--accent); color:#1c1508;}
.btn-gold:hover{filter:brightness(1.07); transform:translateY(-2px);}
.btn-sm{padding:8px 16px; font-size:.82rem; border-radius:8px;}
.btn-xs{padding:4px 10px; font-size:.72rem; border-radius:6px;}
.btn-danger{background:#c0392b;color:#fff;border-color:#c0392b;}

/* Header */

/* Flash message ticker */
.flash-bar{background:var(--accent); color:#1c1508; overflow:hidden; white-space:nowrap; position:relative; padding:9px 0;}
.flash-bar-dash{margin:-28px -28px 24px; border-radius:0;}
@media(max-width:900px){ .flash-bar-dash{margin:-16px -14px 20px;} }
.flash-bar .flash-track{display:inline-block; padding-left:100%; animation:flash-scroll 28s linear infinite;}
.flash-bar .flash-track:hover{animation-play-state:paused;}
.flash-bar .flash-track span, .flash-bar .flash-track a{margin-right:56px; font-weight:700; font-size:.85rem; color:#1c1508;}
@keyframes flash-scroll{
  0%{transform:translateX(0);}
  100%{transform:translateX(-100%);}
}

header.site-header{
  background:rgba(255,255,255,.98);
  position:sticky; top:0; z-index:50; border-bottom:1px solid var(--border);
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; padding:14px 32px; gap:20px; width:100%; box-sizing:border-box;}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; font-size:var(--site-name-size); color:var(--primary-dark); min-width:0; flex:1;}
/* Public header, desktop: the brand (logo + school name) keeps its own space; the menu gets the rest and scrolls (see .nav-scroller). */
.nav-wrap > .brand{flex:0 1 auto; min-width:min(260px, 100%); max-width:42%;}
.brand img{height:var(--logo-size,44px); width:var(--logo-size,44px); border-radius:10px; object-fit:cover; flex-shrink:0;}
.brand span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.brand small{display:block; font-weight:400; font-size:var(--tagline-size); color:var(--muted); letter-spacing:.05em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.nav-stack{display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex:1 1 0; min-width:0;}
.social-row-desktop{display:flex; align-items:center; gap:10px;}
.social-row-mobile{display:none;}
.social-icon-btn{width:32px; height:32px; border-radius:50%; background:#eef4f1; display:flex; align-items:center; justify-content:center; color:var(--primary-dark); font-weight:700; font-size:.85rem;}
.social-icon-btn:hover{background:var(--primary); color:#fff;}
.social-icon-btn.whatsapp-icon{background:#25D366; color:#fff;}
.social-icon-btn.whatsapp-icon:hover{background:#1ebe57;}

nav.main-nav{width:100%; min-width:0;}
.nav-scroller{position:relative; display:flex; max-width:100%; min-width:0; margin-left:auto;}
.nav-scroll{position:relative; flex:0 1 auto; min-width:0; overflow-x:auto; overflow-y:hidden; padding:6px 4px; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none;}
.nav-scroll::-webkit-scrollbar{display:none;}
/* ‹ › buttons float over the edges of the menu (they take no layout space) and only show when there is more to scroll to. */
.nav-arrow{display:none; position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:32px; height:32px; padding:0; border-radius:50%; border:1px solid var(--border); background:#fff; color:var(--primary-dark); font-size:1.3rem; line-height:1; cursor:pointer; align-items:center; justify-content:center; box-shadow:0 0 10px 8px rgba(255,255,255,.95);}
.nav-arrow:hover{background:var(--primary); color:#fff; border-color:var(--primary);}
.nav-arrow-left{left:0;}
.nav-arrow-right{right:0;}
.nav-scroller.can-left .nav-arrow-left, .nav-scroller.can-right .nav-arrow-right{display:flex;}
nav.main-nav ul{list-style:none; display:flex; gap:6px; margin:0; padding:0;}
nav.main-nav a{display:block; padding:10px 16px; border-radius:999px; font-weight:600; font-size:.93rem; color:var(--ink); white-space:nowrap;}
nav.main-nav a:focus-visible{outline:2px solid var(--primary); outline-offset:-2px;}
nav.main-nav a:hover, nav.main-nav a.active{background:var(--primary); color:#fff;}
nav.main-nav a.nav-highlight{background:var(--accent); color:#1c1508; font-weight:800;}
nav.main-nav a.nav-highlight:hover{background:var(--accent); filter:brightness(1.08); color:#1c1508;}
.menu-toggle{display:none; background:none; border:none; font-size:1.6rem; cursor:pointer; color:var(--primary-dark); flex-shrink:0; min-width:44px; min-height:44px;}
.mobile-nav-header{display:none;}
.nav-close{background:none; border:none; font-size:1.8rem; cursor:pointer; color:var(--primary-dark); min-width:44px; min-height:44px;}

@media(max-width:1080px){
  nav.main-nav ul{gap:2px;}
  nav.main-nav a{padding:9px 12px; font-size:.87rem;}
}

@media(max-width:900px){
  .nav-wrap > .brand{flex:1; min-width:0; max-width:none;}
  .nav-stack{flex:0 0 auto; flex-direction:row; align-items:center;}
  nav.main-nav{width:min(300px, 78vw);}
  .nav-scroller{display:block; position:static; margin-left:0;}
  .nav-scroll{overflow:visible; padding:0;}
  .nav-arrow, .nav-scroller.can-left .nav-arrow-left, .nav-scroller.can-right .nav-arrow-right{display:none;}
  .social-row-desktop{display:none;}
  nav.main-nav{position:fixed; top:0; right:0; left:auto; bottom:0; width:min(300px, 78vw); background:#fff; transform:translateX(100%); transition:.25s; z-index:200; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; box-shadow:-12px 0 30px rgba(0,0,0,.25);}
  nav.main-nav.open{transform:translateX(0);}
  .nav-overlay{display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:150;}
  .nav-overlay.open{display:block;}
  .social-row-mobile{display:flex; flex-wrap:wrap; gap:10px; padding:0 20px 16px;}
  nav.main-nav ul{flex-direction:column; padding:8px 20px 24px;}
  nav.main-nav a{display:block; padding:14px 16px; white-space:normal;}
  .menu-toggle{display:block;}
  .mobile-nav-header{display:flex; justify-content:flex-end; padding:14px 16px 0;}
}

@media(max-width:480px){
  .nav-wrap{padding:10px 14px;}
  .brand{font-size:1rem !important; gap:8px; max-width:calc(100% - 60px);}
  .brand img{height:34px; width:34px;}
  .brand small{font-size:.6rem;}
}

/* Hero */
.hero{
  position:relative; color:#fff; padding:100px 0; overflow:hidden;
  background-color:var(--primary-dark); background-size:cover; background-position:center; background-repeat:no-repeat;
  min-height:var(--hero-height,78vh); display:flex; align-items:center;
}
.hero::before{
  content:""; position:absolute; inset:0; background:rgba(13,74,64,var(--hero-overlay,.45)); pointer-events:none; z-index:1;
}
.hero::after{
  content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% 20%,rgba(224,161,58,.30),transparent 55%); pointer-events:none; z-index:1;
}
.hero-inner{position:relative; z-index:2; width:100%; box-sizing:border-box; padding:0 48px; display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:start;}
.hero-inner.hero-no-news{grid-template-columns:1fr;}
.hero h1{color:var(--hero-text, #fff); font-size:clamp(2rem, 4vw, 3.2rem); text-align:left;}
.hero p{font-size:1.15rem; color:var(--hero-text, #e2f1ec); opacity:.92; max-width:560px; text-align:left;}
.hero-actions{display:flex; gap:14px; margin-top:28px; flex-wrap:wrap;}
.hero .btn-outline{color:var(--hero-text,#fff); border-color:var(--hero-text,#fff);}
.hero .btn-outline:hover{background:var(--hero-text,#fff); color:var(--primary-dark);}
@media(max-width:900px){.hero-inner{grid-template-columns:1fr; padding:0 24px;} .hero{min-height:60vh; padding:70px 0;}}

/* Event registration hero buttons — sizes layered on top of .btn-gold */
.event-btn-sm{padding:10px 20px !important; font-size:.85rem !important;}
.event-btn-md{padding:14px 28px !important; font-size:1rem !important;}
.event-btn-lg{padding:18px 36px !important; font-size:1.2rem !important; font-weight:800 !important;}
.event-btn-xl{padding:22px 44px !important; font-size:1.4rem !important; font-weight:800 !important;}
.event-btn-closed{opacity:.6; cursor:pointer;}

/* Event registration side panel */
.event-side-panel{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:24px; box-shadow:var(--shadow-sm); position:sticky; top:90px;}
.event-side-panel h3{margin-bottom:16px; color:var(--primary-dark);}
.event-side-panel-img{width:100%; border-radius:12px; margin-bottom:14px; box-shadow:var(--shadow-sm);}
.event-side-panel-img:last-child{margin-bottom:0;}
@media(max-width:900px){.event-side-panel{position:static;}}

/* Hero "News & Updates" side panel */
.hero-news{background:rgba(255,255,255,.97); border-radius:18px; padding:22px; box-shadow:var(--shadow); color:var(--ink); max-height:420px; overflow-y:auto;}
.hero-news h3{margin-bottom:14px; font-size:1.05rem; color:var(--primary-dark);}
.hero-news-item{border-bottom:1px solid var(--border); padding:12px 0;}
.hero-news-item:first-of-type{padding-top:0;}
.hero-news-item:last-child{border-bottom:none; padding-bottom:0;}
.hero-news-item strong{display:block; font-size:.92rem; margin-bottom:4px; color:var(--ink);}
.hero-news-item p{font-size:.85rem; color:var(--muted); margin:0 0 8px; max-width:none; opacity:1;}
.hero-news-meta{display:flex; justify-content:space-between; align-items:center; font-size:.75rem; color:var(--muted);}
.hero-news-empty{color:var(--muted); font-size:.88rem;}

/* Stats strip */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:-56px; position:relative; z-index:5;}
.stat-card{background:var(--card); border-radius:var(--radius); padding:26px 20px; text-align:center; box-shadow:var(--shadow);}
.stat-card .num{font-size:2rem; font-weight:800; color:var(--primary);}
.stat-card .label{color:var(--muted); font-size:.85rem;}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr);}}

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

.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; border:1px solid var(--border); transition:.2s;}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.card .card-body{padding:22px;}
.card img{height:190px; width:100%; object-fit:cover;}
.pill{display:inline-block; background:#eef4f1; color:var(--primary-dark); padding:4px 12px; border-radius:999px; font-size:.75rem; font-weight:700;}

/* Section headings */
.section-head{max-width:640px; margin:0 auto 44px; text-align:center;}

/* Gallery */
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.gallery-grid figure{margin:0; border-radius:12px; overflow:hidden; position:relative; aspect-ratio:1/1;}
.gallery-grid img{width:100%; height:100%; object-fit:cover; transition:.3s;}
.gallery-grid figure:hover img{transform:scale(1.08);}
.gallery-grid figcaption{position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent,rgba(0,0,0,.65)); color:#fff; padding:10px 12px; font-size:.8rem; font-weight:600;}
@media(max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}

/* Forms */
.form-card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:32px; border:1px solid var(--border);}
label{display:block; font-weight:600; margin-bottom:6px; font-size:.88rem;}
input, select, textarea{
  width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:10px; font-size:.95rem; margin-bottom:18px; font-family:inherit; background:#fbfcfb;
}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--primary); background:#fff;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media(max-width:640px){.form-row{grid-template-columns:1fr;}}

.password-field-wrap{position:relative; margin-bottom:18px;}
.password-field-wrap input{margin-bottom:0; padding-right:44px;}
.password-toggle-btn{position:absolute; top:0; bottom:0; right:2px; width:38px; background:none; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#8a9994; border-radius:8px;}
.password-toggle-btn:hover{color:var(--primary);}
.password-toggle-btn svg{width:20px; height:20px;}

.alert{padding:14px 18px; border-radius:10px; margin-bottom:20px; font-size:.9rem;}
.alert-success{background:#e5f6ec; color:#146c3d; border:1px solid #bfe8cf;}
.alert-error{background:#fdecec; color:#a52a24; border:1px solid #f4c6c2;}

/* Footer */
footer.site-footer{background:var(--primary-dark); color:#cfe6df; padding:60px 0 20px; margin-top:60px;}
footer .grid-4{margin-bottom:36px;}
footer h4{color:#fff; font-family:inherit; font-size:1rem;}
footer a{color:#cfe6df; opacity:.85;}
footer a:hover{opacity:1; text-decoration:underline;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15); padding-top:18px; text-align:center; font-size:.82rem; color:#a9c9c0;}
.social-icons{display:flex; gap:12px; margin-top:10px;}
.social-icons a{width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center;}

/* Admin & Student dashboards */
.dash-body{background:#f2f5f4; min-height:100vh;}
.dash-shell{display:flex; min-height:100vh;}
.sidebar{width:260px; background:var(--primary-dark); color:#dff0ea; flex-shrink:0; padding:0; overflow-y:auto; max-height:100vh; position:sticky; top:0;}
.sidebar .brand{color:#fff; padding:20px 22px; border-bottom:1px solid rgba(255,255,255,.12); margin-bottom:8px; font-weight:700; font-size:.95rem; line-height:1.4;}
/* Flat sidebar items (Dashboard, Gallery, Leaderboard etc.) */
.sidebar-item{display:block; padding:11px 22px; color:#cde7dd; font-weight:600; font-size:.88rem; border-left:3px solid transparent; transition:.15s;}
.sidebar-item:hover, .sidebar-item.active{background:rgba(255,255,255,.1); color:#fff; border-left-color:var(--accent);}
.sidebar-item.nav-highlight{background:var(--accent); color:#1c1508; border-left-color:var(--accent);}
.sidebar-item.nav-highlight:hover{filter:brightness(1.08); color:#1c1508;}
/* Accordion group */
.sidebar-group{border-bottom:none;}
.sidebar-group-btn{width:100%; background:none; border:none; border-left:3px solid transparent; padding:11px 22px; color:#cde7dd; font-weight:700; font-size:.88rem; display:flex; justify-content:space-between; align-items:center; cursor:pointer; transition:.15s; text-align:left;}
.sidebar-group-btn:hover{background:rgba(255,255,255,.08); color:#fff;}
.sidebar-group.open .sidebar-group-btn{background:rgba(255,255,255,.1); color:#fff; border-left-color:var(--accent);}
.sidebar-chevron{transition:transform .25s; font-size:1rem; opacity:.7;}
.sidebar-group.open .sidebar-chevron{transform:rotate(90deg);}
.sidebar-group-body{max-height:0; overflow:hidden; transition:max-height .3s ease; background:rgba(0,0,0,.18);}
.sidebar-group.open .sidebar-group-body{max-height:600px;}
.sidebar-group-body .sidebar-item{padding-left:34px; font-size:.84rem; font-weight:500; border-left:none; border-left:3px solid transparent;}
.sidebar-group-body .sidebar-item:hover, .sidebar-group-body .sidebar-item.active{background:rgba(255,255,255,.1); color:#fff; border-left-color:var(--accent);}
.main-panel{flex:1; padding:28px; max-width:calc(100% - 260px); overflow-x:auto;}
.topbar-dash{display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;}
.panel{background:#fff; border-radius:14px; padding:24px; box-shadow:var(--shadow-sm); border:1px solid var(--border); margin-bottom:24px;}

/* Student/teacher dashboard profile header: avatar + name, a row of rounded
   "pill" badges for class/admission/roll/teacher, and today's + this month's
   attendance as frosted stat chips — all in one gradient card. */
.dash-profile-card{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap; padding:26px 30px; border:none; border-radius:20px;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  box-shadow:var(--shadow);
}
.dash-profile-main{display:flex; align-items:center; gap:18px; flex:1; min-width:260px;}
.dash-profile-avatar{width:112px; height:112px; border-radius:50%; object-fit:cover; border:3px solid rgba(255,255,255,.85); box-shadow:0 4px 14px rgba(0,0,0,.15); flex-shrink:0;}
.dash-profile-avatar-fallback{width:112px; height:112px; border-radius:50%; background:rgba(255,255,255,.18); border:3px solid rgba(255,255,255,.55); color:#fff; display:flex; align-items:center; justify-content:center; font-size:2.4rem; font-weight:700; flex-shrink:0; font-family:'Georgia','Times New Roman',serif;}
.dash-profile-name h2{margin:0 0 10px; color:#fff; font-size:1.35rem;}
.dash-profile-pills{display:flex; gap:8px; flex-wrap:wrap;}
.dash-pill{display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.16); color:#fff; padding:6px 14px; border-radius:999px; font-size:.78rem; font-weight:600; white-space:normal; word-break:break-word; max-width:100%;}
.dash-profile-edit-btn{position:absolute; top:18px; right:18px; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.18); color:#fff; display:flex; align-items:center; justify-content:center; text-decoration:none; font-size:1rem; transition:.2s;}
.dash-profile-edit-btn:hover{background:rgba(255,255,255,.32); transform:scale(1.06); color:#fff;}
.dash-side-groups{display:flex; flex-direction:column; gap:10px;}
.dash-attendance-group{display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); border-radius:22px; padding:10px 16px 10px 18px;}
.dash-attendance-group-link{text-decoration:none; transition:background .2s;}
.dash-attendance-group-link:hover{background:rgba(255,255,255,.15);}
.dash-attendance-group-arrow{opacity:.75; font-weight:800;}
.dash-attendance-group-label{font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.85); white-space:nowrap;}
.dash-attendance-stats{display:flex; gap:10px; flex-wrap:wrap;}
.dash-attendance-stat{text-align:center; background:rgba(255,255,255,.14); border-radius:12px; padding:11px 20px; min-width:104px;}
.dash-attendance-stat .label{font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.75);}
.dash-attendance-stat .value{font-weight:800; margin-top:4px; color:#fff; white-space:nowrap; font-size:.95rem;}
/* The "middle" pill of an attendance group (the P / A / L counts) is a little wider and taller than its neighbours. */
.dash-attendance-stat.dash-stat-main{min-width:176px; padding:14px 24px; background:rgba(255,255,255,.2);}
.dash-attendance-stat.dash-stat-main .value{font-size:1.08rem;}
/* An inner pill that is its own link (teacher dashboard: the Leave Requests pill). */
a.dash-attendance-stat{display:block; text-decoration:none; color:inherit; transition:background .2s;}
a.dash-attendance-stat:hover{background:rgba(255,255,255,.26);}
a.dash-attendance-stat:focus-visible{outline:3px solid #fff; outline-offset:2px;}
/* Something is waiting for the teacher: amber ring + soft glow until it has been dealt with. */
.dash-attendance-stat.dash-stat-alert{background:rgba(232,168,56,.35); box-shadow:0 0 0 2px #f5c451, 0 0 14px rgba(245,196,81,.55);}
.dash-attendance-stat.dash-stat-alert .value{color:#fff3c4;}
@media(max-width:640px){
  .dash-profile-card{flex-direction:column; align-items:stretch; padding:22px 18px 20px; border-radius:16px; gap:18px;}
  .dash-profile-edit-btn{top:14px; right:14px; width:34px; height:34px; font-size:.9rem;}
  .dash-profile-avatar, .dash-profile-avatar-fallback{width:84px; height:84px; font-size:1.8rem;}
  .dash-profile-name h2{font-size:1.1rem;}
  .dash-profile-pills{display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%;}
  .dash-pill{justify-content:center; text-align:center; white-space:normal; padding:12px 10px; font-size:.85rem; line-height:1.25;}
  .dash-side-groups{width:100%;}
  .dash-attendance-group{width:100%; border-radius:16px; justify-content:center;}
  .dash-attendance-stats{width:100%;}
  .dash-attendance-stat{flex:1; padding:10px 6px; min-width:0;}
  .dash-attendance-stat.dash-stat-main{flex:1.5; min-width:0; padding:12px 6px;}
  .dash-attendance-stat .value{white-space:normal;}
}
@media(max-width:420px){
  .dash-profile-main{flex-direction:column; text-align:center;}
}
.dash-quick-actions{display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; margin:18px 0 24px;}
@media(max-width:640px){
  .dash-quick-actions{justify-content:stretch;}
  .dash-quick-actions .btn{flex:1; text-align:center;}
}


table{display:block; overflow-x:auto; max-width:100%; width:100%; border-collapse:collapse; font-size:.9rem;}
table th, table td{padding:12px 10px; border-bottom:1px solid var(--border); text-align:left;}
table th{color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.04em;}
/* Click-and-drag horizontal scrolling on desktop — see assets/js/drag-scroll.js.
   table-h-scrollable is added by that script only to tables that actually
   overflow, so the grab cursor never shows up on a table that fits. */
table.table-h-scrollable{cursor:grab;}
table.table-h-scrollable.table-dragging{cursor:grabbing; user-select:none;}
table.table-h-scrollable.table-dragging *{cursor:grabbing!important;}
.col-email{max-width:150px; word-break:break-word;}
.badge{padding:3px 10px; border-radius:999px; font-size:.72rem; font-weight:700;}
.badge-green{background:#e5f6ec; color:#146c3d;}
.badge-yellow{background:#fff6df; color:#8a6a10;}
.badge-red{background:#fdecec; color:#a52a24;}
.badge-orange{background:#fef1e2; color:#a8590c;}

.feedback-fab{position:fixed; right:24px; bottom:24px; z-index:900; display:flex; align-items:center; gap:8px; background:var(--primary); color:#fff; text-decoration:none; padding:14px 20px; border-radius:999px; font-weight:700; font-size:.88rem; box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .15s ease;}
.feedback-fab:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.18); color:#fff;}
.feedback-fab-icon{flex-shrink:0;}
@media (max-width:640px){
  .feedback-fab{right:16px; bottom:16px; padding:14px; width:52px; height:52px; justify-content:center;}
  .feedback-fab span{display:none;}
}
.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:24px;}
@media(max-width:1000px){
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
  .dash-shell{flex-direction:column;}
  /* Sidebar hides off-screen on mobile, slides in as overlay when toggled */
  .sidebar{
    position:fixed; top:0; left:-280px; height:100vh; width:260px;
    z-index:300; transition:left .3s ease; overflow-y:auto;
    max-height:100vh; box-shadow:4px 0 20px rgba(0,0,0,.3);
  }
  .sidebar.mobile-open{left:0;}
  #sidebarClose{display:block !important;}
  .main-panel{max-width:100%; padding:16px 14px; margin-top:52px;}
  /* Mobile top bar */
  .mobile-topbar{display:flex; align-items:center; justify-content:space-between; background:var(--primary-dark); color:#fff; padding:0 16px; height:52px; position:fixed; top:0; left:0; right:0; z-index:200;}
  /* Overlay behind open sidebar */
  .sidebar-overlay{display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:299;}
}
@media(min-width:1001px){
  .mobile-topbar{display:none;}
  .sidebar-overlay{display:none !important;}
}
.kpi{background:#fff; border-radius:14px; padding:20px; box-shadow:var(--shadow-sm); border:1px solid var(--border);}
@media(max-width:1000px){
  #notifBellWrap{top:62px !important; right:14px !important;}
}
.kpi-link{display:block; color:inherit; text-decoration:none; transition:.2s; cursor:pointer;}
.kpi-link:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--primary); background:#f4faf8;}
.kpi-alert{border-color:#e8a838; background:#fffbf0;}
.kpi-alert:hover{border-color:#c98a1a; background:#fff8e0;}
.kpi-alert-red{border-color:#d9483f; background:#fdf0ef;}
.kpi-alert-red:hover{border-color:#b5362e; background:#fbe4e2;}
.kpi-alert-red .num{color:#b5362e;}
.kpi .num{font-size:1.7rem; font-weight:800; color:var(--primary);}

/* Compact variant — for pages like the main admin dashboard with many cards,
   where the regular .kpi size makes the page too long. Smaller padding/type,
   more columns per row, so more cards fit without excessive scrolling. */
.kpi-grid-compact{grid-template-columns:repeat(5,1fr); gap:14px;}
.kpi-compact{padding:15px 17px;}
.kpi-compact .num{font-size:1.45rem;}
.kpi-compact .muted{font-size:.8rem;}
@media(max-width:1100px){
  .kpi-grid-compact{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:640px){
  .kpi-grid-compact{grid-template-columns:repeat(2,1fr);}
}
.tabs{display:flex; gap:6px; margin-bottom:20px; flex-wrap:wrap;}
.tabs a{padding:9px 16px; border-radius:8px; font-weight:600; font-size:.85rem; background:#eef4f1; color:var(--primary-dark);}
.tabs a.active{background:var(--primary); color:#fff;}

/* Rich text editor (student blog posts) */
.rte-toolbar{display:flex; gap:8px; margin-bottom:8px; align-items:center; flex-wrap:wrap;}
.rte-toolbar button{width:38px; height:36px; border:1px solid var(--border); background:#fbfcfb; border-radius:8px; cursor:pointer; font-size:.95rem;}
.rte-toolbar button:hover{background:#eef4f1;}
.rte-toolbar select{width:auto; margin-bottom:0; padding:8px 10px;}
.rte-toolbar input[type="color"]{width:38px; height:36px; padding:2px; border:1px solid var(--border); border-radius:8px; cursor:pointer; background:#fbfcfb;}
.rte-editor{min-height:220px; border:1px solid var(--border); border-radius:10px; padding:14px; background:#fbfcfb; margin-bottom:18px; line-height:1.7;}
.rte-editor:focus{outline:none; border-color:var(--primary); background:#fff;}
/* Share buttons */
.share-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:28px; padding-top:20px; border-top:1px solid var(--border);}
.share-btn{padding:8px 16px; border-radius:999px; font-weight:600; font-size:.82rem; color:#fff;}
.share-whatsapp{background:#25D366;}
.share-facebook{background:#1877F2;}
.share-instagram{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);}
.share-email{background:var(--muted);}
.share-btn:hover{filter:brightness(1.08);}

/* Star rating */
.star-row{display:flex; gap:4px;}
.star-btn{background:none; border:none; font-size:1.6rem; cursor:pointer; opacity:.35; transition:.15s; padding:0;}
.star-btn:hover, .star-row:hover .star-btn{opacity:1;}

/* Comments */
.comment-item{padding:14px 0; border-bottom:1px solid var(--border);}
.comment-item:last-of-type{border-bottom:none;}
.comment-item p{margin:6px 0 0; color:var(--ink);}

.post-body{font-size:1.05rem; line-height:1.9;}
.post-body p{margin-bottom:1.2em;}
.author-chip{display:flex; align-items:center; gap:10px; margin:20px 0;}
.author-chip .avatar{width:42px; height:42px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700;}
.author-chip .avatar-photo{width:42px; height:42px; border-radius:50%; object-fit:cover; flex-shrink:0;}

/* Login pages */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--primary-dark),var(--primary)); padding:24px;}
.auth-card{background:#fff; border-radius:20px; padding:40px; max-width:420px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,.3);}

/* ============================================================
   HERO BACKGROUND SLIDESHOW
   Slides sit at z-index:0, overlays at z-index:1, content at z-index:2, arrows/dots at z-index:3
   ============================================================ */
.hero-slides{position:absolute; inset:0; z-index:0;}
.hero-slide{position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; opacity:0; transition:opacity 1.2s ease;}
.hero-slide.active{opacity:1;}
.hero-text-slide{display:none;}
.hero-text-slide.active{display:block;}
.hero-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:3; background:rgba(255,255,255,.18); border:2px solid rgba(255,255,255,.4); color:#fff; width:44px; height:44px; border-radius:50%; font-size:1.5rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s;}
.hero-arrow:hover{background:rgba(255,255,255,.35);}
.hero-arrow-left{left:20px;}
.hero-arrow-right{right:20px;}
.hero-dots{position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:8px;}
.hero-dot{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.4); cursor:pointer; transition:.2s;}
.hero-dot.active{background:#fff; transform:scale(1.2);}
@media(max-width:600px){.hero-arrow{width:36px;height:36px;font-size:1.2rem;} .hero-arrow-left{left:10px;} .hero-arrow-right{right:10px;}}

/* ============================================================
   MODERN GALLERY — masonry grid + lightbox
   ============================================================ */
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.gallery-grid figure{margin:0; border-radius:12px; overflow:hidden; position:relative; aspect-ratio:1/1;}
.gallery-grid img{width:100%; height:100%; object-fit:cover; transition:.3s;}
.gallery-grid figure:hover img{transform:scale(1.08);}
.gallery-grid figcaption{position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent,rgba(0,0,0,.65)); color:#fff; padding:10px 12px; font-size:.8rem; font-weight:600;}
@media(max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}

.gallery-masonry{column-count:4; column-gap:18px;}
.gallery-masonry figure{margin:0 0 18px; break-inside:avoid; border-radius:16px; overflow:hidden; position:relative; cursor:pointer; box-shadow:var(--shadow-sm); background:#eee;}
.gallery-masonry img{width:100%; display:block; transition:transform .4s ease, filter .4s ease;}
.gallery-masonry figure:hover img{transform:scale(1.06); filter:brightness(.85);}
.gallery-masonry figcaption{position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent,rgba(0,0,0,.75)); color:#fff; padding:16px 14px 12px; font-size:.88rem; font-weight:600; display:flex; justify-content:space-between; align-items:flex-end; opacity:0; transform:translateY(8px); transition:.3s;}
.gallery-masonry figure:hover figcaption{opacity:1; transform:translateY(0);}
.gallery-expand-icon{font-size:1.1rem; opacity:.85;}

/* Video tiles in masonry gallery */
.gallery-video-tile{position:relative; cursor:pointer;}
.gallery-video-placeholder{width:100%; aspect-ratio:16/9; background:linear-gradient(135deg,#1a1a2e,#16213e); display:block;}
.gallery-video-play{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:56px; height:56px; background:rgba(255,255,255,.9); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:#111; pointer-events:none; transition:.2s; padding-left:4px;}
.gallery-video-tile:hover .gallery-video-play{background:#fff; transform:translate(-50%,-50%) scale(1.1);}
@media(max-width:1000px){.gallery-masonry{column-count:3;}}
@media(max-width:700px){.gallery-masonry{column-count:2; column-gap:12px;} .gallery-masonry figure{margin-bottom:12px;}}
@media(max-width:460px){.gallery-masonry{column-count:1;}}

.lightbox{display:none; position:fixed; inset:0; background:rgba(10,15,13,.95); z-index:500; align-items:center; justify-content:center;}
.lightbox.open{display:flex;}
.lightbox-content{max-width:90vw; max-height:88vh; display:flex; flex-direction:column; align-items:center;}
.lightbox-content img{max-width:90vw; max-height:78vh; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5); object-fit:contain;}
.lightbox-caption{color:#fff; margin-top:14px; font-size:1rem; font-weight:600; text-align:center;}
.lightbox-counter{color:rgba(255,255,255,.6); margin-top:6px; font-size:.82rem;}
.lightbox-close{position:absolute; top:20px; right:24px; background:rgba(255,255,255,.12); border:none; color:#fff; width:42px; height:42px; border-radius:50%; font-size:1.3rem; cursor:pointer; z-index:2;}
.lightbox-close:hover{background:rgba(255,255,255,.25);}
.lightbox-arrow{position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.12); border:none; color:#fff; width:52px; height:52px; border-radius:50%; font-size:2rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2;}
.lightbox-arrow:hover{background:rgba(255,255,255,.25);}
.lightbox-arrow-left{left:20px;}
.lightbox-arrow-right{right:20px;}
@media(max-width:600px){.lightbox-arrow{width:40px;height:40px;font-size:1.5rem;} .lightbox-arrow-left{left:8px;} .lightbox-arrow-right{right:8px;} .lightbox-close{top:12px;right:12px;width:36px;height:36px;}}

/* Homepage gallery carousel */
.gallery-carousel-wrap{position:relative; display:flex; align-items:center; gap:10px;}
.gallery-carousel{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:4px 2px 12px; flex:1; scrollbar-width:thin;}
.gallery-carousel-slide{flex:0 0 auto; width:280px; scroll-snap-align:start; margin:0; border-radius:14px; overflow:hidden; position:relative; box-shadow:var(--shadow-sm);}
.gallery-carousel-slide img{width:100%; height:220px; object-fit:cover; display:block; transition:.3s;}
.gallery-carousel-slide:hover img{transform:scale(1.06);}
.gallery-carousel-slide figcaption{position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent,rgba(0,0,0,.7)); color:#fff; padding:12px; font-size:.85rem; font-weight:600;}
.gallery-carousel-arrow{flex-shrink:0; width:44px; height:44px; border-radius:50%; border:1px solid var(--border); background:#fff; color:var(--primary-dark); font-size:1.5rem; cursor:pointer; box-shadow:var(--shadow-sm); display:flex; align-items:center; justify-content:center; transition:.2s;}
.gallery-carousel-arrow:hover{background:var(--primary); color:#fff;}
@media(max-width:640px){.gallery-carousel-slide{width:220px;} .gallery-carousel-slide img{height:170px;} .gallery-carousel-arrow{width:36px;height:36px;font-size:1.2rem;}}

.library-book-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:16px;}
.library-book-cover{width:100%; aspect-ratio:2/3; object-fit:cover; display:block;}
.library-book-cover-placeholder{width:100%; aspect-ratio:2/3; background:#eef4f1; display:flex; align-items:center; justify-content:center; font-size:2rem;}
@media(max-width:640px){.library-book-grid{grid-template-columns:repeat(2, 1fr); gap:12px;}}

/* ============================================================
   LEADERBOARD
   ============================================================ */
.leaderboard{border-radius:18px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--border); background:var(--card);}
.leaderboard-row{display:grid; grid-template-columns:120px 1.4fr 1.6fr; gap:16px; align-items:center; padding:16px 20px;}
.leaderboard-head{background:var(--primary-dark); color:#fff; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700;}
.leaderboard-item{border-top:1px solid var(--border);}
.leaderboard-item:first-of-type{border-top:none;}
.leaderboard-toggle{cursor:pointer; transition:.2s;}
.leaderboard-toggle:hover{background:#f4f8f6;}
.leaderboard-topper{font-weight:700; color:var(--primary-dark); display:flex; align-items:center; gap:8px;}
.leaderboard-avatar{width:30px; height:30px; border-radius:50%; object-fit:cover; flex-shrink:0;}
.leaderboard-details{max-height:0; overflow:hidden; transition:max-height .35s ease, padding .35s ease; padding:0 20px; background:#fafcfb;}
.leaderboard-item.open .leaderboard-details{max-height:2000px; padding:16px 20px 20px;}
.leaderboard-item.open .leaderboard-toggle{background:#eef4f1;}
.leaderboard-tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:16px;}
.leaderboard-class-group{margin-bottom:22px;}
.leaderboard-class-group:last-child{margin-bottom:0;}
.leaderboard-class-heading{margin:0 0 12px; font-size:.95rem; color:var(--primary-dark); padding-bottom:6px; border-bottom:2px solid var(--accent); display:inline-block;}
.leaderboard-tile{display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; background:#fff; border:1px solid var(--border); border-radius:14px; padding:18px 14px; box-shadow:var(--shadow-sm); transition:.2s;}
.leaderboard-tile:hover{transform:translateY(-3px); box-shadow:var(--shadow);}
.leaderboard-tile-gold{background:linear-gradient(180deg,#fff8e8,#fff); border-color:#f0d78c;}
.leaderboard-tile-photo{width:88px; height:88px; border-radius:50%; object-fit:cover; border:3px solid var(--border);}
.leaderboard-tile-gold .leaderboard-tile-photo{border-color:var(--accent);}
.leaderboard-tile-placeholder{display:flex; align-items:center; justify-content:center; background:var(--primary); color:#fff; font-size:1.8rem; font-weight:700;}
.leaderboard-tile-medal{font-size:.8rem; font-weight:700; color:var(--muted);}
.leaderboard-tile strong{font-size:.95rem; color:var(--ink);}
@media(max-width:700px){.leaderboard-row{grid-template-columns:1fr; gap:4px;} .leaderboard-head{display:none;} .leaderboard-topper{margin-top:4px;}}
@media(max-width:480px){.leaderboard-tiles{grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:12px;} .leaderboard-tile-photo{width:64px;height:64px;}}

/* ============================================================
   PAGE DESIGNER — file/ebook cards
   ============================================================ */
.file-list{display:flex; flex-direction:column; gap:12px;}
.file-card{display:flex; align-items:center; gap:16px; padding:16px 18px; border-radius:14px; background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow-sm); transition:.2s; color:var(--ink);}
.file-card:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--primary);}
.file-card-icon{font-size:1.8rem; flex-shrink:0;}
.file-card-body{flex:1; min-width:0;}
.file-card-action{flex-shrink:0; font-size:.82rem; font-weight:700; color:var(--primary); white-space:nowrap;}

/* ============================================================
   FEE PAYMENT — form tabs
   ============================================================ */
.fee-tab-panel{margin-top:16px;}

/* ============================================================
   STUDENT ARTWORK / BLOG — author chip photo
   ============================================================ */
.author-chip .avatar-photo{width:42px; height:42px; border-radius:50%; object-fit:cover; flex-shrink:0;}

/* ============================================================
   SOCIAL SHARE BUTTONS
   ============================================================ */
.share-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:20px;}
.share-btn{padding:8px 16px; border-radius:20px; font-weight:600; font-size:.85rem; text-decoration:none; display:inline-flex; align-items:center; gap:6px; transition:.2s; cursor:pointer; border:none;}
.share-whatsapp{background:#25D366; color:#fff;}
.share-facebook{background:#1877F2; color:#fff;}
.share-instagram{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color:#fff;}
.share-email{background:#ea4335; color:#fff;}
.share-btn:hover{opacity:.88; transform:translateY(-1px);}

/* ============================================================
   FEE PAYMENT nav button
   ============================================================ */
.social-icon-btn{width:36px; height:36px; border-radius:50%; border:1px solid var(--border); display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; color:var(--primary-dark); transition:.2s;}
.social-icon-btn:hover{background:var(--primary); color:#fff;}
.fee-payment-btn{padding:7px 16px !important; font-size:.8rem !important; white-space:nowrap;}
.booklist-btn{padding:7px 16px !important; font-size:.8rem !important; white-space:nowrap;}

/* ============================================================
   STUDENTS' CORNER — two-column split layout
   ============================================================ */
.sc-split{display:grid; grid-template-columns:1fr 1px 1fr; gap:0; align-items:start;}
.sc-col{padding:0 40px;}
.sc-col:first-child{padding-left:0;}
.sc-col:last-child{padding-right:0;}
.sc-divider{background:var(--border); width:1px; align-self:stretch; margin:0;}
.sc-col-head{margin-bottom:28px;}
.sc-col-head h2{font-size:1.4rem; margin-bottom:6px;}

/* Blog post list */
.sc-blog-list{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
.sc-blog-card{display:flex; flex-direction:column; border-radius:12px; background:var(--card); border:1px solid var(--border); overflow:hidden; box-shadow:var(--shadow-sm); transition:.2s; color:var(--ink);}
.sc-blog-card:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--primary);}
.sc-blog-cover{width:100%; height:120px; object-fit:cover; flex-shrink:0; display:block;}
.sc-blog-cover-placeholder{width:100%; height:120px; background:linear-gradient(135deg,var(--primary-dark),var(--primary)); flex-shrink:0;}
.sc-blog-body{padding:10px 12px 12px; display:flex; flex-direction:column; gap:5px;}
.sc-blog-body h3{font-size:.88rem; margin:0; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-weight:700;}
.sc-blog-meta{display:flex; align-items:center; gap:6px; margin-top:2px;}
.sc-blog-meta span{font-size:.75rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sc-excerpt{display:none;}
.sc-blog-footer{display:none;}
.sc-avatar{width:24px; height:24px; border-radius:50%; object-fit:cover; flex-shrink:0;}
.sc-avatar-init{background:var(--primary); color:#fff; font-size:.7rem; font-weight:700; display:flex; align-items:center; justify-content:center;}

/* Artwork masonry grid (right column) */
.sc-artwork-grid{column-count:2; column-gap:12px;}
.sc-artwork-tile{break-inside:avoid; margin-bottom:12px; border-radius:12px; overflow:hidden; position:relative; cursor:pointer; box-shadow:var(--shadow-sm);}
.sc-artwork-tile img{width:100%; display:block; transition:.3s;}
.sc-artwork-tile:hover img{transform:scale(1.05); filter:brightness(.85);}
.sc-artwork-caption{position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent,rgba(0,0,0,.75)); color:#fff; padding:20px 10px 10px; opacity:0; transition:.3s; font-size:.78rem;}
.sc-artwork-caption strong{display:block; font-size:.85rem;}
.sc-artwork-tile:hover .sc-artwork-caption{opacity:1;}

/* Artwork quick-view modal */
.sc-art-modal{display:none; position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:500; align-items:center; justify-content:center; padding:20px;}
.sc-art-modal.open{display:flex;}
.sc-art-modal-content{max-width:90vw; max-height:90vh; display:flex; flex-direction:column; align-items:center; gap:14px;}
.sc-art-modal-content img{max-width:90vw; max-height:78vh; border-radius:12px; object-fit:contain; box-shadow:0 20px 60px rgba(0,0,0,.5);}
.sc-art-modal-caption{text-align:center; color:#fff;}
.sc-art-modal-caption strong{display:block; font-size:1rem;}
.sc-art-modal-caption span{font-size:.85rem; color:rgba(255,255,255,.7);}
.sc-art-modal-close{position:absolute; top:20px; right:24px; background:rgba(255,255,255,.12); border:none; color:#fff; width:42px; height:42px; border-radius:50%; font-size:1.3rem; cursor:pointer;}
.sc-art-modal-close:hover{background:rgba(255,255,255,.25);}

@media(max-width:900px){
  .sc-split{grid-template-columns:1fr; gap:40px;}
  .sc-divider{display:none;}
  .sc-col{padding:0;}
  .sc-blog-list{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:600px){
  .sc-blog-list{grid-template-columns:repeat(2,1fr);}
  .sc-artwork-grid{column-count:2;}
}

/* ============================================================
   GALLERY COVERFLOW CAROUSEL
   Centre tile large, flanking tiles smaller, depth effect
   ============================================================ */
.coverflow-wrap{position:relative; display:flex; align-items:center; gap:0; padding:20px 0; overflow:hidden;}
.coverflow-track{position:relative; width:100%; height:340px; display:flex; align-items:center; justify-content:center; overflow:visible;}
.coverflow-slide{position:absolute; width:52%; max-width:520px; border-radius:18px; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.22); transition:transform .8s cubic-bezier(.25,.46,.45,.94), opacity .8s ease; will-change:transform,opacity; display:block; color:inherit; text-decoration:none;}
.coverflow-slide img{width:100%; height:280px; object-fit:cover; display:block;}
.coverflow-slide.active img{height:320px;}
.coverflow-caption{position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent,rgba(0,0,0,.75)); color:#fff; padding:24px 18px 16px; opacity:0; transition:.3s;}
.coverflow-slide.active .coverflow-caption{opacity:1;}
.coverflow-caption strong{display:block; font-size:1rem; font-weight:700; margin-bottom:3px;}
.coverflow-caption span{font-size:.82rem; opacity:.85;}
.coverflow-arrow{flex-shrink:0; width:48px; height:48px; border-radius:50%; border:2px solid var(--border); background:#fff; color:var(--primary-dark); font-size:1.6rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s; box-shadow:var(--shadow-sm); position:relative; z-index:20;}
.coverflow-arrow:hover{background:var(--primary); color:#fff; border-color:var(--primary);}
.coverflow-arrow-left{margin-right:-24px;}
.coverflow-arrow-right{margin-left:-24px;}
/* Timeline scrubber (replaces dots) */
.cf-timeline-wrap{display:flex; align-items:center; gap:18px; margin-top:32px; padding:0 4px;}
.cf-timeline-label{font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); white-space:nowrap; flex-shrink:0; opacity:.6;}
.cf-timeline{position:relative; flex:1; height:56px; cursor:pointer; display:flex; align-items:center;}

/* The track — thin pill, subtle */
.cf-timeline-track{position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:3px; background:rgba(0,0,0,.1); border-radius:999px;}

/* No fill bar — removed entirely */
.cf-timeline-fill{display:none;}

/* Thumb — large, clean, modern */
.cf-timeline-thumb{position:absolute; top:50%; transform:translate(-50%,-50%); width:28px; height:28px; border-radius:50%; background:#fff; border:3px solid var(--primary); box-shadow:0 4px 16px rgba(0,0,0,.18), 0 0 0 5px rgba(20,99,86,.1); cursor:grab; z-index:4; transition:left .4s cubic-bezier(.4,0,.2,1), box-shadow .2s;}
.cf-timeline-thumb:hover{box-shadow:0 4px 20px rgba(0,0,0,.22), 0 0 0 8px rgba(20,99,86,.15);}
.cf-timeline-thumb:active{cursor:grabbing; box-shadow:0 2px 10px rgba(0,0,0,.2), 0 0 0 12px rgba(20,99,86,.12);}

/* Tick marks — minimal lines */
.cf-timeline-tick{position:absolute; top:50%; transform:translate(-50%,-50%); width:24px; height:32px; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; z-index:2; gap:4px;}
.cf-tick-dot{width:3px; height:10px; border-radius:999px; background:rgba(0,0,0,.18); transition:all .2s;}
.cf-timeline-tick:hover .cf-tick-dot{background:var(--primary); height:14px;}
.cf-timeline-tick.active .cf-tick-dot{background:var(--primary); height:14px; width:4px;}
.cf-tick-label{position:absolute; bottom:-18px; left:50%; transform:translateX(-50%); font-size:.62rem; white-space:nowrap; color:var(--muted); pointer-events:none; opacity:0; transition:.2s; font-weight:600; letter-spacing:.03em;}
.cf-timeline-tick:hover .cf-tick-label, .cf-timeline-tick.active .cf-tick-label{opacity:1; color:var(--primary-dark);}

@media(max-width:600px){
  .cf-tick-label{display:none;}
  .cf-timeline-wrap{gap:10px;}
  .cf-timeline-thumb{width:22px; height:22px;}
}
@media(max-width:700px){
  .coverflow-track{height:240px;}
  .coverflow-slide{width:72%;}
  .coverflow-slide img{height:190px;}
  .coverflow-slide.active img{height:220px;}
  .coverflow-arrow{width:38px; height:38px; font-size:1.2rem;}
}

/* ============================================================
   ADMIN MAILBOX
   ============================================================ */
.mail-shell{display:grid; grid-template-columns:200px 1fr; gap:0; background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); min-height:600px;}
.mail-sidebar{background:#f6f8f7; border-right:1px solid var(--border); padding:16px 0;}
.mail-compose-btn{display:block; margin:0 16px 16px; padding:11px 16px; background:var(--primary); color:#fff; border-radius:10px; font-weight:700; font-size:.88rem; text-align:center; transition:.2s;}
.mail-compose-btn:hover{background:var(--primary-dark);}
.mail-nav{display:flex; align-items:center; justify-content:space-between; padding:11px 20px; color:var(--ink); font-size:.88rem; font-weight:600; transition:.15s; border-left:3px solid transparent;}
.mail-nav:hover{background:#eef4f1;}
.mail-nav.active{background:#e4f0eb; color:var(--primary-dark); border-left-color:var(--primary);}
.mail-badge{background:#e0461a; color:#fff; font-size:.7rem; font-weight:800; padding:2px 7px; border-radius:999px;}
.mail-badge-muted{background:var(--muted);}

/* Main panel */
.mail-main{padding:0; display:flex; flex-direction:column;}
.mail-list-header{padding:20px 24px 12px; border-bottom:1px solid var(--border);}
.mail-list-header h3{margin:0;}

/* Mail rows */
.mail-row{border-bottom:1px solid var(--border); cursor:pointer; transition:.15s; padding:0 20px;}
.mail-row:hover{background:#f8fbf9;}
.mail-row.unread{background:#f0f9f5;}
.mail-row.unread .mail-row-from, .mail-row.unread .mail-row-subject{font-weight:800; color:var(--primary-dark);}
.mail-row.active{background:#eef4f1; border-left:3px solid var(--primary);}
.mail-row-inner{display:flex; gap:14px; align-items:flex-start; padding:16px 0 12px;}
.mail-row-avatar{width:38px; height:38px; border-radius:50%; background:var(--accent); color:#fff; font-weight:800; font-size:.95rem; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.mail-row-content{flex:1; min-width:0;}
.mail-row-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:3px;}
.mail-row-from{font-size:.9rem; font-weight:600;}
.mail-row-time{font-size:.75rem; color:var(--muted); flex-shrink:0;}
.mail-row-subject{font-size:.85rem; font-weight:600; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mail-row-preview{font-size:.8rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mail-row-actions{display:flex; gap:6px; padding-bottom:12px;}

/* View/Compose */
.mail-view-header{padding:20px 24px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:16px;}
.mail-view-header h3{margin:0; font-size:1.05rem;}
.mail-meta{padding:14px 24px; background:#f8fbf9; border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:4px; font-size:.85rem; color:var(--muted);}
.mail-body{padding:24px; font-size:.95rem; line-height:1.8; flex:1; white-space:pre-wrap;}
.mail-attachments{padding:0 24px 24px;}

/* Conversation / chat thread bubbles */
.chat-thread{display:flex; flex-direction:column; gap:2px; padding:20px; background:#f4faf8; border-radius:14px; margin:16px 0;}
.chat-date-sep{align-self:center; background:#e4efe9; color:var(--muted); font-size:.72rem; font-weight:600; padding:4px 14px; border-radius:20px; margin:10px 0 14px;}
.chat-row{display:flex; flex-direction:column; max-width:78%; margin-bottom:6px;}
.chat-row.in{align-self:flex-start; align-items:flex-start;}
.chat-row.out{align-self:flex-end; align-items:flex-end;}
.chat-bubble{padding:8px 14px; border-radius:16px; font-size:.9rem; line-height:1.5; word-break:break-word;}
.chat-row.in .chat-bubble{background:#fff; border:1px solid var(--border); border-bottom-left-radius:4px;}
.chat-row.out .chat-bubble{background:var(--primary); color:#fff; border-bottom-right-radius:4px;}
.chat-deleted{font-style:italic; opacity:.75;}
.chat-forwarded-tag{font-size:.75rem; font-style:italic; opacity:.75; margin-bottom:2px;}
.chat-row.out .chat-bubble a{color:#fff; text-decoration:underline;}
.chat-time{float:right; font-size:.65rem; opacity:.6; margin:4px 0 -2px 10px; white-space:nowrap;}
.chat-row.in .chat-time{color:var(--muted);}
.chat-row.out .chat-time{color:rgba(255,255,255,.85);}
.chat-sender{font-size:.72rem; font-weight:700; color:var(--primary-dark); margin:0 6px 2px;}
.chat-composer{display:flex; gap:10px; align-items:flex-end; margin-top:16px;}
.chat-composer textarea{flex:1; margin:0; resize:none;}
.chat-attach-btn{display:flex; align-items:center; gap:6px; cursor:pointer; font-size:1.3rem; color:var(--muted); padding:0 2px 8px; flex-shrink:0; user-select:none;}
.chat-attach-btn:hover{color:var(--primary);}
.chat-attach-btn input[type="file"]{display:none;}
.chat-attach-filename{font-size:.72rem; color:var(--primary-dark); max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.chat-attachment{display:flex; align-items:center; gap:6px; background:rgba(0,0,0,.06); border-radius:10px; padding:7px 10px; font-size:.82rem; font-weight:600; text-decoration:none; color:inherit; margin-bottom:6px; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.chat-row.out .chat-attachment{background:rgba(255,255,255,.22); color:#fff;}
.chat-attachment-image{background:none; padding:0; display:block; max-width:220px;}
.chat-attachment-image img{max-width:100%; max-height:220px; border-radius:12px; display:block; margin-bottom:4px; object-fit:cover;}
.chat-attachment-video{max-width:240px; max-height:240px; border-radius:12px; display:block; margin-bottom:4px; background:#000;}
.mail-view-actions{padding:16px 24px; border-top:1px solid var(--border); display:flex; gap:10px;}

/* Compose form */
.mail-compose-form{padding:20px 24px; display:flex; flex-direction:column; gap:0;}
.mail-field-row{margin-bottom:14px;}
.mail-field-row label{display:block; font-weight:700; font-size:.82rem; margin-bottom:5px; color:var(--muted);}
.mail-field-row input, .mail-field-row textarea{margin-bottom:0;}
.mail-compose-actions{display:flex; gap:10px; margin-top:8px;}

@media(max-width:700px){
  .mail-shell{grid-template-columns:1fr;}
  .mail-sidebar{border-right:none; border-bottom:1px solid var(--border); display:flex; flex-wrap:wrap; gap:4px; padding:12px;}
  .mail-compose-btn{margin:0; flex-shrink:0;}
  .mail-nav{padding:8px 12px; border-radius:8px; border-left:none;}

  /* Sidebars holding a scrollable row-list (not short nav-tab pills) stack as
     a normal full-width list instead of wrapping like nav pills would. */
  .mail-sidebar.row-list{display:block; flex-wrap:unset; padding:0;}

  /* True single-pane mobile behavior: once a conversation is open, hide the
     list entirely and show only the thread, WhatsApp-style. */
  .mail-shell.chat-open .mail-sidebar{display:none;}
  .mail-back-link{display:inline-flex;}

  /* Chat bubbles, rows, and headers sized down for narrow screens */
  .chat-row{max-width:88%;}
  .chat-bubble{font-size:.87rem; padding:7px 12px;}
  .chat-thread{padding:12px; margin:12px 0;}
  .mail-view-header{padding:14px 16px; gap:10px;}
  .mail-view-header h3{font-size:1rem;}
  .mail-list-header{padding:14px 16px 10px;}
  .mail-row-inner{padding:12px 16px; gap:10px;}
  .mail-row{padding:0;}
  .mail-row-avatar{width:32px; height:32px; font-size:.8rem;}
  .chat-composer{gap:8px;}
  .chat-attach-filename{max-width:60px;}
  .chat-attachment, .chat-attachment-image, .chat-attachment-video{max-width:160px;}
}
.mail-back-link{display:none; align-items:center; gap:6px; color:var(--primary-dark); font-weight:700; font-size:.85rem; text-decoration:none;}

/* ===========================================================
   Student "My Attendance" page — month calendar + session summary
   =========================================================== */
.att-month-nav{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px;}
.att-month-nav a{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:#eef4f1; color:var(--primary-dark); font-weight:700; text-decoration:none; flex-shrink:0;}
.att-month-nav a:hover{background:var(--primary); color:#fff;}
.att-month-nav h3{margin:0; font-size:1.15rem; text-align:center;}
.att-calendar{display:grid; grid-template-columns:repeat(7, 1fr); gap:6px;}
.att-weekday{text-align:center; font-size:.72rem; font-weight:700; text-transform:uppercase; color:var(--muted); letter-spacing:.04em; padding-bottom:4px;}
.att-day{aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:12px; font-weight:700; font-size:.9rem; background:#f6f8f7; color:var(--ink);}
.att-day.att-blank{background:transparent;}
.att-day.att-present{background:#e5f6ec; color:#146c3d;}
.att-day.att-absent{background:#fdecec; color:#a52a24;}
.att-day.att-leave{background:#fff6df; color:#8a6a10;}
.att-day.att-early{background:#fef1e2; color:#a8590c;}
.att-day.att-holiday{background:#eaf1fb; color:#1a56a0;}
.att-day.att-today{box-shadow:0 0 0 2px var(--primary) inset;}
/* Teacher-facing "mark attendance" calendar: green = attendance already
   taken that day, blue = holiday, red = a past day nobody marked yet. */
a.att-day{text-decoration:none; cursor:pointer;}
a.att-day:hover{filter:brightness(0.96);}
.att-day.att-cal-marked{background:#e5f6ec; color:#146c3d;}
.att-day.att-cal-holiday{background:#eaf1fb; color:#1a56a0;}
.att-day.att-cal-missed{background:#fdecec; color:#a52a24;}
.att-day.att-selected{box-shadow:0 0 0 2px var(--ink) inset;}
.att-day.att-selected.att-today{box-shadow:0 0 0 2px var(--primary) inset, 0 0 0 4px var(--ink) inset;}
.att-legend{display:flex; gap:14px; flex-wrap:wrap; margin-top:16px; font-size:.8rem; color:var(--muted);}
.att-legend span{display:inline-flex; align-items:center; gap:6px;}
.att-legend i{width:12px; height:12px; border-radius:4px; display:inline-block;}
.att-summary-pills{display:flex; gap:12px; flex-wrap:wrap; margin-top:20px;}
.att-summary-pill{flex:1; min-width:110px; text-align:center; border-radius:14px; padding:16px 12px; background:#eef4f1;}
.att-summary-pill .num{font-size:1.6rem; font-weight:800; color:var(--primary-dark); display:block;}
.att-summary-pill .lbl{font-size:.78rem; color:var(--muted); font-weight:600; margin-top:2px;}
.att-summary-pill.present{background:#e5f6ec;} .att-summary-pill.present .num{color:#146c3d;}
.att-summary-pill.absent{background:#fdecec;} .att-summary-pill.absent .num{color:#a52a24;}
.att-summary-pill.leave{background:#fff6df;} .att-summary-pill.leave .num{color:#8a6a10;}
.att-summary-pill.early{background:#fef1e2;} .att-summary-pill.early .num{color:#a8590c;}
.att-summary-pill.holiday{background:#eaf1fb;} .att-summary-pill.holiday .num{color:#1a56a0;}
@media(max-width:640px){
  .att-day{font-size:.8rem; border-radius:10px;}
  .att-summary-pill{min-width:44%;}
}

/* ===========================================================
   Staff Communication — WhatsApp-style message actions
   (reply, forward, copy, edit, delete)
   =========================================================== */
.chat-bubble-deleted{opacity:.6; font-style:italic;}
.chat-forwarded-tag{font-size:.72rem; opacity:.75; margin-bottom:3px; font-style:italic;}
.chat-edited-tag{font-size:.68rem; opacity:.7; font-style:italic;}

.chat-reply-quote{background:rgba(0,0,0,.06); border-left:3px solid var(--primary); border-radius:6px; padding:5px 9px; margin-bottom:6px; font-size:.8rem;}
.chat-row.out .chat-reply-quote{background:rgba(255,255,255,.18); border-left-color:#fff;}
.chat-reply-quote-sender{font-weight:700; color:var(--primary-dark); margin-bottom:1px;}
.chat-row.out .chat-reply-quote-sender{color:#fff;}
.chat-reply-quote-snippet{opacity:.85; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.chat-reply-preview{display:none; align-items:center; justify-content:space-between; gap:10px; background:#eef4f1; border-left:3px solid var(--primary); border-radius:8px; padding:8px 12px; margin-bottom:8px;}
.chat-reply-preview.chat-editing{border-left-color:var(--accent); background:#fff6df;}
.chat-reply-preview-content{overflow:hidden;}
.chat-reply-preview-label{font-weight:700; font-size:.78rem; color:var(--primary-dark);}
.chat-editing .chat-reply-preview-label{color:#8a6a10;}
.chat-reply-preview-snippet{font-size:.8rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.chat-reply-preview-close{background:none; border:none; font-size:1.1rem; color:var(--muted); cursor:pointer; flex-shrink:0; padding:4px;}

.chat-action-sheet{display:none; position:fixed; inset:0; z-index:1000; align-items:flex-end; justify-content:center;}
.chat-action-sheet-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.4);}
.chat-action-sheet-panel{position:relative; background:#fff; border-radius:16px 16px 0 0; width:100%; max-width:420px; padding:10px 0 14px; box-shadow:0 -6px 24px rgba(0,0,0,.2); display:flex; flex-direction:column;}
.chat-action-btn{background:none; border:none; text-align:left; padding:13px 22px; font-size:.95rem; font-weight:600; color:var(--ink); cursor:pointer; width:100%;}
.chat-action-btn:hover{background:#f4f6f5;}
.chat-action-btn-danger{color:#a52a24;}
.chat-action-btn-cancel{text-align:center; border-top:1px solid var(--border); margin-top:6px; padding-top:14px; color:var(--muted);}
@media(min-width:641px){
  .chat-action-sheet{align-items:center;}
  .chat-action-sheet-panel{border-radius:14px; max-width:320px;}
}

/* ---------------------------------------------------------------------------------------------------------------------
 * Student dashboard (student/dashboard.php) — the same look as the mobile app's dashboard: a gradient profile card with
 * four info pills, two count pills, then gradient "group pills" holding translucent stat pills, then feature tiles.
 * ------------------------------------------------------------------------------------------------------------------ */
.sd-wrap{max-width:620px; margin:0 auto;}
.sd-profile{background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); border-radius:22px; padding:24px; text-align:center; color:#fff; margin-bottom:16px;}
.sd-avatar-link{display:inline-block; margin-bottom:8px; text-decoration:none;}
.sd-avatar{width:132px; height:132px; border-radius:50%; object-fit:cover; border:3px solid rgba(255,255,255,.85); display:block;}
.sd-avatar-fallback{background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.55); display:flex; align-items:center; justify-content:center; color:#fff; font-size:48px; font-weight:700;}
.sd-name{color:#fff; font-size:1.25rem; font-weight:800; margin-top:2px;}
.sd-view-btn{display:inline-block; background:rgba(255,255,255,.2); color:#fff; border-radius:999px; padding:7px 16px; margin:8px 0 4px; font-size:.75rem; font-weight:700; text-decoration:none;}
.sd-view-btn:hover{background:rgba(255,255,255,.3); color:#fff;}
.sd-info-row{display:flex; gap:8px; margin-top:8px; text-align:left;}
.sd-info-pill{flex:1; min-width:0; display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); border-radius:14px; padding:8px;}
.sd-info-pill .ico{font-size:.95rem; flex-shrink:0;}
.sd-info-pill > div{min-width:0;}
.sd-info-label{font-size:.56rem; font-weight:700; text-transform:uppercase; color:rgba(255,255,255,.75);}
.sd-info-value{font-size:.75rem; font-weight:700; color:#fff; overflow-wrap:anywhere;}

.sd-twin{display:flex; gap:8px; margin-bottom:8px;}
.sd-simple{flex:1; position:relative; display:block; text-decoration:none; color:#fff; text-align:center; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); border-radius:18px; padding:8px; border:2.5px solid transparent;}
.sd-simple.alert{border-color:#f5c451; box-shadow:0 0 10px rgba(245,196,81,.7);}
.sd-simple-head{display:flex; justify-content:center; align-items:center; gap:5px; margin-bottom:6px; font-size:.69rem; font-weight:700; color:rgba(255,255,255,.85);}
.sd-counter{display:inline-flex; align-items:center; justify-content:center; min-width:52px; height:40px; padding:0 10px; border-radius:20px; background:rgba(255,255,255,.2); font-size:1.375rem; font-weight:800; color:#fff;}
.sd-simple.alert .sd-counter{background:#f5c451; color:#3d2c00;}
.sd-suffix{font-size:.625rem; font-weight:600; margin-top:4px; color:rgba(255,255,255,.75);}
.sd-simple.alert .sd-suffix{color:#ffe39a; font-weight:800;}
.sd-alert-dot{position:absolute; top:8px; right:8px; width:12px; height:12px; border-radius:50%; background:#f5c451; border:2px solid #fff;}

.sd-group{display:block; text-decoration:none; color:#fff; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); border-radius:22px; padding:16px 18px; margin-bottom:8px;}
.sd-group-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.4px; color:#fff;}
.sd-chev{font-size:1.1rem; line-height:1; color:rgba(255,255,255,.8);}
.sd-stats{display:flex; gap:8px; flex-wrap:wrap;}
.sd-stat{flex:1; min-width:90px; text-align:center; background:rgba(255,255,255,.14); border-radius:12px; padding:10px 8px;}
.sd-stat.main{flex:2.2; min-width:150px; background:rgba(255,255,255,.22); padding:14px 10px;}
.sd-stat-label{font-size:.56rem; font-weight:700; text-transform:uppercase; letter-spacing:.3px; color:rgba(255,255,255,.75);}
.sd-stat-value{font-size:.8125rem; font-weight:800; margin-top:4px; color:#fff; overflow-wrap:anywhere;}
.sd-stat.main .sd-stat-value{font-size:1rem; margin-top:5px;}
/* The Attendance pill: its three inner pills always share ONE row, shrinking their text on a narrow screen. */
.sd-stats.single{flex-wrap:nowrap; gap:6px;}
.sd-stat.compact{flex:1; min-width:0; padding:10px 4px; display:flex; flex-direction:column; justify-content:center;}
.sd-stat.compact.main{flex:1.8; padding:12px 6px;}
.sd-stat.compact .sd-stat-label{font-size:clamp(.5rem, 2.2vw, .53rem); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sd-stat.compact .sd-stat-value{font-size:clamp(.6rem, 3vw, .75rem); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sd-stat.compact.main .sd-stat-value{font-size:clamp(.7rem, 3.4vw, .875rem);}

.sd-features{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;}
.sd-tile{width:calc(33.333% - 5.4px); box-sizing:border-box; display:flex; flex-direction:column; align-items:center; background:#fff; border:1px solid var(--border); border-radius:18px; padding:8px; text-align:center; text-decoration:none; color:var(--ink);}
.sd-tile:hover{border-color:var(--primary); background:#f6faf8;}
.sd-tile-icon{width:44px; height:44px; border-radius:50%; background:#eef4f1; display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:6px;}
.sd-tile-label{font-size:.6875rem; font-weight:700;}
@media (max-width:420px){ .sd-profile{padding:18px 14px;} .sd-group{padding:14px;} .sd-stat.main{min-width:120px;} }