/* * App-wide teal / turquoise brand palette. * Add class "app-brand-teal" on and include this file after theme CSS. * !important beats branding-loader.js inline --brand-* on documentElement. */ /* Only when dynamic branding has not run (preload + branding-loader set data-branding-ready). */ html.app-brand-teal:not([data-branding-ready]) { --brand-primary: #0d9488 !important; --brand-primary-hover: #0f766e !important; --brand-primary-light: rgba(45, 212, 191, 0.14) !important; --brand-primary-ring: rgba(45, 212, 191, 0.32) !important; --brand-primary-rgb: 13, 148, 136 !important; --brand-secondary: #0891b2 !important; --brand-secondary-rgb: 8, 145, 178 !important; --brand-gradient: linear-gradient(135deg, #0f766e 0%, #0d9488 40%, #06b6d4 78%, #22d3ee 100%) !important; --status-info: #0891b2 !important; --status-info-bg: rgba(6, 182, 212, 0.12) !important; --sidebar-item-active: rgba(13, 148, 136, 0.22) !important; --theme-auth-checkbox-accent: var(--brand-primary) !important; --theme-auth-2fa-bg: linear-gradient(135deg, #ecfdf5, #e0f2fe) !important; --theme-auth-2fa-border: #5eead4 !important; --theme-auth-2fa-title: #134e4a !important; --theme-auth-2fa-text: #0f766e !important; --theme-auth-2fa-icon: #0d9488 !important; --theme-auth-page-overlay: linear-gradient(135deg, rgba(13, 148, 136, 0.09) 0%, rgba(6, 182, 212, 0.07) 52%, rgba(20, 184, 166, 0.05) 100%) !important; --theme-mobile-menu-bin: #0d9488 !important; --theme-mobile-menu-stock: #0891b2 !important; --theme-confetti-1: #0d9488 !important; --theme-confetti-2: #06b6d4 !important; --theme-mobile-shadow-neon-purple: 0 4px 14px rgba(13, 148, 136, 0.2) !important; --theme-mobile-status-info-border: var(--status-info) !important; --theme-mobile-accent-secondary: #14b8a6 !important; --theme-admin-button-action-edit-surface: linear-gradient(135deg, #14b8a6, #2dd4bf) !important; --theme-admin-button-action-edit-hover-surface: linear-gradient(135deg, #0f766e, #14b8a6) !important; --theme-setup-orb-brand: linear-gradient(135deg, #0f766e, #0891b2) !important; --theme-setup-orb-indigo: linear-gradient(135deg, #14b8a6, #5eead4) !important; --theme-setup-progress-fill: linear-gradient(90deg, #0d9488, #06b6d4, #22d3ee) !important; --theme-setup-logo-zone-hover-border: #2dd4bf !important; --theme-setup-accent-text: #14b8a6 !important; /* Admin tickets / appearance swatches use var(--accent, purple fallback) */ --accent: #0891b2 !important; } html.app-brand-teal:not([data-branding-ready]) body.dark-mode { --theme-auth-page-overlay: linear-gradient(135deg, rgba(45, 212, 191, 0.1) 0%, rgba(6, 182, 212, 0.09) 48%, rgba(20, 184, 166, 0.06) 100%) !important; --theme-auth-2fa-bg: linear-gradient(135deg, rgba(6, 78, 59, 0.45), rgba(15, 118, 110, 0.35)) !important; --theme-auth-2fa-border: rgba(45, 212, 191, 0.45) !important; --theme-auth-2fa-title: #ccfbf1 !important; --theme-auth-2fa-text: #99f6e4 !important; --theme-auth-2fa-icon: #5eead4 !important; --theme-mobile-shadow-neon-purple: 0 4px 16px rgba(45, 212, 191, 0.26) !important; } /* Legal / marketing prose: replace fixed violet link & badge text */ html.app-brand-teal:not([data-branding-ready]) .theme-section-badge { color: #99f6e4; } html.app-brand-teal:not([data-branding-ready]) .theme-legal-nav a.is-active { color: #ccfbf1; } html.app-brand-teal:not([data-branding-ready]) .theme-prose a { color: #5eead4; } html.app-brand-teal:not([data-branding-ready]) .theme-prose a:hover { color: #99f6e4; } /* Admin EULA modal header (hardcoded indigo in admin-dashboard.css) */ html.app-brand-teal:not([data-branding-ready]) .eula-modal__header { background: var(--brand-gradient) !important; } html.app-brand-teal:not([data-branding-ready]) .theme-eula-md { margin: 0; padding: 0; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; line-height: 1.55; color: #cbd5e1; } html.app-brand-teal:not([data-branding-ready]) .theme-eula-loading { font-size: 14px; color: #94a3b8; margin: 0; } html.app-brand-teal:not([data-branding-ready]) .theme-eula-error { font-size: 14px; color: #fca5a5; margin: 0; } /* index.html + legacy dashboard (styles.css) — hardcoded indigo/violet */ html.app-brand-teal:not([data-branding-ready]) .setup-progress-bar { background: var(--theme-setup-progress-fill) !important; box-shadow: 0 0 22px rgba(13, 148, 136, 0.22) !important; } html.app-brand-teal:not([data-branding-ready]) .setup-icon { background: linear-gradient(135deg, rgba(13, 148, 136, 0.16), rgba(8, 145, 178, 0.22)) !important; box-shadow: 0 16px 30px rgba(13, 148, 136, 0.16) !important; } html.app-brand-teal:not([data-branding-ready]) .setup-field input:focus { border-color: #14b8a6 !important; box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.18), 0 10px 24px rgba(13, 148, 136, 0.1) !important; } html.app-brand-teal:not([data-branding-ready]) .setup-logo-upload:hover, html.app-brand-teal:not([data-branding-ready]) .setup-logo-upload.dragging { border-color: #14b8a6 !important; background: #ecfdf5 !important; } html.app-brand-teal:not([data-branding-ready]) .setup-btn-primary { background: var(--brand-gradient) !important; box-shadow: 0 16px 30px rgba(13, 148, 136, 0.24) !important; } html.app-brand-teal:not([data-branding-ready]) .setup-btn-primary:hover { box-shadow: 0 20px 34px rgba(13, 148, 136, 0.3) !important; } html.app-brand-teal:not([data-branding-ready]) .setup-btn-primary:active { box-shadow: 0 10px 16px rgba(13, 148, 136, 0.22) !important; } html.app-brand-teal:not([data-branding-ready]) .setup-next-steps { background: linear-gradient(135deg, rgba(13, 148, 136, 0.1), rgba(8, 145, 178, 0.12)) !important; border-color: rgba(45, 212, 191, 0.28) !important; } html.app-brand-teal:not([data-branding-ready]) .setup-next-steps h3 { color: #0f766e !important; } html.app-brand-teal:not([data-branding-ready]) .setup-next-steps li::before { color: #0d9488 !important; } html.app-brand-teal:not([data-branding-ready]) .setup-toggle input:checked + .setup-toggle-slider { background: #0d9488 !important; } /* * Dashboard "All-Time Overview" stat strip only — softer glows, teal/cyan family, * readable values (fixes faint numbers on bright cyan / green gradients). */ html.app-brand-teal:not([data-branding-ready]) .admin-layout .dashboard-overview-head + .stats-grid > .stat-card:nth-child(1), html.app-brand-teal:not([data-branding-ready]) .admin-layout .dash-title + .stats-grid > .stat-card:nth-child(1) { --stat-accent: #5eead4; --stat-accent-soft: rgba(45, 212, 191, 0.1); --stat-accent-soft-alt: rgba(13, 148, 136, 0.07); } html.app-brand-teal:not([data-branding-ready]) .admin-layout .dashboard-overview-head + .stats-grid > .stat-card:nth-child(2), html.app-brand-teal:not([data-branding-ready]) .admin-layout .dash-title + .stats-grid > .stat-card:nth-child(2) { --stat-accent: #99f6e4; --stat-accent-soft: rgba(45, 212, 191, 0.09); --stat-accent-soft-alt: rgba(16, 185, 129, 0.08); } html.app-brand-teal:not([data-branding-ready]) .admin-layout .dashboard-overview-head + .stats-grid > .stat-card:nth-child(3), html.app-brand-teal:not([data-branding-ready]) .admin-layout .dash-title + .stats-grid > .stat-card:nth-child(3) { --stat-accent: #22d3ee; --stat-accent-soft: rgba(34, 211, 238, 0.1); --stat-accent-soft-alt: rgba(13, 148, 136, 0.07); } html.app-brand-teal:not([data-branding-ready]) .admin-layout .dashboard-overview-head + .stats-grid > .stat-card:nth-child(4), html.app-brand-teal:not([data-branding-ready]) .admin-layout .dash-title + .stats-grid > .stat-card:nth-child(4) { --stat-accent: #7dd3fc; --stat-accent-soft: rgba(125, 211, 252, 0.1); --stat-accent-soft-alt: rgba(45, 212, 191, 0.07); } html.app-brand-teal:not([data-branding-ready]) .admin-layout .dashboard-overview-head + .stats-grid > .stat-card:nth-child(5), html.app-brand-teal:not([data-branding-ready]) .admin-layout .dash-title + .stats-grid > .stat-card:nth-child(5) { --stat-accent: #2dd4bf; --stat-accent-soft: rgba(45, 212, 191, 0.1); --stat-accent-soft-alt: rgba(8, 145, 178, 0.07); } html.app-brand-teal:not([data-branding-ready]) .admin-layout .dashboard-overview-head + .stats-grid > .stat-card:nth-child(6), html.app-brand-teal:not([data-branding-ready]) .admin-layout .dash-title + .stats-grid > .stat-card:nth-child(6) { --stat-accent: #67e8f9; --stat-accent-soft: rgba(103, 232, 249, 0.1); --stat-accent-soft-alt: rgba(6, 182, 212, 0.07); } html.app-brand-teal:not([data-branding-ready]) body.dark-mode .admin-layout .dashboard-overview-head + .stats-grid > .stat-card .stat-value, html.app-brand-teal:not([data-branding-ready]) body.dark-mode .admin-layout .dashboard-overview-head + .stats-grid > .stat-card .stat-value span, html.app-brand-teal:not([data-branding-ready]) body.dark-mode .admin-layout .dash-title + .stats-grid > .stat-card .stat-value, html.app-brand-teal:not([data-branding-ready]) body.dark-mode .admin-layout .dash-title + .stats-grid > .stat-card .stat-value span { color: #ecfdf5 !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); } html.app-brand-teal:not([data-branding-ready]) body:not(.dark-mode) .admin-layout .dashboard-overview-head + .stats-grid > .stat-card .stat-value, html.app-brand-teal:not([data-branding-ready]) body:not(.dark-mode) .admin-layout .dashboard-overview-head + .stats-grid > .stat-card .stat-value span, html.app-brand-teal:not([data-branding-ready]) body:not(.dark-mode) .admin-layout .dash-title + .stats-grid > .stat-card .stat-value, html.app-brand-teal:not([data-branding-ready]) body:not(.dark-mode) .admin-layout .dash-title + .stats-grid > .stat-card .stat-value span { color: #115e59 !important; text-shadow: none; } html.app-brand-teal:not([data-branding-ready]) body.dark-mode .admin-layout .dashboard-overview-head + .stats-grid > .stat-card .stat-label, html.app-brand-teal:not([data-branding-ready]) body.dark-mode .admin-layout .dash-title + .stats-grid > .stat-card .stat-label { color: #94a3b8 !important; } html.app-brand-teal:not([data-branding-ready]) body:not(.dark-mode) .admin-layout .dashboard-overview-head + .stats-grid > .stat-card .stat-label, html.app-brand-teal:not([data-branding-ready]) body:not(.dark-mode) .admin-layout .dash-title + .stats-grid > .stat-card .stat-label { color: #475569 !important; } html.app-brand-teal:not([data-branding-ready]) .admin-layout .dashboard-overview-head + .stats-grid > .stat-card .stat-icon, html.app-brand-teal:not([data-branding-ready]) .admin-layout .dash-title + .stats-grid > .stat-card .stat-icon { background: rgba(13, 148, 136, 0.14) !important; border-color: rgba(45, 212, 191, 0.22) !important; } html.app-brand-teal:not([data-branding-ready]) .admin-layout .dashboard-overview-head + .stats-grid > .stat-card:nth-child(1) .stat-icon, html.app-brand-teal:not([data-branding-ready]) .admin-layout .dash-title + .stats-grid > .stat-card:nth-child(1) .stat-icon { color: #5eead4 !important; } html.app-brand-teal:not([data-branding-ready]) .admin-layout .dashboard-overview-head + .stats-grid > .stat-card:nth-child(2) .stat-icon, html.app-brand-teal:not([data-branding-ready]) .admin-layout .dash-title + .stats-grid > .stat-card:nth-child(2) .stat-icon { color: #6ee7b7 !important; } html.app-brand-teal:not([data-branding-ready]) .admin-layout .dashboard-overview-head + .stats-grid > .stat-card:nth-child(3) .stat-icon, html.app-brand-teal:not([data-branding-ready]) .admin-layout .dash-title + .stats-grid > .stat-card:nth-child(3) .stat-icon { color: #22d3ee !important; } html.app-brand-teal:not([data-branding-ready]) .admin-layout .dashboard-overview-head + .stats-grid > .stat-card:nth-child(4) .stat-icon, html.app-brand-teal:not([data-branding-ready]) .admin-layout .dash-title + .stats-grid > .stat-card:nth-child(4) .stat-icon { color: #7dd3fc !important; } html.app-brand-teal:not([data-branding-ready]) .admin-layout .dashboard-overview-head + .stats-grid > .stat-card:nth-child(5) .stat-icon, html.app-brand-teal:not([data-branding-ready]) .admin-layout .dash-title + .stats-grid > .stat-card:nth-child(5) .stat-icon { color: #2dd4bf !important; } html.app-brand-teal:not([data-branding-ready]) .admin-layout .dashboard-overview-head + .stats-grid > .stat-card:nth-child(6) .stat-icon, html.app-brand-teal:not([data-branding-ready]) .admin-layout .dash-title + .stats-grid > .stat-card:nth-child(6) .stat-icon { color: #67e8f9 !important; } html.app-brand-teal:not([data-branding-ready]) .activity-badge.badge-scan { background: rgba(13, 148, 136, 0.12) !important; color: #0f766e !important; } html.app-brand-teal:not([data-branding-ready]) .badge-info { background: rgba(6, 182, 212, 0.12) !important; color: #0891b2 !important; } html.app-brand-teal:not([data-branding-ready]) .notification-info, html.app-brand-teal:not([data-branding-ready]) .notification.info { border-left-color: #0d9488 !important; } html.app-brand-teal:not([data-branding-ready]) .settings-card-icon--appearance { background: #ecfdf5 !important; color: #0d9488 !important; } html.app-brand-teal:not([data-branding-ready]) .wn-header { background: var(--brand-gradient) !important; } html.app-brand-teal:not([data-branding-ready]) .wn-dismiss-label input { accent-color: #0d9488 !important; } html.app-brand-teal:not([data-branding-ready]) .wn-btn { background: var(--brand-gradient) !important; } html.app-brand-teal:not([data-branding-ready]) .wn-btn:hover { box-shadow: 0 4px 16px rgba(13, 148, 136, 0.35) !important; } /* ── Admin dashboard (admin-dashboard.css): hardcoded indigo / purple ── */ html.app-brand-teal:not([data-branding-ready]) .admin-layout .branding-color-preview { background: var(--brand-gradient) !important; } html.app-brand-teal:not([data-branding-ready]) .admin-layout .visual-index-card { border-color: #0d9488 !important; } html.app-brand-teal:not([data-branding-ready]) .admin-layout .visual-index-icon { background: var(--brand-gradient) !important; } html.app-brand-teal:not([data-branding-ready]) .admin-layout .visual-index-progress-fill { background: var(--brand-gradient) !important; } html.app-brand-teal:not([data-branding-ready]) .admin-layout .wh-card-stats strong.wh-card-stats-brand { color: #0d9488 !important; } html.app-brand-teal:not([data-branding-ready]) .admin-layout .wh-bin-product-qty { background: rgba(13, 148, 136, 0.14) !important; color: #0f766e !important; } html.app-brand-teal:not([data-branding-ready]) .admin-layout .ticket-list-dot--resolved { background: #14b8a6 !important; } html.app-brand-teal:not([data-branding-ready]) .admin-layout .tickets-status-badge--resolved { color: #14b8a6 !important; background: rgba(20, 184, 166, 0.16) !important; } html.app-brand-teal:not([data-branding-ready]) .admin-layout .eula-modal__checkbox { accent-color: #0d9488 !important; } html.app-brand-teal:not([data-branding-ready]) .admin-layout .images-stat-pill--indigo { background: var(--brand-gradient) !important; } html.app-brand-teal:not([data-branding-ready]) .admin-layout .users-role-badge--admin { background: var(--brand-gradient) !important; } /* ── Admin dark mode: theme-dark.css used indigo !important — realign to teal ── */ html.app-brand-teal:not([data-branding-ready]) body.dark-mode button:focus-visible, html.app-brand-teal:not([data-branding-ready]) body.dark-mode input:focus-visible, html.app-brand-teal:not([data-branding-ready]) body.dark-mode select:focus-visible { outline-color: rgba(45, 212, 191, 0.45) !important; } html.app-brand-teal:not([data-branding-ready]) body.dark-mode .badge-info { background: rgba(6, 182, 212, 0.18) !important; color: #5eead4 !important; } html.app-brand-teal:not([data-branding-ready]) body.dark-mode .wh-bin-popup-header { background: rgba(13, 148, 136, 0.14) !important; } html.app-brand-teal:not([data-branding-ready]) body.dark-mode .wh-bin-popup-stats .stat-value { color: #5eead4 !important; } html.app-brand-teal:not([data-branding-ready]) body.dark-mode .wh-bin-product-qty { background: rgba(13, 148, 136, 0.2) !important; color: #5eead4 !important; } html.app-brand-teal:not([data-branding-ready]) body.dark-mode .btn-primary { background: rgba(13, 148, 136, 0.2) !important; border-color: rgba(45, 212, 191, 0.45) !important; color: #99f6e4 !important; } html.app-brand-teal:not([data-branding-ready]) body.dark-mode .btn-primary:hover:not(:disabled) { background: rgba(13, 148, 136, 0.3) !important; border-color: rgba(45, 212, 191, 0.65) !important; color: #ccfbf1 !important; } html.app-brand-teal:not([data-branding-ready]) body.dark-mode .btn-preset:hover, html.app-brand-teal:not([data-branding-ready]) body.dark-mode .btn-preset.active { background: rgba(13, 148, 136, 0.15) !important; color: #5eead4 !important; } html.app-brand-teal:not([data-branding-ready]) body.dark-mode .btn-accent-purple { background: rgba(8, 145, 178, 0.16) !important; border-color: rgba(34, 211, 238, 0.4) !important; color: #7dd3fc !important; } html.app-brand-teal:not([data-branding-ready]) body.dark-mode .btn-accent-purple:hover:not(:disabled) { background: rgba(8, 145, 178, 0.26) !important; border-color: rgba(34, 211, 238, 0.65) !important; color: #bae6fd !important; } html.app-brand-teal:not([data-branding-ready]) body.dark-mode .quick-action-btn.primary { background: linear-gradient(135deg, rgba(13, 148, 136, 0.42), rgba(8, 145, 178, 0.32)) !important; color: #ecfdf5 !important; border-color: rgba(45, 212, 191, 0.38) !important; } html.app-brand-teal:not([data-branding-ready]) body.dark-mode a:not(.nav-item):not(.btn):not(.btn-primary):not(.btn-secondary) { color: #5eead4; } html.app-brand-teal:not([data-branding-ready]) body.dark-mode a:not(.nav-item):not(.btn):hover { color: #99f6e4; } html.app-brand-teal:not([data-branding-ready]) body.dark-mode .visual-index-card { border-color: #14b8a6 !important; } /* JS inline colors: theme-dark remapped brand hex to lavender — use teal tints instead */ html.app-brand-teal:not([data-branding-ready]) body.dark-mode [style*="color: #4F46E5"], html.app-brand-teal:not([data-branding-ready]) body.dark-mode [style*="color:#4F46E5"], html.app-brand-teal:not([data-branding-ready]) body.dark-mode [style*="color: #4f46e5"], html.app-brand-teal:not([data-branding-ready]) body.dark-mode [style*="color:#4f46e5"] { color: #5eead4 !important; } html.app-brand-teal:not([data-branding-ready]) body.dark-mode [style*="color: #4338CA"], html.app-brand-teal:not([data-branding-ready]) body.dark-mode [style*="color:#4338CA"], html.app-brand-teal:not([data-branding-ready]) body.dark-mode [style*="color: #4338ca"], html.app-brand-teal:not([data-branding-ready]) body.dark-mode [style*="color:#4338ca"] { color: #2dd4bf !important; } html.app-brand-teal:not([data-branding-ready]) body.dark-mode [style*="color: #7C3AED"], html.app-brand-teal:not([data-branding-ready]) body.dark-mode [style*="color:#7C3AED"], html.app-brand-teal:not([data-branding-ready]) body.dark-mode [style*="color: #7c3aed"], html.app-brand-teal:not([data-branding-ready]) body.dark-mode [style*="color:#7c3aed"] { color: #22d3ee !important; } html.app-brand-teal:not([data-branding-ready]) body.dark-mode [style*="color: #9333EA"], html.app-brand-teal:not([data-branding-ready]) body.dark-mode [style*="color:#9333EA"], html.app-brand-teal:not([data-branding-ready]) body.dark-mode [style*="color: #9333ea"], html.app-brand-teal:not([data-branding-ready]) body.dark-mode [style*="color:#9333ea"] { color: #67e8f9 !important; }