/* The 'Invite codes' tab of the admin page (public/admin-invites.js), its print screen and the printed sheet. Built from the admin page's own panel, field, note and button styles. */
#invCard .invBody{display:grid;gap:16px;min-width:0}
#invCard .invSection{display:grid;gap:10px;min-width:0;padding:14px;border:1px solid var(--line);border-radius:16px;background:#fff}
#invCard .invSection h3{margin:0}
#invCard .invSection p{margin:0}
#invCard .invFields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:12px;min-width:0}
#invCard .field,#invCard .field .input{min-width:0;max-width:100%}
#invCard select,#invCard input[type=number]{width:100%}
#invCard .invRow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;min-width:0}
#invCard .invRow .field{flex:1 1 220px}
#invCard .invSection>.primary{justify-self:start}
#invCard .smallButton,#invCard .invRow button{min-height:44px;padding:8px 14px}
#invCard .invAddr,.invAddrBig{font-weight:900;overflow-wrap:break-word;line-height:1.2}
#invCard .invAddr{font-size:clamp(1.15rem,4.5vw,1.8rem);padding:10px 12px;border-radius:12px;background:#f3f6fa;border:1px solid var(--line)}
.invWarn{background:#fff0f2!important;border-color:#efb8c1!important;color:#7a1626!important}
#invCard .invFresh{border:2px solid var(--gold);background:#fffaf0}
#invCard .invList,#invCard .invCodeList{list-style:none;margin:0;padding:0;display:grid;gap:10px;min-width:0}
#invCard .invBatch{display:grid;gap:10px;padding:12px;border:1px solid var(--line);border-radius:14px;background:#f8fafc;min-width:0}
#invCard .invBatchHead>div{display:grid;gap:3px;min-width:0;overflow-wrap:anywhere}
#invCard .invCounts{display:flex;flex-wrap:wrap;gap:6px 18px}
#invCard .invCounts span{font-size:1rem}
#invCard .invCounts b{font-size:1.5rem;font-weight:900;margin-right:3px}
#invCard .invDanger{background:#fff0f2;color:#8a1020;border:1px solid #efb8c1}
#invCard .invDanger[disabled]{opacity:.5;cursor:not-allowed}
#invCard .invCodes{display:grid;gap:10px;padding-top:6px;border-top:1px solid var(--line);min-width:0}
#invCard .invCode{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:#fff;min-width:0}
#invCard .invCode>div{display:grid;gap:2px;min-width:0}
#invCard .invHint{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.25rem;letter-spacing:.12em}
#invCard .invStatus{font-weight:800;font-size:.9rem}
#invCard .invStatus-out{color:#8a5a00}
#invCard .invStatus-used{color:var(--green)}
#invCard .invStatus-revoked{color:#8a1020}
#invCard .loading{padding:14px}

/* the print screen: full-window, above everything, scrolls on a phone */
body.invPrintOpen{overflow:hidden}
.invOverlay{position:fixed;inset:0;z-index:4000;display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:calc(14px + env(safe-area-inset-top)) 12px 20px;background:#07101edb;backdrop-filter:blur(6px)}
.invPrintCard{position:relative;width:min(680px,100%);margin:auto;display:grid;gap:12px;padding:20px 16px 18px;border-radius:20px;background:#fff;color:var(--ink);box-shadow:var(--shadow);min-width:0}
.invPrintCard h2,.invPrintCard p{margin:0}
.invPrintCard h2{padding-right:44px}
.invPrintCard .primary{width:100%}
.invPrintCard .field label{text-transform:none;letter-spacing:0;font-size:1rem;line-height:1.35}
.invClose{position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;border-radius:12px;background:#eef2f7;font-size:26px;line-height:1;cursor:pointer}
.invAddrBig{font-size:clamp(1.3rem,6vw,2.4rem);padding:12px 14px;border-radius:14px;background:#fff8dc;border:3px solid var(--gold)}
.invPreview{padding:8px;border:1px dashed #9fb0c2;border-radius:12px;background:#f7f9fc;overflow:hidden}
.invPreview .invPage{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.invPreview .invCard{padding:3px;border:1px dashed #aab6c3;border-radius:4px;background:#fff;display:grid;justify-items:center;gap:2px;min-width:0}
.invPreview .invCard svg{width:100%;height:auto;max-width:92px}
.invPreview .invCardLabel{display:flex;gap:4px;align-items:baseline;font-size:11px}
.invPreview .invCardLabel b{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em}
.invPreview .invCardNote{display:none}

/* the printed sheet: 4 across and 6 down, 24 cards a page. It is drawn into #invSheetRoot and shown only while printing. */
#invSheetRoot{display:none}
@media print{
  @page{margin:8mm}
  body.invPrinting{background:#fff!important}
  body.invPrinting>*:not(#invSheetRoot){display:none!important}
  body.invPrinting #invSheetRoot{display:block}
  .invPage{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:43mm;break-after:page;page-break-after:always}
  .invPage:last-child{break-after:auto;page-break-after:auto}
  .invCard{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8mm;padding:1.2mm;border:.25mm dashed #999;overflow:hidden;color:#000;font-family:Arial,Helvetica,sans-serif;break-inside:avoid}
  .invCard svg{display:block;width:31mm;height:31mm}
  .invCardLabel{display:flex;align-items:baseline;gap:2mm;font-size:3.4mm;line-height:1}
  .invCardLabel b{font-family:"Courier New",Courier,monospace;font-size:4.4mm;letter-spacing:.5mm}
  .invCardNote{font-size:2.4mm;line-height:1;color:#333}
}
@media(max-width:600px){#invCard .invSection{padding:12px}#invCard .invSection>.primary,#invCard .invRow .primary,#invCard .invRow .secondary{width:100%}#invCard .invRow{align-items:stretch}#invCard .invCode{align-items:flex-start}.invPrintCard{padding:18px 12px 16px}}