/* shadcn-style skin for the Filament panel. Loaded via a at the end of , after Filament's theme.css, so equal-specificity rules win by order. Filament v5 builds its chrome from Tailwind v4 custom properties (--tw-ring-*, --tw-shadow, --radius-*, --gray-*), and the default gray is already Zinc — shadcn's neutral. So this skin mostly re-targets those tokens rather than fighting compiled rules: · cards/inputs: 1px zinc-200 hairline (ring) + shadow-xs, instead of Filament's tinted ring + shadow-sm — the single biggest "shadcn" cue · sidebar: muted zinc-50 surface with a hairline divider (shadcn sidebar) · table headers: muted + font-medium (not near-black semibold), tighter · buttons: rounded-md (shadcn) instead of rounded-lg · inputs: shadcn focus = hairline turns primary + a soft 3px halo · headings/stat values: tracking-tight · dark mode: zinc-800 hairlines on zinc-900 surfaces The brand primary (Settings → Branding) is left untouched — shadcn's neutral structure + the tenant's accent colour. */ /* ---- shadcn tokens ---------------------------------------------------- */ :root { --shadcn-border: #e4e4e7; /* zinc-200 — light hairline */ --shadcn-border-dark: #27272a; /* zinc-800 — dark hairline */ --shadcn-shadow-xs: 0 1px 2px 0 #0000000d; --shadcn-shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; --shadcn-shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a; --shadcn-sidebar: #fafafa; /* zinc-50 — muted sidebar surface */ } /* ---- cards: sections, tables, widgets, stats -------------------------- */ .fi-section:not(.fi-section-not-contained):not(.fi-aside), .fi-section:not(.fi-section-not-contained).fi-aside > .fi-section-content-ctn, .fi-ta-ctn, .fi-wi-stats-overview-stat, .fi-wi-widget, .fi-fo-repeater-item, .fi-fieldset { --tw-shadow: var(--shadcn-shadow-xs); --tw-ring-color: var(--shadcn-border); } :is(.dark, .dark *):is( .fi-section:not(.fi-section-not-contained):not(.fi-aside), .fi-ta-ctn, .fi-wi-stats-overview-stat, .fi-wi-widget, .fi-fo-repeater-item, .fi-fieldset ) { --tw-ring-color: var(--shadcn-border-dark); } /* ---- topbar: flat, hairline-separated --------------------------------- */ .fi-topbar { --tw-shadow: 0 0 #0000; --tw-ring-color: var(--shadcn-border); } .fi-topbar:where(.dark, .dark *) { --tw-ring-color: var(--shadcn-border-dark); } /* ---- sidebar: muted surface + hairline (shadcn sidebar) --------------- */ .fi-sidebar:not(.fi-sidebar-open-on-mobile) { background-color: var(--shadcn-sidebar); } .fi-sidebar { border-inline-end: 1px solid var(--shadcn-border); } .fi-sidebar:where(.dark, .dark *) { background-color: var(--gray-900); border-inline-end-color: var(--shadcn-border-dark); } /* Only the ACTIVE item gets a background (resting items stay transparent — Filament scopes it that way too; an earlier unscoped override here had washed every item). gray-100 ≈ invisible on the zinc-50 surface, so the active marker is nudged one step up. */ .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background-color: color-mix(in oklab, var(--gray-200) 55%, transparent); } .fi-sidebar-item.fi-active > .fi-sidebar-item-btn:where(.dark, .dark *) { background-color: #ffffff0d; } /* ---- buttons: shadcn rounded-md, flat --------------------------------- */ .fi-btn { border-radius: var(--radius-md); --tw-shadow: var(--shadcn-shadow-xs); } .fi-icon-btn { border-radius: var(--radius-md); } /* ---- inputs: hairline + shadow-xs; shadcn focus halo ------------------ */ .fi-input-wrp { --tw-shadow: var(--shadcn-shadow-xs); --tw-ring-color: var(--shadcn-border); } .fi-input-wrp:where(.dark, .dark *) { --tw-ring-color: var(--shadcn-border-dark); } /* Focus: the hairline turns primary and gains a soft 3px halo (shadcn's ring-[3px] ring-ring/50), replacing Filament's hard 2px ring. Selector mirrors Filament's so it wins by source order at equal specificity. */ .fi-input-wrp:not(.fi-disabled):not(:has(.fi-ac-action:focus)):focus-within { --tw-ring-shadow: 0 0 0 1px var(--tw-ring-color), 0 0 0 4px color-mix(in oklab, var(--tw-ring-color) 28%, transparent); --tw-ring-color: var(--primary-600); } .fi-input-wrp:not(.fi-disabled):not(:has(.fi-ac-action:focus)).fi-invalid:focus-within { --tw-ring-color: var(--danger-600); } /* ---- tables: muted, compact headers (shadcn) --------------------------- */ .fi-ta-header-cell { padding-block: calc(var(--spacing) * 2.5); color: var(--gray-500); --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .fi-ta-header-cell:where(.dark, .dark *) { color: var(--gray-400); } /* ---- tables: density (rows were py-4, the bands py-3 — the "giant spaces"). shadcn rows are ~py-2.5; the toolbar and pagination bands slim to match. ------------------------------------------- */ .fi-ta-text:not(.fi-inline) { padding-block: calc(var(--spacing) * 2.5); } .fi-ta-header-toolbar { padding-block: calc(var(--spacing) * 2); } .fi-pagination { padding-block: calc(var(--spacing) * 2); } /* The per-table search shouldn't compete with the global one (⌘K). */ .fi-ta-search-field { max-width: 14rem; } /* ---- tables: heading + toolbar share ONE bar --------------------------- Filament stacks .fi-ta-header (heading/description/actions) and .fi-ta-header-toolbar (search · filters · columns) as two full-width bands, each with its own divider — two rows where one fits. When both are present, lay the container out as a row: heading left, toolbar right, one divider under the merged bar. Anything else in the header container (filters-above-content forms) keeps its own full-width row. */ .fi-ta-header-ctn:has(> .fi-ta-header):has(> .fi-ta-header-toolbar) { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--gray-200); } .fi-ta-header-ctn:has(> .fi-ta-header):has(> .fi-ta-header-toolbar) > .fi-ta-header { flex: 1 1 auto; width: auto; border-bottom: none; padding-block: calc(var(--spacing) * 2.5); } .fi-ta-header-ctn:has(> .fi-ta-header):has(> .fi-ta-header-toolbar) > .fi-ta-header-toolbar { flex: 0 1 auto; width: auto; margin-inline-start: auto; border-bottom: none; } .fi-ta-header-ctn:has(> .fi-ta-header):has(> .fi-ta-header-toolbar) > :not(.fi-ta-header):not(.fi-ta-header-toolbar) { flex-basis: 100%; } .fi-ta-header-ctn:has(> .fi-ta-header):has(> .fi-ta-header-toolbar):where(.dark, .dark *) { border-bottom-color: var(--shadcn-border-dark); } /* ---- overlays: dropdowns shadow-md, modals shadow-lg + hairline ------- */ .fi-dropdown-panel { --tw-shadow: var(--shadcn-shadow-md); --tw-ring-color: var(--shadcn-border); } .fi-dropdown-panel:where(.dark, .dark *) { --tw-ring-color: var(--shadcn-border-dark); } .fi-modal-window { --tw-shadow: var(--shadcn-shadow-lg); --tw-ring-color: var(--shadcn-border); } .fi-modal-window:where(.dark, .dark *) { --tw-ring-color: var(--shadcn-border-dark); } /* ---- typography: shadcn's tracking-tight headings ---------------------- */ .fi-header-heading, .fi-section-header-heading, .fi-modal-heading, .fi-wi-stats-overview-stat-value { letter-spacing: -0.025em; } /* ---- badges: hairline instead of tinted ring (gray only) --------------- */ .fi-badge.fi-color-gray { --tw-ring-color: var(--shadcn-border); } .fi-badge.fi-color-gray:where(.dark, .dark *) { --tw-ring-color: var(--shadcn-border-dark); }