/* ================================================================ SALESTRACKER — THEME SYSTEM 5 themes defined via CSS custom properties. Theme is applied via data-theme on . ================================================================ */ /* ---- Dark Navy (default) ---- */ :root, [data-theme="dark-navy"] { --st-body-bg: #1a1a2e; --st-card-bg: #16213e; --st-card-header-bg: #0f3460; --st-border: #2d3561; --st-text: #e0e0e0; --st-text-muted: #9e9e9e; --st-input-bg: #0f1b35; --st-input-text: #e0e0e0; --st-nav-bg: #0a0a1a; --st-hover-bg: #1e2a50; --st-footer-bg: #0a0a1a; --st-link: #6ea8fe; --st-link-hover: #9ec5fe; --st-accent: #4e7af0; --st-scrollbar-track: #16213e; --st-scrollbar-thumb: #2d3561; --st-table-head-bg: #0f3460; --st-table-head-text: #ffffff; --st-dropdown-bg: #16213e; --st-dropdown-hover: #1e2a50; --st-modal-bg: #16213e; --st-list-item-bg: #16213e; --st-list-item-hover: #1e2a50; --st-timeline-border: #0d6efd; --st-tab-active-bg: #16213e; --st-tab-border: #2d3561; --st-alert-success-bg: rgba(25, 135, 84, 0.20); --st-alert-success-bd: #198754; --st-alert-success-text: #75b798; --st-alert-danger-bg: rgba(220, 53, 69, 0.20); --st-alert-danger-bd: #dc3545; --st-alert-danger-text: #ea868f; --st-alert-info-bg: rgba(13, 202, 240, 0.15); --st-alert-info-bd: #0dcaf0; --st-alert-info-text: #6edff6; color-scheme: dark; } /* ---- Dark Slate ---- */ [data-theme="dark-slate"] { --st-body-bg: #1c1c1c; --st-card-bg: #252525; --st-card-header-bg: #1a1a1a; --st-border: #3a3a3a; --st-text: #e8e8e8; --st-text-muted: #888888; --st-input-bg: #1a1a1a; --st-input-text: #e8e8e8; --st-nav-bg: #111111; --st-hover-bg: #2d2d2d; --st-footer-bg: #111111; --st-link: #5b9cf6; --st-link-hover: #93c5fd; --st-accent: #5b9cf6; --st-scrollbar-track: #1c1c1c; --st-scrollbar-thumb: #3a3a3a; --st-table-head-bg: #1a1a1a; --st-table-head-text: #e8e8e8; --st-dropdown-bg: #252525; --st-dropdown-hover: #2d2d2d; --st-modal-bg: #252525; --st-list-item-bg: #252525; --st-list-item-hover: #2d2d2d; --st-timeline-border: #5b9cf6; --st-tab-active-bg: #252525; --st-tab-border: #3a3a3a; --st-alert-success-bg: rgba(25, 135, 84, 0.20); --st-alert-success-bd: #198754; --st-alert-success-text: #75b798; --st-alert-danger-bg: rgba(220, 53, 69, 0.20); --st-alert-danger-bd: #dc3545; --st-alert-danger-text: #ea868f; --st-alert-info-bg: rgba(13, 202, 240, 0.15); --st-alert-info-bd: #0dcaf0; --st-alert-info-text: #6edff6; color-scheme: dark; } /* ---- Dark Purple ---- */ [data-theme="dark-purple"] { --st-body-bg: #1a1025; --st-card-bg: #22163a; --st-card-header-bg: #2d1d50; --st-border: #3d2b6b; --st-text: #e2d9f3; --st-text-muted: #9d8ec0; --st-input-bg: #150d20; --st-input-text: #e2d9f3; --st-nav-bg: #0d0815; --st-hover-bg: #2d1e4a; --st-footer-bg: #0d0815; --st-link: #c4b5fd; --st-link-hover: #ddd6fe; --st-accent: #a78bfa; --st-scrollbar-track: #22163a; --st-scrollbar-thumb: #3d2b6b; --st-table-head-bg: #2d1d50; --st-table-head-text: #e2d9f3; --st-dropdown-bg: #22163a; --st-dropdown-hover: #2d1e4a; --st-modal-bg: #22163a; --st-list-item-bg: #22163a; --st-list-item-hover: #2d1e4a; --st-timeline-border: #a78bfa; --st-tab-active-bg: #22163a; --st-tab-border: #3d2b6b; --st-alert-success-bg: rgba(25, 135, 84, 0.20); --st-alert-success-bd: #198754; --st-alert-success-text: #75b798; --st-alert-danger-bg: rgba(220, 53, 69, 0.20); --st-alert-danger-bd: #dc3545; --st-alert-danger-text: #ea868f; --st-alert-info-bg: rgba(167, 139, 250, 0.15); --st-alert-info-bd: #a78bfa; --st-alert-info-text: #c4b5fd; color-scheme: dark; } /* ---- Light Clean ---- */ [data-theme="light"] { --st-body-bg: #f0f2f5; --st-card-bg: #ffffff; --st-card-header-bg: #f8f9fa; --st-border: #dee2e6; --st-text: #212529; --st-text-muted: #6c757d; --st-input-bg: #ffffff; --st-input-text: #212529; --st-nav-bg: #1e293b; --st-hover-bg: #f0f0f0; --st-footer-bg: #f8f9fa; --st-link: #0d6efd; --st-link-hover: #0a58ca; --st-accent: #0d6efd; --st-scrollbar-track: #e9ecef; --st-scrollbar-thumb: #adb5bd; --st-table-head-bg: #343a40; --st-table-head-text: #ffffff; --st-dropdown-bg: #ffffff; --st-dropdown-hover: #f8f9fa; --st-modal-bg: #ffffff; --st-list-item-bg: #ffffff; --st-list-item-hover: #f8f9fa; --st-timeline-border: #0d6efd; --st-tab-active-bg: #ffffff; --st-tab-border: #dee2e6; --st-alert-success-bg: #d1e7dd; --st-alert-success-bd: #badbcc; --st-alert-success-text: #0f5132; --st-alert-danger-bg: #f8d7da; --st-alert-danger-bd: #f5c2c7; --st-alert-danger-text: #842029; --st-alert-info-bg: #cff4fc; --st-alert-info-bd: #b6effb; --st-alert-info-text: #055160; color-scheme: light; } /* ---- Light Warm ---- */ [data-theme="light-warm"] { --st-body-bg: #faf7f2; --st-card-bg: #fffef9; --st-card-header-bg: #f5f0e8; --st-border: #e0d8cb; --st-text: #2c2415; --st-text-muted: #7a6850; --st-input-bg: #fffef9; --st-input-text: #2c2415; --st-nav-bg: #2c2415; --st-hover-bg: #f0ece3; --st-footer-bg: #f5f0e8; --st-link: #b45309; --st-link-hover: #92400e; --st-accent: #d97706; --st-scrollbar-track: #faf7f2; --st-scrollbar-thumb: #c8b89a; --st-table-head-bg: #3d2f1a; --st-table-head-text: #faf7f2; --st-dropdown-bg: #fffef9; --st-dropdown-hover: #f5f0e8; --st-modal-bg: #fffef9; --st-list-item-bg: #fffef9; --st-list-item-hover: #f5f0e8; --st-timeline-border: #d97706; --st-tab-active-bg: #fffef9; --st-tab-border: #e0d8cb; --st-alert-success-bg: rgba(134, 162, 76, 0.20); --st-alert-success-bd: #86a24c; --st-alert-success-text: #3d5c15; --st-alert-danger-bg: rgba(220, 53, 69, 0.15); --st-alert-danger-bd: #dc3545; --st-alert-danger-text: #842029; --st-alert-info-bg: rgba(217, 119, 6, 0.15); --st-alert-info-bd: #d97706; --st-alert-info-text: #92400e; color-scheme: light; } /* ================================================================ BASE STYLES ================================================================ */ html { font-size: 14px; } @media (min-width: 768px) { html { font-size: 15px; } } body { background-color: var(--st-body-bg); color: var(--st-text); margin-bottom: 60px; transition: background-color 0.2s, color 0.2s; } a { color: var(--st-link); } a:hover { color: var(--st-link-hover); } .text-decoration-none:hover { text-decoration: underline !important; } /* ---- Navbar (always dark for brand consistency) ---- */ .navbar { background-color: var(--st-nav-bg) !important; border-bottom-color: var(--st-nav-bg) !important; } .navbar-brand { letter-spacing: -0.02em; } /* ---- Cards ---- */ .card { background-color: var(--st-card-bg); border-color: var(--st-border); } .card-header { background-color: var(--st-card-header-bg); border-bottom-color: var(--st-border); font-weight: 600; } .card-footer { background-color: var(--st-card-bg); border-top-color: var(--st-border); } /* ---- Tables ---- */ .table { --bs-table-color: var(--st-text); --bs-table-bg: transparent; --bs-table-hover-bg: var(--st-hover-bg); } .table-dark { --bs-table-bg: var(--st-table-head-bg); --bs-table-color: var(--st-table-head-text); } .table-danger { --bs-table-bg: rgba(220, 53, 69, 0.15); --bs-table-color: var(--st-text); } .table-secondary { --bs-table-bg: rgba(108, 117, 125, 0.15); --bs-table-color: var(--st-text-muted); } .table-hover tbody tr:hover { background-color: var(--st-hover-bg); --bs-table-hover-bg: var(--st-hover-bg); } /* ---- List Groups ---- */ .list-group-item { background-color: var(--st-list-item-bg); border-color: var(--st-border); color: var(--st-text); } .list-group-item:hover { background-color: var(--st-list-item-hover); } /* ---- Modals ---- */ .modal-content { background-color: var(--st-modal-bg); border-color: var(--st-border); } .modal-header, .modal-footer { border-color: var(--st-border); } /* ---- Nav Tabs ---- */ .nav-tabs { border-bottom-color: var(--st-tab-border); } .nav-tabs .nav-link { color: var(--st-text-muted); border-color: transparent; } .nav-tabs .nav-link:hover { color: var(--st-text); border-color: var(--st-tab-border); } .nav-tabs .nav-link.active { background-color: var(--st-tab-active-bg); border-color: var(--st-tab-border) var(--st-tab-border) var(--st-tab-active-bg); color: var(--st-text); } .nav-link.active { color: var(--st-text) !important; } /* ---- Forms ---- */ .form-control, .form-select { background-color: var(--st-input-bg); border-color: var(--st-border); color: var(--st-input-text); } .form-control:focus, .form-select:focus { background-color: var(--st-input-bg); border-color: var(--st-accent); color: var(--st-input-text); box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--st-accent) 25%, transparent); } .form-control::placeholder { color: var(--st-text-muted); } .form-check-label { color: var(--st-text); } input[type="file"].form-control { color: var(--st-input-text); } /* ---- Dropdowns ---- */ .dropdown-menu { background-color: var(--st-dropdown-bg); border-color: var(--st-border); } .dropdown-item { color: var(--st-text); } .dropdown-item:hover { background-color: var(--st-dropdown-hover); color: var(--st-text); } .dropdown-menu-dark { background-color: var(--st-dropdown-bg); border-color: var(--st-border); } .dropdown-menu-dark .dropdown-item:hover { background-color: var(--st-hover-bg); } /* ---- Breadcrumbs ---- */ .breadcrumb { background-color: transparent; padding: 0; margin-bottom: 0.25rem; } .breadcrumb-item a { color: var(--st-link); text-decoration: none; } .breadcrumb-item a:hover { color: var(--st-link-hover); text-decoration: underline; } .breadcrumb-item.active { color: var(--st-text-muted); } .breadcrumb-item + .breadcrumb-item::before { color: var(--st-text-muted); } .border-bottom { border-bottom-color: var(--st-border) !important; } /* ---- Footer ---- */ footer { background-color: var(--st-footer-bg); } /* ---- Alerts ---- */ .alert-success { background-color: var(--st-alert-success-bg); border-color: var(--st-alert-success-bd); color: var(--st-alert-success-text); } .alert-danger { background-color: var(--st-alert-danger-bg); border-color: var(--st-alert-danger-bd); color: var(--st-alert-danger-text); } .alert-info { background-color: var(--st-alert-info-bg); border-color: var(--st-alert-info-bd); color: var(--st-alert-info-text); } /* ---- Timeline ---- */ .timeline .card { border-left: 3px solid var(--st-timeline-border); } /* ---- Scrollbar ---- */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--st-scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--st-scrollbar-thumb); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--st-accent); } /* ---- Validation ---- */ .field-validation-error { color: var(--st-alert-danger-text); } .input-validation-error { border-color: #dc3545 !important; } /* ---- Utility ---- */ .btn-xs { padding: 0.15rem 0.4rem; font-size: 0.75rem; } /* ================================================================ STAGE PILLS (vivid, theme-independent) ================================================================ */ .stage-pill { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 0.78em; font-weight: 600; line-height: 1.5; white-space: nowrap; letter-spacing: 0.01em; } .stage-lead { background: #6c757d; color: #fff; } .stage-contacted { background: #0dcaf0; color: #000; } .stage-demo-scheduled { background: #0d6efd; color: #fff; } .stage-app-inspection { background: #ffc107; color: #000; } .stage-pilot { background: #fd7e14; color: #fff; } .stage-proposal-sent { background: #6f42c1; color: #fff; } .stage-negotiating { background: #20c997; color: #000; } .stage-won { background: #198754; color: #fff; } .stage-lost { background: #dc3545; color: #fff; } .stage-nurturing { background: #495057; color: #fff; } /* Ensure stage variants without .stage-pill also get pill shape */ [class^="stage-"]:not(.stage-pill) { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 0.78em; font-weight: 600; line-height: 1.5; white-space: nowrap; } /* ================================================================ THEME SWATCHES — Settings page picker ================================================================ */ .theme-swatch { cursor: pointer; border: 3px solid transparent; border-radius: 10px; padding: 4px; transition: border-color 0.15s, transform 0.1s; } .theme-swatch:hover { transform: translateY(-2px); } .theme-swatch.active { border-color: var(--st-accent); } .theme-swatch input[type="radio"] { display: none; } .swatch-preview { width: 100%; height: 64px; border-radius: 6px; overflow: hidden; display: grid; grid-template-rows: 16px 1fr 12px; } .swatch-nav { border-radius: 6px 6px 0 0; } .swatch-body { } .swatch-foot { border-radius: 0 0 6px 6px; } /* Swatch colour sets */ .swatch-dark-navy .swatch-nav { background: #0a0a1a; } .swatch-dark-navy .swatch-body { background: #1a1a2e; } .swatch-dark-navy .swatch-foot { background: #16213e; } .swatch-dark-slate .swatch-nav { background: #111111; } .swatch-dark-slate .swatch-body { background: #1c1c1c; } .swatch-dark-slate .swatch-foot { background: #252525; } .swatch-dark-purple .swatch-nav { background: #0d0815; } .swatch-dark-purple .swatch-body { background: #1a1025; } .swatch-dark-purple .swatch-foot { background: #22163a; } .swatch-light .swatch-nav { background: #1e293b; } .swatch-light .swatch-body { background: #f0f2f5; } .swatch-light .swatch-foot { background: #ffffff; } .swatch-light-warm .swatch-nav { background: #2c2415; } .swatch-light-warm .swatch-body { background: #faf7f2; } .swatch-light-warm .swatch-foot { background: #fffef9; }