:root{
    --dark:#111827;
    --dark-2:#1f2937;
    --green:#374151;
    --green-dark:#111827;
    --green-light:#d1d5db;
    --green-accent:#9ca3af;
    --soft-green:#f3f4f6;
    --yellow:#f59e0b;
    --red:#dc2626;
    --gray:#64748b;
    --light:#f6f7f8;
    --border:#d1d5db;
    --white:#ffffff;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Segoe UI", Arial, sans-serif;
}

body{
    background:var(--light);
    color:#1f2937;
}

/* LOGIN PAGE */
/* This keeps your green palette but remakes the login page closer to the USTP-style reference */

.login-body{
    min-height:100vh;
    background:#ffffff;
    display:flex;
    align-items:stretch;
    justify-content:center;
    padding:0;
    overflow:hidden;
}

/* For the new login.html layout if you use login-layout */
.login-layout{
    width:100%;
    min-height:100vh;
    display:grid;
    grid-template-columns:390px 1fr;
    background:#ffffff;
}

/* For your current login.html that still uses login-card */
.login-card{
    width:100%;
    max-width:none;
    min-height:100vh;
    background:#ffffff;
    border-radius:0;
    overflow:hidden;
    display:grid;
    grid-template-columns:390px 1fr;
    box-shadow:none;
    position:relative;
    z-index:1;
}

/* LEFT LOGIN FORM PANEL */
/* This targets both the new login-panel and your existing login-right */

.login-panel,
.login-right{
    background:#ffffff;
    padding:70px 46px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    border-right:1px solid #e5e7eb;
    position:relative;
    z-index:2;
    order:1;
}

/* If your login form is still inside login-right, this keeps it clean */
.login-right h2{
    font-size:34px;
    font-weight:900;
    color:#0f172a;
    margin-bottom:8px;
}

.login-right p{
    color:#64748b;
    margin-bottom:28px;
}

.login-brand{
    text-align:center;
    margin-bottom:34px;
}

.login-brand img{
    width:200px;
    height:200px;
    object-fit:contain;
    margin-bottom:14px;
}

.login-brand h1{
    font-size:42px;
    font-weight:900;
    color:#111827;
    line-height:1;
    margin:0;
}

.login-brand h1 span{
    color:#374151;
}

.login-brand p{
    margin:8px 0 0;
    font-size:13px;
    color:#64748b;
}

.login-form{
    width:100%;
}

.login-form .form-label,
.login-right .form-label{
    font-size:14px;
    color:#0f172a;
    margin-bottom:7px;
}

/* Login inputs */

.form-control,
.form-select{
    border-radius:12px;
    border:1px solid var(--border);
}

.form-control:focus,
.form-select:focus{
    border-color:var(--green);
    box-shadow:0 0 0 4px rgba(107, 114, 128, .18);
}

.login-right .form-control,
.login-right .form-select{
    height:50px;
}

.login-input{
    height:48px;
    display:flex;
    align-items:center;
    background:#f3f4f6;
    border:1px solid #d1d5db;
    border-radius:4px;
    margin-bottom:16px;
    overflow:hidden;
}

.login-input i{
    width:42px;
    color:#374151;
    text-align:center;
}

.login-input input{
    flex:1;
    height:100%;
    border:none;
    outline:none;
    background:transparent;
    font-size:15px;
    color:#0f172a;
}

.login-input input::placeholder{
    color:#64748b;
}

.login-input button{
    width:45px;
    height:100%;
    border:none;
    border-left:1px solid #d1d5db;
    background:#ffffff;
    color:#374151;
}

.login-input button:hover{
    background:#f3f4f6;
}

/* Password input group for your current login.html */

.login-right .input-group{
    margin-bottom:24px;
}

.login-right .input-group .form-control{
    height:50px;
    border-radius:12px 0 0 12px;
}

.login-right .input-group .btn{
    border-radius:0 12px 12px 0;
    border-color:var(--border);
    color:#374151;
    background:white;
}

.login-right .input-group .btn:hover{
    background:#f3f4f6;
    color:#111827;
    border-color:#374151;
}

/* Login button */

.login-button,
.login-right .btn-primary{
    width:100%;
    height:46px;
    background:#374151 !important;
    color:white !important;
    border:none !important;
    border-radius:8px;
    display:block;
    margin:18px auto 26px;
    font-weight:600;
    box-shadow:0 6px 14px rgba(22,101,52,.25);
}

.login-button:hover,
.login-right .btn-primary:hover{
    background:#111827 !important;
}

.login-button:focus,
.login-button:active,
.login-right .btn-primary:focus,
.login-right .btn-primary:active{
    background:#111827 !important;
    border-color:#111827 !important;
    box-shadow:0 0 0 4px rgba(107, 114, 128, .25) !important;
}

.login-divider{
    width:100%;
    height:1px;
    background:#d1d5db;
    margin:10px 0 20px;
}

.demo-login,
.login-right .bg-light{
    border:1px solid #d1d5db !important;
    background:#f8fafc !important;
    border-radius:6px !important;
    padding:16px !important;
}

.demo-login strong,
.login-right .bg-light strong{
    color:#111827;
}

.demo-login p{
    margin:4px 0 0;
    color:#0f172a;
}

.error-message{
    display:none;
    padding:12px;
    border-radius:8px;
    background:#fee2e2;
    color:#991b1b;
    margin-bottom:16px;
    font-size:14px;
}

/* RIGHT VISUAL PANEL */
/* This targets both the new login-visual and your existing login-left */

.login-visual,
.login-left{
    position:relative;
    background:
        linear-gradient(135deg,rgba(17, 24, 39, .92),rgba(209, 213, 219, .60)),
        radial-gradient(circle at 80% 10%,rgba(156, 163, 175, .25),transparent 35%),
        linear-gradient(135deg,#111827,#d1d5db);
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    padding:55px;
    order:2;
}

/* Large faded seal like the visual side of the reference */
.login-visual::before,
.login-left::before{
    content:"";
    position:absolute;
    width:900px;
    height:900px;
    background-image:url("../img/pgmoseal.png");
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    opacity:.12;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    filter:grayscale(20%) blur(.3px);
    z-index:0;
}

/* Diagonal design lines like the reference image */
.login-visual::after,
.login-left::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(125deg,transparent 0 24%,rgba(255,255,255,.22) 24.4% 25.2%,transparent 25.6% 100%),
        linear-gradient(145deg,transparent 0 46%,rgba(255,255,255,.20) 46.4% 47.2%,transparent 47.6% 100%),
        linear-gradient(35deg,transparent 0 66%,rgba(255,255,255,.18) 66.4% 67.2%,transparent 67.6% 100%);
    opacity:.75;
    z-index:0;
}

.visual-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg,rgba(17, 24, 39, .35),transparent 35%,rgba(17, 24, 39, .35)),
        radial-gradient(circle at center,transparent 0 35%,rgba(17, 24, 39, .22) 70%);
    z-index:1;
}

.visual-content{
    position:relative;
    z-index:2;
    text-align:center;
    color:white;
    max-width:680px;
    padding:30px;
}

.visual-content img{
    width:180px;
    height:180px;
    object-fit:contain;
    opacity:.95;
    margin-bottom:18px;
    filter:drop-shadow(0 12px 24px rgba(0,0,0,.25));
}

.visual-content h2{
    font-size:44px;
    font-weight:900;
    letter-spacing:.5px;
    margin-bottom:10px;
}

.visual-content p{
    font-size:18px;
    color:#f0fff4;
    margin-bottom:28px;
}

.visual-tags{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
}

.visual-tags span{
    padding:9px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.22);
    backdrop-filter:blur(4px);
    font-size:14px;
}

/* Existing login-left text support */

.login-left > *{
    position:relative;
    z-index:2;
}

.logo{
    font-size:30px;
    font-weight:800;
    margin-bottom:20px;
}

.logo span{
    color:#9ca3af;
}

.login-left h1{
    font-size:42px;
    font-weight:900;
    margin-bottom:14px;
}

.login-left p{
    color:#f0fff4;
    line-height:1.6;
}

/* GLOBAL BUTTON COLOR */

.btn{
    border-radius:10px;
}

.btn-primary{
    background:#374151 !important;
    border-color:#374151 !important;
}

.btn-primary:hover{
    background:#111827 !important;
    border-color:#111827 !important;
}

.btn-primary:focus,
.btn-primary:active{
    background:#111827 !important;
    border-color:#111827 !important;
    box-shadow:0 0 0 4px rgba(107, 114, 128, .25) !important;
}

.btn-outline-primary{
    color:#374151 !important;
    border-color:#374151 !important;
}

.btn-outline-primary:hover{
    color:white !important;
    background:#374151 !important;
    border-color:#374151 !important;
}

/* SIDEBAR */

