/* ── Page background ──────────────────────────────────────────────────── */ /* Filament's body already carries bg-gray-50 (confirmed via live DOM inspection: rgb(250,250,250)), but that's so close to white that the white dashboard cards on top of it have no contrast to read as "cards" — everything blends into one flat white canvas. Deepening it slightly. */ body.fi-body { background-color: #eef1f6 !important; } .dark body.fi-body { background-color: #0b1220 !important; } /* ── Base topbar colour — this is the rule that actually paints the header navy. Everything below it is a patch for specific Filament states that would otherwise fight this background (active/expanded items, quick create button, etc). ───────────────────────────────────────────────── */ /* The

is only a wrapper — Filament's own markup puts the visible bg-white / dark:bg-gray-900 fill on the inner

element, which sits on top of and completely hides whatever background is set on the wrapper. Both need the navy colour. */ .fi-topbar, .fi-topbar > nav { background-color: #003366 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } /* The visible text/icons of each nav item live on INNER elements (.fi-topbar-item-label span, .fi-topbar-item-icon, .fi-topbar-group-toggle-icon) which carry their own Tailwind text-gray-700/text-gray-400 classes — these are more specific than a color set on the parent button/li, so they must be targeted directly. Excludes the currently-active item (.fi-active), which already shows fine as a white pill with primary-blue text. */ .fi-topbar-item:not(.fi-active) .fi-topbar-item-label { color: #ffffff !important; } .fi-topbar-item:not(.fi-active) .fi-topbar-item-icon, .fi-topbar-item:not(.fi-active) .fi-topbar-group-toggle-icon { color: rgba(255, 255, 255, 0.85) !important; } .fi-topbar nav a, .fi-topbar nav button, .fi-topbar .fi-topbar-item-button { color: #ffffff !important; } /* Icons (search, notifications bell, quick-create, user avatar chevron, etc.) */ .fi-topbar svg { color: #ffffff !important; } /* Default (non-active) hover state on a topbar item */ .fi-topbar .fi-topbar-item-button:hover { background-color: rgba(255, 255, 255, 0.12) !important; } /* ── Widen topbar group dropdowns (Reports, More, etc.) ──────────────────── */ /* Filament's dropdown panel defaults to max-width: 14rem when no explicit width is passed, and the topbar's own blade markup never passes one — so longer report/nav labels get ellipsis-truncated. These panels are also teleported to when open (the `teleport` prop on x-filament::dropdown), which breaks any ".fi-topbar .fi-dropdown-panel" ancestor-based selector, so this targets the class globally instead. Widening it is low-risk: any other dropdown using this same component (row actions, etc.) just gets a little extra breathing room, nothing breaks. */ .fi-dropdown-panel { max-width: 26rem !important; } /* ── Global search box in topbar ─────────────────────────────────────────── */ /* Confirmed via live DOM inspection (previous guess of ".fi-input-wrapper" was wrong — that class doesn't exist in this Filament version, which is why the box stayed solid white after the first deploy). The real wrapper Filament renders is ".fi-input-wrp" (bg-white by default); the input itself is ".fi-input" inside ".fi-input-wrp-input". Scope to the topbar only so search/filter inputs elsewhere in the app are untouched. */ .fi-topbar .fi-input-wrp { background-color: rgba(255, 255, 255, 0.15) !important; border-color: rgba(255, 255, 255, 0.3) !important; box-shadow: none !important; } .fi-topbar .fi-input { color: #ffffff !important; } .fi-topbar .fi-input::placeholder { color: rgba(255, 255, 255, 0.75) !important; } /* ── Any remaining plain icon-buttons in the topbar (notification bell) ─── */ .fi-topbar .fi-icon-btn { color: #ffffff !important; } .fi-topbar .fi-icon-btn:hover { background-color: rgba(255, 255, 255, 0.12) !important; } /* ── Quick Create / Recent Records circular buttons ──────────────────────── */ /* Confirmed via live DOM inspection: these come from the QuickCreate and Recently plugins, not Filament core, and use their own classes (bg-gray-100 dark:bg-gray-800 text-primary-500 rounded-full) — none of the guessed selectors previously here (.fi-quick-create-menu-trigger, [data-quick-create-trigger], etc.) ever matched anything. Targeted by their actual aria-labels instead, which are stable across renders. */ .fi-topbar button[aria-label="Quick Create"], .fi-topbar button[aria-label="Recent Records"] { background-color: rgba(255, 255, 255, 0.15) !important; color: #ffffff !important; } .fi-topbar button[aria-label="Quick Create"]:hover, .fi-topbar button[aria-label="Recent Records"]:hover { background-color: rgba(255, 255, 255, 0.28) !important; } .fi-topbar button[aria-label="Quick Create"] svg, .fi-topbar button[aria-label="Recent Records"] svg { color: #ffffff !important; } /* ── Nav item active/expanded state — keep text visible ─────────────────── */ /* When a topbar dropdown is open, Filament adds a white/light background. Force the button text to stay navy so it remains readable. */ .fi-topbar .fi-topbar-item-button[aria-expanded="true"], .fi-topbar [aria-expanded="true"] .fi-topbar-item-button { background-color: rgba(255,255,255,0.22) !important; color: #ffffff !important; } .fi-topbar .fi-topbar-item-button[aria-expanded="true"] *, .fi-topbar [aria-expanded="true"] .fi-topbar-item-button * { color: #ffffff !important; } /* Filament sometimes swaps to a white pill on active — override it */ .fi-topbar .fi-topbar-item-button[data-active], .fi-topbar .fi-topbar-item-button.fi-active { background-color: rgba(255,255,255,0.22) !important; color: #ffffff !important; } .fi-topbar .fi-topbar-item-button[data-active] *, .fi-topbar .fi-topbar-item-button.fi-active * { color: #ffffff !important; } /* Catch-all: any button inside the topbar nav should never go dark-on-white */ .fi-topbar nav button, .fi-topbar nav a { color: #ffffff !important; } .fi-topbar nav button:focus, .fi-topbar nav a:focus { outline-color: rgba(255,255,255,0.5) !important; } /* ── Readable row lines on TableRepeater entry grids (voucher line items) ── Requested after a first pass with a full boxed grid (every cell bordered) looked spreadsheet-y rather than polished. This version instead uses: one clean border around the whole table, a slightly stronger line under the header row, and a plain divider between each data row -- no vertical lines between columns. Filament's own List/Index tables carry the "fi-ta-table" class, deliberately excluded here so the Cards/Receipts/etc. register tables elsewhere in the app are untouched -- this only affects tables rendered inside a form (TableRepeater), whether that form is a full edit page (Card, Inquiry) or a create/edit modal (PaySupplier, PayRefund, GeneralJournal, Expense). */ table:not(.fi-ta-table) { border-collapse: collapse !important; border: 1.5px solid #94a3b8 !important; } table:not(.fi-ta-table) th, table:not(.fi-ta-table) td { border: none !important; border-bottom: 1px solid #d8dee8 !important; } table:not(.fi-ta-table) thead th { border-bottom: 1.5px solid #94a3b8 !important; } table:not(.fi-ta-table) tbody tr:last-child td { border-bottom: none !important; } .dark table:not(.fi-ta-table) { border-color: #64748b !important; } .dark table:not(.fi-ta-table) th, .dark table:not(.fi-ta-table) td { border-bottom-color: #3b4657 !important; } .dark table:not(.fi-ta-table) thead th { border-bottom-color: #64748b !important; } /* ── Highlight the cell currently being edited in a TableRepeater grid ───── :focus-within on the lights up as soon as any field inside it (native input, or a nested Select/Choices.js control) receives focus -- works regardless of how deep the actual focusable element sits. Kept as its own block, separate from the border rules above, so either can be reverted independently if needed. */ table:not(.fi-ta-table) td:focus-within { background-color: #eaf2ff !important; box-shadow: inset 0 0 0 1.5px #3b82f6 !important; } .dark table:not(.fi-ta-table) td:focus-within { background-color: #17304f !important; box-shadow: inset 0 0 0 1.5px #60a5fa !important; } /* ── Remove native number-input up/down spinner arrows ────────────────────── Requested: pure visual clutter on Sale/Cost/Tax etc. fields across Receipts, Cards, and every other numeric TextInput app-wide -- nobody clicks them to increment a price by 1. Applies globally since this file loads on every admin page. */ input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } /* ── Solid-fill status badges (BadgeColumn / Badge) ───────────────────────── Filament's default badge is a soft pastel tint (bg-{color}-50 + text- {color}-600), which reads as flat/washed out for at-a-glance status columns (Card register's Status, Receipt "Draft/Sent/Paid" style badges, etc). Confirmed via live DOM inspection that every badge already carries its color as inline custom properties (--c-50/--c-400/--c-600 mapped to --{color}-50/400/600), so re-pointing background/text to --c-600 turns the same badges solid without needing a class per color. Warning (amber) gets its own lighter/darker pairing since white-on-amber-600 is low contrast -- dark text on the brighter amber-400 instead, matching the "Partially Paid" reference style. */ .fi-badge { background-color: var(--c-600) !important; color: #fff !important; box-shadow: none !important; font-weight: 600 !important; } .fi-badge.fi-color-warning { background-color: var(--c-400) !important; color: #1f2937 !important; } .dark .fi-badge { background-color: var(--c-600) !important; color: #fff !important; } .dark .fi-badge.fi-color-warning { background-color: var(--c-400) !important; color: #1f2937 !important; }