/* ========================================================================== FSM — Modern theme Single-file visual refresh layered on top of Bootstrap 5 + main.css. Light is the default. Dark mode activates with [data-theme="dark"] on . Bootstrap's native dark mode is also engaged via data-bs-theme="dark". ========================================================================== */ /* -------- Tokens: light -------- */ :root { --fsm-font-sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --fsm-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; /* Brand — the app's identity blue, used for sidebar active state, buttons, etc. */ --fsm-brand: #1E398D; --fsm-brand-hover: #16307a; --fsm-brand-soft: rgba(30, 57, 141, 0.10); --fsm-bg: #F6F8FB; --fsm-surface: #FFFFFF; --fsm-surface-2: #F1F5F9; --fsm-surface-3: #E2E8F0; --fsm-border: #E5E9F0; --fsm-border-strong:#CBD5E1; --fsm-text: #0F172A; --fsm-text-muted: #64748B; --fsm-text-soft: #94A3B8; --fsm-primary: #2563EB; --fsm-primary-hover: #1D4ED8; --fsm-primary-soft: rgba(37, 99, 235, 0.10); --fsm-primary-ring: rgba(37, 99, 235, 0.25); --fsm-success: #059669; --fsm-success-soft: rgba(16, 185, 129, 0.12); --fsm-warning: #D97706; --fsm-warning-soft: rgba(245, 158, 11, 0.14); --fsm-danger: #DC2626; --fsm-danger-soft: rgba(239, 68, 68, 0.12); --fsm-info: #0891B2; --fsm-info-soft: rgba(14, 165, 233, 0.12); --fsm-radius-sm: 8px; --fsm-radius: 12px; --fsm-radius-lg: 16px; --fsm-radius-xl: 20px; --fsm-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --fsm-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --fsm-shadow: 0 4px 14px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.03); --fsm-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.04); --fsm-sidebar-bg: #FFFFFF; --fsm-sidebar-text: #475569; --fsm-sidebar-active-bg: var(--fsm-primary); --fsm-sidebar-active-text: #FFFFFF; --fsm-sidebar-hover-bg: var(--fsm-primary-soft); --fsm-table-header-bg: #F1F5F9; --fsm-table-row-bg: #FFFFFF; --fsm-table-row-alt: #FAFBFD; --fsm-table-row-hover: rgba(37, 99, 235, 0.04); } /* -------- Tokens: dark -------- */ [data-theme="dark"] { /* Bridge legacy variables from base/global.css so old CSS rules using var(--sidebar-bg), var(--text-color), etc. switch with the theme. */ --sidebar-bg: #0F172A; --background-color: #0B1220; --secondary-color: #111827; --text-color: #E5EBF5; --primary-color: #94A3B8; --fsm-bg: #0B1220; --fsm-surface: #111827; --fsm-surface-2: #1A2436; --fsm-surface-3: #233149; --fsm-border: #1F2A3D; --fsm-border-strong:#2A3950; --fsm-text: #E5EBF5; --fsm-text-muted: #94A3B8; --fsm-text-soft: #64748B; --fsm-primary: #60A5FA; --fsm-primary-hover: #3B82F6; --fsm-primary-soft: rgba(96, 165, 250, 0.14); --fsm-primary-ring: rgba(96, 165, 250, 0.30); --fsm-success: #34D399; --fsm-success-soft: rgba(52, 211, 153, 0.16); --fsm-warning: #FBBF24; --fsm-warning-soft: rgba(251, 191, 36, 0.18); --fsm-danger: #F87171; --fsm-danger-soft: rgba(248, 113, 113, 0.18); --fsm-info: #38BDF8; --fsm-info-soft: rgba(56, 189, 248, 0.16); --fsm-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --fsm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.20); --fsm-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.25); --fsm-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.30); --fsm-sidebar-bg: #0F172A; --fsm-sidebar-text: #94A3B8; --fsm-sidebar-active-bg: var(--fsm-primary); --fsm-sidebar-active-text: #0B1220; --fsm-sidebar-hover-bg: var(--fsm-primary-soft); --fsm-table-header-bg: #1A2436; --fsm-table-row-bg: #111827; --fsm-table-row-alt: #0F172A; --fsm-table-row-hover: rgba(96, 165, 250, 0.08); } /* ========================================================================== Base ========================================================================== */ html { color-scheme: light; } [data-theme="dark"] html, html[data-theme="dark"] { color-scheme: dark; } body { font-family: var(--fsm-font-sans) !important; background-color: var(--fsm-bg) !important; color: var(--fsm-text) !important; font-size: 0.9375rem; line-height: 1.65; font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 200ms ease, color 200ms ease; } h1, h2, h3, h4, h5, h6 { color: var(--fsm-text) !important; letter-spacing: -0.011em; line-height: 1.25; margin-bottom: 0.5rem; } h1 { font-weight: 700; letter-spacing: -0.022em; line-height: 1.15; } h2 { font-weight: 700; letter-spacing: -0.018em; line-height: 1.2; } h3 { font-weight: 650; line-height: 1.25; } h4, h5, h6 { font-weight: 600; line-height: 1.3; } p { margin-bottom: 0.75rem; } p:last-child { margin-bottom: 0; } a { color: var(--fsm-primary); } a:hover { color: var(--fsm-primary-hover); } .text-muted { color: var(--fsm-text-muted) !important; } ::selection { background: var(--fsm-primary-soft); color: var(--fsm-text); } /* Better focus rings everywhere */ :focus-visible { outline: 2px solid var(--fsm-primary-ring); outline-offset: 2px; border-radius: 4px; } /* ========================================================================== Cards ========================================================================== */ .card { background-color: var(--fsm-surface) !important; border: 1px solid var(--fsm-border) !important; border-radius: var(--fsm-radius) !important; box-shadow: var(--fsm-shadow-sm) !important; color: var(--fsm-text); transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease; } .card:hover { box-shadow: var(--fsm-shadow); } .card-header { background-color: transparent !important; border-bottom: 1px solid var(--fsm-border) !important; padding: 1rem 1.25rem; font-weight: 600; } .card-body { padding: 1.25rem; } .card-footer { background-color: transparent !important; border-top: 1px solid var(--fsm-border) !important; } /* ========================================================================== Buttons ========================================================================== */ .btn { --bs-btn-padding-y: .5rem; --bs-btn-padding-x: 1rem; --bs-btn-font-weight: 550; --bs-btn-border-radius: var(--fsm-radius-sm); transition: transform 80ms ease, box-shadow 200ms ease, background-color 150ms ease, border-color 150ms ease, color 150ms ease; letter-spacing: -0.005em; } .btn-sm { --bs-btn-padding-y: .35rem; --bs-btn-padding-x: .75rem; } .btn-lg { --bs-btn-padding-y: .65rem; --bs-btn-padding-x: 1.25rem; } .btn:active { transform: translateY(1px); } .btn:focus-visible { box-shadow: 0 0 0 4px var(--fsm-primary-ring) !important; } .btn-primary { --bs-btn-bg: var(--fsm-primary) !important; --bs-btn-border-color: var(--fsm-primary) !important; --bs-btn-hover-bg: var(--fsm-primary-hover) !important; --bs-btn-hover-border-color: var(--fsm-primary-hover) !important; --bs-btn-active-bg: var(--fsm-primary-hover) !important; --bs-btn-active-border-color: var(--fsm-primary-hover) !important; --bs-btn-color: #fff !important; --bs-btn-hover-color: #fff !important; box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 1px 0 rgba(255, 255, 255, .15) inset; } .btn-outline-primary { --bs-btn-color: var(--fsm-primary) !important; --bs-btn-border-color: var(--fsm-border-strong) !important; --bs-btn-hover-color: #fff !important; --bs-btn-hover-bg: var(--fsm-primary) !important; --bs-btn-hover-border-color: var(--fsm-primary) !important; } .btn-secondary { --bs-btn-bg: var(--fsm-surface-2) !important; --bs-btn-color: var(--fsm-text) !important; --bs-btn-border-color: var(--fsm-border) !important; --bs-btn-hover-bg: var(--fsm-surface-3) !important; --bs-btn-hover-color: var(--fsm-text) !important; --bs-btn-hover-border-color: var(--fsm-border-strong) !important; } .btn-danger { --bs-btn-bg: var(--fsm-danger) !important; --bs-btn-border-color: var(--fsm-danger) !important; --bs-btn-hover-bg: #B91C1C !important; --bs-btn-hover-border-color: #B91C1C !important; } .btn-success { --bs-btn-bg: var(--fsm-success) !important; --bs-btn-border-color: var(--fsm-success) !important; --bs-btn-hover-bg: #047857 !important; --bs-btn-hover-border-color: #047857 !important; } .btn-outline-danger { --bs-btn-color: var(--fsm-danger) !important; --bs-btn-border-color: var(--fsm-border-strong) !important; --bs-btn-hover-bg: var(--fsm-danger) !important; --bs-btn-hover-border-color: var(--fsm-danger) !important; } /* ========================================================================== Forms ========================================================================== */ .form-control, .form-select { background-color: var(--fsm-surface) !important; border: 1px solid var(--fsm-border) !important; color: var(--fsm-text) !important; border-radius: var(--fsm-radius-sm) !important; padding: .55rem .8rem; transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease; } .form-control::placeholder { color: var(--fsm-text-soft); } .form-control:focus, .form-select:focus { border-color: var(--fsm-primary) !important; box-shadow: 0 0 0 4px var(--fsm-primary-ring) !important; background-color: var(--fsm-surface) !important; color: var(--fsm-text) !important; } .form-label { font-weight: 550; color: var(--fsm-text); margin-bottom: .35rem; } .form-text { color: var(--fsm-text-muted); } .form-check-input { border-color: var(--fsm-border-strong); background-color: var(--fsm-surface); } .form-check-input:checked { background-color: var(--fsm-primary); border-color: var(--fsm-primary); } .form-check-input:focus { border-color: var(--fsm-primary); box-shadow: 0 0 0 4px var(--fsm-primary-ring); } .input-group-text { background-color: var(--fsm-surface-2) !important; border-color: var(--fsm-border) !important; color: var(--fsm-text-muted) !important; } /* Dark-mode overrides for these — Bootstrap's data-bs-theme catches most, this picks up the rest */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: var(--fsm-surface-2) !important; color: var(--fsm-text) !important; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: var(--fsm-surface-2) !important; } /* ========================================================================== Tables ========================================================================== */ .table { color: var(--fsm-text) !important; --bs-table-bg: transparent !important; --bs-table-color: var(--fsm-text) !important; --bs-table-border-color: var(--fsm-border) !important; border-collapse: separate; border-spacing: 0; } .table thead th { background-color: var(--fsm-table-header-bg) !important; color: var(--fsm-text) !important; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.01em; text-transform: uppercase; border-bottom: 1px solid var(--fsm-border) !important; padding: 0.75rem 1rem; } .table tbody td { background-color: var(--fsm-table-row-bg); border-top: 1px solid var(--fsm-border) !important; border-bottom: none !important; padding: 0.75rem 1rem; vertical-align: middle; } .table-bordered, .table-bordered th, .table-bordered td { border-color: var(--fsm-border) !important; } .table-hover tbody tr:hover td, .table tbody tr:hover td { background-color: var(--fsm-table-row-hover) !important; } .table tbody tr.editUser, .table tbody tr.job-row { cursor: pointer; } /* Teams page custom table layout — keep its rounded-row look but theme it */ div#teamsTable .table { border-spacing: 0px 4px; } div#teamsTable thead { background-color: transparent; } div#teamsTable thead th { background-color: var(--fsm-table-header-bg) !important; border: none !important; font-weight: 600; } div#teamsTable thead th:not(th:last-child), div#teamsTable td:not(td:last-child) { border-right: 1px solid var(--fsm-border) !important; } div#teamsTable td { background-color: var(--fsm-surface) !important; border: none !important; } /* ========================================================================== Badges ========================================================================== */ .badge { font-weight: 550; letter-spacing: 0.01em; border-radius: 999px; padding: 0.32em 0.7em; } .badge.bg-info { background-color: var(--fsm-info-soft) !important; color: var(--fsm-info) !important; } .badge.bg-success { background-color: var(--fsm-success-soft) !important; color: var(--fsm-success) !important; } .badge.bg-warning { background-color: var(--fsm-warning-soft) !important; color: var(--fsm-warning) !important; } .badge.bg-danger { background-color: var(--fsm-danger-soft) !important; color: var(--fsm-danger) !important; } .badge.bg-secondary { background-color: var(--fsm-surface-2) !important; color: var(--fsm-text-muted) !important; } .badge.bg-primary { background-color: var(--fsm-primary-soft) !important; color: var(--fsm-primary) !important; } /* ========================================================================== Sidebar ========================================================================== */ aside .sidebar, aside div.sidebar.shadow-sm, aside div.sidebar.shadow-sm.d-none.d-lg-flex { background-color: var(--fsm-sidebar-bg) !important; border-right: 1px solid var(--fsm-border); box-shadow: none !important; /* Override legacy rules that pushed huge gaps when the footer was removed: sidebar.css has `padding-top: 2rem` and `justify-content: space-around !important` */ padding-top: 0 !important; padding-bottom: 0 !important; justify-content: flex-start !important; align-content: flex-start !important; flex-wrap: nowrap !important; gap: 0 !important; } aside .sidebar .brand { aspect-ratio: auto !important; padding: 1.5rem 1rem 1rem !important; margin: 0 !important; border-bottom: 1px solid var(--fsm-border); display: flex !important; align-items: center; justify-content: center; flex-shrink: 0; } aside .sidebar .brand a { display: inline-flex; align-items: center; } aside .sidebar .brand img { max-height: 38px; width: auto; object-fit: contain; } /* Push the sidebar's nav scroll area down so it begins below the brand row, matching where main content begins below the app bar. */ aside .sidebar nav.nav { max-height: calc(100vh - 180px) !important; margin-top: 0.5rem; } aside .sidebar nav .nav-link { color: var(--fsm-sidebar-text) !important; font-weight: 500; font-size: 0.92rem; padding: 0.55rem 0.85rem !important; margin: 2px 12px; border-radius: var(--fsm-radius-sm); display: flex; align-items: center; gap: 0.7rem; line-height: 1.2; transition: background-color 120ms ease, color 120ms ease; } aside .sidebar nav { padding-top: 0.5rem; } aside .sidebar nav .nav-link svg { width: 18px; height: 18px; flex-shrink: 0; } aside .sidebar nav .nav-link svg path, aside .sidebar nav .nav-link svg circle, aside .sidebar nav .nav-link svg rect { fill: currentColor; stroke: currentColor; } aside .sidebar nav .nav-link:hover { background-color: var(--fsm-sidebar-hover-bg) !important; color: var(--fsm-primary) !important; } aside .sidebar nav .nav-link.active { background-color: var(--fsm-sidebar-active-bg) !important; color: var(--fsm-sidebar-active-text) !important; box-shadow: 0 4px 12px var(--fsm-primary-ring); } aside .sidebar .usr-meta .fw-semibold { color: var(--fsm-text); } aside .sidebar .usr-meta small a { color: var(--fsm-text-muted); } /* ========================================================================== Theme toggle button ========================================================================== */ .fsm-theme-toggle { appearance: none; -webkit-appearance: none; background: var(--fsm-surface-2); border: 1px solid var(--fsm-border); color: var(--fsm-text); width: 36px; height: 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease; } .fsm-theme-toggle:hover { background: var(--fsm-surface-3); border-color: var(--fsm-border-strong); } .fsm-theme-toggle:active { transform: scale(0.95); } .fsm-theme-toggle svg { width: 18px; height: 18px; transition: transform 250ms cubic-bezier(.34,1.56,.64,1), opacity 200ms ease; } .fsm-theme-toggle .icon-sun { display: none; } .fsm-theme-toggle .icon-moon { display: block; } [data-theme="dark"] .fsm-theme-toggle .icon-sun { display: block; } [data-theme="dark"] .fsm-theme-toggle .icon-moon { display: none; } /* Floating placement only used on login.php (no sidebar / no app bar). */ .fsm-theme-toggle-floating { position: fixed; top: 14px; right: 14px; z-index: 1050; box-shadow: var(--fsm-shadow); } /* ========================================================================== Top app bar — sticky, sits at top of .main-content for all authed pages ========================================================================== */ .fsm-appbar { position: sticky; top: 0; z-index: 100; height: 72px !important; min-height: 72px; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 1rem; padding: 0 1.25rem !important; background-color: color-mix(in srgb, var(--fsm-bg) 88%, transparent); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--fsm-border); margin: -1.5rem -2rem 1.5rem; } .fsm-appbar > * { align-self: center; } .fsm-appbar__right > * { align-self: center; } @media (max-width: 991px) { .fsm-appbar { margin: -4.5rem -1rem 1rem; padding: 0 0.75rem; } } .fsm-appbar__left, .fsm-appbar__right { display: flex; align-items: center; gap: 0.5rem; min-width: 0; } .fsm-appbar__title { font-size: 1rem; font-weight: 600; letter-spacing: -0.005em; color: var(--fsm-text-muted); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (min-width: 992px) { /* Desktop: page bodies have their own .fsm-page-header h1; keep the app-bar title subtle so it doesn't double-up. */ .fsm-appbar__title { display: none; } } .fsm-appbar__menu-btn { appearance: none; background: transparent; border: none; color: var(--fsm-text); width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; } .fsm-appbar__menu-btn:hover { background: var(--fsm-surface-2); } /* Round icon buttons inside appbar (theme toggle + bell). */ .fsm-appbar .fsm-theme-toggle, .fsm-appbar__icon { appearance: none; background: transparent; border: 1px solid transparent; width: 38px; height: 38px; border-radius: 999px; color: var(--fsm-text-muted); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; position: relative; } .fsm-appbar .fsm-theme-toggle:hover, .fsm-appbar__icon:hover { background: var(--fsm-surface-2); color: var(--fsm-text); border-color: var(--fsm-border); } .fsm-appbar__icon-wrap { position: relative; } .fsm-appbar__badge { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--fsm-danger); color: #fff; font-size: 10px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; line-height: 1; border: 2px solid var(--fsm-bg); } /* User menu */ .fsm-appbar__user-btn { appearance: none; background: transparent; border: 1px solid transparent; border-radius: 999px; padding: 0 12px 0 4px; height: 38px; display: inline-flex; align-items: center; gap: 0.5rem; color: var(--fsm-text); cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease; line-height: 1; } .fsm-appbar__user-btn:hover { background: var(--fsm-surface-2); border-color: var(--fsm-border); } .fsm-appbar__avatar { width: 30px; height: 30px; border-radius: 999px; object-fit: cover; flex-shrink: 0; background: var(--fsm-surface-2); } .fsm-appbar__avatar--initials { display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; color: var(--fsm-primary); background: var(--fsm-primary-soft); letter-spacing: -0.01em; } .fsm-appbar__user-name { font-weight: 550; font-size: 0.9rem; color: var(--fsm-text); max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Notif dropdown narrower in appbar context */ .fsm-appbar .dropdown-menu { margin-top: 0.5rem !important; } /* ========================================================================== Modals, dropdowns, alerts ========================================================================== */ .modal-content { background-color: var(--fsm-surface) !important; border: 1px solid var(--fsm-border) !important; border-radius: var(--fsm-radius-lg) !important; box-shadow: var(--fsm-shadow-lg) !important; color: var(--fsm-text); } .modal-header { border-bottom: 1px solid var(--fsm-border) !important; } .modal-footer { border-top: 1px solid var(--fsm-border) !important; } .dropdown-menu { background-color: var(--fsm-surface) !important; border: 1px solid var(--fsm-border) !important; box-shadow: var(--fsm-shadow) !important; border-radius: var(--fsm-radius-sm) !important; } .dropdown-item { color: var(--fsm-text) !important; } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--fsm-surface-2) !important; color: var(--fsm-text) !important; } .alert { border-radius: var(--fsm-radius); border: 1px solid var(--fsm-border); } .alert-info { background-color: var(--fsm-info-soft) !important; color: var(--fsm-info) !important; border-color: transparent !important; } .alert-success { background-color: var(--fsm-success-soft) !important; color: var(--fsm-success) !important; border-color: transparent !important; } .alert-warning { background-color: var(--fsm-warning-soft) !important; color: var(--fsm-warning) !important; border-color: transparent !important; } .alert-danger { background-color: var(--fsm-danger-soft) !important; color: var(--fsm-danger) !important; border-color: transparent !important; } /* ========================================================================== Tabs ========================================================================== */ .nav-tabs { border-bottom: 1px solid var(--fsm-border); gap: 4px; } .nav-tabs .nav-link { color: var(--fsm-text-muted); border: none !important; background: transparent !important; border-radius: var(--fsm-radius-sm) var(--fsm-radius-sm) 0 0 !important; padding: 0.6rem 1rem; font-weight: 550; position: relative; transition: color 150ms ease; } .nav-tabs .nav-link:hover { color: var(--fsm-text); } .nav-tabs .nav-link.active { color: var(--fsm-primary) !important; background: transparent !important; } .nav-tabs .nav-link.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--fsm-primary); border-radius: 2px; } /* ========================================================================== Pagination ========================================================================== */ .pagination { --bs-pagination-color: var(--fsm-text-muted); --bs-pagination-bg: var(--fsm-surface); --bs-pagination-border-color: var(--fsm-border); --bs-pagination-hover-color: var(--fsm-primary); --bs-pagination-hover-bg: var(--fsm-primary-soft); --bs-pagination-hover-border-color: var(--fsm-border); --bs-pagination-active-color: #fff; --bs-pagination-active-bg: var(--fsm-primary); --bs-pagination-active-border-color: var(--fsm-primary); gap: 4px; } .pagination .page-link { border-radius: var(--fsm-radius-sm) !important; border: 1px solid var(--fsm-border) !important; margin: 0; padding: 0.4rem 0.75rem; font-weight: 500; } .pagination .page-item.active .page-link { box-shadow: 0 2px 8px var(--fsm-primary-ring); } /* ========================================================================== Misc / dashboard / kpi cards ========================================================================== */ .search-wrapper { background-color: transparent !important; padding: 0.75rem 0 !important; } input#searchInput, input#searchBar, select#pageLimit, select#perPage { background-color: var(--fsm-surface) !important; color: var(--fsm-text) !important; border-color: var(--fsm-border) !important; } /* Soft hr */ hr { border-color: var(--fsm-border); opacity: 0.6; } /* Bootstrap utility colors that pages still use */ .bg-light { background-color: var(--fsm-surface-2) !important; } .text-bg-light { background-color: var(--fsm-surface-2) !important; color: var(--fsm-text) !important; } .border { border-color: var(--fsm-border) !important; } /* Status filter tab body — pages use a status-* class on jobsTableBox */ #jobsTableBox, #teamsTable { background: transparent !important; } /* Notification rules tag-box */ .tag-box { background-color: var(--fsm-surface) !important; border: 1px solid var(--fsm-border) !important; border-radius: var(--fsm-radius-sm) !important; } .tag-box .tag-input { background: transparent !important; color: var(--fsm-text) !important; } .tag-box .tag-pill, .tag-box .badge { background: var(--fsm-primary-soft) !important; color: var(--fsm-primary) !important; } /* ========================================================================== Notification icon (header bell) ========================================================================== */ #notification-icon, .notification-icon { background: var(--fsm-surface) !important; border: 1px solid var(--fsm-border) !important; color: var(--fsm-text) !important; } /* Dark-mode small touch-ups for things Bootstrap doesn't catch */ [data-theme="dark"] .text-dark { color: var(--fsm-text) !important; } [data-theme="dark"] .bg-white { background-color: var(--fsm-surface) !important; } [data-theme="dark"] .border-end, [data-theme="dark"] .border-start, [data-theme="dark"] .border-top, [data-theme="dark"] .border-bottom { border-color: var(--fsm-border) !important; } /* SVGs that come in inline (sidebar icons) — make sure they pick up currentColor */ aside .sidebar nav .nav-link svg [fill]:not([fill="none"]) { fill: currentColor; } aside .sidebar nav .nav-link svg [stroke]:not([stroke="none"]) { stroke: currentColor; } /* ========================================================================== App layout — kill the gap between sidebar (position:fixed) and content ========================================================================== */ body > .container-fluid, .container-fluid:has(> aside) { padding-left: 0 !important; padding-right: 0 !important; } /* Sidebar width is 250px (from legacy sidebar.css). Main content sits to its right with no gap. On mobile the sidebar is offcanvas, so margin is 0. */ @media (min-width: 992px) { aside .sidebar.d-lg-flex { width: 250px !important; position: fixed !important; left: 0; top: 0; height: 100vh !important; } .main-content { margin-left: 250px !important; padding: 1.5rem 2rem 3rem !important; background-color: var(--fsm-bg) !important; min-height: 100vh; } /* Reserve room at top so floating toggle (top:16px right:90px) and notification bell don't overlap the page heading. */ .fsm-page-header { padding-top: 0.25rem; } } @media (max-width: 991px) { .main-content { margin-left: 0 !important; padding: 4.5rem 1rem 2rem !important; /* leave space for mobile menu + toggle */ background-color: var(--fsm-bg) !important; min-height: 100vh; } } /* Drop the legacy hardcoded #FAFAFB so dark mode works */ .main-content { background-color: var(--fsm-bg) !important; color: var(--fsm-text); } /* ========================================================================== Override embedded page styles that don't respect tokens (these were inlined into