/* ========================================================================== CRM Admin Theme — WhatsApp CRM Global dark/light theme for all Filament pages. Uses crm-theme-dark / crm-theme-light classes on . ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700;800&display=swap'); /* ========================================================================== 0. CSS VARIABLES — Dark mode (default) ========================================================================== */ :root { /* ---- Central primary color — overridden by crm-theme.js from localStorage ---- */ --crm-primary: #16a34a; --crm-primary-hover: #15803d; --crm-primary-soft: rgba(22, 163, 74, 0.12); --crm-radius: 12px; --crm-radius-lg: 20px; --crm-font-ar: 'IBM Plex Sans Arabic', 'Cairo', 'Tajawal', sans-serif; --crm-font-en: 'Inter', sans-serif; --crm-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); --crm-shadow-light: 0 4px 20px rgba(0, 0, 0, 0.06); } html.crm-theme-dark { --crm-bg: #0f172a; --crm-bg-deep: #020617; --crm-bg-soft: #111827; --crm-panel: #1e293b; --crm-panel-soft: #273449; --crm-panel-hover: #334155; --crm-border: rgba(148, 163, 184, 0.18); --crm-border-strong: rgba(148, 163, 184, 0.32); --crm-text: #f8fafc; --crm-text-soft: #e2e8f0; --crm-muted: #94a3b8; --crm-muted-soft: #64748b; --crm-accent: var(--crm-primary); --crm-accent-hover: var(--crm-primary-hover); --crm-accent-soft: var(--crm-primary-soft); --crm-danger: #ef4444; --crm-danger-soft: rgba(239, 68, 68, 0.16); --crm-warning: #f59e0b; --crm-warning-soft: rgba(245, 158, 11, 0.16); --crm-info: #38bdf8; --crm-info-soft: rgba(56, 189, 248, 0.16); /* Override Filament's gray palette with slate */ --gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0; --gray-300: #cbd5e1; --gray-400: #94a3b8; --gray-500: #64748b; --gray-600: #475569; --gray-700: #334155; --gray-800: #1e293b; --gray-900: #0f172a; --gray-950: #020617; } /* ========================================================================== 0b. CSS VARIABLES — Light mode ========================================================================== */ html.crm-theme-light { --crm-bg: #f8fafc; --crm-bg-deep: #ffffff; --crm-bg-soft: #f1f5f9; --crm-panel: #ffffff; --crm-panel-soft: #f8fafc; --crm-panel-hover: #e2e8f0; --crm-border: rgba(15, 23, 42, 0.12); --crm-border-strong: rgba(15, 23, 42, 0.22); --crm-text: #0f172a; --crm-text-soft: #334155; --crm-muted: #64748b; --crm-muted-soft: #94a3b8; --crm-accent: var(--crm-primary); --crm-accent-hover: var(--crm-primary-hover); --crm-accent-soft: var(--crm-primary-soft); --crm-danger: #dc2626; --crm-danger-soft: rgba(220, 38, 38, 0.10); --crm-warning: #d97706; --crm-warning-soft: rgba(217, 119, 6, 0.10); --crm-info: #2563eb; --crm-info-soft: rgba(37, 99, 235, 0.10); } /* ========================================================================== 1. GLOBAL — RTL, fonts, body background ========================================================================== */ html.crm-theme-dark body, html.crm-theme-dark .fi-body, html.crm-theme-light body, html.crm-theme-light .fi-body { font-family: var(--crm-font-ar) !important; } /* English text fallback */ [dir="rtl"] :not(:lang(ar)) { font-family: var(--crm-font-en), var(--crm-font-ar) !important; } /* ========================================================================== 2. BODY — RTL direction, background per mode ========================================================================== */ html.crm-theme-dark body, html.crm-theme-dark .fi-body, html.crm-theme-light body, html.crm-theme-light .fi-body { direction: rtl !important; } html.crm-theme-dark body, html.crm-theme-dark .fi-body { background-color: var(--crm-bg) !important; color: var(--crm-text) !important; } html.crm-theme-light body, html.crm-theme-light .fi-body { background-color: var(--crm-bg) !important; color: var(--crm-text) !important; } html.crm-theme-dark .fi-layout, html.crm-theme-light .fi-layout { background-color: var(--crm-bg) !important; } /* ========================================================================== 3. SIDEBAR & TOPBAR ========================================================================== */ /* --- Sidebar --- */ html.crm-theme-dark .fi-sidebar { background-color: var(--crm-bg) !important; border-right: 1px solid var(--crm-border) !important; border-left: none !important; box-shadow: none !important; --tw-ring-color: transparent !important; } html.crm-theme-light .fi-sidebar { background-color: var(--crm-bg-deep) !important; border-right: 1px solid var(--crm-border) !important; border-left: none !important; box-shadow: 0 0 0 1px var(--crm-border) !important; --tw-ring-color: transparent !important; } html.crm-theme-dark .fi-sidebar-header { background-color: var(--crm-bg) !important; border-bottom: 1px solid var(--crm-border) !important; box-shadow: none !important; --tw-ring-color: transparent !important; } html.crm-theme-light .fi-sidebar-header { background-color: var(--crm-bg-deep) !important; border-bottom: 1px solid var(--crm-border) !important; box-shadow: none !important; --tw-ring-color: transparent !important; } html.crm-theme-dark .fi-sidebar-nav { color: var(--crm-text-soft) !important; } html.crm-theme-light .fi-sidebar-nav { color: var(--crm-text-soft) !important; } /* Active sidebar item: fi-active is on fi-sidebar-item (parent), button is child */ html.crm-theme-dark .fi-active .fi-sidebar-item-button, html.crm-theme-dark .fi-sidebar-item-button.fi-active { background-color: var(--crm-accent-soft) !important; color: var(--crm-accent) !important; } html.crm-theme-light .fi-active .fi-sidebar-item-button, html.crm-theme-light .fi-sidebar-item-button.fi-active { background-color: var(--crm-accent-soft) !important; color: var(--crm-accent) !important; } html.crm-theme-dark .fi-sidebar-item-button:hover { background-color: var(--crm-panel) !important; color: var(--crm-text) !important; } html.crm-theme-light .fi-sidebar-item-button:hover { background-color: var(--crm-panel-soft) !important; color: var(--crm-text) !important; } html.crm-theme-dark .fi-sidebar-item-label, html.crm-theme-dark .fi-sidebar-item-icon { color: inherit !important; } html.crm-theme-light .fi-sidebar-item-label, html.crm-theme-light .fi-sidebar-item-icon { color: inherit !important; } html.crm-theme-dark .fi-sidebar-group-label { color: var(--crm-muted) !important; } html.crm-theme-light .fi-sidebar-group-label { color: var(--crm-muted) !important; } /* --- Topbar --- fi-topbar is the outer
; bg-white is on the inner