.sidebar{
    position:fixed;
    top:0;
    left:0;
    width:260px;
    height:100vh;
    background:linear-gradient(180deg,#111827 0%,#07551f 45%,#0f7a35 100%);
    padding:22px 0;
    overflow-y:auto;
    box-shadow:4px 0 20px rgba(17, 24, 39, .18);
}

.brand{
    color:white;
    text-align:center;
    font-size:25px;
    font-weight:800;
    margin-bottom:24px;
}

.brand span{
    color:#9ca3af;
}

.sidebar a{
    display:flex;
    align-items:center;
    gap:12px;
    color:#d6f5df;
    text-decoration:none;
    padding:14px 24px;
    transition:.2s ease;
    border-left:4px solid transparent;
}

.sidebar a:hover{
    background:linear-gradient(90deg,rgba(22,101,52,.95),rgba(107, 114, 128, .45));
    color:white;
    border-left:4px solid #9ca3af;
}

.sidebar a.active{
    background:linear-gradient(90deg,#374151,#9ca3af);
    color:white;
    border-left:4px solid #9ca3af;
}

.sidebar i{
    width:20px;
    text-align:center;
}

.logout-link{
    margin-top:20px;
    border-top:1px solid rgba(255,255,255,.12);
}

/* MAIN LAYOUT */

.main{
    margin-left:260px;
    min-height:100vh;
}

.topbar{
    height:76px;
    background:white;
    border-bottom:1px solid var(--border);
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 30px;
}

.topbar-title{
    font-size:18px;
    font-weight:800;
    color:#111827;
}

.admin-chip{
    display:flex;
    align-items:center;
    gap:10px;
    color:#475569;
}

.avatar{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#f3f4f6;
    color:#374151;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
}

.content{
    padding:30px;
}

.page-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    margin-bottom:24px;
}

.page-head h1{
    font-size:28px;
    font-weight:800;
    color:#111827;
}

.page-head p{
    color:var(--gray);
    margin:4px 0 0;
}

/* CARDS */

.card-panel,
.stat-card{
    background:white;
    border:1px solid var(--border);
    border-radius:18px;
    box-shadow:0 8px 24px rgba(17, 24, 39, .08);
}

.stat-card{
    padding:22px;
}

.stat-label{
    color:var(--gray);
    font-size:14px;
}

.stat-number{
    font-size:32px;
    font-weight:800;
    margin-top:6px;
    color:#111827;
}

.stat-icon{
    width:52px;
    height:52px;
    border-radius:16px;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
}

.bg-blue,
.bg-green{
    background:#374151 !important;
}

.bg-yellow{
    background:#f59e0b !important;
}

.bg-red{
    background:#dc2626 !important;
}

/* FILTERS AND TABLES */

.toolbar{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:18px;
}

.toolbar .form-control,
.toolbar .form-select{
    max-width:260px;
}

.table{
    margin-bottom:0;
}

.table th{
    color:#111827;
    font-size:14px;
    border-bottom:1px solid var(--border);
}

.table td{
    vertical-align:middle;
    font-size:14px;
}

.table-hover tbody tr:hover{
    background:#f9fafb;
}

/* BADGES */

.badge-soft{
    border-radius:999px;
    padding:7px 11px;
    font-size:12px;
    font-weight:700;
    display:inline-block;
}

.badge-pending{
    background:#fef3c7;
    color:#92400e;
}

.badge-ongoing{
    background:#f3f4f6;
    color:#374151;
}

.badge-completed{
    background:#d1d5db;
    color:#111827;
}

.badge-approved{
    background:#f3f4f6;
    color:#374151;
}

.badge-rejected{
    background:#fee2e2;
    color:#991b1b;
}

.badge-returned{
    background:#fee2e2;
    color:#991b1b;
}

.badge-generated{
    background:#f3f4f6;
    color:#374151;
}

/* ACTIONS */

.action-group{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.progress{
    height:9px;
    background:#e5e7eb;
}

.progress-bar{
    background:#374151 !important;
}

.file-pill{
    display:flex;
    align-items:center;
    gap:10px;
}

.file-icon{
    width:38px;
    height:38px;
    border-radius:12px;
    background:#f3f4f6;
    color:#374151;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* EMPTY STATES */

.empty-state{
    text-align:center;
    padding:50px 20px;
    color:var(--gray);
}

.empty-state i{
    font-size:44px;
    color:#6cae66;
    margin-bottom:12px;
}

.empty-state h5{
    color:#111827;
    font-weight:800;
}

/* REPORTS */

.report-bar{
    height:28px;
    background:#f3f4f6;
    border-radius:8px;
    overflow:hidden;
}

.report-bar span{
    display:block;
    height:100%;
    background:#374151;
}

/* CERTIFICATE */

.certificate-preview{
    border:2px solid #111827;
    padding:35px;
    border-radius:14px;
    background:white;
    text-align:center;
}

.certificate-preview h2,
.certificate-preview h1,
.certificate-preview h3{
    color:#111827;
}

/* LOGOUT PAGE */

.logout-body{
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#111827,#d1d5db);
}

.logout-box{
    background:white;
    padding:40px;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(17, 24, 39, .18);
    text-align:center;
}

.logout-box h2{
    color:#111827;
}

.spinner{
    width:45px;
    height:45px;
    border:5px solid #f3f4f6;
    border-top:5px solid #374151;
    border-radius:50%;
    animation:spin 1s linear infinite;
    margin:0 auto 20px;
}

@keyframes spin{
    to{
        transform:rotate(360deg);
    }
}

/* MODALS */

.modal-header h5{
    color:#111827;
    font-weight:800;
}

.modal-content{
    border-radius:18px;
    border:1px solid var(--border);
}

.modal-header{
    border-bottom:1px solid var(--border);
}

.modal-footer{
    border-top:1px solid var(--border);
}

/* RESPONSIVE */

@media(max-width:900px){
    .login-layout,
    .login-card{
        grid-template-columns:1fr;
    }

    .login-panel,
    .login-right{
        min-height:100vh;
        padding:45px 28px;
        order:1;
    }

    .login-visual,
    .login-left{
        display:none;
    }

    .login-brand h1{
        font-size:36px;
    }

    .sidebar{
        position:relative;
        width:100%;
        height:auto;
    }

    .main{
        margin-left:0;
    }

    .content{
        padding:20px;
    }

    .page-head{
        flex-direction:column;
    }

    .toolbar .form-control,
    .toolbar .form-select{
        max-width:100%;
        width:100%;
    }
}

/* ADMIN SIDEBAR SEAL ABOVE INTERNTRACK */

.brand-vertical{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:24px 16px 28px;
    text-align:center;
}

.brand-vertical img{
    width:150px;
    height:150px;
    object-fit:contain;
}

.brand-vertical strong{
    font-size:40px;
    font-weight:950;
    color:#ffffff;
    line-height:1;
}

.brand-vertical strong span{
    color:#9ca3af;
}

/* ADMIN NAME FIELDS */

#studentLastName,
#studentMiddleInitial{
    text-transform:uppercase;
}

/* ENHANCED CERTIFICATE AUTO-GENERATION */

.certificate-controls{
    background:#f8fafc;
    border:1px solid var(--border);
    border-radius:14px;
    padding:12px;
}

.certificate-page{
    max-width:1100px;
    margin:0 auto;
    padding:18px;
    border:0;
    border-radius:18px;
    background:#f8fafc;
}

.certificate-border{
    min-height:650px;
    border:5px double #111827;
    border-radius:18px;
    background:linear-gradient(180deg,#ffffff,#f8fff9);
    padding:42px 58px;
    text-align:center;
    position:relative;
}

.certificate-header{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    margin-bottom:36px;
}

.certificate-header img{
    width:78px;
    height:78px;
    object-fit:contain;
}

.certificate-header p{
    margin:0;
    color:#475569;
}

.certificate-header h4{
    margin:2px 0;
    color:#111827;
    font-weight:900;
    letter-spacing:.04em;
}

.certificate-title{
    color:#111827;
    font-family:Georgia, 'Times New Roman', serif;
    font-size:46px;
    font-weight:900;
    letter-spacing:.04em;
    margin-bottom:24px;
}

.certificate-line,
.certificate-body-text,
.certificate-date{
    color:#334155;
    font-size:18px;
}

.certificate-preview h1{
    font-family:Georgia, 'Times New Roman', serif;
    font-size:44px;
    font-weight:900;
    color:#111827;
    margin:10px 0 4px;
    text-transform:uppercase;
}

.certificate-student-id{
    color:#64748b;
    margin-bottom:28px;
}

.certificate-body-text{
    max-width:760px;
    margin:0 auto 28px;
    line-height:1.8;
}

.certificate-signatures{
    display:flex;
    justify-content:space-between;
    gap:80px;
    margin-top:70px;
}

.certificate-signatures div{
    flex:1;
    text-align:center;
}

.certificate-signatures span{
    display:block;
    border-top:2px solid #111827;
    margin-bottom:10px;
}

.certificate-signatures strong{
    display:block;
    color:#111827;
    text-transform:uppercase;
}

.certificate-signatures small{
    color:#64748b;
}

.certificate-footer{
    position:absolute;
    left:0;
    right:0;
    bottom:18px;
    color:#94a3b8;
    font-size:12px;
}

.certificate-print-body{
    background:white;
    padding:0;
}

@media print{
    *{
        -webkit-print-color-adjust:exact !important;
        print-color-adjust:exact !important;
    }

    body.certificate-print-body{
        margin:0;
    }

    .certificate-header img{
        display:block !important;
        visibility:visible !important;
    }

    .certificate-print-body .certificate-page{
        max-width:none;
        margin:0;
        padding:0;
        background:white;
    }

    .certificate-print-body .certificate-border{
        min-height:calc(100vh - 20px);
        border-radius:0;
        box-shadow:none;
    }
}


/* ADMIN REGISTER PAGE ADDITIONS */
.admin-register-link{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    min-height:44px;
    border:1px solid #374151;
    color:#374151;
    text-decoration:none;
    border-radius:8px;
    font-weight:700;
    margin-top:-8px;
    margin-bottom:18px;
    background:#ffffff;
}

.admin-register-link:hover{
    background:#f3f4f6;
    color:#111827;
}

.compact-brand{
    margin-bottom:22px;
}

.compact-brand img{
    width:120px;
    height:120px;
}

.compact-brand h1{
    font-size:32px;
}

.admin-register-form .login-input{
    margin-bottom:12px;
}

.admin-register-panel{
    overflow-y:auto;
    justify-content:flex-start;
    padding-top:42px;
    padding-bottom:42px;
}

@media(max-width:900px){
    .admin-register-panel{
        min-height:auto;
    }
}

/* ADMIN REGISTER EMAIL FIELD */
.form-group{
    margin-bottom: 18px;
}

.form-group label{
    display: block;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
}

.input-icon-group{
    position: relative;
    width: 100%;
}

.input-icon-group i{
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #374151;
    font-size: 16px;
    pointer-events: none;
}

.input-icon-group input{
    width: 100%;
    height: 52px;
    border: 1px solid #d1ded4;
    border-radius: 14px;
    padding: 0 16px 0 48px;
    font-size: 15px;
    outline: none;
    background: #ffffff;
    color: #0f172a;
    box-sizing: border-box;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.input-icon-group input::placeholder{
    color: #64748b;
}

.input-icon-group input:focus{
    border-color: #374151;
    box-shadow: 0 0 0 4px rgba(22, 101, 52, 0.14);
}

/* ADMIN REGISTER PAGE */
.admin-register-page{
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 18px;
    background: linear-gradient(135deg, #111827, #d1d5db);
    box-sizing: border-box;
}

.admin-register-card{
    width: 100%;
    max-width: 430px;
    background: #ffffff;
    border-radius: 28px;
    padding: 36px 34px;
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.25),
        0 0 60px rgba(107, 114, 128, 0.18);
    box-sizing: border-box;
}

.admin-register-header{
    text-align: center;
    margin-bottom: 28px;
}

.admin-register-logo{
    width: 105px;
    height: 105px;
    object-fit: contain;
    margin-bottom: 14px;
}

.admin-register-header h1{
    margin: 0;
    color: #064e2b;
    font-size: 34px;
    font-weight: 900;
    line-height: 1.1;
}

.admin-register-header p{
    margin: 8px 0 0;
    color: #64748b;
    font-size: 14px;
}

.admin-register-form{
    width: 100%;
}

.form-group{
    margin-bottom: 18px;
}

.form-group label{
    display: block;
    margin-bottom: 8px;
    color: #0f172a;
    font-size: 14px;
    font-weight: 800;
}

.input-icon-group{
    position: relative;
    width: 100%;
}

.input-icon-group > i{
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #374151;
    font-size: 17px;
    z-index: 2;
}

.input-icon-group input{
    width: 100%;
    height: 54px;
    border: 1px solid #d5e4d8;
    border-radius: 15px;
    padding: 0 18px 0 52px;
    background: #f4fbf6;
    color: #0f172a;
    font-size: 15px;
    outline: none;
    box-sizing: border-box;
    transition: all .2s ease;
}

.input-icon-group input::placeholder{
    color: #64748b;
}

.input-icon-group input:focus{
    background: #ffffff;
    border-color: #374151;
    box-shadow: 0 0 0 4px rgba(22, 101, 52, 0.13);
}

.password-group input{
    padding-right: 60px;
}

.password-toggle{
    position: absolute;
    right: 0;
    top: 0;
    width: 54px;
    height: 54px;
    border: none;
    border-left: 1px solid #d5e4d8;
    border-radius: 0 15px 15px 0;
    background: #ffffff;
    color: #374151;
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.password-toggle:hover{
    background: #ecfdf3;
}

.admin-register-btn{
    width: 100%;
    height: 54px;
    margin-top: 8px;
    border: none;
    border-radius: 15px;
    background: #374151;
    color: #ffffff;
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 12px 28px rgba(22, 101, 52, 0.28);
    transition: all .2s ease;
}

.admin-register-btn:hover{
    background: #111827;
    transform: translateY(-1px);
}

.admin-login-link{
    margin-top: 20px;
    text-align: center;
    color: #64748b;
    font-size: 14px;
}

.admin-login-link a{
    color: #374151;
    font-weight: 800;
    text-decoration: none;
}

.admin-login-link a:hover{
    text-decoration: underline;
}

/* ADMIN REGISTER SAME DESIGN AS LOGIN PAGE */
body.admin-register-body .login-layout{
    grid-template-columns:390px 1fr;
}

body.admin-register-body .admin-register-panel{
    justify-content:center;
    overflow-y:auto;
    padding:38px 46px;
}

body.admin-register-body .compact-brand{
    margin-bottom:22px;
}

body.admin-register-body .compact-brand img{
    width:118px;
    height:118px;
    margin-bottom:10px;
}

body.admin-register-body .compact-brand h1{
    font-size:34px;
    line-height:1;
}

body.admin-register-body .compact-brand p{
    font-size:13px;
    margin-top:8px;
}

body.admin-register-body .login-form .form-label{
    font-size:13px;
    font-weight:700;
    margin-bottom:6px;
}

body.admin-register-body .login-input{
    height:48px;
    margin-bottom:13px;
    border-radius:4px;
    background:#f3f4f6;
}

body.admin-register-body .login-input input{
    font-size:14px;
}

body.admin-register-body .login-button{
    margin:18px auto 16px;
}

.admin-login-text{
    text-align:center;
    color:#64748b;
    font-size:13px;
    margin-top:6px;
}

.admin-login-text a{
    color:#374151;
    font-weight:800;
    text-decoration:none;
}

.admin-login-text a:hover{
    color:#111827;
    text-decoration:underline;
}

body.admin-register-body .visual-content h2{
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
}

@media(max-height:760px){
    body.admin-register-body .admin-register-panel{
        justify-content:flex-start;
        padding-top:26px;
        padding-bottom:26px;
    }

    body.admin-register-body .compact-brand img{
        width:92px;
        height:92px;
    }

    body.admin-register-body .compact-brand h1{
        font-size:30px;
    }

    body.admin-register-body .login-input{
        height:46px;
        margin-bottom:10px;
    }
}

@media(max-width:900px){
    body.admin-register-body .login-layout{
        grid-template-columns:1fr;
    }

    body.admin-register-body .admin-register-panel{
        min-height:100vh;
        width:100%;
        max-width:430px;
        margin:0 auto;
    }
}


/* PGMO POLISH PATCH 2026-06 */
.bulk-dtr-bar{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    padding:12px 14px;
    margin-bottom:16px;
    background:#f9fafb;
    border:1px solid #d1d5db;
    border-radius:14px;
}

.bulk-dtr-bar small{
    color:#374151;
    font-weight:700;
}

.compact-head{
    margin-bottom:16px;
}

.compact-head h2{
    font-size:22px;
    font-weight:900;
    color:#111827;
    margin:0;
}

.table-responsive{
    border-radius:14px;
}

@media(max-width:900px){
    body:not(.login-body):not(.logout-body):not(.admin-register-body){
        background:#f6faf7;
    }
    .sidebar{
        position:relative !important;
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        padding:18px !important;
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
        border-radius:0 0 22px 22px;
    }
    .sidebar .brand{
        grid-column:1 / -1;
        padding:10px 0 16px !important;
    }
    .sidebar a{
        margin:0 !important;
        min-height:46px;
        justify-content:flex-start;
    }
    .main{
        margin-left:0 !important;
    }
    .topbar{
        position:sticky;
        top:0;
        z-index:50;
        padding:14px 18px;
    }
    .content{
        padding:18px !important;
    }
    .page-head{
        gap:12px;
        align-items:flex-start !important;
    }
    .row.g-3 > [class*="col-"],
    .row.g-4 > [class*="col-"]{
        width:100%;
    }
    .card-panel{
        border-radius:18px;
        padding:18px !important;
    }
    .toolbar{
        display:grid;
        grid-template-columns:1fr;
    }
    .toolbar .form-control,
    .toolbar .form-select,
    .toolbar .btn{
        width:100% !important;
        max-width:none !important;
    }
    .table-responsive{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }
    .table{
        min-width:820px;
    }
    .bulk-dtr-bar{
        align-items:stretch;
    }
    .bulk-dtr-bar .btn{
        width:100%;
    }
    .action-group{
        flex-direction:column;
        align-items:stretch;
    }
    .action-group .btn{
        width:100%;
    }
}

@media(max-width:520px){
    .sidebar{
        grid-template-columns:1fr;
    }
    .topbar{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }
    .admin-chip{
        width:100%;
    }
}

/* PGMO PATCH: Secure invite registration admin panel */
.registration-invite-panel{
    border: 1px solid rgba(22, 101, 52, .12);
}

.secure-invite-grid{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
}

.invite-bulk-box,
.invite-output-box{
    min-height: 180px;
    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
    border-radius: 14px;
    resize: vertical;
}

.registration-invite-panel .badge-soft.badge-unused{
    background: #ecfdf5;
    color: #374151;
}

.registration-invite-panel .badge-soft.badge-used{
    background: #eff6ff;
    color: #1d4ed8;
}

.registration-invite-panel .badge-soft.badge-expired,
.registration-invite-panel .badge-soft.badge-revoked{
    background: #fef2f2;
    color: #b91c1c;
}

@media (max-width: 900px){
    .secure-invite-grid{
        grid-template-columns: 1fr;
    }
}

.single-invite-grid{
    display: grid;
    grid-template-columns: minmax(260px, 520px);
    gap: 16px;
    align-items: start;
}

.single-invite-grid > div{
    display: flex;
    flex-direction: column;
}

.single-invite-actions{
    margin-top: 16px;
}

.single-invite-actions .btn{
    min-height: 48px;
    border-radius: 12px;
    font-weight: 800;
    padding: 0 18px;
}

.single-invite-grid-choice .form-control{
    min-height: 48px;
    border-radius: 12px;
}

.single-invite-grid-choice small{
    display: block;
    margin-top: 6px;
}

@media (max-width: 640px){
    .single-invite-grid{
        grid-template-columns: 1fr;
    }
}


/* PGMO ID REQUEST ADMIN PAGE FIX */
.card-panel .toolbar{
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 220px;
    gap: 12px;
    margin-bottom: 18px;
}

@media (max-width: 768px){
    .card-panel .toolbar{
        grid-template-columns: 1fr;
    }

    .page-head .action-group{
        width: 100%;
    }

    .page-head .action-group .btn{
        width: 100%;
    }
}

/* ADMIN STUDENT MODAL ALIGNMENT */
.admin-student-form-grid .form-label{
    font-weight: 700;
    color: #334155;
}

.admin-student-form-grid .form-control,
.admin-student-form-grid .form-select{
    min-height: 44px;
    border-radius: 12px;
}

.middle-initial-input{
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
}

@media(max-width: 768px){
    .admin-student-form-grid .col-md-2,
    .admin-student-form-grid .col-md-5,
    .admin-student-form-grid .col-md-6,
    .admin-student-form-grid .col-md-12{
        width: 100%;
    }
}

/* PGMO PATCH: improved reports + certificate template */
.report-page-head .action-group{ justify-content:flex-end; }
.report-filter-card{ background:linear-gradient(135deg,#ffffff,#f9fafb); }
.report-filter-grid{
    display:grid;
    grid-template-columns:minmax(240px,1fr) 190px 260px;
    gap:16px;
    align-items:end;
}
.report-filter-grid label{
    display:block;
    margin-bottom:8px;
    font-weight:800;
    color:#111827;
}
.report-stat{
    min-height:132px;
    position:relative;
    overflow:hidden;
}
.report-stat:after{
    content:"";
    position:absolute;
    right:-30px;
    bottom:-30px;
    width:100px;
    height:100px;
    border-radius:50%;
    background:rgba(107, 114, 128, .14);
}
.report-stat small{ color:#64748b; }
.report-summary-list{ display:grid; gap:10px; }
.report-summary-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    border:1px solid #d9eadf;
    border-radius:14px;
    background:#f8fffb;
}
.report-summary-item span{ color:#334155; font-weight:700; }
.report-summary-item strong{
    min-width:36px;
    height:30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:#374151;
    color:#fff;
}
.report-table th{ white-space:nowrap; }
.empty-state.compact{ padding:12px; }

.certificate-template-preview{
    position:relative;
    width:min(760px, 100%);
    margin:0 auto;
    box-shadow:0 18px 50px rgba(0,0,0,.16);
    background:#fff;
}
.certificate-template-preview img{
    display:block;
    width:100%;
    height:auto;
}
.cert-overlay{
    position:absolute;
    left:10%;
    right:10%;
    text-align:center;
    z-index:3;
    color:#111;
    font-family:"Times New Roman", Times, serif;
    line-height:1.25;
}
.cert-patch{
    position:absolute;
    left:9.5%;
    right:9.5%;
    z-index:2;
    background:rgba(255,255,255,.92);
    border-radius:4px;
}
.cert-student-name{
    top:50.0%;
    font-size:clamp(20px, 3vw, 34px);
    font-weight:700;
}
.cert-course-patch{ top:53.0%; height:5.7%; }
.cert-course-line{ top:54.0%; font-size:clamp(16px, 2.3vw, 24px); }
.cert-student-label{ top:56.6%; font-size:clamp(15px, 2.1vw, 22px); font-weight:700; }
.cert-body-patch{ top:59.4%; height:12.5%; }
.cert-body-line{ top:60.6%; font-size:clamp(15px, 2.1vw, 23px); max-width:76%; margin:auto; left:12%; right:12%; }
.cert-date-patch{ top:73.4%; height:7.0%; }
.cert-date-line{ top:74.1%; font-size:clamp(15px, 2.0vw, 22px); max-width:74%; margin:auto; left:13%; right:13%; }

@media (max-width:900px){
    .report-filter-grid{ grid-template-columns:1fr; }
    .report-page-head{ flex-direction:column; }
    .report-page-head .action-group{ width:100%; }
    .report-page-head .action-group .btn{ flex:1; }
}

@media print{
    .sidebar,.topbar,.page-head,.report-filter-card,.btn,.action-group{ display:none !important; }
    .main{ margin-left:0 !important; }
    .content{ padding:0 !important; }
    .card-panel{ box-shadow:none !important; border:none !important; }
}


/* UPDATED UPLOADED PNG CERTIFICATE TEMPLATE ALIGNMENT */
.liceo-cert-template{
    width:min(820px, 100%);
    max-width:100%;
    aspect-ratio:1414 / 2000;
    position:relative;
    margin:0 auto;
    background:#fff;
    box-shadow:0 18px 55px rgba(0,0,0,.18);
    overflow:hidden;
}
.liceo-cert-template img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}
.liceo-cert-template .cert-overlay{
    position:absolute;
    z-index:3;
    color:#111;
    font-family:"Times New Roman", Times, serif;
    line-height:1.05;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    background:transparent;
}
.liceo-cert-template .cert-student-name{
    left:10.5%;
    right:10.5%;
    top:51.2%;
    font-weight:700;
}
.liceo-cert-template .cert-course-line{
    left:26%;
    right:26%;
    top:55.1%;
}
.liceo-cert-template .cert-school-line{
    left:18.5%;
    right:18.5%;
    top:60.1%;
}
.liceo-cert-template .cert-hours-line{
    left:46.5%;
    width:13%;
    top:62.6%;
    font-size:20px;
}
.liceo-cert-template .cert-start-line{
    left:47.5%;
    width:18%;
    top:65.5%;
}
.liceo-cert-template .cert-end-line{
    left:66.0%;
    width:15%;
    top:65.5%;
}
.liceo-cert-template .cert-office-line{
    left:34.5%;
    right:20%;
    top:68.2%;
}
.liceo-cert-template .cert-given-date{
    left:30.5%;
    width:26.5%;
    top:74.5%;
}

@media print{
    body.certificate-print-body{
        margin:0 !important;
        padding:0 !important;
        background:#fff !important;
    }
    .certificate-print-body .liceo-cert-template{
        width:100vw !important;
        max-width:none !important;
        height:auto !important;
        box-shadow:none !important;
        margin:0 !important;
        page-break-inside:avoid;
    }
}


/* CERTIFICATE TEMPLATE FINAL ALIGNMENT */
.liceo-cert-template{
    width:min(820px, 100%);
    max-width:100%;
    aspect-ratio:1414 / 2000;
    position:relative;
    margin:0 auto;
    background:#fff;
    box-shadow:0 18px 55px rgba(0,0,0,.18);
    overflow:hidden;
}
.liceo-cert-template img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}
.liceo-cert-template .cert-overlay{
    position:absolute;
    z-index:3;
    color:#111;
    font-family:"Times New Roman", Times, serif;
    line-height:1.18;
    text-align:center;
    background:transparent;
    left:9%;
    right:9%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.liceo-cert-template .cert-student-name{ top:48.0%; font-weight:700; }
.liceo-cert-template .cert-course-line{ top:52.2%; }
.liceo-cert-template .cert-student-label{ top:54.0%; }
.liceo-cert-template .cert-school-line{ top:58.0%; left:12%; right:12%; }
.liceo-cert-template .cert-training-line{ top:60.8%; left:12%; right:12%; }
.liceo-cert-template .cert-dates-line{ top:63.5%; left:10%; right:10%; }
.liceo-cert-template .cert-office-line{ top:66.2%; left:15%; right:15%; }
.liceo-cert-template .cert-given-line{ top:72.2%; left:12%; right:12%; }
.liceo-cert-template .cert-location-line{ top:74.8%; left:12%; right:12%; }
.liceo-cert-template .cert-country-line{ top:77.4%; left:20%; right:20%; }

@media print{
    body.certificate-print-body{ margin:0 !important; padding:0 !important; background:#fff !important; }
    .certificate-print-body .liceo-cert-template{
        width:100vw !important;
        max-width:none !important;
        height:auto !important;
        box-shadow:none !important;
        margin:0 !important;
        page-break-inside:avoid;
    }
}


/* PGMO FINAL CERTIFICATE CENTERING PATCH */
.liceo-cert-template .cert-overlay{
    left:50% !important;
    right:auto !important;
    width:82% !important;
    transform:translateX(-50%) !important;
    text-align:center !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:1.18;
}
.liceo-cert-template .cert-student-name{ top:47.8% !important; font-weight:700; }
.liceo-cert-template .cert-course-line{ top:51.9% !important; width:58% !important; }
.liceo-cert-template .cert-student-label{ top:53.9% !important; width:30% !important; font-size:clamp(16px, 2.1vw, 24px) !important; }
.liceo-cert-template .cert-school-line{ top:57.6% !important; width:82% !important; }
.liceo-cert-template .cert-training-line{ top:60.3% !important; width:84% !important; }
.liceo-cert-template .cert-dates-line{ top:63.0% !important; width:86% !important; }
.liceo-cert-template .cert-office-line{ top:65.8% !important; width:74% !important; }
.liceo-cert-template .cert-given-line{ top:71.9% !important; width:84% !important; }
.liceo-cert-template .cert-location-line{ top:74.5% !important; width:82% !important; font-size:clamp(15px, 2.1vw, 25px) !important; }
.liceo-cert-template .cert-country-line{ top:77.0% !important; width:50% !important; font-size:clamp(15px, 2.1vw, 25px) !important; }

.registration-invite-panel .used-by-cell strong{
    color:#111827;
    font-weight:900;
}

.registration-invite-panel .used-by-cell small{
    color:#64748b;
    font-weight:700;
}


/* PGMO PATCH: highlighted registration code output */
.invite-output-card{
    min-height: 136px;
    border: 1px solid #d1d5db;
    border-radius: 14px;
    background: #ffffff;
    padding: 14px;
}

.invite-output-card.invite-output-empty{
    display:flex;
    align-items:flex-start;
    color:#475569;
    font-family: Consolas, Monaco, monospace;
    font-size:13px;
}

.invite-output-card.invite-output-empty p{
    margin:0;
}

.invite-main-code{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    padding:14px 16px;
    border-radius:14px;
    border:1px solid #cbd5e1;
    border-left:7px solid #374151;
    background:#ecfdf5;
}

.invite-main-code span{
    color:#374151;
    font-size:12px;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.invite-main-code strong{
    color:#1f2937;
    font-size:clamp(18px, 2.2vw, 26px);
    font-weight:950;
    letter-spacing:.08em;
    word-break:break-word;
}

.invite-details-box{
    margin-top:10px;
    padding:10px 12px;
    border:1px solid #e2e8f0;
    border-radius:12px;
    background:#f8fafc;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px 14px;
    font-size:12px;
}

.invite-detail-row{
    min-width:0;
}

.invite-detail-row span{
    display:block;
    color:#64748b;
    font-weight:800;
    line-height:1.2;
}

.invite-detail-row strong{
    display:block;
    color:#0f172a;
    font-weight:900;
    line-height:1.25;
    word-break:break-word;
}

.invite-detail-link{
    grid-column:1 / -1;
}

.invite-detail-link strong{
    font-family:Consolas, Monaco, monospace;
    font-size:11px;
}

@media(max-width:680px){
    .invite-details-box{
        grid-template-columns:1fr;
    }
    .invite-main-code{
        gap:8px;
    }
}


/* PGMO PATCH 2026-06-26: student school filter and report polish */
.toolbar #studentSchoolFilter{
    min-width:180px;
}

@media(max-width:768px){
    .toolbar #studentSchoolFilter{
        width:100%;
        min-width:0;
    }
}


/* PGMO PATCH: last-name-only registration access UI */
.last-name-only-invite{
    max-width: 560px;
}
.last-name-code-input{
    position: relative;
}
.last-name-code-input i{
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #374151;
    z-index: 2;
}
.last-name-code-input .form-control{
    padding-left: 46px;
    font-weight: 700;
    text-transform: uppercase;
}
.last-name-code-input .form-control:focus{
    border-color: #4b5563;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, .15);
}

/* Registration invite action buttons */
.registration-key-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
}

.registration-key-actions .btn{
    border-radius:12px;
    font-weight:700;
    padding:7px 12px;
}

.registration-invite-panel .used-by-cell small{
    color:#536681;
    font-weight:700;
}


/* PGMO PATCH: Admin upload document for specific student */
.documents-head-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
}

.admin-upload-document-modal .modal-header{
    border-bottom:1px solid #dce8df;
}

.admin-document-upload-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.admin-document-upload-grid .field-span-2{
    grid-column:1 / -1;
}

.admin-document-upload-grid .form-control,
.admin-document-upload-grid .form-select{
    min-height:48px;
    border-radius:14px;
    border-color:#d3e2d7;
}

.admin-document-upload-grid textarea.form-control{
    min-height:92px;
}

.admin-document-upload-grid .form-control:focus,
.admin-document-upload-grid .form-select:focus{
    border-color:#374151;
    box-shadow:0 0 0 4px rgba(22,101,52,.12);
}

.selected-student-hint{
    border:1px solid #d8eadc;
    background:#f9fafb;
    color:#365f45;
    border-radius:14px;
    padding:12px 14px;
    font-size:14px;
}

.selected-student-hint strong{
    color:#064e2b;
}

.admin-upload-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:6px;
    padding:5px 9px;
    border-radius:999px;
    background:#ecfdf3;
    color:#374151;
    font-size:12px;
    font-weight:800;
}

@media(max-width:768px){
    .documents-head-actions{
        width:100%;
        justify-content:stretch;
    }
    .documents-head-actions .btn{
        flex:1 1 100%;
    }
    .admin-document-upload-grid{
        grid-template-columns:1fr;
    }
    .admin-document-upload-grid .field-span-2{
        grid-column:auto;
    }
}


/* PGMO PATCH: searchable single-field student dropdown for admin document uploads */
.admin-student-combo{
    position:relative;
}

.admin-student-combo-input-wrap{
    position:relative;
}

.admin-student-combo-input-wrap > i{
    position:absolute;
    left:15px;
    top:50%;
    transform:translateY(-50%);
    color:#374151;
    font-size:14px;
    pointer-events:none;
    z-index:2;
}

.admin-student-combo-input-wrap .form-control{
    min-height:52px;
    padding-left:42px;
    padding-right:48px;
    background:#fff;
    border:1px solid #cfe2d5;
    border-radius:14px;
    font-weight:700;
}

.admin-student-combo-input-wrap .form-control:focus{
    border-color:#374151;
    box-shadow:0 0 0 4px rgba(22,101,52,.14);
}

.admin-student-combo-toggle{
    position:absolute;
    right:6px;
    top:50%;
    transform:translateY(-50%);
    width:38px;
    height:38px;
    border:none;
    border-radius:11px;
    background:#ecfdf3;
    color:#374151;
    cursor:pointer;
}

.admin-student-combo-list{
    display:none;
    position:absolute;
    z-index:3000;
    left:0;
    right:0;
    top:calc(100% + 8px);
    max-height:260px;
    overflow-y:auto;
    background:#fff;
    border:1px solid #cfe2d5;
    border-radius:16px;
    box-shadow:0 18px 45px rgba(15,23,42,.16);
    padding:8px;
}

.admin-student-combo.is-open .admin-student-combo-list{
    display:block;
}

.admin-student-combo-option{
    width:100%;
    border:none;
    background:transparent;
    text-align:left;
    padding:11px 12px;
    border-radius:12px;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
}

.admin-student-combo-option:hover,
.admin-student-combo-option.is-selected{
    background:#ecfdf3;
}

.admin-student-combo-option strong{
    color:#111827;
    font-weight:900;
}

.admin-student-combo-option span{
    color:#374151;
    font-size:12px;
    font-weight:800;
    background:#dff7e8;
    border-radius:999px;
    padding:4px 8px;
    white-space:nowrap;
}

.admin-student-combo-empty{
    padding:14px;
    color:#64748b;
    font-weight:700;
    text-align:center;
}


/* PGMO PATCH: report export button spacing */
.report-page-head .action-group{display:flex;gap:10px;flex-wrap:wrap;}

/* PGMO PATCH: clickable dashboard cards and admin requirement gap view */
.admin-clickable-stat-card{
    cursor:pointer;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    border:1px solid #d7eadf;
}

.admin-clickable-stat-card:hover,
.admin-clickable-stat-card:focus{
    transform:translateY(-3px);
    box-shadow:0 14px 34px rgba(17, 24, 39, .13);
    border-color:#4b5563;
    outline:none;
}

.admin-clickable-stat-card:active{
    transform:translateY(-1px);
}

.pgmo-req-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-left:4px;
    padding:2px 7px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    line-height:1.2;
}

.pgmo-req-count.warning{
    color:#92400e;
    background:#fef3c7;
}

.pgmo-req-count.complete{
    color:#374151;
    background:#f3f4f6;
}

.pgmo-requirements-summary-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.pgmo-requirement-summary-card{
    border:1px solid #d9eadf;
    background:#f7fbf8;
    border-radius:16px;
    padding:14px;
    text-align:center;
}

.pgmo-requirement-summary-card span{
    display:block;
    color:#64748b;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.pgmo-requirement-summary-card strong{
    display:block;
    color:#111827;
    font-size:26px;
    line-height:1.1;
    margin-top:4px;
}

.pgmo-requirement-summary-card.warning{
    background:#fff7ed;
    border-color:#fed7aa;
}

.pgmo-admin-req-group{
    margin-top:18px;
    border:1px solid #d9eadf;
    border-radius:18px;
    overflow:hidden;
    background:#fff;
}

.pgmo-admin-req-group h6{
    margin:0;
    padding:13px 16px;
    color:#111827;
    font-weight:900;
    background:#ecfdf3;
    border-bottom:1px solid #d9eadf;
}

.pgmo-admin-req-table{
    margin-bottom:0;
}

.pgmo-admin-req-table th{
    color:#475569;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.04em;
    background:#f8fafc;
}

.pgmo-req-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border-radius:999px;
    padding:5px 9px;
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
}

.pgmo-req-badge.approved{
    color:#374151;
    background:#f3f4f6;
}

.pgmo-req-badge.pending{
    color:#92400e;
    background:#fef3c7;
}

.pgmo-req-badge.returned{
    color:#991b1b;
    background:#fee2e2;
}

.pgmo-req-badge.missing{
    color:#7f1d1d;
    background:#fee2e2;
}

.pgmo-req-row-missing td,
.pgmo-req-row-returned td{
    background:#fffafa;
}

@media (max-width: 768px){
    .pgmo-requirements-summary-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}


/* PGMO PATCH 2026-06-30: password reset UI */
.pgmo-reset-password-btn{
    white-space: nowrap;
}
.temporary-password-box{
    border: 1px solid rgba(22, 101, 52, .18);
    background: linear-gradient(135deg, rgba(22,101,52,.08), rgba(107, 114, 128, .10));
    color: #111827;
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: .04em;
    padding: 14px 16px;
    border-radius: 14px;
    text-align: center;
    margin: 12px 0;
}
.password-reset-note{
    border-radius: 12px;
    background: #f1f8f3;
    color: #374151;
    padding: 10px 12px;
    font-size: .88rem;
}


/* PGMO ADMIN REPORTS + LACKING REQUIREMENTS PATCH */
.admin-student-summary-filter-grid {
    grid-template-columns: repeat(4, minmax(180px, 1fr));
}

.admin-student-summary-metrics .stat-card,
.admin-lacking-report-card .stat-card {
    min-height: 118px;
}

.compact-stat {
    padding: 18px !important;
}

.compact-stat.warning,
.admin-student-summary-metrics .report-stat:nth-child(3) {
    border-color: #fed7aa;
    background: linear-gradient(135deg, #fff7ed, #ffffff);
}

.pgmo-completion-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 12px;
    border: 1px solid transparent;
}

.pgmo-completion-pill.completed {
    color: #374151;
    background: #f3f4f6;
    border-color: #d1d5db;
}

.pgmo-completion-pill.not-completed {
    color: #9a3412;
    background: #ffedd5;
    border-color: #fed7aa;
}

.pgmo-lacking-list {
    margin: 0;
    padding-left: 18px;
}

.pgmo-lacking-list li {
    margin-bottom: 4px;
}

.admin-lacking-report-card {
    border: 1px solid #d1d5db;
    background: linear-gradient(135deg, #ffffff, #f8fff9);
}

.admin-lacking-toolbar {
    grid-template-columns: minmax(260px, 1fr) minmax(200px, 280px);
}

.admin-lacking-report-table td {
    vertical-align: top;
}

@media (max-width: 992px) {
    .admin-student-summary-filter-grid,
    .admin-lacking-toolbar {
        grid-template-columns: 1fr;
    }
}

/* PGMO PATCH 2026-07-02: Admin report summary layout */
.pgmo-report-filter-grid {
    grid-template-columns: repeat(5, minmax(180px, 1fr));
}

.pgmo-applied-filters {
    border-top: 1px solid rgba(22, 101, 52, 0.12);
    padding-top: 14px;
}

.pgmo-filter-summary-title {
    color: #111827;
    font-weight: 700;
    margin-bottom: 10px;
}

.pgmo-filter-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pgmo-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #f9fafb;
    border: 1px solid #d1d5db;
    color: #111827;
    font-size: 0.86rem;
}

.pgmo-completion-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
}

.pgmo-completion-pill.completed {
    background: #f3f4f6;
    color: #374151;
}

.pgmo-completion-pill.ongoing,
.pgmo-completion-pill.not-completed {
    background: #fef9c3;
    color: #854d0e;
}

@media (max-width: 1200px) {
    .pgmo-report-filter-grid {
        grid-template-columns: repeat(3, minmax(180px, 1fr));
    }
}

@media (max-width: 768px) {
    .pgmo-report-filter-grid {
        grid-template-columns: 1fr;
    }
}

@media print {
    body[data-page="reports"] .sidebar,
    body[data-page="reports"] .topbar,
    body[data-page="reports"] .report-filter-card .btn,
    body[data-page="reports"] .page-head .action-group {
        display: none !important;
    }

    body[data-page="reports"] .main {
        margin-left: 0 !important;
        width: 100% !important;
    }

    body[data-page="reports"] .card-panel,
    body[data-page="reports"] .stat-card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        break-inside: avoid;
    }
}


/* PGMO PATCH 2026-07-02: visible editable certificate controls */
#certificatePreviewModal .certificate-controls .form-label{
    font-weight:800;
    color:#111827;
}
#certificatePreviewModal .certificate-controls input,
#certificatePreviewModal .certificate-controls select{
    min-height:44px;
}
#certificatePreviewBody{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    width:100%;
}
#certificatePreviewBody .certificate-template-preview{
    margin-left:auto !important;
    margin-right:auto !important;
}


/* PGMO PATCH 2026-07-02: editable certificate school + Kaluna-style student name */
#certificatePreviewModal #certificateSchoolEdit{
    min-height:44px;
}
.liceo-cert-template .cert-student-name,
.certificate-print-body .liceo-cert-template .cert-student-name{
    font-family:'Kaluna Script Regular','Kaluna Script','Brush Script MT','Lucida Handwriting',cursive !important;
    font-weight:400 !important;
    letter-spacing:0 !important;
    text-align:center !important;
}

/* PGMO CERTIFICATE FINAL FONT + WRAP PATCH 2026-07-02
   Font-size edit guide:
   - Main editable sizes are in admin-integration/assets/js/certificate-final-kaluna-text.js
   - Look for the block named PGMO_CERTIFICATE_FONT_SIZES.
   - Change baseSize for normal preview/PDF size.
   - Change minSize to control how small the text may shrink.
   - Change maxCharsBeforeShrink to control when shrinking starts.
*/
@font-face{
    font-family:"Kaluna Script Regular";
    src:url("../fonts/KalunaScriptDEMO.otf") format("opentype");
    font-weight:400;
    font-style:normal;
    font-display:swap;
}

.liceo-cert-template .cert-student-name,
.certificate-print-body .liceo-cert-template .cert-student-name{
    font-family:"Kaluna Script Regular", "Kaluna Script DEMO", "Brush Script MT", "Lucida Handwriting", cursive !important;
    font-weight:400 !important;
    letter-spacing:0 !important;
    line-height:1.02 !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:break-word !important;
}

.liceo-cert-template .cert-overlay{
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
}

.liceo-cert-template .cert-multiline{
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    line-height:1.08 !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    text-align:center !important;
}

.liceo-cert-template .cert-school-line{
    min-height:3.9% !important;
    max-height:5.2% !important;
}

.liceo-cert-template .cert-training-line,
.liceo-cert-template .cert-dates-line,
.liceo-cert-template .cert-office-line,
.liceo-cert-template .cert-given-line{
    min-height:3.2% !important;
}

#certificatePreviewBody{
    display:flex !important;
    justify-content:center !important;
    align-items:flex-start !important;
    width:100% !important;
}

#certificatePreviewBody .certificate-template-preview{
    margin-left:auto !important;
    margin-right:auto !important;
}


/* PGMO CERTIFICATE SAMPLE-MATCH PATCH 2026-07-02
   This is the final override for the certificate style.
   Font sizes are controlled in:
   admin-integration/assets/js/certificate-final-kaluna-text.js
   Find: PGMO_CERTIFICATE_FONT_SIZES
*/
@font-face{
    font-family:"Kaluna Script DEMO";
    src:url("../fonts/KalunaScriptDEMO.otf") format("opentype");
    font-weight:400;
    font-style:normal;
    font-display:swap;
}
@font-face{
    font-family:"Kaluna Script Regular";
    src:url("../fonts/KalunaScriptDEMO.otf") format("opentype");
    font-weight:400;
    font-style:normal;
    font-display:swap;
}

.liceo-cert-template .cert-student-name,
.certificate-print-body .liceo-cert-template .cert-student-name{
    font-family:Georgia, "Times New Roman", Times, serif !important;
    font-weight:400 !important;
    letter-spacing:.04em !important;
    line-height:.92 !important;
    top:47.35% !important;
    width:78% !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:normal !important;
}

.liceo-cert-template .cert-name-underline{
    position:absolute;
    z-index:4;
    left:50%;
    top:51.25%;
    width:74%;
    transform:translateX(-50%);
    border-top:1.6px solid #111;
    height:0;
    pointer-events:none;
}

.liceo-cert-template .cert-course-line{
    top:51.70% !important;
    width:66% !important;
    line-height:1.12 !important;
}

.liceo-cert-template .cert-student-label{
    top:53.55% !important;
    width:30% !important;
    line-height:1.1 !important;
    font-weight:400 !important;
}

.liceo-cert-template .cert-school-line{
    top:57.15% !important;
    width:78% !important;
    min-height:3.6% !important;
    max-height:5.4% !important;
}

.liceo-cert-template .cert-training-line{
    top:59.95% !important;
    width:80% !important;
    min-height:3.1% !important;
}

.liceo-cert-template .cert-dates-line{
    top:62.70% !important;
    width:82% !important;
    min-height:3.1% !important;
}

.liceo-cert-template .cert-office-line{
    top:65.45% !important;
    width:78% !important;
    min-height:3.2% !important;
}

.liceo-cert-template .cert-given-line{
    top:71.65% !important;
    width:82% !important;
    min-height:2.8% !important;
}

.liceo-cert-template .cert-location-line{
    top:74.05% !important;
    width:80% !important;
}

.liceo-cert-template .cert-country-line{
    top:76.35% !important;
    width:48% !important;
}

.liceo-cert-template .cert-overlay{
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    text-align:center !important;
    color:#111 !important;
    font-family:"Times New Roman", Times, serif;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    word-break:normal !important;
}

.liceo-cert-template .cert-multiline{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    line-height:1.12 !important;
    text-align:center !important;
}

/* PGMO CERTIFICATE PDF EXPORT LEFT-CROP FIX 2026-07-02
   Keeps the downloaded PDF centered by exporting a clean off-screen clone.
   Do not add buttons or clickable layers here. */
.certificate-export-host,
.certificate-export-host *{
    box-sizing:border-box !important;
}
.certificate-export-host .certificate-template-preview,
.certificate-export-host .liceo-cert-template,
.certificate-export-host .certificate-export-mode{
    width:820px !important;
    min-width:820px !important;
    max-width:none !important;
    height:1160px !important;
    min-height:1160px !important;
    max-height:1160px !important;
    margin:0 !important;
    padding:0 !important;
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    transform:none !important;
    box-shadow:none !important;
    overflow:hidden !important;
    background:#ffffff !important;
}
.certificate-export-host .certificate-template-preview img,
.certificate-export-host .liceo-cert-template img{
    width:820px !important;
    height:1160px !important;
    max-width:none !important;
    display:block !important;
}
.certificate-export-host .cert-overlay{
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    text-align:center !important;
}
.certificate-export-host .cert-given-line,
.certificate-export-host .cert-location-line,
.certificate-export-host .cert-country-line{
    font-size:19px !important;
    line-height:1.14 !important;
    font-weight:400 !important;
}

/* PGMO CERTIFICATE DOWNLOAD CENTER FIX 2026-07-02 V2
   Downloaded PDF uses an isolated iframe. These rules remove transform-based centering
   because html2canvas can shift transformed text in the exported PDF. */
.certificate-pdf-export,
.certificate-pdf-export.liceo-cert-template,
.certificate-pdf-export.certificate-template-preview{
    width:820px !important;
    min-width:820px !important;
    max-width:820px !important;
    height:1160px !important;
    min-height:1160px !important;
    max-height:1160px !important;
    margin:0 !important;
    padding:0 !important;
    position:relative !important;
    left:0 !important;
    right:auto !important;
    top:0 !important;
    transform:none !important;
    box-shadow:none !important;
    overflow:hidden !important;
    background:#ffffff !important;
    aspect-ratio:auto !important;
}
.certificate-pdf-export img{
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    width:820px !important;
    height:1160px !important;
    display:block !important;
    object-fit:fill !important;
}
.certificate-pdf-export .cert-overlay{
    right:auto !important;
    transform:none !important;
    text-align:center !important;
    overflow:visible !important;
    text-overflow:clip !important;
    white-space:normal !important;
}
.certificate-pdf-export .cert-student-name{ left:11% !important; width:78% !important; }
.certificate-pdf-export .cert-name-underline{ left:13% !important; width:74% !important; transform:none !important; }
.certificate-pdf-export .cert-course-line{ left:17% !important; width:66% !important; }
.certificate-pdf-export .cert-student-label{ left:35% !important; width:30% !important; }
.certificate-pdf-export .cert-school-line{ left:11% !important; width:78% !important; }
.certificate-pdf-export .cert-training-line{ left:10% !important; width:80% !important; }
.certificate-pdf-export .cert-dates-line{ left:9% !important; width:82% !important; }
.certificate-pdf-export .cert-office-line{ left:11% !important; width:78% !important; }
.certificate-pdf-export .cert-given-line{ left:9% !important; width:82% !important; }
.certificate-pdf-export .cert-location-line{ left:10% !important; width:80% !important; }
.certificate-pdf-export .cert-country-line{ left:26% !important; width:48% !important; }


/* PGMO PATCH 2026-07-02: polished admin loading/card animations, no invisible controls */
.admin-card,
.stat-card,
.report-card,
.student-card,
.table-card,
.document-card,
.certificate-card,
.dash-card{
    animation:pgmoAdminCardIn .32s ease both;
}

.admin-card:hover,
.stat-card:hover,
.report-card:hover,
.student-card:hover,
.table-card:hover,
.document-card:hover,
.certificate-card:hover,
.dash-card:hover{
    transform:translateY(-2px);
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.loading-state,
.empty-state,
.table-loading,
.students-loading,
.admin-loading{
    animation:pgmoAdminLoaderIn .34s ease both;
}

.loading-state i,
.empty-state i,
.table-loading i,
.students-loading i,
.admin-loading i,
.fa-spinner.fa-spin{
    animation:pgmoAdminFloat 1.4s ease-in-out infinite !important;
}

@keyframes pgmoAdminCardIn{
    from{opacity:0; transform:translateY(8px)}
    to{opacity:1; transform:translateY(0)}
}

@keyframes pgmoAdminLoaderIn{
    from{opacity:0; transform:translateY(10px) scale(.985)}
    to{opacity:1; transform:translateY(0) scale(1)}
}

@keyframes pgmoAdminFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-4px)}
}

@media (prefers-reduced-motion: reduce){
    .admin-card,
    .stat-card,
    .report-card,
    .student-card,
    .table-card,
    .document-card,
    .certificate-card,
    .dash-card,
    .loading-state,
    .empty-state,
    .table-loading,
    .students-loading,
    .admin-loading{
        animation:none !important;
        transition:none !important;
    }
}

/* PGMO PATCH 2026-07-02: live ring loading animation like logout overlay, no invisible controls */
.pgmo-live-ring-loader,
.pgmo-dot-loader,
.notification-loading-logo,
.empty-state > i.fa-spinner,
.empty-state i.fa-spinner,
.live-mini-empty i.fa-spinner,
.loading-state i.fa-spinner,
.table-loading i.fa-spinner,
.students-loading i.fa-spinner,
.admin-loading i.fa-spinner{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
    display:inline-block !important;
    position:relative !important;
    border-radius:50% !important;
    box-sizing:border-box !important;
    margin:0 auto 18px !important;
    background:none !important;
    border:5px solid #f3f4f6 !important;
    border-top-color:#374151 !important;
    border-right-color:#cbd5e1 !important;
    color:transparent !important;
    font-size:0 !important;
    line-height:0 !important;
    animation:pgmoLiveRingSpin .78s linear infinite !important;
    pointer-events:none !important;
}

.pgmo-live-ring-loader i,
.notification-loading-logo i{
    display:none !important;
}

.pgmo-live-ring-loader::before,
.pgmo-live-ring-loader::after,
.pgmo-dot-loader::before,
.pgmo-dot-loader::after,
.notification-loading-logo::before,
.notification-loading-logo::after,
.empty-state > i.fa-spinner::before,
.empty-state > i.fa-spinner::after,
.empty-state i.fa-spinner::before,
.empty-state i.fa-spinner::after,
.live-mini-empty i.fa-spinner::before,
.live-mini-empty i.fa-spinner::after,
.loading-state i.fa-spinner::before,
.loading-state i.fa-spinner::after,
.table-loading i.fa-spinner::before,
.table-loading i.fa-spinner::after,
.students-loading i.fa-spinner::before,
.students-loading i.fa-spinner::after,
.admin-loading i.fa-spinner::before,
.admin-loading i.fa-spinner::after{
    content:"" !important;
    display:none !important;
}

@keyframes pgmoLiveRingSpin{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
}

@media (prefers-reduced-motion: reduce){
    .pgmo-live-ring-loader,
    .pgmo-dot-loader,
    .notification-loading-logo,
    .empty-state > i.fa-spinner,
    .empty-state i.fa-spinner,
    .live-mini-empty i.fa-spinner,
    .loading-state i.fa-spinner,
    .table-loading i.fa-spinner,
    .students-loading i.fa-spinner,
    .admin-loading i.fa-spinner{
        animation:none !important;
    }
}


/* PGMO PATCH 2026-07-02: admin dashboard completed rows and pill status badges */
.badge-soft,
.badge-status {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 74px !important;
    padding: 7px 13px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    border: 1px solid transparent !important;
}

.badge-status.badge-ongoing,
.badge-soft.badge-ongoing {
    background: #f3f4f6 !important;
    color: #374151 !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.10) !important;
}

.badge-status.badge-completed,
.badge-soft.badge-completed,
.badge-soft.badge-eligible,
.badge-status.badge-eligible {
    background: #d1d5db !important;
    color: #065f46 !important;
    border-color: #4ade80 !important;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.16) !important;
}

.badge-status.badge-pending,
.badge-soft.badge-pending {
    background: #fef3c7 !important;
    color: #92400e !important;
    border-color: #fde68a !important;
}

.table tbody tr.pgmo-completed-student-row > td {
    background: #ecfdf5 !important;
}

.table tbody tr.pgmo-completed-student-row {
    border-left: 6px solid #4b5563 !important;
    box-shadow: inset 0 0 0 9999px rgba(107, 114, 128, 0.035) !important;
}

.table-hover tbody tr.pgmo-completed-student-row:hover > td {
    background: #f3f4f6 !important;
}

.table tbody tr.pgmo-completed-student-row td:first-child {
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
}

.table tbody tr.pgmo-completed-student-row td:last-child {
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}


/* PGMO PATCH 2026-07-02: restore LIVE rotating ring loaders after deployment clean
   This is visual only. It does not create buttons, links, overlays, or click targets. */
.pgmo-live-ring-loader,
.pgmo-dot-loader,
.notification-loading-logo,
.empty-state > i.fa-spinner,
.empty-state i.fa-spinner,
.live-mini-empty i.fa-spinner,
.loading-state i.fa-spinner,
.table-loading i.fa-spinner,
.students-loading i.fa-spinner,
.admin-loading i.fa-spinner,
.fa-spinner.fa-spin{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
    display:inline-block !important;
    position:relative !important;
    border-radius:50% !important;
    box-sizing:border-box !important;
    margin:0 auto 18px !important;
    background:none !important;
    border:5px solid #f3f4f6 !important;
    border-top-color:#374151 !important;
    border-right-color:#cbd5e1 !important;
    color:transparent !important;
    font-size:0 !important;
    line-height:0 !important;
    transform-origin:center center !important;
    animation:pgmoLiveRingSpinRestored .75s linear infinite !important;
    pointer-events:none !important;
}

.pgmo-live-ring-loader::before,
.pgmo-live-ring-loader::after,
.pgmo-dot-loader::before,
.pgmo-dot-loader::after,
.notification-loading-logo::before,
.notification-loading-logo::after,
.empty-state > i.fa-spinner::before,
.empty-state > i.fa-spinner::after,
.empty-state i.fa-spinner::before,
.empty-state i.fa-spinner::after,
.live-mini-empty i.fa-spinner::before,
.live-mini-empty i.fa-spinner::after,
.loading-state i.fa-spinner::before,
.loading-state i.fa-spinner::after,
.table-loading i.fa-spinner::before,
.table-loading i.fa-spinner::after,
.students-loading i.fa-spinner::before,
.students-loading i.fa-spinner::after,
.admin-loading i.fa-spinner::before,
.admin-loading i.fa-spinner::after,
.fa-spinner.fa-spin::before,
.fa-spinner.fa-spin::after{
    content:"" !important;
    display:none !important;
}

@keyframes pgmoLiveRingSpinRestored{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}

@media (prefers-reduced-motion: reduce){
    .pgmo-live-ring-loader,
    .pgmo-dot-loader,
    .notification-loading-logo,
    .empty-state > i.fa-spinner,
    .empty-state i.fa-spinner,
    .live-mini-empty i.fa-spinner,
    .loading-state i.fa-spinner,
    .table-loading i.fa-spinner,
    .students-loading i.fa-spinner,
    .admin-loading i.fa-spinner,
    .fa-spinner.fa-spin{
        animation:pgmoLiveRingSpinRestored 1.15s linear infinite !important;
    }
}


/* PGMO FIX 2026-07-03: certificate Given/Compound/Philippines same font size */
.liceo-cert-template .cert-given-line,
.liceo-cert-template .cert-location-line,
.liceo-cert-template .cert-country-line,
.certificate-export-host .cert-given-line,
.certificate-export-host .cert-location-line,
.certificate-export-host .cert-country-line,
.certificate-pdf-export .cert-given-line,
.certificate-pdf-export .cert-location-line,
.certificate-pdf-export .cert-country-line{
    font-family:"Times New Roman", Times, serif !important;
    font-size:19px !important;
    line-height:1.14 !important;
    font-weight:400 !important;
    text-align:center !important;
}

/* PGMO PATCH 2026-07-03: grayscale theme transition (admin portal)
   Visible theme only. No invisible buttons or overlay controls. */
:root{
    --dark:#111827;
    --dark-2:#1f2937;
    --green:#374151;
    --green-dark:#111827;
    --green-light:#d1d5db;
    --green-accent:#9ca3af;
    --soft-green:#f3f4f6;
    --light:#f6f7f8;
    --border:#d1d5db;
}

.login-body,
.logout-body{
    background:
        radial-gradient(circle at 88% 0%,rgba(255,255,255,.16),transparent 24%),
        linear-gradient(135deg,#050505 0%,#1f2937 52%,#f3f4f6 100%) !important;
}

.login-left,
.login-hero,
.admin-sidebar,
.sidebar,
.admin-hero,
.dashboard-hero,
.page-hero{
    background:
        linear-gradient(135deg,rgba(0,0,0,.96),rgba(31,41,55,.90)),
        linear-gradient(135deg,#000000,#6b7280,#f9fafb) !important;
}

.btn-primary,
.primary-btn,
.admin-btn-primary,
button[type="submit"].btn-primary{
    background:linear-gradient(135deg,#111827,#4b5563) !important;
    border-color:#111827 !important;
    color:#ffffff !important;
    box-shadow:0 12px 26px rgba(17,24,39,.20) !important;
}

.btn-primary:hover,
.primary-btn:hover,
.admin-btn-primary:hover{
    background:linear-gradient(135deg,#000000,#374151) !important;
}

.btn-outline-success,
.outline-green-btn{
    color:#111827 !important;
    background:#ffffff !important;
    border-color:#d1d5db !important;
}

.btn-outline-success:hover,
.outline-green-btn:hover{
    color:#ffffff !important;
    background:#374151 !important;
    border-color:#374151 !important;
}

.sidebar-link.active,
.sidebar-link:hover,
.admin-nav a.active,
.admin-nav a:hover,
.nav-link.active,
.nav-link:hover{
    background:rgba(255,255,255,.16) !important;
    color:#ffffff !important;
}

.metric-card,
.dash-card,
.report-card,
.student-row-completed,
.dashboard-row-completed{
    border-color:#d1d5db !important;
}

.status-pill,
.badge-status,
.certificate-status.eligible,
.status-eligible{
    border-radius:999px !important;
}


/* PGMO PATCH 2026-07-03: black-to-deep-blue gradient theme
   Visible colors only. No invisible buttons or overlays. */
:root{
    --pgmo-gradient-dark:#04050a;
    --pgmo-gradient-mid:#0b1028;
    --pgmo-gradient-blue:#1f1a72;
    --pgmo-action-green:#16a34a;
    --pgmo-action-green-dark:#15803d;
    --pgmo-action-green-soft:#dcfce7;
}

.login-body,
.logout-body{
    background:
        radial-gradient(circle at 82% 20%, rgba(79,70,229,.32), transparent 34%),
        linear-gradient(135deg, var(--pgmo-gradient-dark) 0%, var(--pgmo-gradient-mid) 48%, var(--pgmo-gradient-blue) 100%) !important;
}

.login-left,
.login-hero,
.admin-sidebar,
.sidebar,
.admin-hero,
.dashboard-hero,
.page-hero{
    background:
        radial-gradient(circle at 92% 12%, rgba(79,70,229,.34), transparent 30%),
        linear-gradient(135deg, var(--pgmo-gradient-dark) 0%, var(--pgmo-gradient-mid) 54%, var(--pgmo-gradient-blue) 100%) !important;
}

.sidebar a,
.admin-sidebar a,
.admin-nav a,
.sidebar-link,
.nav-link{
    color:#f8fafc !important;
}

.sidebar a.active,
.sidebar a:hover,
.sidebar-link.active,
.sidebar-link:hover,
.admin-nav a.active,
.admin-nav a:hover,
.nav-link.active,
.nav-link:hover{
    background:linear-gradient(135deg, rgba(255,255,255,.20), rgba(79,70,229,.34)) !important;
    color:#ffffff !important;
    border-left-color:#ffffff !important;
}

/* Keep action buttons green for easy spotting */
.btn-primary,
.primary-btn,
.admin-btn-primary,
button[type="submit"].btn-primary,
.btn-success,
.action-btn,
.generate-btn,
.certificate-generate-btn,
button[onclick*="generate"],
button[onclick*="Generate"],
button[onclick*="render"].btn-primary,
button[onclick*="download"].btn-primary{
    background:linear-gradient(135deg, var(--pgmo-action-green), var(--pgmo-action-green-dark)) !important;
    border-color:var(--pgmo-action-green-dark) !important;
    color:#ffffff !important;
    box-shadow:0 12px 26px rgba(22,163,74,.22) !important;
}

.btn-primary:hover,
.primary-btn:hover,
.admin-btn-primary:hover,
.btn-success:hover,
.action-btn:hover,
.generate-btn:hover,
.certificate-generate-btn:hover,
button[onclick*="generate"]:hover,
button[onclick*="Generate"]:hover,
button[onclick*="render"].btn-primary:hover,
button[onclick*="download"].btn-primary:hover{
    background:linear-gradient(135deg, #22c55e, #166534) !important;
    border-color:#166534 !important;
}

.btn-outline-success,
.outline-green-btn,
.btn-outline-primary{
    color:var(--pgmo-action-green-dark) !important;
    background:#ffffff !important;
    border-color:var(--pgmo-action-green) !important;
}

.btn-outline-success:hover,
.outline-green-btn:hover,
.btn-outline-primary:hover{
    color:#ffffff !important;
    background:var(--pgmo-action-green) !important;
    border-color:var(--pgmo-action-green-dark) !important;
}

.badge-soft.badge-eligible,
.badge-status.badge-eligible,
.certificate-status.eligible,
.status-eligible,
.eligible,
.badge-eligible{
    background:var(--pgmo-action-green-soft) !important;
    color:#166534 !important;
    border:1px solid #86efac !important;
    border-radius:999px !important;
    font-weight:900 !important;
}

/* PGMO PATCH 2026-07-03: charcoal gray gradient + readable status pills
   Uses the attached black-to-gray gradient. Action/status buttons stay color-coded.
   No invisible buttons or overlays are added here. */
:root{
    --pgmo-gradient-dark:#020202;
    --pgmo-gradient-mid:#181818;
    --pgmo-gradient-end:#474545;
    --pgmo-gradient-soft:#2b2b2b;
    --pgmo-action-green:#16a34a;
    --pgmo-action-green-dark:#15803d;
    --pgmo-action-green-soft:#dcfce7;
    --pgmo-warning:#f59e0b;
    --pgmo-warning-dark:#92400e;
    --pgmo-warning-soft:#fef3c7;
    --pgmo-danger:#dc2626;
    --pgmo-danger-dark:#991b1b;
    --pgmo-danger-soft:#fee2e2;
}

.login-body,
.logout-body,
.auth-page{
    background:
        radial-gradient(circle at 82% 20%, rgba(255,255,255,.10), transparent 34%),
        linear-gradient(135deg, var(--pgmo-gradient-dark) 0%, var(--pgmo-gradient-mid) 48%, var(--pgmo-gradient-end) 100%) !important;
}

.login-left,
.login-hero,
.auth-hero,
.admin-sidebar,
.sidebar,
.admin-hero,
.dashboard-hero,
.page-hero,
.student-sidebar,
.mobile-sidebar-header,
.sidebar-brand,
.student-hero,
.portal-sidebar{
    background:
        radial-gradient(circle at 90% 10%, rgba(255,255,255,.12), transparent 26%),
        linear-gradient(135deg, var(--pgmo-gradient-dark) 0%, var(--pgmo-gradient-mid) 58%, var(--pgmo-gradient-end) 100%) !important;
}

.sidebar a,
.admin-sidebar a,
.admin-nav a,
.sidebar-link,
.nav-link,
.portal-menu a,
.student-nav a{
    color:#f8fafc !important;
}

.sidebar a.active,
.sidebar a:hover,
.sidebar-link.active,
.sidebar-link:hover,
.admin-nav a.active,
.admin-nav a:hover,
.nav-link.active,
.nav-link:hover,
.portal-menu a.active,
.portal-menu a:hover,
.student-nav a.active,
.student-nav a:hover{
    background:
        linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.08)) !important;
    color:#ffffff !important;
    border-left-color:#ffffff !important;
}

.student-mini,
.admin-mini,
.sidebar-profile,
.student-sidebar .profile-mini,
.portal-profile-card{
    background:rgba(255,255,255,.13) !important;
    border:1px solid rgba(255,255,255,.12) !important;
}

/* Main action buttons stay green for quick recognition */
.btn-primary,
.primary-btn,
.admin-btn-primary,
button[type="submit"].btn-primary,
.btn-success,
.action-btn,
.generate-btn,
.certificate-generate-btn,
.main-btn,
.upload-submit-btn,
.student-submit-btn,
.section-btn,
button[onclick*="generate"],
button[onclick*="Generate"],
button[onclick*="render"].btn-primary,
button[onclick*="download"].btn-primary{
    background:linear-gradient(135deg, var(--pgmo-action-green), var(--pgmo-action-green-dark)) !important;
    border-color:var(--pgmo-action-green-dark) !important;
    color:#ffffff !important;
    box-shadow:0 12px 26px rgba(22,163,74,.22) !important;
}

.btn-primary:hover,
.primary-btn:hover,
.admin-btn-primary:hover,
.btn-success:hover,
.action-btn:hover,
.generate-btn:hover,
.certificate-generate-btn:hover,
.main-btn:hover,
.upload-submit-btn:hover,
.student-submit-btn:hover,
.section-btn:hover,
button[onclick*="generate"]:hover,
button[onclick*="Generate"]:hover,
button[onclick*="render"].btn-primary:hover,
button[onclick*="download"].btn-primary:hover{
    background:linear-gradient(135deg, #22c55e, #166534) !important;
    border-color:#166534 !important;
    color:#ffffff !important;
}

.btn-outline-success,
.outline-green-btn,
.btn-outline-primary{
    color:var(--pgmo-action-green-dark) !important;
    background:#ffffff !important;
    border-color:var(--pgmo-action-green) !important;
}

.btn-outline-success:hover,
.outline-green-btn:hover,
.btn-outline-primary:hover{
    color:#ffffff !important;
    background:var(--pgmo-action-green) !important;
    border-color:var(--pgmo-action-green-dark) !important;
}

/* Base badge/pill shape. Prevents highlighted-text look. */
.badge-soft,
.badge-status,
.status-pill,
.certificate-status,
.status-eligible,
.requirement-status-pill,
.clean-status,
.pgmo-req-badge,
.pgmo-completion-pill,
.id-request-status-box,
.student-document-lock{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:max-content !important;
    min-width:auto !important;
    padding:7px 13px !important;
    border-radius:999px !important;
    font-weight:900 !important;
    line-height:1 !important;
    text-decoration:none !important;
    box-shadow:0 8px 18px rgba(15,23,42,.06) !important;
    white-space:nowrap !important;
}

/* Green: ready / eligible / approved / completed / success */
.badge-approved,
.badge-status.badge-approved,
.badge-soft.badge-approved,
.badge-soft.badge-eligible,
.badge-status.badge-eligible,
.certificate-status.eligible,
.status-eligible,
.eligible,
.badge-eligible,
.status-approved,
.status-ready,
.status-completed,
.badge-ready,
.badge-completed,
.badge-status.badge-completed,
.badge-soft.badge-completed,
.badge-status.badge-ready,
.badge-soft.badge-ready,
.requirement-status-pill.approved,
.requirement-status-pill.completed,
.clean-status.approved,
.clean-status.ready,
.clean-status.completed,
.pgmo-req-badge.approved,
.pgmo-completion-pill.completed,
.id-request-status-box.approved,
.id-request-status-box.allowed,
.student-document-lock.approved{
    background:var(--pgmo-action-green-soft) !important;
    color:#166534 !important;
    border:1px solid #86efac !important;
}

/* Yellow: pending / ongoing / submitted / locked / review */
.badge-pending,
.badge-status.badge-pending,
.badge-soft.badge-pending,
.badge-ongoing,
.badge-status.badge-ongoing,
.badge-soft.badge-ongoing,
.status-pending,
.status-ongoing,
.status-submitted,
.status-locked,
.badge-submitted,
.badge-locked,
.badge-status.badge-submitted,
.badge-soft.badge-submitted,
.badge-status.badge-locked,
.badge-soft.badge-locked,
.requirement-status-pill.pending,
.requirement-status-pill.ongoing,
.clean-status.pending,
.clean-status.ongoing,
.pgmo-req-badge.pending,
.pgmo-completion-pill.ongoing,
.pgmo-completion-pill.not-completed,
.id-request-status-box.pending,
.student-document-lock.submitted{
    background:var(--pgmo-warning-soft) !important;
    color:var(--pgmo-warning-dark) !important;
    border:1px solid #fbbf24 !important;
}

/* Red: returned / rejected / missing / denied */
.badge-returned,
.badge-rejected,
.badge-missing,
.badge-denied,
.badge-status.badge-returned,
.badge-status.badge-rejected,
.badge-status.badge-missing,
.badge-soft.badge-returned,
.badge-soft.badge-rejected,
.badge-soft.badge-missing,
.status-returned,
.status-rejected,
.status-missing,
.status-denied,
.requirement-status-pill.returned,
.requirement-status-pill.missing,
.clean-status.returned,
.clean-status.missing,
.pgmo-req-badge.returned,
.pgmo-req-badge.missing,
.id-request-status-box.rejected,
.id-request-status-box.returned{
    background:var(--pgmo-danger-soft) !important;
    color:var(--pgmo-danger-dark) !important;
    border:1px solid #fca5a5 !important;
}


/* PGMO PATCH 2026-07-03: admin login uses the cleaner student auth colors
   Visible styling only. No invisible buttons or overlays. */
body.login-body[data-page="login"]{
    min-height:100vh !important;
    background:
        radial-gradient(circle at 88% 0%, rgba(255,255,255,.14), transparent 24%),
        linear-gradient(135deg, #020202 0%, #181818 50%, #474545 100%) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:26px !important;
    overflow:auto !important;
}

body.login-body[data-page="login"] .login-layout,
body.login-body[data-page="login"] .login-card{
    width:100% !important;
    max-width:1180px !important;
    min-height:700px !important;
    display:grid !important;
    grid-template-columns:390px 1fr !important;
    border-radius:22px !important;
    overflow:hidden !important;
    background:#ffffff !important;
    box-shadow:0 30px 80px rgba(0,0,0,.42) !important;
}

body.login-body[data-page="login"] .login-panel,
body.login-body[data-page="login"] .login-right{
    background:#ffffff !important;
    border-right:1px solid #e5e7eb !important;
    padding:70px 46px !important;
}

body.login-body[data-page="login"] .login-visual,
body.login-body[data-page="login"] .login-left{
    position:relative !important;
    overflow:hidden !important;
    color:#ffffff !important;
    background:
        linear-gradient(135deg, rgba(0,0,0,.92), rgba(31,41,55,.76)),
        radial-gradient(circle at 82% 18%, rgba(255,255,255,.18), transparent 34%),
        linear-gradient(135deg, #020202 0%, #181818 50%, #474545 100%) !important;
}

body.login-body[data-page="login"] .login-visual::before,
body.login-body[data-page="login"] .login-left::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    background:
        radial-gradient(circle at 40% 45%, rgba(255,255,255,.10), transparent 30%),
        linear-gradient(130deg, transparent 0 55%, rgba(255,255,255,.13) 55.3% 100%) !important;
    pointer-events:none !important;
}

body.login-body[data-page="login"] .visual-content,
body.login-body[data-page="login"] .login-left > *{
    position:relative !important;
    z-index:2 !important;
}

body.login-body[data-page="login"] .login-button,
body.login-body[data-page="login"] .btn-primary{
    background:linear-gradient(135deg, #16a34a 0%, #15803d 48%, #14532d 100%) !important;
    color:#ffffff !important;
    border:0 !important;
    box-shadow:0 16px 34px rgba(22,163,74,.24) !important;
}

body.login-body[data-page="login"] .login-button:hover,
body.login-body[data-page="login"] .btn-primary:hover{
    background:linear-gradient(135deg, #22c55e 0%, #166534 100%) !important;
    transform:translateY(-1px) !important;
}

@media (max-width: 900px){
    body.login-body[data-page="login"]{
        padding:0 !important;
    }

    body.login-body[data-page="login"] .login-layout,
    body.login-body[data-page="login"] .login-card{
        min-height:100vh !important;
        border-radius:0 !important;
        grid-template-columns:1fr !important;
        max-width:none !important;
    }

    body.login-body[data-page="login"] .login-visual,
    body.login-body[data-page="login"] .login-left{
        display:none !important;
    }

    body.login-body[data-page="login"] .login-panel,
    body.login-body[data-page="login"] .login-right{
        border-right:0 !important;
        padding:34px 22px !important;
    }
}

/* PGMO PATCH 2026-07-03: restore old admin login layout, keep black/gray palette
   Reverts the centered-card look. No invisible buttons or overlays. */
body.login-body[data-page="login"]{
    min-height:100vh !important;
    background:#ffffff !important;
    display:flex !important;
    align-items:stretch !important;
    justify-content:center !important;
    padding:0 !important;
    overflow:hidden !important;
}

body.login-body[data-page="login"] .login-layout,
body.login-body[data-page="login"] .login-card{
    width:100% !important;
    max-width:none !important;
    min-height:100vh !important;
    display:grid !important;
    grid-template-columns:390px 1fr !important;
    border-radius:0 !important;
    overflow:hidden !important;
    background:#ffffff !important;
    box-shadow:none !important;
}

body.login-body[data-page="login"] .login-panel,
body.login-body[data-page="login"] .login-right{
    order:1 !important;
    background:#ffffff !important;
    border-right:1px solid #e5e7eb !important;
    padding:70px 46px !important;
}

body.login-body[data-page="login"] .login-visual,
body.login-body[data-page="login"] .login-left{
    order:2 !important;
    position:relative !important;
    overflow:hidden !important;
    color:#ffffff !important;
    background:
        linear-gradient(135deg, rgba(0,0,0,.90), rgba(31,31,31,.68)),
        radial-gradient(circle at 82% 18%, rgba(255,255,255,.16), transparent 34%),
        linear-gradient(135deg, #000000 0%, #181818 48%, #474545 100%) !important;
}

body.login-body[data-page="login"] .login-visual::before,
body.login-body[data-page="login"] .login-left::before{
    content:"" !important;
    position:absolute !important;
    width:900px !important;
    height:900px !important;
    inset:auto !important;
    top:50% !important;
    left:50% !important;
    transform:translate(-50%, -50%) !important;
    background-image:url("../img/pgmoseal1.png") !important;
    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:contain !important;
    opacity:.36 !important;
    filter:grayscale(18%) blur(.25px) !important;
    pointer-events:none !important;
    z-index:0 !important;
}

body.login-body[data-page="login"] .login-visual::after,
body.login-body[data-page="login"] .login-left::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    background:
        linear-gradient(125deg, transparent 0 24%, rgba(255,255,255,.18) 24.4% 25.2%, transparent 25.6% 100%),
        linear-gradient(145deg, transparent 0 46%, rgba(255,255,255,.16) 46.4% 47.2%, transparent 47.6% 100%),
        linear-gradient(35deg, transparent 0 66%, rgba(255,255,255,.14) 66.4% 67.2%, transparent 67.6% 100%) !important;
    opacity:.75 !important;
    pointer-events:none !important;
    z-index:0 !important;
}

body.login-body[data-page="login"] .visual-content,
body.login-body[data-page="login"] .login-left > *{
    position:relative !important;
    z-index:2 !important;
}

body.login-body[data-page="login"] .login-button,
body.login-body[data-page="login"] .btn-primary{
    background:linear-gradient(135deg, #111827 0%, #374151 100%) !important;
    color:#ffffff !important;
    border:0 !important;
    box-shadow:0 10px 22px rgba(17,24,39,.22) !important;
}

body.login-body[data-page="login"] .login-button:hover,
body.login-body[data-page="login"] .btn-primary:hover{
    background:linear-gradient(135deg, #000000 0%, #474545 100%) !important;
    transform:translateY(-1px) !important;
}

@media (max-width: 900px){
    body.login-body[data-page="login"]{
        overflow:auto !important;
    }

    body.login-body[data-page="login"] .login-layout,
    body.login-body[data-page="login"] .login-card{
        display:flex !important;
        flex-direction:column !important;
        min-height:100vh !important;
    }

    body.login-body[data-page="login"] .login-panel,
    body.login-body[data-page="login"] .login-right{
        order:2 !important;
        padding:34px 24px !important;
        border-right:0 !important;
    }

    body.login-body[data-page="login"] .login-visual,
    body.login-body[data-page="login"] .login-left{
        order:1 !important;
        min-height:220px !important;
        padding:32px 24px !important;
    }
}


/* PGMO PATCH 2026-07-03: admin student view profile picture styles */
.pgmo-student-view-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.pgmo-student-view-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 20px;
    background: linear-gradient(135deg, #050505 0%, #252525 48%, #f4f4f4 170%);
    color: #fff;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.14);
}

.pgmo-student-view-photo-frame {
    width: 86px;
    height: 86px;
    border-radius: 24px;
    overflow: hidden;
    flex: 0 0 auto;
    background: linear-gradient(135deg, #111827, #64748b);
    border: 3px solid rgba(255, 255, 255, 0.9);
    display: grid;
    place-items: center;
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.24);
}

.pgmo-student-view-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pgmo-student-view-photo-frame span {
    display: none;
    color: #fff;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.pgmo-student-view-photo-frame.has-fallback span {
    display: block;
}

.pgmo-student-view-title h4 {
    margin: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 900;
}

.pgmo-student-view-title p {
    margin: 6px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 700;
}

.pgmo-student-view-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.pgmo-student-view-grid > div {
    padding: 13px 14px;
    border-radius: 16px;
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.24);
}

.pgmo-student-view-grid span {
    display: block;
    margin-bottom: 4px;
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pgmo-student-view-grid strong {
    color: #0f172a;
    font-size: 14px;
    line-height: 1.35;
    word-break: break-word;
}

@media (max-width: 640px) {
    .pgmo-student-view-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .pgmo-student-view-grid {
        grid-template-columns: 1fr;
    }
}


/* PGMO DOCUMENT PREVIEW MODAL */
.pgmo-document-preview-open {
    overflow: hidden;
}

.pgmo-document-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.pgmo-document-preview-modal.show {
    display: flex;
}

.pgmo-document-preview-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(4px);
}

.pgmo-document-preview-card {
    position: relative;
    z-index: 1;
    width: min(1100px, 96vw);
    height: min(760px, 92vh);
    background: #ffffff;
    border-radius: 22px;
    border: 1px solid rgba(21, 128, 61, 0.18);
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pgmo-document-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    padding: 18px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(135deg, #f8fafc, #ecfdf5);
}

.pgmo-document-preview-header h3 {
    margin: 0;
    color: #111827;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.2;
}

.pgmo-document-preview-header p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 13px;
}

.pgmo-document-preview-close {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    color: #166534;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}

.pgmo-document-preview-body {
    flex: 1;
    background: #f8fafc;
    padding: 14px;
    min-height: 0;
    overflow: auto;
}

.pgmo-document-frame {
    width: 100%;
    height: 100%;
    min-height: 520px;
    border: 0;
    border-radius: 14px;
    background: #ffffff;
}

.pgmo-document-image-wrap {
    width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.pgmo-document-image-wrap img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
    background: #ffffff;
}

.pgmo-document-preview-empty {
    height: 100%;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #64748b;
    background: #ffffff;
    border-radius: 16px;
    border: 1px dashed #cbd5e1;
    padding: 28px;
}

.pgmo-document-preview-empty i {
    font-size: 46px;
    color: #15803d;
    margin-bottom: 12px;
}

.pgmo-document-preview-empty h4 {
    color: #111827;
    font-weight: 900;
    margin-bottom: 6px;
}

.pgmo-document-preview-note {
    margin: 10px 2px 0;
    color: #64748b;
    font-size: 13px;
}

.pgmo-document-preview-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
}

@media (max-width: 680px) {
    .pgmo-document-preview-modal {
        padding: 10px;
    }

    .pgmo-document-preview-card {
        width: 100%;
        height: 92vh;
        border-radius: 16px;
    }

    .pgmo-document-preview-header {
        padding: 14px;
    }

    .pgmo-document-preview-header h3 {
        font-size: 17px;
    }

    .pgmo-document-preview-body {
        padding: 10px;
    }

    .pgmo-document-frame {
        min-height: 460px;
    }

    .pgmo-document-preview-footer {
        padding: 12px 14px;
        flex-wrap: wrap;
    }
}

/* PGMO ADMIN IMPROVEMENTS: dashboard alerts, activity log, backup/export, document preview */
.pgmo-dashboard-alert-panel{border-left:5px solid #0f5132;}
.pgmo-dashboard-alerts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.pgmo-alert-card{display:flex;gap:14px;align-items:flex-start;text-decoration:none;background:#fff;border:1px solid #dbe7df;border-radius:16px;padding:16px;color:#1f2937;box-shadow:0 10px 24px rgba(15,23,42,.06);transition:.2s ease;}
.pgmo-alert-card:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(15,23,42,.1);color:#111827;}
.pgmo-alert-icon{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:#ecfdf5;color:#0f7a35;flex-shrink:0;font-size:18px;}
.pgmo-alert-card strong{display:block;font-size:26px;font-weight:950;line-height:1;color:#111827;}
.pgmo-alert-card span{display:block;font-weight:900;margin-top:4px;}
.pgmo-alert-card small{display:block;color:#64748b;margin-top:3px;line-height:1.35;}
.pgmo-alert-warning .pgmo-alert-icon{background:#fff7ed;color:#f59e0b;}
.pgmo-alert-danger .pgmo-alert-icon{background:#fee2e2;color:#dc2626;}
.pgmo-alert-primary .pgmo-alert-icon{background:#eff6ff;color:#2563eb;}
.pgmo-alert-muted .pgmo-alert-icon{background:#f3f4f6;color:#475569;}
.pgmo-alert-success .pgmo-alert-icon{background:#ecfdf5;color:#15803d;}
.pgmo-alert-loading,.pgmo-alert-empty{grid-column:1/-1;display:flex;gap:10px;align-items:center;justify-content:center;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:16px;padding:22px;color:#64748b;font-weight:800;}
.pgmo-recent-activity-list{display:flex;flex-direction:column;gap:10px;}
.pgmo-activity-row{display:flex;gap:10px;align-items:flex-start;border-bottom:1px solid #e5e7eb;padding-bottom:10px;}
.pgmo-activity-row:last-child{border-bottom:0;padding-bottom:0;}
.pgmo-activity-dot{width:10px;height:10px;border-radius:50%;background:#0f7a35;margin-top:7px;flex-shrink:0;}
.pgmo-activity-row strong{display:block;font-size:13px;color:#111827;}
.pgmo-activity-row span{display:block;font-size:13px;color:#334155;}
.pgmo-activity-row small{display:block;color:#64748b;font-size:11px;margin-top:2px;}
.pgmo-activity-empty{display:flex;gap:8px;align-items:center;color:#64748b;background:#f8fafc;border-radius:14px;padding:14px;font-weight:800;}
.pgmo-backup-card i.fa-file-code,.pgmo-backup-card i.fa-file-excel{width:58px;height:58px;border-radius:18px;background:#ecfdf5;color:#0f7a35;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:14px;}
.pgmo-backup-card h5{font-weight:950;color:#111827;margin-bottom:6px;}
.pgmo-backup-card p{color:#64748b;line-height:1.5;}
.pgmo-backup-table-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px;}
.pgmo-backup-table-chip{display:flex;gap:10px;align-items:center;background:#f8fafc;border:1px solid #dbe7df;border-radius:14px;padding:14px;}
.pgmo-backup-table-chip i{width:36px;height:36px;border-radius:12px;background:#0f7a35;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.pgmo-backup-table-chip strong{display:block;color:#111827;font-size:13px;}
.pgmo-backup-table-chip span{display:block;color:#64748b;font-size:12px;word-break:break-word;}
.pgmo-document-preview-modal .modal-dialog{max-width:min(1120px,96vw);}
.pgmo-document-preview-body{min-height:62vh;background:#f8fafc;border:1px solid #e5e7eb;border-radius:14px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:10px;}
.pgmo-document-preview-frame{width:100%;height:68vh;border:0;border-radius:10px;background:#fff;}
.pgmo-document-preview-image{max-width:100%;max-height:68vh;object-fit:contain;border-radius:10px;background:#fff;}
.pgmo-document-preview-fallback{text-align:center;color:#64748b;padding:36px;}
.pgmo-document-preview-fallback i{font-size:58px;color:#0f7a35;margin-bottom:12px;}
.pgmo-document-preview-fallback h5{font-weight:900;color:#111827;}
@media(max-width:1100px){.pgmo-dashboard-alerts,.pgmo-backup-table-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:700px){.pgmo-dashboard-alerts,.pgmo-backup-table-grid{grid-template-columns:1fr;}.pgmo-alert-card{padding:14px}.pgmo-document-preview-frame{height:62vh;}}

/* PGMO PATCH 2026-07-13: clearer admin student profile photo viewer */
#studentViewModal .modal-dialog{
    max-width: 980px;
}

.pgmo-student-view-head.pgmo-student-view-head-clear-photo{
    align-items: stretch;
    gap: 22px;
    padding: 22px;
}

.pgmo-student-view-photo-column{
    width: 180px;
    flex: 0 0 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.pgmo-student-view-photo-frame.pgmo-student-view-photo-clear{
    width: 150px;
    height: 150px;
    border-radius: 26px;
    background: linear-gradient(135deg, #111827, #4b5563);
    border: 4px solid rgba(255,255,255,.95);
    box-shadow: 0 18px 38px rgba(0,0,0,.32);
}

button.pgmo-student-view-photo-frame{
    appearance: none;
    border-style: solid;
    padding: 0;
    cursor: zoom-in;
}

button.pgmo-student-view-photo-frame:focus{
    outline: 3px solid rgba(255,255,255,.85);
    outline-offset: 4px;
}

.pgmo-student-view-photo-frame.pgmo-student-view-photo-clear img{
    object-fit: cover;
    object-position: center top;
}

.pgmo-student-view-photo-frame.pgmo-student-view-photo-clear span{
    font-size: 40px;
}

.pgmo-student-photo-hint{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.9);
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

.pgmo-student-view-main-info{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pgmo-student-view-main-info h4{
    margin: 0;
    color: #fff;
    font-size: 24px;
    font-weight: 950;
    line-height: 1.15;
}

.pgmo-student-view-main-info p{
    margin: 8px 0 0;
    color: rgba(255,255,255,.82);
    font-weight: 750;
}

.pgmo-student-view-main-info .pgmo-student-photo-email{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: #e5e7eb;
    font-weight: 800;
    word-break: break-word;
}

.pgmo-student-photo-lightbox{
    position: fixed;
    inset: 0;
    z-index: 1085;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.pgmo-student-photo-lightbox.show{
    display: flex;
}

.pgmo-student-photo-lightbox-backdrop{
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .84);
    backdrop-filter: blur(6px);
}

.pgmo-student-photo-lightbox-card{
    position: relative;
    z-index: 1;
    width: min(560px, 94vw);
    background: #ffffff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 28px 80px rgba(0,0,0,.36);
}

.pgmo-student-photo-lightbox-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;
}

.pgmo-student-photo-lightbox-head strong{
    color: #111827;
    font-size: 15px;
    font-weight: 900;
}

.pgmo-student-photo-lightbox-close{
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #f3f4f6;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pgmo-student-photo-lightbox-body{
    padding: 18px;
    background: #f8fafc;
}

.pgmo-student-photo-lightbox-body img{
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
    display: block;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
}

@media (max-width: 700px){
    .pgmo-student-view-head.pgmo-student-view-head-clear-photo{
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .pgmo-student-view-photo-column{
        width: 100%;
        flex-basis: auto;
    }

    .pgmo-student-view-main-info .pgmo-student-photo-email{
        justify-content: center;
    }
}

/* PGMO DASHBOARD ALERT TARGET FILTER NOTICE */
.pgmo-dashboard-filter-notice{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    background:#f8fafc;
    border:1px solid #d1d5db;
    border-left:5px solid #0f7a35;
    border-radius:14px;
    padding:14px 16px;
    margin-bottom:18px;
    box-shadow:0 10px 24px rgba(15,23,42,.06);
}
.pgmo-dashboard-filter-notice strong{
    display:block;
    color:#111827;
    font-weight:900;
    margin-bottom:3px;
}
.pgmo-dashboard-filter-notice span{
    color:#64748b;
    font-size:14px;
}
.pgmo-dashboard-alerts .pgmo-alert-card{
    cursor:pointer;
}
.pgmo-dashboard-alerts .pgmo-alert-card:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 32px rgba(15,23,42,.12);
}
@media(max-width:650px){
    .pgmo-dashboard-filter-notice{
        align-items:flex-start;
        flex-direction:column;
    }
}


/* LIVE REQUIREMENTS PROGRESS CARD */

.requirements-progress-card {
    padding: 24px;
    overflow: hidden;
    position: relative;
}

.requirements-progress-card::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -70px;
    top: -70px;
    background: radial-gradient(circle, rgba(22, 163, 74, 0.18), transparent 70%);
    pointer-events: none;
}

.requirements-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 22px;
    position: relative;
    z-index: 1;
}

.requirements-progress-header h3 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 950;
    color: #111827;
}

.requirements-progress-header p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
}

.requirements-view-link {
    color: #15803d;
    font-weight: 900;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

.requirements-progress-body {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 22px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.requirements-donut-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.requirements-donut {
    width: 165px;
    height: 165px;
    border-radius: 50%;
    background: conic-gradient(
        #16a34a 0deg,
        #16a34a 0deg,
        #f59e0b 0deg,
        #f59e0b 0deg,
        #ef4444 0deg,
        #ef4444 0deg,
        #d1d5db 0deg,
        #d1d5db 360deg
    );
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
    transition: background 0.45s ease;
}

.requirements-donut-center {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px #e5e7eb;
}

.requirements-donut-center strong {
    font-size: 32px;
    font-weight: 950;
    color: #111827;
    line-height: 1;
}

.requirements-donut-center span {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    margin-top: 5px;
}

.requirements-status-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.req-status {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #d1d5db;
    border-radius: 16px;
    padding: 14px;
    background: #f8fafc;
}

.req-status > span {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    flex-shrink: 0;
}

.req-status.approved > span {
    background: #16a34a;
}

.req-status.pending > span {
    background: #f59e0b;
}

.req-status.returned > span {
    background: #ef4444;
}

.req-status.missing > span {
    background: #d1d5db;
}

.req-status strong {
    display: block;
    font-size: 24px;
    font-weight: 950;
    color: #111827;
    line-height: 1;
}

.req-status small {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.requirements-progress-footer {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.requirements-note {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
}

.requirements-note i {
    color: #15803d;
}

@media (max-width: 850px) {
    .requirements-progress-body {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .requirements-progress-card {
        padding: 18px;
    }

    .requirements-progress-header {
        flex-direction: column;
        gap: 8px;
    }

    .requirements-donut {
        width: 145px;
        height: 145px;
    }

    .requirements-donut-center {
        width: 98px;
        height: 98px;
    }

    .requirements-donut-center strong {
        font-size: 26px;
    }

    .requirements-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .req-status {
        padding: 11px;
        gap: 9px;
    }

    .req-status strong {
        font-size: 20px;
    }

    .progress-actions {
        width: 100%;
    }

    .progress-actions a {
        width: 100%;
    }
}

/* PGMO CERTIFICATE RUSTIC ROADWAY CENTERING PATCH */
@font-face{
    font-family:"Rustic Roadway";
    src:url("../fonts/RusticRoadway.otf") format("opentype");
    font-weight:400;
    font-style:normal;
    font-display:swap;
}

.liceo-cert-template .cert-student-name,
.certificate-print-body .liceo-cert-template .cert-student-name{
    left:50% !important;
    right:auto !important;
    width:82% !important;
    transform:translateX(-50%) !important;
    text-align:center !important;
    font-family:"Rustic Roadway", "Rustic Roadway - Personal use", "Times New Roman", serif !important;
    font-weight:400 !important;
    letter-spacing:0 !important;
    line-height:.95 !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:normal !important;
}

.liceo-cert-template .cert-course-line,
.liceo-cert-template .cert-student-label,
.liceo-cert-template .cert-school-line,
.liceo-cert-template .cert-training-line,
.liceo-cert-template .cert-dates-line,
.liceo-cert-template .cert-office-line,
.liceo-cert-template .cert-given-line,
.liceo-cert-template .cert-location-line,
.liceo-cert-template .cert-country-line{
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    text-align:center !important;
}

.liceo-cert-template .cert-course-line{ width:66% !important; }
.liceo-cert-template .cert-student-label{ width:30% !important; }
.liceo-cert-template .cert-school-line{ width:78% !important; }
.liceo-cert-template .cert-training-line{ width:82% !important; }
.liceo-cert-template .cert-dates-line{ width:82% !important; }
.liceo-cert-template .cert-office-line{ width:78% !important; }
.liceo-cert-template .cert-given-line{ width:82% !important; }
.liceo-cert-template .cert-location-line{ width:80% !important; }
.liceo-cert-template .cert-country-line{ width:48% !important; }


/* PGMO CERTIFICATE FINAL CENTERING FIX 2026-07-14
   Locks all editable text to the true certificate center line and keeps long Rustic names inside the page. */
@font-face{
    font-family:"Rustic Roadway";
    src:url("../fonts/RusticRoadway.otf") format("opentype");
    font-weight:400;
    font-style:normal;
    font-display:swap;
}
.liceo-cert-template .cert-overlay,
.certificate-print-body .liceo-cert-template .cert-overlay{
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    text-align:center !important;
    color:#111 !important;
    white-space:normal !important;
    overflow:visible !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
}
.liceo-cert-template .cert-student-name,
.certificate-print-body .liceo-cert-template .cert-student-name{
    top:47.35% !important;
    left:50% !important;
    width:74% !important;
    max-width:74% !important;
    transform:translateX(-50%) !important;
    font-family:"Rustic Roadway", "Rustic Roadway - Personal use", "Times New Roman", serif !important;
    font-weight:400 !important;
    letter-spacing:0 !important;
    line-height:.92 !important;
    white-space:nowrap !important;
    text-align:center !important;
}
.liceo-cert-template .cert-name-underline,
.certificate-print-body .liceo-cert-template .cert-name-underline{
    left:50% !important;
    top:51.25% !important;
    width:74% !important;
    transform:translateX(-50%) !important;
}
.liceo-cert-template .cert-course-line{ top:51.70% !important; width:66% !important; max-width:66% !important; }
.liceo-cert-template .cert-student-label{ top:53.55% !important; width:30% !important; max-width:30% !important; }
.liceo-cert-template .cert-school-line{ top:57.15% !important; width:78% !important; max-width:78% !important; }
.liceo-cert-template .cert-training-line{ top:59.95% !important; width:80% !important; max-width:80% !important; }
.liceo-cert-template .cert-dates-line{ top:62.70% !important; width:82% !important; max-width:82% !important; }
.liceo-cert-template .cert-office-line{ top:65.45% !important; width:78% !important; max-width:78% !important; }
.liceo-cert-template .cert-given-line{ top:71.65% !important; width:82% !important; max-width:82% !important; }
.liceo-cert-template .cert-location-line{ top:74.05% !important; width:80% !important; max-width:80% !important; }
.liceo-cert-template .cert-country-line{ top:76.35% !important; width:48% !important; max-width:48% !important; }
.liceo-cert-template .cert-multiline{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    line-height:1.12 !important;
    text-align:center !important;
}
.certificate-pdf-export .cert-overlay{
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    text-align:center !important;
}
.certificate-pdf-export .cert-student-name{ left:50% !important; width:74% !important; transform:translateX(-50%) !important; white-space:nowrap !important; font-family:"Rustic Roadway", "Rustic Roadway - Personal use", "Times New Roman", serif !important; }
.certificate-pdf-export .cert-name-underline{ left:50% !important; width:74% !important; transform:translateX(-50%) !important; }


/* PGMO CERTIFICATE BUGFIX 2026-07-14
   Fixes exported certificate text drifting/cropping left.
   Root cause: html2canvas can misplace percentage left + translateX(-50%) overlays.
   This uses transform-free centering: left = (100% - width) / 2. */
.liceo-cert-template .cert-overlay,
.certificate-print-body .liceo-cert-template .cert-overlay,
.certificate-pdf-export .cert-overlay{
    right:auto !important;
    transform:none !important;
    text-align:center !important;
    overflow:visible !important;
}
.liceo-cert-template .cert-student-name,
.certificate-print-body .liceo-cert-template .cert-student-name,
.certificate-pdf-export .cert-student-name{
    left:13% !important;
    right:auto !important;
    top:47.35% !important;
    width:74% !important;
    max-width:74% !important;
    transform:none !important;
    text-align:center !important;
    font-family:"Rustic Roadway", "Rustic Roadway - Personal use", "Times New Roman", serif !important;
    font-weight:400 !important;
    letter-spacing:0 !important;
    line-height:.92 !important;
    white-space:nowrap !important;
    overflow:visible !important;
}
.liceo-cert-template .cert-name-underline,
.certificate-print-body .liceo-cert-template .cert-name-underline,
.certificate-pdf-export .cert-name-underline{
    left:13% !important;
    top:51.25% !important;
    width:74% !important;
    transform:none !important;
}
.liceo-cert-template .cert-course-line,
.certificate-pdf-export .cert-course-line{ left:17% !important; width:66% !important; max-width:66% !important; transform:none !important; text-align:center !important; }
.liceo-cert-template .cert-student-label,
.certificate-pdf-export .cert-student-label{ left:35% !important; width:30% !important; max-width:30% !important; transform:none !important; text-align:center !important; }
.liceo-cert-template .cert-school-line,
.certificate-pdf-export .cert-school-line{ left:11% !important; width:78% !important; max-width:78% !important; transform:none !important; text-align:center !important; }
.liceo-cert-template .cert-training-line,
.certificate-pdf-export .cert-training-line{ left:10% !important; width:80% !important; max-width:80% !important; transform:none !important; text-align:center !important; }
.liceo-cert-template .cert-dates-line,
.certificate-pdf-export .cert-dates-line{ left:9% !important; width:82% !important; max-width:82% !important; transform:none !important; text-align:center !important; }
.liceo-cert-template .cert-office-line,
.certificate-pdf-export .cert-office-line{ left:11% !important; width:78% !important; max-width:78% !important; transform:none !important; text-align:center !important; }
.liceo-cert-template .cert-given-line,
.certificate-pdf-export .cert-given-line{ left:9% !important; width:82% !important; max-width:82% !important; transform:none !important; text-align:center !important; }
.liceo-cert-template .cert-location-line,
.certificate-pdf-export .cert-location-line{ left:10% !important; width:80% !important; max-width:80% !important; transform:none !important; text-align:center !important; }
.liceo-cert-template .cert-country-line,
.certificate-pdf-export .cert-country-line{ left:26% !important; width:48% !important; max-width:48% !important; transform:none !important; text-align:center !important; }


/* PGMO EDITABLE CERTIFICATE SIGNATORY PATCH 2026-07-14
   The template signatory text was removed from the image; these editable lines replace it cleanly. */
.liceo-cert-template .cert-signatory-name,
.certificate-print-body .liceo-cert-template .cert-signatory-name,
.certificate-pdf-export .cert-signatory-name{
    left:25% !important;
    right:auto !important;
    top:81.85% !important;
    width:50% !important;
    max-width:50% !important;
    transform:none !important;
    text-align:center !important;
    font-family:"Times New Roman", Times, serif !important;
    font-weight:700 !important;
    letter-spacing:.01em !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
    overflow:visible !important;
}
.liceo-cert-template .cert-signatory-underline,
.certificate-print-body .liceo-cert-template .cert-signatory-underline,
.certificate-pdf-export .cert-signatory-underline{
    position:absolute !important;
    z-index:4 !important;
    left:20% !important;
    top:84.55% !important;
    width:60% !important;
    transform:none !important;
    border-top:1.6px solid #111 !important;
    height:0 !important;
    pointer-events:none !important;
}
.liceo-cert-template .cert-signatory-title,
.certificate-print-body .liceo-cert-template .cert-signatory-title,
.certificate-pdf-export .cert-signatory-title{
    left:20% !important;
    top:85.55% !important;
    width:60% !important;
    max-width:60% !important;
    transform:none !important;
    text-align:center !important;
    font-family:"Times New Roman", Times, serif !important;
    font-size:clamp(12px, 1.38vw, 17px) !important;
    line-height:1.12 !important;
}
.liceo-cert-template .cert-signatory-office,
.certificate-print-body .liceo-cert-template .cert-signatory-office,
.certificate-pdf-export .cert-signatory-office{
    left:20% !important;
    top:87.25% !important;
    width:60% !important;
    max-width:60% !important;
    transform:none !important;
    text-align:center !important;
    font-family:"Times New Roman", Times, serif !important;
    font-size:clamp(12px, 1.38vw, 17px) !important;
    line-height:1.12 !important;
}


/* PGMO CERTIFICATE BUGFIX FINAL 2026-07-14
   Fixes three issues seen in preview/export:
   1) Rustic student name was too wide and clipped at the left edge.
   2) Body text was drifting/cropping because older transform/percentage rules conflicted.
   3) Department head title/office were duplicated because those lines are already in the template image.
*/
.liceo-cert-template .cert-overlay,
.certificate-print-body .liceo-cert-template .cert-overlay,
.certificate-pdf-export .cert-overlay{
    right:auto !important;
    transform:none !important;
    text-align:center !important;
    overflow:visible !important;
    text-overflow:clip !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    color:#111 !important;
}
.liceo-cert-template .cert-student-name,
.certificate-print-body .liceo-cert-template .cert-student-name,
.certificate-pdf-export .cert-student-name{
    left:14% !important;
    top:47.15% !important;
    width:72% !important;
    max-width:72% !important;
    transform:none !important;
    text-align:center !important;
    font-family:"Rustic Roadway", "Rustic Roadway - Personal use", "Times New Roman", serif !important;
    font-weight:400 !important;
    line-height:.95 !important;
    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
}
.liceo-cert-template .cert-name-underline,
.certificate-print-body .liceo-cert-template .cert-name-underline,
.certificate-pdf-export .cert-name-underline{
    left:14% !important;
    top:51.18% !important;
    width:72% !important;
    transform:none !important;
}
.liceo-cert-template .cert-course-line,
.certificate-pdf-export .cert-course-line{ left:17% !important; top:51.70% !important; width:66% !important; max-width:66% !important; transform:none !important; text-align:center !important; }
.liceo-cert-template .cert-student-label,
.certificate-pdf-export .cert-student-label{ left:35% !important; top:53.55% !important; width:30% !important; max-width:30% !important; transform:none !important; text-align:center !important; }
.liceo-cert-template .cert-school-line,
.certificate-pdf-export .cert-school-line{ left:14% !important; top:57.15% !important; width:72% !important; max-width:72% !important; transform:none !important; text-align:center !important; }
.liceo-cert-template .cert-training-line,
.certificate-pdf-export .cert-training-line{ left:13% !important; top:59.95% !important; width:74% !important; max-width:74% !important; transform:none !important; text-align:center !important; }
.liceo-cert-template .cert-dates-line,
.certificate-pdf-export .cert-dates-line{ left:13% !important; top:62.70% !important; width:74% !important; max-width:74% !important; transform:none !important; text-align:center !important; }
.liceo-cert-template .cert-office-line,
.certificate-pdf-export .cert-office-line{ left:14% !important; top:65.45% !important; width:72% !important; max-width:72% !important; transform:none !important; text-align:center !important; }
.liceo-cert-template .cert-given-line,
.certificate-pdf-export .cert-given-line{ left:13% !important; top:71.65% !important; width:74% !important; max-width:74% !important; transform:none !important; text-align:center !important; }
.liceo-cert-template .cert-location-line,
.certificate-pdf-export .cert-location-line{ left:14% !important; top:74.05% !important; width:72% !important; max-width:72% !important; transform:none !important; text-align:center !important; }
.liceo-cert-template .cert-country-line,
.certificate-pdf-export .cert-country-line{ left:26% !important; top:76.35% !important; width:48% !important; max-width:48% !important; transform:none !important; text-align:center !important; }
.liceo-cert-template .cert-multiline,
.certificate-pdf-export .cert-multiline{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    white-space:normal !important;
    line-height:1.14 !important;
    text-align:center !important;
}
.liceo-cert-template .cert-signatory-name,
.certificate-print-body .liceo-cert-template .cert-signatory-name,
.certificate-pdf-export .cert-signatory-name{
    left:25% !important;
    top:81.85% !important;
    width:50% !important;
    max-width:50% !important;
    transform:none !important;
    text-align:center !important;
    font-family:"Times New Roman", Times, serif !important;
    font-weight:700 !important;
    white-space:nowrap !important;
    overflow:visible !important;
}
.liceo-cert-template .cert-signatory-underline,
.liceo-cert-template .cert-signatory-title,
.liceo-cert-template .cert-signatory-office,
.certificate-print-body .liceo-cert-template .cert-signatory-underline,
.certificate-print-body .liceo-cert-template .cert-signatory-title,
.certificate-print-body .liceo-cert-template .cert-signatory-office,
.certificate-pdf-export .cert-signatory-underline,
.certificate-pdf-export .cert-signatory-title,
.certificate-pdf-export .cert-signatory-office{
    display:none !important;
}


/* PGMO CERTIFICATE ALIGNMENT LOCK 2026-07-14
   Final fix: all dynamic certificate text is centered on the same 60% center column
   used by the department-head/signatory line. This prevents left/right drifting and
   keeps the department head name directly above the underline. */
.liceo-cert-template .cert-overlay,
.certificate-print-body .liceo-cert-template .cert-overlay,
.certificate-pdf-export .cert-overlay{
    right:auto !important;
    transform:none !important;
    text-align:center !important;
    box-sizing:border-box !important;
    overflow:visible !important;
    text-overflow:clip !important;
}
.liceo-cert-template .cert-student-name,
.certificate-print-body .liceo-cert-template .cert-student-name,
.certificate-pdf-export .cert-student-name{
    left:20% !important;
    top:47.10% !important;
    width:60% !important;
    max-width:60% !important;
    transform:none !important;
    text-align:center !important;
    font-family:"Rustic Roadway", "Rustic Roadway - Personal use", "Times New Roman", serif !important;
    font-weight:400 !important;
    line-height:.95 !important;
    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
}
.liceo-cert-template .cert-name-underline,
.certificate-print-body .liceo-cert-template .cert-name-underline,
.certificate-pdf-export .cert-name-underline{
    left:20% !important;
    top:51.10% !important;
    width:60% !important;
    transform:none !important;
}
.liceo-cert-template .cert-course-line,
.certificate-pdf-export .cert-course-line{ left:20% !important; top:51.62% !important; width:60% !important; max-width:60% !important; transform:none !important; text-align:center !important; }
.liceo-cert-template .cert-student-label,
.certificate-pdf-export .cert-student-label{ left:35% !important; top:53.28% !important; width:30% !important; max-width:30% !important; transform:none !important; text-align:center !important; }
.liceo-cert-template .cert-school-line,
.certificate-pdf-export .cert-school-line{ left:20% !important; top:57.05% !important; width:60% !important; max-width:60% !important; transform:none !important; text-align:center !important; }
.liceo-cert-template .cert-training-line,
.certificate-pdf-export .cert-training-line{ left:20% !important; top:59.90% !important; width:60% !important; max-width:60% !important; transform:none !important; text-align:center !important; }
.liceo-cert-template .cert-dates-line,
.certificate-pdf-export .cert-dates-line{ left:20% !important; top:62.75% !important; width:60% !important; max-width:60% !important; transform:none !important; text-align:center !important; }
.liceo-cert-template .cert-office-line,
.certificate-pdf-export .cert-office-line{ left:20% !important; top:65.55% !important; width:60% !important; max-width:60% !important; transform:none !important; text-align:center !important; }
.liceo-cert-template .cert-given-line,
.certificate-pdf-export .cert-given-line{ left:20% !important; top:71.65% !important; width:60% !important; max-width:60% !important; transform:none !important; text-align:center !important; }
.liceo-cert-template .cert-location-line,
.certificate-pdf-export .cert-location-line{ left:20% !important; top:74.05% !important; width:60% !important; max-width:60% !important; transform:none !important; text-align:center !important; }
.liceo-cert-template .cert-country-line,
.certificate-pdf-export .cert-country-line{ left:26% !important; top:76.35% !important; width:48% !important; max-width:48% !important; transform:none !important; text-align:center !important; }
.liceo-cert-template .cert-multiline,
.certificate-pdf-export .cert-multiline{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    white-space:normal !important;
    line-height:1.14 !important;
    text-align:center !important;
}
.liceo-cert-template .cert-signatory-name,
.certificate-print-body .liceo-cert-template .cert-signatory-name,
.certificate-pdf-export .cert-signatory-name{
    left:20% !important;
    top:85.25% !important;
    width:60% !important;
    max-width:60% !important;
    transform:none !important;
    text-align:center !important;
    font-family:"Times New Roman", Times, serif !important;
    font-weight:700 !important;
    letter-spacing:.01em !important;
    line-height:1.0 !important;
    white-space:nowrap !important;
    overflow:visible !important;
}
.liceo-cert-template .cert-signatory-underline,
.liceo-cert-template .cert-signatory-title,
.liceo-cert-template .cert-signatory-office,
.certificate-print-body .liceo-cert-template .cert-signatory-underline,
.certificate-print-body .liceo-cert-template .cert-signatory-title,
.certificate-print-body .liceo-cert-template .cert-signatory-office,
.certificate-pdf-export .cert-signatory-underline,
.certificate-pdf-export .cert-signatory-title,
.certificate-pdf-export .cert-signatory-office{
    display:none !important;
}


/* PGMO OJT ID CARD OVERHAUL */
.ojt-id-page-grid{
    display:grid;
    grid-template-columns:minmax(320px, 430px) 1fr;
    gap:18px;
    align-items:start;
}

.ojt-id-preview-panel,
.ojt-id-submit-panel{
    padding:24px;
}

.ojt-id-card-title{
    align-items:flex-start;
    gap:14px;
}

.ojt-id-profile-link{
    min-height:40px;
    white-space:nowrap;
}

.ojt-id-preview-stage{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:520px;
    padding:14px;
    background:linear-gradient(135deg,#f8fafc,#ecfdf5);
    border:1px dashed #bbf7d0;
    border-radius:20px;
}

.pgmo-ojt-id-card{
    position:relative;
    width:min(100%, 320px);
    aspect-ratio:591 / 1004;
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 20px 55px rgba(15,23,42,.18);
    isolation:isolate;
}

.pgmo-ojt-id-card.template-large{
    width:min(100%, 390px);
}

.pgmo-ojt-id-card .ojt-id-template-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:1;
}

.pgmo-ojt-id-card .ojt-id-photo{
    position:absolute;
    z-index:3;
    left:21.2%;
    top:33.7%;
    width:57.6%;
    aspect-ratio:1 / 1;
    border-radius:50%;
    overflow:hidden;
    background:linear-gradient(135deg,#e5e7eb,#f8fafc);
    border:5px solid rgba(255,255,255,.88);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#0b5a39;
    font-size:clamp(36px, 9vw, 64px);
    font-weight:950;
    text-align:center;
}

.pgmo-ojt-id-card .ojt-id-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    display:block;
}

.pgmo-ojt-id-card .ojt-id-name{
    position:absolute;
    z-index:4;
    left:8%;
    right:8%;
    top:75.0%;
    min-height:6.5%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 4px;
    background:rgba(255,255,255,.97);
    color:#064e3b;
    text-align:center;
    font-weight:950;
    font-size:clamp(20px, 4.5vw, 32px);
    line-height:.98;
    text-transform:uppercase;
    letter-spacing:.01em;
    word-break:break-word;
}

.pgmo-ojt-id-card .ojt-id-role-mask{
    position:absolute;
    z-index:3;
    left:24%;
    right:24%;
    top:72.2%;
    height:5.2%;
    border-radius:999px;
    background:#000;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:clamp(13px,2.8vw,20px);
    font-weight:800;
    letter-spacing:.02em;
}

.pgmo-ojt-id-card .ojt-id-info{
    position:absolute;
    z-index:4;
    left:7%;
    right:7%;
    top:82.0%;
    padding:3px 6px;
    background:rgba(255,255,255,.96);
    text-align:center;
    color:#064e3b;
    font-weight:900;
    text-transform:uppercase;
    line-height:1.1;
    font-size:clamp(10px, 2vw, 14px);
}

.pgmo-ojt-id-card .ojt-id-info div{
    margin:1px 0;
}

.pgmo-ojt-id-card .ojt-id-info span{
    font-weight:950;
}

.pgmo-ojt-id-card .ojt-id-info strong{
    font-weight:900;
}

.ojt-id-detail-checklist{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin:18px 0;
}

.ojt-id-detail-checklist div{
    background:#f8fafc;
    border:1px solid #d1d5db;
    border-radius:16px;
    padding:14px;
}

.ojt-id-detail-checklist i{
    width:34px;
    height:34px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#ecfdf5;
    color:#047857;
    margin-bottom:8px;
}

.ojt-id-detail-checklist span,
.ojt-id-detail-checklist strong{
    display:block;
}

.ojt-id-detail-checklist span{
    color:#64748b;
    font-size:12px;
    font-weight:800;
}

.ojt-id-detail-checklist strong{
    color:#111827;
    font-size:14px;
    margin-top:2px;
    word-break:break-word;
}

.ojt-id-action-row{
    margin-top:12px;
}

.ojt-id-history-row,
.ojt-id-admin-row-card{
    display:flex;
    align-items:center;
    gap:14px;
}

.ojt-id-ready-note{
    color:#047857;
    font-weight:800;
}

.ojt-id-admin-mini{
    display:flex;
    align-items:center;
    gap:10px;
}

.ojt-id-admin-thumb{
    width:52px;
    height:72px;
    border-radius:10px;
    overflow:hidden;
    border:1px solid #d1d5db;
    background:#f8fafc;
    position:relative;
    flex-shrink:0;
}

.ojt-id-admin-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.ojt-id-modal-preview{
    display:flex;
    justify-content:center;
    padding:18px;
    background:linear-gradient(135deg,#f8fafc,#eef2ff);
    border-radius:18px;
}

.ojt-id-admin-modal .modal-body{
    background:#f8fafc;
}

@media(max-width:1050px){
    .ojt-id-page-grid{
        grid-template-columns:1fr;
    }

    .ojt-id-preview-stage{
        min-height:auto;
    }
}

@media(max-width:650px){
    .ojt-id-preview-panel,
    .ojt-id-submit-panel{
        padding:18px;
    }

    .ojt-id-card-title{
        flex-direction:column;
    }

    .ojt-id-profile-link,
    .ojt-id-action-row .main-btn{
        width:100%;
    }

    .ojt-id-detail-checklist{
        grid-template-columns:1fr;
    }

    .pgmo-ojt-id-card{
        width:min(100%, 300px);
    }
}

@media print{
    body.print-ojt-id-only *{
        visibility:hidden !important;
    }

    body.print-ojt-id-only #adminOjtIdPreviewPrintArea,
    body.print-ojt-id-only #adminOjtIdPreviewPrintArea *{
        visibility:visible !important;
    }

    body.print-ojt-id-only #adminOjtIdPreviewPrintArea{
        position:fixed;
        inset:0;
        display:flex !important;
        align-items:flex-start;
        justify-content:center;
        background:#fff !important;
        padding:20px !important;
        border-radius:0 !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card{
        width:3.2in !important;
        box-shadow:none !important;
        border-radius:0 !important;
    }
}

/* OJT ID status colors */
.badge-soft.badge-ready,
.badge-ready,
.badge-status.badge-ready{
    background:#dcfce7 !important;
    color:#166534 !important;
}




/* EDITABLE OJT ID FORM */
.ojt-id-editor-form{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin:18px 0;
}

.ojt-id-editor-field{
    min-width:0;
}

.ojt-id-editor-field.field-wide{
    grid-column:1 / -1;
}

.ojt-id-editor-field label{
    display:block;
    margin:0 0 6px;
    color:#334155;
    font-size:12px;
    font-weight:900;
}

.ojt-id-editor-field input{
    min-height:46px;
    border-radius:13px;
    border:1px solid #d1d5db;
    font-weight:700;
}

.ojt-id-editor-field input:focus{
    border-color:#16a34a;
    box-shadow:0 0 0 4px rgba(22,163,74,.14);
}

.pgmo-ojt-id-card .ojt-id-role-mask{
    display:none !important;
}

@media(max-width:650px){
    .ojt-id-editor-form{
        grid-template-columns:1fr;
    }
}


/* PGMO OJT ID TEMPLATE ALIGNMENT FIX - 2026-07-15
   New ID card template: cleaner left-aligned details, smaller name above underline,
   and profile photo covers the circle area neatly. */
.pgmo-ojt-id-card{
    aspect-ratio:591 / 1004 !important;
}

.pgmo-ojt-id-card .ojt-id-photo{
    left:16.2% !important;
    top:31.0% !important;
    width:67.6% !important;
    height:auto !important;
    aspect-ratio:1 / 1 !important;
    border-radius:50% !important;
    overflow:hidden !important;
    background:#f8fafc !important;
    border:10px solid #6f7f79 !important;
    box-shadow:inset 0 0 0 7px #ffffff !important;
    padding:7px !important;
}

.pgmo-ojt-id-card .ojt-id-photo img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center top !important;
    border-radius:50% !important;
    display:block !important;
}

.pgmo-ojt-id-card .ojt-id-photo span{
    width:100% !important;
    height:100% !important;
    border-radius:50% !important;
    background:#ecfdf5 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

.pgmo-ojt-id-card .ojt-id-name{
    left:10.2% !important;
    right:10.2% !important;
    top:72.1% !important;
    height:6.4% !important;
    min-height:0 !important;
    padding:0 8px 4px !important;
    background:transparent !important;
    color:#064e3b !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
    text-align:center !important;
    font-size:22px !important;
    line-height:.9 !important;
    font-weight:950 !important;
    letter-spacing:.01em !important;
    text-transform:uppercase !important;
    overflow:hidden !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    white-space:normal !important;
}

.pgmo-ojt-id-card.template-large .ojt-id-name{
    font-size:27px !important;
}

.pgmo-ojt-id-card .ojt-id-name.name-long{
    font-size:19px !important;
}

.pgmo-ojt-id-card .ojt-id-name.name-very-long{
    font-size:17px !important;
    letter-spacing:0 !important;
}

.pgmo-ojt-id-card .ojt-id-name.name-extra-long{
    font-size:15px !important;
    letter-spacing:0 !important;
    line-height:.88 !important;
}

.pgmo-ojt-id-card.template-large .ojt-id-name.name-long{
    font-size:23px !important;
}

.pgmo-ojt-id-card.template-large .ojt-id-name.name-very-long{
    font-size:21px !important;
}

.pgmo-ojt-id-card.template-large .ojt-id-name.name-extra-long{
    font-size:18px !important;
}

.pgmo-ojt-id-card .ojt-id-info{
    left:10.2% !important;
    right:10.2% !important;
    top:81.6% !important;
    padding:4px 8px !important;
    background:rgba(255,255,255,.94) !important;
    color:#064e3b !important;
    text-align:left !important;
    font-size:11.5px !important;
    line-height:1.08 !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
    border-radius:4px !important;
}

.pgmo-ojt-id-card.template-large .ojt-id-info{
    font-size:13.5px !important;
}

.pgmo-ojt-id-card .ojt-id-info div{
    display:grid !important;
    grid-template-columns:42% 58% !important;
    align-items:baseline !important;
    column-gap:6px !important;
    margin:1px 0 !important;
    min-height:14px !important;
}

.pgmo-ojt-id-card .ojt-id-info span{
    text-align:right !important;
    font-weight:950 !important;
    white-space:nowrap !important;
}

.pgmo-ojt-id-card .ojt-id-info strong{
    display:block !important;
    text-align:left !important;
    font-weight:900 !important;
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}

.pgmo-ojt-id-card .ojt-id-role-mask{
    display:none !important;
}

@media(max-width:520px){
    .pgmo-ojt-id-card .ojt-id-photo{
        border-width:8px !important;
        box-shadow:inset 0 0 0 6px #ffffff !important;
        padding:6px !important;
    }

    .pgmo-ojt-id-card .ojt-id-name{
        font-size:18px !important;
    }

    .pgmo-ojt-id-card .ojt-id-name.name-long{
        font-size:16px !important;
    }

    .pgmo-ojt-id-card .ojt-id-name.name-very-long,
    .pgmo-ojt-id-card .ojt-id-name.name-extra-long{
        font-size:14px !important;
    }

    .pgmo-ojt-id-card .ojt-id-info{
        font-size:10px !important;
    }
}

/* OJT ID FINAL CLEAN LAYOUT FIX - 2026-07-15
   Removes reliance on baked-in bottom labels. The template image is cleaned,
   and all student data is rendered once with a fixed, readable layout. */
.pgmo-ojt-id-card .ojt-id-template-img{
    z-index:1 !important;
}

.pgmo-ojt-id-card .ojt-id-photo{
    z-index:3 !important;
    left:20.3% !important;
    top:33.2% !important;
    width:59.4% !important;
    height:auto !important;
    aspect-ratio:1 / 1 !important;
    border-radius:50% !important;
    overflow:hidden !important;
    padding:0 !important;
    border:0 !important;
    box-shadow:none !important;
    background:#f8fafc !important;
}

.pgmo-ojt-id-card .ojt-id-photo img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center top !important;
    border-radius:50% !important;
    display:block !important;
}

.pgmo-ojt-id-card .ojt-id-photo span{
    width:100% !important;
    height:100% !important;
    border-radius:50% !important;
    background:#ecfdf5 !important;
    color:#064e3b !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-weight:950 !important;
}

.pgmo-ojt-id-card .ojt-id-name{
    z-index:4 !important;
    left:10.0% !important;
    right:10.0% !important;
    top:73.15% !important;
    height:5.9% !important;
    min-height:0 !important;
    padding:0 8px 7px !important;
    background:transparent !important;
    color:#064e3b !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
    text-align:center !important;
    font-size:22px !important;
    line-height:1 !important;
    font-weight:950 !important;
    letter-spacing:.005em !important;
    text-transform:uppercase !important;
    white-space:nowrap !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    overflow:hidden !important;
    text-overflow:clip !important;
}

.pgmo-ojt-id-card .ojt-id-name.name-long{
    font-size:18px !important;
    letter-spacing:0 !important;
}

.pgmo-ojt-id-card .ojt-id-name.name-very-long{
    font-size:15.2px !important;
    letter-spacing:-.01em !important;
}

.pgmo-ojt-id-card .ojt-id-name.name-extra-long{
    font-size:13px !important;
    letter-spacing:-.015em !important;
}

.pgmo-ojt-id-card.template-large .ojt-id-name{
    font-size:27px !important;
}

.pgmo-ojt-id-card.template-large .ojt-id-name.name-long{
    font-size:22px !important;
}

.pgmo-ojt-id-card.template-large .ojt-id-name.name-very-long{
    font-size:19px !important;
}

.pgmo-ojt-id-card.template-large .ojt-id-name.name-extra-long{
    font-size:16.5px !important;
}

.pgmo-ojt-id-card .ojt-id-info{
    z-index:4 !important;
    left:10.0% !important;
    right:10.0% !important;
    top:80.45% !important;
    padding:0 !important;
    background:transparent !important;
    color:#064e3b !important;
    text-align:left !important;
    font-size:10.7px !important;
    line-height:1.17 !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
    border-radius:0 !important;
}

.pgmo-ojt-id-card.template-large .ojt-id-info{
    font-size:13px !important;
}

.pgmo-ojt-id-card .ojt-id-info div{
    display:grid !important;
    grid-template-columns:48% 52% !important;
    align-items:baseline !important;
    column-gap:6px !important;
    min-height:13px !important;
    margin:0 !important;
}

.pgmo-ojt-id-card.template-large .ojt-id-info div{
    min-height:16px !important;
}

.pgmo-ojt-id-card .ojt-id-info span{
    display:block !important;
    text-align:right !important;
    font-weight:950 !important;
    white-space:nowrap !important;
}

.pgmo-ojt-id-card .ojt-id-info strong{
    display:block !important;
    text-align:left !important;
    font-weight:900 !important;
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}

.pgmo-ojt-id-card .ojt-id-role-mask{
    display:none !important;
}

@media(max-width:520px){
    .pgmo-ojt-id-card .ojt-id-name{
        font-size:18px !important;
    }
    .pgmo-ojt-id-card .ojt-id-name.name-long{
        font-size:15.3px !important;
    }
    .pgmo-ojt-id-card .ojt-id-name.name-very-long{
        font-size:13.3px !important;
    }
    .pgmo-ojt-id-card .ojt-id-name.name-extra-long{
        font-size:11.8px !important;
    }
    .pgmo-ojt-id-card .ojt-id-info{
        font-size:9.4px !important;
    }
}


/* OJT ID PHOTO CENTERING + SUPABASE REQUEST PATCH - 2026-07-15
   Keeps the student photo centered inside the white circle without covering the gray ring. */
.pgmo-ojt-id-card .ojt-id-photo{
    left:20.55% !important;
    top:33.25% !important;
    width:57.20% !important;
    height:auto !important;
    aspect-ratio:1 / 1 !important;
    border-radius:50% !important;
    overflow:hidden !important;
    padding:0 !important;
    border:0 !important;
    box-shadow:none !important;
    background:#f8fafc !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

.pgmo-ojt-id-card .ojt-id-photo img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    border-radius:50% !important;
    display:block !important;
}

.pgmo-ojt-id-card.template-large .ojt-id-photo{
    left:20.55% !important;
    top:33.25% !important;
    width:57.20% !important;
}


/* PGMO CLEAN ADMIN NAV 2026-07-16
   Keep Activity Log and Backup pages stable. The previous global loading/card motion made
   these utility pages look like they were constantly refreshing. */
body[data-page="activity-log"] .card-panel,
body[data-page="backup"] .card-panel,
body[data-page="activity-log"] .stat-card,
body[data-page="backup"] .stat-card,
body[data-page="activity-log"] .dash-card,
body[data-page="backup"] .dash-card{
    animation:none !important;
    transform:none !important;
}

body[data-page="activity-log"] .empty-state i:not(.fa-clock-rotate-left),
body[data-page="backup"] .empty-state i:not(.fa-database){
    animation:none !important;
}

.pgmo-clean-empty i{
    animation:none !important;
    color:#15803d;
}

.pgmo-dashboard-filter-notice{
    animation:none !important;
}


/* Legacy OJT ID bulk-print fallback. Final four-per-page rules are at the end of this file. */
.ojt-id-select-col{
    width:42px;
    text-align:center;
}

.ojt-id-bulk-print-area{
    display:none;
}

@media print{
    body.print-ojt-id-bulk-only *{
        visibility:hidden !important;
    }

    body.print-ojt-id-bulk-only #adminOjtIdBulkPrintArea,
    body.print-ojt-id-bulk-only #adminOjtIdBulkPrintArea *{
        visibility:visible !important;
    }

    body.print-ojt-id-bulk-only #adminOjtIdBulkPrintArea{
        display:block !important;
        position:absolute !important;
        inset:0 auto auto 0 !important;
        width:100% !important;
        min-height:100% !important;
        background:#ffffff !important;
        padding:0 !important;
        margin:0 !important;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-sheet{
        width:210mm !important;
        height:297mm !important;
        padding:8mm 7mm !important;
        margin:0 auto !important;
        page-break-after:always !important;
        break-after:page !important;
        background:#ffffff !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-sheet:last-child{
        page-break-after:auto !important;
        break-after:auto !important;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-grid{
        display:grid !important;
        grid-template-columns:repeat(3, 1fr) !important;
        grid-template-rows:repeat(3, 1fr) !important;
        column-gap:3mm !important;
        row-gap:3mm !important;
        width:100% !important;
        height:100% !important;
        align-items:center !important;
        justify-items:center !important;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-cell{
        width:100% !important;
        height:100% !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        overflow:hidden !important;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-cell .pgmo-ojt-id-card{
        width:57mm !important;
        max-width:57mm !important;
        height:auto !important;
        box-shadow:none !important;
        border-radius:0 !important;
        transform:none !important;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-cell .pgmo-ojt-id-card .ojt-id-name{
        font-size:10.5px !important;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-cell .pgmo-ojt-id-card .ojt-id-name.name-long{
        font-size:9.2px !important;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-cell .pgmo-ojt-id-card .ojt-id-name.name-very-long,
    body.print-ojt-id-bulk-only .ojt-id-print-cell .pgmo-ojt-id-card .ojt-id-name.name-extra-long{
        font-size:7.8px !important;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-cell .pgmo-ojt-id-card .ojt-id-info{
        font-size:5.7px !important;
        line-height:1.02 !important;
        padding:1px 3px !important;
    }

    @page{
        size:A4 portrait;
        margin:0;
    }
}

/* PGMO PATCH 2026-07-16C: OJT ID print centering fix */
.pgmo-ojt-id-card{
    display:block !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

.pgmo-ojt-id-card .ojt-id-template-img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

@media print{
    body.print-ojt-id-only #adminOjtIdPreviewPrintArea{
        width:100% !important;
        display:flex !important;
        justify-content:center !important;
        align-items:flex-start !important;
        text-align:center !important;
    }

    body.print-ojt-id-only #adminOjtIdPreviewPrintArea > *{
        margin-left:auto !important;
        margin-right:auto !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card{
        display:block !important;
        width:3.2in !important;
        margin-left:auto !important;
        margin-right:auto !important;
        transform:none !important;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-sheet{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        flex-direction:column !important;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-grid{
        width:100% !important;
        margin-left:auto !important;
        margin-right:auto !important;
        place-items:center !important;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-cell{
        text-align:center !important;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-cell .pgmo-ojt-id-card{
        display:block !important;
        width:57mm !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }
}


/* PGMO PATCH 2026-07-16D: FINAL OJT ID school-size print fix
   - Uses school ID size on A4
   - Centers cards on the page/grid
   - Keeps only the ID cards visible in print
   - Shrinks names so they do not cut off
*/
@media print{
    html,
    body{
        width:210mm !important;
        min-height:297mm !important;
        margin:0 !important;
        padding:0 !important;
        background:#ffffff !important;
        overflow:visible !important;
    }

    body.print-ojt-id-only *,
    body.print-ojt-id-bulk-only *{
        visibility:hidden !important;
    }

    body.print-ojt-id-only #adminOjtIdPreviewPrintArea,
    body.print-ojt-id-only #adminOjtIdPreviewPrintArea *,
    body.print-ojt-id-bulk-only #adminOjtIdBulkPrintArea,
    body.print-ojt-id-bulk-only #adminOjtIdBulkPrintArea *{
        visibility:visible !important;
    }

    body.print-ojt-id-only #adminOjtIdPreviewPrintArea{
        display:flex !important;
        position:fixed !important;
        inset:0 !important;
        width:210mm !important;
        height:297mm !important;
        margin:0 !important;
        padding:12mm 0 0 !important;
        background:#ffffff !important;
        box-sizing:border-box !important;
        align-items:flex-start !important;
        justify-content:center !important;
        text-align:center !important;
        border:0 !important;
        box-shadow:none !important;
    }

    body.print-ojt-id-bulk-only #adminOjtIdBulkPrintArea{
        display:block !important;
        position:absolute !important;
        inset:0 auto auto 0 !important;
        width:210mm !important;
        min-height:297mm !important;
        margin:0 !important;
        padding:0 !important;
        background:#ffffff !important;
        box-sizing:border-box !important;
        text-align:center !important;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-sheet{
        display:flex !important;
        width:210mm !important;
        height:297mm !important;
        margin:0 auto !important;
        padding:12mm 12mm !important;
        background:#ffffff !important;
        box-sizing:border-box !important;
        align-items:center !important;
        justify-content:center !important;
        overflow:hidden !important;
        page-break-after:always !important;
        break-after:page !important;
        border:0 !important;
        box-shadow:none !important;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-sheet:last-child{
        page-break-after:auto !important;
        break-after:auto !important;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-grid{
        display:grid !important;
        grid-template-columns:repeat(3, 56mm) !important;
        grid-template-rows:repeat(3, 89mm) !important;
        gap:3mm 4mm !important;
        width:auto !important;
        height:auto !important;
        margin:0 auto !important;
        padding:0 !important;
        align-items:center !important;
        justify-items:center !important;
        place-content:center !important;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-cell{
        display:flex !important;
        width:56mm !important;
        height:89mm !important;
        margin:0 !important;
        padding:0 !important;
        align-items:center !important;
        justify-content:center !important;
        overflow:hidden !important;
        background:#ffffff !important;
        text-align:center !important;
        box-sizing:border-box !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card,
    body.print-ojt-id-bulk-only .ojt-id-print-cell .pgmo-ojt-id-card{
        display:block !important;
        position:relative !important;
        width:56mm !important;
        min-width:56mm !important;
        max-width:56mm !important;
        height:89mm !important;
        min-height:89mm !important;
        max-height:89mm !important;
        margin:0 auto !important;
        padding:0 !important;
        border:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;
        transform:none !important;
        overflow:hidden !important;
        background:#ffffff !important;
        box-sizing:border-box !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-template-img,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-template-img{
        display:block !important;
        position:absolute !important;
        inset:0 !important;
        width:100% !important;
        height:100% !important;
        object-fit:fill !important;
        margin:0 !important;
        padding:0 !important;
        border:0 !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-photo,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-photo{
        left:21.1% !important;
        top:32.8% !important;
        width:56.8% !important;
        height:auto !important;
        aspect-ratio:1 / 1 !important;
        border-radius:50% !important;
        overflow:hidden !important;
        z-index:3 !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-photo img,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-photo img{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        object-position:center center !important;
        border-radius:50% !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-name,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name{
        left:7.5% !important;
        right:7.5% !important;
        top:73.55% !important;
        height:4.2% !important;
        padding:0 1mm !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        text-align:center !important;
        font-size:8.1px !important;
        line-height:1 !important;
        letter-spacing:-.015em !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:clip !important;
        transform:none !important;
        z-index:4 !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-name.name-long,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name.name-long{
        font-size:7.2px !important;
        letter-spacing:-.035em !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-name.name-very-long,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name.name-very-long{
        font-size:6.35px !important;
        letter-spacing:-.05em !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-name.name-extra-long,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name.name-extra-long{
        font-size:5.65px !important;
        letter-spacing:-.065em !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-info,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-info{
        left:9.5% !important;
        right:9.5% !important;
        top:79.85% !important;
        padding:0 !important;
        font-size:5.8px !important;
        line-height:1.05 !important;
        letter-spacing:-.015em !important;
        z-index:4 !important;
        text-align:left !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-info div,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-info div{
        grid-template-columns:47% 53% !important;
        min-height:7px !important;
        column-gap:1.2mm !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-info span,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-info span{
        text-align:right !important;
        white-space:nowrap !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-info strong,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-info strong{
        text-align:left !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:clip !important;
    }

    body.print-ojt-id-only .modal,
    body.print-ojt-id-only .modal-header,
    body.print-ojt-id-only .modal-title,
    body.print-ojt-id-only .page-header,
    body.print-ojt-id-bulk-only .page-header,
    body.print-ojt-id-bulk-only .content-header{
        display:none !important;
        visibility:hidden !important;
    }

    @page{
        size:A4 portrait;
        margin:0;
    }
}

/* PGMO PATCH 2026-07-16D: CR80 OJT ID print sizing and safer name fit */
@media print{
    body.print-ojt-id-only .pgmo-ojt-id-card,
    body.print-ojt-id-bulk-only .ojt-id-print-cell .pgmo-ojt-id-card{
        width:56mm !important;
        min-width:56mm !important;
        max-width:56mm !important;
        height:89mm !important;
        min-height:89mm !important;
        max-height:89mm !important;
        margin:0 auto !important;
        overflow:hidden !important;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-sheet{
        width:210mm !important;
        height:297mm !important;
        padding:11mm 18mm !important;
        margin:0 auto !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-grid{
        display:grid !important;
        grid-template-columns:repeat(3, 56mm) !important;
        grid-template-rows:repeat(3, 89mm) !important;
        gap:2mm 3mm !important;
        width:auto !important;
        height:auto !important;
        margin:0 auto !important;
        place-content:center !important;
        place-items:center !important;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-cell{
        width:56mm !important;
        height:89mm !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        overflow:hidden !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-name,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name{
        left:1% !important;
        right:1% !important;
        top:72.8% !important;
        height:5.7% !important;
        padding:0 .25mm .35mm !important;
        font-size:2.28mm !important;
        letter-spacing:-.025em !important;
        transform:none !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:clip !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-name.name-long,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name.name-long{
        font-size:1.94mm !important;
        letter-spacing:-.055em !important;
        transform:none !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-name.name-very-long,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name.name-very-long{
        font-size:1.66mm !important;
        letter-spacing:-.07em !important;
        transform:none !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-name.name-extra-long,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name.name-extra-long{
        font-size:1.45mm !important;
        letter-spacing:-.085em !important;
        transform:none !important;
    }

    @page{
        size:A4 portrait;
        margin:0;
    }
}

.pgmo-ojt-id-card .ojt-id-name{
    left:1% !important;
    right:1% !important;
    padding-left:2px !important;
    padding-right:2px !important;
}


/* PGMO PATCH 2026-07-16E: debit-card match print size override
   Slightly increases printed OJT ID size to match common debit/school ID output after browser/printer scaling. */
@media print{
    body.print-ojt-id-only .pgmo-ojt-id-card,
    body.print-ojt-id-bulk-only .ojt-id-print-cell .pgmo-ojt-id-card{
        width:56mm !important;
        min-width:56mm !important;
        max-width:56mm !important;
        height:89mm !important;
        min-height:89mm !important;
        max-height:89mm !important;
        margin:0 auto !important;
        overflow:hidden !important;
        transform:none !important;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-sheet{
        width:210mm !important;
        height:297mm !important;
        padding:11mm 18mm !important;
        margin:0 auto !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        box-sizing:border-box !important;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-grid{
        display:grid !important;
        grid-template-columns:repeat(3, 56mm) !important;
        grid-template-rows:repeat(3, 89mm) !important;
        gap:2mm 3mm !important;
        width:auto !important;
        height:auto !important;
        margin:0 auto !important;
        place-content:center !important;
        place-items:center !important;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-cell{
        width:56mm !important;
        height:89mm !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        overflow:hidden !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-name,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name{
        left:0.5% !important;
        right:0.5% !important;
        top:72.65% !important;
        height:6.1% !important;
        padding:0 .25mm .35mm !important;
        font-size:2.22mm !important;
        line-height:1 !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:clip !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-name.name-long,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name.name-long{
        font-size:1.9mm !important;
        letter-spacing:-.055em !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-name.name-very-long,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name.name-very-long{
        font-size:1.62mm !important;
        letter-spacing:-.075em !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-name.name-extra-long,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name.name-extra-long{
        font-size:1.4mm !important;
        letter-spacing:-.09em !important;
    }

    @page{
        size:A4 portrait;
        margin:0;
    }
}

/* PGMO PATCH 2026-07-16F: readable OJT ID details while keeping debit-card print size */
.pgmo-ojt-id-card .ojt-id-name{
    top:71.85% !important;
    height:7.05% !important;
    font-size:24px !important;
    line-height:.96 !important;
    align-items:flex-end !important;
    padding:0 4px 5px !important;
}

.pgmo-ojt-id-card .ojt-id-name.name-long{
    font-size:20px !important;
}

.pgmo-ojt-id-card .ojt-id-name.name-very-long{
    font-size:17px !important;
}

.pgmo-ojt-id-card .ojt-id-name.name-extra-long{
    font-size:14.5px !important;
}

.pgmo-ojt-id-card .ojt-id-info{
    left:5.6% !important;
    right:5.6% !important;
    top:79.75% !important;
    font-size:13.2px !important;
    line-height:1.12 !important;
    letter-spacing:-.035em !important;
}

.pgmo-ojt-id-card .ojt-id-info div{
    grid-template-columns:37% 63% !important;
    column-gap:5px !important;
    min-height:16px !important;
}

.pgmo-ojt-id-card.template-large .ojt-id-info{
    font-size:15px !important;
}

.pgmo-ojt-id-card.template-large .ojt-id-info div{
    min-height:19px !important;
}

@media print{
    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-name,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name{
        left:1% !important;
        right:1% !important;
        top:71.85% !important;
        height:7.05% !important;
        padding:0 .35mm .42mm !important;
        font-size:2.95mm !important;
        line-height:.96 !important;
        letter-spacing:-.028em !important;
        align-items:flex-end !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-name.name-long,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name.name-long{
        font-size:2.48mm !important;
        letter-spacing:-.055em !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-name.name-very-long,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name.name-very-long{
        font-size:2.08mm !important;
        letter-spacing:-.075em !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-name.name-extra-long,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name.name-extra-long{
        font-size:1.75mm !important;
        letter-spacing:-.09em !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-info,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-info{
        left:5.6% !important;
        right:5.6% !important;
        top:79.75% !important;
        font-size:2.18mm !important;
        line-height:1.12 !important;
        letter-spacing:-.035em !important;
        padding:0 !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-info div,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-info div{
        grid-template-columns:37% 63% !important;
        column-gap:.9mm !important;
        min-height:2.75mm !important;
    }
}


/* PGMO PATCH 2026-07-16G: bigger readable OJT ID text, same debit-card print size */
.pgmo-ojt-id-card .ojt-id-name{
    top:71.35% !important;
    height:7.65% !important;
    font-size:27px !important;
    line-height:.96 !important;
    padding:0 3px 5px !important;
}

.pgmo-ojt-id-card .ojt-id-name.name-long{
    font-size:23px !important;
}

.pgmo-ojt-id-card .ojt-id-name.name-very-long{
    font-size:19.5px !important;
}

.pgmo-ojt-id-card .ojt-id-name.name-extra-long{
    font-size:16.5px !important;
}

.pgmo-ojt-id-card .ojt-id-info{
    left:5.2% !important;
    right:5.2% !important;
    top:79.15% !important;
    font-size:15.4px !important;
    line-height:1.08 !important;
    letter-spacing:-.045em !important;
}

.pgmo-ojt-id-card .ojt-id-info div{
    grid-template-columns:34% 66% !important;
    column-gap:5px !important;
    min-height:18px !important;
}

.pgmo-ojt-id-card.template-large .ojt-id-info{
    font-size:17px !important;
}

.pgmo-ojt-id-card.template-large .ojt-id-info div{
    min-height:21px !important;
}

@media print{
    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-name,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name{
        top:71.35% !important;
        height:7.65% !important;
        padding:0 .22mm .36mm !important;
        font-size:3.35mm !important;
        line-height:.96 !important;
        letter-spacing:-.035em !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-name.name-long,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name.name-long{
        font-size:2.86mm !important;
        letter-spacing:-.06em !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-name.name-very-long,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name.name-very-long{
        font-size:2.43mm !important;
        letter-spacing:-.08em !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-name.name-extra-long,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name.name-extra-long{
        font-size:2.05mm !important;
        letter-spacing:-.095em !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-info,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-info{
        left:5.2% !important;
        right:5.2% !important;
        top:79.15% !important;
        font-size:2.55mm !important;
        line-height:1.08 !important;
        letter-spacing:-.045em !important;
        padding:0 !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-info div,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-info div{
        grid-template-columns:34% 66% !important;
        column-gap:.75mm !important;
        min-height:3.08mm !important;
    }
}


/* PGMO PATCH 2026-07-16H: larger OJT ID card, readable print details, centered print photo */
.pgmo-ojt-id-card .ojt-id-photo img{
    object-fit:cover !important;
    object-position:center center !important;
}

@media print{
    body.print-ojt-id-only .pgmo-ojt-id-card,
    body.print-ojt-id-bulk-only .ojt-id-print-cell .pgmo-ojt-id-card{
        width:76mm !important;
        max-width:76mm !important;
        height:109mm !important;
        min-height:109mm !important;
        max-height:109mm !important;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-sheet{
        padding:8mm 22mm !important;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-grid{
        grid-template-columns:repeat(2, 76mm) !important;
        grid-template-rows:repeat(2, 109mm) !important;
        gap:8mm !important;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-cell{
        width:76mm !important;
        height:109mm !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-photo,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-photo{
        left:21.6% !important;
        top:34.15% !important;
        width:55.2% !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-photo img,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-photo img{
        object-fit:cover !important;
        object-position:center center !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-name,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name{
        top:71.65% !important;
        height:7.25% !important;
        padding:0 .22mm .25mm !important;
        font-size:3.65mm !important;
        line-height:.94 !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-name.name-long,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name.name-long{
        font-size:3.15mm !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-name.name-very-long,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name.name-very-long{
        font-size:2.70mm !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-name.name-extra-long,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name.name-extra-long{
        font-size:2.25mm !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-info,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-info{
        top:79.05% !important;
        font-size:2.85mm !important;
        line-height:1.08 !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-info div,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-info div{
        min-height:3.42mm !important;
    }
}


/* PGMO PATCH 2026-07-16I: admin OJT ID print enlarged by request
   Printed card size changed from 76mm x 109mm to 116mm x 139mm.
   Bulk print now fits 2 large IDs per A4 page. */
@media print{
    body.print-ojt-id-only .pgmo-ojt-id-card,
    body.print-ojt-id-bulk-only .ojt-id-print-cell .pgmo-ojt-id-card{
        width:116mm !important;
        min-width:116mm !important;
        max-width:116mm !important;
        height:139mm !important;
        min-height:139mm !important;
        max-height:139mm !important;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-sheet{
        width:210mm !important;
        height:297mm !important;
        padding:6mm 0 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-grid{
        grid-template-columns:116mm !important;
        grid-template-rows:repeat(2, 139mm) !important;
        gap:7mm !important;
        width:116mm !important;
        height:auto !important;
        margin:0 auto !important;
        place-content:center !important;
        place-items:center !important;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-cell{
        width:116mm !important;
        height:139mm !important;
    }

    body.print-ojt-id-only .ojt-id-single-print-grid{
        width:116mm !important;
        height:139mm !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-name,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name{
        top:71.55% !important;
        height:7.4% !important;
        font-size:5.0mm !important;
        line-height:.94 !important;
        padding:0 .45mm .35mm !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-name.name-long,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name.name-long{
        font-size:4.3mm !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-name.name-very-long,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name.name-very-long{
        font-size:3.65mm !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-name.name-extra-long,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name.name-extra-long{
        font-size:3.05mm !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-info,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-info{
        top:79.0% !important;
        font-size:3.85mm !important;
        line-height:1.08 !important;
        left:5.2% !important;
        right:5.2% !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-info div,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-info div{
        grid-template-columns:33% 67% !important;
        column-gap:1mm !important;
        min-height:4.65mm !important;
    }
}

/* PGMO PATCH 2026-07-16J: restore fitted OJT ID print layout, 6 IDs per A4 page */
@media print{
    body.print-ojt-id-bulk-only .ojt-id-print-sheet{
        width:210mm !important;
        height:297mm !important;
        padding:3mm 0 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        overflow:hidden !important;
        background:#fff !important;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-grid{
        display:grid !important;
        grid-template-columns:repeat(2, 56mm) !important;
        grid-template-rows:repeat(3, 95mm) !important;
        column-gap:14mm !important;
        row-gap:2mm !important;
        width:auto !important;
        height:auto !important;
        place-content:center !important;
        place-items:center !important;
        margin:0 auto !important;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-cell,
    body.print-ojt-id-bulk-only .ojt-id-print-cell .pgmo-ojt-id-card,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card{
        width:56mm !important;
        min-width:56mm !important;
        max-width:56mm !important;
        height:95mm !important;
        min-height:95mm !important;
        max-height:95mm !important;
        overflow:hidden !important;
        margin:0 auto !important;
        transform:none !important;
        box-shadow:none !important;
        border-radius:0 !important;
        background:#fff !important;
    }

    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-template-img{
        position:absolute !important;
        inset:0 !important;
        width:100% !important;
        height:100% !important;
        object-fit:fill !important;
    }

    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-photo{
        left:20.55% !important;
        top:33.25% !important;
        width:57.2% !important;
        height:auto !important;
        aspect-ratio:1 / 1 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        overflow:hidden !important;
        border-radius:50% !important;
    }

    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-photo img{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        object-position:center center !important;
        border-radius:50% !important;
    }

    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name{
        left:3.5% !important;
        right:3.5% !important;
        top:73.05% !important;
        height:5.4% !important;
        padding:0 .2mm .12mm !important;
        font-size:3.05mm !important;
        line-height:.96 !important;
        letter-spacing:-.03em !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        align-items:flex-end !important;
    }

    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name.name-long{
        font-size:2.55mm !important;
        letter-spacing:-.045em !important;
    }

    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name.name-very-long{
        font-size:2.18mm !important;
        letter-spacing:-.055em !important;
    }

    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name.name-extra-long{
        font-size:1.88mm !important;
        letter-spacing:-.065em !important;
    }

    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-info{
        left:7.5% !important;
        right:7.5% !important;
        top:79.45% !important;
        font-size:2.22mm !important;
        line-height:1.08 !important;
        letter-spacing:-.025em !important;
        padding:0 !important;
    }

    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-info div{
        grid-template-columns:36% 64% !important;
        column-gap:.75mm !important;
        min-height:2.65mm !important;
        padding:0 !important;
        margin:0 !important;
    }
}


/* PGMO PATCH 2026-07-16K: wider OJT ID print layout, same height, 6 IDs per A4
   Width changed from 56mm to 76mm so the printed ID is closer to a student/debit-card width.
   Height stays at 95mm because the length already matched the physical ID. */
@media print{
    body.print-ojt-id-bulk-only .ojt-id-print-sheet{
        width:210mm !important;
        height:297mm !important;
        padding:3mm 0 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        overflow:hidden !important;
        background:#fff !important;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-grid{
        display:grid !important;
        grid-template-columns:repeat(2, 76mm) !important;
        grid-template-rows:repeat(3, 95mm) !important;
        column-gap:10mm !important;
        row-gap:2mm !important;
        width:auto !important;
        height:auto !important;
        place-content:center !important;
        place-items:center !important;
        margin:0 auto !important;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-cell,
    body.print-ojt-id-bulk-only .ojt-id-print-cell .pgmo-ojt-id-card,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card{
        width:76mm !important;
        min-width:76mm !important;
        max-width:76mm !important;
        height:95mm !important;
        min-height:95mm !important;
        max-height:95mm !important;
        overflow:hidden !important;
        margin:0 auto !important;
        transform:none !important;
        box-shadow:none !important;
        border-radius:0 !important;
        background:#fff !important;
    }

    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-template-img{
        position:absolute !important;
        inset:0 !important;
        width:100% !important;
        height:100% !important;
        object-fit:fill !important;
    }

    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-photo{
        left:20.55% !important;
        top:33.25% !important;
        width:57.2% !important;
        height:auto !important;
        aspect-ratio:1 / 1 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        overflow:hidden !important;
        border-radius:50% !important;
    }

    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-photo img{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        object-position:center center !important;
        border-radius:50% !important;
    }

    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name{
        left:3.5% !important;
        right:3.5% !important;
        top:73.05% !important;
        height:5.4% !important;
        padding:0 .2mm .12mm !important;
        font-size:3.15mm !important;
        line-height:.96 !important;
        letter-spacing:-.025em !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        align-items:flex-end !important;
        text-align:center !important;
        justify-content:center !important;
    }

    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name.name-long{
        font-size:2.7mm !important;
        letter-spacing:-.035em !important;
    }

    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name.name-very-long{
        font-size:2.35mm !important;
        letter-spacing:-.045em !important;
    }

    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name.name-extra-long{
        font-size:2.05mm !important;
        letter-spacing:-.055em !important;
    }

    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-info{
        left:17% !important;
        right:17% !important;
        top:79.45% !important;
        font-size:2.35mm !important;
        line-height:1.08 !important;
        letter-spacing:-.015em !important;
        padding:0 !important;
    }

    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-info div{
        grid-template-columns:36% 64% !important;
        column-gap:.75mm !important;
        min-height:2.8mm !important;
        padding:0 !important;
        margin:0 !important;
    }
}


/* PGMO PATCH 2026-07-16L: presentable OJT ID print/layout reset
   Uses a portrait card close to standard ID-card proportions and keeps 6 IDs on A4. */
.pgmo-ojt-id-card .ojt-id-photo{
    left:21.0% !important;
    top:33.1% !important;
    width:56.2% !important;
    height:auto !important;
    aspect-ratio:1 / 1 !important;
    border-radius:50% !important;
    overflow:hidden !important;
}
.pgmo-ojt-id-card .ojt-id-photo img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    border-radius:50% !important;
    display:block !important;
}
.pgmo-ojt-id-card .ojt-id-name{
    left:6.2% !important;
    right:6.2% !important;
    top:72.95% !important;
    height:5.35% !important;
    padding:0 4px 2px !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;
    text-align:center !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    line-height:.94 !important;
    letter-spacing:-.035em !important;
}
.pgmo-ojt-id-card .ojt-id-info{
    left:9.5% !important;
    right:9.5% !important;
    top:79.05% !important;
    line-height:1.08 !important;
    letter-spacing:-.02em !important;
}
.pgmo-ojt-id-card .ojt-id-info div{
    grid-template-columns:39% 61% !important;
    column-gap:5px !important;
    min-height:13px !important;
}

@media print{
    :root{
        --ojt-card-w:58mm;
        --ojt-card-h:96mm;
    }
    body.print-ojt-id-bulk-only .ojt-id-print-sheet{
        width:210mm !important;
        height:297mm !important;
        padding:2.5mm 0 !important;
        margin:0 auto !important;
        overflow:hidden !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }
    body.print-ojt-id-bulk-only .ojt-id-print-grid{
        display:grid !important;
        grid-template-columns:repeat(2, var(--ojt-card-w)) !important;
        grid-template-rows:repeat(3, var(--ojt-card-h)) !important;
        column-gap:16mm !important;
        row-gap:2mm !important;
        place-content:center !important;
        place-items:center !important;
        width:auto !important;
        height:auto !important;
        margin:0 auto !important;
    }
    body.print-ojt-id-only .pgmo-ojt-id-card,
    body.print-ojt-id-bulk-only .ojt-id-print-cell .pgmo-ojt-id-card{
        width:var(--ojt-card-w) !important;
        height:var(--ojt-card-h) !important;
        min-width:var(--ojt-card-w) !important;
        min-height:var(--ojt-card-h) !important;
        max-width:var(--ojt-card-w) !important;
        max-height:var(--ojt-card-h) !important;
        overflow:hidden !important;
        box-shadow:none !important;
        border-radius:0 !important;
        transform:none !important;
    }
    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-name,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name{
        font-size:3.7mm !important;
        line-height:.94 !important;
    }
    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-name.name-long,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name.name-long{
        font-size:3.12mm !important;
    }
    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-name.name-very-long,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name.name-very-long{
        font-size:2.62mm !important;
    }
    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-name.name-extra-long,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-name.name-extra-long{
        font-size:2.25mm !important;
    }
    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-info,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-info{
        font-size:2.58mm !important;
        line-height:1.08 !important;
    }
    body.print-ojt-id-only .pgmo-ojt-id-card .ojt-id-info div,
    body.print-ojt-id-bulk-only .pgmo-ojt-id-card .ojt-id-info div{
        min-height:3.05mm !important;
        grid-template-columns:39% 61% !important;
    }
    @page{ size:A4 portrait; margin:0; }
}


/* PGMO PATCH 2026-07-16N: place the student name directly above the template underline. */
.pgmo-ojt-id-card .ojt-id-name{
    top:73.15% !important;
    height:5.30% !important;
}
.pgmo-ojt-id-card .ojt-id-info{
    top:79.10% !important;
}
@media print{
    :root{
        --ojt-card-w:62mm;
        --ojt-card-h:100mm;
    }
    body.print-ojt-id-bulk-only .ojt-id-print-grid{
        grid-template-columns:repeat(2, var(--ojt-card-w)) !important;
        grid-template-rows:repeat(2, var(--ojt-card-h)) !important;
        column-gap:18mm !important;
        row-gap:14mm !important;
    }
}

/* PGMO PATCH 2026-07-16P: authoritative OJT ID A4 layout
   Maximum of four 62 mm x 100 mm IDs per sheet, arranged 2 x 2.
   This overrides older 3 x 3 and 2 x 3 fallback print experiments. */
@media print{
    :root{
        --ojt-card-w:62mm;
        --ojt-card-h:100mm;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-sheet{
        display:flex !important;
        width:210mm !important;
        height:297mm !important;
        margin:0 auto !important;
        padding:0 !important;
        align-items:center !important;
        justify-content:center !important;
        overflow:hidden !important;
        background:#ffffff !important;
        box-sizing:border-box !important;
        page-break-after:always !important;
        break-after:page !important;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-sheet:last-child{
        page-break-after:auto !important;
        break-after:auto !important;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-grid{
        display:grid !important;
        grid-template-columns:repeat(2, var(--ojt-card-w)) !important;
        grid-template-rows:repeat(2, var(--ojt-card-h)) !important;
        column-gap:18mm !important;
        row-gap:14mm !important;
        width:auto !important;
        height:auto !important;
        margin:0 auto !important;
        padding:0 !important;
        place-content:center !important;
        place-items:center !important;
    }

    body.print-ojt-id-bulk-only .ojt-id-print-cell{
        display:flex !important;
        width:var(--ojt-card-w) !important;
        min-width:var(--ojt-card-w) !important;
        max-width:var(--ojt-card-w) !important;
        height:var(--ojt-card-h) !important;
        min-height:var(--ojt-card-h) !important;
        max-height:var(--ojt-card-h) !important;
        margin:0 !important;
        padding:0 !important;
        align-items:center !important;
        justify-content:center !important;
        overflow:hidden !important;
        background:#ffffff !important;
        box-sizing:border-box !important;
    }

    body.print-ojt-id-only .pgmo-ojt-id-card,
    body.print-ojt-id-bulk-only .ojt-id-print-cell .pgmo-ojt-id-card{
        width:var(--ojt-card-w) !important;
        min-width:var(--ojt-card-w) !important;
        max-width:var(--ojt-card-w) !important;
        height:var(--ojt-card-h) !important;
        min-height:var(--ojt-card-h) !important;
        max-height:var(--ojt-card-h) !important;
        margin:0 auto !important;
        transform:none !important;
        overflow:hidden !important;
    }

    @page{
        size:A4 portrait;
        margin:0;
    }
}


/* PGMO PATCH 2026-07-27: Select students for lacking-requirements Excel export */
.admin-lacking-selection-toolbar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto minmax(220px, auto);
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #bbf7d0;
    border-radius: 14px;
    background: linear-gradient(135deg, #f0fdf4, #ffffff);
}

.admin-lacking-selection-copy {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #374151;
    font-size: .9rem;
    font-weight: 600;
}

.admin-lacking-selection-copy i {
    color: #15803d;
    font-size: 1rem;
}

.admin-lacking-selection-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-lacking-selection-count {
    color: #166534;
    font-size: .86rem;
    font-weight: 800;
    text-align: right;
}

.admin-lacking-select-column {
    width: 52px;
    min-width: 52px;
    text-align: center;
    vertical-align: middle !important;
}

.admin-lacking-select-column .form-check-input {
    float: none;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    cursor: pointer;
}

.admin-lacking-report-table tbody tr.pgmo-lacking-row-selected > td {
    background: rgba(240, 253, 244, .72);
}

.admin-lacking-report-table tbody tr.pgmo-lacking-row-selected:hover > td {
    background: rgba(220, 252, 231, .86);
}

@media (max-width: 992px) {
    .admin-lacking-selection-toolbar {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .admin-lacking-selection-count {
        text-align: left;
    }
}

/* PGMO PATCH 2026-07-27: Readable lacking-documents status view */
.admin-lacking-report-card {
    border: 1px solid #dbe4df;
    background: #ffffff;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .055);
    overflow: hidden;
}

.admin-lacking-report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.admin-lacking-title-wrap {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.admin-lacking-title-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    font-size: 1.05rem;
}

.admin-lacking-primary-actions {
    flex-wrap: nowrap;
}

.admin-lacking-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 12px;
}

.admin-lacking-metric-card {
    min-height: 105px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #f8fafc;
}

.admin-lacking-metric-card > div:last-child {
    min-width: 0;
}

.admin-lacking-metric-card span {
    display: block;
    color: #64748b;
    font-size: .76rem;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: .035em;
}

.admin-lacking-metric-card strong {
    display: block;
    margin-top: 5px;
    color: #0f172a;
    font-size: 1.75rem;
    line-height: 1;
}

.admin-lacking-metric-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #e2e8f0;
    color: #475569;
}

.admin-lacking-metric-card.warning {
    background: #fffaf0;
    border-color: #fde7b0;
}
.admin-lacking-metric-card.warning .admin-lacking-metric-icon { background: #fef3c7; color: #92400e; }

.admin-lacking-metric-card.ongoing {
    background: #f4fbf6;
    border-color: #cdebd5;
}
.admin-lacking-metric-card.ongoing .admin-lacking-metric-icon { background: #dcfce7; color: #166534; }

.admin-lacking-metric-card.completed {
    background: #f5f8ff;
    border-color: #d7e3ff;
}
.admin-lacking-metric-card.completed .admin-lacking-metric-icon { background: #dbeafe; color: #1d4ed8; }

.admin-lacking-metric-card.danger {
    background: #fff7f7;
    border-color: #fed7d7;
}
.admin-lacking-metric-card.danger .admin-lacking-metric-icon { background: #fee2e2; color: #b91c1c; }

.admin-lacking-filter-panel {
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #f8fafc;
}

.admin-lacking-filter-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 13px;
}

.admin-lacking-filter-heading strong,
.admin-lacking-filter-heading span {
    display: block;
}

.admin-lacking-filter-heading strong {
    color: #0f172a;
    font-size: .92rem;
}

.admin-lacking-filter-heading strong i {
    margin-right: 7px;
    color: #15803d;
}

.admin-lacking-filter-heading span {
    margin-top: 2px;
    color: #64748b;
    font-size: .82rem;
}

.admin-lacking-reset-button {
    color: #475569 !important;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
}

.admin-lacking-toolbar {
    display: grid;
    grid-template-columns: minmax(280px, 1.35fr) minmax(190px, .65fr) minmax(210px, .75fr);
    gap: 12px;
    margin: 0;
}

.admin-lacking-filter-field {
    display: block;
    min-width: 0;
}

.admin-lacking-filter-field > span {
    display: block;
    margin: 0 0 6px 2px;
    color: #334155;
    font-size: .78rem;
    font-weight: 800;
}

.admin-lacking-filter-field .form-control,
.admin-lacking-filter-field .form-select {
    min-height: 44px;
    border-color: #cbd5e1;
    background-color: #ffffff;
}

.admin-lacking-input-wrap {
    position: relative;
}

.admin-lacking-input-wrap > i {
    position: absolute;
    left: 14px;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

.admin-lacking-input-wrap .form-control {
    padding-left: 40px;
}

.admin-lacking-selection-toolbar {
    grid-template-columns: minmax(280px, 1fr) auto auto;
    padding: 14px 16px;
    border-color: #cdebd5;
    background: #f4fbf6;
}

.admin-lacking-selection-copy {
    align-items: flex-start;
}

.admin-lacking-selection-copy > div strong,
.admin-lacking-selection-copy > div span {
    display: block;
}

.admin-lacking-selection-copy > div strong {
    color: #14532d;
    font-size: .88rem;
}

.admin-lacking-selection-copy > div span {
    margin-top: 2px;
    color: #64748b;
    font-size: .78rem;
    font-weight: 500;
}

.admin-lacking-selection-count {
    min-width: 150px;
    padding: 7px 10px;
    border-radius: 999px;
    color: #166534;
    background: #dcfce7;
    text-align: center;
    white-space: nowrap;
}

.admin-lacking-table-wrap {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #ffffff;
}

.admin-lacking-report-table {
    min-width: 1040px;
    margin-bottom: 0;
}

.admin-lacking-report-table thead th {
    padding: 13px 12px;
    border-bottom: 1px solid #cbd5e1;
    background: #f1f5f9;
    color: #334155;
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .035em;
    vertical-align: middle;
}

.admin-lacking-report-table tbody td {
    padding: 14px 12px;
    border-color: #edf2f7;
    color: #334155;
    font-size: .88rem;
}

.pgmo-lacking-group-row td {
    padding: 0 !important;
    border-top: 1px solid #dbe4df !important;
    border-bottom: 1px solid #dbe4df !important;
}

.pgmo-lacking-group-row td > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 13px;
    color: #334155;
    background: #f8fafc;
    font-size: .83rem;
    font-weight: 800;
}

.pgmo-lacking-group-row td span i {
    width: 18px;
    margin-right: 5px;
    text-align: center;
}

.pgmo-lacking-group-row td strong {
    min-width: 28px;
    padding: 3px 9px;
    border-radius: 999px;
    text-align: center;
    background: #e2e8f0;
}

.pgmo-lacking-group-row.ongoing td > div { color: #166534; background: #ecfdf3; }
.pgmo-lacking-group-row.ongoing td strong { background: #dcfce7; }
.pgmo-lacking-group-row.completed td > div { color: #1d4ed8; background: #eff6ff; }
.pgmo-lacking-group-row.completed td strong { background: #dbeafe; }

.pgmo-lacking-student-name,
.pgmo-lacking-student-id,
.pgmo-lacking-school,
.pgmo-lacking-course {
    display: block;
}

.pgmo-lacking-student-name {
    color: #0f172a;
    font-size: .92rem;
}

.pgmo-lacking-student-id,
.pgmo-lacking-course {
    margin-top: 3px;
    color: #64748b;
    font-size: .77rem;
}

.pgmo-lacking-school {
    color: #334155;
    font-weight: 700;
}

.pgmo-lacking-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border: 1px solid #dbe4df;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: .74rem;
    font-weight: 800;
    white-space: nowrap;
}

.pgmo-lacking-status-badge.ongoing { color: #166534; background: #ecfdf3; border-color: #bbf7d0; }
.pgmo-lacking-status-badge.completed { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }
.pgmo-lacking-status-badge.pending { color: #92400e; background: #fffbeb; border-color: #fde68a; }

.pgmo-lacking-office {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #475569;
    font-weight: 650;
}

.pgmo-lacking-office i {
    color: #94a3b8;
}

.pgmo-lacking-list {
    display: grid;
    gap: 6px;
    padding: 0;
    list-style: none;
}

.pgmo-lacking-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 7px 9px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #f8fafc;
}

.pgmo-lacking-requirement-name {
    color: #334155;
    font-size: .79rem;
    font-weight: 700;
}

.pgmo-lacking-requirement-status {
    flex: 0 0 auto;
    padding: 3px 7px;
    border-radius: 999px;
    color: #991b1b;
    background: #fee2e2;
    font-size: .68rem;
    font-weight: 800;
}

.pgmo-lacking-requirement-status.pending { color: #92400e; background: #fef3c7; }
.pgmo-lacking-requirement-status.returned { color: #991b1b; background: #fee2e2; }
.pgmo-lacking-requirement-status.missing { color: #991b1b; background: #fee2e2; }

.pgmo-lacking-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    border-radius: 999px;
    color: #991b1b;
    background: #fee2e2;
    font-weight: 900;
}

.admin-lacking-report-table tbody tr.pgmo-lacking-row-selected > td {
    background: #f2fbf5;
}

.admin-lacking-report-table tbody tr.pgmo-lacking-row-selected:hover > td {
    background: #e9f8ee;
}

@media (max-width: 1280px) {
    .admin-lacking-metrics {
        grid-template-columns: repeat(3, minmax(170px, 1fr));
    }
}

@media (max-width: 992px) {
    .admin-lacking-report-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-lacking-primary-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .admin-lacking-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .admin-lacking-search-field {
        grid-column: 1 / -1;
    }

    .admin-lacking-selection-toolbar {
        grid-template-columns: 1fr;
    }

    .admin-lacking-selection-count {
        justify-self: start;
    }
}

@media (max-width: 640px) {
    .admin-lacking-report-card {
        padding: 18px !important;
        border-radius: 16px;
    }

    .admin-lacking-title-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .admin-lacking-primary-actions .btn {
        flex: 1 1 100%;
    }

    .admin-lacking-metrics {
        grid-template-columns: 1fr 1fr;
        gap: 9px;
    }

    .admin-lacking-metric-card {
        min-height: 96px;
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
        padding: 13px;
    }

    .admin-lacking-metric-card strong {
        font-size: 1.45rem;
    }

    .admin-lacking-filter-heading {
        align-items: flex-start;
    }

    .admin-lacking-toolbar {
        grid-template-columns: 1fr;
    }

    .admin-lacking-search-field {
        grid-column: auto;
    }

    .admin-lacking-selection-actions .btn {
        flex: 1 1 calc(50% - 4px);
    }
}

/* ADMIN DTR PORTAL VIEWER 2026-07-30 */
#monthlyDtrViewModal .modal-dialog{
    max-width:min(1180px, calc(100vw - 24px));
}

#monthlyDtrViewModal .modal-content{
    border:0;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 24px 70px rgba(17, 35, 57, .22);
}

#monthlyDtrViewModal .modal-header{
    padding:18px 22px;
    background:linear-gradient(135deg, #123d70, #1f5d9a);
    color:#fff;
    border:0;
}

#monthlyDtrViewModal .modal-header .btn-close{
    filter:invert(1) grayscale(1) brightness(2);
}

#monthlyDtrViewModal .modal-body{
    padding:20px;
    background:#edf2f7;
}

.admin-dtr-modal-footer{
    gap:8px;
    padding:14px 20px;
    background:#fff;
    border-top:1px solid #dfe6ee;
}

.admin-dtr-viewer{
    max-width:1050px;
    margin:0 auto;
    padding:24px;
    background:#fff;
    border:1px solid #dbe3ec;
    border-radius:14px;
    box-shadow:0 10px 30px rgba(21, 45, 73, .08);
    color:#172033;
}

.admin-dtr-viewer-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    padding-bottom:16px;
    margin-bottom:16px;
    border-bottom:2px solid #174e86;
}

.admin-dtr-eyebrow{
    display:block;
    margin-bottom:5px;
    color:#5e6f82;
    font-size:.74rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.admin-dtr-viewer-header h2{
    margin:0;
    color:#153e6d;
    font-size:1.55rem;
    letter-spacing:.04em;
}

.admin-dtr-viewer-header p{
    margin:2px 0 0;
    color:#788697;
}

.admin-dtr-viewer-status{
    min-width:170px;
    text-align:right;
}

.admin-dtr-viewer-status > span{
    display:block;
    margin-bottom:7px;
    color:#69788a;
    font-size:.75rem;
    font-weight:700;
    text-transform:uppercase;
}

.admin-dtr-viewer-status > div{
    display:flex;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:6px;
}

.admin-dtr-status-pill{
    display:inline-flex;
    align-items:center;
    min-height:25px;
    padding:3px 10px;
    border:1px solid #b7c4d1;
    border-radius:999px;
    background:#f4f7fa;
    color:#43566b;
    font-size:.76rem;
    font-weight:800;
}

.admin-dtr-status-pill.status-approved{
    border-color:#9ed9b9;
    background:#e9f8ef;
    color:#167044;
}

.admin-dtr-status-pill.status-pending{
    border-color:#efd496;
    background:#fff8e5;
    color:#8a6300;
}

.admin-dtr-status-pill.status-rejected,
.admin-dtr-status-pill.status-returned{
    border-color:#efb1b1;
    background:#fff0f0;
    color:#a52b2b;
}

.admin-dtr-student-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px;
    margin-bottom:16px;
}

.admin-dtr-student-grid > div{
    min-width:0;
    padding:10px 12px;
    border:1px solid #dce4ed;
    border-radius:10px;
    background:#f8fafc;
}

.admin-dtr-student-grid span{
    display:block;
    margin-bottom:3px;
    color:#718095;
    font-size:.69rem;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.admin-dtr-student-grid strong{
    display:block;
    overflow-wrap:anywhere;
    color:#1c2d42;
    font-size:.88rem;
}

.admin-dtr-table-wrap{
    overflow:auto;
    border:1px solid #b8c4d1;
    border-radius:10px;
}

.admin-dtr-full-table{
    width:100%;
    min-width:760px;
    margin:0;
    border-collapse:collapse;
    table-layout:fixed;
    font-size:.78rem;
}

.admin-dtr-full-table th,
.admin-dtr-full-table td{
    height:29px;
    padding:5px 6px;
    border:1px solid #b8c4d1;
    text-align:center;
    vertical-align:middle;
}

.admin-dtr-full-table th{
    background:#eaf0f6;
    color:#263d58;
    font-size:.72rem;
    font-weight:800;
    text-transform:uppercase;
}

.admin-dtr-full-table td:first-child{
    width:54px;
    color:#173f70;
    font-weight:800;
}

.admin-dtr-full-table td small{
    display:block;
    margin-top:1px;
    color:#8a5b00;
    font-size:.58rem;
    font-weight:800;
}

.admin-dtr-weekend-row td{
    background:#f7f8fa;
    color:#687688;
}

.admin-dtr-inactive-row td{
    background:#fbfcfd;
    color:#a1acb8;
}

.admin-dtr-full-table tfoot td{
    background:#eaf4ff;
    color:#123f70;
    font-weight:900;
}

.admin-dtr-full-table tfoot td:first-child{
    text-align:right;
}

.admin-dtr-certification{
    padding:16px 4px 4px;
}

.admin-dtr-certification > p{
    margin:0 0 32px;
    color:#45566a;
    font-size:.82rem;
    line-height:1.55;
}

.admin-dtr-signature-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:90px;
    padding:0 45px;
}

.admin-dtr-signature-grid > div{
    padding-top:6px;
    border-top:1px solid #2f3d4d;
    text-align:center;
}

.admin-dtr-signature-grid span{
    color:#536274;
    font-size:.76rem;
}

.admin-dtr-history{
    margin-top:22px;
    padding-top:18px;
    border-top:1px solid #dfe6ee;
}

.admin-dtr-history h3{
    margin:0 0 10px;
    color:#1c3f67;
    font-size:1rem;
}

.admin-dtr-history-item{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    gap:8px 12px;
    padding:11px 12px;
    border:1px solid #dce4ed;
    border-radius:10px;
    background:#f8fafc;
}

.admin-dtr-history-item + .admin-dtr-history-item{
    margin-top:8px;
}

.admin-dtr-history-item strong,
.admin-dtr-history-item span{
    display:block;
}

.admin-dtr-history-item span{
    margin-top:2px;
    color:#6a798a;
    font-size:.76rem;
}

.admin-dtr-history-item p{
    grid-column:1 / -1;
    margin:0;
    color:#43556a;
    font-size:.78rem;
}

@media (max-width: 800px){
    #monthlyDtrViewModal .modal-body{
        padding:10px;
    }

    .admin-dtr-viewer{
        padding:15px;
        border-radius:10px;
    }

    .admin-dtr-viewer-header{
        flex-direction:column;
    }

    .admin-dtr-viewer-status{
        min-width:0;
        text-align:left;
    }

    .admin-dtr-viewer-status > div{
        justify-content:flex-start;
    }

    .admin-dtr-student-grid{
        grid-template-columns:1fr 1fr;
    }

    .admin-dtr-signature-grid{
        gap:35px;
        padding:0 10px;
    }
}

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

    .admin-dtr-signature-grid{
        grid-template-columns:1fr;
        gap:40px;
    }
}

/* PGMO CERTIFICATE WRAPPED TEXT PATCH 2026-07-31
   Certificate values keep readable fixed sizes and wrap naturally instead of
   shrinking. The flow layout moves later lines down when an earlier value wraps. */
.liceo-cert-template .cert-content-flow,
.certificate-print-body .liceo-cert-template .cert-content-flow{
    position:absolute !important;
    left:16% !important;
    top:46.25% !important;
    width:68% !important;
    height:33.0% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:2px !important;
    z-index:4 !important;
    overflow:visible !important;
}
.liceo-cert-template .cert-content-flow .cert-overlay,
.certificate-print-body .liceo-cert-template .cert-content-flow .cert-overlay{
    position:static !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    width:100% !important;
    max-width:100% !important;
    min-height:0 !important;
    max-height:none !important;
    transform:none !important;
    display:block !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
    text-align:center !important;
    line-height:1.14 !important;
    flex:0 0 auto !important;
}
.liceo-cert-template .cert-content-flow .cert-student-name,
.certificate-print-body .liceo-cert-template .cert-content-flow .cert-student-name{
    font-size:30px !important;
    font-family:"Rustic Roadway", "Rustic Roadway - Personal use", "Times New Roman", serif !important;
    font-weight:400 !important;
    line-height:.96 !important;
    letter-spacing:0 !important;
    margin:0 !important;
}
.liceo-cert-template .cert-content-flow .cert-name-underline,
.certificate-print-body .liceo-cert-template .cert-content-flow .cert-name-underline{
    position:static !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    width:100% !important;
    height:0 !important;
    transform:none !important;
    border-top:1.6px solid #111 !important;
    margin:1px 0 0 !important;
    flex:0 0 auto !important;
}
.liceo-cert-template .cert-content-flow .cert-course-line,
.certificate-print-body .liceo-cert-template .cert-content-flow .cert-course-line{
    font-size:18px !important;
}
.liceo-cert-template .cert-content-flow .cert-student-label,
.certificate-print-body .liceo-cert-template .cert-content-flow .cert-student-label{
    font-size:17px !important;
}
.liceo-cert-template .cert-narrative-flow,
.liceo-cert-template .cert-given-flow,
.certificate-print-body .liceo-cert-template .cert-narrative-flow,
.certificate-print-body .liceo-cert-template .cert-given-flow{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:1px !important;
    flex:0 0 auto !important;
}
.liceo-cert-template .cert-narrative-flow,
.certificate-print-body .liceo-cert-template .cert-narrative-flow{
    margin-top:7px !important;
}
.liceo-cert-template .cert-given-flow,
.certificate-print-body .liceo-cert-template .cert-given-flow{
    margin-top:14px !important;
}
.liceo-cert-template .cert-narrative-flow .cert-overlay,
.certificate-print-body .liceo-cert-template .cert-narrative-flow .cert-overlay{
    font-size:17px !important;
}
.liceo-cert-template .cert-given-flow .cert-overlay,
.certificate-print-body .liceo-cert-template .cert-given-flow .cert-overlay{
    font-size:16px !important;
}
.liceo-cert-template .cert-signatory-name,
.certificate-print-body .liceo-cert-template .cert-signatory-name{
    left:20% !important;
    top:84.4% !important;
    width:60% !important;
    max-width:60% !important;
    transform:none !important;
    text-align:center !important;
    font-size:23px !important;
    white-space:normal !important;
    overflow:visible !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
    line-height:1.05 !important;
}


/* PGMO CERTIFICATE SIGNATORY CLARITY PATCH 2026-07-31
   Replaces the low-resolution text baked into the template with live browser text
   so the department-head title and OIC office line remain sharp in preview, print,
   and PDF export. */
.liceo-cert-template .cert-signatory-title,
.liceo-cert-template .cert-signatory-office,
.certificate-print-body .liceo-cert-template .cert-signatory-title,
.certificate-print-body .liceo-cert-template .cert-signatory-office{
    display:block !important;
    left:18% !important;
    width:64% !important;
    max-width:64% !important;
    transform:none !important;
    text-align:center !important;
    font-family:"Times New Roman", Times, serif !important;
    font-weight:400 !important;
    color:#111 !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    line-height:1.08 !important;
    text-rendering:geometricPrecision !important;
    -webkit-font-smoothing:antialiased !important;
}
.liceo-cert-template .cert-signatory-title,
.certificate-print-body .liceo-cert-template .cert-signatory-title{
    top:88.15% !important;
    font-size:15px !important;
}
.liceo-cert-template .cert-signatory-office,
.certificate-print-body .liceo-cert-template .cert-signatory-office{
    top:90.15% !important;
    font-size:15px !important;
    font-weight:700 !important;
}


/* PGMO CERTIFICATE APPROVED TEMPLATE + LARGER BODY TEXT PATCH 2026-07-31
   Uses the supplied certificate-template.png, whose signatory block is already
   printed in the artwork. Dynamic certificate details remain live and readable. */
.liceo-cert-template .cert-narrative-flow .cert-overlay,
.certificate-print-body .liceo-cert-template .cert-narrative-flow .cert-overlay{
    font-size:20px !important;
    line-height:1.16 !important;
}
.liceo-cert-template .cert-given-flow .cert-overlay,
.certificate-print-body .liceo-cert-template .cert-given-flow .cert-overlay{
    font-size:19px !important;
    line-height:1.16 !important;
}
.liceo-cert-template .cert-content-flow,
.certificate-print-body .liceo-cert-template .cert-content-flow{
    gap:3px !important;
}
.liceo-cert-template .cert-narrative-flow,
.certificate-print-body .liceo-cert-template .cert-narrative-flow{
    gap:2px !important;
    margin-top:8px !important;
}
.liceo-cert-template .cert-given-flow,
.certificate-print-body .liceo-cert-template .cert-given-flow{
    gap:2px !important;
    margin-top:15px !important;
}
/* Prevent duplicate or blurred signatory text. The approved template contains it. */
.liceo-cert-template .cert-signatory-name,
.liceo-cert-template .cert-signatory-title,
.liceo-cert-template .cert-signatory-office,
.certificate-print-body .liceo-cert-template .cert-signatory-name,
.certificate-print-body .liceo-cert-template .cert-signatory-title,
.certificate-print-body .liceo-cert-template .cert-signatory-office,
.certificate-pdf-export .cert-signatory-name,
.certificate-pdf-export .cert-signatory-title,
.certificate-pdf-export .cert-signatory-office{
    display:none !important;
}


/* PGMO CERTIFICATE NEAT SINGLE-LINE FIT PATCH 2026-07-31
   Keeps the school, training, date, office, and issuance sentences on clean
   single lines. The certificate body uses more of the available page width;
   JavaScript only compresses a line horizontally when an unusually long value
   still exceeds the safe area. Font height is preserved. */
.liceo-cert-template .cert-content-flow,
.certificate-print-body .liceo-cert-template .cert-content-flow{
    left:5% !important;
    width:90% !important;
}
.liceo-cert-template .cert-content-flow .cert-fit-line,
.certificate-print-body .liceo-cert-template .cert-content-flow .cert-fit-line{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:normal !important;
    word-break:keep-all !important;
    text-align:center !important;
    transform-origin:center top !important;
}