/* Audotoria Cuentas — global styles. Kept intentionally small: component-specific styles ship with their own tasks. The palette is the Óptima Auto brand, mirroring Theme/AppTheme.cs: the gold #F2B735 is the accent, #222222 the readable ink, and the chrome is black in both modes. ⚠ Read AppTheme's remarks before using the gold as a TEXT colour — it measures 1.81:1 on white. */ html, body { margin: 0; padding: 0; font-family: Inter, Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---- Startup splash (shown until Blazor boots, then replaced) ---- */ .app-loading { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; /* --optima-black, flat: OptimaAuto's own shell has no gradient, and this splash is the first frame of the application. */ background: #1A1A1A; color: #FFFFFF; font-family: Inter, Roboto, "Helvetica Neue", Arial, sans-serif; } .app-loading__mark { width: 3.5rem; height: 3.5rem; margin-bottom: 0.75rem; border-radius: 999px; background: #F2B735; animation: app-loading-pulse 1.2s ease-in-out infinite; } .app-loading__title { font-size: 1.6rem; font-weight: 600; letter-spacing: 0.02em; } .app-loading__subtitle { font-size: 0.95rem; font-weight: 400; opacity: 0.85; } .app-loading__hint { margin-top: 0.5rem; font-size: 0.8rem; opacity: 0.7; } @keyframes app-loading-pulse { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.15); opacity: 0.5; } } @media (prefers-reduced-motion: reduce) { .app-loading__mark { animation: none; } } /* ---- Accessibility: visible keyboard focus using the brand gold ---- ⚠ A focus RING, not text: WCAG 1.4.11 asks 3:1 against what it sits on, and the gold clears that against every surface in this app except plain white cards, where the ring's 2px width and offset keep it visible. Kept gold in both modes deliberately — a focus indicator that changes colour with the theme is one more thing to get wrong. */ :focus-visible { outline: 2px solid #F2B735; outline-offset: 2px; } /* ---- Scrollbar styling ---- */ * { scrollbar-width: thin; scrollbar-color: #B7C2CC transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: #B7C2CC; border-radius: 6px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: #8A97A3; background-clip: content-box; } /* ---- Blazor unhandled-error banner ---- */ #blazor-error-ui { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } .blazor-error-boundary { background: #b32121; padding: 1rem; color: white; } .blazor-error-boundary::after { content: "Ha ocurrido un error."; } /* ============================================================================ Shared component styles (Task 4). These live in the GLOBAL sheet — not in scoped .razor.css — because they are applied to markup rendered outside the component (MudDataGrid row classes, StatusBadge pills reused across pages). Dark-mode variants hang off `.app-dark` on , toggled by ThemeService via appSetDarkClass (app.js) — MudBlazor 8.x never adds a `.mud-theme-dark` ancestor class; dark mode only swaps :root CSS variables. ============================================================================ */ /* Tabular figures for money / KPI hero numbers. */ .tabular-nums { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* ---- Status pill badge (StatusBadge.razor). Colours ported from statusBadge() sb-* classes in ProspectsRegistryV2.aspx. ---- */ .status-badge { display: inline-block; padding: 3px 12px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; line-height: 1.5; } .status-badge.sb-green { background: #D1FAE5; color: #065F46; } .status-badge.sb-red { background: #FEE2E2; color: #991B1B; } .status-badge.sb-yellow { background: #FEF3C7; color: #92400E; } .status-badge.sb-gray { background: #F3F4F6; color: #374151; } .app-dark .status-badge.sb-green { background: rgba(16,185,129,.20); color: #A7F3D0; } .app-dark .status-badge.sb-red { background: rgba(220,38,38,.22); color: #FCA5A5; } .app-dark .status-badge.sb-yellow { background: rgba(245,158,11,.22); color: #FCD34D; } .app-dark .status-badge.sb-gray { background: rgba(148,163,184,.20); color: #CBD5E1; } /* ---- Due-date row tints (AppDataGrid RowClassFunc; ported from renderRow()). due-soon = within 3 days (red); due-today = 0/1 day out (amber). ---- */ .due-soon td { background: #FF8585 !important; } .due-today td { background: #FFD887 !important; } .app-dark .due-soon td { background: rgba(220,38,38,.18) !important; } .app-dark .due-today td { background: rgba(245,158,11,.20) !important; } /* ---- Disabled prospect row (RegistryPage RowClassFunc). Only ever seen under the "Registros: Deshabilitados / Todos" filter — the default view returns no such rows. Muted rather than tinted: this is the ABSENCE of urgency, the opposite of what the due-date tints above communicate, so it reads as greyed-out and set aside. The RowClassFunc gives it precedence over those tints (a disabled line's due date no longer means anything). Text stays legible — reviewing what was switched off is exactly why the filter exists. ---- */ .reg-row-disabled td { background: rgba(148,163,184,.14) !important; color: var(--mud-palette-text-secondary); } /* The prospect name keeps its bold weight from .reg-name; drop the emphasis so a disabled row cannot out-shout the active ones around it in the "Todos" view. */ .reg-row-disabled td .reg-name { font-weight: 400; } .app-dark .reg-row-disabled td { background: rgba(148,163,184,.10) !important; } /* Neutral outline on the chip itself so it reads as a state marker, not an action. */ .op-disabled-chip { opacity: .85; } /* Phone-tier equivalent of .reg-row-disabled (RegistryCardList). Same intent: muted, set aside, still readable. Kept as opacity on the whole card rather than per-element colours — a card is one object, and its border stripe should fade with it. */ .reg-card-disabled { opacity: .62; } .reg-card-disabled .op-board__name { font-weight: 500; } /* ---- Deshabilitado banner (ProspectFormPage). Plain flow, NOT a flex row, and no button: the Rehabilitar action sits beside "Datos Generales" instead. That is deliberate and worth keeping. MudAlert renders ChildContent inside a .mud-alert-message div that does not stretch its child, so any attempt to right-pin a control in here shrink-wraps the row and paints the control ON TOP of the message. Block-level text simply cannot do that. If this banner ever needs an action again, put it in the card header. ---- */ .op-disabled-banner__text { min-width: 0; } .op-disabled-banner__meta { margin-top: 4px; font-size: .85em; opacity: .9; } /* Consequence list in DisableProspectDialog. The app's CSS reset strips list markers, and this is the one place where the bullets carry meaning — each line is a separate thing that stops happening. */ .op-disable-list { margin: 0 0 12px 0; padding-left: 20px; list-style: disc outside; font-size: .875rem; line-height: 1.6; color: var(--mud-palette-text-secondary); } .op-disable-list li { margin-bottom: 2px; } /* ---- LOB icon (LobIcon.razor) ---- */ .lob-icon { line-height: 1; display: inline-flex; align-items: center; } /* ---- Registry: sticky right "Acciones" column (RegistryPage grid). Global (not scoped) because it attaches to MudDataGrid cells via CellClass/HeaderClass. Single-class specificity so the .due-soon/.due-today row tints (which carry !important) still win on the sticky cell — matching the legacy edit-cell. Uses MudBlazor palette vars so the opaque background is correct in light + dark. ---- */ /* Positioning is MudBlazor's job now — the column sets StickyRight="true", which stamps `sticky-right` on BOTH the header and body cells. (The old hand-rolled `position: sticky` here lost to MudBlazor's 3-class `.mud-data-grid .mud-table-cell.sticky-right` rule on the header, which is why only the icons stayed put.) What's left here is cosmetics. */ .reg-actions { text-align: center; border-left: 1px solid var(--mud-palette-lines-default); } /* Match MudBlazor's own specificity (0,3,0) so the sticky cell keeps the surface colour instead of its default `background-gray`. app.css loads after MudBlazor.min.css, so an equal-specificity rule wins. Deliberately NOT !important: the .due-soon/.due-today row tints carry !important and must still paint the sticky cell like the rest of the row. */ .mud-data-grid .mud-table-cell.reg-actions { background-color: var(--mud-palette-surface); } /* Header must sit above the body's sticky cells so rows scroll cleanly underneath it. */ .mud-data-grid .mud-table-head .mud-table-cell.reg-actions { z-index: 4; } /* ---- Mirrored horizontal scrollbar above a wide grid (see appSyncTopScroll in app.js). The element is created by JS and holds a single spacer div sized to the table's scrollWidth; only the scrollbar itself is ever visible. `overflow-x: scroll` (not auto) plus an explicit height keeps it present rather than an overlay that fades out, which would defeat the point of putting it at the top. ---- */ .top-scrollbar { overflow-x: scroll; overflow-y: hidden; height: 12px; margin-bottom: 2px; } .top-scrollbar > div { height: 1px; } .top-scrollbar::-webkit-scrollbar { height: 10px; } .top-scrollbar::-webkit-scrollbar-thumb { background-color: var(--mud-palette-lines-default); border-radius: 5px; } .top-scrollbar::-webkit-scrollbar-thumb:hover { background-color: var(--mud-palette-action-disabled); } .top-scrollbar::-webkit-scrollbar-track { background: transparent; } /* ---- Registry cell text colours (RegistryPage grid). GLOBAL (not scoped) because these attach to MudDataGrid cells rendered outside the component's scoped-style boundary — same reason as .reg-actions. Each carries an `.app-dark` variant so the text stays readable in dark mode (the raw #990906 / #1F1F1F are near-invisible on the dark surface). ---- */ .reg-due { font-weight: bold; color: #990906; } .app-dark .reg-due { color: #FCA5A5; } .reg-view { color: #1F1F1F; font-size: 16px; } .app-dark .reg-view { color: #CBD5E1; } /* ---- Registry: width compaction (RegistryPage grid). Global for the same reason as the .reg-* rules above — these attach to MudDataGrid cells rendered outside the component's scoped-style boundary. ---- */ /* Free-text cells (Prospecto, Productor, Compañía, Agencia, Sucursal, Asignado) truncate instead of stretching their column to the longest value on the page, which is what pushed the grid past the viewport. The max-width is set PER COLUMN inline at each column definition and must live on this span, not on the cell: an auto-layout table ignores max-width on a . Each span also carries a native `title`, so the full value is one hover away. */ .reg-trunc { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Tighter horizontal padding, this grid only (the wrapper div carries .reg-grid). Specificity is load-bearing: MudBlazor 8.15's dense rule is `.mud-table-dense * .mud-table-row .mud-table-cell` (0,3,0) and it sets the LOGICAL longhands (padding-inline-start/end), so the 2-class physical-only rule that used to live here never applied — cells were really 16px/24px, and the 92px date-column widths were below min-content and silently ignored. Matching (0,3,0) plus app.css's later load order wins without !important, which matters: !important would outrank the .reg-actions background (0,3,0) and collide with the .due-soon/.due-today row tints. Both the physical and logical longhands are set so neither of MudBlazor's two declarations survives. Still padding-only, on purpose. NOT overridden: MudBlazor's `….mud-table-cell:last-child { padding-right: 16px }` (0,4,0). The last cell is the sticky Acciones column and 16px is the right outer-edge gap. */ .reg-grid .mud-table-row .mud-table-cell { padding-left: 8px; padding-right: 8px; padding-inline-start: 8px; padding-inline-end: 8px; } /* Date columns (Recibido / Entrado / Efectividad / Entregable) share ONE width so their identical MM/dd/yyyy values line up. Measured against this app's own Inter 500 @ 14px (--mud-typography-default-size is .875rem and AppTheme only overrides the family): date value 81.1px (Entregable is bold -> 84.1px) body floor 97.1 / 100.1px labels Recibido 58.2 Entrado 52.1 Efectividad 75.2 Entregable 72.3 Every label is NARROWER than the date under it, so labels alone would not matter. What made the columns diverge is the header chrome MudBlazor always reserves: a sort MudIconButton plus (ShowColumnOptions, default true) a MoreVert menu button, each ~28px, both opacity:0 until hover. label + ~58px of invisible chrome + 16px padding is why they rendered ~127/125/144/151 -- each column sized to its own label -- and why the old width:92px was never reachable (the digits alone need 97px). The menu is off per-column in RegistryPage.razor; this rule strips the sort button's padding so its footprint is exactly 18px + its 4px margin. Worst floor is then Efectividad 75.2 + 22 + 16 = 113.2px, so the declared 116px wins on all four -- and holds in every sort state, since the gutter is reserved whether the arrow shows or not. Keep the 116px in RegistryPage.razor in sync with the 113.2px arithmetic above. */ .reg-grid th.reg-date .sort-direction-icon { padding: 0; min-width: 18px; width: 18px; height: 18px; } /* ---- Utility: opt out of MudButton's default uppercasing (MainLayout account button). ---- */ .text-transform-none { text-transform: none; } /* ---- Reportes: shared card + matrix-table language (Pages/Reports/Sections/*). ---- GLOBAL rather than an isolated .razor.css per section: every report section renders the same heading / parameter / result-table structure, and CSS isolation scopes rules per COMPONENT, so an isolated copy would have to be duplicated into each new report. Global also drops the ::deep that .mtx-export-btn needed to reach the class MudButton renders. */ .mtx-heading { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--mud-palette-text-primary); } .mtx-heading i { color: var(--mud-palette-primary); } .mtx-field-label { font-size: 0.8rem; font-weight: 700; color: var(--mud-palette-text-secondary); margin-bottom: 6px; } .mtx-export-btn { text-transform: none; color: var(--op-green-600, #0A8E6E); font-weight: 600; } .mtx-loading { display: flex; align-items: center; color: var(--mud-palette-text-secondary); font-size: 0.9rem; } /* Embudo de entrada (Reportes → Tiempo entre estatus). A milestone is a COUNT of lines at a point in the flow; a span is the DURATION between two milestones. Keeping them visually distinct is the point of the panel — the counts shrink left-to-right while the durations sit between them. */ .mtx-mile { border: 1px dashed var(--mud-palette-lines-default); border-radius: 9px; background: var(--mud-palette-background-grey); padding: 8px 14px; min-width: 96px; text-align: center; } .mtx-mile-t { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mud-palette-text-secondary); font-weight: 600; } .mtx-mile-v { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.25; } .mtx-span { flex: 1 1 130px; min-width: 130px; text-align: center; padding: 0 8px; } .mtx-span-l { font-size: .72rem; font-weight: 600; color: var(--mud-palette-primary); } .mtx-span-v { font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; border-top: 2px solid var(--mud-palette-primary); margin-top: 4px; padding-top: 4px; } .mtx-span-s { font-size: .68rem; color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums; } .mtx-empty { color: var(--mud-palette-text-secondary); padding: 12px 4px; } .mtx-wrap { overflow-x: auto; border: 1px solid var(--mud-palette-lines-default); border-radius: var(--op-r-sm, 10px); } .mtx-table thead th { background: var(--op-surface-2, #F7F9FB); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mud-palette-text-secondary); } .mtx-table th.mtx-num, .mtx-table td.mtx-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } /* Username under the display name (Fuera de oficina summary). */ .mtx-sub { font-size: 0.72rem; color: var(--mud-palette-text-secondary); line-height: 1.2; } .mtx-table tfoot th { border-top: 2px solid var(--mud-palette-lines-default); font-weight: 800; background: var(--op-surface-2, #F7F9FB); } /* ============================================================================ Óptima Seguros — redesign layer. APPEND this to wwwroot/css/app.css (after the existing content). Dark mode keys off `.app-dark` on (set by ThemeService/appSetDarkClass), exactly like the existing status-badge / due-row rules. ============================================================================ */ :root { /* ── Óptima Auto brand, adopted from OptimaAuto's optima-theme.css :root ── ⚠ --op-gold IS A DARK-SURFACE COLOUR. Measured 2026-09-03: #F2B735 as text reads 1.81:1 on white (WCAG AA needs 4.50) and 9.61:1 on --op-sidebar-bg. So it is used for text ONLY on the black chrome and in dark mode, and as a FILL — with dark text on it — everywhere else. Never set it as a text colour on a white card. */ --op-navy: #1A1A1A; /* was a navy gradient; now --optima-black */ --op-brand: #222222; /* --optima-dark: the readable brand ink */ --op-brand-050: #F0F0F0; /* --optima-light-gray */ --op-gold: #F2B735; /* --optima-primary */ --op-gold-600: #D9A02E; /* --optima-primary-hover */ --op-gold-050: #FDF4E0; --op-green: #4CAF50; /* --optima-status-active */ --op-green-600: #3D9140; --op-green-050: #EDF7EE; --op-info: #2196F3; /* --optima-status-quote */ --op-info-050: #E9F4FE; --op-red: #F44336; /* --optima-status-cancelled */ --op-red-050: #FEECEA; --op-amber: #FF9800; /* --optima-status-pending */ --op-bg: #F0F0F0; --op-surface: #FFFFFF; --op-surface-2: #F7F7F7; --op-line: #DDDDDD; --op-line-2: #E8E8E8; --op-text: #333333; /* --optima-text */ --op-muted: #6B6B6B; --op-muted-2: #888888; /* --optima-medium-gray */ /* The chrome is black-and-gold in BOTH modes — it is the most recognizable half of the OptimaAuto look, and it is the one surface the gold is legible on. */ --op-sidebar-bg: #1A1A1A; --op-sidebar-line: #2A2A2A; --op-shadow-sm: 0 1px 2px rgba(16,32,48,.05); --op-shadow: 0 2px 4px rgba(16,32,48,.05), 0 8px 20px rgba(16,32,48,.06); --op-shadow-lg: 0 12px 40px rgba(16,32,48,.14); --op-r: 14px; --op-r-sm: 10px; } .app-dark { /* Dark mode IS OptimaAuto: --optima-black body, --optima-dark surfaces, gold primary. This is the mode the app opens in. */ --op-navy: #1A1A1A; --op-brand: #F2B735; /* the gold works as text here: 9.61:1 */ --op-brand-050: #2A2415; --op-gold-600: #F5C85C; /* --optima-primary-light */ --op-gold-050: #2A2415; --op-green: #4CAF50; --op-green-600: #66BB6A; --op-green-050: #16241A; --op-info: #2196F3; --op-info-050: #13212C; --op-red: #F44336; --op-red-050: #2A1613; --op-amber: #FF9800; --op-bg: #1A1A1A; /* --rz-body-background-color */ --op-surface: #222222; /* --rz-base-background-color */ --op-surface-2: #2A2A2A; /* --rz-input-background-color */ --op-line: #444444; --op-line-2: #333333; --op-text: #FFFFFF; --op-muted: #CCCCCC; /* --optima-text-light */ --op-muted-2: #888888; --op-shadow-sm: 0 1px 2px rgba(0,0,0,.4); --op-shadow: 0 2px 8px rgba(0,0,0,.4); --op-shadow-lg: 0 16px 50px rgba(0,0,0,.6); } /* ---- App shell (MainLayout) ---- The sidebar width is a custom property so the collapsed rail is a single override below (and a future full-hide state would just be another value). --op-topbar-h is the height of the sticky top bar, published as a custom property because anything else that pins itself inside the page has to offset by exactly this much (the prospect form's tab strip, the docked reference pane). Custom properties inherit through the DOM regardless of which stylesheet declared them, so scoped .razor.css files can read it too. MudBlazor's global `* { box-sizing: border-box }` means this value already includes the bar's 1px border-bottom — the offset is 66px, not 67. */ .op-shell { --op-sidebar-w: 260px; --op-topbar-h: 66px; display: grid; grid-template-columns: var(--op-sidebar-w) 1fr; min-height: 100vh; background: var(--op-bg); color: var(--op-text); transition: grid-template-columns .18s ease; } .op-sidebar { background: var(--op-sidebar-bg); color: #fff; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--op-sidebar-line); } .op-sidebar__brand { padding: 22px 22px 18px; display: flex; align-items: center; border-bottom: 1px solid var(--op-sidebar-line); } .op-sidebar__logo { height: 30px; width: auto; object-fit: contain; } .op-sidebar__nav { padding: 16px 14px; flex: 1; overflow-y: auto; } .op-sidebar__section { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.42); padding: 10px 12px 6px; } /* Drawer footer — the identity + theme + logout controls that the top bar sheds in the phone tier. `display: none` here and flipped to flex only in that tier, so it never exists on a desktop sidebar (where the top bar still owns those controls). Its buttons are .op-drawerbtn rather than .op-iconbtn: this panel is navy, and .op-iconbtn paints a light surface. */ .op-sidebar__foot { display: none; flex-direction: column; gap: 10px; padding: 14px; border-top: 1px solid rgba(255,255,255,.1); } .op-sidebar__footuser { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .op-sidebar__footname { font-size: 13.5px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .op-sidebar__footrole { font-size: 11.5px; font-weight: 600; color: var(--op-gold); } .op-sidebar__footactions { display: flex; align-items: center; gap: 8px; } .op-drawerbtn { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid rgba(255,255,255,.22); border-radius: 10px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.9); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s; } .op-drawerbtn:hover { background: rgba(255,255,255,.14); color: #fff; } /* images/optima-logo.png is the COLOUR wordmark (black type, gold mark) — the only brand art in the repo. Both places it appears are navy, so it is flattened to white here rather than shipping a second asset. brightness(0) first: plain invert() would turn the gold mark blue. */ .op-sidebar__logo { filter: brightness(0) invert(1); } /* ---- Nav links (NavMenu) ---- */ .op-nav { display: flex; flex-direction: column; gap: 3px; } .op-nav__link { display: flex; align-items: center; gap: 13px; padding: 11px 13px; border-radius: 10px; cursor: pointer; color: rgba(255,255,255,.85); font-size: 14.5px; font-weight: 500; position: relative; text-decoration: none; transition: background .15s; } /* The gold tints are OptimaAuto's own: .08 on hover, .12 on the active item. */ .op-nav__link:hover { background: rgba(242,183,53,.08); color: #fff; } .op-nav__icon { width: 20px; text-align: center; font-size: 16px; color: rgba(255,255,255,.7); } .op-nav__link.active { background: rgba(242,183,53,.12); color: var(--op-gold); } .op-nav__link.active::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--op-gold); } .op-nav__link.active .op-nav__icon { color: var(--op-gold); } /* ---- Collapsed sidebar: icon-only rail (SidebarService / the top-bar toggle + Ctrl+B) ---- Everything is driven off the one class on .op-shell, so nothing but the width and the label visibility changes — the gold active bar, hover states and dark mode all carry over as is. GATED TO >=960px on purpose. Below that the sidebar is an off-canvas drawer (see the drawer tier further down), and the drawer is always the full-width, labelled panel. Without this gate a user whose wfp.sidebarCollapsed is persisted `true` would slide out a 72px label-less sliver on their phone. Gating the whole block is far less code than overriding each rule back, and it states the intent: the rail is a desktop affordance. */ @media (min-width: 960px) { .op-shell--rail { --op-sidebar-w: 72px; } .op-shell--rail .op-nav__link { justify-content: center; gap: 0; padding: 11px 0; } /* :not(.op-nav__badge) is load-bearing — the unread count is a in here too, and a bare `span` selector would silently hide it instead of just the label. */ .op-shell--rail .op-nav__link > span:not(.op-nav__badge) { display: none; } /* With the label gone `margin-left: auto` (see .op-nav__badge below) has nothing to push against, so the count re-anchors as a corner dot — .op-nav__link is already relative. */ .op-shell--rail .op-nav__badge { position: absolute; top: 2px; right: 4px; margin-left: 0; min-width: 17px; padding: 0 4px; font-size: 9.5px; line-height: 17px; pointer-events: none; } /* "Flujo de trabajo" cannot wrap into 72px. */ .op-shell--rail .op-sidebar__section { display: none; } .op-shell--rail .op-sidebar__nav { padding: 16px 10px; } /* images/optima-logo.png is the wordmark — the repo has no square mark to swap in — so it just scales down. The row itself stays for its bottom border, which lines the sidebar's top block up with the 66px top bar. */ .op-shell--rail .op-sidebar__brand { padding: 22px 0 18px; justify-content: center; } .op-shell--rail .op-sidebar__logo { max-width: 46px; height: auto; } } /* ---- Main column + top bar ---- */ .op-main { display: flex; flex-direction: column; min-width: 0; } .op-topbar { position: sticky; top: 0; z-index: 20; background: var(--op-surface); border-bottom: 1px solid var(--op-line); padding: 0 28px; height: var(--op-topbar-h); display: flex; align-items: center; gap: 20px; } .op-topbar__title { display: flex; flex-direction: column; min-width: 0; } .op-topbar__crumb { font-size: 12px; color: var(--op-muted); font-weight: 600; } .op-topbar__page { font-size: 19px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; } .op-topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; } .op-iconbtn { width: 40px; height: 40px; border: 1.5px solid var(--op-line); border-radius: 11px; background: var(--op-surface); color: var(--op-text); cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; transition: .15s; } .op-iconbtn:hover { border-color: var(--op-brand); background: var(--op-surface-2); } /* Busy state for Shared/RefreshButton: spin the icon where it stands. Covers both icon shapes the app uses — MudBlazor's Icons.Material.* render as an inline . The needs inline-block or the transform is ignored (transforms don't apply to non-replaced inline elements), and transform-origin is set explicitly rather than trusted to default to the element's centre. */ @keyframes op-spin { to { transform: rotate(360deg); } } .op-spin .mud-icon-root, .op-spin i { display: inline-block; transform-origin: 50% 50%; animation: op-spin .9s linear infinite; } /* Sidebar toggle: first item in the row, so it pulls in against .op-topbar's 20px gap and never shrinks when the row gets tight. */ .op-topbar__toggle { flex-shrink: 0; margin-right: -6px; } /* Drawer toggle — the same slot, for the drawer tier only. Two buttons rather than one that changes meaning: see the note in the drawer tier below. */ .op-topbar__burger { display: none; flex-shrink: 0; margin-right: -6px; } /* DELIBERATELY NO `overflow` HERE — do not re-add it. This box has no height and no `flex: 1`, so it just grows with its content and never overflows; the DOCUMENT is what scrolls. But `overflow-y: auto` still makes an element a scroll container, and `position: sticky` resolves against its nearest scroll-container ancestor — so every sticky descendant was pinning itself to a scrollport that never moves, i.e. doing nothing at all. That silently broke the prospect form's tab strip and the docked reference pane (.dock). .op-topbar and .op-sidebar were never affected because they sit ABOVE this boundary, in .op-main/.op-shell. It also means this box used to contain horizontal overflow app-wide as a side effect (per spec `overflow-x: visible` + `overflow-y: auto` coerces the pair to `auto`). Wide content owns its own containment instead — .mud-table-container and .op-board both scroll themselves. If something ever does leak a page-level h-scrollbar, use `overflow-x: clip`: unlike `auto`, `clip` does not establish a scrollport, so it won't re-break sticky. */ .op-content { padding: 26px 28px 60px; } /* ---- Responsive shell: two tiers, on MudBlazor 8.15's own boundaries ------------------------- The boundaries are MudBlazor's md (960) and sm (600) so CSS media queries and C# `MudHidden` /`IBreakpointService` can never disagree about which layout is on screen — the registry swaps its grid for a card list at the same 600px this file uses for phone density. <= 959.98px "drawer tier" the sidebar leaves the grid and becomes an off-canvas drawer <= 599.98px "phone tier" density: padding, top-bar shedding, icon-only tab strip Everything at 960px and up is untouched by both blocks. Why the sidebar had no mobile story before: .op-shell is `grid-template-columns: var(--op-sidebar-w) 1fr` and .op-sidebar is `position: sticky` IN FLOW, so it always reserved its 260px track. At a 430px viewport that left ~104px after .op-content's padding, and ~40px after the tab panel's and the card's `pa-4` — which is why every field rendered as a ~34px box with a truncated label. The fields were never the problem: every MudItem in the prospect form already declares xs="12". They were starved. */ /* Backdrop behind the open drawer. A real