/* ============================================================================ Your Agency CRM — Backoffice design system Clean SaaS restyle. Layered on top of Bootstrap 5.3 (loaded before this file). Strategy: override Bootstrap's own CSS variables + a thin component polish. Theme-aware (light default; dark ready via [data-bs-theme="dark"]). Mobile-first: no structural changes — Bootstrap's grid/navbar collapse untouched. ========================================================================== */ /* ------------------------------ TOKENS ------------------------------------ */ :root { /* palette (cool-biased neutrals + one confident blue accent) */ --sn-bg: #FBFBFD; --sn-surface: #FFFFFF; --sn-surface-2: #F4F6F8; --sn-surface-3: #EEF1F4; --sn-border: #E6E8EC; --sn-border-strong: #D6DAE0; --sn-text: #0B0D12; --sn-muted: #5A6472; --sn-faint: #8B94A3; --sn-accent: #2E5CE6; --sn-accent-rgb: 46, 92, 230; --sn-accent-hover: #2249C9; --sn-accent-weak: #EAF0FE; --sn-good: #12A150; --sn-good-bg: #E6F6ED; --sn-warn: #B26B08; --sn-warn-bg: #FBF1DF; --sn-bad: #D92D20; --sn-bad-bg: #FBEAE8; --sn-info: #2E5CE6; --sn-info-bg: #EAF0FE; --sn-r-sm: 7px; --sn-r: 10px; --sn-r-lg: 14px; --sn-shadow-sm: 0 1px 2px rgba(11,13,18,.05); --sn-shadow: 0 1px 2px rgba(11,13,18,.04), 0 6px 16px -6px rgba(11,13,18,.10); --sn-shadow-lg: 0 12px 32px -8px rgba(11,13,18,.16); --sn-font: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --sn-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace; /* ---- Bootstrap variable overrides (recolor the whole framework) ---- */ --bs-body-bg: var(--sn-bg); --bs-body-color: var(--sn-text); --bs-secondary-color: var(--sn-muted); --bs-tertiary-color: var(--sn-faint); --bs-secondary-bg: var(--sn-surface-2); --bs-tertiary-bg: var(--sn-surface-3); --bs-border-color: var(--sn-border); --bs-border-color-translucent: var(--sn-border); --bs-primary: var(--sn-accent); --bs-primary-rgb: var(--sn-accent-rgb); --bs-link-color: var(--sn-accent); --bs-link-color-rgb: var(--sn-accent-rgb); --bs-link-hover-color: var(--sn-accent-hover); --bs-border-radius: var(--sn-r); --bs-border-radius-sm: var(--sn-r-sm); --bs-border-radius-lg: var(--sn-r-lg); --bs-body-font-family: var(--sn-font); --bs-body-font-size: 0.9rem; --bs-emphasis-color: var(--sn-text); --bs-heading-color: var(--sn-text); } /* dark theme tokens — activated when */ [data-bs-theme="dark"] { --sn-bg: #0A0C10; --sn-surface: #13161C; --sn-surface-2: #1A1E26; --sn-surface-3: #20252E; --sn-border: #252B34; --sn-border-strong: #333A45; --sn-text: #EDEFF3; --sn-muted: #98A2B2; --sn-faint: #69727F; --sn-accent: #5C7CF2; --sn-accent-rgb: 92, 124, 242; --sn-accent-hover: #7089F5; --sn-accent-weak: #161F38; --sn-good: #35C97B; --sn-good-bg: #0F2A1B; --sn-warn: #E0A63A; --sn-warn-bg: #2A2210; --sn-bad: #F26D63; --sn-bad-bg: #2C1613; --sn-info: #5C7CF2; --sn-info-bg: #161F38; --sn-shadow-sm: 0 1px 2px rgba(0,0,0,.4); --sn-shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 20px -8px rgba(0,0,0,.6); --sn-shadow-lg: 0 16px 40px -10px rgba(0,0,0,.7); --bs-emphasis-color: #FFFFFF; } /* ------------------------------ BASE -------------------------------------- */ body { background: var(--sn-bg); color: var(--sn-text); font-family: var(--sn-font); font-size: 0.9rem; line-height: 1.55; letter-spacing: -0.006em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { letter-spacing: -0.02em; font-weight: 640; color: var(--sn-text); text-wrap: balance; } a { text-underline-offset: 2px; } .text-muted { color: var(--sn-muted) !important; } .tnum, .table td, .badge { font-variant-numeric: tabular-nums; } code, kbd, pre, .font-monospace { font-family: var(--sn-mono); } main > .container, main > .container-fluid { padding-top: 1.25rem; padding-bottom: 2rem; } /* full-width content — a dense CRM should use the whole screen (no artificial cap) */ /* --------------------------- PRIMARY ACCENT ------------------------------- */ .btn-primary { --bs-btn-bg: var(--sn-accent); --bs-btn-border-color: var(--sn-accent); --bs-btn-hover-bg: var(--sn-accent-hover); --bs-btn-hover-border-color: var(--sn-accent-hover); --bs-btn-active-bg: var(--sn-accent-hover); --bs-btn-active-border-color: var(--sn-accent-hover); --bs-btn-disabled-bg: var(--sn-accent); --bs-btn-disabled-border-color: var(--sn-accent); --bs-btn-focus-shadow-rgb: var(--sn-accent-rgb); } .btn-outline-primary { --bs-btn-color: var(--sn-accent); --bs-btn-border-color: var(--sn-border-strong); --bs-btn-hover-bg: var(--sn-accent); --bs-btn-hover-border-color: var(--sn-accent); --bs-btn-active-bg: var(--sn-accent); --bs-btn-active-border-color: var(--sn-accent); --bs-btn-focus-shadow-rgb: var(--sn-accent-rgb); } /* keep Bootstrap's opacity utilities working (bg-opacity-*, text-opacity-*) */ .bg-primary { background-color: rgba(var(--sn-accent-rgb), var(--bs-bg-opacity, 1)) !important; } .text-primary { color: rgba(var(--sn-accent-rgb), var(--bs-text-opacity, 1)) !important; } .text-bg-primary { background-color: var(--sn-accent) !important; color: #fff !important; } .link-primary { color: var(--sn-accent) !important; } a { color: var(--sn-accent); } .page-link { --bs-pagination-color: var(--sn-accent); --bs-pagination-active-bg: var(--sn-accent); --bs-pagination-active-border-color: var(--sn-accent); --bs-pagination-hover-color: var(--sn-accent-hover); } .nav-pills { --bs-nav-pills-link-active-bg: var(--sn-accent); } .form-check-input:checked { background-color: var(--sn-accent); border-color: var(--sn-accent); } .form-check-input:focus { border-color: var(--sn-accent); box-shadow: 0 0 0 .2rem rgba(var(--sn-accent-rgb), .18); } /* ------------------------------ BUTTONS ----------------------------------- */ .btn { --bs-btn-border-radius: var(--sn-r-sm); --bs-btn-font-weight: 550; --bs-btn-padding-y: .5rem; --bs-btn-padding-x: .9rem; letter-spacing: -0.01em; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .04s; } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--sn-accent-rgb), .28); } .btn-sm { --bs-btn-padding-y: .35rem; --bs-btn-padding-x: .7rem; --bs-btn-font-size: .8rem; } .btn-lg { --bs-btn-padding-y: .65rem; --bs-btn-padding-x: 1.2rem; --bs-btn-border-radius: var(--sn-r); } /* neutral/secondary buttons read as quiet outline chips */ .btn-secondary, .btn-light, .btn-outline-secondary { --bs-btn-bg: var(--sn-surface); --bs-btn-color: var(--sn-text); --bs-btn-border-color: var(--sn-border-strong); --bs-btn-hover-bg: var(--sn-surface-2); --bs-btn-hover-color: var(--sn-text); --bs-btn-hover-border-color: var(--sn-border-strong); --bs-btn-active-bg: var(--sn-surface-3); --bs-btn-active-color: var(--sn-text); } .btn-success { --bs-btn-bg: var(--sn-good); --bs-btn-border-color: var(--sn-good); --bs-btn-hover-bg: #0E8A44; --bs-btn-hover-border-color: #0E8A44; --bs-btn-active-bg:#0E8A44; } .btn-danger { --bs-btn-bg: var(--sn-bad); --bs-btn-border-color: var(--sn-bad); --bs-btn-hover-bg: #BE2318; --bs-btn-hover-border-color:#BE2318; --bs-btn-active-bg:#BE2318; } .btn-warning { --bs-btn-bg: var(--sn-warn); --bs-btn-border-color: var(--sn-warn); --bs-btn-color:#fff; --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#96590A; } /* --------------------------- CARDS / PANELS ------------------------------- */ .card { --bs-card-bg: var(--sn-surface); --bs-card-border-color: var(--sn-border); --bs-card-border-radius: var(--sn-r); --bs-card-inner-border-radius: calc(var(--sn-r) - 1px); --bs-card-cap-bg: var(--sn-surface); box-shadow: var(--sn-shadow-sm); } .card-header { border-bottom: 1px solid var(--sn-border); font-weight: 600; background: var(--sn-surface); } .shadow, .shadow-sm { box-shadow: var(--sn-shadow) !important; } .shadow-lg { box-shadow: var(--sn-shadow-lg) !important; } .border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--sn-border) !important; } .rounded { border-radius: var(--sn-r) !important; } .rounded-3 { border-radius: var(--sn-r) !important; } hr { border-color: var(--sn-border); opacity: 1; } /* ------------------------------ TABLES ------------------------------------ */ .table { --bs-table-bg: var(--sn-surface); --bs-table-color: var(--sn-text); --bs-table-border-color: var(--sn-border); --bs-table-hover-bg: var(--sn-surface-2); --bs-table-striped-bg: var(--sn-surface-2); margin-bottom: 0; } .table > thead th, .table > thead td { background: var(--sn-surface-2); color: var(--sn-faint); font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid var(--sn-border); white-space: nowrap; padding: .7rem .85rem; } .table > tbody td { padding: .7rem .85rem; vertical-align: middle; border-color: var(--sn-border); } .table > tbody tr:last-child td { border-bottom: 0; } /* Wrap plain tables in a rounded, bordered surface (GridView too) */ .grid-view, .table-responsive { background: var(--sn-surface); border: 1px solid var(--sn-border); border-radius: var(--sn-r); box-shadow: var(--sn-shadow-sm); overflow: hidden; overflow-x: auto; } .grid-view table { margin-bottom: 0; } /* --------------------------- FORMS / INPUTS ------------------------------- */ .form-control, .form-select { border-color: var(--sn-border-strong); border-radius: var(--sn-r-sm); background-color: var(--sn-surface); color: var(--sn-text); padding: .5rem .75rem; transition: border-color .15s, box-shadow .15s; } .form-control::placeholder { color: var(--sn-faint); } .form-control:focus, .form-select:focus { border-color: var(--sn-accent); box-shadow: 0 0 0 3px rgba(var(--sn-accent-rgb), .18); background-color: var(--sn-surface); color: var(--sn-text); } .form-control-sm, .form-select-sm { border-radius: var(--sn-r-sm); } .form-label { font-weight: 560; font-size: .82rem; color: var(--sn-muted); margin-bottom: .35rem; } .input-group-text { background: var(--sn-surface-2); border-color: var(--sn-border-strong); color: var(--sn-muted); } .hint-block { display: block; margin-top: 5px; color: var(--sn-faint); font-size: .8rem; } .not-set { color: var(--sn-bad); font-style: italic; } /* Raw Gii-scaffolded forms (no bootstrap grid) — constrain into a tidy card so the controls don't stretch edge-to-edge across the whole page. Add new scaffold wrappers here as they appear. */ .buyer-activity-log-form, .buyer-comment-form, .commission-payment-log-form, .commission-tracking-form, .roadshow-partner-event-form { max-width: 620px; background: var(--sn-surface); border: 1px solid var(--sn-border); border-radius: var(--sn-r-md, .6rem); padding: 1.25rem 1.5rem; box-shadow: var(--sn-shadow-sm, 0 1px 2px rgba(0,0,0,.05)); } .buyer-activity-log-form .form-group:last-of-type, .buyer-comment-form .form-group:last-of-type, .commission-payment-log-form .form-group:last-of-type, .commission-tracking-form .form-group:last-of-type, .roadshow-partner-event-form .form-group:last-of-type { margin-bottom: 0; } /* ------------------------------ BADGES ------------------------------------ */ .badge { font-weight: 560; border-radius: 99px; padding: .32em .7em; letter-spacing: .01em; } .badge.bg-secondary { background: var(--sn-surface-3) !important; color: var(--sn-muted) !important; } .badge.bg-success { background: var(--sn-good-bg) !important; color: var(--sn-good) !important; } .badge.bg-warning { background: var(--sn-warn-bg) !important; color: var(--sn-warn) !important; } .badge.bg-danger { background: var(--sn-bad-bg) !important; color: var(--sn-bad) !important; } .badge.bg-info { background: var(--sn-info-bg) !important; color: var(--sn-info) !important; } .badge.bg-primary { background: var(--sn-accent-weak) !important; color: var(--sn-accent) !important; } /* ------------------------------ ALERTS ------------------------------------ */ .alert { border-radius: var(--sn-r); border: 1px solid transparent; } .alert-info { background: var(--sn-info-bg); color: var(--sn-accent); border-color: transparent; } .alert-success { background: var(--sn-good-bg); color: var(--sn-good); } .alert-warning { background: var(--sn-warn-bg); color: var(--sn-warn); } .alert-danger { background: var(--sn-bad-bg); color: var(--sn-bad); } /* Neutral alerts: theme-aware surface so they never render as a white box in dark mode. */ .alert-light, .alert-secondary { background: var(--sn-surface-2); color: var(--sn-text); border-color: var(--sn-border); } /* Per-page help banner (PageHelp): uses no Bootstrap alert variant, so it has no background on its own — give it a themed info surface with an accent edge. */ .alert.sn-pagehelp { background: var(--sn-info-bg); border: 1px solid var(--sn-border); border-left: 4px solid var(--sn-accent); color: var(--sn-text); } .sn-pagehelp .bi-info-circle-fill { color: var(--sn-accent); } .sn-pagehelp-list { padding-left: 1.15rem; margin-top: .25rem; } .error-summary { color: var(--sn-bad); background: var(--sn-bad-bg); border-left: 3px solid var(--sn-bad); padding: 10px 20px; margin: 0 0 15px; border-radius: var(--sn-r-sm); } /* --------------------------- BREADCRUMB ----------------------------------- */ .breadcrumb { --bs-breadcrumb-divider-color: var(--sn-faint); font-size: .82rem; margin-bottom: 0; } .breadcrumb-item, .breadcrumb-item a { color: var(--sn-faint); text-decoration: none; } .breadcrumb-item.active { color: var(--sn-muted); font-weight: 560; } .breadcrumb-item a:hover { color: var(--sn-accent); } /* --------------------------- MODALS / DROPDOWNS --------------------------- */ .modal-content { border: 1px solid var(--sn-border); border-radius: var(--sn-r-lg); box-shadow: var(--sn-shadow-lg); background: var(--sn-surface); } .modal-header, .modal-footer { border-color: var(--sn-border); } .dropdown-menu { --bs-dropdown-bg: var(--sn-surface); --bs-dropdown-border-color: var(--sn-border); --bs-dropdown-border-radius: var(--sn-r); --bs-dropdown-color: var(--sn-text); --bs-dropdown-link-color: var(--sn-text); --bs-dropdown-link-hover-color: var(--sn-text); --bs-dropdown-link-hover-bg: var(--sn-surface-2); --bs-dropdown-link-active-bg: var(--sn-accent-weak); --bs-dropdown-link-active-color: var(--sn-accent); box-shadow: var(--sn-shadow); padding: .35rem; } .dropdown-item { border-radius: var(--sn-r-sm); padding: .45rem .6rem; font-size: .86rem; } .dropdown-divider { border-color: var(--sn-border); } /* components whose --bs-*-bg default to solid white — tie to tokens so dark mode works */ .list-group { --bs-list-group-bg: var(--sn-surface); --bs-list-group-color: var(--sn-text); --bs-list-group-border-color: var(--sn-border); --bs-list-group-action-color: var(--sn-text); --bs-list-group-action-hover-bg: var(--sn-surface-2); --bs-list-group-action-hover-color: var(--sn-text); --bs-list-group-action-active-bg: var(--sn-surface-3); } .pagination { --bs-pagination-bg: var(--sn-surface); --bs-pagination-color: var(--sn-text); --bs-pagination-border-color: var(--sn-border); --bs-pagination-hover-bg: var(--sn-surface-2); --bs-pagination-hover-color: var(--sn-text); --bs-pagination-disabled-bg: var(--sn-surface); --bs-pagination-disabled-color: var(--sn-faint); } .accordion { --bs-accordion-bg: var(--sn-surface); --bs-accordion-color: var(--sn-text); --bs-accordion-border-color: var(--sn-border); --bs-accordion-btn-color: var(--sn-text); --bs-accordion-active-bg: var(--sn-accent-weak); --bs-accordion-active-color: var(--sn-accent); } .nav-tabs { --bs-nav-tabs-link-active-bg: var(--sn-surface); --bs-nav-tabs-link-active-color: var(--sn-text); --bs-nav-tabs-link-active-border-color: var(--sn-border); --bs-nav-tabs-border-color: var(--sn-border); } /* ============================ NAVBAR (light) ============================== */ /* Rendered with class .sn-navbar (set in main.php). Clean white top bar. */ .sn-navbar { background: var(--sn-surface) !important; border-bottom: 1px solid var(--sn-border); box-shadow: none; padding-top: .5rem; padding-bottom: .5rem; } .sn-navbar .navbar-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 640; color: var(--sn-text); letter-spacing: -0.01em; } .sn-navbar .sn-logo { width: 30px; height: 30px; border-radius: 9px; flex: none; background: linear-gradient(150deg, var(--sn-accent), #7C93F2); display: inline-grid; place-items: center; color: #fff; box-shadow: var(--sn-shadow-sm); } .sn-navbar .navbar-nav { --bs-nav-link-color: var(--sn-muted); align-items: center; gap: 2px; } .sn-navbar .nav-link { color: var(--sn-muted); font-weight: 520; font-size: .875rem; border-radius: var(--sn-r-sm); padding: .45rem .7rem; transition: background-color .15s, color .15s; } .sn-navbar .nav-link:hover { color: var(--sn-text); background: var(--sn-surface-2); } .sn-navbar .nav-link.active, .sn-navbar .nav-item.show > .nav-link { color: var(--sn-accent); background: var(--sn-accent-weak); font-weight: 640; box-shadow: inset 0 -2px 0 var(--sn-accent); } .sn-navbar .nav-link.active i.bi { opacity: 1; } .sn-navbar .nav-link i.bi { opacity: .8; } /* On mobile the navbar stacks vertically → use a left accent bar instead of underline. */ @media (max-width: 991.98px) { .sn-navbar .nav-link.active, .sn-navbar .nav-item.show > .nav-link { box-shadow: inset 3px 0 0 var(--sn-accent); } } .sn-navbar .navbar-toggler { border-color: var(--sn-border); padding: .3rem .5rem; } .sn-navbar .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(var(--sn-accent-rgb), .2); } .sn-navbar .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%235A6472' stroke-linecap='round' stroke-width='2.2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* mobile: nav items become a stacked panel */ @media (max-width: 991.98px) { .sn-navbar .navbar-collapse { margin-top: .5rem; border-top: 1px solid var(--sn-border); padding-top: .5rem; max-height: 78vh; overflow-y: auto; } .sn-navbar .nav-link { padding: .6rem .7rem; } .sn-navbar .dropdown-menu { box-shadow: none; border: 0; background: var(--sn-surface-2); margin: 2px 0 4px .5rem; } } header { z-index: 1030; position: relative; } /* theme toggle button */ .sn-theme-btn { border: 1px solid var(--sn-border); background: var(--sn-surface); color: var(--sn-muted); width: 36px; height: 36px; border-radius: 8px; display: inline-grid; place-items: center; font-size: 1rem; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; } .sn-theme-btn:hover { background: var(--sn-surface-2); color: var(--sn-text); } .sn-theme-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--sn-accent-rgb), .25); } /* keep neutral utilities theme-aware so dark mode stays legible */ .bg-light { background-color: var(--sn-surface-2) !important; } .bg-white { background-color: var(--sn-surface) !important; } [data-bs-theme="dark"] .text-dark { color: var(--sn-text) !important; } [data-bs-theme="dark"] .notification-dropdown .bg-light, [data-bs-theme="dark"] .card-header.bg-light { background-color: var(--sn-surface-2) !important; } /* ------------------------ GRID-VIEW sort icons ---------------------------- */ a.asc:after, a.desc:after { content: ''; left: 3px; display: inline-block; width: 0; height: 0; border: solid 5px transparent; margin: 4px; background: transparent; } a.asc:after { border-bottom: solid 7px var(--sn-accent); border-top-width: 0; } a.desc:after { border-top: solid 7px var(--sn-accent); border-bottom-width: 0; } .grid-view .filters input, .grid-view .filters select { min-width: 50px; } /* ------------------------------ FOOTER ------------------------------------ */ .footer { background: var(--sn-surface); border-top: 1px solid var(--sn-border); font-size: .82rem; color: var(--sn-faint); padding: 1rem 0; } /* ---------------------- NOTIFICATIONS (preserved) ------------------------- */ #toast-container { z-index: 99999 !important; pointer-events: none; } #toast-container > div { pointer-events: auto; } .notification-dropdown .dropdown-menu { z-index: 10050 !important; } .mark-read-modern { background: var(--sn-surface-2) !important; border: 1px solid var(--sn-border) !important; width: 32px; height: 32px; border-radius: 8px !important; display: flex; align-items: center; justify-content: center; color: var(--sn-good) !important; font-size: 1.05rem; transition: all .2s; cursor: pointer; padding: 0; } .mark-read-modern:hover { background: var(--sn-good) !important; color: #fff !important; border-color: var(--sn-good) !important; transform: scale(1.08); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }