/* General print stylesheet.
 *
 * Loaded only via <link rel="stylesheet" href="css/print.css" media="print" />
 * so the styles never affect screen rendering.
 *
 * Page-specific tweaks (column-keep-together rules, per-report headers, etc.)
 * live in component-scoped CSS files next to the respective .razor pages
 * (e.g. ActivityLogReport.razor.css) and only get created when a report
 * actually needs them.
 *
 * Scope of THIS file: rules every printable report shares -- mostly hiding
 * the app chrome so the printout shows only the report content.
 */

@media print {

    /* --- Force light theme regardless of the user's screen preference --------
     * Dark mode would print as huge solid blocks of ink with light text on
     * top -- unreadable on paper and a printer-killer. We override the
     * Fluent UI neutral palette tokens to their light values when the body
     * carries data-theme="dark", plus a body-level background: #fff / color:
     * #000 as a belt-and-braces fallback for anything that doesn't read the
     * tokens.
     */
    body,
    body[data-theme=dark] {
        background: #fff !important;
        color: #000 !important;
    }
    body[data-theme=dark] {
        --neutral-fill-rest: #ffffff;
        --neutral-fill-secondary-rest: #f5f5f5;
        --neutral-fill-stealth-rest: #ffffff;
        --neutral-fill-input-rest: #ffffff;
        --neutral-stroke-rest: #cccccc;
        --neutral-stroke-divider-rest: #e5e5e5;
        --neutral-layer-1: #ffffff;
        --neutral-layer-2: #fafafa;
        --neutral-layer-3: #f5f5f5;
        --neutral-layer-4: #ffffff;
    }

    /* Force readable foreground colours regardless of the source theme. Many
       table cells use color: var(--neutral-foreground-rest) or var(--accent-
       foreground-rest) inline; remapping those tokens at print time turns the
       washed-out greys and light blues into ink-friendly dark text + dark blue
       headers without touching the inline styles. */
    body,
    body[data-theme=dark] {
        --neutral-foreground-rest:   #000000;
        --neutral-foreground-hint:   #333333;
        --neutral-foreground-strong: #000000;
        --accent-foreground-rest:    #003a8c;
        --accent-foreground-active:  #003a8c;
    }

    /* --- Hide the entire interactive filter bar ------------------------------
     * On paper the dropdowns/buttons are useless. Each report renders a
     * .print-only block with the actual filter values right above its data,
     * which becomes the visible "header" of the printout.
     */
    .tt-filter-bar {
        display: none !important;
    }

    /* --- Reveal print-only blocks --------------------------------------------
     * .print-only is display:none on screen (set in site.css). Flipping it to
     * block here means each report can include a small summary div in markup
     * that only shows up on paper.
     */
    .print-only {
        display: block !important;
    }

    /* --- Allow row cells to wrap in print ------------------------------------
     * Activity-log rows are CSS Grid with one flexible (2fr) project/comment
     * column plus fixed-width columns. The screen layout uses
     * white-space: nowrap + text-overflow: ellipsis on the project key/name
     * so it fits a single row -- in print that nowrap forces the flexible
     * column to its min-content width (the longest unbroken string), which
     * shoves the fixed-width columns past the right paper edge.
     *
     * For print, override the whitespace handling inside every tt-row cell so
     * the project key + name (and comments) wrap naturally and the grid keeps
     * the column widths the template asked for.
     */
    .tt-row,
    .tt-row * {
        white-space: normal !important;
        word-break: break-word !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    /* --- Tighter grid columns for the ActivityLog table in print -------------
     * The screen template (2fr 160px 150px 60px / 160px 150px 60px) is sized
     * for a wide monitor. On A4 the fixed columns eat too much width and the
     * project column ends up cramped. The :has(> :nth-child(N):last-child)
     * selectors fire only when the row has exactly N grid cells -- ActivityLog
     * has 4 cells (Employee focus) or 3 cells (Project focus). Other reports
     * have 9+ cells so they don't match.
     */
    .tt-header-row:has(> :nth-child(4):last-child),
    .tt-row > div:has(> :nth-child(4):last-child),
    .tt-totals-row:has(> :nth-child(4):last-child) {
        grid-template-columns: 1fr 120px 120px 50px !important;
    }

    /* --- MyWorktime daily table for print -----------------------------------
     * The daily grid is a 10-column layout (Date + 8 per-type hour columns +
     * an expand chevron), tagged with the stable .tt-worktime-grid marker class.
     * (The previous rules keyed on a literal grid-template px string and silently
     * stopped matching when the table was reworked -- the class can't drift.)
     * On paper: drop the chevron, spread the data columns to fill the width,
     * un-stick the header, and tighten row spacing so a full month fits a page.
     */
    .tt-worktime-grid {
        grid-template-columns: 80px repeat(8, 1fr) !important;
    }
    /* Hide the chevron icon (data rows) / its empty header cell -- always the
       last child. Left in, it would wrap to a second row once the template
       drops to 9 visible columns. */
    .tt-worktime-grid > :last-child {
        display: none !important;
    }
    /* A sticky header inside the (now overflow:visible) scroll container floats
       down the page and paints over the rows when printing -- pin it to static. */
    .tt-header-row.tt-worktime-grid {
        position: static !important;
        padding: 2px 8px !important;
    }
    .content-group:has(> .tt-worktime-grid) {
        margin-top: 1px !important;
        margin-bottom: 1px !important;
        padding: 2px 8px !important;
    }

    /* --- Release the height / scroll constraints -----------------------------
     * The screen layout pins html, body, .layout, .main, .page, .body-content
     * to height:100% with overflow:hidden so the chrome stays fixed while the
     * inner .scroll div takes overflow:auto. In print this collapses the whole
     * report into a single viewport-sized page -- the rows past the visible
     * area get clipped. Override every link in the chain plus the inline
     * height:100% on the report's outermost wrapper so the document flows
     * across as many pages as it needs.
     */
    html, body,
    .layout, .page, .main, .body-content,
    article, .article-body,
    .content-page,
    .scroll {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    [style*="height: 100%"] {
        height: auto !important;
    }

    /* --- Strip layout chrome borders ----------------------------------------
     * <article> in site.css carries a border-right that separates the main
     * content from the right-side message-provider <aside> on screen. The
     * aside is hidden in print but the border itself stays and shows up as a
     * thin grey line at the right edge of every printed page.
     */
    article {
        border: none !important;
    }

    /* --- Hide the app chrome --------------------------------------------------
     * Everything outside the route page's <ContentPage> .content-page block:
     * the FluentLayout header (logo + theme switch + profile), the side
     * navigation, the bottom footer with the version + copyright, the message-
     * bar sidebar, and the page-level "Tools" row above the content.
     *
     * We hide by known class instead of "everything that is not an ancestor of
     * .content-page" because the parent chain itself must stay visible -- a
     * display:none on any ancestor would take the report content with it.
     */
    .header,
    .footer,
    nav.sitenav,
    aside,
    .content-header {
        display: none !important;
    }

}