element that wraps every page's {% block content %}. Two modes: 1. Default — the whole block scrolls together as one unit (correct for the Dashboard, detail pages, and standalone forms: per the task's own Content Area rule, "Detail Pages"/"Forms" are exactly what's allowed to scroll here). 2. List-page grid mode — engaged automatically whenever the page's top-level content container carries `.app-list-page` (added to the small set of true list pages: the whole page below the module header IS a toolbar + one table, nothing else). In that mode the toolbar and any summary cards stay fixed and only the table's own rows scroll, "Excel-style" — see the rules below. */ .app-content-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; } /* The page's own module header (title/subtitle/breadcrumb-adjacent

) is always the first child of .app-content-scroll (every page template's own convention, unchanged by this task). Sticky here means: in default mode it stays pinned while the rest of the page scrolls beneath it; in list-page grid mode nothing scrolls past it anyway, so the rule is inert but harmless. One rule, both modes, zero per-template markup change needed for this part. */ .app-content-scroll > header { position: sticky; top: 0; z-index: 20; } /* List-page grid mode. `:has()` lets .app-content-scroll itself react to which child it contains, so no wrapper markup change is needed beyond the one `.app-list-page` marker class already on each list page's own top-level container. */ .app-content-scroll:has(> .app-list-page) { overflow: hidden; } .app-content-scroll > .app-list-page { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; } /* Everything in a list page except the card that actually holds the table (summary/stat cards, the search/filter toolbar, any alert banner) keeps its natural size and never scrolls — this is what makes the Search Toolbar "always visible" without needing its own marker class or sticky rule. */ .app-content-scroll > .app-list-page > *:not(.card:has(.table-responsive)) { flex-shrink: 0; } /* The one card that holds the table becomes the scroll region. */ .app-content-scroll .app-list-page .card:has(.table-responsive) { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; } .app-content-scroll .app-list-page .card:has(.table-responsive) > .table-responsive { flex: 1 1 auto; overflow: auto; min-height: 0; } /* List-page grid mode, tree-sidebar variant (Task MASTER-DATA-02). The Reference Data page nests its table one level deeper than the plain grid mode above assumes — a Bootstrap row/col split between the Reference Data Type tree panel and the toolbar+table column — opted into via `.app-list-page-tree` alongside the existing `.app-list-page` marker. `.card:has(.table-responsive)` above already matches through that extra nesting (it's a descendant selector, not a direct-child one), so the only real gap is that the generic rule's "keep everything else at its natural size" clause (`.app-content-scroll > .app-list-page > *:not(...)`, above) catches the whole `.row` — including the column that legitimately needs to flex/scroll — before it ever reaches the table card two levels down. These rules re-open that one wrapper level for `.app-list-page-tree` only, without touching the plain single-card list pages' own behavior. Same specificity as the generic rule above (four classes each) — wins on source order, not a specificity hack. */ .app-content-scroll > .app-list-page.app-list-page-tree > .row { flex: 1 1 auto; min-height: 0; overflow: hidden; } .app-list-page-tree > .row > [class*="col-"] { /* Explicit height, not just align-items:stretch (the flex default, which computes to "normal" on `.row` and empirically does not reliably cross-size a `.col-*` down to its flex line's height — verified live: without this, the column silently renders at its full content height instead of the row's bounded height, which is what let the table/pagination escape the scroll region in the first place). */ height: 100%; min-height: 0; display: flex; flex-direction: column; } .app-list-page-tree > .row > [class*="col-"] > *:not(.card:has(.table-responsive)) { flex-shrink: 0; } /* Safety net for the tree panel's own card (no table inside, so the rules above never give it a scroll region) — only engages if the Reference Data Type list ever grows taller than the available height; explicitly excludes any card that DOES hold a table so it can never fight with that card's own `overflow: hidden` (line 323) and create a double scrollbar. */ .app-list-page-tree > .row > [class*="col-"] > .card:not(:has(.table-responsive)) { min-height: 0; max-height: 100%; overflow-y: auto; } /* Sticky table header — applies everywhere a table is wrapped in .table-responsive, not just list-page grid mode: a table embedded partway down a longer detail page also keeps its header row visible while its own rows scroll past, using whichever ancestor is actually the scrolling one (the grid's own .table-responsive in list-page mode, or .app-content-scroll itself otherwise). Explicit background avoids the illusion of "gaps" as rows scroll underneath a transparent header. */ .table-responsive thead th { position: sticky; top: 0; z-index: 5; background-color: var(--bs-tertiary-bg, #f8f9fa); } /* Standalone form pages (not modals) whose Save/Cancel controls need to stay visible without scrolling to the bottom of a long form — opt in per page with `.app-sticky-actions` on the existing button wrapper (no markup restructuring, just one class). */ .app-content-scroll .app-sticky-actions { position: sticky; bottom: 0; z-index: 15; background-color: var(--bs-body-bg, #fff); padding-top: 0.75rem; padding-bottom: 0.75rem; } /* --------------------------------------------------------------------- Dialogs (Task UI-UX-01) — every Bootstrap modal in the app already follows the same modal-header/modal-body/modal-footer structure (STD-01's standard dialog pattern), so this is one global rule set, not a per-dialog change: header and footer keep their natural size and never scroll; only the body does, once its content plus the fixed header/footer would otherwise exceed the viewport. Equivalent to Bootstrap's own `.modal-dialog-scrollable`, applied universally instead of requiring that class on every individual dialog. --------------------------------------------------------------------- */ .modal-dialog { display: flex; flex-direction: column; max-height: calc(100vh - 3.5rem); } .modal-content { max-height: calc(100vh - 3.5rem); overflow: hidden; display: flex; flex-direction: column; } /* Several dialogs (e.g. Product Add/Edit) wrap modal-header/-body/-footer in a single

for one-submit-button convenience, making the form -- not the three regions themselves -- the direct flex child of .modal-content. Without this, the form is a plain block box that renders at full content height and gets silently clipped by .modal-content's overflow: hidden instead of scrolling. */ .modal-content > form { display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .modal-header, .modal-footer { flex-shrink: 0; } .modal-body { overflow-y: auto; min-height: 0; } /* --------------------------------------------------------------------- Collapsible sidebar (Task WEB-02, Part B). The "erp-sidebar-collapsed" class is applied to (not .app-shell) by a small synchronous script in base.html's , so a returning user's remembered preference (localStorage) takes effect before first paint — no flash of the expanded sidebar. Only applies at the md+ breakpoint, where the sidebar already renders inline (below md it's Bootstrap's own slide-in offcanvas overlay, an unrelated, pre-existing responsive behavior this feature doesn't change). --------------------------------------------------------------------- */ @media (min-width: 768px) { html.erp-sidebar-collapsed .app-sidebar { width: 64px; flex: 0 0 64px; } html.erp-sidebar-collapsed .app-sidebar-nav .nav-label { display: none; } html.erp-sidebar-collapsed .app-sidebar-nav .nav-link, html.erp-sidebar-collapsed .app-sidebar-nav .nav-link.disabled { justify-content: center; padding-left: 0.5rem; padding-right: 0.5rem; } html.erp-sidebar-collapsed .app-sidebar-nav .nav-icon { margin-right: 0; } html.erp-sidebar-collapsed .app-sidebar-nav .nav-section-title { display: none; } /* Task CONFIG-CENTER-01: a multi-level nav tree makes no sense in icon-only mode — force every nested System/Configuration/ Reference Data submenu closed while the sidebar is collapsed, regardless of which page is active (Bootstrap's own .collapse JS state is untouched; this is a pure display override, so the submenu reopens correctly if the sidebar is expanded again). */ html.erp-sidebar-collapsed .app-sidebar-nav .collapse { display: none !important; } } /* Section group label (e.g. "Administration"), Task SYS-01 — the sidebar's first grouped section; plain, non-interactive, hidden entirely while the sidebar is collapsed (see above). */ .app-sidebar-nav .nav-section-title { display: block; letter-spacing: 0.04em; padding: 0.25rem 0.75rem; } .app-sidebar-nav .nav-link { color: rgba(255, 255, 255, 0.85); border-radius: 0.375rem; display: flex; align-items: center; } .app-sidebar-nav .nav-icon { display: inline-block; width: 1.4em; text-align: center; margin-right: 0.4rem; flex-shrink: 0; } .app-sidebar-nav .nav-link:hover { color: #fff; background-color: rgba(255, 255, 255, 0.08); } .app-sidebar-nav .nav-link.active { color: #fff; background-color: var(--bs-primary); } .app-sidebar-nav .nav-link.disabled { color: rgba(255, 255, 255, 0.35); cursor: default; } /* Task CONFIG-CENTER-01 — nested System/Configuration/Reference Data submenu levels. Same nav-link look as the top-level sidebar (color/ hover/active rules above apply unchanged, since these are still .app-sidebar-nav .nav-link elements), just indented and slightly smaller per level so the 3-level tree stays scannable. */ .app-sidebar-subnav { padding-left: 1.1rem; margin-top: 0.15rem; } .app-sidebar-subnav .nav-link { font-size: 0.875rem; padding-top: 0.3rem; padding-bottom: 0.3rem; } .app-breadcrumb .breadcrumb { font-size: 0.875rem; } /* --------------------------------------------------------------------- Sortable table headers (Product Master table; reusable by future module tables built on the same pattern). --------------------------------------------------------------------- */ .sortable-th { cursor: pointer; user-select: none; white-space: nowrap; } .sortable-th .sort-icon { display: inline-block; width: 1em; opacity: 0.4; } .sortable-th.sort-active .sort-icon { opacity: 1; } /* --------------------------------------------------------------------- Approval workflow stepper (Quotation Detail page). Pure CSS/HTML — the "current" / "done" / branch state is applied by quotation_detail.js toggling these classes based on data already fetched from the API; no business logic lives in this stylesheet or in that JS. --------------------------------------------------------------------- */ .erp-stepper { display: flex; flex-wrap: wrap; align-items: center; } .erp-stepper .erp-step { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.75rem; border-radius: 999px; background-color: var(--bs-secondary-bg, #e9ecef); color: var(--bs-secondary-color, #6c757d); font-size: 0.8rem; white-space: nowrap; } .erp-stepper .erp-step + .erp-step { margin-left: 0.4rem; } .erp-stepper .erp-step.done { background-color: var(--bs-success); color: #fff; } .erp-stepper .erp-step.current { background-color: var(--bs-primary); color: #fff; font-weight: 600; } .erp-stepper .erp-step-sep { color: var(--bs-secondary-color, #adb5bd); margin: 0 0.15rem; } /* --------------------------------------------------------------------- Print support (Quotation Detail page's reserved "Print" action — see QUOTATION_ARCHITECTURE.md's future-compatibility note: this is browser-native window.print(), not PDF generation). Hides navigation chrome and interactive controls so only the quotation content itself prints. --------------------------------------------------------------------- */ /* --------------------------------------------------------------------- Workspace loading skeleton — Task ERP-FRONTEND-ARCH-01. Content-area only (see workspace_navigator.js's showLoading/hideLoading): a few pulsing placeholder bars instead of a blank area or a full-page spinner, per the Enterprise Frontend Architecture Policy's "never blank the Workspace, max loading scope is the current content area" rule. Uses the same theme-aware `--bs-*` variables as the rest of this file (UI-THEME-01) so it reads correctly in light and dark. --------------------------------------------------------------------- */ .erp-skeleton-line { height: 1rem; border-radius: 0.375rem; background-color: var(--bs-secondary-bg, #e9ecef); margin-bottom: 0.75rem; animation: erp-skeleton-pulse 1.2s ease-in-out infinite; } .erp-skeleton-line:nth-child(1) { width: 40%; height: 1.5rem; } .erp-skeleton-line:nth-child(2) { width: 90%; } .erp-skeleton-line:nth-child(3) { width: 75%; } .erp-skeleton-line:nth-child(4) { width: 85%; } .erp-skeleton-line:last-child { margin-bottom: 0; } @keyframes erp-skeleton-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } @media print { .app-topnav, .app-sidebar, .app-breadcrumb, footer, #approval-stepper, #approval-branch-note, .card-header .btn-group, #actions-panel, #new-version-modal { display: none !important; } .app-main { width: 100% !important; } } /* Task QUOTATION-PRESENTATION-01 — Internal View presentation-level RBAC. The API already redacts unit_cost/margin_amount/margin_percent for a caller lacking quotation.view_cost; this hides the now-always-empty Cost/Margin table columns themselves (screen and print) rather than leaving a visibly blank column. Applied once, on , by quotation_detail.js — never a static rule, since visibility depends on the logged-in user's own permission. */ .hide-quotation-cost-columns .cost-col { display: none !important; } /* --------------------------------------------------------------------- Quotation Customer View (Task QUOTATION-PRESENTATION-01). A dedicated, print-optimized document — commercial information only, never Cost/Margin/Internal Cost/Profit/approval workflow/version history/internal buttons (the backing API response has no such field to begin with — see app.schemas.quotation_presentation). On screen, `.cv-document` previews as an A4-proportioned page inside the normal app chrome; `@media print` hides that chrome entirely and sets real A4 page dimensions, matching this task's own "A4 portrait, clean page breaks" requirement. --------------------------------------------------------------------- */ .cv-toolbar { max-width: 210mm; margin: 0 auto; } .cv-document { background: #fff; color: #212529; width: 100%; max-width: 210mm; margin: 0 auto; /* block-level centering, deliberately not a flex parent — a flex `justify-content: center` wrapper interacted badly with this document's own wide-table content, forcing the whole page to overflow horizontally on narrow viewports even though .cv-items-table-wrap's own overflow-x:auto correctly contained it */ padding: 14mm 12mm; box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.15); font-size: 0.92rem; } .cv-letterhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem; border-bottom: 2px solid #212529; padding-bottom: 0.75rem; margin-bottom: 1rem; } .cv-letterhead > * { min-width: 0; } .cv-company-name { font-size: 1.15rem; font-weight: 700; } .cv-company-line { font-size: 0.82rem; color: #495057; } .cv-company-line:empty { display: none; } .cv-doc-meta { text-align: right; flex: 1 1 220px; max-width: 100%; } .cv-doc-title { font-size: 1.4rem; font-weight: 700; letter-spacing: 0.05em; margin-bottom: 0.35rem; } .cv-meta-list { margin: 0; font-size: 0.82rem; } .cv-meta-list > div { display: flex; justify-content: flex-end; gap: 0.5rem; } .cv-meta-list dt { font-weight: 400; color: #6c757d; } .cv-meta-list dd { margin: 0; font-weight: 600; } .cv-section { margin-bottom: 1rem; break-inside: avoid; } .cv-section-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #495057; border-bottom: 1px solid #dee2e6; padding-bottom: 0.25rem; margin-bottom: 0.5rem; } .cv-field-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.15rem 1.5rem; margin: 0; font-size: 0.85rem; } .cv-field-grid > div { display: flex; gap: 0.4rem; padding: 0.1rem 0; min-width: 0; } .cv-field-grid dd { min-width: 0; overflow-wrap: break-word; } .cv-field-grid dt { color: #6c757d; flex: 0 0 auto; } .cv-field-grid dd { margin: 0; font-weight: 500; } .cv-items-table-wrap { /* Wide content scrolls inside its own container — the page/body must never scroll horizontally (matches this project's own .table-responsive convention used everywhere else). */ overflow-x: auto; } .cv-items-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.82rem; } .cv-items-table th, .cv-items-table td { border: 1px solid #dee2e6; padding: 0.35rem 0.5rem; } .cv-items-table thead th { background: #f1f3f5; font-weight: 600; text-align: left; } .cv-col-no { width: 2.5rem; } .cv-totals { width: 260px; margin-left: auto; margin-top: 0.5rem; font-size: 0.85rem; } .cv-totals > div { display: flex; justify-content: space-between; padding: 0.15rem 0; } .cv-totals .cv-grand-total { border-top: 2px solid #212529; margin-top: 0.25rem; padding-top: 0.35rem; font-weight: 700; font-size: 1rem; } .cv-signature-block { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2.5rem; break-inside: avoid; } .cv-signature-line { border-top: 1px solid #212529; margin-top: 2.5rem; } .cv-signature-label { font-size: 0.8rem; color: #6c757d; margin-top: 0.35rem; } @media (max-width: 576px) { /* Narrow on-screen viewport — a 2-column field grid leaves too little room per value, forcing ugly character-by-character wrapping. Stack to one column, and stack each field's own label above its value, matching this project's general responsive-collapse convention (Permanent UI Standard). */ .cv-field-grid { grid-template-columns: 1fr; } .cv-field-grid > div { flex-direction: column; gap: 0.05rem; } .cv-meta-list > div { justify-content: space-between; } .cv-document { padding: 6mm 4mm; } } @media print { .app-topnav, .app-sidebar, .app-breadcrumb, footer, .cv-toolbar { display: none !important; } .app-main { width: 100% !important; } body { background: #fff !important; } .cv-document { box-shadow: none; max-width: none; width: 100%; padding: 0; margin: 0; } @page { size: A4 portrait; margin: 14mm 12mm; } .cv-items-table thead { display: table-header-group; } .cv-items-table tr { break-inside: avoid; } } /* --------------------------------------------------------------------- Dashboard-card row helpers — moved here from per-page inline