/** * SimplePrint Gumprint Theme — Pastel / Cream Style * Version: 1.0.0 * * Activated by setting data-theme="gumprint" on . * Overrides theme-modern.css tokens and component styles. * Rollback: remove attribute or toggle off. * * Google Font required: Nunito (loaded in master.blade.php when active) */ /* ============================================ 0. FONT FACE (Nunito via Google Fonts) Loaded conditionally; fallback to Inter. ============================================ */ /* ============================================ 1. DESIGN TOKENS — override SP variables ============================================ */ :root[data-theme="gumprint"] { /* ── Brand / Primary ── */ --sp-primary: #7C6AF5; --sp-primary-hover: #6859E8; --sp-primary-dark: #4F3FD6; --sp-primary-light: #F0EEFF; --sp-primary-rgb: 124, 106, 245; /* ── Secondary (deep purple) ── */ --sp-secondary: #2D2458; /* ── Text ── */ --sp-text: #3D3554; --sp-text-secondary: #7B6FA0; --sp-text-muted: #C4B8E0; /* ── Backgrounds ── */ --sp-bg: #FDF8F0; --sp-card: #FFFCF5; /* ── Borders ── */ --sp-border: #EDE8F5; --sp-border-light: #F5F0FF; --sp-input-border: #E0D8F5; /* ── Semantic ── */ --sp-success: #52B788; --sp-success-light: #E8F8F0; --sp-warning: #F4A228; --sp-warning-light: #FFF4E0; --sp-danger: #E05C7E; --sp-danger-light: #FFEEF4; --sp-info: #5B9CF5; --sp-info-light: #EAF3FF; /* ── Radius — rounder ── */ --sp-radius-card: 14px; --sp-radius-input: 10px; --sp-radius-btn: 22px; --sp-radius-badge: 12px; /* ── Shadows — softer ── */ --sp-shadow-card: 0 2px 8px rgba(124, 106, 245, 0.06); --sp-shadow-hover: 0 6px 20px rgba(124, 106, 245, 0.12); --sp-shadow-dropdown:0 8px 24px rgba(124, 106, 245, 0.14); /* ── Typography ── */ --sp-font: 'Nunito', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* ── Transition ── */ --sp-transition: 0.2s ease; /* ── Override legacy SPRUHA variables ── */ --primary: #7C6AF5 !important; --primary-bg-color: #7C6AF5 !important; --primary-bg-hover: #6859E8 !important; --primary-bg-border: #7C6AF5 !important; --primary-transparentcolor: rgba(124, 106, 245, 0.1) !important; --theme-color: #7C6AF5; --theme-color-rgb: 124, 106, 245; } /* ============================================ 2. BASE / BODY ============================================ */ [data-theme="gumprint"] body { font-family: var(--sp-font) !important; background-color: var(--sp-bg) !important; color: var(--sp-text) !important; font-size: 14px !important; line-height: 1.65 !important; letter-spacing: 0.01em; } [data-theme="gumprint"] h1, [data-theme="gumprint"] h2, [data-theme="gumprint"] h3, [data-theme="gumprint"] h4, [data-theme="gumprint"] h5, [data-theme="gumprint"] h6, [data-theme="gumprint"] .h1, [data-theme="gumprint"] .h2, [data-theme="gumprint"] .h3, [data-theme="gumprint"] .h4, [data-theme="gumprint"] .h5, [data-theme="gumprint"] .h6 { font-family: var(--sp-font) !important; color: var(--sp-secondary) !important; font-weight: 700 !important; letter-spacing: -0.01em; } [data-theme="gumprint"] a { color: var(--sp-primary); } [data-theme="gumprint"] a:hover { color: var(--sp-primary-hover); text-decoration: none; } [data-theme="gumprint"] ::selection { background: rgba(124, 106, 245, 0.15); color: var(--sp-text); } /* ============================================ 3. SIDEBAR ============================================ */ [data-theme="gumprint"] .main-sidebar, [data-theme="gumprint"] .main-sidebar-header, [data-theme="gumprint"] .sidemenu-logo { background: #F9F5FF !important; border-right: 1px solid var(--sp-border) !important; box-shadow: none !important; } [data-theme="gumprint"] .main-sidebar-body { background: #F9F5FF !important; } [data-theme="gumprint"] .sidemenu-logo, [data-theme="gumprint"] .main-sidebar-header { border-bottom: 1px solid var(--sp-border) !important; background: #F2ECFF !important; } [data-theme="gumprint"] .sidemenu-logo a, [data-theme="gumprint"] .main-sidebar-header a { color: var(--sp-secondary) !important; } /* Menu items */ [data-theme="gumprint"] .side-menu .nav-link { color: var(--sp-text) !important; font-size: 14px !important; font-weight: 600 !important; padding: 10px 16px !important; border-radius: 0 !important; margin: 0 !important; border-left: 3px solid transparent !important; transition: all var(--sp-transition) !important; } [data-theme="gumprint"] .side-menu .nav-link i, [data-theme="gumprint"] .side-menu .nav-link .sidemenu-icon { color: var(--sp-text-secondary) !important; font-size: 16px !important; width: 22px !important; transition: color var(--sp-transition) !important; } [data-theme="gumprint"] .side-menu .nav-link .sidemenu-icon i { color: var(--sp-text-secondary) !important; } [data-theme="gumprint"] .side-menu .nav-link .sidemenu-label { color: var(--sp-text) !important; font-weight: 600 !important; } [data-theme="gumprint"] .side-menu .nav-link:hover { background: #EDE6FF !important; color: var(--sp-primary) !important; border-left-color: var(--sp-primary-light) !important; } [data-theme="gumprint"] .side-menu .nav-link:hover i, [data-theme="gumprint"] .side-menu .nav-link:hover .sidemenu-icon, [data-theme="gumprint"] .side-menu .nav-link:hover .sidemenu-icon i { color: var(--sp-primary) !important; } [data-theme="gumprint"] .side-menu .nav-link:hover .sidemenu-label { color: var(--sp-primary) !important; } /* Active state */ [data-theme="gumprint"] .side-menu .nav > .nav-item.active > .nav-link, [data-theme="gumprint"] .side-menu .nav-item.show.active > .nav-link.with-sub, [data-theme="gumprint"] .side-menu .nav-item.active > .nav-link.with-sub { background: #EDE6FF !important; color: var(--sp-primary) !important; font-weight: 700 !important; border-left: 3px solid var(--sp-primary) !important; } [data-theme="gumprint"] .side-menu .nav > .nav-item.active > .nav-link i, [data-theme="gumprint"] .side-menu .nav > .nav-item.active > .nav-link .sidemenu-icon, [data-theme="gumprint"] .side-menu .nav > .nav-item.active > .nav-link .sidemenu-icon i, [data-theme="gumprint"] .side-menu .nav-item.show.active > .nav-link.with-sub i, [data-theme="gumprint"] .side-menu .nav-item.show.active > .nav-link.with-sub .sidemenu-icon i, [data-theme="gumprint"] .side-menu .nav-item.active > .nav-link.with-sub i, [data-theme="gumprint"] .side-menu .nav-item.active > .nav-link.with-sub .sidemenu-icon i { color: var(--sp-primary) !important; } [data-theme="gumprint"] .side-menu .nav-item.active > .nav-link .sidemenu-label, [data-theme="gumprint"] .side-menu .nav-item.show.active > .nav-link .sidemenu-label { color: var(--sp-primary) !important; font-weight: 700 !important; } /* Submenu items */ [data-theme="gumprint"] .nav-sub .nav-sub-link { color: var(--sp-text-secondary) !important; font-size: 13.5px !important; font-weight: 500 !important; padding: 7px 16px 7px 44px !important; } [data-theme="gumprint"] .nav-sub .nav-sub-link:hover { color: var(--sp-primary) !important; font-weight: 600 !important; background: transparent !important; } [data-theme="gumprint"] .nav-sub .nav-sub-item.active > .nav-sub-link, [data-theme="gumprint"] .nav-sub .nav-sub-link.active { color: var(--sp-primary) !important; font-weight: 700 !important; background: transparent !important; } /* Menu section headers */ [data-theme="gumprint"] .side-menu .nav-header, [data-theme="gumprint"] .side-menu .nav-label { color: var(--sp-text-muted) !important; font-size: 10px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; padding: 16px 16px 6px !important; } /* Side badge */ [data-theme="gumprint"] .side-badge { background: var(--sp-primary) !important; color: #fff !important; border-radius: 10px !important; font-size: 10px !important; padding: 2px 7px !important; } /* ============================================ 4. HEADER / TOPBAR ============================================ */ [data-theme="gumprint"] .main-header, [data-theme="gumprint"] .side-header { background: #FFFCF5 !important; border-bottom: 1px solid var(--sp-border) !important; box-shadow: 0 1px 0 rgba(124, 106, 245, 0.05) !important; } [data-theme="gumprint"] .main-header .nav-link { color: var(--sp-text-secondary) !important; } [data-theme="gumprint"] .main-header .nav-link:hover { color: var(--sp-primary) !important; } [data-theme="gumprint"] .main-header-left .btn, [data-theme="gumprint"] .main-header-left .animated-arrow { color: var(--sp-text) !important; } /* Search bar */ [data-theme="gumprint"] .main-header-center input, [data-theme="gumprint"] .mega-search-input { background: #F5EFFB !important; border: 1px solid var(--sp-border) !important; border-radius: 24px !important; color: var(--sp-text) !important; font-family: var(--sp-font) !important; } [data-theme="gumprint"] .main-header-center input:focus, [data-theme="gumprint"] .mega-search-input:focus { border-color: var(--sp-primary) !important; box-shadow: 0 0 0 3px rgba(124, 106, 245, 0.12) !important; } [data-theme="gumprint"] .main-header .badge, [data-theme="gumprint"] .header-badge { background: var(--sp-primary) !important; } /* Dropdown */ [data-theme="gumprint"] .dropdown-menu { border: 1px solid var(--sp-border) !important; border-radius: var(--sp-radius-card) !important; box-shadow: var(--sp-shadow-dropdown) !important; background: var(--sp-card) !important; padding: 8px !important; } [data-theme="gumprint"] .dropdown-item { border-radius: 8px !important; padding: 8px 12px !important; color: var(--sp-text) !important; font-size: 13px !important; font-weight: 500 !important; } [data-theme="gumprint"] .dropdown-item:hover, [data-theme="gumprint"] .dropdown-item:focus { background: var(--sp-primary-light) !important; color: var(--sp-primary) !important; } /* ============================================ 5. CARDS & WIDGETS ============================================ */ [data-theme="gumprint"] .card { border: 1px solid var(--sp-border) !important; border-radius: var(--sp-radius-card) !important; box-shadow: var(--sp-shadow-card) !important; background: var(--sp-card) !important; transition: box-shadow var(--sp-transition) !important; } [data-theme="gumprint"] .card:hover { box-shadow: var(--sp-shadow-hover) !important; } [data-theme="gumprint"] .card-header { background: transparent !important; border-bottom: 1px solid var(--sp-border-light) !important; padding: 16px 20px !important; border-radius: var(--sp-radius-card) var(--sp-radius-card) 0 0 !important; } [data-theme="gumprint"] .card-title { color: var(--sp-secondary) !important; font-weight: 700 !important; font-size: 15px !important; } [data-theme="gumprint"] .card-body { padding: 20px !important; } [data-theme="gumprint"] .card-footer { background: transparent !important; border-top: 1px solid var(--sp-border-light) !important; border-radius: 0 0 var(--sp-radius-card) var(--sp-radius-card) !important; } /* ============================================ 6. BUTTONS ============================================ */ [data-theme="gumprint"] .btn, [data-theme="gumprint"] .sp-container button { font-family: var(--sp-font) !important; font-weight: 700 !important; font-size: 13px !important; border-radius: var(--sp-radius-btn) !important; height: 32px !important; line-height: 30px !important; padding: 0 16px !important; transition: all var(--sp-transition) !important; letter-spacing: 0.2px !important; } [data-theme="gumprint"] .btn-primary, [data-theme="gumprint"] .btn-primary:not(:disabled):not(.disabled) { background-color: var(--sp-primary) !important; border-color: var(--sp-primary) !important; color: #fff !important; } [data-theme="gumprint"] .btn-primary:hover, [data-theme="gumprint"] .btn-primary:focus, [data-theme="gumprint"] .btn-primary:not(:disabled):not(.disabled):hover { background-color: var(--sp-primary-hover) !important; border-color: var(--sp-primary-hover) !important; box-shadow: 0 4px 14px rgba(124, 106, 245, 0.35) !important; } [data-theme="gumprint"] .btn-outline-primary { color: var(--sp-primary) !important; border-color: var(--sp-primary) !important; background: transparent !important; } [data-theme="gumprint"] .btn-outline-primary:hover { background: var(--sp-primary) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(124, 106, 245, 0.3) !important; } [data-theme="gumprint"] .btn-success { background-color: var(--sp-success) !important; border-color: var(--sp-success) !important; color: #fff !important; } [data-theme="gumprint"] .btn-success:hover { background-color: #3DA374 !important; border-color: #3DA374 !important; box-shadow: 0 4px 14px rgba(82, 183, 136, 0.35) !important; } [data-theme="gumprint"] .btn-danger { background-color: var(--sp-danger) !important; border-color: var(--sp-danger) !important; color: #fff !important; } [data-theme="gumprint"] .btn-danger:hover { background-color: #C94F6D !important; border-color: #C94F6D !important; } [data-theme="gumprint"] .btn-warning { background-color: var(--sp-warning) !important; border-color: var(--sp-warning) !important; color: #fff !important; } [data-theme="gumprint"] .btn-info { background-color: var(--sp-info) !important; border-color: var(--sp-info) !important; color: #fff !important; } [data-theme="gumprint"] .btn-secondary, [data-theme="gumprint"] .btn-outline-secondary { color: var(--sp-text-secondary) !important; border-color: var(--sp-border) !important; background: var(--sp-card) !important; } [data-theme="gumprint"] .btn-secondary:hover, [data-theme="gumprint"] .btn-outline-secondary:hover { background: var(--sp-primary-light) !important; border-color: var(--sp-primary) !important; color: var(--sp-primary) !important; } [data-theme="gumprint"] .btn-simple-print, [data-theme="gumprint"] .btn-simple-print:focus { background: #FFF !important; border-color: rgba(124, 106, 245, 0.3) !important; color: var(--sp-primary) !important; } [data-theme="gumprint"] .btn-simple-print:hover { border-color: var(--sp-primary) !important; box-shadow: 0 2px 8px rgba(124, 106, 245, 0.15) !important; } [data-theme="gumprint"] .btn-sm { height: 26px !important; line-height: 24px !important; font-size: 12px !important; padding: 0 10px !important; } [data-theme="gumprint"] .btn-xs { height: 20px !important; line-height: 18px !important; font-size: 11px !important; padding: 0 8px !important; } [data-theme="gumprint"] .btn-lg { height: 40px !important; line-height: 38px !important; font-size: 15px !important; padding: 0 28px !important; } /* ============================================ 7. FORMS ============================================ */ [data-theme="gumprint"] .form-control, [data-theme="gumprint"] .form-select, [data-theme="gumprint"] select.form-control { border: 1px solid var(--sp-input-border) !important; border-radius: var(--sp-radius-input) !important; color: var(--sp-text) !important; font-family: var(--sp-font) !important; font-size: 13px !important; height: 34px !important; line-height: 32px !important; padding: 0 12px !important; background-color: #FEFCFF !important; transition: border-color var(--sp-transition), box-shadow var(--sp-transition) !important; } [data-theme="gumprint"] .form-control:focus, [data-theme="gumprint"] .form-select:focus, [data-theme="gumprint"] select.form-control:focus { border-color: var(--sp-primary) !important; box-shadow: 0 0 0 3px rgba(124, 106, 245, 0.12) !important; outline: none !important; background-color: #FFFAFF !important; } [data-theme="gumprint"] .form-control::placeholder { color: var(--sp-text-muted) !important; } [data-theme="gumprint"] .form-label { color: var(--sp-text-secondary) !important; font-weight: 700 !important; font-size: 13px !important; margin-bottom: 6px !important; } [data-theme="gumprint"] textarea.form-control { height: auto !important; padding: 10px 12px !important; line-height: 1.6 !important; min-height: 80px !important; } [data-theme="gumprint"] .custom-control-input:checked ~ .custom-control-label::before, [data-theme="gumprint"] .form-check-input:checked { background-color: var(--sp-primary) !important; border-color: var(--sp-primary) !important; } /* Select2 */ [data-theme="gumprint"] .select2-container--default .select2-selection--single { border: 1px solid var(--sp-input-border) !important; border-radius: var(--sp-radius-input) !important; height: 34px !important; background-color: #FEFCFF !important; } [data-theme="gumprint"] .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 32px !important; padding-left: 12px !important; font-size: 13px !important; color: var(--sp-text) !important; font-family: var(--sp-font) !important; } [data-theme="gumprint"] .select2-container--default .select2-selection--single .select2-selection__arrow { height: 32px !important; } [data-theme="gumprint"] .select2-container--default.select2-container--focus .select2-selection--single, [data-theme="gumprint"] .select2-container--default .select2-selection--single:focus { border-color: var(--sp-primary) !important; box-shadow: 0 0 0 3px rgba(124, 106, 245, 0.12) !important; } [data-theme="gumprint"] .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--sp-primary) !important; } [data-theme="gumprint"] .select2-container--default .select2-selection--multiple { border: 1px solid var(--sp-input-border) !important; border-radius: var(--sp-radius-input) !important; background-color: #FEFCFF !important; } /* ============================================ 8. TABLES ============================================ */ [data-theme="gumprint"] .table { color: var(--sp-text) !important; font-size: 13px !important; } [data-theme="gumprint"] .table thead th { background: #F5F0FF !important; border-bottom: 2px solid var(--sp-border) !important; color: var(--sp-text-secondary) !important; font-weight: 800 !important; font-size: 11.5px !important; text-transform: uppercase !important; letter-spacing: 0.6px !important; } [data-theme="gumprint"] .table td { border-color: var(--sp-border-light) !important; padding: 12px 16px !important; vertical-align: middle !important; } [data-theme="gumprint"] .table-hover tbody tr:hover { background-color: rgba(124, 106, 245, 0.04) !important; } [data-theme="gumprint"] .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(124, 106, 245, 0.02) !important; } /* ============================================ 9. BADGES & STATUS ============================================ */ [data-theme="gumprint"] .badge { font-family: var(--sp-font) !important; font-weight: 700 !important; font-size: 11px !important; padding: 4px 10px !important; border-radius: var(--sp-radius-badge) !important; letter-spacing: 0.3px !important; } [data-theme="gumprint"] .badge-primary, [data-theme="gumprint"] .bg-primary { background-color: var(--sp-primary) !important; color: #fff !important; } [data-theme="gumprint"] .badge-success, [data-theme="gumprint"] .bg-success { background-color: var(--sp-success) !important; color: #fff !important; } [data-theme="gumprint"] .badge-danger, [data-theme="gumprint"] .bg-danger { background-color: var(--sp-danger) !important; color: #fff !important; } [data-theme="gumprint"] .badge-warning, [data-theme="gumprint"] .bg-warning { background-color: var(--sp-warning) !important; color: #fff !important; } [data-theme="gumprint"] .badge-info, [data-theme="gumprint"] .bg-info { background-color: var(--sp-info) !important; color: #fff !important; } [data-theme="gumprint"] .badge-secondary, [data-theme="gumprint"] .bg-secondary { background-color: #B8ADDC !important; color: #fff !important; } /* ============================================ 10. MODALS ============================================ */ [data-theme="gumprint"] .modal-content { border: none !important; border-radius: 18px !important; box-shadow: 0 24px 64px rgba(124, 106, 245, 0.18) !important; background: var(--sp-card) !important; } [data-theme="gumprint"] .modal-header { border-bottom: 1px solid var(--sp-border-light) !important; padding: 18px 24px !important; background: #F5F0FF !important; border-radius: 18px 18px 0 0 !important; } [data-theme="gumprint"] .modal-title { font-weight: 700 !important; font-size: 16px !important; color: var(--sp-secondary) !important; } [data-theme="gumprint"] .modal-body { padding: 24px !important; } [data-theme="gumprint"] .modal-footer { border-top: 1px solid var(--sp-border-light) !important; padding: 14px 24px !important; background: transparent !important; border-radius: 0 0 18px 18px !important; } /* ============================================ 11. PAGINATION & TABS ============================================ */ [data-theme="gumprint"] .page-link { color: var(--sp-text-secondary) !important; border-color: var(--sp-border) !important; border-radius: 8px !important; margin: 0 2px !important; font-size: 13px !important; padding: 6px 12px !important; font-weight: 600 !important; background: var(--sp-card) !important; } [data-theme="gumprint"] .page-item.active .page-link { background-color: var(--sp-primary) !important; border-color: var(--sp-primary) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(124, 106, 245, 0.3) !important; } [data-theme="gumprint"] .page-link:hover { background: var(--sp-primary-light) !important; color: var(--sp-primary) !important; border-color: var(--sp-primary) !important; } /* Tabs */ [data-theme="gumprint"] .nav-tabs { border-bottom: 2px solid var(--sp-border) !important; } [data-theme="gumprint"] .nav-tabs .nav-link { color: var(--sp-text-secondary) !important; border: none !important; border-bottom: 3px solid transparent !important; margin-bottom: -2px !important; padding: 10px 18px !important; font-weight: 700 !important; border-radius: 0 !important; } [data-theme="gumprint"] .nav-tabs .nav-link.active, [data-theme="gumprint"] .nav-tabs .nav-link:hover { color: var(--sp-primary) !important; border-bottom-color: var(--sp-primary) !important; background: transparent !important; } [data-theme="gumprint"] .nav-pills .nav-link.active { background-color: var(--sp-primary) !important; border-radius: var(--sp-radius-btn) !important; box-shadow: 0 2px 8px rgba(124, 106, 245, 0.3) !important; } /* ============================================ 12. ALERTS ============================================ */ [data-theme="gumprint"] .alert { border-radius: var(--sp-radius-card) !important; border: none !important; font-size: 13px !important; font-weight: 500 !important; } [data-theme="gumprint"] .alert-primary { background: #EEEAFF !important; color: var(--sp-primary-dark) !important; } [data-theme="gumprint"] .alert-success { background: var(--sp-success-light) !important; color: #2A7A55 !important; } [data-theme="gumprint"] .alert-danger { background: var(--sp-danger-light) !important; color: #A03054 !important; } [data-theme="gumprint"] .alert-warning { background: var(--sp-warning-light) !important; color: #7A5200 !important; } [data-theme="gumprint"] .alert-info { background: var(--sp-info-light) !important; color: #1A4EA6 !important; } /* ============================================ 13. CONTENT AREA & PAGE HEADER ============================================ */ [data-theme="gumprint"] .main-content { background: var(--sp-bg) !important; } [data-theme="gumprint"] .main-content .page-header { margin-bottom: 20px !important; } /* Breadcrumb */ [data-theme="gumprint"] .breadcrumb { background: transparent !important; padding: 0 !important; font-size: 13px !important; } [data-theme="gumprint"] .breadcrumb-item a { color: var(--sp-text-secondary) !important; font-weight: 600 !important; } [data-theme="gumprint"] .breadcrumb-item.active { color: var(--sp-text-muted) !important; } [data-theme="gumprint"] .breadcrumb-item + .breadcrumb-item::before { color: var(--sp-text-muted) !important; } /* ============================================ 14. DASHBOARD WIDGET OVERRIDES ============================================ */ [data-theme="gumprint"] .dv2-kpi-card { border: 1px solid var(--sp-border) !important; border-radius: var(--sp-radius-card) !important; } [data-theme="gumprint"] .dv2-kpi-card:hover { box-shadow: var(--sp-shadow-hover) !important; transform: translateY(-2px); } [data-theme="gumprint"] .dv2-card { border: 1px solid var(--sp-border) !important; border-radius: var(--sp-radius-card) !important; box-shadow: var(--sp-shadow-card) !important; } [data-theme="gumprint"] .dv2-type-btn.active { background: var(--sp-primary) !important; border-color: var(--sp-primary) !important; color: #fff !important; } [data-theme="gumprint"] .dv2-range-btn.active { background: var(--sp-secondary) !important; border-color: var(--sp-secondary) !important; color: #fff !important; } [data-theme="gumprint"] .dv2-health-metric-clickable:hover { background: var(--sp-primary-light) !important; } /* ============================================ 15. DROPSHIP STATUS BADGES ============================================ */ [data-theme="gumprint"] .ds-status-pending { background: #FFF4E0 !important; color: #B86B00 !important; } [data-theme="gumprint"] .ds-status-processing { background: #EAF3FF !important; color: #1A5CA8 !important; } [data-theme="gumprint"] .ds-status-confirmed { background: #E8F8F0 !important; color: #1E6B44 !important; } [data-theme="gumprint"] .ds-status-completed { background: #F0EEFF !important; color: #4F3FD6 !important; } [data-theme="gumprint"] .ds-status-cancelled { background: #FFEEF4 !important; color: #A03054 !important; } [data-theme="gumprint"] .ds-filter-btn { border-radius: var(--sp-radius-btn) !important; } [data-theme="gumprint"] .ds-tab.active { background: var(--sp-primary) !important; border-color: var(--sp-primary) !important; } /* ============================================ 16. MEGA SEARCH ============================================ */ [data-theme="gumprint"] .mega-search-overlay { border-radius: 16px !important; background: var(--sp-card) !important; border: 1px solid var(--sp-border) !important; box-shadow: var(--sp-shadow-dropdown) !important; } [data-theme="gumprint"] .mega-search-tab.active { background: var(--sp-primary) !important; color: #fff !important; } /* ============================================ 17. AI ASSISTANT ============================================ */ [data-theme="gumprint"] .ai-panel-header { background: linear-gradient(135deg, var(--sp-primary), var(--sp-primary-hover)) !important; } [data-theme="gumprint"] .ai-send-btn { background: var(--sp-primary) !important; } [data-theme="gumprint"] .ai-send-btn:hover { background: var(--sp-primary-hover) !important; } /* ============================================ 18. SWEETALERT ============================================ */ [data-theme="gumprint"] .sweet-alert { border-radius: 18px !important; font-family: var(--sp-font) !important; background: var(--sp-card) !important; } [data-theme="gumprint"] .sweet-alert h2 { font-family: var(--sp-font) !important; color: var(--sp-secondary) !important; font-weight: 700 !important; } [data-theme="gumprint"] .sweet-alert p { color: var(--sp-text-secondary) !important; } [data-theme="gumprint"] .sweet-alert button.confirm { background-color: var(--sp-primary) !important; border-radius: var(--sp-radius-btn) !important; font-family: var(--sp-font) !important; font-weight: 700 !important; padding: 8px 24px !important; } [data-theme="gumprint"] .sweet-alert button.cancel { border-radius: var(--sp-radius-btn) !important; font-family: var(--sp-font) !important; font-weight: 700 !important; padding: 8px 24px !important; } /* ============================================ 19. PROGRESS & MISC ============================================ */ [data-theme="gumprint"] .progress-bar { background-color: var(--sp-primary) !important; } [data-theme="gumprint"] .bg-primary { background-color: var(--sp-primary) !important; } [data-theme="gumprint"] .text-primary { color: var(--sp-primary) !important; } [data-theme="gumprint"] .border-primary { border-color: var(--sp-primary) !important; } [data-theme="gumprint"] .bg-success { background-color: var(--sp-success) !important; } [data-theme="gumprint"] .bg-danger { background-color: var(--sp-danger) !important; } [data-theme="gumprint"] .bg-warning { background-color: var(--sp-warning) !important; } [data-theme="gumprint"] .bg-info { background-color: var(--sp-info) !important; } [data-theme="gumprint"] .bg-primary, [data-theme="gumprint"] .btn-primary { color: #fff !important; } /* Toast */ [data-theme="gumprint"] .toast-success { background-color: var(--sp-success) !important; } [data-theme="gumprint"] .toast-error { background-color: var(--sp-danger) !important; } [data-theme="gumprint"] .toast-warning { background-color: var(--sp-warning) !important; } [data-theme="gumprint"] .toast-info { background-color: var(--sp-info) !important; } /* Tooltip */ [data-theme="gumprint"] .tooltip-inner { font-family: var(--sp-font) !important; border-radius: 6px !important; font-size: 12px !important; background: var(--sp-secondary) !important; } /* Scrollbar */ [data-theme="gumprint"] ::-webkit-scrollbar { width: 6px; height: 6px; } [data-theme="gumprint"] ::-webkit-scrollbar-track { background: transparent; } [data-theme="gumprint"] ::-webkit-scrollbar-thumb { background: #D4C8F0; border-radius: 3px; } [data-theme="gumprint"] ::-webkit-scrollbar-thumb:hover { background: #B8AAE0; } /* Skeleton */ [data-theme="gumprint"] .skeleton-box { background: linear-gradient(90deg, #EDE6FF 25%, #DDD4FF 50%, #EDE6FF 75%) !important; background-size: 200% 100% !important; animation: skeletonPulseGP 1.5s ease-in-out infinite !important; border-radius: 6px !important; } @keyframes skeletonPulseGP { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* DataTables */ [data-theme="gumprint"] .dataTables_processing { background: rgba(255, 252, 245, 0.95) !important; color: var(--sp-text-muted) !important; } /* ============================================ 20. THEME TOGGLE BUTTON ============================================ */ .btn-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--sp-border); background: var(--sp-card); color: var(--sp-text-secondary); cursor: pointer; transition: all 0.2s ease; font-size: 15px; padding: 0; margin: 0 4px; vertical-align: middle; box-shadow: none; outline: none; line-height: 1; } .btn-theme-toggle:hover { border-color: var(--sp-primary); color: var(--sp-primary); background: var(--sp-primary-light); transform: rotate(20deg); } [data-theme="gumprint"] .btn-theme-toggle { border-color: var(--sp-border); background: #F0EEFF; color: var(--sp-primary); } [data-theme="gumprint"] .btn-theme-toggle:hover { background: #E5DAFF; border-color: var(--sp-primary); }