.employee-id-workspace .section-head{align-items:flex-start;gap:16px}.employee-id-heading{border-bottom:1px solid #e2e8f0;padding-bottom:14px}.employee-id-actions{display:flex;gap:8px;flex-wrap:wrap}.employee-id-upload{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:9px 14px;border:1px solid #cddbd7;border-radius:10px;background:linear-gradient(180deg,#fff,#f8fbfa);color:var(--brand);font-weight:800;cursor:pointer;box-shadow:0 1px 2px rgb(15 46 39 / 8%)}.employee-id-upload input{position:absolute;opacity:0;width:1px;height:1px}.employee-id-preview{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start;margin-top:20px}

/* Exact CR80 preview proportion: both faces are identical and content is fitted
   inside the physical card rather than increasing the card height. */
.employee-id-card{position:relative;box-sizing:border-box;width:323px;height:204px;min-height:204px;max-height:204px;border:1px solid #cbd5e1;border-radius:16px;overflow:hidden;background:#fff;color:#102a43;box-shadow:0 8px 26px rgba(15,23,42,.14);font-size:9px;line-height:1.16;display:flex;flex-direction:column}
.employee-id-watermark{position:absolute;inset:68px 0 auto;text-align:center;font-weight:900;font-size:32px;letter-spacing:4px;color:rgba(11,79,145,.035);transform:rotate(-18deg);pointer-events:none}
.employee-id-card header{position:relative;display:flex;align-items:center;gap:8px;height:48px;min-height:48px;padding:6px 11px;background:linear-gradient(135deg,#082f5f,#0b4f91);color:#fff;flex:0 0 48px}
.employee-id-card header img{width:32px;height:32px;object-fit:contain}.employee-id-card header b{font-size:16px;line-height:1;letter-spacing:.4px}.employee-id-card header small{display:block;margin-top:2px;font-size:6.5px;line-height:1}.employee-badge-status{margin-left:auto;padding:4px 8px;border-radius:999px;font-size:7px;font-weight:900;letter-spacing:.5px}.employee-badge-status.active{background:#e8f7ef;color:#17633d}.employee-badge-status.inactive{background:#fff1f1;color:#a92727}

.employee-id-main{position:relative;display:flex;justify-content:space-between;align-items:center;height:72px;min-height:72px;padding:7px 14px 3px;flex:0 0 72px}
.employee-id-main img,.employee-badge-photo-placeholder{width:60px;height:66px;border-radius:8px;object-fit:cover;border:2px solid #0b4f91;box-shadow:0 2px 8px rgba(2,31,64,.12)}.employee-badge-photo-placeholder{display:grid;place-items:center;background:#e8eef5;font-size:22px;font-weight:800}
.employee-id-qr-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px;background:#fff;border:1px solid #d7e0ea;border-radius:8px}.employee-id-qr-wrap svg{display:block;width:52px;height:52px}.employee-id-qr-wrap small{font-size:6px;line-height:1;font-weight:900;letter-spacing:.4px;color:#27435d}

.employee-id-front h3{position:relative;margin:3px 14px 0;font-size:13px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.employee-id-front>strong{position:relative;display:block;margin:2px 14px 0;color:#0b4f91;font-size:8.5px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.employee-id-front dl{position:relative;display:grid;grid-template-columns:72px 1fr;gap:1px 5px;margin:4px 14px 5px;font-size:7.5px;line-height:1.05}.employee-id-front dt{font-weight:900}.employee-id-front dd{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.employee-id-card footer{position:relative;height:22px;min-height:22px;padding:0 9px;background:#082f5f;color:#fff;text-align:center;font-size:8px;line-height:22px;font-weight:900;letter-spacing:.25px;margin-top:auto;flex:0 0 22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.employee-id-property{position:relative;margin:0;padding:10px 14px 4px;text-align:center;font-size:8.5px;line-height:1.2;flex:0 0 auto}.employee-id-back-grid{position:relative;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:2px 14px 4px;min-height:89px;flex:1 1 auto}.employee-id-back-grid b,.employee-id-back-grid span{display:block}.employee-id-back-grid b{margin-top:3px;font-size:6.5px;line-height:1;letter-spacing:.35px}.employee-id-back-grid span{font-size:8px;line-height:1.05}.employee-id-back .employee-id-qr-wrap svg{width:48px;height:48px}.employee-id-contact{position:relative;margin:0;padding:5px 14px;background:#f4f7fa;font-size:6.8px;line-height:1.15;flex:0 0 auto}.employee-id-contact span{color:#617386}

.employee-id-note{max-width:760px;color:#52606d}.employee-id-security{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:20px;padding:14px 16px;border:1px solid #dbe7e3;border-radius:12px;background:#f8fbfa}.employee-id-security>div:first-child{display:flex;flex-direction:column;gap:3px}.employee-id-security span{color:#60706b}.employee-id-admin-actions{display:flex;gap:8px;flex-wrap:wrap}.employee-badge-back{margin-bottom:14px}body:has(.employee-id-workspace) #secure24CommDock{display:none!important}

@media(max-width:650px){.employee-id-preview{justify-content:center}.employee-id-card{width:min(100%,323px);height:auto;min-height:0;max-height:none;aspect-ratio:85.6/53.98}.employee-id-actions{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.employee-id-actions>*{width:100%;min-width:0}.employee-id-actions .primary{grid-column:span 1}.employee-id-security{align-items:stretch}.employee-id-admin-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.employee-id-admin-actions .danger{grid-column:1/-1}.employee-id-admin-actions button{width:100%}}
@media(max-width:360px){.employee-id-actions,.employee-id-admin-actions{grid-template-columns:1fr}.employee-id-admin-actions .danger{grid-column:auto}}

@media print{@page{size:auto;margin:6mm}html,body{margin:0!important;padding:0!important}body *{visibility:hidden}.employee-id-preview,.employee-id-preview *{visibility:visible}.employee-id-preview{position:absolute;left:0;top:0;display:flex;gap:8mm;align-items:flex-start}.employee-id-card{box-sizing:border-box;width:85.6mm!important;height:53.98mm!important;min-height:53.98mm!important;max-height:53.98mm!important;aspect-ratio:auto!important;box-shadow:none!important;border-radius:3mm!important;overflow:hidden!important;break-inside:avoid!important;page-break-inside:avoid!important;display:flex!important;flex-direction:column!important}.employee-id-card header{height:12.7mm!important;min-height:12.7mm!important;flex-basis:12.7mm!important}.employee-id-main{height:19mm!important;min-height:19mm!important;flex-basis:19mm!important}.employee-id-card footer{height:5.8mm!important;min-height:5.8mm!important;line-height:5.8mm!important;flex-basis:5.8mm!important;margin-top:auto!important}.employee-id-workspace>.section-head,.employee-id-note,.employee-id-security,.back-button{display:none!important}}