/* Dasuni brand navy — single source of truth. Previously hardcoded as #171D64 in ~16 places across this file. Kept the same value across light and dark themes — the navbar and footer use navy regardless of page theme to preserve brand identity. */ :root { --brand-navy: #171D64; } html { font-size: 14px; } @media (min-width: 768px) { html { font-size: 16px; } } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; } /* App-shell layout. The header and footer are always on screen; only the work area between them scrolls. is a fixed-height (100vh) flex column that itself never scrolls — the middle .content-scroll region owns the vertical scrollbar. This mirrors the desktop-app / Microsoft Access feel the system replaces: persistent window chrome wrapping a scrolling work area, consistent on every route. */ :root { --footer-height: 3.5rem; } html, body { height: 100%; } body { display: flex; flex-direction: column; height: 100vh; overflow: hidden; } /* Header and footer keep their natural height and never shrink, so they stay pinned to the top and bottom of the viewport. position:relative + z-index keeps them (and the navbar dropdown) painted above the work area. */ header, footer.footer { flex-shrink: 0; position: relative; z-index: 1030; } /* The scrolling work area. flex:1 fills the gap between header and footer; min-height:0 is required so the flex item may shrink below its content size and actually scroll. overflow-x:hidden contains the .content-escape 100vw breakout (wide PO tables) without a horizontal document scrollbar. */ .content-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; } /* Breakout utility: lets a child of a centered .container expand to the full viewport width without changing its parent's layout. Used for wide grids (PO index etc.) so the page chrome stays aligned with every other route while only the table escapes the container cap. */ .content-escape { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* Grid index pages delegate vertical scroll to the AG Grid widget, which sizes itself to fit the work area. Hide the work-area scrollbar on those routes so it doesn't render a second redundant track alongside the grid's own. */ body.po-index-page .content-scroll { overflow: hidden; } /* Make the grid work area a flex column so the AG Grid host fills the space between the page heading/controls and the app footer, rather than the fixed 74vh the views request inline. A fixed viewport-relative height overflows on short screens — heading + controls + 74vh grid is taller than the work area — and because .content-scroll is overflow:hidden here, the overflow (the grid's own pagination/footer bar) gets clipped behind the pinned app footer. Flex-filling sizes the grid to exactly the room available, so its footer is always on screen at any height. The inline height is overridden below. */ body.po-index-page .content-wrap { height: 100%; min-height: 0; display: flex; flex-direction: column; } body.po-index-page main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } /* .grid-fill marks the breakout that hosts the AG Grid itself — toolbars also escape to full width (plain .content-escape) but must not stretch. */ body.po-index-page .content-escape.grid-fill { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } body.po-index-page .content-escape.grid-fill > div { flex: 1 1 auto; min-height: 0; height: auto !important; /* override the inline 72/74vh from the views */ } /* Printing: undo the app-shell so the full document flows onto paper rather than clipping to the single screen of the scroll region. */ @media print { body { display: block; height: auto; overflow: visible; } .content-scroll { overflow: visible; } } header { font-family: 'Nirmala UI'; font-weight: bold; background-color: var(--brand-navy); } /* Navbar page title (set via ViewData["HeaderTitle"], see _Layout). Takes the brand slot on inner pages; ellipsize rather than wrap if it ever overflows next to the account dropdown. */ header .navbar-page-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; } /* Header action buttons (the HeaderActions section — e.g. Copy PO Number) sit inline next to the page title. Strip the leaked vertical margin from the global `button { margin: 5px }` rule so the button's box doesn't exceed the title's line height and grow the navbar on those pages. */ header .navbar .btn { margin-top: 0; margin-bottom: 0; } footer { background-color: var(--brand-navy); } h1 { font-family: 'Nirmala UI'; font-size: 36px; font-weight: bold; color: var(--brand-navy); } /* Home page section headers (United Kingdom / United States / Global / Admin) sized to match the navbar brand wordmark rather than the 36px default h1. */ h1.card-title { font-size: 1.25rem; } h3 { font-family: 'Nirmala UI'; font-size: 24px; font-weight: bold; color: var(--brand-navy); padding-top: 10px; } /* In dark mode (data-bs-theme="dark" on ) the brand-navy heading colour sits on Bootstrap's near-black --bs-body-bg and effectively disappears. Swap to Bootstrap's emphasis colour token, which resolves to the right contrast value for the active theme automatically. No-op today because there's no page-level theme switcher yet; lays the groundwork for the parked theme picker. */ [data-bs-theme="dark"] h1, [data-bs-theme="dark"] h3 { color: var(--bs-emphasis-color); } /* Dark-mode button edges. Brand-navy (#171D64) buttons sitting on Bootstrap's dark page bg (~#212529) have very low contrast — the navy slabs nearly merge into the page. A soft white rim gives every button a defined edge without the harsh #0d6efd that Bootstrap's .btn-primary variant applies (which was only landing on the three submit buttons, leaving the four anchor buttons unbordered → inconsistent). One rule covers both and