@page { size: A4 portrait; margin: 12mm; }
.lc-badges-action { background: #f0edfb !important; color: #49359d !important; }
.classroom-badges-dialog { --lc-ink: #29263d; --lc-line: #e5e3ee; --lc-paper: #fff; --lc-accent: #5744b5; --lc-accent-dark: #443293; position: fixed; inset: 0; margin: auto; width: min(calc(100% - 20px), 900px); max-width: 900px; max-height: min(92vh, 980px); overflow: auto; padding: 0; border: 1px solid #e3deed; border-radius: 20px; color: #29263d; box-shadow: 0 24px 70px #28213d38; }
.classroom-badges-dialog::backdrop { background: #1c1929b8; }
.classroom-badges-dialog-inner { position: relative; padding: clamp(18px, 4vw, 30px); }
.classroom-badges-dialog section { margin: 0; padding: 0; }
.classroom-badges-setup { display: block; }
.classroom-badges-close { position: absolute; top: 10px; right: 12px; width: 42px; height: 42px; border: 0; border-radius: 11px; background: #f3f1f8; color: #534c6d; font-size: 1.65rem; cursor: pointer; }
.classroom-badges-dialog h2 { margin: 2px 46px 0 0; font-size: clamp(1.35rem, 4vw, 1.8rem); letter-spacing: -.03em; }
.classroom-badges-class-name { margin: 4px 0 12px; color: #625a77; font-size: .9rem; font-weight: 800; }
.classroom-badges-status { min-height: 39px; margin: 10px 0 14px; padding: 9px 11px; border-radius: 10px; background: #f6f4fc; color: #514a70; font-size: .8rem; line-height: 1.4; }
.classroom-badges-selection-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.classroom-badges-selection-head h3, .classroom-badges-results-heading h3 { margin: 0; font-size: 1rem; }
.classroom-badges-selection-head label { display: inline-flex; min-height: 44px; align-items: center; gap: 7px; color: #5744b5; font-size: .78rem; font-weight: 800; }
.classroom-badges-selection-head input, .classroom-badge-pick { width: 20px; height: 20px; accent-color: #5744b5; }
.classroom-badges-roster { display: grid; gap: 8px; }
.classroom-badge-student { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(90px, .65fr) minmax(170px, 1fr); align-items: center; gap: 10px; min-width: 0; padding: 11px; border: 1px solid #e8e4f1; border-radius: 12px; background: #fff; }
.classroom-badge-student.is-assigned { background: #faf9fd; }
.classroom-badge-name { min-width: 0; color: #29263d; font-size: .85rem; font-weight: 800; overflow-wrap: anywhere; }
.classroom-badge-student input[type="text"], .classroom-badge-student select, .classroom-badges-expiry-label input { width: 100%; min-width: 0; min-height: 40px; padding: 7px 9px; border: 1px solid #dcd8e8; border-radius: 8px; background: #fff; color: #29263d; font: inherit; font-size: .8rem; }
.classroom-badge-status { display: inline-flex; align-items: center; gap: 5px; color: #427049; font-size: .73rem; font-weight: 800; }
.classroom-badge-renew { min-height: 42px; padding: 8px 10px; border: 1px solid #dcd6f1; border-radius: 9px; background: #f4f1ff; color: #49359d; font: inherit; font-size: .74rem; font-weight: 850; cursor: pointer; }
.classroom-badge-renew:disabled, .classroom-badges-dialog .lc-button:disabled { cursor: not-allowed; opacity: .58; }
.classroom-badges-expiry-label { display: grid; max-width: 320px; gap: 5px; margin: 14px 0 6px; color: #625a77; font-size: .78rem; font-weight: 800; }
.classroom-badges-help, #classroomBadgeWholeClassHelp, .classroom-badges-results-heading p { margin: 6px 0 12px; color: #777286; font-size: .75rem; line-height: 1.5; }
#classroomBadgeCreate { min-height: 46px; }
.classroom-badges-results { margin-top: 20px; padding-top: 17px; border-top: 1px solid #e9e5f0; }
.classroom-badges-results-heading p { max-width: 680px; margin-bottom: 13px; }
.classroom-badges-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.classroom-badge-card { display: grid; justify-items: center; gap: 6px; min-width: 0; padding: 12px; border: 1px solid #e4dfed; border-radius: 12px; background: #fff; text-align: center; break-inside: avoid; }
.classroom-badge-card strong { width: 100%; overflow-wrap: anywhere; color: #29263d; font-size: .9rem; }
.classroom-badge-card small { color: #655d79; font-size: .75rem; font-weight: 800; }
.classroom-badge-qr { box-sizing: border-box; display: grid; width: 236px; height: 236px; place-items: center; padding: 14px; border: 1px solid #e8e4f1; border-radius: 8px; background: #fff; }
.classroom-badge-qr canvas, .classroom-badge-qr img { display: block; width: 206px !important; height: 206px !important; image-rendering: pixelated; }
.classroom-badges-result-actions { display: flex; justify-content: flex-end; margin-top: 13px; }
@media (max-width: 600px) {
    .classroom-badges-dialog { max-height: min(80vh, calc(100vh - 128px)); }
    .classroom-badges-dialog-inner { padding: 18px 14px; }
    .classroom-badge-student { grid-template-columns: minmax(0, 1fr); }
    .classroom-badge-name, .classroom-badge-student select, .classroom-badge-student input[type="text"], .classroom-badge-status, .classroom-badge-renew { grid-column: 1; }
    .classroom-badge-student label.classroom-badge-name { display: flex; align-items: center; gap: 9px; }
    .classroom-badges-board { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .classroom-badge-card { padding: 8px 5px; }
    .classroom-badge-qr { width: min(100%, 236px); height: auto; aspect-ratio: 1; padding: 14px; }
    .classroom-badge-qr canvas, .classroom-badge-qr img { width: 100% !important; height: auto !important; aspect-ratio: 1; }
    .classroom-badges-selection-head { align-items: flex-start; flex-direction: column; gap: 2px; }
}
@media print {
    html, body { height: auto !important; overflow: visible !important; }
    body.classroom-badges-open > * { display: none !important; }
    body.classroom-badges-open > #main-content { display: block !important; }
    body.classroom-badges-open > #main-content > * { display: none !important; }
    body.classroom-badges-open > #main-content > #classroomStudentBadgesDialog,
    body.classroom-badges-open > #main-content > #classroomStudentBadgesDialog * { visibility: visible !important; }
    body.classroom-badges-open > #main-content > #classroomStudentBadgesDialog { position: static !important; inset: auto !important; display: block !important; margin: 0 !important; width: 100% !important; max-width: none !important; max-height: none !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
    body.classroom-badges-open #classroomStudentBadgesDialog::backdrop { display: none !important; }
    body.classroom-badges-open #classroomStudentBadgesDialog .classroom-badges-dialog-inner { padding: 0; }
    #classroomBadgeClose, .classroom-badges-setup, .classroom-badges-status, .classroom-badges-result-actions { display: none !important; }
    body.classroom-badges-open .classroom-badges-board { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-flow: row; align-content: start; align-items: start; gap: 6mm; overflow: visible !important; }
    body.classroom-badges-open .classroom-badge-card { display: grid !important; border: 1px solid #bbb; border-radius: 3mm; padding: 2mm; break-inside: avoid !important; page-break-inside: avoid !important; }
    body.classroom-badges-open .classroom-badge-qr { width: 52mm; height: 52mm; padding: 2mm; border: 0; }
    body.classroom-badges-open .classroom-badge-qr canvas, body.classroom-badges-open .classroom-badge-qr img { width: 48mm !important; height: 48mm !important; }
}