/* resources/css/filament-overrides.css (no @apply) */ .fi-header, .fi-topbar { position: sticky; top: 50px; z-index: 9; background-color: #F9FAFB; /* Tailwind gray-50 (light mode) */ transition: background-color .15s ease; } /* when Filament adds the "dark" class on */ .dark .fi-header, .dark .fi-topbar { background-color: rgb(9 9 11); /* Tailwind gray-950 (dark mode) */ } @media screen and (max-width: 640px) { .fc-daygrid-event .fc-event-time, .fc-daygrid-dot-event .fc-event-title { display: none; } .filament-fullcalendar .fc-toolbar { flex-direction: column; gap: 16px; } } @media (max-width: 991px) { aside header button:last-of-type{ display: block !important; } } /* ============================================ DASHBOARD CUSTOMIZATION PAGES STYLING ============================================ */ /* Toggle Switches - Better dark mode focus ring */ .dark button[class*="rounded-full"]:focus { --tw-ring-offset-color: rgb(17 24 39); } /* Select Dropdowns - Proper dark mode styling */ select.dark\:bg-gray-800, .dark select { color-scheme: dark; } /* Custom scrollbar for dark mode */ .dark ::-webkit-scrollbar { width: 8px; height: 8px; } .dark ::-webkit-scrollbar-track { background: rgb(31 41 55); border-radius: 4px; } .dark ::-webkit-scrollbar-thumb { background: rgb(75 85 99); border-radius: 4px; } .dark ::-webkit-scrollbar-thumb:hover { background: rgb(107 114 128); } /* Dashboard tabs container styling */ .dashboard-tabs-container { background: white; border-radius: 0.75rem; padding: 0.25rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .dark .dashboard-tabs-container { background: rgb(31 41 55); } /* Widget cards on settings pages */ .widget-card { transition: all 0.2s ease; } .widget-card:hover { transform: translateY(-1px); } /* Category badges color coding */ .category-badge-tickets { background-color: rgb(254 226 226); color: rgb(185 28 28); } .dark .category-badge-tickets { background-color: rgba(185, 28, 28, 0.2); color: rgb(252 165 165); } .category-badge-leads { background-color: rgb(254 249 195); color: rgb(161 98 7); } .dark .category-badge-leads { background-color: rgba(161, 98, 7, 0.2); color: rgb(253 224 71); } .category-badge-sales { background-color: rgb(220 252 231); color: rgb(22 101 52); } .dark .category-badge-sales { background-color: rgba(22, 101, 52, 0.2); color: rgb(134 239 172); } .category-badge-surveys { background-color: rgb(219 234 254); color: rgb(30 64 175); } .dark .category-badge-surveys { background-color: rgba(30, 64, 175, 0.2); color: rgb(147 197 253); } .category-badge-general { background-color: rgb(243 244 246); color: rgb(55 65 81); } .dark .category-badge-general { background-color: rgba(55, 65, 81, 0.3); color: rgb(209 213 219); } /* Improved button focus states */ button:focus-visible { outline: 2px solid rgb(59 130 246); outline-offset: 2px; } .dark button:focus-visible { outline-color: rgb(96 165 250); } /* ============================================ DASHBOARD HERO BANNER TEXT COLORS ============================================ */ /* Light mode - dark text */ .dashboard-hero-banner .dashboard-hero-title { color: #1e3a5f !important; -webkit-text-fill-color: #1e3a5f !important; } .dashboard-hero-banner .dashboard-hero-subtitle { color: #475569 !important; -webkit-text-fill-color: #475569 !important; } /* Dark mode - white/light text */ .dark .dashboard-hero-banner .dashboard-hero-title { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .dark .dashboard-hero-banner .dashboard-hero-subtitle { color: #dbeafe !important; -webkit-text-fill-color: #dbeafe !important; } /* Icon in hero banner */ .dashboard-hero-banner .fi-icon, .dashboard-hero-banner svg { color: #1e3a5f !important; } .dark .dashboard-hero-banner .fi-icon, .dark .dashboard-hero-banner svg { color: white !important; } /* ============================================ BRAND LOGO STYLING ============================================ */ /* Style the brand logo in sidebar */ .fi-sidebar-header img, .fi-logo img { border-radius: 0.5rem; object-fit: contain; } /* Add subtle shadow in light mode */ .fi-sidebar-header img { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); } .dark .fi-sidebar-header img { box-shadow: none; }