/* ============================================================ app.css — Global stylesheet for the BSClose Blazor Server application. Frameworks in use: • Bootstrap 5 — grid, utilities, forms, buttons • Bulma — supplementary component classes (.select, .is-*-control wrappers used by dropdowns) This file adds app-specific overrides and extensions on top of those frameworks. It is loaded via in App.razor / _Layout.cshtml after the framework CSS bundles. ============================================================ */ /* ============================================================ 1. BASE TYPOGRAPHY & ROOT ELEMENTS Sets the default sans-serif font stack for the entire page. Blazor's default template starts with these rules. ============================================================ */ html, body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } /* ============================================================ 2. LINK & BUTTON-LINK COLOUR Overrides Bootstrap's default blue (#0d6efd) with the Specisoft brand blue. Applies to tags and any element using .btn-link (e.g. nav links rendered as buttons). ============================================================ */ a, .btn-link { color: #006bb7; } /* ============================================================ 3. PRIMARY BUTTON COLOURS Overrides Bootstrap's .btn-primary with the brand palette. The slightly darker border-color gives a subtle depth effect. ============================================================ */ .btn-primary { color: #fff; background-color: #1b6ec2; border-color: #1861ac; } /* ============================================================ 4. FOCUS RING (ACCESSIBILITY) Applied to buttons, links used as nav items, text inputs, and checkboxes when they receive keyboard focus. Uses a double box-shadow technique: Layer 1 (inner): 0.1rem white ring — visually separates the focus ring from the element's own border, making it visible on any background. Layer 2 (outer): 0.25rem blue ring — the visible focus indicator that satisfies WCAG 2.1 AA contrast requirements. This replaces the browser's default outline so that the ring appears consistently across Chrome, Firefox, and Edge. ============================================================ */ .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; } /* ============================================================ 5. MAIN CONTENT AREA PADDING Adds top padding below the fixed/sticky navbar so that page content is not hidden underneath it. ============================================================ */ .content { padding-top: 1.1rem; } /* ============================================================ 6. HEADING FOCUS SUPPRESSION Blazor Server sets tabindex="-1" on

elements to manage focus after navigation (for screen-reader announcements). This rule removes the browser's default focus outline on h1 since the visual focus ring is unnecessary on a heading that is focused programmatically, not by user keyboard interaction. ============================================================ */ h1:focus { outline: none; } /* ============================================================ 7. BLAZOR FORM VALIDATION STYLES These classes are toggled automatically by Blazor's EditForm / DataAnnotationsValidator pipeline: .valid.modified — field has been touched AND is valid. Uses a green outline to give positive feedback. Excludes checkboxes (they use a tick mark instead of an outline). .invalid — field has a validation error. Uses a red outline matching the message colour below. .validation-message — the component text rendered below an invalid field. ============================================================ */ .valid.modified:not([type="checkbox"]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } /* ============================================================ 8. BLAZOR ERROR BOUNDARY Styles the component's fallback UI when an unhandled exception is caught inside a component subtree. Background: • A base64-encoded inline SVG triangle warning icon (yellow, 56×49 px) is placed in the top-left corner via a CSS background image. Using base64 avoids a separate HTTP request for the icon. • The dark red (#b32121) background makes the error state visually prominent so it is never confused with normal UI. • Left padding (3.7rem) ensures the warning icon does not overlap the error text. The ::after pseudo-element appends a default "An error has occurred." message. Override this in a custom ErrorBoundary component if a more descriptive message is needed. ============================================================ */ .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } /* Default fallback text shown inside the error boundary box. */ .blazor-error-boundary::after { content: "An error has occurred."; } /* ============================================================ 9. CHECKBOX BORDER COLOUR Bootstrap's default checkbox border is quite light and can be hard to see on white backgrounds. This rule darkens the border for checkboxes that also carry .darker-border-checkbox to improve visibility without affecting every form-check. ============================================================ */ .darker-border-checkbox.form-check-input { border-color: #929292; } /* ============================================================ 10. FLOATING LABEL PLACEHOLDER ALIGNMENT Bootstrap's floating-label inputs show a placeholder while the label is animating. By default Bootstrap centres the placeholder; these rules: (a) Shift the placeholder to the END (right) when the input is idle so it does not collide with the floating label text that sits on the left. (b) Return the placeholder to the START (left) when the input is focused, matching the expected text-entry alignment after the label has floated up. .form-control-plaintext handles read-only plain-text inputs inside floating-label wrappers (e.g. display-only fields). ============================================================ */ .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* ============================================================ 11. DATA GRID — ALTERNATING ROW COLOURS (.e-grid) The Syncfusion / custom e-grid component applies data-index-0 / data-index-1 classes to alternate rows. Using alternating row colours (zebra striping) makes it easier to scan data horizontally across many columns. Note: The first rule is missing the leading dot — "e-grid tr.data-index-0" should be ".e-grid tr.data-index-0". This is preserved as-is from the original. Add the dot if the alternate row colour does not render correctly. data-index-0 → light blue (#e3f2fd) — even rows data-index-1 → white (#ffffff) — odd rows ============================================================ */ e-grid tr.data-index-0 { background-color: #e3f2fd !important; } .e-grid tr.data-index-1 { background-color: #ffffff !important; } /* ============================================================ 12. DATA GRID — PILL / BADGE BUTTONS (.e-grid .e-round) Rounds the corners of action buttons inside grid cells into pill shapes and adds small horizontal padding. The small margin between adjacent pills prevents them from touching. ============================================================ */ .e-grid .e-round { border-radius: 20px; padding: 3px 10px; margin: 0 3px; } /* ============================================================ 13. DATA GRID — SMALL TEXT VARIANT (.e-grid .e-small) Reduces font size for secondary / auxiliary text inside grid cells (e.g. metadata, timestamps) without affecting primary cell content. ============================================================ */ .e-grid .e-small { font-size: 12px; } /* ============================================================ 14. DATA GRID — DANGER / DELETE BUTTON (.e-grid .e-danger) Styles destructive action buttons (e.g. Delete row) in red using Bootstrap's danger colour palette. The hover rule darkens the button slightly to provide click feedback. ============================================================ */ .e-grid .e-danger { background-color: #dc3545; color: white; border-color: #dc3545; } .e-grid .e-danger:hover { background-color: #c82333; border-color: #bd2130; } /* ============================================================ 15. DATA GRID — ICON SIZING (.e-icons) Syncfusion icon font classes (.e-icons) default to a small size that can be hard to see at normal grid row height. 14px is a comfortable default; the right margin separates the icon from any adjacent button label text. ============================================================ */ .e-icons { font-size: 14px; margin-right: 4px; } /* ============================================================ 16. FORM GROUP LAYOUT A utility wrapper class for grouping a label + input pair. Adds bottom spacing so stacked form groups do not run together. The label rule ensures labels stack on their own line above the input (display:block) with a small gap. ============================================================ */ .form-group { margin-bottom: 1rem; } .form-group label { display: block; margin-bottom: 0.5rem; } /* ============================================================ 17. E-BTN BUTTON SPACING Adds right margin to Syncfusion .e-btn buttons so that buttons placed side-by-side in toolbars or dialog footers do not visually collide. ============================================================ */ .e-btn { margin-right: 0.5rem; } /* ============================================================ 18. DIALOG / MODAL OVERRIDES (.e-dialog) Tweaks spacing and button margins specifically inside Syncfusion dialog components so they match the app's layout: .e-dialog .form-group — adds vertical breathing room between dialog form fields. .e-dialog .e-btn — larger right margin than the global rule so that dialog footer buttons have more visible separation. The .add_Company rule that was previously here was removed because it caused layout conflicts (the comment marks the intentional omission). ============================================================ */ /* Remove the .add_Company style that was causing issues */ .e-dialog .form-group { margin: 15px 0; } .e-dialog .e-btn { margin-right: 10px; } /* ────────────────────────────────────────────── Color Inversion Utilities ────────────────────────────────────────────── */ /* ============================================================ 19. COLOR INVERSION UTILITIES (.invert-text / .invert-bg) These utility classes let a single component render correctly on both light and dark themes by inverting colours at the CSS level, without requiring a full dark-mode theme or JavaScript. ── .invert-text ───────────────────────────────────────── Applies CSS filter: invert(1) hue-rotate(180deg) to the element itself. This flips all colours (text, borders, shadows) to their perceptual complement while also compensating for the hue shift that a bare invert(1) would cause (hue-rotate(180deg) cancels the hue shift so that e.g. blue text inverts to blue-ish rather than yellow). The immediate child rule applies the SAME filter again to children, which cancels out the parent's inversion on their backgrounds/images while leaving the text colour inverted. This is useful for icon-inside-label patterns. Example: Hello ============================================================ */ .invert-text { filter: invert(1) hue-rotate(180deg); background-color: inherit; } .invert-text > * { filter: invert(1) hue-rotate(180deg); } /* ============================================================ ── .invert-bg ─────────────────────────────────────────── Inverts the background colour of an element using a ::before pseudo-element so that the element's own content (text, child elements) is NOT affected by the filter. How it works: 1. The CSS custom property --invert-bg-from holds the original (pre-inversion) background colour. Defaults to #ffffff (white), which inverts to black. 2. A full-coverage ::before pseudo-element is layered behind all content (z-index: -1) with that colour as its background. 3. The filter on the pseudo-element inverts the colour, giving the visual appearance of an inverted background without touching text or child element colours. The parent needs position:relative and a local stacking context (z-index:0) so that the negative-z pseudo-element stays within the element's box. Example — invert a specific light-blue row background:
Row content
Example — invert white to black (default):
Content
============================================================ */ .invert-bg { --invert-bg-from: #ffffff; position: relative; z-index: 0; } .invert-bg::before { content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--invert-bg-from); filter: invert(1) hue-rotate(180deg); }