@import '../../../../vendor/filament/filament/resources/css/theme.css';
@source '../../../../app/Filament/**/*';
@source '../../../../resources/views/filament/**/*';
/* =====================================================================
BRAND THEME -- waomcoo admin panel.
Dark mode is FORCED panel-wide (see AdminPanelProvider::darkMode) so
every vendor component already carries Filament's own audited dark:
contrast pairs (text/background/border/hover/focus, every nested
state) -- this file only adds the navy/gold/glass DECORATION on top
of that already-correct foundation: a dark navy gradient canvas, a
frosted-glass treatment for card-like surfaces, and restrained gold
accents. It never overrides text colour, because Filament's dark:
classes already get that right and re-deriving it by hand is exactly
how the previous washed-out-logo/contrast bug happened.
===================================================================== */
/* ---------------------------------------------------------------------
1. CANVAS -- dark navy gradient behind the entire authenticated panel
(not just login), with a faint radial gold glow and a low-opacity
geometric texture, matching the login page's own background language.
--------------------------------------------------------------------- */
.fi-body {
position: relative;
background: linear-gradient(165deg, var(--primary-900) 0%, var(--primary-950) 55%, var(--primary-800) 100%) !important;
background-attachment: fixed;
}
.fi-body::before {
content: '';
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(ellipse 60% 40% at 15% 0%, color-mix(in oklab, var(--gold-400) 10%, transparent), transparent 60%),
radial-gradient(ellipse 50% 40% at 100% 100%, color-mix(in oklab, var(--primary-600) 35%, transparent), transparent 60%);
}
/* ---------------------------------------------------------------------
2. GLASS SURFACES -- every card-like container (section panels, table
containers, stat widgets, modals, dropdowns) shares the exact same
dark bg-gray-900 + ring-white/10 recipe in Filament's own CSS, so one
shared rule re-skins all of them consistently: translucent navy,
backdrop blur, a soft hairline border, and a soft drop shadow for
elevation -- the "floating glass card" language from the reference.
--------------------------------------------------------------------- */
.fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-section.fi-aside > .fi-section-content-ctn,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-modal-window,
.fi-dropdown-panel,
.fi-simple-main {
position: relative;
z-index: 1;
background: color-mix(in oklab, white 6%, transparent) !important;
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid color-mix(in oklab, white 12%, transparent) !important;
box-shadow:
0 8px 32px -8px color-mix(in oklab, black 45%, transparent),
0 0 0 1px color-mix(in oklab, white 4%, transparent) inset !important;
}
/* Secondary/nested surfaces (selection bars, filter bars, reorder
indicators) use a lighter bg-gray-50/white-5 pairing in Filament's own
CSS -- keep them one step lighter than their parent glass card. */
.fi-section.fi-secondary,
.fi-section.fi-aside.fi-secondary > .fi-section-content-ctn,
.fi-ta-selection-indicator,
.fi-ta-reorder-indicator,
.fi-ta-filter-indicators {
background: color-mix(in oklab, white 4%, transparent) !important;
}
/* ---------------------------------------------------------------------
3. SIDEBAR -- dark glass column, real logo header kept as a solid
navy band (the one place full opacity matters, so the logo always
has guaranteed contrast regardless of what scrolls behind it).
--------------------------------------------------------------------- */
.fi-sidebar {
background: color-mix(in oklab, var(--primary-950) 78%, transparent) !important;
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-inline-end: 1px solid color-mix(in oklab, var(--gold-400) 10%, transparent);
}
.fi-sidebar-header,
.fi-body-has-topbar .fi-sidebar-header {
background: linear-gradient(155deg, var(--primary-600) 0%, var(--primary-800) 100%) !important;
box-shadow: inset 0 -1px 0 0 color-mix(in oklab, var(--gold-400) 35%, transparent);
}
/* Gold active-nav indicator -- a thin inline-start rule, never a fill,
matching the frontend's own restrained use of gold as a fine detail
colour rather than a second primary. */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
border-inline-start: 3px solid var(--gold-500);
padding-inline-start: calc(0.5rem - 3px);
}
/* ---------------------------------------------------------------------
4. TOPBAR -- same navy gradient language as the sidebar header,
translucent + blurred so it reads as part of the same glass system
rather than a flat opaque strip.
--------------------------------------------------------------------- */
.fi-topbar {
background: linear-gradient(155deg, color-mix(in oklab, var(--primary-600) 88%, transparent) 0%, color-mix(in oklab, var(--primary-700) 88%, transparent) 100%) !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: inset 0 -1px 0 0 color-mix(in oklab, var(--gold-400) 35%, transparent) !important;
}
.fi-topbar .fi-icon-btn {
color: color-mix(in oklab, white 80%, transparent);
}
.fi-topbar .fi-icon-btn:hover {
color: white;
background-color: color-mix(in oklab, white 10%, transparent);
}
.fi-topbar-item-label {
color: color-mix(in oklab, white 85%, transparent) !important;
}
/* ---------------------------------------------------------------------
5. FORM INPUTS -- panel-wide gold focus ring, the one restrained gold
detail that shows up everywhere a user is actively interacting.
--------------------------------------------------------------------- */
.fi-input-wrp:focus-within {
border-color: var(--gold-500) !important;
box-shadow: 0 0 0 2px color-mix(in oklab, var(--gold-500) 25%, transparent) !important;
}
/* ---------------------------------------------------------------------
6. BADGES -- full pill radius so status/count badges (unread-message
counts, service-request status) read as the reference's small glass
accent pills rather than Filament's default rounded-md chip. Colour
itself already comes from the panel's own colour palette (badges
using color="danger" already render in our crimson) -- no colour
override needed here, only shape.
--------------------------------------------------------------------- */
.fi-badge {
border-radius: 999px !important;
}
/* ---------------------------------------------------------------------
7. LOGIN PAGE -- dark glass card (not a light one) so the white brand
logo and light text always have guaranteed contrast against it,
regardless of what gradient/glow sits behind it. This is the fix for
the logo/text visibility bug: the previous near-white card is exactly
what made a white logo wash out.
--------------------------------------------------------------------- */
.fi-simple-layout {
position: relative;
isolation: isolate;
min-height: 100dvh;
background: radial-gradient(ellipse 60% 50% at 50% 0%, color-mix(in oklab, var(--gold-400) 18%, transparent), transparent 60%),
linear-gradient(165deg, var(--primary-900) 0%, var(--primary-950) 55%, var(--primary-800) 100%);
}
.fi-simple-layout::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
opacity: 0.05;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg stroke='white' stroke-opacity='1' stroke-width='1' fill='none'%3E%3Crect x='30' y='30' width='60' height='60'/%3E%3Crect x='30' y='30' width='60' height='60' transform='rotate(45 60 60)'/%3E%3C/g%3E%3C/svg%3E");
background-size: 120px 120px;
}
.fi-simple-main {
border-radius: 1.25rem !important;
}
/* Logo: brandLogoHeight (set in AdminPanelProvider) is a single global
value shared with the sidebar header, where the 64px-tall header strip
caps how big it can be -- so it has to stay modest there. Overriding
it here, specifically inside the login layout, is the only way to
make the login logo genuinely large without also blowing out the
sidebar. !important is required (not optional) because Filament's own
logo component sets height as an INLINE style attribute directly on
the ![]()
, which otherwise beats any class-based rule. The glow
(rather than a dark drop-shadow, which would be invisible against a
dark card) is what lifts the white logo off the dark glass. */
.fi-simple-layout .fi-logo {
height: 5.5rem !important;
width: auto !important;
max-width: 80%;
margin-inline: auto;
filter: drop-shadow(0 0 24px color-mix(in oklab, var(--gold-400) 35%, transparent));
}
/* The logo (and heading/subheading, when a page sets them) live inside