/* ------------------------------------------------------------------ Brijin design refresh — refined editorial CRM -------------------------------------------------------------------- Hooks into MudBlazor v9 palette CSS variables so the user's primary-colour choices in the Theme Drawer continue to work. Add a class hook in markup; this stylesheet does the heavy lifting. ------------------------------------------------------------------ */ :root { /* Type system ------------------------------------------------ */ --bx-font-display: "Fraunces", "Source Serif 4", Georgia, serif; --bx-font-body: "Montserrat", system-ui, -apple-system, sans-serif; --bx-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Spacing scale (4 / 8 grid) -------------------------------- */ --bx-space-1: 4px; --bx-space-2: 8px; --bx-space-3: 12px; --bx-space-4: 16px; --bx-space-5: 20px; --bx-space-6: 24px; --bx-space-8: 32px; --bx-space-10: 40px; --bx-space-12: 48px; /* Radii -------------------------------------------------------*/ --bx-radius-sm: 6px; --bx-radius-md: 12px; --bx-radius-lg: 18px; --bx-radius-pill: 999px; /* Refined shadow scale --------------------------------------- */ /* hairline + soft drop. Avoids heavy MudBlazor "elevation 25" */ --bx-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03); --bx-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 2px 4px rgba(15, 23, 42, 0.04); --bx-shadow-md: 0 2px 4px rgba(15, 23, 42, 0.05), 0 8px 16px rgba(15, 23, 42, 0.06); --bx-shadow-lg: 0 4px 8px rgba(15, 23, 42, 0.06), 0 16px 32px rgba(15, 23, 42, 0.08); /* Tinted shadows (use palette accent at low alpha) ----------- */ --bx-shadow-tinted: 0 6px 18px rgba(var(--mud-palette-primary-rgb), 0.14); --bx-shadow-tinted-lg: 0 12px 32px rgba(var(--mud-palette-primary-rgb), 0.18); /* Borders / surfaces ---------------------------------------- These derive from the MudBlazor palette vars so they swap automatically when the user toggles dark mode (MudBlazor v9 does not add a class hook — only the palette vars change). */ --bx-border-subtle: color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent); --bx-border-strong: color-mix(in srgb, var(--mud-palette-text-primary) 22%, transparent); --bx-surface-elevated: var(--mud-palette-surface); --bx-surface-base: var(--mud-palette-background); --bx-surface-muted: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent); /* Semantic colour tokens (derived from palette) ------------- */ --bx-positive: var(--mud-palette-success); --bx-negative: var(--mud-palette-error); --bx-info: var(--mud-palette-info); --bx-accent: var(--mud-palette-primary); /* Motion ----------------------------------------------------- */ --bx-ease: cubic-bezier(0.22, 1, 0.36, 1); --bx-duration-fast: 140ms; --bx-duration: 220ms; --bx-duration-slow: 420ms; } /* Dark-mode shadow overrides ------------------------------------ Light shadows (low-alpha slate) are invisible on dark surfaces. Hook is set on by bxSetDarkClass in index.html. */ .bx-dark { --bx-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 1px rgba(0, 0, 0, 0.20); --bx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 4px rgba(0, 0, 0, 0.25); --bx-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 8px 16px rgba(0, 0, 0, 0.30); --bx-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.40), 0 16px 32px rgba(0, 0, 0, 0.32); } /* ------------------------------------------------------------------ Global base — body uses Montserrat already, but tighten kerning ------------------------------------------------------------------ */ body { font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Display utility — for hero numbers, page titles, large stats */ .bx-display { font-family: var(--bx-font-display); font-feature-settings: "ss01", "cv11", "tnum"; font-variation-settings: "opsz" 144, "SOFT" 50; letter-spacing: -0.018em; line-height: 1.05; } .bx-display-tabular { font-family: var(--bx-font-display); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; font-variation-settings: "opsz" 96, "SOFT" 30; letter-spacing: -0.012em; } .bx-eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; font-weight: 600; color: var(--mud-palette-text-secondary); } /* ------------------------------------------------------------------ AppBar refinement ------------------------------------------------------------------ */ .bx-appbar.mud-appbar { background: var(--mud-palette-appbar-background); backdrop-filter: saturate(180%) blur(8px); box-shadow: none !important; border-bottom: 1px solid var(--bx-border-subtle); height: 64px; transition: background var(--bx-duration) var(--bx-ease); } .bx-brand-link { display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none; color: inherit; padding: 4px 10px; border-radius: var(--bx-radius-sm); transition: background var(--bx-duration-fast) var(--bx-ease); } .bx-brand-link:hover { background: rgba(var(--mud-palette-primary-rgb), 0.08); } .bx-brand-mark { font-family: var(--bx-font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; color: var(--mud-palette-primary); line-height: 1; } .bx-brand-version { font-family: var(--bx-font-mono), var(--bx-font-body); font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mud-palette-text-secondary); padding: 2px 6px; border: 1px solid var(--bx-border-subtle); border-radius: var(--bx-radius-pill); line-height: 1; } .bx-appbar-action { transition: background var(--bx-duration-fast) var(--bx-ease), transform var(--bx-duration-fast) var(--bx-ease); } .bx-appbar-action:hover { transform: translateY(-1px); } /* ------------------------------------------------------------------ Drawer / NavMenu refinement ------------------------------------------------------------------ */ .bx-drawer.mud-drawer { box-shadow: var(--bx-shadow-md) !important; border-right: 1px solid var(--bx-border-subtle); background: var(--mud-palette-drawer-background); } .bx-nav-section { display: flex; align-items: center; gap: 10px; padding: 14px 20px 6px; margin-top: 4px; } .bx-nav-section .bx-nav-section-label { font-family: var(--bx-font-body); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--mud-palette-primary); white-space: nowrap; line-height: 1; } .bx-nav-section .bx-nav-section-rule { flex: 1; height: 1px; background: linear-gradient( to right, rgba(var(--mud-palette-primary-rgb), 0.32), transparent ); } /* refined active link — thicker accent stripe, softer fill */ .mud-nav-link.active:not(.mud-nav-link-disabled) { border-right: 3px solid var(--mud-palette-primary) !important; background-color: rgba(var(--mud-palette-primary-rgb), 0.10) !important; color: var(--mud-palette-primary) !important; } .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon { color: var(--mud-palette-primary) !important; } .mud-nav-link { border-radius: 0 var(--bx-radius-sm) var(--bx-radius-sm) 0; margin-right: 8px; transition: background var(--bx-duration-fast) var(--bx-ease), color var(--bx-duration-fast) var(--bx-ease); } .mud-nav-link:hover:not(.active) { background-color: rgba(var(--mud-palette-primary-rgb), 0.05) !important; } /* ------------------------------------------------------------------ Dashboard hero + stat-card system ------------------------------------------------------------------ */ .bx-dashboard { padding: var(--bx-space-6) var(--bx-space-8) var(--bx-space-12); } .bx-dashboard-hero { display: grid; grid-template-columns: 1fr auto; gap: var(--bx-space-8); align-items: end; padding: var(--bx-space-6) 0 var(--bx-space-8); position: relative; } .bx-dashboard-hero::before { content: ""; position: absolute; inset: 0 -10vw 0 -10vw; background: radial-gradient( ellipse 60% 80% at 15% 0%, rgba(var(--mud-palette-primary-rgb), 0.10), transparent 60% ), radial-gradient( ellipse 50% 60% at 85% 0%, rgba(var(--mud-palette-secondary-rgb, 33, 150, 243), 0.08), transparent 60% ); z-index: -1; pointer-events: none; opacity: 0.9; } .bx-dashboard-hero h1 { font-family: var(--bx-font-display); font-variation-settings: "opsz" 144, "SOFT" 80; font-size: clamp(36px, 4.4vw, 56px); font-weight: 500; letter-spacing: -0.025em; line-height: 1; color: var(--mud-palette-primary); margin: 0; } .bx-dashboard-hero .bx-dashboard-subtitle { font-size: 14px; color: var(--mud-palette-text-secondary); margin-top: 8px; max-width: 48ch; } @media (max-width: 900px) { .bx-dashboard-hero { grid-template-columns: 1fr; align-items: start; } } /* Period chip cluster ----------------------------------------- */ .bx-period-cluster { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 6px; border: 1px solid var(--bx-border-subtle); border-radius: var(--bx-radius-pill); background: var(--bx-surface-elevated); box-shadow: var(--bx-shadow-xs); } .bx-period-chip.mud-button-root { border-radius: var(--bx-radius-pill) !important; border: 0 !important; text-transform: none !important; font-weight: 500 !important; letter-spacing: 0 !important; padding: 6px 14px !important; min-width: 0 !important; transition: background var(--bx-duration-fast) var(--bx-ease), color var(--bx-duration-fast) var(--bx-ease); } .bx-period-chip.mud-button-root.mud-button-filled-primary { background: var(--mud-palette-primary) !important; color: var(--mud-palette-primary-text) !important; box-shadow: var(--bx-shadow-tinted) !important; } .bx-period-chip.mud-button-root:not(.mud-button-filled-primary) { background: transparent !important; color: var(--mud-palette-text-primary) !important; } .bx-period-chip.mud-button-root:not(.mud-button-filled-primary):hover { background: rgba(var(--mud-palette-primary-rgb), 0.06) !important; } /* Stat card system -------------------------------------------- */ .bx-stat-card { position: relative; background: var(--bx-surface-elevated); border: 1px solid var(--bx-border-subtle); border-radius: var(--bx-radius-md); padding: var(--bx-space-5) var(--bx-space-6); min-height: 132px; display: flex; flex-direction: column; gap: var(--bx-space-2); box-shadow: var(--bx-shadow-xs); transition: transform var(--bx-duration) var(--bx-ease), box-shadow var(--bx-duration) var(--bx-ease), border-color var(--bx-duration-fast) var(--bx-ease); overflow: hidden; } .bx-stat-card::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient( 90deg, var(--mud-palette-primary), rgba(var(--mud-palette-primary-rgb), 0.15) ); opacity: 0; transition: opacity var(--bx-duration) var(--bx-ease); } .bx-stat-card:hover { transform: translateY(-2px); box-shadow: var(--bx-shadow-md); border-color: rgba(var(--mud-palette-primary-rgb), 0.30); } .bx-stat-card:hover::after { opacity: 1; } .bx-stat-card .bx-stat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .bx-stat-card .bx-stat-label { font-family: var(--bx-font-body); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mud-palette-text-secondary); line-height: 1.3; } .bx-stat-card .bx-stat-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: rgba(var(--mud-palette-primary-rgb), 0.10); color: var(--mud-palette-primary); } .bx-stat-card .bx-stat-value { font-family: var(--bx-font-display); font-variation-settings: "opsz" 96, "SOFT" 30; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum", "lnum"; font-size: clamp(28px, 2.6vw, 36px); font-weight: 500; letter-spacing: -0.018em; line-height: 1; color: var(--mud-palette-text-primary); margin-top: auto; } /* Card variants ---------------------------------------------- */ .bx-stat-card--currency .bx-stat-value { font-variation-settings: "opsz" 96, "SOFT" 0; } .bx-stat-card--positive .bx-stat-icon { background: rgba(46, 160, 67, 0.12); color: rgb(46, 160, 67); } .bx-stat-card--positive .bx-stat-value { color: rgb(46, 160, 67); } .bx-stat-card--negative .bx-stat-icon { background: rgba(248, 81, 73, 0.12); color: rgb(248, 81, 73); } .bx-stat-card--negative .bx-stat-value { color: rgb(248, 81, 73); } .bx-stat-card--info .bx-stat-icon { background: rgba(33, 150, 243, 0.12); color: rgb(33, 150, 243); } .bx-stat-card--info .bx-stat-value { color: rgb(33, 150, 243); } .bx-stat-card--neutral .bx-stat-icon { background: var(--bx-surface-muted); color: var(--mud-palette-text-primary); } /* dark-mode tweaks for stat-card */ .bx-dark .bx-stat-card { background: var(--bx-surface-elevated); border-color: var(--bx-border-subtle); } /* ------------------------------------------------------------------ Card / paper polish ------------------------------------------------------------------ */ .bx-panel { background: var(--bx-surface-elevated); border: 1px solid var(--bx-border-subtle); border-radius: var(--bx-radius-lg); box-shadow: var(--bx-shadow-xs); overflow: hidden; } .bx-panel-header { padding: var(--bx-space-4) var(--bx-space-6); border-bottom: 1px solid var(--bx-border-subtle); display: flex; align-items: baseline; justify-content: space-between; gap: var(--bx-space-4); } .bx-panel-title { font-family: var(--bx-font-display); font-variation-settings: "opsz" 96, "SOFT" 30; font-size: 20px; font-weight: 500; letter-spacing: -0.012em; color: var(--mud-palette-text-primary); line-height: 1.2; } .bx-panel-subtitle { font-size: 12px; color: var(--mud-palette-text-secondary); margin-top: 2px; } .bx-panel-body { padding: var(--bx-space-5) var(--bx-space-6); } /* ------------------------------------------------------------------ Page header — consistent across list/detail pages ------------------------------------------------------------------ */ .bx-page-header { display: flex; align-items: end; justify-content: space-between; gap: var(--bx-space-6); padding: var(--bx-space-6) 0 var(--bx-space-5); } .bx-page-title { font-family: var(--bx-font-display); font-variation-settings: "opsz" 144, "SOFT" 50; font-size: clamp(28px, 3vw, 40px); font-weight: 500; letter-spacing: -0.022em; line-height: 1; color: var(--mud-palette-primary); margin: 0; } .bx-page-subtitle { font-size: 13px; color: var(--mud-palette-text-secondary); margin-top: 6px; } /* ------------------------------------------------------------------ Animation: staggered reveal on initial render ------------------------------------------------------------------ */ @keyframes bx-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .bx-rise { animation: bx-rise var(--bx-duration-slow) var(--bx-ease) both; } .bx-rise:nth-child(1) { animation-delay: 30ms; } .bx-rise:nth-child(2) { animation-delay: 60ms; } .bx-rise:nth-child(3) { animation-delay: 90ms; } .bx-rise:nth-child(4) { animation-delay: 120ms; } .bx-rise:nth-child(5) { animation-delay: 150ms; } .bx-rise:nth-child(6) { animation-delay: 180ms; } .bx-rise:nth-child(7) { animation-delay: 210ms; } .bx-rise:nth-child(8) { animation-delay: 240ms; } .bx-rise:nth-child(9) { animation-delay: 270ms; } .bx-rise:nth-child(10) { animation-delay: 300ms; } @media (prefers-reduced-motion: reduce) { .bx-rise { animation: none; } } /* ------------------------------------------------------------------ Quote dialog / view surfaces ------------------------------------------------------------------ */ .bx-quote-shell { padding: var(--bx-space-2) var(--bx-space-4) var(--bx-space-6); } .bx-quote-hero { text-align: left; padding: var(--bx-space-4) var(--bx-space-2) var(--bx-space-6); border-bottom: 1px solid var(--bx-border-subtle); margin-bottom: var(--bx-space-6); } .bx-quote-hero h2 { font-family: var(--bx-font-display); font-variation-settings: "opsz" 144, "SOFT" 60; font-size: clamp(28px, 3vw, 36px); font-weight: 500; letter-spacing: -0.02em; line-height: 1; color: var(--mud-palette-primary); margin: 0; } .bx-quote-hero p { font-size: 13px; color: var(--mud-palette-text-secondary); margin-top: 8px; max-width: 56ch; } /* Form section card -------------------------------------------- */ .bx-form-card { background: var(--bx-surface-elevated); border: 1px solid var(--bx-border-subtle); border-radius: var(--bx-radius-md); padding: var(--bx-space-6); box-shadow: var(--bx-shadow-xs); height: 100%; display: flex; flex-direction: column; gap: var(--bx-space-3); } .bx-form-card-title { display: inline-flex; align-items: center; gap: 8px; font-family: var(--bx-font-display); font-variation-settings: "opsz" 96, "SOFT" 30; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; color: var(--mud-palette-primary); margin-bottom: var(--bx-space-2); } .bx-form-card-title .bx-form-card-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: rgba(var(--mud-palette-primary-rgb), 0.10); color: var(--mud-palette-primary); } /* Sub-section block (Additional users / facilities, Year breakdowns) */ .bx-form-subsection { background: var(--bx-surface-muted); border: 1px solid var(--bx-border-subtle); border-radius: var(--bx-radius-sm); padding: var(--bx-space-4); display: flex; flex-direction: column; gap: var(--bx-space-3); } .bx-form-subsection-title { font-family: var(--bx-font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--mud-palette-primary); line-height: 1; } /* Quote summary breakdown rows ------------------------------- */ .bx-summary-section { border: 1px solid var(--bx-border-subtle); border-radius: var(--bx-radius-sm); padding: var(--bx-space-4) var(--bx-space-5); background: var(--bx-surface-elevated); margin-bottom: var(--bx-space-3); } .bx-summary-heading { font-family: var(--bx-font-display); font-variation-settings: "opsz" 96, "SOFT" 30; font-size: 16px; font-weight: 500; color: var(--mud-palette-primary); margin: 0 0 var(--bx-space-3) 0; letter-spacing: -0.005em; } .bx-summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bx-space-3); padding: 6px 0; font-size: 13px; } .bx-summary-row span:first-child { color: var(--mud-palette-text-secondary); line-height: 1.4; } .bx-summary-row span:last-child { font-variant-numeric: tabular-nums; color: var(--mud-palette-text-primary); font-weight: 500; white-space: nowrap; } .bx-summary-row--discount span:last-child { color: var(--mud-palette-error); } .bx-summary-row--total { border-top: 1px solid var(--bx-border-subtle); padding-top: var(--bx-space-3); margin-top: var(--bx-space-2); } .bx-summary-row--total span:first-child { color: var(--mud-palette-primary); font-weight: 600; } .bx-summary-row--total span:last-child { font-family: var(--bx-font-display); font-variation-settings: "opsz" 96, "SOFT" 30; font-size: 17px; color: var(--mud-palette-primary); font-weight: 500; letter-spacing: -0.005em; } /* The big total contract value bar --------------------------- */ .bx-quote-total-bar { position: relative; overflow: hidden; background: linear-gradient( 135deg, var(--mud-palette-primary), rgba(var(--mud-palette-primary-rgb), 0.78) ); color: var(--mud-palette-primary-text); border-radius: var(--bx-radius-md); padding: var(--bx-space-5) var(--bx-space-6); margin: var(--bx-space-4) 0; box-shadow: var(--bx-shadow-tinted-lg); display: flex; align-items: baseline; justify-content: space-between; gap: var(--bx-space-4); } .bx-quote-total-bar::before { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse 60% 100% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 60% ); pointer-events: none; } .bx-quote-total-bar > * { position: relative; z-index: 1; } .bx-quote-total-bar .bx-total-label { font-family: var(--bx-font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; opacity: 0.92; } .bx-quote-total-bar .bx-total-figure { font-family: var(--bx-font-display); font-variation-settings: "opsz" 144, "SOFT" 30; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; font-size: clamp(28px, 3vw, 38px); font-weight: 500; letter-spacing: -0.018em; line-height: 1.1; } /* Quote summary side panel header */ .bx-quote-summary { background: var(--bx-surface-elevated); border: 1px solid var(--bx-border-subtle); border-radius: var(--bx-radius-md); padding: var(--bx-space-6); box-shadow: var(--bx-shadow-xs); height: 100%; } /* ViewQuote overview cards (replace the heavy mud-theme-* gradients) */ .bx-overview-card { background: var(--bx-surface-elevated); border: 1px solid var(--bx-border-subtle); border-radius: var(--bx-radius-md); padding: var(--bx-space-4) var(--bx-space-5); box-shadow: var(--bx-shadow-xs); display: flex; align-items: center; gap: var(--bx-space-4); min-height: 96px; transition: transform var(--bx-duration) var(--bx-ease), box-shadow var(--bx-duration) var(--bx-ease), border-color var(--bx-duration) var(--bx-ease); } .bx-overview-card:hover { transform: translateY(-2px); box-shadow: var(--bx-shadow-md); border-color: rgba(var(--mud-palette-primary-rgb), 0.30); } .bx-overview-card .bx-overview-icon { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 12px; background: rgba(var(--mud-palette-primary-rgb), 0.10); color: var(--mud-palette-primary); } .bx-overview-card--success .bx-overview-icon { background: rgba(46, 160, 67, 0.12); color: rgb(46, 160, 67); } .bx-overview-card--info .bx-overview-icon { background: rgba(33, 150, 243, 0.12); color: rgb(33, 150, 243); } .bx-overview-card--warning .bx-overview-icon { background: rgba(255, 153, 0, 0.14); color: rgb(204, 122, 0); } .bx-overview-card .bx-overview-content { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .bx-overview-card .bx-overview-label { font-family: var(--bx-font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mud-palette-text-secondary); line-height: 1.2; } .bx-overview-card .bx-overview-value { font-family: var(--bx-font-display); font-variation-settings: "opsz" 96, "SOFT" 30; font-size: 18px; font-weight: 500; color: var(--mud-palette-text-primary); letter-spacing: -0.008em; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Page header with eyebrow, big title, subtitle ------------ */ .bx-page-eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; font-weight: 700; color: var(--mud-palette-primary); line-height: 1; } /* List page header with action area on the right ---------- */ .bx-list-header { display: flex; align-items: end; justify-content: space-between; gap: var(--bx-space-6); flex-wrap: wrap; padding: var(--bx-space-5) 0 var(--bx-space-4); border-bottom: 1px solid var(--bx-border-subtle); margin-bottom: var(--bx-space-5); } .bx-list-header h1 { font-family: var(--bx-font-display); font-variation-settings: "opsz" 144, "SOFT" 50; font-size: clamp(24px, 2.6vw, 32px); font-weight: 500; color: var(--mud-palette-primary); letter-spacing: -0.02em; line-height: 1; margin: 4px 0 0 0; } .bx-list-header .bx-list-subtitle { font-size: 13px; color: var(--mud-palette-text-secondary); margin-top: 6px; max-width: 56ch; } /* ------------------------------------------------------------------ ViewQuote — metric tiles, tabs, section panels ------------------------------------------------------------------ */ .bx-metric-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bx-space-4); padding: var(--bx-space-5) var(--bx-space-6); background: var(--bx-surface-elevated); border: 1px solid var(--bx-border-subtle); border-radius: var(--bx-radius-md); box-shadow: var(--bx-shadow-xs); margin-bottom: var(--bx-space-5); } @media (max-width: 700px) { .bx-metric-row { grid-template-columns: 1fr; } } .bx-metric-row .bx-metric-row-title { grid-column: 1 / -1; font-family: var(--bx-font-display); font-variation-settings: "opsz" 96, "SOFT" 30; font-size: 18px; font-weight: 500; color: var(--mud-palette-primary); letter-spacing: -0.01em; margin: 0 0 var(--bx-space-1) 0; } .bx-metric-tile { display: flex; flex-direction: column; gap: 6px; padding: var(--bx-space-4); border-radius: var(--bx-radius-sm); background: var(--bx-surface-muted); border: 1px solid var(--bx-border-subtle); } .bx-metric-tile .bx-metric-tile-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.10em; color: var(--mud-palette-text-secondary); line-height: 1; } .bx-metric-tile .bx-metric-tile-value { font-family: var(--bx-font-display); font-variation-settings: "opsz" 96, "SOFT" 30; font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 500; letter-spacing: -0.012em; line-height: 1.1; color: var(--mud-palette-text-primary); } /* Refined MudTabs strip ------------------------------------- */ .bx-tabs.mud-tabs .mud-tabs-toolbar { background: var(--bx-surface-elevated) !important; border: 1px solid var(--bx-border-subtle); border-radius: var(--bx-radius-md); box-shadow: var(--bx-shadow-xs); padding: 4px; color: var(--mud-palette-text-primary) !important; margin-bottom: var(--bx-space-4); } .bx-tabs.mud-tabs .mud-tab { color: var(--mud-palette-text-secondary) !important; text-transform: none !important; font-weight: 500 !important; letter-spacing: 0 !important; border-radius: var(--bx-radius-sm) !important; padding: 8px 16px !important; min-height: 40px !important; min-width: 0 !important; } .bx-tabs.mud-tabs .mud-tab.mud-tab-active { color: var(--mud-palette-primary) !important; background: rgba(var(--mud-palette-primary-rgb), 0.08); } .bx-tabs.mud-tabs .mud-tab-slider { display: none !important; } .bx-tabs.mud-tabs .mud-tabs-panels { background: transparent !important; box-shadow: none !important; padding: 0 !important; } /* Section panel — replaces colored MudCardHeader patterns --- */ .bx-section-panel { background: var(--bx-surface-elevated); border: 1px solid var(--bx-border-subtle); border-radius: var(--bx-radius-md); box-shadow: var(--bx-shadow-xs); overflow: hidden; margin-bottom: var(--bx-space-4); } .bx-section-panel-header { display: flex; align-items: center; justify-content: space-between; gap: var(--bx-space-4); padding: var(--bx-space-4) var(--bx-space-6); border-bottom: 1px solid var(--bx-border-subtle); } .bx-section-panel-heading { display: inline-flex; align-items: center; gap: 10px; font-family: var(--bx-font-display); font-variation-settings: "opsz" 96, "SOFT" 30; font-size: 18px; font-weight: 500; color: var(--mud-palette-primary); letter-spacing: -0.008em; line-height: 1.2; } .bx-section-panel-heading .bx-section-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: rgba(var(--mud-palette-primary-rgb), 0.12); color: var(--mud-palette-primary); } .bx-section-panel-subhead { font-size: 12px; color: var(--mud-palette-text-secondary); margin-top: 2px; } .bx-section-panel-body { padding: var(--bx-space-5) var(--bx-space-6); } /* Info row (Label + value) used in Client Info / Company Info */ .bx-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--bx-space-4) var(--bx-space-6); } .bx-info-row { display: flex; flex-direction: column; gap: 2px; } .bx-info-row .bx-info-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mud-palette-text-secondary); } .bx-info-row .bx-info-value { font-size: 14px; color: var(--mud-palette-text-primary); font-weight: 500; word-break: break-word; } /* Summary tiles for the "Quote Summary" panel ------------- */ .bx-summary-tile { background: var(--bx-surface-muted); border: 1px solid var(--bx-border-subtle); border-radius: var(--bx-radius-sm); padding: var(--bx-space-4) var(--bx-space-5); display: flex; flex-direction: column; gap: 6px; height: 100%; } .bx-summary-tile .bx-summary-tile-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mud-palette-text-secondary); } .bx-summary-tile .bx-summary-tile-value { font-family: var(--bx-font-display); font-variation-settings: "opsz" 96, "SOFT" 30; font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 500; color: var(--mud-palette-primary); letter-spacing: -0.01em; line-height: 1.15; } .bx-summary-tile .bx-summary-tile-meta { font-size: 12px; color: var(--mud-palette-text-secondary); } .bx-summary-tile .bx-summary-tile-positive { color: rgb(46, 160, 67); font-size: 12px; font-weight: 500; } /* ------------------------------------------------------------------ Dashboard list panels (Top deals, Tasks, Activities, Comments) ------------------------------------------------------------------ */ /* Quieter empty state ------------------------------------------- */ .bx-empty-state { padding: var(--bx-space-6) var(--bx-space-6); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; min-height: 180px; color: var(--mud-palette-text-secondary); } .bx-empty-state .bx-empty-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: rgba(var(--mud-palette-primary-rgb), 0.08); color: var(--mud-palette-primary); margin-bottom: 4px; } .bx-empty-state .bx-empty-title { font-family: var(--bx-font-display); font-variation-settings: "opsz" 96, "SOFT" 30; font-size: 16px; font-weight: 500; color: var(--mud-palette-text-primary); letter-spacing: -0.005em; line-height: 1.2; } .bx-empty-state .bx-empty-body { font-size: 12px; color: var(--mud-palette-text-secondary); max-width: 32ch; line-height: 1.45; } /* Compact feed row --------------------------------------------- */ .bx-feed { display: flex; flex-direction: column; gap: 0; padding: 0; margin: 0; } .bx-feed-row { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 12px var(--bx-space-1) 12px 0; border-bottom: 1px solid var(--bx-border-subtle); align-items: start; } .bx-feed-row:last-child { border-bottom: 0; } .bx-feed-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--mud-palette-primary-rgb), 0.12); color: var(--mud-palette-primary); font-family: var(--bx-font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; flex: 0 0 36px; } .bx-feed-avatar--neutral { background: var(--bx-surface-muted); color: var(--mud-palette-text-secondary); } .bx-feed-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .bx-feed-headline { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .bx-feed-headline-name { font-family: var(--bx-font-body); font-size: 13px; font-weight: 600; color: var(--mud-palette-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bx-feed-headline-meta { font-family: var(--bx-font-mono), var(--bx-font-body); font-size: 11px; font-weight: 500; color: var(--mud-palette-text-secondary); white-space: nowrap; flex: 0 0 auto; } .bx-feed-body-text { font-size: 13px; color: var(--mud-palette-text-primary); line-height: 1.45; word-break: break-word; overflow-wrap: anywhere; } .bx-feed-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; font-size: 11px; color: var(--mud-palette-text-secondary); } .bx-feed-meta-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--bx-radius-pill); background: var(--bx-surface-muted); color: var(--mud-palette-text-secondary); font-size: 11px; font-weight: 500; line-height: 1.4; } .bx-feed-meta-tag--positive { background: rgba(46, 160, 67, 0.12); color: rgb(34, 121, 51); } .bx-feed-meta-tag--negative { background: rgba(248, 81, 73, 0.14); color: rgb(184, 51, 47); } .bx-feed-meta-tag--warning { background: rgba(217, 119, 6, 0.14); color: rgb(146, 78, 1); } .bx-feed-meta-tag--info { background: rgba(33, 150, 243, 0.12); color: rgb(13, 71, 161); } /* Top-deals row variant: compact value + progress bar */ .bx-feed-row--deal { grid-template-columns: 36px 1fr; } .bx-feed-deal-headline { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .bx-feed-deal-company { font-size: 13px; font-weight: 600; color: var(--mud-palette-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bx-feed-deal-value { font-family: var(--bx-font-display); font-variation-settings: "opsz" 96, "SOFT" 30; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 500; color: var(--mud-palette-primary); white-space: nowrap; } .bx-feed-deal-stage { font-size: 12px; color: var(--mud-palette-text-secondary); } .bx-feed-deal-progress { margin-top: 4px; height: 4px; width: 100%; background: var(--bx-surface-muted); border-radius: var(--bx-radius-pill); overflow: hidden; position: relative; } .bx-feed-deal-progress::after { content: ""; position: absolute; inset: 0; width: var(--bx-progress, 0%); background: linear-gradient(90deg, var(--mud-palette-primary), rgba(var(--mud-palette-primary-rgb), 0.7)); border-radius: inherit; transition: width var(--bx-duration) var(--bx-ease); } /* Task row variant — left accent stripe by priority */ .bx-feed-row--task { grid-template-columns: 4px 36px 1fr; align-items: stretch; padding-left: 0; padding-right: 4px; } .bx-feed-row--task .bx-feed-task-stripe { width: 3px; border-radius: 2px; background: var(--mud-palette-text-secondary); margin: 4px 0; } .bx-feed-row--task[data-priority="High"] .bx-feed-task-stripe { background: rgb(248, 81, 73); } .bx-feed-row--task[data-priority="Medium"] .bx-feed-task-stripe { background: rgb(217, 119, 6); } .bx-feed-row--task[data-priority="Low"] .bx-feed-task-stripe { background: rgb(46, 160, 67); } .bx-feed-row--task[data-overdue="true"] { background: rgba(248, 81, 73, 0.04); } /* ------------------------------------------------------------------ Dark-mode adjustments for the editorial refresh -------------------------------------------------------------------- Most bx-* primitives derive from MudBlazor palette tokens and already adapt. The colours below were chosen at light-mode contrast ratios and need lighter variants on dark surfaces. ------------------------------------------------------------------ */ /* Feed meta-tag pills — light text on tinted background */ .bx-dark .bx-feed-meta-tag--positive { background: rgba(46, 160, 67, 0.18); color: rgb(134, 239, 172); } .bx-dark .bx-feed-meta-tag--negative { background: rgba(248, 81, 73, 0.20); color: rgb(252, 165, 165); } .bx-dark .bx-feed-meta-tag--warning { background: rgba(217, 119, 6, 0.22); color: rgb(252, 211, 77); } .bx-dark .bx-feed-meta-tag--info { background: rgba(33, 150, 243, 0.20); color: rgb(147, 197, 253); } /* Overview-card warning icon — amber needs lifting on dark surface */ .bx-dark .bx-overview-card--warning .bx-overview-icon { background: rgba(255, 153, 0, 0.20); color: rgb(252, 211, 77); } /* Active nav-link tint reads weakly at 0.10 alpha on dark drawer */ .bx-dark .mud-nav-link.active:not(.mud-nav-link-disabled) { background-color: rgba(var(--mud-palette-primary-rgb), 0.18) !important; } /* Stat-card tinted icon backgrounds need a slight lift on dark */ .bx-dark .bx-stat-card--positive .bx-stat-icon { background: rgba(46, 160, 67, 0.20); } .bx-dark .bx-stat-card--negative .bx-stat-icon { background: rgba(248, 81, 73, 0.20); } .bx-dark .bx-stat-card--info .bx-stat-icon { background: rgba(33, 150, 243, 0.20); } /* ApexCharts tooltips render with a light-mode CSS class regardless of the Theme enum we set — override directly so chart tooltips read on dark backgrounds. Also covers the x/y axis crosshair tooltips. */ .bx-dark .apexcharts-tooltip, .bx-dark .apexcharts-tooltip.apexcharts-theme-light, .bx-dark .apexcharts-tooltip.apexcharts-theme-dark { background: var(--mud-palette-surface) !important; color: var(--mud-palette-text-primary) !important; border: 1px solid var(--bx-border-subtle) !important; box-shadow: var(--bx-shadow-md) !important; } .bx-dark .apexcharts-tooltip-title, .bx-dark .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title, .bx-dark .apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title { background: rgba(255, 255, 255, 0.04) !important; border-bottom: 1px solid var(--bx-border-subtle) !important; color: var(--mud-palette-text-primary) !important; } .bx-dark .apexcharts-xaxistooltip, .bx-dark .apexcharts-yaxistooltip { background: var(--mud-palette-surface) !important; color: var(--mud-palette-text-primary) !important; border-color: var(--bx-border-subtle) !important; } .bx-dark .apexcharts-xaxistooltip::before, .bx-dark .apexcharts-xaxistooltip::after, .bx-dark .apexcharts-yaxistooltip::before, .bx-dark .apexcharts-yaxistooltip::after { border-color: transparent !important; } /* ------------------------------------------------------------------ Dashboard grid + widget chrome ------------------------------------------------------------------ */ /* Dashboard canvas — tinted surface so white widget cards lift off the page. */ .dashboard-canvas { background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, transparent); border: 1px solid var(--bx-border-subtle); border-radius: var(--bx-radius-md); padding: 12px; } .bx-dark .dashboard-canvas { background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent); } /* Edit mode: visible 12-column grid + horizontal row guides on the canvas. */ .dashboard-canvas--editing { background-image: repeating-linear-gradient( to right, transparent 0, transparent calc((100% / 12) - 1px), color-mix(in srgb, var(--mud-palette-primary) 18%, transparent) calc((100% / 12) - 1px), color-mix(in srgb, var(--mud-palette-primary) 18%, transparent) calc(100% / 12) ), repeating-linear-gradient( to bottom, transparent 0, transparent 87px, color-mix(in srgb, var(--mud-palette-primary) 10%, transparent) 87px, color-mix(in srgb, var(--mud-palette-primary) 10%, transparent) 88px ), color-mix(in srgb, var(--mud-palette-text-primary) 4%, transparent); } .grid-stack { background: transparent; } .grid-stack > .grid-stack-item > .grid-stack-item-content { inset: 0; overflow: visible; } .widget-host { position: relative; height: 100%; border-radius: var(--bx-radius-md); border: 1px solid var(--bx-border-subtle); background: var(--mud-palette-surface); box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; overflow: hidden; } .widget-host::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--mud-palette-primary); opacity: 0.85; } .widget-host[data-category="Card"]::before { background: var(--mud-palette-primary); } .widget-host[data-category="Bar chart"]::before { background: var(--mud-palette-info); } .widget-host[data-category="Donut chart"]::before { background: var(--mud-palette-warning); } .widget-host[data-category="Trend chart"]::before { background: var(--mud-palette-success); } .widget-host[data-category="Funnel"]::before { background: var(--mud-palette-secondary); } .widget-host[data-category="List"]::before { background: var(--mud-palette-error); } .widget-host[data-category="Panel"]::before { background: var(--mud-palette-tertiary); } .widget-host:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10), 0 2px 4px rgba(15, 23, 42, 0.06); border-color: color-mix(in srgb, var(--mud-palette-primary) 35%, var(--bx-border-subtle)); } .bx-dark .widget-host { background: var(--mud-palette-surface); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.36), 0 1px 2px rgba(0, 0, 0, 0.20); } .bx-dark .widget-host:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.42); } .widget-host .widget-header { padding-top: 4px; } .widget-host .widget-drag-handle { user-select: none; border-radius: var(--bx-radius-sm); padding: 2px 4px; transition: background-color 120ms ease; } .dashboard-grid-readonly .widget-drag-handle { cursor: default !important; } .dashboard-grid-readonly .widget-drag-handle .widget-drag-icon { display: none; } .grid-stack:not(.dashboard-grid-readonly) .widget-drag-handle { cursor: grab; } .grid-stack:not(.dashboard-grid-readonly) .widget-drag-handle:hover { background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent); } .grid-stack-item.ui-draggable-dragging .widget-host, .grid-stack-item.grid-stack-item-moving .widget-host { transform: scale(1.01); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); cursor: grabbing; } .grid-stack > .grid-stack-placeholder > .placeholder-content { border: 2px dashed color-mix(in srgb, var(--mud-palette-primary) 55%, transparent); background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent); border-radius: var(--bx-radius-md); inset: 4px; } .dashboard-edit-banner { border-radius: var(--bx-radius-md); background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface)); border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 25%, var(--bx-border-subtle)); padding: 10px 16px; margin-bottom: 12px; display: flex; align-items: center; gap: 12px; } .dashboard-toolbar { border-radius: var(--bx-radius-md); border: 1px solid var(--bx-border-subtle); background: var(--mud-palette-surface); padding: var(--bx-space-3) var(--bx-space-4); } .kpi-value { font-feature-settings: "tnum" 1, "lnum" 1; letter-spacing: -0.01em; font-weight: 700; } .kpi-delta-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--bx-radius-pill); font-size: 0.75rem; font-weight: 600; line-height: 1.4; } .kpi-delta-pill.kpi-delta-up { background: color-mix(in srgb, var(--mud-palette-success) 15%, transparent); color: var(--mud-palette-success); } .kpi-delta-pill.kpi-delta-down { background: color-mix(in srgb, var(--mud-palette-error) 15%, transparent); color: var(--mud-palette-error); } .widget-skeleton { width: 100%; height: 100%; min-height: 60px; border-radius: var(--bx-radius-sm); background: linear-gradient(90deg, color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent) 0%, color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent) 50%, color-mix(in srgb, var(--mud-palette-text-primary) 6%, transparent) 100%); background-size: 200% 100%; animation: bx-skeleton-shimmer 1.4s ease-in-out infinite; } @keyframes bx-skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Catalog dialog cards — clearer shape grouping + hover affordance */ .widget-catalog-card { border-radius: var(--bx-radius-md); transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease; min-height: 180px; } .widget-catalog-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10); border-color: color-mix(in srgb, var(--mud-palette-primary) 35%, var(--bx-border-subtle)); } .widget-catalog-card--selected, .widget-catalog-card--selected:hover { border-color: var(--mud-palette-primary) !important; box-shadow: 0 0 0 2px var(--mud-palette-primary) inset, 0 8px 20px rgba(15, 23, 42, 0.10); background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface)); } .widget-catalog-card--disabled { cursor: not-allowed; opacity: 0.55; background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, transparent); } .widget-catalog-card--disabled:hover { transform: none; box-shadow: none; border-color: var(--bx-border-subtle); } /* Newly-added widget pulse — fires once when a widget enters the grid in edit mode */ @keyframes bx-widget-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mud-palette-primary) 60%, transparent); } 70% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--mud-palette-primary) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mud-palette-primary) 0%, transparent); } } .grid-stack-item.widget-just-added .widget-host { animation: bx-widget-pulse 1.6s ease-out 2; border-color: var(--mud-palette-primary); } /* ------------------------------------------------------------------ Mobile / responsive layout for the dashboard ------------------------------------------------------------------ */ /* Tablet & below: tighter canvas padding, larger touch targets, fewer columns. */ @media (max-width: 1100px) { .dashboard-canvas { padding: 8px; } .dashboard-toolbar { padding: var(--bx-space-2) var(--bx-space-3); } .widget-host { border-radius: var(--bx-radius-sm); } } /* Phone: GridStack collapses to 1 column via columnOpts; matching CSS adjustments. */ @media (max-width: 700px) { .dashboard-canvas { padding: 4px; border-radius: var(--bx-radius-sm); } /* Toolbar items each take a full row on phones — no more cramped wrapping. */ .dashboard-toolbar > div { flex-direction: column; align-items: stretch; gap: 8px; } .dashboard-toolbar .mud-input-control, .dashboard-toolbar .mud-select, .dashboard-toolbar .mud-picker { min-width: 0 !important; width: 100%; } /* Switches stay horizontal but shrink the label */ .dashboard-toolbar .mud-switch { margin: 0; } /* Header (title + Edit/Add buttons) stacks. */ .dashboard-canvas + .dashboard-edit-banner, .dashboard-edit-banner { flex-wrap: wrap; gap: 8px; } /* KPI value scales down so it doesn't overflow a single-column card. */ .kpi-value { font-size: 1.5rem !important; } /* Disable the edit-mode grid overlay on phones — the column collapse makes it visual noise. Drag/drop is still possible but rare on touch. */ .dashboard-canvas--editing { background-image: none; } /* Drag handle is barely useful on touch — make the whole header act as one. */ .widget-host .widget-drag-handle { padding: 4px 8px; } /* Catalog dialog cards full-width on phones */ .widget-catalog-card { min-height: 0; } } /* Very narrow (≤ 420px): aggressive trim. */ @media (max-width: 420px) { .widget-host { padding: 8px !important; } .kpi-value { font-size: 1.25rem !important; } } /* Canvas designer (Stage 4) ── three-pane visual builder */ .bx-canvas-designer { display: flex; flex-direction: column; min-height: calc(100vh - 64px); background: #f8fafc; } .bx-canvas-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px; background: #ffffff; border-bottom: 1px solid #e2e8f0; position: sticky; top: 0; z-index: 10; } .bx-canvas-bar-crumbs { display: flex; align-items: center; gap: 8px; } .bx-canvas-bar-actions { display: flex; align-items: center; gap: 8px; } .bx-canvas-saved { font-size: 12px; color: #64748b; margin-right: 8px; } .bx-canvas-status-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-left: 8px; } .bx-canvas-status-pill--draft { background: #f1f5f9; color: #475569; } .bx-canvas-status-pill--active { background: #dcfce7; color: #166534; } .bx-canvas-banner { display: flex; gap: 12px; padding: 12px 24px; background: #fef3c7; color: #78350f; border-bottom: 1px solid #fde68a; } .bx-canvas-banner--error { background: #fee2e2; color: #991b1b; border-bottom-color: #fecaca; } .bx-canvas-banner-icon { margin-top: 2px; } .bx-canvas-banner-body { display: flex; flex-direction: column; gap: 4px; flex: 1; } .bx-canvas-banner-list { display: flex; flex-wrap: wrap; gap: 6px; } .bx-canvas-banner-chip { background: rgba(0,0,0,0.05); padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; } .bx-canvas-banner-hint { font-size: 12px; opacity: 0.85; } .bx-canvas-grid { display: grid; grid-template-columns: 280px 1fr 320px; flex: 1; min-height: 0; } .bx-canvas-left, .bx-canvas-right { background: #ffffff; border-right: 1px solid #e2e8f0; overflow-y: auto; padding: 12px; } .bx-canvas-right { border-right: none; border-left: 1px solid #e2e8f0; } .bx-canvas-centre { background: #f8fafc; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; } .bx-canvas-tree-wrap { background: #ffffff; border: 1px dashed #cbd5e1; border-radius: 8px; padding: 16px; flex: 1; } .bx-canvas-tree { list-style: none; padding: 0; margin: 0; } .bx-canvas-tree-item { margin-bottom: 4px; } .bx-canvas-tree-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; transition: background 100ms; } .bx-canvas-tree-row:hover { background: #f1f5f9; } .bx-canvas-tree-item.is-selected > .bx-canvas-tree-row { background: #dbeafe; } .bx-canvas-tree-label { font-size: 13px; color: #1e293b; } .bx-canvas-tree-spacer { flex: 1; } .bx-canvas-tree-action { background: transparent; border: 1px solid transparent; cursor: pointer; padding: 2px; border-radius: 4px; color: #64748b; } .bx-canvas-tree-action:hover:not(:disabled) { background: #f1f5f9; color: #1e293b; } .bx-canvas-tree-action:disabled { opacity: 0.3; cursor: not-allowed; } .bx-canvas-tree-action--danger:hover:not(:disabled) { background: #fee2e2; color: #991b1b; } .bx-canvas-tree-children { padding-left: 24px; border-left: 2px solid #e2e8f0; margin-left: 12px; } .bx-canvas-tree-empty { color: #64748b; font-style: italic; padding: 24px; text-align: center; } .bx-canvas-palette { display: flex; flex-direction: column; gap: 4px; } .bx-canvas-palette-hint { font-size: 12px; color: #64748b; padding: 8px 4px; line-height: 1.4; } .bx-canvas-palette-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 6px; cursor: pointer; font-size: 13px; color: #1e293b; text-align: left; transition: all 100ms; } .bx-canvas-palette-item:hover { background: #f1f5f9; border-color: #94a3b8; } /* Zoho-style Data tab: search bar + collapsible groups + clean field cards. */ .bx-canvas-fields { display: flex; flex-direction: column; gap: 12px; } .bx-canvas-fields-search { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 6px; } .bx-canvas-fields-search:focus-within { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.1); } .bx-canvas-fields-search-icon { color: #94a3b8; } .bx-canvas-fields-search-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 13px; padding: 4px 0; } .bx-canvas-fields-group { display: flex; flex-direction: column; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; } .bx-canvas-fields-grouphead { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: #f8fafc; border: none; border-bottom: 1px solid transparent; cursor: pointer; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #475569; letter-spacing: 0.06em; text-align: left; } .bx-canvas-fields-grouphead:hover { background: #f1f5f9; } .bx-canvas-fields-mandatory-icon { color: #dc2626; } .bx-canvas-fields-groupcount { margin-left: auto; padding: 1px 8px; background: #e2e8f0; border-radius: 999px; font-size: 10px; color: #64748b; font-weight: 600; } .bx-canvas-fields-groupbody { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-top: 1px solid #e2e8f0; } .bx-canvas-fields-card { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 6px; cursor: pointer; font-size: 13px; color: #1e293b; text-align: left; transition: all 100ms; } .bx-canvas-fields-card:hover { background: #f1f5f9; border-color: #94a3b8; } .bx-canvas-fields-dot { width: 8px; height: 8px; border-radius: 50%; background: #dc2626; flex-shrink: 0; } .bx-canvas-fields-card.is-bound .bx-canvas-fields-dot { background: #16a34a; } .bx-canvas-fields-label { flex: 1; } .bx-canvas-quick-actions { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; border-top: 1px dashed #e2e8f0; margin-top: 4px; } .bx-canvas-quick-action { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; background: #f1f5f9; border: 1px dashed #cbd5e1; border-radius: 6px; cursor: pointer; font-size: 12px; color: #475569; text-align: left; } .bx-canvas-quick-action:hover { background: #ffffff; border-color: #94a3b8; color: #1e293b; } /* Collapsible property groups (Zoho-style per-part styling — PricingTable etc.) */ .bx-canvas-props-group { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; margin-bottom: 8px; } .bx-canvas-props-group > summary { list-style: none; cursor: pointer; padding: 8px 12px; display: flex; align-items: center; gap: 6px; background: #f8fafc; font-size: 12px; font-weight: 600; color: #1d4ed8; user-select: none; } .bx-canvas-props-group > summary::-webkit-details-marker { display: none; } .bx-canvas-props-group > summary::before { content: "\25BE"; font-size: 10px; color: #1d4ed8; margin-right: 2px; transition: transform 100ms; } .bx-canvas-props-group:not([open]) > summary::before { transform: rotate(-90deg); display: inline-block; } .bx-canvas-props-group > summary:hover { background: #f1f5f9; } .bx-canvas-props-groupbody { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-top: 1px solid #e2e8f0; } .bx-canvas-gallery { display: flex; flex-direction: column; gap: 4px; } .bx-canvas-gallery-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 6px; cursor: pointer; font-size: 13px; text-align: left; transition: all 100ms; } .bx-canvas-gallery-item:hover { background: #f1f5f9; border-color: #94a3b8; } .bx-canvas-props { display: flex; flex-direction: column; gap: 12px; } .bx-canvas-props-head { font-weight: 700; font-size: 14px; color: #1e293b; padding-bottom: 8px; border-bottom: 1px solid #e2e8f0; } .bx-canvas-props-field { display: flex; flex-direction: column; gap: 4px; } .bx-canvas-props-key { font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; } .bx-canvas-props-input { padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 13px; background: #ffffff; } .bx-canvas-props-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.1); } .bx-canvas-props-textarea { padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 13px; font-family: inherit; resize: vertical; } .bx-canvas-preview-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .bx-canvas-preview-iframe { flex: 1; width: 100%; min-height: 480px; border: 1px solid #e2e8f0; border-radius: 8px; background: #ffffff; } .bx-canvas-preview-iframe.is-hidden { display: none; } .bx-canvas-preview-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 24px; color: #64748b; gap: 12px; flex: 1; min-height: 320px; border: 1px dashed #cbd5e1; border-radius: 8px; background: #ffffff; } .bx-canvas-preview-empty p { margin: 0; font-size: 14px; } .bx-canvas-outline { margin-top: 16px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; } .bx-canvas-outline > summary { list-style: none; cursor: pointer; padding: 10px 14px; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; color: #475569; user-select: none; } .bx-canvas-outline > summary::-webkit-details-marker { display: none; } .bx-canvas-outline > summary:hover { background: #f8fafc; } .bx-canvas-outline-count { margin-left: auto; font-weight: 400; color: #94a3b8; font-size: 12px; } .bx-canvas-outline-body { padding: 8px 14px 14px 14px; border-top: 1px solid #e2e8f0; } .bx-canvas-image-picker { display: flex; flex-direction: column; gap: 12px; padding: 12px 0; } .bx-canvas-image-picker-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #f1f5f9; border-radius: 6px; font-size: 13px; } .bx-canvas-image-picker-name { font-weight: 500; } .bx-canvas-image-picker-size { color: #64748b; } .bx-canvas-image-picker-preview { display: flex; justify-content: center; padding: 12px; background: #f1f5f9; border-radius: 6px; } .bx-canvas-image-picker-preview img { max-width: 100%; max-height: 240px; } .bx-canvas-image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; } .bx-canvas-image-tile { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: #ffffff; border: 2px solid #e2e8f0; border-radius: 8px; cursor: pointer; transition: all 100ms; text-align: left; } .bx-canvas-image-tile:hover { border-color: #94a3b8; } .bx-canvas-image-tile.is-selected { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.15); } .bx-canvas-image-tile img { width: 100%; height: 100px; object-fit: cover; border-radius: 4px; } .bx-canvas-image-tile-name { font-size: 12px; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bx-canvas-image-pickbtn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: #3b82f6; color: #ffffff; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; } .bx-canvas-image-pickbtn:hover { background: #2563eb; } .bx-canvas-image-pickbtn--secondary { background: rgba(255,255,255,0.95); color: #1e293b; border: 1px solid #cbd5e1; } .bx-canvas-image-pickbtn--secondary:hover { background: #f8fafc; } .bx-canvas-image-thumb { position: relative; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; background: #f1f5f9; } .bx-canvas-image-thumb img { display: block; width: 100%; max-height: 200px; object-fit: contain; background: repeating-conic-gradient(#f8fafc 0 25%, #ffffff 0 50%) 50%/16px 16px; } .bx-canvas-image-thumb .bx-canvas-image-pickbtn { position: absolute; top: 8px; right: 8px; } .bx-canvas-align-group { display: inline-flex; gap: 0; border: 1px solid #cbd5e1; border-radius: 6px; overflow: hidden; background: #ffffff; } .bx-canvas-align-btn { display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; background: transparent; border: none; cursor: pointer; color: #64748b; min-width: 36px; } .bx-canvas-align-btn + .bx-canvas-align-btn { border-left: 1px solid #e2e8f0; } .bx-canvas-align-btn:hover { background: #f1f5f9; color: #1e293b; } .bx-canvas-align-btn.is-selected { background: #3b82f6; color: #ffffff; } .bx-canvas-color-row { display: flex; gap: 8px; align-items: center; } .bx-canvas-color-swatch { -webkit-appearance: none; appearance: none; width: 36px; height: 32px; padding: 2px; border: 1px solid #cbd5e1; border-radius: 6px; cursor: pointer; background: transparent; } .bx-canvas-color-swatch::-webkit-color-swatch-wrapper { padding: 0; } .bx-canvas-color-swatch::-webkit-color-swatch { border: none; border-radius: 4px; } .bx-canvas-color-swatch::-moz-color-swatch { border: none; border-radius: 4px; } .bx-canvas-color-text { flex: 1; min-width: 0; font-family: 'JetBrains Mono', monospace; font-size: 12px; } /* Templates unified-list type pill + new-template kind-tiles */ .bx-template-type-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .bx-template-type-pill--quote { background: #dbeafe; color: #1d4ed8; } .bx-template-type-pill--email { background: #ede9fe; color: #6d28d9; } .bx-template-detail { color: #64748b; font-size: 12px; } .bx-template-kind-hint { color: #64748b; font-size: 13px; margin-bottom: 16px; line-height: 1.45; } .bx-template-kind-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .bx-template-kind-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; background: #ffffff; border: 2px solid #e2e8f0; border-radius: 10px; cursor: pointer; text-align: left; transition: all 100ms; } .bx-template-kind-tile:hover { border-color: #94a3b8; } .bx-template-kind-tile.is-selected { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.15); } .bx-template-kind-name { font-size: 16px; font-weight: 600; color: #1e293b; } .bx-template-kind-desc { font-size: 12px; color: #64748b; line-height: 1.45; } /* Embedded CanvasDesigner inside QuoteTemplateBuilder / EmailTemplateEditor */ .bx-canvas-designer.is-embedded { min-height: 600px; } .bx-canvas-bar--embedded { padding: 8px 16px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; } .bx-builder-design { display: flex; flex: 1; min-height: 600px; } .bx-builder-design > * { flex: 1; } .bx-builder-design-stub { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 80px 24px; color: #64748b; min-height: 320px; border: 1px dashed #cbd5e1; border-radius: 8px; background: #ffffff; margin: 24px; } .bx-builder-design-stub h3 { margin: 0; font-size: 18px; color: #1e293b; } .bx-builder-design-stub p { margin: 0; max-width: 50ch; text-align: center; line-height: 1.5; } .bx-builder-crumb-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #dbeafe; color: #1d4ed8; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } /* Settings tab orientation banner — explains what the tab does so 'Defaults' / 'Settings' isn't a vague label. Sits between the optional onboarding guide and the biz-config form. */ .bx-settings-banner { display: flex; gap: 12px; padding: 12px 16px; margin: 16px 24px 0 24px; background: #eff6ff; color: #1e3a8a; border: 1px solid #bfdbfe; border-radius: 8px; font-size: 13px; line-height: 1.5; } .bx-settings-banner-icon { flex-shrink: 0; color: #2563eb; margin-top: 2px; } .bx-settings-banner-body strong { color: #1e3a8a; } .bx-settings-banner-body em { font-style: italic; } .bx-canvas-list-filters { display: flex; gap: 16px; flex-wrap: wrap; padding: 16px 0; } .bx-canvas-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .bx-canvas-card { display: flex; flex-direction: column; padding: 16px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; text-decoration: none; color: inherit; transition: all 150ms; } .bx-canvas-card:hover { border-color: #3b82f6; box-shadow: 0 4px 12px rgba(0,0,0,0.05); } .bx-canvas-card-meta { display: flex; justify-content: space-between; align-items: center; } .bx-canvas-card-name { font-size: 16px; font-weight: 600; margin-top: 8px; color: #1e293b; } .bx-canvas-card-desc { font-size: 13px; color: #64748b; margin: 4px 0 12px 0; } .bx-canvas-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; } .bx-canvas-card-cta { font-size: 13px; font-weight: 600; color: #3b82f6; } .bx-canvas-link-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 8px; margin: 0 0 16px 0; } .bx-canvas-link-row-actions { display: flex; gap: 8px; } .bx-canvas-table-link { color: #3b82f6; text-decoration: none; font-weight: 500; } .bx-canvas-table-link:hover { text-decoration: underline; } .bx-canvas-pick-name { font-weight: 600; } .bx-canvas-pick-meta { font-size: 12px; color: #64748b; } @media (max-width: 1024px) { .bx-canvas-grid { grid-template-columns: 1fr; } .bx-canvas-left, .bx-canvas-right { border-right: none; border-bottom: 1px solid #e2e8f0; } }