html.mud-dark {
background-color: #0d1117;
}
.formulize-logo-accent { fill: white; }
.formulize-logo-accent-themed { fill: #424242; }
html.mud-dark .formulize-logo-accent-themed { fill: white; }
.auth-brand-panel .formulize-logo-accent-themed { fill: white; }
html:not(.mud-dark) .formulize-footer .formulize-logo-accent-themed { fill: white; }
.mud-list-item-icon {
min-width: 32px;
}
.equation-svg {
font-size: 7em;
fill: red;
width: 100%;
}
.mud-table-header .mud-table-cell {
background-color: var(--mud-palette-secondary) !important;
color: var(--mud-palette-secondary-text) !important;
}
/* Disable hover effect for child rows */
.mud-table-row-child:hover {
background-color: transparent !important;
cursor: default !important;
}
.no-hover:hover {
background-color: unset !important;
cursor: default !important;
}
/* ── AppBar ────────────────────────────────────────────────── */
.mud-appbar {
border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}
.appbar-brand,
.appbar-brand:hover,
.appbar-brand:visited {
color: #ffffff !important;
text-decoration: none !important;
}
@media (max-width: 599px) {
.appbar-brand-text { font-size: 1.15rem !important; }
}
.appbar-search-wrap {
align-self: center;
width: 220px;
}
.appbar-search-wrap .mud-input.mud-input-outlined {
background-color: rgba(255,255,255,0.1);
border-radius: 4px;
min-height: unset !important;
height: 33px !important;
display: flex;
align-items: center;
}
input.appbar-search {
height: 40px !important;
color: rgba(255,255,255,0.9) !important;
-webkit-text-fill-color: rgba(255,255,255,0.9) !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-left: 10px !important;
padding-right: 4px !important;
}
input.appbar-search::placeholder {
color: rgba(255,255,255,0.5) !important;
-webkit-text-fill-color: rgba(255,255,255,0.5) !important;
opacity: 1 !important;
}
.appbar-search-wrap .mud-input-adornment {
color: rgba(255,255,255,0.6) !important;
}
/* ── Sidebar drawer ───────────────────────────────────────── */
.mud-drawer {
border-right: 1px solid var(--mud-palette-lines-default) !important;
box-shadow: none !important;
}
.mud-drawer.mud-drawer-persistent .mud-drawer-content {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
}
.mud-drawer-temporary {
overflow-y: hidden !important;
}
/* Mobile (temporary drawer, ≤959px): drawer content scrolls as one unit */
@media (max-width: 959px) {
.mud-drawer-temporary .mud-drawer-content {
overflow-y: auto;
overflow-x: hidden;
height: 100%;
}
}
/* ── Custom nav tree (.fnav) ─────────────────────────────── */
.fnav {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.fnav-top,
.fnav-bottom {
flex-shrink: 0;
padding: 6px 8px;
}
.fnav-tree {
flex: 1 1 0;
overflow-y: auto;
overflow-x: hidden;
min-height: 0;
}
.fnav-results {
padding: 4px 8px;
overflow-y: auto;
}
/* Mobile: single scroll surface — user section + pinned scroll away,
search bar sticks, tree flows naturally via parent scroll */
@media (max-width: 959px) {
.fnav {
height: auto;
min-height: 100%;
}
.fnav-tree,
.fnav-results {
flex: none;
overflow: visible;
min-height: 0;
}
.fnav-search-wrap {
position: sticky;
top: 0;
z-index: 5;
background: var(--mud-palette-surface);
border-bottom: 1px solid var(--mud-palette-lines-default);
}
}
.fnav-divider {
height: 1px;
background: var(--mud-palette-lines-default);
margin: 4px 0;
flex-shrink: 0;
}
/* Utility links (Home, My Projects …) */
.fnav-util-link {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 8px;
border-radius: 4px;
font-size: 0.8125rem;
color: var(--mud-palette-text-primary);
text-decoration: none;
transition: background 0.15s;
}
.fnav-util-link:hover {
background-color: var(--mud-palette-action-default-hover);
color: var(--mud-palette-text-primary);
text-decoration: none;
}
.fnav-util-link--active {
color: var(--mud-palette-secondary) !important;
font-weight: 600;
}
.nav-badge {
margin-left: auto;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
background-color: #616161;
color: #fff;
font-size: 0.6875rem;
font-weight: 600;
line-height: 18px;
text-align: center;
flex-shrink: 0;
}
html.mud-dark .nav-badge {
background-color: #9e9e9e;
color: #121212;
}
.nav-badge-error { background-color: #c62828; color: #ffffff; }
.nav-badge-warning { background-color: #e65100; color: #ffffff; }
html.mud-dark .nav-badge-error { background-color: #ef5350; color: #ffffff; }
html.mud-dark .nav-badge-warning { background-color: #ff6d00; color: #ffffff; }
/* Allow inline badges to sit flush-right inside MudNavLink */
.mud-drawer .mud-nav-link-text {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
}
/* Gray chip — status badges in Messages / Tickets tables */
.gray-chip.mud-chip {
background-color: #616161 !important;
color: #fff !important;
}
html.mud-dark .gray-chip.mud-chip {
background-color: #757575 !important;
color: #fff !important;
}
/* Add buttons (Color.Primary) in dark mode: swap light-gray/dark-text → medium-gray/white */
html.mud-dark .mud-button-filled.mud-button-filled-primary {
background-color: #757575 !important;
color: #fff !important;
}
/* Info filled chips: white bg in light mode (invisible) → give a visible gray; light-gray bg in dark mode → dark text */
html:not(.mud-dark) .mud-chip-filled.mud-chip-color-info {
background-color: #e0e0e0 !important;
color: rgba(0, 0, 0, 0.87) !important;
}
html:not(.mud-dark) .mud-chip-filled.mud-chip-color-info .mud-icon-root {
color: rgba(0, 0, 0, 0.87) !important;
}
html.mud-dark .mud-chip-filled.mud-chip-color-info,
html.mud-dark .mud-chip-filled.mud-chip-color-primary {
color: rgba(0, 0, 0, 0.87) !important;
}
html.mud-dark .mud-chip-filled.mud-chip-color-info .mud-icon-root,
html.mud-dark .mud-chip-filled.mud-chip-color-primary .mud-icon-root {
color: rgba(0, 0, 0, 0.87) !important;
}
.fnav-util-icon {
flex-shrink: 0;
opacity: 0.7;
font-size: 1rem !important;
width: 18px !important;
height: 18px !important;
}
/* Search */
.fnav-search-wrap {
padding: 6px 10px;
flex-shrink: 0;
}
.fnav-search-input {
width: 100%;
padding: 5px 10px;
border: 1px solid var(--mud-palette-lines-default);
border-radius: 4px;
font-size: 0.8rem;
background: var(--mud-palette-surface);
color: var(--mud-palette-text-primary);
outline: none;
transition: border-color 0.2s;
box-sizing: border-box;
}
.fnav-search-input:focus {
border-color: var(--mud-palette-secondary);
}
/* Search results */
.fnav-result {
display: block;
padding: 6px 8px;
border-radius: 4px;
text-decoration: none;
margin-bottom: 2px;
transition: background 0.15s;
}
.fnav-result:hover {
background-color: var(--mud-palette-action-default-hover);
text-decoration: none;
}
.fnav-result--active .fnav-result-title {
color: var(--mud-palette-secondary);
}
.fnav-result-title {
display: block;
font-size: 0.8rem;
font-weight: 500;
color: var(--mud-palette-text-primary);
}
.fnav-result-path {
display: block;
font-size: 0.7rem;
color: var(--mud-palette-text-secondary);
margin-top: 1px;
}
.fnav-no-results {
text-align: center;
color: var(--mud-palette-text-secondary);
font-size: 0.8rem;
padding: 16px 8px;
margin: 0;
}
/* Group / section */
.fnav-group-hd {
display: flex;
align-items: center;
padding: 5px 8px 5px 12px;
cursor: pointer;
}
.fnav-group-hd--sub {
padding-left: 20px;
}
/* ── Calculation tree lines ─────────────────────────────── */
:root { --fnav-tree-line: rgba(0, 0, 0, 0.14); }
html.mud-dark { --fnav-tree-line: rgba(255, 255, 255, 0.13); }
.fnav-tree .fnav-group-body {
margin-left: 8px;
padding-left: 10px;
/* No border-left — vertical lines are drawn per-item so they never overflow */
}
/* Sub-group: vertical line spans the full height of the group item */
.fnav-tree .fnav-group-body > .fnav-group {
position: relative;
}
.fnav-tree .fnav-group-body > .fnav-group::before {
content: "";
position: absolute;
left: -10px;
top: 0;
bottom: 0;
width: 1px;
background: var(--fnav-tree-line);
pointer-events: none;
}
/* Last group: stop at header midpoint (~14px) → └ shape */
.fnav-tree .fnav-group-body > .fnav-group:last-child::before {
height: 14px;
bottom: auto;
}
/* Sub-group header horizontal connector */
.fnav-tree .fnav-group-body > .fnav-group > .fnav-group-hd {
position: relative;
padding-left: 4px;
}
.fnav-tree .fnav-group-body > .fnav-group > .fnav-group-hd::before {
content: "";
position: absolute;
left: -10px;
top: 50%;
transform: translateY(-50%);
width: 9px;
height: 1px;
background: var(--fnav-tree-line);
pointer-events: none;
}
/* Calc-row: ::before = vertical line, ::after = horizontal connector */
.fnav-tree .fnav-group-body > .fnav-calc-row {
position: relative;
padding-left: 4px;
}
.fnav-tree .fnav-group-body > .fnav-calc-row::before {
content: "";
position: absolute;
left: -10px;
top: 0;
bottom: 0;
width: 1px;
background: var(--fnav-tree-line);
pointer-events: none;
}
/* Last calc-row: vertical only to midpoint → └ shape */
.fnav-tree .fnav-group-body > .fnav-calc-row:last-child::before {
bottom: 50%;
}
/* Horizontal connector */
.fnav-tree .fnav-group-body > .fnav-calc-row::after {
content: "";
position: absolute;
left: -10px;
top: 50%;
transform: translateY(-50%);
width: 9px;
height: 1px;
background: var(--fnav-tree-line);
pointer-events: none;
}
.fnav-group-link {
flex: 1;
min-width: 0;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--mud-palette-text-primary);
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.15s;
}
.fnav-group-hd--sub .fnav-group-link,
.fnav-group-label-sub {
font-weight: 500;
text-transform: none;
letter-spacing: 0;
font-size: 0.8125rem;
}
.fnav-group-link:hover {
color: var(--mud-palette-secondary);
text-decoration: none;
}
.fnav-group-label {
flex: 1;
min-width: 0;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--mud-palette-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fnav-group-hd--sub .fnav-group-label {
font-weight: 500;
text-transform: none;
letter-spacing: 0;
font-size: 0.8125rem;
}
.fnav-toggle-btn {
background: none;
border: none;
cursor: pointer;
padding: 0;
color: var(--mud-palette-text-secondary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 20px;
height: 20px;
}
.fnav-toggle-btn:hover {
color: var(--mud-palette-text-primary);
}
.fnav-chevron {
transition: transform 0.2s ease;
transform: rotate(-90deg);
display: block !important;
font-size: 1.1rem !important;
width: 18px !important;
height: 18px !important;
}
.fnav-chevron--open {
transform: rotate(0deg);
}
/* Calc leaf links */
.fnav-item {
display: block;
padding: 4px 10px 4px 28px;
font-size: 0.8rem;
color: var(--mud-palette-text-secondary);
text-decoration: none;
border-left: 2px solid transparent;
line-height: 1.45;
transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.fnav-item--d1 { padding-left: 24px; }
.fnav-item--d2 { padding-left: 32px; }
.fnav-item--d3 { padding-left: 40px; }
.fnav-item:hover {
color: var(--mud-palette-text-primary);
background-color: var(--mud-palette-action-default-hover);
text-decoration: none;
}
.fnav-item--active {
color: var(--mud-palette-secondary) !important;
border-left-color: var(--mud-palette-secondary) !important;
font-weight: 500;
background-color: var(--mud-palette-action-default-hover);
}
/* ── Calc row with pin icon ─────────────────────────────── */
.fnav-calc-row {
display: flex;
align-items: center;
border-left: 2px solid transparent;
transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.fnav-calc-row:hover {
background-color: var(--mud-palette-action-default-hover);
}
.fnav-calc-row--active {
border-left-color: var(--mud-palette-secondary);
background-color: var(--mud-palette-action-default-hover);
}
.fnav-calc-link {
flex: 1;
min-width: 0;
padding: 4px 4px 4px 0;
font-size: 0.8rem;
color: var(--mud-palette-text-secondary);
text-decoration: none;
line-height: 1.45;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: color 0.15s;
}
.fnav-calc-row:hover .fnav-calc-link,
.fnav-calc-row--active .fnav-calc-link {
color: var(--mud-palette-text-primary);
text-decoration: none;
}
.fnav-calc-row--active .fnav-calc-link {
color: var(--mud-palette-secondary) !important;
font-weight: 500;
}
.fnav-calc-link--inactive {
opacity: 0.5;
font-style: italic;
}
.fnav-inactive-tag {
flex-shrink: 0;
font-size: 0.6rem;
font-style: normal;
color: var(--mud-palette-warning-text);
background-color: var(--mud-palette-warning);
border-radius: 3px;
padding: 1px 4px;
margin-left: 4px;
opacity: 0.75;
line-height: 1.4;
white-space: nowrap;
}
.fnav-pin-btn {
flex-shrink: 0;
background: none;
border: none;
padding: 2px 6px 2px 2px;
cursor: pointer;
opacity: 0;
transition: opacity 0.15s, color 0.15s;
color: var(--mud-palette-text-disabled);
display: flex;
align-items: center;
line-height: 1;
}
.fnav-calc-row:hover .fnav-pin-btn,
.fnav-result-wrap:hover .fnav-pin-btn {
opacity: 1;
}
.fnav-pin-btn--pinned {
opacity: 1 !important;
color: var(--mud-palette-secondary);
}
.fnav-pin-btn:hover {
color: var(--mud-palette-text-primary);
}
/* ── Pinned section header ──────────────────────────────── */
.fnav-pinned-hd {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 8px 2px 12px;
font-size: 0.7rem;
font-weight: 600;
color: var(--mud-palette-text-disabled);
letter-spacing: 0.05em;
text-transform: uppercase;
cursor: pointer;
border-radius: 4px;
user-select: none;
}
.fnav-pinned-hd:hover {
background-color: var(--mud-palette-action-default-hover);
}
/* ── Search result row with pin ─────────────────────────── */
.fnav-result-wrap {
display: flex;
align-items: center;
border-radius: 4px;
margin-bottom: 2px;
transition: background 0.15s;
}
.fnav-result-wrap:hover {
background-color: var(--mud-palette-action-default-hover);
}
.fnav-result-wrap .fnav-result {
flex: 1;
min-width: 0;
margin-bottom: 0;
border-radius: 0;
}
.fnav-result-wrap--active .fnav-result-title {
color: var(--mud-palette-secondary);
}
/* ── Home page ────────────────────────────────────────────── */
/* Section separators — thin line between all sections */
.home-sections > section + section {
border-top: 1px solid var(--mud-palette-lines-default);
}
/* Footer: distinct from last section in both modes */
html:not(.mud-dark) .formulize-footer {
background-color: #424242 !important;
border-top-color: transparent !important;
}
/* Light mode footer: flip all text to white to suit dark background */
html:not(.mud-dark) .formulize-footer,
html:not(.mud-dark) .formulize-footer .mud-typography,
html:not(.mud-dark) .formulize-footer .mud-icon-root {
color: rgba(255,255,255,0.85) !important;
-webkit-text-fill-color: rgba(255,255,255,0.85) !important;
}
html:not(.mud-dark) .formulize-footer .footer-tagline,
html:not(.mud-dark) .formulize-footer .footer-meta {
color: rgba(255,255,255,0.6) !important;
-webkit-text-fill-color: rgba(255,255,255,0.6) !important;
opacity: 1;
}
html:not(.mud-dark) .formulize-footer .footer-section-title {
color: rgba(255,255,255,0.45) !important;
-webkit-text-fill-color: rgba(255,255,255,0.45) !important;
opacity: 1;
}
html:not(.mud-dark) .formulize-footer .footer-link {
color: rgba(255,255,255,0.7) !important;
opacity: 1;
}
html:not(.mud-dark) .formulize-footer .footer-link:hover {
color: #ff5722 !important;
}
html:not(.mud-dark) .formulize-footer .mud-divider {
border-color: rgba(255,255,255,0.12) !important;
}
html:not(.mud-dark) .formulize-footer .footer-copyright {
color: rgba(255,255,255,0.4) !important;
-webkit-text-fill-color: rgba(255,255,255,0.4) !important;
opacity: 1;
}
html:not(.mud-dark) .formulize-footer .footer-heading-icon {
color: rgba(255,255,255,0.45) !important;
opacity: 1;
}
html.mud-dark .formulize-footer {
background-color: #0d1117 !important;
}
/* ══════════════════════════════════════════════════════════════
HOME GRADIENT TOKENS — tune everything here, selectors don't change
══════════════════════════════════════════════════════════════ */
:root {
/* Light mode hero: matches AppBar Color.Tertiary = Colors.Gray.Darken3 */
--hg-hero-from-light: #424242;
/* Light mode hero: orange rising from bottom */
--hg-hero-accent-light: rgba(230, 74, 25, 0.09);
/* Light mode sections: central orange radial */
--hg-section-accent-light: rgba(230, 74, 25, 0.28);
/* Light mode sections: gray→white */
--hg-linear-from: #eceff1;
--hg-linear-from-dark: #c8c8c8; /* darker gray for howitworks/recent edges */
--hg-linear-to: #ffffff;
}
html.mud-dark {
/* Dark mode hero: exact AppBar/background colour so top edge is seamless */
--hg-hero-from: #161b22;
--hg-hero-fade-stop: 60%;
/* Dark mode: radial orange accent */
--hg-radial-inner: rgba(230, 74, 25, 0.13);
--hg-radial-outer: transparent;
--hg-accent-spread: 62%;
}
/* Hero light mode: radial orange glow on top, dark gray → white base beneath.
Radial layers must come first so they sit above the opaque linear gradient. */
html:not(.mud-dark) .home-hero {
background-image:
radial-gradient(ellipse 28% 45% at 50% 50%, rgba(230, 74, 25, 0.38) 0%, transparent 75%),
radial-gradient(ellipse 65% 90% at 50% 50%, rgba(230, 74, 25, 0.16) 0%, transparent 70%),
linear-gradient(to bottom, var(--hg-hero-from-light) 0%, #ffffff 100%);
}
/* Hero light mode mesh: reduced opacity + fade at top/bottom edges */
html:not(.mud-dark) .home-hero::before {
opacity: 0.28;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 35%, black 60%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, black 35%, black 60%, transparent 100%);
}
/* Hero dark mode: navbar colour at top fades into background, glowing orange ellipse centred vertically.
Two-layer radial: bright hot core + wide soft halo for bloom effect.
Transparent stop uses same hue as #161b22 to avoid white-interpolation artifact. */
html.mud-dark .home-hero {
background-image:
linear-gradient(to bottom, var(--hg-hero-from) 0%, rgba(22,27,34,0) var(--hg-hero-fade-stop)),
radial-gradient(ellipse 28% 45% at 50% 50%, rgba(230, 74, 25, 0.60) 0%, transparent 75%),
radial-gradient(ellipse 65% 90% at 50% 50%, rgba(230, 74, 25, 0.30) 0%, transparent 70%);
}
/* Light mode: polls, recent, howitworks — flat white, no gradient, no mesh */
html:not(.mud-dark) .home-polls,
html:not(.mud-dark) .home-recent,
html:not(.mud-dark) .home-howitworks {
background-image: none;
}
/* Dark mode: non-hero sections flat, no gradient */
html.mud-dark .home-howitworks,
html.mud-dark .home-recent,
html.mud-dark .home-polls {
background-image: none;
}
/* ── Mesh background overlay ──────────────────────────────── */
/* Sits on top of gradient via z-index:-1 inside an isolated stacking context,
so it's behind all section content but above the gradient background.
Dark mode: invert() flips dark stroke → white. */
.home-hero,
.home-howitworks,
.home-recent,
.home-polls {
position: relative;
isolation: isolate;
}
.home-hero::before,
.home-howitworks::before,
.home-recent::before,
.home-polls::before {
content: '';
position: absolute;
inset: 0;
background-image: url('/images/mesh-bg.svg');
/* Fixed 1400×280px keeps cells at 40px on all screen sizes.
SVG height = one wavelength so repeat-y tiles seamlessly. */
background-size: 1400px 280px;
background-repeat: repeat;
background-position: center top;
filter: invert(1); /* SVG has black strokes; invert makes them white for both modes */
opacity: 0.52;
pointer-events: none;
z-index: -1;
}
/* Light mode: no mesh on non-hero sections — flat white design */
html:not(.mud-dark) .home-howitworks::before,
html:not(.mud-dark) .home-recent::before,
html:not(.mud-dark) .home-polls::before {
display: none;
}
/* Dark mode: mesh on hero only, hidden on all other sections */
html.mud-dark .home-hero::before {
opacity: 0.11;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 35%, black 60%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, black 35%, black 60%, transparent 100%);
}
html.mud-dark .home-howitworks::before,
html.mud-dark .home-recent::before,
html.mud-dark .home-polls::before {
display: none;
}
.home-hero {
padding: 80px 16px 72px;
text-align: center;
}
.home-hero-headline {
font-weight: 700 !important;
line-height: 1.25 !important;
letter-spacing: -0.5px !important;
max-width: 640px;
margin: 0 auto;
}
.home-hero-sub {
max-width: 560px;
opacity: 0.85;
margin: 0 auto;
}
html:not(.mud-dark) .home-hero-sub {
opacity: 1;
}
/* Light mode hero: headline white, subtitle + outlined buttons dark gray */
html:not(.mud-dark) .home-hero-headline {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}
html:not(.mud-dark) .home-hero-sub {
color: #424242 !important;
-webkit-text-fill-color: #424242 !important;
}
html:not(.mud-dark) .home-hero .mud-button-outlined.mud-button-outlined-primary {
background-color: #424242 !important;
color: #ffffff !important;
border-color: #424242 !important;
}
html:not(.mud-dark) .home-hero .mud-button-outlined.mud-button-outlined-primary:hover {
background-color: #333333 !important;
border-color: #333333 !important;
}
.home-stats {
padding: 40px 16px;
}
/* Vertical dividers between stat items on sm+ screens */
.home-stats .mud-item + .mud-item {
border-left: 1px solid var(--mud-palette-lines-default);
}
@media (max-width: 599px) {
.home-stats .mud-item + .mud-item {
border-left: none;
}
}
.home-stat-number {
font-weight: 700 !important;
color: var(--mud-palette-secondary) !important;
}
.home-stat-label {
font-size: 0.9375rem !important;
opacity: 0.7;
}
.home-section-title {
font-weight: 600 !important;
letter-spacing: -0.3px !important;
margin-bottom: 8px !important;
}
.home-section-subtitle {
opacity: 0.6;
max-width: 560px;
margin: 0 auto 48px !important;
line-height: 1.6 !important;
}
/* ── Scroll reveal ──────────────────────────────────────── */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.52s ease, transform 0.52s ease;
transition-delay: var(--rd, 0ms);
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
.home-features {
padding: 72px 16px;
}
.home-feature-card {
padding: 24px;
border: 1px solid var(--mud-palette-lines-default);
border-radius: 8px;
height: 100%;
background-color: var(--mud-palette-surface);
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.home-feature-card:hover {
border-color: var(--mud-palette-secondary);
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
transform: translateY(-2px);
}
.home-feature-title {
font-weight: 600 !important;
margin-bottom: 6px !important;
}
.home-feature-desc {
opacity: 0.7;
line-height: 1.55 !important;
}
.home-categories {
padding: 72px 16px;
}
.home-category-card {
display: block;
padding: 24px;
border: 1px solid var(--mud-palette-lines-default);
border-radius: 8px;
background-color: var(--mud-palette-surface);
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.home-category-card:hover {
border-color: var(--mud-palette-secondary);
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
transform: translateY(-2px);
}
.home-cta {
padding: 80px 16px;
text-align: center;
border-top: 1px solid var(--mud-palette-lines-default);
}
.home-howitworks {
padding: 72px 16px;
}
.home-step-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
height: 100%;
padding: 32px 24px;
border: 1px solid var(--mud-palette-lines-default);
border-radius: 8px;
background-color: var(--mud-palette-surface);
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.home-step-card:hover {
border-color: var(--mud-palette-secondary);
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
transform: translateY(-2px);
}
.home-step-number {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--mud-palette-secondary);
color: var(--mud-palette-secondary-text);
font-weight: 700;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}
.home-recent {
padding: 72px 16px;
}
/* ── Calculation 3-column layout ─────────────────────────── */
.calc-form-page {
width: 100%;
padding-bottom: 0;
}
.calc-title-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 4px;
}
.calc-title-left {
flex: 1 1 0;
min-width: 0;
}
.calc-title-right {
display: flex;
flex-direction: column;
align-items: flex-end;
flex-shrink: 0;
gap: 0;
}
/* ── Custom navigation tabs (replaces MudTabs on calc pages) ─────────── */
.fnav-tabs-bar {
display: flex;
border-bottom: 1px solid var(--mud-palette-table-lines);
}
.fnav-tab {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
padding: 6px 16px;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
cursor: pointer;
color: var(--mud-palette-text-secondary);
font-family: inherit;
font-size: 0.875rem;
font-weight: 500;
white-space: nowrap;
transition: color 150ms ease, background-color 150ms ease;
outline-offset: -2px;
}
.fnav-tab:hover:not(:disabled) {
background-color: rgba(0, 0, 0, 0.04);
color: var(--mud-palette-text-primary);
}
html.mud-dark .fnav-tab:hover:not(:disabled) {
background-color: rgba(255, 255, 255, 0.08);
}
.fnav-tab--active {
color: var(--mud-palette-secondary);
border-bottom-color: var(--mud-palette-secondary);
}
.fnav-tab:disabled {
opacity: 0.38;
cursor: default;
}
.fnav-tab-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
border-radius: 9px;
padding: 0 5px;
font-size: 0.7rem;
font-weight: 700;
line-height: 1;
}
.fnav-tab-badge--success { background-color: var(--mud-palette-success); color: var(--mud-palette-success-text); }
.fnav-tab-badge--primary { background-color: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
@media (max-width: 599px) {
.fnav-tab {
min-height: 40px;
padding: 6px 4px;
gap: 0;
}
.fnav-tab-label {
display: none;
}
}
.location-map-panel {
border: 1px solid var(--mud-palette-lines-default) !important;
border-radius: var(--mud-default-borderradius, 4px) !important;
}
.mud-dark .runoff-map-svg-wrap {
filter: invert(1) hue-rotate(180deg);
}
.print-preview .runoff-map-svg-wrap {
filter: none !important;
}
@media print {
.runoff-map-svg-wrap {
filter: none !important;
}
}
.calc-layout {
display: flex;
width: 100%;
align-items: flex-start;
}
.calc-layout-content {
flex: 1 1 0;
min-width: 0;
}
.calc-layout-content.calc-content-locked {
pointer-events: none;
user-select: none;
opacity: 0.4;
filter: blur(2px);
}
.calc-layout-toc {
width: 210px;
flex-shrink: 0;
position: sticky;
top: var(--mud-appbar-height, 48px);
max-height: calc(100vh - var(--mud-appbar-height, 48px));
overflow-y: auto;
padding: 20px 14px 16px 16px;
border-left: 1px solid var(--mud-palette-lines-default);
}
.toc-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--mud-palette-text-secondary);
margin: 0 0 10px 0;
}
/* ── Result Sections: section rows ───────────────────────── */
.toc-section {
margin-bottom: 1px;
}
.toc-section-header {
display: flex;
align-items: center;
gap: 3px;
padding: 4px 2px;
cursor: pointer;
border-radius: 4px;
transition: background 0.15s;
min-height: 28px;
}
.toc-section-header:hover {
background: var(--mud-palette-action-default-hover);
}
.toc-status-spacer {
flex-shrink: 0;
width: 18px;
height: 18px;
}
.toc-section-title {
flex: 1;
font-size: 12.5px;
color: var(--mud-palette-text-secondary);
line-height: 1.35;
transition: color 0.15s;
overflow-wrap: anywhere;
}
.toc-section-header:hover .toc-section-title {
color: var(--mud-palette-secondary);
}
.toc-placeholder .toc-section-header {
opacity: 0.4;
pointer-events: none;
}
/* ── Result Sections: expanded rows ─────────────────────── */
.toc-rows {
padding-left: 8px;
margin: 0 0 4px 8px;
border-left: 2px solid var(--mud-palette-lines-default);
}
.toc-row-item {
display: flex;
align-items: center;
gap: 3px;
padding: 2px 4px;
cursor: pointer;
border-radius: 3px;
transition: background 0.15s;
font-size: 11.5px;
color: var(--mud-palette-text-secondary);
min-height: 22px;
}
.toc-row-item:hover {
background: var(--mud-palette-action-default-hover);
color: var(--mud-palette-secondary);
}
.toc-row-symbol {
font-size: 11px;
white-space: nowrap;
flex: 0 0 auto;
}
.toc-row-value {
font-size: 10.5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
opacity: 0.75;
}
/* ── Section anchor (invisible, before each ResultTable / DesignTable) ───── */
.toc-section-anchor {
display: block;
position: relative;
top: -64px;
height: 0;
width: 0;
overflow: hidden;
pointer-events: none;
}
/* ── Row anchor + highlight ──────────────────────────────── */
.toc-row-anchor {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
pointer-events: none;
}
.toc-anchor {
scroll-margin-top: 70px;
}
.toc-hint {
font-size: 11px;
color: var(--mud-palette-text-secondary);
opacity: 0.6;
margin: 10px 0 0 0;
line-height: 1.4;
}
/* ── ApexCharts tooltip dark mode fix ────────────────────── */
/*
In dark mode MudBlazor sets color:white globally via CSS vars.
That cascades into ApexCharts tooltips which have a light
background by default, giving invisible white-on-white text.
We pin the tooltip colors explicitly for both themes.
*/
:root.mud-dark .apexcharts-tooltip {
background: rgba(28, 28, 38, 0.97) !important;
color: #e6edf3 !important;
border-color: #30363d !important;
}
:root.mud-dark .apexcharts-tooltip-title {
background: rgba(0, 0, 0, 0.55) !important;
color: #e6edf3 !important;
border-bottom-color: #30363d !important;
}
:root.mud-dark .apexcharts-tooltip-series-group,
:root.mud-dark .apexcharts-tooltip-text,
:root.mud-dark .apexcharts-tooltip-text-y-label,
:root.mud-dark .apexcharts-tooltip-text-y-value,
:root.mud-dark .apexcharts-tooltip-text-z-value {
color: #e6edf3 !important;
}
:root.mud-dark .apexcharts-custom-tooltip {
background: rgba(28, 28, 38, 0.97) !important;
color: #e6edf3 !important;
border: 1px solid #30363d !important;
border-radius: 5px;
}
:root.mud-dark .apexcharts-custom-tooltip div {
border-bottom-color: #30363d !important;
}
:root.mud-dark .apexcharts-xaxis-label,
:root.mud-dark .apexcharts-yaxis-label,
:root.mud-dark .apexcharts-xaxis-title-text,
:root.mud-dark .apexcharts-yaxis-title-text {
fill: #b0bec5 !important;
}
:root .print-preview .apexcharts-xaxis-label,
:root .print-preview .apexcharts-yaxis-label,
:root .print-preview .apexcharts-xaxis-title-text,
:root .print-preview .apexcharts-yaxis-title-text {
fill: #373d3f !important;
}
@media print {
:root.mud-dark .apexcharts-xaxis-label,
:root.mud-dark .apexcharts-yaxis-label,
:root.mud-dark .apexcharts-xaxis-title-text,
:root.mud-dark .apexcharts-yaxis-title-text,
.apexcharts-xaxis-label,
.apexcharts-yaxis-label,
.apexcharts-xaxis-title-text,
.apexcharts-yaxis-title-text {
fill: #373d3f !important;
}
}
/* ── Inline SVG engineering graphics ─────────────────────── */
.calc-svg-graphic-wrap {
background: var(--mud-palette-surface);
border: 1px solid var(--mud-palette-lines-default);
border-radius: var(--mud-default-borderradius, 4px);
overflow: hidden;
}
.calc-svg-inset .calc-svg-graphic-wrap {
border: none;
border-radius: 0;
}
.calc-png-figure-wrap {
background: white;
border: 1px solid var(--mud-palette-lines-default);
border-radius: var(--mud-default-borderradius, 4px);
overflow: hidden;
}
.calc-svg-graphic {
display: block;
width: 100%;
height: auto;
color: black; /* prevent dark-mode CSS color from bleeding into SVG text fill */
}
:root.mud-dark .calc-svg-graphic {
filter: invert(1) hue-rotate(180deg);
}
.calc-svg-graphic-wrap:has(img) {
width: 60%;
margin: 0 auto;
}
.calc-figure-wrap {
width: 60%;
margin: 0 auto;
background: var(--mud-palette-surface);
border: 1px solid var(--mud-palette-lines-default);
border-radius: var(--mud-default-borderradius, 4px);
overflow: hidden;
}
.calc-figure-wrap img {
display: block;
width: 100%;
height: auto;
}
:root.mud-dark .calc-figure-wrap img {
filter: invert(1) hue-rotate(180deg);
mix-blend-mode: screen;
}
.print-preview .calc-svg-graphic-wrap {
background: white !important;
border-color: #e0e0e0 !important;
}
.print-preview .calc-figure-wrap {
background: white !important;
border-color: #e0e0e0 !important;
}
.print-preview .calc-svg-graphic {
filter: none !important;
}
.print-preview .calc-figure-wrap img {
filter: none !important;
mix-blend-mode: normal !important;
}
@media print {
.calc-svg-graphic-wrap {
background: white !important;
border-color: #e0e0e0 !important;
}
.calc-figure-wrap {
background: white !important;
border-color: #e0e0e0 !important;
}
.calc-svg-graphic {
filter: none !important;
}
.calc-figure-wrap img {
filter: none !important;
mix-blend-mode: normal !important;
}
}
@media (max-width: 599px) {
.calc-figure-wrap,
.calc-svg-graphic-wrap:has(img) {
width: 100%;
}
}
/* ── Account / Manage layout ──────────────────────────────── */
.manage-sidenav {
background-color: var(--mud-palette-background-gray) !important;
border-right: 1px solid var(--mud-palette-lines-default);
}
.manage-layout-wrapper {
display: flex;
flex-direction: row;
flex-grow: 1;
min-height: 425px;
}
.manage-layout-nav {
width: 260px;
flex-shrink: 0;
}
@media (max-width: 960px) {
.manage-layout-wrapper {
flex-direction: column;
}
.manage-layout-nav {
width: 100%;
border-right: none;
border-bottom: 1px solid var(--mud-palette-lines-default);
}
.manage-sidenav {
border-right: none !important;
}
}
/* ── fz-table: custom lean table + modal ─────────────────── */
.fz-table-wrap {
overflow-x: auto;
overflow-y: auto;
max-height: 220px;
border: 1px solid var(--mud-palette-table-lines);
border-radius: 4px;
}
.fz-table-wrap--full {
max-height: none;
overflow-y: visible;
}
.fz-table-wrap--full .fz-table tbody tr {
cursor: default;
}
.fz-table-wrap--full .fz-table tbody td:first-child {
width: auto;
text-align: left;
}
@keyframes fz-row-flash {
0% { background-color: color-mix(in srgb, var(--mud-palette-primary) 28%, transparent); }
70% { background-color: color-mix(in srgb, var(--mud-palette-primary) 28%, transparent); }
100% { background-color: transparent; }
}
.fz-highlight-row > td,
.fz-highlight-row .mud-table-cell {
animation: fz-row-flash 3s ease-out forwards;
}
.fz-table {
width: 100%;
border-collapse: collapse;
font-size: 0.8125rem;
}
.fz-table thead th {
background-color: var(--mud-palette-secondary);
color: var(--mud-palette-secondary-text);
padding: 4px 8px;
font-weight: 500;
white-space: nowrap;
text-align: center;
position: sticky;
top: 0;
z-index: 1;
}
.fz-table thead th:first-child { width: 36px; }
.fz-table tbody td {
padding: 3px 8px;
border-bottom: 1px solid var(--mud-palette-table-lines);
white-space: nowrap;
vertical-align: middle;
color: var(--mud-palette-text-primary);
}
.fz-table tbody td:first-child {
width: 36px;
text-align: center;
}
.fz-td--center { text-align: center; }
.fz-table tbody tr { cursor: pointer; }
.fz-table tbody tr:hover { background-color: var(--mud-palette-table-hover); }
.fz-row--selected { background-color: rgba(0, 0, 0, 0.08); }
html.mud-dark .fz-row--selected { background-color: rgba(255, 255, 255, 0.1); }
/* Expandable result tables */
.fz-table--expand tbody tr {
cursor: default;
}
/* Description column: override the 36px first-header default, take all leftover space */
.fz-table--expand thead th:first-child {
width: auto;
}
.fz-table--expand tbody td:first-child {
width: auto;
text-align: left;
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
}
/* Data columns: collapse to content width so Description gets maximum space */
.fz-table--expand thead th:not(:first-child):not(:last-child),
.fz-table--expand tbody td:not(:first-child):not(:last-child) {
width: 1px;
}
.fz-table--expand thead th:last-child,
.fz-table--expand tbody td:last-child {
width: 40px;
text-align: center;
padding: 0;
}
.fz-detail-row > td {
background-color: rgba(0, 0, 0, 0.03);
white-space: normal !important;
padding: 4px 8px !important;
cursor: default;
}
html.mud-dark .fz-detail-row > td {
background-color: rgba(255, 255, 255, 0.03);
}
.fz-detail-row:hover > td {
background-color: rgba(0, 0, 0, 0.03) !important;
}
html.mud-dark .fz-detail-row:hover > td {
background-color: rgba(255, 255, 255, 0.03) !important;
}
.fz-detail-row .mud-typography {
font-size: 0.8125rem;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
.fz-detail-row sub,
.fz-detail-row sup {
font-size: 0.65em;
line-height: 0;
}
.fz-detail-row .fz-table tbody td {
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
}
/* ── fz-table--vars: neutral headers for description variable tables ─ */
.fz-table.fz-table--vars thead th {
background-color: #efefef;
color: var(--mud-palette-text-primary);
border-bottom: 2px solid var(--mud-palette-lines-default);
}
html.mud-dark .fz-table.fz-table--vars thead th {
background-color: rgba(255, 255, 255, 0.07);
}
/* ── ud-table: user-facing data tables ───────────────────── */
.ud-table-wrap {
overflow-x: auto;
}
.ud-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.ud-table thead th {
background-color: var(--mud-palette-secondary);
color: var(--mud-palette-secondary-text);
padding: 6px 12px;
font-weight: 500;
text-align: left;
white-space: nowrap;
user-select: none;
}
.ud-table thead th.ud-th--sortable { cursor: pointer; }
.ud-table thead th.ud-th--sortable:hover { filter: brightness(0.88); }
.ud-table thead th.ud-th--center { text-align: center; }
.ud-table tbody td {
padding: 6px 12px;
border-bottom: 1px solid var(--mud-palette-table-lines);
vertical-align: middle;
}
.ud-table tbody tr:hover { background-color: var(--mud-palette-table-hover); }
/* ── My Calculations: search bar ─────────────────────────── */
.fz-search-field { flex: 1 1 0%; min-width: 0; }
.fz-search-field .mud-input { width: 100%; }
.fz-project-filter { flex: 1 1 0%; min-width: 0; }
.fz-project-filter .mud-input { width: 100%; }
/* ── Saved calculations list: responsive 2-row card ──────── */
.saved-calc-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 8px;
padding: 8px 16px;
}
.saved-calc-name-col { flex: 1; min-width: 0; }
.saved-calc-date-col { min-width: 72px; text-align: right; }
.saved-calc-actions { display: flex; align-items: center; flex-shrink: 0; }
.saved-calc-mobile-meta { display: none; }
.saved-calc-title-row { display: flex; align-items: center; gap: 6px; overflow: hidden; }
.saved-calc-title-text { min-width: 0; font-size: 0.875rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.saved-calc-status-chip { display: none; flex-shrink: 0; }
@media (max-width: 599px) {
.fz-search-field { flex: 1 1 100% !important; }
.fz-search-field .mud-input { width: 100% !important; }
.fz-project-filter { flex: 1 1 100%; }
.saved-calc-col--desktop { display: none !important; }
.saved-calc-status-chip { display: block; }
.saved-calc-mobile-meta {
display: block;
flex: 0 0 100%;
font-size: 0.75rem;
color: var(--mud-palette-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-bottom: 4px;
}
}
/* Modal overlay */
.fz-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1300;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
pointer-events: none;
}
.fz-modal {
background: var(--mud-palette-surface);
border-radius: 8px;
width: 100%;
max-width: 480px;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
pointer-events: auto;
}
.fz-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid var(--mud-palette-table-lines);
font-weight: 500;
font-size: 1rem;
}
.fz-modal-body { padding: 16px; }
.fz-modal-footer {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 12px 16px;
border-top: 1px solid var(--mud-palette-table-lines);
}
.fz-modal-error {
font-size: 0.8125rem;
color: var(--mud-palette-error-darken);
background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--mud-palette-error) 30%, transparent);
border-radius: 4px;
padding: 8px 12px;
margin-bottom: 12px;
}
html.mud-dark .fz-modal-error {
color: var(--mud-palette-error-lighten);
}
.fz-field {
margin-bottom: 8px;
}
.fz-label {
display: block;
font-size: 0.75rem;
color: var(--mud-palette-text-secondary);
margin-bottom: 4px;
}
.fz-select,
.fz-input {
width: 100%;
padding: 8px 10px;
border: 1px solid rgba(0, 0, 0, 0.23);
border-radius: 4px;
font-size: 0.875rem;
font-family: inherit;
background: var(--mud-palette-surface);
color: var(--mud-palette-text-primary);
cursor: pointer;
box-sizing: border-box;
}
.fz-select { appearance: auto; }
.fz-select:focus,
.fz-input:focus {
outline: none;
border-color: var(--mud-palette-secondary);
border-width: 2px;
padding: 7px 9px;
}
html.mud-dark .fz-select,
html.mud-dark .fz-input {
border-color: rgba(255, 255, 255, 0.23);
}
html.mud-dark .fz-input::-webkit-inner-spin-button,
html.mud-dark .fz-input::-webkit-outer-spin-button {
filter: invert(1);
opacity: 1;
}
/* ── Calculation table headers ───────────────────────────── */
.mud-table .mud-table-head .mud-table-cell {
background-color: var(--mud-palette-secondary) !important;
color: var(--mud-palette-secondary-text) !important;
}
/* Compact cells for scrollable calc tables */
.fnav-tabs .mud-table-dense .mud-table-cell {
padding: 2px 8px;
font-size: 0.8125rem;
vertical-align: middle !important;
}
/* Center the multi-select checkbox within its cell */
.mud-table .mud-table-cell .mud-table-cell-checkbox {
display: flex !important;
align-items: center !important;
}
/* ── Breadcrumbs ─────────────────────────────────────────── */
/*
* Container: max-width contained, never wraps.
* The scrolls horizontally on small screens — scrollbar hidden.
*/
/* ── Breadcrumb chevron chain ─────────────────────────────────
Each item is a bordered box with a CSS-triangle tip pointing right.
MudBlazor's - is hidden — the
arrow shape itself acts as the visual separator between items.
──────────────────────────────────────────────────────────── */
.formulize-breadcrumbs {
display: inline-flex;
max-width: 100%;
padding: 0;
background: none;
border: none;
}
.formulize-breadcrumbs ol {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center;
padding: 0;
margin: 0;
gap: 0;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
list-style: none;
}
.formulize-breadcrumbs ol::-webkit-scrollbar { display: none; }
.formulize-breadcrumbs .mud-breadcrumb-separator { display: none; }
/* ── li = border layer ──────────────────────────────────────────
li background is the border colour; clip-path shapes the outer
polygon. The inner a/span clips to a slightly smaller polygon,
exposing the border colour only where inset: top/bottom 1 px,
indent diagonal ~1.5 px. Arrow face is NOT inset so only one
border line appears at each junction (from the next item's
indent), eliminating the double-line.
────────────────────────────────────────────────────────────── */
.formulize-breadcrumbs .mud-breadcrumb-item {
position: relative;
display: inline-flex;
align-items: stretch;
flex-shrink: 0;
padding: 0;
background: var(--mud-palette-lines-default);
cursor: default;
/* Home: flat left, arrow right */
clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 0% 100%);
}
.formulize-breadcrumbs .mud-breadcrumb-item:has(a) { cursor: pointer; }
/* Middle/last: > indent left, arrow right */
.formulize-breadcrumbs .mud-breadcrumb-item:not(:first-child) {
clip-path: polygon(0% 0%, 10px 50%, 0% 100%, calc(100% - 10px) 100%, 100% 50%, calc(100% - 10px) 0%);
margin-left: -10px;
}
/* Last: > indent left, flat right */
.formulize-breadcrumbs .mud-breadcrumb-item:last-child {
clip-path: polygon(0% 0%, 10px 50%, 0% 100%, 100% 100%, 100% 0%);
}
/* Single item: plain rectangle */
.formulize-breadcrumbs .mud-breadcrumb-item:first-child:last-child {
clip-path: none;
background: transparent;
border: 1px solid var(--mud-palette-lines-default);
border-radius: 3px;
margin-left: 0;
}
/* ── a/span = fill layer ────────────────────────────────────────
Arrow face matches outer polygon (no x-inset on the diagonal)
→ border colour hidden there; only the next item's indent shows
a border line at each join.
Hover directly targets the fill so the transition is reliable.
────────────────────────────────────────────────────────────── */
.formulize-breadcrumbs .mud-breadcrumb-item > a,
.formulize-breadcrumbs .mud-breadcrumb-item > span {
display: flex;
align-items: center;
align-self: stretch;
flex: 1;
white-space: nowrap;
background: var(--mud-palette-surface);
padding: 2px 16px 2px 8px;
font-size: 0.75rem;
color: var(--mud-palette-text-secondary);
text-decoration: none !important;
transition: background 0.15s;
/* Home inner: 1 px top/bottom/left, arrow face unmodified */
clip-path: polygon(1px 1px, calc(100% - 10px) 1px, 100% 50%, calc(100% - 10px) calc(100% - 1px), 1px calc(100% - 1px));
}
/* Non-first inner: ~1.5 px on indent diagonal; arrow face unmodified */
.formulize-breadcrumbs .mud-breadcrumb-item:not(:first-child) > a,
.formulize-breadcrumbs .mud-breadcrumb-item:not(:first-child) > span {
padding-left: 16px;
clip-path: polygon(1px 1px, 11.5px 50%, 1px calc(100% - 1px), calc(100% - 10px) calc(100% - 1px), 100% 50%, calc(100% - 10px) 1px);
}
/* Last inner: indent + 1 px flat right */
.formulize-breadcrumbs .mud-breadcrumb-item:last-child > a,
.formulize-breadcrumbs .mud-breadcrumb-item:last-child > span {
padding-right: 8px;
clip-path: polygon(1px 1px, 11.5px 50%, 1px calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) 1px);
}
/* Single item inner: no clip, li border does the work */
.formulize-breadcrumbs .mud-breadcrumb-item:first-child:last-child > a,
.formulize-breadcrumbs .mud-breadcrumb-item:first-child:last-child > span {
clip-path: none;
padding: 2px 8px;
}
/* Hover: directly target fill for reliable transition */
.formulize-breadcrumbs .mud-breadcrumb-item:has(a):hover > a {
background: var(--mud-palette-background-grey);
}
.formulize-breadcrumbs .mud-breadcrumb-item.mud-disabled > span {
color: var(--mud-palette-text-disabled);
}
/* ── Mobile: 8 px arrow ── */
@media (max-width: 599px) {
.formulize-breadcrumbs .mud-breadcrumb-item {
clip-path: polygon(0% 0%, calc(100% - 8px) 0%, 100% 50%, calc(100% - 8px) 100%, 0% 100%);
}
.formulize-breadcrumbs .mud-breadcrumb-item:not(:first-child) {
clip-path: polygon(0% 0%, 8px 50%, 0% 100%, calc(100% - 8px) 100%, 100% 50%, calc(100% - 8px) 0%);
margin-left: -8px;
}
.formulize-breadcrumbs .mud-breadcrumb-item:last-child {
clip-path: polygon(0% 0%, 8px 50%, 0% 100%, 100% 100%, 100% 0%);
}
.formulize-breadcrumbs .mud-breadcrumb-item:first-child:last-child {
clip-path: none; margin-left: 0;
}
.formulize-breadcrumbs .mud-breadcrumb-item > a,
.formulize-breadcrumbs .mud-breadcrumb-item > span {
padding: 1px 13px 1px 6px;
font-size: 0.68rem;
clip-path: polygon(1px 1px, calc(100% - 8px) 1px, 100% 50%, calc(100% - 8px) calc(100% - 1px), 1px calc(100% - 1px));
}
.formulize-breadcrumbs .mud-breadcrumb-item:not(:first-child) > a,
.formulize-breadcrumbs .mud-breadcrumb-item:not(:first-child) > span {
padding-left: 13px;
clip-path: polygon(1px 1px, 9.5px 50%, 1px calc(100% - 1px), calc(100% - 8px) calc(100% - 1px), 100% 50%, calc(100% - 8px) 1px);
}
.formulize-breadcrumbs .mud-breadcrumb-item:last-child > a,
.formulize-breadcrumbs .mud-breadcrumb-item:last-child > span {
padding-right: 6px;
clip-path: polygon(1px 1px, 9.5px 50%, 1px calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) 1px);
}
.formulize-breadcrumbs .mud-breadcrumb-item:first-child:last-child > a,
.formulize-breadcrumbs .mud-breadcrumb-item:first-child:last-child > span {
clip-path: none; padding: 2px 6px;
}
}
/* Dark mode: all colours come from MudBlazor theme vars — no extra rules needed */
/* ── Calculation listing cards ───────────────────────────── */
.calc-card {
display: flex;
flex-direction: column;
height: 100%;
position: relative;
border: 1px solid var(--mud-palette-lines-default);
border-radius: var(--mud-default-borderradius);
background-color: var(--mud-palette-surface);
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.calc-card-free-badge {
position: absolute;
top: 10px;
right: 10px;
display: flex;
align-items: center;
gap: 4px;
}
.calc-card-review-badge {
display: inline-flex;
align-items: center;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
padding: 2px 8px;
border-radius: 4px;
color: #e65100;
background-color: #f5f5f5;
border: 1px solid #e0c8b0;
white-space: nowrap;
}
html.mud-dark .calc-card-review-badge {
color: #ffb74d;
background-color: #2a1f10;
border: 1px solid #7a4a1a;
}
/* ── Under-review notice banner (calc page) ──────────────────── */
.calc-review-notice {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 14px;
border-radius: var(--mud-default-borderradius);
font-size: 0.875rem;
line-height: 1.5;
background-color: #fff3e0;
color: #e65100;
border: 1px solid #ffcc80;
}
.calc-review-notice-icon {
flex-shrink: 0;
margin-top: 1px;
color: inherit;
}
html.mud-dark .calc-review-notice {
background-color: #3a1c00;
color: #ffb74d;
border-color: #7a4210;
}
.calc-card:hover {
border-color: var(--mud-palette-secondary);
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
transform: translateY(-2px);
}
.calc-card-header {
padding: 16px 16px 10px;
}
.calc-card-body {
padding: 0 16px 10px;
flex-grow: 1;
}
.calc-card-footer {
padding: 10px 16px 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
border-top: 1px solid var(--mud-palette-lines-default);
}
.calc-card-standards {
display: flex;
flex-wrap: wrap;
gap: 4px;
flex: 1;
}
.calc-card-standard-pill {
display: inline-block;
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.3px;
padding: 2px 6px;
border-radius: 10px;
border: 1px solid var(--mud-palette-lines-default);
color: var(--mud-palette-text-secondary);
background: transparent;
white-space: nowrap;
line-height: 1.4;
}
.calc-card-title {
font-weight: 600;
line-height: 1.35;
margin-bottom: 4px;
}
.calc-card-breadcrumb {
color: var(--mud-palette-text-secondary);
font-size: 0.75rem;
}
.calc-card-date {
color: var(--mud-palette-text-secondary);
font-size: 0.7rem;
opacity: 0.7;
flex-shrink: 0;
margin-left: 8px;
}
.calc-card-excerpt {
color: var(--mud-palette-text-secondary);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ── Catalog / category listing page ─────────────────────── */
.catalog-page-title {
font-weight: 600;
}
.catalog-page-count {
color: var(--mud-palette-text-secondary);
}
/* ── Error page ──────────────────────────────────────────── */
.error-page {
display: flex;
align-items: center;
justify-content: center;
min-height: 60vh;
padding: 40px 16px;
}
.error-page-sub {
color: var(--mud-palette-text-secondary);
max-width: 420px;
}
.error-page-id {
color: var(--mud-palette-text-disabled);
}
/* ── Privacy / Terms content sections ────────────────────── */
.content-section {
margin-bottom: 20px;
display: block;
}
/* ── Projects table row actions ──────────────────────────── */
.projects-table-row > td:last-child > div:not(.justify-end) {
justify-content: flex-end !important;
}
.projects-table-row > td:last-child > div:not(.justify-end) > div:last-child > button {
margin-left: 4px !important;
}
/* ── Footer ───────────────────────────────────────────────── */
.formulize-footer {
border-top: 1px solid rgba(0,0,0,0.12);
}
html.mud-dark .formulize-footer {
border-top-color: rgba(255,255,255,0.08);
}
/* Brand name wordmark */
.footer-brand-name {
font-weight: 600 !important;
letter-spacing: -0.2px;
}
/* Tagline under brand */
.footer-tagline {
opacity: 0.7;
line-height: 1.55 !important;
}
/* Country / meta text */
.footer-meta {
opacity: 0.6;
}
/* Section heading icon */
.footer-heading-icon {
opacity: 0.55;
}
/* Section heading text */
.formulize-footer .footer-section-title {
font-weight: 600 !important;
letter-spacing: 0.3px;
text-transform: uppercase;
font-size: 0.7rem !important;
opacity: 0.55;
}
/* Footer links: subtle at rest, accent on hover */
.formulize-footer .footer-link {
color: var(--mud-palette-text-secondary) !important;
opacity: 0.8;
transition: color 0.15s, opacity 0.15s;
display: inline-block;
}
.formulize-footer .footer-link:hover {
color: var(--mud-palette-secondary) !important;
opacity: 1;
text-decoration: none;
}
.formulize-footer .mud-divider {
border-color: rgba(0,0,0,0.1) !important;
}
html.mud-dark .formulize-footer .mud-divider {
border-color: rgba(255,255,255,0.07) !important;
}
/* Bottom bar */
.footer-bottom {
display: flex;
justify-content: center;
padding: 20px 0 4px;
}
.footer-copyright {
opacity: 0.45;
font-size: 0.8rem !important;
}
.footer-brand-link {
opacity: 1 !important;
color: inherit !important;
font-weight: 500;
}
/* Mobile footer strip — hidden on desktop */
.footer-mobile {
display: none;
}
.footer-divider-mobile {
display: none;
}
.footer-mobile-logo {
width: 22px;
height: 22px;
opacity: 0.85;
flex-shrink: 0;
}
.footer-mobile-link {
font-size: 0.8125rem;
text-decoration: none;
color: rgba(255, 255, 255, 0.7);
}
.footer-mobile-link:hover {
color: #ff5722;
}
@media (max-width: 599px) {
.formulize-footer .mud-container {
padding-top: 0.875rem !important;
padding-bottom: 0.875rem !important;
}
/* Hide full desktop grid and its divider */
.formulize-footer .mud-grid,
.footer-divider-desktop {
display: none !important;
}
/* Show mobile strip */
.footer-mobile {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
padding-left: 1rem;
}
.footer-mobile-links {
flex: 1;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 4px 14px;
}
.footer-divider-mobile {
display: block;
margin-top: 0.75rem;
}
}
/* ── Community Polls ──────────────────────────────────────── */
.home-polls {
padding: 72px 16px;
}
.home-support {
padding: 72px 16px;
text-align: center;
}
.home-support-card {
width: 100%;
padding: 32px 40px;
border: 1px solid var(--mud-palette-lines-default) !important;
border-radius: 12px !important;
background-color: var(--mud-palette-surface) !important;
box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}
.home-support-text {
max-width: 420px;
color: var(--mud-palette-text-secondary);
}
.home-support-bmc {
display: inline-block;
transition: opacity 0.2s, transform 0.2s;
border-radius: 8px;
}
.home-support-bmc:hover {
opacity: 0.85;
transform: translateY(-2px);
}
.home-support-bmc img {
display: block;
border-radius: 8px;
}
.poll-card {
border: 1px solid var(--mud-palette-lines-default);
border-radius: 8px;
background-color: var(--mud-palette-surface);
display: flex;
flex-direction: column;
height: 100%;
}
.poll-card-header {
padding: 18px 20px 10px;
}
.poll-card-body {
padding: 6px 20px 10px;
flex-grow: 1;
}
.poll-card-footer {
padding: 10px 20px 16px;
border-top: 1px solid var(--mud-palette-lines-default);
}
.poll-badge {
display: inline-block;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 2px 9px;
border-radius: 12px;
white-space: nowrap;
flex-shrink: 0;
}
.poll-badge-open { background-color: #2e7d32; color: white; }
.poll-badge-closed { background-color: var(--mud-palette-text-disabled); color: white; }
.poll-deadline {
color: var(--mud-palette-text-secondary);
display: block;
}
.poll-option-radio,
.poll-option-check {
display: flex;
margin-bottom: 2px;
}
.poll-multi-hint {
display: block;
margin-top: 4px;
color: var(--mud-palette-text-secondary);
opacity: 0.7;
}
.poll-signin-prompt {
padding-top: 12px;
}
/* ── Poll results bars ────────────────────────────────────── */
.poll-results {
padding: 8px 20px 14px;
flex-grow: 1;
}
.poll-result-row {
margin-bottom: 10px;
}
.poll-result-label {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
font-size: 13px;
margin-bottom: 3px;
}
.poll-result-label-voted {
font-weight: 600;
}
.poll-voted-check {
color: var(--mud-palette-primary);
margin-right: 3px;
font-weight: 700;
}
.poll-result-pct {
font-size: 12px;
font-weight: 600;
color: var(--mud-palette-text-secondary);
white-space: nowrap;
min-width: 36px;
text-align: right;
flex-shrink: 0;
}
.poll-result-bar-track {
height: 7px;
border-radius: 4px;
background-color: var(--mud-palette-lines-default);
overflow: hidden;
}
.poll-result-bar-fill {
height: 100%;
border-radius: 4px;
background-color: var(--mud-palette-secondary);
transition: width 0.5s ease;
min-width: 0;
}
.poll-result-bar-fill-voted {
background-color: var(--mud-palette-primary);
}
.poll-result-count {
display: block;
margin-top: 1px;
color: var(--mud-palette-text-secondary);
opacity: 0.55;
}
/* ── Collapsible left sidebar ────────────────────────────── */
/* Desktop: CSS-hide the MudDrawer when nav-collapsed class is applied.
On mobile the Responsive variant's own Temporary mode handles hiding. */
@media (min-width: 960px) {
.nav-collapsed .mud-drawer {
display: none !important;
}
.nav-collapsed .mud-main-content {
margin-left: 0 !important;
padding-left: 0 !important;
}
}
/* ── Collapsible right TOC sidebar ───────────────────────── */
/* TOC header: label + close button side by side */
.toc-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 4px;
}
.toc-header .toc-label {
margin-bottom: 0;
}
.toc-close-btn {
margin: -4px -6px -4px 0;
}
/* Reveal button: fixed vertical tab on the right viewport edge when TOC is closed.
Sits 4px in from the viewport so border-top/bottom stop exactly where the arcs begin;
a zero-blur box-shadow in the surface colour fills that 4px gap. */
.calc-toc-reveal {
position: fixed;
top: calc(var(--mud-appbar-height, 48px) + 60px);
right: 4px;
z-index: 1050;
background-color: var(--mud-palette-surface);
border-top: 1px solid var(--mud-palette-lines-default);
border-left: 1px solid var(--mud-palette-lines-default);
border-bottom: 1px solid var(--mud-palette-lines-default);
border-radius: 8px 0 0 8px;
padding: 6px 2px 6px 4px;
box-shadow: 4px 0 0 0 var(--mud-palette-surface), -3px 2px 10px rgba(0, 0, 0, 0.12);
transition: box-shadow 0.15s;
}
.calc-toc-reveal:hover {
box-shadow: 4px 0 0 0 var(--mud-palette-surface), -4px 3px 14px rgba(0, 0, 0, 0.2);
}
/* Inverted-radius arcs bridge the 4px gap at the viewport edge */
.calc-toc-reveal::before,
.calc-toc-reveal::after {
content: '';
position: absolute;
right: -4px;
width: 4px;
height: 4px;
pointer-events: none;
}
.calc-toc-reveal::before {
bottom: 100%;
border-right: 1px solid var(--mud-palette-lines-default);
border-bottom: 1px solid var(--mud-palette-lines-default);
border-bottom-right-radius: 4px;
}
.calc-toc-reveal::after {
top: 100%;
border-right: 1px solid var(--mud-palette-lines-default);
border-top: 1px solid var(--mud-palette-lines-default);
border-top-right-radius: 4px;
}
/* Mobile: TOC slides in as a fixed overlay panel */
@media (max-width: 959px) {
.calc-toc-reveal {
top: calc(var(--mud-appbar-height, 48px) + 110px);
}
.calc-layout-toc {
position: fixed;
top: var(--mud-appbar-height, 48px);
right: 0;
width: 240px;
height: calc(100vh - var(--mud-appbar-height, 48px));
max-height: none;
z-index: 1100;
background-color: var(--mud-palette-background);
border-left: 1px solid var(--mud-palette-lines-default);
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.18);
overflow-y: auto;
padding: 16px 14px 16px 16px;
}
/* Backdrop: semi-transparent overlay behind the TOC on mobile */
.calc-toc-backdrop {
display: block;
position: fixed;
inset: 0;
z-index: 1099;
background: rgba(0, 0, 0, 0.4);
}
}
/* Desktop: hide backdrop (it's only shown on mobile via the block above) */
@media (min-width: 960px) {
.calc-toc-backdrop {
display: none;
}
}
/* ── Mobile responsiveness ────────────────────────────────── */
@media (max-width: 600px) {
/* Hero: tighten vertical padding and shrink headline */
.home-hero {
padding: 48px 16px 40px;
}
.home-hero-headline.mud-typography-h3 {
font-size: 2rem !important;
line-height: 1.3 !important;
}
/* Reduce section vertical padding */
.home-features,
.home-categories,
.home-polls,
.home-howitworks,
.home-recent,
.home-support {
padding: 48px 16px;
}
.home-cta {
padding: 48px 16px;
}
}
/* ── Nav: My Account section ─────────────────────────────────────── */
.fnav-account-hd {
padding-left: 8px;
gap: 8px;
border-radius: 4px;
transition: background 0.15s;
}
.fnav-account-hd:hover {
background-color: var(--mud-palette-action-default-hover);
}
.fnav-account-icon {
flex-shrink: 0;
}
/* ── User profile layout ─────────────────────────────────────────── */
.user-layout {
display: flex;
align-items: flex-start;
width: 100%;
}
.user-nav {
width: 196px;
flex-shrink: 0;
position: sticky;
top: var(--mud-appbar-height, 48px);
max-height: calc(100vh - var(--mud-appbar-height, 48px));
overflow-y: auto;
border-right: 1px solid var(--mud-palette-lines-default);
padding: 12px 8px;
display: flex;
flex-direction: column;
gap: 2px;
}
.user-nav-sep {
height: 1px;
background: var(--mud-palette-lines-default);
margin: 6px 0;
flex-shrink: 0;
}
.user-body {
flex: 1 1 0;
min-width: 0;
}
@media (max-width: 599px) {
.user-layout {
flex-direction: column;
}
.user-nav {
width: 100%;
position: static;
max-height: none;
flex-direction: row;
overflow-x: auto;
overflow-y: hidden;
border-right: none;
border-bottom: 1px solid var(--mud-palette-lines-default);
padding: 6px 8px;
gap: 4px;
}
.user-nav-sep {
width: 1px;
height: auto;
align-self: stretch;
margin: 0 4px;
}
.user-nav .fnav-util-link span {
white-space: nowrap;
}
}
/* ── Auth shell (login, register, etc.) ───────────────────── */
.auth-shell {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 3rem 1rem 2rem;
background-color: #f6f8fa;
}
/* Full-bleed two-column layout — remove shell padding so the panel fills edge-to-edge */
.auth-shell:has(.auth-two-col) {
padding: 0;
align-items: stretch;
}
.auth-shell:has(.auth-two-col) > .auth-footer {
display: none;
}
/* Single-panel pages (e.g. Forgot Password) — full-bleed with mesh */
.auth-shell:has(.auth-centered) {
padding: 0;
align-items: stretch;
justify-content: center;
}
.auth-centered {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 64px 24px 48px;
position: relative;
overflow: hidden;
background:
linear-gradient(to bottom-right, transparent 55%, rgba(230, 74, 25, 0.1) 100%),
linear-gradient(160deg, #2d2d2d 0%, #1a1a1a 100%);
}
html:not(.mud-dark) .auth-centered {
background:
linear-gradient(to bottom-right, transparent 55%, rgba(230, 74, 25, 0.07) 100%),
linear-gradient(160deg, #ffffff 0%, #f3f4f6 100%);
}
.auth-centered::before {
content: '';
position: absolute;
inset: 0;
background-image: url('/images/mesh-bg.svg');
background-size: 1400px 280px;
background-repeat: repeat;
background-position: center top;
filter: invert(1);
opacity: 0.11;
pointer-events: none;
z-index: 0;
mask-image:
linear-gradient(to right, transparent, black 80px, black calc(100% - 80px), transparent),
linear-gradient(to bottom, transparent, black 80px, black calc(100% - 80px), transparent);
mask-composite: intersect;
}
html:not(.mud-dark) .auth-centered::before {
filter: none;
opacity: 0.12;
}
.auth-centered::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 10%, rgba(230, 74, 25, 0.22) 0%, transparent 55%);
pointer-events: none;
z-index: 0;
}
html:not(.mud-dark) .auth-centered::after {
background: radial-gradient(ellipse at 50% 10%, rgba(230, 74, 25, 0.12) 0%, transparent 55%);
}
.auth-centered > * {
position: relative;
z-index: 1;
}
.auth-centered.auth-centered-inline {
min-height: calc(100vh - 64px);
border-radius: 0;
}
html.mud-dark .auth-shell {
background-color: #0d1117;
}
.auth-shell .mud-card {
box-shadow: none;
}
html.mud-dark .auth-shell .mud-card.mud-card-outlined {
border-color: #30363d;
}
/* Override browser autofill yellow background on auth forms */
.auth-shell input:-webkit-autofill,
.auth-shell input:-webkit-autofill:hover,
.auth-shell input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
-webkit-text-fill-color: #1a1a1a !important;
}
html.mud-dark .auth-shell input:-webkit-autofill,
html.mud-dark .auth-shell input:-webkit-autofill:hover,
html.mud-dark .auth-shell input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px #27272f inset !important;
-webkit-text-fill-color: #ffffff !important;
}
.auth-footer {
margin-top: 1.5rem;
display: flex;
flex-wrap: wrap;
gap: 4px 12px;
justify-content: center;
align-items: center;
font-size: 0.75rem;
color: var(--mud-palette-text-secondary);
}
.auth-footer a {
color: var(--mud-palette-text-secondary);
text-decoration: none;
}
.auth-footer a:hover {
color: var(--mud-palette-text-primary);
text-decoration: underline;
}
/* ── Page header (shared component) ──────────────────────── */
.page-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 28px;
flex-wrap: wrap;
}
.page-header-text {
flex: 1;
min-width: 0;
}
.page-header-title {
font-weight: 600 !important;
letter-spacing: -0.3px !important;
}
.page-header-subtitle {
opacity: 0.6;
margin-top: 4px;
}
.page-header-actions {
flex-shrink: 0;
}
/* ── User page breadcrumb ─────────────────────────────────── */
.user-page-breadcrumb {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 12px;
opacity: 0.6;
}
.user-page-breadcrumb-sep {
opacity: 0.5;
}
/* ── Table / page empty states ────────────────────────────── */
.table-empty-state,
.page-empty-state {
display: flex;
flex-direction: column;
align-items: center;
padding: 56px 16px;
text-align: center;
}
.table-empty-icon,
.page-empty-icon {
font-size: 3rem !important;
opacity: 0.35;
margin-bottom: 12px;
}
.table-empty-title,
.page-empty-title {
font-weight: 600 !important;
margin-bottom: 4px !important;
}
.table-empty-sub,
.page-empty-sub {
max-width: 360px;
opacity: 0.6;
}
/* ── Table loading skeletons ──────────────────────────────── */
.table-skeleton-wrap {
padding: 8px 0;
}
/* ── Error / 404 page ─────────────────────────────────────── */
.error-page {
display: flex;
align-items: center;
justify-content: center;
min-height: 60vh;
padding: 48px 16px;
}
.error-page-code {
font-size: 6rem !important;
font-weight: 700 !important;
line-height: 1 !important;
opacity: 0.15;
letter-spacing: -4px !important;
}
.error-page-sub {
opacity: 0.65;
max-width: 420px;
}
.error-page-id code {
opacity: 0.5;
font-size: 0.75rem;
}
/* ── Account manage section labels ───────────────────────── */
.manage-section-label {
font-weight: 600 !important;
letter-spacing: 0.4px;
text-transform: uppercase;
font-size: 0.7rem !important;
opacity: 0.5;
margin-bottom: 8px !important;
}
/* ── Home onboarding banner ───────────────────────────────── */
.home-onboarding {
padding: 0;
}
html:not(.mud-dark) .home-onboarding .mud-alert-message,
html:not(.mud-dark) .home-onboarding .mud-alert-message * {
color: rgba(0, 0, 0, 0.8) !important;
}
html:not(.mud-dark) .home-onboarding .mud-alert-icon svg {
fill: rgba(0, 0, 0, 0.8) !important;
}
/* ── Auth two-column layout ───────────────────────────────── */
.auth-two-col {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 100vh;
position: relative;
overflow: hidden;
}
.auth-two-col::before {
content: '';
position: absolute;
inset: 0;
background-image: url('/images/mesh-bg.svg');
background-size: 1400px 280px;
background-repeat: repeat;
background-position: center top;
filter: invert(1);
opacity: 0.11;
pointer-events: none;
z-index: 2;
mask-image:
linear-gradient(to right, transparent, black 50px, black 50%, transparent 78%),
linear-gradient(to bottom, transparent, black 50px, black calc(100% - 50px), transparent);
mask-composite: intersect;
}
html:not(.mud-dark) .auth-two-col::before {
filter: none;
opacity: 0.14;
}
.auth-brand-panel {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 48px 56px;
position: relative;
background:
linear-gradient(to bottom-right, transparent 55%, rgba(230, 74, 25, 0.12) 100%),
linear-gradient(160deg, #2d2d2d 0%, #1a1a1a 100%);
}
html:not(.mud-dark) .auth-brand-panel {
background:
linear-gradient(to bottom-right, transparent 55%, rgba(230, 74, 25, 0.08) 100%),
linear-gradient(160deg, #ffffff 0%, #f3f4f6 100%);
}
.auth-brand-panel::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 20% 75%, rgba(230, 74, 25, 0.22) 0%, transparent 55%);
pointer-events: none;
z-index: 1;
}
html:not(.mud-dark) .auth-brand-panel::after {
background: radial-gradient(ellipse at 20% 75%, rgba(230, 74, 25, 0.12) 0%, transparent 55%);
}
.auth-brand-panel-content {
position: relative;
z-index: 3;
}
.auth-form-panel {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 48px 56px;
position: relative;
}
.auth-form-panel-content {
position: relative;
z-index: 3;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
}
.auth-brand-name {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-weight: 600 !important;
}
html:not(.mud-dark) .auth-brand-name {
color: #1a1a1a !important;
-webkit-text-fill-color: #1a1a1a !important;
}
.auth-brand-headline {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-weight: 700 !important;
line-height: 1.25 !important;
letter-spacing: -0.5px !important;
max-width: 400px;
}
html:not(.mud-dark) .auth-brand-headline {
color: #1a1a1a !important;
-webkit-text-fill-color: #1a1a1a !important;
}
.auth-brand-feat {
color: rgba(255,255,255,0.75) !important;
-webkit-text-fill-color: rgba(255,255,255,0.75) !important;
}
html:not(.mud-dark) .auth-brand-feat {
color: rgba(0,0,0,0.6) !important;
-webkit-text-fill-color: rgba(0,0,0,0.6) !important;
}
html:not(.mud-dark) .auth-brand-panel .formulize-logo-accent-themed {
fill: #1a1a1a;
}
html:not(.mud-dark) .auth-brand-panel .mud-icon-root[data-icon] {
color: #E64A19;
}
.auth-mobile-header {
display: none;
}
@media (max-width: 900px) {
.auth-two-col {
grid-template-columns: 1fr;
}
.auth-brand-panel {
display: none;
}
.auth-form-panel {
justify-content: center;
padding: 32px 16px;
}
.auth-mobile-header {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
margin-bottom: 16px;
text-align: center;
}
.auth-form-panel-content {
flex-direction: column;
align-items: center;
justify-content: center;
}
}
@media (max-width: 599px) {
.auth-centered {
padding: 32px 16px 32px;
}
}
/* ── Admin native list rows ──────────────────────────────── */
.adm-list-header {
display: flex;
align-items: center;
padding: 6px 12px;
gap: 8px;
background-color: var(--mud-palette-secondary);
color: var(--mud-palette-secondary-text);
font-size: 0.75rem;
font-weight: 600;
border-radius: 4px 4px 0 0;
}
.adm-list-row {
display: flex;
align-items: center;
padding: 8px 12px;
gap: 8px;
border-bottom: 1px solid var(--mud-palette-lines-default);
min-height: 52px;
}
.adm-list-row.adm-clickable { cursor: pointer; }
.adm-list-row.adm-clickable:hover { background-color: var(--mud-palette-action-default-hover); }
.adm-cell-label {
display: none;
font-size: 0.7rem;
color: var(--mud-palette-text-secondary);
margin-bottom: 2px;
font-weight: 600;
}
.adm-col-check { width: 36px; flex-shrink: 0; }
.adm-col-xs { width: 50px; flex-shrink: 0; }
.adm-col-sm { width: 80px; flex-shrink: 0; }
.adm-col-md { width: 130px; flex-shrink: 0; }
.adm-col-lg { width: 175px; flex-shrink: 0; }
.adm-col-xl { width: 210px; flex-shrink: 0; }
.adm-col-flex { flex: 1; min-width: 0; overflow: hidden; }
.adm-col-actions { width: 112px; flex-shrink: 0; display: flex; justify-content: flex-end; align-items: center; gap: 2px; }
/* Mobile-only helper elements (hidden on desktop, shown on ≤599px) */
.adm-mobile-only { display: none; }
.adm-mobile-only-block { display: none; }
@media (max-width: 599px) {
.adm-list-header { display: none; }
.adm-cell-label { display: block; }
.adm-list-row {
flex-wrap: wrap;
align-items: flex-start;
padding: 10px 12px;
gap: 4px 12px;
}
.adm-col-xs, .adm-col-sm, .adm-col-md,
.adm-col-lg, .adm-col-xl { flex-shrink: 1; width: auto; }
.adm-col-flex { width: 100%; flex: none; }
.adm-col-actions { margin-left: auto; }
.adm-hide-mobile { display: none !important; }
.adm-mobile-only { display: inline-flex; align-items: center; gap: 2px; }
.adm-mobile-only-block { display: block; }
.adm-compact-rows .adm-list-header { display: none; }
.adm-compact-rows .adm-list-row {
flex-wrap: nowrap;
align-items: center;
padding: 8px 12px;
gap: 6px;
min-height: 48px;
}
.adm-compact-rows .adm-col-flex { width: auto; flex: 1; min-width: 0; }
.adm-compact-rows .adm-cell-label { display: none; }
}
/* ── Log detail JSON viewer ───────────────────────────────── */
.adm-log-json {
display: block;
background: var(--mud-palette-background);
border: 1px solid var(--mud-palette-lines-default);
border-radius: 4px;
padding: 12px;
font-size: 0.72rem;
font-family: ui-monospace, "Cascadia Code", "Fira Code", monospace;
overflow-x: auto;
white-space: pre;
max-height: 400px;
overflow-y: auto;
line-height: 1.5;
}
/* ── Ticket thread dialog ─────────────────────────────────── */
.ticket-message-preview {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ticket-thread {
padding: 4px 0;
}
.ticket-message {
border-radius: 8px;
padding: 12px 16px;
}
.ticket-message-user {
background: var(--mud-palette-background-grey);
}
.ticket-message-admin {
background: color-mix(in srgb, var(--mud-palette-secondary) 8%, transparent);
border-left: 3px solid var(--mud-palette-secondary);
}
.ticket-message-label {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 6px;
opacity: 0.7;
}
.ticket-message-pending {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 8px;
border: 1px dashed var(--mud-palette-lines-default);
opacity: 0.7;
}
/* ── Scroll-to-top: sit above the sticky action bar ─────────── */
.mud-scroll-to-top {
bottom: 72px !important;
}
/* ── Calculation sticky action bar ────────────────────────── */
.calc-sticky-action {
position: sticky;
bottom: 0;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 10px 24px;
background: var(--mud-palette-surface);
border-top: 1px solid var(--mud-palette-lines-default);
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
z-index: 10;
margin-top: 24px;
}
/* ═══════════════════════════════════════════════════════════════
Mobile overrides ≤ 599px
═══════════════════════════════════════════════════════════════ */
@media (max-width: 599px) {
/* ── Result / Design / Input tables: compact cells ──────────── */
/* Force horizontal scroll — never let the table break layout */
.mud-table-container {
overflow-x: auto !important;
}
/* Tighter padding in every MudTable cell — font-size uses rem so it stays consistent */
.mud-table .mud-table-cell {
font-size: 0.8125rem !important;
padding: 4px 5px !important;
vertical-align: middle !important;
}
/* Header cells: slightly smaller */
.mud-table .mud-table-head .mud-table-cell {
font-size: 0.75rem !important;
padding: 4px 5px !important;
}
/* Align MudText inside MudTable cells and expanded rows with fz-table (0.8125rem) */
.mud-table .mud-table-cell .mud-typography,
.mud-table-row-child .mud-typography {
font-size: 0.8125rem;
}
/* Toolbar above each table: shrink title text */
.mud-toolbar .mud-typography {
font-size: 12px;
}
/* ── Sticky action bar: full-width buttons ──────────────────── */
.calc-sticky-action {
padding: 8px 12px;
gap: 8px;
}
/* Make every direct-child button fill its half of the bar */
.calc-sticky-action > .mud-button-root {
flex: 1;
justify-content: center;
}
/* ── Form inputs: 16px minimum prevents iOS Safari auto-zoom ─── */
/* Global rule: any input below 16px causes iOS to zoom on focus */
input, select, textarea {
font-size: 16px !important;
}
/* Ensure MudBlazor's own font-size rules don't override back down */
.mud-input-root input,
.mud-input-root select,
.mud-input-root textarea {
font-size: 16px !important;
}
/* Comfortable tap target height for all form inputs (min 48px) */
.calc-form-page .mud-input-control {
min-height: 48px;
}
/* Dense inputs inside form grids: relax the height on mobile */
.calc-form-page .mud-input-root.mud-input-dense input {
padding-top: 10px !important;
padding-bottom: 10px !important;
min-height: 44px;
}
/* Labels: readable size without cramping */
.calc-form-page .mud-input-label {
font-size: 14px !important;
}
/* MudSelect value text */
.calc-form-page .mud-select-input {
font-size: 16px !important;
}
/* Tighter card and panel padding — gives fields and tables more horizontal room */
.calc-form-page .mud-card-content {
padding: 12px 10px !important;
}
.calc-form-page .mud-expand-panel-content {
padding: 0 10px 12px !important;
}
/* Warning/error/info chip badges — larger tap target and text on mobile */
.fz-warn-chip.mud-chip {
height: 28px;
font-size: 0.8125rem;
min-width: 72px;
}
.fz-warn-chip.mud-chip .mud-chip-content {
font-size: 0.8125rem;
}
}
/* ── Hide Code Reference column below 480px ────────────────────
Applied to the header and data cells via .col-hide-xs class
in ResultTable.razor */
@media (max-width: 480px) {
.mud-table .col-hide-xs {
display: none !important;
}
}
/* ── Suppress tooltips on touch devices ────────────────────────
MudTooltip has no mouseleave equivalent on touch — once triggered
by a tap the popover stays open during scroll. Hide on any
device that doesn't support hover (i.e. touch screens). */
@media (hover: none) {
.mud-tooltip { display: none !important; }
}
/* ── Policy version badge ───────────────────────────────────────
Monospace pill used in admin table and version history panel. */
.fz-version-badge {
display: inline-block;
background: #e8e8e8;
color: #424242;
padding: 1px 7px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
font-family: monospace;
white-space: nowrap;
letter-spacing: 0.02em;
}
html.mud-dark .fz-version-badge {
background: #424242;
color: #e0e0e0;
}
.fz-version-badge-current {
display: inline-block;
background: #e8e8e8;
color: #424242;
padding: 1px 7px;
border-radius: 10px;
font-size: 0.7rem;
font-weight: 500;
white-space: nowrap;
margin-left: 6px;
}
html.mud-dark .fz-version-badge-current {
background: #424242;
color: #e0e0e0;
}