/*
 * ems-voucher-dialog.css — the voucher dialog's FRAME, so it matches the dialog inside it.
 * ═════════════════════════════════════════════════════════════════════════════════════════════
 *
 * User, 2026-10-20 (Image #73): "outside border bhi voucher model ki terhan ker dein."
 *
 * The Edit Voucher screen is framed by colorbox, whose own skin is a black bar above a black
 * 5px border with a sprite × on top of it — the frame in the screenshot. The Collect dialog the
 * user is comparing it with is framed by the portal chrome's own panel: a white sheet, a hairline
 * border, 12px corners and a soft shadow. Same page inside, two different frames around it.
 *
 * ⚠ SCOPED TO `#colorbox.cbox-voucher` AND NOTHING ELSE. colorbox's `className` option puts that
 * class on this one dialog (see showVoucherEditColorBox in functions.js); every other colorbox on
 * the estate — student view, attachments, the image lightboxes — keeps the skin it has always
 * had, because none of them carries the class.
 *
 * ⚠ FRAME ONLY: colours, corners, border and shadow, plus hiding colorbox's own × because the
 * page inside draws its own. No width, no height, no position — colorbox owns those, and a size
 * written here would fight the resize the page asks for.
 */

#colorbox.cbox-voucher,
#colorbox.cbox-voucher #cboxWrapper,
#colorbox.cbox-voucher #cboxContent,
#colorbox.cbox-voucher #cboxLoadedContent {
    box-sizing: border-box;
}

/* the black bar above the frame, and the black sheet behind it */
#colorbox.cbox-voucher #cboxContent {
    margin-top: 0;
    background: transparent;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 18px 48px -12px rgba(15, 20, 36, .45);
}

/* the 5px black border becomes the panel's own hairline */
#colorbox.cbox-voucher #cboxLoadedContent {
    border: 1px solid #DFE3EF;
    border-radius: 12px;
    background: #fff;
    margin-bottom: 0;
}

/* colorbox's sprite × — the dialog inside has its own, in its header */
#colorbox.cbox-voucher #cboxClose { display: none; }

/* the dimmer, to the same value the portal panel uses */
#cboxOverlay.cbox-voucher-back { background: rgba(15, 20, 36, .45); opacity: 1 !important; }