/*
* Custom admin panel theme for the Iya Alkhairi Outreach Portal.
*
* Plain static CSS, loaded via a renderHook in AdminPanelProvider -- no
* build step (Vite/Tailwind) needed. Targets Filament v3's documented
* "fi-*" class conventions. There is deliberately no light/dark toggle in
* this panel (see AdminPanelProvider::panel()), so this file defines ONE
* fixed theme -- no ".dark" variants anywhere.
*
* Technique used throughout: paint the brand gradient ONCE on the
* outermost element of each region (top bar, sidebar, login card), then
* make the inner container(s) Filament would otherwise paint its own
* white/gray background on fully transparent -- rather than repainting the
* same gradient on every nested element, which creates visible seams
* between each element's box instead of one smooth surface. Real
* interactive controls (inputs, buttons, dropdown panels, and anything
* Filament itself marks as the active/current item) are always explicitly
* excluded from these transparency resets, so they keep their own
* legible, working appearance.
*/
:root {
--iao-gradient: linear-gradient(120deg, #065f46 0%, #059669 55%, #10b981 100%);
--iao-solid: #059669;
--iao-ink: #065f46;
}
/* ================= Top bar ================= */
.fi-topbar {
/* Radial highlight + linear gradient combined into ONE background
(multiple comma-separated layers) rather than a separate ::before
pseudo-element. A pseudo-element needs `overflow: hidden` on its
parent to stay contained, and doing that on .fi-topbar/.fi-sidebar
broke their internal scrolling (see the .fi-sidebar note below) --
this gets the same visual depth with no overflow property at all. */
background:
radial-gradient(circle at 8% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
var(--iao-gradient) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
box-shadow: 0 2px 10px rgba(4, 120, 87, 0.25) !important;
}
.fi-topbar
*:not(.fi-dropdown-panel):not(.fi-dropdown-panel *):not(input):not(.fi-input):not(.fi-badge):not(.fi-global-search-results-ctn):not(.fi-global-search-results-ctn *):not([data-fi-modal-id='database-notifications'] .fi-modal-window):not([data-fi-modal-id='database-notifications'] .fi-modal-window *):not([data-fi-modal-id='database-notifications'] .fi-modal-close-overlay) {
background-color: transparent !important;
background-image: none !important;
}
.fi-topbar-open-sidebar-btn,
.fi-topbar > nav > a,
.fi-topbar > nav > button,
.fi-topbar .fi-icon-btn:not(.fi-dropdown-panel *),
.fi-topbar .fi-icon-btn svg:not(.fi-dropdown-panel *) {
color: #fff !important;
position: relative;
z-index: 1;
}
/*
* Global search + notifications: force a solid, legible surface.
*
* Both open a floating panel of information-dense text (search results,
* the notification list) near the top bar, and both are real DOM
* descendants of .fi-topbar even though they render fixed-position over
* the whole viewport. The wildcard reset above is meant to make Filament's
* own plain white containers disappear into the gradient -- checked
* against the actual installed Filament v3.2 markup (vendor/filament/...):
* - global search results panel -> .fi-global-search-results-ctn
* (NOT .fi-dropdown-panel -- that class is only used by the avatar/
* tenant "x-filament::dropdown" menus)
* - notifications panel -> Filament renders it as a slide-over
* .fi-modal-window (a modal, not a dropdown), dimmed by a
* .fi-modal-close-overlay backdrop, wrapped in a root element carrying
* data-fi-modal-id="database-notifications". That id is what scopes
* the rules below to ONLY this one modal -- .fi-modal-window is the
* class Filament uses for every modal/slide-over across the whole
* panel (edit forms, delete confirmations, etc.), so styling it
* unscoped would repaint every modal in the app, not just this one.
* Both are now excluded from the wildcard transparency reset above (kept
* excluded here purely for their own solid-surface styling), so they keep
* their native white background instead of it being erased. The same
* reset also has no exception for the unread notification badge -- a
* small colored dot with no text of its own that depends entirely on its
* own background-color to be visible -- so it was silently being erased
* as well.
*/
.fi-dropdown-panel,
[role='listbox'],
.fi-global-search-results-ctn,
[data-fi-modal-id='database-notifications'] .fi-modal-window {
background-color: rgba(255, 255, 255, 0.98) !important;
color: #111827 !important;
box-shadow:
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
}
.fi-dropdown-panel *,
[role='listbox'] *,
.fi-global-search-results-ctn *,
[data-fi-modal-id='database-notifications'] .fi-modal-window * {
color: inherit;
}
.fi-badge {
background-color: #ef4444 !important;
color: #fff !important;
}
/* The search input needs its own visible field surface -- without this it
inherits the wildcard's forced transparency above and blends completely
into the gradient, leaving no visible box to show where to type or read
what's been typed. */
.fi-topbar input {
background-color: rgba(255, 255, 255, 0.16) !important;
color: #fff !important;
border-radius: 0.5rem;
}
.fi-topbar input::placeholder {
color: rgba(255, 255, 255, 0.75) !important;
}
/* ================= Sidebar: brand header + navigation menu ================= */
.fi-sidebar {
/*
* IMPORTANT: no `overflow` property here on purpose. The sidebar needs
* to scroll its own contents independently of the main content area
* (that's standard behaviour Filament relies on), and setting
* `overflow: hidden` here -- which an earlier version of this file did,
* to contain a decorative ::before pseudo-element -- broke that: the
* browser fell back to scrolling the whole page instead, leaving the
* sidebar's background looking cut off with blank space below it once
* the page scrolled past the sidebar's own fixed-height box. The radial
* highlight is done instead as a second background layer combined into
* the same `background` property below, which needs no containment.
*/
background:
radial-gradient(circle at 50% -10%, rgba(255, 255, 255, 0.16), transparent 55%),
var(--iao-gradient) !important;
box-shadow: 2px 0 10px rgba(4, 120, 87, 0.2) !important;
}
.fi-sidebar-header,
.fi-sidebar-nav {
background: transparent !important;
}
/*
* Neutralize any inner container's own background, EXCEPT: dropdown
* panels (their own popup menus), the nav item buttons/links themselves
* (and anything inside them), so whatever Filament natively does to mark
* hover/active state is left completely alone rather than getting wiped
* out by this reset -- and so the hover/active rules further down (which
* target plain tags as a robust fallback, in case the exact class
* Filament uses isn't what this file guesses) never lose a specificity
* fight against this broader reset.
*/
.fi-sidebar *:not(.fi-dropdown-panel):not(.fi-dropdown-panel *):not(.fi-sidebar-item-button):not(.fi-sidebar-item-button *):not(a):not(a *) {
background-color: transparent !important;
background-image: none !important;
}
.fi-sidebar,
.fi-sidebar-header,
.fi-sidebar-group-label,
.fi-sidebar-item-label,
.fi-sidebar-item-icon,
.fi-sidebar-item-button,
.fi-logo {
color: #fff !important;
}
.fi-sidebar-item-icon svg {
color: #fff !important;
}
/* App name/logo: all caps, letter-spaced, centered. */
.fi-logo,
.fi-sidebar-header {
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
}
.fi-sidebar-header {
display: flex !important;
justify-content: center !important;
align-items: center !important;
text-align: center;
}
.fi-sidebar-header > *,
.fi-logo {
width: 100%;
text-align: center;
justify-content: center;
}
/*
* Menu items: transparent by default. Hover AND the current/active page
* both get the same translucent highlight, so there's exactly one
* interaction state to reason about.
*
* Two overlapping rule sets on purpose: one keyed off Filament's own class
* ("fi-sidebar-item-button"), and one keyed off plain tags inside the
* nav -- since every sidebar link is certainly an regardless of
* whatever class Filament happens to add to it. If the class name guess
* is right, both rules agree. If it's wrong, the -based rule still
* works, so hovering/the current page is never left with zero feedback.
*/
.fi-sidebar-item-button,
.fi-sidebar-nav a {
background-color: transparent !important;
border-radius: 0.5rem;
border-inline-start: 3px solid transparent;
transition: background-color 0.12s ease, border-color 0.12s ease;
}
.fi-sidebar-item-button:hover,
.fi-sidebar-nav a:hover {
background-color: rgba(255, 255, 255, 0.14) !important;
color: #fff !important;
}
/*
* The active/current page gets its OWN, stronger treatment -- a left
* accent bar, a bolder fill, an inset ring, and bold text -- so it reads
* as clearly different from a plain hover instead of the two states
* looking identical (which was the actual complaint: on a page you're
* already on, nothing in the menu told you where you were).
*
* IMPORTANT: checked against the actual installed Filament v3.2 markup
* (vendor/filament/filament/resources/views/components/sidebar/item.blade.php)
* -- Filament puts the "fi-active" class on the