/* ═══════════════════════════════════════════════════════════════════════════ MIAMI NIGHTS — Full System Theme Futuristic retro aesthetic: dark matte + neon cyan + hot pink + purple STRUCTURE: 1. Global keyframes & scrollbars (must be unscoped — CSS spec requirement) 2. :root, .dark { ... } — Miami Nights dark theme (system default + forced dark) 3. :root:not(.dark) { ... } — "Square Coil" light theme (fires only in light mode) ═══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════════ SECTION 1 — GLOBAL (unscoped: keyframes, scrollbars, reduced-motion) These CANNOT be nested inside :root selectors per the CSS spec. ══════════════════════════════════════════════════════════════════════════════ */ /* ── Keyframes ─────────────────────────────────────────────────────────────── */ @keyframes neon-pulse { 0%, 100% { filter: drop-shadow(0 0 2px rgba(34,211,238,0.4)) drop-shadow(0 0 4px rgba(34,211,238,0.3)) drop-shadow(0 0 6px rgba(34,211,238,0.2)); } 50% { filter: drop-shadow(0 0 4px rgba(34,211,238,0.6)) drop-shadow(0 0 8px rgba(34,211,238,0.5)) drop-shadow(0 0 12px rgba(34,211,238,0.4)); } } @keyframes fade-in-up { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } } @keyframes border-glow { 0%, 100% { box-shadow: 0 0 0 1px rgba(0,229,191,0.2), 0 0 8px rgba(0,229,191,0.1); } 50% { box-shadow: 0 0 0 1px rgba(0,229,191,0.4), 0 0 16px rgba(0,229,191,0.2); } } /* Bell "palpitate" — a double-thump heartbeat (scale), not a glow. Used on the notification bell when there are unread items so it visibly beats like a heart. */ @keyframes bell-heartbeat { 0%, 45%, 100% { transform: scale(1); } 8% { transform: scale(1.28); } 16% { transform: scale(0.94); } 26% { transform: scale(1.16); } 36% { transform: scale(0.98); } } /* ── Scrollbar (global — applies in both themes, dark scrollbar is fine everywhere) */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: #141618; } ::-webkit-scrollbar-thumb { background: #40444b; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #00e5bf, #e8a042); } /* ── Reduced-motion override (global) ─────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .fi-topbar-database-notifications-btn.has-unread { animation: none; } } /* ── Sidebar icon sizing — unscoped (applies both themes) ─────────────────── */ /* When collapsed: icons are 30% larger so they're clearly clickable as the only visible element. Smooth cross-fade when the sidebar opens/closes. */ .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item svg { width: 1.625rem !important; height: 1.625rem !important; transition: width 0.28s cubic-bezier(0.4,0,0.2,1), height 0.28s cubic-bezier(0.4,0,0.2,1) !important; } .fi-sidebar.fi-sidebar-open .fi-sidebar-item svg { width: 1.125rem !important; height: 1.125rem !important; transition: width 0.28s cubic-bezier(0.4,0,0.2,1), height 0.28s cubic-bezier(0.4,0,0.2,1) !important; } /* ══════════════════════════════════════════════════════════════════════════════ SECTION 2 — MIAMI NIGHTS DARK THEME Scoped to :root (system default) and .dark (Filament forced-dark class on ) ══════════════════════════════════════════════════════════════════════════════ */ .dark { /* ── Base / Layout ─────────────────────────────────────────────────────── */ .fi-main, .fi-body, .fi-content { background-color: #141618 !important; } /* Topbar — subtle teal accent, no pink */ .fi-topbar { background-color: #1a1d20 !important; border-bottom: 1px solid rgba(0,229,191,0.12) !important; box-shadow: 0 1px 12px rgba(0,0,0,0.4) !important; } /* ── Sidebar — Retro Cassette Dark ─────────────────────────────────────── Deep charcoal with a very faint horizontal scanline texture — like the brushed-plastic face of a vintage Walkman or tape deck. Two-color accent system: cyan (primary/action) + amber-gold (labels/navigation warmth). ─────────────────────────────────────────────────────────────────────── */ .fi-sidebar, .fi-sidebar-nav, .fi-sidebar-header, .fi-sidebar-footer { background-color: #181b1f !important; /* Subtle scanline texture — faint horizontal stripes at 3px repeat */ background-image: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 3px ) !important; border-top: none !important; border-right: 1px solid rgba(232,160,66,0.1) !important; } .fi-sidebar-header { border-bottom: 1px solid rgba(255,255,255,0.06) !important; padding: 0.75rem 1rem !important; } .fi-sidebar-header-logo-ctn { transition: opacity 0.2s ease !important; } /* Collapse / expand */ .fi-sidebar { width: 4.5rem !important; transition: width 0.28s cubic-bezier(0.4,0,0.2,1) !important; overflow: hidden !important; } .fi-sidebar.fi-sidebar-open { width: 15rem !important; } /* Layout reset */ .fi-sidebar-nav-groups, .fi-sidebar-nav-group, .fi-sidebar-item { white-space: nowrap !important; } .fi-sidebar-nav-groups { gap: 0 !important; padding-top: 0.375rem !important; padding-bottom: 0.5rem !important; } .fi-sidebar-group { margin-bottom: 0 !important; } /* ── Group labels ── amber-gold — warm vintage indicator glow */ .fi-sidebar-group .fi-sidebar-group-label { color: rgba(232,160,66,0.75) !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; font-size: 0.58rem !important; font-weight: 800 !important; overflow: hidden !important; max-height: 0 !important; opacity: 0 !important; padding: 0 !important; margin: 0 !important; transition: opacity 0.2s ease, max-height 0.25s ease !important; } .fi-sidebar.fi-sidebar-open .fi-sidebar-group .fi-sidebar-group-label { max-height: 1.75rem !important; opacity: 1 !important; padding: 0.55rem 0.875rem 0.2rem !important; margin-top: 0.2rem !important; } /* ── Item labels — clear, legible white-gray */ .fi-sidebar-item-label { font-size: 0.82rem !important; font-weight: 450 !important; overflow: hidden !important; max-width: 0 !important; opacity: 0 !important; transition: opacity 0.2s ease, max-width 0.28s cubic-bezier(0.4,0,0.2,1) !important; } .fi-sidebar.fi-sidebar-open .fi-sidebar-item-label { max-width: 14rem !important; opacity: 1 !important; } /* ── Nav item links */ .fi-sidebar-item a, .fi-sidebar-item button { justify-content: center !important; padding: 0.35rem !important; border-radius: 0 !important; color: #b8c8d8 !important; /* clear, high-contrast light slate */ transition: padding 0.28s cubic-bezier(0.4,0,0.2,1), background-color 0.12s, color 0.12s !important; } .fi-sidebar.fi-sidebar-open .fi-sidebar-item a, .fi-sidebar.fi-sidebar-open .fi-sidebar-item button { justify-content: flex-start !important; padding: 0.32rem 0.875rem !important; } /* Default icon color */ .fi-sidebar-item svg { color: #7a8fa0 !important; transition: color 0.12s !important; } /* ── Hover */ .fi-sidebar-item:not(.fi-sidebar-item-active) a:hover, .fi-sidebar-item:not(.fi-sidebar-item-active) button:hover { background-color: rgba(0,229,191,0.07) !important; color: #00e5bf !important; } .fi-sidebar-item:not(.fi-sidebar-item-active):hover svg { color: #00c9a7 !important; } .fi-sidebar-item:not(.fi-sidebar-item-active):hover .fi-sidebar-item-label { color: #00e5bf !important; } /* ── Active */ .fi-sidebar-item-active a, .fi-sidebar-item-active button { background-color: rgba(0,229,191,0.12) !important; color: #00e5bf !important; } .fi-sidebar-item-active .fi-sidebar-item-label { color: #00e5bf !important; } .fi-sidebar-item-active svg { color: #00e5bf !important; } .fi-sidebar-item-active::before { content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 2.5px; background: #00e5bf; border-radius: 0 2px 2px 0; box-shadow: 0 0 8px rgba(0,229,191,0.5); } /* ── Page Header ───────────────────────────────────────────────────────── */ .fi-header { border-bottom: 1px solid rgba(0,229,191,0.15) !important; padding-bottom: 1rem !important; margin-bottom: 1.5rem !important; } .fi-header-heading { color: #d8cdb8 !important; font-weight: 800 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; font-size: 0.9rem !important; } .fi-breadcrumbs-item { color: rgba(180,165,130,0.55) !important; font-size: 0.7rem !important; letter-spacing: 0.06em !important; } .fi-breadcrumbs-item-separator { color: rgba(232,160,66,0.4) !important; } /* ── Tables — rack display panel ──────────────────────────────────────── */ .fi-ta { background-color: #131518 !important; border: 1px solid rgba(180,168,140,0.18) !important; border-radius: 0.5rem !important; overflow: hidden !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 4px 28px rgba(0,0,0,0.45) !important; } .fi-ta-header-toolbar { background: rgba(0,0,0,0.2) !important; border-bottom: 1px solid rgba(180,168,140,0.14) !important; padding: 0.625rem 0.875rem !important; } /* Table header — like a hardware LCD display header strip */ .fi-ta thead { background-color: rgba(0,0,0,0.25) !important; } .fi-ta thead tr { border-bottom: 1px solid rgba(232,160,66,0.2) !important; } .fi-ta th { color: rgba(232,160,66,0.75) !important; font-size: 0.6rem !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; padding: 0.625rem 0.875rem !important; background-color: transparent !important; } .fi-ta td { color: #c4bca8 !important; border-color: rgba(180,165,140,0.07) !important; padding: 0.75rem 1rem !important; font-size: 0.875rem !important; background-color: #131518 !important; } .fi-ta tbody tr { border-bottom: 1px solid rgba(180,165,140,0.07) !important; transition: background-color 0.12s !important; } /* Card rows (.ss-card-row) opt out of the amber row-hover wash + inset glow — they carry their own per-status stripe + card-bg hover instead (PHASE 12). Excluding them here, at the source, is cleaner than fighting the nested-`.dark` specificity these rules gain. */ .fi-ta tbody tr:not(.ss-card-row):hover td { background-color: rgba(232,160,66,0.05) !important; } .fi-ta tbody tr:not(.ss-card-row):hover { box-shadow: inset 3px 0 0 rgba(232,160,66,0.45) !important; } .fi-ta-empty-state { background-color: #141618 !important; padding: 3rem !important; } .fi-ta-empty-state-heading { color: #9aa0a6 !important; } .fi-ta-empty-state-description { color: #9199a3 !important; } .fi-fo-helper-text { color: #9199a3 !important; } /* Table search input */ .fi-ta-search-field input { background-color: #0e1012 !important; border: 1px solid rgba(64,68,75,0.6) !important; border-radius: 0.5rem !important; color: #f8f9fa !important; font-size: 0.875rem !important; } .fi-ta-search-field input:focus { border-color: rgba(0,229,191,0.5) !important; box-shadow: 0 0 0 2px rgba(0,229,191,0.1) !important; } /* Table filter button */ .fi-ta-filters-btn { color: #9aa0a6 !important; } .fi-ta-filters-btn:hover { color: #00e5bf !important; } /* ── Pagination ────────────────────────────────────────────────────────── */ .fi-pagination { border-top: 1px solid rgba(180,165,140,0.1) !important; background-color: #131518 !important; padding: 0.75rem 1rem !important; } .fi-pagination-item { background: linear-gradient(180deg, #252930 0%, #1e2228 100%) !important; border: 1px solid rgba(180,168,140,0.2) !important; color: rgba(180,165,130,0.7) !important; border-radius: 0.3rem !important; font-size: 0.72rem !important; } .fi-pagination-item:hover { background: linear-gradient(180deg, #2e3240 0%, #262a34 100%) !important; border-color: rgba(232,160,66,0.4) !important; color: #e8c88a !important; } .fi-pagination-item[aria-current="page"], .fi-pagination-item.fi-active { background: rgba(0,229,191,0.14) !important; border-color: rgba(0,229,191,0.5) !important; color: #00e5bf !important; font-weight: 700 !important; } .fi-pagination-records-per-page-select select { background: #1e2228 !important; border-color: rgba(180,168,140,0.2) !important; color: rgba(180,165,130,0.7) !important; border-radius: 0.3rem !important; font-size: 0.72rem !important; } /* ── Widgets — hardware chassis panel ─────────────────────────────────── */ .fi-wi { background: linear-gradient(180deg, #21252d 0%, #191d23 100%) !important; border: 1px solid rgba(180,168,140,0.18) !important; border-radius: 0.5rem !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.25), 0 4px 20px rgba(0,0,0,0.35) !important; overflow: hidden !important; } .fi-wi:hover { border-color: rgba(232,160,66,0.3) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(232,160,66,0.12) !important; } /* Stat cards — VU meter face with amber top strip ────────────────────── */ .fi-wi-stats-overview-stat { background: linear-gradient(180deg, #252930 0%, #1c2028 100%) !important; border: 1px solid rgba(180,168,140,0.18) !important; border-top: 2px solid rgba(232,160,66,0.45) !important; border-radius: 0.5rem !important; padding: 1.125rem 1.25rem !important; position: relative; overflow: hidden; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2), 0 2px 10px rgba(0,0,0,0.3) !important; } /* Edge highlight — like a polished top edge on hardware */ .fi-wi-stats-overview-stat::before { content: ''; position: absolute; top: 2px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent); pointer-events: none; } .fi-wi-stats-overview-stat:hover { border-color: rgba(232,160,66,0.5) !important; } /* Stat values — neon readout colors (one per position, like a channel strip) */ .fi-wi-stats-overview-stat-value { color: #00e5bf !important; font-size: 1.7rem !important; font-weight: 800 !important; font-variant-numeric: tabular-nums !important; letter-spacing: -0.02em !important; } .fi-wi-stats-overview-stat:nth-child(2) .fi-wi-stats-overview-stat-value { color: #e8a042 !important; } .fi-wi-stats-overview-stat:nth-child(3) .fi-wi-stats-overview-stat-value { color: #a78bfa !important; } .fi-wi-stats-overview-stat:nth-child(4) .fi-wi-stats-overview-stat-value { color: #34d399 !important; } /* Stat labels — amber LCD parameter label */ .fi-wi-stats-overview-stat-label { color: rgba(232,160,66,0.65) !important; font-size: 0.6rem !important; text-transform: uppercase !important; letter-spacing: 0.14em !important; font-weight: 800 !important; } .fi-wi-stats-overview-stat-description { color: rgba(140,130,110,0.7) !important; font-size: 0.72rem !important; } .fi-wi-stats-overview-stat-icon { opacity: 0.5 !important; } /* ── Sections & Cards — hardware panel chassis ─────────────────────────── */ .fi-section { background: linear-gradient(180deg, #21252d 0%, #191d23 100%) !important; border: 1px solid rgba(180,168,140,0.18) !important; border-radius: 0.5rem !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.25), 0 2px 14px rgba(0,0,0,0.3) !important; overflow: hidden !important; } /* Section header — hardware panel parameter section label Styled like the ruled dividers in the Kontakt/RetroSynth UIs: — SECTION NAME ────────────────────────────── */ .fi-section-header { background-color: rgba(0,0,0,0.22) !important; border-top: 1px solid rgba(180,168,140,0.15) !important; border-bottom: 1px solid rgba(180,168,140,0.15) !important; padding: 0.5rem 1.25rem !important; } .fi-section-header .fi-section-heading { color: rgba(232,160,66,0.88) !important; font-size: 0.65rem !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.16em !important; } .fi-section-header .fi-section-description { color: rgba(180,160,120,0.55) !important; font-size: 0.7rem !important; } .fi-card { background: linear-gradient(180deg, #21252d 0%, #191d23 100%) !important; border: 1px solid rgba(180,168,140,0.18) !important; border-radius: 0.5rem !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 2px 12px rgba(0,0,0,0.3) !important; } /* ── Modals & Slide-overs — deep panel overlay ────────────────────────── */ .fi-modal-window { background: linear-gradient(180deg, #21252d 0%, #191d23 100%) !important; border: 1px solid rgba(180,168,140,0.2) !important; border-radius: 0.5rem !important; box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,229,191,0.08) !important; } .fi-modal-header { background-color: rgba(0,0,0,0.25) !important; border-bottom: 1px solid rgba(180,168,140,0.18) !important; padding: 0.875rem 1.25rem !important; } .fi-modal-heading { color: rgba(232,160,66,0.9) !important; font-size: 0.7rem !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.14em !important; } .fi-modal-description { color: rgba(200,190,170,0.85) !important; font-size: 0.8rem !important; } .fi-modal-footer { background-color: rgba(0,0,0,0.18) !important; border-top: 1px solid rgba(180,168,140,0.14) !important; padding: 0.75rem 1.25rem !important; } .fi-modal-close-btn { color: rgba(190,180,160,0.8) !important; } .fi-modal-close-btn:hover { color: #e8a042 !important; } /* Slide-over */ .fi-modal-slide-over .fi-modal-window { border-radius: 0 !important; border-left: 1px solid rgba(0,229,191,0.18) !important; border-right: none !important; } /* ── Dropdown Panels — chassis menu ───────────────────────────────────── */ .fi-dropdown-panel { background: linear-gradient(180deg, #252930 0%, #1e2228 100%) !important; border: 1px solid rgba(180,168,140,0.2) !important; border-radius: 0.4rem !important; box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(232,160,66,0.06) !important; } .fi-dropdown-list-item { animation: fade-in-up 0.15s ease-out; transition: all 0.12s !important; color: #c4bca8 !important; } .fi-dropdown-list-item:hover { background: rgba(232,160,66,0.07) !important; border-left: 2px solid rgba(232,160,66,0.5) !important; color: #e8c88a !important; } /* ── Buttons — hardware cap style ─────────────────────────────────────── */ .fi-btn { background: linear-gradient(180deg, #292d36 0%, #21252c 100%) !important; border: 1px solid rgba(180,168,140,0.22) !important; color: #c4bca8 !important; border-radius: 0.3rem !important; font-weight: 600 !important; font-size: 0.72rem !important; text-transform: uppercase !important; letter-spacing: 0.07em !important; transition: all 0.12s !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 2px rgba(0,0,0,0.3) !important; } .fi-btn:hover { background: linear-gradient(180deg, #30343e 0%, #262a32 100%) !important; border-color: rgba(232,160,66,0.45) !important; color: #e8c88a !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 8px rgba(232,160,66,0.12) !important; } .fi-btn[aria-expanded=true], .fi-btn.fi-active { background: rgba(0,229,191,0.12) !important; border-color: rgba(0,229,191,0.55) !important; color: #00e5bf !important; box-shadow: 0 0 10px rgba(0,229,191,0.25), inset 0 1px 0 rgba(0,229,191,0.1) !important; } /* Primary button — neon fill */ .fi-btn.fi-btn-color-primary { color: #00e5bf !important; border-color: rgba(0,229,191,0.35) !important; } .fi-btn.fi-btn-color-primary:hover { border-color: rgba(0,229,191,0.7) !important; box-shadow: 0 0 12px rgba(0,229,191,0.25), inset 0 1px 0 rgba(255,255,255,0.06) !important; color: #00e5bf !important; } .fi-btn.fi-btn-color-primary.fi-btn-size-xl, .fi-btn.fi-btn-color-primary[type="submit"] { background: rgba(0,229,191,0.14) !important; border-color: rgba(0,229,191,0.55) !important; color: #00e5bf !important; box-shadow: 0 0 12px rgba(0,229,191,0.2), inset 0 1px 0 rgba(0,229,191,0.1) !important; } /* Danger */ .fi-btn.fi-btn-color-danger { color: #f87060 !important; border-color: rgba(248,112,96,0.35) !important; } .fi-btn.fi-btn-color-danger:hover { border-color: #f87060 !important; box-shadow: 0 0 8px rgba(248,112,96,0.2) !important; } /* Success */ .fi-btn.fi-btn-color-success { color: #50e0a0 !important; border-color: rgba(80,224,160,0.35) !important; } .fi-btn.fi-btn-color-success:hover { border-color: #50e0a0 !important; box-shadow: 0 0 8px rgba(80,224,160,0.2) !important; } /* Warning */ .fi-btn.fi-btn-color-warning { color: #ffb74d !important; border-color: rgba(255,183,77,0.4) !important; } /* Info */ .fi-btn.fi-btn-color-info { color: #448aff !important; border-color: rgba(68,138,255,0.4) !important; } /* Gray */ .fi-btn.fi-btn-color-gray { color: #9aa0a6 !important; border-color: rgba(154,160,166,0.3) !important; } /* Icon buttons */ .fi-icon-btn { background-color: transparent !important; color: rgba(180,165,130,0.6) !important; border-radius: 0.3rem !important; } .fi-icon-btn:hover { background-color: rgba(232,160,66,0.08) !important; color: #e8a042 !important; } /* ── Toggle Button Groups ──────────────────────────────────────────────── */ .fi-fo-toggle-buttons label.fi-btn.fi-btn-color-primary { color: #00e5bf !important; border-color: rgba(0,229,191,0.35) !important; background: #21252c !important; } .fi-fo-toggle-buttons label.fi-btn.fi-btn-color-pink { color: #e8a042 !important; border-color: rgba(232,160,66,0.35) !important; background: #21252c !important; } .fi-fo-toggle-buttons label.fi-btn.fi-btn-color-success { color: #50e0a0 !important; border-color: rgba(80,224,160,0.35) !important; background: #21252c !important; } .fi-fo-toggle-buttons label.fi-btn.fi-btn-color-danger { color: #f87060 !important; border-color: rgba(248,112,96,0.35) !important; background: #21252c !important; } .fi-fo-toggle-buttons label.fi-btn.fi-btn-color-warning { color: #e8c060 !important; border-color: rgba(232,192,96,0.35) !important; background: #21252c !important; } .fi-fo-toggle-buttons label.fi-btn.fi-btn-color-info { color: #60a8e8 !important; border-color: rgba(96,168,232,0.35) !important; background: #21252c !important; } .fi-fo-toggle-buttons label.fi-btn.fi-btn-color-gray { color: rgba(180,165,130,0.7) !important; border-color: rgba(180,165,130,0.25) !important; background: #21252c !important; } .fi-fo-toggle-buttons input:checked + label.fi-btn { background: rgba(0,229,191,0.14) !important; border-color: rgba(0,229,191,0.55) !important; color: #00e5bf !important; box-shadow: 0 0 10px rgba(0,229,191,0.25) !important; } .fi-fo-toggle-buttons input:checked + label.fi-btn.fi-btn-color-pink { background: rgba(232,160,66,0.14) !important; border-color: rgba(232,160,66,0.55) !important; color: #e8a042 !important; box-shadow: 0 0 10px rgba(232,160,66,0.25) !important; } .fi-fo-toggle-buttons input:checked + label.fi-btn.fi-btn-color-success { background: rgba(80,224,160,0.14) !important; border-color: rgba(80,224,160,0.55) !important; color: #50e0a0 !important; box-shadow: 0 0 10px rgba(80,224,160,0.25) !important; } .fi-fo-toggle-buttons input:checked + label.fi-btn.fi-btn-color-danger { background: rgba(248,112,96,0.14) !important; border-color: rgba(248,112,96,0.55) !important; color: #f87060 !important; box-shadow: 0 0 10px rgba(248,112,96,0.25) !important; } .fi-fo-toggle-buttons input:checked + label.fi-btn.fi-btn-color-warning { background: rgba(232,192,96,0.14) !important; border-color: rgba(232,192,96,0.55) !important; color: #e8c060 !important; box-shadow: 0 0 10px rgba(232,192,96,0.25) !important; } .fi-fo-toggle-buttons input:checked + label.fi-btn.fi-btn-color-info { background: rgba(96,168,232,0.14) !important; border-color: rgba(96,168,232,0.55) !important; color: #60a8e8 !important; box-shadow: 0 0 10px rgba(96,168,232,0.25) !important; } /* ── Toggle Switch ─────────────────────────────────────────────────────── */ .fi-toggle-input:checked ~ .fi-toggle-track, [role="switch"][aria-checked="true"] .fi-toggle-track { background-color: #00e5bf !important; border-color: #00e5bf !important; box-shadow: 0 0 8px rgba(0,229,191,0.35) !important; } /* ── Form Inputs — hardware display field ─────────────────────────────── */ .fi-input, .fi-input-wrp, .fi-select-input, textarea, input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], select { background-color: #0f1215 !important; border: 1px solid rgba(180,168,140,0.2) !important; color: #c4bca8 !important; border-radius: 0.3rem !important; font-size: 0.875rem !important; box-shadow: inset 0 1px 3px rgba(0,0,0,0.3) !important; } .fi-input:focus, .fi-select-input:focus, textarea:focus, input:focus { border-color: rgba(0,229,191,0.55) !important; box-shadow: 0 0 0 2px rgba(0,229,191,0.1), inset 0 1px 3px rgba(0,0,0,0.2) !important; outline: none !important; } .fi-fo-field-label span, label { color: rgba(180,165,130,0.75) !important; font-size: 0.7rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; } .fi-fo-field-wrp { margin-bottom: 0.25rem !important; } /* ── Badges — unified pill+dot language (2026-07-04), matches Install Dispatch's .id-sbadge/.id-sdot treatment and the custom .cod-pill/ .sd-status pills so status reads the same everywhere in the app ── */ .fi-badge { text-transform: uppercase !important; font-size: 0.6rem !important; letter-spacing: 0.06em !important; font-weight: 800 !important; border-radius: 9999px !important; display: inline-flex !important; align-items: center !important; gap: 0.3rem !important; } .fi-badge::before { content:''; width:0.32rem; height:0.32rem; border-radius:50%; background:currentColor; flex-shrink:0; } /* Numeric counters (notification bell) and the DR gradient-glow badges below already carry their own strong color signal — a leading dot on top of a filled gradient or a bare number reads as a stray mark. */ .fi-icon-btn-badge-ctn .fi-badge::before, .fi-badge[data-status]::before { display: none; } /* Status-specific badge colors */ .fi-badge[data-status="assigned"] { background: linear-gradient(135deg,#06b6d4,#0891b2) !important; color: #fff !important; box-shadow: 0 0 6px rgba(6,182,212,0.4) !important; } .fi-badge[data-status="in_progress"] { background: linear-gradient(135deg,#f59e0b,#d97706) !important; color: #1e2124 !important; box-shadow: 0 0 6px rgba(245,158,11,0.4) !important; } .fi-badge[data-status="qa"] { background: linear-gradient(135deg,#a855f7,#9333ea) !important; color: #fff !important; box-shadow: 0 0 6px rgba(168,85,247,0.4) !important; } .fi-badge[data-status="approved"] { background: linear-gradient(135deg,#10b981,#059669) !important; color: #fff !important; box-shadow: 0 0 6px rgba(16,185,129,0.4) !important; } /* Color-based badges — soft-tint pill + dot, no border (the border is replaced by the leading dot as the "what state is this" signal) */ .fi-badge.fi-color-primary { background: rgba(0,229,191,0.15) !important; color: #00e5bf !important; } .fi-badge.fi-color-success { background: rgba(105,240,174,0.15) !important; color: #69f0ae !important; } .fi-badge.fi-color-danger { background: rgba(255,82,82,0.15) !important; color: #ff5252 !important; } .fi-badge.fi-color-warning { background: rgba(255,183,77,0.15) !important; color: #ffb74d !important; } .fi-badge.fi-color-info { background: rgba(68,138,255,0.15) !important; color: #448aff !important; } .fi-badge.fi-color-gray { background: rgba(154,160,166,0.12) !important; color: #9aa0a6 !important; } /* Notification bell badge — palpitates like a heart (scale double-thump) when there are unread notifications, instead of the old steady glow. */ .fi-topbar-database-notifications-btn.has-unread { animation: bell-heartbeat 1.6s ease-in-out infinite; transform-origin: center center; } /* Bell icon glows amber when there are unread notifications */ .fi-topbar-database-notifications-btn.has-unread .fi-icon-btn-icon, .fi-topbar-database-notifications-btn.has-unread svg { color: #e8a042 !important; } .fi-topbar-database-notifications-btn .fi-icon-btn-badge-ctn { position: absolute; top: -2px; right: -2px; } .fi-topbar-database-notifications-btn .fi-icon-btn-badge-ctn .fi-badge { background: linear-gradient(135deg, #e8a042, #00d4a8) !important; box-shadow: 0 0 8px rgba(232,160,66,0.6), 0 0 14px rgba(0,212,168,0.35) !important; color: #0f1215 !important; font-weight: 800 !important; font-size: 0.6rem !important; min-width: 1.1rem; height: 1.1rem; line-height: 1; border: 1px solid rgba(255,255,255,0.15); } .fi-topbar-database-notifications-btn:hover { filter: drop-shadow(0 0 6px rgba(232,160,66,0.4)); } /* ── Tabs ──────────────────────────────────────────────────────────────── */ .fi-tabs { border-bottom: 1px solid rgba(64,68,75,0.6) !important; } .fi-tabs-tab { color: #9aa0a6 !important; font-size: 0.8rem !important; font-weight: 600 !important; border-bottom: 2px solid transparent !important; transition: all 0.15s !important; padding: 0.625rem 1rem !important; } .fi-tabs-tab:hover { color: #e8eaed !important; border-bottom-color: rgba(0,229,191,0.3) !important; } .fi-tabs-tab[aria-selected="true"] { color: #00e5bf !important; border-bottom-color: #00e5bf !important; } /* ── Notification Panel ────────────────────────────────────────────────── */ .fi-no-notification-unread-ctn { border-left: 3px solid rgba(0,229,191,0.6) !important; background: rgba(0,229,191,0.04) !important; animation: fade-in-up 0.3s ease-out; } .fi-no-notification-read-ctn { border-left: 3px solid rgba(64,68,75,0.4) !important; } .fi-no-notification-unread-ctn:hover, .fi-no-notification-read-ctn:hover { background: rgba(0,229,191,0.06) !important; cursor: pointer; } .fi-dropdown-list-item { animation: fade-in-up 0.2s ease-out; } .fi-dropdown-list-item:hover { background: linear-gradient(90deg, rgba(0,229,191,0.06), rgba(168,85,247,0.04)) !important; border-left: 2px solid #00e5bf !important; } /* ── Footer ────────────────────────────────────────────────────────────── */ .fi-footer { color: rgba(180,160,120,0.6) !important; font-size: 0.7rem !important; } /* ── Action cells in tables ────────────────────────────────────────────── */ .fi-ta-actions .fi-icon-btn { opacity: 0.6; transition: opacity 0.15s, color 0.15s !important; } .fi-ta tbody tr:hover .fi-ta-actions .fi-icon-btn { opacity: 1; } /* ── Select / Checkbox ─────────────────────────────────────────────────── */ .fi-checkbox-input:checked { background-color: #00e5bf !important; border-color: #00e5bf !important; } .fi-ta-header-cell-checkbox input:checked { background-color: #00e5bf !important; border-color: #00e5bf !important; } input[type=checkbox]:checked { accent-color: #00e5bf; } /* ── Loading / Skeleton ────────────────────────────────────────────────── */ .fi-loading-indicator { color: #00e5bf !important; } /* ── Alerts / Notifications toast ─────────────────────────────────────── */ .fi-no-ctn { background-color: #2b2f33 !important; border: 1px solid rgba(64,68,75,0.8) !important; border-radius: 0.75rem !important; box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important; } .fi-no-ctn.fi-color-success { border-left: 3px solid #69f0ae !important; } .fi-no-ctn.fi-color-danger { border-left: 3px solid #ff5252 !important; } .fi-no-ctn.fi-color-warning { border-left: 3px solid #ffb74d !important; } .fi-no-ctn.fi-color-info { border-left: 3px solid #448aff !important; } /* ── Global transitions ────────────────────────────────────────────────── */ .fi-topbar-database-notifications-btn, .fi-icon-btn, .fi-badge, .fi-btn, .fi-ta tbody tr, .fi-sidebar-item, .fi-wi, .fi-section { transition: all 0.2s ease-in-out; } /* ═══════════════════════════════════════════════════════════════════════ STAGE D — VISUAL CONSISTENCY PASS Buttons · badges · tables · spacing. Aligns the panel with the Miami Nights button directive: PRIMARY CTAs = solid neon fill + dark text + outer glow (never a translucent block), while secondary/icon buttons stay matte. ═══════════════════════════════════════════════════════════════════════ */ /* ── Buttons: consistent sizing/affordance ─────────────────────────────── */ .fi-btn { min-height: 2.25rem !important; padding: 0.5rem 1rem !important; display: inline-flex !important; align-items: center !important; gap: 0.4rem !important; line-height: 1 !important; } .fi-btn.fi-btn-size-sm { min-height: 1.875rem !important; padding: 0.375rem 0.75rem !important; } .fi-btn.fi-btn-size-xl { min-height: 2.75rem !important; padding: 0.75rem 1.5rem !important; font-size: 0.8rem !important; } .fi-btn:active { transform: translateY(1px) !important; } .fi-btn:focus-visible { outline: none !important; box-shadow: 0 0 0 2px rgba(0,229,191,0.35) !important; } /* PRIMARY CTA — solid neon fill + dark high-contrast text + professional glow. */ .fi-btn.fi-btn-color-primary[type="submit"], .fi-form .fi-btn.fi-btn-color-primary, .fi-ac-action.fi-btn.fi-btn-color-primary, .fi-modal-footer .fi-btn.fi-btn-color-primary { background: linear-gradient(135deg, #00e5bf 0%, #00c8a8 100%) !important; border-color: #00e5bf !important; color: #11201d !important; font-weight: 700 !important; box-shadow: 0 0 12px rgba(0,229,191,0.4) !important; } .fi-btn.fi-btn-color-primary[type="submit"]:hover, .fi-form .fi-btn.fi-btn-color-primary:hover, .fi-ac-action.fi-btn.fi-btn-color-primary:hover, .fi-modal-footer .fi-btn.fi-btn-color-primary:hover { background: linear-gradient(135deg, #1bf0cc 0%, #00d8b6 100%) !important; box-shadow: 0 0 18px rgba(0,229,191,0.6) !important; color: #11201d !important; } /* Destructive confirm (modal/delete) — solid danger fill + dark text + glow. */ .fi-modal-footer .fi-btn.fi-btn-color-danger { background: linear-gradient(135deg, #ff5252 0%, #e53935 100%) !important; border-color: #ff5252 !important; color: #1e0a0a !important; font-weight: 700 !important; box-shadow: 0 0 12px rgba(255,82,82,0.4) !important; } .fi-modal-footer .fi-btn.fi-btn-color-danger:hover { box-shadow: 0 0 18px rgba(255,82,82,0.6) !important; } /* ── Badges: complete the status set + consistent shape ────────────────── */ .fi-badge[data-status="pending"] { background: linear-gradient(135deg,#5f6368,#40444b) !important; color: #e8eaed !important; box-shadow: 0 0 6px rgba(95,99,104,0.35) !important; } .fi-badge[data-status="on_hold"] { background: linear-gradient(135deg,#ffb74d,#f59e0b) !important; color: #1e2124 !important; box-shadow: 0 0 6px rgba(245,158,11,0.4) !important; } .fi-badge { padding: 0.2rem 0.5rem !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; gap: 0.25rem !important; white-space: nowrap !important; } /* ── Tables: vertical rhythm + zebra polish ────────────────────────────── */ .fi-ta tbody tr:not(.ss-card-row):nth-child(even) td { background-color: rgba(255,255,255,0.012) !important; } .fi-ta tbody tr:not(.ss-card-row):hover:nth-child(even) td { background-color: rgba(0,229,191,0.05) !important; } .fi-ta-cell:first-of-type { padding-left: 1.25rem !important; } .fi-ta-cell:last-of-type { padding-right: 1.25rem !important; } .fi-ta-row-actions { gap: 0.25rem !important; } /* ── Spacing: consistent rhythm between stacked sections/widgets ──────── */ .fi-section + .fi-section, .fi-wi + .fi-wi { margin-top: 1.25rem !important; } .fi-fo-component-ctn { gap: 1rem !important; } .fi-page > .fi-page-header-ctn { margin-bottom: 1.25rem !important; } .fi-section-content { padding: 1.25rem !important; } /* ── Responsive tables & premium scrollbars ────────────────────────────── */ .fi-ta-table { width: 100% !important; table-layout: auto !important; } /* REMOVED 2026-07-04: a rule here forced .fi-ta-cell .fi-ta-text to white-space:normal + overflow-wrap:anywhere ("wrap instead of scroll"). Because this block's parent selector includes :root, it applied to BOTH themes and beat the global Phase 5 nowrap rules on specificity — the cause of Alex's "text stacks one word per line on smaller screens" report (it even broke task codes at their hyphens). Tables now nowrap and scroll horizontally (Phase 5); below 640px Filament's stacked card-per-row mobile layout takes over, which is the correct wrapping. */ .fi-ta-cell .fi-badge, .fi-ta-cell .fi-ta-actions, .fi-ta-row-actions, .fi-ta-header-cell-sort-btn { white-space: nowrap !important; } .fi-ta-content { scrollbar-width: thin; scrollbar-color: #40444b transparent; } .fi-ta-content::-webkit-scrollbar { height: 8px; width: 8px; } .fi-ta-content::-webkit-scrollbar-track { background: transparent; } .fi-ta-content::-webkit-scrollbar-thumb { background: #40444b; border-radius: 4px; border: 2px solid #1e2124; } .fi-ta-content::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, #00e5bf, #e8a042); } .fi-modal-content, .fi-wi, .mn-pipeline-col__body { scrollbar-width: thin; scrollbar-color: #40444b transparent; } /* ── FileUpload previews: compact + Miami Nights themed ────────────────── */ .fi-fo-file-upload .filepond--root, .fi-fo-file-upload .filepond--panel-root { background-color: #141618 !important; border: 1px dashed rgba(0, 229, 191, 0.25) !important; border-radius: 0.625rem !important; } .fi-fo-file-upload .filepond--drop-label, .fi-fo-file-upload .filepond--label-action { color: #9aa0a6 !important; } .fi-fo-file-upload .filepond--label-action { color: #00e5bf !important; text-decoration: none !important; font-weight: 700 !important; } .fi-fo-file-upload .filepond--item { max-height: 3.25rem !important; } .fi-fo-file-upload .filepond--file-wrapper, .fi-fo-file-upload .filepond--image-preview-wrapper, .fi-fo-file-upload .filepond--image-preview { max-height: 3.25rem !important; } .fi-fo-file-upload .filepond--file { background: linear-gradient(180deg, #2b2f33 0%, #24272b 100%) !important; border: 1px solid rgba(0, 229, 191, 0.18) !important; border-radius: 0.5rem !important; color: #e8eaed !important; padding: 0.4rem 0.6rem !important; } .fi-fo-file-upload .filepond--item:hover .filepond--file { border-color: rgba(0, 229, 191, 0.45) !important; box-shadow: 0 0 10px rgba(0, 229, 191, 0.12) !important; } .fi-fo-file-upload .filepond--file-info-main { color: #f8f9fa !important; font-weight: 600 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fi-fo-file-upload .filepond--file-info-sub { color: #9aa0a6 !important; opacity: 1 !important; } .fi-fo-file-upload .filepond--file-action-button { background-color: rgba(20, 22, 24, 0.85) !important; color: #e8eaed !important; cursor: pointer !important; } .fi-fo-file-upload .filepond--file-action-button:hover { background-color: rgba(0, 229, 191, 0.18) !important; color: #00e5bf !important; box-shadow: 0 0 8px rgba(0, 229, 191, 0.3) !important; } .fi-fo-file-upload .filepond--file-action-button[title*="emove" i]:hover, .fi-fo-file-upload .filepond--action-remove-item:hover { background-color: rgba(255, 82, 82, 0.18) !important; color: #ff5252 !important; box-shadow: 0 0 8px rgba(255, 82, 82, 0.3) !important; } .fi-fo-file-upload .filepond--load-indicator, .fi-fo-file-upload .filepond--progress-indicator { color: #00e5bf !important; } .fi-fo-file-upload .filepond--file-status-main { color: #e8eaed !important; } .fi-fo-file-upload .filepond--file-info { overflow: hidden; } .fi-fo-file-upload .filepond--image-preview-overlay { display: none; } } /* end :root, .dark */ /* ══════════════════════════════════════════════════════════════════════════════ SECTION 3 — CLEAN ENGINEERING LIGHT THEME Scoped to html:not(.dark) — fires ONLY when Filament's .dark class is absent. Miami Nights dark mode (Section 2, :root, .dark) is completely untouched. Philosophy (per Alex's reference image, 2026-07-04 — an IBM-modeler-style process editor): flat, precise, utilitarian. Plain near-white canvas (no patterns, no texture), matte white panels, thin solid gray borders, near-black text, one strong technical blue accent. Nothing decorative. Supersedes both the "warm notebook" and the short-lived "Architectural Matte" (dot-grid/dashed-border) looks — Alex rejected the latter same-day. Every surface rule below uses the `background` SHORTHAND (never background-color alone). The dark :root block sets background via linear-gradient(...) shorthand, which writes to background-image too — the shorthand form here resets background-image to `none` as part of the same declaration (shorthand always resets every longhand it doesn't mention), so the dark gradient can never show through. This replaces the older "MASTER GRADIENT RESET" pre-pass this section used to need. Design tokens: Canvas → #F4F5F7 (flat neutral — no pattern) Surface → #FFFFFF (sidebar, topbar, cards, tables, modals) Border → #D1D5DB (standard 1px solid borders, everywhere) Divider → #E5E7EB (subtle row/list dividers) Text primary → #161616 (near-black) Text muted → #525252 (labels, hints, micro-copy) Text faint → #9CA3AF (placeholders) Accent → #0F62FE (technical blue — active states, primary buttons, tabs) Accent hover → #0043CE Shadow → 0 1px 2px rgba(0,0,0,0.05) (flat, minimal; deeper on overlays) ══════════════════════════════════════════════════════════════════════════════ */ html:not(.dark) { /* ── Canvas — flat neutral, nothing decorative ───────────────────────────── */ background: #F4F5F7 !important; color: #161616 !important; /* ── Layout containers — same flat canvas ────────────────────────────────── */ .fi-body, .fi-main, .fi-layout, .fi-layout-sidebar, .fi-simple-main-ctn, .fi-page, .fi-page-ctn, .fi-content { background: #F4F5F7 !important; color: #161616 !important; } /* ── Sidebar — matte white, crisp solid edge ─────────────────────────────── */ .fi-sidebar, .fi-sidebar-nav, .fi-sidebar-header, .fi-sidebar-footer { background: #FFFFFF !important; border-top: none !important; border-right: 1px solid #D1D5DB !important; border-left: none !important; box-shadow: none !important; } .fi-sidebar-header { border-bottom: 1px solid #D1D5DB !important; padding: 0.75rem 1rem !important; } /* Sidebar group labels */ .fi-sidebar-group .fi-sidebar-group-label { color: #525252 !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; font-size: 0.58rem !important; font-weight: 800 !important; } /* Nav items */ .fi-sidebar-item a, .fi-sidebar-item button { color: #161616 !important; } .fi-sidebar-item-label, .fi-sidebar-nav-item-label { color: #161616 !important; font-weight: 500 !important; font-size: 0.8rem !important; } .fi-sidebar-item svg { color: #525252 !important; } /* Active state */ .fi-sidebar-item-active a, .fi-sidebar-item-active button { background: rgba(15,98,254,0.1) !important; color: #0F62FE !important; } .fi-sidebar-item-active .fi-sidebar-item-label { color: #0F62FE !important; } .fi-sidebar-item-active svg { color: #0F62FE !important; } .fi-sidebar-item-active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2.5px; background: #0F62FE; border-radius: 0 1px 1px 0; } /* Hover */ .fi-sidebar-item:not(.fi-sidebar-item-active) a:hover, .fi-sidebar-item:not(.fi-sidebar-item-active) button:hover { background: rgba(15,98,254,0.06) !important; color: #0F62FE !important; } .fi-sidebar-item:not(.fi-sidebar-item-active):hover svg { color: #0F62FE !important; } .fi-sidebar-item:not(.fi-sidebar-item-active):hover .fi-sidebar-item-label { color: #0F62FE !important; } /* ── Topbar — matte white, crisp solid edge ──────────────────────────────── */ .fi-topbar, .fi-topbar-ctn { background: #FFFFFF !important; border-bottom: 1px solid #D1D5DB !important; border-top: none !important; box-shadow: none !important; color: #161616 !important; } .fi-topbar * { color: #161616 !important; } .fi-topbar svg { color: #525252 !important; } .fi-topbar .fi-icon-btn { background: transparent !important; } .fi-topbar .fi-icon-btn:hover { background: #F3F4F6 !important; } .fi-topbar .fi-icon-btn svg { color: #525252 !important; } /* ── Page header / breadcrumbs ───────────────────────────────────────────── */ .fi-header, .fi-header-heading, .fi-page-header-ctn { color: #161616 !important; background: transparent !important; border-color: #D1D5DB !important; } .fi-breadcrumbs, .fi-breadcrumbs a, .fi-breadcrumbs span { color: #525252 !important; } /* Heading tracking — technical titling-block feel (Space Grotesk headings) */ .fi-header-heading, .fi-section-header-heading, .fi-modal-heading, .fi-topbar .fi-logo, .fi-sidebar-header .fi-logo, .fi-wi-stats-overview-stat-value { letter-spacing: 0.025em !important; } /* ── Cards / Sections — matte white, thin solid border, flat ────────────── */ .fi-section, .fi-card, .fi-wi { background: #FFFFFF !important; border: 1px solid #D1D5DB !important; box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important; color: #161616 !important; } /* Section header — solid divider, clean title-block look */ .fi-section-header { background: #FFFFFF !important; border-bottom: 1px solid #E5E7EB !important; border-top: none !important; border-left: none !important; } .fi-section-header-heading, .fi-section-heading, .fi-section-header .fi-section-heading { color: #161616 !important; font-weight: 600 !important; } .fi-section-description, .fi-section-header .fi-section-description { color: #525252 !important; } .fi-section-content, .fi-section-content-ctn { background: #FFFFFF !important; color: #161616 !important; } /* ── Tables ──────────────────────────────────────────────────────────────── */ .fi-ta, .fi-ta-ctn { background: #FFFFFF !important; border: 1px solid #D1D5DB !important; box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important; } .fi-ta-table { background: #FFFFFF !important; } .fi-ta thead, .fi-ta thead tr { background: #F9FAFB !important; border-bottom: 1px solid #D1D5DB !important; } .fi-ta th, .fi-ta-header-cell { background: #F9FAFB !important; color: #525252 !important; border-color: #D1D5DB !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; font-size: 0.65rem !important; } .fi-ta td, .fi-ta-cell { color: #161616 !important; border-color: #E5E7EB !important; background: #FFFFFF !important; } .fi-ta tbody tr { border-bottom: 1px solid #E5E7EB !important; } /* 2026-07-04: was a flat #F9FAFB (barely a shade off the #FFFFFF cell background — Alex's "too light, can barely see you're hovering" feedback). Replaced with a faint tint of the theme's own accent blue so it reads as "branded/interactive," matching the professional/ CEO-level character of this theme without going dark or gaudy. */ .fi-ta tbody tr:hover td, .fi-ta-row:hover .fi-ta-cell, .fi-ta-row:hover td { background: rgba(15,98,254,0.06) !important; box-shadow: none !important; } .fi-ta-empty-state { background: #FFFFFF !important; color: #525252 !important; } .fi-ta-empty-state-heading { color: #161616 !important; } .fi-ta-empty-state-description { color: #9CA3AF !important; } /* Table toolbar */ .fi-ta-header-toolbar { background: #F9FAFB !important; border-bottom: 1px solid #D1D5DB !important; } .fi-ta-search-field input { background: #FFFFFF !important; color: #161616 !important; border: 1px solid #D1D5DB !important; box-shadow: none !important; } .fi-ta-search-field input:focus { border-color: #0F62FE !important; box-shadow: 0 0 0 2px rgba(15,98,254,0.15) !important; } /* Table filter/sort buttons */ .fi-ta-filters-btn, .fi-ta-header-cell-sort-btn { color: #525252 !important; background: transparent !important; } .fi-ta-filters-btn:hover { color: #161616 !important; } /* Pagination */ .fi-pagination { background: #F9FAFB !important; border-top: 1px solid #D1D5DB !important; color: #525252 !important; } .fi-pagination-item, .fi-pagination button { color: #161616 !important; background: #FFFFFF !important; border: 1px solid #D1D5DB !important; } .fi-pagination-item:hover, .fi-pagination button:hover { background: #F3F4F6 !important; } .fi-pagination-item[aria-current="page"], .fi-pagination-item.fi-active { background: #0F62FE !important; color: #ffffff !important; border-color: #0F62FE !important; font-weight: 600 !important; } .fi-pagination-records-per-page-select select { background: #FFFFFF !important; color: #161616 !important; border: 1px solid #D1D5DB !important; } /* ── Form Inputs — matte white, crisp bordered ───────────────────────────── */ .fi-input, .fi-input-wrp, .fi-select-input, .fi-textarea, input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], select, textarea { background: #FFFFFF !important; color: #161616 !important; border: 1px solid #D1D5DB !important; box-shadow: none !important; } /* Input prefix/suffix ($ % symbols) */ .fi-input-wrp-prefix, .fi-input-wrp-suffix, [data-prefix], [data-suffix] { background: #F9FAFB !important; color: #525252 !important; border-color: #D1D5DB !important; } /* Focus */ .fi-input:focus, .fi-select-input:focus, .fi-textarea:focus, input:focus, select:focus, textarea:focus, .fi-fo-field-wrp:focus-within .fi-input, .fi-fo-field-wrp:focus-within .fi-select-input, .fi-fo-field-wrp:focus-within .fi-textarea { border-color: #0F62FE !important; box-shadow: 0 0 0 3px rgba(15,98,254,0.12) !important; outline: none !important; } /* Field labels */ .fi-fo-field-label, .fi-fo-field-label label, .fi-fo-field-label span, label { color: #161616 !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: normal !important; } .fi-fo-helper-text { color: #525252 !important; } .fi-input::placeholder, .fi-textarea::placeholder, input::placeholder, textarea::placeholder { color: #9CA3AF !important; } /* Select — single clean arrow */ select.fi-select-input, .fi-select-input { appearance: auto !important; -webkit-appearance: auto !important; background-image: none !important; } /* Rich text editor (TipTap) */ .fi-fo-rich-editor, .fi-fo-rich-editor .tiptap, .fi-fo-rich-editor [contenteditable], .ProseMirror, [contenteditable="true"] { background: #FFFFFF !important; color: #161616 !important; border-color: #D1D5DB !important; } .fi-fo-rich-editor .fi-fo-rich-editor-toolbar button { color: #161616 !important; } .fi-fo-rich-editor .fi-fo-rich-editor-toolbar button:hover, .fi-fo-rich-editor .fi-fo-rich-editor-toolbar button.is-active { background: #F3F4F6 !important; color: #161616 !important; } .fi-fo-rich-editor .fi-fo-rich-editor-toolbar, .tiptap-toolbar { background: #F9FAFB !important; border-color: #D1D5DB !important; } .fi-fo-rich-editor .fi-fo-rich-editor-toolbar button { background: transparent !important; color: #161616 !important; border: none !important; } /* ── Buttons — crisp drafting-tool style ─────────────────────────────────── */ .fi-btn { background: #FFFFFF !important; border: 1px solid #D1D5DB !important; color: #161616 !important; box-shadow: 0 1px 1px rgba(0,0,0,0.04) !important; text-transform: none !important; letter-spacing: normal !important; font-weight: 500 !important; } .fi-btn:hover { background: #F9FAFB !important; border-color: #9CA3AF !important; box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important; color: #161616 !important; } .fi-btn:active { background: #F3F4F6 !important; } /* Primary button — Blueprint teal */ .fi-btn.fi-btn-color-primary, .fi-btn[type="submit"].fi-btn-color-primary, .fi-modal-footer .fi-btn.fi-btn-color-primary, .fi-form .fi-btn.fi-btn-color-primary { background: #0F62FE !important; border-color: #0043CE !important; color: #ffffff !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgba(15,98,254,0.3) !important; } .fi-btn.fi-btn-color-primary:hover { background: #0043CE !important; border-color: #002D9C !important; box-shadow: 0 2px 6px rgba(15,98,254,0.35) !important; } /* Danger button */ .fi-btn.fi-btn-color-danger, .fi-modal-footer .fi-btn.fi-btn-color-danger { background: #FEF2F2 !important; border-color: #FECACA !important; color: #9b2c22 !important; } .fi-btn.fi-btn-color-danger:hover { background: #FEE2E2 !important; border-color: #FCA5A5 !important; } /* Success button */ .fi-btn.fi-btn-color-success { background: #F0FDF4 !important; border-color: #BBF7D0 !important; color: #1a6e40 !important; } .fi-btn.fi-btn-color-success:hover { background: #DCFCE7 !important; } /* Warning button */ .fi-btn.fi-btn-color-warning { background: #FFFBEB !important; border-color: #FDE68A !important; color: #7a4c0e !important; } /* Info button */ .fi-btn.fi-btn-color-info { background: #EFF6FF !important; border-color: #BFDBFE !important; color: #234878 !important; } /* Gray button */ .fi-btn.fi-btn-color-gray { background: #F3F4F6 !important; border-color: #D1D5DB !important; color: #161616 !important; } .fi-btn.fi-btn-color-gray:hover { background: #E5E7EB !important; border-color: #9CA3AF !important; } /* Icon buttons */ .fi-icon-btn { background: transparent !important; color: #525252 !important; border: none !important; box-shadow: none !important; } .fi-icon-btn:hover { background: #F3F4F6 !important; color: #161616 !important; } .fi-icon-btn svg { color: #525252 !important; } /* ── Modals — matte white title-block ────────────────────────────────────── */ .fi-modal-window, .fi-modal-content, .fi-modal-header, .fi-modal-footer { background: #FFFFFF !important; color: #161616 !important; border-color: #D1D5DB !important; } .fi-modal-window { box-shadow: 0 12px 32px rgba(0,0,0,0.14) !important; border: 1px solid #D1D5DB !important; border-left: 3px solid #0F62FE !important; } .fi-modal-heading { color: #161616 !important; font-weight: 600 !important; } .fi-modal-description { color: #525252 !important; } .fi-modal-header { background: #F9FAFB !important; border-bottom: 1px solid #E5E7EB !important; border-left: none !important; } .fi-modal-footer { background: #F9FAFB !important; border-top: 1px solid #D1D5DB !important; } .fi-modal-close-btn { color: #9CA3AF !important; background: transparent !important; } .fi-modal-close-btn:hover { color: #161616 !important; background: #F3F4F6 !important; } .fi-modal-overlay { background: rgba(31,41,55,0.4) !important; } /* ── Dropdowns — matte white floating menu ───────────────────────────────── */ .fi-dropdown-panel { background: #FFFFFF !important; border: 1px solid #D1D5DB !important; box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; color: #161616 !important; } .fi-dropdown-list-item { color: #161616 !important; background: transparent !important; border-left: none !important; animation: none !important; } .fi-dropdown-list-item:hover { background: #F3F4F6 !important; color: #161616 !important; border-left: none !important; } /* ── Tabs ────────────────────────────────────────────────────────────────── */ .fi-tabs { border-bottom: 1px solid #D1D5DB !important; background: transparent !important; } .fi-tabs-tab { color: #9CA3AF !important; background: transparent !important; border-color: transparent !important; font-weight: 500 !important; } .fi-tabs-tab:hover { color: #161616 !important; background: #F9FAFB !important; } .fi-tabs-tab[aria-selected="true"], .fi-tabs-tab.fi-active { color: #0F62FE !important; border-bottom-color: #0F62FE !important; background: transparent !important; font-weight: 600 !important; } /* ── Badges ──────────────────────────────────────────────────────────────── */ /* No border in light mode either — the dark-theme rule's leading dot (::before, currentColor) is the "what state" signal in both themes, matching Install Dispatch's borderless .id-sbadge pill. */ .fi-badge { border: none !important; } /* ── Stat widgets — matte white cards ────────────────────────────────────── */ .fi-wi-stats-overview-stat { background: #FFFFFF !important; border: 1px solid #D1D5DB !important; box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important; } .fi-wi-stats-overview-stat::before { display: none !important; } /* Stat labels need strong contrast on the white card background */ .fi-wi-stats-overview-stat-label { color: #525252 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; font-weight: 700 !important; } .fi-wi-stats-overview-stat-description { color: #525252 !important; } .fi-wi-stats-overview-stat-value { color: #0F62FE !important; } .fi-wi-stats-overview-stat:nth-child(2) .fi-wi-stats-overview-stat-value { color: #B45309 !important; } .fi-wi-stats-overview-stat:nth-child(3) .fi-wi-stats-overview-stat-value { color: #15803D !important; } .fi-wi-stats-overview-stat:nth-child(4) .fi-wi-stats-overview-stat-value { color: #0369A1 !important; } /* ── Toggle switches ─────────────────────────────────────────────────────── */ .fi-toggle-off, [role="switch"][aria-checked="false"] .fi-toggle-track { background: #D1D5DB !important; } /* ── Notification toasts ─────────────────────────────────────────────────── */ .fi-no-ctn { background: #FFFFFF !important; border: 1px solid #D1D5DB !important; box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; color: #161616 !important; } .fi-no-title { color: #161616 !important; } .fi-no-body { color: #525252 !important; } .fi-no-ctn.fi-color-success { border-left: 3px solid #10b981 !important; } .fi-no-ctn.fi-color-danger { border-left: 3px solid #ef4444 !important; } .fi-no-ctn.fi-color-warning { border-left: 3px solid #f59e0b !important; } .fi-no-ctn.fi-color-info { border-left: 3px solid #3b82f6 !important; } /* ── Notification bell — no animation in light mode ─────────────────────── */ .fi-topbar-database-notifications-btn.has-unread { animation: none !important; } .fi-topbar-database-notifications-btn.has-unread svg { color: #0F62FE !important; } .fi-topbar-database-notifications-btn .fi-icon-btn-badge-ctn .fi-badge { background: #0F62FE !important; color: #ffffff !important; box-shadow: none !important; } /* ── Scrollbar ────────────────────────────────────────────────────────────── */ ::-webkit-scrollbar-track { background: #F3F4F6 !important; } ::-webkit-scrollbar-thumb { background: #D1D5DB !important; border-radius: 3px !important; } ::-webkit-scrollbar-thumb:hover { background: #9CA3AF !important; } /* ── FilePond drop zone ──────────────────────────────────────────────────── */ .fi-fo-file-upload .filepond--panel-root { background: #F9FAFB !important; border-color: #D1D5DB !important; } .fi-fo-file-upload .filepond--item-panel { background: #F3F4F6 !important; } .fi-fo-file-upload .filepond--file-info-main { color: #161616 !important; } .fi-fo-file-upload .filepond--drop-label { color: #525252 !important; } .fi-fo-file-upload .filepond--file-status-main { color: #161616 !important; } .fi-fo-file-upload .filepond--label-action { color: #0F62FE !important; } .fi-fo-file-upload .filepond--file { background: #F9FAFB !important; border: 1px solid #D1D5DB !important; color: #161616 !important; } /* ── Placeholder text ────────────────────────────────────────────────────── */ .fi-fo-placeholder { color: #161616 !important; } /* ── Links ───────────────────────────────────────────────────────────────── */ a.fi-link { color: #0F62FE !important; } a.fi-link:hover { color: #0043CE !important; } /* ── Footer ──────────────────────────────────────────────────────────────── */ .fi-footer { color: #9CA3AF !important; } /* ── Checkboxes ──────────────────────────────────────────────────────────── */ input[type=checkbox]:checked { accent-color: #0F62FE !important; } .fi-checkbox-input:checked { background-color: #0F62FE !important; border-color: #0043CE !important; } /* ── Toggle button groups ────────────────────────────────────────────────── */ .fi-fo-toggle-buttons label.fi-btn { background: #FFFFFF !important; color: #161616 !important; border-color: #D1D5DB !important; } .fi-fo-toggle-buttons label.fi-btn.fi-btn-color-primary { color: #0F62FE !important; border-color: rgba(15,98,254,0.5) !important; background: #EDF5FF !important; } .fi-fo-toggle-buttons label.fi-btn.fi-btn-color-danger { color: #9b2c22 !important; border-color: rgba(155,44,34,0.4) !important; background: #FEF2F2 !important; } .fi-fo-toggle-buttons label.fi-btn.fi-btn-color-success { color: #1a6e40 !important; border-color: rgba(26,110,64,0.4) !important; background: #F0FDF4 !important; } .fi-fo-toggle-buttons label.fi-btn.fi-btn-color-warning { color: #7a4c0e !important; border-color: rgba(122,76,14,0.4) !important; background: #FFFBEB !important; } .fi-fo-toggle-buttons label.fi-btn.fi-btn-color-info { color: #234878 !important; border-color: rgba(35,72,120,0.4) !important; background: #EFF6FF !important; } .fi-fo-toggle-buttons label.fi-btn.fi-btn-color-gray { color: #161616 !important; border-color: #D1D5DB !important; background: #F3F4F6 !important; } .fi-fo-toggle-buttons input:checked + label.fi-btn { background: #0F62FE !important; border-color: #0043CE !important; color: #ffffff !important; box-shadow: 0 1px 2px rgba(15,98,254,0.3) !important; } .fi-fo-toggle-buttons input:checked + label.fi-btn.fi-btn-color-danger { background: #9b2c22 !important; border-color: #7a211a !important; color: #ffffff !important; box-shadow: none !important; } .fi-fo-toggle-buttons input:checked + label.fi-btn.fi-btn-color-success { background: #1a6e40 !important; border-color: #155830 !important; color: #ffffff !important; box-shadow: none !important; } .fi-fo-toggle-buttons input:checked + label.fi-btn.fi-btn-color-warning { background: #a06020 !important; border-color: #7a4c0e !important; color: #ffffff !important; box-shadow: none !important; } .fi-fo-toggle-buttons input:checked + label.fi-btn.fi-btn-color-info { background: #2563a8 !important; border-color: #1d4878 !important; color: #ffffff !important; box-shadow: none !important; } /* ── Prose / markdown content ────────────────────────────────────────────── */ .prose-invert { --tw-prose-body: #161616 !important; --tw-prose-headings: #161616 !important; --tw-prose-links: #0F62FE !important; --tw-prose-bold: #161616 !important; --tw-prose-counters: #525252 !important; --tw-prose-bullets: #525252 !important; --tw-prose-hr: #E5E7EB !important; --tw-prose-quotes: #161616 !important; --tw-prose-code: #161616 !important; --tw-prose-pre-bg: #F3F4F6 !important; } .prose-invert p, .prose-invert li, .prose-invert span { color: #161616 !important; } .prose-invert h1, .prose-invert h2, .prose-invert h3, .prose-invert h4 { color: #161616 !important; } .prose-invert strong { color: #161616 !important; } .prose-invert a { color: #0F62FE !important; } .prose-invert code { color: #161616 !important; background: #F3F4F6 !important; } .prose-invert pre { background: #F3F4F6 !important; color: #161616 !important; } /* ── Global text color reset ─────────────────────────────────────────────── */ * { color: inherit; } p, span, div, h1, h2, h3, h4, h5, h6, li, td, th, label { color: inherit !important; } } /* end html:not(.dark) */ /* ── Livewire components in form Tabs always take full available width ─────── */ .fi-fo-field-wrp:has(.livewire-placeholder) { width: 100% !important; } /* ══════════════════════════════════════════════════════════════════════════════ PHASE 5 — AGGRESSIVE TABLE HORIZONTAL SCROLL (global, authoritative — loads last) Forces wide tables to scroll horizontally with nowrap cells instead of wrapping. 2026-07-04: nowrap on td/th alone is NOT enough — Filament's inner text elements (.fi-ta-text and friends) set their own white-space, which stops the td's nowrap from inheriting. Result (Alex's report, reproduced at a 700px viewport): squeezed columns wrapped one word per line and even broke task codes at hyphens. The descendant rule below forces nowrap on the cells' contents too, so columns widen to fit and the table scrolls horizontally inside .fi-ta-content-ctn instead of stacking text. Scoped to ≥640px: below that Filament switches to its stacked card-per-row mobile layout (fi-ta-table-stacked-on-mobile), where each field gets the full row width and wrapping is correct behavior. ══════════════════════════════════════════════════════════════════════════════ */ .fi-ta-content { overflow-x: auto !important; } .fi-ta-content-ctn { overflow-x: auto !important; } .fi-ta-table { min-width: 1000px !important; } .fi-ta-table td, .fi-ta-table th { white-space: nowrap !important; } @media (min-width: 640px) { .fi-ta-table td *, .fi-ta-table th * { white-space: nowrap !important; } } /* ══════════════════════════════════════════════════════════════════════════════ PHASE 6 — GLOBAL COMPACTION v2 (loads last — maximum specificity) ~30% size reduction across the entire system. Uses html-level font-size scaling (affects all rem units) + high-specificity html body selectors to beat Tailwind. ══════════════════════════════════════════════════════════════════════════════ */ /* ── MASTER LEVER: scale all rem-based sizing down ~13% globally ──────────── */ html { font-size: 87% !important; } /* ── Topbar — compact ─────────────────────────────────────────────────────── */ html body .fi-topbar { min-height: 2.75rem !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* ── Page header ──────────────────────────────────────────────────────────── */ html body .fi-header { padding-bottom: 0.4rem !important; margin-bottom: 0.5rem !important; } html body .fi-header-heading { font-size: 1rem !important; } html body .fi-page-header-ctn, html body .fi-page > header { padding: 0.5rem 0.875rem !important; } html body .fi-breadcrumbs { font-size: 0.65rem !important; } /* ── Tables — aggressively compact rows ───────────────────────────────────── */ html body .fi-ta table th, html body .fi-ta table td, html body table.fi-ta-table th, html body table.fi-ta-table td, html body .fi-ta-cell, html body .fi-ta-header-cell { padding: 0.2rem 0.55rem !important; font-size: 0.72rem !important; line-height: 1.25 !important; } html body .fi-ta-header-toolbar { padding: 0.3rem 0.6rem !important; } html body .fi-ta-search-field input { font-size: 0.72rem !important; padding: 0.25rem 0.5rem !important; height: 1.75rem !important; } /* ── Pagination ───────────────────────────────────────────────────────────── */ html body .fi-pagination { padding: 0.3rem 0.6rem !important; } html body .fi-pagination-item, html body .fi-pagination button { font-size: 0.65rem !important; padding: 0.15rem 0.4rem !important; min-height: 1.5rem !important; } html body .fi-pagination-records-per-page-select select { font-size: 0.65rem !important; padding: 0.15rem 0.35rem !important; } /* ── Badges — tight ───────────────────────────────────────────────────────── */ html body .fi-badge { padding: 0.15rem 0.5rem !important; font-size: 0.55rem !important; line-height: 1.2 !important; border-radius: 9999px !important; } /* ── Buttons — compact across the board ──────────────────────────────────── */ html body .fi-btn { min-height: 1.6rem !important; padding: 0.25rem 0.65rem !important; font-size: 0.65rem !important; gap: 0.25rem !important; line-height: 1 !important; } html body .fi-btn.fi-btn-size-sm { min-height: 1.4rem !important; padding: 0.15rem 0.45rem !important; font-size: 0.6rem !important; } html body .fi-btn.fi-btn-size-xl { min-height: 2rem !important; padding: 0.4rem 0.9rem !important; font-size: 0.7rem !important; } html body .fi-icon-btn { width: 1.6rem !important; height: 1.6rem !important; min-width: 1.6rem !important; } html body .fi-icon-btn svg { width: 0.875rem !important; height: 0.875rem !important; } /* ── Sections & cards ─────────────────────────────────────────────────────── */ html body .fi-section-header { padding: 0.4rem 0.75rem !important; } html body .fi-section-header .fi-section-heading { font-size: 0.72rem !important; } html body .fi-section-header .fi-section-description { font-size: 0.65rem !important; } html body .fi-section-content, html body .fi-section-content-ctn { padding: 0.6rem 0.75rem !important; } html body .fi-section + .fi-section { margin-top: 0.6rem !important; } html body .fi-wi + .fi-wi { margin-top: 0.6rem !important; } /* ── Form fields ──────────────────────────────────────────────────────────── */ html body .fi-fo-field-wrp { margin-bottom: 0.05rem !important; } html body .fi-fo-field-label span, html body .fi-fo-field-label label { font-size: 0.6rem !important; } html body .fi-fo-helper-text { font-size: 0.6rem !important; } html body .fi-input, html body .fi-select-input, html body .fi-textarea, html body input[type=text], html body input[type=email], html body input[type=password], html body input[type=number], html body input[type=date], html body input[type=search], html body select, html body textarea { font-size: 0.72rem !important; padding: 0.25rem 0.5rem !important; min-height: 1.75rem !important; } html body .fi-fo-component-ctn { gap: 0.5rem !important; } /* ── Modals ───────────────────────────────────────────────────────────────── */ html body .fi-modal-header { padding: 0.5rem 0.875rem !important; } html body .fi-modal-heading { font-size: 0.82rem !important; } html body .fi-modal-description { font-size: 0.65rem !important; } html body .fi-modal-footer { padding: 0.4rem 0.875rem !important; } html body .fi-modal-content { padding: 0.6rem 0.875rem !important; } /* ── Widgets / stat cards ─────────────────────────────────────────────────── */ html body .fi-wi-stats-overview-stat { padding: 0.75rem !important; } html body .fi-wi-stats-overview-stat-value { font-size: 1.25rem !important; } html body .fi-wi-stats-overview-stat-label { font-size: 0.55rem !important; } html body .fi-wi-stats-overview-stat-description { font-size: 0.6rem !important; } /* ── Tabs ─────────────────────────────────────────────────────────────────── */ html body .fi-tabs-tab { padding: 0.3rem 0.65rem !important; font-size: 0.65rem !important; } /* ── Dropdown items ───────────────────────────────────────────────────────── */ html body .fi-dropdown-list-item { padding: 0.25rem 0.65rem !important; font-size: 0.7rem !important; } html body .fi-dropdown-panel { font-size: 0.7rem !important; } /* ── Sidebar items (compact) ──────────────────────────────────────────────── */ html body .fi-sidebar-item a, html body .fi-sidebar-item button { font-size: 0.7rem !important; } html body .fi-sidebar.fi-sidebar-open .fi-sidebar-item a, html body .fi-sidebar.fi-sidebar-open .fi-sidebar-item button { padding: 0.3rem 0.6rem !important; } /* ── Repeater items ───────────────────────────────────────────────────────── */ html body .fi-fo-repeater-item-header { padding: 0.3rem 0.65rem !important; font-size: 0.7rem !important; } html body .fi-fo-repeater-item-content { padding: 0.4rem 0.65rem !important; } /* ── Notification toasts ──────────────────────────────────────────────────── */ html body .fi-no-ctn { padding: 0.5rem 0.75rem !important; } html body .fi-no-title { font-size: 0.72rem !important; } html body .fi-no-body { font-size: 0.65rem !important; } /* ── Toggle switches — scale down ─────────────────────────────────────────── */ html body .fi-toggle { transform: scale(0.85) !important; transform-origin: left center !important; } /* ── Sub-navigation (record tabs) ────────────────────────────────────────── */ html body .fi-page-sub-navigation { font-size: 0.7rem !important; } html body .fi-page-sub-navigation a { padding: 0.3rem 0.65rem !important; } /* ══════════════════════════════════════════════════════════════════════════════ PHASE 7 — CUSTOM BLADE COMPONENT LIGHT-MODE OVERRIDES Targets the semantic CSS classes added to blade templates that use hardcoded dark inline styles. These rules fire ONLY in light mode (html:not(.dark)). ══════════════════════════════════════════════════════════════════════════════ */ /* ── Billing Sheet ─────────────────────────────────────────────────────────── */ html:not(.dark) .bs-stat-card { background: #ffffff !important; border-color: #D1D5DB !important; box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important; } html:not(.dark) .bs-tab-bar { background: #ffffff !important; border-color: #D1D5DB !important; } html:not(.dark) .bs-tab-bar button { color: #161616 !important; } html:not(.dark) .bs-filter-bar { background: #F9FAFB !important; border-color: #D1D5DB !important; } html:not(.dark) .bs-filter-bar span { color: #525252 !important; } html:not(.dark) .bs-archive-wrap { border-color: #D1D5DB !important; } html:not(.dark) .bs-archive-header { background: #F9FAFB !important; border-color: #D1D5DB !important; } html:not(.dark) .bs-archive-header span { color: #161616 !important; } html:not(.dark) .bs-archive-thead tr { background: #F9FAFB !important; } html:not(.dark) .bs-archive-thead th { color: #525252 !important; background: #F9FAFB !important; border-color: #D1D5DB !important; } html:not(.dark) .bs-archive-tbody tr { border-color: #E5E7EB !important; } html:not(.dark) .bs-archive-tbody td { color: #161616 !important; background: #ffffff !important; } html:not(.dark) .bs-archive-tfoot tr { background: #F9FAFB !important; border-color: #D1D5DB !important; } html:not(.dark) .bs-archive-tfoot td { color: #161616 !important; } /* ── AI Briefs ─────────────────────────────────────────────────────────────── */ html:not(.dark) .ab-input-panel { background: #ffffff !important; border-color: #D1D5DB !important; border-left-color: #0F62FE !important; } html:not(.dark) .ab-textarea { background: #ffffff !important; border-color: #D1D5DB !important; color: #161616 !important; } html:not(.dark) .ab-textarea::placeholder { color: #9ca3af !important; } html:not(.dark) .ab-upload-zone { background: #F9FAFB !important; border-color: #D1D5DB !important; } html:not(.dark) .ab-entry-card { background: #ffffff !important; border-color: #D1D5DB !important; } html:not(.dark) .ab-entry-card-latest { border-left-color: #0F62FE !important; } html:not(.dark) .ab-entry-header { background: #F9FAFB !important; border-color: #D1D5DB !important; } html:not(.dark) .ab-entry-header span { color: #161616 !important; } html:not(.dark) .ab-entry-body { color: #161616 !important; } /* ── Comments ──────────────────────────────────────────────────────────────── */ html:not(.dark) .cmt-card { background: #ffffff !important; border-color: #E5E7EB !important; } html:not(.dark) .cmt-card-admin { border-left-color: #0F62FE !important; } html:not(.dark) .cmt-card-client { border-left-color: #0369A1 !important; } html:not(.dark) .cmt-author { color: #161616 !important; } html:not(.dark) .cmt-body { color: #161616 !important; } html:not(.dark) .cmt-replies { border-left-color: #D1D5DB !important; } html:not(.dark) .cmt-empty { background: #F9FAFB !important; border-color: #D1D5DB !important; } html:not(.dark) .cmt-empty p { color: #525252 !important; } html:not(.dark) .cmt-compose { background: #ffffff !important; border-color: #D1D5DB !important; border-top-color: #0F62FE !important; } html:not(.dark) .cmt-reply-banner { background: #F9FAFB !important; } html:not(.dark) .cmt-textarea { background: #F9FAFB !important; border-color: #D1D5DB !important; color: #161616 !important; } html:not(.dark) .cmt-mention-label { color: #525252 !important; } html:not(.dark) .cmt-mention-btn-inactive { border-color: #D1D5DB !important; color: #161616 !important; } /* ── Billing Overview Widget ───────────────────────────────────────────────── */ html:not(.dark) .bo-wrap { background: linear-gradient(135deg, #ffffff 0%, #F9FAFB 100%) !important; border-color: #D1D5DB !important; box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important; } html:not(.dark) .bo-title { color: #161616 !important; } html:not(.dark) .bo-subtitle { color: #525252 !important; } html:not(.dark) .bo-stat-card { background: #ffffff !important; border-color: #E5E7EB !important; } html:not(.dark) .bo-stat-label { color: #525252 !important; } html:not(.dark) .bo-stat-sub { color: #9ca3af !important; } html:not(.dark) .bo-margin-row { border-top-color: #E5E7EB !important; } html:not(.dark) .bo-margin-label { color: #525252 !important; } /* ── Company Header Widget ─────────────────────────────────────────────────── */ html:not(.dark) .chw-wrap { background: linear-gradient(135deg, #ffffff 0%, #F9FAFB 100%) !important; border-color: #D1D5DB !important; box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important; } html:not(.dark) .chw-name { color: #161616 !important; } html:not(.dark) .chw-day { color: #161616 !important; } html:not(.dark) .chw-date { color: #525252 !important; } /* ══════════════════════════════════════════════════════════════════════════════ PHASE 8 — LIGHT THEME DE-PINKING Kills all pink (#ff1493) and purple (#a855f7, #c084fc, #d8b4fe) that bleeds from panel-theme.css (unscoped rules) into the light theme. Miami Nights dark theme is completely untouched. ══════════════════════════════════════════════════════════════════════════════ */ /* ── Sidebar — kill pink top border and pink group labels ─────────────────── */ html:not(.dark) .fi-sidebar { border-top: none !important; border-top-color: transparent !important; } html:not(.dark) .fi-sidebar-group .fi-sidebar-group-label { color: #4a4238 !important; /* was #9ca3af — too faint on warm leather sidebar */ } /* ── Topbar — kill pink bottom border ────────────────────────────────────────*/ html:not(.dark) .fi-topbar, html:not(.dark) .fi-topbar-ctn { border-bottom-color: #D1D5DB !important; box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important; } /* ── Section headers — kill pink bottom border ───────────────────────────── */ html:not(.dark) .fi-section-header { border-bottom-color: #D1D5DB !important; } /* ── Modal header — kill pink bottom border ──────────────────────────────── */ html:not(.dark) .fi-modal-header { border-bottom-color: #D1D5DB !important; } /* Modal left accent — teal instead of pink ──────────────────────────────── */ html:not(.dark) .fi-modal-window { border-left-color: #0F62FE !important; } /* ── Breadcrumb separator — kill pink ────────────────────────────────────── */ html:not(.dark) .fi-breadcrumbs-item-separator { color: #D1D5DB !important; } /* ── Active sidebar item — kill neon gradient bar (already done, belt+suspenders) */ html:not(.dark) .fi-sidebar-item-active::before { display: none !important; background: none !important; } /* ── Notification bell badge — no pink gradient in light mode ────────────── */ html:not(.dark) .fi-topbar-database-notifications-btn .fi-icon-btn-badge-ctn .fi-badge { background: #0F62FE !important; background-image: none !important; box-shadow: none !important; color: #ffffff !important; } html:not(.dark) .fi-topbar-database-notifications-btn.has-unread svg { color: #0F62FE !important; } /* ── Toggle button groups — kill pink/purple active states in light mode ─── */ html:not(.dark) .fi-fo-toggle-buttons input:checked + label.fi-btn.fi-btn-color-pink { background-color: #161616 !important; border-color: #525252 !important; color: #ffffff !important; box-shadow: none !important; } /* ── Unread notification panel items — teal accent instead of pink ────────── */ html:not(.dark) .fi-no-notification-unread-ctn { border-left-color: #0F62FE !important; background: rgba(15,98,254,0.04) !important; } html:not(.dark) .fi-no-notification-read-ctn { border-left-color: #D1D5DB !important; } /* ── Footer — kill pink ──────────────────────────────────────────────────── */ html:not(.dark) .fi-footer { color: #9ca3af !important; } /* ── Any remaining pink/purple text that slips through ───────────────────── */ html:not(.dark) [style*="color: #ff1493"], html:not(.dark) [style*="color:#ff1493"], html:not(.dark) [style*="color: rgba(255,20,147"], html:not(.dark) [style*="color:rgba(255,20,147"] { color: #161616 !important; } html:not(.dark) [style*="color: #a855f7"], html:not(.dark) [style*="color:#a855f7"], html:not(.dark) [style*="color: #c084fc"], html:not(.dark) [style*="color:#c084fc"] { color: #161616 !important; } /* ══════════════════════════════════════════════════════════════════════════════ PHASE 9 — LIGHT THEME DEEP DE-PINKING Catches remaining pink/purple in billing-overview, designer-payout-report, ai-summary, and ai-briefs that use inline border/background styles. Miami Nights dark theme is completely untouched. ══════════════════════════════════════════════════════════════════════════════ */ /* ── Billing Overview Widget — kill pink inline styles ───────────────────── */ /* Designer Payroll value: color:#ff1493 inline */ html:not(.dark) .bo-stat-card [style*="color:#ff1493"], html:not(.dark) .bo-stat-card [style*="color: #ff1493"] { color: #161616 !important; } /* Pink border on stat card */ html:not(.dark) .bo-stat-card [style*="border:1px solid rgba(255,20,147"], html:not(.dark) .bo-stat-card [style*="border: 1px solid rgba(255,20,147"], html:not(.dark) .bo-stat-card [style*="border-top:2px solid #ff1493"], html:not(.dark) .bo-stat-card [style*="border-top: 2px solid #ff1493"] { border-color: #D1D5DB !important; border-top-color: #0F62FE !important; } /* Top gradient accent line on billing overview wrap */ html:not(.dark) .bo-wrap > [style*="background:linear-gradient"], html:not(.dark) .bo-wrap > [style*="background: linear-gradient"] { opacity: 0 !important; } /* ── AI Summary component — kill pink/purple inline styles ───────────────── */ /* Pink border-left on the summary card */ html:not(.dark) [style*="border-left: 3px solid #ff1493"], html:not(.dark) [style*="border-left:3px solid #ff1493"] { border-left-color: #0F62FE !important; } /* Purple link color */ html:not(.dark) [style*="color: #a855f7"], html:not(.dark) [style*="color:#a855f7"] { color: #0369A1 !important; } /* ── AI Briefs — questions section border-top pink ───────────────────────── */ html:not(.dark) .ab-questions-section { border-top-color: #D1D5DB !important; } /* Belt-and-suspenders: catch the inline border-top style */ html:not(.dark) .ab-questions-section[style*="border-top"], html:not(.dark) .ab-questions-section[style*="border-top:"] { border-top-color: #D1D5DB !important; } /* ── Designer Payout Report — kill purple inline styles ──────────────────── */ html:not(.dark) [style*="color:#c084fc"], html:not(.dark) [style*="color: #c084fc"] { color: #161616 !important; } /* Purple border on payout report */ html:not(.dark) [style*="border: 1px solid rgba(255, 20, 147, 0.25)"], html:not(.dark) [style*="border:1px solid rgba(255,20,147,0.25)"] { border-color: #D1D5DB !important; } /* ── Global catch-all: any remaining pink/purple borders ─────────────────── */ html:not(.dark) [style*="border-color:#ff1493"], html:not(.dark) [style*="border-color: #ff1493"] { border-color: #D1D5DB !important; } html:not(.dark) [style*="border-left-color:#ff1493"], html:not(.dark) [style*="border-left-color: #ff1493"] { border-left-color: #0369A1 !important; } /* ============================================================ PHASE 10 — SIDEBAR CONDENSATION (IDE-style compact layout) Aggressively tightens vertical spacing so the sidebar fits without a scrollbar on standard laptop screens. ============================================================ */ /* Collapse gap between nav groups */ .fi-sidebar-nav { gap: 0 !important; padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } /* Tighten each group container */ .fi-sidebar-group { margin-bottom: 0.1rem !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Shrink group label (section header) */ .fi-sidebar-group-label { padding-top: 0.2rem !important; padding-bottom: 0.1rem !important; font-size: 0.6rem !important; letter-spacing: 0.08em !important; } /* Tighten the list of items inside each group */ .fi-sidebar-items { gap: 0.05rem !important; } /* Compact individual nav item buttons */ .fi-sidebar-item-button { padding-top: 0.28rem !important; padding-bottom: 0.28rem !important; min-height: 0 !important; } /* Shrink the icon slightly so it doesn't force extra height */ .fi-sidebar-item-icon { width: 1rem !important; height: 1rem !important; } /* Tighten the item label font */ .fi-sidebar-item-label { font-size: 0.8rem !important; line-height: 1.2 !important; } /* ══════════════════════════════════════════════════════════════════════════════ AGGRESSIVE SIDEBAR CONDENSATION — overrides Filament defaults globally (no html:not(.dark) wrapper — applies to both themes) ══════════════════════════════════════════════════════════════════════════════ */ .fi-sidebar-group { margin-top: 0.1rem !important; margin-bottom: 0.1rem !important; } .fi-sidebar-group-label { padding-top: 0.15rem !important; padding-bottom: 0.15rem !important; font-size: 0.64rem !important; letter-spacing: 0.04em !important; } .fi-sidebar-nav { gap: 0.05rem !important; padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .fi-sidebar-items { gap: 0.02rem !important; } .fi-sidebar-item { gap: 0 !important; margin: 0 !important; } .fi-sidebar-item-button { padding-top: 0.22rem !important; padding-bottom: 0.22rem !important; min-height: 1.7rem !important; } .fi-sidebar-item-icon { width: 0.95rem !important; height: 0.95rem !important; } .fi-sidebar-item-label { font-size: 0.78rem !important; line-height: 1.1 !important; } /* ══════════════════════════════════════════════════════════════════════════════ PHASE 8 — SHOP FLOOR DASHBOARD WIDGETS — LIGHT-MODE OVERRIDES (ActiveTimersWidget, UrgentWorkOrdersWidget, InstallationBoardWidget, DepartmentQueueWidget — all use sf-* classes alongside dark-default inline styles) ══════════════════════════════════════════════════════════════════════════════ */ html:not(.dark) .sf-card-neutral { background: rgba(0, 0, 0, 0.02) !important; border-color: rgba(0, 0, 0, 0.1) !important; } html:not(.dark) .sf-card-success { background: rgba(16, 131, 77, 0.06) !important; border-color: rgba(16, 131, 77, 0.35) !important; } html:not(.dark) .sf-card-danger { background: rgba(220, 38, 38, 0.06) !important; border-color: rgba(220, 38, 38, 0.3) !important; } html:not(.dark) .sf-card-info { background: rgba(37, 99, 235, 0.06) !important; border-color: rgba(37, 99, 235, 0.3) !important; } html:not(.dark) .sf-card-hover:hover { border-color: rgba(26, 126, 114, 0.45) !important; background: rgba(26, 126, 114, 0.06) !important; } .sf-card-hover:hover { border-color: rgba(0, 229, 191, 0.35) !important; background: rgba(0, 229, 191, 0.04) !important; } html:not(.dark) .sf-title { color: #161616 !important; } html:not(.dark) .sf-meta { color: #525252 !important; } html:not(.dark) .sf-meta-faint { color: #9ca3af !important; } html:not(.dark) .sf-chevron { color: #9ca3af !important; } html:not(.dark) .sf-empty { color: #525252 !important; } html:not(.dark) .sf-drag-handle { color: #525252 !important; background: rgba(0, 0, 0, 0.04) !important; border-color: rgba(0, 0, 0, 0.12) !important; } html:not(.dark) .sf-drive-link { background: #fff !important; border-color: #d1d5db !important; color: #161616 !important; } /* Dragged-item ghost placeholder (Filament's bundled SortableJS) */ .fi-sortable-ghost { opacity: 0.4 !important; } /* ══════════════════════════════════════════════════════════════════════════════ PHASE 11 — LIGHT THEME LOW-CONTRAST TEXT RESCUE (2026-07-04 logic overhaul) Custom blades carry dark-theme inline colors (near-white text) that are invisible on the white light-theme surfaces. Inline styles can only be beaten by !important — the same [style*=…] attribute-selector pattern the de-pinking phases above already use. Scoped html:not(.dark) ONLY; the dark Miami Nights theme renders these blades exactly as authored. Standard: text #161616 primary / #525252 muted / #0F62FE links. Fixes at once: install-job-detail (had NO light styling at all), urgent-work-orders + announcements titles, owner-dashboard Due-Soon rows, dispatch month view, work-order-ticket faint text, my-profile name. ══════════════════════════════════════════════════════════════════════════════ */ /* Near-white inline TEXT → near-black */ html:not(.dark) [style*="color:#f3f4f6"], html:not(.dark) [style*="color: #f3f4f6"], html:not(.dark) [style*="color:#f9fafb"], html:not(.dark) [style*="color: #f9fafb"], html:not(.dark) [style*="color:#e5e7eb"], html:not(.dark) [style*="color: #e5e7eb"], html:not(.dark) [style*="color:#e8eaed"], html:not(.dark) [style*="color: #e8eaed"], html:not(.dark) [style*="color:#d1d5db"], html:not(.dark) [style*="color: #d1d5db"] { color: #161616 !important; } /* Light-blue inline links → technical blue */ html:not(.dark) [style*="color:#93b8f5"], html:not(.dark) [style*="color: #93b8f5"], html:not(.dark) [style*="color:#bfdbfe"], html:not(.dark) [style*="color: #bfdbfe"] { color: #0F62FE !important; } /* Mid-gray inline text → the #525252 muted standard (readable on white) */ html:not(.dark) [style*="color:#9ca3af"], html:not(.dark) [style*="color: #9ca3af"], html:not(.dark) [style*="color:#6b7280"], html:not(.dark) [style*="color: #6b7280"], html:not(.dark) [style*="color:#6b7480"], html:not(.dark) [style*="color: #6b7480"] { color: #525252 !important; } /* Dark translucent-white surfaces (chips/panels designed for dark cards) */ html:not(.dark) [style*="background:rgba(255,255,255,0.03)"], html:not(.dark) [style*="background: rgba(255,255,255,0.03)"], html:not(.dark) [style*="background:rgba(255,255,255,0.04)"], html:not(.dark) [style*="background: rgba(255,255,255,0.04)"], html:not(.dark) [style*="background:rgba(255,255,255,0.05)"], html:not(.dark) [style*="background: rgba(255,255,255,0.05)"] { background: #F3F4F6 !important; } /* Inline charcoal panel backgrounds (e.g. the dispatch month-view weekday header strip) → light header gray, with readable label text */ html:not(.dark) [style*="background:#181b1f"] { background: #F3F4F6 !important; color: #525252 !important; } html:not(.dark) [style*="border:1px solid rgba(255,255,255,0.07)"], html:not(.dark) [style*="border:1px solid rgba(255,255,255,0.08)"], html:not(.dark) [style*="border:1px solid rgba(255,255,255,0.12)"], html:not(.dark) [style*="border: 1px solid rgba(255,255,255,0.12)"] { border-color: #D1D5DB !important; } /* Class-level stragglers whose light overrides drifted too light */ html:not(.dark) .wo-ticket-table-faint { color: #525252 !important; } /* ══════════════════════════════════════════════════════════════════════════════ PHASE 12 — System-wide table card rows (2026-07-04). Generalized from the Work Orders list reference implementation Alex approved, then rolled out to every table in the app via this one shared class pair. Any Resource / RelationManager / Widget / Page opts in with a single line — ->recordClasses(fn ($record) => "ss-card-row ss-card-row--{$key}") (or just "ss-card-row" with no modifier for tables with no status to stripe) — nothing here reaches a table that doesn't explicitly add the class. Filament's own sort/search/bulk-actions/pagination/stacked-mobile layout are completely untouched: this is a CSS skin over the same , not a rebuild. Below 640px Filament's existing stacked-card mobile layout takes over (already correct) so this is scoped to ≥640px. `:has()` is scoped to plain `table` (not `.fi-ta-table`) so the same classes work on raw custom Blade
markup too, with zero PHP involved — just add the class to the directly in the blade loop. ══════════════════════════════════════════════════════════════════════════════ */ /* Per-theme default stripe accent — inherited, so the base card-row rule inside the @media block can fall back to it. Dark = neon cyan (fun/neon character); light = technical blue #0F62FE (professional/CEO character). */ .dark { --ss-default-stripe: #00e5bf; } html:not(.dark) { --ss-default-stripe: #0F62FE; } @media (min-width: 640px) { table:has(tr.ss-card-row) { border-collapse: separate !important; border-spacing: 0 0.5rem !important; } /* ── STRUCTURE (both themes) ─────────────────────────────────────────── */ /* Whole card is one clickable target — kills the hand→arrow cursor flicker as the mouse crosses the actions/copyable cells (which aren't part of the row-click). Buttons/copy triggers inside keep their own cursor. */ tr.ss-card-row { cursor: pointer; } tr.ss-card-row > td { transition: background-color 0.15s, border-color 0.15s; position: relative; } tr.ss-card-row > td:first-child { border-radius: 0.625rem 0 0 0.625rem; } tr.ss-card-row > td:last-child { border-radius: 0 0.625rem 0.625rem 0; } /* Status stripe — a ::before pseudo-element, not border-left, so hover can brighten JUST the accent via filter:brightness() without also brightening the cell's own text/icons the way filtering the whole
would. --stripe-color is set once per modifier class below and reused by both the resting bar and the hover treatment. */ tr.ss-card-row > td:first-child::before { content: ''; position: absolute; left: 0; top: 0.4rem; bottom: 0.4rem; width: 3px; border-radius: 2px; background: var(--stripe-color, transparent); transition: width 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease; } tr.ss-card-row:hover > td:first-child::before { width: 4px; filter: brightness(1.35); } /* Default stripe = the theme's own accent (see --ss-default-stripe below), so EVERY card row — including plain Tier-B tables with no status modifier (Clients, Install Crews, Users, Shop Profile relation tables, Notification Log) — shows a stripe that brightens + glows on hover. Kept at (0,2,2); the status modifiers below are (0,3,2) and always win, so Tier-A colours are unaffected. */ tr.ss-card-row > td:first-child { --stripe-color: var(--ss-default-stripe, transparent); } tr.ss-card-row.ss-card-row--warning > td:first-child { --stripe-color: #f59e0b; } tr.ss-card-row.ss-card-row--danger > td:first-child { --stripe-color: #ef4444; } tr.ss-card-row.ss-card-row--info > td:first-child { --stripe-color: #3b82f6; } tr.ss-card-row.ss-card-row--success > td:first-child { --stripe-color: #10b981; } tr.ss-card-row.ss-card-row--gray > td:first-child { --stripe-color: #6b7280; } tr.ss-card-row.ss-card-row--purple > td:first-child { --stripe-color: #a855f7; } /* ── DARK colours ──────────────────────────────────────────────────────── CRITICAL: this file uses native CSS nesting, so the base table rules inside `.dark { … }` (e.g. `.fi-ta td { background:#131518 }` ~L249) actually resolve to `.dark .fi-ta td` (specificity 0,2,1). An un-prefixed `tr.ss-card-row > td` (0,1,2) LOSES to that — which is why the cards were rendering the same #131518 as the gap behind them (no visible card). Prefixing with `.dark` puts these in the same league and lets them win. #1a1e24 is deliberately lighter than the #131518 gap so each row reads as a raised card. Covers the checkbox/selection cell too, so a bulk-select column blends into the card rather than floating as a detached section (Alex's "separated little section"). */ .dark tr.ss-card-row > td { background: #1a1e24 !important; border-top: 1px solid rgba(255,255,255,0.06) !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; border-left: none !important; border-right: none !important; } .dark tr.ss-card-row > td:first-child { border-left: 1px solid rgba(255,255,255,0.06) !important; } .dark tr.ss-card-row > td:last-child { border-right: 1px solid rgba(255,255,255,0.06) !important; } /* Even-row zebra (base `.dark .fi-ta tbody tr:nth-child(even) td`, 0,3,3) is excluded from card rows at its source (see ~L709), so a plain `.dark tr.ss-card-row > td` bg already governs both odd and even. */ .dark .fi-ta tbody tr.ss-card-row:hover > td { background-color: #1e232b !important; border-color: rgba(255,255,255,0.14) !important; } /* Sign-shop neon: the stripe glows on hover in dark mode — a soft bleed off the accent itself, matching this theme's "fun, neon" character. */ .dark tr.ss-card-row:hover > td:first-child::before { box-shadow: 0 0 6px 1px var(--stripe-color, transparent); } /* ── LIGHT colours ─────────────────────────────────────────────────────── Light base rules are already `html:not(.dark)`-prefixed, so these out-specify them without extra weight. Light stays "professional": brightness bump on the stripe but NO glow. */ html:not(.dark) tr.ss-card-row > td { background: #fff !important; border-top: 1px solid #E5E7EB !important; border-bottom: 1px solid #E5E7EB !important; border-left: none !important; border-right: none !important; } html:not(.dark) tr.ss-card-row > td:first-child { border-left: 1px solid #E5E7EB !important; } html:not(.dark) tr.ss-card-row > td:last-child { border-right: 1px solid #E5E7EB !important; } html:not(.dark) .fi-ta tbody tr.ss-card-row:hover > td { background-color: rgba(15,98,254,0.05) !important; border-color: #C4CBD4 !important; } }