/* ============================================================ ConnectManager BI — Apple-inspired Filament Theme Override Supports both light and dark mode via .dark class on ============================================================ */ /* --- Typography & Font Smoothing (universal) --- */ *, *::before, *::after { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body, .fi-body { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif !important; } /* ===================== LIGHT MODE ===================== */ html:not(.dark) body, html:not(.dark) .fi-body { background-color: #f5f5f7 !important; } html:not(.dark) .fi-sidebar { background-color: #ffffff !important; border-right: 1px solid #e5e5ea !important; box-shadow: none !important; } html:not(.dark) .fi-topbar { background-color: rgba(255, 255, 255, 0.85) !important; backdrop-filter: saturate(180%) blur(20px) !important; -webkit-backdrop-filter: saturate(180%) blur(20px) !important; border-bottom: 1px solid #e5e5ea !important; box-shadow: none !important; } html:not(.dark) .fi-section { border-radius: 12px !important; border: 1px solid #e5e5ea !important; box-shadow: none !important; background: #ffffff !important; overflow: hidden !important; } html:not(.dark) .fi-section-header { border-bottom: 1px solid #e5e5ea !important; } html:not(.dark) .fi-ta-table { border: 1px solid #e5e5ea !important; } html:not(.dark) .fi-ta-header-cell { background-color: #f9f9fb !important; color: #8e8e93 !important; } html:not(.dark) .fi-input, html:not(.dark) .fi-select-input, html:not(.dark) .fi-textarea { border-color: #d1d1d6 !important; background-color: #ffffff !important; } html:not(.dark) .fi-dropdown-panel { border: 1px solid #d1d1d6 !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important; } html:not(.dark) .fi-btn.fi-color-gray { background-color: #f2f2f7 !important; color: #1a1a1a !important; border: 1px solid #e5e5ea !important; } html:not(.dark) .fi-btn.fi-color-gray:hover { background-color: #e5e5ea !important; } html:not(.dark) .fi-no-notification { box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important; border: 1px solid #e5e5ea !important; } html:not(.dark) .fi-header-heading { color: #1a1a1a !important; } html:not(.dark) .fi-sidebar-item-button.fi-active { background-color: #f0f0f5 !important; } /* ===================== DARK MODE ===================== */ html.dark body, html.dark .fi-body { background-color: #000000 !important; } html.dark .fi-sidebar { background-color: #1c1c1e !important; border-right: 1px solid #2c2c2e !important; box-shadow: none !important; } html.dark .fi-topbar { background-color: rgba(28, 28, 30, 0.9) !important; backdrop-filter: saturate(180%) blur(20px) !important; -webkit-backdrop-filter: saturate(180%) blur(20px) !important; border-bottom: 1px solid #2c2c2e !important; box-shadow: none !important; } html.dark .fi-section { border-radius: 12px !important; border: 1px solid #2c2c2e !important; box-shadow: none !important; background: #1c1c1e !important; overflow: hidden !important; } html.dark .fi-section-header { border-bottom: 1px solid #2c2c2e !important; } html.dark .fi-ta-table { border: 1px solid #2c2c2e !important; } html.dark .fi-ta-header-cell { background-color: #111112 !important; color: #6e6e73 !important; } html.dark .fi-input, html.dark .fi-select-input, html.dark .fi-textarea { border-color: #3a3a3c !important; background-color: #2c2c2e !important; color: #ffffff !important; } html.dark .fi-dropdown-panel { background-color: #1c1c1e !important; border: 1px solid #3a3a3c !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important; } html.dark .fi-btn.fi-color-gray { background-color: #2c2c2e !important; color: #ffffff !important; border: 1px solid #3a3a3c !important; } html.dark .fi-btn.fi-color-gray:hover { background-color: #3a3a3c !important; } html.dark .fi-no-notification { background-color: #1c1c1e !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important; border: 1px solid #2c2c2e !important; } html.dark .fi-header-heading { color: #ffffff !important; } html.dark .fi-sidebar-item-button.fi-active { background-color: #2c2c2e !important; } /* ===================== UNIVERSAL (both modes) ===================== */ /* Sidebar nav */ .fi-sidebar-nav-groups { gap: 0.25rem !important; } .fi-sidebar-item-label { font-size: 0.875rem !important; font-weight: 500 !important; letter-spacing: -0.01em !important; } /* --- Buttons (Apple CTA style — universal) --- */ .fi-btn.fi-color-primary, .fi-btn[class*="fi-color-primary"] { background-color: #1a1a1a !important; color: #ffffff !important; border: none !important; border-radius: 10px !important; font-weight: 500 !important; letter-spacing: -0.01em !important; box-shadow: none !important; transition: background-color 0.15s ease, transform 0.1s ease !important; } .fi-btn.fi-color-primary:hover, .fi-btn[class*="fi-color-primary"]:hover { background-color: #3a3a3a !important; } .fi-btn.fi-color-primary:active, .fi-btn[class*="fi-color-primary"]:active { background-color: #000000 !important; transform: scale(0.98) !important; } .fi-btn.fi-color-danger { background-color: #ff3b30 !important; border-radius: 10px !important; border: none !important; box-shadow: none !important; } .fi-btn.fi-color-gray { border-radius: 10px !important; box-shadow: none !important; } .fi-btn { border-radius: 10px !important; justify-content: center !important; } /* --- Form inputs (universal) --- */ .fi-input, .fi-select-input, .fi-textarea { border-radius: 8px !important; box-shadow: none !important; font-size: 0.9375rem !important; transition: border-color 0.15s ease, box-shadow 0.15s ease !important; } .fi-input:focus, .fi-select-input:focus, .fi-textarea:focus { border-color: #007aff !important; box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15) !important; outline: none !important; } /* --- Tables --- */ .fi-ta-table { border-radius: 12px !important; overflow: hidden !important; } .fi-ta-header-cell { font-size: 0.75rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } /* --- Sections --- */ .fi-section { border-radius: 12px !important; overflow: hidden !important; } .fi-section-header { padding: 1rem 1.25rem !important; } /* --- Badge --- */ .fi-badge { border-radius: 20px !important; font-weight: 500 !important; font-size: 0.75rem !important; } /* --- Page title --- */ .fi-header-heading { font-size: 1.75rem !important; font-weight: 700 !important; letter-spacing: -0.03em !important; } /* --- Notifications --- */ .fi-no-notification { border-radius: 14px !important; } /* --- Modal --- */ .fi-modal-window { border-radius: 16px !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12) !important; } /* --- Dropdown --- */ .fi-dropdown-panel { border-radius: 12px !important; }