/*
 * Badge Print Page — Print Media CSS
 *
 * Loaded via <link> in <svelte:head> on the badge print page only.
 * Cannot be a component <style> block: Svelte 5 does not allow <style> inside
 * <svelte:head>, and scoped component styles can't target html/body/global IDs.
 *
 * @page size is NOT here — it is injected dynamically via $effect in the page
 * script because the size depends on the badge template layout field.
 */

@media print {
    /* Full-page reset.
       app.css sets overflow:hidden on html + body — override so they don't
       create BFCs that shrink to content. */
    html, body {
        display: block !important;
        width: 100% !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Hide all app chrome */
    .submenu { display: none !important; }

    /* #ae_main_content: make it a transparent, non-interfering passthrough block.
       We cannot use display:contents here — it has overflow:auto, and per spec
       display:contents cannot override overflow-clipping elements (Firefox
       enforces this strictly). We just strip its visual/layout effects instead. */
    #ae_main_content {
        display: block !important;
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* .main_content and #badge_render_area have no overflow constraints,
       so display:contents safely dissolves their boxes in all browsers. */
    .main_content,
    #badge_render_area {
        display: contents !important;
    }

    /* Center badge using position:fixed.
       Why fixed instead of absolute/flex:
       - position:fixed in print positions relative to the @page content area,
         completely bypassing the ancestor hierarchy (no containing-block height
         dependency, no overflow-clip interference, no flex-parent issues).
       - top/left:50% + translate(-50%,-50%) centers within the page content area.
       - Firefox applies physical printer hardware margins even with @page{margin:0};
         this shrinks the content area slightly but top:50%/left:50% still centers
         within whatever area the browser gives us — it's immune to asymmetric margins.
       - Chrome: identical behavior to absolute+flex centering but more robust.
       - min-height:0 overrides the Tailwind min-h-[6.0in] class on this wrapper;
         badge_front/back provide their own dimensions. */
    .event_badge_wrapper {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        min-height: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    /* Never split front/back across pages */
    .badge_front,
    .badge_back {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* ============================================================
       Debug outlines — toggled via "Show debug outlines" checkbox
       in the Staff section of the print controls panel. Gated on
       the html.debug_outlines class set by ae_comp__badge_print_controls.
       These are intentionally permanent — not temporary.
       ============================================================ */
    html.debug_outlines {
        outline: 3px dashed lime !important;
        outline-offset: -3px !important;
    }
    html.debug_outlines body {
        outline: 4px solid blue !important;
        outline-offset: -4px !important;
    }
    /* Red = #ae_main_content — block passthrough, should fill page width/height. */
    html.debug_outlines #ae_main_content {
        outline: 3px dashed red !important;
        outline-offset: -6px !important;
    }
    /* Orange + purple = display:contents — should be INVISIBLE (no box). */
    html.debug_outlines .main_content {
        outline: 3px dashed orange !important;
        outline-offset: -9px !important;
    }
    html.debug_outlines #badge_render_area {
        outline: 3px dashed purple !important;
        outline-offset: -12px !important;
    }
    /* Red = the actual badge — should be dead-center on page.
       Thick + high-contrast so misalignment vs. physical card stock is obvious. */
    html.debug_outlines .event_badge_wrapper {
        outline: 6px solid red !important;
        outline-offset: 3px !important;
    }
}