:root{--wine:#751710;--gold:#c5943a;--paper:#fdf8f3;--soft:#f4e9e4;--ink:#393331}*{box-sizing:border-box}body{margin:0;background:#eef0f4;color:#20242c;font-family:Arial,Helvetica,sans-serif}.toolbar{display:flex;justify-content:space-between;align-items:center;padding:17px 30px;background:#fff;border-bottom:1px solid #ddd;box-shadow:0 2px 12px #14213d0b}.toolbar strong{color:var(--wine);font-size:26px}.toolbar span{color:#536075;margin-left:8px}.new,.primary{background:var(--wine);color:white;border:0;text-decoration:none;border-radius:8px;padding:11px 16px;cursor:pointer;font-weight:bold}.workspace{max-width:1600px;margin:25px auto;padding:0 20px;display:grid;grid-template-columns:350px minmax(0,1fr);gap:22px}.panel,.preview{border:1px solid #e2e6eb;border-radius:12px;background:white;padding:22px;box-shadow:0 3px 18px #15213b0a}.editor h2,.preview h2{margin:0 0 6px;font-size:21px}.sub,.preview-head p,.print-tip{font-size:13px;color:#747e8a}.editor label{display:block;margin:16px 0 0;font-weight:600;font-size:13px;color:#404b5a}.editor input,.editor select{display:block;width:100%;margin-top:7px;padding:10px 11px;border-radius:7px;border:1px solid #cdd4de;font-size:14px;background:white}.editor input[type=file]{font-size:12px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.primary{margin-top:20px;width:100%;font-size:14px}.actions{display:flex;gap:8px;margin-top:10px}.actions button,.preview-head button{padding:10px 12px;border:1px solid #bfc7d1;background:white;border-radius:8px;cursor:pointer}.actions form{margin:0}.actions .danger{color:#ae2929}.alert,.success{padding:11px;border-radius:8px;margin:10px 0;font-size:13px}.alert{background:#ffe4e4;color:#8e2020}.success{background:#e5f8e9;color:#236d34}.editor h3{margin-top:29px}.saved{max-height:260px;overflow:auto}.employee-link{display:flex;justify-content:space-between;gap:10px;padding:10px 0;text-decoration:none;color:#263040;border-bottom:1px solid #e9edf2;font-size:13px}.employee-link small{display:block;color:#718092;margin-top:3px}.employee-link b{color:var(--wine)}.preview-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.cards{display:flex;gap:22px;align-items:flex-start;justify-content:center;flex-wrap:wrap}.id-card{width:375px;height:500px;flex:0 0 375px;position:relative;overflow:hidden;background:var(--paper);color:var(--ink);box-shadow:0 5px 20px #0002;font-family:Arial,Helvetica,sans-serif}.gold-strip{height:11px;background:var(--gold);position:absolute;top:0;left:0;right:0}.masthead{height:72px;display:flex;align-items:center;justify-content:center;margin-top:12px;position:relative;z-index:1}.masthead img{display:block;width:260px;height:60px;object-fit:contain;mix-blend-mode:multiply}.rule{height:1.5px;background:var(--gold);margin:0 28px}.front{background:linear-gradient(to bottom,#fffaf5 0 35%,#f5e9e5 35% 83%,#fffaf5 83%)}.corner{position:absolute;right:0;top:0;width:75px;height:75px;background:var(--wine);clip-path:polygon(0 0,100% 0,100% 100%)}.portrait-box{position:relative;width:175px;height:177px;margin:9px auto 4px;border:4px solid var(--gold);border-radius:21px;background:white;padding:10px}.portrait{width:100%;height:100%;background:#f2f2f2;overflow:hidden}.portrait img{height:100%;width:100%;object-fit:cover}.placeholder{display:flex;align-items:center;justify-content:center;height:100%;color:#999;font-size:19px;font-weight:bold}.round-badge{background:var(--wine);color:white;border-radius:50%;display:grid;place-items:center;height:40px;width:40px;font-size:13px;position:absolute;right:-13px;bottom:3px}.person-name{height:42px;display:flex;justify-content:center;align-items:center;font-weight:800;font-size:18px;color:var(--wine);text-align:center;padding:0 20px;overflow-wrap:anywhere;line-height:1.05}.details-rule{margin:0 33px}.details{padding:12px 28px 0}.detail{background:#f7eee8;border-radius:12px;min-height:38px;padding:7px 11px;margin-bottom:6px;display:flex;flex-direction:column;gap:3px}.detail.alt{background:#ecf1f2}.detail small{font-size:8px;color:#8d7974;font-weight:bold}.detail strong{font-size:12px;color:#343030;overflow-wrap:anywhere}.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.detail-grid .detail{min-height:42px;padding:6px 8px;margin:0}.detail-grid .detail strong{font-size:11px}.detail-grid .detail .maroon{color:var(--wine);font-size:13px}.front-foot{position:absolute;bottom:0;left:0;right:0;height:50px;background:var(--wine);color:white;border-top:4px solid var(--gold);display:flex;justify-content:space-between;align-items:center;padding:6px 25px}.front-foot div{display:flex;flex-direction:column;gap:5px}.front-foot small{color:#edc484;font-size:9px;letter-spacing:.8px;font-weight:bold}.front-foot strong{font-size:12px}.front-foot span{border-radius:25px;background:#a83d32;padding:8px 13px;font-size:10px;font-weight:bold}.back{background:linear-gradient(#fffaf5 0 23%,#f4e8e4 23% 75%,#fffaf5 75%)}.back .masthead{height:63px}.back .masthead img{width:260px;height:58px}.back h2{text-align:center;font-size:12px;letter-spacing:1.1px;color:var(--wine);margin:10px 0}.employee-box{height:64px;border:1px solid #d9beaa;border-radius:17px;margin:10px 27px 15px;padding:11px 14px;position:relative;background:#f6ede6}.employee-box small{display:block;color:#917c75;font-size:9px;font-weight:700}.employee-box strong{display:block;color:var(--wine);font-size:15px;margin-top:10px;max-width:260px;overflow-wrap:anywhere}.employee-box .round-badge{right:9px;bottom:8px}.back h3{font-size:11px;letter-spacing:1px;color:var(--gold);margin:0 32px 13px}.instructions{margin:0 29px;padding:0;list-style:none;display:flex;flex-direction:column;gap:16px}.instructions li{font-size:11px;font-weight:600;line-height:1.2;position:relative;padding-left:22px}.instructions li:before{content:'';height:9px;width:9px;border-radius:100%;background:var(--wine);position:absolute;left:3px;top:2px}.return-box{border:1px solid #d7bfa9;border-radius:14px;background:white;margin:17px 27px 0;padding:12px 8px;text-align:center;display:flex;flex-direction:column;gap:9px}.return-box small{font-size:9px;color:#8d7f78;letter-spacing:1px;font-weight:bold}.return-box strong{font-size:11px;color:var(--wine)}.sign-area{display:flex;justify-content:space-between;margin:21px 38px 0}.sign-area>div:first-child{width:180px}.sign-area small{font-size:9px;color:#907e76;font-weight:bold}.sign-area i{display:block;border-bottom:1px solid var(--wine);margin-top:19px}.sign-area strong{display:block;text-align:right;color:var(--wine);margin-top:12px;font-size:15px}.property{position:absolute;bottom:76px;left:27px;right:27px;height:35px;background:#eee8e1;border-radius:15px;text-align:center;padding-top:13px;font-size:9px;font-weight:bold;color:var(--wine)}.back-foot{position:absolute;bottom:0;left:0;right:0;height:60px;background:var(--wine);border-top:5px solid var(--gold);color:white;display:flex;align-items:center;justify-content:center;gap:11px;flex-direction:column}.back-foot strong{font-size:12px}.back-foot small{color:#e9c28c;font-size:9px;letter-spacing:2px}.print-tip{text-align:center;margin-top:15px}@media(max-width:900px){.workspace{grid-template-columns:1fr}.cards{justify-content:center}}@media print{@page{size:A4 portrait;margin:10mm}body{background:white;-webkit-print-color-adjust:exact;print-color-adjust:exact}.toolbar,.editor,.preview-head,.print-tip{display:none!important}.workspace{display:block;padding:0;margin:0}.preview{border:0;box-shadow:none;padding:0}.cards{display:flex;gap:9mm;justify-content:center;align-items:flex-start}.id-card{box-shadow:none;outline:1px dashed #ccc;break-inside:avoid;width:375px;height:500px;flex:0 0 375px;zoom:0.863}/* Keep text scalable while fitting both cards on an A4 sheet. */}

/* v2: Keep every field within the card, clear of its fixed footer. */
.front .masthead{height:65px}
.front .portrait-box{width:175px;height:148px;margin:7px auto 5px;padding:8px;border-radius:19px}
.front .person-name{height:40px;font-size:17px;padding:0 16px}
.front .details{padding:7px 28px 0}
.front .detail{min-height:34px;padding:5px 10px;margin-bottom:5px;gap:2px}
.front .detail-grid .detail{min-height:40px;padding:5px 7px;margin:0}
.front .detail-grid .detail strong{font-size:10px}
.front .detail-grid .detail small{font-size:7px}
.back .masthead{height:58px;margin-top:11px}
.back .masthead img{height:52px}
.back h2{margin:7px 0;font-size:12px}
.back .employee-box{height:62px;margin:7px 27px 10px;padding:9px 14px}
.back .employee-box strong{margin-top:8px;max-width:245px;line-height:1.12}
.back h3{margin:0 32px 9px}
.back .instructions{gap:10px}
.back .instructions li{font-size:10px;line-height:1.25}
.back .return-box{margin:12px 27px 0;padding:10px 8px;gap:6px}
.back .sign-area{margin:13px 38px 0}
.back .sign-area i{margin-top:15px}
.back .sign-area strong{margin-top:8px}
.back .property{bottom:70px;height:32px;padding-top:11px}
.back .back-foot{height:56px}
/* Better printing: avoid clipped text, overlaps, and ignored screen zoom. */
@media print{
  @page{size:A4 portrait;margin:10mm}
  html,body{margin:0!important;padding:0!important;width:auto!important;background:#fff!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  .workspace,.preview{margin:0!important;padding:0!important;width:100%!important;max-width:none!important;display:block!important;overflow:visible!important}
  .cards{display:flex!important;flex-wrap:nowrap!important;justify-content:center!important;align-items:flex-start!important;gap:7mm!important;overflow:visible!important}
  .id-card{width:375px!important;height:500px!important;flex:0 0 375px!important;zoom:.82!important;margin:0!important;box-shadow:none!important;outline:1px solid #d2bca9!important;break-inside:avoid!important;page-break-inside:avoid!important}
  .toolbar,.editor,.preview-head,.print-tip{display:none!important}
}

/* v3: show the ENTIRE uploaded portrait, without cropping the head/shoulders. */
.front .portrait-box { background:#ffffff; }
.front .portrait { display:flex; align-items:center; justify-content:center; background:#ffffff; }
.front .portrait img { display:block; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain!important; object-position:center center!important; }
@media print { .front .portrait img { object-fit:contain!important; object-position:center center!important; } }

.fields-single{grid-template-columns:1fr;max-width:240px}
.detail-grid-two{grid-template-columns:repeat(2,1fr)}

.signatory-block{width:180px}
.sig-box{height:38px;display:flex;align-items:flex-end;justify-content:flex-start;margin-top:6px;overflow:hidden}
.sig-box img{max-width:150px;max-height:34px;object-fit:contain;object-position:left bottom;display:block;mix-blend-mode:multiply}
.sign-area .signatory-block i{margin-top:6px}
@media print{.sig-box img{max-width:150px;max-height:34px;object-fit:contain!important}}

/* Bulk print selection controls. */
.bulk-tools{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.bulk-tools label{margin:0;display:flex;align-items:center;gap:6px}.bulk-tools input{width:auto;margin:0}
.bulk-tools button{background:#751710;color:white;border:0;padding:9px 11px;border-radius:6px;cursor:pointer;font-size:12px}
.bulk-chooser .employee-link{align-items:center;gap:10px}.bulk-chooser .employee-link>input{width:17px;flex:0 0 17px;margin:0}
.bulk-chooser .employee-link>a{display:flex;flex:1;justify-content:space-between;gap:8px;text-decoration:none;color:#263040;min-width:0}