/* Soft green and white palette for the public school portal. */
:root {
    --bg: #f5faf7;
    --panel: #ffffff;
    --ink: #183f35;
    --muted: #536e63;
    --gold: #267354;
    --line: rgba(48, 110, 79, .16);
}
body { background: linear-gradient(155deg, #edf8ef 0%, #fff 45%, #eff8f3 100%); }
.header { background: rgba(255,255,255,.9); box-shadow: 0 3px 22px #265c3d05; }
.brand-mark { border-color: #80b69b; }
.brand-mark span { color: var(--ink); }
.hero { background: radial-gradient(ellipse at 85% 30%, #d2eddb 0%, transparent 58%), linear-gradient(120deg, #fff 5%, #eff9f1 55%, #e1f2e8 100%); }
.hero:after { background: #bce6cb66; }
.hero-grid { background-image: linear-gradient(#366a4f08 1px, transparent 1px), linear-gradient(90deg, #366a4f08 1px, transparent 1px); }
.hero-background { opacity: .1; }
.hero h1 span { background-image: linear-gradient(110deg, #1e634a, #428967); }
.hero-footnote { color: #5b7a69; }
.small-line { background: #72a68a; }
.dot { box-shadow: 0 0 14px #459a6626; }
.primary { background: #2c7757; color: #fff; box-shadow: 0 8px 24px #2a775720; }
.primary:hover { background: #225f45; }
.secondary { background: #ffffffad; border-color: #b7d5c4; color: #295f48; }
.secondary:hover { background: #e5f4e9; }
.identity-card { background: linear-gradient(145deg, #ffffffed, #e9f5edeb); border-color: #badac6; box-shadow: 0 24px 65px #3c79521a, inset 0 1px 0 #fff; }
.card-topline, .card-bottom { color: #577361; }
.gold-dot { background: #438460; }
.hero-logo { filter: drop-shadow(0 14px 18px #3b78501c); }
.identity-name { color: #244d3d; }
.school-symbol { border-color: #79aa8d; background: linear-gradient(145deg, #daefdf, #f5fcf6); box-shadow: none; }
.school-symbol b { color: #285e44; background: #ecf6ef; }
.orbit-one { border-color: #74ae8d40; }
.orbit-two { border-color: #83b5963d; }
.orbit-one:before { background: #6aa27e; box-shadow: 0 0 20px #6aa27e30; }
.floating-note { color: #28563e; background: linear-gradient(125deg, #fff, #f0f9f2); border-color: #c9e2d2; box-shadow: 0 12px 35px #316e4714; }
.note-icon { color: #337951; background: #dff0e4; }
.quick-strip { background: #ffffffbd; }
.quick-links>span { color: #66816f; }
.quick-links a { color: #335e48; }
.vision-band { background: linear-gradient(115deg, #e3f3e8, #fafffb); border-color: #c7e1cf; border-left-color: #5a9671; }
.vision-band>.body-text { color: #4b6b59; }
.principal-portrait { background: #fff; box-shadow: 0 20px 50px #356e4514; }
.principal-portrait:before { border-color: #8cba9b; }
.portrait-caption { background: linear-gradient(110deg, #e3f2e8, #f4faf6); border-top-color: #74a784; }
.portrait-caption>span:last-child { color: #50715c; }
.principal-message .body-text { color: #4c6a59; }
.principal-message .greeting-arabic { color: #267354; }
.app-card, .about-panel, .info-panel { background: linear-gradient(130deg, #fff, #f0f9f3); border-color: #d2e5d8; box-shadow: 0 8px 30px #39704c06; }
.app-card:hover { border-color: #75a88b; box-shadow: 0 15px 35px #39704c12; }
.empty { background: linear-gradient(120deg, #f0f8f2, #fff); border-color: #bbd7c4; }
.date-box { background: #e8f4ec; }
.staff-card { background: #fff; }
.staff-avatar { background: #e6f3eb; }
.greeting { background: #eef8f1; }
.footer { background: linear-gradient(120deg, #e4f1e9, #f1f8f3); }
.skip { background: #286f50; color: #fff; }
::selection { background: #bfdfca; color: #153e2c; }

/* Rounded, softer heading typography, served locally. */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/nunito/nunito-semibold.ttf') format('truetype');
}
h1, h2, h3,
.hero h1, .section-heading h2, .principal-message h2,
.vision-band h2, .greeting h2, .identity-name {
    font-family: 'Nunito', 'Segoe UI', Arial, sans-serif;
    font-weight: 600;
    letter-spacing: -.015em;
}
.hero h1 { line-height: 1.2; }
.principal-message h2 { line-height: 1.25; }

/* Let the transparent portrait blend into the page gradient. */
.principal-portrait { background: transparent; box-shadow: none; }
.principal-portrait>img { background: transparent; }

/* School photograph softened into the welcome section. */
.hero-background {
    opacity: .34;
    object-position: center 45%;
    filter: saturate(.65);
    mask-image: linear-gradient(90deg, rgba(0,0,0,.25), rgba(0,0,0,.75) 55%, #000);
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.25), rgba(0,0,0,.75) 55%, #000);
}
@media(max-width:760px) {
    .hero-background {
        opacity: .24;
        object-position: 55% center;
        mask-image: linear-gradient(180deg, rgba(0,0,0,.35), #000);
        -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.35), #000);
    }
}
.nav .login-link { color: #267354; font-weight: 600; }
.agenda-photo { display: block; max-height: 360px; max-width: 100%; border-radius: 9px; margin-top: 18px; }
.contact-panel{margin-top:22px}.contact-panel h3{margin-bottom:16px}.contact-panel p+p{margin-top:9px}
/* Split-flap scoreboard visitor counter. */
.scoreboard {
    width: 100%;
    padding: 17px;
    border: 1px solid #bad6c5;
    border-radius: 13px;
    background: linear-gradient(145deg, #ffffffec, #eaf4ed);
    box-shadow: 0 5px 18px #28583b09, inset 0 1px 0 #fff;
    text-align: left;
}
.scoreboard-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.scoreboard-title { display: flex; align-items: center; gap: 8px; color: #355f48; font-size: 11px; font-weight: 600; }
.scoreboard-title svg { color: #4e8b65; flex-shrink: 0; }
.scoreboard-indicator { display: inline-flex; align-items: center; gap: 5px; font-size: 8px; letter-spacing: .1em; color: #67816d; }
.scoreboard-indicator>span { width: 5px; height: 5px; background: #5d9e73; border-radius: 50%; box-shadow: 0 0 0 3px #5d9e7312; }
.scoreboard-panels { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; }
.scoreboard-panel { min-width: 0; }
.scoreboard-label { display: block; margin-bottom: 8px; color: #637b69; font-size: 9px; font-weight: 600; letter-spacing: .075em; text-transform: uppercase; overflow-wrap: anywhere; }
.scoreboard-digits { display: grid; grid-template-columns: repeat(var(--digit-count),minmax(0,1fr)); gap: 3px; }
.scoreboard-digit { position: relative; display: grid; place-items: center; min-width: 0; height: 39px; border: 1px solid #204c36; border-radius: 5px; background: linear-gradient(180deg,#244c38 0%,#244c38 49%,#193f2d 50%,#214b35 100%); color: #e2f6da; font-family: 'Courier New',monospace; font-size: clamp(12px,calc(140px / var(--digit-count)),25px); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px #0004; box-shadow: inset 0 1px 0 #ffffff16,0 2px 2px #173c2922; }
.scoreboard-digit:after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #081e1560; box-shadow: 0 1px 0 #ffffff08; pointer-events: none; }
@media(max-width:760px) { .scoreboard { max-width: 430px; padding: 15px; } .scoreboard-panels { gap: 14px; } .scoreboard-digit { height: 37px; } }