/* COLORJET employee ID card: matches the approved midnight-navy/orange demo.
   Only the existing self-service ID card is styled; document/business UI is untouched. */
html body .cj-id-card{
  color:#f8fafc;
  background:
    radial-gradient(circle at 84% 18%,rgba(255,255,255,.045) 0 15%,transparent 15.3%),
    linear-gradient(145deg,#080e19 0%,#111c30 58%,#0b1220 100%);
  border:1px solid #27364b;
  box-shadow:0 18px 48px rgba(15,23,42,.22);
}
html body .cj-id-top{
  background:linear-gradient(140deg,#070c16,#142037 72%,#0c1423);
  color:#f8fafc;
  border-bottom:1px solid rgba(249,115,22,.62);
}
html body .cj-id-top img{
  background:#fff;
  border-radius:9px;
  padding:4px;
}
html body .cj-id-top b{color:#fff;letter-spacing:.2px}
html body .cj-id-top small{color:#cbd5e1;opacity:1}
html body .cj-id-photo{
  background:#172033;
  border:3px solid #f97316;
  box-shadow:0 5px 16px rgba(0,0,0,.24);
}
html body .cj-id-card .cj-id-photo[style*="display:grid"]{
  color:#fb923c!important;
  background:#172033!important;
}
html body .cj-id-body h2{
  color:#f8fafc;
  text-transform:uppercase;
  letter-spacing:.45px;
}
html body .cj-id-role{color:#fb923c}
html body .cj-id-dept{color:#cbd5e1}
html body .cj-id-field{
  color:#f8fafc;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(148,163,184,.3);
}
html body .cj-id-field small{color:#cbd5e1}
html body .cj-id-field b{color:#fff}
html body .cj-id-fields .cj-id-field:first-child{
  border-color:#f97316;
  background:rgba(249,115,22,.09);
}
/* Keep longer work emails readable in the fixed CR80 information grid. */
html body .cj-id-fields .cj-id-field:last-child{
  grid-column:1 / -1;
}
html body .cj-id-fields .cj-id-field:last-child b{
  font-size:9px;
  line-height:1.25;
}
html body .cj-id-band{
  color:#111827;
  background:linear-gradient(90deg,#f97316,#fb923c);
  letter-spacing:.65px;
}
html body .cj-id-back{color:#e2e8f0}
html body .cj-id-back h3{color:#fb923c}
html body .cj-id-back p{color:#e2e8f0}
html body .cj-id-verify{
  color:#f8fafc;
  border-color:#fb923c;
  background:rgba(255,255,255,.045);
}
@media (max-width:700px){
  html body .cj-id-preview{gap:12px;padding:4px}
  html body .cj-id-card{max-width:min(324px,calc(100vw - 36px))}
}
@page employee-id-card{
  size:54mm 85.6mm;
  margin:0;
}
@media print{
  body.cj-id-printing .cj-id-print-zone{page:employee-id-card}
  body.cj-id-printing .cj-id-print-zone{
    position:absolute!important;
    left:0!important;
    top:0!important;
    display:block!important;
    width:54mm!important;
    margin:0!important;
    padding:0!important;
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
  }
  body.cj-id-printing .cj-id-card{
    box-sizing:border-box!important;
    width:54mm!important;
    height:85.6mm!important;
    min-height:85.6mm!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
  }
  body.cj-id-printing .cj-id-card.cj-id-back-card{display:none!important}
}