body {
}

/* 
    height:{AppState.BrowserHeight - 325}px; width:100%; overflow-y:auto; 
    this is used to make the grid scrollable and to fit the height of the browser window.
*/

.grid-scroll-container {
    height: calc(100vh - 325px);
    overflow-y: auto;
    position: relative;
    width: 100%;
}
.grid-scroll-container::-webkit-scrollbar {
    width: 8px;
}

.grid-scroll-container::-webkit-scrollbar-thumb {
    background: var(--neutral-stroke-layer-rest);
    border-radius: 4px;
}

/* 
   Print styles for the Fluent UI dialog initially done by AI.
   The print container is a wrapper around the dialog's ChildContent.
   It is used to isolate the content from the rest of the page and to apply print-specific styles.

    .print-container th,   
    .print-container td {
        display: table-cell !important;
        padding: 8px !important;
        border: 1px solid #000 !important;   took out the border to make it look cleaner, but can be added back if needed
    }

*/

@media print {
    @page {
        size: auto;
        margin: 0.25in;
    }

    html, body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: #fff !important;
    }

    /* Hide all application, layout, and Fluent dialog chrome.
       visibility allows the selected descendant to be made visible again. */
    body * {
        visibility: hidden !important;
    }

    /* Print only the dialog's ChildContent wrapper.
       Taking it out of the dialog layout prevents the dialog surface,
       title bar, overlay, and underlying page from occupying print space. */
    .print-container, .print-container * {
        visibility: visible !important;
    }

    /* Show and position the print container */
    .print-container {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        inset: 0 !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: #fff !important;
        color: #000 !important;
        border: none !important;
        box-shadow: none !important;
        page-break-after: avoid;
        -webkit-print-color-adjust: economy;
        print-color-adjust: economy;
        filter: grayscale(100%) !important;
    }

    /* Render the printable content in black and white. */
    .print-container, .print-container * {
        color: #000 !important;
        background: #fff !important;
        border-color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    /* Preserve table structure */
    .print-container table {
        display: table !important;
        width: 100% !important;
        border-collapse: collapse !important;
        page-break-inside: avoid;
    }

    .print-container thead {
        display: table-header-group !important;
        page-break-inside: avoid;
    }

    .print-container tbody {
        display: table-row-group !important;
    }

    .print-container tr {
        display: table-row !important;
        page-break-inside: avoid;
    }

    .print-container th,
    .print-container td {
        display: table-cell !important;
        padding: 8px !important;
    }

    /* Hide interactive elements */
    button,
    fluent-button,
    [type="button"],
    .close-button {
        display: none !important;
    }

    /* Make links print-friendly */
    .print-container a {
        color: #000 !important;
        text-decoration: underline !important;
    }

    .print-container img,
    .print-container svg {
        filter: grayscale(100%) contrast(150%) !important;
    }
}