/* ============================================ SAFARI SEEDS - PREMIUM VISUAL THEME Visual-only overrides: colors, gradients, shadows, hover effects, typography. NO layout or positioning changes. Load LAST in for correct specificity. ============================================ */ /* ============================================ DESIGN TOKENS - PREMIUM PALETTE ============================================ */ :root { /* Primary - Rich Teal-Green */ --pm-primary: #0d9488; --pm-primary-light: #14b8a6; --pm-primary-dark: #0f766e; --pm-primary-deeper: #115e59; --pm-primary-50: #f0fdfa; --pm-primary-100: #ccfbf1; --pm-primary-200: #99f6e4; /* Secondary - Warm Amber-Gold */ --pm-accent: #f59e0b; --pm-accent-light: #fbbf24; --pm-accent-dark: #d97706; /* Sidebar Navy */ --pm-sidebar-bg: linear-gradient(180deg, #0f172a 0%, #1e293b 100%); --pm-sidebar-active: rgba(14, 165, 156, 0.15); --pm-sidebar-active-border: #14b8a6; --pm-sidebar-hover: rgba(255, 255, 255, 0.06); --pm-sidebar-text: rgba(255, 255, 255, 0.65); --pm-sidebar-text-active: #5eead4; /* Surfaces */ --pm-bg-body: #f1f5f9; --pm-bg-card: #ffffff; --pm-bg-card-hover: #ffffff; /* Semantic */ --pm-success: #10b981; --pm-success-bg: #ecfdf5; --pm-warning: #f59e0b; --pm-warning-bg: #fffbeb; --pm-danger: #ef4444; --pm-danger-bg: #fef2f2; --pm-info: #3b82f6; --pm-info-bg: #eff6ff; /* Text */ --pm-text-primary: #0f172a; --pm-text-secondary: #475569; --pm-text-muted: #94a3b8; /* Shadows */ --pm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06); --pm-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04); --pm-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04); --pm-shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06); --pm-shadow-glow: 0 0 20px rgba(14, 165, 156, 0.15); --pm-shadow-btn: 0 4px 14px rgba(13, 148, 136, 0.3); --pm-shadow-btn-hover: 0 8px 24px rgba(13, 148, 136, 0.4); /* Borders */ --pm-border: #e2e8f0; --pm-border-light: #f1f5f9; /* Radius */ --pm-radius-sm: 8px; --pm-radius-md: 12px; --pm-radius-lg: 16px; --pm-radius-xl: 20px; --pm-radius-full: 9999px; /* Transitions */ --pm-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1); --pm-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); } /* ============================================ BODY & GLOBAL ============================================ */ body { background: var(--pm-bg-body) !important; color: var(--pm-text-primary) !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } /* ============================================ SIDEBAR - DARK NAVY GRADIENT ============================================ */ .sidebar { background: var(--pm-sidebar-bg) !important; border-right: none !important; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12) !important; } .sidebar-header { border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; background: rgba(0, 0, 0, 0.1); } .sidebar-logo { background: rgba(255, 255, 255, 0.95) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); border-radius: var(--pm-radius-md) !important; } .sidebar-brand h1 { color: #e2e8f0 !important; font-weight: 700 !important; letter-spacing: -0.3px; } .sidebar-brand p { color: var(--pm-sidebar-text) !important; } /* Nav section titles */ .nav-section-title, .nav-label { color: rgba(148, 163, 184, 0.6) !important; font-size: 10px !important; letter-spacing: 1.2px !important; font-weight: 700 !important; text-transform: uppercase !important; } /* Nav items */ .nav-item { margin: 2px 10px !important; border-radius: var(--pm-radius-md) !important; transition: all var(--pm-transition) !important; background: transparent !important; position: relative; } .nav-item a { color: var(--pm-sidebar-text) !important; font-weight: 500 !important; font-size: 14px !important; transition: all var(--pm-transition) !important; } .nav-item a svg, .nav-item a i { opacity: 0.6; transition: all var(--pm-transition); } .nav-item:hover { background: var(--pm-sidebar-hover) !important; transform: translateX(0) !important; } .nav-item:hover a { color: rgba(255, 255, 255, 0.9) !important; } .nav-item:hover a svg, .nav-item:hover a i { opacity: 1; color: var(--pm-sidebar-text-active); } /* Active nav item - GLOWING accent */ .nav-item.active { background: var(--pm-sidebar-active) !important; box-shadow: inset 3px 0 0 var(--pm-sidebar-active-border); } .nav-item.active a { color: var(--pm-sidebar-text-active) !important; font-weight: 600 !important; } .nav-item.active a svg, .nav-item.active a i { opacity: 1; color: var(--pm-sidebar-text-active); } /* Sidebar footer */ .sidebar-footer { border-top: 1px solid rgba(255, 255, 255, 0.08) !important; background: rgba(0, 0, 0, 0.15); } .sidebar-footer .user-name { color: #e2e8f0 !important; } .sidebar-footer .user-role { color: var(--pm-sidebar-text) !important; } .sidebar-footer .avatar { background: linear-gradient(135deg, var(--pm-primary) 0%, var(--pm-primary-light) 100%) !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(13, 148, 136, 0.3); } /* ============================================ HEADER / TOPBAR ============================================ */ .header { background: rgba(255, 255, 255, 0.85) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--pm-border) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important; } .breadcrumb-item a { color: var(--pm-text-muted) !important; transition: color var(--pm-transition); } .breadcrumb-item a:hover { color: var(--pm-primary) !important; } .breadcrumb-item.active { color: var(--pm-text-primary) !important; font-weight: 600 !important; } .breadcrumb-separator { color: var(--pm-text-muted) !important; } /* Search bar */ .header-search input { background: var(--pm-bg-body) !important; border: 1.5px solid transparent !important; border-radius: var(--pm-radius-full) !important; padding-left: 40px !important; transition: all var(--pm-transition) !important; font-size: 14px !important; height: 42px !important; color: var(--pm-text-primary) !important; } .header-search input:focus { background: #ffffff !important; border-color: var(--pm-primary) !important; box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.1) !important; } .header-search .search-icon { color: var(--pm-text-muted) !important; } /* Notification bell */ .notification-btn { border-radius: var(--pm-radius-md) !important; transition: all var(--pm-transition) !important; color: var(--pm-text-secondary) !important; } .notification-btn:hover { background: var(--pm-primary-50) !important; color: var(--pm-primary) !important; } /* User dropdown */ .user-dropdown { background: var(--pm-bg-body) !important; border-radius: var(--pm-radius-full) !important; border: 1px solid var(--pm-border) !important; transition: all var(--pm-transition) !important; } .user-dropdown:hover { background: #ffffff !important; border-color: var(--pm-primary-200) !important; box-shadow: var(--pm-shadow-sm); } .user-dropdown .avatar { background: linear-gradient(135deg, var(--pm-primary) 0%, var(--pm-primary-light) 100%) !important; color: #ffffff !important; } /* ============================================ PAGE CONTENT AREA ============================================ */ .main-content { background: var(--pm-bg-body) !important; } .page-title { color: var(--pm-text-primary) !important; font-weight: 700 !important; letter-spacing: -0.5px !important; } .page-subtitle { color: var(--pm-text-secondary) !important; } /* ============================================ CARDS - CLEAN WHITE, REFINED SHADOWS ============================================ */ .card { background: var(--pm-bg-card) !important; border-radius: var(--pm-radius-lg) !important; border: 1px solid #cbd5e1 !important; box-shadow: var(--pm-shadow-sm) !important; transition: all var(--pm-transition) !important; } .card:hover { box-shadow: var(--pm-shadow-md) !important; transform: translateY(-1px); border-color: var(--pm-border) !important; } .card-header { border-bottom: 1px solid var(--pm-border-light) !important; } .card-title { color: var(--pm-text-primary) !important; font-weight: 700 !important; font-size: 1rem !important; letter-spacing: -0.2px; } /* ============================================ STAT CARDS - COLORFUL ACCENT BORDERS ============================================ */ .stat-card, .dashboard-card { background: var(--pm-bg-card) !important; border-radius: var(--pm-radius-lg) !important; border: 1px solid #cbd5e1 !important; box-shadow: var(--pm-shadow-sm) !important; padding: 16px !important; transition: all var(--pm-transition) !important; position: relative; display: flex !important; flex-direction: column !important; /* Vertical stack */ align-items: flex-start !important; gap: 8px !important; overflow: visible !important; } .stat-card:hover, .dashboard-card:hover { box-shadow: var(--pm-shadow-md) !important; transform: translateY(-2px) !important; } /* Colorful left accent – override the existing ::before */ .stat-card::before, .dashboard-card::before { background: linear-gradient(180deg, var(--pm-primary) 0%, var(--pm-primary-light) 100%) !important; width: 4px !important; border-radius: 0 !important; } /* Color each stat card differently using nth-child */ .stats-grid .stat-card:nth-child(1)::before { background: linear-gradient(180deg, #10b981 0%, #34d399 100%) !important; } .stats-grid .stat-card:nth-child(2)::before { background: linear-gradient(180deg, #3b82f6 0%, #60a5fa 100%) !important; } .stats-grid .stat-card:nth-child(3)::before { background: linear-gradient(180deg, #f59e0b 0%, #fbbf24 100%) !important; } .stats-grid .stat-card:nth-child(4)::before { background: linear-gradient(180deg, #ef4444 0%, #f87171 100%) !important; } .stat-label { color: var(--pm-text-secondary) !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; font-size: 0.75rem !important; } .stat-value { color: var(--pm-text-primary) !important; font-weight: 800 !important; font-size: 1.2rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; word-break: normal !important; line-height: 1.1 !important; max-width: 100% !important; display: block !important; } .stat-icon { width: 32px !important; height: 32px !important; border-radius: var(--pm-radius-md) !important; display: flex !important; align-items: center !important; justify-content: center !important; } .stat-icon i, .stat-icon svg { font-size: 16px !important; width: 16px !important; height: 16px !important; } /* Adjust stat icon backgrounds */ .stat-icon { border-radius: var(--pm-radius-md) !important; transition: all var(--pm-transition); } .stat-icon.success { background: var(--pm-success-bg) !important; color: var(--pm-success) !important; } .stat-icon.info { background: var(--pm-info-bg) !important; color: var(--pm-info) !important; } .stat-icon.warning { background: var(--pm-warning-bg) !important; color: var(--pm-warning) !important; } .stat-icon.danger { background: var(--pm-danger-bg) !important; color: var(--pm-danger) !important; } /* Stat change indicators */ .stat-change { font-size: 0.8rem; } .stat-change.positive { color: var(--pm-success) !important; } .stat-change.negative { color: var(--pm-danger) !important; } .stat-change.warning { color: var(--pm-warning) !important; } /* ============================================ QUICK ACTION CARDS ============================================ */ .quick-action-card { background: var(--pm-bg-card) !important; border-radius: var(--pm-radius-lg) !important; border: 1px solid var(--pm-border-light) !important; box-shadow: var(--pm-shadow-sm) !important; transition: all var(--pm-transition) !important; } .quick-action-card:hover { box-shadow: var(--pm-shadow-lg) !important; transform: translateY(-4px) !important; border-color: var(--pm-primary-200) !important; } .quick-action-card .icon { border-radius: var(--pm-radius-md) !important; transition: all var(--pm-transition); } .quick-action-card:hover .icon { transform: scale(1.08); } .quick-action-card .label { color: var(--pm-text-secondary) !important; font-weight: 600 !important; font-size: 0.8125rem !important; } /* ============================================ BUTTONS - GRADIENT WITH LIFT ============================================ */ .btn { border-radius: var(--pm-radius-md) !important; font-weight: 600 !important; transition: all var(--pm-transition) !important; font-family: 'Inter', sans-serif !important; border: none !important; cursor: pointer; letter-spacing: -0.1px; } .btn:hover { transform: translateY(-1px) !important; } .btn:active { transform: translateY(0) !important; } /* Primary button - Teal gradient */ .btn-primary { background: linear-gradient(135deg, var(--pm-primary-dark) 0%, var(--pm-primary) 50%, var(--pm-primary-light) 100%) !important; color: #ffffff !important; box-shadow: var(--pm-shadow-btn) !important; } .btn-primary:hover { box-shadow: var(--pm-shadow-btn-hover) !important; background: linear-gradient(135deg, var(--pm-primary-deeper) 0%, var(--pm-primary-dark) 50%, var(--pm-primary) 100%) !important; } /* Secondary button */ .btn-secondary, .btn-outline { background: #ffffff !important; color: var(--pm-text-secondary) !important; border: 1.5px solid var(--pm-border) !important; box-shadow: var(--pm-shadow-sm) !important; } .btn-secondary:hover, .btn-outline:hover { background: var(--pm-bg-body) !important; border-color: var(--pm-primary-200) !important; color: var(--pm-primary) !important; box-shadow: var(--pm-shadow-md) !important; } /* Success button */ .btn-success { background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3) !important; } .btn-success:hover { box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4) !important; } /* Danger button */ .btn-danger { background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%) !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3) !important; } .btn-danger:hover { box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4) !important; } /* Warning button */ .btn-warning { background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(245, 158, 11, 0.3) !important; } .btn-warning:hover { box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4) !important; } /* Outline variants */ .btn-outline-primary { background: transparent !important; border: 1.5px solid var(--pm-primary) !important; color: var(--pm-primary) !important; } .btn-outline-primary:hover { background: var(--pm-primary-50) !important; } .btn-outline-danger { background: transparent !important; border: 1.5px solid var(--pm-danger) !important; color: var(--pm-danger) !important; } .btn-outline-danger:hover { background: var(--pm-danger-bg) !important; } .btn-outline-success { background: transparent !important; border: 1.5px solid var(--pm-success) !important; color: var(--pm-success) !important; } .btn-outline-success:hover { background: var(--pm-success-bg) !important; } .btn-outline-warning { background: transparent !important; border: 1.5px solid var(--pm-warning) !important; color: var(--pm-warning) !important; } .btn-outline-warning:hover { background: var(--pm-warning-bg) !important; } /* ============================================ FORM INPUTS - CLEAN WITH FOCUS GLOW ============================================ */ .form-control, input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="date"], input[type="tel"], input[type="search"], select, textarea { border: 1.5px solid var(--pm-border) !important; border-radius: var(--pm-radius-md) !important; background: #ffffff !important; color: var(--pm-text-primary) !important; font-family: 'Inter', sans-serif !important; transition: all var(--pm-transition) !important; font-size: 14px; /* no !important — let inline styles override for compact forms */ box-sizing: border-box; } .form-control::placeholder, input::placeholder { color: var(--pm-text-muted) !important; } .form-control:focus, input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="tel"]:focus, input[type="search"]:focus, select:focus, textarea:focus { outline: none !important; border-color: var(--pm-primary) !important; box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.1) !important; } .form-control:disabled, input:disabled, select:disabled, textarea:disabled { background: var(--pm-bg-body) !important; color: var(--pm-text-muted) !important; cursor: not-allowed !important; } .form-label, label { color: var(--pm-text-secondary) !important; font-weight: 600 !important; font-size: 0.8125rem; /* no !important — let inline styles override */ letter-spacing: 0.2px; } .form-group { margin-bottom: 1rem; } /* In modal bodies, reduce form spacing for compact layout */ .modal-body .form-group { margin-bottom: 0.5rem; } /* Ensure labels in flex containers don't add unexpected margin */ .modal-body .form-label, .modal-body label { margin-bottom: 2px !important; } /* ============================================ TABLES - ZEBRA STRIPES & ROW HOVER ============================================ */ table { border-collapse: separate !important; border-spacing: 0 !important; background: transparent !important; table-layout: auto !important; width: 100% !important; } .table-container { overflow-x: auto !important; } table thead { background: linear-gradient(135deg, var(--pm-bg-body) 0%, #e2e8f0 100%) !important; } table thead th { color: var(--pm-text-secondary) !important; font-weight: 700 !important; font-size: 0.7rem !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; padding: 10px 8px !important; border-bottom: 2px solid var(--pm-border) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } table thead th:first-child { border-top-left-radius: var(--pm-radius-md); } table thead th:last-child { border-top-right-radius: var(--pm-radius-md); } table tbody tr { background: #ffffff !important; transition: all var(--pm-transition) !important; box-shadow: none !important; border-radius: 0 !important; transform: none !important; } /* Zebra striping */ table tbody tr:nth-child(even) { background: var(--pm-primary-50) !important; } /* Row hover - accent highlight */ table tbody tr:hover { background: var(--pm-primary-100) !important; transform: none !important; box-shadow: inset 3px 0 0 var(--pm-primary) !important; } table tbody td { padding: 10px 8px !important; font-size: 0.8125rem !important; color: var(--pm-text-primary) !important; border-top: none !important; border-bottom: 1px solid var(--pm-border-light) !important; font-weight: 500 !important; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Remove individual cell border-radius that causes visual breaks */ table tbody td:first-child { border-left: none !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } table tbody td:last-child { border-right: none !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* ============================================ BADGES / PILLS - STATUS INDICATORS ============================================ */ .badge { border-radius: var(--pm-radius-full) !important; font-size: 0.6875rem !important; font-weight: 700 !important; letter-spacing: 0.4px !important; padding: 4px 12px !important; text-transform: uppercase !important; } .badge-success, .badge-green { background: var(--pm-success-bg) !important; color: #059669 !important; } .badge-warning, .badge-yellow { background: var(--pm-warning-bg) !important; color: #b45309 !important; } .badge-danger, .badge-red { background: var(--pm-danger-bg) !important; color: #dc2626 !important; } .badge-info, .badge-blue { background: var(--pm-info-bg) !important; color: #2563eb !important; } .badge-primary { background: var(--pm-primary-50) !important; color: var(--pm-primary-dark) !important; } /* ============================================ MODALS - FROSTED BACKDROP + SLIDE-IN ============================================ */ .modal { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background: rgba(15, 23, 42, 0.5) !important; } .modal-content { border-radius: var(--pm-radius-xl) !important; border: 1px solid var(--pm-border-light) !important; box-shadow: var(--pm-shadow-xl) !important; overflow: hidden !important; } /* NOTE: No background !important here so inline styles on colored headers (e.g. purchase blue gradient) are preserved */ .modal-header { border-bottom: 1px solid var(--pm-border) !important; padding: 1rem 1.25rem !important; } .modal-header h3, .modal-header .modal-title { font-weight: 700 !important; font-size: 1.125rem !important; letter-spacing: -0.2px; } .modal-body { background: #ffffff !important; } .modal-footer { background: var(--pm-bg-body) !important; border-top: 1px solid var(--pm-border) !important; padding: 0.75rem 1.25rem !important; } /* ---- CLOSE MODAL BUTTON (× or X icon) ---- */ .close-modal { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; border-radius: var(--pm-radius-md) !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1 !important; color: var(--pm-danger) !important; background: rgba(239, 68, 68, 0.08) !important; border: 1.5px solid rgba(239, 68, 68, 0.2) !important; cursor: pointer !important; transition: all var(--pm-transition) !important; flex-shrink: 0 !important; } .close-modal:hover { background: rgba(239, 68, 68, 0.15) !important; color: #dc2626 !important; border-color: rgba(239, 68, 68, 0.4) !important; transform: scale(1.05) !important; } /* Close button on colored (dark) headers — keep white color */ .modal-header[style*="background"] .close-modal { color: #ffffff !important; background: rgba(255, 255, 255, 0.15) !important; border-color: rgba(255, 255, 255, 0.25) !important; } .modal-header[style*="background"] .close-modal:hover { background: rgba(255, 255, 255, 0.25) !important; border-color: rgba(255, 255, 255, 0.4) !important; color: #ffffff !important; } /* Cancel / Close buttons in footer */ .close-modal-btn { min-height: 36px !important; padding: 0 16px !important; font-size: 13px !important; } /* Save / Submit buttons in modal footer */ .modal-footer .btn-primary, .modal-footer .btn-success, #saveInvoiceBtn, #savePurchaseBtn { min-height: 36px !important; padding: 0 20px !important; font-size: 13px !important; min-width: 130px !important; } /* Override compact modal overrides to keep footer visible */ .modal-compact .modal-footer { padding: 0.75rem 1rem !important; } /* ============================================ TABS - MODERN UNDERLINE STYLE ============================================ */ .tabs { border-bottom: 2px solid var(--pm-border) !important; } .tab-btn { border-radius: var(--pm-radius-md) var(--pm-radius-md) 0 0 !important; color: var(--pm-text-muted) !important; font-weight: 600 !important; transition: all var(--pm-transition) !important; border-bottom: 2px solid transparent !important; margin-bottom: -2px; } .tab-btn:hover { color: var(--pm-primary) !important; background: var(--pm-primary-50) !important; transform: none !important; } .tab-btn.active { color: var(--pm-primary) !important; background: var(--pm-primary-50) !important; border-bottom-color: var(--pm-primary) !important; } /* ============================================ SCROLLBAR - THEMED ============================================ */ ::-webkit-scrollbar { width: 8px !important; height: 8px !important; } ::-webkit-scrollbar-track { background: var(--pm-bg-body) !important; border-radius: 10px !important; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--pm-primary) 0%, var(--pm-primary-light) 100%) !important; border-radius: 10px !important; border: 2px solid var(--pm-bg-body) !important; } ::-webkit-scrollbar-thumb:hover { background: var(--pm-primary-dark) !important; } /* Firefox scrollbar */ * { scrollbar-width: thin !important; scrollbar-color: var(--pm-primary) var(--pm-bg-body) !important; } /* ============================================ AVATARS ============================================ */ .avatar { background: linear-gradient(135deg, var(--pm-primary) 0%, var(--pm-primary-light) 100%) !important; color: #ffffff !important; font-weight: 700 !important; box-shadow: 0 2px 8px rgba(13, 148, 136, 0.25); } /* ============================================ TOGGLE / SWITCH ============================================ */ .toggle-switch input:checked+.toggle-slider { background: linear-gradient(135deg, var(--pm-primary) 0%, var(--pm-primary-light) 100%) !important; } /* ============================================ SEARCH RESULTS DROPDOWN ============================================ */ .search-results-dropdown { border-radius: var(--pm-radius-lg) !important; border: 1px solid var(--pm-border) !important; box-shadow: var(--pm-shadow-lg) !important; background: #ffffff !important; } .search-result-item:hover { background: var(--pm-primary-50) !important; } .search-result-icon { background: var(--pm-primary-50) !important; color: var(--pm-primary) !important; border-radius: var(--pm-radius-md) !important; } /* ============================================ LOADING SPINNER ============================================ */ .loading-spinner { border-color: rgba(13, 148, 136, 0.15) !important; border-top-color: var(--pm-primary) !important; } /* Progress bar */ .progress-bar-fill { background: linear-gradient(90deg, var(--pm-primary) 0%, var(--pm-primary-light) 100%) !important; } /* ============================================ TOASTS / ALERTS ============================================ */ .toast { border-radius: var(--pm-radius-lg) !important; box-shadow: var(--pm-shadow-lg) !important; border: 1px solid var(--pm-border-light) !important; } /* ============================================ PAGE-SPECIFIC OVERRIDES ============================================ */ /* Login page gradient override */ .login-left { background: linear-gradient(135deg, #0f172a 0%, var(--pm-primary-deeper) 50%, var(--pm-primary-dark) 100%) !important; } .login-left .brand-logo { background: rgba(255, 255, 255, 0.95) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); } .login-left .brand-logo svg { color: var(--pm-primary) !important; } /* Login form */ .login-btn { background: linear-gradient(135deg, var(--pm-primary-dark) 0%, var(--pm-primary) 100%) !important; box-shadow: var(--pm-shadow-btn) !important; } .login-btn:hover { box-shadow: var(--pm-shadow-btn-hover) !important; } /* ============================================ TEXT UTILITY OVERRIDES ============================================ */ .text-primary { color: var(--pm-primary) !important; } .text-success { color: var(--pm-success) !important; } .text-danger { color: var(--pm-danger) !important; } .text-warning { color: var(--pm-warning) !important; } .text-info { color: var(--pm-info) !important; } .text-muted { color: var(--pm-text-muted) !important; } /* ============================================ NOTIFICATION DROPDOWN ============================================ */ .notification-dropdown-container { border-radius: var(--pm-radius-lg) !important; box-shadow: var(--pm-shadow-xl) !important; border: 1px solid var(--pm-border) !important; } /* ============================================ SUBTLE ANIMATIONS / MICRO-INTERACTIONS ============================================ */ /* Card entrance animation */ @keyframes pmFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .animate-fade-in { animation: pmFadeUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) both !important; } /* Button press feedback */ .btn:active { transform: translateY(1px) scale(0.98) !important; transition: transform 80ms ease !important; } /* ============================================ SELECTION HIGHLIGHT ============================================ */ ::selection { background: rgba(13, 148, 136, 0.2); color: var(--pm-text-primary); } ::-moz-selection { background: rgba(13, 148, 136, 0.2); color: var(--pm-text-primary); } /* ============================================ DARK SECTION HEADINGS (for generated pages) ============================================ */ h1, h2, h3, h4, h5, h6 { color: var(--pm-text-primary); letter-spacing: -0.3px; } /* ============================================ LINKS ============================================ */ a { color: var(--pm-primary); transition: color var(--pm-transition); } a:hover { color: var(--pm-primary-dark); } /* ============================================ PROFILE DROPDOWN OVERRIDE ============================================ */ .profile-dropdown { border-radius: var(--pm-radius-lg) !important; box-shadow: var(--pm-shadow-xl) !important; border: 1px solid var(--pm-border) !important; } /* ============================================ CHECKBOX / RADIO STYLING ============================================ */ input[type="checkbox"] { accent-color: var(--pm-primary) !important; } input[type="radio"] { accent-color: var(--pm-primary) !important; } /* ============================================ RESPONSIVE ADJUSTMENTS ============================================ */ @media (max-width: 768px) { .sidebar { box-shadow: 8px 0 32px rgba(0, 0, 0, 0.2) !important; } } /* Print: remove premium visual overrides */ @media print { .sidebar, .header { box-shadow: none !important; background: none !important; } .card { box-shadow: none !important; border: 1px solid #ddd !important; } table tbody tr:nth-child(even) { background: #f9f9f9 !important; } table tbody tr:hover { box-shadow: none !important; } } /* ============================================ PURCHASE / SALES / PROCESSING - COLORED CURSOR When user clicks/focuses an input, show a coloured background so active field is instantly visible (like voucher fields). ============================================ */ /* --- Client / Party / Supplier fields (all pages) --- */ input#supplierInput:focus, input[name="supplierName"]:focus, input#customerInput:focus, input[name="customerName"]:focus, input#purchaseSearchId:focus, input#salesSearchId:focus, input#partyName:focus, input#outPartyName:focus, input[name="debitAccountName"]:focus, input[name="creditAccountName"]:focus { background: #fff7ed !important; border-color: #f97316 !important; box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.25) !important; color: #9a3412 !important; font-weight: 700 !important; } input#purchaseContact:focus, input#salesContact:focus, input#processingContact:focus, input#processingCity:focus, input#outDate:focus, input#outRepNo:focus { background: #fdf4ff !important; border-color: #d946ef !important; box-shadow: 0 0 0 3px rgba(217, 70, 239, 0.2) !important; color: #86198f !important; font-weight: 600 !important; } /* --- Purchase form inputs --- */ #purchaseGroupSelect:focus, #purchaseSupplierItemsSelect:focus, #purchaseItemSearch:focus { background: #f0fdf4 !important; border-color: #22c55e !important; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15) !important; color: #166534 !important; font-weight: 600 !important; } #purchaseQty:focus { background: #eff6ff !important; border-color: #3b82f6 !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important; color: #1e40af !important; font-weight: 700 !important; } #purchaseRate:focus { background: #fef3c7 !important; border-color: #f59e0b !important; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15) !important; color: #92400e !important; font-weight: 700 !important; } #purchaseSaleRate:focus { background: #fce7f3 !important; border-color: #ec4899 !important; box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.15) !important; color: #9d174d !important; font-weight: 700 !important; } #purchasePackSize:focus { background: #ede9fe !important; border-color: #8b5cf6 !important; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15) !important; color: #5b21b6 !important; font-weight: 700 !important; } #purchasePackUnit:focus { background: #ede9fe !important; border-color: #8b5cf6 !important; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15) !important; color: #5b21b6 !important; font-weight: 700 !important; } #purchaseTotal:focus { background: #ecfdf5 !important; border-color: #10b981 !important; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important; color: #065f46 !important; font-weight: 800 !important; } /* ============================================ SALES FORM - COLORED CURSOR/FOCUS ============================================ */ #salesGroupSelect:focus, #salesItemSelectCascading:focus { background: #f0fdf4 !important; border-color: #22c55e !important; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15) !important; color: #166534 !important; font-weight: 600 !important; } #salesQty:focus { background: #eff6ff !important; border-color: #3b82f6 !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important; color: #1e40af !important; font-weight: 700 !important; } #salesRate:focus { background: #fef3c7 !important; border-color: #f59e0b !important; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15) !important; color: #92400e !important; font-weight: 700 !important; } #salesDiscount:focus, #salesOtherCharges:focus { background: #fce7f3 !important; border-color: #ec4899 !important; box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.15) !important; color: #9d174d !important; font-weight: 700 !important; } #salesGst:focus { background: #ede9fe !important; border-color: #8b5cf6 !important; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15) !important; color: #5b21b6 !important; font-weight: 700 !important; } #salesPackSize:focus { background: #ede9fe !important; border-color: #8b5cf6 !important; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15) !important; color: #5b21b6 !important; font-weight: 700 !important; } #salesTotal:focus { background: #ecfdf5 !important; border-color: #10b981 !important; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important; color: #065f46 !important; font-weight: 800 !important; } /* ============================================ PROCESSING FORM - COLORED CURSOR/FOCUS ============================================ */ #inputBags:focus { background: #eff6ff !important; border-color: #3b82f6 !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important; color: #1e40af !important; font-weight: 700 !important; } #inputWeight:focus { background: #f0fdf4 !important; border-color: #22c55e !important; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15) !important; color: #166534 !important; font-weight: 700 !important; } #inputRate:focus { background: #fef3c7 !important; border-color: #f59e0b !important; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15) !important; color: #92400e !important; font-weight: 700 !important; } #inputAmount:focus { background: #ecfdf5 !important; border-color: #10b981 !important; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important; color: #065f46 !important; font-weight: 800 !important; } #inputUnit:focus { background: #ede9fe !important; border-color: #8b5cf6 !important; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15) !important; color: #5b21b6 !important; font-weight: 700 !important; } #inputAvgWeight:focus { background: #fce7f3 !important; border-color: #ec4899 !important; box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.15) !important; color: #9d174d !important; font-weight: 700 !important; } #outReceiveNow:focus { background: #fef3c7 !important; border-color: #f59e0b !important; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15) !important; color: #92400e !important; font-weight: 700 !important; }