/* ============================================================
   TPC Unified Office System — Universal Ocean Ripple System
   Signature background across all Print Nexus modules
   Reference: https://printcnx.github.io/resources/templates/
   ============================================================ */

:root {
    --grad-ocean: linear-gradient(140deg, #0077be 0%, #0059a8 30%, #003d84 65%, #001c43 100%);
    --bg-gradient: linear-gradient(140deg, #0077be 0%, #0059a8 30%, #003d84 65%, #001c43 100%);
}

html:not(:has(body.no-ripple-bg)) {
    background: linear-gradient(140deg, #0077be 0%, #0059a8 30%, #003d84 65%, #001c43 100%) fixed !important;
}

body:not(.no-ripple-bg) {
    background: linear-gradient(140deg, #0077be 0%, #0059a8 30%, #003d84 65%, #001c43 100%) fixed !important;
    background-attachment: fixed !important;
    position: relative;
}

/* Explicit exemption for busy technical workbenches like Estimate Calculator */
body.no-ripple-bg,
body.no-ripple-bg html {
    background: #f8fafc !important;
}

body.no-ripple-bg .hrc-grid,
body.no-ripple-bg .hrc-canvas {
    display: none !important;
}

/* Halftone Drafting Grid (64px) */
.hrc-grid {
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 64px 64px;
    pointer-events: none;
    z-index: 0;
}

/* Undulating Water Ripple Canvas */
.hrc-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    display: block;
}

/* Elevate layout containers and headers above background */
.container,
.app-container,
.main-container,
.login-container,
.shipping-app,
.crm-container,
.calc-container,
header.enterprise-header,
header.app-header {
    position: relative;
    z-index: 1;
}

/* Ensure fixed bars retain stacking without breaking position */
.top-bar {
    z-index: 200;
}


/* Print Isolation: Never print background canvas or ocean gradient */
@media print {
    .hrc-grid,
    .hrc-canvas {
        display: none !important;
    }
    html, body {
        background: #ffffff !important;
    }
}