/* =========================================================
   ST. AUGUSTINE ACADEMIC FOUNDATION
   Extracted from the original single-file website.
   Original CSS block order is preserved.
========================================================= */


/* ===== SOURCE STYLE BLOCK: inline-style-1 ===== */
/* =========================
   BASIC
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial,sans-serif;
    background:linear-gradient(135deg,#eef5ff,#ffffff,#eef8ff);
    color:#333;
    transition:background .35s ease,color .35s ease;
}


/* =========================
   HEADER
========================= */

header{
    background:linear-gradient(135deg,#082f5c,#125b91,#0b3d70);
    color:white;
    padding:12px 5%;
    min-height:115px;
    display:flex;
    align-items:center;
    position:relative;
    z-index:1000;
    box-shadow:0 4px 15px rgba(0,0,0,.25);
}

.logo-area{
    width:120px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.school-logo{
    width:120px;
    height:120px;
    object-fit:contain;
    border-radius:50%;
    background:white;
    padding:6px;
    box-shadow:0 3px 12px rgba(0,0,0,.3);
}

.school-heading{
    flex:1;
    text-align:center;
}

.school-slogan{
    color:#ffd166 !important;
    font-size:12px !important;
    font-weight:600;
    letter-spacing:1px;
    margin:0 0 4px 0 !important;
    text-transform:uppercase;
}

.school-heading h1{
    font-size:30px;
    font-weight:bold;
    letter-spacing:1px;
}

.school-heading p{
    margin-top:6px;
    font-size:15px;
    color:#dbeafe;
}


/* =========================
   NAVIGATION
========================= */

nav{
    width:100%;
    position:absolute;
    bottom:-43px;
    left:0;
    background:#06294f;
    padding:11px;
    text-align:center;
    box-shadow:0 3px 8px rgba(0,0,0,.2);
}

nav a{
    color:white;
    text-decoration:none;
    margin:0 18px;
    font-size:18px;
    font-weight:bold;
    display:inline-block;
    padding:5px 8px;
    transition:.3s;
}

nav a:hover{
    color:#ffd166;
    transform:scale(1.08);
}


/* =========================
   DARK MODE BUTTON
========================= */

.theme-toggle{
    position:absolute;
    right:18px;
    top:15px;

    border:2px solid rgba(255,255,255,.55);

    background:rgba(0,0,0,.20);

    color:white;

    width:48px;
    height:48px;

    border-radius:50%;

    font-size:23px;

    cursor:pointer;

    display:flex;
    justify-content:center;
    align-items:center;

    transition:.3s;

    z-index:20;
}

.theme-toggle:hover{
    transform:rotate(15deg) scale(1.08);
    background:rgba(255,255,255,.15);
}


/* =========================
   HERO
========================= */

.hero{
    min-height:620px;

    background:
        linear-gradient(
            rgba(0,25,55,.58),
            rgba(0,25,55,.68)
        ),
        url("school.jpeg") center/cover no-repeat;

    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    color:white;
    padding:40px 20px;
}

.hero-content{
    max-width:900px;
    margin-top:380px;
}

.hero h2{
    font-size:48px;
    margin-bottom:18px;
    text-shadow:3px 3px 8px rgba(0,0,0,.6);
}

.hero p{
    font-size:21px;
    margin-bottom:30px;
}


/* =========================
   GENERAL BUTTON
========================= */

.btn{
    display:inline-block;
    background:#ffd166;
    color:#17202a;
    padding:14px 30px;
    text-decoration:none;
    border-radius:30px;
    font-weight:bold;
    box-shadow:0 5px 15px rgba(0,0,0,.25);
    transition:.3s;
}

.btn:hover{
    background:white;
    transform:scale(1.04);
}



/* =========================================================
   STUDENT PORTFOLIO
========================================================= */

.student-portfolio-container{
    text-align:center;
    padding:35px 10px;
    background:linear-gradient(135deg,#eef5ff,#ffffff);
}

.student-portfolio-btn{
    border:none;
    background:linear-gradient(135deg,#123c69,#1976b8);
    color:white;
    padding:16px 38px;
    border-radius:30px;
    font-size:18px;
    font-weight:bold;
    cursor:pointer;
    box-shadow:0 6px 18px rgba(0,0,0,.22);
    transition:.3s;
}

.student-portfolio-btn:hover{
    transform:translateY(-3px) scale(1.03);
    background:linear-gradient(135deg,#0b3157,#125f96);
}

.student-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.student-class-btn,
.student-roll-btn{
    border:none;
    background:linear-gradient(135deg,#123c69,#1976b8);
    color:white;
    padding:16px 12px;
    border-radius:15px;
    font-size:17px;
    font-weight:bold;
    cursor:pointer;
    box-shadow:0 5px 12px rgba(0,0,0,.18);
    transition:.3s;
}

.student-class-btn:hover,
.student-roll-btn:hover{
    transform:translateY(-4px) scale(1.03);
}

.student-back-btn{
    border:none;
    background:#ffd166;
    color:#17202a;
    padding:11px 25px;
    border-radius:25px;
    font-size:16px;
    font-weight:bold;
    cursor:pointer;
    margin-bottom:25px;
}

.student-back-btn:hover{
    background:#f5bd35;
}

.student-portfolio-title{
    text-align:center;
    color:#123c69;
    font-size:28px;
    margin-bottom:25px;
}

.student-profile{
    max-width:650px;
    margin:0 auto;
    text-align:center;
    background:#f5f9fd;
    border:1px solid #dce6ef;
    border-radius:18px;
    padding:25px;
    line-height:1.9;
}

.student-profile-icon{
    font-size:70px;
    margin-bottom:10px;
}

.student-profile h3{
    color:#123c69;
    font-size:24px;
    margin-bottom:12px;
}

.student-profile-row{
    text-align:left;
    background:white;
    border:1px solid #dce6ef;
    border-radius:10px;
    padding:12px 15px;
    margin-top:10px;
}

.student-profile-row strong{
    color:#123c69;
}

body.dark-mode .student-portfolio-container{
    background:#151f29;
}

body.dark-mode .student-portfolio-title{
    color:#8ecbff;
}

body.dark-mode .student-profile{
    background:#22313f;
    border-color:#3a4e61;
}

body.dark-mode .student-profile-row{
    background:#1d2935;
    border-color:#34485b;
    color:#eeeeee;
}

body.dark-mode .student-profile-row strong{
    color:#8ecbff;
}

@media(max-width:900px){
    .student-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:600px){
    .student-grid{
        grid-template-columns:1fr;
    }

    .student-portfolio-btn{
        width:95%;
        max-width:400px;
    }
}


/* =========================================================
   STUDENT PROGRESS REPORTS — 12 MONTHLY REPORTS PER STUDENT
========================================================= */
.student-photo-gallery{margin-top:25px;padding-top:22px;border-top:1px solid #dce6ef}
.student-photo-gallery h4{color:#123c69;font-size:20px;margin-bottom:14px}
.student-photo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.student-photo-item{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:#e8eef5;border:1px solid #d5e0ea;cursor:pointer}
.student-photo-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
.student-photo-item:hover img{transform:scale(1.05)}
.student-photo-number{position:absolute;right:6px;bottom:6px;min-width:25px;height:25px;padding:0 6px;border-radius:20px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.62);color:#fff;font-size:12px;font-weight:700}
.student-photo-missing{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;padding:8px;color:#738294;font-size:12px;line-height:1.35}
body.dark-mode .student-photo-gallery{border-color:#3a4e61}
body.dark-mode .student-photo-gallery h4{color:#8ecbff}
body.dark-mode .student-photo-item{background:#1d2935;border-color:#3a4e61}
body.dark-mode .student-photo-missing{color:#c5d0db}
@media(max-width:700px){.student-photo-grid{grid-template-columns:repeat(2,1fr)}}

/* =========================================================
   STUDENT PASSWORD POPUP
========================================================= */

.student-password-popup{
    display:none;
    position:fixed;
    inset:0;
    z-index:99999;
    background:rgba(0,0,0,.78);
    justify-content:center;
    align-items:center;
    padding:20px;
}

.student-password-box{
    width:min(92%,400px);
    background:white;
    padding:30px;
    border-radius:18px;
    text-align:center;
    box-shadow:0 10px 40px rgba(0,0,0,.4);
}

.student-password-box h2{
    color:#123c69;
    margin-bottom:10px;
}

.student-password-box > p{
    margin:15px 0;
}

#studentPasswordInput{
    width:100%;
    padding:12px;
    font-size:16px;
    border:1px solid #ccc;
    border-radius:8px;
    outline:none;
}

#studentPasswordInput:focus{
    border-color:#1976b8;
    box-shadow:0 0 0 3px rgba(25,118,184,.12);
}

.student-password-actions{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:15px;
    flex-wrap:wrap;
}

.student-password-actions button{
    border:none;
    border-radius:8px;
    padding:11px 22px;
    color:white;
    font-size:15px;
    font-weight:bold;
    cursor:pointer;
}

.student-password-actions button:first-child{
    background:#007bff;
}

.student-password-actions button:last-child{
    background:#777;
}

.student-password-error{
    display:none;
    color:red;
    margin-top:15px;
    font-weight:bold;
}

body.dark-mode .student-password-box{
    background:#22313f;
    color:#eee;
}

body.dark-mode .student-password-box h2{
    color:#8ecbff;
}

body.dark-mode #studentPasswordInput{
    background:#1d2935;
    color:#fff;
    border-color:#526579;
}


/* =========================
   COMMON SECTION
========================= */

.section{
    padding:70px 7%;
    text-align:center;
    background:linear-gradient(135deg,#f4f9ff,#eaf4ff);
}

.section h2{
    color:#123c69;
    font-size:32px;
    margin-bottom:25px;
}

.section-divider{
    width:80px;
    height:4px;
    background:#ffd166;
    margin:-12px auto 25px;
    border-radius:10px;
}


/* =========================
   BUTTONS
========================= */

.explore-button,
.media-btn,
.monthly-report-btn,
.school-info-btn{

    border:none;

    background:
        linear-gradient(
            135deg,
            #123c69,
            #1976b8
        );

    color:white;

    padding:15px 35px;

    border-radius:30px;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

    box-shadow:0 6px 18px rgba(0,0,0,.22);

    transition:.3s;
}

.explore-button:hover,
.media-btn:hover,
.monthly-report-btn:hover,
.school-info-btn:hover{

    transform:translateY(-3px) scale(1.03);

    background:
        linear-gradient(
            135deg,
            #0b3157,
            #125f96
        );
}


/* =========================
   SCHOOL INFO
========================= */

.school-info-container{
    text-align:center;
    padding:35px 10px;
    background:linear-gradient(135deg,#eef5ff,#ffffff);
}

.school-info-btn{
    font-size:18px;
    padding:16px 38px;
}


/* =========================
   POPUP
========================= */

.popup{

    display:none;

    position:fixed;

    inset:0;

    z-index:9999;

    background:rgba(0,0,0,.78);

    overflow-y:auto;

    padding:30px 10px;
}

.popup-box{

    background:white;

    width:94%;

    max-width:1200px;

    margin:20px auto;

    padding:30px;

    border-radius:22px;

    position:relative;

    box-shadow:0 15px 45px rgba(0,0,0,.4);

    animation:popupOpen .25s ease;
}

@keyframes popupOpen{

    from{
        transform:scale(.92);
        opacity:0;
    }

    to{
        transform:scale(1);
        opacity:1;
    }
}

.close-btn{

    position:absolute;

    right:20px;

    top:10px;

    font-size:38px;

    font-weight:bold;

    color:#555;

    cursor:pointer;

    z-index:10;
}

.close-btn:hover{
    color:red;
}

.popup-box>h2{

    text-align:center;

    color:#123c69;

    margin-bottom:30px;

    font-size:30px;
}


/* =========================
   EXPLORE GRID
========================= */

.explore-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;
}

.explore-card{

    background:#f8fbff;

    border:1px solid #dbe5ef;

    border-radius:16px;

    padding:15px;

    text-align:center;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

    transition:.3s;
}

.explore-card:hover{

    transform:translateY(-6px);

    box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.explore-card img{

    width:100%;

    height:210px;

    object-fit:cover;

    border-radius:12px;

    cursor:pointer;
}

.explore-card h3{

    color:#123c69;

    margin-top:15px;

    margin-bottom:8px;
}

.explore-card p{

    color:#000000;

    text-align:justify;

    line-height:1.8;

    font-size:16px;
}


/* =========================
   MEDIA BUTTONS
========================= */

.media-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

    margin:30px 0;
}


/* =========================
   MEDIA GRID
========================= */

.media-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:22px;
}

.media-card{

    background:#f8fbff;

    border:1px solid #dbe5ef;

    border-radius:15px;

    padding:12px;

    text-align:center;
}

.media-card img,
.media-card video{

    width:100%;

    height:220px;

    object-fit:cover;

    border-radius:10px;

    display:block;
}

.media-card img{
    cursor:pointer;
}

.media-card video{
    background:black;
}

.media-card h3{

    color:#123c69;

    margin-top:12px;

    font-size:17px;

    line-height:1.4;
}


/* =========================
   PHOTO LIGHTBOX / SLIDER
========================= */

.photo-lightbox{

    display:none;

    position:fixed;

    inset:0;

    z-index:20000;

    background:rgba(0,0,0,.96);

    justify-content:center;

    align-items:center;

    padding:30px;
}

.photo-lightbox img{

    max-width:88%;

    max-height:86vh;

    object-fit:contain;

    border-radius:10px;

    user-select:none;

    -webkit-user-drag:none;

    box-shadow:0 8px 35px rgba(0,0,0,.5);
}

.photo-close{

    position:absolute;

    top:10px;

    right:25px;

    color:white;

    font-size:45px;

    cursor:pointer;

    z-index:10;
}

.photo-close:hover{
    color:#ffd166;
}


/* PHOTO SLIDER BUTTONS */

.photo-prev,
.photo-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:58px;

    height:58px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.18);

    color:white;

    font-size:38px;

    cursor:pointer;

    z-index:10;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.3s;
}

.photo-prev{
    left:20px;
}

.photo-next{
    right:20px;
}

.photo-prev:hover,
.photo-next:hover{

    background:#ffd166;

    color:#17202a;

    transform:translateY(-50%) scale(1.08);
}

.photo-counter{

    position:absolute;

    bottom:22px;

    left:50%;

    transform:translateX(-50%);

    color:white;

    background:rgba(0,0,0,.55);

    padding:7px 15px;

    border-radius:20px;

    font-size:15px;

    z-index:10;
}


/* =========================
   STAFF GRID
========================= */

.staff-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:22px;
}

.staff-card{

    text-align:center;

    background:
        linear-gradient(
            145deg,
            #f8fbff,
            #eef5fc
        );

    padding:20px;

    border-radius:18px;

    border:1px solid #dce6ef;

    box-shadow:0 5px 15px rgba(0,0,0,.09);

    transition:.3s;
}

.staff-card:hover{

    transform:translateY(-5px);

    box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.staff-card img{

    width:135px;

    height:135px;

    object-fit:cover;

    border-radius:50%;

    display:block;

    margin:0 auto 14px;

    border:4px solid white;

    box-shadow:0 4px 12px rgba(0,0,0,.18);
}

.staff-card h3{

    color:#123c69;

    margin-bottom:7px;

    font-size:19px;
}

.designation{

    color:#1976b8;

    font-weight:bold;

    margin-bottom:7px;

    font-size:15px;
}

.staff-phone{

    color:#000000;

    margin-bottom:4px;
}


/* =========================
   MORE DETAILS BUTTON
========================= */

.more-details-btn{

    margin-top:12px;

    border:none;

    background:
        linear-gradient(
            135deg,
            #123c69,
            #1976b8
        );

    color:white;

    padding:9px 20px;

    border-radius:22px;

    font-size:14px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

    box-shadow:0 4px 10px rgba(0,0,0,.15);
}

.more-details-btn:hover{

    transform:scale(1.05);

    background:
        linear-gradient(
            135deg,
            #0b3157,
            #125f96
        );
}


/* =========================
   STAFF DETAILS
========================= */

.staff-details-page{

    display:none;

    position:fixed;

    inset:0;

    z-index:30000;

    background:rgba(0,0,0,.84);

    overflow-y:auto;

    padding:30px 10px;
}

.staff-details-box{

    background:white;

    width:94%;

    max-width:850px;

    margin:20px auto;

    padding:35px;

    border-radius:22px;

    position:relative;

    box-shadow:0 15px 45px rgba(0,0,0,.4);

    animation:popupOpen .25s ease;
}

.staff-details-back{

    border:none;

    background:#ffd166;

    color:#17202a;

    padding:11px 24px;

    border-radius:25px;

    font-size:15px;

    font-weight:bold;

    cursor:pointer;

    margin-bottom:25px;
}

.staff-details-back:hover{
    background:#f5bd35;
}

.staff-details-content{
    text-align:center;
}

.staff-details-photo{

    width:190px;

    height:190px;

    object-fit:cover;

    border-radius:50%;

    border:5px solid #123c69;

    box-shadow:0 5px 18px rgba(0,0,0,.2);

    margin-bottom:18px;
}

.staff-details-content h1{

    color:#123c69;

    font-size:30px;

    margin-bottom:8px;
}

.staff-details-designation{

    color:#1976b8;

    font-weight:bold;

    font-size:18px;

    margin-bottom:25px;
}

.staff-detail-row{

    text-align:justify;

    background:#f5f9fd;

    border:1px solid #dce6ef;

    border-radius:12px;

    padding:15px 18px;

    margin-top:12px;

    line-height:1.9;

    color:#000000;
}

.staff-detail-row strong{
    color:#123c69;
}

.staff-detail-about{

    text-align:justify;

    background:#f5f9fd;

    border:1px solid #dce6ef;

    border-radius:12px;

    padding:18px;

    margin-top:12px;

    line-height:1.9;

    color:#000000;
}

.staff-detail-about strong{
    color:#123c69;
}


/* =========================
   PAYROLL SOCIAL LINKS
========================= */

.payroll-links{

    display:flex;

    justify-content:center;

    gap:12px;

    flex-wrap:wrap;

    margin-top:22px;
}

.payroll-link{

    display:inline-block;

    text-decoration:none;

    color:white;

    padding:11px 18px;

    border-radius:25px;

    font-size:15px;

    font-weight:bold;

    box-shadow:0 4px 10px rgba(0,0,0,.15);

    transition:.3s;
}

.payroll-link:hover{

    transform:translateY(-3px) scale(1.04);
}

.payroll-whatsapp{
    background:#25D366;
}

.payroll-gmail{
    background:#D44638;
}

.payroll-facebook{
    background:#1877F2;
}


/* =========================
   MONTHLY REPORT
========================= */

.monthly-report-container{

    text-align:center;

    padding:35px 10px;
}

.month-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:18px;

    margin-top:20px;
}

.month-btn{

    border:none;

    padding:16px 12px;

    border-radius:15px;

    font-size:17px;

    font-weight:bold;

    color:white;

    background:
        linear-gradient(
            135deg,
            #123c69,
            #1976b8
        );

    cursor:pointer;

    box-shadow:0 5px 12px rgba(0,0,0,.18);

    transition:.3s;
}

.month-btn:hover{

    transform:translateY(-4px) scale(1.03);
}

.report-back-btn{

    border:none;

    background:#ffd166;

    color:#17202a;

    padding:11px 25px;

    border-radius:25px;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    margin-bottom:25px;
}

.report-title{

    text-align:center;

    color:#123c69;

    font-size:28px;

    margin-bottom:25px;
}


/* =========================
   ABOUT
========================= */

.about{

    max-width:850px;

    margin:auto;

    line-height:2;

    color:#000000;

    font-size:17px;

    text-align:justify;

    font-weight:400;

    background:white;

    padding:30px;

    border-radius:18px;

    box-shadow:0 5px 18px rgba(0,0,0,.08);
}


/* =========================
   PROGRAMS
========================= */

.cards{

    display:flex;

    gap:25px;

    justify-content:center;

    margin-top:30px;

    flex-wrap:wrap;
}

.card{

    background:white;

    width:280px;

    padding:20px;

    border-radius:15px;

    box-shadow:0 6px 20px rgba(0,0,0,.12);
}

.card h3{

    color:#123c69;

    margin-bottom:12px;
}

.card p{

    color:#000000;

    text-align:justify;

    line-height:1.8;

    font-size:16px;
}


/* =========================
   NOTICE
========================= */

.notice{

    background:
        linear-gradient(
            135deg,
            #082f5c,
            #125b91
        );

    color:white;
}

.notice h2{
    color:white;
}

.notice-box{

    background:white;

    color:#000000;

    max-width:800px;

    margin:12px auto;

    padding:17px 20px;

    border-radius:10px;

    text-align:justify;

    line-height:1.8;

    font-size:16px;

    box-shadow:0 4px 12px rgba(0,0,0,.15);
}


/* =========================
   CONTACT
========================= */

.contact{
    background:white;
}

.contact-box{

    max-width:700px;

    margin:auto;

    line-height:2.2;

    font-size:17px;

    color:#000000;

    text-align:left;
}

.contact-box p{

    color:#000000 !important;

    text-align:left;

    line-height:2.2;
}


/* =========================
   LOCATION MAP
========================= */

.location-section{

    padding:70px 7%;

    text-align:center;

    background:linear-gradient(135deg,#eef5ff,#ffffff);
}

.location-section h2{

    color:#123c69;

    font-size:32px;

    margin-bottom:25px;
}

.map-box{

    max-width:1000px;

    margin:25px auto 0;

    background:white;

    padding:12px;

    border-radius:18px;

    box-shadow:0 7px 25px rgba(0,0,0,.15);
}

.map-box iframe{

    width:100%;

    height:420px;

    border:0;

    border-radius:13px;

    display:block;
}

.map-address{

    margin-top:18px;

    font-size:17px;

    line-height:1.8;

    color:#000;
}


/* =========================
   POLICY / TERMS
========================= */

.policy-box{

    max-width:900px;

    margin:auto;

    line-height:1.9;

    text-align:justify;

    color:#000;
}

.policy-box h3{

    color:#123c69;

    margin-top:22px;

    margin-bottom:8px;

    font-size:20px;
}

.policy-box p{

    margin-bottom:12px;
}


/* =========================
   FOOTER
========================= */

footer{

    background:#061f3a;

    color:white;

    text-align:center;

    padding:25px;

    line-height:1.8;
}

footer span{

    color:#ffd166;

    font-weight:bold;
}

.footer-links{

    margin-top:12px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;
}

.footer-links a{

    color:#ffd166;

    text-decoration:none;

    font-weight:bold;

    cursor:pointer;
}

.footer-links a:hover{

    color:white;

    text-decoration:underline;
}


/* =========================
   EASY READING
========================= */

.about,
.card p,
.notice-box,
.contact-box,
.contact-box p,
.explore-card p,
.staff-detail-row,
.staff-detail-about{

    font-family:Arial,sans-serif;

    color:#000000 !important;
}


/* =========================================================
   DARK MODE
========================================================= */

body.dark-mode{

    background:#101820;

    color:#eeeeee;
}

body.dark-mode .section{

    background:linear-gradient(135deg,#151f29,#1b2835);

}

body.dark-mode .section h2{

    color:#8ecbff;
}

body.dark-mode .school-info-container{

    background:#151f29;
}

body.dark-mode .location-section{

    background:#151f29;
}

body.dark-mode .location-section h2{

    color:#8ecbff;
}

body.dark-mode .contact{

    background:#151f29;
}

body.dark-mode .contact-box,
body.dark-mode .contact-box p{

    color:#eeeeee !important;
}

body.dark-mode .about,
body.dark-mode .card,
body.dark-mode .explore-card,
body.dark-mode .media-card,
body.dark-mode .staff-card{

    background:#1d2935;

    border-color:#34485b;

    color:#eeeeee;
}

body.dark-mode .about,
body.dark-mode .card p,
body.dark-mode .explore-card p,
body.dark-mode .staff-phone{

    color:#eeeeee !important;
}

body.dark-mode .card h3,
body.dark-mode .explore-card h3,
body.dark-mode .staff-card h3{

    color:#8ecbff;
}

body.dark-mode .popup-box,
body.dark-mode .staff-details-box{

    background:#18232e;

    color:#eeeeee;
}

body.dark-mode .popup-box>h2,
body.dark-mode .staff-details-content h1,
body.dark-mode .report-title{

    color:#8ecbff;
}

body.dark-mode .staff-detail-row,
body.dark-mode .staff-detail-about{

    background:#22313f;

    border-color:#3a4e61;

    color:#eeeeee;
}

body.dark-mode .staff-detail-row strong,
body.dark-mode .staff-detail-about strong{

    color:#8ecbff;
}

body.dark-mode .staff-details-designation{

    color:#69bfff;
}

body.dark-mode .notice-box{

    background:#1d2935;

    color:#eeeeee;
}

body.dark-mode .map-box{

    background:#1d2935;
}

body.dark-mode .map-address{

    color:#eeeeee;
}

body.dark-mode .policy-box{

    color:#eeeeee;
}

body.dark-mode .policy-box h3{

    color:#8ecbff;
}

body.dark-mode .popup .close-btn{

    color:#ddd;
}


/* =========================
   TABLET
========================= */

@media(max-width:900px){

    .school-heading h1{
        font-size:24px;
    }

    .explore-grid,
    .media-grid,
    .staff-grid{
        grid-template-columns:repeat(2,1fr);
    }

    nav a{

        margin:0 8px;

        font-size:15px;
    }

    .theme-toggle{

        right:10px;

        top:10px;

        width:42px;

        height:42px;

        font-size:20px;
    }
}


/* =========================
   MOBILE
========================= */

@media(max-width:600px){

    header{

        min-height:145px;

        padding:10px;
    }

    .logo-area{
        width:70px;
    }

    .school-logo{

        width:58px;

        height:58px;
    }

    .school-heading h1{

        font-size:17px;

        letter-spacing:0;
    }

    .school-heading p{
        font-size:12px;
    }

    .theme-toggle{

        width:36px;

        height:36px;

        right:6px;

        top:7px;

        font-size:18px;
    }

    nav{

        bottom:-42px;

        padding:9px 2px;
    }

    nav a{

        margin:0 5px;

        font-size:13px;

        padding:5px 3px;
    }

    .hero{
        min-height:520px;
    }

    .hero-content{
        margin-top:60px;
    }

    .hero h2{
        font-size:30px;
    }

    .hero p{
        font-size:17px;
    }

    .section{
        padding:50px 5%;
    }

    .explore-grid,
    .media-grid,
    .staff-grid{
        grid-template-columns:1fr;
    }

    .popup-box{

        width:95%;

        padding:20px;

        margin:10px auto;
    }

    .explore-card img{
        height:210px;
    }

    .media-card img,
    .media-card video{
        height:210px;
    }

    .month-grid{
        grid-template-columns:1fr;
    }

    .month-btn{
        padding:14px;
    }

    .staff-details-box{

        width:95%;

        padding:22px 16px;

        margin:10px auto;
    }

    .staff-details-photo{

        width:145px;

        height:145px;
    }

    .staff-details-content h1{
        font-size:24px;
    }

    .school-info-btn,
    .monthly-report-btn{
        width:95%;
        max-width:400px;
    }

    .about,
    .card p,
    .notice-box,
    .explore-card p,
    .staff-detail-row,
    .staff-detail-about{

        font-size:16px;

        line-height:1.8;

        text-align:justify;

    }

    .contact-box,
    .contact-box p{

        font-size:16px;

        line-height:2;

        color:#000000 !important;

    }

    .payroll-links{
        gap:9px;
    }

    .payroll-link{
        padding:10px 14px;
        font-size:14px;
    }


    /* MOBILE PHOTO SLIDER */

    .photo-lightbox{

        padding:15px;

    }

    .photo-lightbox img{

        max-width:92%;

        max-height:78vh;

    }

    .photo-prev,
    .photo-next{

        width:45px;

        height:45px;

        font-size:28px;

    }

    .photo-prev{

        left:8px;

    }

    .photo-next{

        right:8px;

    }

    .photo-close{

        top:5px;

        right:12px;

        font-size:38px;

    }

    .photo-counter{

        bottom:12px;

        font-size:13px;

    }

    .map-box iframe{

        height:320px;

    }

}


/* =========================================================
   PROFESSIONAL DESIGN ENHANCEMENT
   VISUAL ONLY — EXISTING CONTENT/DATA UNCHANGED
========================================================= */

:root{
    --pro-primary:#123c69;
    --pro-secondary:#1976b8;
    --pro-accent:#f4b942;
    --pro-bg:#f5f8fc;
    --pro-card:#ffffff;
    --pro-text:#17202a;
    --pro-muted:#66788a;
    --pro-shadow:0 12px 35px rgba(18,60,105,.12);
    --pro-radius:18px;
}

body{
    background:var(--pro-bg);
    color:var(--pro-text);
    line-height:1.65;
    letter-spacing:.1px;
}

header{
    position:sticky;
    top:0;
    z-index:1000;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:0 4px 22px rgba(0,0,0,.10);
}

nav a{
    transition:all .25s ease;
    position:relative;
}

nav a::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-5px;
    width:0;
    height:2px;
    background:var(--pro-accent);
    transform:translateX(-50%);
    transition:width .25s ease;
}

nav a:hover::after{
    width:70%;
}

section{
    scroll-margin-top:95px;
}

.media-card,
.staff-card,
.explore-card,
.info-card,
.card{
    border-radius:var(--pro-radius);
    box-shadow:var(--pro-shadow);
    transition:transform .3s ease, box-shadow .3s ease;
    overflow:hidden;
}

.media-card:hover,
.staff-card:hover,
.explore-card:hover,
.info-card:hover,
.card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 42px rgba(18,60,105,.18);
}

.media-card img{
    transition:transform .45s ease;
}

.media-card:hover img{
    transform:scale(1.035);
}

button,
.btn,
a.button{
    transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

button:hover,
.btn:hover,
a.button:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,.14);
}

.hero{
    position:relative;
    overflow:hidden;
}

.hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(7,29,52,.60),
        rgba(7,29,52,.20),
        rgba(7,29,52,.08)
    );
    pointer-events:none;
}

.hero > *{
    position:relative;
    z-index:1;
}

.popup{
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
}

.popup-box{
    border-radius:22px !important;
    box-shadow:0 25px 70px rgba(0,0,0,.25) !important;
    border:1px solid rgba(255,255,255,.35);
}

footer{
    box-shadow:0 -8px 30px rgba(0,0,0,.08);
}

.footer-links a{
    transition:color .25s ease;
}

.footer-links a:hover{
    color:var(--pro-accent);
}

.student-portfolio-container{
    position:relative;
    padding:42px 15px;
    background:
        radial-gradient(circle at 10% 20%,rgba(25,118,184,.10),transparent 30%),
        radial-gradient(circle at 90% 80%,rgba(244,185,66,.12),transparent 30%),
        linear-gradient(135deg,#f8fbff,#eef5fb);
}

.student-portfolio-btn{
    min-width:260px;
    letter-spacing:.4px;
}

.student-grid{
    gap:22px;
}

.student-class-btn,
.student-roll-btn{
    min-height:58px;
}

.student-profile{
    box-shadow:0 14px 38px rgba(18,60,105,.12);
}

@media(max-width:768px){
    header{
        position:relative;
    }

    .hero::after{
        background:linear-gradient(
            180deg,
            rgba(7,29,52,.48),
            rgba(7,29,52,.18)
        );
    }

    .media-card,
    .staff-card,
    .explore-card,
    .info-card,
    .card{
        transform:none !important;
    }

    .student-portfolio-container{
        padding:32px 12px;
    }
}

@media(prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
        transition:none !important;
        animation:none !important;
    }
}


/* =========================================================
   ADMISSION FORM - NEW FEATURE ONLY
========================================================= */
.admission-section{padding:42px 15px;text-align:center;background:linear-gradient(135deg,#f8fbff,#eef5fb)}
.admission-open-btn{border:0;padding:16px 36px;border-radius:30px;background:linear-gradient(135deg,#123c69,#1976b8);color:#fff;font-size:18px;font-weight:700;cursor:pointer;box-shadow:0 8px 22px rgba(18,60,105,.22);transition:.25s}
.admission-open-btn:hover{transform:translateY(-3px);filter:brightness(1.05)}
.admission-form-box{max-width:900px;width:94%;margin:20px auto;background:#fff;border-radius:22px;padding:30px;box-shadow:0 20px 60px rgba(18,60,105,.16)}
.admission-form-title{text-align:center;color:#123c69;margin-bottom:8px}
.admission-form-subtitle{text-align:center;color:#66788a;margin-bottom:25px}
.admission-form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.admission-field{text-align:left}.admission-field.full{grid-column:1/-1}
.admission-field label{display:block;margin-bottom:6px;color:#123c69;font-weight:700}
.admission-field input,.admission-field select,.admission-field textarea{width:100%;padding:12px 14px;border:1px solid #ccd8e4;border-radius:10px;outline:none;font:inherit;background:#fff;box-sizing:border-box}
.admission-field textarea{min-height:110px;resize:vertical}
.admission-field input:focus,.admission-field select:focus,.admission-field textarea:focus{border-color:#1976b8;box-shadow:0 0 0 3px rgba(25,118,184,.10)}
.admission-submit-btn{display:block;width:100%;margin-top:24px;border:0;border-radius:12px;padding:15px;background:linear-gradient(135deg,#123c69,#1976b8);color:#fff;font-size:17px;font-weight:700;cursor:pointer}
.admission-note{margin-top:12px;font-size:13px;color:#66788a;text-align:center}
@media(max-width:650px){.admission-form-grid{grid-template-columns:1fr}.admission-field.full{grid-column:auto}.admission-form-box{padding:20px 15px}}
body.dark-mode .admission-section{background:#151f29}body.dark-mode .admission-form-box{background:#22313f}body.dark-mode .admission-form-title,body.dark-mode .admission-field label{color:#8ecbff}body.dark-mode .admission-field input,body.dark-mode .admission-field select,body.dark-mode .admission-field textarea{background:#1d2935;color:#fff;border-color:#405467}



/* =========================
   SCHOOL REVIEWS / RATINGS
========================= */
.review-section{
    background:linear-gradient(135deg,#f8fbff,#eef6ff);
    padding:42px 6%;
}
.review-section h2{font-size:28px;margin-bottom:18px;}
.review-section>p{font-size:14px!important;max-width:650px!important;margin:0 auto 18px!important;}
.review-summary{
    max-width:720px;
    margin:0 auto 20px;
    display:grid;
    grid-template-columns:170px 1fr;
    gap:28px;
    align-items:center;
    background:#fff;
    border:1px solid #dce6ef;
    border-radius:22px;
    padding:18px;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.review-average{ text-align:center; }
.review-average-number{font-size:38px;font-weight:800;color:#123c69;line-height:1;}
.review-stars-display{color:#f5b301;font-size:22px;letter-spacing:2px;margin:8px 0;}
.review-count{color:#667085;font-size:14px;}
.review-form{
    max-width:720px; margin:0 auto 24px; background:#fff; padding:20px;
    border:1px solid #dce6ef; border-radius:22px; box-shadow:0 8px 25px rgba(0,0,0,.07);
}
.review-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.review-field{display:flex;flex-direction:column;gap:7px;}
.review-field.full{grid-column:1/-1;}
.review-field label{font-weight:700;color:#123c69;}
.review-field input,.review-field select,.review-field textarea{
    width:100%; padding:13px 14px; border:1px solid #ccd8e5; border-radius:12px;
    font:inherit; outline:none; transition:.2s; background:#fff;
}
.review-field textarea{min-height:90px;resize:vertical;}
.review-field input:focus,.review-field select:focus,.review-field textarea:focus{border-color:#1976b8;box-shadow:0 0 0 3px rgba(25,118,184,.12);}
.star-picker{display:flex;gap:6px;flex-direction:row-reverse;justify-content:flex-end;}
.star-picker input{display:none;}
.star-picker label{font-size:30px;color:#cbd5e1;cursor:pointer;line-height:1;transition:.15s;}
.star-picker label:hover,.star-picker label:hover~label,.star-picker input:checked~label{color:#f5b301;transform:scale(1.05);}
.review-submit{margin-top:18px;border:none;background:linear-gradient(135deg,#123c69,#1976b8);color:#fff;padding:13px 28px;border-radius:28px;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.15);}
.review-submit:disabled{opacity:.6;cursor:not-allowed;}
.review-message{margin-top:12px;font-weight:600;display:none;}
.review-list{max-width:820px;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.review-card{background:#fff;border:1px solid #dce6ef;border-radius:15px;padding:16px;text-align:left;box-shadow:0 6px 18px rgba(0,0,0,.06);}
.review-card-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;}
.review-card-name{font-weight:800;color:#123c69;font-size:17px;}
.review-role{font-size:13px;color:#667085;margin-top:3px;}
.review-card-stars{color:#f5b301;font-size:18px;white-space:nowrap;}
.review-card-text{margin-top:13px;line-height:1.7;color:#344054;}
.review-date{margin-top:12px;font-size:12px;color:#98a2b3;}
.review-empty{text-align:center;color:#667085;padding:25px;grid-column:1/-1;}
.admin-review-link{margin-top:20px;background:transparent;border:1px solid #cbd5e1;color:#475467;padding:8px 15px;border-radius:20px;cursor:pointer;font-size:13px;}
.admin-panel{display:none;max-width:820px;margin:25px auto 0;background:#fff;border:1px solid #dce6ef;border-radius:20px;padding:25px;}
.admin-pending-card{border:1px solid #e4e7ec;border-radius:14px;padding:16px;margin-top:12px;}
.admin-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}
.admin-actions button{border:none;border-radius:20px;padding:8px 16px;font-weight:700;cursor:pointer;}
.admin-approve{background:#12b76a;color:white;}
.admin-delete{background:#f04438;color:white;}
.admin-login{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;}
.admin-login input{padding:11px;border:1px solid #ccd8e5;border-radius:10px;}
@media(max-width:700px){
    .review-summary{grid-template-columns:1fr;}
    .review-form-grid,.review-list,.admin-login{grid-template-columns:1fr;}
    .review-field.full{grid-column:auto;}
    .review-card-head{flex-direction:column;}
}
body.dark-mode .review-section{background:#151f29;}
body.dark-mode .review-summary,body.dark-mode .review-form,body.dark-mode .review-card,body.dark-mode .admin-panel{background:#22313f;border-color:#3a4e61;}
body.dark-mode .review-average-number,body.dark-mode .review-field label,body.dark-mode .review-card-name{color:#8ecbff;}
body.dark-mode .review-card-text{color:#eee;}
body.dark-mode .review-field input,body.dark-mode .review-field select,body.dark-mode .review-field textarea,body.dark-mode .admin-login input{background:#1d2935;color:#eee;border-color:#3a4e61;}



/* =========================================================
   2026 ACCESSIBILITY, MOBILE & UX IMPROVEMENTS
========================================================= */
.skip-link{
    position:fixed;left:12px;top:-60px;z-index:100000;
    background:#fff;color:#123c69;padding:10px 15px;border-radius:8px;
    box-shadow:0 5px 18px rgba(0,0,0,.25);font-weight:700;text-decoration:none;
}
.skip-link:focus{top:12px;}

.menu-toggle{
    display:none;position:absolute;right:62px;top:15px;width:48px;height:48px;
    border:2px solid rgba(255,255,255,.55);border-radius:50%;
    background:rgba(0,0,0,.20);color:#fff;font-size:23px;cursor:pointer;
    align-items:center;justify-content:center;z-index:21;
}

.contact-link{color:#0b63a8;text-decoration:none;font-weight:700;overflow-wrap:anywhere;}
.contact-link:hover{text-decoration:underline;}
.contact-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}
.contact-action-btn{
    display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
    background:linear-gradient(135deg,#123c69,#1976b8);color:#fff!important;
    padding:10px 16px;border-radius:24px;font-weight:700;line-height:1.2;
}
.review-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;}
.review-privacy-note{font-size:12px;color:#667085;margin-top:10px;line-height:1.5;}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
    outline:3px solid #ffd166;outline-offset:3px;
}

body.dark-mode .contact-link{color:#8ecbff;}
body.dark-mode .review-privacy-note{color:#c5d0db;}

@media(max-width:768px){
    header{min-height:105px!important;padding-right:115px!important;}
    .menu-toggle{display:flex;}
    .theme-toggle{right:8px!important;top:15px!important;}
    nav#mainNav{
        display:none;position:absolute;left:0;right:0;top:100%;bottom:auto!important;
        width:100%;padding:10px 14px 15px;background:#06294f;
        box-shadow:0 8px 20px rgba(0,0,0,.2);text-align:left;
    }
    nav#mainNav.open{display:grid;grid-template-columns:1fr 1fr;gap:5px;}
    nav#mainNav a{margin:0!important;padding:11px 12px!important;font-size:15px!important;border-radius:8px;}
    nav#mainNav a:hover{background:rgba(255,255,255,.09);transform:none;}
    nav#mainNav a::after{display:none;}
    .school-heading{padding:0 4px;}
    .school-heading h1{font-size:18px!important;line-height:1.25;}
    .school-heading p{font-size:12px!important;}
    .hero{min-height:480px!important;}
    .hero-content{margin-top:20px!important;}
    .hero h2{font-size:31px!important;line-height:1.2;}
    .hero p{font-size:17px!important;}
    .contact-actions{flex-direction:column;align-items:stretch;}
    .contact-action-btn{width:100%;}
}

@media(max-width:480px){
    header{padding:10px 105px 10px 8px!important;min-height:96px!important;}
    .logo-area{width:56px!important;}
    .school-logo{width:52px!important;height:52px!important;}
    .menu-toggle{right:54px;top:12px;width:38px;height:38px;font-size:19px;}
    .theme-toggle{right:7px!important;top:12px!important;width:38px!important;height:38px!important;}
    nav#mainNav.open{grid-template-columns:1fr;}
    .school-heading h1{font-size:15px!important;}
    .school-heading p{font-size:11px!important;}
    .review-section{padding:34px 4%;}
    .review-summary,.review-form{border-radius:16px;}
}


/* =========================================================
   PREMIUM 10/10 VISUAL POLISH — NON-DESTRUCTIVE OVERRIDES
   Existing content, IDs, JS and Firebase logic remain intact.
========================================================= */
:root{
    --premium-navy:#082f5c;
    --premium-blue:#176fa8;
    --premium-sky:#eaf4ff;
    --premium-gold:#f2bd4b;
    --premium-ink:#15283b;
    --premium-muted:#66788a;
    --premium-surface:#ffffff;
    --premium-border:rgba(18,60,105,.11);
    --premium-shadow:0 16px 46px rgba(18,60,105,.12);
    --premium-shadow-hover:0 22px 58px rgba(18,60,105,.18);
}

body{
    background:
      radial-gradient(circle at 8% 4%,rgba(25,118,184,.08),transparent 24%),
      radial-gradient(circle at 94% 18%,rgba(242,189,75,.09),transparent 20%),
      #f6f9fc;
    color:var(--premium-ink);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

/* HEADER */
header{
    background:linear-gradient(118deg,#06294f 0%,#0b4678 48%,#126a9f 100%);
    border-bottom:1px solid rgba(255,255,255,.12);
    box-shadow:0 10px 30px rgba(3,31,58,.22);
}
.school-logo{
    border:4px solid rgba(255,255,255,.88);
    box-shadow:0 8px 24px rgba(0,0,0,.24);
}
.school-heading h1{
    text-shadow:0 2px 12px rgba(0,0,0,.22);
    letter-spacing:.8px;
}
.school-heading p{opacity:.93;letter-spacing:.4px;}
nav{
    background:rgba(5,35,66,.96);
    border-top:1px solid rgba(255,255,255,.08);
}
nav a{border-radius:10px;}
nav a:hover{
    background:rgba(255,255,255,.07);
    color:#ffe08a;
}
.theme-toggle,.menu-toggle{
    box-shadow:0 7px 22px rgba(0,0,0,.20);
    backdrop-filter:blur(8px);
}

/* HERO */
.hero{
    min-height:650px;
    background:
      linear-gradient(90deg,rgba(4,29,55,.78) 0%,rgba(4,29,55,.55) 48%,rgba(4,29,55,.25) 100%),
      url("school.jpeg") center/cover no-repeat;
    isolation:isolate;
}
.hero::before{
    content:"";
    position:absolute;
    left:-8%;bottom:-150px;
    width:440px;height:440px;border-radius:50%;
    background:rgba(255,255,255,.08);
    filter:blur(2px);
    pointer-events:none;
}
.hero-content{
    max-width:980px;
    margin-top:330px;
    padding:26px 28px;
    border-radius:26px;
    background:linear-gradient(135deg,rgba(5,35,66,.36),rgba(5,35,66,.10));
    border:1px solid rgba(255,255,255,.16);
    backdrop-filter:blur(3px);
}
.hero h2{
    font-size:50px;
    line-height:1.12;
    letter-spacing:-.4px;
    text-shadow:0 6px 24px rgba(0,0,0,.45);
}
.hero p{color:#f3f8ff;letter-spacing:.3px;}
.btn{
    background:linear-gradient(135deg,#ffd875,#f2b735);
    box-shadow:0 10px 26px rgba(242,183,53,.26);
    border:1px solid rgba(255,255,255,.55);
}
.btn:hover{background:#fff;color:#0a3b66;}

/* SECTION RHYTHM */
.section,.location-section,.student-portfolio-container,.school-info-container,.admission-section,.review-section{
    position:relative;
}
.section{padding-top:78px;padding-bottom:78px;}
.section h2,.location-section h2{
    letter-spacing:-.35px;
    font-weight:800;
}
.section-divider{
    width:72px;height:4px;
    background:linear-gradient(90deg,#f2bd4b,#ffd873);
    box-shadow:0 3px 10px rgba(242,189,75,.24);
}

/* PREMIUM CARD SYSTEM */
.card,.explore-card,.media-card,.staff-card,.student-profile,.review-summary,.review-form,.review-card,.admin-panel,.map-box,.about,.admission-form-box{
    border:1px solid var(--premium-border) !important;
    box-shadow:var(--premium-shadow) !important;
}
.card,.explore-card,.media-card,.staff-card,.review-card{
    background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
}
.card:hover,.explore-card:hover,.media-card:hover,.staff-card:hover,.review-card:hover{
    transform:translateY(-7px);
    box-shadow:var(--premium-shadow-hover) !important;
}
.explore-card img,.media-card img{
    box-shadow:0 8px 22px rgba(18,60,105,.09);
}
.staff-card img{
    border:5px solid #fff;
    box-shadow:0 9px 26px rgba(18,60,105,.18);
}

/* BUTTON CONSISTENCY */
.explore-button,.media-btn,.monthly-report-btn,.school-info-btn,.student-portfolio-btn,.student-class-btn,.student-roll-btn,.month-btn,.review-submit,.admission-submit-btn,.admission-open-btn{
    background:linear-gradient(135deg,#0b3f70,#1976b8);
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 9px 24px rgba(18,60,105,.20);
    letter-spacing:.15px;
}
.explore-button:hover,.media-btn:hover,.monthly-report-btn:hover,.school-info-btn:hover,.student-portfolio-btn:hover,.student-class-btn:hover,.student-roll-btn:hover,.month-btn:hover,.review-submit:hover,.admission-submit-btn:hover,.admission-open-btn:hover{
    background:linear-gradient(135deg,#082f5c,#0f629b);
    filter:none;
}
.student-back-btn,.report-back-btn,.staff-details-back{
    background:linear-gradient(135deg,#ffd66e,#f2b735);
    box-shadow:0 7px 18px rgba(242,183,53,.18);
}

/* ABOUT / NOTICE */
.about{
    border-radius:24px;
    padding:34px 36px;
}
.notice{
    background:linear-gradient(135deg,#06294f 0%,#0b4f82 58%,#146e9e 100%);
}
.notice-box{
    border:1px solid rgba(255,255,255,.22);
    border-left:5px solid var(--premium-gold);
    border-radius:14px;
    box-shadow:0 10px 28px rgba(0,0,0,.12);
}

/* POPUPS */
.popup,.staff-details-page,.student-password-popup{
    background:rgba(4,20,35,.76);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}
.popup-box,.staff-details-box,.student-password-box{
    border:1px solid rgba(255,255,255,.48);
    box-shadow:0 28px 90px rgba(0,0,0,.34) !important;
}
.close-btn{
    width:42px;height:42px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:rgba(18,60,105,.07);
    font-size:30px;
}
.close-btn:hover{background:#fff0f0;}

/* ADMISSION */
.admission-section{
    padding:56px 15px;
    background:
      radial-gradient(circle at 20% 20%,rgba(25,118,184,.10),transparent 30%),
      linear-gradient(135deg,#f7fbff,#eef6fd);
}
.admission-open-btn{padding:17px 42px;}
.admission-form-box{border-radius:26px;}
.admission-field input,.admission-field select,.admission-field textarea,
.review-field input,.review-field select,.review-field textarea{
    border:1px solid #d6e1eb;
    box-shadow:inset 0 1px 2px rgba(18,60,105,.03);
}

/* REVIEWS */
.review-section{
    background:
      radial-gradient(circle at 85% 10%,rgba(242,189,75,.10),transparent 24%),
      linear-gradient(135deg,#f8fbff,#eef6ff);
}
.review-summary{
    border-radius:24px;
    background:linear-gradient(135deg,#fff,#f9fcff);
}
.review-average-number{
    background:linear-gradient(135deg,#0b3f70,#1976b8);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.review-stars-display,.review-card-stars{filter:drop-shadow(0 2px 5px rgba(245,179,1,.18));}
.review-card{border-radius:18px;}
.admin-review-link:hover{background:#f3f7fb;color:#123c69;}

/* CONTACT + MAP */
.contact-box{
    max-width:760px;
    background:linear-gradient(180deg,#fff,#fbfdff);
    border:1px solid var(--premium-border);
    border-radius:22px;
    padding:28px 32px;
    box-shadow:var(--premium-shadow);
}
.contact-box p{
    padding:5px 0;
    border-bottom:1px dashed rgba(18,60,105,.10);
}
.contact-box p:last-child{border-bottom:none;}
.contact-action-btn{box-shadow:0 7px 18px rgba(18,60,105,.17);}
.map-box{border-radius:22px;padding:14px;}
.map-box iframe{border-radius:16px;}

/* FOOTER */
footer{
    position:relative;
    background:linear-gradient(135deg,#031b31,#06294f 60%,#0a3d69);
    padding:34px 20px;
    border-top:1px solid rgba(255,255,255,.08);
}
footer::before{
    content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
    width:min(760px,75%);height:1px;background:linear-gradient(90deg,transparent,rgba(255,216,117,.65),transparent);
}
.footer-links a{padding:5px 2px;}

/* DARK MODE PREMIUM */
body.dark-mode{
    background:#0e1720;
}
body.dark-mode .card,body.dark-mode .explore-card,body.dark-mode .media-card,body.dark-mode .staff-card,
body.dark-mode .review-card,body.dark-mode .review-summary,body.dark-mode .review-form,body.dark-mode .admin-panel,
body.dark-mode .about,body.dark-mode .contact-box,body.dark-mode .admission-form-box{
    background:linear-gradient(180deg,#1d2b38,#182530) !important;
    border-color:rgba(142,203,255,.12) !important;
    box-shadow:0 16px 40px rgba(0,0,0,.22) !important;
}
body.dark-mode .contact-box p{border-bottom-color:rgba(255,255,255,.08);}
body.dark-mode .notice-box{border-left-color:#f2bd4b;}

/* RESPONSIVE PREMIUM */
@media(max-width:900px){
    .hero{min-height:560px;}
    .hero-content{margin-top:150px;max-width:760px;}
    .hero h2{font-size:40px;}
}
@media(max-width:768px){
    .section{padding-top:58px;padding-bottom:58px;}
    .hero{min-height:510px!important;padding:35px 18px;}
    .hero-content{
        margin-top:35px!important;
        padding:22px 18px;
        border-radius:20px;
        backdrop-filter:blur(2px);
    }
    .hero h2{font-size:32px!important;}
    .hero p{font-size:16px!important;}
    .contact-box{padding:22px 18px;}
    .about{padding:26px 22px;}
}
@media(max-width:480px){
    .hero{min-height:470px!important;}
    .hero h2{font-size:28px!important;}
    .btn{padding:12px 23px;}
    .section h2,.location-section h2{font-size:27px;}
    .review-average-number{font-size:36px;}
}



/* =========================================================
   MINIMAL REVIEW / RATING — VISUAL ONLY
   Keeps all existing review functionality unchanged.
========================================================= */
.review-section{
    padding:24px 5% !important;
    background:linear-gradient(180deg,#f8fbff,#f4f8fc) !important;
}
.review-section h2{
    font-size:21px !important;
    margin-bottom:9px !important;
    font-weight:750 !important;
}
.review-section .section-divider{
    width:46px !important;
    height:3px !important;
    margin:-2px auto 10px !important;
}
.review-section > p{
    max-width:540px !important;
    margin:0 auto 12px !important;
    font-size:12.5px !important;
    line-height:1.55 !important;
    color:#667085 !important;
}
.review-summary{
    max-width:580px !important;
    grid-template-columns:105px 1fr !important;
    gap:14px !important;
    padding:12px 14px !important;
    margin:0 auto 12px !important;
    border-radius:14px !important;
    box-shadow:0 3px 10px rgba(18,60,105,.055) !important;
}
.review-average-number{
    font-size:27px !important;
}
.review-stars-display{
    font-size:16px !important;
    letter-spacing:1px !important;
    margin:4px 0 !important;
}
.review-count{
    font-size:11px !important;
}
.review-summary h3{
    font-size:14px !important;
    margin-bottom:4px !important;
}
.review-summary p{
    font-size:11.5px !important;
    line-height:1.45 !important;
}
.review-form{
    max-width:580px !important;
    margin:0 auto 12px !important;
    padding:14px !important;
    border-radius:14px !important;
    box-shadow:0 3px 10px rgba(18,60,105,.05) !important;
}
.review-form > h3{
    font-size:15px !important;
    margin-bottom:10px !important;
}
.review-form-grid{
    gap:10px !important;
}
.review-field{
    gap:4px !important;
}
.review-field label{
    font-size:12px !important;
}
.review-field input,
.review-field select,
.review-field textarea{
    padding:9px 10px !important;
    border-radius:9px !important;
    font-size:13px !important;
}
.review-field textarea{
    min-height:64px !important;
}
.star-picker{
    gap:3px !important;
}
.star-picker label{
    font-size:23px !important;
}
.review-submit{
    margin-top:11px !important;
    padding:9px 18px !important;
    border-radius:20px !important;
    font-size:13px !important;
    box-shadow:0 3px 9px rgba(18,60,105,.11) !important;
}
.review-message{
    margin-top:8px !important;
    font-size:12px !important;
}
.review-list{
    max-width:620px !important;
    gap:10px !important;
}
.review-card{
    padding:11px 12px !important;
    border-radius:11px !important;
    box-shadow:0 2px 8px rgba(18,60,105,.045) !important;
}
.review-card-name{
    font-size:13px !important;
}
.review-role,
.review-date{
    font-size:10.5px !important;
}
.review-card-stars{
    font-size:14px !important;
}
.review-card-text{
    margin-top:7px !important;
    font-size:12px !important;
    line-height:1.5 !important;
}
.admin-review-link{
    margin-top:11px !important;
    padding:6px 11px !important;
    font-size:10.5px !important;
    opacity:.72;
}
.admin-panel{
    max-width:620px !important;
    margin-top:13px !important;
    padding:14px !important;
    border-radius:13px !important;
}
body.dark-mode .review-section{
    background:#151f29 !important;
}
@media(max-width:700px){
    .review-section{padding:20px 4% !important;}
    .review-summary{
        grid-template-columns:90px 1fr !important;
        text-align:left !important;
        gap:10px !important;
    }
    .review-average{text-align:center !important;}
    .review-form-grid{grid-template-columns:1fr !important;}
    .review-list{grid-template-columns:1fr !important;}
    .review-card-head{flex-direction:row !important;}
}
@media(max-width:430px){
    .review-summary{grid-template-columns:1fr !important;text-align:center !important;}
    .review-summary h3{margin-top:2px !important;}
    .review-card-head{flex-direction:column !important;gap:4px !important;}
}

/* ===== SOURCE STYLE BLOCK: saaf-final-polish ===== */
/* =========================================================
   FINAL TARGETED POLISH
   Keeps the original site design while improving HERO and
   unified form success/error states.
========================================================= */

/* HERO: keep school.jpeg, remove box-like feel */
.hero{
    position:relative !important;
    min-height:640px !important;
    background:
        linear-gradient(
            180deg,
            rgba(0,25,55,.28) 0%,
            rgba(0,25,55,.35) 42%,
            rgba(0,25,55,.76) 100%
        ),
        url("school.jpeg") center/cover no-repeat !important;
    display:flex !important;
    justify-content:center !important;
    align-items:flex-end !important;
    text-align:center !important;
    padding:70px 20px 72px !important;
    overflow:hidden !important;
}

.hero::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    background:
        radial-gradient(circle at 50% 25%,rgba(255,255,255,.08),transparent 32%),
        linear-gradient(90deg,rgba(7,29,52,.12),transparent 35%,transparent 65%,rgba(7,29,52,.12)) !important;
    pointer-events:none !important;
}

.hero-content{
    position:relative !important;
    z-index:2 !important;
    max-width:920px !important;
    margin-top:0 !important;
    padding:0 12px !important;
}

.hero h2{
    font-size:clamp(36px,4.7vw,58px) !important;
    line-height:1.08 !important;
    margin-bottom:14px !important;
    color:#fff !important;
    letter-spacing:-.6px !important;
    text-shadow:0 5px 20px rgba(0,0,0,.55) !important;
}

.hero p{
    font-size:clamp(16px,1.8vw,21px) !important;
    margin-bottom:26px !important;
    color:#f5f9ff !important;
    text-shadow:0 3px 12px rgba(0,0,0,.45) !important;
}

.hero .btn{
    padding:13px 28px !important;
    border-radius:28px !important;
    box-shadow:0 8px 22px rgba(0,0,0,.28) !important;
}

/* Suggestion & Feedback popup */
.suggestion-feedback-box{
    max-width:820px !important;
    width:94% !important;
    padding:30px !important;
}

.suggestion-feedback-title{
    text-align:center;
    color:#123c69;
    margin-bottom:8px;
    font-size:29px;
}

.suggestion-feedback-subtitle{
    max-width:650px;
    margin:0 auto 24px;
    color:#66788a;
    text-align:center;
    line-height:1.7;
}

.suggestion-feedback-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.suggestion-feedback-field{
    text-align:left;
}

.suggestion-feedback-field.full{
    grid-column:1/-1;
}

.suggestion-feedback-field label{
    display:block;
    margin-bottom:7px;
    color:#123c69;
    font-weight:700;
    font-size:15px;
}

.suggestion-feedback-field input,
.suggestion-feedback-field select,
.suggestion-feedback-field textarea{
    width:100%;
    padding:13px 14px;
    border:1px solid #ccd8e4;
    border-radius:10px;
    outline:none;
    font:inherit;
    background:#fff;
    box-sizing:border-box;
}

.suggestion-feedback-field textarea{
    min-height:145px;
    resize:vertical;
    line-height:1.7;
}

.suggestion-feedback-field input:focus,
.suggestion-feedback-field select:focus,
.suggestion-feedback-field textarea:focus{
    border-color:#1976b8;
    box-shadow:0 0 0 3px rgba(25,118,184,.10);
}

.suggestion-feedback-note{
    margin-top:16px;
    padding:12px 14px;
    border-radius:10px;
    background:#f7f9fc;
    color:#667085;
    font-size:13px;
    line-height:1.6;
    text-align:left;
}

/* Review: star-only compact */
.review-form.star-only-review{
    max-width:520px !important;
    text-align:center;
}

.star-only-review .review-field{
    align-items:center;
}

.star-only-review .star-picker{
    justify-content:center !important;
    margin:8px 0 4px;
}

.star-only-review .star-picker label{
    font-size:42px !important;
}

.rating-total-box{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    margin:0 auto 14px;
    padding:8px 14px;
    border:1px solid #e4e7ec;
    border-radius:999px;
    background:#f8fafc;
    color:#475467;
    font-size:14px;
    font-weight:700;
}

.rating-total-box strong{
    color:#123c69;
    font-size:17px;
}

body.dark-mode .rating-total-box{
    background:#1d2935;
    border-color:#405467;
    color:#d0d5dd;
}

body.dark-mode .rating-total-box strong{
    color:#8ecbff;
}

/* Unified submit state */
.form-submit-status{
    display:none;
    margin-top:14px;
    padding:12px 14px;
    border-radius:10px;
    font-weight:700;
    text-align:center;
}

.form-submit-status.success{
    display:block;
    background:#ecfdf3;
    border:1px solid #abefc6;
    color:#067647;
}

.form-submit-status.error{
    display:block;
    background:#fef3f2;
    border:1px solid #fecdca;
    color:#b42318;
}

.submit-success{
    background:#198754 !important;
    color:#fff !important;
}

.submit-error{
    background:#b42318 !important;
    color:#fff !important;
}

body.dark-mode .suggestion-feedback-box{
    background:#22313f !important;
}

body.dark-mode .suggestion-feedback-title,
body.dark-mode .suggestion-feedback-field label{
    color:#8ecbff !important;
}

body.dark-mode .suggestion-feedback-subtitle,
body.dark-mode .suggestion-feedback-note{
    color:#c5d0db !important;
}

body.dark-mode .suggestion-feedback-note{
    background:#1d2935 !important;
}

body.dark-mode .suggestion-feedback-field input,
body.dark-mode .suggestion-feedback-field select,
body.dark-mode .suggestion-feedback-field textarea{
    background:#1d2935 !important;
    color:#fff !important;
    border-color:#405467 !important;
}

@media(max-width:650px){
    .hero{
        min-height:540px !important;
        padding:55px 16px 52px !important;
        background:
            linear-gradient(180deg,rgba(0,25,55,.20),rgba(0,25,55,.72)),
            url("school.jpeg") center/cover no-repeat !important;
    }

    .hero h2{
        font-size:32px !important;
    }

    .suggestion-feedback-grid{
        grid-template-columns:1fr;
    }

    .suggestion-feedback-field.full{
        grid-column:auto;
    }

    .suggestion-feedback-box{
        padding:22px 16px !important;
    }
}

/* ===== SOURCE STYLE BLOCK: hero-clear-final-override ===== */
/* =========================================================
   HERO FINAL: CLEAR PHOTO, NO OVERLAY
========================================================= */
.hero{
    min-height:640px !important;
    background:url("school.jpeg") center/cover no-repeat !important;
    display:flex !important;
    justify-content:center !important;
    align-items:flex-end !important;
    text-align:center !important;
    padding:0 20px 34px !important;
    position:relative !important;
    overflow:hidden !important;
}

/* Remove every previously-added hero overlay */
.hero::before,
.hero::after{
    content:none !important;
    display:none !important;
    background:none !important;
}

.hero-content{
    position:relative !important;
    z-index:1 !important;
    max-width:900px !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    box-shadow:none !important;
}

/* Keep only the Welcome heading on the photo */
.hero h2{
    margin:0 !important;
    padding:8px 16px !important;
    font-size:clamp(28px,3.4vw,44px) !important;
    line-height:1.1 !important;
    color:#ffffff !important;
    background:transparent !important;
    text-shadow:
        0 2px 4px rgba(0,0,0,.95),
        0 5px 16px rgba(0,0,0,.75) !important;
}

/* Hide hero subtitle/button so the school photo stays clear */
.hero p,
.hero .btn{
    display:none !important;
}

@media(max-width:650px){
    .hero{
        min-height:520px !important;
        background:url("school.jpeg") center/cover no-repeat !important;
        padding:0 12px 26px !important;
    }

    .hero h2{
        font-size:30px !important;
        padding:7px 10px !important;
    }
}

/* ===== SOURCE STYLE BLOCK: student-portfolio-admin-upload-styles ===== */
.student-admin-bar{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin:0 auto 22px}
.student-admin-login-btn,.student-admin-logout-btn{border:0;border-radius:24px;padding:10px 18px;font-size:14px;font-weight:700;cursor:pointer}
.student-admin-login-btn{background:#123c69;color:#fff}.student-admin-logout-btn{background:#b42318;color:#fff}
.student-admin-state{font-size:13px;color:#667085;font-weight:700}.student-admin-state.active{color:#087443}
.student-main-photo-wrap{width:150px;height:150px;margin:0 auto 14px;border-radius:50%;overflow:hidden;border:4px solid #fff;box-shadow:0 5px 18px rgba(0,0,0,.16);background:#e8eef5;display:flex;align-items:center;justify-content:center}
.student-main-photo{width:100%;height:100%;object-fit:cover;display:block}.student-main-photo-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:58px;color:#728197;background:#eef3f8}
.student-profile-photo-admin{display:none;justify-content:center;margin:8px 0 16px}body.student-admin-mode .student-profile-photo-admin{display:flex}
.student-month-label{position:absolute;left:7px;bottom:7px;z-index:3;background:rgba(0,0,0,.68);color:#fff;padding:4px 7px;border-radius:10px;font-size:11px;font-weight:700}
.student-photo-upload-btn{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;border:0;border-radius:20px;padding:8px 11px;font-size:12px;font-weight:800;color:#fff;background:rgba(18,60,105,.94);cursor:pointer;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.25)}
body.student-admin-mode .student-photo-upload-btn{display:block}
.student-upload-progress{display:none;margin:12px auto 0;max-width:620px;padding:10px 13px;border-radius:10px;font-size:13px;font-weight:700}.student-upload-progress.show{display:block}
.student-upload-progress.info{color:#175cd3;background:#eff8ff;border:1px solid #b2ddff}.student-upload-progress.success{color:#067647;background:#ecfdf3;border:1px solid #abefc6}.student-upload-progress.error{color:#b42318;background:#fef3f2;border:1px solid #fecdca}
.student-admin-box{max-width:430px!important}.student-admin-form{display:grid;gap:14px}.student-admin-form label{display:block;text-align:left;color:#123c69;font-weight:700;margin-bottom:6px}
.student-admin-form input{width:100%;padding:12px 13px;border:1px solid #ccd8e4;border-radius:10px;outline:none;font:inherit}.student-admin-form input:focus{border-color:#1976b8;box-shadow:0 0 0 3px rgba(25,118,184,.10)}
.student-admin-submit{border:0;border-radius:12px;padding:13px 16px;background:linear-gradient(135deg,#123c69,#1976b8);color:#fff;font-size:16px;font-weight:800;cursor:pointer}
.student-admin-message{display:none;padding:10px 12px;border-radius:9px;font-size:13px;font-weight:700}.student-admin-message.show{display:block}.student-admin-message.error{color:#b42318;background:#fef3f2}.student-admin-message.success{color:#067647;background:#ecfdf3}
body.dark-mode .student-admin-state{color:#c5d0db}body.dark-mode .student-admin-state.active{color:#6ce9a6}body.dark-mode .student-main-photo-wrap{border-color:#34485b;background:#1d2935}body.dark-mode .student-main-photo-placeholder{background:#1d2935;color:#a9b8c8}body.dark-mode .student-admin-form label{color:#8ecbff}body.dark-mode .student-admin-form input{background:#1d2935;color:#fff;border-color:#405467}
@media(max-width:600px){.student-main-photo-wrap{width:125px;height:125px}.student-photo-upload-btn{font-size:11px;padding:7px 9px}.student-month-label{font-size:10px}}

/* ===== SOURCE STYLE BLOCK: student-photo-fullscreen-fix ===== */
#photoLightbox{
    display:none;
    position:fixed !important;
    inset:0 !important;
    z-index:999999 !important;
    background:rgba(0,0,0,.96) !important;
    align-items:center !important;
    justify-content:center !important;
    padding:24px !important;
}
#photoLightbox #lightboxImage,
#photoLightbox img{
    max-width:92vw !important;
    max-height:88vh !important;
    width:auto !important;
    height:auto !important;
    object-fit:contain !important;
    border-radius:10px !important;
    box-shadow:0 10px 35px rgba(0,0,0,.45) !important;
}
#photoLightbox .photo-prev,
#photoLightbox .photo-next{
    z-index:1000000 !important;
}
#photoLightbox .photo-close{
    z-index:1000001 !important;
}
@media(max-width:600px){
    #photoLightbox{
        padding:10px !important;
    }
    #photoLightbox #lightboxImage,
    #photoLightbox img{
        max-width:96vw !important;
        max-height:82vh !important;
    }
}

/* ===== SOURCE STYLE BLOCK: website-admin-management-styles ===== */
.global-admin-entry{
    max-width:900px;margin:16px auto 22px;padding:4px 12px;
    display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;
    opacity:.88;
}
.global-admin-entry button{
    border:1px solid #d0d5dd;border-radius:16px;padding:6px 10px;font-weight:700;cursor:pointer;
    background:#f8fafc;color:#344054;font-size:11px;box-shadow:none;
}
.global-admin-entry #globalAdminLogoutBtn{background:#fff1f0;color:#b42318;border-color:#fda29b}
.global-admin-entry #globalAdminPanelBtn{background:#eef6ff;color:#175cd3;border-color:#b2ddff}
.global-admin-entry span{font-size:10px;color:#98a2b3;font-weight:600}
.global-admin-entry span.active{color:#087443}
.website-admin-panel-box{max-width:1100px}
.admin-local-mode-note{
    margin:-10px auto 20px;max-width:920px;padding:12px 14px;border-radius:12px;
    background:#fff8e6;border:1px solid #f5cf7a;color:#6b4e00;line-height:1.55;font-size:13px
}
.website-admin-tabs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.website-admin-tabs button,.admin-primary-btn,.admin-secondary-btn,.admin-danger-btn{
    border:0;border-radius:22px;padding:10px 16px;font-weight:800;cursor:pointer
}
.website-admin-tabs button,.admin-primary-btn{background:#123c69;color:#fff}
.admin-secondary-btn{background:#667085;color:#fff}
.admin-danger-btn{background:#b42318;color:#fff}
.website-admin-tab{max-width:980px;margin:auto}
.admin-section-head{
    display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap;
    margin-bottom:16px;text-align:left
}
.admin-section-head h3{color:#123c69;margin-bottom:4px}
.admin-section-head p{color:#667085;font-size:13px}
.admin-head-actions{display:flex;gap:8px;flex-wrap:wrap}
.admin-manager-list{display:grid;gap:10px}
.admin-manager-row{
    display:grid;grid-template-columns:70px 1fr auto;gap:12px;align-items:center;
    padding:11px;border:1px solid #dce6ef;border-radius:14px;background:#f9fbfd;text-align:left
}
.admin-manager-row img,.admin-manager-row video{
    width:68px;height:58px;border-radius:9px;object-fit:cover;background:#e8eef5
}
.admin-manager-title{font-weight:800;color:#123c69}
.admin-manager-meta{font-size:12px;color:#667085;line-height:1.5}
.admin-manager-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.admin-manager-actions button{
    border:0;border-radius:18px;padding:8px 12px;font-weight:700;cursor:pointer;background:#1976b8;color:#fff
}
.admin-manager-actions .danger{background:#b42318}
.admin-filter-row{
    display:grid;grid-template-columns:auto minmax(150px,220px) minmax(180px,1fr) auto;
    gap:10px;align-items:center;margin-bottom:15px
}
.admin-export-btn{
    border:0;border-radius:10px;padding:11px 16px;background:#087443;color:#fff;
    font-weight:800;cursor:pointer;white-space:nowrap;box-shadow:0 3px 10px rgba(8,116,67,.18)
}
.admin-export-btn:hover{transform:translateY(-1px);filter:brightness(.96)}
.admin-export-btn:disabled{opacity:.65;cursor:wait;transform:none}
.admin-filter-row select,.admin-filter-row input{
    padding:10px;border:1px solid #ccd8e4;border-radius:10px;font:inherit
}
.admin-editor-popup{z-index:120000}
.admin-editor-box{max-width:760px}
.admin-edit-form{text-align:left}
.admin-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.admin-form-grid label{display:flex;flex-direction:column;gap:6px;color:#123c69;font-weight:800}
.admin-form-grid label.full{grid-column:1/-1}
.admin-form-grid input,.admin-form-grid select,.admin-form-grid textarea{
    width:100%;padding:11px 12px;border:1px solid #ccd8e4;border-radius:10px;font:inherit;background:#fff
}
.admin-form-grid small{font-size:11px;color:#667085;font-weight:400}
.admin-editor-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:18px}
.gallery-description{font-size:13px;line-height:1.55;color:#667085;margin-top:8px;text-align:left}
.staff-card .admin-inline-edit,.media-card .admin-inline-edit{
    display:none;margin-top:8px;border:0;border-radius:17px;padding:7px 11px;background:#f4b942;color:#17202a;font-weight:800;cursor:pointer
}
body.student-admin-mode .staff-card .admin-inline-edit,
body.student-admin-mode .media-card .admin-inline-edit{display:inline-block}
.admin-student-profile-edit{
    display:none;margin:0 auto 14px;border:0;border-radius:22px;padding:9px 15px;background:#f4b942;color:#17202a;font-weight:800;cursor:pointer
}
body.student-admin-mode .admin-student-profile-edit{display:inline-block}
body.dark-mode .admin-local-mode-note{background:#342d17;color:#ffe7a6;border-color:#735d20}
body.dark-mode .admin-manager-row{background:#1d2935;border-color:#3a4e61}
body.dark-mode .admin-manager-title,body.dark-mode .admin-section-head h3,body.dark-mode .admin-form-grid label{color:#8ecbff}
body.dark-mode .admin-manager-meta,body.dark-mode .admin-section-head p,body.dark-mode .gallery-description{color:#c5d0db}
body.dark-mode .admin-filter-row select,body.dark-mode .admin-filter-row input,
body.dark-mode .admin-form-grid input,body.dark-mode .admin-form-grid select,body.dark-mode .admin-form-grid textarea{
    background:#1d2935;color:#fff;border-color:#405467
}
@media(max-width:650px){
    .global-admin-entry{margin:12px auto 18px;padding:4px 8px}
    .admin-manager-row{grid-template-columns:58px 1fr}
    .admin-manager-row img,.admin-manager-row video{width:56px;height:50px}
    .admin-manager-actions{grid-column:1/-1;justify-content:flex-start}
    .admin-form-grid{grid-template-columns:1fr}
    .admin-form-grid label.full{grid-column:auto}
    .admin-filter-row{grid-template-columns:1fr}
}

/* ===== SOURCE STYLE BLOCK: notice-monthly-admin-visibility-fix ===== */
#adminNoticesTabButton{
    background:#8a5a00 !important;
    color:#fff !important;
}
#adminMonthlyReportsTabButton{
    background:#176b4d !important;
    color:#fff !important;
}
body.student-admin-mode #monthlyPhotos .admin-inline-edit{
    display:inline-block !important;
}

/* ===== SOURCE STYLE BLOCK: staff-login-leave-css ===== */
/* =========================================================
   STAFF LOGIN + LEAVE APPLICATION
   Added without changing the existing website layout.
   ========================================================= */
.staff-login-entry{
    max-width:620px;
    margin:10px auto 24px;
    padding:4px 8px;
    text-align:center;
}
.staff-login-entry button{
    border:0;
    border-radius:24px;
    padding:11px 22px;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
    background:linear-gradient(135deg,#0f6b50,#15966f);
    color:#fff;
    box-shadow:0 5px 14px rgba(15,107,80,.18);
}
.staff-login-entry button:hover{transform:translateY(-2px)}
.staff-login-status{
    display:block;
    margin-top:8px;
    font-size:13px;
    color:#667085;
}
.staff-login-box,.staff-leave-box{
    width:min(94%,620px);
    margin:20px auto;
    background:#fff;
    border-radius:20px;
    padding:28px;
    position:relative;
    box-shadow:0 18px 55px rgba(0,0,0,.22);
}
.staff-login-box h2,.staff-leave-box h2{
    color:#123c69;
    text-align:center;
    margin-bottom:8px;
}
.staff-login-subtitle,.staff-leave-subtitle{
    text-align:center;
    color:#667085;
    margin-bottom:22px;
    font-size:14px;
}
.staff-login-field,.staff-leave-field{
    text-align:left;
    margin-top:14px;
}
.staff-login-field label,.staff-leave-field label{
    display:block;
    margin-bottom:6px;
    color:#123c69;
    font-weight:700;
}
.staff-login-field input,.staff-leave-field input,
.staff-leave-field select,.staff-leave-field textarea{
    width:100%;
    padding:12px 13px;
    border:1px solid #ccd8e5;
    border-radius:10px;
    outline:none;
    font:inherit;
    background:#fff;
}
.staff-leave-field textarea{min-height:110px;resize:vertical}
.staff-login-field input:focus,.staff-leave-field input:focus,
.staff-leave-field select:focus,.staff-leave-field textarea:focus{
    border-color:#1976b8;
    box-shadow:0 0 0 3px rgba(25,118,184,.10);
}
.staff-login-submit,.staff-leave-submit{
    width:100%;
    margin-top:20px;
    border:0;
    border-radius:12px;
    padding:13px;
    background:linear-gradient(135deg,#123c69,#1976b8);
    color:#fff;
    font-size:16px;
    font-weight:800;
    cursor:pointer;
}
.staff-login-message{
    display:none;
    margin-top:14px;
    padding:10px 12px;
    border-radius:9px;
    font-weight:700;
    font-size:14px;
}
.staff-login-message.show{display:block}
.staff-login-message.error{background:#fff1f0;color:#b42318}
.staff-login-message.success{background:#ecfdf3;color:#067647}
.staff-identity-card{
    background:#f5f9fd;
    border:1px solid #dce6ef;
    border-radius:12px;
    padding:13px 15px;
    margin:15px 0 6px;
    text-align:left;
    line-height:1.7;
}
.staff-leave-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}
.staff-leave-field.full{grid-column:1/-1}
.staff-logout-btn{
    margin-top:12px;
    border:1px solid #d0d5dd;
    background:#fff;
    color:#475467;
    border-radius:20px;
    padding:8px 14px;
    cursor:pointer;
    font-weight:700;
}
body.dark-mode .staff-login-box,
body.dark-mode .staff-leave-box{background:#22313f;color:#eee}
body.dark-mode .staff-login-box h2,
body.dark-mode .staff-leave-box h2,
body.dark-mode .staff-login-field label,
body.dark-mode .staff-leave-field label{color:#8ecbff}
body.dark-mode .staff-login-field input,
body.dark-mode .staff-leave-field input,
body.dark-mode .staff-leave-field select,
body.dark-mode .staff-leave-field textarea{
    background:#1d2935;color:#fff;border-color:#405467
}
body.dark-mode .staff-identity-card{background:#1d2935;border-color:#405467}
@media(max-width:650px){
    .staff-leave-grid{grid-template-columns:1fr}
    .staff-leave-field.full{grid-column:auto}
    .staff-login-box,.staff-leave-box{padding:22px 16px}
}

/* ===== SOURCE STYLE BLOCK: admin-staff-login-layout-tweak ===== */
/* Admin first and more prominent; Staff second and smaller */
#globalAdminEntry{
    margin-bottom:8px !important;
}
#globalAdminLoginBtn{
    padding:13px 28px !important;
    font-size:16px !important;
    border-radius:26px !important;
    min-width:190px;
}
#staffLoginEntry{
    margin-top:0 !important;
    margin-bottom:22px !important;
}
#staffLoginOpenBtn{
    padding:8px 16px !important;
    font-size:12px !important;
    border-radius:20px !important;
    min-width:135px;
}
#staffLeaveOpenBtn,
#staffApprovedLeaveOpenBtn,
#staffUpcomingPlanOpenBtn,
#staffLogoutBtn{
    padding:8px 16px !important;
    font-size:12px !important;
    border-radius:20px !important;
}
#staffLoginStatus{
    font-size:12px !important;
}
@media(max-width:650px){
    #globalAdminLoginBtn{
        padding:12px 22px !important;
        font-size:15px !important;
        min-width:170px;
    }
    #staffLoginOpenBtn{
        padding:8px 14px !important;
        font-size:12px !important;
        min-width:125px;
    }
}

/* ===== SOURCE STYLE BLOCK: final-admin-staff-login-row ===== */
.login-access-row{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    margin:18px auto 24px;
    padding:0 12px;
}

.login-access-row #globalAdminEntry,
.login-access-row #staffLoginEntry{
    margin:0 !important;
    padding:0 !important;
    max-width:none !important;
    display:flex;
    align-items:center;
    gap:8px;
}

.login-access-row #globalAdminStatus,
.login-access-row #staffLoginStatus{
    display:none !important;
}

/* Admin login: professional navy button */
#globalAdminLoginBtn{
    border:1px solid rgba(18,60,105,.15) !important;
    background:linear-gradient(135deg,#123c69,#1976b8) !important;
    color:#fff !important;
    padding:12px 24px !important;
    min-width:180px !important;
    font-size:15px !important;
    font-weight:800 !important;
    letter-spacing:.25px;
    border-radius:24px !important;
    box-shadow:0 7px 18px rgba(18,60,105,.22) !important;
}

#globalAdminLoginBtn:hover{
    transform:translateY(-2px) !important;
    box-shadow:0 10px 24px rgba(18,60,105,.28) !important;
    filter:brightness(1.03);
}

/* Staff login: smaller but matching */
#staffLoginOpenBtn{
    border:1px solid rgba(15,107,80,.14) !important;
    background:linear-gradient(135deg,#117a5c,#15966f) !important;
    color:#fff !important;
    padding:10px 18px !important;
    min-width:145px !important;
    font-size:13px !important;
    font-weight:800 !important;
    letter-spacing:.2px;
    border-radius:22px !important;
    box-shadow:0 6px 16px rgba(15,107,80,.18) !important;
}

#staffLoginOpenBtn:hover{
    transform:translateY(-2px) !important;
    box-shadow:0 9px 22px rgba(15,107,80,.24) !important;
    filter:brightness(1.03);
}

/* Logged-in action buttons keep same row */
#globalAdminPanelBtn,
#globalAdminLogoutBtn,
#staffLeaveOpenBtn,
#staffApprovedLeaveOpenBtn,
#staffUpcomingPlanOpenBtn,
#staffLogoutBtn{
    margin:0 !important;
}

/* Mobile: keep neat and centered */
@media(max-width:560px){
    .login-access-row{
        gap:9px;
    }

    #globalAdminLoginBtn{
        min-width:160px !important;
        padding:11px 18px !important;
        font-size:14px !important;
    }

    #staffLoginOpenBtn{
        min-width:125px !important;
        padding:9px 14px !important;
        font-size:12px !important;
    }
}

/* ===== SOURCE STYLE BLOCK: final-access-footer-css ===== */
/* Secure access sits above the final school footer. */
.site-access-section{
    position:relative;
    margin:34px 0 0;
    padding:24px 16px 19px;
    text-align:center;
    background:linear-gradient(180deg,#f7fafc,#eef4f8);
    border-top:1px solid rgba(18,60,105,.10);
}
.site-access-section::before{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    width:min(580px,72%);
    height:3px;
    transform:translateX(-50%);
    border-radius:0 0 999px 999px;
    background:linear-gradient(90deg,transparent,#d6a73a,transparent);
}
.site-access-label{
    margin:0 0 10px;
    color:#667085;
    font-size:11px;
    font-weight:900;
    letter-spacing:1.2px;
    text-transform:uppercase;
}
.site-access-section .login-access-row{
    margin:0 auto !important;
}
.contact-facebook-btn{
    gap:8px;
    background:linear-gradient(135deg,#1877f2,#0f5fc4) !important;
}
.contact-facebook-btn:hover{
    color:#fff !important;
    transform:translateY(-2px);
    box-shadow:0 10px 23px rgba(24,119,242,.28);
}
.contact-facebook-icon{
    width:22px;
    height:22px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#fff;
    color:#1877f2;
    font-family:Arial,sans-serif;
    font-size:16px;
    font-weight:900;
    line-height:1;
}
.footer-school-info{color:#fff;line-height:1.75}
.footer-school-info strong{color:#ffd166;font-weight:900}
.footer-link-divider{color:rgba(255,255,255,.42);font-weight:400}
body.dark-mode .site-access-section{
    background:linear-gradient(180deg,#17232e,#111c25);
    border-top-color:#405467;
}
body.dark-mode .site-access-label{color:#cbd5e1}
@media(max-width:560px){
    .site-access-section{margin-top:22px;padding:21px 10px 17px}
    .site-access-section .login-access-row{gap:9px}
    .footer-links{gap:10px}
}

/* ===== SOURCE STYLE BLOCK: staff-accounts-admin-css ===== */
.staff-account-list{
    display:grid;
    gap:12px;
    margin-top:18px;
}
.staff-account-row{
    display:grid;
    grid-template-columns:minmax(180px,1fr) minmax(120px,.7fr) minmax(180px,1fr) auto;
    gap:12px;
    align-items:center;
    padding:14px;
    border:1px solid #dce6ef;
    border-radius:14px;
    background:#f9fbfd;
}
.staff-account-name{
    font-weight:800;
    color:#123c69;
}
.staff-account-id{
    font-size:13px;
    color:#667085;
}
.staff-account-row input{
    width:100%;
    padding:10px 12px;
    border:1px solid #ccd8e5;
    border-radius:9px;
    font:inherit;
    outline:none;
}
.staff-account-row input:focus{
    border-color:#1976b8;
    box-shadow:0 0 0 3px rgba(25,118,184,.10);
}
.staff-reset-btn{
    border:0;
    border-radius:20px;
    padding:10px 15px;
    background:#123c69;
    color:#fff;
    font-weight:800;
    cursor:pointer;
    white-space:nowrap;
}
.staff-reset-btn:hover{
    background:#0b3157;
}
.staff-account-note{
    margin-top:12px;
    padding:12px 14px;
    border-radius:12px;
    background:#fff7e6;
    border:1px solid #f0d79a;
    color:#7a5600;
    line-height:1.6;
    font-size:14px;
}
body.dark-mode .staff-account-row{
    background:#1d2935;
    border-color:#405467;
}
body.dark-mode .staff-account-name{color:#8ecbff}
body.dark-mode .staff-account-id{color:#cbd5e1}
body.dark-mode .staff-account-row input{
    background:#18232e;
    color:#fff;
    border-color:#405467;
}
@media(max-width:850px){
    .staff-account-row{
        grid-template-columns:1fr 1fr;
    }
    .staff-reset-btn{
        width:100%;
    }
}
@media(max-width:560px){
    .staff-account-row{
        grid-template-columns:1fr;
    }
}

/* ===== SOURCE STYLE BLOCK: leave-approval-workflow-css ===== */
/* =========================================================
   LEAVE APPLICATION STATUS + PRINCIPAL APPROVAL
   Existing website design preserved.
   ========================================================= */
.staff-leave-history{
    margin-top:24px;
    padding-top:20px;
    border-top:1px solid #dce6ef;
}
.staff-leave-history h3{
    color:#123c69;
    margin-bottom:12px;
    text-align:left;
}
.leave-history-list,
.principal-leave-list{
    display:grid;
    gap:12px;
}
.leave-status-card,
.principal-leave-card{
    border:1px solid #dce6ef;
    border-radius:14px;
    background:#f9fbfd;
    padding:15px;
    text-align:left;
    line-height:1.65;
}
.leave-status-head,
.principal-leave-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    flex-wrap:wrap;
}
.leave-status-name{
    color:#123c69;
    font-weight:800;
}
.leave-status-badge{
    display:inline-block;
    border-radius:999px;
    padding:5px 10px;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
}
.leave-status-badge.pending{
    background:#fff7e6;
    color:#8a5b00;
    border:1px solid #f0d79a;
}
.leave-status-badge.approved{
    background:#ecfdf3;
    color:#067647;
    border:1px solid #abefc6;
}
.leave-status-badge.rejected{
    background:#fff1f0;
    color:#b42318;
    border:1px solid #fecdca;
}
.leave-status-meta{
    margin-top:8px;
    color:#475467;
    font-size:14px;
}
.leave-status-reason{
    margin-top:10px;
    background:#fff;
    border-radius:10px;
    padding:10px 12px;
    border:1px solid #e4e7ec;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
}
.leave-history-empty,
.principal-leave-empty{
    padding:18px;
    border:1px dashed #cbd5e1;
    border-radius:12px;
    color:#667085;
    text-align:center;
}
.principal-leave-box{
    width:min(96%,900px);
    margin:20px auto;
    background:#fff;
    border-radius:20px;
    padding:28px;
    position:relative;
    box-shadow:0 18px 55px rgba(0,0,0,.22);
}
.principal-leave-box h2{
    color:#123c69;
    text-align:center;
    margin-bottom:7px;
}
.principal-leave-subtitle{
    text-align:center;
    color:#667085;
    margin-bottom:22px;
}
.principal-leave-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:14px;
}
.principal-leave-actions button{
    border:0;
    border-radius:22px;
    padding:9px 16px;
    color:#fff;
    font-weight:800;
    cursor:pointer;
}
.principal-approve-btn{background:#12b76a}
.principal-reject-btn{background:#f04438}
.principal-leave-actions button:disabled{
    opacity:.55;
    cursor:not-allowed;
}
.principal-refresh-btn{
    display:block;
    margin:0 auto 18px;
    border:1px solid #ccd8e5;
    background:#fff;
    color:#123c69;
    border-radius:22px;
    padding:9px 16px;
    font-weight:800;
    cursor:pointer;
}
body.dark-mode .staff-leave-history{border-color:#405467}
body.dark-mode .staff-leave-history h3,
body.dark-mode .leave-status-name,
body.dark-mode .principal-leave-box h2{color:#8ecbff}
body.dark-mode .leave-status-card,
body.dark-mode .principal-leave-card,
body.dark-mode .principal-leave-box{
    background:#22313f;
    border-color:#405467;
    color:#eee;
}
body.dark-mode .leave-status-meta{color:#cbd5e1}
body.dark-mode .leave-status-reason{
    background:#1d2935;
    border-color:#405467;
    color:#eee;
}
body.dark-mode .principal-refresh-btn{
    background:#1d2935;
    color:#8ecbff;
    border-color:#405467;
}
@media(max-width:650px){
    .principal-leave-box{padding:22px 15px}
}

/* ===== SOURCE STYLE BLOCK: approved-staff-leave-css ===== */
/* =========================================================
   APPROVED STAFF LEAVE — visible to every logged-in staff member.
   Only the staff name and approved leave date are shown.
   ========================================================= */
#staffApprovedLeaveOpenBtn{
    border:1px solid rgba(8,47,92,.14) !important;
    background:linear-gradient(135deg,#176b4d,#198754) !important;
    color:#fff !important;
    box-shadow:0 6px 16px rgba(23,107,77,.18) !important;
}
#staffApprovedLeaveOpenBtn:hover{
    transform:translateY(-2px) !important;
    box-shadow:0 9px 22px rgba(23,107,77,.25) !important;
}
.approved-leave-box{
    width:min(94%,680px);
    max-height:86vh;
    overflow:auto;
    margin:20px auto;
    background:#fff;
    border-radius:20px;
    padding:28px;
    position:relative;
    box-shadow:0 18px 55px rgba(0,0,0,.22);
}
.approved-leave-box h2{
    color:#123c69;
    text-align:center;
    margin:0 0 20px;
}
.approved-leave-table-head,
.approved-leave-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:18px;
    align-items:center;
}
.approved-leave-table-head{
    padding:0 15px 9px;
    color:#667085;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.4px;
}
.approved-leave-table-head span:last-child,
.approved-leave-date{text-align:right}
.approved-leave-list{display:grid;gap:10px}
.approved-leave-row{
    padding:14px 15px;
    border:1px solid #dce6ef;
    border-radius:13px;
    background:#f8fbfd;
}
.approved-leave-name{
    color:#123c69;
    font-weight:800;
    overflow-wrap:anywhere;
}
.approved-leave-date{
    color:#176b4d;
    font-weight:800;
    white-space:nowrap;
}
.approved-leave-empty{
    padding:22px;
    border:1px dashed #cbd5e1;
    border-radius:12px;
    color:#667085;
    text-align:center;
}
body.dark-mode .approved-leave-box{
    background:#22313f;
    color:#eee;
}
body.dark-mode .approved-leave-box h2,
body.dark-mode .approved-leave-name{color:#8ecbff}
body.dark-mode .approved-leave-table-head{color:#cbd5e1}
body.dark-mode .approved-leave-row{
    background:#1d2935;
    border-color:#405467;
}
body.dark-mode .approved-leave-date{color:#75d7a6}
@media(max-width:560px){
    .approved-leave-box{padding:24px 15px}
    .approved-leave-table-head,
    .approved-leave-row{gap:10px}
    .approved-leave-row{padding:13px 12px}
    .approved-leave-name,
    .approved-leave-date{font-size:13px}
}

/* ===== SOURCE STYLE BLOCK: upcoming-plan-css ===== */
/* =========================================================
   UPCOMING PLAN — Principal writes; logged-in staff read.
   ========================================================= */
#staffUpcomingPlanOpenBtn{
    border:1px solid rgba(91,33,182,.14) !important;
    background:linear-gradient(135deg,#5b21b6,#7c3aed) !important;
    color:#fff !important;
    box-shadow:0 6px 16px rgba(91,33,182,.20) !important;
}
#staffUpcomingPlanOpenBtn:hover{
    transform:translateY(-2px) !important;
    box-shadow:0 9px 22px rgba(91,33,182,.27) !important;
}
.upcoming-plan-box{
    width:min(96%,1120px);
    max-height:88vh;
    overflow:auto;
    margin:20px auto;
    background:#fff;
    border-radius:20px;
    padding:28px;
    position:relative;
    box-shadow:0 18px 55px rgba(0,0,0,.22);
}
.upcoming-plan-box h2{
    color:#123c69;
    text-align:center;
    margin:0 0 20px;
}
.principal-plan-form-wrap{
    display:none;
    margin-bottom:24px;
    padding:18px;
    border:1px solid #ddd6fe;
    border-radius:15px;
    background:#faf8ff;
}
.principal-plan-form-wrap.show{display:block}
.principal-plan-form-wrap h3{
    margin:0 0 14px;
    color:#5b21b6;
    text-align:left;
}
.upcoming-plan-form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}
.upcoming-plan-field.full{grid-column:1/-1}
.upcoming-plan-field label{
    display:block;
    margin-bottom:6px;
    color:#123c69;
    font-size:13px;
    font-weight:800;
}
.upcoming-plan-field input,
.upcoming-plan-field textarea{
    width:100%;
    padding:11px 12px;
    border:1px solid #ccd8e5;
    border-radius:10px;
    outline:none;
    font:inherit;
    background:#fff;
}
.upcoming-plan-field textarea{
    min-height:84px;
    resize:vertical;
}
.upcoming-plan-field input:focus,
.upcoming-plan-field textarea:focus{
    border-color:#7c3aed;
    box-shadow:0 0 0 3px rgba(124,58,237,.10);
}
.upcoming-plan-submit{
    width:100%;
    margin-top:13px;
    border:0;
    border-radius:11px;
    padding:12px;
    background:linear-gradient(135deg,#5b21b6,#7c3aed);
    color:#fff;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
}
.upcoming-plan-message{
    display:none;
    margin-top:11px;
    padding:10px 12px;
    border-radius:10px;
    font-size:13px;
    font-weight:700;
}
.upcoming-plan-message.show{display:block}
.upcoming-plan-message.success{background:#ecfdf3;color:#067647}
.upcoming-plan-message.error{background:#fff1f0;color:#b42318}
.upcoming-plan-table-head,
.upcoming-plan-row{
    display:grid;
    grid-template-columns:125px 145px minmax(160px,1fr) minmax(145px,.75fr) minmax(170px,1fr);
    gap:13px;
    align-items:center;
}
.upcoming-plan-table-head{
    padding:0 15px 9px;
    color:#667085;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.35px;
}
.upcoming-plan-list{display:grid;gap:10px}
.upcoming-plan-row{
    padding:14px 15px;
    border:1px solid #dce6ef;
    border-radius:13px;
    background:#f8fbfd;
}
.upcoming-plan-date{color:#5b21b6;font-weight:800;white-space:nowrap}
.upcoming-plan-information-date{color:#9a3412;font-weight:800;white-space:nowrap}
.upcoming-plan-name{color:#123c69;font-weight:800;overflow-wrap:anywhere}
.upcoming-plan-incharge{color:#176b4d;font-weight:750;overflow-wrap:anywhere}
.upcoming-plan-remarks{color:#475467;overflow-wrap:anywhere;white-space:pre-wrap}
.upcoming-plan-empty{
    padding:22px;
    border:1px dashed #cbd5e1;
    border-radius:12px;
    color:#667085;
    text-align:center;
}
body.dark-mode .upcoming-plan-box{
    background:#22313f;
    color:#eee;
}
body.dark-mode .upcoming-plan-box h2,
body.dark-mode .upcoming-plan-name,
body.dark-mode .upcoming-plan-field label{color:#8ecbff}
body.dark-mode .principal-plan-form-wrap{
    background:#1d2935;
    border-color:#55416f;
}
body.dark-mode .principal-plan-form-wrap h3,
body.dark-mode .upcoming-plan-date{color:#c4b5fd}
body.dark-mode .upcoming-plan-field input,
body.dark-mode .upcoming-plan-field textarea{
    background:#18232e;
    color:#fff;
    border-color:#405467;
}
body.dark-mode .upcoming-plan-table-head{color:#cbd5e1}
body.dark-mode .upcoming-plan-row{
    background:#1d2935;
    border-color:#405467;
}
body.dark-mode .upcoming-plan-incharge{color:#75d7a6}
body.dark-mode .upcoming-plan-information-date{color:#fdba74}
body.dark-mode .upcoming-plan-remarks{color:#d0d5dd}
@media(max-width:900px){
    .upcoming-plan-form-grid{grid-template-columns:1fr}
    .upcoming-plan-field.full{grid-column:auto}
    .upcoming-plan-table-head{display:none}
    .upcoming-plan-row{grid-template-columns:1fr;gap:7px}
    .upcoming-plan-row span::before{
        display:block;
        margin-bottom:2px;
        color:#667085;
        font-size:10px;
        font-weight:800;
        letter-spacing:.35px;
    }
    .upcoming-plan-date::before{content:"PLAN DATE"}
    .upcoming-plan-information-date::before{content:"INFORMATION DATE"}
    .upcoming-plan-name::before{content:"PLAN NAME"}
    .upcoming-plan-incharge::before{content:"INCHARGE"}
    .upcoming-plan-remarks::before{content:"REMARKS"}
}
@media(max-width:560px){
    .upcoming-plan-box{padding:24px 15px}
    .principal-plan-form-wrap{padding:15px}
}

/* ===== SOURCE STYLE BLOCK: smart-staff-dashboard-css ===== */
/* =========================================================
   ST. AUGUSTINE SMART STAFF DASHBOARD
   One professional hub for announcements, leave and plans.
   ========================================================= */
#staffDashboardOpenBtn{
    border:1px solid rgba(122,23,52,.18) !important;
    background:linear-gradient(135deg,#6f1732,#9d3152) !important;
    color:#fff !important;
    padding:10px 19px !important;
    min-width:175px !important;
    font-size:13px !important;
    font-weight:800 !important;
    letter-spacing:.2px;
    border-radius:22px !important;
    box-shadow:0 7px 18px rgba(111,23,50,.22) !important;
}
#staffDashboardOpenBtn:hover{
    transform:translateY(-2px) !important;
    box-shadow:0 10px 24px rgba(111,23,50,.29) !important;
}
.staff-dashboard-box{
    width:min(96%,1120px);
    max-height:92vh;
    overflow:auto;
    margin:4vh auto;
    background:#f5f7fb;
    border-radius:24px;
    position:relative;
    box-shadow:0 28px 85px rgba(9,20,38,.34);
}
.staff-dashboard-close{
    top:13px;
    right:17px;
    z-index:4;
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(255,255,255,.14);
    color:#fff;
    line-height:1;
}
.staff-dashboard-hero{
    position:relative;
    overflow:hidden;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:24px;
    align-items:center;
    padding:31px 70px 31px 31px;
    color:#fff;
    background:
        radial-gradient(circle at 88% 12%,rgba(232,189,99,.32),transparent 31%),
        linear-gradient(135deg,#3f0b1d 0%,#781b39 54%,#a83b5c 100%);
}
.staff-dashboard-hero::after{
    content:"";
    position:absolute;
    width:210px;
    height:210px;
    right:-90px;
    bottom:-130px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:50%;
}
.staff-dashboard-brand{
    display:flex;
    align-items:center;
    gap:17px;
    min-width:0;
}
.staff-dashboard-logo{
    width:66px;
    height:66px;
    flex:0 0 auto;
    border-radius:50%;
    object-fit:cover;
    background:#fff;
    border:3px solid rgba(232,189,99,.9);
    box-shadow:0 7px 22px rgba(0,0,0,.2);
}
.staff-dashboard-kicker{
    margin:0 0 5px;
    color:#f5d98f;
    font-size:11px;
    font-weight:900;
    letter-spacing:1.5px;
    text-transform:uppercase;
}
.staff-dashboard-hero h2{
    margin:0;
    color:#fff;
    text-align:left;
    font-size:clamp(21px,3vw,31px);
    line-height:1.2;
}
.staff-dashboard-role{
    margin:6px 0 0;
    color:rgba(255,255,255,.82);
    font-size:13px;
    font-weight:700;
}
.staff-dashboard-clock{
    position:relative;
    z-index:1;
    min-width:185px;
    padding:14px 18px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:16px;
    background:rgba(255,255,255,.1);
    backdrop-filter:blur(8px);
    text-align:right;
}
.staff-dashboard-time{
    display:block;
    color:#fff;
    font-size:24px;
    font-weight:900;
    letter-spacing:.4px;
}
.staff-dashboard-date{
    display:block;
    margin-top:3px;
    color:#f7dfaa;
    font-size:12px;
    font-weight:700;
}
.staff-dashboard-content{padding:24px}
.staff-dashboard-stats{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:13px;
    margin-bottom:18px;
}
.staff-dashboard-stat{
    display:flex;
    align-items:center;
    gap:12px;
    padding:15px;
    background:#fff;
    border:1px solid #e4e9f0;
    border-radius:16px;
    box-shadow:0 5px 16px rgba(20,40,70,.05);
}
.staff-dashboard-stat-icon{
    width:42px;
    height:42px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    border-radius:13px;
    font-size:19px;
}
.staff-dashboard-stat.notice .staff-dashboard-stat-icon{background:#fff2f5}
.staff-dashboard-stat.leave .staff-dashboard-stat-icon{background:#eaf8f1}
.staff-dashboard-stat.plan .staff-dashboard-stat-icon{background:#f2edff}
.staff-dashboard-stat.idea .staff-dashboard-stat-icon{background:#fff7db}
.staff-dashboard-stat strong{
    display:block;
    color:#102a43;
    font-size:20px;
    line-height:1;
}
.staff-dashboard-stat span:last-child{
    display:block;
    margin-top:5px;
    color:#667085;
    font-size:11px;
    font-weight:800;
    letter-spacing:.35px;
    text-transform:uppercase;
}
.staff-dashboard-grid{
    display:grid;
    grid-template-columns:minmax(0,1.18fr) minmax(310px,.82fr);
    gap:18px;
    align-items:start;
}
.staff-dashboard-card{
    overflow:hidden;
    background:#fff;
    border:1px solid #e1e7ef;
    border-radius:18px;
    box-shadow:0 7px 22px rgba(18,42,67,.06);
}
.staff-dashboard-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:16px 18px;
    border-bottom:1px solid #edf0f4;
}
.staff-dashboard-card-head h3{
    margin:0;
    color:#123c69;
    font-size:16px;
}
.staff-dashboard-live-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 9px;
    border-radius:999px;
    background:#ecfdf3;
    color:#067647;
    font-size:10px;
    font-weight:900;
    letter-spacing:.5px;
}
.staff-dashboard-live-badge::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:#12b76a;
    box-shadow:0 0 0 4px rgba(18,183,106,.13);
}
.staff-dashboard-card-body{padding:16px 18px}
.staff-dashboard-notice-list{display:grid;gap:11px}
.staff-dashboard-notice{
    position:relative;
    padding:15px 15px 14px 18px;
    border:1px solid #eadfe3;
    border-left:5px solid #8c2948;
    border-radius:13px;
    background:linear-gradient(135deg,#fff,#fff9fb);
}
.staff-dashboard-notice.urgent{border-left-color:#d92d20;background:#fff8f7}
.staff-dashboard-notice.important{border-left-color:#f79009;background:#fffaf0}
.staff-dashboard-notice-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
}
.staff-dashboard-notice-title{
    color:#3f0b1d;
    font-weight:900;
    overflow-wrap:anywhere;
}
.staff-dashboard-priority{
    flex:0 0 auto;
    padding:4px 8px;
    border-radius:999px;
    background:#f6e8ed;
    color:#7a1734;
    font-size:9px;
    font-weight:900;
    letter-spacing:.4px;
    text-transform:uppercase;
}
.staff-dashboard-notice.urgent .staff-dashboard-priority{background:#fee4e2;color:#b42318}
.staff-dashboard-notice.important .staff-dashboard-priority{background:#fef0c7;color:#93370d}
.staff-dashboard-new{
    margin-left:5px;
    color:#d92d20;
    font-size:9px;
    font-weight:900;
}
.staff-dashboard-notice-message{
    margin-top:8px;
    color:#475467;
    font-size:14px;
    line-height:1.65;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
}
.staff-dashboard-event-details{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    margin-top:12px;
}
.staff-dashboard-event-detail{
    min-width:0;
    padding:9px 10px;
    border:1px solid rgba(122,23,52,.11);
    border-radius:10px;
    background:rgba(255,255,255,.76);
}
.staff-dashboard-event-label{
    display:block;
    color:#8b5c6a;
    font-size:9px;
    font-weight:900;
    letter-spacing:.45px;
    text-transform:uppercase;
}
.staff-dashboard-event-value{
    display:block;
    margin-top:3px;
    color:#3f0b1d;
    font-size:12px;
    font-weight:850;
    overflow-wrap:anywhere;
}
.staff-announcement-acknowledgement{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    margin-top:12px;
    padding:10px 11px;
    border:1px solid #dbe7ef;
    border-radius:11px;
    background:#f7fafc;
}
.staff-announcement-ack-note{
    color:#475467;
    font-size:11px;
    font-weight:750;
}
.staff-announcement-ack-actions{display:flex;gap:7px;flex-wrap:wrap}
.staff-announcement-ack-btn{
    border:0;
    border-radius:999px;
    padding:8px 12px;
    color:#fff;
    font-size:11px;
    font-weight:900;
    cursor:pointer;
}
.staff-announcement-ack-btn.read{background:#176b4d}
.staff-announcement-ack-btn.yes-sir{background:#123c69}
.staff-announcement-ack-btn:disabled{opacity:.55;cursor:not-allowed}
.staff-announcement-ack-done{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 10px;
    border-radius:999px;
    background:#ecfdf3;
    color:#067647;
    font-size:11px;
    font-weight:900;
}
.staff-announcement-principal-status{
    width:100%;
    border:1px solid #d8e2eb;
    border-radius:10px;
    padding:9px 11px;
    background:#fff;
    color:#123c69;
    font-size:11px;
    font-weight:900;
    cursor:pointer;
}
.staff-announcement-principal-status strong{color:#7a1734}
.announcement-read-status-box{
    width:min(94%,820px);
    max-height:88vh;
    overflow:auto;
    margin:6vh auto;
    padding:26px;
    position:relative;
    background:#fff;
    border-radius:20px;
    box-shadow:0 24px 75px rgba(9,20,38,.34);
}
.announcement-read-status-box h2{
    margin:0 42px 5px 0;
    color:#123c69;
}
.announcement-read-status-subtitle{
    margin:0 42px 19px 0;
    color:#667085;
    font-size:13px;
    overflow-wrap:anywhere;
}
.announcement-read-summary{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin-bottom:13px;
}
.announcement-read-summary>div{
    padding:13px;
    border:1px solid #dce5ed;
    border-radius:13px;
    background:#f7fafc;
    text-align:center;
}
.announcement-read-summary strong{display:block;color:#123c69;font-size:23px}
.announcement-read-summary span{display:block;margin-top:3px;color:#667085;font-size:10px;font-weight:900;text-transform:uppercase}
.announcement-read-summary .read{background:#ecfdf3;border-color:#abefc6}
.announcement-read-summary .read strong{color:#067647}
.announcement-read-summary .unread{background:#fff7e6;border-color:#f0d79a}
.announcement-read-summary .unread strong{color:#9a6700}
.announcement-read-legend{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:0 0 13px;
    color:#667085;
    font-size:10px;
    font-weight:850;
}
.announcement-read-status-list{display:grid;gap:9px}
.announcement-read-status-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
    padding:12px 13px;
    border:1px solid #e0e6ed;
    border-radius:12px;
    background:#fafcfe;
}
.announcement-read-staff-name{color:#123c69;font-size:13px;font-weight:900;overflow-wrap:anywhere}
.announcement-read-staff-role{margin-top:2px;color:#667085;font-size:10px;font-weight:700}
.announcement-read-result{text-align:right}
.announcement-read-badge{
    display:inline-block;
    padding:5px 9px;
    border-radius:999px;
    font-size:10px;
    font-weight:900;
}
.announcement-read-badge.read{background:#ecfdf3;color:#067647}
.announcement-read-badge.yes_sir{background:#eaf2fb;color:#123c69}
.announcement-read-badge.unread{background:#fff7e6;color:#9a6700}
.announcement-read-time{display:block;margin-top:3px;color:#7b8794;font-size:9px}
.staff-dashboard-notice-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:10px;
    color:#7b8794;
    font-size:11px;
    font-weight:700;
}
.staff-dashboard-notice-delete{
    border:0;
    background:transparent;
    color:#b42318;
    font:inherit;
    font-weight:900;
    cursor:pointer;
}
.staff-dashboard-empty{
    padding:21px 14px;
    border:1px dashed #cbd5e1;
    border-radius:12px;
    color:#667085;
    text-align:center;
    font-size:13px;
}
.staff-dashboard-side{display:grid;gap:18px}
.staff-dashboard-preview-list{display:grid;gap:9px}
.staff-dashboard-preview{
    padding:11px 12px;
    border:1px solid #e5eaf0;
    border-radius:11px;
    background:#f9fbfd;
}
.staff-dashboard-preview strong{
    display:block;
    color:#123c69;
    font-size:13px;
    overflow-wrap:anywhere;
}
.staff-dashboard-preview span{
    display:block;
    margin-top:4px;
    color:#667085;
    font-size:11px;
    line-height:1.45;
}
.staff-dashboard-view-all{
    width:100%;
    margin-top:11px;
    border:1px solid #d6dee8;
    border-radius:10px;
    padding:9px 12px;
    background:#fff;
    color:#123c69;
    font-weight:800;
    cursor:pointer;
}
.staff-dashboard-quick-actions{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:11px;
    margin-top:18px;
}
.staff-dashboard-action{
    min-height:64px;
    border:0;
    border-radius:14px;
    padding:10px 8px;
    color:#fff;
    font-weight:850;
    cursor:pointer;
    transition:.2s ease;
}
.staff-dashboard-action:hover{transform:translateY(-2px);filter:brightness(1.04)}
.staff-dashboard-action.leave{background:linear-gradient(135deg,#176b4d,#249269)}
.staff-dashboard-action.approved{background:linear-gradient(135deg,#123c69,#1976b8)}
.staff-dashboard-action.plan{background:linear-gradient(135deg,#5b21b6,#7c3aed)}
.staff-dashboard-action.idea{background:linear-gradient(135deg,#9a6700,#d39b17)}
.staff-announcement-form{
    display:none;
    margin:0 18px 17px;
    padding:15px;
    border:1px solid #ead7de;
    border-radius:14px;
    background:#fff8fa;
}
.staff-announcement-form.show{display:block}
.staff-announcement-form-title{
    margin:0 0 11px;
    color:#7a1734;
    font-size:14px;
    font-weight:900;
}
.staff-announcement-form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}
.staff-announcement-field.full{grid-column:1/-1}
.staff-announcement-field label{
    display:block;
    margin:0 0 5px;
    color:#475467;
    font-size:11px;
    font-weight:850;
}
.staff-announcement-field input,
.staff-announcement-field select,
.staff-announcement-field textarea{
    width:100%;
    padding:10px 11px;
    border:1px solid #d6dee8;
    border-radius:9px;
    background:#fff;
    font:inherit;
    outline:none;
}
.staff-announcement-field textarea{min-height:82px;resize:vertical}
.staff-announcement-field input:focus,
.staff-announcement-field select:focus,
.staff-announcement-field textarea:focus{
    border-color:#9d3152;
    box-shadow:0 0 0 3px rgba(157,49,82,.1);
}
.staff-announcement-submit{
    width:100%;
    margin-top:10px;
    border:0;
    border-radius:10px;
    padding:11px;
    background:linear-gradient(135deg,#6f1732,#9d3152);
    color:#fff;
    font-weight:900;
    cursor:pointer;
}
.staff-announcement-message{
    display:none;
    margin-top:9px;
    padding:9px 10px;
    border-radius:9px;
    font-size:12px;
    font-weight:800;
}
.staff-announcement-message.show{display:block}
.staff-announcement-message.success{background:#ecfdf3;color:#067647}
.staff-announcement-message.error{background:#fff1f0;color:#b42318}
.staff-dashboard-toast{
    position:sticky;
    z-index:5;
    top:12px;
    width:max-content;
    max-width:calc(100% - 32px);
    margin:-2px auto 10px;
    padding:9px 14px;
    border-radius:999px;
    background:#102a43;
    color:#fff;
    font-size:12px;
    font-weight:800;
    box-shadow:0 7px 20px rgba(16,42,67,.22);
    opacity:0;
    transform:translateY(-8px);
    pointer-events:none;
    transition:.22s ease;
}
.staff-dashboard-toast.show{opacity:1;transform:none}
body.dark-mode .staff-dashboard-box{background:#17232e;color:#eee}
body.dark-mode .staff-dashboard-card,
body.dark-mode .staff-dashboard-stat{background:#22313f;border-color:#405467}
body.dark-mode .staff-dashboard-card-head{border-color:#405467}
body.dark-mode .staff-dashboard-card-head h3,
body.dark-mode .staff-dashboard-stat strong,
body.dark-mode .staff-dashboard-preview strong{color:#8ecbff}
body.dark-mode .staff-dashboard-stat span:last-child,
body.dark-mode .staff-dashboard-notice-message,
body.dark-mode .staff-dashboard-preview span{color:#cbd5e1}
body.dark-mode .staff-dashboard-notice,
body.dark-mode .staff-dashboard-preview{background:#1d2935;border-color:#405467}
body.dark-mode .staff-dashboard-notice-title{color:#f8bfd0}
body.dark-mode .staff-dashboard-event-detail{background:#17232e;border-color:#55404a}
body.dark-mode .staff-dashboard-event-label{color:#d1a9b5}
body.dark-mode .staff-dashboard-event-value{color:#f8dce5}
body.dark-mode .staff-announcement-acknowledgement,
body.dark-mode .announcement-read-status-box,
body.dark-mode .announcement-read-status-row{background:#1d2935;border-color:#405467;color:#eee}
body.dark-mode .staff-announcement-ack-note,
body.dark-mode .announcement-read-status-subtitle,
body.dark-mode .announcement-read-staff-role{color:#cbd5e1}
body.dark-mode .staff-announcement-principal-status{background:#17232e;color:#8ecbff;border-color:#405467}
body.dark-mode .announcement-read-status-box h2,
body.dark-mode .announcement-read-staff-name,
body.dark-mode .announcement-read-summary strong{color:#8ecbff}
body.dark-mode .announcement-read-summary>div{background:#17232e;border-color:#405467}
body.dark-mode .staff-announcement-form{background:#1d2935;border-color:#5d3a48}
body.dark-mode .staff-announcement-field input,
body.dark-mode .staff-announcement-field select,
body.dark-mode .staff-announcement-field textarea{background:#17232e;color:#fff;border-color:#405467}
@media(max-width:820px){
    .staff-dashboard-grid{grid-template-columns:1fr}
    .staff-dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
    .staff-dashboard-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
    .staff-dashboard-hero{grid-template-columns:1fr;padding:26px 56px 24px 22px}
    .staff-dashboard-clock{text-align:left;min-width:0}
    .staff-dashboard-event-details{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
    .staff-dashboard-box{width:100%;min-height:100%;max-height:none;margin:0;border-radius:0}
    .staff-dashboard-content{padding:15px}
    .staff-dashboard-logo{width:54px;height:54px}
    .staff-dashboard-brand{align-items:flex-start;gap:12px}
    .staff-dashboard-stats{grid-template-columns:1fr}
    .staff-dashboard-stat{padding:12px 14px}
    .staff-dashboard-quick-actions{grid-template-columns:1fr}
    .staff-dashboard-action{min-height:52px}
    .staff-announcement-form-grid{grid-template-columns:1fr}
    .staff-announcement-field.full{grid-column:auto}
    .staff-dashboard-event-details{grid-template-columns:1fr}
    .announcement-read-status-box{width:100%;min-height:100%;max-height:none;margin:0;border-radius:0;padding:22px 15px}
    .announcement-read-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
    .announcement-read-summary strong{font-size:19px}
    .announcement-read-status-row{grid-template-columns:1fr;gap:7px}
    .announcement-read-result{text-align:left}
}

/* ===== SOURCE STYLE BLOCK: staff-idea-hub-css ===== */
/* =========================================================
   STAFF IDEA HUB — all authenticated staff can share ideas.
   A colleague can offer support once with I CAN HELP.
   ========================================================= */
.staff-idea-box{
    width:min(96%,1040px);
    max-height:90vh;
    overflow:auto;
    margin:5vh auto;
    padding:28px;
    position:relative;
    background:#f7f8fb;
    border-radius:22px;
    box-shadow:0 24px 75px rgba(9,20,38,.34);
}
.staff-idea-box h2{margin:0 42px 5px 0;color:#123c69}
.staff-idea-subtitle{margin:0 42px 20px 0;color:#667085;font-size:14px;line-height:1.6}
.staff-idea-form{
    margin-bottom:22px;
    padding:18px;
    border:1px solid #eadb9f;
    border-radius:16px;
    background:#fffdf5;
}
.staff-idea-form-title{margin:0 0 13px;color:#805b00;font-size:15px;font-weight:900}
.staff-idea-identity{
    margin-bottom:13px;
    padding:10px 12px;
    border:1px solid #eee2b7;
    border-radius:11px;
    background:#fff;
    color:#475467;
    font-size:12px;
    line-height:1.6;
}
.staff-idea-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.staff-idea-field.full{grid-column:1/-1}
.staff-idea-field label{display:block;margin-bottom:6px;color:#123c69;font-size:12px;font-weight:850}
.staff-idea-field input,.staff-idea-field textarea{
    width:100%;padding:11px 12px;border:1px solid #d6dee8;border-radius:10px;
    background:#fff;font:inherit;outline:none
}
.staff-idea-field textarea{min-height:90px;resize:vertical}
.staff-idea-field input:focus,.staff-idea-field textarea:focus{
    border-color:#c38a0a;box-shadow:0 0 0 3px rgba(195,138,10,.11)
}
.staff-idea-submit{
    width:100%;margin-top:13px;padding:12px;border:0;border-radius:11px;
    background:linear-gradient(135deg,#926300,#d09a18);color:#fff;font-weight:900;cursor:pointer
}
.staff-idea-submit:disabled,.staff-idea-help-btn:disabled{opacity:.58;cursor:not-allowed}
.staff-idea-message{display:none;margin-top:10px;padding:10px 12px;border-radius:10px;font-size:12px;font-weight:850}
.staff-idea-message.show{display:block}
.staff-idea-message.success{background:#ecfdf3;color:#067647}
.staff-idea-message.error{background:#fff1f0;color:#b42318}
.staff-idea-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.staff-idea-toolbar h3{margin:0;color:#123c69}
.staff-idea-refresh{
    border:1px solid #d6dee8;border-radius:999px;padding:8px 13px;background:#fff;
    color:#123c69;font-size:12px;font-weight:850;cursor:pointer
}
.staff-idea-list{display:grid;gap:13px}
.staff-idea-card{padding:17px;border:1px solid #e4e7ec;border-left:5px solid #d09a18;border-radius:15px;background:#fff}
.staff-idea-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.staff-idea-title{color:#123c69;font-size:16px;font-weight:900;overflow-wrap:anywhere}
.staff-idea-meta{margin-top:4px;color:#667085;font-size:11px;font-weight:700}
.staff-idea-status{display:inline-block;padding:5px 10px;border-radius:999px;font-size:10px;font-weight:900;text-transform:uppercase}
.staff-idea-status.new{background:#fff7e6;color:#8a5b00}
.staff-idea-status.under_discussion{background:#eef4ff;color:#3538cd}
.staff-idea-status.approved{background:#ecfdf3;color:#067647}
.staff-idea-status.completed{background:#eaf2fb;color:#123c69}
.staff-idea-section{margin-top:11px;padding:11px 12px;border-radius:11px;background:#f8fafc;color:#475467;font-size:13px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}
.staff-idea-section strong{display:block;margin-bottom:3px;color:#123c69}
.staff-idea-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:13px}
.staff-idea-helpers{min-width:0;color:#667085;font-size:11px;line-height:1.5;overflow-wrap:anywhere}
.staff-idea-helpers strong{color:#176b4d}
.staff-idea-help-btn{
    border:0;border-radius:999px;padding:9px 15px;background:linear-gradient(135deg,#176b4d,#249269);
    color:#fff;font-size:12px;font-weight:900;cursor:pointer
}
.staff-idea-help-btn.done{background:#e8f7ef;color:#067647;border:1px solid #abefc6}
.staff-idea-own-note{padding:7px 10px;border-radius:999px;background:#f2f4f7;color:#667085;font-size:10px;font-weight:850}
.staff-idea-principal-controls{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid #edf0f4}
.staff-idea-principal-controls label{color:#7a1734;font-size:11px;font-weight:900}
.staff-idea-principal-controls select{padding:8px 10px;border:1px solid #d6dee8;border-radius:9px;background:#fff;font:inherit;font-size:12px;font-weight:800}
.staff-idea-empty{padding:22px;border:1px dashed #cbd5e1;border-radius:12px;color:#667085;text-align:center;font-size:13px}
body.dark-mode .staff-idea-box{background:#17232e;color:#eee}
body.dark-mode .staff-idea-form,body.dark-mode .staff-idea-card{background:#22313f;border-color:#4d4b3f}
body.dark-mode .staff-idea-box h2,body.dark-mode .staff-idea-toolbar h3,body.dark-mode .staff-idea-title,
body.dark-mode .staff-idea-field label,body.dark-mode .staff-idea-section strong{color:#8ecbff}
body.dark-mode .staff-idea-subtitle,body.dark-mode .staff-idea-meta,body.dark-mode .staff-idea-helpers{color:#cbd5e1}
body.dark-mode .staff-idea-identity,body.dark-mode .staff-idea-section{background:#1d2935;border-color:#405467;color:#e5e7eb}
body.dark-mode .staff-idea-field input,body.dark-mode .staff-idea-field textarea,
body.dark-mode .staff-idea-principal-controls select{background:#17232e;color:#fff;border-color:#405467}
body.dark-mode .staff-idea-refresh{background:#1d2935;color:#8ecbff;border-color:#405467}
@media(max-width:620px){
    .staff-idea-box{width:100%;min-height:100%;max-height:none;margin:0;border-radius:0;padding:22px 15px}
    .staff-idea-form{padding:14px}
    .staff-idea-form-grid{grid-template-columns:1fr}
    .staff-idea-field.full{grid-column:auto}
    .staff-idea-footer{align-items:flex-start}
}

/* ===== SOURCE STYLE BLOCK: admin-leave-delete-css ===== */
.admin-leave-list{display:grid;gap:12px;margin-top:16px}
.admin-leave-card{padding:15px;border:1px solid #dce6ef;border-radius:14px;background:#f9fbfd;line-height:1.6}
.admin-leave-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.admin-leave-delete-btn{border:0;border-radius:20px;padding:9px 15px;background:#c62828;color:#fff;font-weight:800;cursor:pointer}
.admin-leave-delete-btn:disabled{opacity:.55;cursor:not-allowed}
body.dark-mode .admin-leave-card{background:#1d2935;border-color:#405467;color:#eee}

/* ===== SOURCE STYLE BLOCK: leave-success-professional-css ===== */
.leave-success-overlay{position:fixed;inset:0;background:rgba(10,25,47,.58);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;padding:20px;z-index:999999;}
.leave-success-overlay.show{display:flex;}
.leave-success-card{width:min(92vw,500px);background:#fff;border-radius:22px;padding:34px 30px 28px;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.24);animation:leaveSuccessIn .28s ease-out;}
.leave-success-icon{width:76px;height:76px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;background:#eaf8ef;color:#198754;font-size:40px;font-weight:800;border:5px solid #d6f1df;}
.leave-success-card h2{margin:0;color:#102a43;font-size:25px;line-height:1.25;}
.leave-success-status{display:inline-flex;align-items:center;gap:7px;margin:16px 0 14px;padding:7px 14px;border-radius:999px;background:#fff4d6;color:#8a5a00;font-size:13px;font-weight:800;letter-spacing:.3px;}
.leave-success-card p{margin:0 auto;color:#5b6b7a;font-size:15px;line-height:1.7;max-width:410px;}
.leave-success-note{margin-top:14px!important;padding:12px 14px;background:#f6f8fb;border-radius:12px;color:#536273!important;font-size:13px!important;}
.leave-success-close{margin-top:22px;width:100%;border:0;border-radius:12px;background:#102a43;color:#fff;padding:13px 18px;font-size:14px;font-weight:800;cursor:pointer;transition:.2s ease;}
.leave-success-close:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(16,42,67,.18);}
@keyframes leaveSuccessIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@media(max-width:520px){.leave-success-card{padding:28px 20px 22px;border-radius:18px}.leave-success-card h2{font-size:21px}.leave-success-icon{width:68px;height:68px;font-size:35px}}

/* ===== SOURCE STYLE BLOCK: premium-login-wow-final ===== */
/* =========================================================
   PREMIUM "WOW" LOGIN POPUPS — VISUAL ONLY
   Admin + Staff authentication logic remains unchanged.
========================================================= */
#staffLoginPopup,
#studentAdminPopup{
    background:
        radial-gradient(circle at 15% 20%,rgba(0,210,255,.22),transparent 28%),
        radial-gradient(circle at 85% 18%,rgba(255,199,64,.20),transparent 25%),
        radial-gradient(circle at 50% 90%,rgba(100,70,255,.22),transparent 32%),
        rgba(2,10,27,.88) !important;
    backdrop-filter:blur(16px) saturate(135%);
    -webkit-backdrop-filter:blur(16px) saturate(135%);
    overflow:hidden;
}

#staffLoginPopup::before,
#studentAdminPopup::before{
    content:"";
    position:fixed;
    inset:-60%;
    pointer-events:none;
    background:
        radial-gradient(circle,rgba(255,255,255,.95) 0 1px,transparent 1.8px) 0 0/54px 54px,
        radial-gradient(circle,rgba(255,210,90,.75) 0 1.2px,transparent 2px) 17px 25px/82px 82px;
    opacity:.38;
    animation:loginStars 22s linear infinite;
}

#staffLoginPopup::after,
#studentAdminPopup::after{
    content:"";
    position:fixed;
    width:42vw;height:42vw;
    min-width:330px;min-height:330px;
    left:50%;top:50%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    pointer-events:none;
    background:conic-gradient(from 0deg,
        rgba(0,208,255,.0),
        rgba(0,208,255,.24),
        rgba(255,204,72,.20),
        rgba(151,71,255,.22),
        rgba(0,208,255,.0));
    filter:blur(42px);
    animation:loginAura 9s linear infinite;
}

@keyframes loginStars{
    to{transform:translate3d(70px,110px,0) rotate(.01deg)}
}
@keyframes loginAura{
    to{transform:translate(-50%,-50%) rotate(360deg)}
}
@keyframes loginCardIn{
    0%{opacity:0;transform:translateY(34px) scale(.88) rotateX(8deg)}
    70%{transform:translateY(-5px) scale(1.015) rotateX(0)}
    100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes loginBorderGlow{
    0%,100%{box-shadow:0 30px 90px rgba(0,0,0,.55),0 0 22px rgba(0,207,255,.28),inset 0 0 28px rgba(255,255,255,.05)}
    50%{box-shadow:0 34px 100px rgba(0,0,0,.62),0 0 36px rgba(255,197,61,.32),inset 0 0 35px rgba(55,190,255,.07)}
}
@keyframes loginTitleShine{
    to{background-position:200% center}
}
@keyframes loginButtonShine{
    0%{left:-120%}
    55%,100%{left:150%}
}

#staffLoginPopup .staff-login-box,
#studentAdminPopup .student-password-box.student-admin-box{
    position:relative !important;
    z-index:2 !important;
    width:min(92vw,440px) !important;
    max-width:440px !important;
    margin:auto !important;
    padding:38px 32px 32px !important;
    border-radius:30px !important;
    color:#fff !important;
    background:
        linear-gradient(145deg,rgba(13,36,66,.88),rgba(4,15,35,.92)) padding-box,
        linear-gradient(135deg,#55dcff,#ffd166,#a96cff,#55dcff) border-box !important;
    border:2px solid transparent !important;
    box-shadow:0 30px 90px rgba(0,0,0,.55),0 0 25px rgba(0,207,255,.26) !important;
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    animation:loginCardIn .65s cubic-bezier(.2,.8,.2,1),loginBorderGlow 4s ease-in-out infinite 1s !important;
    overflow:hidden;
}

#staffLoginPopup .staff-login-box::before,
#studentAdminPopup .student-admin-box::before{
    content:"";
    position:absolute;
    width:180px;height:180px;
    right:-85px;top:-90px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,209,102,.32),transparent 68%);
    pointer-events:none;
}

#staffLoginPopup .staff-login-box::after,
#studentAdminPopup .student-admin-box::after{
    content:"✦  ✧  ✦";
    position:absolute;
    left:22px;top:15px;
    color:#ffd166;
    letter-spacing:8px;
    font-size:13px;
    text-shadow:0 0 12px #ffd166;
    pointer-events:none;
}

#staffLoginPopup .close-btn{
    width:38px;height:38px;
    right:14px !important;top:12px !important;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    color:#fff !important;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.16);
    font-size:28px !important;
    line-height:1;
    transition:.25s;
}
#staffLoginPopup .close-btn:hover{
    background:rgba(255,80,80,.88);
    transform:rotate(90deg) scale(1.06);
}

#staffLoginPopup h2,
#studentAdminPopup h2{
    margin:4px 0 9px !important;
    text-align:center !important;
    font-size:clamp(27px,5vw,34px) !important;
    font-weight:900 !important;
    letter-spacing:.3px;
    color:transparent !important;
    background:linear-gradient(90deg,#fff,#7fe8ff,#ffd166,#fff);
    background-size:200% auto;
    -webkit-background-clip:text;
    background-clip:text;
    animation:loginTitleShine 4s linear infinite;
    text-shadow:none !important;
}

#staffLoginPopup .staff-login-subtitle,
#studentAdminPopup .student-admin-box > p{
    color:#c9d8e8 !important;
    text-align:center;
    font-size:13px;
    line-height:1.65;
    margin:0 0 24px !important;
}

#staffLoginPopup .staff-login-field,
#studentAdminPopup .student-admin-form > div{
    position:relative;
    margin-bottom:14px;
}

#staffLoginPopup .staff-login-field label,
#studentAdminPopup .student-admin-form label{
    display:block;
    margin:0 0 7px !important;
    color:#eaf7ff !important;
    font-size:13px;
    font-weight:800;
    letter-spacing:.5px;
}

#staffLoginPopup input,
#studentAdminPopup .student-admin-form input{
    width:100% !important;
    min-height:52px;
    padding:13px 15px !important;
    color:#fff !important;
    caret-color:#ffd166;
    background:rgba(255,255,255,.075) !important;
    border:1px solid rgba(148,205,255,.28) !important;
    border-radius:15px !important;
    outline:none !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    transition:border-color .25s,box-shadow .25s,transform .25s,background .25s;
}

#staffLoginPopup input::placeholder,
#studentAdminPopup input::placeholder{
    color:rgba(220,235,248,.48);
}

#staffLoginPopup input:focus,
#studentAdminPopup .student-admin-form input:focus{
    transform:translateY(-1px);
    background:rgba(255,255,255,.105) !important;
    border-color:#65ddff !important;
    box-shadow:0 0 0 4px rgba(54,201,255,.12),0 0 24px rgba(54,201,255,.18) !important;
}

#staffLoginPopup .staff-login-submit,
#studentAdminPopup .student-admin-submit{
    position:relative;
    overflow:hidden;
    width:100% !important;
    min-height:54px;
    margin-top:5px;
    border:0 !important;
    border-radius:16px !important;
    color:#071426 !important;
    background:linear-gradient(100deg,#61e5ff,#ffd166,#ffb84d) !important;
    font-size:15px !important;
    font-weight:950 !important;
    letter-spacing:1.4px;
    cursor:pointer;
    box-shadow:0 12px 30px rgba(255,193,67,.22),0 0 22px rgba(77,218,255,.18);
    transition:transform .25s,box-shadow .25s,filter .25s;
}

#staffLoginPopup .staff-login-submit::after,
#studentAdminPopup .student-admin-submit::after{
    content:"";
    position:absolute;
    top:-40%;left:-120%;
    width:45%;height:180%;
    transform:rotate(22deg);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);
    animation:loginButtonShine 2.8s ease-in-out infinite;
}

#staffLoginPopup .staff-login-submit:hover,
#studentAdminPopup .student-admin-submit:hover{
    transform:translateY(-3px) scale(1.015) !important;
    filter:brightness(1.06);
    box-shadow:0 16px 36px rgba(255,193,67,.30),0 0 30px rgba(77,218,255,.25) !important;
}

#staffLoginPopup .staff-login-message,
#studentAdminPopup .student-admin-message{
    margin-top:13px;
    border-radius:12px !important;
}

#studentAdminPopup .student-back-btn{
    width:100%;
    margin:0 !important;
    padding:11px 16px !important;
    color:#d9e7f4 !important;
    background:rgba(255,255,255,.07) !important;
    border:1px solid rgba(255,255,255,.14) !important;
    border-radius:14px !important;
    box-shadow:none !important;
}
#studentAdminPopup .student-back-btn:hover{
    background:rgba(255,255,255,.13) !important;
}

@media(max-width:600px){
    #staffLoginPopup,
    #studentAdminPopup{
        padding:16px !important;
    }
    #staffLoginPopup .staff-login-box,
    #studentAdminPopup .student-password-box.student-admin-box{
        width:100% !important;
        padding:34px 20px 24px !important;
        border-radius:25px !important;
    }
    #staffLoginPopup h2,
    #studentAdminPopup h2{
        font-size:27px !important;
    }
}

@media(prefers-reduced-motion:reduce){
    #staffLoginPopup::before,#staffLoginPopup::after,
    #studentAdminPopup::before,#studentAdminPopup::after,
    #staffLoginPopup .staff-login-box,
    #studentAdminPopup .student-admin-box,
    #staffLoginPopup h2,#studentAdminPopup h2,
    #staffLoginPopup .staff-login-submit::after,
    #studentAdminPopup .student-admin-submit::after{
        animation:none !important;
    }
}

/* ===== SOURCE STYLE BLOCK: secure-marks-entry-styles ===== */
.staff-dashboard-action.marks{background:linear-gradient(135deg,#175cd3,#0ba5ec)}
@media(min-width:821px){.staff-dashboard-quick-actions{grid-template-columns:repeat(5,minmax(0,1fr))}}
.marks-entry-box{position:relative;width:min(96%,1380px);max-height:94vh;overflow:auto;margin:3vh auto;background:#f8fafc;border-radius:22px;padding:24px;box-shadow:0 24px 70px rgba(16,24,40,.28)}
.marks-entry-title{margin:0 44px 5px 0;color:#123c69}.marks-entry-subtitle{margin:0 44px 18px 0;color:#667085;font-size:13px;line-height:1.6}
.marks-identity-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px;padding:12px 14px;border:1px solid #b2ddff;border-radius:13px;background:#eff8ff;color:#175cd3;font-size:13px;font-weight:800}
.marks-create-project,.marks-component-manager,.marks-project-panel,.marks-admin-section{margin-top:15px;padding:16px;border:1px solid #dce6ef;border-radius:16px;background:#fff}
.marks-create-project h3,.marks-component-manager h3,.marks-project-panel h3,.marks-admin-section h4{margin:0 0 12px;color:#123c69}
.marks-form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end}
.marks-field{display:flex;flex-direction:column;gap:6px;color:#123c69;font-size:12px;font-weight:850}.marks-field input,.marks-field select{width:100%;padding:11px 12px;border:1px solid #ccd8e5;border-radius:10px;background:#fff;font:inherit;color:#101828;outline:none}.marks-field input:focus,.marks-field select:focus{border-color:#1976b8;box-shadow:0 0 0 3px rgba(25,118,184,.11)}
.marks-primary,.marks-secondary,.marks-danger,.marks-submit,.marks-small-btn{border:0;border-radius:10px;padding:11px 14px;font:inherit;font-size:12px;font-weight:900;cursor:pointer}.marks-primary{background:#123c69;color:#fff}.marks-secondary{background:#eef4ff;color:#175cd3;border:1px solid #b2ccff}.marks-danger{background:#fff1f0;color:#b42318;border:1px solid #fda29b}.marks-submit{background:#067647;color:#fff}.marks-primary:disabled,.marks-secondary:disabled,.marks-danger:disabled,.marks-submit:disabled{opacity:.55;cursor:not-allowed}
.marks-project-picker{display:grid;grid-template-columns:auto minmax(220px,1fr) auto;gap:10px;align-items:center}.marks-project-picker label{color:#123c69;font-size:12px;font-weight:900}.marks-project-picker select{padding:11px 12px;border:1px solid #ccd8e5;border-radius:10px;background:#fff;font:inherit}
.marks-project-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin-bottom:12px}.marks-summary-item{padding:10px 11px;border-radius:11px;background:#f2f4f7;color:#475467;font-size:11px;line-height:1.45}.marks-summary-item strong{display:block;color:#123c69;font-size:12px;overflow-wrap:anywhere}
.marks-status{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:950;text-transform:uppercase}.marks-status.draft{background:#fff7e6;color:#8a5b00}.marks-status.submitted{background:#ecfdf3;color:#067647}.marks-status.returned{background:#fff1f0;color:#b42318}
.marks-return-note{margin:10px 0;padding:11px 12px;border-left:4px solid #f04438;border-radius:9px;background:#fff1f0;color:#912018;font-size:12px;white-space:pre-wrap}
.marks-component-form{display:grid;grid-template-columns:1.2fr 1fr .7fr auto;gap:10px;align-items:end}.marks-component-list{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}.marks-component-chip{display:flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid #d0d5dd;border-radius:11px;background:#f8fafc;color:#344054;font-size:11px;font-weight:800}.marks-component-chip button{border:0;background:transparent;color:#175cd3;font-weight:900;cursor:pointer}.marks-component-chip button.delete{color:#b42318}
.marks-auto-note{margin:11px 0 0;padding:9px 11px;border-radius:9px;background:#ecfdf3;color:#067647;font-size:11px;font-weight:800}
.marks-table-wrap{margin-top:14px;overflow:auto;border:1px solid #d0d5dd;border-radius:13px;background:#fff}.marks-table{width:100%;min-width:820px;border-collapse:separate;border-spacing:0}.marks-table th,.marks-table td{padding:9px 8px;border-right:1px solid #e4e7ec;border-bottom:1px solid #e4e7ec;text-align:center;vertical-align:middle}.marks-table th{position:sticky;top:0;z-index:3;background:#123c69;color:#fff;font-size:11px;white-space:nowrap}.marks-table th small{display:block;margin-top:3px;color:#cfe8ff;font-size:9px}.marks-table td{background:#fff;color:#344054;font-size:11px}.marks-table td.student-name{text-align:left;min-width:170px;font-weight:800}.marks-table tr:last-child td{border-bottom:0}
.marks-cell{display:grid;gap:5px;justify-items:center;min-width:94px}.marks-cell input[type=number]{width:84px;padding:8px 6px;border:1px solid #ccd8e5;border-radius:8px;text-align:center;font:inherit}.marks-cell label{display:flex;align-items:center;gap:4px;color:#b42318;font-size:9px;font-weight:900}.marks-cell input:disabled{background:#f2f4f7;color:#98a2b3}
.marks-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:14px}.marks-empty{padding:24px;border:1px dashed #b8c3d0;border-radius:12px;color:#667085;text-align:center;font-size:13px}.marks-inline-message{display:none;margin-top:10px;padding:10px 12px;border-radius:10px;font-size:12px;font-weight:850}.marks-inline-message.show{display:block}.marks-inline-message.success{background:#ecfdf3;color:#067647}.marks-inline-message.error{background:#fff1f0;color:#b42318}
.marks-admin-section{margin-top:16px}.marks-admin-assignment-form{display:grid;grid-template-columns:1fr 1.4fr auto;gap:10px;align-items:end}.marks-admin-assignment-form label{display:flex;flex-direction:column;gap:6px;color:#123c69;font-size:11px;font-weight:850}.marks-admin-assignment-form select,.marks-admin-filters select{padding:10px 11px;border:1px solid #ccd8e5;border-radius:9px;background:#fff;font:inherit}.marks-admin-assignment-list{display:grid;gap:8px;margin-top:12px}.marks-assignment-row{display:grid;grid-template-columns:1fr 1.5fr auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid #e4e7ec;border-radius:10px;background:#f8fafc;font-size:12px}.marks-assignment-row strong{color:#123c69}.marks-admin-project-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.marks-admin-filters{display:flex;gap:8px;flex-wrap:wrap}.marks-admin-project-list{display:grid;gap:11px;margin-top:12px}.marks-admin-card{padding:14px;border:1px solid #e4e7ec;border-left:5px solid #175cd3;border-radius:13px;background:#fff}.marks-admin-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}.marks-admin-card-title{color:#123c69;font-weight:900}.marks-admin-card-meta{margin-top:4px;color:#667085;font-size:11px;line-height:1.55}.marks-admin-card-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}.marks-admin-card-actions button{padding:8px 10px}.marks-admin-detail{scroll-margin-top:18px}.marks-admin-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.marks-admin-mode-buttons{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}.marks-admin-student-form{display:grid;grid-template-columns:.7fr 1fr 1.5fr auto auto;gap:10px;align-items:end}.marks-admin-student-form label{display:flex;flex-direction:column;gap:6px;color:#123c69;font-size:11px;font-weight:850}.marks-admin-student-form input,.marks-admin-student-form select{width:100%;padding:10px 11px;border:1px solid #ccd8e5;border-radius:9px;background:#fff;font:inherit}.marks-roster-row{display:grid;grid-template-columns:.65fr 1fr 1.6fr auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid #e4e7ec;border-radius:10px;background:#f8fafc;font-size:12px}.marks-roster-row strong{color:#123c69}.marks-roster-actions{display:flex;gap:6px;flex-wrap:wrap}.marks-class-project{margin-top:16px;padding:14px;border:1px solid #d0d5dd;border-radius:14px;background:#fff}.marks-class-project:first-child{margin-top:0}.marks-class-project h4{margin:0;color:#123c69}.marks-principal-box{position:relative;width:min(96%,1380px);max-height:94vh;overflow:auto;margin:3vh auto;background:#f8fafc;border-radius:22px;padding:24px;box-shadow:0 24px 70px rgba(16,24,40,.28)}.marks-principal-toolbar{display:flex;align-items:end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:16px 0}.marks-principal-toolbar label{min-width:220px}.upper-student-public-row{cursor:default!important}
body.dark-mode .marks-entry-box{background:#17232e;color:#eee}body.dark-mode .marks-create-project,body.dark-mode .marks-component-manager,body.dark-mode .marks-project-panel,body.dark-mode .marks-admin-section,body.dark-mode .marks-table td,body.dark-mode .marks-admin-card{background:#22313f;border-color:#405467;color:#e5e7eb}body.dark-mode .marks-entry-title,body.dark-mode .marks-create-project h3,body.dark-mode .marks-component-manager h3,body.dark-mode .marks-project-panel h3,body.dark-mode .marks-admin-section h4,body.dark-mode .marks-field,body.dark-mode .marks-summary-item strong,body.dark-mode .marks-assignment-row strong,body.dark-mode .marks-admin-card-title{color:#8ecbff}body.dark-mode .marks-entry-subtitle,body.dark-mode .marks-admin-card-meta{color:#cbd5e1}body.dark-mode .marks-field input,body.dark-mode .marks-field select,body.dark-mode .marks-project-picker select,body.dark-mode .marks-cell input[type=number],body.dark-mode .marks-admin-assignment-form select,body.dark-mode .marks-admin-filters select{background:#17232e;color:#fff;border-color:#405467}body.dark-mode .marks-summary-item,body.dark-mode .marks-component-chip,body.dark-mode .marks-assignment-row{background:#1d2935;border-color:#405467;color:#d0d5dd}
@media(max-width:850px){.marks-entry-box,.marks-principal-box{width:100%;min-height:100%;max-height:none;margin:0;border-radius:0;padding:20px 13px}.marks-form-grid,.marks-component-form,.marks-admin-assignment-form,.marks-admin-student-form{grid-template-columns:1fr}.marks-project-picker{grid-template-columns:1fr}.marks-project-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.marks-assignment-row,.marks-roster-row{grid-template-columns:1fr}.marks-admin-filters{width:100%}.marks-admin-filters select{flex:1}.marks-actions{justify-content:stretch}.marks-actions button{flex:1}}

/* ===== SOURCE STYLE BLOCK: video-tutorials-css ===== */
#staffVideoTutorialsOpenBtn{
    background:linear-gradient(135deg,#7c2d12,#c2410c);
    color:#fff;
}
.video-tutorial-popup-box{
    width:min(1040px,94vw);
    max-height:90vh;
    overflow:auto;
    padding:0;
    border-radius:20px;
    background:#f7f9fc;
}
.video-tutorial-hero{
    position:relative;
    padding:28px 58px 26px 28px;
    color:#fff;
    background:linear-gradient(135deg,#102f50,#174f7c 60%,#8b2d45);
}
.video-tutorial-hero h2{
    margin:0 0 7px;
    color:#fff;
    font-size:clamp(23px,3vw,32px);
}
.video-tutorial-hero p{
    margin:0;
    color:#e8f1f8;
    line-height:1.6;
}
.video-tutorial-popup-box>.close-btn{
    z-index:2;
    top:16px;
    right:18px;
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:#fff;
    background:rgba(255,255,255,.16);
}
.video-tutorial-viewer-body{padding:24px}
.video-tutorial-access-note{
    margin:0 0 18px;
    padding:11px 14px;
    border:1px solid #cfe1ee;
    border-radius:12px;
    color:#244a66;
    background:#edf7fc;
    font-size:14px;
    line-height:1.55;
}
.video-tutorial-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    margin-top:18px;
}
.video-tutorial-card{
    overflow:hidden;
    border:1px solid #dbe3ec;
    border-radius:16px;
    background:#fff;
    box-shadow:0 10px 28px rgba(16,47,80,.08);
}
.video-tutorial-card video{
    display:block;
    width:100%;
    aspect-ratio:16/9;
    object-fit:contain;
    background:#07121d;
}
.video-tutorial-card-content{padding:15px 16px 16px}
.video-tutorial-card h4{
    margin:0;
    color:#123c69;
    font-size:17px;
    line-height:1.45;
    overflow-wrap:anywhere;
}
.video-tutorial-meta{
    display:flex;
    flex-wrap:wrap;
    gap:6px 12px;
    margin-top:8px;
    color:#667085;
    font-size:12px;
}
.video-tutorial-actions{
    display:flex;
    justify-content:flex-end;
    margin-top:13px;
}
.video-tutorial-feedback{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
    margin-top:13px;
    padding-top:12px;
    border-top:1px solid #e4eaf0;
}
.video-tutorial-like-count{
    color:#667085;
    font-size:12px;
    font-weight:800;
}
.video-tutorial-like{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-width:92px;
    border:1px solid #b9c9d8;
    border-radius:999px;
    padding:8px 13px;
    color:#123c69;
    background:#f5f9fc;
    font-weight:900;
    cursor:pointer;
}
.video-tutorial-like:hover{background:#eaf2f8}
.video-tutorial-like.liked{
    color:#fff;
    border-color:#176b4d;
    background:#176b4d;
}
.video-tutorial-like:disabled{opacity:.6;cursor:not-allowed}
.video-tutorial-who-liked{
    border:0;
    border-radius:999px;
    padding:8px 13px;
    color:#fff;
    background:#123c69;
    font-size:11px;
    font-weight:900;
    cursor:pointer;
}
.video-tutorial-who-liked:hover{background:#0c2d51}
.video-tutorial-likers-popup{z-index:12050}
.video-tutorial-likers-box{
    width:min(480px,92vw);
    max-height:82vh;
    overflow:auto;
    padding:26px;
    border-radius:18px;
    background:#fff;
}
.video-tutorial-likers-box h2{
    margin:0 38px 5px 0;
    color:#123c69;
}
.video-tutorial-likers-title{
    margin:0 38px 16px 0;
    color:#667085;
    font-size:13px;
    overflow-wrap:anywhere;
}
.video-tutorial-likers-count{
    margin-bottom:12px;
    color:#176b4d;
    font-size:13px;
    font-weight:900;
}
.video-tutorial-likers-list{display:grid;gap:9px}
.video-tutorial-liker-name{
    display:flex;
    align-items:center;
    gap:9px;
    padding:11px 13px;
    border:1px solid #dbe3ec;
    border-radius:11px;
    color:#123c69;
    background:#f8fbfd;
    font-size:14px;
    font-weight:850;
}
.video-tutorial-delete{
    border:0;
    border-radius:9px;
    padding:9px 13px;
    background:#b42318;
    color:#fff;
    font-weight:800;
    cursor:pointer;
}
.video-tutorial-delete:disabled{opacity:.55;cursor:not-allowed}
.video-tutorial-empty{
    grid-column:1/-1;
    padding:28px 18px;
    border:1px dashed #b9c7d6;
    border-radius:14px;
    text-align:center;
    color:#667085;
    background:#fff;
}
.video-tutorial-upload-form{
    display:grid;
    grid-template-columns:minmax(220px,1fr) minmax(250px,1fr) auto;
    gap:13px;
    align-items:end;
    margin:16px 0 22px;
    padding:18px;
    border:1px solid #dbe3ec;
    border-radius:15px;
    background:#f7faff;
}
.video-tutorial-upload-form label{
    display:grid;
    gap:7px;
    color:#344054;
    font-size:13px;
    font-weight:800;
}
.video-tutorial-upload-form input{
    width:100%;
    min-height:44px;
    padding:10px 12px;
    border:1px solid #c8d4e0;
    border-radius:10px;
    background:#fff;
    color:#1d2939;
}
.video-tutorial-file-info{
    grid-column:1/-1;
    color:#667085;
    font-size:13px;
}
.video-tutorial-status{
    display:none;
    grid-column:1/-1;
    padding:11px 13px;
    border-radius:10px;
    font-weight:700;
}
.video-tutorial-status.show{display:block}
.video-tutorial-status.success{color:#067647;background:#ecfdf3}
.video-tutorial-status.error{color:#b42318;background:#fff1f0}
.video-tutorial-status.working{color:#175cd3;background:#eff8ff}
.admin-video-tutorial-grid{margin-top:0}
body.dark-mode .video-tutorial-popup-box{background:#17232e;color:#eee}
body.dark-mode .video-tutorial-access-note{background:#193343;border-color:#31556c;color:#d2e9f7}
body.dark-mode .video-tutorial-card,
body.dark-mode .video-tutorial-empty{background:#22313f;border-color:#405467}
body.dark-mode .video-tutorial-card h4{color:#9bd4ff}
body.dark-mode .video-tutorial-meta,
body.dark-mode .video-tutorial-empty{color:#cbd5e1}
body.dark-mode .video-tutorial-feedback{border-top-color:#405467}
body.dark-mode .video-tutorial-like-count{color:#cbd5e1}
body.dark-mode .video-tutorial-like{background:#17232e;border-color:#52677a;color:#9bd4ff}
body.dark-mode .video-tutorial-like.liked{background:#176b4d;border-color:#176b4d;color:#fff}
body.dark-mode .video-tutorial-likers-box{background:#1d2935;color:#eee}
body.dark-mode .video-tutorial-likers-box h2{color:#9bd4ff}
body.dark-mode .video-tutorial-likers-title{color:#cbd5e1}
body.dark-mode .video-tutorial-liker-name{background:#17232e;border-color:#405467;color:#e4e7ec}
body.dark-mode .video-tutorial-upload-form{background:#1d2935;border-color:#405467}
body.dark-mode .video-tutorial-upload-form label{color:#e4e7ec}
body.dark-mode .video-tutorial-upload-form input{background:#17232e;color:#fff;border-color:#52677a}
@media(max-width:780px){
    .video-tutorial-grid{grid-template-columns:1fr}
    .video-tutorial-upload-form{grid-template-columns:1fr}
    .video-tutorial-popup-box{width:100%;min-height:100%;max-height:none;border-radius:0}
    .video-tutorial-viewer-body{padding:16px}
    .video-tutorial-hero{padding:24px 54px 22px 18px}
}

/* ===== SOURCE STYLE BLOCK: internal-evaluation-styles ===== */
.staff-dashboard-action.internal-evaluation{background:linear-gradient(135deg,#7a271a,#d92d20)}
@media(min-width:821px){.staff-dashboard-quick-actions{grid-template-columns:repeat(6,minmax(0,1fr))}}
.internal-box{position:relative;width:min(97%,1480px);max-height:95vh;overflow:auto;margin:2.5vh auto;padding:24px;border-radius:22px;background:#f8fafc;box-shadow:0 25px 75px rgba(16,24,40,.3)}
.internal-title{margin:0 45px 5px 0;color:#123c69}.internal-subtitle,.internal-muted{margin:0;color:#667085;font-size:12px;line-height:1.6}
.internal-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:17px 0}.internal-tab{border:1px solid #b2ccff;border-radius:11px;padding:11px 14px;background:#eef4ff;color:#175cd3;font-weight:900;cursor:pointer}.internal-tab.active{border-color:#123c69;background:#123c69;color:#fff}
.internal-pane{display:none}.internal-pane.active{display:block}.internal-card,.internal-admin-section{margin-top:14px;padding:16px;border:1px solid #dce6ef;border-radius:16px;background:#fff}.internal-card h3,.internal-card h4,.internal-admin-section h4{margin:0 0 10px;color:#123c69}
.internal-form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;align-items:end}.internal-field,.internal-admin-assignment-form label{display:flex;flex-direction:column;gap:6px;color:#123c69;font-size:11px;font-weight:850}.internal-field input,.internal-field select,.internal-admin-assignment-form input,.internal-admin-assignment-form select{width:100%;padding:10px 11px;border:1px solid #ccd8e5;border-radius:9px;background:#fff;color:#101828;font:inherit;outline:none}.internal-field input:focus,.internal-field select:focus{border-color:#1976b8;box-shadow:0 0 0 3px rgba(25,118,184,.12)}
.internal-primary,.internal-secondary,.internal-success,.internal-danger,.internal-warning{border:0;border-radius:10px;padding:10px 13px;font:inherit;font-size:11px;font-weight:900;cursor:pointer}.internal-primary{background:#123c69;color:#fff}.internal-secondary{background:#eef4ff;color:#175cd3;border:1px solid #b2ccff}.internal-success{background:#067647;color:#fff}.internal-danger{background:#fff1f0;color:#b42318;border:1px solid #fda29b}.internal-warning{background:#fff7e6;color:#8a5b00;border:1px solid #f7c96c}.internal-primary:disabled,.internal-secondary:disabled,.internal-success:disabled,.internal-danger:disabled,.internal-warning:disabled{opacity:.5;cursor:not-allowed}
.internal-project-picker{display:grid;grid-template-columns:auto minmax(240px,1fr) auto;gap:10px;align-items:center}.internal-project-picker label{font-size:11px;font-weight:900;color:#123c69}.internal-project-picker select{padding:10px 11px;border:1px solid #ccd8e5;border-radius:9px;background:#fff;font:inherit}
.internal-status-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:12px 0;padding:11px 13px;border-radius:11px;background:#eff8ff;color:#175cd3;font-size:11px;font-weight:850}.internal-status{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:9px;font-weight:950;text-transform:uppercase}.internal-status.draft{background:#fff7e6;color:#8a5b00}.internal-status.pending_class_teacher{background:#eff8ff;color:#175cd3}.internal-status.accepted_by_class_teacher{background:#ecfdf3;color:#067647}.internal-status.submitted_to_admin{background:#eaf2ff;color:#1849a9}.internal-status.returned_by_admin,.internal-status.returned_to_subject_teacher{background:#fff1f0;color:#b42318}
.internal-note{margin:10px 0;padding:11px 12px;border-left:4px solid #f04438;border-radius:9px;background:#fff1f0;color:#912018;font-size:11px;white-space:pre-wrap}.internal-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.internal-unit-form{display:grid;grid-template-columns:1.5fr .75fr auto;gap:10px;align-items:end}.internal-unit-list{display:grid;gap:8px;margin-top:12px}.internal-unit-row{display:grid;grid-template-columns:55px minmax(210px,1.4fr) minmax(150px,.7fr) minmax(110px,.5fr) auto;gap:9px;align-items:end;padding:10px;border:1px solid #e4e7ec;border-radius:11px;background:#f8fafc}.internal-unit-row .sn{align-self:center;text-align:center;color:#175cd3;font-weight:950}.internal-unit-full{padding:10px;border-radius:8px;background:#ecfdf3;color:#067647;text-align:center;font-size:11px;font-weight:900}
.internal-table-wrap{margin-top:13px;overflow:auto;border:1px solid #d0d5dd;border-radius:13px;background:#fff}.internal-table{width:100%;min-width:980px;border-collapse:separate;border-spacing:0}.internal-table th,.internal-table td{padding:8px 7px;border-right:1px solid #e4e7ec;border-bottom:1px solid #e4e7ec;text-align:center;vertical-align:middle}.internal-table th{position:sticky;top:0;z-index:3;background:#123c69;color:#fff;font-size:10px;white-space:nowrap}.internal-table th small{display:block;margin-top:3px;color:#cfe8ff;font-size:8px}.internal-table td{background:#fff;color:#344054;font-size:10px}.internal-table td.student-name{text-align:left;min-width:175px;font-weight:850}.internal-table input[type=number]{width:76px;padding:7px 5px;border:1px solid #ccd8e5;border-radius:7px;text-align:center;font:inherit}.internal-table input.invalid{border-color:#f04438;background:#fff1f0}.internal-table .calculated{font-weight:900;color:#175cd3}.internal-table .blank-total{color:#98a2b3}
.internal-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:14px}.internal-message{display:none;margin-top:10px;padding:10px 12px;border-radius:10px;font-size:11px;font-weight:850}.internal-message.show{display:block}.internal-message.success{background:#ecfdf3;color:#067647}.internal-message.error{background:#fff1f0;color:#b42318}
.internal-group-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}.internal-group-card{padding:13px;border:1px solid #d0d5dd;border-left:5px solid #175cd3;border-radius:12px;background:#fff}.internal-group-card h4{margin:0;color:#123c69}.internal-group-card p{margin:5px 0 0;color:#667085;font-size:10px;line-height:1.5}.internal-group-card-actions,.internal-submission-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.internal-role-detail{margin-top:14px}.internal-submission-list{display:grid;gap:9px;margin:12px 0}.internal-submission-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:11px;border:1px solid #e4e7ec;border-radius:11px;background:#f8fafc}.internal-submission-row strong{color:#123c69}.internal-submission-row small{display:block;margin-top:4px;color:#667085;line-height:1.5}
.internal-summary-wrap{margin-top:12px;overflow:auto;border:1px solid #d0d5dd;border-radius:12px}.internal-summary-table{width:100%;min-width:1050px;border-collapse:collapse}.internal-summary-table th,.internal-summary-table td{padding:8px 7px;border:1px solid #e4e7ec;text-align:center;font-size:9px}.internal-summary-table thead tr:first-child th{background:#123c69;color:#fff}.internal-summary-table thead tr:nth-child(2) th{background:#eaf2ff;color:#1849a9}.internal-summary-table td.student-name{text-align:left;min-width:170px;font-weight:850}.internal-admin-assignment-form{display:grid;grid-template-columns:1fr 1.5fr auto;gap:10px;align-items:end;margin-top:10px}.internal-admin-assignment-list{display:grid;gap:7px;margin-top:11px}.internal-assignment-row{display:grid;grid-template-columns:1fr 1.6fr auto;gap:9px;align-items:center;padding:9px 11px;border:1px solid #e4e7ec;border-radius:10px;background:#f8fafc;font-size:11px}.internal-assignment-row strong{color:#123c69}
body.dark-mode .internal-box{background:#17232e;color:#eee}body.dark-mode .internal-card,body.dark-mode .internal-admin-section,body.dark-mode .internal-group-card,body.dark-mode .internal-table td{background:#22313f;border-color:#405467;color:#e5e7eb}body.dark-mode .internal-card h3,body.dark-mode .internal-card h4,body.dark-mode .internal-title,body.dark-mode .internal-field,body.dark-mode .internal-group-card h4{color:#8ecbff}body.dark-mode .internal-field input,body.dark-mode .internal-field select,body.dark-mode .internal-project-picker select,body.dark-mode .internal-table input{background:#17232e;color:#fff;border-color:#405467}
@media(max-width:900px){.internal-box{width:100%;min-height:100%;max-height:none;margin:0;border-radius:0;padding:19px 12px}.internal-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.internal-unit-form,.internal-unit-row,.internal-admin-assignment-form,.internal-assignment-row{grid-template-columns:1fr}.internal-unit-row .sn{text-align:left}.internal-group-list{grid-template-columns:1fr}.internal-project-picker{grid-template-columns:1fr}.internal-actions{justify-content:stretch}.internal-actions button{flex:1}}
@media(max-width:520px){.internal-form-grid{grid-template-columns:1fr}.internal-tabs{display:grid;grid-template-columns:1fr}.internal-tab{width:100%}}

/* ===== SOURCE STYLE BLOCK: unified-marks-entry-final-styles ===== */
button[onclick="showWebsiteAdminTab('internalEvaluations')"],
#websiteAdminInternalEvaluationsTab,
#staffDashboardInternalEvaluationAction,
#internalEvaluationPopup{display:none!important}
.staff-dashboard-action.marks{display:block!important;background:linear-gradient(135deg,#175cd3,#0ba5ec)!important}
.ume-box{position:relative;width:min(97%,1480px);max-height:95vh;overflow:auto;margin:2.5vh auto;padding:24px;border-radius:22px;background:#f8fafc;box-shadow:0 24px 75px rgba(16,24,40,.32)}
.ume-title{margin:0 44px 5px 0;color:#123c69}.ume-subtitle{margin:0 44px 16px 0;color:#667085;font-size:13px;line-height:1.55}
.ume-identity{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:13px 0;padding:12px 14px;border:1px solid #b2ddff;border-radius:12px;background:#eff8ff;color:#175cd3;font-size:12px;font-weight:900}
.ume-tabs{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0}.ume-tabs button,.ume-btn{border:0;border-radius:10px;padding:10px 13px;font:inherit;font-size:12px;font-weight:900;cursor:pointer}
.ume-tabs button{background:#eef2f6;color:#344054;border:1px solid #d0d5dd}.ume-tabs button.active,.ume-primary{background:#123c69!important;color:#fff!important}.ume-secondary{background:#eef4ff;color:#175cd3;border:1px solid #b2ccff}.ume-success{background:#067647;color:#fff}.ume-warning{background:#fff7e6;color:#8a5b00;border:1px solid #fedf89}.ume-danger{background:#fff1f0;color:#b42318;border:1px solid #fda29b}.ume-btn:disabled{opacity:.5;cursor:not-allowed}
.ume-panel{display:none}.ume-panel.active{display:block}.ume-card{margin-top:14px;padding:16px;border:1px solid #dce6ef;border-radius:15px;background:#fff}.ume-card h3,.ume-card h4{margin:0 0 10px;color:#123c69}
.ume-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;align-items:end}.ume-field{display:flex;flex-direction:column;gap:6px;color:#123c69;font-size:11px;font-weight:900}.ume-field input,.ume-field select{width:100%;padding:10px 11px;border:1px solid #ccd8e5;border-radius:9px;background:#fff;color:#101828;font:inherit;outline:none}.ume-field input:focus,.ume-field select:focus{border-color:#175cd3;box-shadow:0 0 0 3px rgba(23,92,211,.1)}
.ume-picker{display:grid;grid-template-columns:auto minmax(250px,1fr) auto;gap:10px;align-items:center}.ume-picker label{color:#123c69;font-size:12px;font-weight:900}.ume-picker select{padding:10px;border:1px solid #ccd8e5;border-radius:9px;background:#fff;font:inherit}
.ume-summary{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:12px 0}.ume-summary div{padding:10px;border-radius:10px;background:#f2f4f7;color:#667085;font-size:10px}.ume-summary strong{display:block;margin-top:3px;color:#123c69;font-size:12px;overflow-wrap:anywhere}
.ume-status{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:950;text-transform:uppercase}.ume-status.draft{background:#fff7e6;color:#8a5b00}.ume-status.pending{background:#eff8ff;color:#175cd3}.ume-status.accepted{background:#ecfdf3;color:#067647}.ume-status.admin{background:#eef4ff;color:#3538cd}.ume-status.returned{background:#fff1f0;color:#b42318}
.ume-note{margin:10px 0;padding:11px 12px;border-left:4px solid #f04438;border-radius:9px;background:#fff1f0;color:#912018;font-size:12px;white-space:pre-wrap}
.ume-component-form{display:grid;grid-template-columns:minmax(180px,1.5fr) minmax(130px,.7fr) auto;gap:10px;align-items:end}.ume-components{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:9px;margin-top:12px}.ume-component{padding:11px;border:1px solid #d0d5dd;border-radius:11px;background:#f8fafc}.ume-component strong{display:block;margin-bottom:7px;color:#123c69}.ume-component-controls{display:flex;align-items:center;gap:7px}.ume-component-controls input{min-width:0;flex:1;padding:8px;border:1px solid #ccd8e5;border-radius:8px;font:inherit}.ume-component-controls button{padding:8px 9px}
.ume-table-wrap{margin-top:13px;overflow:auto;border:1px solid #d0d5dd;border-radius:12px;background:#fff}.ume-table{width:100%;min-width:820px;border-collapse:separate;border-spacing:0}.ume-table th,.ume-table td{padding:8px;border-right:1px solid #e4e7ec;border-bottom:1px solid #e4e7ec;text-align:center;vertical-align:middle}.ume-table th{background:#123c69;color:#fff;font-size:10px;white-space:nowrap}.ume-table thead tr:nth-child(2) th{background:#175c8f}.ume-table thead tr:nth-child(3) th{background:#1976b8}.ume-table td{background:#fff;color:#344054;font-size:11px}.ume-table td.ume-student{text-align:left;min-width:170px;font-weight:850}.ume-table input[type=number]{width:84px;padding:8px 6px;border:1px solid #ccd8e5;border-radius:8px;text-align:center;font:inherit}.ume-table input:disabled{background:#f2f4f7;color:#667085}
.ume-table input.ume-invalid,.ume-component-controls input.ume-invalid{border-color:#f04438!important;background:#fff1f0!important;color:#b42318!important;box-shadow:0 0 0 3px rgba(240,68,56,.12)!important}
.ume-mark-cell{display:flex;align-items:center;justify-content:center;gap:7px;min-width:150px}.ume-absent-label{display:inline-flex;align-items:center;gap:4px;color:#667085;font-size:9px;font-weight:900;white-space:nowrap;cursor:pointer}.ume-absent-label input{width:15px!important;height:15px;margin:0;accent-color:#b42318}.ume-abs-badge{display:none;padding:4px 7px;border-radius:7px;background:#fff1f0;color:#b42318;font-size:10px;font-weight:950}.ume-mark-cell.is-absent .ume-abs-badge{display:inline-flex}.ume-mark-cell.is-absent .ume-obtained{display:none}
.ume-actions{display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap;margin-top:13px}.ume-empty{padding:22px;border:1px dashed #b8c3d0;border-radius:11px;color:#667085;text-align:center;font-size:12px}.ume-message{display:none;margin-top:10px;padding:10px 12px;border-radius:10px;font-size:12px;font-weight:850}.ume-message.show{display:block}.ume-message.success{background:#ecfdf3;color:#067647}.ume-message.error{background:#fff1f0;color:#b42318}
.ume-group-list{display:grid;gap:13px}.ume-group{padding:14px;border:1px solid #d0d5dd;border-left:5px solid #175cd3;border-radius:13px;background:#fff}.ume-group-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}.ume-group-title{color:#123c69;font-weight:950}.ume-meta{margin-top:4px;color:#667085;font-size:11px;line-height:1.55}.ume-subjects{display:grid;gap:7px;margin-top:11px}.ume-subject-row{display:grid;grid-template-columns:minmax(150px,1.2fr) minmax(150px,1fr) auto;gap:10px;align-items:center;padding:9px 10px;border:1px solid #e4e7ec;border-radius:10px;background:#f8fafc}.ume-subject-row strong{color:#123c69}.ume-row-actions{display:flex;gap:6px;flex-wrap:wrap}.ume-row-actions button{padding:7px 9px}.ume-group-actions{display:flex;gap:7px;flex-wrap:wrap}.ume-admin-map{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.ume-admin-map span{padding:6px 8px;border-radius:8px;background:#eff8ff;color:#175cd3;font-size:10px;font-weight:800}
.ume-class-filter{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0 15px;padding:11px;border:1px solid #dce6ef;border-radius:12px;background:#f8fafc}.ume-class-filter button{border:1px solid #b2ccff;border-radius:9px;padding:8px 11px;background:#eef4ff;color:#175cd3;font:inherit;font-size:11px;font-weight:900;cursor:pointer}.ume-class-filter button.active{border-color:#123c69;background:#123c69;color:#fff;box-shadow:0 3px 9px rgba(18,60,105,.2)}
body.dark-mode .ume-box{background:#17232e;color:#eee}body.dark-mode .ume-card,body.dark-mode .ume-group,body.dark-mode .ume-table td{background:#22313f;border-color:#405467;color:#e5e7eb}body.dark-mode .ume-title,body.dark-mode .ume-card h3,body.dark-mode .ume-card h4,body.dark-mode .ume-field,body.dark-mode .ume-summary strong,body.dark-mode .ume-group-title,body.dark-mode .ume-subject-row strong{color:#8ecbff}body.dark-mode .ume-field input,body.dark-mode .ume-field select,body.dark-mode .ume-picker select,body.dark-mode .ume-component-controls input,body.dark-mode .ume-table input[type=number]{background:#17232e;color:#fff;border-color:#405467}body.dark-mode .ume-component,body.dark-mode .ume-subject-row{background:#1d2935;border-color:#405467}
body.dark-mode .ume-class-filter{background:#1d2935;border-color:#405467}body.dark-mode .ume-class-filter button{background:#22313f;color:#8ecbff;border-color:#405467}body.dark-mode .ume-class-filter button.active{background:#175cd3;color:#fff;border-color:#175cd3}
@media(max-width:900px){.ume-box{width:100%;min-height:100%;max-height:none;margin:0;padding:20px 12px;border-radius:0}.ume-grid,.ume-component-form{grid-template-columns:1fr}.ume-picker{grid-template-columns:1fr}.ume-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.ume-subject-row{grid-template-columns:1fr}.ume-actions{justify-content:stretch}.ume-actions .ume-btn{flex:1}}

/* ===== SOURCE STYLE BLOCK: staff-dashboard-premium-final-css ===== */
/* =========================================================
   FINAL STAFF WELCOME + PREMIUM DASHBOARD POLISH
========================================================= */
.staff-dashboard-welcome-popup{
    z-index:30000;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:
        radial-gradient(circle at 15% 18%,rgba(255,209,102,.19),transparent 27%),
        radial-gradient(circle at 87% 82%,rgba(66,153,225,.19),transparent 29%),
        rgba(3,15,30,.88);
}
.staff-dashboard-welcome-card{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    width:min(96%,650px);
    border:1px solid rgba(255,255,255,.24);
    border-radius:30px;
    padding:1px;
    background:linear-gradient(145deg,rgba(255,209,102,.94),rgba(255,255,255,.34),rgba(84,169,255,.78));
    box-shadow:0 34px 100px rgba(0,0,0,.46);
    animation:staffWelcomeRise .5s cubic-bezier(.2,.82,.25,1);
}
.staff-dashboard-welcome-card::before{
    content:"";
    position:absolute;
    inset:1px;
    z-index:-2;
    border-radius:29px;
    background:
        linear-gradient(145deg,rgba(255,255,255,.08),transparent 40%),
        linear-gradient(145deg,#06294f 0%,#0b3d70 48%,#6f1732 100%);
}
.staff-dashboard-welcome-card::after{
    content:"";
    position:absolute;
    left:9%;
    right:9%;
    bottom:0;
    height:1px;
    background:linear-gradient(90deg,transparent,#ffd166,transparent);
}
.staff-dashboard-welcome-glow{
    position:absolute;
    z-index:-1;
    border-radius:50%;
    filter:blur(2px);
    pointer-events:none;
}
.staff-dashboard-welcome-glow.one{
    width:240px;
    height:240px;
    top:-145px;
    right:-70px;
    background:rgba(255,209,102,.16);
    border:1px solid rgba(255,209,102,.28);
}
.staff-dashboard-welcome-glow.two{
    width:210px;
    height:210px;
    bottom:-150px;
    left:-95px;
    background:rgba(73,157,232,.18);
    border:1px solid rgba(144,202,249,.21);
}
.staff-dashboard-welcome-content{
    position:relative;
    z-index:2;
    padding:38px 48px 31px;
    text-align:center;
    color:#fff;
}
.staff-dashboard-welcome-logo-wrap{
    position:relative;
    width:105px;
    height:105px;
    margin:0 auto 17px;
    border-radius:50%;
    padding:5px;
    background:linear-gradient(145deg,#ffd166,#fff4c7);
    box-shadow:0 13px 34px rgba(0,0,0,.3),0 0 0 8px rgba(255,255,255,.07);
}
.staff-dashboard-welcome-logo-wrap img{
    width:100%;
    height:100%;
    display:block;
    border-radius:50%;
    object-fit:cover;
    background:#fff;
    border:3px solid #fff;
}
.staff-dashboard-welcome-check{
    position:absolute;
    right:-3px;
    bottom:4px;
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border:3px solid #0b3d70;
    border-radius:50%;
    background:#12b76a;
    color:#fff;
    font-size:16px;
    font-weight:950;
    box-shadow:0 5px 13px rgba(0,0,0,.22);
}
.staff-dashboard-welcome-badge{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-bottom:13px;
    padding:6px 12px;
    border:1px solid rgba(171,239,198,.38);
    border-radius:999px;
    background:rgba(18,183,106,.12);
    color:#b9f6d4;
    font-size:10px;
    font-weight:950;
    letter-spacing:1.35px;
}
.staff-dashboard-welcome-badge::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:#32d583;
    box-shadow:0 0 0 5px rgba(50,213,131,.12);
}
.staff-dashboard-welcome-content h2{
    margin:0;
    color:#fff;
    font-size:clamp(25px,4vw,38px);
    line-height:1.17;
    letter-spacing:-.6px;
    text-shadow:0 3px 14px rgba(0,0,0,.22);
}
.staff-dashboard-welcome-content h2 span{color:#ffd166}
.staff-dashboard-welcome-identity{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px 13px;
    flex-wrap:wrap;
    margin:19px auto 13px;
}
.staff-dashboard-welcome-identity strong{
    color:#fff;
    font-size:15px;
    font-weight:950;
}
.staff-dashboard-welcome-identity span{
    padding:5px 10px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    background:rgba(255,255,255,.08);
    color:#dbeafe;
    font-size:11px;
    font-weight:800;
}
.staff-dashboard-welcome-message{
    max-width:520px;
    margin:0 auto 22px;
    color:rgba(255,255,255,.78);
    font-size:13px;
    line-height:1.7;
}
#staffDashboardWelcomeEnter{
    width:min(100%,420px);
    min-height:55px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:11px;
    margin:0 auto;
    padding:11px 17px;
    border:0;
    border-radius:15px;
    background:linear-gradient(135deg,#ffd166,#f3b83d);
    color:#102a43;
    cursor:pointer;
    box-shadow:0 13px 30px rgba(244,183,55,.23);
    transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}
#staffDashboardWelcomeEnter span:first-child{
    padding:5px 8px;
    border-radius:8px;
    background:rgba(16,42,67,.1);
    font-size:11px;
    font-weight:950;
}
#staffDashboardWelcomeEnter strong{font-size:14px;letter-spacing:.6px}
#staffDashboardWelcomeEnter span:last-child{font-size:21px;font-weight:900}
#staffDashboardWelcomeEnter:hover{
    transform:translateY(-3px);
    filter:brightness(1.04);
    box-shadow:0 17px 35px rgba(244,183,55,.31);
}
#staffDashboardWelcomeEnter:focus-visible{outline:3px solid #fff;outline-offset:4px}
.staff-dashboard-welcome-school{
    margin:19px 0 0;
    color:rgba(255,255,255,.47);
    font-size:9px;
    font-weight:900;
    letter-spacing:1.45px;
}
@keyframes staffWelcomeRise{
    from{opacity:0;transform:translateY(22px) scale(.95)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

/* Dashboard visual upgrade and Quick Access at the top. */
.staff-dashboard-box{
    width:min(97%,1180px);
    background:linear-gradient(180deg,#f5f8fc 0%,#edf3f8 100%);
    border:1px solid rgba(255,255,255,.8);
    box-shadow:0 34px 100px rgba(6,28,50,.38);
}
.staff-dashboard-hero{
    min-height:139px;
    background:
        radial-gradient(circle at 90% 12%,rgba(255,209,102,.33),transparent 29%),
        radial-gradient(circle at 58% 110%,rgba(63,144,210,.22),transparent 35%),
        linear-gradient(125deg,#06294f 0%,#0b4f82 54%,#6f1732 100%);
}
.staff-dashboard-content{padding:22px 24px 27px}
.staff-dashboard-quick-shell{
    position:relative;
    overflow:hidden;
    margin:0 0 18px;
    padding:17px;
    border:1px solid #d8e5ef;
    border-radius:20px;
    background:linear-gradient(145deg,#ffffff 0%,#f5f9fd 100%);
    box-shadow:0 9px 27px rgba(18,60,105,.08);
}
.staff-dashboard-quick-shell::after{
    content:"";
    position:absolute;
    width:170px;
    height:170px;
    top:-115px;
    right:-75px;
    border-radius:50%;
    background:rgba(255,209,102,.18);
    pointer-events:none;
}
.staff-dashboard-quick-heading{
    position:relative;
    z-index:1;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    margin:0 2px 13px;
}
.staff-dashboard-quick-heading p{
    margin:0 0 3px;
    color:#7a1734;
    font-size:9px;
    font-weight:950;
    letter-spacing:1.25px;
}
.staff-dashboard-quick-heading h3{margin:0;color:#123c69;font-size:17px}
.staff-dashboard-quick-heading>span{
    padding:6px 10px;
    border-radius:999px;
    background:#ecfdf3;
    color:#067647;
    font-size:9px;
    font-weight:950;
    letter-spacing:.55px;
}
.staff-dashboard-quick-actions{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin:0;
}
.staff-dashboard-action,
.staff-dashboard-action.marks{
    position:relative;
    overflow:hidden;
    min-height:78px;
    display:flex!important;
    align-items:center;
    gap:11px;
    padding:12px 13px!important;
    border:1px solid rgba(255,255,255,.2)!important;
    border-radius:15px!important;
    color:#fff!important;
    text-align:left;
    box-shadow:0 7px 17px rgba(16,42,67,.13);
    transition:transform .2s ease,box-shadow .2s ease,filter .2s ease!important;
}
.staff-dashboard-action::after{
    content:"";
    position:absolute;
    width:72px;
    height:72px;
    right:-36px;
    bottom:-43px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:50%;
}
.staff-dashboard-action:hover{
    transform:translateY(-3px)!important;
    filter:brightness(1.06)!important;
    box-shadow:0 11px 23px rgba(16,42,67,.2);
}
.staff-dashboard-action.leave{background:linear-gradient(135deg,#087443,#12a36a)!important}
.staff-dashboard-action.approved{background:linear-gradient(135deg,#0b4f82,#1976b8)!important}
.staff-dashboard-action.plan{background:linear-gradient(135deg,#5b21b6,#8b5cf6)!important}
.staff-dashboard-action.idea{background:linear-gradient(135deg,#9a6700,#d49b13)!important}
.staff-dashboard-action.marks{background:linear-gradient(135deg,#175cd3,#0ba5ec)!important}
.staff-dashboard-action.video{background:linear-gradient(135deg,#6f1732,#ad3d61)!important}
.staff-dashboard-action-icon{
    width:42px;
    height:42px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.22);
    border-radius:12px;
    background:rgba(255,255,255,.14);
    font-size:19px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.13);
}
.staff-dashboard-action-copy{min-width:0;flex:1;display:block}
.staff-dashboard-action-copy strong{
    display:block;
    color:#fff;
    font-size:13px;
    line-height:1.2;
}
.staff-dashboard-action-copy small{
    display:block;
    margin-top:4px;
    color:rgba(255,255,255,.76);
    font-size:9px;
    font-weight:700;
    line-height:1.3;
}
.staff-dashboard-action-arrow{
    position:relative;
    z-index:1;
    color:rgba(255,255,255,.8);
    font-size:17px;
    transition:transform .2s ease;
}
.staff-dashboard-action:hover .staff-dashboard-action-arrow{transform:translateX(3px)}
.staff-dashboard-stats{margin-bottom:18px}
.staff-dashboard-stat{
    border:1px solid #dfe8ef;
    box-shadow:0 7px 19px rgba(18,60,105,.06);
    transition:transform .2s ease,box-shadow .2s ease;
}
.staff-dashboard-stat:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(18,60,105,.1)}
.staff-dashboard-card{border-color:#dbe5ed;box-shadow:0 9px 25px rgba(18,60,105,.07)}
body.dark-mode .staff-dashboard-quick-shell{background:linear-gradient(145deg,#22313f,#1b2936);border-color:#405467}
body.dark-mode .staff-dashboard-quick-heading h3{color:#8ecbff}
body.dark-mode .staff-dashboard-quick-heading p{color:#f1a9bf}
body.dark-mode .staff-dashboard-box{background:linear-gradient(180deg,#17232e,#111d27)}
@media(max-width:900px){
    .staff-dashboard-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
    .staff-dashboard-welcome-popup{padding:12px}
    .staff-dashboard-welcome-card{width:100%;border-radius:25px}
    .staff-dashboard-welcome-card::before{border-radius:24px}
    .staff-dashboard-welcome-content{padding:30px 20px 25px}
    .staff-dashboard-welcome-logo-wrap{width:88px;height:88px}
    .staff-dashboard-welcome-message{font-size:12px}
    .staff-dashboard-content{padding:13px}
    .staff-dashboard-quick-shell{padding:13px;border-radius:16px}
    .staff-dashboard-quick-heading{align-items:flex-start}
    .staff-dashboard-quick-heading>span{display:none}
    .staff-dashboard-quick-heading h3{font-size:15px}
    .staff-dashboard-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
    .staff-dashboard-action,.staff-dashboard-action.marks{min-height:72px;padding:10px!important;gap:8px}
    .staff-dashboard-action-icon{width:36px;height:36px;border-radius:10px;font-size:16px}
    .staff-dashboard-action-copy strong{font-size:11px}
    .staff-dashboard-action-copy small{display:none}
    .staff-dashboard-action-arrow{font-size:14px}
}
@media(max-width:410px){
    .staff-dashboard-quick-actions{grid-template-columns:1fr}
    .staff-dashboard-action,.staff-dashboard-action.marks{min-height:62px}
    .staff-dashboard-action-copy small{display:block}
}

/* ===== SOURCE STYLE BLOCK: ume-roster-grid-final-style ===== */
/* Class Teacher Student Roster — clean 3-column portfolio-style layout */
#umeTeacherRosterList.ume-roster-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
#umeTeacherRosterList .ume-roster-card{display:flex;align-items:center;gap:12px;min-height:74px;padding:14px 15px;border:1px solid #dce6ef;border-radius:15px;background:linear-gradient(145deg,#f8fbff,#eef5fc);box-shadow:0 5px 14px rgba(18,60,105,.08)}
#umeTeacherRosterList .ume-roster-sn{flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#123c69,#1976b8);color:#fff;font-size:13px;font-weight:900;box-shadow:0 4px 10px rgba(18,60,105,.18)}
#umeTeacherRosterList .ume-roster-info{min-width:0;text-align:left}
#umeTeacherRosterList .ume-roster-name{color:#123c69;font-size:13px;font-weight:900;line-height:1.35;word-break:break-word}
#umeTeacherRosterList .ume-roster-id{margin-top:4px;color:#667085;font-size:10px;font-weight:700;word-break:break-word}
body.dark-mode #umeTeacherRosterList .ume-roster-card{background:#22313f;border-color:#405467}
body.dark-mode #umeTeacherRosterList .ume-roster-name{color:#8ecbff}
body.dark-mode #umeTeacherRosterList .ume-roster-id{color:#c7d4df}
@media(max-width:900px){#umeTeacherRosterList.ume-roster-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){#umeTeacherRosterList.ume-roster-grid{grid-template-columns:1fr}}

/* ===== SOURCE STYLE BLOCK: class-teacher-portfolio-final-css ===== */
.ctp-hidden{display:none!important}.ctp-popup{position:fixed;inset:0;z-index:10060;background:rgba(5,18,35,.86);display:none;align-items:flex-start;justify-content:center;padding:18px;overflow:auto}.ctp-shell{width:min(1120px,100%);margin:auto;background:#f6f9fc;border-radius:24px;box-shadow:0 28px 80px rgba(0,0,0,.35);overflow:hidden;color:#172b4d}.ctp-head{padding:22px 24px;background:linear-gradient(135deg,#123c69,#1c70aa);color:#fff;display:flex;justify-content:space-between;gap:14px;align-items:center}.ctp-head h2{margin:0;font-size:22px}.ctp-head p{margin:5px 0 0;opacity:.84}.ctp-close{border:0;background:rgba(255,255,255,.16);color:#fff;width:40px;height:40px;border-radius:50%;font-size:24px;cursor:pointer}.ctp-body{padding:20px}.ctp-banner{border-radius:15px;padding:13px 15px;margin-bottom:16px;background:#eaf7ef;color:#067647;font-weight:750}.ctp-banner.off{background:#fff1f0;color:#b42318}.ctp-toolbar{display:grid;grid-template-columns:180px 1fr auto;gap:10px;margin-bottom:16px}.ctp-toolbar select,.ctp-toolbar input,.ctp-form input{width:100%;padding:11px 12px;border:1px solid #cbd8e6;border-radius:11px;background:#fff;color:#172b4d}.ctp-btn{border:0;border-radius:11px;padding:10px 14px;font-weight:800;cursor:pointer;background:#123c69;color:#fff}.ctp-btn.green{background:#087a55}.ctp-btn.light{background:#e9f1f8;color:#123c69}.ctp-btn:disabled{opacity:.55;cursor:not-allowed}.ctp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:12px}.ctp-student{background:#fff;border:1px solid #dce5ee;border-radius:16px;padding:14px;display:flex;gap:12px;align-items:center}.ctp-avatar{width:52px;height:52px;border-radius:14px;background:#edf4fa;display:grid;place-items:center;font-size:25px;flex:0 0 auto}.ctp-student strong{display:block;color:#123c69}.ctp-student small{color:#667085}.ctp-edit{background:#fff;border-radius:17px;border:1px solid #dce5ee;padding:17px;margin-top:16px}.ctp-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.ctp-form label{display:grid;gap:6px;font-size:12px;font-weight:800;color:#344054}.ctp-form-actions{grid-column:1/-1;display:flex;gap:9px;flex-wrap:wrap}.ctp-photo-actions{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:9px;margin-top:15px}.ctp-photo-card{background:#f7fafc;border:1px solid #dce5ee;border-radius:13px;padding:10px;text-align:center}.ctp-photo-card strong{display:block;margin-bottom:7px}.ctp-message{display:none;margin-top:13px;padding:11px 13px;border-radius:11px;font-weight:750}.ctp-message.show{display:block}.ctp-message.success{background:#ecfdf3;color:#067647}.ctp-message.error{background:#fff1f0;color:#b42318}.ctp-access-row{display:grid;grid-template-columns:115px minmax(160px,1fr) 140px 190px auto;gap:10px;align-items:center;padding:12px;border:1px solid #dce5ee;border-radius:14px;background:#fff;margin-bottom:9px}.ctp-access-status{font-size:11px;font-weight:900;border-radius:999px;padding:6px 9px;text-align:center;background:#fff1f0;color:#b42318}.ctp-access-status.on{background:#ecfdf3;color:#067647}.ctp-audit{margin-top:18px}.ctp-audit-row{padding:10px 12px;border-bottom:1px solid #e4e9ef;font-size:12px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}.ctp-audit-delete{border:1px solid #f2b8b5;background:#fff1f0;color:#b42318;border-radius:9px;padding:7px 10px;font-size:11px;font-weight:850;cursor:pointer}.ctp-audit-delete:hover{background:#b42318;color:#fff}.ctp-dashboard-action{background:linear-gradient(135deg,#0b6b5b,#15957e)!important}.ctp-file-note{font-size:11px;color:#667085;margin-top:7px}.ctp-spinner{padding:25px;text-align:center;color:#667085}.ctp-expiry{padding:9px!important;font-size:12px}.ctp-admin-card{background:#f7fafc;border:1px solid #dce5ee;border-radius:16px;padding:16px;margin-bottom:15px}
body.dark-mode .ctp-shell{background:#17232e;color:#eef2f6}body.dark-mode .ctp-edit,body.dark-mode .ctp-student,body.dark-mode .ctp-access-row,body.dark-mode .ctp-admin-card{background:#22313f;border-color:#405467}body.dark-mode .ctp-form input,body.dark-mode .ctp-toolbar input,body.dark-mode .ctp-toolbar select{background:#17232e;color:#fff;border-color:#405467}body.dark-mode .ctp-student strong{color:#8ecbff}
@media(max-width:760px){.ctp-popup{padding:0}.ctp-shell{min-height:100%;border-radius:0}.ctp-head{padding:18px 16px}.ctp-body{padding:14px}.ctp-toolbar{grid-template-columns:1fr}.ctp-form{grid-template-columns:1fr}.ctp-access-row{grid-template-columns:1fr 1fr}.ctp-access-row>*:nth-child(2),.ctp-access-row>*:nth-child(4){grid-column:1/-1}.ctp-btn{min-height:44px}}

/* ===== SOURCE STYLE BLOCK: ctp-standard-list-countdown-override ===== */
.ctp-banner.warning{background:#fff7db;color:#8a5b00}.ctp-banner.urgent{background:#fff1f0;color:#b42318}.ctp-grid{grid-template-columns:1fr;gap:9px}.ctp-student{display:grid;grid-template-columns:44px minmax(0,1fr) auto;padding:12px 14px;border-radius:14px}.ctp-roll{width:42px;height:42px;border-radius:50%;background:#edf4fa;color:#123c69;display:grid;place-items:center;font-weight:900}.ctp-profile-head{display:grid;grid-template-columns:112px minmax(0,1fr);gap:18px;align-items:center;margin:15px 0 20px}.ctp-profile-photo{width:112px;height:112px;border-radius:20px;background:#edf4fa;display:grid;place-items:center;overflow:hidden;font-size:40px}.ctp-profile-photo img,.ctp-month-preview img{width:100%;height:100%;object-fit:cover}.ctp-month-preview{height:105px;border-radius:10px;background:#eaf0f5;display:grid;place-items:center;overflow:hidden;margin-bottom:8px;color:#667085;font-size:11px}.ctp-photo-actions{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.ctp-photo-card{border-radius:14px;padding:9px}.ctp-edit{margin-top:4px}
@media(max-width:560px){.ctp-student{grid-template-columns:38px minmax(0,1fr) auto;gap:8px;padding:10px}.ctp-roll{width:36px;height:36px}.ctp-student .ctp-btn{padding:8px 10px;min-height:38px}.ctp-profile-head{grid-template-columns:84px minmax(0,1fr);gap:12px}.ctp-profile-photo{width:84px;height:84px}.ctp-photo-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== SOURCE STYLE BLOCK: ctp-draft-save-css ===== */
.ctp-draft-badge{display:inline-flex;margin:6px 0;padding:5px 9px;border-radius:999px;background:#fff7db;color:#8a5b00;font-size:11px;font-weight:900}.ctp-draft-actions{position:sticky;bottom:8px;z-index:5;display:flex;gap:9px;flex-wrap:wrap;margin-top:16px;padding:12px;border-radius:14px;background:rgba(255,255,255,.96);border:1px solid #dce5ee;box-shadow:0 8px 28px rgba(18,60,105,.14)}body.dark-mode .ctp-draft-actions{background:rgba(34,49,63,.97);border-color:#405467}.ctp-audit-row{grid-template-columns:auto minmax(0,1fr) auto}.ctp-audit-check{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#eef5fb}.ctp-audit-check input{width:17px;height:17px;accent-color:#123c69}.ctp-audit-toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:10px 0 13px;border-bottom:1px solid #e4e9ef}.ctp-audit-toolbar label{font-weight:850}.ctp-audit-toolbar input{width:17px;height:17px;vertical-align:middle;accent-color:#123c69}.ctp-audit-toolbar span{margin-right:auto;color:#667085;font-weight:800}.ctp-audit-delete:disabled{opacity:.5;cursor:not-allowed}
.ctp-bulk-grid{display:grid;grid-template-columns:minmax(190px,1fr) auto auto;gap:9px;align-items:end}@media(max-width:700px){.ctp-bulk-grid{grid-template-columns:1fr}.ctp-bulk-grid .ctp-btn{width:100%}}

/* ===== SOURCE STYLE BLOCK: student-portfolio-privacy-style ===== */
/* Only Student Portfolio / student monthly-progress images are affected. */
#studentRollView .student-photo-item,
#studentRollView .student-main-photo-wrap,
#studentRollView .ctp-profile-photo{
    position:relative;
    overflow:hidden;
}

/* Do not allow the browser's normal image selection/drag behavior. */
#studentRollView img[data-student-month-photo],
#studentRollView .student-main-photo,
#studentRollView [id^="ctpPublicMonth"],
#studentRollView #ctpPublicProfile img,
#photoLightbox.student-secure-lightbox #largePhoto{
    -webkit-user-select:none !important;
    user-select:none !important;
    -webkit-user-drag:none !important;
    pointer-events:auto;
}

/* Watermark shown over every visible Student Portfolio photo thumbnail. */
.student-secure-thumb-watermark{
    position:absolute;
    inset:0;
    z-index:8;
    pointer-events:none;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}

.student-secure-thumb-watermark::before{
    content:attr(data-watermark);
    position:absolute;
    left:50%;
    top:50%;
    width:160%;
    transform:translate(-50%,-50%) rotate(-24deg);
    color:rgba(255,255,255,.64);
    text-shadow:0 1px 3px rgba(0,0,0,.72);
    font-size:10px;
    font-weight:800;
    line-height:2.7;
    letter-spacing:.25px;
    white-space:pre-wrap;
    text-align:center;
    word-spacing:8px;
}

/* Full-screen lightbox watermark. */
#studentSecureLightboxWatermark{
    position:absolute;
    inset:0;
    z-index:9;
    pointer-events:none;
    overflow:hidden;
    display:none;
}

#photoLightbox.student-secure-lightbox #studentSecureLightboxWatermark{
    display:block;
}

#studentSecureLightboxWatermark .student-secure-watermark-grid{
    position:absolute;
    inset:-18%;
    display:grid;
    grid-template-columns:repeat(3,minmax(230px,1fr));
    grid-auto-rows:145px;
    align-items:center;
    justify-items:center;
    transform:rotate(-24deg) scale(1.12);
    opacity:.78;
}

#studentSecureLightboxWatermark .student-secure-watermark-cell{
    color:rgba(255,255,255,.72);
    text-shadow:0 2px 5px rgba(0,0,0,.85);
    font-weight:800;
    font-size:13px;
    line-height:1.55;
    text-align:center;
    white-space:nowrap;
}

#studentSecureLightboxWatermark .student-secure-watermark-banner{
    position:absolute;
    left:50%;
    bottom:16px;
    transform:translateX(-50%);
    max-width:94%;
    padding:8px 14px;
    border-radius:20px;
    background:rgba(0,0,0,.62);
    color:#fff;
    font-size:12px;
    font-weight:700;
    text-align:center;
    box-shadow:0 3px 12px rgba(0,0,0,.28);
}

/* Small privacy notice inside the Student Portfolio page only. */
.student-secure-privacy-note{
    margin:15px auto 5px;
    max-width:620px;
    padding:9px 12px;
    border-radius:10px;
    background:#fff7df;
    border:1px solid #f3d488;
    color:#795400;
    font-size:12px;
    line-height:1.5;
    text-align:center;
}

body.dark-mode .student-secure-privacy-note{
    background:#3a321d;
    border-color:#776631;
    color:#ffe7a0;
}

@media(max-width:600px){
    .student-secure-thumb-watermark::before{
        font-size:8px;
        line-height:2.45;
    }
    #studentSecureLightboxWatermark .student-secure-watermark-grid{
        grid-template-columns:repeat(2,minmax(170px,1fr));
        grid-auto-rows:125px;
    }
    #studentSecureLightboxWatermark .student-secure-watermark-cell{
        font-size:10px;
    }
    #studentSecureLightboxWatermark .student-secure-watermark-banner{
        bottom:10px;
        font-size:10px;
        padding:7px 10px;
    }
}

/* Printing Student Portfolio photos is intentionally hidden. */
@media print{
    #studentRollView .student-photo-gallery,
    #studentRollView .student-main-photo-wrap,
    #studentRollView .ctp-profile-photo,
    #photoLightbox.student-secure-lightbox{
        display:none !important;
    }
}

/* ===== SOURCE STYLE BLOCK: marks-grade-view-final-css ===== */
.ume-filter-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin:12px 0 15px;padding:12px;border:1px solid #d7e3ef;border-radius:14px;background:#f8fbff}
.ume-filter-bar .ume-field{min-width:180px;flex:0 1 230px}.ume-view-switch{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.ume-view-switch .active{background:#123c69!important;color:#fff!important;border-color:#123c69!important}.ume-grade-cell{min-width:105px;text-align:center;font-weight:900;color:#123c69}.ume-grade-cell small{display:block;margin-top:3px;font-size:10px;font-weight:700;color:#667085;line-height:1.35}.ume-incomplete{color:#9b6700!important}.ume-grade-ng{color:#b42318!important}.ume-filter-prompt{padding:24px;text-align:center;border:1px dashed #b7c8d9;border-radius:13px;background:#fbfdff;color:#667085;font-weight:750}.ume-project-year-wrap{margin-bottom:12px}.ume-project-year-wrap select{min-width:170px}.ume-hidden-view{display:none!important}
body.dark-mode .ume-filter-bar{background:#1d2935;border-color:#405467}.body.dark-mode .ume-filter-prompt,body.dark-mode .ume-filter-prompt{background:#1d2935;border-color:#405467;color:#c8d3df}
/* Replace the old repeated Portfolio watermark with ONE light watermark only. */
.student-secure-thumb-watermark::before{content:"ST. AUGUSTINE"!important;width:auto!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%) rotate(-18deg)!important;white-space:nowrap!important;line-height:1!important;font-size:11px!important;letter-spacing:1px!important;word-spacing:normal!important;color:rgba(255,255,255,.62)!important;padding:5px 9px!important;border-radius:7px!important;background:rgba(0,0,0,.10)!important}
#studentSecureLightboxWatermark .student-secure-watermark-grid,#studentSecureLightboxWatermark .student-secure-watermark-banner{display:none!important}
#photoLightbox.student-secure-lightbox #studentSecureLightboxWatermark::before{content:"ST. AUGUSTINE";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-18deg);color:rgba(255,255,255,.62);text-shadow:0 2px 5px rgba(0,0,0,.8);font-size:18px;font-weight:900;letter-spacing:1.5px;white-space:nowrap;padding:8px 14px;border-radius:9px;background:rgba(0,0,0,.10)}
@media(max-width:600px){.ume-filter-bar{display:grid;grid-template-columns:1fr}.ume-filter-bar .ume-field{min-width:0}.student-secure-thumb-watermark::before{font-size:9px!important}#photoLightbox.student-secure-lightbox #studentSecureLightboxWatermark::before{font-size:14px}}

/* ===== SOURCE STYLE BLOCK: exam-management-final-styles ===== */
#examManagementPopup{z-index:100000}
.exam-mgmt-box{position:relative;width:min(98%,1600px);max-height:96vh;overflow:auto;margin:2vh auto;padding:24px;border-radius:24px;background:#f8fafc;box-shadow:0 28px 90px rgba(16,24,40,.36)}
.exam-mgmt-title{margin:0 52px 4px 0;color:#123c69;font-size:26px}.exam-mgmt-subtitle{margin:0 52px 18px 0;color:#667085;font-size:13px;line-height:1.55}
.exam-context{display:grid;grid-template-columns:minmax(170px,.7fr) minmax(220px,1fr) minmax(260px,1fr);gap:10px;align-items:end;margin:12px 0;padding:14px;border:1px solid #b2ddff;border-radius:15px;background:#eff8ff}
.exam-field{display:flex;flex-direction:column;gap:6px;color:#123c69;font-size:11px;font-weight:900}.exam-field input,.exam-field select{width:100%;min-height:40px;padding:9px 10px;border:1px solid #ccd8e5;border-radius:9px;background:#fff;color:#101828;font:inherit;outline:none}.exam-field input:focus,.exam-field select:focus{border-color:#175cd3;box-shadow:0 0 0 3px rgba(23,92,211,.1)}
.exam-role-wrap{display:flex;flex-direction:column;gap:7px}.exam-role-badge,.exam-publish-badge{display:inline-flex;align-items:center;gap:6px;width:max-content;max-width:100%;padding:7px 10px;border-radius:999px;font-size:10px;font-weight:950;text-transform:uppercase}.exam-role-badge{background:#123c69;color:#fff}.exam-publish-badge.draft{background:#fff4e5;color:#934b00}.exam-publish-badge.published{background:#ecfdf3;color:#067647}
.exam-manager-bar{display:none;gap:8px;flex-wrap:wrap;margin:10px 0}.exam-manager-bar.show{display:flex}.exam-btn,.exam-tab-btn{border:0;border-radius:10px;padding:10px 13px;font:inherit;font-size:11px;font-weight:950;cursor:pointer}.exam-btn.primary{background:#175cd3;color:#fff}.exam-btn.secondary{background:#eef4ff;color:#175cd3;border:1px solid #b2ccff}.exam-btn.success{background:#067647;color:#fff}.exam-btn.warning{background:#fff4e5;color:#934b00;border:1px solid #fec84b}.exam-btn.danger{background:#fff1f0;color:#b42318;border:1px solid #fda29b}.exam-btn.ghost{background:#fff;color:#475467;border:1px solid #d0d5dd}.exam-btn:disabled{opacity:.48;cursor:not-allowed}
.exam-create-form{display:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:end;margin:10px 0;padding:13px;border:1px solid #d0d5dd;border-radius:12px;background:#f9fafb}.exam-create-form.show{display:grid}.exam-create-actions{display:flex;gap:7px;flex-wrap:wrap}
.exam-coordinator-panel{display:none;margin:10px 0;padding:14px;border:1px solid #d6bbfb;border-radius:14px;background:#f9f5ff}.exam-coordinator-panel.show{display:block}.exam-coordinator-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start}.exam-coordinator-controls{display:grid;grid-template-columns:minmax(240px,1fr) auto;gap:8px;align-items:end;margin-top:10px}.exam-coordinator-list{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.exam-coordinator-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #d6bbfb;border-radius:999px;background:#fff;color:#53389e;font-size:11px;font-weight:900}.exam-coordinator-chip button{border:0;border-radius:999px;padding:4px 7px;background:#fee4e2;color:#b42318;font-size:9px;font-weight:950;cursor:pointer}
.exam-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.exam-tab-btn{background:#eef2f6;color:#344054;border:1px solid #d0d5dd}.exam-tab-btn.active{background:#123c69;color:#fff;border-color:#123c69}.exam-panel{display:none}.exam-panel.active{display:block}
.exam-card{margin-top:12px;padding:15px;border:1px solid #dce6ef;border-radius:15px;background:#fff}.exam-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}.exam-card h3,.exam-card h4{margin:0;color:#123c69}.exam-note{margin-top:4px;color:#667085;font-size:11px;line-height:1.5}.exam-actions{display:flex;gap:7px;flex-wrap:wrap;align-items:center}.exam-empty{padding:30px 16px;text-align:center;border:1px dashed #cbd5e1;border-radius:12px;background:#f8fafc;color:#667085;font-size:12px}.exam-error{padding:12px;border:1px solid #fda29b;border-radius:10px;background:#fff1f0;color:#912018;font-size:12px}.exam-success{padding:12px;border:1px solid #abefc6;border-radius:10px;background:#ecfdf3;color:#067647;font-size:12px}
.exam-table-wrap{overflow:auto;border:1px solid #d0d5dd;border-radius:13px;background:#fff}.exam-table{width:100%;border-collapse:separate;border-spacing:0;min-width:900px}.exam-table th,.exam-table td{border-right:1px solid #e4e7ec;border-bottom:1px solid #e4e7ec;padding:9px;vertical-align:top;text-align:center}.exam-table th:last-child,.exam-table td:last-child{border-right:0}.exam-table tr:last-child td{border-bottom:0}.exam-table thead th{position:sticky;top:0;z-index:3;background:#123c69;color:#fff;font-size:11px}.exam-table .exam-class-col{position:sticky;left:0;z-index:2;min-width:110px;background:#f8fafc;color:#123c69;font-weight:950;vertical-align:middle}.exam-table thead .exam-class-col{z-index:4;background:#0f3358;color:#fff}
.exam-day-head{min-width:185px}.exam-day-head strong{display:block;font-size:12px}.exam-day-head small{display:block;margin-top:4px;color:#d0e8ff;font-size:10px}.exam-day-edit{display:grid;gap:5px}.exam-day-edit input{width:100%;padding:6px 7px;border:1px solid #b2ccff;border-radius:7px;font-size:10px}.exam-day-edit button{border:1px solid rgba(255,255,255,.4);border-radius:7px;padding:5px;background:rgba(255,255,255,.12);color:#fff;font-size:9px;font-weight:900;cursor:pointer}
.exam-view-cell{display:flex;min-height:64px;flex-direction:column;align-items:center;justify-content:center;gap:5px}.exam-view-cell strong,.exam-subject{display:block;color:#101828;font-size:12px;font-weight:950}.exam-view-cell span,.exam-teacher{display:block;color:#667085;font-size:10px;font-weight:800}.exam-special{color:#7f56d9!important;font-weight:950!important}
.exam-cell-editor{display:grid;gap:6px;min-width:160px}.exam-cell-editor input{width:100%;padding:7px 8px;border:1px solid #d0d5dd;border-radius:8px;font-size:10px}.exam-cell-editor input:first-child{font-weight:900}.exam-edit-note{margin:8px 0 12px;padding:9px 11px;border-radius:9px;background:#fffaeb;color:#7a2e0e;font-size:10px;font-weight:800}
.exam-status-stack{display:flex;flex-direction:column;gap:5px;margin-top:8px}.exam-status-line{display:flex;align-items:center;justify-content:center;gap:5px;padding:5px;border-radius:7px;background:#f8fafc;color:#667085;font-size:10px;font-weight:900}.exam-status-line.active{background:#ecfdf3;color:#067647}.exam-status-line.printed{background:#eff8ff;color:#175cd3}.exam-bulb{filter:grayscale(1);opacity:.35}.exam-bulb.on{filter:none;opacity:1}.exam-status-line input{accent-color:#067647}.exam-tracker-cell{min-width:155px}
.exam-filter-row{display:grid;grid-template-columns:minmax(220px,.7fr) 1fr;gap:10px;align-items:end;margin-bottom:10px}.exam-class-routine{width:100%;border-collapse:collapse}.exam-class-routine th,.exam-class-routine td{border:1px solid #e4e7ec;padding:9px;text-align:center;font-size:11px}.exam-class-routine th{background:#123c69;color:#fff}.exam-info-line{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}.exam-info-chip{padding:6px 9px;border-radius:999px;background:#f2f4f7;color:#475467;font-size:10px;font-weight:900}
@media(max-width:850px){.exam-context{grid-template-columns:1fr 1fr}.exam-context .exam-role-wrap{grid-column:1/-1}.exam-create-form{grid-template-columns:1fr 1fr}.exam-coordinator-controls{grid-template-columns:1fr}.exam-filter-row{grid-template-columns:1fr}}
@media(max-width:560px){.exam-mgmt-box{width:100%;max-height:100vh;min-height:100vh;margin:0;padding:16px;border-radius:0}.exam-mgmt-title{font-size:22px}.exam-context,.exam-create-form{grid-template-columns:1fr}.exam-create-form .exam-create-actions{grid-column:auto}.exam-tabs{display:grid;grid-template-columns:1fr}.exam-tab-btn{width:100%}.exam-card{padding:11px}.exam-actions{width:100%}.exam-actions .exam-btn{flex:1}}

/* ===== SOURCE STYLE BLOCK: exam-management-premium-theme ===== */
/* =========================================================
   EXAM MANAGEMENT — PREMIUM VISUAL THEME
   Visual-only overrides. No workflow/data logic changed.
========================================================= */

/* Dashboard buttons — make Exam Management impossible to miss */
.staff-dashboard-action.exam{
    background:linear-gradient(135deg,#7a1734 0%,#b4235a 48%,#f0448d 100%)!important;
    border:1px solid rgba(255,255,255,.28)!important;
    box-shadow:0 10px 24px rgba(122,23,52,.28),inset 0 1px 0 rgba(255,255,255,.2)!important;
}
.staff-dashboard-action.exam .staff-dashboard-action-icon{
    background:linear-gradient(145deg,rgba(255,255,255,.24),rgba(255,255,255,.10));
    box-shadow:0 6px 14px rgba(74,8,32,.18),inset 0 1px 0 rgba(255,255,255,.25);
}
#websiteAdminExamButton{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,#7a1734,#b4235a 55%,#e94683)!important;
    color:#fff!important;
    border:1px solid rgba(255,255,255,.18)!important;
    box-shadow:0 8px 18px rgba(122,23,52,.24)!important;
}
#websiteAdminExamButton:hover{
    transform:translateY(-2px);
    filter:brightness(1.06);
    box-shadow:0 12px 24px rgba(122,23,52,.30)!important;
}

/* Full Exam workspace */
.exam-mgmt-box{
    position:relative;
    isolation:isolate;
    background:
      radial-gradient(circle at 7% 0%,rgba(240,68,141,.14),transparent 25%),
      radial-gradient(circle at 95% 4%,rgba(23,92,211,.13),transparent 27%),
      linear-gradient(180deg,#f7fbff 0%,#fff7fb 48%,#f8fafc 100%)!important;
    border:1px solid rgba(18,60,105,.12);
    box-shadow:0 32px 100px rgba(15,51,88,.38)!important;
}
.exam-mgmt-box::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:0 0 auto 0;
    height:112px;
    border-radius:24px 24px 32px 32px;
    background:linear-gradient(120deg,#0f3358 0%,#175cd3 44%,#7a1734 100%);
    box-shadow:0 10px 28px rgba(15,51,88,.18);
}
.exam-mgmt-box>.close-btn{
    position:sticky;
    top:4px;
    float:right;
    z-index:20;
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.26);
    border-radius:50%;
    background:rgba(255,255,255,.15);
    color:#fff!important;
    backdrop-filter:blur(8px);
    box-shadow:0 6px 18px rgba(0,0,0,.16);
}
.exam-mgmt-title{
    position:relative;
    z-index:1;
    color:#fff!important;
    font-size:29px!important;
    letter-spacing:-.4px;
    text-shadow:0 2px 10px rgba(0,0,0,.16);
}
.exam-mgmt-subtitle{
    position:relative;
    z-index:1;
    min-height:45px;
    margin-bottom:22px!important;
    color:rgba(255,255,255,.86)!important;
    max-width:880px;
}

/* Year / term selector becomes a clear control deck */
.exam-context{
    position:relative;
    z-index:2;
    margin-top:4px!important;
    padding:16px!important;
    border:1px solid rgba(18,60,105,.13)!important;
    background:rgba(255,255,255,.96)!important;
    box-shadow:0 12px 30px rgba(18,60,105,.10)!important;
}
.exam-field{color:#0f3358!important;letter-spacing:.15px}
.exam-field input,.exam-field select{
    min-height:44px!important;
    border:1px solid #c7d8e8!important;
    background:linear-gradient(180deg,#fff,#f8fbff)!important;
    box-shadow:inset 0 1px 2px rgba(16,24,40,.03);
}
.exam-field input:focus,.exam-field select:focus{
    border-color:#175cd3!important;
    box-shadow:0 0 0 4px rgba(23,92,211,.12)!important;
}
.exam-role-badge{
    background:linear-gradient(135deg,#0f3358,#175cd3)!important;
    box-shadow:0 5px 13px rgba(23,92,211,.20);
}
.exam-publish-badge.published{
    background:linear-gradient(135deg,#dcfae6,#ecfdf3)!important;
    border:1px solid #abefc6;
    box-shadow:0 4px 12px rgba(6,118,71,.10);
}
.exam-publish-badge.draft{
    background:linear-gradient(135deg,#fff1d6,#fff8ea)!important;
    border:1px solid #fec84b;
}

/* Manager controls */
.exam-manager-bar.show{
    padding:12px;
    border:1px solid #dde7f0;
    border-radius:15px;
    background:rgba(255,255,255,.88);
    box-shadow:0 8px 22px rgba(18,60,105,.07);
}
.exam-btn,.exam-tab-btn{
    min-height:40px;
    transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.exam-btn:hover:not(:disabled),.exam-tab-btn:hover{transform:translateY(-2px);filter:brightness(1.03)}
.exam-btn.primary{background:linear-gradient(135deg,#175cd3,#0ba5ec)!important;box-shadow:0 6px 15px rgba(23,92,211,.20)}
.exam-btn.success{background:linear-gradient(135deg,#087443,#12a36a)!important;box-shadow:0 6px 15px rgba(8,116,67,.18)}
.exam-btn.secondary{background:linear-gradient(180deg,#f4f7ff,#eaf1ff)!important;border-color:#b2ccff!important}
.exam-btn.warning{background:linear-gradient(180deg,#fff7e8,#fff0cd)!important}
.exam-btn.danger{background:linear-gradient(180deg,#fff3f2,#fee4e2)!important}
.exam-btn.ghost{background:#fff!important;box-shadow:0 3px 10px rgba(16,24,40,.05)}

/* Main navigation tabs */
.exam-tabs{
    padding:7px;
    border:1px solid rgba(18,60,105,.11);
    border-radius:15px;
    background:rgba(255,255,255,.76);
    box-shadow:0 8px 20px rgba(18,60,105,.06);
}
.exam-tab-btn{
    flex:1 1 180px;
    background:#eef3f8!important;
    color:#344054!important;
    border:1px solid #d8e2eb!important;
}
.exam-tab-btn.active{
    background:linear-gradient(135deg,#0f3358,#175cd3)!important;
    color:#fff!important;
    border-color:transparent!important;
    box-shadow:0 8px 18px rgba(23,92,211,.22);
}

/* Content cards */
.exam-card{
    border:1px solid rgba(18,60,105,.11)!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.94)!important;
    box-shadow:0 12px 30px rgba(18,60,105,.08)!important;
}
.exam-card-head{
    margin:-15px -15px 14px!important;
    padding:14px 15px;
    border-bottom:1px solid #e5edf4;
    border-radius:18px 18px 0 0;
    background:linear-gradient(100deg,#f5f9ff,#fff6fa);
}
.exam-card h3,.exam-card h4{color:#0f3358!important}
.exam-empty{
    border:1px dashed #9fb7cc!important;
    background:linear-gradient(145deg,#f8fbff,#fff8fb)!important;
    color:#53677a!important;
}

/* Routine grids */
.exam-table-wrap{
    border:1px solid #cfdce7!important;
    box-shadow:0 7px 20px rgba(18,60,105,.06);
}
.exam-table thead th,.exam-class-routine th{
    background:linear-gradient(135deg,#0f3358,#175cd3)!important;
    color:#fff!important;
}
.exam-table thead .exam-class-col{background:linear-gradient(135deg,#7a1734,#a61b4d)!important}
.exam-table .exam-class-col{
    background:linear-gradient(180deg,#fff7fa,#f9edf2)!important;
    color:#7a1734!important;
}
.exam-table tbody tr:nth-child(even) td:not(.exam-class-col){background:#fbfdff}
.exam-view-cell{border-radius:10px;transition:background .18s ease,transform .18s ease}
.exam-table td:hover .exam-view-cell{background:#f5f9ff;transform:translateY(-1px)}
.exam-view-cell strong,.exam-subject{color:#123c69!important;font-size:12.5px!important}
.exam-view-cell span,.exam-teacher{color:#7a1734!important}
.exam-special{color:#7f56d9!important}
.exam-cell-editor input{
    border-color:#cddbe7!important;
    background:#fff!important;
}
.exam-cell-editor input:focus{outline:none;border-color:#175cd3!important;box-shadow:0 0 0 3px rgba(23,92,211,.10)}
.exam-status-line{border:1px solid #edf1f4;background:#f8fafc!important}
.exam-status-line.active{border-color:#abefc6;background:#ecfdf3!important;box-shadow:0 3px 9px rgba(6,118,71,.08)}
.exam-status-line.printed{border-color:#b2ddff;background:#eff8ff!important;box-shadow:0 3px 9px rgba(23,92,211,.08)}
.exam-info-chip{background:linear-gradient(180deg,#f3f7fb,#eaf0f6)!important;color:#123c69!important;border:1px solid #d8e2eb}

/* Coordinator area */
.exam-coordinator-panel.show{
    border:1px solid #d6bbfb!important;
    background:linear-gradient(145deg,#fbf8ff,#f5efff)!important;
    box-shadow:0 9px 22px rgba(127,86,217,.09);
}
.exam-coordinator-chip{box-shadow:0 4px 10px rgba(83,56,158,.08)}

body.dark-mode .exam-mgmt-box{
    background:linear-gradient(180deg,#162534,#101b25)!important;
    border-color:#344b60;
}
body.dark-mode .exam-context,body.dark-mode .exam-card,body.dark-mode .exam-manager-bar.show,body.dark-mode .exam-tabs{
    background:rgba(27,43,57,.96)!important;
    border-color:#405467!important;
}
body.dark-mode .exam-card-head{background:linear-gradient(100deg,#23394c,#382333);border-color:#405467}
body.dark-mode .exam-card h3,body.dark-mode .exam-card h4,body.dark-mode .exam-field{color:#d8ecff!important}
body.dark-mode .exam-note{color:#aab9c7}
body.dark-mode .exam-table td:not(.exam-class-col){background:#172633!important;color:#dbe8f3}
body.dark-mode .exam-table .exam-class-col{background:#30202a!important;color:#f0b6c9!important}
body.dark-mode .exam-view-cell strong,body.dark-mode .exam-subject{color:#e5f2ff!important}
body.dark-mode .exam-view-cell span,body.dark-mode .exam-teacher{color:#f1a9bf!important}

@media(max-width:560px){
    .exam-mgmt-box::before{height:125px;border-radius:0 0 28px 28px}
    .exam-mgmt-title{font-size:24px!important}
    .exam-mgmt-subtitle{min-height:55px}
    .exam-tabs{padding:6px}
}

/* ===== SOURCE STYLE BLOCK: saaf-final-stability-css ===== */
/* ADMIN MENU ONLY — clean Student-list style cards. Public website is untouched. */
#websiteAdminPanel .website-admin-tabs{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;
  padding:12px!important;margin:0 0 18px!important;background:#f6f9fc!important;border:1px solid #dce6ef!important;
  border-radius:16px!important;max-height:none!important;overflow:visible!important;align-items:stretch!important;
}
#websiteAdminPanel .website-admin-tabs>button{
  width:100%!important;min-height:58px!important;margin:0!important;padding:12px 44px 12px 15px!important;
  display:flex!important;align-items:center!important;justify-content:flex-start!important;text-align:left!important;
  position:relative!important;border:1px solid #d7e3ee!important;border-radius:13px!important;background:#fff!important;
  color:#17324d!important;font-weight:850!important;font-size:13px!important;line-height:1.25!important;
  box-shadow:0 3px 10px rgba(28,55,80,.055)!important;transition:.16s ease!important;
}
#websiteAdminPanel .website-admin-tabs>button::after{content:"›";position:absolute;right:15px;top:50%;transform:translateY(-50%);font-size:24px;color:#8ca0b4;font-weight:500}
#websiteAdminPanel .website-admin-tabs>button:hover{transform:translateY(-1px)!important;border-color:#8fb5d5!important;box-shadow:0 7px 18px rgba(28,55,80,.10)!important}
#websiteAdminPanel .website-admin-tabs>button.saaf-admin-active{background:#123c69!important;color:#fff!important;border-color:#123c69!important;box-shadow:0 7px 18px rgba(18,60,105,.20)!important}
#websiteAdminPanel .website-admin-tabs>button.saaf-admin-active::after{color:#fff}
#websiteAdminPanel .website-admin-tabs>button.saaf-system-menu{background:#eef7ff!important;border-color:#9ec7e8!important;color:#0f4a7b!important}
#websiteAdminPanel .website-admin-tabs>button.saaf-system-menu.saaf-admin-active{background:#0f4a7b!important;color:#fff!important}

#saafSystemControlTab{display:none}
.saaf-system-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.saaf-system-card{background:#fff;border:1px solid #d9e4ee;border-radius:15px;padding:16px;box-shadow:0 4px 14px rgba(28,55,80,.055)}
.saaf-system-card.saaf-wide{grid-column:1/-1}.saaf-system-card h4{margin:0 0 6px;color:#17324d;font-size:16px}.saaf-system-card p{margin:0 0 12px;color:#66798b;font-size:12px;line-height:1.55}
.saaf-year-hero{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.saaf-year-badge{min-width:108px;padding:14px 18px;border-radius:14px;background:#123c69;color:#fff;text-align:center}.saaf-year-badge small{display:block;font-size:10px;opacity:.8}.saaf-year-badge strong{font-size:27px;line-height:1.1}
.saaf-inline{display:flex;gap:9px;align-items:end;flex-wrap:wrap}.saaf-field{display:grid;gap:5px;min-width:150px;flex:1;color:#34495e;font-size:11px;font-weight:850}.saaf-field input,.saaf-field select{width:100%;min-height:42px;padding:9px 11px;border:1px solid #cbd9e6;border-radius:10px;background:#fff;color:#17324d;font-size:13px}
.saaf-btn{min-height:41px;padding:9px 14px;border:0;border-radius:10px;font-weight:850;cursor:pointer;background:#123c69;color:#fff}.saaf-btn.secondary{background:#edf3f8;color:#24445e;border:1px solid #cbd9e6}.saaf-btn.danger{background:#b42318}.saaf-btn.success{background:#177245}.saaf-btn:disabled{opacity:.55;cursor:not-allowed}
.saaf-note{padding:10px 12px;border-radius:10px;background:#f7fafc;border:1px solid #e0e8ef;color:#5b6e7f;font-size:11px;line-height:1.55}.saaf-note.warn{background:#fff8e8;border-color:#f2d69b;color:#795515}.saaf-note.good{background:#eefaf3;border-color:#b8dec8;color:#23623e}.saaf-note.bad{background:#fff0ef;border-color:#efc0bc;color:#8b261e}
.saaf-toolbar{display:grid;grid-template-columns:180px minmax(180px,1fr) auto;gap:9px;margin:12px 0}.saaf-roster{display:grid;gap:8px;max-height:520px;overflow:auto;padding-right:2px}.saaf-roster-row{display:grid;grid-template-columns:minmax(180px,1fr) 120px 175px;gap:10px;align-items:center;padding:11px 12px;border:1px solid #e0e8ef;border-radius:11px;background:#fbfdff}.saaf-roster-row strong{display:block;color:#183750;font-size:13px}.saaf-roster-row small{display:block;color:#748698;margin-top:3px}.saaf-roster-row select{min-height:38px;border:1px solid #cbd9e6;border-radius:9px;padding:7px;background:#fff}
.saaf-summary{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.saaf-chip{padding:7px 10px;border:1px solid #d6e2ec;border-radius:999px;background:#f7fafc;font-size:11px;font-weight:850;color:#38556f}
.saaf-archive-list,.saaf-history-list{display:grid;gap:8px;max-height:390px;overflow:auto}.saaf-archive-row,.saaf-history-row{display:grid;gap:8px;padding:11px 12px;border:1px solid #e0e8ef;border-radius:11px;background:#fbfdff}.saaf-archive-row{grid-template-columns:minmax(180px,1fr) 145px auto;align-items:center}.saaf-history-row{grid-template-columns:minmax(180px,1fr) 110px 130px;align-items:center}.saaf-meta{font-size:11px;color:#6f8192;line-height:1.5}.saaf-status{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.3px}.saaf-status.archived{color:#9a6700}.saaf-status.restored{color:#177245}.saaf-month-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.saaf-month-photo{border:1px solid #dce6ef;border-radius:11px;overflow:hidden;background:#f6f9fc}.saaf-month-photo img{width:100%;height:120px;object-fit:cover;display:block}.saaf-month-photo div{padding:8px;font-size:10px;color:#53697c}.saaf-empty{padding:18px;text-align:center;border:1px dashed #cbd9e6;border-radius:11px;color:#748698;background:#fafcfe;font-size:12px}
body.dark-mode #websiteAdminPanel .website-admin-tabs,body.dark-mode .saaf-system-card,body.dark-mode .saaf-roster-row,body.dark-mode .saaf-archive-row,body.dark-mode .saaf-history-row{background:#1d2935!important;border-color:#405467!important;color:#e5edf4!important}body.dark-mode #websiteAdminPanel .website-admin-tabs>button{background:#243342!important;color:#eaf2f8!important;border-color:#405467!important}body.dark-mode .saaf-system-card h4,body.dark-mode .saaf-roster-row strong{color:#eef5fa}
@media(max-width:760px){#websiteAdminPanel .website-admin-tabs{grid-template-columns:1fr!important}.saaf-system-grid{grid-template-columns:1fr}.saaf-system-card.saaf-wide{grid-column:auto}.saaf-toolbar{grid-template-columns:1fr}.saaf-roster-row,.saaf-archive-row,.saaf-history-row{grid-template-columns:1fr}.saaf-month-grid{grid-template-columns:1fr 1fr}}

/* ===== SOURCE STYLE BLOCK: staff-pwa-install-css ===== */
.staff-dashboard-action.install-app{
    background:linear-gradient(135deg,#123c69,#1f7bb5)!important;
    color:#fff!important;
    border-color:rgba(255,255,255,.12)!important;
}
.staff-dashboard-action.install-app .staff-dashboard-action-icon{
    background:rgba(255,255,255,.17)!important;
    color:#fff!important;
}
.staff-dashboard-action.install-app .staff-dashboard-action-copy strong,
.staff-dashboard-action.install-app .staff-dashboard-action-copy small,
.staff-dashboard-action.install-app .staff-dashboard-action-arrow{
    color:#fff!important;
}
.staff-pwa-guide{
    position:fixed;inset:0;z-index:30050;display:none;align-items:center;justify-content:center;
    padding:18px;background:rgba(4,18,35,.82);backdrop-filter:blur(7px);
}
.staff-pwa-guide.show{display:flex}
.staff-pwa-guide-card{
    width:min(440px,100%);background:#fff;border-radius:22px;overflow:hidden;
    box-shadow:0 28px 80px rgba(0,0,0,.34);color:#172b4d;
}
.staff-pwa-guide-head{
    padding:20px 20px 17px;background:linear-gradient(135deg,#123c69,#1d6fa5);color:#fff;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.staff-pwa-guide-head h3{margin:0;font-size:18px}
.staff-pwa-guide-close{border:0;background:rgba(255,255,255,.16);color:#fff;width:36px;height:36px;border-radius:50%;font-size:22px;cursor:pointer}
.staff-pwa-guide-body{padding:20px}
.staff-pwa-guide-body p{margin:0 0 14px;line-height:1.55;color:#475467;font-size:13px}
.staff-pwa-guide-steps{display:grid;gap:10px;margin:12px 0 18px;counter-reset:pwaStep}
.staff-pwa-guide-step{display:flex;gap:11px;align-items:flex-start;padding:11px 12px;border:1px solid #dce6ef;border-radius:13px;background:#f8fbfd;font-size:13px;line-height:1.45}
.staff-pwa-guide-step::before{counter-increment:pwaStep;content:counter(pwaStep);flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#123c69;color:#fff;font-weight:900}
.staff-pwa-guide-ok{width:100%;border:0;border-radius:12px;padding:12px 15px;background:#123c69;color:#fff;font-weight:900;cursor:pointer}
@media(min-width:901px){#staffDashboardInstallAction{display:none!important}}

/* ===== SOURCE STYLE BLOCK: staff-app-mode-v2-css ===== */
#staffAppShell{display:none}
body.staff-app-mode{
    min-height:100vh!important;
    background:#071b31!important;
    overflow:hidden;
}
body.staff-app-mode #staffAppShell{
    position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;
    padding:22px;background:
      radial-gradient(circle at 15% 12%,rgba(38,139,210,.22),transparent 34%),
      radial-gradient(circle at 88% 86%,rgba(8,122,85,.18),transparent 34%),
      linear-gradient(145deg,#06182c,#0c3154 58%,#102d46);
    color:#fff;text-align:center;
}
.staff-app-shell-card{
    width:min(430px,100%);padding:30px 24px 24px;border-radius:28px;
    background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
    box-shadow:0 30px 90px rgba(0,0,0,.34);backdrop-filter:blur(16px);
}
.staff-app-shell-logo{
    width:88px;height:88px;border-radius:24px;object-fit:cover;background:#fff;padding:5px;
    box-shadow:0 12px 35px rgba(0,0,0,.28);margin-bottom:16px;
}
.staff-app-shell-badge{
    display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;
    background:rgba(255,255,255,.13);font-size:11px;font-weight:900;letter-spacing:.08em;
}
.staff-app-shell-card h1{margin:14px 0 5px;font-size:25px;line-height:1.2;color:#fff}
.staff-app-shell-card h1 span{display:block;color:#9ed8ff;font-size:16px;margin-top:5px}
.staff-app-shell-card p{margin:10px auto;color:#d6e7f5;font-size:13px;line-height:1.6;max-width:330px}
.staff-app-shell-status{
    margin:18px 0 12px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.1);
    font-size:12px;font-weight:800;color:#e8f4ff;
}
.staff-app-shell-open{
    width:100%;border:0;border-radius:14px;padding:14px 16px;cursor:pointer;
    background:#fff;color:#123c69;font-size:14px;font-weight:950;box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.staff-app-shell-note{margin-top:13px!important;font-size:11px!important;color:#aec7da!important}
body.staff-app-mode #staffDashboardPopup .staff-dashboard-close{display:none!important}
body.staff-app-mode #staffLoginPopup .close-btn{display:none!important}
body.staff-app-mode #staffDashboardWelcomePopup{display:none!important}
@media(max-width:520px){
  .staff-app-shell-card{padding:26px 18px 20px;border-radius:22px}
  .staff-app-shell-logo{width:78px;height:78px;border-radius:21px}
  .staff-app-shell-card h1{font-size:22px}
}

/* ===== SOURCE STYLE BLOCK: staff-pwa-mobile-v3-css ===== */
body.staff-app-mode{
  --sa3-navy:#04101f;
  --sa3-blue:#07385f;
  --sa3-cyan:#65dcff;
  --sa3-gold:#f4c75d;
  --sa3-ink:#102a43;
  --sa3-line:#dbe7ef;
  width:100%!important;
  max-width:100vw!important;
  min-height:100dvh!important;
  margin:0!important;
  overflow-x:hidden!important;
  background:#eef4f8!important;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif!important;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body.staff-app-mode *{box-sizing:border-box}

/* Visible launch screen — stays above the older auto-open hooks until V3 unlocks it. */
body.staff-app-mode #staffAppShell{
  z-index:2147482000!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:100dvh!important;
  overflow:auto!important;
  padding:max(22px,env(safe-area-inset-top)) 16px max(22px,env(safe-area-inset-bottom))!important;
  background:
    radial-gradient(circle at 8% 8%,rgba(101,220,255,.20),transparent 31%),
    radial-gradient(circle at 92% 84%,rgba(244,199,93,.16),transparent 30%),
    linear-gradient(145deg,#020b15 0%,#05223c 50%,#0a4e79 100%)!important;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .28s ease,visibility .28s ease,transform .28s ease;
}
body.staff-app-mode #staffAppShell::before{
  content:"";
  position:fixed;inset:0;pointer-events:none;opacity:.22;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:28px 28px;
}
body.staff-app-mode.staff-app-workspace-open #staffAppShell{
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:scale(1.015);
}
body.staff-app-mode .staff-app-shell-card{
  position:relative!important;
  width:min(100%,420px)!important;
  margin:auto!important;
  padding:30px 22px 22px!important;
  border-radius:30px!important;
  color:#fff!important;
  background:linear-gradient(155deg,rgba(255,255,255,.15),rgba(255,255,255,.055))!important;
  border:1px solid rgba(255,255,255,.22)!important;
  box-shadow:0 32px 90px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.18)!important;
  backdrop-filter:blur(22px)!important;
  -webkit-backdrop-filter:blur(22px)!important;
  overflow:hidden!important;
}
body.staff-app-mode .staff-app-shell-card::before{
  content:"";position:absolute;width:220px;height:220px;right:-120px;top:-130px;border-radius:50%;
  background:radial-gradient(circle,rgba(101,220,255,.27),transparent 68%);pointer-events:none;
}
body.staff-app-mode .staff-app-shell-logo{
  width:112px!important;height:112px!important;margin:0 auto 17px!important;padding:7px!important;
  display:block!important;object-fit:contain!important;border-radius:29px!important;background:#fff!important;
  border:2px solid rgba(244,199,93,.92)!important;
  box-shadow:0 17px 40px rgba(0,0,0,.34),0 0 0 7px rgba(255,255,255,.055)!important;
}
body.staff-app-mode .staff-app-shell-badge{
  padding:7px 11px!important;border-radius:999px!important;color:#dff8ff!important;
  background:rgba(2,14,28,.34)!important;border:1px solid rgba(101,220,255,.24)!important;
  font-size:9px!important;font-weight:950!important;letter-spacing:1.2px!important;
}
body.staff-app-mode .staff-app-shell-card h1{
  margin:15px 0 7px!important;color:#fff!important;font-size:27px!important;font-weight:950!important;line-height:1.08!important;
  letter-spacing:-.45px!important;text-shadow:0 3px 15px rgba(0,0,0,.22)!important;
}
body.staff-app-mode .staff-app-shell-card h1 span{
  display:block!important;margin-top:7px!important;color:#96e8ff!important;font-size:15px!important;font-weight:800!important;
}
body.staff-app-mode .staff-app-shell-card>p:not(.staff-app-shell-note){
  max-width:340px!important;margin:11px auto!important;color:#d5e7f5!important;font-size:12px!important;line-height:1.6!important;
}
body.staff-app-mode .staff-app-shell-status{
  position:relative!important;margin:19px 0 11px!important;padding:13px 13px 13px 39px!important;border-radius:15px!important;
  background:rgba(2,14,28,.34)!important;border:1px solid rgba(255,255,255,.11)!important;color:#e8f7ff!important;
  text-align:left!important;font-size:11px!important;font-weight:850!important;
}
body.staff-app-mode .staff-app-shell-status::before{
  content:"";position:absolute;left:15px;top:50%;width:9px;height:9px;transform:translateY(-50%);border-radius:50%;
  background:#54e39b;box-shadow:0 0 0 5px rgba(84,227,155,.10),0 0 13px rgba(84,227,155,.7);
}
body.staff-app-mode .staff-app-shell-open{
  min-height:54px!important;width:100%!important;padding:14px 16px!important;border:0!important;border-radius:15px!important;
  color:#05223c!important;background:linear-gradient(135deg,#fff,#dff7ff 56%,#f8e6af)!important;
  font-size:13px!important;font-weight:950!important;letter-spacing:.45px!important;box-shadow:0 14px 32px rgba(0,0,0,.24)!important;
}
body.staff-app-mode .staff-app-shell-note{margin:12px 0 0!important;color:#9fb9cb!important;font-size:10px!important;line-height:1.45!important}

/* Installed-app login only. Browser login is untouched because every selector is staff-app-mode scoped. */
body.staff-app-mode #staffLoginPopup{
  z-index:2147481000!important;
  width:100vw!important;max-width:100vw!important;min-height:100dvh!important;
  padding:max(20px,env(safe-area-inset-top)) 15px max(20px,env(safe-area-inset-bottom))!important;
  overflow:auto!important;
  background:radial-gradient(circle at 10% 8%,rgba(101,220,255,.18),transparent 30%),radial-gradient(circle at 92% 86%,rgba(244,199,93,.12),transparent 30%),linear-gradient(145deg,#020b15,#05223c 56%,#0a4b75)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
body.staff-app-mode #staffLoginPopup::after{display:none!important}
body.staff-app-mode #staffLoginPopup .staff-login-box{
  width:min(100%,420px)!important;max-width:420px!important;margin:4vh auto!important;padding:116px 20px 24px!important;
  border-radius:28px!important;background:linear-gradient(155deg,rgba(255,255,255,.14),rgba(255,255,255,.055))!important;
  border:1px solid rgba(255,255,255,.20)!important;box-shadow:0 30px 80px rgba(0,0,0,.38)!important;
  backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;color:#fff!important;overflow:visible!important;
}
body.staff-app-mode #staffLoginPopup .staff-login-box::before{
  content:""!important;position:absolute!important;left:50%!important;top:22px!important;width:78px!important;height:78px!important;
  transform:translateX(-50%)!important;border-radius:21px!important;background:#fff url("staff-app-logo.png") center/contain no-repeat!important;
  border:2px solid rgba(244,199,93,.9)!important;box-shadow:0 12px 30px rgba(0,0,0,.28),0 0 0 7px rgba(255,255,255,.05)!important;
}
body.staff-app-mode #staffLoginPopup .staff-login-box::after{
  content:"SECURE STAFF ACCESS"!important;position:absolute!important;left:50%!important;top:108px!important;transform:translateX(-50%)!important;
  width:max-content!important;color:#96e8ff!important;font-size:9px!important;font-weight:950!important;letter-spacing:1.35px!important;
}
body.staff-app-mode #staffLoginPopup h2{margin:6px 0 7px!important;color:#fff!important;background:none!important;-webkit-text-fill-color:initial!important;font-size:25px!important;font-weight:950!important;animation:none!important}
body.staff-app-mode #staffLoginPopup .staff-login-subtitle{max-width:310px;margin:0 auto 20px!important;color:#c6d9e8!important;font-size:12px!important;line-height:1.55!important}
body.staff-app-mode #staffLoginPopup .staff-login-field label{color:#dff2ff!important;font-size:11px!important;font-weight:850!important}
body.staff-app-mode #staffLoginPopup input{min-height:52px!important;padding:13px 14px!important;border-radius:14px!important;background:rgba(2,16,31,.38)!important;border:1px solid rgba(154,207,239,.25)!important;color:#fff!important;font-size:16px!important}
body.staff-app-mode #staffLoginPopup .staff-login-submit{min-height:53px!important;margin-top:8px!important;border-radius:15px!important;color:#05223c!important;background:linear-gradient(135deg,#fff,#dff7ff 55%,#f7e4aa)!important;font-size:13px!important;font-weight:950!important;letter-spacing:.55px!important;box-shadow:0 13px 30px rgba(0,0,0,.22)!important}
body.staff-app-mode #staffLoginPopup .staff-login-submit::after{display:none!important}
body.staff-app-mode #staffLoginPopup .close-btn{display:none!important}

/* TRUE PHONE DASHBOARD */
body.staff-app-mode #staffDashboardPopup{
  width:100vw!important;max-width:100vw!important;min-height:100dvh!important;padding:0!important;overflow:auto!important;background:#eef4f8!important;
}
body.staff-app-mode #staffDashboardPopup .staff-dashboard-box{
  width:100%!important;max-width:none!important;min-width:0!important;min-height:100dvh!important;max-height:none!important;
  margin:0!important;border-radius:0!important;overflow:visible!important;background:linear-gradient(180deg,#f3f7fa,#eef4f8)!important;box-shadow:none!important;
}
body.staff-app-mode #staffDashboardPopup .staff-dashboard-close{display:none!important}
body.staff-app-mode #staffDashboardPopup .staff-dashboard-hero{
  position:sticky!important;top:0!important;z-index:40!important;grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important;
  padding:max(17px,env(safe-area-inset-top)) 14px 15px!important;min-height:118px!important;
  background:radial-gradient(circle at 90% 7%,rgba(244,199,93,.24),transparent 30%),linear-gradient(135deg,#04101f 0%,#07385f 64%,#0b5e8b 100%)!important;
  box-shadow:0 8px 26px rgba(4,28,52,.18)!important;
}
body.staff-app-mode #staffDashboardPopup .staff-dashboard-brand{gap:10px!important;min-width:0!important;align-items:center!important}
body.staff-app-mode #staffDashboardPopup .staff-dashboard-logo{width:54px!important;height:54px!important;flex:0 0 54px!important;border-radius:16px!important;padding:3px!important;object-fit:contain!important;background:#fff!important;border:2px solid rgba(244,199,93,.88)!important}
body.staff-app-mode #staffDashboardPopup .staff-dashboard-kicker{font-size:8px!important;color:#9de9ff!important;letter-spacing:1.15px!important}
body.staff-app-mode #staffDashboardPopup .staff-dashboard-hero h2{font-size:18px!important;line-height:1.12!important;font-weight:950!important;overflow-wrap:anywhere!important}
body.staff-app-mode #staffDashboardPopup .staff-dashboard-role{font-size:9.5px!important;line-height:1.35!important;color:#d5e6f2!important}
body.staff-app-mode #staffDashboardPopup .staff-dashboard-clock{min-width:76px!important;padding:8px!important;border-radius:12px!important;text-align:center!important}
body.staff-app-mode #staffDashboardPopup .staff-dashboard-time{font-size:15px!important}
body.staff-app-mode #staffDashboardPopup .staff-dashboard-date{font-size:7px!important;line-height:1.25!important}
body.staff-app-mode #staffDashboardPopup .staff-dashboard-content{width:100%!important;max-width:100%!important;min-width:0!important;padding:13px 11px calc(24px + env(safe-area-inset-bottom))!important}
body.staff-app-mode #staffDashboardPopup .staff-dashboard-quick-shell{margin:0 0 12px!important;padding:12px!important;border-radius:18px!important;background:#fff!important;border:1px solid #dce7ee!important;box-shadow:0 10px 25px rgba(18,60,105,.07)!important}
body.staff-app-mode #staffDashboardPopup .staff-dashboard-quick-heading h3{font-size:14px!important}
body.staff-app-mode #staffDashboardPopup .staff-dashboard-quick-heading p{font-size:8px!important}
body.staff-app-mode #staffDashboardPopup .staff-dashboard-quick-heading>span{display:none!important}
body.staff-app-mode #staffDashboardPopup .staff-dashboard-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
body.staff-app-mode #staffDashboardPopup .staff-dashboard-action,
body.staff-app-mode #staffDashboardPopup .staff-dashboard-action.marks{
  min-width:0!important;min-height:86px!important;padding:10px!important;border-radius:15px!important;gap:8px!important;align-items:flex-start!important;text-align:left!important;
}
body.staff-app-mode #staffDashboardPopup .staff-dashboard-action-icon{width:34px!important;height:34px!important;flex:0 0 34px!important;border-radius:10px!important;font-size:16px!important}
body.staff-app-mode #staffDashboardPopup .staff-dashboard-action-copy{min-width:0!important}
body.staff-app-mode #staffDashboardPopup .staff-dashboard-action-copy strong{font-size:10.5px!important;line-height:1.18!important;overflow-wrap:anywhere!important}
body.staff-app-mode #staffDashboardPopup .staff-dashboard-action-copy small{display:block!important;margin-top:3px!important;font-size:7.5px!important;line-height:1.3!important}
body.staff-app-mode #staffDashboardPopup .staff-dashboard-action-arrow{position:absolute!important;right:9px!important;bottom:7px!important;font-size:12px!important}
body.staff-app-mode #staffDashboardPopup .staff-dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin-bottom:12px!important}
body.staff-app-mode #staffDashboardPopup .staff-dashboard-stat{min-width:0!important;min-height:68px!important;padding:10px!important;border-radius:15px!important;gap:8px!important}
body.staff-app-mode #staffDashboardPopup .staff-dashboard-stat-icon{width:33px!important;height:33px!important;flex:0 0 33px!important;border-radius:10px!important;font-size:15px!important}
body.staff-app-mode #staffDashboardPopup .staff-dashboard-stat strong{font-size:17px!important}
body.staff-app-mode #staffDashboardPopup .staff-dashboard-stat span:last-child{font-size:8px!important;line-height:1.25!important;overflow-wrap:anywhere!important}
body.staff-app-mode #staffDashboardPopup .staff-dashboard-grid{grid-template-columns:1fr!important;gap:11px!important;min-width:0!important}
body.staff-app-mode #staffDashboardPopup .staff-dashboard-card{min-width:0!important;border-radius:17px!important}
body.staff-app-mode #staffDashboardPopup .staff-dashboard-card-head{padding:12px 13px!important}
body.staff-app-mode #staffDashboardPopup .staff-dashboard-card-head h3{font-size:12px!important}
body.staff-app-mode #staffDashboardPopup .staff-dashboard-card-body{padding:11px!important}

/* Every work screen fits the phone viewport. Wide data tables scroll INSIDE their own card instead of widening the whole app. */
@media(max-width:900px){
  body.staff-app-mode .popup,
  body.staff-app-mode .ctp-popup{
    width:100vw!important;max-width:100vw!important;min-width:0!important;min-height:100dvh!important;
    padding:0!important;overflow-x:hidden!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;
  }
  body.staff-app-mode .staff-leave-box,
  body.staff-app-mode .approved-leave-box,
  body.staff-app-mode .upcoming-plan-box,
  body.staff-app-mode .staff-idea-box,
  body.staff-app-mode .video-tutorial-popup-box,
  body.staff-app-mode .ume-box,
  body.staff-app-mode .marks-entry-box,
  body.staff-app-mode .marks-principal-box,
  body.staff-app-mode .internal-box,
  body.staff-app-mode .exam-mgmt-box,
  body.staff-app-mode .announcement-read-status-box,
  body.staff-app-mode .ctp-shell{
    width:100%!important;max-width:100%!important;min-width:0!important;min-height:100dvh!important;max-height:none!important;
    margin:0!important;border-radius:0!important;overflow-x:hidden!important;overflow-y:auto!important;box-shadow:none!important;
  }
  body.staff-app-mode .staff-leave-box,
  body.staff-app-mode .approved-leave-box,
  body.staff-app-mode .upcoming-plan-box,
  body.staff-app-mode .staff-idea-box,
  body.staff-app-mode .ume-box,
  body.staff-app-mode .marks-entry-box,
  body.staff-app-mode .marks-principal-box,
  body.staff-app-mode .internal-box,
  body.staff-app-mode .exam-mgmt-box,
  body.staff-app-mode .announcement-read-status-box{padding:18px 12px calc(20px + env(safe-area-inset-bottom))!important}
  body.staff-app-mode .video-tutorial-viewer-body{padding:14px 11px!important}
  body.staff-app-mode .ctp-head{padding:max(16px,env(safe-area-inset-top)) 13px 14px!important}
  body.staff-app-mode .ctp-body{padding:12px!important}

  body.staff-app-mode .staff-leave-grid,
  body.staff-app-mode .upcoming-plan-form-grid,
  body.staff-app-mode .staff-idea-form-grid,
  body.staff-app-mode .ume-grid,
  body.staff-app-mode .ume-component-form,
  body.staff-app-mode .ume-picker,
  body.staff-app-mode .marks-form-grid,
  body.staff-app-mode .marks-component-form,
  body.staff-app-mode .marks-project-picker,
  body.staff-app-mode .internal-form-grid,
  body.staff-app-mode .internal-unit-form,
  body.staff-app-mode .exam-context,
  body.staff-app-mode .exam-create-form,
  body.staff-app-mode .exam-coordinator-controls,
  body.staff-app-mode .exam-filter-row,
  body.staff-app-mode .ctp-toolbar,
  body.staff-app-mode .ctp-form{grid-template-columns:1fr!important}

  body.staff-app-mode input,
  body.staff-app-mode select,
  body.staff-app-mode textarea{max-width:100%!important;min-width:0!important;font-size:16px!important}

  body.staff-app-mode .marks-table-wrap,
  body.staff-app-mode .ume-table-wrap,
  body.staff-app-mode .internal-table-wrap,
  body.staff-app-mode .internal-summary-wrap,
  body.staff-app-mode .exam-table-wrap{
    display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;
    overflow-x:auto!important;overflow-y:visible!important;-webkit-overflow-scrolling:touch!important;
    overscroll-behavior-inline:contain!important;touch-action:pan-x pan-y!important;
  }
  body.staff-app-mode .marks-table,
  body.staff-app-mode .ume-table,
  body.staff-app-mode .internal-table,
  body.staff-app-mode .internal-summary-table,
  body.staff-app-mode .exam-table{max-width:none!important;margin:0!important}

  body.staff-app-mode .ume-card,
  body.staff-app-mode .marks-create-project,
  body.staff-app-mode .marks-component-manager,
  body.staff-app-mode .marks-project-panel,
  body.staff-app-mode .internal-card,
  body.staff-app-mode .exam-card,
  body.staff-app-mode .ctp-edit,
  body.staff-app-mode .ctp-student{min-width:0!important;max-width:100%!important}

  body.staff-app-mode .ume-summary,
  body.staff-app-mode .marks-project-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.staff-app-mode .ume-tabs,
  body.staff-app-mode .internal-tabs,
  body.staff-app-mode .exam-tabs{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}
  body.staff-app-mode .ume-tabs button,
  body.staff-app-mode .internal-tab,
  body.staff-app-mode .exam-tab-btn{width:100%!important;min-width:0!important}
  body.staff-app-mode .exam-manager-bar.show,
  body.staff-app-mode .exam-actions,
  body.staff-app-mode .ume-actions,
  body.staff-app-mode .marks-actions,
  body.staff-app-mode .internal-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;width:100%!important}
  body.staff-app-mode .exam-manager-bar.show .exam-btn,
  body.staff-app-mode .exam-actions .exam-btn,
  body.staff-app-mode .ume-actions .ume-btn,
  body.staff-app-mode .marks-actions button,
  body.staff-app-mode .internal-actions button{width:100%!important;min-width:0!important}
}

@media(max-width:380px){
  body.staff-app-mode #staffDashboardPopup .staff-dashboard-quick-actions{grid-template-columns:1fr!important}
  body.staff-app-mode #staffDashboardPopup .staff-dashboard-action,
  body.staff-app-mode #staffDashboardPopup .staff-dashboard-action.marks{min-height:66px!important}
  body.staff-app-mode .ume-tabs,
  body.staff-app-mode .internal-tabs,
  body.staff-app-mode .exam-tabs,
  body.staff-app-mode .exam-manager-bar.show,
  body.staff-app-mode .exam-actions,
  body.staff-app-mode .ume-actions,
  body.staff-app-mode .marks-actions,
  body.staff-app-mode .internal-actions{grid-template-columns:1fr!important}
}

/* ===== SOURCE STYLE BLOCK: ume-attendance-package-final-style ===== */
.ume-attendance-card{border:1px solid #b2ccff!important;background:linear-gradient(145deg,#f8fbff,#eef6ff)!important}
.ume-attendance-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.ume-attendance-head h3{margin:0;color:#123c69}.ume-attendance-badge{display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;background:#eef4ff;color:#175cd3;font-size:10px;font-weight:950;letter-spacing:.3px}
.ume-attendance-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:end;margin-top:12px}
.ume-attendance-editor{margin-top:14px}.ume-attendance-summary{display:grid;grid-template-columns:minmax(180px,260px) 1fr;gap:10px;align-items:end;margin-bottom:12px}
.ume-attendance-state{padding:10px 12px;border-radius:10px;background:#f2f4f7;color:#475467;font-size:11px;font-weight:850}
.ume-attendance-state.ready{background:#ecfdf3;color:#067647}.ume-attendance-state.locked{background:#eef4ff;color:#175cd3}.ume-attendance-state.warn{background:#fff4e5;color:#934b00}
.ume-attendance-table-wrap{overflow:auto;border:1px solid #d0d5dd;border-radius:12px;background:#fff}.ume-attendance-table{width:100%;min-width:620px;border-collapse:collapse}.ume-attendance-table th,.ume-attendance-table td{padding:9px 10px;border-bottom:1px solid #e4e7ec;text-align:left;font-size:11px}.ume-attendance-table th{background:#123c69;color:#fff;font-weight:950}.ume-attendance-table tr:last-child td{border-bottom:0}.ume-attendance-table input{width:110px;min-height:36px;padding:7px 9px;border:1px solid #cbd5e1;border-radius:8px;font:inherit}.ume-attendance-table input:focus{outline:none;border-color:#175cd3;box-shadow:0 0 0 3px rgba(23,92,211,.10)}
.ume-attendance-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.ume-attendance-message{display:none;margin-top:10px;padding:10px 12px;border-radius:9px;font-size:11px;font-weight:850}.ume-attendance-message.show{display:block}.ume-attendance-message.success{background:#ecfdf3;color:#067647}.ume-attendance-message.error{background:#fff1f0;color:#b42318}
.ume-attendance-readonly{margin-top:14px}.ume-attendance-readonly h4{margin:0 0 10px;color:#123c69}.ume-attendance-package-status{margin-top:5px!important;font-weight:900!important}.ume-attendance-package-status.ready{color:#067647!important}.ume-attendance-package-status.missing{color:#b42318!important}.ume-attendance-package-status.draft{color:#934b00!important}
body.dark-mode .ume-attendance-card{background:#1d2935!important;border-color:#405467!important}body.dark-mode .ume-attendance-head h3,body.dark-mode .ume-attendance-readonly h4{color:#8ecbff}body.dark-mode .ume-attendance-table-wrap{background:#1d2935;border-color:#405467}body.dark-mode .ume-attendance-table td{border-color:#405467;color:#eef2f6}body.dark-mode .ume-attendance-table input{background:#15212c;color:#fff;border-color:#526579}
@media(max-width:900px){.ume-attendance-controls{grid-template-columns:1fr 1fr}.ume-attendance-summary{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.ume-attendance-controls,.ume-attendance-summary{grid-template-columns:1fr}.ume-attendance-actions .ume-btn{flex:1}.ume-attendance-table input{width:92px}}

/* =========================================================
   FOUNDER + PARENT PORTAL — FINAL ISOLATED ADD-ON
   Existing public/staff/admin styles are intentionally untouched.
========================================================= */
.portal-access-entry{display:flex;flex-direction:column;gap:7px;align-items:center;justify-content:center;min-width:210px;padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);box-shadow:0 10px 28px rgba(1,22,44,.16);backdrop-filter:blur(9px)}
.portal-access-entry button{border:0;border-radius:12px;padding:12px 18px;font-weight:800;letter-spacing:.3px;color:#fff;cursor:pointer;box-shadow:0 8px 18px rgba(0,0,0,.18);transition:.2s ease}
.portal-access-entry button:hover{transform:translateY(-2px)}
.founder-access-entry button{background:linear-gradient(135deg,#7a4b12,#c88a2b)}
.parent-access-entry button{background:linear-gradient(135deg,#0e5f65,#1597a1)}
.portal-access-entry span{font-size:12px;font-weight:700;color:#dbeafe;letter-spacing:.3px}
.login-access-row{align-items:stretch;gap:16px;flex-wrap:wrap}

.portal-login-popup,.portal-dashboard-popup{z-index:120000;background:rgba(3,12,24,.86);backdrop-filter:blur(12px)}
.portal-login-popup{display:none;align-items:center;justify-content:center;padding:22px}
.portal-login-box{max-width:460px!important;width:min(94vw,460px)!important;margin:5vh auto!important;padding:34px 32px 30px!important;border-radius:28px!important;background:linear-gradient(160deg,#f8fbff,#ffffff)!important;border:1px solid #dbe7f2!important;box-shadow:0 28px 80px rgba(0,16,35,.40)!important;text-align:center}
.portal-login-box.parent-theme{background:linear-gradient(160deg,#f2fffe,#ffffff)!important}
.portal-x{position:absolute;right:18px;top:14px;width:40px;height:40px;border:0;border-radius:50%;background:#eef3f8;color:#1d2a38;font-size:28px;line-height:40px;cursor:pointer;font-weight:500}
.portal-login-emblem{width:82px;height:82px;margin:0 auto 15px;border-radius:24px;display:grid;place-items:center;font-size:38px;background:linear-gradient(145deg,#102f54,#1e5c94);box-shadow:0 14px 30px rgba(15,63,104,.25)}
.parent-theme .portal-login-emblem{background:linear-gradient(145deg,#0b5c62,#159ba5)}
.portal-kicker{font-size:11px;letter-spacing:2px;font-weight:900;color:#6b7f94;text-transform:uppercase;margin-bottom:7px}
.portal-login-box h2{margin:0;color:#123c69;font-size:31px}
.parent-theme h2{color:#0d6b72}
.portal-login-copy{color:#617286;line-height:1.65;margin:9px 0 22px}
.portal-field{display:block;text-align:left;font-size:12px;font-weight:800;color:#42566b;margin:12px 0}
.portal-field input,.portal-field select{width:100%;margin-top:6px;border:1px solid #cad8e6;background:#fff;border-radius:12px;padding:13px 14px;font-size:15px;outline:none;transition:.2s}
.portal-field input:focus,.portal-field select:focus{border-color:#2d7fc1;box-shadow:0 0 0 4px rgba(45,127,193,.11)}
.portal-main-btn{width:100%;border:0;border-radius:13px;padding:14px 18px;color:white;font-weight:900;font-size:14px;letter-spacing:.45px;cursor:pointer;margin-top:7px;box-shadow:0 12px 28px rgba(0,0,0,.18)}
.portal-main-btn.founder{background:linear-gradient(135deg,#7a4b12,#c88a2b)}
.portal-main-btn.parent{background:linear-gradient(135deg,#0d6770,#149ca5)}
.portal-message{display:none;margin-top:13px;border-radius:11px;padding:10px 12px;font-size:13px;font-weight:700;text-align:left}
.portal-message.show{display:block}.portal-message.error{background:#fff1f1;color:#a62626;border:1px solid #ffc9c9}.portal-message.success{background:#edfdf6;color:#14724f;border:1px solid #b8efd7}

.portal-dashboard-popup{display:none;padding:20px 10px;overflow:auto}
.portal-dashboard-box{max-width:1320px!important;width:min(96vw,1320px)!important;margin:12px auto!important;padding:0!important;border-radius:28px!important;overflow:hidden;background:#f4f8fc!important;box-shadow:0 30px 90px rgba(0,15,35,.45)!important;border:1px solid rgba(255,255,255,.8)!important}
.portal-dashboard-hero{min-height:180px;padding:36px 42px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:radial-gradient(circle at 80% 20%,rgba(255,209,102,.25),transparent 34%),linear-gradient(135deg,#09294a,#154f80);color:white}
.portal-dashboard-hero h2{font-size:38px;margin:3px 0 7px}.portal-dashboard-hero p{margin:0;color:#d6e8f8}
.portal-dashboard-hero .portal-kicker{color:#ffd783}
.portal-readonly-badge{white-space:nowrap;padding:11px 15px;border-radius:999px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.23);font-size:12px;font-weight:900;letter-spacing:1px}
.portal-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:18px 24px 6px;margin-top:-34px;position:relative;z-index:2}
.portal-stat{background:#fff;border:1px solid #e1eaf3;border-radius:18px;padding:18px;box-shadow:0 12px 26px rgba(20,55,87,.08)}
.portal-stat small{display:block;color:#74879b;font-size:11px;font-weight:900;letter-spacing:.9px;text-transform:uppercase}.portal-stat strong{display:block;color:#123c69;font-size:28px;margin:6px 0 3px}.portal-stat span{color:#718297;font-size:12px}
.portal-tabbar{display:flex;gap:8px;overflow:auto;padding:18px 24px 10px;scrollbar-width:thin}
.portal-tabbar button{flex:0 0 auto;border:1px solid #d7e2ed;background:#fff;color:#51657a;border-radius:999px;padding:10px 16px;font-weight:800;cursor:pointer}.portal-tabbar button.active{background:#123c69;color:#fff;border-color:#123c69;box-shadow:0 6px 16px rgba(18,60,105,.18)}
.parent-tabs button.active{background:#0e747b;border-color:#0e747b}
.portal-content{padding:12px 24px 24px;min-height:360px}
.portal-loading,.portal-empty{padding:35px 20px;border:1px dashed #c7d7e6;border-radius:16px;background:#fff;text-align:center;color:#718399;font-weight:700}
.portal-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.portal-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.portal-card{background:#fff;border:1px solid #dfe9f2;border-radius:19px;padding:20px;box-shadow:0 9px 24px rgba(17,49,78,.06)}
.portal-card h3,.portal-card h4{color:#123c69;margin:0 0 10px}.portal-card p{color:#63778b;line-height:1.65}
.portal-list{display:grid;gap:10px}.portal-list-item{padding:14px 15px;border:1px solid #e2eaf2;border-radius:14px;background:#fbfdff}.portal-list-item strong{color:#153c61}.portal-list-item small{display:block;color:#7b8ea2;margin-top:5px;line-height:1.5}
.portal-priority{display:inline-block;margin-left:7px;border-radius:999px;padding:3px 8px;font-size:10px;font-weight:900;background:#eef4fa;color:#49647e}.portal-priority.urgent{background:#fff0f0;color:#b32626}.portal-priority.important{background:#fff7e8;color:#9a6417}
.portal-table-wrap{width:100%;overflow:auto;border:1px solid #dce6ef;border-radius:16px;background:#fff}.portal-table{width:100%;border-collapse:collapse;min-width:760px;font-size:13px}.portal-table th{position:sticky;top:0;background:#edf4fa;color:#294762;text-align:left;padding:12px;border-bottom:1px solid #d7e2ed;white-space:nowrap}.portal-table td{padding:12px;border-bottom:1px solid #edf1f5;color:#40566c;vertical-align:top}.portal-table tr:last-child td{border-bottom:0}.portal-table strong{color:#153b5e}
.portal-status{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:900;background:#eef5fb;color:#315a78}.portal-status.good{background:#e9fbf3;color:#176b4b}.portal-status.warn{background:#fff6e6;color:#8d6119}.portal-status.bad{background:#fff0f0;color:#a52a2a}
.portal-bottom-actions{padding:14px 24px 22px;display:flex;justify-content:flex-end;gap:10px}.portal-ghost-btn,.portal-danger-btn,.portal-action-btn{border:0;border-radius:11px;padding:10px 14px;font-weight:800;cursor:pointer}.portal-ghost-btn{background:#e8f0f7;color:#294d6d}.portal-danger-btn{background:#feecec;color:#a52b2b}.portal-action-btn{background:#123c69;color:#fff}.portal-action-btn.teal{background:#0e747b}.portal-action-btn.gold{background:#a8711d}.portal-action-btn:disabled{opacity:.55;cursor:not-allowed}

.portal-parent-hero{padding:26px 30px;background:radial-gradient(circle at 86% 20%,rgba(255,255,255,.18),transparent 32%),linear-gradient(135deg,#075c63,#0f8790);color:#fff;display:flex;align-items:center;gap:22px;min-height:170px}
.portal-parent-photo{width:108px;height:108px;flex:0 0 108px;border-radius:28px;overflow:hidden;background:rgba(255,255,255,.15);border:3px solid rgba(255,255,255,.58);box-shadow:0 14px 32px rgba(0,42,47,.25);display:grid;place-items:center;font-size:42px}.portal-parent-photo img{width:100%;height:100%;object-fit:cover;display:block}
.portal-parent-copy h2{margin:0 0 5px;font-size:32px}.portal-parent-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.portal-parent-chip{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.18);font-size:12px;font-weight:800}
.portal-quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.portal-quick{border:1px solid #dfe8f1;background:#fff;border-radius:18px;padding:18px;text-align:left;cursor:pointer;transition:.2s}.portal-quick:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(12,77,83,.10)}.portal-quick b{display:block;color:#0c6570;font-size:16px;margin:8px 0 4px}.portal-quick span{font-size:12px;color:#75879a}
.portal-result-hero{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;margin-bottom:14px}.portal-result-title h3{margin:0;color:#0d6670}.portal-score-ring{min-width:110px;text-align:center;border-radius:18px;background:#effaf9;padding:14px;border:1px solid #cde9e6}.portal-score-ring strong{display:block;font-size:24px;color:#0b6f73}.portal-score-ring small{color:#63878a}
.portal-result-subject{margin:12px 0;border:1px solid #e0e9f0;border-radius:15px;overflow:hidden}.portal-result-subject-head{padding:12px 14px;background:#f5f9fc;display:flex;align-items:center;justify-content:space-between;gap:10px}.portal-result-subject-head strong{color:#173f62}.portal-component-row{display:grid;grid-template-columns:1fr 100px 100px;gap:10px;padding:10px 14px;border-top:1px solid #edf2f6;align-items:center;font-size:13px}.portal-component-row span:nth-child(2),.portal-component-row span:nth-child(3){text-align:right}.portal-abs{color:#a92b2b;font-weight:900}
.portal-progress-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.portal-progress-tile{aspect-ratio:1/1;border:1px solid #dce7ef;border-radius:16px;overflow:hidden;background:#edf3f7;position:relative}.portal-progress-tile img{width:100%;height:100%;object-fit:cover;display:block}.portal-progress-tile .portal-progress-missing{height:100%;display:grid;place-items:center;text-align:center;color:#7b8b99;padding:10px;font-size:12px}.portal-progress-label{position:absolute;left:8px;bottom:8px;background:rgba(3,24,36,.74);color:#fff;border-radius:999px;padding:5px 8px;font-size:10px;font-weight:900}
.portal-attendance-big{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.portal-attendance-big>div{border-radius:16px;padding:16px;background:#f6fbfb;border:1px solid #d9ebea}.portal-attendance-big small{display:block;color:#789092}.portal-attendance-big strong{font-size:24px;color:#0b6f73}

.portal-admin-shell{display:grid;gap:16px}.portal-admin-card{background:#fff;border:1px solid #dce7f0;border-radius:18px;padding:18px}.portal-admin-card h4{margin:0 0 6px;color:#123c69}.portal-admin-card p{margin:0 0 14px;color:#718195;line-height:1.5}.portal-admin-row{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end}.portal-admin-roster-tools{display:grid;grid-template-columns:180px 1fr auto;gap:10px;margin-bottom:12px}.portal-admin-roster{display:grid;gap:9px;max-height:560px;overflow:auto;padding-right:3px}.portal-admin-student{display:grid;grid-template-columns:minmax(200px,1.3fr) minmax(160px,.8fr) minmax(170px,.9fr) minmax(170px,.9fr) auto;gap:10px;align-items:center;padding:12px;border:1px solid #e1e9f1;border-radius:14px;background:#fbfdff}.portal-admin-student input{width:100%;border:1px solid #cfdae5;border-radius:9px;padding:9px}.portal-admin-student .meta{font-size:11px;color:#7d8fa2}.portal-admin-pub{display:grid;grid-template-columns:1fr 1fr auto auto;gap:10px;align-items:end}.portal-admin-current{margin-top:12px;padding:12px;border-radius:12px;background:#f4f8fb;color:#53697f;font-size:13px}.portal-admin-cycle-list{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.portal-admin-cycle{border-radius:999px;background:#edf5fb;color:#315c7c;padding:6px 9px;font-size:11px;font-weight:800}

body.dark-mode .portal-login-box,body.dark-mode .portal-dashboard-box,body.dark-mode .portal-card,body.dark-mode .portal-stat,body.dark-mode .portal-list-item,body.dark-mode .portal-table-wrap,body.dark-mode .portal-quick,body.dark-mode .portal-admin-card,body.dark-mode .portal-admin-student{background:#172431!important;border-color:#34485a!important;color:#e9f0f5!important}
body.dark-mode .portal-field input,body.dark-mode .portal-field select,body.dark-mode .portal-admin-student input{background:#1d2d3b;color:#fff;border-color:#455c70}body.dark-mode .portal-login-box h2,body.dark-mode .portal-card h3,body.dark-mode .portal-card h4,body.dark-mode .portal-stat strong,body.dark-mode .portal-admin-card h4{color:#8dc9f3}body.dark-mode .portal-tabbar button{background:#213243;border-color:#40566a;color:#dce8f1}body.dark-mode .portal-table th{background:#213243;color:#d9e9f6;border-color:#40566a}body.dark-mode .portal-table td{color:#d4e0e9;border-color:#324759}

body.staff-app-mode #founderLoginEntry,body.staff-app-mode #parentLoginEntry,body.staff-app-mode #founderLoginPopup,body.staff-app-mode #parentLoginPopup,body.staff-app-mode #founderPortalPopup,body.staff-app-mode #parentPortalPopup{display:none!important}

@media(max-width:980px){.portal-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.portal-grid-3,.portal-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.portal-progress-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.portal-admin-student{grid-template-columns:1fr 1fr}.portal-admin-student .portal-action-btn{width:100%}.portal-admin-pub{grid-template-columns:1fr 1fr}.portal-admin-row{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.portal-login-box{padding:28px 20px 24px!important}.portal-dashboard-popup{padding:0}.portal-dashboard-box{width:100%!important;min-height:100vh;margin:0!important;border-radius:0!important}.portal-dashboard-hero{padding:30px 20px;align-items:flex-start;flex-direction:column}.portal-dashboard-hero h2{font-size:30px}.portal-stat-grid{grid-template-columns:1fr 1fr;padding:15px 14px 2px;margin-top:-18px}.portal-stat{padding:14px}.portal-stat strong{font-size:22px}.portal-tabbar{padding:15px 14px 8px}.portal-content{padding:10px 14px 18px}.portal-grid-2,.portal-grid-3,.portal-quick-grid{grid-template-columns:1fr}.portal-parent-hero{padding:24px 18px;align-items:flex-start}.portal-parent-photo{width:82px;height:82px;flex-basis:82px;border-radius:22px}.portal-parent-copy h2{font-size:25px}.portal-progress-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.portal-attendance-big{grid-template-columns:1fr 1fr}.portal-result-hero{grid-template-columns:1fr}.portal-score-ring{text-align:left}.portal-component-row{grid-template-columns:1fr 72px 72px;font-size:12px}.portal-admin-row,.portal-admin-roster-tools,.portal-admin-pub,.portal-admin-student{grid-template-columns:1fr}.portal-bottom-actions{padding:12px 14px 18px}.portal-access-entry{min-width:100%;width:100%}}


/* MULTI-FOUNDER ADMIN CONTROL — FINAL */
.portal-founder-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.portal-founder-head h4{margin-bottom:5px}.portal-founder-count{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:72px;padding:8px 12px;border-radius:999px;background:#fff4d3;color:#7b5b09;font-weight:900;font-size:12px;border:1px solid #f0d98b}.portal-founder-create{display:grid;grid-template-columns:minmax(180px,1fr) minmax(200px,1fr) auto;gap:10px;align-items:end;padding:14px;border:1px dashed #cfdce8;border-radius:14px;background:#f8fbfd;margin-bottom:13px}.portal-admin-founder-list{display:grid;gap:9px}.portal-admin-founder{display:grid;grid-template-columns:minmax(205px,1.15fr) minmax(170px,.8fr) minmax(190px,.9fr) auto;gap:10px;align-items:center;padding:12px;border:1px solid #e1e9f1;border-radius:14px;background:#fbfdff}.portal-admin-founder input{width:100%;border:1px solid #cfdae5;border-radius:9px;padding:9px}.portal-founder-info{min-width:0}.portal-founder-info>strong{margin-right:8px;color:#173f66}.portal-founder-info .meta{margin-top:5px;font-size:11px;color:#7d8fa2;line-height:1.45}.portal-founder-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.portal-delete-btn{border:1px solid #e2a8a8;background:#fff3f3;color:#a82020;border-radius:9px;padding:9px 11px;font-weight:800;cursor:pointer}.portal-delete-btn:hover{background:#ffe5e5}.portal-action-btn:disabled{opacity:.55;cursor:not-allowed}
body.dark-mode .portal-founder-create,body.dark-mode .portal-admin-founder{background:#172431!important;border-color:#34485a!important;color:#e9f0f5!important}body.dark-mode .portal-admin-founder input{background:#1d2d3b;color:#fff;border-color:#455c70}body.dark-mode .portal-founder-info>strong{color:#8dc9f3}body.dark-mode .portal-founder-count{background:#44391c;color:#ffe5a1;border-color:#6d5b2b}body.dark-mode .portal-delete-btn{background:#3f2227;color:#ffc2c2;border-color:#704047}
@media(max-width:980px){.portal-admin-founder{grid-template-columns:1fr 1fr}.portal-founder-actions{justify-content:flex-start}.portal-founder-create{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.portal-founder-head{flex-direction:column}.portal-founder-create,.portal-admin-founder{grid-template-columns:1fr}.portal-founder-actions>*{flex:1 1 auto}}


/* =========================================================
   PERFORMANCE — GALLERY BATCH LOADING
   Keeps the existing gallery design; only defers off-screen batches.
========================================================= */
#photoPopup .media-card.gallery-deferred-card{
    display:none;
}
.gallery-load-more-btn{
    border:none;
    background:linear-gradient(135deg,#123c69,#1976b8);
    color:#fff;
    padding:13px 28px;
    border-radius:28px;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 5px 14px rgba(0,0,0,.18);
    margin:26px auto 4px;
    align-items:center;
    justify-content:center;
}
.gallery-load-more-btn:hover{
    transform:translateY(-2px);
}
body.dark-mode .gallery-load-more-btn{
    background:linear-gradient(135deg,#0b3157,#125f96);
}

/* =========================================================
   GALLERY LIGHTBOX — SMOOTH 3D PHOTO TURN
   Decorative only: normal Gallery next/previous navigation.
   ========================================================= */
#photoLightbox #largePhoto{
    transform-origin:center center;
    will-change:transform,opacity,filter;
    backface-visibility:hidden;
}

#photoLightbox #largePhoto.gallery-photo-out-next{
    animation:galleryPhotoOutNext .13s ease-in both;
}
#photoLightbox #largePhoto.gallery-photo-out-prev{
    animation:galleryPhotoOutPrev .13s ease-in both;
}
#photoLightbox #largePhoto.gallery-photo-in-next{
    animation:galleryPhotoInNext .32s cubic-bezier(.18,.78,.22,1) both;
}
#photoLightbox #largePhoto.gallery-photo-in-prev{
    animation:galleryPhotoInPrev .32s cubic-bezier(.18,.78,.22,1) both;
}

@keyframes galleryPhotoOutNext{
    from{opacity:1;transform:perspective(1000px) translateX(0) rotateY(0deg) scale(1);filter:blur(0)}
    to{opacity:.18;transform:perspective(1000px) translateX(-34px) rotateY(12deg) scale(.94);filter:blur(1px)}
}
@keyframes galleryPhotoOutPrev{
    from{opacity:1;transform:perspective(1000px) translateX(0) rotateY(0deg) scale(1);filter:blur(0)}
    to{opacity:.18;transform:perspective(1000px) translateX(34px) rotateY(-12deg) scale(.94);filter:blur(1px)}
}
@keyframes galleryPhotoInNext{
    from{opacity:.18;transform:perspective(1000px) translateX(38px) rotateY(-13deg) rotateZ(.6deg) scale(.94);filter:blur(1px)}
    70%{opacity:1;transform:perspective(1000px) translateX(-3px) rotateY(1.5deg) rotateZ(0deg) scale(1.008);filter:blur(0)}
    to{opacity:1;transform:perspective(1000px) translateX(0) rotateY(0deg) rotateZ(0deg) scale(1);filter:blur(0)}
}
@keyframes galleryPhotoInPrev{
    from{opacity:.18;transform:perspective(1000px) translateX(-38px) rotateY(13deg) rotateZ(-.6deg) scale(.94);filter:blur(1px)}
    70%{opacity:1;transform:perspective(1000px) translateX(3px) rotateY(-1.5deg) rotateZ(0deg) scale(1.008);filter:blur(0)}
    to{opacity:1;transform:perspective(1000px) translateX(0) rotateY(0deg) rotateZ(0deg) scale(1);filter:blur(0)}
}

@media (prefers-reduced-motion: reduce){
    #photoLightbox #largePhoto.gallery-photo-out-next,
    #photoLightbox #largePhoto.gallery-photo-out-prev,
    #photoLightbox #largePhoto.gallery-photo-in-next,
    #photoLightbox #largePhoto.gallery-photo-in-prev{
        animation:none!important;
    }
}
/* =========================================
   SMART ATTENDANCE CARD — DESKTOP + MOBILE FIX
========================================= */

/* Main Smart Attendance action card */
#staffDashboardSmartAttendanceAction,
#staffDashboardSmartAttendanceSafeAction,
[data-smart-attendance-action="1"],
.smart-attendance-action-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  min-height: 96px !important;
  padding: 16px 18px !important;
  border: 0 !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  text-align: left !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: linear-gradient(135deg, #0f5e8c 0%, #1d8acb 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(13, 59, 102, 0.18) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  overflow: hidden !important;
  position: relative;
}

#staffDashboardSmartAttendanceAction:hover,
#staffDashboardSmartAttendanceSafeAction:hover,
[data-smart-attendance-action="1"]:hover,
.smart-attendance-action-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(13, 59, 102, 0.24) !important;
}

#staffDashboardSmartAttendanceAction::before,
#staffDashboardSmartAttendanceSafeAction::before,
[data-smart-attendance-action="1"]::before,
.smart-attendance-action-card::before {
  content: "";
  position: absolute;
  right: -20px;
  bottom: -20px;
  width: 110px;
  height: 110px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
}

/* icon */
#staffDashboardSmartAttendanceAction .staff-dashboard-action-icon,
#staffDashboardSmartAttendanceSafeAction .staff-dashboard-action-icon,
[data-smart-attendance-action="1"] .staff-dashboard-action-icon,
.smart-attendance-action-card .staff-dashboard-action-icon {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  border-radius: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,0.16) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  font-size: 26px !important;
  color: #fff !important;
}

/* text area */
#staffDashboardSmartAttendanceAction .staff-dashboard-action-copy,
#staffDashboardSmartAttendanceSafeAction .staff-dashboard-action-copy,
[data-smart-attendance-action="1"] .staff-dashboard-action-copy,
.smart-attendance-action-card .staff-dashboard-action-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

#staffDashboardSmartAttendanceAction .staff-dashboard-action-copy strong,
#staffDashboardSmartAttendanceSafeAction .staff-dashboard-action-copy strong,
[data-smart-attendance-action="1"] .staff-dashboard-action-copy strong,
.smart-attendance-action-card .staff-dashboard-action-copy strong {
  font-size: 21px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
}

#staffDashboardSmartAttendanceAction .staff-dashboard-action-copy small,
#staffDashboardSmartAttendanceSafeAction .staff-dashboard-action-copy small,
[data-smart-attendance-action="1"] .staff-dashboard-action-copy small,
.smart-attendance-action-card .staff-dashboard-action-copy small {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.92) !important;
  line-height: 1.35 !important;
}

/* arrow */
#staffDashboardSmartAttendanceAction .staff-dashboard-action-arrow,
#staffDashboardSmartAttendanceSafeAction .staff-dashboard-action-arrow,
[data-smart-attendance-action="1"] .staff-dashboard-action-arrow,
.smart-attendance-action-card .staff-dashboard-action-arrow {
  font-size: 24px !important;
  color: #ffffff !important;
  opacity: 0.95 !important;
  margin-left: auto !important;
}

/* put cards in a proper grid if needed */
.staff-dashboard-quick-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px !important;
  align-items: stretch !important;
}

/* if only one column is needed on smaller tablets */
@media (max-width: 1100px) {
  .staff-dashboard-quick-actions {
    grid-template-columns: 1fr !important;
  }
}

/* MOBILE + TAB FIX */
@media (max-width: 768px) {
  .staff-dashboard-quick-actions {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #staffDashboardSmartAttendanceAction,
  #staffDashboardSmartAttendanceSafeAction,
  [data-smart-attendance-action="1"],
  .smart-attendance-action-card {
    min-height: 84px !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    gap: 10px !important;
  }

  #staffDashboardSmartAttendanceAction .staff-dashboard-action-icon,
  #staffDashboardSmartAttendanceSafeAction .staff-dashboard-action-icon,
  [data-smart-attendance-action="1"] .staff-dashboard-action-icon,
  .smart-attendance-action-card .staff-dashboard-action-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    font-size: 22px !important;
    border-radius: 14px !important;
  }

  #staffDashboardSmartAttendanceAction .staff-dashboard-action-copy strong,
  #staffDashboardSmartAttendanceSafeAction .staff-dashboard-action-copy strong,
  [data-smart-attendance-action="1"] .staff-dashboard-action-copy strong,
  .smart-attendance-action-card .staff-dashboard-action-copy strong {
    font-size: 17px !important;
  }

  #staffDashboardSmartAttendanceAction .staff-dashboard-action-copy small,
  #staffDashboardSmartAttendanceSafeAction .staff-dashboard-action-copy small,
  [data-smart-attendance-action="1"] .staff-dashboard-action-copy small,
  .smart-attendance-action-card .staff-dashboard-action-copy small {
    font-size: 11.5px !important;
  }

  #staffDashboardSmartAttendanceAction .staff-dashboard-action-arrow,
  #staffDashboardSmartAttendanceSafeAction .staff-dashboard-action-arrow,
  [data-smart-attendance-action="1"] .staff-dashboard-action-arrow,
  .smart-attendance-action-card .staff-dashboard-action-arrow {
    font-size: 20px !important;
  }
}