/*
* Trailing Paper — Shared Design Tokens
* Single source of truth for the redesigned admin pages
* (reconciliation, banking rules, chart of accounts, …).
*
* Each new page must import this file BEFORE its own page-level CSS.
* Do NOT redeclare tokens elsewhere.
*/
:root {
/* Surfaces */
--tp-surface-0: #fafaf9;
--tp-surface-1: #ffffff;
--tp-surface-2: #f5f5f4;
--tp-surface-divider: #e7e5e4;
/* Text */
--tp-text-primary: #1c1917;
--tp-text-secondary: #57534e;
--tp-text-muted: #a8a29e;
/* Stripes */
--tp-stripe-pending: #d6d3d1;
--tp-stripe-suggested: #f59e0b;
--tp-stripe-ai: #8b5cf6;
--tp-stripe-resolved: #10b981;
--tp-stripe-ignored: #d6d3d1;
/* Accent (replaces Bootstrap blue) */
--tp-accent-500: #0d9488;
--tp-accent-600: #0f766e;
--tp-accent-50: #f0fdfa;
/* Money */
--tp-money-out: #b91c1c;
--tp-money-in: #047857;
/* Type scale */
--tp-text-xs: 12px;
--tp-text-sm: 14px;
--tp-text-base: 15px;
--tp-text-md: 17px;
--tp-text-lg: 20px;
--tp-text-xl: 28px;
--tp-text-2xl: 44px;
/* Type families */
--tp-font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--tp-font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'SF Mono', ui-monospace, monospace;
/* Source pill colors */
--tp-pill-heuristic-bg: #f5f5f4;
--tp-pill-heuristic-fg: #57534e;
--tp-pill-rule-bg: #ecfeff;
--tp-pill-rule-fg: #0e7490;
--tp-pill-learned-bg: #eff6ff;
--tp-pill-learned-fg: #1d4ed8;
--tp-pill-ai-bg: #f5f3ff;
--tp-pill-ai-fg: #6d28d9;
--tp-pill-auto-bg: #fef3c7;
--tp-pill-auto-fg: #92400e;
--tp-pill-you-bg: #ecfdf5;
--tp-pill-you-fg: #047857;
--tp-pill-ignored-bg: #f5f5f4;
--tp-pill-ignored-fg: #78716c;
--tp-pill-new-bg: #f5f5f4;
--tp-pill-new-fg: #78716c;
/* Category colors (chart of accounts canonical hues) */
--tp-cat-asset-bg: #eff6ff;
--tp-cat-asset-fg: #1d4ed8;
--tp-cat-liability-bg: #fff7ed;
--tp-cat-liability-fg: #c2410c;
--tp-cat-equity-bg: #f5f3ff;
--tp-cat-equity-fg: #6d28d9;
--tp-cat-revenue-bg: #ecfdf5;
--tp-cat-revenue-fg: #047857;
--tp-cat-expense-bg: #fef2f2;
--tp-cat-expense-fg: #b91c1c;
--tp-cat-cogs-bg: #fef2f2;
--tp-cat-cogs-fg: #b91c1c;
/* Status pill semantic tokens (used by invoice/estimate $statusMap arrays
and any other 'soft badge' rendering). Light-mode values match the
historical hex pairs that were previously hardcoded inline. */
--tp-pill-success-bg: #dcfce7;
--tp-pill-success-fg: #16a34a;
--tp-pill-danger-bg: #fee2e2;
--tp-pill-danger-fg: #dc2626;
--tp-pill-warning-bg: #fef9c3;
--tp-pill-warning-fg: #ca8a04;
--tp-pill-info-bg: #e0f2fe;
--tp-pill-info-fg: #0284c7;
--tp-pill-neutral-bg: #f1f5f9;
--tp-pill-neutral-fg: #64748b;
--tp-pill-muted-bg: #f1f5f9;
--tp-pill-muted-fg: #334155;
/* Brand purple — Stripe-adjacent indigo used on legacy form buttons in
add/edit-invoice + add/edit-quotation. Distinct from --tp-accent which
is teal. */
--tp-brand-500: #635BFF;
--tp-brand-600: #4F46E5;
--tp-brand-50: #EEF2FF;
}
/*
* Dark theme overrides — applied via either:
* (a) Bootstrap 5.3 manual toggle: (this is what
* theme-script.js writes when the user picks "Dark" from the topbar)
* (b) OS preference: prefers-color-scheme: dark (when no explicit choice)
*
* Both selectors flip every page-level token so downstream tp-* CSS that
* already references --tp-* variables darkens automatically. Keep the two
* blocks in sync.
*
* Site-wide dark-mode pass — directive: "the entire site has dark-mode CSS
* issues — dark-on-dark, white-on-white hovers, white blocks vs dark page".
* Root cause was the original :root tokens never flipping for the manual
* theme toggle (only @media query was wired). This block fixes that.
*/
[data-bs-theme="dark"] {
/* Surfaces — neutral zinc/slate ramp aligned to the topbar/sidebar
surface (#252630). No purple casts — the kit's default --gray-N
family is purple-tinted (#2E283A etc.), so we override the page
surface tokens explicitly so every tp-* component renders neutral. */
--tp-surface-0: #0e0f12; /* page background */
--tp-surface-1: #252630; /* card / panel surface */
--tp-surface-2: #1c1d24; /* deeper / input fill / striped row */
--tp-surface-divider: #353742; /* borders, dividers */
/* Text */
--tp-text-primary: #f4f4f5;
--tp-text-secondary: #d4d4d8;
--tp-text-muted: #71717a;
/* Stripes — lift saturation on dark BG */
--tp-stripe-pending: #57534e;
--tp-stripe-suggested: #fbbf24;
--tp-stripe-ai: #a78bfa;
--tp-stripe-resolved: #34d399;
--tp-stripe-ignored: #57534e;
/* Accent — keep teal but lighter for AA on dark */
--tp-accent-500: #2dd4bf;
--tp-accent-600: #5eead4;
--tp-accent-50: #134e4a;
/* Money — lighter, AA-contrasting */
--tp-money-out: #fca5a5;
--tp-money-in: #6ee7b7;
/* Source pills — flipped bg/fg with dark-tinted backgrounds */
--tp-pill-heuristic-bg: #44403c;
--tp-pill-heuristic-fg: #d6d3d1;
--tp-pill-rule-bg: rgba(34, 211, 238, 0.15);
--tp-pill-rule-fg: #67e8f9;
--tp-pill-learned-bg: rgba(96, 165, 250, 0.15);
--tp-pill-learned-fg: #93c5fd;
--tp-pill-ai-bg: rgba(167, 139, 250, 0.18);
--tp-pill-ai-fg: #c4b5fd;
--tp-pill-auto-bg: rgba(251, 191, 36, 0.18);
--tp-pill-auto-fg: #fde68a;
--tp-pill-you-bg: rgba(110, 231, 183, 0.15);
--tp-pill-you-fg: #6ee7b7;
--tp-pill-ignored-bg: #44403c;
--tp-pill-ignored-fg: #a8a29e;
--tp-pill-new-bg: #44403c;
--tp-pill-new-fg: #a8a29e;
/* Category colors — same hue family, dark-tinted bg, lifted fg */
--tp-cat-asset-bg: rgba(96, 165, 250, 0.15);
--tp-cat-asset-fg: #93c5fd;
--tp-cat-liability-bg: rgba(251, 146, 60, 0.18);
--tp-cat-liability-fg: #fdba74;
--tp-cat-equity-bg: rgba(167, 139, 250, 0.18);
--tp-cat-equity-fg: #c4b5fd;
--tp-cat-revenue-bg: rgba(110, 231, 183, 0.15);
--tp-cat-revenue-fg: #6ee7b7;
--tp-cat-expense-bg: rgba(252, 165, 165, 0.15);
--tp-cat-expense-fg: #fca5a5;
--tp-cat-cogs-bg: rgba(252, 165, 165, 0.15);
--tp-cat-cogs-fg: #fca5a5;
/* Status pills — alpha-tinted backgrounds + lifted foreground for AA on dark. */
--tp-pill-success-bg: rgba(34, 197, 94, 0.18);
--tp-pill-success-fg: #4ade80;
--tp-pill-danger-bg: rgba(239, 68, 68, 0.18);
--tp-pill-danger-fg: #f87171;
--tp-pill-warning-bg: rgba(234, 179, 8, 0.18);
--tp-pill-warning-fg: #facc15;
--tp-pill-info-bg: rgba(56, 189, 248, 0.18);
--tp-pill-info-fg: #38bdf8;
--tp-pill-neutral-bg: rgba(148, 163, 184, 0.18);
--tp-pill-neutral-fg: #cbd5e1;
--tp-pill-muted-bg: rgba(148, 163, 184, 0.18);
--tp-pill-muted-fg: #e2e8f0;
/* Brand — same hue, slightly lifted for AA. */
--tp-brand-500: #818CF8;
--tp-brand-600: #6366F1;
--tp-brand-50: rgba(99, 102, 241, 0.15);
}
/* OS preference fallback — applies the same dark overrides when no explicit
toggle is set (i.e. the html element has neither data-bs-theme="light" nor
data-bs-theme="dark"). */
@media (prefers-color-scheme: dark) {
:root:not([data-bs-theme]) {
--tp-surface-0: #0e0f12;
--tp-surface-1: #252630;
--tp-surface-2: #1c1d24;
--tp-surface-divider: #353742;
--tp-text-primary: #f4f4f5;
--tp-text-secondary: #d4d4d8;
--tp-text-muted: #71717a;
--tp-stripe-pending: #57534e;
--tp-stripe-suggested: #fbbf24;
--tp-stripe-ai: #a78bfa;
--tp-stripe-resolved: #34d399;
--tp-stripe-ignored: #57534e;
--tp-accent-500: #2dd4bf;
--tp-accent-600: #5eead4;
--tp-accent-50: #134e4a;
--tp-money-out: #fca5a5;
--tp-money-in: #6ee7b7;
--tp-pill-heuristic-bg: #44403c;
--tp-pill-heuristic-fg: #d6d3d1;
--tp-pill-rule-bg: rgba(34, 211, 238, 0.15);
--tp-pill-rule-fg: #67e8f9;
--tp-pill-learned-bg: rgba(96, 165, 250, 0.15);
--tp-pill-learned-fg: #93c5fd;
--tp-pill-ai-bg: rgba(167, 139, 250, 0.18);
--tp-pill-ai-fg: #c4b5fd;
--tp-pill-auto-bg: rgba(251, 191, 36, 0.18);
--tp-pill-auto-fg: #fde68a;
--tp-pill-you-bg: rgba(110, 231, 183, 0.15);
--tp-pill-you-fg: #6ee7b7;
--tp-pill-ignored-bg: #44403c;
--tp-pill-ignored-fg: #a8a29e;
--tp-pill-new-bg: #44403c;
--tp-pill-new-fg: #a8a29e;
--tp-cat-asset-bg: rgba(96, 165, 250, 0.15);
--tp-cat-asset-fg: #93c5fd;
--tp-cat-liability-bg: rgba(251, 146, 60, 0.18);
--tp-cat-liability-fg: #fdba74;
--tp-cat-equity-bg: rgba(167, 139, 250, 0.18);
--tp-cat-equity-fg: #c4b5fd;
--tp-cat-revenue-bg: rgba(110, 231, 183, 0.15);
--tp-cat-revenue-fg: #6ee7b7;
--tp-cat-expense-bg: rgba(252, 165, 165, 0.15);
--tp-cat-expense-fg: #fca5a5;
--tp-cat-cogs-bg: rgba(252, 165, 165, 0.15);
--tp-cat-cogs-fg: #fca5a5;
--tp-pill-success-bg: rgba(34, 197, 94, 0.18);
--tp-pill-success-fg: #4ade80;
--tp-pill-danger-bg: rgba(239, 68, 68, 0.18);
--tp-pill-danger-fg: #f87171;
--tp-pill-warning-bg: rgba(234, 179, 8, 0.18);
--tp-pill-warning-fg: #facc15;
--tp-pill-info-bg: rgba(56, 189, 248, 0.18);
--tp-pill-info-fg: #38bdf8;
--tp-pill-neutral-bg: rgba(148, 163, 184, 0.18);
--tp-pill-neutral-fg: #cbd5e1;
--tp-pill-muted-bg: rgba(148, 163, 184, 0.18);
--tp-pill-muted-fg: #e2e8f0;
--tp-brand-500: #818CF8;
--tp-brand-600: #6366F1;
--tp-brand-50: rgba(99, 102, 241, 0.15);
}
}
/* Site-wide dark-mode chrome fixes (kit overrides) */
/* Topbar user-menu has a baked-in #b1b1b1 box-shadow that reads as a
visible gray glow under the topbar in dark mode. Drop it. */
[data-bs-theme="dark"] .header .header-user .user-menu { box-shadow: none !important; }
@media (prefers-color-scheme: dark) {
:root:not([data-bs-theme]) .header .header-user .user-menu { box-shadow: none !important; }
}
/* Page content surface: pure white in light mode so cards sit on a
clean canvas instead of the kit's faint gray body. Dark mode is
handled by per-page overrides + body bg, so this rule only fires
when no dark mode is active. */
[data-bs-theme="light"] .page-wrapper .content,
:root:not([data-bs-theme]) .page-wrapper .content { background-color: #ffffff; }
@media (prefers-color-scheme: dark) {
:root:not([data-bs-theme]) .page-wrapper .content { background-color: transparent; }
}
/* Bootstrap defaults textarea.form-control min-height to
calc(1.5em + .75rem + 2px) which is one-line tall. Bump to 6.5em
so notes/terms/address textareas open at a usable multi-line size. */
textarea.form-control { min-height: calc(6.5em + .75rem + calc(var(--bs-border-width) * 2)) !important; }
textarea.form-control-sm { min-height: calc(6.5em + .5rem + calc(var(--bs-border-width) * 2)) !important; }
textarea.form-control-lg { min-height: calc(6.5em + 1rem + calc(var(--bs-border-width) * 2)) !important; }
/* ============================================================
* Site-wide dark-mode chrome (the canonical palette ported from
* /add-invoice). Every page that uses .tp-card / .tp-table /
* Bootstrap form controls picks these up automatically.
*
* Why we override at this level: the kit's dark theme defines
* --white: #070312 (deep purple-black)
* --light: #1B122F (deep purple)
* --gray-100: #2E283A (purple-tinted)
* which cascade into body bg, table thead bg, form-control bg,
* and select2 chrome. Without these overrides, every page reads
* as kit-purple instead of the neutral zinc palette the user
* approved on /add-invoice.
* ============================================================ */
/* Body + page-wrapper: neutral dark slate, not kit purple. */
[data-bs-theme="dark"] body { background-color: #0e0f12; }
[data-bs-theme="dark"] .page-wrapper,
[data-bs-theme="dark"] .content-two,
[data-bs-theme="dark"] .content { background-color: transparent; }
@media (prefers-color-scheme: dark) {
:root:not([data-bs-theme]) body { background-color: #0e0f12; }
:root:not([data-bs-theme]) .page-wrapper,
:root:not([data-bs-theme]) .content-two,
:root:not([data-bs-theme]) .content { background-color: transparent; }
}
/* Card chrome — explicit colors so kit-default purple can't bleed
through token-using components. */
[data-bs-theme="dark"] .tp-card,
[data-bs-theme="dark"] .tp-summary-card,
[data-bs-theme="dark"] .tp-form-card,
[data-bs-theme="dark"] .tp-stat-panel,
[data-bs-theme="dark"] .tp-table-card { background: #252630; border-color: #353742; color: #f4f4f5; }
[data-bs-theme="dark"] .tp-from-box,
[data-bs-theme="dark"] .tp-toggle-row,
[data-bs-theme="dark"] .tp-customer-details-box { background: #1c1d24; border-color: #353742; color: #d4d4d8; }
[data-bs-theme="dark"] .tp-section-label { color: #d4d4d8 !important; }
[data-bs-theme="dark"] .tp-divider { border-top-color: #353742; }
/* Form inputs — carved-in #1c1d24 fill on every page. Scoped
broadly so /index, /invoices, /estimates, /customers, etc. all
inherit. */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] textarea.form-control {
background-color: #1c1d24;
border-color: #353742;
color: #f4f4f5;
}
[data-bs-theme="dark"] .form-control::placeholder { color: #71717a; }
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
background-color: #1c1d24;
border-color: #71717a;
color: #f4f4f5;
box-shadow: 0 0 0 3px rgba(113, 113, 122, 0.2);
}
[data-bs-theme="dark"] .form-label { color: #d4d4d8; }
[data-bs-theme="dark"] .form-control[readonly],
[data-bs-theme="dark"] .form-control:disabled {
background-color: #14151a !important;
color: #a1a1aa !important;
}
/* Table headers — kit's [data-bs-theme=dark] .table thead tr th uses
var(--gray-100) (#2E283A purple) with !important. Beat it with our
own !important + the same specificity. Lifted #2d2e3a above the
#252630 card surface so the header band reads as a header. */
[data-bs-theme="dark"] .table thead tr th,
[data-bs-theme="dark"] .table thead th,
[data-bs-theme="dark"] .tp-table thead tr th,
[data-bs-theme="dark"] .tp-table thead th { background: #2d2e3a !important; background-color: #2d2e3a !important; color: #d4d4d8 !important; border-bottom-color: #353742 !important; }
[data-bs-theme="dark"] .table tbody td,
[data-bs-theme="dark"] .tp-table tbody td { background-color: #1c1d24; border-bottom-color: #353742; color: #f4f4f5; }
[data-bs-theme="dark"] .table tbody tr:hover td,
[data-bs-theme="dark"] .tp-table tbody tr:hover td { background-color: #252630; }
/* Bootstrap form-check / form-switch :checked → brand orange. */
[data-bs-theme="dark"] .form-check-input:checked {
background-color: #ff8b1e !important;
border-color: #ff8b1e !important;
}
[data-bs-theme="dark"] .form-check-input:focus {
border-color: #ff8b1e;
box-shadow: 0 0 0 0.2rem rgba(255, 139, 30, 0.25);
}
/* Select2 single-selection — kit binds bg to var(--light) which is
#1B122F purple in dark mode. Override to the carved-in fill. */
[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
[data-bs-theme="dark"] .select2-container .select2-selection--single {
background-color: #1c1d24 !important;
border-color: #353742 !important;
color: #f4f4f5 !important;
}
[data-bs-theme="dark"] .select2-container--default .select2-selection__rendered { color: #f4f4f5 !important; }
[data-bs-theme="dark"] .select2-container--default .select2-selection__placeholder { color: #71717a !important; }
[data-bs-theme="dark"] .select2-dropdown { background-color: #252630 !important; border-color: #353742 !important; }
[data-bs-theme="dark"] .select2-dropdown .select2-results__option { color: #f4f4f5; }
[data-bs-theme="dark"] .select2-dropdown .select2-results__option--highlighted.select2-results__option--selectable { background-color: #1c1d24; color: #f4f4f5; }
[data-bs-theme="dark"] .select2-dropdown .select2-search__field { background-color: #1c1d24; border-color: #353742; color: #f4f4f5; }
/* Brand-orange primary button utility — used on Save & Send. Light
and dark mode share the same orange. */
.tp-btn-brand-orange { background: #ff8b1e !important; color: #000 !important; }
.tp-btn-brand-orange:hover { background: #ea7a14 !important; color: #000 !important; }
/* Danger-ghost button — solid red border + filled red hover. */
.tp-btn-danger-ghost {
background: transparent;
color: #ef4444;
border: 1px solid #ef4444;
border-radius: 10px;
padding: 8px 18px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
}
.tp-btn-danger-ghost:hover { background: #ef4444; color: #000; }
/* Tab pill — replace --tp-brand-500 indigo with neutral zinc fill in
dark mode so the active tab is unambiguous without color cast. */
[data-bs-theme="dark"] .tp-tab-pill { background: transparent; border-color: #353742; color: #d4d4d8; }
[data-bs-theme="dark"] .tp-tab-pill.active,
[data-bs-theme="dark"] .tp-tab-pill:hover { background: #3f3f46; border-color: #52525b; color: #f4f4f5; }
/* Add-item button — neutral zinc text instead of indigo. */
[data-bs-theme="dark"] .tp-add-item-btn { color: #d4d4d8; }
[data-bs-theme="dark"] .tp-add-item-btn:hover { color: #f4f4f5; }
/* Customer dropdown chrome — popover surfaces use the card palette. */
[data-bs-theme="dark"] .tp-customer-dropdown { background: #252630; border-color: #353742; color: #f4f4f5; }
[data-bs-theme="dark"] .tp-customer-option { color: #f4f4f5; }
[data-bs-theme="dark"] .tp-customer-option:hover,
[data-bs-theme="dark"] .tp-customer-option.is-active { background: #1c1d24; }
[data-bs-theme="dark"] .tp-customer-empty,
[data-bs-theme="dark"] .tp-customer-meta { color: #71717a; }
[data-bs-theme="dark"] .tp-customer-count { background: #252630; border-top-color: #353742; color: #71717a; }
/* Bootstrap modals — kit's modal-content inherits a purple-tinted bg
in dark. Force neutral surfaces so the new send-email modal and
any other Bootstrap modal sit on the canonical palette. */
[data-bs-theme="dark"] .modal-content { background-color: #252630; border-color: #353742; color: #f4f4f5; }
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer { border-color: #353742; }
/* Bootstrap dropdown menus — kit defaults to a purple-tinted bg. */
[data-bs-theme="dark"] .dropdown-menu { background-color: #252630; border-color: #353742; color: #f4f4f5; }
[data-bs-theme="dark"] .dropdown-item { color: #f4f4f5; }
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus { background-color: #1c1d24; color: #f4f4f5; }
[data-bs-theme="dark"] .dropdown-divider { border-top-color: #353742; }
/* ============================================================
* Same site-wide dark rules under prefers-color-scheme: dark for
* users who haven't picked an explicit theme.
* ============================================================ */
@media (prefers-color-scheme: dark) {
:root:not([data-bs-theme]) .tp-card,
:root:not([data-bs-theme]) .tp-summary-card,
:root:not([data-bs-theme]) .tp-form-card,
:root:not([data-bs-theme]) .tp-stat-panel,
:root:not([data-bs-theme]) .tp-table-card { background: #252630; border-color: #353742; color: #f4f4f5; }
:root:not([data-bs-theme]) .form-control,
:root:not([data-bs-theme]) .form-select,
:root:not([data-bs-theme]) textarea.form-control { background-color: #1c1d24; border-color: #353742; color: #f4f4f5; }
:root:not([data-bs-theme]) .table thead tr th,
:root:not([data-bs-theme]) .table thead th,
:root:not([data-bs-theme]) .tp-table thead tr th,
:root:not([data-bs-theme]) .tp-table thead th { background: #2d2e3a !important; color: #d4d4d8 !important; border-bottom-color: #353742 !important; }
:root:not([data-bs-theme]) .form-check-input:checked { background-color: #ff8b1e !important; border-color: #ff8b1e !important; }
:root:not([data-bs-theme]) .modal-content { background-color: #252630; border-color: #353742; color: #f4f4f5; }
:root:not([data-bs-theme]) .dropdown-menu { background-color: #252630; border-color: #353742; }
}
/* ──────────────────────────────────────────────────────────────────────
Customer-avatar fixes — site-wide
- When an ![]()
is rendered inside the avatar circle (a real photo),
transparent areas of the image were showing the brand-color fill
behind it (.tp-customer-avatar / .tp-cd-avatar default to a colored
bg for the initials state). The :has(img) selector strips the bg
for browsers that support it; the modifier class --photo provides
a fallback selector that authors can apply explicitly when needed.
- Also makes sure the ![]()
itself fills the circle and stays cropped.
────────────────────────────────────────────────────────────────────── */
.tp-customer-avatar:has(img),
.tp-customer-avatar.tp-customer-avatar--photo,
.tp-cd-avatar:has(img),
.tp-cd-avatar.tp-cd-avatar--photo {
background: transparent !important;
color: inherit;
}
.tp-customer-avatar img,
.tp-cd-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 50%;
}