/* Smith & Smith site-wide brand theme. Loaded directly (no Vite build needed) by both the public Breeze layout and the Filament admin panel, so the two stay in sync automatically. Picking "Smith & Smith Brand" in /admin/appearance sets data-theme="smith" on ; "Standard Clean" leaves Breeze's original neutral look alone. */ :root { --brand-primary: #1f4c41; --brand-primary-light: #317162; --brand-primary-dark: #163a32; --brand-accent: #c5a059; --brand-canvas-dark: #0d1512; --brand-canvas: #f7f5f0; } /* ---- The Smith & Smith seal logo always needs a dark backdrop to read (it's a pale/white mark, exactly as used on the real production site's dark green header) -- this applies regardless of theme, since it's a property of the logo asset itself, not a theme choice. ---- */ .theme-logo-badge { display: inline-flex; align-items: center; justify-content: center; background-color: var(--brand-primary); border-radius: 9999px; padding: 0.4rem; line-height: 0; } /* ---- Public site (Breeze) overrides, only when the Smith theme is active ---- */ [data-theme="smith"]:not(.dark) body { background-color: var(--brand-canvas); } [data-theme="smith"]:not(.dark) .bg-gray-100 { background-color: var(--brand-canvas) !important; } [data-theme="smith"] .bg-gray-800 { background-color: var(--brand-primary) !important; } [data-theme="smith"] .hover\:bg-gray-700:hover { background-color: var(--brand-primary-light) !important; } [data-theme="smith"] .active\:bg-gray-900:active { background-color: var(--brand-primary-dark) !important; } [data-theme="smith"] .border-indigo-400 { border-color: var(--brand-primary) !important; } [data-theme="smith"] .text-indigo-700 { color: var(--brand-primary) !important; } [data-theme="smith"] .text-indigo-600 { color: var(--brand-primary) !important; accent-color: var(--brand-primary); } [data-theme="smith"] .bg-indigo-50 { background-color: #eef1ef !important; } [data-theme="smith"] .focus\:border-indigo-500:focus, [data-theme="smith"] .focus\:border-indigo-700:focus { border-color: var(--brand-primary) !important; } [data-theme="smith"] .focus\:ring-indigo-500:focus { --tw-ring-color: var(--brand-accent) !important; } [data-theme="smith"] .focus\:text-indigo-800:focus { color: var(--brand-primary-dark) !important; } [data-theme="smith"] .focus\:bg-indigo-100:focus { background-color: #e3e8e5 !important; } /* ---- Top nav becomes the brand's dark green banner (matching the real site) when the Smith theme is active; text/links flip to light. ---- */ [data-theme="smith"] nav.bg-white { background-color: var(--brand-primary) !important; border-bottom-color: var(--brand-primary-dark) !important; } [data-theme="smith"] nav .text-gray-500, [data-theme="smith"] nav .text-gray-700, [data-theme="smith"] nav .text-gray-900 { color: #f3ede1 !important; } [data-theme="smith"] nav .hover\:text-gray-700:hover, [data-theme="smith"] nav .hover\:text-gray-900:hover { color: #ffffff !important; } [data-theme="smith"] nav .hover\:border-gray-300:hover { border-color: rgba(255,255,255,.4) !important; } [data-theme="smith"] nav .border-indigo-400, [data-theme="smith"] nav .focus\:border-indigo-700:focus { border-color: var(--brand-accent) !important; } [data-theme="smith"] nav .text-indigo-700 { color: var(--brand-accent) !important; } [data-theme="smith"] nav .bg-indigo-50 { background-color: rgba(255,255,255,.08) !important; } [data-theme="smith"] nav .hover\:bg-gray-50:hover { background-color: rgba(255,255,255,.12) !important; } [data-theme="smith"] nav svg.fill-current { fill: #f3ede1; } /* ---- Appearance page swatch cards (admin panel, both themes) ---- */ .theme-swatch-card { position: relative; text-align: left; padding: 1rem; border-radius: 0.5rem; border-width: 2px; border-style: solid; border-color: #e5e7eb; background-color: #fff; transition: border-color .15s ease-in-out, background-color .15s ease-in-out; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; font-size: 0.875rem; line-height: 1.25rem; width: 100%; } .theme-swatch-card:hover { border-color: #9ca3af; } .theme-swatch-card.is-selected { border-color: var(--swatch-accent, #f59e0b); background-color: var(--swatch-tint, #fffbeb); } .theme-swatch-card .theme-swatch-title { font-weight: 600; color: #030712; } .theme-swatch-card .theme-swatch-desc { color: #6b7280; margin-top: 0.25rem; font-size: 0.75rem; } .theme-swatch-dots { display: flex; align-items: center; gap: 0.375rem; margin-top: 1rem; } .theme-swatch-dot { width: 1.25rem; height: 1.25rem; border-radius: 9999px; border: 1px solid rgba(0,0,0,.1); display: inline-block; } .theme-swatch-check { width: 0.5rem; height: 0.5rem; border-radius: 9999px; } .theme-swatch-row { display: flex; align-items: center; justify-content: space-between; } /* ---- Filament admin panel: match the public site's nav bar look (2026-09-05) ---- */ html:not([data-theme]) .fi-topbar, [data-theme="smith"] .fi-topbar { background-color: var(--brand-primary) !important; box-shadow: none !important; } [data-theme="smith"] .fi-topbar .fi-icon, [data-theme="smith"] .fi-topbar-item-label, [data-theme="smith"] .fi-tenant-menu-trigger-text { color: #f3ede1 !important; } [data-theme="smith"] .fi-topbar-item-btn:hover, [data-theme="smith"] .fi-topbar-item-btn:focus-visible, [data-theme="smith"] .fi-topbar-open-sidebar-btn:hover, [data-theme="smith"] .fi-topbar-close-sidebar-btn:hover, [data-theme="smith"] .fi-topbar-open-collapse-sidebar-btn:hover, [data-theme="smith"] .fi-topbar-close-collapse-sidebar-btn:hover { background-color: rgba(255, 255, 255, 0.12) !important; } /* Active top-nav item (only relevant if top navigation is ever enabled): gold underline, matching the amber underline beneath "Dashboard" on the public site */ [data-theme="smith"] .fi-topbar-item { position: relative; } [data-theme="smith"] .fi-topbar-item.fi-active .fi-topbar-item-btn { background-color: rgba(255, 255, 255, 0.14) !important; } [data-theme="smith"] .fi-topbar-item.fi-active .fi-topbar-item-label, [data-theme="smith"] .fi-topbar-item.fi-active .fi-icon { color: #ffffff !important; } [data-theme="smith"] .fi-topbar-item.fi-active::after { content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: -0.35rem; height: 2px; background-color: var(--brand-accent); border-radius: 9999px; } /* Active sidebar item: gold accent instead of Filament's default primary tint, since the sidebar (unlike the public nav) is a vertical list */ [data-theme="smith"] .fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background-color: #f7f0e3 !important; border-inline-start: 3px solid var(--brand-accent) !important; } [data-theme="smith"] .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon, [data-theme="smith"] .fi-sidebar-item.fi-active > .fi-sidebar-item-label { color: var(--brand-primary) !important; } /* User menu trigger in the topbar: white pill with the user's name + a chevron, matching the public site's "Jacob Griffiths ⌄" pill. The name/chevron spans are injected by a small script in AdminPanelProvider (Filament only renders the plain avatar button in the topbar position by default). */ [data-theme="smith"] .fi-topbar .fi-user-menu-trigger { display: flex !important; align-items: center; gap: 0.5rem; background-color: #ffffff !important; border-radius: 9999px !important; padding: 0.375rem 0.875rem 0.375rem 0.375rem !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); } [data-theme="smith"] .fi-topbar .fi-user-menu-trigger .fi-user-menu-trigger-text { display: inline-flex !important; color: var(--brand-primary-dark) !important; font-weight: 600; font-size: 0.875rem; white-space: nowrap; } [data-theme="smith"] .fi-topbar .fi-user-menu-trigger .ss-user-menu-chevron { display: inline-flex !important; color: var(--brand-primary-dark) !important; opacity: 0.7; font-size: 0.75rem; line-height: 1; } /* Page background: the same warm cream as the public dashboard */ [data-theme="smith"]:not(.dark) .fi-body { background-color: var(--brand-canvas) !important; } /* ---- Filament panel login page: pull the "Sign in" button and the focused input border from the true hand-tuned brand palette above, instead of Filament's auto-generated --primary-* shades. Filament's palette generator treats the seed hex as if it belonged at the 500 step and produces much brighter/more saturated tints for the button (which uses the 400 step) and focus ring than the real brand green (see roadmap open question 11). ---- */ [data-theme="smith"] .fi-btn.fi-color-primary.fi-bg-color-400 { background-color: var(--brand-primary) !important; color: #ffffff !important; } [data-theme="smith"] .fi-btn.fi-color-primary.fi-bg-color-400:hover { background-color: var(--brand-primary-dark) !important; } [data-theme="smith"] .fi-input-wrp:focus-within { /* 2026-09-08: unified to the gold accent focus already used on the Breeze forgot-password page, per Jake's request that all fields match that look. */ border-color: var(--brand-accent) !important; box-shadow: 0 0 0 1px var(--brand-accent) !important; } /* Table styling, 2026-09-08 (refined 2026-09-07 per Jake's structural template): green/gold header, alternating row colours, a full-row hover highlight, rounded card corners, uppercase header labels, and subtle row-dividing borders -- applied to every Filament table across the whole admin panel (resource tables, widget tables, relation manager tables) since they all render through the same .fi-ta-table markup. Colours kept to the brand green/gold palette Jake asked for rather than the grey/blue example he sent, since that example was for structure/layout (rounded corners, uppercase headers, row borders, hover) rather than colour -- easy to swap to literal grey/blue if that is what he'd prefer instead. */ [data-theme="smith"] .fi-ta-ctn { overflow: hidden; } [data-theme="smith"] .fi-ta-table thead tr { background-color: color-mix(in srgb, var(--brand-primary-light) 75%, white); border-bottom: 3px solid var(--brand-accent); } [data-theme="smith"] .fi-ta-table .fi-ta-header-cell { color: #ffffff; } [data-theme="smith"] .fi-ta-table .fi-ta-header-cell-label, [data-theme="smith"] .fi-ta-table .fi-ta-header-cell-sort-btn { color: #ffffff; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.75rem; font-weight: 600; } [data-theme="smith"] .fi-ta-table .fi-ta-header-cell-sort-btn:hover, [data-theme="smith"] .fi-ta-table .fi-ta-header-cell-sort-btn:hover .fi-icon { color: var(--brand-accent); } [data-theme="smith"] .fi-ta-table .fi-ta-header-cell .fi-icon { color: rgba(255, 255, 255, 0.85); } [data-theme="smith"] .fi-ta-table tbody tr.fi-ta-row { transition: background-color 0.15s ease; } [data-theme="smith"] .fi-ta-table tbody tr.fi-ta-row:nth-child(even) { background-color: rgba(31, 76, 65, 0.05); } [data-theme="smith"] .fi-ta-table tbody tr.fi-ta-row:nth-child(odd) { background-color: #ffffff; } [data-theme="smith"].dark .fi-ta-table tbody tr.fi-ta-row:nth-child(odd) { background-color: rgba(255, 255, 255, 0.03); } [data-theme="smith"] .fi-ta-table tbody tr.fi-ta-row .fi-ta-cell { border-bottom: 1px solid rgba(31, 41, 55, 0.08); } [data-theme="smith"].dark .fi-ta-table tbody tr.fi-ta-row .fi-ta-cell { border-bottom-color: rgba(255, 255, 255, 0.08); } [data-theme="smith"] .fi-ta-table tbody tr.fi-ta-row:last-child .fi-ta-cell { border-bottom: none; } [data-theme="smith"] .fi-ta-table tbody tr.fi-ta-row:hover { background-color: rgba(197, 160, 89, 0.22) !important; } /* Denser tables (2026-09-07): tighter row padding and full-width content so the Enquiries table (and other Filament tables) show more data without excess whitespace, especially now it has more columns. */ .fi-ta-text.fi-ta-text-item { padding-top: 0.5rem; padding-bottom: 0.5rem; } .fi-ta-header-cell { padding-top: 0.625rem; padding-bottom: 0.625rem; } .fi-main.fi-width-full { max-width: none; } /* Page titles (2026-09-07): colour each page's title (the "table name", e.g. "Enquiries") with the main brand green for consistency. The table header bar itself is handled by the existing themed rule above, now dialled back to 3/4 strength. */ .fi-header-heading { color: var(--brand-primary); } /* Login page (2026-09-07): put the sign-in card in a slightly transparent grey box (a soft "frosted glass" look over the photo carousel) and tighten its padding from Filament's spacious default. */ .fi-simple-page-content { background-color: rgba(229, 231, 235, 0.68); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 1.25rem; border-radius: 1.25rem; } /* 2026-09-08: shared login-page carousel background + overlay, reused verbatim on the Breeze forgot-password page (resources/views/layouts/guest.blade.php) so both pages get the same rotating-photo background and glass card, per Jake's request. Also present inline on the Filament login page itself (app/Providers/Filament/AdminPanelProvider.php, SIMPLE_PAGE_START hook) -- kept here too so a plain Blade page with no Filament render hooks can use the same classes on its own. */ .ss-login-carousel{position:fixed;inset:0;z-index:0;overflow:hidden;} .ss-login-carousel .ss-login-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;animation:ss-login-fade 30s infinite;} .ss-login-carousel .ss-login-slide:nth-child(1){background-image:url('/images/login/kitchen-1.jpg');animation-delay:0s;} .ss-login-carousel .ss-login-slide:nth-child(2){background-image:url('/images/login/kitchen-2.jpg');animation-delay:6s;} .ss-login-carousel .ss-login-slide:nth-child(3){background-image:url('/images/login/kitchen-3.jpg');animation-delay:12s;} .ss-login-carousel .ss-login-slide:nth-child(4){background-image:url('/images/login/kitchen-4.jpg');animation-delay:18s;} .ss-login-carousel .ss-login-slide:nth-child(5){background-image:url('/images/login/kitchen-5.jpg');animation-delay:24s;} @keyframes ss-login-fade{0%{opacity:0;}8%{opacity:1;}20%{opacity:1;}28%{opacity:0;}100%{opacity:0;}} .ss-login-overlay{position:fixed;inset:0;z-index:1;background:rgba(15,30,26,.32);pointer-events:none;} .fi-simple-page-content{position:relative;z-index:2;} @media (prefers-reduced-motion: reduce){.ss-login-carousel .ss-login-slide{animation:none;opacity:0;}.ss-login-carousel .ss-login-slide:first-child{opacity:1;}} /* Keeps the Breeze guest layout's "back to home" logo link visible above the fixed carousel/overlay added above (2026-09-08). */ .home-logo-badge{position:relative;z-index:2;} /* Table title + search bar (2026-09-08): merge each table's title and its search box into one flush deep-green bar (title left, search right), removing the blank gap that used to sit between them, and apply this the same way across every table in the panel. */ .fi-ta-header-ctn { display: flex; flex-wrap: wrap; align-items: center; background-color: var(--brand-primary); } .fi-ta-header { padding: 0.75rem 1.5rem; } .fi-ta-header-heading { color: #fff; } .fi-ta-header-toolbar { margin-left: auto; padding: 0.75rem 1.5rem; } /* Topbar brand logo enlarged to fill the header bar height (PHP badge size bumped to match) */ .fi-topbar .fi-logo { height: 4rem !important; } /* Live topbar clock, injected via PanelsRenderHook::TOPBAR_START */ .fi-topbar { position: relative; } .brand-topbar-clock { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--brand-accent); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.02em; white-space: nowrap; pointer-events: none; } @media (max-width: 1024px) { .brand-topbar-clock { display: none; } } /* Account-menu icons were inheriting the topbar's cream text color, making them nearly invisible on the dropdown panel's light background. */ html:not(.dark)[data-theme="smith"] .fi-topbar .fi-dropdown-panel .fi-icon { color: rgb(75, 85, 99) !important; } /* 2026-09-08: green header bar across the top of the login card (white text, logo at left), and a more prominent "Forgot your password?" link -- both requested by Jake with a hand-drawn annotation on the login screenshot. */ .brand-login-topbar{ display:flex; align-items:center; gap:0.75rem; background-color:var(--brand-primary); color:#fff; margin:-1.25rem -1.25rem 1.25rem -1.25rem; padding:0.85rem 1.25rem; border-radius:1.25rem 1.25rem 0 0; } .brand-login-topbar img{height:2rem;width:auto;max-width:3rem;object-fit:contain;flex-shrink:0;} .brand-login-topbar span{font-weight:600;letter-spacing:0.05em;text-transform:uppercase;font-size:0.875rem;} .brand-forgot-link{ display:inline-block; padding:0.5rem 1.25rem; border:1.5px solid var(--brand-accent); border-radius:9999px; color:var(--brand-primary-dark); font-weight:600; font-size:0.875rem; text-decoration:none; transition:background-color 0.15s ease, color 0.15s ease; } .brand-forgot-link:hover{background-color:var(--brand-accent);color:#fff;} /* 2026-09-08: Jake asked to hide Filament's own default logo+heading block above our custom green .brand-login-topbar bar on the login page. */ .fi-simple-header{display:none !important;} /* 2026-09-08: password-requirements info box on the change-password page, per Jake's request. Reflects the actual policy in AppServiceProvider (Password::min(10)->mixedCase()->numbers()->uncompromised()). */ .brand-password-requirements{ background-color:rgba(197,160,89,0.12); border:1px solid var(--brand-accent); border-radius:0.75rem; padding:0.85rem 1.1rem; margin-bottom:1.25rem; } .brand-password-requirements__title{ font-weight:600; margin:0 0 0.4rem 0; color:var(--brand-primary-dark); } .brand-password-requirements ul{ margin:0 0 0.5rem 1.1rem; padding:0; font-size:0.875rem; color:#374151; } .brand-password-requirements ul li{ margin-bottom:0.15rem; } .brand-password-requirements__tip{ font-size:0.8rem; color:#4b5563; margin:0; font-style:italic; } /* All Filament section headers (dashboard widgets, resource forms like Add/Edit Enquiry, etc.) - green background, white text, matching the brand colour used everywhere else. Originally added 2026-09-08 scoped to dashboard widgets only; broadened 2026-09-09 so every section header across the app is visually consistent. */ .fi-section-header { background-color: var(--brand-primary); padding: 0.75rem 1.5rem; border-radius: 0.75rem 0.75rem 0 0; } .fi-section-header-heading { color: #fff; } /* 2026-09-11: section header description/subtitle text ("Updated... refreshes every X minutes", "7-day outlook...", Designer Performance's descriptive line, etc) was rendering in Filament's default low-contrast gray against the green .fi-section-header background used everywhere - hard to read, per Jake. Background here is always green, so give the description text a fixed light color instead of Filament's background-agnostic default. */ .fi-section-header-description { color: rgba(255, 255, 255, 0.85); } /* 2026-09-09: dark mode (moon icon under username), requested by Jake to look like his reference mockup - near-black canvas instead of Filament's default gray, keeping the green section headers and gold accent already used elsewhere. */ [data-theme="smith"].dark body, [data-theme="smith"].dark .fi-body { background-color: var(--brand-canvas-dark) !important; } [data-theme="smith"].dark .bg-gray-100 { background-color: #1a2e28 !important; } [data-theme="smith"].dark .fi-sidebar, [data-theme="smith"].dark .fi-topbar { border-color: var(--brand-primary-dark); } [data-theme="smith"].dark .fi-section, [data-theme="smith"].dark .fi-wi-chart, [data-theme="smith"].dark .fi-wi-table, [data-theme="smith"].dark .fi-ta-ctn { background-color: #16221d; border-color: var(--brand-primary-dark); } [data-theme="smith"].dark .fi-ta-table thead tr { background-color: #1a2e28; } [data-theme="smith"].dark .fi-input-wrp:focus-within { border-color: var(--brand-accent) !important; } [data-theme="smith"].dark .fi-ta-header-cell-sort-btn.fi-active .fi-icon { color: var(--brand-accent) !important; } /* 2026-09-09: Dashboard/Design/Checkmeasure/Production/Jobs/My Tasks/Calendar are each wrapped in their own single-item NavigationGroup (see AdminPanelProvider) purely so they can be interleaved with the real Enquiries/Installations/SMS/Administration groups in one ordered sidebar list, per Jake's exact requested order. Hide the resulting redundant single-item sub-row (identical to the group's own clickable label) so these still look and behave like ordinary flat menu items. */ [data-solo-group] .fi-sidebar-group-items { display: none !important; } /* 2026-09-12: Client Search results tables ("Results from Enquiries" / "Results from Jobs") are hand-rolled HTML (not Filament's table builder), so they never picked up the green/gold/alternating-row/hover look above automatically. The header bar and cell colours were set inline in client-search.blade.php itself (thStyle/tdStyle/h2 style, since that file already builds every element's style from small PHP string variables); alternating stripes and the hover highlight can't be done with a static inline style, so both tables were given a shared "ss-results-table" class and get those two effects from here instead -- reusing the exact same colours as the .fi-ta-table rules further up this file, per Jake's request that this look be applied "sitewide". */ .ss-results-table tbody tr { transition: background-color 0.15s ease; } .ss-results-table tbody tr:nth-child(odd) { background-color: #ffffff; } .ss-results-table tbody tr:nth-child(even) { background-color: rgba(31, 76, 65, 0.05); } .ss-results-table tbody tr:hover { background-color: rgba(197, 160, 89, 0.22) !important; }