/* * ZigRez business panel — shared premium/emerald surface layer. * Extends Filament's stock component classes (no build step, no Tailwind * recompilation) so every native Section/Table/Widget picks up the same * dark-premium look already established on the My Plan page, from one place. * Loaded last in (PanelsRenderHook::HEAD_END) so these rules win over * Filament's own compiled utility classes without needing !important. */ /* ===== Base premium surface: sections, form sections, table containers ===== */ .fi-section, .fi-ta-ctn { border-radius: .875rem; box-shadow: 0 0 0 1px rgba(16, 185, 129, .12), 0 1px 2px rgba(15, 23, 42, .04); background-image: linear-gradient(180deg, rgba(16, 185, 129, .035), rgba(16, 185, 129, 0) 55%); } .dark .fi-section, .dark .fi-ta-ctn { box-shadow: 0 0 0 1px rgba(16, 185, 129, .16), 0 1px 2px rgba(0, 0, 0, .2); background-image: linear-gradient(180deg, rgba(16, 185, 129, .05), rgba(16, 185, 129, 0) 55%); } /* ===== Section / form-section title accent (matches My Plan's title bar) ===== */ .fi-section-header-heading, .fi-wi-stats-overview-header-heading { display: flex; align-items: center; gap: .5rem; } .fi-section-header-heading::before, .fi-wi-stats-overview-header-heading::before { content: ''; flex-shrink: 0; display: inline-block; width: 3px; height: 14px; border-radius: 2px; background-color: rgb(16 185 129); } /* ===== Dashboard stat cards: consistent surface + very light emerald accent ===== */ .fi-wi-stats-overview-stat { border-radius: .875rem; box-shadow: 0 0 0 1px rgba(16, 185, 129, .1), 0 1px 2px rgba(15, 23, 42, .04); background-image: linear-gradient(180deg, rgba(16, 185, 129, .03), rgba(16, 185, 129, 0) 60%); } .dark .fi-wi-stats-overview-stat { box-shadow: 0 0 0 1px rgba(16, 185, 129, .12), 0 1px 2px rgba(0, 0, 0, .2); background-image: linear-gradient(180deg, rgba(16, 185, 129, .045), rgba(16, 185, 129, 0) 60%); } /* ===== Dashboard welcome card: the one "important" highlight, My Plan style ===== */ .fi-account-widget .fi-section { box-shadow: 0 0 0 1px rgba(16, 185, 129, .22), 0 8px 24px -14px rgba(16, 185, 129, .45); background-image: linear-gradient(180deg, rgba(16, 185, 129, .08), rgba(16, 185, 129, 0) 60%); } .dark .fi-account-widget .fi-section { box-shadow: 0 0 0 1px rgba(16, 185, 129, .28), 0 10px 28px -14px rgba(16, 185, 129, .55); background-image: linear-gradient(180deg, rgba(16, 185, 129, .12), rgba(16, 185, 129, 0) 60%); } /* ===== Table empty states: quieter, emerald-tinted icon instead of plain gray ===== */ .fi-ta-empty-state-icon-ctn { background-color: rgba(16, 185, 129, .12); } .dark .fi-ta-empty-state-icon-ctn { background-color: rgba(16, 185, 129, .14); } .fi-ta-empty-state-icon { color: rgb(5 150 105); } .dark .fi-ta-empty-state-icon { color: rgb(52 211 153); } /* ===== Sidebar navigation: very light dark surface + inline-end border ===== */ /* Brand header (.fi-sidebar-header) and logo are intentionally untouched. */ .fi-sidebar { background-image: linear-gradient(180deg, rgba(16, 185, 129, .025), rgba(16, 185, 129, 0) 30%); border-inline-end: 1px solid rgba(16, 185, 129, .1); } .dark .fi-sidebar { background-image: linear-gradient(180deg, rgba(16, 185, 129, .035), rgba(16, 185, 129, 0) 25%); border-inline-end: 1px solid rgba(16, 185, 129, .14); } /* Slightly more breathing room between items; rounder rows to match the card family. */ .fi-sidebar-group-items { gap: .375rem; } .fi-sidebar-item-button { border-radius: .625rem; padding: .625rem .75rem; } /* Active item: thin emerald border, soft emerald fill, very light glow. Icon/label already render in the panel's primary (emerald) color natively. */ .fi-sidebar-item.fi-active .fi-sidebar-item-button { background-color: rgba(16, 185, 129, .1); box-shadow: 0 0 0 1px rgba(16, 185, 129, .3), 0 0 12px -4px rgba(16, 185, 129, .35); } .dark .fi-sidebar-item.fi-active .fi-sidebar-item-button { background-color: rgba(16, 185, 129, .12); box-shadow: 0 0 0 1px rgba(16, 185, 129, .34), 0 0 14px -4px rgba(16, 185, 129, .45); } /* Inactive items: plain at rest, light emerald-toned surface + icon/label on hover only. */ .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:hover { background-color: rgba(16, 185, 129, .06); } .dark .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:hover { background-color: rgba(16, 185, 129, .08); } .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:hover .fi-sidebar-item-icon { color: rgb(5 150 105); } .dark .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:hover .fi-sidebar-item-icon { color: rgb(52 211 153); } .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:hover .fi-sidebar-item-label { color: rgb(4 120 87); } .dark .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:hover .fi-sidebar-item-label { color: rgb(110 231 183); }