/** * ND97 Sheet — global theme for dashboard and tools. * Load after Bootstrap CSS; pair with Plus Jakarta Sans from Google Fonts. */ :root { --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --bs-primary: #3b82f6; /* Premium Blue */ --bs-primary-rgb: 59, 130, 246; --bs-link-color: #2563eb; --bs-link-hover-color: #1d4ed8; --bs-border-radius: 0.75rem; --bs-border-radius-sm: 0.5rem; --bs-border-radius-lg: 1rem; --bs-focus-ring-color: rgba(59, 130, 246, 0.25); --nd97-body-color: #1e293b; /* Slate 800 */ --nd97-app-bg: #f8fafc; /* Clean off-white background */ --nd97-card-border: rgba(226, 232, 240, 0.8); --nd97-card-header-border: rgba(226, 232, 240, 0.6); --nd97-card-header-fg: #475569; /* Slate 600 */ /* Body inset for fixed navbar/footer. js/nd97-layout.js sets --nd97-layout-nav-h / --nd97-layout-footer-h on ; these are fallbacks + manual tuning. Optional: --nd97-header-add / --nd97-footer-add */ --nd97-header-h: 3.5rem; --nd97-footer-h: 2.75rem; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--bs-body-font-family); background: var(--nd97-app-bg); background-attachment: fixed; color: var(--nd97-body-color); -webkit-font-smoothing: antialiased; margin: 0; } /* ——— App shell: Bootstrap fixed-top navbar + fixed-bottom footer ——— */ body.nd97-app { min-height: 100dvh; padding-top: calc(var(--nd97-layout-nav-h, var(--nd97-header-h)) + var(--nd97-header-add, 0px)); padding-bottom: calc(var(--nd97-layout-footer-h, var(--nd97-footer-h)) + var(--nd97-footer-add, 0px)); box-sizing: border-box; } body.nd97-app > .nd97-app-main { width: 100%; } .nd97-site-footer { padding-bottom: env(safe-area-inset-bottom, 0); } .nd97-site-footer .nd97-footer-brand { font-weight: 600; color: #475569; } /* Tool pages: one viewport box — main fills space between padded chrome (no 100dvh double-count) */ @media (min-width: 992px) { body.nd97-app.nd97-tool-page { display: flex; flex-direction: column; height: 100dvh; max-height: 100dvh; overflow: hidden; } body.nd97-app.nd97-tool-page > .nd97-app-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } } @media (max-width: 991.98px) { /* Prevent A4-fixed-width previews from widening the entire page sideways */ body.nd97-app.nd97-tool-page { overflow-x: hidden; } body.nd97-app.nd97-tool-page > .nd97-app-main { overflow: visible; scroll-padding-bottom: calc( var(--nd97-layout-footer-h, var(--nd97-footer-h)) + var(--nd97-footer-add, 0px) + 0.75rem ); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); box-sizing: border-box; } body.nd97-app.nd97-tool-page > main.nd97-app-main > .container-fluid { padding-left: max(0.75rem, env(safe-area-inset-left, 0px)); padding-right: max(0.75rem, env(safe-area-inset-right, 0px)); } /* A4 preview: scaled to column width (.nd97-preview-fit-shim + nd97Pdf.initPreviewFitToWidth) */ .ra-preview-frame.ra-pdf-capture, .da-preview-frame.da-pdf-capture { overscroll-behavior-x: none; padding-left: clamp(6px, 2vw, 12px); padding-right: clamp(6px, 2vw, 12px); padding-top: clamp(8px, 2.5vw, 16px); padding-bottom: clamp(8px, 2.5vw, 16px); } .nd97-tool-sidebar .input-group-text { min-height: 44px; display: inline-flex; align-items: center; } .nd97-tool-sidebar .input-group .form-control:not(textarea), .nd97-tool-sidebar .input-group .form-select { min-height: 44px; } /* Extra comfort for toggles alongside text fields */ .nd97-touch-switch.form-switch { padding-left: 2.65em; min-height: 2.75rem; padding-top: 0.25rem; padding-bottom: 0.35rem; } .nd97-touch-switch.form-switch .form-check-input { width: 2.875em; height: 1.5em; margin-top: 0.2em; margin-left: -2.65em; } .nd97-touch-switch.form-switch .form-check-label { font-size: 0.9375rem; line-height: 1.35; padding-top: 0.15rem; } } .nd97-navbar .container-fluid.px-3, .nd97-site-footer .container-fluid.px-3 { padding-left: max(0.75rem, env(safe-area-inset-left, 0px)); padding-right: max(0.75rem, env(safe-area-inset-right, 0px)); } /* Hint under preview title — hidden on lg+ via media query below */ .nd97-mobile-preview-hint { font-size: 0.8125rem; line-height: 1.35; color: var(--bs-secondary-color); } @media (min-width: 992px) { .nd97-mobile-preview-hint { display: none !important; } } /* Screen preview: scale #pdf-source to fit the preview frame (PDF capture uses sheets; transform cleared during capture). */ .nd97-preview-fit-shim { width: 100%; box-sizing: border-box; overflow: hidden; display: flex; justify-content: center; align-items: flex-start; min-height: 0; } /* * Critical: parent must span the sheets' intrinsic width (~210mm). * If #pdf-source stays width:100% of the column while children are wider and * flush-left, transform-origin:center is the column center — not the page center — * and scaled preview shifts left / clips on mobile. */ .ra-preview-frame.ra-pdf-capture .nd97-preview-fit-shim > #pdf-source.ra-a4-page-wrap, .da-preview-frame.da-pdf-capture .nd97-preview-fit-shim > #pdf-source.da-a4-page-wrap { width: max-content; max-width: none; margin-left: auto; margin-right: auto; box-sizing: border-box; } .nd97-preview-fit-shim > #pdf-source { flex-shrink: 0; transform-origin: top center; transform: scale(var(--nd97-preview-scale, 1)); } .ra-pdf-capture-pending .nd97-preview-fit-shim > #pdf-source, .da-pdf-capture-pending .nd97-preview-fit-shim > #pdf-source { transform: none !important; } /* Avoid horizontal bleed when scaled layout is clipped */ .ra-preview-frame.ra-pdf-capture, .da-preview-frame.da-pdf-capture { overflow-x: hidden; box-sizing: border-box; } /* Letterhead modal: comfortable taps on phones */ @media (max-width: 575.98px) { #nd97LetterheadModal .modal-dialog { margin: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); } #nd97LetterheadModal .modal-title { font-size: 1rem; line-height: 1.35; } #nd97LetterheadModal .btn-lg, #nd97LetterheadModal .modal-footer .btn { min-height: 46px; } #nd97LetterheadModal .form-control-sm { font-size: 1rem; min-height: 44px; padding-top: 0.45rem; padding-bottom: 0.45rem; } } @media print { body.nd97-app { padding-top: 0 !important; padding-bottom: 0 !important; overflow: visible !important; } .nd97-navbar, .nd97-site-footer { display: none !important; } body.nd97-app > .nd97-app-main { min-height: 0 !important; height: auto !important; max-height: none !important; overflow: visible !important; } .nd97-preview-fit-shim > #pdf-source { transform: none !important; } } /* Shared “tool card” / dashboard tile */ .nd97-tool-card { border: 1px solid var(--nd97-card-border); border-radius: var(--bs-border-radius-lg); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; overflow: hidden; } .nd97-tool-card:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04); } .nd97-tool-card .card-header { background: linear-gradient(180deg, #fff 0%, #f8fafc 100%); border-bottom: 1px solid var(--nd97-card-header-border); font-weight: 600; color: var(--nd97-card-header-fg); } .nd97-page-title { font-weight: 700; letter-spacing: -0.02em; color: var(--nd97-body-color); } /* Tool sidebar page heading (Received / Dispatch / Payment advise) */ .nd97-tool-sidebar > .nd97-page-title { font-size: 1.05rem; } .nd97-tool-sidebar .card-header { background: linear-gradient(180deg, #fff 0%, #f8fafc 100%) !important; border-bottom: 1px solid var(--nd97-card-header-border); font-weight: 600; color: var(--nd97-card-header-fg); } .nd97-tool-sidebar .form-control, .nd97-tool-sidebar .form-select { border-color: rgba(203, 213, 225, 0.8); transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .nd97-tool-sidebar .form-control:focus, .nd97-tool-sidebar .form-select:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color); } .nd97-nav-settings { color: #475569 !important; border: none; text-decoration: none; } .nd97-nav-settings:hover, .nd97-nav-settings:focus { color: #0f172a !important; } .nd97-nav-settings:focus-visible { box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color); border-radius: 0.5rem; } .nd97-tool-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } .nd97-tool-actions .btn { font-weight: 600; border-radius: 0.65rem; padding-left: 1rem; padding-right: 1rem; } .nd97-tool-sidebar > h1, .nd97-tool-sidebar > p.text-muted, .nd97-tool-sidebar > .form-check, .nd97-tool-sidebar .card, .nd97-tool-sidebar .nd97-tool-actions { max-width: min(100%, 28rem); margin-left: auto; margin-right: auto; } @media (max-width: 991.98px) { .nd97-tool-sidebar .form-control, .nd97-tool-sidebar .form-select { font-size: 1rem; min-height: 44px; } .nd97-tool-sidebar .form-control-sm { min-height: 44px; padding-top: 0.5rem; padding-bottom: 0.5rem; } .nd97-tool-sidebar .btn { min-height: 46px; padding-top: 0.55rem; padding-bottom: 0.55rem; touch-action: manipulation; } .nd97-tool-sidebar .card-header { min-height: 44px; display: flex; align-items: center; } .nd97-tool-sidebar .nd97-tool-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .nd97-tool-sidebar .nd97-tool-actions .btn { width: 100%; } .nd97-tool-sidebar .nd97-tool-actions #btnLoadSample { grid-column: 1 / -1; } } @media (max-width: 575.98px) { .nd97-tool-sidebar .nd97-tool-actions { grid-template-columns: 1fr; } }