/* ============================================================ Option 1 Safety -- EIRS Custom Theme Brand: Gold (#FFD700) on Black (#1a1a1a) Inherits: Lumo (Vaadin 25) ============================================================ */ @font-face { font-family: "Archivo"; src: url("./fonts/archivo-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Archivo"; src: url("./fonts/archivo-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Archivo"; src: url("./fonts/archivo-black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; } /* ── Brand CSS custom properties ───────────────────────────── Applied on :root so they cascade into shadow DOM parts via Lumo's forwarded custom properties mechanism. */ html { --lumo-font-family: "Archivo", sans-serif; /* Primary accent -- Option 1 Safety Gold */ --lumo-primary-color: #FFD700; --lumo-primary-text-color: #1a1a1a; /* dark text on gold bg */ --lumo-primary-color-50pct: rgba(255, 215, 0, 0.5); --lumo-primary-color-10pct: rgba(255, 215, 0, 0.10); /* Border radius -- slightly tighter for a professional look */ --lumo-border-radius-m: 6px; --lumo-border-radius-s: 4px; --lumo-border-radius-l: 8px; } /* Phase 1: tenant-owned induction slide content only. */ .o1s-slide { color: var(--o1s-slide-ink, var(--lumo-body-text-color)); background: var(--o1s-slide-bg, var(--lumo-contrast-5pct)); font-family: var(--o1s-slide-body-font, var(--lumo-font-family)); } .o1s-slide h1, .o1s-slide h2, .o1s-slide h3 { color: var(--o1s-slide-ink, var(--lumo-body-text-color)) !important; font-family: var(--o1s-slide-heading-font, var(--lumo-font-family)) !important; font-weight: 600; } .o1s-slide p, .o1s-slide li, .o1s-slide span { color: var(--o1s-slide-ink, var(--lumo-body-text-color)) !important; font-family: var(--o1s-slide-body-font, var(--lumo-font-family)) !important; } .o1s-slide p, .o1s-slide li { line-height: 1.45; } /* Phase 2: tenant-owned sitting chrome. Values fall back to the existing O1S look. */ .o1s-sitting-header { background: var(--o1s-band-bg, #1A1A1A); color: var(--o1s-band-ink, #FFFFFF); font-family: var(--o1s-subhead-font, var(--lumo-font-family)); padding: var(--lumo-space-m); border-radius: var(--lumo-border-radius-m); } .o1s-sitting-header h3 { color: var(--o1s-band-ink, var(--lumo-header-text-color)) !important; font-family: var(--o1s-subhead-font, var(--lumo-font-family)) !important; font-weight: 600; } .o1s-page-title { color: var(--o1s-band-ink, var(--lumo-header-text-color)) !important; font-family: var(--o1s-title-font, var(--lumo-font-family)) !important; font-weight: 900; } /* The custom properties are inherited by Vaadin's component hosts. */ vaadin-app-layout::part(content) { background-color: var(--o1s-page-bg, var(--lumo-base-color, #f5f5f5)); } /* ── Light mode surface / text tweaks ────────────────────── NOTE: Vaadin Flow applies theme="dark" to the element (via UI.getElement().getThemeList().add(Lumo.DARK)) -- NOT to . The dark-mode block uses [theme~="dark"] (no element tag) so the rule matches body (and inherits via cascade). The light-mode block is scoped to :root (i.e. ) ONLY -- never use a bare :not([theme~="dark"]) here, because it would match every non-dark descendant (h1, vaadin-combo-box, etc.) and override the dark vars inherited from body. */ :root { --lumo-base-color: #f5f5f5; --lumo-body-text-color: #1a1a1a; --lumo-secondary-text-color: #555555; --lumo-header-text-color: #111111; /* Opaque grid cell backgrounds (see frozen-column fix below) */ --eirs-grid-cell-bg: #f5f5f5; --eirs-grid-header-bg: #e8e8e8; /* Row-state colours: pastel fills, dark text */ --eirs-mitigated-bg: #c8e6c9; --eirs-mitigated-fg: #1a1a1a; --eirs-create-new-bg: #fff9c4; --eirs-create-new-fg: #1a1a1a; } /* ── Dark mode palette ───────────────────────────────────── */ [theme~="dark"] { --lumo-primary-color: #FFD700; --lumo-primary-text-color: #1a1a1a; --lumo-primary-color-50pct: rgba(255, 215, 0, 0.5); --lumo-primary-color-10pct: rgba(255, 215, 0, 0.12); --lumo-base-color: #1a1a1a; --lumo-body-text-color: #e8e8e8; --lumo-secondary-text-color: #aaaaaa; --lumo-header-text-color: #ffffff; /* Surface layers */ --lumo-tint-5pct: rgba(255,255,255,0.05); --lumo-tint-10pct: rgba(255,255,255,0.10); --lumo-tint-20pct: rgba(255,255,255,0.16); --lumo-shade-5pct: rgba(0,0,0,0.20); --lumo-shade-10pct: rgba(0,0,0,0.30); --lumo-shade-20pct: rgba(0,0,0,0.40); /* Opaque grid cell backgrounds (see frozen-column fix below) */ --eirs-grid-cell-bg: #1a1a1a; --eirs-grid-header-bg: #242424; /* Row-state colours: deep fills so Lumo's near-white component text (rendered inside shadow DOM and not reachable via ::part) remains readable. */ --eirs-mitigated-bg: #1b5e20; --eirs-mitigated-fg: #e8e8e8; --eirs-create-new-bg: #4a3800; --eirs-create-new-fg: #ffe9a3; } /* ── AppLayout navbar ────────────────────────────────────── */ vaadin-app-layout::part(navbar) { background-color: #1a1a1a; border-bottom: 2px solid #FFD700; box-shadow: 0 2px 12px rgba(0,0,0,0.5); padding-top: 4px; padding-bottom: 4px; min-height: 48px; } /* ── AppLayout drawer -- always dark (brand decision) ────── */ vaadin-app-layout::part(drawer) { background-color: #111111; border-right: 1px solid #2a2a2a; box-shadow: 2px 0 12px rgba(0,0,0,0.4); } /* ── SideNav label (section heading) ────────────────────── */ vaadin-side-nav { padding: 8px 0; } /* ── SideNav items ───────────────────────────────────────── */ vaadin-side-nav-item::part(item) { color: #cccccc; border-radius: 6px; margin: 2px 8px; padding: 8px 12px; font-size: 0.9rem; font-weight: 500; transition: background 0.15s ease, color 0.15s ease; } vaadin-side-nav-item::part(item):hover { background-color: rgba(255, 215, 0, 0.12); color: #FFD700; } vaadin-side-nav-item[active]::part(item) { background-color: rgba(255, 215, 0, 0.18); color: #FFD700; font-weight: 700; border-left: 3px solid #FFD700; } /* SideNav icons */ vaadin-side-nav-item::part(icon) { color: inherit; } /* ── Drawer branding footer ──────────────────────────────── */ .drawer-brand { padding: 12px 16px 16px; border-top: 1px solid #2a2a2a; margin-top: auto; } .drawer-brand-text { font-size: 0.7rem; color: #555555; text-transform: uppercase; letter-spacing: 0.08em; } /* ── View content area ───────────────────────────────────── */ vaadin-app-layout::part(content) { background-color: var(--lumo-base-color, #f5f5f5); } /* ── Primary buttons -- gold fill with dark text ─────────── */ vaadin-button[theme~="primary"] { background-color: var(--o1s-btn-bg, #FFD700); color: var(--o1s-btn-ink, #1a1a1a); font-weight: 700; } vaadin-button[theme~="primary"]:hover { background-color: var(--o1s-btn-bg, #e6c200); } /* ── Grid styling ────────────────────────────────────────── */ vaadin-grid { border-radius: 8px; border: 1px solid var(--lumo-tint-10pct); box-shadow: var(--lumo-box-shadow-xs); } /* ── Frozen column fix: all cells must have an opaque background. Vaadin Lumo grid cells are transparent by default; position:sticky frozen cells will show scrolled column content bleeding through unless every cell has a solid fill. --eirs-grid-cell-bg = page base colour (light: #f5f5f5, dark: #1a1a1a) --eirs-grid-header-bg = slightly darker header shade */ vaadin-grid::part(body-cell) { background-color: var(--eirs-grid-cell-bg, #f5f5f5); color: var(--lumo-body-text-color, #1a1a1a); } vaadin-grid::part(header-cell) { background-color: var(--eirs-grid-header-bg, #e8e8e8); color: var(--lumo-secondary-text-color); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid var(--lumo-tint-20pct); } /* Row-state colour overrides -- declared AFTER body-cell base so they win. Backgrounds and text colours come from CSS custom properties that flip in the [theme~="dark"] block above, so a single rule handles both light and dark mode. */ /* Mitigated row */ vaadin-grid::part(row-mitigated) { background-color: var(--eirs-mitigated-bg); color: var(--eirs-mitigated-fg); } /* CREATE NEW sentinel row */ vaadin-grid::part(row-create-new) { background-color: var(--eirs-create-new-bg); color: var(--eirs-create-new-fg); } vaadin-grid::part(row):hover vaadin-grid-cell-content { background-color: var(--lumo-primary-color-10pct); } vaadin-grid::part(selected-row) vaadin-grid-cell-content { background-color: var(--lumo-primary-color-10pct); } /* ── Dialog polish ───────────────────────────────────────── */ vaadin-dialog-overlay::part(overlay) { border-radius: 10px; box-shadow: 0 8px 40px rgba(0,0,0,0.5); } vaadin-dialog-overlay::part(header) { border-bottom: 1px solid var(--lumo-tint-10pct); font-weight: 700; } /* ── Notification polish ─────────────────────────────────── */ vaadin-notification-container { z-index: 10000; } /* ── Badge styles (used in grids) ────────────────────────── */ [theme~="badge"] { border-radius: 4px; padding: 2px 8px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em; } /* ── Light-mode specific navbar text fix ─────────────────── */ /* Navbar is always dark regardless of theme -- keep text legible. Scoped via :root :not([theme~="dark"]) ancestor pattern would not work (navbar lives under body, not html), so instead we target the navbar unconditionally -- it is always dark by brand. */ vaadin-app-layout::part(navbar) { background-color: #1a1a1a; } /* Force navbar button text to stay light always */ vaadin-app-layout::part(navbar) vaadin-button { color: #cccccc; } /* ── Group header band styling (Problems Grid v4) ────────── */ /* Applied to the Div component inside merged HeaderRow cells */ .group-header-reporter { background: #1565c0; color: white; } .group-header-allocation { background: #5b2d8e; color: white; } .group-header-response { background: #1b5e20; color: white; } /* ── Grid row colouring via ::part() (Vaadin 25) ───────────── setPartNameGenerator() in IncidentGridView adds part names to BOTH the row element and each cell element inside that row. ::part() targets those elements from outside the shadow DOM -- no 'themeComponentStyles' feature flag required. NOTE: CSS ::part() does not support :hover, so hover variants are omitted here. Basic row colours are sufficient for mitigated (green) and CREATE NEW (yellow) visual indicators. Row-state background overrides are declared in the grid section above as vaadin-grid::part(body-cell row-*) rules. */ /* ── Drawer copyright footer (F8) ────────────────────────── */ .app-footer { display: flex; justify-content: space-between; align-items: center; padding: 6px 14px 10px; font-size: 0.62rem; color: #444444; letter-spacing: 0.03em; flex-shrink: 0; } /* ── Login page body background ──────────────────────────── */ body { margin: 0; padding: 0; } /* ── Login view (F7) ─────────────────────────────────────── */ .login-view { background-color: #1a1a1a; background-image: radial-gradient(ellipse at 50% 0%, rgba(255,215,0,0.07) 0%, transparent 70%); } .login-card { display: flex; flex-direction: column; align-items: center; padding: 2.5rem 3rem; background-color: #242424; border-radius: 12px; border: 1px solid #3a3a3a; box-shadow: 0 8px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,215,0,0.08); width: 100%; max-width: 420px; /* Force Lumo dark-mode tokens inside the card so Vaadin input text is light */ --lumo-body-text-color: #e0e0e0; --lumo-header-text-color: #ffffff; --lumo-secondary-text-color: #aaaaaa; --lumo-base-color: #2d2d2d; --lumo-contrast-5pct: rgba(255,255,255,0.05); --lumo-contrast-10pct: rgba(255,255,255,0.10); --lumo-contrast-20pct: rgba(255,255,255,0.20); --vaadin-input-field-value-color: #e8e8e8; --vaadin-input-field-background: rgba(255,255,255,0.07); --vaadin-input-field-hover-background: rgba(255,255,255,0.11); --vaadin-input-field-focused-background: rgba(255,255,255,0.11); color: #e0e0e0; } .login-logo { width: 180px; margin-bottom: 1.25rem; display: block; } .login-subtitle { color: #cccccc; font-size: 0.95rem; font-weight: 500; margin: 0 0 1.25rem 0; text-align: center; letter-spacing: 0.01em; } .login-footer-note { color: #666666; font-size: 0.72rem; margin-top: 1rem; text-align: center; } /* ── F22: Reporter's original QR form message -- read-only, visually distinct ──────────── */ .public-description-field { --vaadin-input-field-background: var(--lumo-contrast-5pct); border-left: 3px solid var(--lumo-primary-color); border-radius: 0 4px 4px 0; } /* ============================================================ COMPACT WORKING PANEL (added May 2026) Tightens the control room dashboard: smaller fonts, less padding, lower-height inputs, wrap-friendly grid headers. Applied globally to all views inside the AppLayout content pane -- public Thymeleaf pages are unaffected. ============================================================ */ /* Kill default top/bottom padding on the AppLayout content slot so the first child (toolbar) sits flush under the navbar. Views provide their own outer padding via .getStyle().set("padding", ...). */ vaadin-app-layout::part(content) { padding: 0 !important; } /* Compact page heading (legacy -- title moved to navbar; class kept for any view still rendering it inline). */ .eirs-page-title { font-size: 1.0rem; font-weight: 700; margin: 0 12px 0 0; color: var(--lumo-header-text-color); white-space: nowrap; letter-spacing: 0.01em; align-self: center; } /* Inline filter bar: event + status filter + sla toggle */ .eirs-toolbar { align-items: flex-end; gap: 8px; padding: 2px 0 6px 0; flex-wrap: wrap; } /* Shrink the labels above ComboBox/TextField/etc. */ .eirs-toolbar vaadin-combo-box::part(label), .eirs-toolbar vaadin-text-field::part(label), vaadin-app-layout::part(content) vaadin-combo-box::part(label), vaadin-app-layout::part(content) vaadin-text-field::part(label), vaadin-app-layout::part(content) vaadin-select::part(label), vaadin-app-layout::part(content) vaadin-text-area::part(label), vaadin-app-layout::part(content) vaadin-checkbox::part(label) { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding-bottom: 1px; } /* Lower-height inputs across the dashboard. Setting the field-size CSS vars on the host is the supported way to shrink Lumo input heights -- font-size on the host alone does NOT cascade through the shadow DOM input. */ vaadin-app-layout::part(content) vaadin-text-field, vaadin-app-layout::part(content) vaadin-combo-box, vaadin-app-layout::part(content) vaadin-select, vaadin-app-layout::part(content) vaadin-date-picker, vaadin-app-layout::part(content) vaadin-time-picker, vaadin-app-layout::part(content) vaadin-date-time-picker { --lumo-text-field-size: 28px; --vaadin-input-field-height: 28px; --lumo-font-size-m: 0.8rem; --lumo-font-size-s: 0.75rem; font-size: 0.8rem; padding-top: 0; } vaadin-app-layout::part(content) vaadin-text-area { --lumo-font-size-m: 0.82rem; font-size: 0.82rem; } /* Compact buttons in the working panel */ vaadin-app-layout::part(content) vaadin-button { --lumo-button-size: 28px; font-size: 0.78rem; min-width: 0; padding: 0 10px; } /* ── Compact grid (Problems Grid) ─────────────────────────── Tighten row height + cell padding, shrink fonts, allow header wrap so labels like "Time Mitigated" no longer overflow. IMPORTANT: most vertical space in a Vaadin grid row is owned by `vaadin-grid-cell-content` (the slotted wrapper div) which has its own padding (var(--lumo-space-xs) by default ~= 0.5rem top and bottom). Setting padding on ::part(body-cell) alone does NOT remove that wrapper padding -- we must override it on the slotted element directly. */ vaadin-app-layout::part(content) vaadin-grid { font-size: 0.8rem; --lumo-size-m: 24px; --lumo-font-size-m: 0.8rem; } vaadin-app-layout::part(content) vaadin-grid::part(row) { min-height: 26px; } vaadin-app-layout::part(content) vaadin-grid::part(body-cell), vaadin-app-layout::part(content) vaadin-grid::part(header-cell) { min-height: 26px; } /* The real culprit for row height: slotted cell-content wrapper */ vaadin-app-layout::part(content) vaadin-grid-cell-content { padding: 1px 6px !important; font-size: 0.8rem; line-height: 1.2; } vaadin-app-layout::part(content) vaadin-grid::part(header-cell) { padding: 1px 6px; font-size: 0.66rem; white-space: normal; line-height: 1.15; letter-spacing: 0.02em; text-transform: uppercase; } /* Inline grid editors -- compact height + small font. Vaadin combo-box renders its value into a slotted (NOT shadow DOM) -- the `vaadin-combo-box input` selector reaches it and lets us shrink the value font. */ vaadin-app-layout::part(content) vaadin-grid vaadin-text-field, vaadin-app-layout::part(content) vaadin-grid vaadin-combo-box { --lumo-text-field-size: 22px; --vaadin-input-field-height: 22px; --lumo-font-size-m: 0.72rem; --lumo-font-size-s: 0.68rem; font-size: 0.72rem; padding-top: 0; } /* Force the slotted font down (combo-box value + text-field) */ vaadin-app-layout::part(content) vaadin-grid vaadin-combo-box input, vaadin-app-layout::part(content) vaadin-grid vaadin-text-field input, vaadin-app-layout::part(content) vaadin-combo-box input, vaadin-app-layout::part(content) vaadin-text-field input { font-size: 0.72rem !important; min-height: 0; } /* And the toggle-button + clear icons inside the combo */ vaadin-app-layout::part(content) vaadin-grid vaadin-combo-box::part(toggle-button), vaadin-app-layout::part(content) vaadin-grid vaadin-combo-box::part(clear-button) { font-size: 0.8rem; width: 14px; } vaadin-app-layout::part(content) vaadin-grid vaadin-button { --lumo-button-size: 22px; font-size: 0.7rem; padding: 0 6px; min-width: 0; height: 22px; margin: 0; } /* Combo-box dropdown overlay: allow it to be wider than its anchor input so long option labels (e.g. CATEGORY values) are not truncated by the narrow column-fitted combo width. */ vaadin-combo-box-overlay { --vaadin-combo-box-overlay-width: auto; min-width: 140px; } vaadin-combo-box-overlay::part(content), vaadin-combo-box-overlay::part(overlay) { font-size: 0.78rem; } vaadin-combo-box-item { font-size: 0.78rem; padding: 2px 8px; min-height: 22px; }