/* * Premium company theme system * ---------------------------- * Theme identity is selected with . * Bootstrap's light/dark mode remains independent through data-bs-theme. */ :root, [data-app-theme="corporate"] { --app-primary: #1e4f91; --app-primary-hover: #163f75; --app-primary-rgb: 30, 79, 145; --app-primary-bright: #3f79c8; --app-accent: #c69b4b; --app-accent-rgb: 198, 155, 75; --app-sidebar-start: #0b172a; --app-sidebar-end: #12253f; --app-soft: #eaf2fc; --app-page-tint-rgb: 30, 79, 145; --app-theme-color: #0b172a; --bs-primary: var(--app-primary); --bs-primary-rgb: var(--app-primary-rgb); --bs-link-color: var(--app-primary); --bs-link-color-rgb: var(--app-primary-rgb); --bs-link-hover-color: var(--app-primary-hover); } [data-app-theme="health-wellness"] { --app-primary: #176b62; --app-primary-hover: #11564f; --app-primary-rgb: 23, 107, 98; --app-primary-bright: #2f8f82; --app-accent: #6e9f79; --app-accent-rgb: 110, 159, 121; --app-sidebar-start: #0d2e2a; --app-sidebar-end: #153e38; --app-soft: #e8f5f1; --app-page-tint-rgb: 23, 107, 98; --app-theme-color: #0d2e2a; } [data-app-theme="beauty-wellness"] { --app-primary: #8f3d67; --app-primary-hover: #743252; --app-primary-rgb: 143, 61, 103; --app-primary-bright: #b45a87; --app-accent: #c9a46c; --app-accent-rgb: 201, 164, 108; --app-sidebar-start: #261923; --app-sidebar-end: #3a2030; --app-soft: #f8edf3; --app-page-tint-rgb: 143, 61, 103; --app-theme-color: #261923; } [data-app-theme="inventory"] { --app-primary: #2f5d8a; --app-primary-hover: #244a6f; --app-primary-rgb: 47, 93, 138; --app-primary-bright: #4b7fac; --app-accent: #20a4b8; --app-accent-rgb: 32, 164, 184; --app-sidebar-start: #17202b; --app-sidebar-end: #1f2e3b; --app-soft: #eaf2f8; --app-page-tint-rgb: 47, 93, 138; --app-theme-color: #17202b; } [data-app-theme="pos"] { --app-primary: #5b4fe8; --app-primary-hover: #473cc6; --app-primary-rgb: 91, 79, 232; --app-primary-bright: #786df4; --app-accent: #10a77a; --app-accent-rgb: 16, 167, 122; --app-sidebar-start: #15151d; --app-sidebar-end: #232333; --app-soft: #efeeff; --app-page-tint-rgb: 91, 79, 232; --app-theme-color: #15151d; } /* Bootstrap component integration */ .btn-primary { --bs-btn-bg: var(--app-primary); --bs-btn-border-color: var(--app-primary); --bs-btn-hover-bg: var(--app-primary-hover); --bs-btn-hover-border-color: var(--app-primary-hover); --bs-btn-focus-shadow-rgb: var(--app-primary-rgb); --bs-btn-active-bg: var(--app-primary-hover); --bs-btn-active-border-color: var(--app-primary-hover); --bs-btn-disabled-bg: var(--app-primary); --bs-btn-disabled-border-color: var(--app-primary); } .btn-outline-primary { --bs-btn-color: var(--app-primary); --bs-btn-border-color: var(--app-primary); --bs-btn-hover-bg: var(--app-primary); --bs-btn-hover-border-color: var(--app-primary); --bs-btn-active-bg: var(--app-primary-hover); --bs-btn-active-border-color: var(--app-primary-hover); --bs-btn-focus-shadow-rgb: var(--app-primary-rgb); } .text-primary { color: var(--app-primary) !important; } .bg-primary { background-color: var(--app-primary) !important; } .border-primary { border-color: var(--app-primary) !important; } .bg-primary-subtle { background-color: var(--app-soft) !important; } .text-bg-primary { color: #fff !important; background-color: var(--app-primary) !important; } .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: rgba(var(--app-primary-rgb), .62); box-shadow: 0 0 0 .25rem rgba(var(--app-primary-rgb), .13); } .form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); } .page-link { --bs-pagination-color: var(--app-primary); --bs-pagination-focus-color: var(--app-primary-hover); --bs-pagination-hover-color: var(--app-primary-hover); --bs-pagination-active-bg: var(--app-primary); --bs-pagination-active-border-color: var(--app-primary); --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--app-primary-rgb), .13); } .dropdown-item.active, .dropdown-item:active { background-color: var(--app-primary); } a { color: var(--app-primary); } a:hover { color: var(--app-primary-hover); } .btn-primary:not(:disabled):not(.disabled) { box-shadow: 0 .35rem .9rem rgba(var(--app-primary-rgb), .16); } .btn-primary:not(:disabled):not(.disabled):hover { box-shadow: 0 .5rem 1.15rem rgba(var(--app-primary-rgb), .22); } ::selection { background: rgba(var(--app-primary-rgb), .22); } .table { --bs-table-hover-bg: rgba(var(--app-primary-rgb), .035); } .sidebar-footer .app-icon { color: var(--app-accent); } /* Premium shell */ body { background: radial-gradient(circle at 88% -8%, rgba(var(--app-page-tint-rgb), .10), transparent 30rem), var(--bs-tertiary-bg); } .app-sidebar { background: radial-gradient(circle at 15% 5%, rgba(var(--app-accent-rgb), .12), transparent 15rem), linear-gradient(180deg, var(--app-sidebar-start) 0%, var(--app-sidebar-end) 100%); box-shadow: 12px 0 40px rgba(4, 11, 23, .10); } .sidebar-brand { border-color: rgba(255, 255, 255, .10) !important; backdrop-filter: blur(14px); } .brand-mark, .login-logo { background: linear-gradient(135deg, var(--app-primary-bright), var(--app-primary)); box-shadow: 0 .55rem 1.35rem rgba(var(--app-primary-rgb), .25); } .sidebar-link { border: 1px solid transparent; } .sidebar-link:hover { background: rgba(255,255,255,.075); border-color: rgba(255,255,255,.055); } .sidebar-link.active { background: linear-gradient(135deg, var(--app-primary-bright), var(--app-primary)); border-color: rgba(255,255,255,.09); box-shadow: 0 .55rem 1.3rem rgba(var(--app-primary-rgb), .24); } .app-header { background-color: rgba(var(--bs-body-bg-rgb), .88) !important; backdrop-filter: blur(18px) saturate(145%); -webkit-backdrop-filter: blur(18px) saturate(145%); } .card { border-radius: 1rem; } .card.border-0.shadow-sm, .stat-card { box-shadow: 0 .55rem 1.6rem rgba(14, 24, 39, .065) !important; } .stat-card:hover { box-shadow: 0 .8rem 2rem rgba(14, 24, 39, .10) !important; } .stat-icon { box-shadow: inset 0 0 0 1px rgba(var(--app-primary-rgb), .08); } .feature-tile { background: linear-gradient(145deg, rgba(var(--app-primary-rgb), .025), transparent 58%); } .login-page { background: radial-gradient(circle at 85% 8%, rgba(var(--app-primary-rgb), .18), transparent 28rem), radial-gradient(circle at 10% 90%, rgba(var(--app-accent-rgb), .10), transparent 24rem), var(--bs-tertiary-bg) !important; } .login-card { box-shadow: 0 1.2rem 3.4rem rgba(10, 20, 35, .11) !important; } /* Theme selector */ .theme-option { position: relative; display: block; height: 100%; cursor: pointer; } .theme-option > input { position: absolute; opacity: 0; pointer-events: none; } .theme-option-card { position: relative; height: 100%; padding: 1.05rem; border: 1px solid var(--bs-border-color); border-radius: 1rem; background: var(--bs-body-bg); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .theme-option:hover .theme-option-card { transform: translateY(-2px); border-color: rgba(var(--app-primary-rgb), .34); box-shadow: 0 .8rem 1.9rem rgba(14, 24, 39, .08); } .theme-option > input:focus-visible + .theme-option-card { outline: 3px solid rgba(var(--app-primary-rgb), .22); outline-offset: 2px; } .theme-option > input:checked + .theme-option-card { border-color: var(--app-primary); box-shadow: 0 0 0 3px rgba(var(--app-primary-rgb), .10), 0 .8rem 1.9rem rgba(14, 24, 39, .08); } .theme-selected-mark { position: absolute; top: .8rem; right: .8rem; display: inline-flex; width: 1.65rem; height: 1.65rem; align-items: center; justify-content: center; border-radius: 50%; color: var(--app-primary); background: var(--bs-body-bg); opacity: 0; transform: scale(.85); transition: opacity .18s ease, transform .18s ease; } .theme-option > input:checked + .theme-option-card .theme-selected-mark { opacity: 1; transform: scale(1); } .theme-preview-shell { display: grid; grid-template-columns: 25% 1fr; height: 72px; overflow: hidden; border-radius: .75rem; background: #f4f6f9; box-shadow: inset 0 0 0 1px rgba(15,23,42,.06); } .theme-preview-sidebar { background: linear-gradient(180deg, var(--preview-sidebar-start), var(--preview-sidebar-end)); padding: .55rem .4rem; } .theme-preview-sidebar::before, .theme-preview-sidebar::after { content: ''; display: block; height: 5px; margin-bottom: 6px; border-radius: 10px; background: rgba(255,255,255,.55); } .theme-preview-sidebar::after { width: 68%; opacity: .55; } .theme-preview-main { padding: .55rem; } .theme-preview-bar { height: 7px; width: 55%; border-radius: 10px; background: var(--preview-primary); margin-bottom: .55rem; } .theme-preview-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; } .theme-preview-cards span { height: 31px; border-radius: .42rem; background: #fff; box-shadow: 0 2px 8px rgba(15,23,42,.08); } .theme-preview-cards span:last-child { background: linear-gradient(145deg, var(--preview-soft), #fff); } .theme-swatches { display: flex; gap: .35rem; } .theme-swatch { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); } [data-bs-theme="dark"] .bg-primary-subtle { background-color: rgba(var(--app-primary-rgb), .18) !important; } [data-bs-theme="dark"] .card.border-0.shadow-sm, [data-bs-theme="dark"] .stat-card { box-shadow: 0 .55rem 1.6rem rgba(0,0,0,.18) !important; } [data-bs-theme="dark"] .theme-preview-shell { background: #20242b; } [data-bs-theme="dark"] .theme-preview-cards span { background: #2b3038; } [data-bs-theme="dark"] .theme-preview-cards span:last-child { background: rgba(var(--app-primary-rgb), .16); } @media (prefers-reduced-motion: reduce) { .theme-option-card, .theme-selected-mark { transition: none; } }