/* ========================================================================== FlexCore — application theme Layered over Bootstrap 5.3. Everything is driven by CSS custom properties so white-labelling only overrides --fc-primary at runtime. Dark mode uses a [data-theme="dark"] attribute on rather than a media query alone, because the user's explicit choice must beat the OS preference. ========================================================================== */ /* -------------------------------------------------------------------------- Typeface — self-hosted so it works offline and there is no FOUT from a CDN -------------------------------------------------------------------------- */ @font-face { font-family: 'Inter'; src: url('../fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/inter-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/inter-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('../fonts/inter-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } :root { --fc-primary: #4f46e5; --fc-primary-rgb: 79, 70, 229; --fc-accent: #0ea5e9; /* Warm-neutral greys rather than blue-greys — reads calmer and less "admin panel". */ --fc-bg: #fafafa; --fc-surface: #ffffff; --fc-surface-2: #f7f7f8; --fc-surface-3: #f0f0f2; --fc-sidebar: #ffffff; --fc-sidebar-hover: #f4f4f5; --fc-sidebar-text: #52525b; --fc-sidebar-muted: #a1a1aa; --fc-sidebar-active-bg: rgba(var(--fc-primary-rgb), .09); --fc-sidebar-active: var(--fc-primary); --fc-text: #18181b; --fc-text-muted: #71717a; --fc-text-subtle: #a1a1aa; --fc-border: #e4e4e7; --fc-border-soft: #f0f0f2; --fc-success: #16a34a; --fc-warning: #d97706; --fc-danger: #dc2626; --fc-info: #0284c7; --fc-radius-sm: 8px; --fc-radius: 12px; --fc-radius-lg: 16px; --fc-radius-xl: 22px; --fc-shadow-xs: 0 1px 2px rgba(24, 24, 27, .04); --fc-shadow-sm: 0 1px 3px rgba(24, 24, 27, .06), 0 1px 2px rgba(24, 24, 27, .03); --fc-shadow: 0 4px 16px -2px rgba(24, 24, 27, .07), 0 2px 6px -2px rgba(24, 24, 27, .04); --fc-shadow-lg: 0 16px 40px -8px rgba(24, 24, 27, .12), 0 6px 14px -6px rgba(24, 24, 27, .06); --fc-sidebar-w: 252px; --fc-topbar-h: 60px; --fc-ease: cubic-bezier(.32, .72, 0, 1); } [data-theme="dark"] { --fc-bg: #09090b; --fc-surface: #131316; --fc-surface-2: #1a1a1e; --fc-surface-3: #232328; --fc-sidebar: #0d0d0f; --fc-sidebar-hover: #1a1a1e; --fc-sidebar-text: #a1a1aa; --fc-sidebar-muted: #52525b; --fc-sidebar-active-bg: rgba(var(--fc-primary-rgb), .16); --fc-sidebar-active: #a5b4fc; --fc-text: #fafafa; --fc-text-muted: #a1a1aa; --fc-text-subtle: #71717a; --fc-border: #27272a; --fc-border-soft: #1f1f23; --fc-shadow-xs: 0 1px 2px rgba(0, 0, 0, .4); --fc-shadow-sm: 0 1px 3px rgba(0, 0, 0, .5); --fc-shadow: 0 4px 16px -2px rgba(0, 0, 0, .6); --fc-shadow-lg: 0 16px 44px -8px rgba(0, 0, 0, .75); } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--fc-bg); color: var(--fc-text); font-size: .875rem; line-height: 1.6; letter-spacing: -.011em; transition: background-color .2s var(--fc-ease), color .2s var(--fc-ease); } h1, h2, h3, h4, h5, h6 { color: var(--fc-text); font-weight: 600; letter-spacing: -.021em; } a { color: var(--fc-primary); text-decoration: none; } a:hover { color: var(--fc-primary); text-decoration: underline; text-underline-offset: 3px; } hr { border-color: var(--fc-border); opacity: 1; } ::selection { background: rgba(var(--fc-primary-rgb), .16); } /* Numeric columns must be tabular or they cannot be scanned down a column. */ .tabular, .table td.num, .table th.num, .stat-value, .money { font-variant-numeric: tabular-nums; } :focus-visible { outline: 2px solid var(--fc-primary); outline-offset: 2px; border-radius: 6px; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--fc-border); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--fc-text-subtle); background-clip: content-box; } /* -------------------------------------------------------------------------- Layout shell -------------------------------------------------------------------------- */ .fc-sidebar { position: fixed; inset: 0 auto 0 0; width: var(--fc-sidebar-w); background: var(--fc-sidebar); border-right: 1px solid var(--fc-border); display: flex; flex-direction: column; z-index: 1040; transition: transform .3s var(--fc-ease); } .fc-brand { height: var(--fc-topbar-h); display: flex; align-items: center; gap: .65rem; padding: 0 1rem; flex-shrink: 0; } .fc-brand-mark { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(140deg, var(--fc-primary), var(--fc-accent)); color: #fff; font-weight: 700; font-size: .9rem; flex-shrink: 0; overflow: hidden; box-shadow: 0 2px 8px -1px rgba(var(--fc-primary-rgb), .45); } .fc-brand-mark img { width: 100%; height: 100%; object-fit: cover; } .fc-brand-text { min-width: 0; } .fc-brand-name { font-weight: 600; font-size: .875rem; letter-spacing: -.02em; color: var(--fc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; } .fc-brand-sub { font-size: .688rem; color: var(--fc-text-subtle); line-height: 1.3; } .fc-nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: .25rem .625rem 1.5rem; } .fc-nav-section { font-size: .688rem; font-weight: 500; letter-spacing: .01em; color: var(--fc-text-subtle); padding: 1rem .625rem .3rem; } .fc-nav-section:first-child { padding-top: .5rem; } .fc-nav-link { display: flex; align-items: center; gap: .625rem; padding: .5rem .625rem; margin-bottom: 2px; border-radius: var(--fc-radius-sm); color: var(--fc-sidebar-text); font-size: .8125rem; font-weight: 450; transition: background-color .12s var(--fc-ease), color .12s var(--fc-ease); position: relative; } .fc-nav-link:hover { background: var(--fc-sidebar-hover); color: var(--fc-text); text-decoration: none; } .fc-nav-link.active { background: var(--fc-sidebar-active-bg); color: var(--fc-sidebar-active); font-weight: 550; } .fc-nav-link.active i { color: var(--fc-sidebar-active); } .fc-nav-link i { width: 16px; text-align: center; font-size: .8125rem; flex-shrink: 0; color: var(--fc-sidebar-muted); transition: color .12s; } .fc-nav-link:hover i { color: var(--fc-text-muted); } .fc-nav-link .badge { margin-left: auto; font-size: .625rem; padding: .15em .4em; } .fc-main { margin-left: var(--fc-sidebar-w); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left .3s var(--fc-ease); } .fc-topbar { height: var(--fc-topbar-h); background: rgba(255, 255, 255, .72); border-bottom: 1px solid var(--fc-border); display: flex; align-items: center; gap: .625rem; padding: 0 1.25rem; position: sticky; top: 0; z-index: 1030; backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); } [data-theme="dark"] .fc-topbar { background: rgba(19, 19, 22, .72); } .fc-content { padding: 1.5rem; flex: 1; max-width: 1560px; width: 100%; } @media (min-width: 1400px) { .fc-content { padding: 1.75rem 2rem; } } body.fc-collapsed .fc-sidebar { transform: translateX(-100%); } body.fc-collapsed .fc-main { margin-left: 0; } @media (max-width: 991.98px) { .fc-sidebar { transform: translateX(-100%); box-shadow: var(--fc-shadow-lg); } body.fc-sidebar-open .fc-sidebar { transform: translateX(0); } .fc-main { margin-left: 0; } .fc-content { padding: 1rem; } .fc-backdrop { position: fixed; inset: 0; background: rgba(9, 9, 11, .5); z-index: 1035; opacity: 0; pointer-events: none; transition: opacity .25s; backdrop-filter: blur(2px); } body.fc-sidebar-open .fc-backdrop { opacity: 1; pointer-events: auto; } } /* -------------------------------------------------------------------------- Cards -------------------------------------------------------------------------- */ .card { background: var(--fc-surface); border: 1px solid var(--fc-border); border-radius: var(--fc-radius-lg); box-shadow: var(--fc-shadow-xs); } .card-header { background: transparent; border-bottom: 1px solid var(--fc-border-soft); padding: .875rem 1.125rem; font-weight: 600; display: flex; align-items: center; gap: .5rem; border-radius: var(--fc-radius-lg) var(--fc-radius-lg) 0 0; } .card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6 { margin: 0; font-size: .875rem; letter-spacing: -.015em; } .card-body { padding: 1.125rem; } .card-footer { background: var(--fc-surface-2); border-top: 1px solid var(--fc-border-soft); padding: .75rem 1.125rem; border-radius: 0 0 var(--fc-radius-lg) var(--fc-radius-lg); } .card-hover { transition: transform .2s var(--fc-ease), box-shadow .2s var(--fc-ease), border-color .2s var(--fc-ease); } .card-hover:hover { transform: translateY(-2px); box-shadow: var(--fc-shadow); border-color: var(--fc-text-subtle); } .glass { background: rgba(255, 255, 255, .78); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(255, 255, 255, .6); } [data-theme="dark"] .glass { background: rgba(19, 19, 22, .78); border-color: rgba(255, 255, 255, .06); } /* -------------------------------------------------------------------------- Stat tiles -------------------------------------------------------------------------- */ .stat { background: var(--fc-surface); border: 1px solid var(--fc-border); border-radius: var(--fc-radius-lg); padding: 1.125rem; display: flex; align-items: flex-start; gap: .875rem; box-shadow: var(--fc-shadow-xs); transition: transform .2s var(--fc-ease), box-shadow .2s var(--fc-ease); height: 100%; } .stat:hover { transform: translateY(-2px); box-shadow: var(--fc-shadow); } .stat-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: .9rem; flex-shrink: 0; } .stat-body { min-width: 0; flex: 1; } .stat-label { font-size: .75rem; font-weight: 500; color: var(--fc-text-muted); margin-bottom: .25rem; letter-spacing: -.005em; } .stat-value { font-size: 1.5rem; font-weight: 650; letter-spacing: -.035em; line-height: 1.15; } .stat-meta { font-size: .75rem; color: var(--fc-text-subtle); margin-top: .25rem; } .trend { font-size: .75rem; font-weight: 550; display: inline-flex; align-items: center; gap: .2rem; } .trend-up { color: var(--fc-success); } .trend-down { color: var(--fc-danger); } .trend-flat { color: var(--fc-text-subtle); } /* -------------------------------------------------------------------------- Tables -------------------------------------------------------------------------- */ .table { color: var(--fc-text); margin: 0; --bs-table-bg: transparent; } .table > :not(caption) > * > * { background: transparent; } .table thead th { background: var(--fc-surface-2); color: var(--fc-text-muted); font-size: .75rem; font-weight: 550; letter-spacing: -.005em; border-bottom: 1px solid var(--fc-border); padding: .625rem .875rem; white-space: nowrap; position: sticky; top: 0; z-index: 2; } .table tbody td { padding: .75rem .875rem; border-bottom: 1px solid var(--fc-border-soft); vertical-align: middle; } .table tbody tr:last-child td { border-bottom: 0; } .table tbody tr { transition: background-color .1s var(--fc-ease); } .table tbody tr:hover { background: var(--fc-surface-2); } .table-wrap { border: 1px solid var(--fc-border); border-radius: var(--fc-radius-lg); overflow: auto; /* wide tables scroll here, never the page body */ background: var(--fc-surface); box-shadow: var(--fc-shadow-xs); } .table-wrap .table thead th:first-child { border-top-left-radius: var(--fc-radius-lg); } .table-wrap .table thead th:last-child { border-top-right-radius: var(--fc-radius-lg); } a.table-sort { color: inherit; text-decoration: none; white-space: nowrap; } a.table-sort:hover { color: var(--fc-primary); text-decoration: none; } /* -------------------------------------------------------------------------- Badges -------------------------------------------------------------------------- */ .badge { font-weight: 550; font-size: .6875rem; padding: .3em .55em; border-radius: 6px; letter-spacing: -.005em; } .badge-soft-primary { background: rgba(var(--fc-primary-rgb), .1); color: var(--fc-primary); } .badge-soft-success { background: rgba(22, 163, 74, .1); color: var(--fc-success); } .badge-soft-warning { background: rgba(217, 119, 6, .11); color: var(--fc-warning); } .badge-soft-danger { background: rgba(220, 38, 38, .1); color: var(--fc-danger); } .badge-soft-info { background: rgba(2, 132, 199, .1); color: var(--fc-info); } .badge-soft-secondary { background: rgba(113, 113, 122, .11);color: var(--fc-text-muted); } .badge-soft-dark { background: rgba(24, 24, 27, .08); color: var(--fc-text); } [data-theme="dark"] .badge-soft-success { background: rgba(34, 197, 94, .15); color: #4ade80; } [data-theme="dark"] .badge-soft-warning { background: rgba(245, 158, 11, .15); color: #fbbf24; } [data-theme="dark"] .badge-soft-danger { background: rgba(248, 113, 113, .15);color: #f87171; } [data-theme="dark"] .badge-soft-info { background: rgba(56, 189, 248, .15); color: #38bdf8; } [data-theme="dark"] .badge-soft-secondary { background: rgba(161, 161, 170, .14);color: #a1a1aa; } [data-theme="dark"] .badge-soft-dark { background: rgba(228, 228, 231, .1); color: #d4d4d8; } /* -------------------------------------------------------------------------- Forms -------------------------------------------------------------------------- */ .form-label { font-size: .8125rem; font-weight: 500; color: var(--fc-text); margin-bottom: .3rem; } .form-label .req { color: var(--fc-danger); margin-left: .1rem; } .form-control, .form-select { background: var(--fc-surface); border: 1px solid var(--fc-border); border-radius: var(--fc-radius-sm); color: var(--fc-text); padding: .5rem .75rem; font-size: .875rem; box-shadow: var(--fc-shadow-xs); transition: border-color .13s var(--fc-ease), box-shadow .13s var(--fc-ease); } .form-control:focus, .form-select:focus { background: var(--fc-surface); border-color: var(--fc-primary); box-shadow: 0 0 0 3px rgba(var(--fc-primary-rgb), .12); color: var(--fc-text); } .form-control::placeholder { color: var(--fc-text-subtle); } .form-control:disabled, .form-control[readonly], .form-select:disabled { background: var(--fc-surface-2); color: var(--fc-text-muted); cursor: not-allowed; box-shadow: none; } .form-control.is-invalid, .form-select.is-invalid { border-color: var(--fc-danger); } .invalid-feedback { font-size: .75rem; } .form-text { font-size: .75rem; color: var(--fc-text-muted); margin-top: .25rem; } .input-group-text { background: var(--fc-surface-2); border-color: var(--fc-border); color: var(--fc-text-muted); font-size: .8125rem; } .form-check-input { border-color: var(--fc-border); } .form-check-input:checked { background-color: var(--fc-primary); border-color: var(--fc-primary); } .form-check-input:focus { box-shadow: 0 0 0 3px rgba(var(--fc-primary-rgb), .12); border-color: var(--fc-primary); } .form-check-label { font-size: .8125rem; } .form-switch .form-check-input { width: 2.1em; height: 1.15em; } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn { font-size: .8125rem; font-weight: 500; border-radius: var(--fc-radius-sm); padding: .5rem .875rem; letter-spacing: -.005em; transition: transform .08s var(--fc-ease), box-shadow .15s var(--fc-ease), background-color .15s var(--fc-ease), border-color .15s var(--fc-ease); display: inline-flex; align-items: center; justify-content: center; gap: .4rem; } .btn:active { transform: scale(.98); } .btn-sm { font-size: .78125rem; padding: .375rem .6875rem; border-radius: 7px; } .btn-lg { font-size: .9375rem; padding: .625rem 1.25rem; border-radius: var(--fc-radius); } .btn-light { background: var(--fc-surface); border-color: var(--fc-border); color: var(--fc-text); box-shadow: var(--fc-shadow-xs); } .btn-light:hover { background: var(--fc-surface-2); border-color: var(--fc-border); color: var(--fc-text); } .btn-outline-secondary { border-color: var(--fc-border); color: var(--fc-text-muted); } .btn-outline-secondary:hover { background: var(--fc-surface-2); border-color: var(--fc-border); color: var(--fc-text); } .btn-icon { width: 32px; height: 32px; padding: 0; border-radius: 8px; } /* -------------------------------------------------------------------------- Dropdowns / modals / offcanvas -------------------------------------------------------------------------- */ .dropdown-menu { background: var(--fc-surface); border: 1px solid var(--fc-border); border-radius: var(--fc-radius); box-shadow: var(--fc-shadow-lg); padding: .3rem; font-size: .8125rem; animation: fcFadeIn .14s var(--fc-ease); } .dropdown-item { border-radius: 7px; padding: .45rem .625rem; color: var(--fc-text); display: flex; align-items: center; gap: .55rem; } .dropdown-item:hover, .dropdown-item:focus { background: var(--fc-surface-2); color: var(--fc-text); } .dropdown-item.text-danger:hover { background: rgba(220, 38, 38, .09); color: var(--fc-danger); } .dropdown-item i { width: 15px; text-align: center; opacity: .65; } .dropdown-divider { border-color: var(--fc-border-soft); margin: .25rem 0; } .dropdown-header { font-size: .6875rem; color: var(--fc-text-subtle); font-weight: 550; padding: .4rem .625rem; } .modal-content { background: var(--fc-surface); border: 1px solid var(--fc-border); border-radius: var(--fc-radius-xl); box-shadow: var(--fc-shadow-lg); } .modal-header { border-bottom: 1px solid var(--fc-border-soft); padding: 1rem 1.25rem; } .modal-title { font-size: .9375rem; font-weight: 600; } .modal-body { padding: 1.25rem; } .modal-footer { border-top: 1px solid var(--fc-border-soft); padding: .8rem 1.25rem; } .offcanvas { background: var(--fc-surface); color: var(--fc-text); } @keyframes fcFadeIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- Command palette (⌘K) -------------------------------------------------------------------------- */ .fc-palette { position: fixed; inset: 0; z-index: 1080; background: rgba(9, 9, 11, .4); backdrop-filter: blur(4px); display: none; align-items: flex-start; justify-content: center; padding: 12vh 1rem 1rem; } .fc-palette.open { display: flex; } .fc-palette-box { width: 100%; max-width: 560px; background: var(--fc-surface); border: 1px solid var(--fc-border); border-radius: var(--fc-radius-lg); box-shadow: var(--fc-shadow-lg); overflow: hidden; animation: fcPaletteIn .16s var(--fc-ease); } @keyframes fcPaletteIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } } .fc-palette-input { width: 100%; border: 0; outline: 0; padding: 1rem 1.125rem; font-size: .9375rem; background: transparent; color: var(--fc-text); border-bottom: 1px solid var(--fc-border-soft); } .fc-palette-results { max-height: 340px; overflow-y: auto; padding: .375rem; } .fc-palette-item { display: flex; align-items: center; gap: .625rem; padding: .5rem .625rem; border-radius: var(--fc-radius-sm); color: var(--fc-text); font-size: .8125rem; cursor: pointer; } .fc-palette-item:hover, .fc-palette-item.active { background: var(--fc-surface-2); text-decoration: none; color: var(--fc-text); } .fc-palette-item i { width: 16px; text-align: center; color: var(--fc-text-subtle); } .fc-palette-group { font-size: .6875rem; color: var(--fc-text-subtle); padding: .5rem .625rem .25rem; font-weight: 550; } .fc-palette-foot { border-top: 1px solid var(--fc-border-soft); padding: .5rem .875rem; font-size: .6875rem; color: var(--fc-text-subtle); display: flex; gap: 1rem; } kbd { background: var(--fc-surface-2); border: 1px solid var(--fc-border); border-bottom-width: 2px; border-radius: 5px; padding: .1rem .3rem; font-size: .6875rem; font-family: inherit; color: var(--fc-text-muted); box-shadow: none; } /* -------------------------------------------------------------------------- Avatars -------------------------------------------------------------------------- */ .avatar { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(140deg, var(--fc-primary), var(--fc-accent)); color: #fff; font-weight: 600; font-size: .75rem; flex-shrink: 0; overflow: hidden; text-transform: uppercase; letter-spacing: -.01em; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar-sm { width: 28px; height: 28px; border-radius: 7px; font-size: .6875rem; } .avatar-lg { width: 48px; height: 48px; border-radius: 12px; font-size: 1rem; } .avatar-xl { width: 76px; height: 76px; border-radius: 18px; font-size: 1.5rem; } /* -------------------------------------------------------------------------- Empty state -------------------------------------------------------------------------- */ .empty-state { text-align: center; padding: 3rem 1.5rem; } .empty-state-icon { width: 56px; height: 56px; border-radius: 15px; margin: 0 auto 1rem; display: grid; place-items: center; font-size: 1.3rem; background: rgba(var(--fc-primary-rgb), .08); color: var(--fc-primary); } .empty-state h5 { font-size: .9375rem; margin-bottom: .35rem; } .empty-state p { color: var(--fc-text-muted); font-size: .8125rem; max-width: 380px; margin: 0 auto 1.125rem; } /* -------------------------------------------------------------------------- Page header, filters, pagination -------------------------------------------------------------------------- */ .page-head { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .page-title { font-size: 1.375rem; font-weight: 650; letter-spacing: -.03em; margin: 0; } .page-sub { color: var(--fc-text-muted); font-size: .8125rem; margin: .2rem 0 0; } .page-actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; } .breadcrumb { font-size: .75rem; margin-bottom: .35rem; } .breadcrumb-item, .breadcrumb-item a { color: var(--fc-text-subtle); } .breadcrumb-item.active { color: var(--fc-text-muted); } .filter-bar { background: var(--fc-surface); border: 1px solid var(--fc-border); border-radius: var(--fc-radius-lg); padding: .875rem; margin-bottom: 1rem; box-shadow: var(--fc-shadow-xs); } .pagination { margin: 0; gap: .2rem; } .page-link { border: 1px solid var(--fc-border); color: var(--fc-text-muted); border-radius: 8px !important; font-size: .8125rem; padding: .35rem .625rem; background: var(--fc-surface); } .page-link:hover { background: var(--fc-surface-2); color: var(--fc-text); border-color: var(--fc-border); } .page-item.active .page-link { background: var(--fc-primary); border-color: var(--fc-primary); color: #fff; } .page-item.disabled .page-link { background: var(--fc-surface); color: var(--fc-text-subtle); opacity: .5; } /* -------------------------------------------------------------------------- Timeline -------------------------------------------------------------------------- */ .timeline { position: relative; padding-left: 1.5rem; } .timeline::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1.5px; background: var(--fc-border); } .timeline-item { position: relative; padding-bottom: 1.125rem; } .timeline-item:last-child { padding-bottom: 0; } .timeline-dot { position: absolute; left: -1.5rem; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--fc-surface); border: 2px solid var(--fc-primary); } .timeline-time { font-size: .75rem; color: var(--fc-text-subtle); } /* -------------------------------------------------------------------------- Alerts, tabs, progress -------------------------------------------------------------------------- */ .alert { border: 1px solid transparent; border-radius: var(--fc-radius); font-size: .8125rem; padding: .75rem 1rem; } .alert-success { background: rgba(22, 163, 74, .07); color: var(--fc-success); border-color: rgba(22, 163, 74, .18); } .alert-danger { background: rgba(220, 38, 38, .07); color: var(--fc-danger); border-color: rgba(220, 38, 38, .18); } .alert-warning { background: rgba(217, 119, 6, .08); color: var(--fc-warning); border-color: rgba(217, 119, 6, .2); } .alert-info { background: rgba(2, 132, 199, .07); color: var(--fc-info); border-color: rgba(2, 132, 199, .18); } .nav-tabs { border-bottom: 1px solid var(--fc-border); gap: .125rem; } .nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--fc-text-muted); font-size: .8125rem; font-weight: 500; padding: .5rem .875rem; border-radius: 0; } .nav-tabs .nav-link:hover { border-bottom-color: var(--fc-border); color: var(--fc-text); } .nav-tabs .nav-link.active { background: transparent; color: var(--fc-primary); border-bottom-color: var(--fc-primary); } .progress { background: var(--fc-surface-3); border-radius: 100px; height: 6px; } .progress-bar { background: var(--fc-primary); border-radius: 100px; } .list-group-item { background: var(--fc-surface); border-color: var(--fc-border-soft); color: var(--fc-text); } .tooltip-inner { font-size: .75rem; border-radius: 7px; } /* -------------------------------------------------------------------------- Utilities -------------------------------------------------------------------------- */ .text-muted { color: var(--fc-text-muted) !important; } .text-subtle { color: var(--fc-text-subtle) !important; } .fs-xs { font-size: .75rem; } .fs-sm { font-size: .8125rem; } .fw-semi { font-weight: 550; } .border-soft { border-color: var(--fc-border-soft) !important; } .bg-surface { background: var(--fc-surface) !important; } .bg-surface-2 { background: var(--fc-surface-2) !important; } .cursor-pointer { cursor: pointer; } .min-w-0 { min-width: 0; } .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Impersonation banner — must be impossible to miss */ .impersonation-bar { background: linear-gradient(90deg, #b45309, #d97706); color: #fff; font-size: .78125rem; font-weight: 500; padding: .4rem 1.25rem; display: flex; align-items: center; gap: .6rem; } .impersonation-bar a { color: #fff; text-decoration: underline; } @media print { .fc-sidebar, .fc-topbar, .page-actions, .filter-bar, .no-print, .fc-palette { display: none !important; } .fc-main { margin-left: 0; } .fc-content { padding: 0; max-width: none; } body { background: #fff; } .card, .table-wrap { box-shadow: none; border-color: #ddd; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }