*{box-sizing:border-box}body{font-family:Arial,sans-serif;background:#f4f7f9;color:#1d2a33;margin:0}.wrap{max-width:1100px;margin:28px auto;padding:18px}.card{background:#fff;border-radius:10px;padding:22px;margin-bottom:18px;box-shadow:0 2px 12px rgba(0,0,0,.08)}h1,h2,h3{margin-top:0}label{display:block;font-weight:700;margin:12px 0 6px}input,select,textarea,button{width:100%;padding:10px;border:1px solid #ccd5db;border-radius:6px;font-size:15px}button,.button{display:inline-block;background:#0b6280;color:#fff;border:0;text-decoration:none;text-align:center;cursor:pointer;padding:10px 14px;border-radius:6px;width:auto}.button.red,button.red{background:#a52b2b}.button.gray{background:#60717a}.grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.photo{width:150px;height:190px;object-fit:cover;border-radius:8px;background:#eee}.thumb{width:45px;height:55px;object-fit:cover;border-radius:5px}.certificate{display:grid;grid-template-columns:180px 1fr;gap:22px}.error{background:#ffe4e4;color:#8a1717;padding:12px;border-radius:6px;margin:10px 0}.success{background:#e4f7ea;color:#176b34;padding:12px;border-radius:6px;margin:10px 0}.muted{color:#65727a}.topnav{display:flex;justify-content:space-between;gap:12px;align-items:center}.navlinks a{margin-left:12px;text-decoration:none}.navlinks .active{font-weight:bold;text-decoration:underline}.tablewrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:9px;border-bottom:1px solid #e3e7ea;text-align:left;vertical-align:top}.badge{display:inline-block;padding:4px 8px;border-radius:12px;background:#e9eef1}.badge.Active{background:#daf2df}.badge.Suspended{background:#fff2c7}.badge.Revoked{background:#ffdada}.actions{display:flex;gap:6px;flex-wrap:wrap}.searchbar{display:grid;grid-template-columns:1fr auto;gap:10px}.stat{font-size:28px;font-weight:bold}@media(max-width:760px){.grid,.grid3,.certificate,.searchbar{grid-template-columns:1fr}.topnav{align-items:flex-start;flex-direction:column}.navlinks a{display:inline-block;margin:5px 10px 5px 0}.wrap{margin:8px auto}}@media print{.no-print{display:none!important}.card{box-shadow:none}.wrap{max-width:none;margin:0}.certificate-print{border:2px solid #123;padding:40px;min-height:700px}}
.site-brand{display:flex;align-items:center;gap:16px}.site-logo{width:150px;max-height:80px;object-fit:contain}.certificate-logo{width:190px;max-height:95px;object-fit:contain}.native-file{display:none!important}.file-control{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.file-control .file-button{margin:0}.file-name{color:#65727a;font-size:14px}.expiry-row.hidden{display:none}@media(max-width:650px){.site-logo{width:120px}.certificate-logo{width:150px}}

.qualification-preview,.qualification-text{background:#eef5f7;border-left:4px solid #0b6280;padding:12px;border-radius:5px;line-height:1.55}
.qualification-text{margin-top:18px}

/* Standardized certificate photo display */
.photo{
    width:150px;
    height:200px;
    object-fit:cover;
    object-position:center;
    aspect-ratio:3/4;
}
.thumb{
    width:45px;
    height:60px;
    object-fit:cover;
    object-position:center;
    aspect-ratio:3/4;
}

/* Single-page certificate printing */
@page{
    size:Letter portrait;
    margin:8mm;
}
@media print{
    html,body{
        width:100%;
        height:auto;
        margin:0!important;
        padding:0!important;
        background:#fff!important;
        font-size:11pt;
    }
    body{
        -webkit-print-color-adjust:exact;
        print-color-adjust:exact;
    }
    .no-print{
        display:none!important;
    }
    .wrap{
        width:100%;
        max-width:none!important;
        margin:0!important;
        padding:0!important;
    }
    .certificate-print{
        width:100%;
        min-height:0!important;
        height:auto!important;
        margin:0!important;
        padding:12mm!important;
        border:2px solid #123!important;
        box-shadow:none!important;
        page-break-inside:avoid!important;
        break-inside:avoid-page!important;
        overflow:hidden!important;
    }
    .certificate-print h1{
        font-size:22pt;
        margin:4px 0;
    }
    .certificate-print h2{
        font-size:17pt;
        margin:4px 0 8px;
    }
    .certificate-print p{
        margin:5px 0;
        line-height:1.35;
    }
    .certificate-print .certificate{
        grid-template-columns:145px 1fr;
        gap:18px;
        align-items:start;
    }
    .certificate-print .photo{
        width:135px;
        height:180px;
    }
    .certificate-logo{
        width:150px!important;
        max-height:70px!important;
    }
    #qrcode img,
    #qrcode canvas{
        width:90px!important;
        height:90px!important;
    }
    .qualification-text{
        margin-top:10px!important;
        padding:9px!important;
        line-height:1.35!important;
    }
    hr{
        margin:8px 0!important;
    }
}

/* v2.2.4 compact certificate header */
.certificate-header{display:flex;justify-content:space-between;align-items:center;gap:18px}
.certificate-brand{display:flex;align-items:center;gap:14px;min-width:0}
.certificate-brand-text h1{margin:0 0 3px;font-size:30px;line-height:1.05}
.certificate-brand-text div{font-size:15px;color:#65727a}
.certificate-logo{width:120px;max-height:92px;object-fit:contain;object-position:center}

@page{size:Letter portrait;margin:6mm}
@media print{
    html,body{width:100%!important;height:100%!important;margin:0!important;padding:0!important}
    .wrap{width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
    .certificate-print{
        width:100%!important;
        height:calc(11in - 12mm)!important;
        min-height:0!important;
        max-height:calc(11in - 12mm)!important;
        margin:0!important;
        padding:8mm!important;
        border:1.5px solid #123!important;
        border-radius:0!important;
        box-shadow:none!important;
        overflow:hidden!important;
        page-break-inside:avoid!important;
        break-inside:avoid-page!important;
        font-size:9.5pt!important;
    }
    .certificate-header{
        display:flex!important;
        flex-direction:row!important;
        justify-content:space-between!important;
        align-items:center!important;
        gap:12px!important;
        min-height:72px!important;
    }
    .certificate-brand{
        display:flex!important;
        flex-direction:row!important;
        align-items:center!important;
        gap:10px!important;
    }
    .certificate-logo{
        width:88px!important;
        height:68px!important;
        max-height:68px!important;
        object-fit:contain!important;
    }
    .certificate-brand-text h1{
        font-size:19pt!important;
        line-height:1!important;
        margin:0 0 2px!important;
        white-space:nowrap!important;
    }
    .certificate-brand-text div{font-size:9.5pt!important}
    #qrcode{flex:0 0 74px!important;width:74px!important;height:74px!important}
    #qrcode img,#qrcode canvas{width:74px!important;height:74px!important}
    .certificate-print hr{margin:5px 0 7px!important}
    .certificate-print .certificate{
        display:grid!important;
        grid-template-columns:105px minmax(0,1fr)!important;
        gap:13px!important;
        align-items:start!important;
    }
    .certificate-print .photo{
        width:100px!important;
        height:133px!important;
        border-radius:4px!important;
    }
    .certificate-print h1{font-size:17pt!important;line-height:1.05!important;margin:2px 0 4px!important}
    .certificate-print h2{font-size:14pt!important;line-height:1.1!important;margin:0 0 5px!important}
    .certificate-print p{font-size:9.5pt!important;line-height:1.22!important;margin:3px 0!important}
    .certificate-print .badge{padding:2px 6px!important}
    .qualification-text{
        margin-top:7px!important;
        padding:7px 8px!important;
        line-height:1.22!important;
        font-size:9pt!important;
    }
    .qualification-text p{font-size:9pt!important;line-height:1.22!important;margin:3px 0 0!important}
}

.file-control .file-button{width:auto!important;display:inline-block!important}

.inline-delete-form{display:inline-block;margin:0}
.inline-delete-form button{width:auto}

.badge.PendingApproval{background:#fff2c7;color:#705800}
.badge.Approved{background:#daf2df;color:#176b34}

.checkbox-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;margin:10px 0}
.check-option{display:flex;align-items:center;gap:8px;font-weight:normal;margin:0;padding:7px 8px;border:1px solid #e3e7ea;border-radius:6px}
button:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:650px){.checkbox-grid{grid-template-columns:1fr}}