/** * BoomOS Design System – World-class CRM styling * Loaded from public/ to bypass PostCSS prefix (theme attr is on ) * Three themes: compact | professional | spacious */ /* ===== BASE: Prevent overflow & ensure uniformity ===== */ #root input, #root select, #root textarea, #root button, #boomos-admin-root input, #boomos-admin-root select, #boomos-admin-root textarea, #boomos-admin-root button, .boomos-chat-portal input, .boomos-chat-portal select, .boomos-chat-portal textarea, .boomos-chat-portal button { font-size: inherit; line-height: 1.4; } #root label, #boomos-admin-root label, .boomos-chat-portal label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #root .truncate, #root [class*="truncate"], #boomos-admin-root .truncate, #boomos-admin-root [class*="truncate"], .boomos-chat-portal .truncate, .boomos-chat-portal [class*="truncate"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #root input[type="text"], #root input[type="number"], #root select, #boomos-admin-root input[type="text"], #boomos-admin-root input[type="number"], #boomos-admin-root select, .boomos-chat-portal input[type="text"], .boomos-chat-portal input[type="number"], .boomos-chat-portal select { min-width: 0; } /* ===== THEME: COMPACT (dense, data-heavy) ===== */ html[data-boomos-theme="compact"] #root, html[data-boomos-theme="compact"] #boomos-admin-root, html[data-boomos-theme="compact"] .boomos-chat-portal { --ds-font-xs: 0.6875rem; --ds-font-sm: 0.75rem; --ds-font-base: 0.8125rem; --ds-font-md: 0.875rem; --ds-font-lg: 1rem; --ds-font-xl: 1.125rem; --ds-font-2xl: 1.25rem; --ds-space-1: 0.25rem; --ds-space-2: 0.5rem; --ds-space-3: 0.75rem; --ds-space-4: 1rem; --ds-space-5: 1.25rem; --ds-space-6: 1.5rem; --ds-radius: 0.5rem; --ds-input-py: 0.375rem; --ds-input-px: 0.5rem; } html[data-boomos-theme="compact"] #root, html[data-boomos-theme="compact"] #root *, html[data-boomos-theme="compact"] #boomos-admin-root, html[data-boomos-theme="compact"] #boomos-admin-root *, html[data-boomos-theme="compact"] .boomos-chat-portal, html[data-boomos-theme="compact"] .boomos-chat-portal * { font-size: var(--ds-font-base); } html[data-boomos-theme="compact"] #root h1, html[data-boomos-theme="compact"] #boomos-admin-root h1 { font-size: var(--ds-font-2xl); } html[data-boomos-theme="compact"] #root h2, html[data-boomos-theme="compact"] #boomos-admin-root h2 { font-size: var(--ds-font-xl); } html[data-boomos-theme="compact"] #root h3, html[data-boomos-theme="compact"] #boomos-admin-root h3 { font-size: var(--ds-font-lg); } html[data-boomos-theme="compact"] #root .text-sm, html[data-boomos-theme="compact"] #boomos-admin-root .text-sm { font-size: var(--ds-font-sm); } html[data-boomos-theme="compact"] #root .text-xs, html[data-boomos-theme="compact"] #boomos-admin-root .text-xs { font-size: var(--ds-font-xs); } html[data-boomos-theme="compact"] #root input, html[data-boomos-theme="compact"] #root select, html[data-boomos-theme="compact"] #root textarea, html[data-boomos-theme="compact"] #boomos-admin-root input, html[data-boomos-theme="compact"] #boomos-admin-root select, html[data-boomos-theme="compact"] #boomos-admin-root textarea, html[data-boomos-theme="compact"] .boomos-chat-portal input, html[data-boomos-theme="compact"] .boomos-chat-portal select, html[data-boomos-theme="compact"] .boomos-chat-portal textarea { padding: var(--ds-input-py) var(--ds-input-px); font-size: var(--ds-font-sm); } html[data-boomos-theme="compact"] #root .p-4, html[data-boomos-theme="compact"] #boomos-admin-root .p-4, html[data-boomos-theme="compact"] .boomos-chat-portal .p-4 { padding: var(--ds-space-3); } html[data-boomos-theme="compact"] #root .p-6, html[data-boomos-theme="compact"] #boomos-admin-root .p-6, html[data-boomos-theme="compact"] .boomos-chat-portal .p-6 { padding: var(--ds-space-4); } html[data-boomos-theme="compact"] #root .rounded-xl, html[data-boomos-theme="compact"] #boomos-admin-root .rounded-xl, html[data-boomos-theme="compact"] .boomos-chat-portal .rounded-xl, html[data-boomos-theme="compact"] .boomos-chat-portal .rounded-2xl { border-radius: var(--ds-radius); } /* ===== THEME: PROFESSIONAL (default, balanced) ===== */ html[data-boomos-theme="professional"] #root, html[data-boomos-theme="professional"] #boomos-admin-root, html[data-boomos-theme="professional"] .boomos-chat-portal, html:not([data-boomos-theme]) #root, html:not([data-boomos-theme]) #boomos-admin-root, html:not([data-boomos-theme]) .boomos-chat-portal { --ds-font-xs: 0.75rem; --ds-font-sm: 0.8125rem; --ds-font-base: 0.875rem; --ds-font-md: 1rem; --ds-font-lg: 1.125rem; --ds-font-xl: 1.25rem; --ds-font-2xl: 1.5rem; --ds-space-1: 0.25rem; --ds-space-2: 0.5rem; --ds-space-3: 0.75rem; --ds-space-4: 1rem; --ds-space-5: 1.25rem; --ds-space-6: 1.5rem; --ds-radius: 0.75rem; --ds-input-py: 0.5rem; --ds-input-px: 0.75rem; } /* ===== THEME: SPACIOUS (airy, premium) ===== */ html[data-boomos-theme="spacious"] #root, html[data-boomos-theme="spacious"] #boomos-admin-root, html[data-boomos-theme="spacious"] .boomos-chat-portal { --ds-font-xs: 0.8125rem; --ds-font-sm: 0.875rem; --ds-font-base: 1rem; --ds-font-md: 1.125rem; --ds-font-lg: 1.25rem; --ds-font-xl: 1.5rem; --ds-font-2xl: 1.875rem; --ds-space-1: 0.25rem; --ds-space-2: 0.5rem; --ds-space-3: 1rem; --ds-space-4: 1.25rem; --ds-space-5: 1.5rem; --ds-space-6: 2rem; --ds-radius: 1rem; --ds-input-py: 0.625rem; --ds-input-px: 1rem; } html[data-boomos-theme="spacious"] #root, html[data-boomos-theme="spacious"] #root *, html[data-boomos-theme="spacious"] #boomos-admin-root, html[data-boomos-theme="spacious"] #boomos-admin-root *, html[data-boomos-theme="spacious"] .boomos-chat-portal, html[data-boomos-theme="spacious"] .boomos-chat-portal * { font-size: var(--ds-font-base); } html[data-boomos-theme="spacious"] #root h1, html[data-boomos-theme="spacious"] #boomos-admin-root h1 { font-size: var(--ds-font-2xl); } html[data-boomos-theme="spacious"] #root h2, html[data-boomos-theme="spacious"] #boomos-admin-root h2 { font-size: var(--ds-font-xl); } html[data-boomos-theme="spacious"] #root h3, html[data-boomos-theme="spacious"] #boomos-admin-root h3 { font-size: var(--ds-font-lg); } html[data-boomos-theme="spacious"] #root .p-4, html[data-boomos-theme="spacious"] #boomos-admin-root .p-4 { padding: var(--ds-space-5); } html[data-boomos-theme="spacious"] #root .p-6, html[data-boomos-theme="spacious"] #boomos-admin-root .p-6 { padding: var(--ds-space-6); } /* ===== GLOBAL: Shared card and button tokens ===== */ #root .ds-card, #boomos-admin-root .ds-card { background: #fff; border: 1px solid #e5e7eb; border-radius: var(--ds-radius, 0.75rem); box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05); } #root .ds-card-primary, #boomos-admin-root .ds-card-primary { background: #eff6ff; border-color: #bfdbfe; } #root .ds-btn-primary, #boomos-admin-root .ds-btn-primary { background: #2563eb; color: #fff; border-radius: var(--ds-radius, 0.5rem); font-weight: 500; } #root .ds-btn-primary:hover, #boomos-admin-root .ds-btn-primary:hover { background: #1d4ed8; } /* ===== GLOBAL: Table & card overflow fixes ===== */ #root table, #boomos-admin-root table { table-layout: fixed; } #root table td, #root table th, #boomos-admin-root table td, #boomos-admin-root table th { overflow: hidden; text-overflow: ellipsis; max-width: 200px; } #root .flex-1, #boomos-admin-root .flex-1, .boomos-chat-portal .flex-1 { min-width: 0; } /* Chat portal: isolate from page layout, ensure fixed overlay (inline styles in JSX override) */ .boomos-chat-portal { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 2147483647 !important; pointer-events: none !important; isolation: isolate !important; } .boomos-chat-portal > * { pointer-events: auto !important; }