/* ============================================================================ 1Sharpe "Diligence Agent" skin — a reskin of the Radzen "standard" theme. HOW IT WORKS - Radzen exposes its palette as CSS custom properties (--rz-*). We redefine the load-bearing ones with the 1Sharpe navy/gold/cream palette. Radzen recolors buttons, badges, links, focus rings, and surfaces app-wide from these — no per-component work needed for the bulk of it. - Brand tokens (--osh-*) are defined per theme on . The mapping block reads the CURRENT --osh-* values, so one mapping serves both themes. app.css loads AFTER (see App.razor), and the html[data-osh-theme] selector out-specifies Radzen's :root, so these win. - Component polish at the bottom only sets color / background / font / radius, never layout, so a wrong guess degrades to Radzen's default, never a broken page. Fonts are the brand faces (App.razor links them; TODO self-host as woff2). ============================================================================ */ .row-divider { border-bottom: 1px solid var(--osh-rule, #e0e0e0); margin: 0.5rem 0; } /* ---- brand tokens: LIGHT (default) ---- */ html[data-osh-theme="light"] { --osh-navy: #1f3a5f; --osh-navy-deep: #16294a; --osh-navy-rail: #1f3a5f; /* sidebar navy — matches the artifact's brand navy */ --osh-navy-soft: #eef1f6; --osh-gold: #b8965a; --osh-gold-deep: #8f7038; --osh-gold-soft: #f0ead8; --osh-cream: #f0ead8; --osh-paper: #fdfbf5; --osh-card: #ffffff; --osh-ground: #ece6d6; --osh-ink: #1a1a1a; --osh-ink-2: #3a3a3a; --osh-ink-3: #6b6b6b; --osh-rule: #d8d2c0; --osh-rule-strong: #c4bda3; --osh-good: #4a7e5e; --osh-good-soft: #e3ede6; --osh-warn: #b8965a; --osh-warn-soft: #f2ead8; --osh-bad: #a14848; --osh-bad-soft: #f0e2e2; --osh-info: #3f6493; --osh-info-soft: #e4ebf3; --osh-on-accent: #fdfbf5; } /* ---- brand tokens: DARK ---- */ html[data-osh-theme="dark"] { --osh-navy: #a9c0df; --osh-navy-deep: #0a0c10; --osh-navy-rail: #10161f; --osh-navy-soft: #1a222d; --osh-gold: #cba969; --osh-gold-deep: #d8b877; --osh-gold-soft: #241f14; --osh-cream: #1c2129; --osh-paper: #141821; --osh-card: #191d26; --osh-ground: #0c0e13; --osh-ink: #eef1f6; --osh-ink-2: #cdd3dd; --osh-ink-3: #8b93a2; --osh-rule: #2c333f; --osh-rule-strong: #3a4250; --osh-good: #6fb98c; --osh-good-soft: #16261f; --osh-warn: #cba969; --osh-warn-soft: #2a2213; --osh-bad: #d98a8a; --osh-bad-soft: #2c1a17; --osh-info: #7ea3d0; --osh-info-soft: #17202c; --osh-on-accent: #0c0e13; } /* ---- map brand tokens onto Radzen (applies to both themes) ---- */ html[data-osh-theme] { /* primary = navy */ --rz-primary: var(--osh-navy); --rz-primary-dark: var(--osh-navy-deep); --rz-primary-darker: var(--osh-navy-deep); --rz-primary-light: var(--osh-navy); --rz-primary-lighter: var(--osh-navy-soft); /* secondary = gold */ --rz-secondary: var(--osh-gold); --rz-secondary-dark: var(--osh-gold-deep); --rz-secondary-light: var(--osh-gold); --rz-secondary-lighter: var(--osh-gold-soft); /* semantic */ --rz-success: var(--osh-good); --rz-success-dark: var(--osh-good); --rz-success-light: var(--osh-good); --rz-success-lighter: var(--osh-good-soft); --rz-info: var(--osh-info); --rz-info-dark: var(--osh-info); --rz-info-light: var(--osh-info); --rz-info-lighter: var(--osh-info-soft); --rz-warning: var(--osh-warn); --rz-warning-dark: var(--osh-gold-deep); --rz-warning-light: var(--osh-warn); --rz-warning-lighter: var(--osh-warn-soft); --rz-danger: var(--osh-bad); --rz-danger-dark: var(--osh-bad); --rz-danger-light: var(--osh-bad); --rz-danger-lighter: var(--osh-bad-soft); /* grounds + text */ --rz-body-background-color: var(--osh-ground); --rz-base-background-color: var(--osh-ground); --rz-content-background-color: var(--osh-card); --rz-panel-background-color: var(--osh-card); --rz-card-background-color: var(--osh-card); --rz-input-background-color: var(--osh-card); --rz-input-border: 1px solid var(--osh-rule-strong); --rz-text-color: var(--osh-ink); --rz-text-secondary-color: var(--osh-ink-3); --rz-text-tertiary-color: var(--osh-ink-3); --rz-border-color: var(--osh-rule); --rz-sidebar-background-color: var(--osh-navy-rail); /* shape + type — softer, rounder. Fonts match the artifact's rendered fallbacks (system sans + Georgia serif), not webfonts — no CDN dependency. */ --rz-border-radius: 10px; --rz-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --rz-text-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* ============================ component polish ============================ */ html[data-osh-theme] body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Radzen's "standard" theme paints a decorative gradient on the body/layout. Kill it so the flat cream ground shows (matches the mockup). !important beats the theme. */ html[data-osh-theme] body, html[data-osh-theme] .rz-body, html[data-osh-theme] .rz-layout, html[data-osh-theme] .rz-content { background-image: none !important; background-color: var(--osh-ground) !important; } /* Headings in the brand serif (Caslon), navy. RadzenText H* + raw headings. */ html[data-osh-theme] .rz-text-h1, html[data-osh-theme] .rz-text-h2, html[data-osh-theme] .rz-text-h3, html[data-osh-theme] .rz-text-h4, html[data-osh-theme] .rz-text-h5, html[data-osh-theme] .rz-text-h6, html[data-osh-theme] h1, html[data-osh-theme] h2, html[data-osh-theme] h3 { font-family: Georgia, "Times New Roman", serif; color: var(--osh-navy); letter-spacing: 0.2px; } /* Uppercase gold section labels (RadzenText Subtitle2 used as field labels). These are often TagName.H3 for semantics, which the heading rule above would paint serif — pin the sans family so labels match the other uppercase labels. */ html[data-osh-theme] .rz-text-subtitle2 { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; text-transform: uppercase; letter-spacing: 1.4px; font-size: 0.7rem; font-weight: 600; color: var(--osh-gold-deep); } /* Detail-card values are RadzenText Body1 (16px) by default, 2px above the app's 14px working text and oversized against their 11px labels. Pin them to 14px so the label/value pairing reads balanced across every detail page. */ html[data-osh-theme] .rz-card .rz-text-body1, html[data-osh-theme] .rz-panel .rz-text-body1 { font-size: 0.875rem; } /* Doc Type Stats grids: Radzen sets the fixed-layout table to fill its column (stretching every column). Force auto width so the table shrinks to the sum of its explicit column widths instead of sprawling — keeps Doc Type at its 220px. */ html[data-osh-theme] .doc-type-stats, html[data-osh-theme] .doc-type-stats .rz-data-grid-data { width: fit-content !important; } html[data-osh-theme] .doc-type-stats .rz-grid-table { width: auto !important; } /* Full-height navy rail (mock): the rail spans BOTH grid rows so the brand sits at the very top and the header covers only the content column. This is Radzen's own `rz-sidebar-fullheight` grid template, forced on for our sidebar+header layout (the app has no footer / second sidebar, so this exact template applies). */ html[data-osh-theme] .rz-layout:has(> .rz-sidebar):has(> .rz-header) { grid-template-areas: "rz-sidebar rz-header" "rz-sidebar rz-body" !important; /* The rail column stays a fixed slim width; the sidebar expands as an OVERLAY on hover (below) so the content never reflows. */ grid-template-columns: 62px 1fr !important; } /* Sidebar as a HOVER DRAWER: a slim 62px icon rail by default; on hover it widens to a full labelled rail, floating over the content (position:fixed) so nothing shifts. Overrides Radzen's expanded/collapsed width entirely — the hamburger state no longer drives it. */ html[data-osh-theme] .rz-sidebar { background: var(--osh-navy-rail); border-right: 1px solid var(--osh-rule); width: 62px !important; opacity: 1 !important; overflow: hidden; transition: width 0.16s ease; } html[data-osh-theme] .rz-sidebar:hover { width: 236px !important; position: fixed; top: 0; bottom: 0; left: 0; z-index: 1100; overflow-y: auto; box-shadow: 4px 0 26px rgba(20, 22, 28, 0.30); } /* Rail (not hovered): hide labels + children + brand name, center the icons. */ html[data-osh-theme] .rz-sidebar:not(:hover) .rz-navigation-item-text, html[data-osh-theme] .rz-sidebar:not(:hover) .osh-brand-name, html[data-osh-theme] .rz-sidebar:not(:hover) .rz-navigation-item .rz-navigation-item { display: none; } html[data-osh-theme] .rz-sidebar:not(:hover) .rz-navigation-item-link { justify-content: center; padding-left: 0; padding-right: 0; } html[data-osh-theme] .rz-sidebar:not(:hover) .osh-brand { justify-content: center; padding-left: 0; padding-right: 0; } /* The panel-menu and its items paint their own (dark) background over the rail — make them transparent so the navy shows through; only the active item is tinted. */ html[data-osh-theme] .rz-sidebar .rz-panel-menu, html[data-osh-theme] .rz-sidebar .rz-panel-menu-item, html[data-osh-theme] .rz-sidebar .rz-navigation, html[data-osh-theme] .rz-sidebar .rz-navigation-item, html[data-osh-theme] .rz-sidebar .rz-navigation-item-wrapper, html[data-osh-theme] .rz-sidebar .rz-navigation-item-link { background: transparent !important; } html[data-osh-theme] .rz-sidebar .rz-navigation-item-link, html[data-osh-theme] .rz-sidebar .rz-navigation-item-text, html[data-osh-theme] .rz-sidebar .rz-navigation-item-icon { color: #dfe6ef; } html[data-osh-theme] .rz-sidebar .rz-navigation-item-link:hover { background: rgba(255, 255, 255, 0.06); } html[data-osh-theme] .rz-sidebar .rz-navigation-item-link.rz-navigation-item-link-active { background: rgba(184, 150, 90, 0.18); color: #ffffff; box-shadow: inset 3px 0 0 var(--osh-gold); } /* Nav is a FLAT always-open tree (items forced Expanded in NavMenu.razor), so the parent chevron is a static "has submenu items" signifier, not a collapse toggle. Kept subtle (muted steel) and dropped from the collapsed icon-rail. */ html[data-osh-theme] .rz-sidebar .rz-panel-menu-item-icon, html[data-osh-theme] .rz-sidebar .rzi-chevron-down { display: none !important; } html[data-osh-theme] .rz-sidebar .rz-navigation-item-icon-children { color: #e2e8f0; font-size: 1.4rem; font-weight: 700; /* Items are permanently Expanded, so Radzen rotates the glyph 180° (points up). Force it back down — the chevron is a static "has submenus" signifier. */ transform: none !important; } html[data-osh-theme] .rz-sidebar:not(:hover) .rz-navigation-item-icon-children { display: none !important; } /* Parent (top-level) leading icons in gold; the parent label is the uppercase section header. Use --osh-gold (a foreground token, visible in both themes) — NOT --osh-gold-soft, which is a soft-background token that goes near-black in dark. */ html[data-osh-theme] .rz-sidebar .rz-navigation-item-icon { color: var(--osh-gold); } /* Child items (2nd level = an item nested inside an item): normal-case, dimmer, indented with a hairline tree rule (mock .nav-item). */ html[data-osh-theme] .rz-sidebar .rz-navigation-item .rz-navigation-item .rz-navigation-item-text { text-transform: none; letter-spacing: 0.2px; font-size: 0.76rem; font-weight: 500; } html[data-osh-theme] .rz-sidebar .rz-navigation-item .rz-navigation-item .rz-navigation-item-icon { color: #c2ccd8; opacity: 0.85; } html[data-osh-theme] .rz-sidebar .rz-navigation-item .rz-navigation-item .rz-navigation-item-link { margin-left: 22px; border-left: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0 6px 6px 0; } /* Header bar: paper ground with a gold hairline (echoes the memo's gold rule). Flush to the top and compact (mock ~54px), inset past the rail. */ html[data-osh-theme] .rz-header { background: var(--osh-paper); border-bottom: 2px solid var(--osh-gold); color: var(--osh-navy); min-height: 54px; height: 54px; padding: 0 22px 0 28px; } html[data-osh-theme] .rz-header .rz-navigation-item-text { color: var(--osh-navy); } /* Header texts (breadcrumb + signed-in email) — compact, muted (mock: gray crumb, only a drilled current-page segment would be gold). */ html[data-osh-theme] .osh-crumb { font-weight: 700; font-size: 0.72rem; color: var(--osh-gold-deep); letter-spacing: 2px; text-transform: uppercase; margin-left: 0; } html[data-osh-theme] .rz-header .rz-text-body2, html[data-osh-theme] .rz-header .rz-body2 { font-size: 0.75rem; color: var(--osh-ink-3); font-weight: 500; } /* Vertically center the header row (the inner stack was sitting at the top). */ html[data-osh-theme] .rz-header { display: flex; align-items: center; } /* Right cluster (Theme / email / Logout): matching subtle pills, quiet email. */ html[data-osh-theme] .rz-header .rz-button { background: var(--osh-card); border: 1px solid var(--osh-rule); color: var(--osh-ink-2); box-shadow: none; font-weight: 600; font-size: 0.72rem; min-height: 30px; } html[data-osh-theme] .rz-header .rz-button:hover { background: var(--osh-paper); border-color: var(--osh-gold); color: var(--osh-navy); } /* Cards: paper surface, soft border, gold top accent, gentle shadow. */ /* .rz-panel too: the *Fields "Extracted Fields" block is a RadzenPanel (for its collapse toggle), not a Card — without this it renders frameless and breaks the card-per-section layout every other block on the page uses. */ html[data-osh-theme] .rz-card, html[data-osh-theme] .rz-panel { background: var(--osh-card); border: 1px solid var(--osh-rule); border-top: 3px solid var(--osh-gold); border-radius: 12px; box-shadow: 0 1px 2px rgba(31, 58, 95, 0.04), 0 8px 24px rgba(31, 58, 95, 0.06); } /* Match the card's inner inset — RadzenPanel defaults to 8px, so the *Fields table otherwise hugs the border while every real card breathes at 20px. */ html[data-osh-theme] .rz-panel { padding: 20px; } /* The panel titlebar ("Extracted Fields") sits flush against the column-header row, and its h6 rule only spans the text width (the h6 shrinks inside the flex titlebar). Put the section-header rule on the full-width titlebar so it matches the card sections (Actions/Basic Information), and give ~14px breathing room to the content. */ html[data-osh-theme] .rz-panel .rz-panel-titlebar { border-bottom: 1px solid var(--osh-rule); padding-bottom: 9px; margin-bottom: 14px; } html[data-osh-theme] .rz-panel .rz-text-h6, html[data-osh-theme] .rz-panel h6 { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } /* The *Fields column-header row (Field / Raw Value / Normalized) sat ~20px above the first field via a
, while the data rows below are flush — the header read as detached. Drop just that separator (leaves Appraisal's group
s) and give the header a small, consistent margin instead. */ html[data-osh-theme] .rz-panel-content > .rz-row:first-child + br { display: none; } html[data-osh-theme] .rz-panel-content > .rz-row:first-child { margin-bottom: 8px; } /* Normalized textareas (Legal Description, Reviewer Comment) auto-grow to fit content so the editable value is as tall as the plain-text Raw column beside it, not a fixed 4-row box that scrolls. field-sizing is modern-Chromium; Rows="4" is the fallback. */ html[data-osh-theme] .rz-panel textarea { field-sizing: content; min-height: 5.5rem; max-height: 40rem; } /* Standardize the *Fields row grid across ALL doc types. The components declare inconsistent column ratios (Appraisal 2/5/1/4, Note 3/4/1/4, …) and on the wide card the Raw column balloons, leaving big gaps between Raw / confidence / Normalized. Force one ratio — Field 3 / Raw 3 / confidence 1 / Normalized 5 — so the value columns pack together and every doc type matches. Rows are uniformly 4 columns (verified), so nth-child is safe. */ /* Standardized column ratio across all doc types (components declare inconsistent Sizes). Rows use the full card width; Field gets room for the longest label ("Employer Identification Number", ~30 chars), Raw + Normalized take the rest so long values (legal descriptions) show more. ~2% slack left for Radzen gutters. */ /* The Normalized input (col 4) is 36px tall and vertically centers its text, while the label / raw / confidence columns top-align their (shorter) content — so their first line sits ~7px above the input's text. Nudge those three down to meet it. */ html[data-osh-theme] .rz-panel .rz-row > [class*="rz-col-"]:nth-child(1), html[data-osh-theme] .rz-panel .rz-row > [class*="rz-col-"]:nth-child(2), html[data-osh-theme] .rz-panel .rz-row > [class*="rz-col-"]:nth-child(3) { padding-top: 7px; } html[data-osh-theme] .rz-panel .rz-row > [class*="rz-col-"]:nth-child(1) { flex: 0 0 28% !important; max-width: 28% !important; } html[data-osh-theme] .rz-panel .rz-row > [class*="rz-col-"]:nth-child(2) { flex: 0 0 29% !important; max-width: 29% !important; } html[data-osh-theme] .rz-panel .rz-row > [class*="rz-col-"]:nth-child(3) { flex: 0 0 8% !important; max-width: 8% !important; } /* Normalized column grows to fill the remaining width so its right edge lands at the same padding inset as the left ("Field") — equal left/right margins. The first three are fixed (65%), so this can't wrap on the Radzen gutter. */ html[data-osh-theme] .rz-panel .rz-row > [class*="rz-col-"]:nth-child(4) { flex: 1 1 0 !important; max-width: none !important; } /* Data grid = a white, rounded card panel on the cream ground (matches the mockup — the navy is the SIDEBAR only, NOT the grid header). */ html[data-osh-theme] .rz-datatable, html[data-osh-theme] .rz-data-grid { background: var(--osh-card); border: 1px solid var(--osh-rule); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(31, 58, 95, 0.04), 0 8px 24px rgba(31, 58, 95, 0.06); } :root[data-theme="dark"] .rz-datatable, :root[data-theme="dark"] .rz-data-grid { box-shadow: none; } /* Header row: LIGHT with small gray uppercase labels + a hairline underline (was a navy band — the wrong read of the mockup). */ html[data-osh-theme] .rz-grid-table thead th, html[data-osh-theme] .rz-datatable thead th, html[data-osh-theme] .rz-datatable-thead .rz-column-title, html[data-osh-theme] .rz-grid-table thead th .rz-column-title, html[data-osh-theme] .rz-grid-table thead th .rz-column-title-content { background: var(--osh-card); color: var(--osh-ink-3); text-transform: uppercase; letter-spacing: 1.2px; font-size: 0.62rem; font-weight: 700; } html[data-osh-theme] .rz-grid-table thead th, html[data-osh-theme] .rz-datatable thead th { border-bottom: 2px solid var(--osh-rule); } /* Rows: white, roomier, gentle hover, hairline separators. */ html[data-osh-theme] .rz-datatable tbody td, html[data-osh-theme] .rz-grid-table tbody td { background: var(--osh-card); color: var(--osh-ink-2); border-color: var(--osh-rule); padding-top: 0.6rem; padding-bottom: 0.6rem; font-size: 0.8rem; } /* Cell contents (RadzenText / RawValue / plain templates) inherit the compact size too — Radzen sets its own font-size on some inner spans. */ html[data-osh-theme] .rz-datatable tbody td .rz-cell-data, html[data-osh-theme] .rz-grid-table tbody td .rz-cell-data { font-size: 0.8rem; } html[data-osh-theme] .rz-datatable tbody tr:hover td, html[data-osh-theme] .rz-grid-table tbody tr:hover td { background: var(--osh-paper); } /* Buttons: firmer radius. */ html[data-osh-theme] .rz-button { border-radius: 8px; } /* Status badges → soft, rounded pastel pills (mockup style), not solid fills. */ html[data-osh-theme] .rz-badge { border-radius: 999px; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700; font-size: 0.62rem; padding: 0.28em 0.7em; } html[data-osh-theme] .rz-badge-success, html[data-osh-theme] .rz-badge.rz-success { background: var(--osh-good-soft) !important; color: var(--osh-good) !important; } html[data-osh-theme] .rz-badge-danger, html[data-osh-theme] .rz-badge.rz-danger { background: var(--osh-bad-soft) !important; color: var(--osh-bad) !important; } html[data-osh-theme] .rz-badge-warning, html[data-osh-theme] .rz-badge.rz-warning { background: var(--osh-warn-soft) !important; color: var(--osh-gold-deep) !important; } html[data-osh-theme] .rz-badge-info, html[data-osh-theme] .rz-badge.rz-info { background: var(--osh-info-soft) !important; color: var(--osh-info) !important; } html[data-osh-theme] .rz-badge-base, html[data-osh-theme] .rz-badge.rz-base, html[data-osh-theme] .rz-badge-secondary { background: var(--osh-navy-soft) !important; color: var(--osh-navy) !important; } html[data-osh-theme] .rz-badge-light, html[data-osh-theme] .rz-badge.rz-light { background: transparent !important; color: var(--osh-ink-3) !important; box-shadow: inset 0 0 0 1px var(--osh-rule); } /* ======================= structural (Phase 2) ======================= */ /* Give the page content room + a max width so it doesn't stretch on ultrawide. */ /* RadzenBody carries its own margin+padding; the inner .rz-p-4 adds MORE, so content ends up double-inset (far from the rail) and misaligned with the header crumb. Zero the body's own box and let .rz-p-4 own the single 28px inset that the header shares. */ html[data-osh-theme] .rz-body { margin: 0 !important; padding: 0 !important; } html[data-osh-theme] .rz-body .rz-p-4 { max-width: 1500px; padding: 10px 28px 60px !important; } /* Page heading: small gold kicker over the serif title. */ html[data-osh-theme] .osh-page-head { margin: 2px 0 20px; } html[data-osh-theme] .osh-page-head .rz-text-h3 { font-size: 1.7rem; line-height: 1.05; margin: 0; } /* Imports list head: title on the left, the quick-filter box on the right. */ html[data-osh-theme] .osh-imports-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } html[data-osh-theme] .osh-imports-filter { min-width: 300px; max-width: 380px; flex: 0 1 380px; } /* List grid in a white card with a gold top-rule. The inner grid keeps its own rounded border + shadow (matching the Doc Type Stats tables) — an intentional box-in-a-card so every grid reads the same across the app. */ html[data-osh-theme] .osh-grid-card { border-top: 3px solid var(--osh-gold); padding: 8px 10px 4px; } html[data-osh-theme] .osh-grid-caption { font-style: italic; color: var(--osh-ink-3); font-size: 0.8rem; padding: 12px 8px 8px; } /* Sidebar brand mark. */ html[data-osh-theme] .osh-brand { display: flex; align-items: baseline; gap: 3px; padding: 16px 18px 14px; margin-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.10); } html[data-osh-theme] .osh-brand-mark { font: italic 700 22px/1 Georgia, serif; color: var(--osh-gold); } html[data-osh-theme] .osh-brand-bar { font: 300 22px/1 Georgia, serif; color: var(--osh-gold); } html[data-osh-theme] .osh-brand-name { font-weight: 700; font-size: 13px; letter-spacing: 4px; color: #fff; margin-left: 5px; } :root[data-theme="dark"] .osh-brand-name { color: var(--osh-ink); } /* Uppercase sidebar nav item labels (mockup style). */ html[data-osh-theme] .rz-sidebar .rz-navigation-item-text { text-transform: uppercase; letter-spacing: 0.8px; font-size: 0.72rem; font-weight: 600; } /* Active nav item: a small gold dot before the label (mockup active marker). */ html[data-osh-theme] .rz-sidebar .rz-navigation-item-link.rz-navigation-item-link-active .rz-navigation-item-text::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--osh-gold); margin-right: 8px; vertical-align: middle; } /* ======================= detail-page polish (Phase 3) ======================= */ /* Card / panel SECTION HEADERS. Every detail card (Directory, File, Document) heads its sections with a RadzenText H6; the mockup renders these as an uppercase gold label with a hairline underline (not the navy serif the global heading rule gives). H6 is only ever a section header in this app, so target it directly. */ html[data-osh-theme] .rz-card .rz-text-h6, html[data-osh-theme] .rz-panel .rz-text-h6, html[data-osh-theme] .rz-card h6, html[data-osh-theme] .rz-panel h6 { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-transform: uppercase; letter-spacing: 2.2px; font-size: 0.72rem; font-weight: 700; color: var(--osh-gold-deep); } /* The section-header rule belongs on the .rz-card h6 (cards have no titlebar). Panel h6 must NOT get it — the panel puts the rule on its full-width titlebar (see .rz-panel-titlebar above); adding it here too draws a second line. */ html[data-osh-theme] .rz-card .rz-text-h6, html[data-osh-theme] .rz-card h6 { margin: 0 0 14px; padding-bottom: 9px; border-bottom: 1px solid var(--osh-rule); } /* Field labels (Subtitle2) already uppercase-gold from the base rule; give the values a touch more presence and keep field rows breathing. */ html[data-osh-theme] .rz-card .rz-row { margin-bottom: 4px; } /* Confidence meter — bar + value, thresholds 90 green / 70 amber / <70 red (ConfidenceBadge.razor). Replaces the old plain-percent text; shows in every grid Confidence column and every extracted-field row. */ html[data-osh-theme] .osh-conf { display: inline-flex; align-items: center; gap: 7px; min-width: 88px; width: 100%; max-width: 150px; } html[data-osh-theme] .osh-conf-bar { flex: 1; height: 5px; min-width: 28px; border-radius: 3px; background: var(--osh-rule); overflow: hidden; } html[data-osh-theme] .osh-conf-bar i { display: block; height: 100%; border-radius: 3px; } html[data-osh-theme] .osh-conf-v { font-weight: 700; font-size: 0.75rem; font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; } html[data-osh-theme] .osh-conf .osh-good { color: var(--osh-good); } html[data-osh-theme] .osh-conf .osh-warn { color: var(--osh-gold-deep); } html[data-osh-theme] .osh-conf .osh-bad { color: var(--osh-bad); } html[data-osh-theme] .osh-conf .osh-none { color: var(--osh-ink-3); } html[data-osh-theme] .osh-conf-bar i.osh-good { background: var(--osh-good); } html[data-osh-theme] .osh-conf-bar i.osh-warn { background: var(--osh-gold); } html[data-osh-theme] .osh-conf-bar i.osh-bad { background: var(--osh-bad); } html[data-osh-theme] .osh-conf-bar i.osh-none { background: transparent; } /* Tabs: uppercase labels, a gold underline on the active tab, hairline strip (mockup). Covers the directory/file section tabs + comparables tabs. */ html[data-osh-theme] .rz-tabview-nav { border-bottom: 1px solid var(--osh-rule); gap: 2px; } html[data-osh-theme] .rz-tabview-nav .rz-tabview-title, html[data-osh-theme] .rz-tabview-nav li .rz-tabview-title { text-transform: uppercase; letter-spacing: 1.4px; font-size: 0.72rem; font-weight: 600; } html[data-osh-theme] .rz-tabview-nav li { background: transparent !important; border: none !important; border-bottom: 2px solid transparent !important; color: var(--osh-ink-3); } html[data-osh-theme] .rz-tabview-nav li.rz-tabview-selected, html[data-osh-theme] .rz-tabview-nav li.rz-state-active { border-bottom-color: var(--osh-gold) !important; color: var(--osh-navy); } html[data-osh-theme] .rz-tabview-nav li.rz-tabview-selected .rz-tabview-title { color: var(--osh-navy); } /* Form inputs sit on a white card surface with a firm border so they don't blend into the cream ground (mock). Covers dropdowns, text boxes, numerics, datepickers. */ html[data-osh-theme] .rz-dropdown, html[data-osh-theme] .rz-textbox, html[data-osh-theme] .rz-textarea, html[data-osh-theme] .rz-lookup, html[data-osh-theme] .rz-datepicker, html[data-osh-theme] .rz-numeric, html[data-osh-theme] .rz-inputtext { background-color: var(--osh-card) !important; border: 1px solid var(--osh-rule-strong); border-radius: 8px; } /* A RadzenDropDown's inner label span also carries .rz-inputtext, so the rule above draws a second rounded border nested inside the dropdown's own border. The dropdown box owns the border — strip it from the inner label. */ html[data-osh-theme] .rz-dropdown .rz-dropdown-label.rz-inputtext { background-color: transparent !important; border: none; border-radius: 0; } /* OCR cost estimate — a quiet, collapsible line folded into the Basic Information card (OcrCostLine.razor). Default = total only; expands to the 3 stage columns. Kept low-key so it never competes with the diligence workflow. */ html[data-osh-theme] .osh-costline { margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px solid var(--osh-rule); } html[data-osh-theme] .osh-cost-toggle { font: inherit; font-size: 0.85rem; border: 0; background: transparent; color: var(--osh-ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.1rem 0; } html[data-osh-theme] .osh-cost-car { color: var(--osh-ink-3); font-size: 0.7rem; } html[data-osh-theme] .osh-cost-lab { color: var(--osh-ink-3); } html[data-osh-theme] .osh-cost-amt { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--osh-ink); } html[data-osh-theme] .osh-cost-hint { color: var(--osh-ink-3); font-size: 0.73rem; } html[data-osh-theme] .osh-cost-toggle:hover .osh-cost-amt { color: var(--osh-gold-deep); } html[data-osh-theme] .osh-cost-toggle:focus-visible { outline: 2px solid var(--osh-gold); outline-offset: 3px; border-radius: 3px; } html[data-osh-theme] .osh-cost-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem 2rem; margin-top: 1rem; } html[data-osh-theme] .osh-cchip { border-top: 2px solid var(--osh-rule); padding-top: 0.55rem; } html[data-osh-theme] .osh-cchip.c { border-top-color: var(--osh-info); } html[data-osh-theme] .osh-cchip.s { border-top-color: var(--osh-gold); } html[data-osh-theme] .osh-cchip.e { border-top-color: var(--osh-navy); } html[data-osh-theme] .osh-cchip-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; } html[data-osh-theme] .osh-cchip-nm { font-size: 0.8rem; color: var(--osh-ink-2); } html[data-osh-theme] .osh-cchip-amt { font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums; } html[data-osh-theme] .osh-cchip-mult { font-size: 0.73rem; color: var(--osh-ink-3); margin-top: 0.2rem; font-variant-numeric: tabular-nums; } html[data-osh-theme] .osh-cchip.muted .osh-cchip-nm, html[data-osh-theme] .osh-cchip.muted .osh-cchip-amt { color: var(--osh-ink-3); }