/* ========================================================================== Funeraire 360 — B2B "Professional Trust" Theme Activated when Inter font, 14px base, dense layout, professional appearance. ========================================================================== */ /* ======================================================================== Theme Token Mapping ======================================================================== */ body.platform-b2b { --color-primary: var(--b2b-primary); --color-primary-light: var(--b2b-primary-light); --color-primary-dark: var(--b2b-primary-dark); --color-secondary: var(--b2b-secondary); --color-secondary-light: var(--b2b-secondary-light); --color-accent: var(--b2b-accent); --color-accent-light: var(--b2b-accent-light); --color-bg: var(--b2b-bg); --color-surface: var(--b2b-surface); --color-surface-alt: var(--b2b-surface-alt); --color-border: var(--b2b-border); --color-border-light: var(--b2b-border-light); --color-text: var(--b2b-text); --color-text-muted: var(--b2b-text-muted); --color-text-inverse: var(--b2b-text-inverse); --color-error: var(--b2b-error); --color-error-light: var(--b2b-error-light); --color-error-dark: var(--b2b-error-dark); --color-success: var(--b2b-success); --color-success-light: var(--b2b-success-light); --color-success-dark: var(--b2b-success-dark); --color-warning: var(--b2b-warning); --color-warning-light: var(--b2b-warning-light); --color-warning-dark: var(--b2b-warning-dark); --color-info: var(--b2b-info); --color-info-light: var(--b2b-info-light); --font-family: var(--b2b-font-family); --font-family-heading: var(--b2b-font-family); --font-size-base: var(--b2b-font-size-base); --line-height-base: var(--b2b-line-height-base); --shadow-focus: 0 0 0 3px rgba(74, 111, 165, 0.3); font-family: var(--b2b-font-family); font-size: var(--b2b-font-size-base); line-height: var(--b2b-line-height-base); background-color: var(--b2b-bg); color: var(--b2b-text); } /* ======================================================================== Sidebar — Dark Navy ======================================================================== */ body.platform-b2b .sidebar { background-color: var(--b2b-primary); background-image: linear-gradient(180deg, var(--b2b-primary) 0%, var(--b2b-primary-dark) 100%); } body.platform-b2b .sidebar-header { border-bottom-color: rgba(255, 255, 255, 0.08); } body.platform-b2b .sidebar-item { color: rgba(255, 255, 255, 0.7); border-left: 3px solid transparent; margin-left: 0; margin-right: var(--space-2); padding-left: calc(var(--space-4) - 3px); border-radius: 0 var(--radius-md) var(--radius-md) 0; width: calc(100% - var(--space-2)); } body.platform-b2b .sidebar-item:hover { color: rgba(255, 255, 255, 0.95); background-color: rgba(255, 255, 255, 0.08); } /* Active item: teal left border */ body.platform-b2b .sidebar-item--active { color: #FFFFFF; background-color: rgba(42, 157, 143, 0.15); border-left-color: var(--b2b-accent); font-weight: var(--font-weight-semibold); } body.platform-b2b .sidebar-item--active .sidebar-item-icon { color: var(--b2b-accent); } body.platform-b2b .sidebar-footer { border-top-color: rgba(255, 255, 255, 0.08); } body.platform-b2b .sidebar-section-title { color: rgba(255, 255, 255, 0.4); } /* ======================================================================== Data Tables — Striped Rows ======================================================================== */ body.platform-b2b .data-table tbody tr:nth-child(even) { background-color: rgba(245, 246, 250, 0.5); } body.platform-b2b .data-table tbody tr:hover { background-color: rgba(74, 111, 165, 0.06); } body.platform-b2b .data-table thead th { background-color: #FFFFFF; font-size: var(--text-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--b2b-text-muted); border-bottom: 2px solid var(--b2b-border); } body.platform-b2b .data-table td { font-size: var(--text-sm); padding: var(--space-2) var(--space-4); } body.platform-b2b .data-table th { padding: var(--space-2) var(--space-4); } /* ======================================================================== Dense Spacing ======================================================================== */ body.platform-b2b .card-body { padding: var(--space-4); } body.platform-b2b .card-header { padding: var(--space-3) var(--space-4); } body.platform-b2b .card-footer { padding: var(--space-3) var(--space-4); } body.platform-b2b .form-group { margin-bottom: var(--space-3); } body.platform-b2b .section { margin-bottom: var(--space-4); } body.platform-b2b .kpi-card { padding: var(--space-3) var(--space-4); } /* ======================================================================== Professional Shadow Depth ======================================================================== */ body.platform-b2b .card { box-shadow: 0 1px 3px rgba(27, 42, 74, 0.08), 0 1px 2px rgba(27, 42, 74, 0.06); } body.platform-b2b .card:hover { box-shadow: 0 4px 8px rgba(27, 42, 74, 0.1), 0 2px 4px rgba(27, 42, 74, 0.06); } body.platform-b2b .modal { box-shadow: 0 20px 40px rgba(27, 42, 74, 0.2), 0 8px 16px rgba(27, 42, 74, 0.1); } body.platform-b2b .dropdown-menu { box-shadow: 0 8px 24px rgba(27, 42, 74, 0.12), 0 4px 8px rgba(27, 42, 74, 0.06); } /* ======================================================================== Buttons — B2B overrides ======================================================================== */ body.platform-b2b .btn-primary { background-color: var(--b2b-primary); border-color: var(--b2b-primary); } body.platform-b2b .btn-primary:hover { background-color: var(--b2b-primary-light); border-color: var(--b2b-primary-light); } body.platform-b2b .btn-accent { background-color: var(--b2b-accent); color: var(--b2b-text-inverse); border-color: var(--b2b-accent); } body.platform-b2b .btn-accent:hover { background-color: var(--b2b-accent-dark); border-color: var(--b2b-accent-dark); } /* ======================================================================== Top Bar — B2B Style ======================================================================== */ body.platform-b2b .top-bar { background-color: #FFFFFF; border-bottom: 1px solid var(--b2b-border-light); box-shadow: 0 1px 2px rgba(27, 42, 74, 0.04); } /* ======================================================================== Form Focus States ======================================================================== */ body.platform-b2b .input:focus, body.platform-b2b .select:focus, body.platform-b2b .textarea:focus { border-color: var(--b2b-secondary); box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.15); } body.platform-b2b .search-bar-input:focus { border-color: var(--b2b-secondary); box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.15); } /* ======================================================================== KPI Cards — B2B ======================================================================== */ body.platform-b2b .kpi-card { border-left: 3px solid var(--b2b-border-light); } body.platform-b2b .kpi-card--primary { border-left-color: var(--b2b-primary); } body.platform-b2b .kpi-card--accent { border-left-color: var(--b2b-accent); } body.platform-b2b .kpi-card--success { border-left-color: var(--b2b-success); } body.platform-b2b .kpi-card--warning { border-left-color: var(--b2b-warning); } body.platform-b2b .kpi-card--error { border-left-color: var(--b2b-error); } /* ======================================================================== Status Badges — B2B specific ======================================================================== */ body.platform-b2b .status-badge { font-size: 11px; padding: 2px var(--space-2); } /* ======================================================================== Tabs — B2B tighter ======================================================================== */ body.platform-b2b .tab-item { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); } body.platform-b2b .tab-item--active { border-bottom-color: var(--b2b-accent); color: var(--b2b-accent); } /* ======================================================================== Dossier-specific B2B Components ======================================================================== */ /* Dossier card in list view */ body.platform-b2b .dossier-card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--b2b-border-light); transition: background-color var(--transition-fast); cursor: pointer; } body.platform-b2b .dossier-card:hover { background-color: rgba(74, 111, 165, 0.04); } body.platform-b2b .dossier-card-info { flex: 1; min-width: 0; } body.platform-b2b .dossier-card-name { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--b2b-text); } body.platform-b2b .dossier-card-ref { font-size: var(--text-xs); color: var(--b2b-text-muted); font-family: monospace; } body.platform-b2b .dossier-card-date { font-size: var(--text-xs); color: var(--b2b-text-muted); white-space: nowrap; } /* Timeline / Activity log */ body.platform-b2b .timeline { position: relative; padding-left: var(--space-8); } body.platform-b2b .timeline::before { content: ""; position: absolute; left: 11px; top: 0; bottom: 0; width: 2px; background-color: var(--b2b-border-light); } body.platform-b2b .timeline-item { position: relative; padding-bottom: var(--space-4); } body.platform-b2b .timeline-dot { position: absolute; left: calc(-1 * var(--space-8) + 6px); top: 4px; width: 12px; height: 12px; border-radius: var(--radius-full); background-color: var(--b2b-secondary); border: 2px solid var(--b2b-bg); } body.platform-b2b .timeline-dot--accent { background-color: var(--b2b-accent); } body.platform-b2b .timeline-content { font-size: var(--text-sm); } body.platform-b2b .timeline-time { font-size: var(--text-xs); color: var(--b2b-text-muted); } /* ======================================================================== Document Preview Panel ======================================================================== */ body.platform-b2b .document-preview { background-color: #FFFFFF; border: 1px solid var(--b2b-border); border-radius: var(--radius-md); aspect-ratio: 210 / 297; max-height: 500px; overflow: hidden; display: flex; align-items: center; justify-content: center; } body.platform-b2b .document-preview-placeholder { color: var(--b2b-text-muted); font-size: var(--text-sm); text-align: center; } /* ======================================================================== Inline Edit Mode ======================================================================== */ body.platform-b2b .inline-edit { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: border-color var(--transition-fast), background-color var(--transition-fast); } body.platform-b2b .inline-edit:hover { border-color: var(--b2b-border); background-color: var(--b2b-surface-alt); } body.platform-b2b .inline-edit--editing { border-color: var(--b2b-secondary); background-color: #FFFFFF; } /* ======================================================================== Quick Stats Row (Dashboard) ======================================================================== */ body.platform-b2b .quick-stats { display: flex; gap: var(--space-1); background-color: var(--b2b-primary); border-radius: var(--radius-lg); padding: var(--space-1); } body.platform-b2b .quick-stat { flex: 1; text-align: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); color: rgba(255, 255, 255, 0.85); } body.platform-b2b .quick-stat-value { font-size: var(--text-2xl); font-weight: var(--font-weight-bold); color: #FFFFFF; line-height: 1.2; } body.platform-b2b .quick-stat-label { font-size: var(--text-xs); margin-top: var(--space-1); opacity: 0.7; } /* ======================================================================== Print-friendly classes for B2B ======================================================================== */ body.platform-b2b .printable-header { display: none; } /* ======================================================================== B2B Tab Bar (inline horizontal tabs, NOT bottom nav) ======================================================================== */ body.platform-b2b .tab-bar { position: static; display: flex; gap: 0; border-bottom: 2px solid var(--color-border-light, #e5e7eb); background: var(--color-surface); border-radius: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } body.platform-b2b .tab-bar .tab { display: inline-flex; align-items: center; padding: var(--space-3) var(--space-4); font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; white-space: nowrap; transition: all var(--transition-fast); } body.platform-b2b .tab-bar .tab:hover { color: var(--color-primary); background: rgba(42, 157, 143, 0.04); } body.platform-b2b .tab-bar .tab--active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: var(--font-weight-semibold); } @media print { body.platform-b2b .printable-header { display: block; text-align: center; margin-bottom: var(--space-6); } }