/* -------------------------------------------------------------
Global Font Import (Design Refactor 2025-09 Property View)
- Inter chosen per design reference; falls back to Mud / system
- NOTE: If later moved to theme configuration, remove @import
-------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
/* -------------------------------------------------------------
Component Stylesheets
-------------------------------------------------------------- */
@import url('./components/module-index.css');
@import url('./components/modern-data-grid.css');
/* App-wide font: Inter (matches Account Information / ModernFieldDisplay and Theme.cs typography) */
html,
body,
.properties-view-page,
.accounts-view-page {
font-family: 'Inter', var(--mud-typography-default-family, 'Roboto'), 'Segoe UI', Tahoma, Arial, sans-serif;
}
body,
.properties-view-page,
.accounts-view-page {
min-height: 100vh;
}
/* Tables and grids: inherit app font so Locations, Contacts, Domains, Linked Assets match detail sections */
.mud-table-root,
.mud-table,
.mud-table-cell,
.mud-table-head .mud-table-cell,
.mud-simple-table,
.mud-simple-table th,
.mud-simple-table td,
.flat-table,
.flat-table th,
.flat-table td {
font-family: inherit;
}
/* Light mode background - uses theme variable */
body.theme-light,
body.theme-light .properties-view-page {
background: var(--mud-palette-background) !important;
}
/* ============================================================
CSS CUSTOM PROPERTIES (Design Tokens)
============================================================
COLORS: Removed - use Theme.cs auto-generated --mud-palette-* variables
This section contains ONLY visual effects that Theme.cs cannot define:
- Shadows (box-shadow, text-shadow)
- Gradients (multi-stop, complex patterns)
- Blur effects (backdrop-filter)
- Transitions (timing functions, durations)
- Layout dimensions (spacing scale, component sizes)
DO NOT add color hex values here - they belong in Theme.cs
See docs/STYLING-GUIDE.md Section 4.3 for guidance.
============================================================ */
/* ============================================================
REUSABLE FIELD PANEL GRIDS (Tailwind Utilities)
============================================================
Global responsive grid layouts for all detail/form panels.
Usage: ...
Breakpoint behavior:
- Mobile (< 768px): 1 column
- Tablet (768-1279px): 2 columns
- Desktop (1280-1535px): 3 columns
- Wide (≥ 1536px): 4 columns
============================================================ */
@layer utilities {
/* Default 3-column responsive grid (scales down to 1-col mobile) */
.crm-panel-grid {
@apply grid gap-4
grid-cols-1
md:grid-cols-2
xl:grid-cols-3;
}
/* 2-column variant (for simpler forms) */
.crm-panel-grid-2 {
@apply grid gap-4
grid-cols-1
md:grid-cols-2;
}
/* 4-column variant (for dense data grids) */
.crm-panel-grid-4 {
@apply grid gap-4
grid-cols-1
md:grid-cols-2
xl:grid-cols-3
2xl:grid-cols-4;
}
}
/* Remove margin-top from .mt-4 and .my-4 (override Bootstrap/utility margin-top) */
.mt-4,
.my-4 {
margin-top: 0 !important;
}
:root {
/* NAVIGATION PILLS (Complex Gradients - Can't Define in Theme.cs) */
--nav-pill-bg: linear-gradient(135deg, rgba(26, 31, 42, 0.92) 0%, rgba(32, 38, 50, 0.92) 100%);
--nav-pill-bg-hover: linear-gradient(135deg, rgba(32, 38, 50, 0.96) 0%, rgba(38, 45, 58, 0.96) 100%);
--nav-pill-bg-active: linear-gradient(135deg, rgba(var(--mud-palette-primary-rgb), 0.30) 0%, rgba(var(--mud-palette-primary-rgb), 0.22) 100%);
/* BRAND GRADIENT (Modern Slate with Subtle Gradient) */
--brand-gradient: linear-gradient(135deg, #334155 0%, #475569 100%);
--brand-gradient-hover: linear-gradient(135deg, #475569 0%, #64748b 100%);
/* GLASS MORPHISM EFFECTS (Modern, Premium Look) */
--glass-bg: rgba(51, 65, 85, 0.85);
/* Semi-transparent slate */
--glass-bg-hover: rgba(71, 85, 105, 0.9);
/* Slightly more opaque on hover */
--glass-border: rgba(255, 255, 255, 0.18);
/* Subtle light border for glass effect */
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
/* Soft shadow for depth */
--glass-blur: blur(12px);
/* ============================================================================
MUDBLAZOR OUTLINED INPUT CSS VARIABLE OVERRIDES
============================================================================
ROOT CAUSE: MudBlazor applies background: var(--mud-palette-surface) to outlined inputs
- Theme.cs sets Surface = "#FFFFFF" (white)
- Applied to: .mud-input-control-input-container, .mud-input-slot
- Result: White backgrounds on outlined inputs
SOLUTION: Override CSS variables (MudBlazor standard approach)
- These variables are used by MudBlazor for outlined input backgrounds
- Setting to transparent removes white backgrounds
- Note: MudBlazor doesn't expose all variables, so CSS overrides are also needed
============================================================================ */
--mud-palette-input-outlined-background: transparent;
--mud-palette-input-outlined-background-hover: transparent;
--mud-palette-input-outlined-background-focused: transparent;
/* ============================================================================
MUDBLAZOR CHIP DEFAULT COLOR CSS VARIABLE OVERRIDES
============================================================================
ROOT CAUSE: MudBlazor v7 removed ChipDefault from palette. Chips with Color.Default
now use ActionDefault or calculated gray, but contrast text calculation is incorrect,
resulting in light text on light backgrounds (poor readability).
SOLUTION: Override CSS variables that MudBlazor uses for default chip colors
- MudBlazor uses these variables when generating inline styles
- Setting proper contrast ensures readable text on all chip variants
- These variables cascade to nested components (unlike CSS class overrides)
============================================================================ */
--mud-palette-chip-default: var(--mud-palette-surface);
--mud-palette-chip-default-hover: var(--mud-palette-action-disabled-background);
--mud-palette-chip-default-text: var(--mud-palette-text-primary);
/* Backdrop blur for glass effect */
/* SHADOWS (Elevation System) */
--shadow-sm: 0 1px 6px rgba(0, 0, 0, 0.06);
/* Cards, subtle elevation */
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
/* Modals, tooltips */
--shadow-lg: 0 6px 24px rgba(0, 0, 0, 0.12);
/* Overlays, popovers */
/* BORDER RADIUS (Component Shape) */
--radius-12: 12px;
/* Modern, rounded corners */
/* TYPOGRAPHY SCALE (Information-Dense Applications) */
--font-xs: 0.6875rem; /* 11px - micro labels, badges */
--font-sm: 0.75rem; /* 12px - captions, table headers */
--font-base: 0.8125rem; /* 13px - grid cells, dense UI */
--font-md: 0.875rem; /* 14px - body text, forms */
--font-lg: 1rem; /* 16px - headings, emphasis */
/* LINE HEIGHT (Standardized) */
--lh-tight: 1.25; /* Headings, labels */
--lh-normal: 1.4; /* Body text (optimized from 1.5) */
--lh-relaxed: 1.6; /* Long-form content only */
/* SPACING SCALE (Information-Dense - Optimized for High-Density UI) */
--space-xs: 4px; /* Tight - icon margins, badges */
--space-sm: 6px; /* Compact - chip gaps, tight layouts (reduced from 8px) */
--space-md: 10px; /* Default - card padding, form spacing (PRIMARY - reduced from 12px) */
--space-lg: 14px; /* Comfortable - section gaps (reduced from 16px) */
--space-xl: 20px; /* Loose - major section breaks (reduced from 24px) */
/* LEGACY SPACING - Gradually migrate to semantic names above */
--space-1: 4px;
--space-2: 6px; /* Updated to match --space-sm */
--space-3: 10px; /* Updated to match --space-md */
--space-4: 14px; /* Updated to match --space-lg */
--space-6: 20px; /* Updated to match --space-xl */
--space-8: 28px; /* Reduced from 32px for dense layouts */
/* LAYOUT DIMENSIONS (Component-Specific) */
--nav-pill-row-height: 44px;
/* Navigation menu item height */
--nav-pill-row-gap: 1rem;
/* Gap between navigation items */
--workspace-main-body-padding-top: 1rem;
/* Workspace content top padding */
/* MODERN UTILITIES (Consolidated from utilities-modern.css) */
--gp-gap: 1rem;
/* Modern layout gap */
--gp-border-translucent: rgba(148, 163, 184, 0.12);
/* Translucent borders */
--gp-border-translucent-light: rgba(148, 163, 184, 0.08);
/* Lighter translucent borders */
--gp-blur: blur(6px);
/* Backdrop blur effect */
}
/* ============================================================
Dark Mode: No Overrides Needed
============================================================
Theme.cs automatically handles dark mode color switching.
MudBlazor variables like --mud-palette-primary update automatically.
Previously had manual dark mode overrides here - REMOVED.
If dark mode colors look wrong, update Theme.cs PaletteDark, not here.
============================================================ */
/* ============================================================
GLASS MORPHISM - Modern Premium Button Styling
============================================================
Applied to primary buttons for a sophisticated, premium look.
Uses semi-transparent backgrounds with backdrop blur effects.
============================================================ */
/* Primary filled buttons - Dark charcoal matching app bar (Palmira IQ reference) */
/* Main action buttons on view/index pages - Use tenant brand color if set */
html body .mud-button-filled.mud-button-filled-primary {
background-color: var(--tenant-brand-color, var(--mud-palette-appbar-background)) !important;
/* Tenant brand color with fallback to dark charcoal matching app bar */
color: var(--mud-palette-appbar-text) !important;
/* White text */
border: none !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
/* Subtle shadow only */
transition: background-color 0.2s ease !important;
text-transform: none !important;
/* No uppercase */
font-weight: 500 !important;
}
/* Hover state for main action buttons - Use tenant brand color if set */
html body .mud-button-filled.mud-button-filled-primary:hover:not(:disabled) {
/* Use slightly darker version of brand color for hover, or fallback to slightly lighter dark charcoal */
background-color: var(--tenant-brand-color-hover, rgba(52, 58, 64, 0.9)) !important;
transform: none !important;
/* Remove translateY transform */
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}
html body .mud-button-filled.mud-button-filled-primary:active:not(:disabled) {
transform: none !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
/* Primary gradient effect - removed per reference (solid colors only) */
/* If gradients are needed for special CTAs, they can be added back with specific class */
/* Icon buttons - Dark charcoal matching app bar */
html body .mud-icon-button.mud-icon-button-filled-primary {
background-color: var(--mud-palette-appbar-background) !important;
/* Dark charcoal matching app bar */
color: var(--mud-palette-appbar-text) !important;
/* White icon */
border: none !important;
transition: background-color 0.2s ease !important;
}
html body .mud-icon-button.mud-icon-button-filled-primary:hover:not(:disabled) {
background-color: rgba(52, 58, 64, 0.9) !important;
/* Slightly lighter dark charcoal on hover */
transform: none !important;
/* Remove scale transform */
}
/* Primary text buttons - Dark charcoal matching app bar */
html body .mud-button-text.mud-button-text-primary {
color: var(--mud-palette-appbar-background) !important;
/* Dark charcoal matching app bar */
}
html body .mud-button-text.mud-button-text-primary:hover:not(:disabled) {
background-color: rgba(52, 58, 64, 0.1) !important;
/* Light charcoal background on hover */
color: var(--mud-palette-appbar-background) !important;
}
/* Primary checkboxes - Dark charcoal matching app bar */
html body .mud-checkbox.mud-checkbox-primary .mud-checkbox-input {
color: var(--mud-palette-appbar-background) !important;
/* Dark charcoal matching app bar */
}
html body .mud-checkbox.mud-checkbox-primary.mud-checked .mud-checkbox-input {
background-color: var(--mud-palette-appbar-background) !important;
/* Dark charcoal background when checked */
border-color: var(--mud-palette-appbar-background) !important;
}
html body .mud-checkbox.mud-checkbox-primary.mud-checked .mud-checkbox-input::after {
color: var(--mud-palette-appbar-text) !important;
/* White checkmark */
}
/* Primary text field adornment icons - Dark charcoal matching app bar */
html body .mud-input-adornment .mud-icon-button.mud-icon-button-color-primary,
html body .mud-input-adornment .mud-icon.mud-icon-color-primary {
color: var(--mud-palette-appbar-background) !important;
/* Dark charcoal matching app bar */
}
/* Dark mode adjustments - solid colors (no glass effects) */
html[data-mud-theme="dark"] body .mud-button-filled.mud-button-filled-primary {
/* Uses theme primary color automatically - no special dark mode handling needed */
}
/* ============================================================
TABLE OF CONTENTS
============================================================
This file contains 4,000+ lines of styling organized into sections.
Use Ctrl+F to jump to section markers below.
ARCHITECTURE:
- Colors: Defined in Theme.cs (single source of truth)
- Visual Effects: CSS variables above (shadows, gradients, spacing)
- Application Styles: Sections below (MudBlazor overrides, utilities)
See docs/STYLING-GUIDE.md for detailed architecture guidance.
SECTIONS:
1. [CSS-SECTION-ACCESSIBILITY] Accessibility (skip links, focus)
2. [CSS-SECTION-LAYOUT] Layout & Shell (app structure, MudLayout)
3. [CSS-SECTION-NAVIGATION] Navigation & Drawer (MudDrawer, nav pills)
4. [CSS-SECTION-APPBAR] AppBar & Header (MudAppBar, breadcrumbs)
5. [CSS-SECTION-BUTTONS] Buttons & Actions (MudButton, FAB, icons)
6. [CSS-SECTION-FORMS] Forms & Inputs (MudTextField, MudSelect)
7. [CSS-SECTION-DATADISPLAY] Data Display (MudTable, MudCard, MudPaper)
8. [CSS-SECTION-DIALOGS] Dialogs & Modals (MudDialog, MudPopover)
9. [CSS-SECTION-UTILITIES] Utilities & Helpers (text, spacing, display)
10. [CSS-SECTION-MODULES] Module-Specific (Properties, Dashboard, etc.)
ORGANIZATION STATUS:
Phase 1 Day 4-5: Table of contents + section markers added ✅
Future: Consolidate duplicates, remove dead CSS, split into multiple files
NOTES:
- Many selectors appear in multiple sections (historical growth)
- Future refactor will consolidate duplicates into single authoritative styles
- Module-specific styles will eventually move to separate CSS files
============================================================ */
/* ============================================================
SECTION 1: ACCESSIBILITY
[CSS-SECTION-ACCESSIBILITY]
============================================================
Keyboard navigation, screen readers, skip links, focus indicators.
WCAG AA compliance styles.
============================================================ */
/* NOTE: Gradient for app bar applied separately to keep variables semantic (background-color vs composite) */
/* Accessibility: Skip link - hidden off-screen until focused */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--mud-palette-primary);
color: white;
padding: 8px 16px;
text-decoration: none;
z-index: 10000;
border-radius: 0 0 4px 0;
font-weight: 600;
transition: top 0.2s ease;
}
.skip-link:focus {
top: 0;
/* Slide down into view when focused via keyboard */
outline: 2px solid var(--mud-palette-primary);
outline-offset: 2px;
}
/* ============================================================
SECTION 2: LAYOUT & SHELL
[CSS-SECTION-LAYOUT]
============================================================
Application shell structure, MudLayout overrides, content areas.
Controls overall page layout, drawer positioning, content flow.
============================================================ */
.mud-main-content:not(.app-shell-main) {
height: 100%;
min-height: 100vh;
display: block;
/* allow natural vertical flow */
/* AppBar offset handled by parent .app-shell-main padding-top */
}
/* ==========================================================================
LAYOUT ARCHITECTURE SHIFT (2025-10-21)
- Removed left NavigationMenu (deprecated)
- Full-width content layout with GlobalCanvasDrawer on right
- Intelligence as default home page
- Tab-based navigation via drawer
========================================================================== */
/* ==========================================================================
FULL-WIDTH LAYOUT (No Left Nav)
- Main content takes full viewport width minus 60px for GlobalCanvasDrawer mini mode
- Drawer is fixed position on right side, does not push content
- When drawer expands to 95vw, it overlays content (with semi-transparent backdrop)
========================================================================== */
/* Full-width layout container (replaces .app-shell-row with left nav) */
.app-shell-fullwidth {
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
/* Full width - header extends all the way */
max-width: 100vw;
margin-right: 0;
padding-right: 0;
position: relative;
box-sizing: border-box;
}
/* Remove margin when in iframe (no drawer present) */
.in-iframe .app-shell-fullwidth {
width: 100vw !important;
max-width: 100vw !important;
}
/* Main content area fills remaining space */
.app-main-content {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
/* No margin needed - WorkspaceLayout handles spacing via flexbox */
/* CRITICAL: Override MudBlazor's automatic AppBar padding - header is separate in our architecture */
padding-top: 0 !important;
margin-top: 0 !important;
}
/* Remove content margin when in iframe (no drawer present) */
.in-iframe .app-main-content {
margin-right: 0 !important;
}
/* Content shell with padding - min-height: 0 so it can shrink in flex layouts (e.g. Inbox) */
.app-content-shell {
flex: 1;
min-height: 0;
padding: var(--shell-content-gap, 24px);
max-width: 100%;
box-sizing: border-box;
}
/* ==========================================================================
END OF APP.CSS CORE STYLES
========================================================================== */
/* ==========================================================================
LEGACY LAYOUT STYLES - COMMENTED OUT (2025-10-21)
Left navigation removed, these styles no longer needed
========================================================================== */
/*
.app-shell-row {
display: flex;
flex-direction: row;
align-items: stretch;
width: 100%;
height: 100vh;
position: relative;
top: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.app-shell-row>.mud-drawer {
position: relative !important;
left: 0 !important;
top: 0 !important;
}
*/
/* Prevent MudLayout from adding automatic spacing for drawer (we're using flex layout instead) */
.mud-layout.mud-drawer-open-responsive-md-left {
padding-left: 0 !important;
}
/* Also prevent any automatic margins MudBlazor might add */
.mud-layout .mud-main-content {
margin-left: 0 !important;
}
/* Ensure MudAppBar doesn't have automatic left positioning/spacing from drawer */
.mud-layout .mud-appbar {
left: 0 !important;
margin-left: 0 !important;
padding-left: 0 !important;
width: 100vw !important;
/* Full width to extend behind drawer */
max-width: 100vw !important;
right: 0 !important;
}
/* Override any MudBlazor width calculations that account for drawer */
.mud-layout.mud-drawer-open-responsive-md-left .mud-appbar,
.mud-layout.mud-drawer-open-responsive-md-left .app-shell-appbar {
width: 100vw !important;
}
.app-shell-main {
flex: 1 1 0;
/* Fill remaining space after AppBar */
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
/* Allow flexbox to shrink */
overflow: hidden;
/* Prevent scrolling at this level */
padding-top: 0;
/* AppBar is not fixed, flows naturally */
box-sizing: border-box;
/* Include padding in height calculation */
/* allow inner content to shrink without overflow */
/* REMOVED margin-left because drawer is fixed positioned, not in flex flow */
/* The drawer's fixed positioning means it overlays content; app-shell-col handles offset */
}
/* Nav state helpers (structural alignment handled by flex; no state-specific padding)
NOTE: The nav state class (nav-mini / nav-full) is applied directly on .app-shell-row, not an ancestor.
Use compound selectors (.app-shell-row.nav-mini) instead of descendant selectors (.nav-mini .app-shell-row). */
/* Mini mode: we still reserve explicit width via the variable; additional gap not required. */
/* .app-shell-row.nav-mini { } (gap removed to prevent double perceived offset) */
/* If individual pages require additional horizontal breathing room, they can still rely on app-main-wrapper internal padding */
/* Global layout spacing + nav tokens (drawer width variable now only set inline in AppLayout) */
:root {
--shell-content-gap: .75rem;
--shell-nav-gap-mini: .65rem;
/* Breadcrumb vertical positioning tokens */
--breadcrumbs-offset-top: 0;
/* Sit directly below AppBar with no gap */
--breadcrumbs-content-gap: 0;
/* No gap - content starts at breadcrumb border */
--breadcrumbs-height: 48px;
/* Compact breadcrumb bar height (including padding + border) */
--page-header-panel-height: 56px;
/* Page header panel height (AppBar breadcrumb area) - min-height (56px) aligned with notion-nav-header */
/* Module workspace layout tokens (new horizontal actions bar design) */
--ws-actions-bar-height: 56px;
--ws-header-sticky-top: calc(var(--appbar-height, 48px) + var(--breadcrumbs-offset-top));
}
html,
body {
overflow: hidden;
/* Web app - body never scrolls, only internal components */
height: 100%;
width: 100%;
position: fixed;
/* Prevent any body scroll on mobile/touch devices */
}
/* Ensure layout structure supports 100% height flow from html -> body -> layout */
#app,
.mud-layout {
height: 100%;
overflow: hidden;
padding: 0 !important;
/* Override any MudBlazor default padding */
margin: 0 !important;
/* Override any MudBlazor default margin */
}
/* Phase 2 (P2.1 + P2.5): Bottom nav space and touch targets (viewport < 600px) */
@media (max-width: 599px) {
.app-content-with-bottom-nav {
padding-bottom: calc(56px + env(safe-area-inset-bottom, 0));
}
/* P2.5: Primary actions at least 44×44px for touch */
.app-shell-appbar .header-icon-btn,
.app-shell-appbar .header-more-menu,
.app-shell-appbar .header-more-menu .mud-button-root,
.mud-appbar .header-icon-btn,
.mud-appbar .header-more-menu .mud-button-root {
min-height: 44px !important;
min-width: 44px !important;
}
.module-workspace-page .header-actions-group .mud-button.module-action-btn,
.unified-search-filters-root .filter-toggle-button,
.unified-search-filters-root .mud-button-root {
min-height: 44px !important;
min-width: 44px !important;
}
}
/* Removed global :root/.nav-mini drawer width declarations to prevent drift; rely solely on inline style. */
/* Remove padding transition (no dynamic padding now) */
/* AppBar inside right column: full width */
.mud-appbar,
.app-shell-appbar {
width: 100%;
flex-shrink: 0;
/* Don't let AppBar collapse */
flex-grow: 0;
/* Don't let it grow either */
position: relative !important;
/* CRITICAL: Override MudBlazor default - keep in normal flow, not fixed/absolute */
z-index: 100;
/* Stack above breadcrumbs */
}
/* Content row: ensure drawer + content alignment uses same variable (drawer already fixed width) */
.app-shell-row {
position: relative;
}
/* (Row-level transition no longer required; main element itself manages transition) */
/* When mini, variable already shrinks; we can keep padding minimal */
/* Removed empty nav-mini/nav-full app-shell-appbar blocks (variable already applied) */
/* Ensure Mud's internal drawer/appbar rule uses updated variable value; duplicate specificity if necessary */
/* Removed obsolete per-state AppBar margin rules */
/* Responsive: when drawer switches to temporary overlay, remove reserved space */
@media (max-width: 960px) {
.nav-mini,
.nav-full {
--drawer-width-current: 0px !important;
--mud-drawer-width-left: 0px !important;
}
.nav-mini .mud-appbar,
.nav-full .mud-appbar,
.nav-mini .app-shell-appbar,
.nav-full .app-shell-appbar {
width: 100% !important;
}
}
/* Ensure MudMainContent inside new shell does not add stray block spacing */
.app-shell-main.mud-main-content {
display: flex;
flex-direction: column;
/* Stack breadcrumbs and content vertically */
/* height removed - flex handles sizing */
overflow: hidden;
/* No scroll at this level - content regions handle their own scrolling */
padding-top: 0 !important;
/* CRITICAL: Override MudBlazor's default AppBar padding */
margin-top: 0 !important;
/* Prevent any margin offset */
}
/* Main content wrapper - this is where page content lives */
.app-main-wrapper {
flex: 1 1 0;
/* Grow to fill space, shrink if needed, 0 basis */
display: flex;
flex-direction: column;
min-height: 0;
/* Allow flex child to shrink - CRITICAL for preventing overflow */
overflow: hidden;
/* Pages manage their own scroll */
order: 1;
/* Ensure it comes after breadcrumbs */
}
/* Content shell - immediate parent of page components */
.app-content-shell {
flex: 1;
min-height: 0;
/* Allow flex child to shrink - CRITICAL for preventing overflow */
overflow: auto;
/* Default scroll container for pages that need it */
}
/* -----------------------------------------------------------
Breadcrumbs visibility safeguards
- Prevent collapse to zero width when flex layout distributes space
- Provide truncation handling for long paths (ellipsis)
----------------------------------------------------------- */
.appbar-breadcrumbs {
flex: 0 1 auto;
min-width: 160px;
max-width: 35%;
overflow: hidden;
white-space: nowrap;
}
.app-breadcrumbs .mud-breadcrumb-item {
display: inline-flex;
align-items: center;
font-size: var(--mud-typography-body2-size);
}
.app-breadcrumbs .mud-breadcrumb-item+.mud-breadcrumb-item::before {
content: "/";
padding: 0 .35rem;
color: var(--mud-palette-text-secondary);
}
.app-breadcrumbs.is-fallback {
opacity: .85;
}
/* Dark Mode Breadcrumbs - Enhanced Visibility */
body.theme-dark .app-breadcrumbs .mud-breadcrumb-item {
color: var(--mud-palette-text-primary) !important;
}
body.theme-dark .app-breadcrumbs .mud-breadcrumb-item+.mud-breadcrumb-item::before {
color: var(--mud-palette-text-secondary) !important;
}
body.theme-dark .app-breadcrumbs .mud-breadcrumb-item a {
color: var(--mud-palette-primary) !important;
}
body.theme-dark .app-breadcrumbs .mud-breadcrumb-item a:hover {
color: var(--mud-palette-primary-darken) !important;
}
/* Center search field sizing (avoid over-expansion pushing breadcrumbs off) */
.appbar-search-wrapper {
flex: 1 1 40%;
max-width: 560px;
}
.appbar-search-wrapper .appbar-search {
width: 100%;
}
/* Layout utility wrappers (ensure consistent spacing without double padding) */
/* Main content wrapper uses gap token for left padding */
.app-main-wrapper {
box-sizing: border-box;
flex: 1 1 auto;
/* Grow to fill remaining space after breadcrumbs */
display: flex;
flex-direction: column;
margin: 0;
max-width: 100%;
overflow: visible;
/* CRITICAL: Changed from overflow: hidden to allow child scroll containers to work */
}
/* Breadcrumbs bar - sits below AppBar, flex-shrink: 0 to maintain height */
.breadcrumbs-bar {
display: flex;
align-items: center;
min-height: 28px;
/* Reduced height for more compact spacing */
padding: 0.125rem 0.75rem;
/* Reduced vertical padding: 2px top/bottom */
background: var(--mud-palette-drawer-background);
/* Match NotionNavPanel background */
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
z-index: 110;
/* Above drawer (105) to ensure border is always visible */
flex-shrink: 0;
/* Don't let it collapse to zero height */
flex-grow: 0;
/* Don't grow either */
flex-basis: auto;
/* Use content size as basis */
width: 100%;
box-sizing: border-box;
color: var(--mud-palette-text-primary, #000);
/* Ensure text is visible */
position: relative;
/* Ensure proper stacking context */
order: 0;
/* Ensure it appears first after AppBar */
}
/* Dark mode breadcrumb styling */
@media (prefers-color-scheme: dark) {
.breadcrumbs-bar {
background: var(--mud-palette-drawer-background);
border-bottom-color: rgba(255, 255, 255, 0.12);
}
}
/* Collapse long paths with ellipsis while allowing individual items to shrink */
.breadcrumbs-bar .app-breadcrumbs {
flex: 1 1 auto;
overflow: hidden;
}
.breadcrumbs-bar .breadcrumbs-trail {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.breadcrumbs-bar .breadcrumbs-trail .mud-breadcrumb-item {
min-width: 0;
/* allow flex children to shrink */
}
.breadcrumbs-bar .breadcrumbs-trail .mud-breadcrumb-item a,
.breadcrumbs-bar .breadcrumbs-trail .mud-breadcrumb-item span {
display: inline-block;
max-width: 220px;
/* cap each segment */
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
}
@media (max-width: 960px) {
.breadcrumbs-bar .breadcrumbs-trail .mud-breadcrumb-item a,
.breadcrumbs-bar .breadcrumbs-trail .mud-breadcrumb-item span {
max-width: 140px;
}
}
.app-content-shell {
width: 100%;
margin: 0;
flex: 1 1 auto;
/* Fill remaining space in flex parent */
display: flex;
flex-direction: column;
overflow: visible;
/* CRITICAL: Changed from overflow: hidden to allow child scroll containers to work */
/* stretch full width of wrapper */
position: relative;
/* enables contained overlays */
}
/* Optional constrained variant if needed elsewhere */
.app-content-shell.constrained-1440 {
max-width: 1440px;
margin: 0 auto;
}
/* Unified feature card styling (Phase 4 ThemeRevision) */
.feature-card {
padding: 1rem 1.25rem;
border-radius: var(--mud-default-borderradius);
display: flex;
flex-direction: column;
gap: .5rem;
background: var(--mud-palette-surface);
}
.feature-card.compact {
padding: .75rem 1rem;
gap: .35rem;
}
.feature-card .metric-value {
font-size: 1.35rem;
font-weight: 600;
line-height: 1.2;
}
.feature-card .metric-label {
font-size: var(--mud-typography-caption-size);
color: var(--mud-palette-text-secondary);
letter-spacing: .5px;
text-transform: uppercase;
}
/* Remove default MudContainer horizontal padding when nested (we removed container, but retain safety) */
.app-content-shell .mud-container {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Generic page section wrapper for feature pages (replacing outer MudContainer) */
.page-section {
width: 100%;
margin: 0 auto;
padding: 0;
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
/* allow child scroll containers (e.g. Deal page, Pipeline dashboard) to scroll */
}
.page-section > .page-content-standard {
flex: 1;
min-height: 0;
/* so scrollable content (overflow-y: auto) gets bounded height and scrolls */
}
.page-section>.mud-grid {
/* ensure grids stretch properly */
margin-top: 0.25rem;
}
/* Module card integrated tabs (relocated tabs inside content surface) */
.module-card-tabs-wrapper {
margin: -.25rem 0 0 0;
}
.module-card-tabs-bar {
padding: 0 .25rem 0 .25rem;
}
/* Tabs now integrated without divider lines */
.module-card-tabs-bar .module-section-tabs .mud-tabs-toolbar {
border-bottom: none;
}
.module-card-tabs-bar .mud-tabs-toolbar {
min-height: 40px;
}
.module-card-tabs-bar .mud-tab {
text-transform: none;
font-weight: 500;
}
/* Tool widgets (replacing right rail cards) */
.tool-widgets-stack {
display: flex;
flex-direction: column;
gap: 1rem;
}
.tool-widget {
position: relative;
padding: 1rem 1.1rem;
border: 1px solid var(--mud-palette-divider);
border-radius: var(--mud-default-borderradius);
background: var(--mud-palette-surface);
display: flex;
flex-direction: column;
gap: .35rem;
box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
transition: box-shadow .18s ease, transform .18s ease;
}
.tool-widget:hover {
box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .12);
transform: translateY(-2px);
}
.tool-widget.active {
outline: 2px solid var(--mud-palette-primary);
outline-offset: 2px;
}
.tool-widget .tw-head {
display: flex;
align-items: center;
gap: .5rem;
}
.tool-widget .tw-icon {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
background: var(--mud-palette-primary);
color: var(--mud-palette-primary-text);
}
.tool-widget.tw-info .tw-icon {
background: var(--mud-palette-info);
color: var(--mud-palette-info-text);
}
.tool-widget.tw-warning .tw-icon {
background: var(--mud-palette-warning);
color: var(--mud-palette-warning-text);
}
.tool-widget.tw-secondary .tw-icon {
background: var(--mud-palette-secondary);
color: var(--mud-palette-secondary-text);
}
.tool-widget .tw-value {
font-size: 1.15rem;
font-weight: 600;
line-height: 1.1;
}
.tool-widget .tw-label {
font-size: .75rem;
letter-spacing: .5px;
text-transform: uppercase;
color: var(--mud-palette-text-secondary);
}
.tool-widget .tw-trend {
font-size: .7rem;
font-weight: 600;
letter-spacing: .5px;
}
.tool-widget .tw-meta {
font-size: .65rem;
color: var(--mud-palette-text-secondary);
}
/* Unified workspace container */
.module-workspace-card {
padding: 1rem 1rem 1.25rem 1rem;
background: var(--mud-palette-surface);
border: 1px solid var(--mud-palette-divider);
border-radius: var(--mud-default-borderradius);
box-shadow: 0 2px 4px rgba(0, 0, 0, .04);
}
.module-workspace-grid {
display: grid;
grid-template-columns: 1fr 190px;
gap: 1.75rem;
align-items: start;
}
@media (max-width: 1100px) {
.module-workspace-grid {
grid-template-columns: 1fr;
}
}
/* Dark nav pills (horizontal + vertical) */
.nav-pills.horizontal {
display: flex;
flex-wrap: wrap;
gap: .65rem;
margin: 0 0 1rem 0;
}
.nav-pills.vertical {
display: flex;
flex-direction: column;
gap: .65rem;
margin: 0;
}
/* Align top of first vertical pill with the top of main content (beneath horizontal pills) */
.module-workspace-grid .workspace-aside-col .nav-pills.vertical {
/* Offset = pill row height + row gap + body top padding */
margin-top: calc(var(--nav-pill-row-height) + var(--nav-pill-row-gap) + var(--workspace-main-body-padding-top));
}
/* Nav pills now match side menu dark styling (gradient + subtle border) */
.nav-pill-dark {
background: var(--nav-pill-bg);
color: var(--mud-palette-text-primary);
border: 1px solid var(--mud-palette-divider);
border-radius: 8px;
padding: .75rem 1rem .78rem 1rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: .80rem;
font-weight: 500;
letter-spacing: .35px;
position: relative;
min-width: 108px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
transition: background .18s ease, box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.nav-pill-dark:hover {
background: var(--nav-pill-bg-hover);
border-color: var(--mud-palette-divider);
}
.nav-pill-dark.active {
background: var(--nav-pill-bg-active);
color: var(--mud-palette-text-primary);
border-color: var(--mud-palette-primary);
box-shadow: 0 0 0 1px var(--mud-palette-primary);
}
/* Animated accent bar: keep pseudo-element always to allow transition in/out */
.nav-pills.vertical .nav-pill-dark::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: var(--mud-palette-primary);
border-radius: 2px 0 0 2px;
opacity: 0;
transform: translateX(-6px) scaleY(.4);
transition: opacity .28s ease .02s, transform .40s cubic-bezier(.22, .8, .3, 1) .02s;
will-change: transform, opacity;
}
.nav-pills.vertical .nav-pill-dark.active::before {
opacity: 1;
transform: translateX(0) scaleY(1);
}
@media (prefers-reduced-motion: reduce) {
.nav-pills.vertical .nav-pill-dark::before {
transition: none;
}
}
/* Responsive shrink on narrow viewports */
@media (max-width: 640px) {
.nav-pill-dark {
min-width: 90px;
}
}
/* Compact variant (apply via Compact parameter adding .compact on container) */
.nav-pills.compact .nav-pill-dark {
padding: .55rem .75rem .58rem .75rem;
font-size: .72rem;
letter-spacing: .3px;
min-width: 96px;
}
.nav-pills.compact.vertical .nav-pill-dark {
min-height: 40px;
}
.nav-pill-dark:focus-visible {
outline: 2px solid var(--mud-palette-primary);
outline-offset: 2px;
}
/* Remove icon spacing variant – pills now purely text; keep compatibility if icon left in some usages */
.nav-pill-dark .np-icon {
display: none;
}
.nav-pill-dark .np-label {
white-space: nowrap;
}
/* Taller vertical variants (slightly increased min-height) */
.nav-pills.vertical .nav-pill-dark {
min-height: 48px;
justify-content: flex-start;
}
/* Page-specific override: remove breadcrumbs content gap on properties view page */
.properties-view-page {
--breadcrumbs-content-gap: 0;
}
.mud-chip.mud-chip-size-medium {
font-size: var(--mud-typography-default-size) !important;
}
.mud-chip.mud-chip-size-small {
font-size: var(--mud-typography-body2-size) !important;
}
.mud-chip {
font-size: var(--mud-typography-default-size);
}
.mud-tabs {
background-color: var(--mud-palette-surface);
}
/* Left-aligned vertical tabs (Position.Left) */
.mud-tabs-panels-left .mud-tab,
.mud-tabs-vertical .mud-tab {
justify-content: flex-start !important;
text-align: left !important;
}
/* Fix vertical tabs panels to use full width */
.mud-tabs-panels.mud-tabs-vertical {
display: block !important;
width: 100%;
}
.mud-tabs-panels-left .mud-tabpanel,
.mud-tabs-vertical .mud-tabpanel {
width: 100%;
max-width: 100%;
}
/* ------------------------------------------------------------
DocumentCollection / ImagesCollection: show all tabs, no scroll
MudBlazor has no ScrollButtons=false; use CSS to disable scroll
and hide prev/next buttons so all tab labels are visible.
Ref: https://mudblazor.com/components/tabs#scrolling-tabs
------------------------------------------------------------ */
/* Tab buttons container: no scroll, fixed layout */
.document-collection .mud-tabs .mud-tabs-toolbar,
.images-collection .mud-tabs .mud-tabs-toolbar {
overflow: hidden !important;
}
.document-collection .mud-tabs .mud-tabs-toolbar .mud-tabs-tabbar-wrapper,
.images-collection .mud-tabs .mud-tabs-toolbar .mud-tabs-tabbar-wrapper {
overflow: hidden !important;
}
.document-collection .mud-tabs .mud-tabs-toolbar .mud-tabs-tabbar-content,
.images-collection .mud-tabs .mud-tabs-toolbar .mud-tabs-tabbar-content {
overflow: hidden !important;
flex-wrap: wrap !important;
}
/* Hide scroll prev/next buttons so all tabs render without scroll UI */
.document-collection .mud-tabs .mud-tabs-toolbar .mud-icon-button,
.images-collection .mud-tabs .mud-tabs-toolbar .mud-icon-button {
display: none !important;
}
/* Fixed height for tab content area: uniformity + adequate space for tab buttons.
Content (doc/gallery tiles) scrolls inside this area when taller. */
:root {
--collection-panel-height: 420px;
--collection-tabbar-width: 200px;
}
.document-collection .mud-tabs,
.images-collection .mud-tabs {
display: flex !important;
flex-direction: row !important;
min-height: 0 !important;
height: 100% !important;
gap: 20px !important;
}
/* Tab toolbar (buttons container): fixed width, same height as tab content, not affected by content */
.document-collection .mud-tabs .mud-tabs-toolbar,
.images-collection .mud-tabs .mud-tabs-toolbar {
flex-shrink: 0 !important;
width: var(--collection-tabbar-width) !important;
min-width: var(--collection-tabbar-width) !important;
max-width: var(--collection-tabbar-width) !important;
min-height: var(--collection-panel-height) !important;
height: var(--collection-panel-height) !important;
}
.document-collection .mud-tabs .mud-tabs-toolbar .mud-tabs-tabbar,
.images-collection .mud-tabs .mud-tabs-toolbar .mud-tabs-tabbar {
height: 100% !important;
min-height: var(--collection-panel-height) !important;
}
.document-collection .mud-tabs .mud-tabs-toolbar .mud-tabs-tabbar-wrapper,
.images-collection .mud-tabs .mud-tabs-toolbar .mud-tabs-tabbar-wrapper {
height: 100% !important;
}
.document-collection .mud-tabs .mud-tabs-toolbar .mud-tabs-tabbar-content,
.images-collection .mud-tabs .mud-tabs-toolbar .mud-tabs-tabbar-content {
height: 100% !important;
align-content: flex-start !important;
}
/* Collection tab buttons: fixed width, no shift when selected; long titles fade out neatly */
.document-collection .mud-tabs .mud-tabs-toolbar .mud-tab,
.images-collection .mud-tabs .mud-tabs-toolbar .mud-tab {
width: 100% !important;
max-width: 100% !important;
min-height: 40px !important;
margin: 0 !important;
padding: 8px 12px !important;
position: static !important;
border: none !important;
border-radius: 6px !important;
flex-shrink: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* Long tab titles: fade out neatly with ellipsis */
.document-collection .mud-tabs .mud-tabs-toolbar .mud-tab .mud-typography,
.document-collection .mud-tabs .mud-tabs-toolbar .mud-tab .mud-tab-text,
.images-collection .mud-tabs .mud-tabs-toolbar .mud-tab .mud-typography,
.images-collection .mud-tabs .mud-tabs-toolbar .mud-tab .mud-tab-text {
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
display: block !important;
min-width: 0 !important;
}
/* Optional: subtle gradient fade at end of long text (in addition to ellipsis) */
.document-collection .mud-tabs .mud-tabs-toolbar .mud-tab .mud-typography,
.document-collection .mud-tabs .mud-tabs-toolbar .mud-tab .mud-tab-text,
.images-collection .mud-tabs .mud-tabs-toolbar .mud-tab .mud-typography,
.images-collection .mud-tabs .mud-tabs-toolbar .mud-tab .mud-tab-text {
-webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
mask-image: linear-gradient(to right, black 85%, transparent 100%);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.document-collection .mud-tabs .mud-tabs-toolbar .mud-tab.mud-tab-active,
.images-collection .mud-tabs .mud-tabs-toolbar .mud-tab.mud-tab-active {
margin: 0 !important;
margin-bottom: 0 !important;
position: static !important;
transform: none !important;
}
/* Tab content area: fixed height, overflow so doc/gallery tiles scroll, soft outline, inner padding */
.document-collection .mud-tabs .mud-tabs-panels,
.images-collection .mud-tabs .mud-tabs-panels {
flex: 1 1 0 !important;
min-width: 0 !important;
min-height: var(--collection-panel-height) !important;
height: var(--collection-panel-height) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
border: 1px solid var(--mud-palette-divider) !important;
border-radius: 6px !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
padding: 12px !important;
box-sizing: border-box !important;
}
/* Active tab panel fills the scroll area so browser/drawer content scrolls correctly */
.document-collection .mud-tabs .mud-tabs-panels .mud-tabpanel,
.images-collection .mud-tabs .mud-tabs-panels .mud-tabpanel {
height: 100% !important;
overflow: visible !important;
}
/* Single-panel case (no linked entities): same fixed height, overflow, soft outline, inner padding */
.document-collection .collection-single-panel,
.images-collection .collection-single-panel {
min-height: var(--collection-panel-height) !important;
height: var(--collection-panel-height) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
border: 1px solid var(--mud-palette-divider) !important;
border-radius: 6px !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
padding: 12px !important;
box-sizing: border-box !important;
}
/* ============================================================
SECTION 6: FORMS & INPUTS
[CSS-SECTION-FORMS]
============================================================
MudTextField, MudSelect, MudAutocomplete, form validation, input styling.
============================================================ */
/* ------------------------------------------------------------
CRM TextField Component - Read-only/Edit Mode Styling
------------------------------------------------------------ */
/* When readonly, hide the outline border but keep its space so label doesn't jump */
.crm-input-readonly .mud-input-root-outlined {
border-color: transparent !important; /* border still 'there', just invisible */
}
/* Light mode readonly background */
.crm-input-readonly .mud-input-root-outlined .mud-input-slot {
background-color: rgb(243 244 246) !important; /* Tailwind bg-gray-100 */
}
/* Dark mode readonly background */
.dark .crm-input-readonly .mud-input-root-outlined .mud-input-slot {
background-color: rgb(31 41 55) !important; /* Tailwind bg-gray-800 */
}
/* Ensure disabled text is readable (not too greyed out) */
.crm-input-readonly .mud-input-root-outlined.mud-input-disabled,
.crm-input-readonly .mud-input-root-outlined.mud-input-disabled input {
color: rgb(17 24 39) !important; /* text-gray-900 for light mode */
}
.dark .crm-input-readonly .mud-input-root-outlined.mud-input-disabled,
.dark .crm-input-readonly .mud-input-root-outlined.mud-input-disabled input {
color: rgb(229 231 235) !important; /* text-gray-200 for dark mode */
}
/* Edit mode keeps transparent background with visible border */
.crm-input-edit .mud-input-root-outlined .mud-input-slot {
background-color: transparent !important;
}
/* Edit mode - remove ALL visual feedback (hover, focus, active) */
.crm-input-edit .mud-input-root-outlined:hover {
border-color: currentColor !important;
}
.crm-input-edit .mud-input-root-outlined.mud-input-root-adorned-end:hover {
border-color: currentColor !important;
}
.crm-input-edit .mud-input-root-outlined:focus-within {
border-color: currentColor !important;
border-width: 1px !important;
}
.crm-input-edit .mud-input-root-outlined.mud-input-root-adorned-end:focus-within {
border-color: currentColor !important;
border-width: 1px !important;
}
.crm-input-edit .mud-input-root-outlined input:focus {
box-shadow: none !important;
}
.crm-input-edit .mud-input-root-outlined input:active {
box-shadow: none !important;
}
.mud-input-control-margin-dense .mud-input>input.mud-input-root,
.mud-input-control-margin-dense div.mud-input-slot.mud-input-root {
font-size: 0.90em;
}
.mud-input-control>.mud-input-control-input-container>.mud-input-label-inputcontrol {
font-size: var(--mud-typography-default-size) !important;
}
.mud-simple-table table * tr>td,
.mud-simple-table table * tr th {
font-size: var(--mud-typography-default-size) !important;
}
.mud-expand-panel .mud-expand-panel-header {
font-size: var(--mud-typography-default-size) !important;
}
/* ============================================================
SECTION 5: BUTTONS & ACTIONS
[CSS-SECTION-BUTTONS]
============================================================
MudButton overrides, FAB styles, icon buttons, action buttons.
============================================================ */
.mud-button-year {
font-size: var(--mud-typography-default-size) !important;
}
.mud-table-cell {
font-size: var(--mud-typography-default-size) !important;
}
.mud-table-dense .mud-table-cell {
font-size: var(--mud-typography-body2-size) !important;
}
.mud-button-outlined-size-small {
font-size: var(--mud-typography-body2-size);
}
.mud-grid.readonly-grid>.mud-grid-item {
border-bottom: 1px solid var(--mud-palette-table-lines);
padding-bottom: 2px;
}
.mud-nav-link {
white-space: normal !important;
}
.user-button {
text-transform: none;
background: rgba(var(--mud-palette-primary-rgb), 0.1)
}
.side-menu .mud-chip.mud-chip-size-small {
font-size: 0.625rem;
height: 1.125rem;
}
/* ============================================================
SECTION 7: DATA DISPLAY
[CSS-SECTION-DATADISPLAY]
============================================================
MudTable, MudDataGrid, MudCard, MudPaper, data visualization components.
============================================================ */
/* ------------------------------------------------------------
Markdown Content Rendering (MarkdownRenderer Component)
Used by: Intelligence chat, Notes, any component using MarkdownRenderer
------------------------------------------------------------ */
/* Base markdown content container */
.markdown-content {
line-height: 1.6;
}
/* Typography - headings */
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
margin-top: 1em;
margin-bottom: 0.5em;
font-weight: 600;
line-height: 1.3;
}
.markdown-content h1 {
font-size: 1.5em;
}
.markdown-content h2 {
font-size: 1.3em;
}
.markdown-content h3 {
font-size: 1.1em;
}
/* Paragraphs */
.markdown-content p {
margin: 0.5em 0;
}
.markdown-content p:first-child {
margin-top: 0;
}
.markdown-content p:last-child {
margin-bottom: 0;
}
/* Lists */
.markdown-content ul,
.markdown-content ol {
margin: 0.5em 0;
padding-left: 1.5em;
}
.markdown-content li {
margin: 0.25em 0;
}
.markdown-content ul ul,
.markdown-content ol ol,
.markdown-content ul ol,
.markdown-content ol ul {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
/* Inline code */
.markdown-content code {
background-color: var(--mud-palette-action-disabled-background);
color: var(--mud-palette-text-primary);
border-radius: 3px;
padding: 0.2em 0.4em;
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
font-size: 0.9em;
}
/* Code blocks */
.markdown-content pre {
background-color: var(--mud-palette-surface);
border: 1px solid var(--mud-palette-divider);
border-radius: 6px;
padding: 1em;
overflow-x: auto;
margin: 0.5em 0;
}
.markdown-content pre code {
background-color: transparent;
padding: 0;
color: var(--mud-palette-text-primary);
font-size: 0.875em;
}
/* Blockquotes */
.markdown-content blockquote {
border-left: 3px solid var(--mud-palette-primary);
padding-left: 1em;
margin: 0.5em 0;
color: var(--mud-palette-text-secondary);
font-style: italic;
}
/* Tables */
.markdown-content table {
border-collapse: collapse;
width: 100%;
margin: 0.75em 0;
display: block;
overflow-x: auto;
}
.markdown-content th,
.markdown-content td {
border: 1px solid rgba(0, 0, 0, 0.12);
padding: 0.5em 0.75em;
text-align: left;
}
.markdown-content th {
background-color: rgba(0, 0, 0, 0.04);
font-weight: 600;
}
.markdown-content tbody tr:nth-child(even) {
background-color: rgba(0, 0, 0, 0.02);
}
/* Links */
.markdown-content a {
color: var(--mud-palette-primary);
text-decoration: none;
}
.markdown-content a:hover {
text-decoration: underline;
}
/* Horizontal rules */
.markdown-content hr {
border: none;
border-top: 1px solid rgba(0, 0, 0, 0.12);
margin: 1em 0;
}
/* Task lists */
.markdown-content input[type="checkbox"] {
margin-right: 0.5em;
}
/* Emphasis */
.markdown-content strong {
font-weight: 600;
}
.markdown-content em {
font-style: italic;
}
.markdown-content del {
text-decoration: line-through;
}
/* Dark mode adjustments for markdown content - now handled by CSS variables */
@media (prefers-color-scheme: dark) {
.markdown-content code {
background-color: var(--mud-palette-action-disabled-background);
}
.markdown-content th,
.markdown-content td {
border-color: rgba(255, 255, 255, 0.12);
}
.markdown-content th {
background-color: rgba(255, 255, 255, 0.05);
}
.markdown-content tbody tr:nth-child(even) {
background-color: rgba(255, 255, 255, 0.02);
}
.markdown-content hr {
border-top-color: rgba(255, 255, 255, 0.12);
}
}
/* End of Markdown Content Rendering */
.mud-table.mud-data-grid .mud-toolbar {
height: auto !important;
padding: 1rem
}
.mud-table.mud-data-grid .mud-toolbar-gutters {
height: auto !important;
padding: 1rem
}
.mud-table.mud-data-grid .mud-table-toolbar {
height: auto !important;
padding: 1rem
}
.mud-table.mud-data-grid .mud-table-pagination-toolbar {
height: auto !important;
padding: 0rem !important;
}
.blazor-error-boundary {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
padding: 1rem 1rem 1rem 3.7rem;
color: white;
}
.blazor-error-boundary::after {
content: "An error has occurred."
}
/* -----------------------------------------------------------
ThemeRevision Phase 2: Transitional Visual Enhancements
- Background / color / border transitions for smoother mode switch
- Unified dashboard card styling
- Navigation active / hover states (light & dark) using existing palette vars
NOTE: Keep minimal; prefer palette tokens over hard-coded colors.
----------------------------------------------------------- */
html,
body,
.mud-main-content,
.mud-drawer-content,
.mud-appbar,
.mud-paper,
.mud-typography {
transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
/* Dashboard card pattern - FLAT DESIGN */
.dashboard-card {
background: var(--mud-palette-surface);
border: 1px solid var(--mud-palette-divider);
border-radius: 8px;
padding: 1rem 1.25rem;
box-shadow: none;
display: flex;
flex-direction: column;
gap: .35rem;
transition: border-color 0.2s ease;
}
.dashboard-card:hover {
border-color: var(--mud-palette-lines-default);
}
.dashboard-card .metric-label {
color: var(--mud-palette-text-secondary);
font-size: var(--mud-typography-caption-size);
font-weight: 500;
}
.dashboard-card .metric-value {
font-size: var(--mud-typography-h4-size);
font-weight: var(--mud-typography-h4-weight);
line-height: var(--mud-typography-h4-lineheight);
}
/* Navigation active / hover (Light) */
@media (prefers-color-scheme: light) {
.mud-nav-link.active,
.mud-nav-link:focus-visible,
.mud-nav-link:hover {
background: rgba(var(--mud-palette-primary-rgb), 0.08);
color: var(--mud-palette-primary);
}
.mud-nav-link.active .mud-icon-root,
.mud-nav-link:hover .mud-icon-root {
color: var(--mud-palette-primary);
}
}
/* Navigation active / hover (Dark) */
@media (prefers-color-scheme: dark) {
.mud-nav-link.active,
.mud-nav-link:focus-visible,
.mud-nav-link:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--mud-palette-text-primary);
}
.mud-nav-link.active .mud-icon-root,
.mud-nav-link:hover .mud-icon-root {
color: var(--mud-palette-text-primary);
}
}
/* Optional navy button (temporary utility) */
.btn-navy {
background: var(--mud-palette-primary);
color: var(--mud-palette-primary-contrast-text);
}
.btn-navy:hover {
background: var(--mud-palette-primary-darken);
}
/* ============================================================
SECTION 4: APPBAR & HEADER
[CSS-SECTION-APPBAR]
============================================================
MudAppBar customization, header gradients, breadcrumbs, top navigation.
============================================================ */
/* AppBar - Uses tenant brand color if set, otherwise falls back to theme appbar background */
.app-shell-appbar.appbar-light,
.app-shell-appbar.appbar-dark {
background: var(--tenant-brand-color, var(--mud-palette-appbar-background)) !important;
/* Tenant brand color with fallback to dark charcoal (#343a40) from theme */
color: var(--mud-palette-appbar-text) !important;
/* White text */
border-bottom: none !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
/* Subtle elevation */
}
/* Ensure all elements within header use white text */
.app-shell-appbar.appbar-light *,
.app-shell-appbar.appbar-dark * {
color: var(--mud-palette-appbar-text) !important;
}
/* Override MudTextField colors in header */
.app-shell-appbar .appbar-search .mud-input-control,
.app-shell-appbar .appbar-search .mud-input,
.app-shell-appbar .appbar-search input {
color: #F1F5F9 !important;
background: rgba(255, 255, 255, 0.08) !important;
/* Subtle glass background */
border-radius: 8px !important;
padding-left: 12px !important;
}
.app-shell-appbar .appbar-search .mud-input-slot::before {
border-bottom-color: rgba(255, 255, 255, 0.2) !important;
}
.app-shell-appbar .appbar-search .mud-input-slot:hover::before {
border-bottom-color: rgba(255, 255, 255, 0.4) !important;
}
/* Header icon buttons - white icons with subtle hover */
.app-shell-appbar .header-icon-btn {
color: var(--mud-palette-appbar-text) !important;
transition: background-color 0.2s ease !important;
}
.app-shell-appbar .header-icon-btn:hover {
background-color: rgba(255, 255, 255, 0.1) !important;
/* Subtle white overlay on hover */
}
/* -----------------------------------------------------------
Professional Module Template Styles (Contacts redesign baseline)
Source: User-provided design spec (2025-09-15)
NOTE:
- Integrated with existing theme transitions.
- Uses utility classes (font-weight-medium/bold) and theme-light/dark body classes.
- Drawer width overrides ensure temporary drawers are full-width when specified.
- Avoids duplicating existing .dashboard-card & transition rules already above.
----------------------------------------------------------- */
html,
body {
transition: background-color 0.3s ease, color 0.3s ease;
}
body.theme-dark {
background-color: var(--mud-palette-background) !important;
color: var(--mud-palette-text-primary);
}
body.theme-dark .mud-main-content {
background-color: var(--mud-palette-background);
}
/* REMOVED OLD DRAWER STYLES - now handled in MODERN NAVIGATION DRAWER section (line ~3078+) */
body.theme-dark .mud-appbar {
background: var(--mud-palette-appbar-background) !important;
border-bottom: 1px solid var(--mud-palette-divider);
}
body.theme-light {
background: var(--mud-palette-background) !important;
color: var(--mud-palette-text-primary);
}
body.theme-light .mud-main-content {
background: var(--mud-palette-background) !important;
}
body.theme-light .mud-appbar {
background: var(--mud-palette-appbar-background) !important;
border-bottom: none !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
/* ========================================
HEADER MENU ICON BUTTONS
========================================
Make all icon buttons in header transparent with white icons
Fixes alignment and ensures consistent app bar appearance
CRITICAL: Uses !important to override MudBlazor inline styles
*/
/* Target all button types in header - MudIconButton and MudMenu activators */
.mud-appbar .header-icon-btn,
.mud-appbar .header-menu-btn,
.mud-appbar .header-left .mud-button-root,
.mud-appbar .header-right .mud-button-root,
.mud-appbar .header-right .mud-menu>.mud-button-root,
.mud-appbar .header-right .mud-badge .mud-menu>.mud-button-root,
.mud-appbar .header-right .mud-badge>.mud-menu>.mud-button-root,
.mud-toolbar-appbar .mud-button-root {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
border: none !important;
}
/* Hover states */
.mud-appbar .header-icon-btn:hover,
.mud-appbar .header-menu-btn:hover,
.mud-appbar .header-left .mud-button-root:hover,
.mud-appbar .header-right .mud-button-root:hover,
.mud-appbar .header-right .mud-menu>.mud-button-root:hover,
.mud-appbar .header-right .mud-badge .mud-menu>.mud-button-root:hover,
.mud-appbar .header-right .mud-badge>.mud-menu>.mud-button-root:hover,
.mud-toolbar-appbar .mud-button-root:hover {
background: rgba(255, 255, 255, 0.1) !important;
background-color: rgba(255, 255, 255, 0.1) !important;
}
/* Make all icons white - targets both direct icons and menu activator icons */
.mud-appbar .header-icon-btn .mud-icon-root,
.mud-appbar .header-menu-btn .mud-icon-root,
.mud-appbar .header-left .mud-button-root .mud-icon-root,
.mud-appbar .header-right .mud-button-root .mud-icon-root,
.mud-appbar .header-right .mud-menu>.mud-button-root .mud-icon-root,
.mud-appbar .header-right .mud-badge .mud-menu>.mud-button-root .mud-icon-root,
.mud-appbar .header-right .mud-badge>.mud-menu>.mud-button-root .mud-icon-root,
.mud-toolbar-appbar .mud-button-root .mud-icon-root,
.mud-appbar .header-icon-btn svg,
.mud-appbar .header-menu-btn svg,
.mud-appbar .header-left .mud-button-root svg,
.mud-appbar .header-right .mud-button-root svg,
.mud-appbar .header-right .mud-menu>.mud-button-root svg,
.mud-appbar .header-right .mud-badge .mud-menu>.mud-button-root svg,
.mud-appbar .header-right .mud-badge>.mud-menu>.mud-button-root svg,
.mud-toolbar-appbar .mud-button-root svg {
color: white !important;
fill: currentColor !important;
}
/* Override MudBlazor's default button styling in appbar - nuclear option */
.mud-appbar .mud-button-text,
.mud-appbar .mud-button-filled,
.mud-appbar .mud-button-outlined,
.mud-appbar .mud-icon-button-edge-start,
.mud-appbar .mud-icon-button-edge-end,
.mud-appbar .mud-stack .mud-button-root,
.mud-appbar .mud-stack .mud-icon-button {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
}
/* Make icons white in MudStack buttons too */
.mud-appbar .mud-stack .mud-button-root .mud-icon-root,
.mud-appbar .mud-stack .mud-icon-button .mud-icon-root,
.mud-appbar .mud-stack .mud-button-root svg,
.mud-appbar .mud-stack .mud-icon-button svg {
color: white !important;
fill: currentColor !important;
}
/* Ensure proper spacing between header sections */
.mud-appbar .header-left,
.mud-appbar .header-right {
display: flex;
align-items: center;
gap: 8px;
}
/* Profile dropdown: no white box – override wrapper, MudMenu activator div, and button */
.app-shell-appbar .header-right .profile-menu-wrapper,
.mud-appbar .header-right .profile-menu-wrapper {
background: transparent !important;
background-color: transparent !important;
}
.app-shell-appbar .header-right .profile-menu-wrapper .mud-menu,
.app-shell-appbar .header-right .profile-menu-wrapper .mud-menu-activator,
.mud-appbar .header-right .profile-menu-wrapper .mud-menu,
.mud-appbar .header-right .profile-menu-wrapper .mud-menu-activator {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
}
.app-shell-appbar .header-right .profile-menu-wrapper .mud-button-root,
.app-shell-appbar .header-right .profile-menu-wrapper .mud-icon-button,
.mud-appbar .header-right .profile-menu-wrapper .mud-button-root,
.mud-appbar .header-right .profile-menu-wrapper .mud-icon-button {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
border: none !important;
}
.app-shell-appbar .header-right .profile-menu-wrapper .mud-button-root:hover,
.mud-appbar .header-right .profile-menu-wrapper .mud-button-root:hover {
background: rgba(255, 255, 255, 0.1) !important;
background-color: rgba(255, 255, 255, 0.1) !important;
}
/* Higher specificity so profile dropdown wins over theme/MudBlazor */
html body .app-shell-appbar .header-right .profile-menu-wrapper .mud-menu-activator,
html body .app-shell-appbar .header-right .profile-menu-wrapper .mud-menu-activator button {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
border: none !important;
}
html body .app-shell-appbar .header-right .profile-menu-wrapper .mud-menu-activator button:hover {
background: rgba(255, 255, 255, 0.1) !important;
background-color: rgba(255, 255, 255, 0.1) !important;
}
/* App name styling */
.mud-appbar .header-left .app-name {
color: var(--mud-palette-appbar-text) !important;
font-weight: 600;
margin: 0;
padding: 0 8px;
}
.mud-appbar .header-left .header-logo-image {
max-height: 40px;
max-width: 200px;
object-fit: contain;
padding: 4px 8px;
}
body.theme-light .professional-header,
body.theme-light .dashboard-header {
background: rgba(255, 255, 255, 0.9) !important;
border: 1px solid rgba(17, 24, 39, 0.08) !important;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06) !important;
}
/* Property / module-specific styles removed; now in module.primitives.css or module.properties.css */
/* AppBar / avatar enhancements */
.professional-appbar .mud-appbar-toolbar {
padding: 0 24px;
min-height: 64px;
}
.user-avatar {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.user-info .user-role {
opacity: .7;
}
.theme-toggle,
.notification-button {
border-radius: 8px;
transition: all .2s ease;
}
.theme-toggle:hover,
.notification-button:hover {
background-color: rgba(255, 255, 255, 0.1);
}
/* Drawer variants */
.professional-drawer.mud-drawer-persistent .mud-drawer-content {
width: 280px;
}
.professional-drawer.mud-drawer-temporary .mud-drawer-content {
width: 100% !important;
max-width: none !important;
padding: 0 !important;
}
.professional-drawer .mud-drawer-content {
background: var(--mud-palette-drawer-background) !important;
border-right: 1px solid var(--mud-palette-divider) !important;
}
/* Contained drawer variant (does not cover app bar) - unified 85vw width */
.professional-drawer-contained.mud-drawer-temporary {
top: 64px;
height: calc(100vh - 64px);
--drawer-target-width: 85vw;
}
/* Apply width to all key layers to override Mud defaults */
.professional-drawer-contained.mud-drawer-temporary .mud-drawer-content,
.professional-drawer-contained.mud-drawer-temporary .mud-drawer-paper,
.professional-drawer-contained.mud-drawer-temporary.mud-drawer-right {
width: var(--drawer-target-width) !important;
max-width: var(--drawer-target-width) !important;
}
.professional-drawer-contained.mud-drawer-temporary .mud-drawer-content {
margin-left: auto;
/* anchor end (right) */
border-left: 1px solid var(--mud-palette-divider);
box-shadow: -4px 0 18px -4px rgba(0, 0, 0, 0.12);
border-top-left-radius: 16px;
border-bottom-left-radius: 16px;
overflow: hidden;
}
.professional-drawer-contained.mud-drawer-temporary .mud-drawer-paper {
margin-left: auto;
border-top-left-radius: 16px;
border-bottom-left-radius: 16px;
background: transparent;
box-shadow: none;
}
body.theme-dark .professional-drawer-contained.mud-drawer-temporary .mud-drawer-content {
border-left: 1px solid var(--mud-palette-divider);
}
/* Dark theme: ensure drawer interior matches overall dark gradient and readable foreground */
body.theme-dark .professional-drawer-contained.mud-drawer-temporary .mud-drawer-content {
background: var(--mud-palette-drawer-background) !important;
color: var(--mud-palette-text-primary);
}
body.theme-dark .professional-drawer-contained.mud-drawer-temporary .mud-drawer-content .mud-typography {
color: var(--mud-palette-text-primary);
}
body.theme-dark .professional-drawer-contained.mud-drawer-temporary .mud-drawer-content .drawer-title {
color: var(--mud-palette-text-primary);
}
/* Overlay trimmed below app bar */
.professional-drawer-contained.mud-overlay {
background: rgba(0, 0, 0, 0.25);
top: 64px;
height: calc(100vh - 64px);
}
/* If you want no overlay click shield: add pointer-events:none; above */
@media (max-width: 960px) {
.professional-drawer-contained.mud-drawer-temporary {
--drawer-target-width: 100vw;
}
.professional-drawer-contained.mud-drawer-temporary .mud-drawer-content,
.professional-drawer-contained.mud-drawer-temporary .mud-drawer-paper,
.professional-drawer-contained.mud-drawer-temporary.mud-drawer-right {
border-radius: 0;
}
.professional-drawer-contained.mud-overlay {
top: 56px;
height: calc(100vh - 56px);
}
}
.drawer-brand {
background: linear-gradient(135deg, rgba(74, 144, 226, 0.1) 0%, rgba(74, 144, 226, 0.05) 100%);
border-bottom: 1px solid rgba(74, 144, 226, 0.2);
}
.brand-icon {
background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
border-radius: var(--radius-12);
padding: 8px;
box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
}
.brand-title {
font-weight: 600;
}
.brand-subtitle {
opacity: .7;
}
.nav-brand {
display: flex;
align-items: center;
gap: .75rem;
padding: .85rem .75rem .5rem 1rem;
border-bottom: 1px solid var(--mud-palette-divider);
}
body.theme-dark .nav-brand {
border-color: rgba(255, 255, 255, 0.08);
}
body .force-dark-drawer.drawer-mini .nav-brand {
padding: .65rem .35rem;
}
body .force-dark-drawer.drawer-mini .nav-brand .brand-text {
display: none;
}
.professional-nav .nav-item {
margin: 4px 16px;
border-radius: 8px;
transition: all .2s ease;
}
.professional-nav .nav-item:hover {
background-color: rgba(74, 144, 226, 0.1);
}
.professional-nav .nav-item.active {
background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-primary-darken) 100%);
color: var(--mud-palette-primary-contrast-text);
box-shadow: 0 2px 8px rgba(var(--mud-palette-primary-rgb), 0.3);
}
/* Metric & chart cards (extended) */
.metric-card {
border-radius: 16px;
padding: 24px;
position: relative;
overflow: hidden;
transition: all .3s ease;
cursor: pointer;
}
.metric-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}
.metric-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 16px;
}
.metric-label {
font-weight: 500;
opacity: .8;
}
.metric-icon {
width: 48px;
height: 48px;
border-radius: var(--radius-12);
display: flex;
align-items: center;
justify-content: center;
color: var(--mud-palette-primary-contrast-text);
}
.customers-icon {
background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
}
.orders-icon {
background: linear-gradient(135deg, #50E3C2 0%, #3ECFA3 100%);
}
.revenue-icon {
background: linear-gradient(135deg, #F5A623 0%, #E8940F 100%);
}
.growth-icon {
background: linear-gradient(135deg, #7ED321 0%, #6BB91A 100%);
}
.metric-value {
font-weight: 700;
margin-bottom: 12px;
}
.metric-change {
display: flex;
align-items: center;
gap: 4px;
}
.metric-change.positive {
color: var(--mud-palette-success);
}
.metric-change.negative {
color: var(--mud-palette-error);
}
.change-text {
font-size: .875rem;
font-weight: 500;
}
.chart-card,
.location-card,
.revenue-chart-card {
border-radius: 16px;
padding: 24px;
transition: all .3s ease;
}
.chart-header,
.location-header,
.revenue-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 24px;
}
.chart-title,
.location-title,
.revenue-title {
font-weight: 600;
margin-bottom: 4px;
}
.chart-subtitle,
.location-subtitle,
.revenue-subtitle {
opacity: .7;
font-size: .875rem;
}
/* Location list */
.location-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.location-item {
display: flex;
flex-direction: column;
gap: 8px;
}
.location-info {
display: flex;
justify-content: space-between;
align-items: center;
}
.location-name {
font-weight: 500;
}
.location-revenue {
font-weight: 600;
color: var(--mud-palette-primary);
}
.location-progress {
display: flex;
align-items: center;
gap: 12px;
}
.progress-bar {
flex: 1;
height: 8px;
}
.progress-text {
min-width: 40px;
text-align: right;
font-weight: 500;
}
/* Revenue stats */
.revenue-stats {
margin-bottom: 24px;
}
.stat-item {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
border-radius: var(--radius-12);
background: rgba(74, 144, 226, 0.05);
border: 1px solid rgba(74, 144, 226, 0.1);
}
.stat-indicator {
width: 4px;
height: 32px;
border-radius: 2px;
}
.current-week .stat-indicator {
background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
}
.previous-week .stat-indicator {
background: linear-gradient(135deg, #50E3C2 0%, #3ECFA3 100%);
}
.stat-label {
opacity: .7;
margin-bottom: 4px;
}
.stat-value {
font-weight: 600;
}
.stat-value.negative {
color: var(--mud-palette-error);
}
.revenue-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.summary-text {
opacity: .8;
max-width: 60%;
}
/* Buttons */
.professional-button,
.action-button,
.filter-button,
.view-statements-btn {
border-radius: 8px;
font-weight: 500;
text-transform: none;
transition: all .2s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.professional-button:hover,
.action-button:hover,
.filter-button:hover,
.view-statements-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.date-picker {
min-width: 200px;
}
/* Content areas / expansion panels */
.professional-content {
border-radius: var(--detail-radius, 16px);
overflow: hidden;
}
/* Detail layout + tab utilities removed (migrated to module.primitives.css) */
.professional-expansion .mud-expand-panel {
border: none;
box-shadow: none;
}
.professional-panel {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.professional-panel:last-child {
border-bottom: none;
}
.info-section {
margin-bottom: 16px;
}
.info-label {
font-weight: 500;
opacity: .7;
margin-bottom: 4px;
}
.info-value {
font-weight: 500;
}
/* Contact list styling removed; will reappear in module.contacts.css when implemented */
.empty-state {
text-align: center;
padding: 32px;
}
/* Related items - FLAT DESIGN (matches CanvasHoldingPage pattern) */
.related-section {
position: sticky;
top: 24px;
}
.section-title {
font-weight: 600;
margin-bottom: 16px;
}
/* Flat design: white background, border, NO shadows or transforms */
.related-tile {
background: var(--mud-palette-surface);
border: 1px solid var(--mud-palette-divider);
border-radius: var(--radius-12);
padding: 20px;
transition: border-color 0.2s ease;
}
.related-tile:hover {
border-color: var(--mud-palette-lines-default);
}
.related-tile:hover {
border-color: rgba(255, 255, 255, 0.24);
}
}
.tile-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.tile-header {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
}
.tile-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: rgba(74, 144, 226, 0.1);
display: flex;
align-items: center;
justify-content: center;
}
.tile-info {
flex: 1;
}
.tile-title {
font-weight: 600;
margin-bottom: 2px;
}
.tile-description {
opacity: .7;
}
.tile-count {
display: flex;
align-items: center;
gap: 8px;
}
.count-number {
font-weight: 700;
color: var(--mud-palette-primary);
}
.chevron-icon {
opacity: .5;
transition: opacity .2s ease;
}
.related-tile:hover .chevron-icon {
opacity: 1;
}
/* Drawer styles */
.drawer-header {
background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
color: #fff;
}
.drawer-title {
font-weight: 600;
}
.drawer-subtitle {
opacity: .9;
}
.close-button {
color: #fff;
}
/* Full width drawer content */
.drawer-content-fullwidth {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
height: calc(100vh - 120px);
overflow-y: auto;
}
.items-container-fullwidth {
display: flex;
flex-direction: column;
gap: 0;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.drawer-item-fullwidth {
border-radius: 0 !important;
padding: 24px !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
transition: all .2s ease;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
box-sizing: border-box;
}
.drawer-item-fullwidth:hover {
transform: none !important;
background-color: rgba(74, 144, 226, 0.05) !important;
box-shadow: none !important;
}
.drawer-item-fullwidth:last-child {
border-bottom: none;
}
.drawer-item-fullwidth.mud-paper {
width: 100% !important;
margin: 0 !important;
}
.professional-drawer.mud-drawer-temporary .mud-drawer-content {
padding: 0 !important;
background: var(--mud-palette-drawer-background);
/* unify variant with palette */
}
.professional-drawer .mud-drawer-content .drawer-content-fullwidth {
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* Legacy drawer content (backwards compat) */
.drawer-content {
padding: 24px;
}
.items-container {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Flat design drawer items - NO shadows or transforms */
.drawer-item {
background: var(--mud-palette-surface);
border: 1px solid var(--mud-palette-divider);
border-radius: var(--radius-12);
padding: 16px;
transition: border-color 0.2s ease;
}
.drawer-item:hover {
border-color: var(--mud-palette-lines-default);
}
border-color: rgba(255, 255, 255, 0.12);
}
.drawer-item:hover {
border-color: rgba(255, 255, 255, 0.24);
}
}
.item-content {
display: flex;
align-items: center;
gap: 12px;
}
.item-avatar {
flex-shrink: 0;
}
.item-details {
flex: 1;
}
.item-title {
font-weight: 500;
margin-bottom: 2px;
}
.item-subtitle {
opacity: .7;
}
.item-menu {
opacity: .5;
transition: opacity .2s ease;
}
.drawer-item:hover .item-menu,
.drawer-item-fullwidth:hover .item-menu {
opacity: 1;
}
.empty-drawer {
text-align: center;
padding: 48px 24px;
}
.empty-icon {
opacity: .3;
margin-bottom: 16px;
}
.empty-title {
font-weight: 600;
margin-bottom: 8px;
}
.empty-subtitle {
opacity: .7;
}
/* Filters & table */
.professional-filters {
border-radius: var(--radius-12);
border: 1px solid rgba(0, 0, 0, 0.1);
}
.search-field,
.filter-select {
border-radius: 8px;
}
.professional-table {
border-radius: 16px;
overflow: hidden;
}
/* Accounts table styling removed; to be relocated into module.accounts.css */
.type-chip,
.status-chip {
font-weight: 500;
}
.action-button {
border-radius: 6px;
transition: all .2s ease;
}
.action-button:hover {
transform: scale(1.1);
}
/* ============================================================
SECTION 8: DIALOGS & MODALS
[CSS-SECTION-DIALOGS]
============================================================
MudDialog, MudPopover, MudMenu, overlay components, modal styling.
============================================================ */
/* Dialog */
.professional-dialog .mud-dialog-content {
padding: 24px;
}
.dialog-header {
display: flex;
align-items: center;
margin-bottom: 16px;
}
.dialog-title {
font-weight: 600;
}
.dialog-subtitle {
opacity: .7;
}
.dialog-field {
margin-bottom: 16px;
}
.dialog-actions {
padding: 16px 24px;
background: rgba(0, 0, 0, 0.02);
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.dialog-button {
border-radius: 8px;
font-weight: 500;
}
/* Chips */
.professional-chip {
font-weight: 500;
border-radius: 8px;
}
@media (max-width:960px) {
.metric-card {
padding: 20px;
}
.chart-card,
.location-card,
.revenue-chart-card {
padding: 20px;
}
.related-section {
position: static;
}
.revenue-footer {
flex-direction: column;
gap: 16px;
align-items: flex-start;
}
.summary-text {
max-width: 100%;
}
.drawer-item-fullwidth {
padding: 20px !important;
}
}
/* Shared transitions for interactive elements (complements earlier general transition rules) */
.metric-card,
.chart-card,
.location-card,
.revenue-chart-card,
.related-tile,
.drawer-item,
.drawer-item-fullwidth,
.professional-button,
.action-button,
.filter-button {
transition: all .3s ease;
}
/* End Professional Module Template Styles */
/* (Removed) Global Account Details Active Tile fallback.
Rely on scoped styles in ViewAccount.razor.css now that isolation works.
If regression: inspect _framework/scoped.styles.css for compiled selectors. */
/* Contained Related Items Drawer (inside content shell, not full viewport) */
.related-items-contained {
position: absolute;
top: 0;
/* full height inside content shell */
bottom: 0;
right: 0;
z-index: 30;
/* above content */
display: flex;
flex-direction: column;
background: var(--mud-palette-surface);
border: 1px solid var(--mud-palette-divider);
border-radius: 16px 0 0 16px;
box-shadow: var(--mud-elevation-8);
overflow: hidden;
backdrop-filter: blur(4px);
animation: related-drawer-in .22s ease forwards;
}
body.theme-dark .related-items-contained {
border-color: rgba(255, 255, 255, 0.08);
}
.related-items-contained .contained-scroll {
overflow-y: auto;
flex: 1 1 auto;
}
.related-items-contained-wrapper.with-overlay .related-items-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.25);
backdrop-filter: blur(2px);
animation: related-overlay-fade .18s ease forwards;
}
@keyframes related-drawer-in {
0% {
transform: translateX(8px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes related-overlay-fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@media (max-width: 960px) {
.related-items-contained {
position: fixed;
/* on small screens we allow full coverage */
inset: 0.5rem;
width: auto !important;
max-width: none !important;
border-radius: var(--radius-12);
}
.related-items-contained .contained-scroll {
max-height: calc(100vh - 6rem);
}
}
/* Documents drag-over visual feedback */
.documents-drop-zone.drag-over {
outline: 2px dashed var(--mud-palette-primary);
background-color: rgba(0, 123, 255, 0.05);
transition: background-color .15s ease-in-out;
}
/* -----------------------------------------------------------
AI Chat Dialog Styling
- Role-based bubble differentiation (user vs assistant)
- Accessible contrast in both light/dark modes
- Responsive layout & scroll padding
- Keep palette-driven; avoid hardcoded brand colors except subtle gradients
------------------------------------------------------------ */
.ai-chat-container {
display: flex;
flex-direction: column;
gap: .5rem;
padding: .5rem .25rem 1rem .25rem;
}
.ai-chat-scroll-region {
max-height: 50vh;
overflow-y: auto;
padding: .25rem .5rem 0 .5rem;
scroll-behavior: smooth;
}
/* ChatGPT-Style Full-Width Messages - DEPRECATED (conflicts with UnifiedIntelligenceChat component styles) */
/*
.chat-message,
.ai-chat-message-row {
display: flex !important;
gap: 16px !important;
width: 100% !important;
padding: 2rem 4rem !important;
max-width: none !important;
}
.chat-message.assistant,
.ai-chat-message-row.assistant {
background: rgba(248, 250, 252, 0.6) !important;
justify-content: flex-start !important;
}
.chat-message.user,
.ai-chat-message-row.user {
background: transparent !important;
flex-direction: row-reverse !important;
justify-content: flex-start !important;
}
.chat-message:hover {
background: rgba(248, 250, 252, 0.8) !important;
}
.chat-message.user:hover,
.ai-chat-message-row.user:hover {
background: rgba(255, 255, 255, 0.3) !important;
}
*/
.message-avatar,
.chat-bubble {
position: relative;
max-width: 100% !important;
border-radius: 0 !important;
font-size: 0.95rem !important;
line-height: 1.7 !important;
word-break: break-word;
box-shadow: none !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
animation: none !important;
color: var(--mud-palette-text-primary) !important;
}
.chat-message.assistant .message-avatar {
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
border-radius: 50% !important;
background: var(--mud-palette-primary) !important;
color: white !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0.75rem !important;
font-weight: 600 !important;
padding: 0 !important;
}
.chat-message.user .message-avatar {
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
border-radius: 50% !important;
background: var(--mud-palette-secondary) !important;
color: white !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0.75rem !important;
font-weight: 600 !important;
padding: 0 !important;
}
.chat-bubble+.chat-bubble {
margin-top: 0 !important;
}
.chat-bubble.user,
.chat-message.user .message-text {
color: var(--mud-palette-text-primary) !important;
}
.chat-bubble.system {
background: var(--mud-palette-info);
color: var(--mud-palette-info-contrast-text);
font-weight: 500;
}
.chat-bubble.error {
background: var(--mud-palette-error);
color: var(--mud-palette-error-contrast-text);
}
body.theme-dark .chat-bubble,
body.theme-dark .chat-message .message-text {
color: var(--mud-palette-text-primary) !important;
}
body.theme-dark .chat-message.assistant {
background: var(--mud-palette-surface) !important;
}
@media (max-width: 1200px) {
.chat-message,
.ai-chat-message-row {
padding: 2rem 2rem !important;
}
}
/* ============================================================
CONVERSATIONS / MESSAGING
Modern, full-height chat interface with proper spacing
Inspired by: Slack, Discord, Microsoft Teams
============================================================ */
/* Conversations Page - Full Height Container */
.conversations-page {
height: calc(100vh - 64px) !important;
/* Full height minus header */
padding: 0 !important;
max-width: 100% !important;
margin: 0 !important;
overflow: hidden;
}
.conversations-grid {
height: 100% !important;
margin: 0 !important;
}
/* Three-Column Layout */
.conversation-list-column,
.message-thread-column,
.details-panel-column {
height: 100% !important;
overflow: hidden;
}
.conversation-list-column {
border-right: 1px solid var(--mud-palette-divider);
background: var(--mud-palette-surface);
}
.message-thread-column {
display: flex;
flex-direction: column;
background: var(--mud-palette-background);
}
.details-panel-column {
border-left: 1px solid var(--mud-palette-divider);
background: var(--mud-palette-surface);
overflow-y: auto;
}
/* Clean card styling - no shadows, no borders (Teams-style) */
.conversations-page .mud-paper,
.conversation-list .mud-paper,
.thread-header.mud-paper,
.thread-container .mud-paper,
.message-thread .mud-paper,
.details-panel.mud-paper {
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}
@media (prefers-color-scheme: dark) {
.conversations-page .mud-paper,
.conversation-list .mud-paper,
.thread-header.mud-paper,
.thread-container .mud-paper,
.message-thread .mud-paper,
.details-panel.mud-paper {
border: none !important;
}
}
/* Thread Container - Full Height */
.thread-container {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
border: none !important;
box-shadow: none !important;
}
.thread-header {
flex-shrink: 0;
border: none !important;
border-bottom: 1px solid var(--mud-palette-divider-light) !important;
background: var(--mud-palette-background) !important;
box-shadow: none !important;
}
/* Message Thread */
.message-thread {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--mud-palette-background);
}
.message-list {
flex: 1;
overflow-y: auto;
padding: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-4);
}
/* Message Items - Clean Layout */
.message-item {
display: flex;
gap: var(--space-3);
padding: var(--space-2) 0;
align-items: flex-start;
}
.message-item:hover {
background: transparent;
}
/* Own messages - align RIGHT */
.message-item.message-own {
flex-direction: row-reverse;
justify-content: flex-start;
/* Push content to the right */
}
/* Other messages - align LEFT */
.message-item.message-other {
flex-direction: row;
justify-content: flex-start;
/* Keep content on the left */
}
.message-avatar {
flex-shrink: 0;
margin-top: 4px;
}
.message-content {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
min-width: 0;
/* Allow text to wrap */
}
.message-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-2);
margin-bottom: 4px;
}
.message-own .message-header {
flex-direction: row-reverse;
}
/* Message Bubbles - Teams Style: Filled, Rounded, No Borders */
.message-bubble {
padding: 12px 16px;
border-radius: 8px;
word-wrap: break-word;
overflow-wrap: break-word;
line-height: 1.5;
max-width: 70%;
}
/* Own Messages - Light Lavender/Purple (Teams Style) */
.message-own .message-bubble {
background: #E0D7F5 !important;
/* Light lavender - matches Teams right side */
color: #1E293B !important;
/* Dark text for contrast */
}
.message-own .message-bubble .mud-typography {
color: #1E293B !important;
}
/* Other Messages - Light Gray Fill (Teams Style) */
.message-other .message-bubble {
background: #F0F0F0 !important;
/* Very light gray - matches Teams left side */
color: #1E293B !important;
}
.message-other .message-bubble .mud-typography {
color: #1E293B !important;
}
/* Dark Mode Adjustments */
@media (prefers-color-scheme: dark) {
/* Own messages - slightly darker lavender for dark mode */
.message-own .message-bubble {
background: #4A3F6B !important;
color: #E2E8F0 !important;
}
.message-own .message-bubble .mud-typography {
color: #E2E8F0 !important;
}
/* Other messages - dark gray for dark mode */
.message-other .message-bubble {
background: rgba(255, 255, 255, 0.08) !important;
color: #E2E8F0 !important;
}
.message-other .message-bubble .mud-typography {
color: #E2E8F0 !important;
}
}
.message-sender {
font-weight: 600;
font-size: 0.875rem;
color: var(--mud-palette-text-primary) !important;
}
.message-time {
font-size: 0.75rem;
color: var(--mud-palette-text-secondary) !important;
opacity: 0.7;
}
.message-attachments {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-2);
}
/* Message Actions (Edit/Delete buttons) */
.message-actions {
display: flex;
gap: 4px;
margin-top: 8px;
opacity: 0;
transition: opacity 0.2s;
}
.message-item:hover .message-actions {
opacity: 1;
}
.message-actions .mud-icon-button {
padding: 4px;
min-width: 32px;
height: 32px;
}
/* Message Composer - Fixed Bottom */
.message-composer {
border-top: 1px solid var(--mud-palette-divider);
padding: var(--space-4);
background: var(--mud-palette-surface);
flex-shrink: 0;
}
.composer-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: var(--space-2);
}
/* ============================================================
CONVERSATION WIDGET - Floating Popover
============================================================ */
/* Backdrop - Semi-transparent overlay */
.conversation-widget-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 1299;
/* Below widget but above app content */
animation: fadeIn 0.2s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Floating Widget Container */
.conversation-widget {
position: fixed;
bottom: 24px;
right: 24px;
width: 700px;
/* Wider for two-panel layout */
height: 600px;
background: var(--mud-palette-surface);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
z-index: 1300;
display: flex;
flex-direction: column;
animation: slideUp 0.3s ease-out;
overflow: hidden;
transition: width 0.3s ease;
/* Smooth width transition when collapsing */
}
/* Single Column Width - When list is collapsed, show only chat thread */
.conversation-widget.list-collapsed {
width: 420px;
/* Single column - just enough for chat thread */
}
@keyframes slideUp {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* Expanded State - Much Wider for Better Chat Experience */
.conversation-widget.expanded {
width: 1400px;
/* Wider for spacious chat canvas */
height: 800px;
/* Taller for more messages */
right: 50%;
bottom: 50%;
transform: translate(50%, 50%);
}
/* Widget Header */
.conversation-widget .widget-header {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3);
border-bottom: 1px solid var(--mud-palette-divider-light);
background: var(--mud-palette-background);
flex-shrink: 0;
}
.conversation-widget .widget-header .mud-typography {
flex: 1;
margin: 0;
font-weight: 600;
}
/* Widget Body - Two Panel Layout */
.conversation-widget .widget-body-container {
flex: 1;
display: flex;
overflow: hidden;
}
/* Left Panel - Conversation List (Collapsible) */
.conversation-widget .widget-conversation-list {
width: 280px;
flex-shrink: 0;
border-right: 1px solid var(--mud-palette-divider-light);
overflow-y: auto;
background: var(--mud-palette-background);
transition: width 0.3s ease, opacity 0.3s ease;
}
/* Collapsed State - Hide list panel */
.conversation-widget .widget-conversation-list.collapsed {
width: 0;
opacity: 0;
overflow: hidden;
border-right: none;
}
/* Hide list when widget itself has list-collapsed class */
.conversation-widget.list-collapsed .widget-conversation-list {
width: 0;
opacity: 0;
overflow: hidden;
border-right: none;
}
/* Right Panel - Thread or Empty State */
.conversation-widget .widget-thread-panel {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--mud-palette-surface);
}
/* Thread Container within Widget */
.conversation-widget .thread-container-widget {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Empty State for Widget */
.empty-state-widget {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-6);
text-align: center;
}
/* Details Panel - Only in Expanded Mode */
.conversation-widget .widget-details-panel {
width: 300px;
flex-shrink: 0;
border-left: 1px solid var(--mud-palette-divider-light);
overflow-y: auto;
background: var(--mud-palette-background);
display: none;
/* Hidden by default */
}
/* Show details panel only when expanded */
.conversation-widget.expanded .widget-details-panel {
display: block;
}
/* OLD Widget Body - Remove or Update */
.conversation-widget .widget-body {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
}
/* Mobile Responsive */
@media (max-width: 600px) {
.conversation-widget {
bottom: 0;
right: 0;
left: 0;
width: 100% !important;
height: 100% !important;
border-radius: 0;
transform: none !important;
}
.conversation-widget.expanded {
width: 100% !important;
height: 100% !important;
right: 0;
bottom: 0;
transform: none;
}
/* On mobile, show only list OR thread (not both) */
.conversation-widget .widget-conversation-list {
width: 100%;
border-right: none;
}
/* Hide list when thread is active on mobile */
.conversation-widget .widget-thread-panel:not(.empty-state-widget)~.widget-conversation-list {
display: none;
}
}
/* Tablet Responsive */
@media (max-width: 960px) and (min-width: 601px) {
.conversation-widget {
width: 90vw;
max-width: 600px;
}
.conversation-widget.expanded {
width: 95vw;
max-width: 800px;
}
.conversation-widget .widget-conversation-list {
width: 200px;
/* Narrower on tablet */
}
}
/* Dark Mode */
@media (prefers-color-scheme: dark) {
.conversation-widget-backdrop {
background: rgba(0, 0, 0, 0.6);
}
.conversation-widget {
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
}
/* Details Panel */
.details-panel {
padding: var(--space-4);
height: 100%;
}
/* Empty State */
.empty-state {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-4);
padding: var(--space-8);
text-align: center;
}
/* Custom Scrollbar for Message List */
.message-list::-webkit-scrollbar {
width: 8px;
}
.message-list::-webkit-scrollbar-track {
background: transparent;
}
/* Typing Indicator */
.typing-indicator {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
margin-top: 8px;
}
.typing-text {
font-style: italic;
opacity: 0.7;
}
.typing-dots {
display: flex;
gap: 4px;
align-items: center;
}
.typing-dots span {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--mud-palette-text-secondary);
opacity: 0.6;
animation: typingDot 1.4s infinite ease-in-out;
}
.typing-dots span:nth-child(1) {
animation-delay: 0s;
}
.typing-dots span:nth-child(2) {
animation-delay: 0.2s;
}
.typing-dots span:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes typingDot {
0%, 60%, 100% {
transform: translateY(0);
opacity: 0.6;
}
30% {
transform: translateY(-8px);
opacity: 1;
}
}
.message-list::-webkit-scrollbar-thumb {
background: var(--mud-palette-grey-default);
border-radius: 4px;
}
.message-list::-webkit-scrollbar-thumb:hover {
background: var(--mud-palette-grey-darken);
}
/* Responsive Breakpoints */
@media (max-width: 960px) {
.message-item {
max-width: 85%;
}
.details-panel-column {
display: none;
}
}
@media (max-width: 600px) {
.message-item {
max-width: 95%;
}
.conversation-list-column {
display: none;
}
.conversations-page {
height: calc(100vh - 56px) !important;
}
}
/* Dark Mode Adjustments */
body.theme-dark .message-bubble {
background: var(--mud-palette-surface);
border-color: var(--mud-palette-divider);
}
body.theme-dark .message-own .message-bubble {
background: var(--mud-palette-primary);
border-color: var(--mud-palette-primary);
}
/* ========================================
Intelligence Chat Sidebar - Session Items
======================================== */
/* Chat session item container */
.chat-sidebar .session-item {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 6px 8px !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
cursor: pointer !important;
transition: background-color 0.15s ease !important;
position: relative !important;
}
.chat-sidebar .session-item:hover {
background-color: rgba(0, 0, 0, 0.04) !important;
}
/* Chat session title with ellipsis truncation */
.chat-sidebar .session-title {
font-size: 0.8125rem !important;
font-weight: 400 !important;
line-height: 1.4 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
flex: 1 !important;
color: var(--mud-palette-text-primary) !important;
padding-right: 8px !important;
}
.chat-sidebar .session-item:hover .session-title {
color: var(--mud-palette-primary) !important;
}
/* Ellipsis menu button */
.chat-sidebar .session-menu-btn {
opacity: 0 !important;
transition: opacity 0.15s ease !important;
margin-left: 4px !important;
flex-shrink: 0 !important;
}
.chat-sidebar .session-item:hover .session-menu-btn {
opacity: 1 !important;
}
/* Dark mode adjustments */
.mud-theme-dark .chat-sidebar .session-item:hover {
background-color: rgba(255, 255, 255, 0.06) !important;
}
@media (max-width: 960px) {
.chat-message,
.ai-chat-message-row {
padding: 1.5rem 1rem !important;
}
}
/* Chat Container Overrides */
.chat-messages-body {
padding: 0 !important;
gap: 0 !important;
}
.chat-messages-header {
padding: 1.25rem 4rem !important;
}
.chat-input-area {
padding: 1.5rem 4rem 2rem 4rem !important;
}
.chat-input-field .mud-input-control {
border-radius: 24px !important;
}
.send-button {
height: 48px !important;
border-radius: 24px !important;
padding: 0 24px !important;
}
@media (max-width: 1200px) {
.chat-messages-header {
padding: 1.25rem 2rem !important;
}
.chat-input-area {
padding: 1.5rem 2rem 2rem 2rem !important;
}
}
@media (max-width: 960px) {
.chat-messages-header {
padding: 1rem !important;
}
.chat-input-area {
padding: 1rem !important;
}
}
/* Metadata / timestamps (optional future use) */
.chat-bubble .meta {
display: block;
font-size: 10px;
opacity: .65;
margin-top: .35rem;
}
/* Subtle typing indicator dots */
.typing-indicator {
display: inline-flex;
align-items: center;
gap: 4px;
padding: .4rem .65rem;
border-radius: var(--radius-12);
background: var(--mud-palette-surface);
border: 1px solid var(--mud-palette-divider);
}
body.theme-dark .typing-indicator {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.15);
}
.typing-indicator .dot {
width: 6px;
height: 6px;
background: var(--mud-palette-primary);
border-radius: 50%;
animation: typing-bounce 1s ease-in-out infinite;
}
.typing-indicator .dot:nth-child(2) {
animation-delay: .2s;
}
.typing-indicator .dot:nth-child(3) {
animation-delay: .4s;
}
@keyframes typing-bounce {
0%,
80%,
100% {
transform: translateY(0);
opacity: .4;
}
40% {
transform: translateY(-4px);
opacity: 1;
}
}
@keyframes chat-bubble-in {
from {
transform: translateY(4px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/* Scrollbar refinement (only inside chat region) */
.ai-chat-scroll-region::-webkit-scrollbar {
width: 10px;
}
.ai-chat-scroll-region::-webkit-scrollbar-track {
background: transparent;
}
.ai-chat-scroll-region::-webkit-scrollbar-thumb {
background: rgba(var(--mud-palette-primary-rgb), 0.35);
border-radius: 8px;
border: 2px solid transparent;
background-clip: content-box;
}
.ai-chat-scroll-region:hover::-webkit-scrollbar-thumb {
background: rgba(var(--mud-palette-primary-rgb), 0.55);
}
body.theme-dark .ai-chat-scroll-region::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.25);
}
body.theme-dark .ai-chat-scroll-region:hover::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.45);
}
/* Mobile adjustments */
@media (max-width: 600px) {
.chat-bubble {
max-width: 85%;
font-size: var(--mud-typography-caption-size);
}
.ai-chat-scroll-region {
max-height: 58vh;
}
}
/* High contrast mode support (prefers-contrast more) */
@media (prefers-contrast: more) {
.chat-bubble.user {
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
}
.chat-bubble.assistant {
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15);
}
}
/* Print safety (hide dynamic elements) */
@media print {
.ai-chat-scroll-region {
max-height: none !important;
overflow: visible !important;
}
.typing-indicator {
display: none !important;
}
}
/* -----------------------------------------------------------
Global Forced Dark Drawer Fallback
Reason: MudDrawer root & descendants not always receiving component
scope attributes, causing isolated CSS to lose to theme rules.
This global block establishes the dark surface baseline; the
component's isolated CSS can layer on frosted effects.
------------------------------------------------------------ */
body .force-dark-drawer,
body .force-dark-drawer .mud-drawer-content {
background: var(--mud-palette-drawer-background) !important;
color: var(--mud-palette-text-primary) !important;
}
body .force-dark-drawer .mud-drawer-header {
background: rgba(var(--mud-palette-surface-rgb, 255, 255, 255), 0.05) !important;
border-bottom: 1px solid var(--mud-palette-divider);
}
body .force-dark-drawer .mud-divider {
border-color: var(--mud-palette-divider) !important;
}
body .force-dark-drawer .mud-nav-link {
color: var(--mud-palette-text-secondary) !important;
border-radius: 6px;
margin: 2px 4px;
}
body .force-dark-drawer .mud-nav-link:hover,
body .force-dark-drawer .mud-nav-link:focus-visible {
background: rgba(var(--mud-palette-surface-rgb, 255, 255, 255), 0.07) !important;
color: var(--mud-palette-text-primary) !important;
}
body .force-dark-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) {
background: rgba(var(--mud-palette-primary-rgb), 0.22) !important;
color: var(--mud-palette-text-primary) !important;
position: relative;
}
body .force-dark-drawer .mud-nav-link.active:not(.mud-nav-link-disabled)::after {
content: "";
position: absolute;
inset: 0 0 0 auto;
width: 3px;
background: var(--mud-palette-primary);
border-radius: 2px 0 0 2px;
}
body .force-dark-drawer .mud-nav-link .mud-icon-root {
color: var(--mud-palette-text-secondary) !important;
}
body .force-dark-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-icon-root,
body .force-dark-drawer .mud-nav-link:hover .mud-icon-root {
color: var(--mud-palette-primary) !important;
}
body .force-dark-drawer .mud-chip {
background: rgba(var(--mud-palette-primary-rgb), 0.20) !important;
color: var(--mud-palette-primary) !important;
}
body .force-dark-drawer.side-menu {
border-right: 1px solid var(--mud-palette-divider) !important;
}
body .force-dark-drawer .mud-input-root .mud-input-slot {
background: rgba(var(--mud-palette-surface-rgb, 255, 255, 255), 0.06);
}
body .force-dark-drawer .mud-input-root.mud-input-focused .mud-input-slot {
box-shadow: 0 0 0 1px var(--mud-palette-primary);
}
body .force-dark-drawer a {
color: var(--mud-palette-text-secondary) !important;
}
body .force-dark-drawer a:hover {
color: var(--mud-palette-text-primary) !important;
}
/* Global mini-mode safety: hide nav link text & prevent horizontal scroll when any force-dark drawer enters mini */
body .force-dark-drawer.drawer-mini {
overflow-x: hidden;
}
body .force-dark-drawer.drawer-mini .mud-nav-link .mud-nav-link-text,
body .force-dark-drawer.drawer-mini .mud-nav-link .menu-text {
display: none !important;
}
body .force-dark-drawer.drawer-mini .menu-link-inner {
justify-content: center;
}
body .force-dark-drawer.drawer-mini .status-chip {
display: none !important;
}
body .force-dark-drawer.drawer-mini .mud-typography {
display: none !important;
}
/* Ensure toggle button remains visible & accessible in mini mode */
body .force-dark-drawer.drawer-mini .mini-toggle-header {
position: relative;
}
body .force-dark-drawer.drawer-mini .mini-toggle-btn {
position: absolute;
top: 4px;
right: 4px;
z-index: 5;
}
body .force-dark-drawer.drawer-mini .tenant-wrapper {
padding-right: 28px;
}
/* Flex-basis control so main content hugs drawer width exactly */
body .force-dark-drawer.drawer-full {
flex: 0 0 260px;
width: 260px;
}
body .force-dark-drawer.drawer-mini {
flex: 0 0 68px;
width: 68px;
}
/* Note: --mud-drawer-width-left is set by layout / NotionNavigationMenu */
/* The actions drawer uses this variable to position itself correctly */
/* AppBar flush alignment - if AppBar internally adds left spacing using same variable pattern, provide overrides */
/* Uniform AppBar padding */
.app-shell-appbar {
padding-left: var(--shell-content-gap);
transition: padding-left .2s ease;
}
/* Flex column for right side of shell */
.app-shell-col {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-width: 0;
height: 100%;
/* Fill parent height (not viewport - parent already constrained) */
overflow: hidden;
/* Prevent overflow, children manage scroll */
/* NO margin needed for left drawer - is flex sibling, not fixed positioned */
/* RIGHT margin for global canvas panel (fixed position, always visible in mini mode) */
margin-right: 60px;
transition: margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Remove right margin when page is inside an iframe (no nested drawer) */
.in-iframe .app-shell-col {
margin-right: 0 !important;
}
/* -----------------------------------------------------------
Global Bordered Input Styling (Requested: universal bordered fields)
- Applies to all MudBlazor text / numeric / select inputs
- Provides consistent 1px border, radius, hover & focus states
- Error & disabled states override appropriately
- Opt-out: wrap an input in a parent with .no-border-input OR add the class directly
(e.g.,
)
NOTE: Placed at end of file to override earlier component or theme rules. Keep
selectors reasonably specific without !important unless necessary.
----------------------------------------------------------- */
/* GLOBAL FIX: Remove ALL default MudBlazor borders to prevent double borders */
/* MudBlazor applies borders at multiple levels - this resets everything */
/* Using highest specificity to override inline styles and MudBlazor defaults */
/* Exclude filled variants - they need borders and backgrounds */
/* CRITICAL: Also exclude outlined variants - they use fieldset borders, not element borders */
html body .mud-input:not([style*="border: none"]):not(.mud-input-filled):not(.mud-input-outlined),
html body .mud-select:not([style*="border: none"]):not(.mud-select-filled):not(.mud-select-outlined),
html body .mud-autocomplete:not([style*="border: none"]):not(.mud-autocomplete-filled):not(.mud-autocomplete-outlined),
html body .mud-numeric-field:not([style*="border: none"]):not(.mud-numeric-field-filled):not(.mud-numeric-field-outlined),
html body .mud-input-control:not([style*="border: none"]):not(.mud-input-filled):not(.mud-select-filled):not(.mud-autocomplete-filled):not(.mud-numeric-field-filled):not(.mud-input-outlined):not(.mud-select-outlined):not(.mud-autocomplete-outlined):not(.mud-numeric-field-outlined),
/* Also exclude any element that's inside an outlined variant */
html body .mud-input-outlined .mud-input:not([style*="border: none"]):not(.mud-input-filled),
html body .mud-select-outlined .mud-input:not([style*="border: none"]):not(.mud-select-filled),
html body .mud-select-outlined .mud-input-control:not([style*="border: none"]),
html body .mud-autocomplete-outlined .mud-input:not([style*="border: none"]):not(.mud-autocomplete-filled),
html body .mud-numeric-field-outlined .mud-input:not([style*="border: none"]):not(.mud-numeric-field-filled) {
border: none !important;
background-color: transparent !important;
}
/* CRITICAL: Make outlined input slots transparent by default - must come before other rules */
html body .mud-input-slot:not([style*="border: none"]),
html body .mud-select:not(.mud-select-filled) .mud-input-slot:not([style*="border: none"]),
html body .mud-autocomplete:not(.mud-autocomplete-filled) .mud-input-slot:not([style*="border: none"]),
html body .mud-numeric-field:not(.mud-numeric-field-filled) .mud-input-slot:not([style*="border: none"]),
html body .mud-input-root.mud-input-outlined:not(.mud-disabled) .mud-input-slot,
html body .mud-input-root.mud-select-outlined:not(.mud-disabled) .mud-input-slot,
html body .mud-input-root.mud-autocomplete-outlined:not(.mud-disabled) .mud-input-slot,
html body .mud-input-root.mud-numeric-field-outlined:not(.mud-disabled) .mud-input-slot {
border: none !important;
box-shadow: none !important;
background-color: transparent !important;
background: transparent !important;
}
/* CRITICAL: Remove backgrounds from input control wrappers for outlined variant */
/* MudBlazor applies var(--mud-palette-surface) which is white - MUST override */
html body .mud-input-control.mud-input-outlined,
html body .mud-input-control.mud-select-outlined,
html body .mud-input-control.mud-autocomplete-outlined,
html body .mud-input-control.mud-numeric-field-outlined,
html body .mud-input-control.mud-input-outlined .mud-input-control-input-container,
html body .mud-input-control.mud-select-outlined .mud-input-control-input-container,
html body .mud-input-control.mud-autocomplete-outlined .mud-input-control-input-container,
html body .mud-input-control.mud-numeric-field-outlined .mud-input-control-input-container,
/* Target the container directly - this is where MudBlazor applies white background */
html body .mud-input-control-input-container,
html body .mud-input-control.mud-input-outlined .mud-input-control-input-container,
html body .mud-input-control.mud-select-outlined .mud-input-control-input-container,
html body .mud-input-control.mud-autocomplete-outlined .mud-input-control-input-container,
html body .mud-input-control.mud-numeric-field-outlined .mud-input-control-input-container {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
}
/* Remove backgrounds from input wrapper divs */
html body .mud-input.mud-input-outlined,
html body .mud-select.mud-select-outlined,
html body .mud-autocomplete.mud-autocomplete-outlined {
background: transparent !important;
background-color: transparent !important;
}
/* CRITICAL: Remove borders from fieldsets inside .field-readonly parents */
html body .field-readonly .mud-input fieldset,
html body .field-readonly .mud-select fieldset,
html body .field-readonly .mud-autocomplete fieldset,
html body .field-readonly .mud-numeric-field fieldset {
border: none !important;
}
/* ============================================================================
FILLED VARIANT: Outlined border + Filled background (for Edit Mode)
============================================================================ */
/* When editing: Same outline as Outlined variant, but with filled background */
/* Must override the global border removal rules above with higher specificity */
/* Apply border and background to filled inputs - override global rules */
html body .mud-input.mud-input-filled,
html body .mud-select.mud-select-filled,
html body .mud-autocomplete.mud-autocomplete-filled,
html body .mud-input-control.mud-input-filled,
html body .mud-numeric-field.mud-input-filled {
background: var(--mud-palette-surface) !important;
border: 1px solid var(--mud-palette-lines-inputs) !important;
border-radius: 4px !important;
transition: border-color .15s ease, background-color .15s ease;
box-shadow: none !important;
}
/* Ensure filled inputs have visible border on the root element */
html body .mud-input-root.mud-input-filled,
html body .mud-input-root.mud-select-filled,
html body .mud-input-root.mud-autocomplete-filled,
html body .mud-input-root.mud-numeric-field-filled {
border: 1px solid var(--mud-palette-lines-inputs) !important;
border-radius: 4px !important;
background: var(--mud-palette-surface) !important;
}
/* Ensure the input control wrapper also has border and background */
html body .mud-input-control.mud-input-filled,
html body .mud-input-control.mud-select-filled,
html body .mud-input-control.mud-autocomplete-filled,
html body .mud-input-control.mud-numeric-field-filled {
border: 1px solid var(--mud-palette-lines-inputs) !important;
border-radius: 4px !important;
background: var(--mud-palette-surface) !important;
}
html body .mud-input.mud-input-filled:hover,
html body .mud-select.mud-select-filled:hover,
html body .mud-autocomplete.mud-autocomplete-filled:hover,
html body .mud-input-control.mud-input-filled:hover,
html body .mud-numeric-field.mud-input-filled:hover {
background: var(--mud-palette-background) !important;
border-color: var(--mud-palette-lines-default) !important;
}
html body .mud-input-root.mud-input-filled:hover,
html body .mud-input-root.mud-select-filled:hover,
html body .mud-input-root.mud-autocomplete-filled:hover,
html body .mud-input-root.mud-numeric-field-filled:hover,
html body .mud-input-control.mud-input-filled:hover,
html body .mud-input-control.mud-select-filled:hover,
html body .mud-input-control.mud-autocomplete-filled:hover,
html body .mud-input-control.mud-numeric-field-filled:hover {
border-color: var(--mud-palette-lines-default) !important;
background: var(--mud-palette-background) !important;
}
html body .mud-input.mud-input-filled:focus-within,
html body .mud-select.mud-select-filled:focus-within,
html body .mud-autocomplete.mud-autocomplete-filled:focus-within,
html body .mud-input-control.mud-input-filled:focus-within,
html body .mud-numeric-field.mud-input-filled:focus-within {
background: var(--mud-palette-surface) !important;
border-color: var(--mud-palette-primary) !important;
border-width: 2px !important;
box-shadow: 0 0 0 3px rgba(var(--mud-palette-primary-rgb), 0.10) !important;
}
html body .mud-input-root.mud-input-filled:focus-within,
html body .mud-input-root.mud-select-filled:focus-within,
html body .mud-input-root.mud-autocomplete-filled:focus-within,
html body .mud-input-root.mud-numeric-field-filled:focus-within,
html body .mud-input-control.mud-input-filled:focus-within,
html body .mud-input-control.mud-select-filled:focus-within,
html body .mud-input-control.mud-autocomplete-filled:focus-within,
html body .mud-input-control.mud-numeric-field-filled:focus-within {
border-color: var(--mud-palette-primary) !important;
border-width: 2px !important;
background: var(--mud-palette-surface) !important;
}
/* Remove inner borders only for Filled variant */
body .mud-input.mud-input-filled .mud-input-slot,
body .mud-select.mud-select-filled .mud-input-slot {
border: none !important;
box-shadow: none !important;
background: transparent;
}
body .mud-input-root.mud-input-filled.mud-input-focused:not(.no-border-input) .mud-input-slot {
border: none !important;
box-shadow: none !important;
}
body .mud-input-root.mud-input-filled.mud-input-error:not(.no-border-input) .mud-input-slot {
border: none !important;
box-shadow: none;
}
body .mud-input-root.mud-disabled:not(.no-border-input) .mud-input-slot {
background: var(--mud-palette-background-grey) !important;
opacity: .9;
}
/* ============================================================================
ReadOnly Input Styling - Comprehensive Override of ALL Interactive States
MudBlazor's ReadOnly parameter sets Disabled=true, which adds mud-disabled class
============================================================================ */
/* ============================================================================
PART 1: MudBlazor Disabled State (ReadOnly) - All Input Types
============================================================================ */
/* 1. Disable ALL pointer events and interactions for disabled/readonly inputs */
html body .mud-input-root.mud-disabled,
html body .mud-select.mud-disabled,
html body .mud-autocomplete.mud-disabled,
html body .mud-numeric-field.mud-disabled,
html body .mud-input-control.mud-disabled,
html body .mud-input-root[readonly],
html body .mud-select[readonly],
html body .mud-autocomplete[readonly],
html body .mud-numeric-field[readonly],
html body .mud-input-control[readonly],
html body .mud-input-root.mud-input-readonly,
html body .mud-select.mud-input-readonly,
html body .mud-autocomplete.mud-input-readonly,
html body .mud-numeric-field.mud-input-readonly,
html body .mud-input-control.mud-input-readonly {
pointer-events: none !important;
cursor: default !important;
user-select: none !important;
}
/* 1b. Also disable pointer events on child elements */
html body .mud-input-root.mud-disabled *,
html body .mud-select.mud-disabled *,
html body .mud-autocomplete.mud-disabled *,
html body .mud-numeric-field.mud-disabled *,
html body .mud-input-control.mud-disabled *,
html body .mud-input-root[readonly] *,
html body .mud-select[readonly] *,
html body .mud-autocomplete[readonly] *,
html body .mud-numeric-field[readonly] *,
html body .mud-input-control[readonly] *,
html body .mud-input-root.mud-input-readonly *,
html body .mud-select.mud-input-readonly *,
html body .mud-autocomplete.mud-input-readonly *,
html body .mud-numeric-field.mud-input-readonly *,
html body .mud-input-control.mud-input-readonly * {
pointer-events: none !important;
cursor: default !important;
}
/* 2. Remove borders from disabled/readonly fields - clean appearance */
html body .mud-input-root.mud-disabled fieldset.mud-input-outlined-border,
html body .mud-select.mud-disabled fieldset.mud-input-outlined-border,
html body .mud-autocomplete.mud-disabled fieldset.mud-input-outlined-border,
html body .mud-numeric-field.mud-disabled fieldset.mud-input-outlined-border {
border: none !important;
border-color: transparent !important;
border-width: 0 !important;
outline: none !important;
box-shadow: none !important;
}
/* 3. Remove hover effects on disabled inputs */
html body .mud-input-root.mud-disabled:hover,
html body .mud-select.mud-disabled:hover,
html body .mud-autocomplete.mud-disabled:hover,
html body .mud-numeric-field.mud-disabled:hover {
background-color: var(--mud-palette-background) !important;
}
html body .mud-input-root.mud-disabled:hover fieldset,
html body .mud-select.mud-disabled:hover fieldset,
html body .mud-autocomplete.mud-disabled:hover fieldset,
html body .mud-numeric-field.mud-disabled:hover fieldset {
border: none !important;
}
/* 4. Remove focus states on disabled inputs */
html body .mud-input-root.mud-disabled:focus,
html body .mud-input-root.mud-disabled:focus-within,
html body .mud-select.mud-disabled:focus,
html body .mud-select.mud-disabled:focus-within,
html body .mud-autocomplete.mud-disabled:focus,
html body .mud-autocomplete.mud-disabled:focus-within,
html body .mud-numeric-field.mud-disabled:focus,
html body .mud-numeric-field.mud-disabled:focus-within {
outline: none !important;
box-shadow: none !important;
}
html body .mud-input-root.mud-disabled:focus-within fieldset,
html body .mud-select.mud-disabled:focus-within fieldset,
html body .mud-autocomplete.mud-disabled:focus-within fieldset,
html body .mud-numeric-field.mud-disabled:focus-within fieldset {
border: none !important;
}
/* 5. Hide chevron/dropdown arrow in disabled MudSelect and MudAutocomplete */
/* MudBlazor renders chevron in .mud-input-adornment-end container */
html body .mud-select.mud-disabled .mud-input-adornment-end,
html body .mud-autocomplete.mud-disabled .mud-input-adornment-end,
html body .mud-select.mud-disabled .mud-input-root .mud-input-adornment-end,
html body .mud-autocomplete.mud-disabled .mud-input-root .mud-input-adornment-end,
html body .mud-select.mud-disabled .mud-input-root-adorned-end .mud-input-adornment-end,
html body .mud-autocomplete.mud-disabled .mud-input-root-adorned-end .mud-input-adornment-end {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
/* 5b. Hide chevron icon elements specifically */
html body .mud-select.mud-disabled .mud-input-adornment-end .mud-icon-root,
html body .mud-autocomplete.mud-disabled .mud-input-adornment-end .mud-icon-root,
html body .mud-select.mud-disabled .mud-input-adornment-end i,
html body .mud-autocomplete.mud-disabled .mud-input-adornment-end i,
html body .mud-select.mud-disabled .mud-input-adornment-end svg,
html body .mud-autocomplete.mud-disabled .mud-input-adornment-end svg {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
/* 5c. Hide chevron in select input slot (alternative MudBlazor structure) */
html body .mud-select.mud-disabled .mud-select-input .mud-icon-root,
html body .mud-autocomplete.mud-disabled .mud-select-input .mud-icon-root {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
/* 5d. Hide chevron/dropdown arrow in ReadOnly MudSelect and MudAutocomplete */
/* MudBlazor's ReadOnly may not always set Disabled, so we need separate rules */
html body .mud-select[readonly] .mud-input-adornment-end,
html body .mud-autocomplete[readonly] .mud-input-adornment-end,
html body .mud-select[readonly] .mud-input-root .mud-input-adornment-end,
html body .mud-autocomplete[readonly] .mud-input-root .mud-input-adornment-end,
html body .mud-select[readonly] .mud-input-root-adorned-end .mud-input-adornment-end,
html body .mud-autocomplete[readonly] .mud-input-root-adorned-end .mud-input-adornment-end,
html body .mud-select.mud-input-readonly .mud-input-adornment-end,
html body .mud-autocomplete.mud-input-readonly .mud-input-adornment-end,
html body .mud-select.mud-input-readonly .mud-input-root .mud-input-adornment-end,
html body .mud-autocomplete.mud-input-readonly .mud-input-root .mud-input-adornment-end,
html body .mud-select.mud-input-readonly .mud-input-root-adorned-end .mud-input-adornment-end,
html body .mud-autocomplete.mud-input-readonly .mud-input-root-adorned-end .mud-input-adornment-end {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
/* 5e. Hide spinner buttons (up/down chevrons) in ALL MudNumericField components */
/* MudBlazor renders spinner buttons in .mud-input-adornment-end container for numeric fields */
/* Target all possible container structures - comprehensive coverage */
html body .mud-numeric-field .mud-input-adornment-end,
html body .mud-numeric-field .mud-input-root .mud-input-adornment-end,
html body .mud-numeric-field .mud-input-root-adorned-end .mud-input-adornment-end,
html body .mud-numeric-field .mud-input-control .mud-input-adornment-end,
html body .mud-numeric-field .mud-input-slot .mud-input-adornment-end,
html body .mud-numeric-field .mud-input-adornment,
html body .mud-numeric-field .mud-input-adornment-end .mud-button-root,
html body .mud-numeric-field .mud-input-adornment-end .mud-icon-button-root {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
/* 5f. Hide spinner button elements specifically (buttons, icons, etc.) */
/* Target buttons, icons, and any interactive elements within the adornment */
html body .mud-numeric-field .mud-input-adornment-end button,
html body .mud-numeric-field .mud-input-adornment-end .mud-button-root,
html body .mud-numeric-field .mud-input-adornment-end .mud-button,
html body .mud-numeric-field .mud-input-adornment-end .mud-icon-root,
html body .mud-numeric-field .mud-input-adornment-end i,
html body .mud-numeric-field .mud-input-adornment-end svg,
html body .mud-numeric-field .mud-input-root .mud-input-adornment-end button,
html body .mud-numeric-field .mud-input-root .mud-input-adornment-end .mud-button-root,
html body .mud-numeric-field .mud-input-root .mud-input-adornment-end .mud-button,
html body .mud-numeric-field .mud-input-root .mud-input-adornment-end .mud-icon-root,
html body .mud-numeric-field .mud-input-root-adorned-end .mud-input-adornment-end button,
html body .mud-numeric-field .mud-input-root-adorned-end .mud-input-adornment-end .mud-button-root,
html body .mud-numeric-field .mud-input-root-adorned-end .mud-input-adornment-end .mud-button,
html body .mud-numeric-field .mud-input-control .mud-input-adornment-end button,
html body .mud-numeric-field .mud-input-control .mud-input-adornment-end .mud-button-root,
html body .mud-numeric-field .mud-input-control .mud-input-adornment-end .mud-button {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
/* 5g. Hide any spinner-related containers or wrappers */
/* MudBlazor may use additional wrapper divs for the spinner buttons */
html body .mud-numeric-field .mud-numeric-field-spinner,
html body .mud-numeric-field .mud-numeric-field-buttons,
html body .mud-numeric-field [class*="spinner"],
html body .mud-numeric-field [class*="numeric-button"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
/* 5e. Hide chevron icon elements for ReadOnly selects */
html body .mud-select[readonly] .mud-input-adornment-end .mud-icon-root,
html body .mud-autocomplete[readonly] .mud-input-adornment-end .mud-icon-root,
html body .mud-select[readonly] .mud-input-adornment-end i,
html body .mud-autocomplete[readonly] .mud-input-adornment-end i,
html body .mud-select[readonly] .mud-input-adornment-end svg,
html body .mud-autocomplete[readonly] .mud-input-adornment-end svg,
html body .mud-select.mud-input-readonly .mud-input-adornment-end .mud-icon-root,
html body .mud-autocomplete.mud-input-readonly .mud-input-adornment-end .mud-icon-root,
html body .mud-select.mud-input-readonly .mud-input-adornment-end i,
html body .mud-autocomplete.mud-input-readonly .mud-input-adornment-end i,
html body .mud-select.mud-input-readonly .mud-input-adornment-end svg,
html body .mud-autocomplete.mud-input-readonly .mud-input-adornment-end svg {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
/* 5f. Hide chevron in ReadOnly select input slot */
html body .mud-select[readonly] .mud-select-input .mud-icon-root,
html body .mud-autocomplete[readonly] .mud-select-input .mud-icon-root,
html body .mud-select.mud-input-readonly .mud-select-input .mud-icon-root,
html body .mud-autocomplete.mud-input-readonly .mud-select-input .mud-icon-root {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
/* 6. Clean background for disabled inputs - subtle gray tint, full opacity for readability */
html body .mud-input-root.mud-disabled .mud-input-slot,
html body .mud-select.mud-disabled .mud-input-slot,
html body .mud-autocomplete.mud-disabled .mud-input-slot,
html body .mud-numeric-field.mud-disabled .mud-input-slot {
background-color: var(--mud-palette-background) !important;
opacity: 1 !important;
}
/* 6b. Ensure text in disabled inputs is fully readable (override MudBlazor's default opacity) */
html body .mud-input-root.mud-disabled input,
html body .mud-input-root.mud-disabled textarea,
html body .mud-select.mud-disabled input,
html body .mud-autocomplete.mud-disabled input,
html body .mud-numeric-field.mud-disabled input {
opacity: 1 !important;
color: inherit !important;
-webkit-text-fill-color: inherit !important;
}
/* 6c. Prevent text selection in readonly fields for clean appearance */
html body .mud-input-root.mud-disabled,
html body .mud-select.mud-disabled,
html body .mud-autocomplete.mud-disabled,
html body .mud-numeric-field.mud-disabled {
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
user-select: none !important;
}
/* 7. Dark mode adjustments */
html.dark body .mud-input-root.mud-disabled .mud-input-slot,
html.dark body .mud-select.mud-disabled .mud-input-slot,
html.dark body .mud-autocomplete.mud-disabled .mud-input-slot,
html.dark body .mud-numeric-field.mud-disabled .mud-input-slot {
background-color: rgba(255, 255, 255, 0.03) !important;
}
html.dark body .mud-input-root.mud-disabled input,
html.dark body .mud-input-root.mud-disabled textarea,
html.dark body .mud-select.mud-disabled input,
html.dark body .mud-autocomplete.mud-disabled input,
html.dark body .mud-numeric-field.mud-disabled input {
opacity: 1 !important;
color: inherit !important;
}
/* ============================================================================
PART 2: Legacy .field-readonly class support (backward compatibility)
============================================================================ */
/* 1. Constant background fill - matches hover color in edit mode */
html body .field-readonly.mud-input-control,
html body .field-readonly.mud-input,
html body .field-readonly.mud-numeric-field {
background: var(--mud-palette-background) !important;
}
/* 1b. Remove border from readonly fields */
html body .field-readonly .mud-input-outlined fieldset.mud-input-outlined-border,
html body .field-readonly .mud-numeric-field-outlined fieldset.mud-input-outlined-border,
html body .field-readonly fieldset.mud-input-outlined-border,
html body .field-readonly .mud-input fieldset,
html body .field-readonly .mud-numeric-field fieldset {
border: none !important;
border-color: transparent !important;
border-width: 0 !important;
outline: none !important;
box-shadow: none !important;
}
/* 2. Disable pointer events to prevent any interactions */
html body .field-readonly.mud-input-control,
html body .field-readonly.mud-numeric-field {
pointer-events: none !important;
cursor: default !important;
user-select: none !important;
}
/* 2b. Also disable pointer events on child elements */
html body .field-readonly * {
pointer-events: none !important;
cursor: default !important;
}
/* 3. Override hover state - NO border color change (though border is removed anyway) */
html body .field-readonly .mud-input-outlined:hover fieldset.mud-input-outlined-border,
html body .field-readonly .mud-numeric-field-outlined:hover fieldset.mud-input-outlined-border {
border: none !important;
}
/* 4. Override focus/focus-within state - NO border (already removed) */
html body .field-readonly .mud-input-outlined:focus-within fieldset.mud-input-outlined-border,
html body .field-readonly .mud-numeric-field-outlined:focus-within fieldset.mud-input-outlined-border,
html body .field-readonly .mud-input-control.mud-input-focused fieldset.mud-input-outlined-border,
html body .field-readonly .mud-numeric-field.mud-input-focused fieldset.mud-input-outlined-border {
border: none !important;
}
/* 5. Override input element focus state */
html body .field-readonly input:focus,
html body .field-readonly input:focus-visible {
outline: none !important;
}
/* 6. Hide chevron in field-readonly selects */
html body .field-readonly .mud-select .mud-input-adornment-end,
html body .field-readonly .mud-autocomplete .mud-input-adornment-end {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
/* 7. Dark mode - same overrides */
html.dark body .field-readonly .mud-input-slot {
background: rgba(255, 255, 255, 0.03) !important;
}
html.dark body .field-readonly .mud-input-outlined:hover fieldset.mud-input-outlined-border,
html.dark body .field-readonly .mud-numeric-field-outlined:hover fieldset.mud-input-outlined-border,
html.dark body .field-readonly .mud-input-outlined:focus-within fieldset.mud-input-outlined-border,
html.dark body .field-readonly .mud-numeric-field-outlined:focus-within fieldset.mud-input-outlined-border,
html.dark body .field-readonly .mud-input-control.mud-input-focused fieldset.mud-input-outlined-border,
html.dark body .field-readonly .mud-numeric-field.mud-input-focused fieldset.mud-input-outlined-border {
border: none !important;
}
/* Hover border accent (skip disabled) - REMOVED: Conflicts with filled input single-border pattern */
/* This was causing double borders on filled inputs by applying border-color to .mud-input-slot */
/* body .mud-input-root:not(.mud-disabled):not(.no-border-input):hover .mud-input-slot {
border-color: var(--mud-palette-primary) !important;
} */
/* Reduce vertical padding density across all inputs */
body .mud-input-root:not(.no-border-input) .mud-input-slot input,
body .mud-input-root:not(.no-border-input) .mud-input-slot textarea {
padding-top: 4px;
padding-bottom: 4px;
}
/* Opt-out helper: remove border styling when explicit no-border-input class present */
body .no-border-input .mud-input-slot {
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
/* =============================================================
Workspace Tab/Header Height (2025-09-25 stabilization)
Rationale: Previous ultra-compact override caused visual regression.
Approach: Use variable --ws-tabs-height (default 42px) for toolbar
and related headers; provide consistent underline & flush
alignment with action panel header.
============================================================= */
:root {
--ws-tabs-height: 42px;
}
/* Strengthened global selectors (post removal of isolated overrides) */
.module-workspace-page .module-tabs.mud-tabs,
.module-workspace-page .custom-tabs.mud-tabs {
--_ws-toolbar-pad-x: .55rem;
--_ws-tab-pad-x: .95rem;
}
.module-workspace-page .module-tabs .mud-tabs-tabbar,
.module-workspace-page .custom-tabs .mud-tabs-tabbar {
height: var(--ws-tabs-height);
min-height: var(--ws-tabs-height);
box-shadow: none;
border-bottom: none !important;
/* Remove MudBlazor's default border - toolbar has the only border */
}
.module-workspace-page .module-tabs .mud-tabs-tabbar-inner,
.module-workspace-page .custom-tabs .mud-tabs-tabbar-inner {
height: 100%;
align-items: stretch;
}
.module-workspace-page .module-tabs .mud-tabs-tabbar-content,
.module-workspace-page .custom-tabs .mud-tabs-tabbar-content {
height: 100%;
}
.module-workspace-page .module-tabs .mud-tabs-tabbar-wrapper,
.module-workspace-page .custom-tabs .mud-tabs-tabbar-wrapper {
height: 100%;
display: flex;
align-items: stretch;
}
.module-workspace-page .module-tabs .mud-tab,
.module-workspace-page .custom-tabs .mud-tab {
display: flex;
align-items: center;
justify-content: flex-start;
text-align: left;
border-radius: var(--radius-12) var(--radius-12) 0 0;
transition: all 0.2s ease;
}
.module-workspace-page .module-tabs .mud-tabs-toolbar,
.module-workspace-page .custom-tabs .mud-tabs-toolbar {
min-height: var(--ws-tabs-height) !important;
padding: 0 var(--_ws-toolbar-pad-x) 0 var(--_ws-toolbar-pad-x) !important;
display: flex;
align-items: center;
gap: .25rem;
border-bottom: none !important;
}
.module-workspace-page .module-tabs .mud-tab,
.module-workspace-page .custom-tabs .mud-tab {
min-height: calc(var(--ws-tabs-height) - 4px) !important;
padding: .30rem var(--_ws-tab-pad-x) .28rem var(--_ws-tab-pad-x) !important;
line-height: 1.15;
font-weight: 500;
text-transform: none;
letter-spacing: .3px;
position: relative;
border-radius: var(--radius-12) var(--radius-12) 0 0;
/* Move tabs down to align their border with toolbar border */
top: 1px;
}
.module-workspace-page .module-tabs .mud-tabs-slider,
.module-workspace-page .custom-tabs .mud-tabs-slider {
display: none !important;
/* Hide the MudBlazor tab slider completely */
}
/* Global rule to hide all tab sliders */
.mud-tabs-slider {
display: none !important;
}
.module-workspace-page .module-tabs .mud-tab:not(.mud-tab-active),
.module-workspace-page .custom-tabs .mud-tab:not(.mud-tab-active) {
color: var(--mud-palette-text-secondary);
}
.module-workspace-page .module-tabs .mud-tab.mud-tab-active,
.module-workspace-page .custom-tabs .mud-tab.mud-tab-active {
color: var(--mud-palette-appbar-text) !important;
/* White text */
background: var(--tenant-brand-color, var(--mud-palette-appbar-background)) !important;
/* Tenant brand color (same as header) with fallback to dark charcoal */
/* Ensure border is at the bottom */
border-bottom: 2px solid var(--tenant-brand-color, var(--mud-palette-appbar-background)) !important;
/* Increase bottom padding by 1px to push border down */
padding-bottom: calc(.28rem + 1px) !important;
position: relative !important;
}
/* Active tab styling - margin adjustment removed to prevent double underline with slider */
/* The .mud-tabs-slider provides the underline indicator */
/* Actions headers adopt same vertical rhythm */
.module-workspace-page .actions-aside-card .actions-aside-header,
.module-workspace-page .actions-drawer-header {
min-height: var(--ws-tabs-height) !important;
padding: .30rem .65rem .30rem .65rem !important;
display: flex;
align-items: center;
}
/* -----------------------------------------------------------
Documents / File Manager Card Styling (2025-09 refinement)
- Shared styling for FolderCard & DocumentCard
- Non-destructive: relies on existing palette tokens
----------------------------------------------------------- */
/* ========================================================================
DOCUMENTS - FLAT DESIGN SYSTEM
Clean, minimal document cards matching Properties flat design
White backgrounds, subtle borders, no shadows
======================================================================== */
.file-manager-card {
position: relative;
cursor: pointer;
border: 1px solid var(--mud-palette-divider) !important;
transition: all .2s ease;
background: var(--mud-palette-surface) !important;
border-radius: var(--radius-12) !important;
box-shadow: none !important;
/* Flat design - no shadows */
}
.file-manager-card:hover {
border-color: var(--mud-palette-primary) !important;
transform: none;
/* Flat design - no elevation changes */
box-shadow: none !important;
/* Flat design - no shadows */
}
.file-manager-card.selected-card {
border: 2px solid var(--mud-palette-primary) !important;
background: rgba(var(--mud-palette-primary-rgb), 0.02) !important;
box-shadow: none !important;
/* Flat design - no shadows */
}
.file-manager-card .file-media {
background: var(--mud-palette-background) !important;
border: none !important;
border-radius: 8px !important;
overflow: hidden;
}
@media (prefers-color-scheme: dark) {
.file-manager-card {
background: var(--mud-palette-surface) !important;
border-color: rgba(255, 255, 255, 0.12) !important;
}
.file-manager-card:hover {
border-color: rgba(255, 255, 255, 0.24) !important;
}
.file-manager-card.selected-card {
background: rgba(var(--mud-palette-primary-rgb), 0.08) !important;
}
.file-manager-card .file-media {
background: rgba(255, 255, 255, 0.03) !important;
border-color: rgba(255, 255, 255, 0.08) !important;
}
}
.file-card-content {
position: relative;
}
.file-media-wrapper {
position: relative;
}
.file-card-title {
font-weight: 500;
color: var(--mud-palette-text-primary);
}
@media (prefers-color-scheme: dark) {
.file-card-title {
color: var(--mud-palette-text-primary);
}
}
.file-card-meta {
display: flex;
flex-wrap: wrap;
gap: .6rem 1rem;
font-size: var(--mud-typography-caption-size);
color: var(--mud-palette-text-secondary);
}
@media (prefers-color-scheme: dark) {
.file-card-meta {
color: var(--mud-palette-text-secondary);
}
}
.file-manager-card .doc-thumb {
width: 100%;
height: 100%;
object-fit: cover;
}
.file-manager-card:focus-visible {
outline: 2px solid var(--mud-palette-primary);
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(var(--mud-palette-primary-rgb), 0.2);
}
.selection-indicator {
position: absolute;
top: 8px;
right: 8px;
background: var(--mud-palette-surface);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
color: var(--mud-palette-primary);
border: 2px solid var(--mud-palette-primary);
}
.file-manager-card .mud-typography.subtitle1 {
font-size: .875rem;
}
@media (max-width: 700px) {
.file-manager-card .mud-typography.subtitle1 {
font-size: .8125rem;
}
}
/* Document Browser Container Styling */
.documents-container {
background: var(--mud-palette-surface);
border: 1px solid var(--mud-palette-divider);
border-radius: var(--radius-12);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
/* File Manager Layout - Light and Airy */
.file-manager-navigation {
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(241, 245, 249, 0.8);
border-radius: var(--radius-12);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.file-manager-folders {
background: rgba(255, 255, 255, 0.6);
border: 1px solid rgba(241, 245, 249, 0.6);
border-radius: var(--radius-12);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
@media (prefers-color-scheme: dark) {
.file-manager-navigation,
.file-manager-folders {
background: rgba(var(--mud-palette-surface-rgb), 0.5);
border-color: rgba(255, 255, 255, 0.06);
}
}
/* Document Toolbar Clean Styling */
.documents-toolbar {
border-bottom: 1px solid var(--mud-palette-divider);
padding: 0.75rem 1rem;
background: var(--mud-palette-background);
}
/* Folder Navigation Flat Style */
.folder-tree-item {
border-radius: 6px;
transition: background-color 0.15s ease;
}
.folder-tree-item:hover {
background: var(--mud-palette-action-disabled-background);
}
.folder-tree-item.active {
background: rgba(var(--mud-palette-primary-rgb), 0.08);
color: var(--mud-palette-primary);
}
@media (prefers-color-scheme: dark) {
.folder-tree-item:hover {
background: rgba(255, 255, 255, 0.05);
}
.folder-tree-item.active {
background: rgba(var(--mud-palette-primary-rgb), 0.12);
}
}
/* Context Menu Accessibility */
.documents-context-menu-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1299;
background: transparent;
}
.documents-context-menu {
z-index: 1300;
}
.documents-context-menu .mud-list-item:focus-visible {
outline: 2px solid var(--mud-palette-primary);
outline-offset: -2px;
background: rgba(var(--mud-palette-primary-rgb), 0.08);
}
.documents-context-menu .mud-list-item:hover {
background: rgba(var(--mud-palette-primary-rgb), 0.04);
}
/* Table row focus state */
.documents-table-row:focus-within {
background: rgba(var(--mud-palette-primary-rgb), 0.04);
outline: 1px solid rgba(var(--mud-palette-primary-rgb), 0.3);
}
/* Button and icon button enhanced focus */
.mud-button:focus-visible,
.mud-icon-button:focus-visible {
outline: 2px solid var(--mud-palette-primary);
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(var(--mud-palette-primary-rgb), 0.15);
}
/* Search field focus enhancement */
.mud-input-control:focus-within {
box-shadow: 0 0 0 3px rgba(var(--mud-palette-primary-rgb), 0.15);
}
/* ====================================================================
Workspace Layout Global Bridge (Post-Abstraction Restoration)
Purpose: Ensure the new shared ModuleWorkspaceLayout (generic classes)
inherits the refined Property view styling even when rendered
inside a nested component (CSS isolation boundary) by mapping
generic selectors to existing property-specific rules.
NOTE: When all modules adopt the layout, migrate these into a neutral
module-workspace theme file and reduce duplication.
==================================================================== */
/* Header styling parity */
.module-workspace-page .module-integrated-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: .75rem 1.5rem .5rem 1.5rem;
background: var(--pv-bg, var(--mud-palette-background));
gap: 1rem;
}
.module-workspace-page .module-integrated-header .module-heading {
display: flex;
flex-direction: column;
gap: .25rem;
}
.module-workspace-page .module-integrated-header .module-title-text {
font-weight: 600;
letter-spacing: .25px;
}
.module-workspace-page .module-integrated-header .module-subline {
opacity: .85;
letter-spacing: .3px;
}
/* Dark Mode - Module Integrated Header Titles */
body.theme-dark .module-workspace-page .module-integrated-header .module-title-text {
color: var(--mud-palette-text-primary) !important;
}
body.theme-dark .module-workspace-page .module-integrated-header .module-subline {
color: var(--mud-palette-text-secondary) !important;
opacity: 1;
}
.module-workspace-page .module-integrated-header .module-actions-group {
display: flex;
align-items: center;
}
/* (Removed old fallback tab baseline block – consolidated earlier) */
/* Actions aside baseline */
.module-workspace-page .actions-aside-card {
background: var(--pv-surface, var(--mud-palette-surface));
border: 1px solid rgba(17, 24, 39, 0.08);
border-radius: var(--radius-12);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}
.module-workspace-page .actions-aside-card .actions-aside-header,
.module-workspace-page .actions-drawer-header {
min-height: var(--ws-tabs-height) !important;
height: var(--ws-tabs-height) !important;
padding: 0 .65rem !important;
display: flex;
align-items: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
position: sticky;
top: 0;
background: linear-gradient(135deg, var(--pv-surface, var(--mud-palette-surface)) 0%, var(--pv-bg, var(--mud-palette-background)) 140%);
z-index: 5;
}
.module-workspace-page .actions-aside-card .actions-title {
font-weight: 600;
letter-spacing: .4px;
}
/* Drawer look alignment - FIXED: Use fixed positioning to prevent drawer from shifting with page scroll */
.module-workspace-page .actions-drawer-container {
position: fixed !important;
/* CRITICAL: Fixed positioning prevents drawer from moving when page scrolls */
top: calc(var(--appbar-height, 64px) + var(--page-header-panel-height, 64px)) !important;
/* CRITICAL: Start flush at bottom of page-header-panel - AppBar + page-header-panel */
bottom: 0 !important;
left: var(--mud-drawer-width-left, 0px) !important;
/* CRITICAL: Account for navigation drawer width when expanded */
right: 280px !important;
/* Right edge aligns with Actions Panel left edge */
height: calc(100vh - var(--appbar-height, 64px) - var(--page-header-panel-height, 64px)) !important;
/* CRITICAL: Account for AppBar + page-header-panel */
max-height: calc(100vh - var(--appbar-height, 64px) - var(--page-header-panel-height, 64px)) !important;
background: var(--mud-palette-background) !important;
/* CRITICAL: Use app background color (light grey/blue #F8FAFC) instead of white surface */
border: 1px solid rgba(17, 24, 39, 0.08);
border-left: 1px solid rgba(17, 24, 39, 0.08) !important;
/* CRITICAL: Add left border to separate drawer from main content */
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
box-shadow: none !important;
/* CRITICAL: Remove shadow effect from drawer */
transform: translateX(100%) !important;
/* Start hidden: push completely off-screen to the right */
transition: transform 400ms cubic-bezier(0.4, 0.0, 0.2, 1), left 300ms ease !important;
/* Smooth slide animation + navigation drawer width changes */
z-index: 105 !important;
/* CRITICAL: Above header section (100) so drawer covers header actions, but tabs (110) remain visible */
display: flex !important;
flex-direction: column !important;
pointer-events: none !important;
overflow: hidden !important;
/* Prevent content from showing when translated */
}
.module-workspace-page.drawer-open .actions-drawer-container {
transform: translateX(0) !important;
/* Slide in from right to visible position */
pointer-events: auto !important;
}
.module-workspace-page .actions-drawer-overlay {
position: fixed !important;
/* CRITICAL: Fixed positioning to match drawer container */
top: calc(var(--appbar-height, 64px) + var(--page-header-panel-height, 64px)) !important;
/* CRITICAL: Start flush at bottom of page-header-panel - AppBar + page-header-panel */
left: var(--mud-drawer-width-left, 0px) !important;
/* CRITICAL: Account for navigation drawer width when expanded */
bottom: 0 !important;
right: 280px !important;
/* Overlay covers all content up to Actions Panel */
background: rgba(0, 0, 0, 0.12) !important;
/* Light semi-transparent overlay */
opacity: 0 !important;
transition: opacity 400ms cubic-bezier(0.4, 0.0, 0.2, 1), left 300ms ease !important;
/* Fade in/out + navigation drawer width changes */
pointer-events: none !important;
z-index: 90 !important;
/* CRITICAL: Below header section (100), breadcrumb bar (90), and drawer container (95) */
}
/* CRITICAL: Header actions (refresh, banner, etc) must be behind drawer */
.module-workspace-page .module-header-actions {
z-index: 1 !important;
/* CRITICAL: Low z-index within header section (100) stacking context - drawer (95) is below header section but above these actions */
position: relative !important;
}
/* CRITICAL: Header row container must also be behind drawer */
.module-workspace-page .module-header-row {
z-index: 1 !important;
/* CRITICAL: Low z-index within header section (100) stacking context - drawer (95) is below header section but above this row */
position: relative !important;
}
.module-workspace-page.drawer-open .actions-drawer-overlay {
opacity: 1 !important;
pointer-events: auto !important;
}
.module-workspace-page .actions-drawer-header {
background: linear-gradient(135deg, var(--pv-surface, var(--mud-palette-surface)) 0%, var(--pv-bg, var(--mud-palette-background)) 100%);
}
.module-workspace-page .actions-drawer-header .drawer-title-text {
font-weight: 600;
letter-spacing: .35px;
}
/* ============================================================
Entity Action Drawer - Global Override for MudBlazor Drawer
CRITICAL: Must override MudBlazor's default positioning
Only apply when drawer is OPEN - respect closed state
============================================================ */
/* CRITICAL: Use maximum specificity to override MudBlazor's default drawer styles */
/* CRITICAL: Only apply positioning when drawer is OPEN */
html body .entity-action-drawer.mud-drawer.mud-drawer--open,
html body .entity-action-drawer.mud-drawer.mud-drawer-temporary.mud-drawer--open,
html body .entity-action-drawer.mud-drawer.mud-drawer-fixed.mud-drawer--open,
html body .entity-action-drawer.mud-drawer.mud-drawer-pos-right.mud-drawer--open,
html body .mud-drawer.entity-action-drawer.mud-drawer--open,
html body .mud-drawer.entity-action-drawer.mud-drawer-temporary.mud-drawer--open,
html body .mud-drawer.entity-action-drawer.mud-drawer-fixed.mud-drawer--open {
/* Position is now set via MudBlazor's Style parameter in GetDrawerStyle() */
/* Only apply left/right/width/transform here - top/height come from Style parameter */
/* CRITICAL: Start from navigation drawer edge */
left: var(--mud-drawer-width-left, 0px) !important;
/* CRITICAL: Extend to right edge of viewport */
right: 0 !important;
/* CRITICAL: Full width from NavMenu to right edge - override MudBlazor's inline width */
width: calc(100vw - var(--mud-drawer-width-left, 0px)) !important;
max-width: calc(100vw - var(--mud-drawer-width-left, 0px)) !important;
min-width: calc(100vw - var(--mud-drawer-width-left, 0px)) !important;
/* CRITICAL: Ensure drawer is visible when open */
transform: translateX(0) !important;
/* CRITICAL: Ensure drawer appears above content but below dialogs */
z-index: 105 !important;
/* CRITICAL: Prevent drawer shadow from extending upward and covering breadcrumb border */
/* Override MudBlazor's elevation shadow to only cast downward */
box-shadow: 0 8px 10px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1) !important;
}
/* CRITICAL: Completely hide overlay for entity-action-drawer */
/* DisableOverlay="true" should prevent it, but if MudBlazor still renders it, hide it with CSS */
/* Target overlays that are siblings of the drawer */
html body .entity-action-drawer ~ .mud-overlay,
html body .entity-action-drawer ~ .mud-overlay-scrim,
html body .entity-action-drawer.mud-drawer--open ~ .mud-overlay,
html body .entity-action-drawer.mud-drawer--open ~ .mud-overlay-scrim,
html body .mud-overlay-scrim.mud-drawer-overlay--open:has(+ .entity-action-drawer),
html body .mud-overlay-scrim:has(+ .entity-action-drawer),
/* Target overlays that might be rendered at body level when drawer is open */
html body:has(.entity-action-drawer.mud-drawer--open) > .mud-overlay.mud-drawer-overlay,
html body:has(.entity-action-drawer.mud-drawer--open) > .mud-overlay-scrim.mud-drawer-overlay-scrim,
html body:has(.entity-action-drawer.mud-drawer--open) .mud-overlay.mud-drawer-overlay,
html body:has(.entity-action-drawer.mud-drawer--open) .mud-overlay-scrim.mud-drawer-overlay-scrim {
/* CRITICAL: Completely hide the overlay - drawer has DisableOverlay="true" */
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
z-index: -1 !important;
}
/* Light theme property token defaults (if not already defined by properties-view-page) */
.module-workspace-page {
--pv-bg: var(--pv-bg, #fafafa);
--pv-surface: var(--pv-surface, #ffffff);
--pv-border: var(--pv-border, var(--mud-palette-divider));
}
/* Dark mode inheritance */
@media (prefers-color-scheme: dark) {
.module-workspace-page {
--pv-bg: var(--mud-palette-background);
--pv-surface: var(--mud-palette-surface);
--pv-border: var(--mud-palette-divider);
}
.module-workspace-page .actions-aside-card {
border-color: rgba(255, 255, 255, 0.12);
}
.module-workspace-page .actions-drawer-container {
border-color: rgba(255, 255, 255, 0.12);
}
.module-workspace-page .actions-drawer-header {
background: linear-gradient(135deg, #1e2530 0%, #232d38 100%);
}
.module-workspace-page .actions-aside-card .actions-aside-header,
.module-workspace-page .actions-drawer-header {
border-bottom-color: rgba(255, 255, 255, 0.12);
}
.module-workspace-page .module-tabs .mud-tabs-toolbar,
.module-workspace-page .custom-tabs .mud-tabs-toolbar {
border-bottom-color: rgba(255, 255, 255, 0.12);
}
/* Unselected tabs text must be white in dark mode */
.module-workspace-page .module-tabs .mud-tab:not(.mud-tab-active),
.module-workspace-page .custom-tabs .mud-tab:not(.mud-tab-active) {
color: #ffffff !important;
}
}
/* Header action buttons baseline */
.module-workspace-page .header-actions-group .mud-button.module-action-btn {
background: var(--pv-surface, #fff);
border: 1px solid rgba(17, 24, 39, 0.10);
border-radius: var(--radius-12);
}
.module-workspace-page .header-actions-group .mud-button.module-action-btn:hover:not(.mud-disabled) {
background: rgba(17, 24, 39, 0.03);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}
/* Ensure workspace card stays visually integrated */
.module-workspace-page .module-workspace-card {
background: var(--pv-surface, var(--mud-palette-surface));
border: 1px solid rgba(17, 24, 39, 0.08);
border-radius: var(--radius-12);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}
.module-workspace-page .workspace-aside-col {
display: flex;
flex-direction: column;
}
.module-workspace-page .actions-aside-card {
border-radius: var(--radius-12);
display: flex;
flex-direction: column;
}
.module-workspace-page .actions-aside-card .actions-aside-body {
padding: .35rem .5rem 1rem .5rem;
}
.module-workspace-page .actions-aside-card .nav-pills.vertical {
gap: .5rem;
display: flex;
flex-direction: column;
}
.module-workspace-page .actions-aside-card .nav-pills.vertical .nav-pill-dark {
width: 100%;
}
/* Overlay expansion variant – 95% coverage of main region (leaves subtle context gutter) */
.module-workspace-page .workspace-main-region>.actions-drawer-container {
width: 95% !important;
max-width: 95% !important;
}
/* Vertical pill baseline (generic) */
.module-workspace-page .nav-pills.vertical .nav-pill-dark {
background: linear-gradient(135deg, #ffffff 0%, #f5f7f8 100%);
color: #37474f;
border: 1px solid #e3e6e9;
font-weight: 500;
font-size: .78rem;
letter-spacing: .35px;
min-height: 44px;
padding: .55rem .85rem;
border-radius: 8px;
}
.module-workspace-page .nav-pills.vertical .nav-pill-dark.active {
border-color: var(--mud-palette-primary);
background: linear-gradient(135deg, rgba(var(--mud-palette-primary-rgb), 0.12) 0%, rgba(var(--mud-palette-primary-rgb), 0.06) 100%);
color: var(--mud-palette-primary);
box-shadow: 0 0 0 1px var(--mud-palette-primary);
}
/* Horizontal pill fallback styling (if module opts to use NavPills instead of MudTabs later) */
.module-workspace-page .nav-pills.horizontal .nav-pill-dark.active {
box-shadow: 0 0 0 1px var(--pv-border, #d5d9dc);
}
/* ============================================================
SECTION 3: NAVIGATION & DRAWER
[CSS-SECTION-NAVIGATION]
============================================================
Navigation drawer, MudDrawer overrides, nav pills, menu styling.
MODERN NAVIGATION DRAWER (GLOBAL - MUST OVERRIDE MUDBLAZOR)
Clean, Professional Design aligned with Login screen
Updated: 2025-10-17 - CRITICAL FIX for scoped CSS issue
============================================================ */
/* ========================================================================
NAVIGATION SPACING SYSTEM - Balanced spacing with proper padding
======================================================================== */
:root {
--nav-padding-x: 16px;
--nav-padding-y: 10px;
--nav-item-margin: 4px;
--nav-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ========================================================================
Drawer Content - ENHANCED Glass Effect with Modern Shadow
======================================================================== */
/* Target the .mud-drawer itself - Light gray background matching Palmira IQ reference */
html body .mud-drawer,
html body .mud-drawer.side-menu,
html body .mud-drawer-docked.side-menu {
background: var(--mud-palette-drawer-background) !important;
/* Light gray (#f8f9fa) from theme */
background-color: var(--mud-palette-drawer-background) !important;
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08) !important;
border-right: 1px solid var(--mud-palette-divider) !important;
}
/* Also target drawer-content for redundancy */
html body .mud-drawer .mud-drawer-content,
html body .side-menu .mud-drawer-content,
html body .mud-drawer.side-menu .mud-drawer-content {
background: var(--mud-palette-drawer-background) !important;
/* Light gray (#f8f9fa) from theme */
background-color: var(--mud-palette-drawer-background) !important;
border-right: 1px solid var(--mud-palette-divider) !important;
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08) !important;
}
body.theme-dark .mud-drawer .mud-drawer-content,
body.theme-dark .side-menu .mud-drawer-content {
background: var(--mud-palette-drawer-background) !important;
/* Use theme variable for dark mode */
border-right: 1px solid var(--mud-palette-divider) !important;
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3) !important;
}
/* Drawer Header - Consistent padding */
body .side-menu .mud-drawer-header,
body .mud-drawer-header {
border-bottom: 1px solid rgba(17, 24, 39, 0.08) !important;
padding: 12px !important;
background: transparent !important;
}
body.theme-dark .side-menu .mud-drawer-header,
body.theme-dark .mud-drawer-header {
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
/* Navigation Links - Proper spacing with pill design and PERFECT ALIGNMENT */
html body .mud-drawer .mud-nav-link {
border-radius: 8px !important;
/* Rounded rectangle per reference */
margin: 0.25rem 0.5rem !important;
/* Spacing from edges */
padding: 0.625rem 1rem !important;
/* Ample vertical padding */
color: var(--mud-palette-text-primary) !important;
/* Dark gray/black for inactive items */
transition: background-color 0.2s ease, color 0.2s ease !important;
position: relative !important;
font-weight: 500 !important;
letter-spacing: 0.01em !important;
background: transparent !important;
display: flex !important;
align-items: center !important;
min-height: 40px !important;
gap: 0 !important;
}
html body .mud-drawer .mud-nav-link .mud-icon-root {
color: var(--mud-palette-text-primary) !important;
/* Dark gray/black icons for inactive items */
transition: color 0.2s ease !important;
flex-shrink: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
vertical-align: middle !important;
}
html body .mud-drawer .mud-nav-link .mud-nav-link-text {
display: inline-flex !important;
align-items: center !important;
flex: 1 !important;
vertical-align: middle !important;
}
/* Hover State - Subtle gray background */
html body .mud-drawer .mud-nav-link:not(.mud-nav-link-active):hover {
background: rgba(0, 0, 0, 0.05) !important;
/* Subtle gray on hover */
color: var(--mud-palette-text-primary) !important;
}
html body .mud-drawer .mud-nav-link:not(.mud-nav-link-active):hover .mud-icon-root {
color: var(--mud-palette-text-primary) !important;
}
/* Active State - Dark charcoal matching header */
html body .mud-drawer .mud-nav-link.active,
html body .mud-drawer .mud-nav-link.mud-ripple-active,
html body .mud-drawer .mud-nav-item.active,
html body .mud-drawer .mud-nav-item.mud-selected,
html body .mud-drawer .mud-nav-link-active {
background: var(--mud-palette-appbar-background) !important;
/* Dark charcoal matching header */
color: var(--mud-palette-appbar-text) !important;
/* White text */
font-weight: 600 !important;
border-radius: 8px !important;
/* Rounded rectangle */
}
html body .mud-drawer .mud-nav-link.active .mud-icon-root,
html body .mud-drawer .mud-nav-link.mud-ripple-active .mud-icon-root,
html body .mud-drawer .mud-nav-item.active .mud-icon-root,
html body .mud-drawer .mud-nav-item.mud-selected .mud-icon-root,
html body .mud-drawer .mud-nav-link-active .mud-icon-root {
color: var(--mud-palette-appbar-text) !important;
/* White icon */
}
html body .mud-drawer .mud-nav-link.active .mud-nav-link-text,
html body .mud-drawer .mud-nav-link.mud-ripple-active .mud-nav-link-text,
html body .mud-drawer .mud-nav-item.active .mud-nav-link-text,
html body .mud-drawer .mud-nav-item.mud-selected .mud-nav-link-text,
html body .mud-drawer .mud-nav-link-active .mud-nav-link-text {
color: var(--mud-palette-appbar-text) !important;
/* White text */
}
/* Force alignment on wrapper divs inside nav-links - NUCLEAR OPTION */
html body .mud-drawer .mud-nav-link>div,
html body .mud-drawer .mud-nav-link .d-flex,
html body .mud-drawer .mud-nav-link>.mud-nav-link-text,
html body .mud-drawer .mud-nav-link .mud-nav-link-text>div {
display: inline-flex !important;
align-items: center !important;
vertical-align: middle !important;
line-height: 1.5 !important;
flex-wrap: nowrap !important;
}
html body .mud-drawer .mud-nav-link .nav-link-text,
html body .mud-drawer .mud-nav-link .mud-nav-link-text span {
display: inline !important;
vertical-align: middle !important;
line-height: 1.5 !important;
}
/* SVG icon specific alignment */
html body .mud-drawer .mud-nav-link>.mud-icon-root,
html body .mud-drawer .mud-nav-link>svg.mud-icon-root {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
vertical-align: middle !important;
flex-shrink: 0 !important;
width: 24px !important;
height: 24px !important;
}
/* Ensure proper spacing between icon and text */
html body .mud-drawer .mud-nav-link>.mud-icon-root+.mud-nav-link-text,
html body .mud-drawer .mud-nav-link>svg.mud-icon-root+.mud-nav-link-text {
margin-left: 12px !important;
}
/* Active Indicator Bar - Removed per reference (uses background color instead) */
body .mud-nav-link.active::before,
body .mud-nav-link.mud-ripple-active::before,
body .mud-nav-item.active::before,
body .mud-nav-item.mud-selected::before,
body .mud-nav-link-active::before {
display: none !important;
/* Reference shows rounded rectangle background, not indicator bar */
}
/* Dark Mode Nav Links - Active state still matches header */
body.theme-dark .mud-nav-link {
color: var(--mud-palette-text-primary) !important;
}
body.theme-dark .mud-nav-link .mud-icon-root {
color: var(--mud-palette-text-secondary) !important;
}
body.theme-dark .mud-nav-link:not(.mud-nav-link-active):hover {
background: rgba(255, 255, 255, 0.05) !important;
/* Subtle white overlay on hover */
color: var(--mud-palette-text-primary) !important;
}
body.theme-dark .mud-nav-link:not(.mud-nav-link-active):hover .mud-icon-root {
color: var(--mud-palette-text-primary) !important;
}
body.theme-dark .mud-nav-link.active,
body.theme-dark .mud-nav-link-active {
background: var(--mud-palette-appbar-background) !important;
/* Dark charcoal matching header */
color: var(--mud-palette-appbar-text) !important;
/* White text */
border-radius: 8px !important;
}
body.theme-dark .mud-nav-link.active .mud-icon-root,
body.theme-dark .mud-nav-link-active .mud-icon-root {
color: var(--mud-palette-appbar-text) !important;
/* White icon */
}
body.theme-dark .mud-nav-link.active .mud-nav-link-text,
body.theme-dark .mud-nav-link-active .mud-nav-link-text {
color: var(--mud-palette-appbar-text) !important;
/* White text */
}
body.theme-dark .mud-nav-link.active::before,
body.theme-dark .mud-nav-link-active::before {
display: none !important;
/* No indicator bar in dark mode either */
}
/* Nav Group styling - PROPER ALIGNMENT */
body .mud-nav-group {
margin: var(--nav-item-margin) 0 !important;
}
/* Nav Group Header - align icon, text, and expand chevron */
html body .mud-drawer .mud-nav-group>.mud-nav-link {
display: flex !important;
align-items: center !important;
border-radius: var(--radius-12) !important;
margin: var(--nav-item-margin) 12px !important;
padding: var(--nav-padding-y) var(--nav-padding-x) !important;
min-height: 40px !important;
gap: 0 !important;
}
html body .mud-drawer .mud-nav-group>.mud-nav-link .mud-icon-root {
flex-shrink: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
vertical-align: middle !important;
}
html body .mud-drawer .mud-nav-group>.mud-nav-link .mud-nav-link-text {
flex: 1 !important;
display: inline-flex !important;
align-items: center !important;
vertical-align: middle !important;
}
body .nav-group-item .mud-nav-link {
padding-left: 2.5rem !important;
}
/* Nav group expand icon - constrain width to prevent button expansion */
body .mud-nav-group .mud-expand-panel-icon,
body .mud-nav-group .mud-nav-link-expand-icon {
color: var(--mud-palette-text-secondary) !important;
transition: transform 0.2s ease !important;
flex-shrink: 0 !important;
margin-left: auto !important;
width: 24px !important;
min-width: 24px !important;
max-width: 24px !important;
}
/* Section Headers - Uppercase, smaller font, dark text */
body .mud-drawer .mud-typography.subtitle2,
body .side-menu .mud-typography.subtitle2 {
color: var(--mud-palette-text-primary) !important;
/* Dark gray/black */
font-size: 0.75rem !important;
/* 12px - smaller font */
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
font-weight: 600 !important;
padding: 0.75rem 1rem 0.5rem 1rem !important;
/* Top, right, bottom, left */
}
body.theme-dark .mud-drawer .mud-typography.subtitle2,
body.theme-dark .side-menu .mud-typography.subtitle2 {
color: var(--mud-palette-text-disabled) !important;
}
/* Status Chips */
body .status-chip {
background: rgba(var(--mud-palette-primary-rgb), 0.08) !important;
color: var(--mud-palette-primary) !important;
border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.15) !important;
font-weight: 600 !important;
font-size: 0.7rem !important;
border-radius: 8px !important;
}
/* ========================================================================
MINI MODE - PERFECT CENTERED ICONS WITH PROPER SPACING
======================================================================== */
/* Center nav-links - simple and effective */
html body .mud-drawer.drawer-mini .mud-nav-link,
html body .side-menu.drawer-mini .mud-nav-link,
html body .mud-drawer.drawer-mini .mud-nav-group>.mud-nav-link,
html body .side-menu.drawer-mini .mud-nav-group>.mud-nav-link {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 10px !important;
margin: 4px 8px !important;
border-radius: var(--radius-12) !important;
}
/* Icon sizing - standard Material Design size */
html body .mud-drawer.drawer-mini .mud-nav-link .mud-icon-root,
html body .side-menu.drawer-mini .mud-nav-link .mud-icon-root,
html body .mud-drawer.drawer-mini .mud-nav-group .mud-icon-root,
html body .side-menu.drawer-mini .mud-nav-group .mud-icon-root {
width: 24px !important;
height: 24px !important;
font-size: 24px !important;
margin: 0 !important;
flex-shrink: 0 !important;
}
/* Hide text, chips, and expand icons in mini mode */
html body .mud-drawer.drawer-mini .mud-nav-link-text,
html body .side-menu.drawer-mini .mud-nav-link-text,
html body .mud-drawer.drawer-mini .nav-link-text,
html body .side-menu.drawer-mini .nav-link-text,
html body .mud-drawer.drawer-mini .status-chip,
html body .side-menu.drawer-mini .status-chip,
html body .mud-drawer.drawer-mini .mud-expand-panel-icon,
html body .side-menu.drawer-mini .mud-expand-panel-icon,
html body .mud-drawer.drawer-mini .mud-nav-link-expand-icon,
html body .side-menu.drawer-mini .mud-nav-link-expand-icon {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Mini mode nav group nested links */
html body .mud-drawer.drawer-mini .nav-group-item .mud-nav-link,
html body .side-menu.drawer-mini .nav-group-item .mud-nav-link {
padding-left: 0 !important;
}
/* Mini Toggle Animation */
body .drawer-mini,
body .drawer-full {
transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Divider */
body .side-menu .mud-divider,
body .mud-drawer .mud-divider {
border-color: rgba(17, 24, 39, 0.08) !important;
margin: 0.5rem 0 !important;
}
body.theme-dark .side-menu .mud-divider,
body.theme-dark .mud-drawer .mud-divider {
border-color: rgba(255, 255, 255, 0.08) !important;
}
/* Responsive */
@media (max-width: 960px) {
body .mud-nav-link,
body .menu-link {
font-size: 0.875rem !important;
}
}
/* ========================================================================
MINI MODE - Text hiding handled by MudBlazor Dense mode
Additional status chip hiding only
======================================================================== */
html body .mud-drawer.drawer-mini .status-chip,
html body .side-menu.drawer-mini .status-chip {
display: none !important;
}
/* END MODERN NAVIGATION */
/* Tenant Selector Styling */
.tenant-wrapper {
display: flex;
align-items: center;
width: 100%;
}
.tenant-wrapper .mud-select,
.tenant-wrapper .mud-input-control {
background: rgba(248, 250, 252, 0.6) !important;
border: 1px solid rgba(17, 24, 39, 0.08) !important;
border-radius: var(--radius-12) !important;
padding: 0.5rem !important;
}
.tenant-wrapper .mud-select:hover {
background: rgba(248, 250, 252, 0.9) !important;
border-color: rgba(17, 24, 39, 0.15) !important;
}
.tenant-wrapper .mud-input-slot {
border: none !important;
}
@media (prefers-color-scheme: dark) {
.tenant-wrapper .mud-select,
.tenant-wrapper .mud-input-control {
background: rgba(255, 255, 255, 0.05) !important;
border-color: rgba(255, 255, 255, 0.12) !important;
}
}
.appbar-search .mud-input-control {
background: rgba(255, 255, 255, 0.2) !important;
border-radius: var(--radius-12) !important;
border-color: transparent !important;
}
.appbar-search .mud-input-control:focus-within {
background: rgba(255, 255, 255, 0.3) !important;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4) !important;
}
.appbar-search input {
color: #fff !important;
}
.appbar-search input::placeholder {
color: rgba(255, 255, 255, 0.7) !important;
}
.side-menu .mud-drawer {
border-right: 1px solid var(--mud-palette-divider);
box-shadow: var(--shadow-sm);
}
.side-menu .mud-drawer-header {
border-bottom: 1px solid var(--mud-palette-divider);
padding: var(--space-4);
}
.menu-link,
.mud-nav-link {
border-radius: var(--radius-12);
transition: background-color 0.2s ease, color 0.2s ease;
margin: 0 var(--space-2);
}
.menu-link:hover,
.mud-nav-link:hover {
background: transparent;
/* Remove light blue background - active tab uses dark charcoal */
}
.menu-link.mud-nav-link-active,
.mud-nav-link-active {
background: rgba(var(--mud-palette-primary-rgb), 0.12) !important;
color: var(--mud-palette-primary) !important;
font-weight: 500;
}
.mini-toggle-header {
border-bottom: 1px solid var(--mud-palette-divider);
padding: var(--space-3);
}
.breadcrumbs-bar {
border-bottom: 1px solid var(--mud-palette-divider);
min-height: 48px;
padding: var(--space-2) var(--space-3);
background: rgba(255, 255, 255, 0.5);
}
.elevated-blur {
box-shadow: var(--shadow-sm);
backdrop-filter: blur(4px);
}
@media (prefers-color-scheme: dark) {
.breadcrumbs-bar {
background: rgba(0, 0, 0, 0.2);
border-bottom-color: var(--mud-palette-divider);
}
.side-menu .mud-drawer {
border-right-color: var(--mud-palette-divider);
}
.side-menu .mud-drawer-header,
.mini-toggle-header {
border-bottom-color: var(--mud-palette-divider);
}
}
/* --- Property Workspace Restoration Block (continued) --- */
.properties-view-page .property-tabs .mud-tab {
padding: 0 .9rem;
}
.properties-view-page .property-tabs .mud-tabs-toolbar {
box-shadow: none;
}
.properties-view-page .actions-drawer-overlay {
backdrop-filter: blur(2px);
background: rgba(0, 0, 0, .18);
}
.properties-view-page .actions-drawer-container {
box-shadow: none !important;
/* CRITICAL: Remove shadow effect from drawer */
}
.properties-view-page .actions-drawer-body {
padding: 0 !important;
/* CRITICAL: Remove padding - let content components handle their own padding */
/* CRITICAL: Ensure flex layout and overflow are preserved for chat component */
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
min-height: 0 !important;
/* CRITICAL: Allow flex children to shrink below content size */
flex: 1 1 auto !important;
/* Use auto flex-basis to allow natural sizing */
max-height: 100% !important;
/* CRITICAL: Never exceed parent height */
}
.properties-view-page .overview-skeleton {
position: absolute;
inset: 0;
padding: 1.25rem;
border-radius: var(--radius-12);
}
/* Drawer animation (re-applied globally) */
@keyframes pvDrawerIn {
0% {
transform: translateX(40px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes pvDrawerFade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.properties-view-page .actions-drawer-container {
animation: pvDrawerIn .28s cubic-bezier(.22, .8, .32, 1);
}
.properties-view-page .actions-drawer-overlay {
animation: pvDrawerFade .18s ease;
}
/* Fine border polish */
.properties-view-page .module-workspace-card {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.properties-view-page .actions-aside-card {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
@media (prefers-color-scheme: dark) {
.properties-view-page .module-workspace-card {
box-shadow: none;
}
.properties-view-page .actions-aside-card {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
}
/* Property Details Tabs - Outlined Button Style */
.property-details-tabs {
@apply w-full;
}
.property-details-tabs .mud-tabs-toolbar {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
padding: 0 !important;
margin-bottom: 24px !important;
background: transparent !important;
border: none !important;
}
.property-details-tabs .mud-tab {
padding: 8px 16px !important;
margin: 0 !important;
background: transparent !important;
border: 1px solid rgba(0, 0, 0, 0.23) !important;
border-radius: 4px !important;
min-height: 36px !important;
color: rgba(0, 0, 0, 0.87) !important;
flex: 0 0 auto !important;
box-shadow: none !important;
text-transform: none !important;
font-weight: 500 !important;
transition: all 0.2s ease !important;
}
.property-details-tabs .mud-tab:hover:not(.mud-tab-active) {
background: rgba(0, 0, 0, 0.04) !important;
border-color: rgba(0, 0, 0, 0.23) !important;
}
.property-details-tabs .mud-tab.mud-tab-active,
.property-details-tabs .mud-tab.mud-ripple-active {
background: var(--tenant-brand-color, var(--mud-palette-appbar-background)) !important;
/* Tenant brand color (same as header) with fallback to dark charcoal */
border-color: var(--tenant-brand-color, var(--mud-palette-appbar-background)) !important;
color: var(--mud-palette-appbar-text) !important;
/* White text */
}
.property-details-tabs .mud-tab-slider {
@apply hidden;
}
.property-details-tabs .mud-tabs-panels {
@apply w-full;
background: var(--mud-palette-surface) !important;
border: 1px solid var(--mud-palette-divider) !important;
border-radius: 4px !important;
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
.property-details-tabs .mud-tab {
border-color: rgba(255, 255, 255, 0.23) !important;
color: rgba(255, 255, 255, 0.87) !important;
}
.property-details-tabs .mud-tab:hover:not(.mud-tab-active) {
background: rgba(255, 255, 255, 0.08) !important;
}
.property-details-tabs .mud-tab.mud-tab-active {
background: var(--tenant-brand-color, var(--mud-palette-primary)) !important;
border-color: var(--tenant-brand-color, var(--mud-palette-primary)) !important;
color: #ffffff !important;
}
}
/* --- Workspace Polish Enhancements --- */
.module-workspace-page .module-workspace-card,
.module-workspace-page .actions-aside-card {
transition: border-radius .25s ease, box-shadow .25s ease, filter .25s ease;
}
.module-workspace-page {
--ws-header-border-color: var(--pv-border, var(--mud-palette-divider));
}
.module-workspace-page.drawer-open .actions-drawer-container {
box-shadow: none !important;
/* CRITICAL: Remove shadow effect from drawer when open */
}
.module-workspace-page .actions-drawer-header {
background: linear-gradient(135deg, var(--pv-surface, #fff) 0%, var(--pv-bg, #fafafa) 110%);
}
@media (prefers-color-scheme: dark) {
.module-workspace-page .actions-drawer-header {
background: linear-gradient(135deg, #1e2530 0%, #232d38 100%);
}
}
.module-workspace-page .actions-drawer-body {
backdrop-filter: saturate(1.05);
}
.module-workspace-page .actions-aside-card .nav-pills.vertical .nav-pill-dark {
transition: background .2s ease, box-shadow .2s ease;
}
.module-workspace-page .actions-aside-card .nav-pills.vertical .nav-pill-dark:hover:not(.active) {
background: linear-gradient(135deg, #f9fafb 0%, #f0f3f5 100%);
}
@media (prefers-color-scheme: dark) {
.module-workspace-page .actions-aside-card .nav-pills.vertical .nav-pill-dark:hover:not(.active) {
background: linear-gradient(135deg, #28313a 0%, #2f3a45 100%);
}
}
/* Flush variant: remove internal gap & radii (workspace shell gap already zero in component CSS) */
.module-workspace-page .actions-aside-card {
border-left: 1px solid var(--pv-border, var(--mud-palette-divider));
}
.module-workspace-page .module-workspace-card,
.module-workspace-page .actions-aside-card,
.module-workspace-page .actions-drawer-container {
border-radius: 0 !important;
}
/* =============================================================
Global Workspace Alignment (Unified Tab & Actions Header Baseline)
- Previously property-only (.properties-view-page) now applied to all
module workspace pages.
- Ensures: single bottom border under tabs, matching actions header
underline, synchronized vertical rhythm.
- Opt-out: add .no-global-alignment on .module-workspace-page.
NOTE: This rule is for LEGACY workspace layouts only.
New ModuleWorkspaceLayout (using .module-header-section) handles
borders via .mud-tabs-toolbar and does NOT need this rule.
============================================================= */
.module-workspace-page:not(.no-global-alignment) .workspace-main-region>.property-tabs,
.module-workspace-page:not(.no-global-alignment) .workspace-main-region>.module-tabs {
border-top: none !important;
/* border-bottom removed - handled by .mud-tabs-toolbar in new layout */
padding-top: .25rem;
padding-bottom: .30rem;
margin-top: 0;
/* Removed gap per 2025-09-25 request (tabs flush with content). Use var to re-enable if needed */
--ws-tabs-content-gap: 0;
/* consumers can override */
margin-bottom: var(--ws-tabs-content-gap);
}
.module-workspace-page:not(.no-global-alignment) .workspace-aside-col {
padding-top: 0;
}
/* Modern Component Defaults - FLAT DESIGN (no shadows) */
.mud-card:not(.legacy-flat),
.mud-paper:not(.legacy-flat),
.mud-dialog:not(.legacy-flat),
.mud-menu,
.mud-popover {
border: 1px solid var(--mud-palette-divider) !important;
border-radius: var(--radius-12) !important;
box-shadow: none !important;
/* Flat design - no shadows */
background: var(--mud-palette-surface) !important;
}
@media (prefers-color-scheme: dark) {
.mud-card:not(.legacy-flat),
.mud-paper:not(.legacy-flat),
.mud-dialog:not(.legacy-flat),
.mud-menu,
.mud-popover {
border-color: var(--mud-palette-divider) !important;
}
}
/* Fix double borders in select/autocomplete dropdowns */
/* The popover has a border, but inner content should not */
html body .mud-popover .mud-list,
html body .mud-popover .mud-picker-content,
html body .mud-menu .mud-list {
border: none !important;
}
/* GLOBAL FIX: Prevent double scrollbars in MudSelect/MudAutocomplete popovers */
/* Popover container should not scroll - only the inner list should scroll */
html body .mud-popover-paper,
html body .mud-select-popover,
html body .mud-popover {
overflow: visible !important;
max-height: none !important;
overflow-y: visible !important;
overflow-x: visible !important;
}
/* Only the inner mud-list should scroll */
html body .mud-popover .mud-list,
html body .mud-select-popover .mud-list,
html body .mud-menu .mud-list {
overflow-y: auto !important;
max-height: 300px !important;
overflow-x: hidden !important;
}
/* Hide outer container scrollbars */
html body .mud-popover-paper::-webkit-scrollbar,
html body .mud-select-popover::-webkit-scrollbar,
html body .mud-popover::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
html body .mud-popover-paper,
html body .mud-select-popover,
html body .mud-popover {
-ms-overflow-style: none !important;
scrollbar-width: none !important;
}
html body .mud-popover .mud-list-item,
html body .mud-menu .mud-list-item {
border: none !important;
}
/* Tooltip-specific styling - ensure visibility */
html body .mud-tooltip {
background-color: rgba(97, 97, 97, 0.95) !important;
color: white !important;
border: none !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
font-size: 0.875rem;
padding: 8px 12px;
}
@media (prefers-color-scheme: dark) {
html body .mud-tooltip {
background-color: rgba(66, 66, 66, 0.95) !important;
color: white !important;
}
}
/* Modern Inputs - Background and transitions only (MudBlazor Outlined variant handles borders) */
/* EXCLUDE Outlined variants - they use fieldset borders, not root borders */
/* EXCLUDE MudSelect and MudAutocomplete entirely - MudBlazor handles all select/autocomplete variants natively (Text=transparent, Filled=background, Outlined=fieldset) */
.mud-input-control:not(.legacy-flat):not(.field-readonly):not(.mud-input-outlined):not(.mud-select-outlined):not(.mud-autocomplete-outlined):not(.mud-numeric-field-outlined):not(.mud-select):not(.mud-autocomplete),
.mud-input:not(.legacy-flat):not(.field-readonly):not(.mud-input-outlined):not(.mud-select-outlined):not(.mud-autocomplete-outlined):not(.mud-numeric-field-outlined):not(.mud-select):not(.mud-autocomplete) {
background: var(--mud-palette-surface) !important;
border-radius: var(--radius-12) !important;
transition: border-color 0.2s ease, background-color 0.2s ease !important;
}
/* CRITICAL OVERRIDE: Explicitly remove backgrounds/borders from outlined variant elements */
/* These rules must come AFTER the rules above to override them */
html body .mud-input-outlined .mud-input-control,
html body .mud-select-outlined .mud-input-control,
html body .mud-autocomplete-outlined .mud-input-control,
html body .mud-numeric-field-outlined .mud-input-control,
html body .mud-input-outlined .mud-input,
html body .mud-select-outlined .mud-input,
html body .mud-autocomplete-outlined .mud-input,
html body .mud-numeric-field-outlined .mud-input,
html body .mud-input-control.mud-input-outlined,
html body .mud-input-control.mud-select-outlined,
html body .mud-input-control.mud-autocomplete-outlined,
html body .mud-input-control.mud-numeric-field-outlined,
html body .mud-input.mud-input-outlined,
html body .mud-input.mud-select-outlined,
html body .mud-input.mud-autocomplete-outlined,
html body .mud-input.mud-numeric-field-outlined,
/* Also apply to module-header inputs */
html body .module-header .mud-input-outlined .mud-input-control,
html body .module-header .mud-select-outlined .mud-input-control,
html body .module-header .mud-autocomplete-outlined .mud-input-control,
html body .module-header .mud-numeric-field-outlined .mud-input-control,
html body .module-header .mud-input-outlined .mud-input,
html body .module-header .mud-select-outlined .mud-input,
html body .module-header .mud-autocomplete-outlined .mud-input,
html body .module-header .mud-numeric-field-outlined .mud-input,
html body .module-header .mud-input-control.mud-input-outlined,
html body .module-header .mud-input-control.mud-select-outlined,
html body .module-header .mud-input-control.mud-autocomplete-outlined,
html body .module-header .mud-input-control.mud-numeric-field-outlined,
html body .module-header .mud-input.mud-input-outlined,
html body .module-header .mud-input.mud-select-outlined,
html body .module-header .mud-input.mud-autocomplete-outlined,
html body .module-header .mud-input.mud-numeric-field-outlined {
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.mud-input-control:not(.legacy-flat):not(.field-readonly):not(.mud-input-outlined):not(.mud-select-outlined):not(.mud-autocomplete-outlined):not(.mud-numeric-field-outlined):hover,
.mud-input:not(.legacy-flat):not(.field-readonly):not(.mud-input-outlined):not(.mud-select-outlined):not(.mud-autocomplete-outlined):not(.mud-numeric-field-outlined):hover,
.mud-autocomplete:not(.legacy-flat):not(.field-readonly):not(.mud-input-outlined):not(.mud-select-outlined):not(.mud-autocomplete-outlined):not(.mud-numeric-field-outlined):hover {
background: var(--mud-palette-background) !important;
}
/* DO NOT apply hover background to Text variant MudSelect - MudBlazor handles it natively */
/* CRITICAL OVERRIDE: Remove hover backgrounds from outlined variants */
html body .mud-input-outlined .mud-input-control:hover,
html body .mud-select-outlined .mud-input-control:hover,
html body .mud-autocomplete-outlined .mud-input-control:hover,
html body .mud-numeric-field-outlined .mud-input-control:hover,
html body .mud-input-outlined .mud-input:hover,
html body .mud-select-outlined .mud-input:hover,
html body .mud-autocomplete-outlined .mud-input:hover,
html body .mud-numeric-field-outlined .mud-input:hover,
html body .mud-input-control.mud-input-outlined:hover,
html body .mud-input-control.mud-select-outlined:hover,
html body .mud-input-control.mud-autocomplete-outlined:hover,
html body .mud-input-control.mud-numeric-field-outlined:hover,
/* Also apply to module-header inputs */
html body .module-header .mud-input-outlined .mud-input-control:hover,
html body .module-header .mud-select-outlined .mud-input-control:hover,
html body .module-header .mud-autocomplete-outlined .mud-input-control:hover,
html body .module-header .mud-numeric-field-outlined .mud-input-control:hover,
html body .module-header .mud-input-outlined .mud-input:hover,
html body .module-header .mud-select-outlined .mud-input:hover,
html body .module-header .mud-autocomplete-outlined .mud-input:hover,
html body .module-header .mud-numeric-field-outlined .mud-input:hover,
html body .module-header .mud-input-control.mud-input-outlined:hover,
html body .module-header .mud-input-control.mud-select-outlined:hover,
html body .module-header .mud-input-control.mud-autocomplete-outlined:hover,
html body .module-header .mud-input-control.mud-numeric-field-outlined:hover {
background: transparent !important;
}
.mud-input-control:not(.legacy-flat):not(.field-readonly):not(.mud-input-outlined):not(.mud-select-outlined):not(.mud-autocomplete-outlined):not(.mud-numeric-field-outlined):focus-within,
.mud-input:not(.legacy-flat):not(.field-readonly):not(.mud-input-outlined):not(.mud-select-outlined):not(.mud-autocomplete-outlined):not(.mud-numeric-field-outlined):focus-within,
.mud-autocomplete:not(.legacy-flat):not(.field-readonly):not(.mud-input-outlined):not(.mud-select-outlined):not(.mud-autocomplete-outlined):not(.mud-numeric-field-outlined):focus-within {
background: var(--mud-palette-surface) !important;
box-shadow: 0 0 0 3px rgba(var(--mud-palette-primary-rgb), 0.12) !important;
}
/* CRITICAL OVERRIDE: Remove focus backgrounds/shadows from outlined variants */
html body .mud-input-outlined .mud-input-control:focus-within,
html body .mud-select-outlined .mud-input-control:focus-within,
html body .mud-autocomplete-outlined .mud-input-control:focus-within,
html body .mud-numeric-field-outlined .mud-input-control:focus-within,
html body .mud-input-outlined .mud-input:focus-within,
html body .mud-select-outlined .mud-input:focus-within,
html body .mud-autocomplete-outlined .mud-input:focus-within,
html body .mud-numeric-field-outlined .mud-input:focus-within,
html body .mud-input-control.mud-input-outlined:focus-within,
html body .mud-input-control.mud-select-outlined:focus-within,
html body .mud-input-control.mud-autocomplete-outlined:focus-within,
html body .mud-input-control.mud-numeric-field-outlined:focus-within,
/* Also apply to module-header inputs */
html body .module-header .mud-input-outlined .mud-input-control:focus-within,
html body .module-header .mud-select-outlined .mud-input-control:focus-within,
html body .module-header .mud-autocomplete-outlined .mud-input-control:focus-within,
html body .module-header .mud-numeric-field-outlined .mud-input-control:focus-within,
html body .module-header .mud-input-outlined .mud-input:focus-within,
html body .module-header .mud-select-outlined .mud-input:focus-within,
html body .module-header .mud-autocomplete-outlined .mud-input:focus-within,
html body .module-header .mud-numeric-field-outlined .mud-input:focus-within,
html body .module-header .mud-input-control.mud-input-outlined:focus-within,
html body .module-header .mud-input-control.mud-select-outlined:focus-within,
html body .module-header .mud-input-control.mud-autocomplete-outlined:focus-within,
html body .module-header .mud-input-control.mud-numeric-field-outlined:focus-within {
background: transparent !important;
box-shadow: none !important;
}
@media (prefers-color-scheme: dark) {
/* EXCLUDE Outlined variants - they use fieldset borders */
/* EXCLUDE Text variant selects - MudBlazor handles these natively */
.mud-input-control:not(.legacy-flat):not(.mud-input-outlined):not(.mud-select-outlined):not(.mud-autocomplete-outlined):not(.mud-numeric-field-outlined),
.mud-input:not(.legacy-flat):not(.mud-input-outlined):not(.mud-select-outlined):not(.mud-autocomplete-outlined):not(.mud-numeric-field-outlined),
.mud-autocomplete:not(.legacy-flat):not(.mud-input-outlined):not(.mud-select-outlined):not(.mud-autocomplete-outlined):not(.mud-numeric-field-outlined) {
background: var(--mud-palette-surface) !important;
}
/* DO NOT apply background to Text variant MudSelect in dark mode - MudBlazor handles it natively */
.mud-input-control:not(.legacy-flat):not(.mud-input-outlined):not(.mud-select-outlined):not(.mud-autocomplete-outlined):not(.mud-numeric-field-outlined):hover,
.mud-input:not(.legacy-flat):not(.mud-input-outlined):not(.mud-select-outlined):not(.mud-autocomplete-outlined):not(.mud-numeric-field-outlined):hover,
.mud-autocomplete:not(.legacy-flat):not(.mud-input-outlined):not(.mud-select-outlined):not(.mud-autocomplete-outlined):not(.mud-numeric-field-outlined):hover {
background: var(--mud-palette-background) !important;
}
/* DO NOT apply hover/focus backgrounds to Text variant MudSelect - MudBlazor handles it natively */
.mud-input-control:not(.legacy-flat):not(.mud-input-outlined):not(.mud-select-outlined):not(.mud-autocomplete-outlined):not(.mud-numeric-field-outlined):focus-within,
.mud-input:not(.legacy-flat):not(.mud-input-outlined):not(.mud-select-outlined):not(.mud-autocomplete-outlined):not(.mud-numeric-field-outlined):focus-within,
.mud-autocomplete:not(.legacy-flat):not(.mud-input-outlined):not(.mud-select-outlined):not(.mud-autocomplete-outlined):not(.mud-numeric-field-outlined):focus-within {
background: var(--mud-palette-surface) !important;
}
/* CRITICAL OVERRIDE: Remove backgrounds from outlined variants in dark mode */
html body .mud-input-outlined .mud-input-control,
html body .mud-select-outlined .mud-input-control,
html body .mud-autocomplete-outlined .mud-input-control,
html body .mud-numeric-field-outlined .mud-input-control,
html body .mud-input-outlined .mud-input,
html body .mud-select-outlined .mud-input,
html body .mud-autocomplete-outlined .mud-input,
html body .mud-numeric-field-outlined .mud-input,
html body .mud-input-control.mud-input-outlined,
html body .mud-input-control.mud-select-outlined,
html body .mud-input-control.mud-autocomplete-outlined,
html body .mud-input-control.mud-numeric-field-outlined {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
}
/* Input field internal padding - reduced for better space efficiency */
.mud-input-root,
.mud-input-slot {
padding: 0.5rem 0.75rem !important;
}
/* Remove default MudBlazor inner border ONLY for Filled variant to prevent double borders */
/* Outlined variant needs the border on .mud-input-slot */
body .mud-input-filled .mud-input-slot,
body .mud-select-filled .mud-input-slot,
body .mud-autocomplete-filled .mud-input-slot,
body .mud-numeric-field-filled .mud-input-slot {
border: none !important;
box-shadow: none !important;
}
/* ============================================================================
OUTLINED VARIANT: Single border on fieldset only (MudBlazor standard)
============================================================================ */
/* MudBlazor uses