/* ========================================================================== Users panel — product skin (light + dark) Loaded only on the Filament `users` panel via UsersPanelProvider. Filament 5 toggles dark mode with `class="dark"` on , NOT `.fi-dark`. All dark rules use: html.dark .fi-panel-users … ========================================================================== */ /* -------------------------------------------------------------------------- Brand logos -------------------------------------------------------------------------- */ .fi-panel-users .fi-simple-header .fi-logo img { height: 12rem !important; width: auto; max-width: min(100%, 18rem); object-fit: contain; } .fi-panel-users .fi-sidebar-header-logo-ctn .fi-logo img { height: 4rem !important; width: auto; object-fit: contain; } /* -------------------------------------------------------------------------- Shell atmosphere -------------------------------------------------------------------------- */ .fi-panel-users .fi-main { background: radial-gradient(1200px 480px at 12% -10%, rgba(13, 148, 136, 0.14), transparent 55%), radial-gradient(900px 420px at 92% 0%, rgba(15, 118, 110, 0.08), transparent 50%), linear-gradient(180deg, #f3faf9 0%, #f8fafc 42%, #f1f5f9 100%); } html.dark .fi-panel-users .fi-main { background: radial-gradient(1000px 420px at 10% -8%, rgba(45, 212, 191, 0.14), transparent 55%), radial-gradient(800px 360px at 95% 0%, rgba(20, 184, 166, 0.1), transparent 50%), linear-gradient(180deg, #070b14 0%, #0b1220 48%, #0f172a 100%); } /* Auth / simple layout pages (login, register, password reset) */ .fi-panel-users .fi-simple-layout { min-height: 100dvh; background: radial-gradient(900px 420px at 15% 0%, rgba(13, 148, 136, 0.16), transparent 55%), radial-gradient(700px 380px at 90% 10%, rgba(15, 118, 110, 0.1), transparent 50%), linear-gradient(180deg, #f0fdfa 0%, #f8fafc 55%, #eef2f7 100%); } html.dark .fi-panel-users .fi-simple-layout { background: radial-gradient(900px 420px at 15% 0%, rgba(45, 212, 191, 0.12), transparent 55%), radial-gradient(700px 380px at 90% 10%, rgba(20, 184, 166, 0.08), transparent 50%), linear-gradient(180deg, #070b14 0%, #0b1220 55%, #111827 100%); } .fi-panel-users .fi-simple-main { border-radius: 1.25rem; border: 1px solid rgba(13, 148, 136, 0.16); background: rgba(255, 255, 255, 0.92); box-shadow: 0 24px 48px -28px rgba(15, 118, 110, 0.45); backdrop-filter: blur(8px); } html.dark .fi-panel-users .fi-simple-main { border-color: rgba(45, 212, 191, 0.18); background: rgba(15, 23, 42, 0.88); box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.75); } /* Sidebar + topbar */ .fi-panel-users .fi-sidebar { border-inline-end: 1px solid rgba(13, 148, 136, 0.12); background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(10px); } html.dark .fi-panel-users .fi-sidebar { border-inline-end-color: rgba(45, 212, 191, 0.12); background: rgba(8, 12, 22, 0.88); } .fi-panel-users .fi-sidebar-item-button:hover, .fi-panel-users .fi-sidebar-item-button:focus-visible { background: rgba(13, 148, 136, 0.08); } html.dark .fi-panel-users .fi-sidebar-item-button:hover, html.dark .fi-panel-users .fi-sidebar-item-button:focus-visible { background: rgba(45, 212, 191, 0.1); } .fi-panel-users .fi-sidebar-item.fi-active .fi-sidebar-item-button { background: rgba(13, 148, 136, 0.12); } html.dark .fi-panel-users .fi-sidebar-item.fi-active .fi-sidebar-item-button { background: rgba(45, 212, 191, 0.14); } .fi-panel-users .fi-topbar { backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.72) !important; border-bottom: 1px solid rgba(13, 148, 136, 0.1); } html.dark .fi-panel-users .fi-topbar { background: rgba(8, 12, 22, 0.78) !important; border-bottom-color: rgba(45, 212, 191, 0.12); } /* Page headings */ .fi-panel-users .fi-header-heading { letter-spacing: -0.02em; font-weight: 750; } .fi-panel-users .fi-header-subheading { color: #64748b; } html.dark .fi-panel-users .fi-header-subheading { color: #94a3b8; } /* Hide empty page heading chrome on dashboard */ .fi-panel-users .fi-page-dashboard .fi-header:empty, .fi-panel-users .fi-page-dashboard .fi-header:has(.fi-header-heading:empty) { display: none; } .fi-panel-users .fi-page-dashboard .fi-header-heading:empty { display: none; } /* -------------------------------------------------------------------------- Dashboard hero -------------------------------------------------------------------------- */ .bw-dash-hero { position: relative; display: grid; grid-template-columns: 1.4fr 0.8fr; gap: 1.5rem; align-items: center; overflow: hidden; margin-bottom: 0.85rem; padding: 1.75rem 1.85rem; border-radius: 1.25rem; border: 1px solid rgba(13, 148, 136, 0.18); background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(240, 253, 250, 0.88) 55%, rgba(204, 251, 241, 0.55) 100%); box-shadow: 0 18px 40px -28px rgba(15, 118, 110, 0.45); } html.dark .bw-dash-hero { border-color: rgba(45, 212, 191, 0.22); background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(19, 78, 74, 0.42) 100%); box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.7); } .bw-dash-hero__eyebrow { margin: 0 0 0.4rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #0f766e; } html.dark .bw-dash-hero__eyebrow { color: #5eead4; } .bw-dash-hero__title { margin: 0 0 0.55rem; font-size: clamp(1.55rem, 2.4vw, 2.05rem); font-weight: 750; line-height: 1.15; letter-spacing: -0.02em; color: #0f172a; } html.dark .bw-dash-hero__title { color: #f8fafc; } .bw-dash-hero__lede { margin: 0; max-width: 38rem; font-size: 0.975rem; line-height: 1.55; color: #475569; } html.dark .bw-dash-hero__lede { color: #94a3b8; } .bw-dash-hero__actions { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1.15rem; } .bw-dash-hero__btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.55rem 1rem; border-radius: 0.7rem; font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease; } .bw-dash-hero__btn:hover { transform: translateY(-1px); } .bw-dash-hero__btn--primary { color: #fff; background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%); box-shadow: 0 10px 22px -12px rgba(13, 148, 136, 0.9); } html.dark .bw-dash-hero__btn--primary { background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%); box-shadow: 0 10px 22px -12px rgba(45, 212, 191, 0.55); } .bw-dash-hero__btn--primary:hover { box-shadow: 0 14px 26px -12px rgba(13, 148, 136, 1); } .bw-dash-hero__btn--ghost { color: #0f766e; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(13, 148, 136, 0.28); } html.dark .bw-dash-hero__btn--ghost { color: #99f6e4; background: rgba(15, 23, 42, 0.55); border-color: rgba(45, 212, 191, 0.32); } html.dark .bw-dash-hero__btn--ghost:hover { background: rgba(45, 212, 191, 0.12); } .bw-dash-hero__visual { position: relative; min-height: 8.5rem; } .bw-dash-hero__orb { position: absolute; border-radius: 9999px; filter: blur(2px); } .bw-dash-hero__orb--a { inset-inline-end: 8%; top: 8%; width: 7.5rem; height: 7.5rem; background: radial-gradient(circle at 30% 30%, #5eead4, #0d9488 70%, transparent 75%); opacity: 0.85; animation: bw-float 7s ease-in-out infinite; } html.dark .bw-dash-hero__orb--a { opacity: 0.95; background: radial-gradient(circle at 30% 30%, #99f6e4, #14b8a6 65%, transparent 75%); } .bw-dash-hero__orb--b { inset-inline-end: 28%; bottom: 6%; width: 4.25rem; height: 4.25rem; background: radial-gradient(circle at 40% 35%, #99f6e4, #14b8a6 65%, transparent 75%); opacity: 0.7; animation: bw-float 5.5s ease-in-out infinite reverse; } .bw-dash-hero__pulse { position: absolute; inset-inline-end: 18%; top: 38%; width: 0.7rem; height: 0.7rem; border-radius: 9999px; background: #14b8a6; box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.55); animation: bw-pulse 2.2s ease-out infinite; } html.dark .bw-dash-hero__pulse { background: #5eead4; box-shadow: 0 0 0 0 rgba(94, 234, 212, 0.55); } @keyframes bw-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes bw-pulse { 0% { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.55); } 70% { box-shadow: 0 0 0 14px rgba(20, 184, 166, 0); } 100% { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0); } } @media (max-width: 768px) { .bw-dash-hero { grid-template-columns: 1fr; padding: 1.35rem 1.25rem; } .bw-dash-hero__visual { display: none; } } /* -------------------------------------------------------------------------- Surfaces: stats, tables, sections, forms -------------------------------------------------------------------------- */ /* Stats overview: heading floats above cards (do NOT box the wrapper section) */ .fi-panel-users .fi-wi-stats-overview > .fi-section.fi-section-not-contained { border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; gap: 1.25rem !important; } .fi-panel-users .fi-wi-stats-overview .fi-section-header { margin: 0; padding: 0 0.15rem; } .fi-panel-users .fi-wi-stats-overview .fi-section-header-text-ctn { gap: 0.35rem !important; max-width: 42rem; } .fi-panel-users .fi-wi-stats-overview .fi-section-header-heading { margin: 0; line-height: 1.35; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.015em; } .fi-panel-users .fi-wi-stats-overview .fi-section-header-description { margin: 0; line-height: 1.5; color: #64748b; } html.dark .fi-panel-users .fi-wi-stats-overview .fi-section-header-description { color: #94a3b8; } .fi-panel-users .fi-wi-stats-overview .fi-section-content { gap: 1rem; } .fi-panel-users .fi-wi-stats-overview-stat { border-radius: 1rem !important; border: 1px solid rgba(13, 148, 136, 0.14) !important; border-top: 3px solid #14b8a6 !important; background: rgba(255, 255, 255, 0.86) !important; box-shadow: 0 12px 28px -22px rgba(15, 118, 110, 0.55); overflow: hidden; } html.dark .fi-panel-users .fi-wi-stats-overview-stat { border-color: rgba(45, 212, 191, 0.18) !important; border-top-color: #5eead4 !important; background: rgba(15, 23, 42, 0.78) !important; box-shadow: 0 12px 28px -22px rgba(0, 0, 0, 0.65); } .fi-panel-users .fi-wi-stats-overview-stat-value { font-weight: 750; letter-spacing: -0.03em; } /* Contained sections / tables only — skip not-contained (stats wrapper) */ .fi-panel-users .fi-wi-table, .fi-panel-users .fi-section:not(.fi-section-not-contained), .fi-panel-users .fi-ta-ctn, .fi-panel-users .fi-resource-list-records-page > .fi-section:not(.fi-section-not-contained), .fi-panel-users .fi-resource-create-record-page .fi-section:not(.fi-section-not-contained), .fi-panel-users .fi-resource-edit-record-page .fi-section:not(.fi-section-not-contained), .fi-panel-users .fi-sc-form .fi-section:not(.fi-section-not-contained) { border-radius: 1rem; border: 1px solid rgba(13, 148, 136, 0.12); background: rgba(255, 255, 255, 0.88); box-shadow: 0 14px 30px -24px rgba(15, 118, 110, 0.5); overflow: hidden; } html.dark .fi-panel-users .fi-wi-table, html.dark .fi-panel-users .fi-section:not(.fi-section-not-contained), html.dark .fi-panel-users .fi-ta-ctn, html.dark .fi-panel-users .fi-resource-list-records-page > .fi-section:not(.fi-section-not-contained), html.dark .fi-panel-users .fi-resource-create-record-page .fi-section:not(.fi-section-not-contained), html.dark .fi-panel-users .fi-resource-edit-record-page .fi-section:not(.fi-section-not-contained), html.dark .fi-panel-users .fi-sc-form .fi-section:not(.fi-section-not-contained) { border-color: rgba(45, 212, 191, 0.16); background: rgba(15, 23, 42, 0.72); box-shadow: 0 14px 30px -24px rgba(0, 0, 0, 0.7); } .fi-panel-users .fi-wi-table .fi-section-header-heading, .fi-panel-users .fi-wi-table .fi-ta-header-heading, .fi-panel-users .fi-section-header-heading { font-weight: 700; letter-spacing: -0.01em; } /* Soft table header strip */ .fi-panel-users .fi-ta-header { background: rgba(240, 253, 250, 0.65); } html.dark .fi-panel-users .fi-ta-header { background: rgba(19, 78, 74, 0.22); } .fi-panel-users .fi-ta-row:hover { background: rgba(13, 148, 136, 0.04); } html.dark .fi-panel-users .fi-ta-row:hover { background: rgba(45, 212, 191, 0.06); } /* Primary buttons linger with teal glow in dark */ html.dark .fi-panel-users .fi-btn.fi-color-primary { box-shadow: 0 8px 18px -12px rgba(45, 212, 191, 0.65); } /* Profile / account pages share the same surface treatment */ .fi-panel-users .fi-page > .fi-page-content .fi-section { border-radius: 1rem; } /* -------------------------------------------------------------------------- Global search — compact result rows -------------------------------------------------------------------------- */ .fi-panel-users .fi-global-search-result-link { padding: 0.55rem 0.85rem; } .fi-panel-users .fi-global-search-result-heading { font-size: 0.8125rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-weight: 600; line-height: 1.3; word-break: break-all; } .fi-panel-users .fi-global-search-result-details { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.65rem; margin-top: 0.2rem; } .fi-panel-users .fi-global-search-result-detail { display: inline-flex; align-items: baseline; gap: 0.25rem; margin: 0; font-size: 0.75rem; line-height: 1.35; } .fi-panel-users .fi-global-search-result-detail-label { display: none; } .fi-panel-users .fi-global-search-result-group-header { padding: 0.4rem 0.85rem; font-size: 0.75rem; } .fi-panel-users .fi-global-search-no-results-message { padding: 0.75rem 0.85rem; } /* -------------------------------------------------------------------------- Auth simple layout — back to public site -------------------------------------------------------------------------- */ .fi-panel-users .bw-auth-home { display: flex; justify-content: center; margin-top: 1rem; padding: 0.15rem 0 0.25rem; } .fi-panel-users .bw-auth-home__link { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.75rem; border-radius: 0.65rem; font-size: 0.875rem; font-weight: 600; color: #0f766e; text-decoration: none; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(13, 148, 136, 0.22); transition: transform 160ms ease, background 160ms ease, border-color 160ms ease; } .fi-panel-users .bw-auth-home__link:hover { transform: translateY(-1px); background: rgba(240, 253, 250, 0.9); border-color: rgba(13, 148, 136, 0.4); } .fi-panel-users .bw-auth-home__arrow { font-size: 1rem; line-height: 1; } html.dark .fi-panel-users .bw-auth-home__link { color: #99f6e4; background: rgba(15, 23, 42, 0.55); border-color: rgba(45, 212, 191, 0.28); } html.dark .fi-panel-users .bw-auth-home__link:hover { background: rgba(45, 212, 191, 0.12); } /* -------------------------------------------------------------------------- API key one-time reveal card (list page) -------------------------------------------------------------------------- */ .fi-panel-users .bw-token-reveal { margin-bottom: 1rem; padding: 1.15rem 1.25rem 1.25rem; border-radius: 1.1rem; border: 1px solid rgba(13, 148, 136, 0.28); background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 253, 250, 0.92) 55%, rgba(204, 251, 241, 0.55) 100%); box-shadow: 0 18px 36px -28px rgba(15, 118, 110, 0.55); } html.dark .fi-panel-users .bw-token-reveal { border-color: rgba(45, 212, 191, 0.28); background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(19, 78, 74, 0.4) 100%); box-shadow: 0 18px 36px -28px rgba(0, 0, 0, 0.7); } .fi-panel-users .bw-token-reveal__top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.55rem; } .fi-panel-users .bw-token-reveal__badge { display: inline-flex; align-items: center; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #0f766e; } html.dark .fi-panel-users .bw-token-reveal__badge { color: #5eead4; } .fi-panel-users .bw-token-reveal__dismiss { border: 0; background: transparent; color: #64748b; cursor: pointer; font-size: 0.95rem; line-height: 1; padding: 0.2rem 0.35rem; border-radius: 0.4rem; } .fi-panel-users .bw-token-reveal__dismiss:hover { background: rgba(15, 23, 42, 0.06); color: #0f172a; } html.dark .fi-panel-users .bw-token-reveal__dismiss:hover { background: rgba(255, 255, 255, 0.08); color: #f8fafc; } .fi-panel-users .bw-token-reveal__title { margin: 0 0 0.35rem; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; color: #0f172a; } html.dark .fi-panel-users .bw-token-reveal__title { color: #f8fafc; } .fi-panel-users .bw-token-reveal__name { font-weight: 600; color: #0f766e; } html.dark .fi-panel-users .bw-token-reveal__name { color: #99f6e4; } .fi-panel-users .bw-token-reveal__warning { margin: 0 0 0.95rem; font-size: 0.875rem; line-height: 1.5; color: #64748b; } html.dark .fi-panel-users .bw-token-reveal__warning { color: #94a3b8; } .fi-panel-users .bw-token-reveal__row { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: stretch; } .fi-panel-users .bw-token-reveal__token { flex: 1 1 16rem; min-width: 0; margin: 0; padding: 0.75rem 0.9rem; border-radius: 0.75rem; border: 1px solid rgba(13, 148, 136, 0.22); background: rgba(255, 255, 255, 0.85); color: #0f172a; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.8rem; line-height: 1.45; outline: none; } .fi-panel-users .bw-token-reveal__token:focus { border-color: rgba(13, 148, 136, 0.55); box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.18); } html.dark .fi-panel-users .bw-token-reveal__token { border-color: rgba(45, 212, 191, 0.22); background: rgba(8, 12, 22, 0.75); color: #e2e8f0; } .fi-panel-users .bw-token-reveal__copy { flex: 0 0 auto; min-width: 6.5rem; padding: 0.7rem 1rem; border-radius: 0.75rem; border: 0; cursor: pointer; font-size: 0.875rem; font-weight: 650; color: #fff; background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%); box-shadow: 0 10px 22px -14px rgba(13, 148, 136, 0.95); transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease; } .fi-panel-users .bw-token-reveal__copy:hover { transform: translateY(-1px); } .fi-panel-users .bw-token-reveal__copy.is-copied { background: linear-gradient(135deg, #059669 0%, #047857 100%); } html.dark .fi-panel-users .bw-token-reveal__copy { background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%); }