/* Shared Print Styles */
:root {
    --print-table-border: hsl(0 0% 87%);
}

@media print {
    /* Paper is white. The page's colours are not — and in dark mode they are
       the wrong way round.

       `body { color: black }` below only reaches text that inherits it. Every
       element carrying its own colour — a token (--text-primary is #fafafa in
       dark) or a Tailwind utility (dark:text-white, dark:text-gray-400) —
       keeps it, and prints near-white onto white.

       Measured on /privacy, /terms, /dashboard and /market/my-orders with
       print media emulated, each text run's colour against white paper:

           light   1 unreadable of 437
           dark  399 unreadable of 437

       Every heading on the printed page was gone — "Privacy Policy" and
       "Information We Collect" at contrast 1.04 — and the body text was pale
       grey at 2.56. A dark-mode user printing a receipt got a blank sheet.
       Note this is NOT about backgrounds: browsers do not print background
       colours by default, so the paper really is white and the text really is
       white on it.

       background-color, not the `background` shorthand, so a logo set as a
       background-image still prints. It matters for the case where the user
       DOES tick "Background graphics": without it, print.css's own
       `a { color: black }` painted black link text onto a dark card — measured
       at contrast 1.10 on /market/my-orders, and in light mode too, wherever a
       link is styled as a dark-filled button. */
    *,
    *::before,
    *::after {
        color: #000 !important;
        background-color: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    /* Hide Navigation & UI Elements

       `header` was hidden by TAG, which cannot tell the app shell's masthead
       from the DOCUMENT's own. Measured on /return/<ref> with print media
       emulated: the <header class="dtl-h"> holding the reference number, the
       supermarket, the date and the status disappeared — on a page whose menu
       offers "Print receipt". A receipt with no reference number on it is not
       a receipt. The banner is targeted directly instead. */
    nav,
    header[role="banner"],
    .sfx-header,
    aside, 
    footer,
    /* Screen-only affordances that have no meaning on paper: the skip link,
       the back link out of a detail page, and the PWA install banner — which
       was the ONLY thing besides the skip link left on a printed receipt while
       the content was hidden. */
    .skip-to-content,
    .dtl-back,
    #pwa-install-prompt,
    /* Detail-page actions. `button` and `.btn` below already cover most
       controls, but these are <a> elements styled as buttons — "Edit" printed
       on a receipt because it is a link, not a button. */
    .dtl-btn-pri,
    .dtl-btn-sec,
    .dtl-menu,
    .dtl-menu-trigger,
    .sidebar, 
    .mobile-menu, 
    .no-print, 
    button, 
    .btn,
    .actions,
    [data-action="print-page"],
    [data-action="print-order"],
    [data-action="print-report"] {
        display: none !important;
    }

    /* Reset Layout */
    body, html {
        background: white !important;
        color: black !important;
        height: auto !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Main Content Visibility */
    main, #main-content, .app-layout, .min-h-screen {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        display: block !important;
        position: static !important;
    }

    /* Typography */
    body {
        font-size: 12pt;
        line-height: 1.5;
    }

    h1 { font-size: 18pt; }
    h2 { font-size: 16pt; }
    h3 { font-size: 14pt; }

    /* Tables */
    table {
        width: 100% !important;
        border-collapse: collapse !important;
    }
    
    th, td {
        border: 1px solid var(--print-table-border) !important;
        padding: 8px !important;
    }

    /* Links */
    a {
        text-decoration: none !important;
        color: black !important;
    }
}