.available{color:#067647!important}
.unavailable{color:#b42318!important}
.login-dialog{width:min(620px,calc(100% - 28px));border:0;border-radius:16px;padding:22px;box-shadow:0 24px 80px #10182840}
.login-dialog::backdrop{background:#10182888}
.login-dialog .dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
@media(max-width:560px){.login-dialog .dialog-actions{flex-direction:column-reverse}.login-dialog .dialog-actions .btn{width:100%}}
.badge-card{width:min(100%,420px);min-height:230px;margin:16px auto;padding:20px;border:2px solid #17202f;border-radius:14px;display:grid;grid-template-columns:1fr 130px;grid-template-rows:auto auto 1fr;gap:7px;background:#fff}.badge-card strong{font-size:24px}.badge-card span{grid-column:1;color:#667085;font-weight:800;letter-spacing:.1em}.badge-card img{grid-column:2;grid-row:1/5;width:120px;height:120px;align-self:center;image-rendering:pixelated}.badge-card b{grid-column:1;align-self:end;font-size:18px}.badge-card code{grid-column:1;font-size:10px;overflow-wrap:anywhere}

.hide{display:none!important}
.pin-enrollment-dialog{width:min(680px,calc(100% - 28px));padding:28px}
.privacy-callout{display:flex;flex-direction:column;gap:6px;margin:14px 0;padding:16px;border:2px solid #175cd3;border-radius:12px;background:#eff8ff;color:#1849a9}
.privacy-callout strong{font-size:22px;color:#17202f}
.private-pin-input{min-height:64px;font-size:30px!important;font-weight:800;letter-spacing:.3em;text-align:center;font-variant-numeric:tabular-nums}
.privacy-footnote{margin-top:14px;padding:12px;border-radius:10px;background:#ecfdf3;color:#067647;font-weight:800;text-align:center}
.pin-enrollment-dialog .dialog-actions .btn{min-height:48px}
@media(max-width:560px){.pin-enrollment-dialog{padding:20px}.private-pin-input{font-size:26px!important}}


/* PIN-first employee administration */
.pin-first-card{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;margin:2px 0 4px;padding:16px 18px;border:1px solid #b2ddff;border-left:5px solid #2563eb;border-radius:10px;background:#f0f7ff;color:#1849a9}
.pin-first-card .pin-step{grid-row:1/3;align-self:stretch;display:grid;place-items:center;min-width:110px;padding:10px;border-radius:8px;background:#172b4d;color:#fff;font-size:.76rem;font-weight:900;letter-spacing:.05em;text-align:center;text-transform:uppercase}
.pin-first-card strong{font-size:1.05rem;color:#102a43}
.pin-first-card p{margin:3px 0 0;line-height:1.42}
.management-credential-field{grid-column:span 2}
.employee-actions{display:grid;grid-template-columns:repeat(2,minmax(118px,1fr));gap:7px;align-items:stretch;min-width:280px}
.employee-actions .btn{min-height:42px;padding:8px 10px;white-space:normal}
.employee-actions .pin-state{display:grid;place-items:center;min-height:42px;padding:7px 10px;border-radius:8px;font-size:.78rem;font-weight:900;text-align:center}
.pin-state.ready{background:#ecfdf3;color:#067647}
.pin-state.required{background:#fff1f0;color:#b42318}
.pill.pin-only{background:#eaf1ff;color:#175cd3}
.credential-caption{display:block;margin-top:4px;color:#667085;line-height:1.25}
.actions{min-width:300px;white-space:normal!important}
@media(max-width:950px){
  .management-credential-field{grid-column:span 1}
  .employee-actions{min-width:0}
  .actions{min-width:0}
}
@media(max-width:560px){
  .pin-first-card{grid-template-columns:1fr}
  .pin-first-card .pin-step{grid-row:auto;min-width:0;margin-bottom:10px}
  .employee-actions{grid-template-columns:1fr}
}


/* Keep the employee-badge modal entirely in the ordinary page compositor.
   Chromium's dialog rendering path could retain incomplete text/image tiles
   after async badge content loaded, even outside the native top layer. */
.badge-dialog-layer{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:14px;background:#10182888}
.badge-dialog-layer.hide{display:none!important}
.badge-dialog-layer .login-dialog{display:block;position:relative;margin:0;max-height:calc(100vh - 28px);overflow:auto;background:var(--surface);color:var(--ink);box-sizing:border-box;outline:0}