/* ═══════════════════════════════════════════════════════════════════ EXOTICA IT SOLUTIONS — Premium Dashboard UI v5.0 Deep Gloss · Multi-layer shadows · Spring Hover Interactions Inspired by: O2O Brand Protector — Business Dashboard aesthetic Constraint: Visual-only — zero functionality changes ═══════════════════════════════════════════════════════════════════ */ /* ── Design Tokens ─────────────────────────────────────────────── */ :root { --ei-primary: #5b5ff5; --ei-primary-dark: #4338ca; --ei-primary-light: #e0e7ff; --ei-violet: #7c3aed; --ei-violet-light: #ede9fe; --ei-emerald: #059669; --ei-teal: #0d9488; --ei-amber: #d97706; --ei-red: #dc2626; --ei-surface: #ffffff; --ei-surface-2: #f8fafc; --ei-surface-3: #eef2ff; --ei-border: rgba(91, 95, 245, 0.12); --ei-text-primary: #0f172a; --ei-text-secondary: #475569; --ei-text-muted: #94a3b8; /* Spring easing */ --ei-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ei-ease: cubic-bezier(0.4, 0, 0.2, 1); --ei-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275); --ei-duration: 240ms; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PAGE BACKGROUND — vivid mesh + dot grid ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .sales_automation_sec main { background-color: #edfcfa; background-image: radial-gradient(ellipse at 8% 0%, rgba(14, 116, 144, 0.14) 0%, transparent 45%), radial-gradient(ellipse at 92% 95%, rgba(20, 184, 166, 0.12) 0%, transparent 45%), radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, 0.70) 0%, transparent 60%), radial-gradient(ellipse at 20% 70%, rgba(6, 182, 212, 0.08) 0%, transparent 40%), url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='1.2' fill='%230e7490' fill-opacity='0.05'/%3E%3C/svg%3E"); scrollbar-width: thin; scrollbar-color: #99e6dc transparent; } .sales_automation { padding: 28px !important; background: transparent; } /* Custom scrollbar */ .sales_automation_sec main::-webkit-scrollbar { width: 5px; } .sales_automation_sec main::-webkit-scrollbar-track { background: transparent; } .sales_automation_sec main::-webkit-scrollbar-thumb { background: #c7d2fe; border-radius: 4px; } .sales_automation_sec main::-webkit-scrollbar-thumb:hover { background: #a5b4fc; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ DASHBOARD HEADER — deep glossy dark gradient ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .sales_automation_sec header { background: linear-gradient(135deg, #555496 0%, #3a38a7 40%, #7c55f1 75%, #3c35a7 100%) !important; border-bottom: none !important; padding: 20px 32px !important; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 18px rgba(15, 12, 80, 0.55), 0 2px 0 rgba(255,255,255,0.06) inset, 0 -1px 0 rgba(255,255,255,0.04) inset !important; overflow: hidden; } /* Animated shimmer sweep */ .sales_automation_sec header::before { content: ''; position: absolute; top: 0; left: -140%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); transform: skewX(-22deg); animation: header-shimmer 5s ease-in-out infinite; pointer-events: none; } /* Orb glow top-right */ .sales_automation_sec header::after { content: ''; position: absolute; top: -70%; right: -4%; width: 260px; height: 260px; background: radial-gradient(circle, rgba(139,92,246,0.30) 0%, transparent 65%); pointer-events: none; } @keyframes header-shimmer { 0% { left: -140%; } 100% { left: 220%; } } .sales_automation_sec header h1 { color: #ffffff !important; font-size: 1.05rem !important; font-weight: 700 !important; line-height: 1.55 !important; letter-spacing: -0.01em; text-shadow: 0 2px 12px rgba(0,0,0,0.40); position: relative; z-index: 1; } /* Merit / Demerit glassmorphic badges */ .sales_automation_sec header .flex.gap-2 .inline-flex, .sales_automation_sec header [class*="inline-flex"] { backdrop-filter: blur(16px) saturate(200%) !important; -webkit-backdrop-filter: blur(16px) saturate(200%) !important; border: 1px solid rgba(255,255,255,0.24) !important; font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 0.04em; transition: transform var(--ei-duration) var(--ei-spring), box-shadow var(--ei-duration) var(--ei-ease) !important; position: relative; overflow: hidden; z-index: 1; } .sales_automation_sec header .flex.gap-2 .inline-flex:hover, .sales_automation_sec header [class*="inline-flex"]:hover { transform: translateY(-2px) scale(1.06) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.30) !important; } .sales_automation_sec header .bg-green-100 { background: rgba(16,185,129,0.24) !important; color: #6ee7b7 !important; } .sales_automation_sec header .bg-red-100 { background: rgba(239,68,68,0.24) !important; color: #fca5a5 !important; } .sales_automation_sec header .bg-gray-100 { background: rgba(255,255,255,0.16) !important; color: #e2e8f0 !important; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ VIVID GRADIENT STAT CARDS — deep gloss look ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .automation_unit > div:not(.ei-connects-grid) { border-radius: 20px !important; border: none !important; padding: 14px 18px !important; transition: transform var(--ei-duration) var(--ei-spring), box-shadow var(--ei-duration) var(--ei-ease) !important; position: relative !important; overflow: hidden !important; cursor: default; /* Embossed inner top edge */ box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset !important; } /* ── Vivid gradient cycling — 6 bold colors ── */ .automation_unit > div:not(.ei-connects-grid):nth-child(6n+1) { background: linear-gradient(145deg, #6265f7 0%, #4f46e5 40%, #7c3aed 100%) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.30) inset, 0 12px 36px rgba(91,95,245,0.50), 0 4px 10px rgba(0,0,0,0.10) !important; } .automation_unit > div:not(.ei-connects-grid):nth-child(6n+2) { background: linear-gradient(145deg, #3b82f6 0%, #2563eb 40%, #7c3aed 100%) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.30) inset, 0 12px 36px rgba(37,99,235,0.50), 0 4px 10px rgba(0,0,0,0.10) !important; } .automation_unit > div:not(.ei-connects-grid):nth-child(6n+3) { background: linear-gradient(145deg, #06b6d4 0%, #0891b2 40%, #059669 100%) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.30) inset, 0 12px 36px rgba(8,145,178,0.50), 0 4px 10px rgba(0,0,0,0.10) !important; } .automation_unit > div:not(.ei-connects-grid):nth-child(6n+4) { background: linear-gradient(145deg, #fbbf24 0%, #f59e0b 40%, #ef4444 100%) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.30) inset, 0 12px 36px rgba(245,158,11,0.50), 0 4px 10px rgba(0,0,0,0.10) !important; } .automation_unit > div:not(.ei-connects-grid):nth-child(6n+5) { background: linear-gradient(145deg, #f472b6 0%, #ec4899 40%, #8b5cf6 100%) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.30) inset, 0 12px 36px rgba(236,72,153,0.48), 0 4px 10px rgba(0,0,0,0.10) !important; } .automation_unit > div:not(.ei-connects-grid):nth-child(6n+6) { background: linear-gradient(145deg, #34d399 0%, #10b981 40%, #2563eb 100%) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.30) inset, 0 12px 36px rgba(16,185,129,0.48), 0 4px 10px rgba(0,0,0,0.10) !important; } /* ── GLOSS LAYER 1: top dome highlight ── */ .automation_unit > div:not(.ei-connects-grid)::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 55%; background: linear-gradient(180deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0.10) 60%, transparent 100% ); border-radius: 20px 20px 70% 70% / 20px 20px 40% 40%; pointer-events: none; z-index: 1; } /* ── GLOSS LAYER 2: shimmer sweep on hover ── */ .automation_unit > div:not(.ei-connects-grid)::after { content: ''; position: absolute; top: -10%; left: -100%; width: 60%; height: 120%; background: linear-gradient( 105deg, transparent 0%, rgba(255,255,255,0.12) 30%, rgba(255,255,255,0.40) 50%, rgba(255,255,255,0.12) 70%, transparent 100% ); transform: skewX(-15deg); transition: left 0.70s cubic-bezier(0.25, 0.46, 0.45, 0.94); pointer-events: none; z-index: 2; } /* Hover: dramatic lift + colored glow */ .automation_unit > div:not(.ei-connects-grid):hover { transform: translateY(-10px) scale(1.03) !important; } .automation_unit > div:not(.ei-connects-grid):nth-child(6n+1):hover { box-shadow: 0 1px 0 rgba(255,255,255,0.30) inset, 0 28px 60px rgba(91,95,245,0.65), 0 10px 22px rgba(0,0,0,0.12) !important; } .automation_unit > div:not(.ei-connects-grid):nth-child(6n+2):hover { box-shadow: 0 1px 0 rgba(255,255,255,0.30) inset, 0 28px 60px rgba(37,99,235,0.65), 0 10px 22px rgba(0,0,0,0.12) !important; } .automation_unit > div:not(.ei-connects-grid):nth-child(6n+3):hover { box-shadow: 0 1px 0 rgba(255,255,255,0.30) inset, 0 28px 60px rgba(8,145,178,0.62), 0 10px 22px rgba(0,0,0,0.12) !important; } .automation_unit > div:not(.ei-connects-grid):nth-child(6n+4):hover { box-shadow: 0 1px 0 rgba(255,255,255,0.30) inset, 0 28px 60px rgba(245,158,11,0.62), 0 10px 22px rgba(0,0,0,0.12) !important; } .automation_unit > div:not(.ei-connects-grid):nth-child(6n+5):hover { box-shadow: 0 1px 0 rgba(255,255,255,0.30) inset, 0 28px 60px rgba(236,72,153,0.58), 0 10px 22px rgba(0,0,0,0.12) !important; } .automation_unit > div:not(.ei-connects-grid):nth-child(6n+6):hover { box-shadow: 0 1px 0 rgba(255,255,255,0.30) inset, 0 28px 60px rgba(16,185,129,0.62), 0 10px 22px rgba(0,0,0,0.12) !important; } /* Trigger shimmer on hover */ .automation_unit > div:not(.ei-connects-grid):hover::after { left: 150%; } /* All text inside vivid cards → white */ .automation_unit > div:not(.ei-connects-grid) * { position: relative; z-index: 3; } .automation_unit > div:not(.ei-connects-grid) p, .automation_unit > div:not(.ei-connects-grid) span, .automation_unit > div:not(.ei-connects-grid) a { color: rgba(255,255,255,0.92) !important; text-decoration: none !important; } .automation_unit > div:not(.ei-connects-grid) a { display: block; } /* Stat labels */ .automation_unit > div:not(.ei-connects-grid) .text-xs, .automation_unit > div:not(.ei-connects-grid) p.text-xs { font-size: 0.65rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.10em !important; color: rgba(255,255,255,0.75) !important; margin-bottom: 8px !important; line-height: 1.4 !important; } /* Stat values */ .automation_unit > div:not(.ei-connects-grid) .text-xl, .automation_unit > div:not(.ei-connects-grid) p.text-xl { font-size: 1.15rem !important; font-weight: 800 !important; letter-spacing: -0.03em !important; line-height: 1.2 !important; color: #ffffff !important; margin-top: 4px !important; text-shadow: 0 2px 14px rgba(0,0,0,0.28), 0 1px 2px rgba(0,0,0,0.20) !important; } /* Force color utilities to white inside vivid cards */ .automation_unit > div:not(.ei-connects-grid) .text-red-500, .automation_unit > div:not(.ei-connects-grid) .text-green-500, .automation_unit > div:not(.ei-connects-grid) .text-yellow-500, .automation_unit > div:not(.ei-connects-grid) .text-orange-500, .automation_unit > div:not(.ei-connects-grid) .text-slate-600, .automation_unit > div:not(.ei-connects-grid) .text-slate-900 { color: #ffffff !important; } /* Revenue motivational message pill */ .automation_unit > div:not(.ei-connects-grid) p.text-sm.italic { font-size: 0.69rem !important; font-style: normal !important; font-weight: 600 !important; margin-top: 12px !important; color: rgba(255,255,255,0.90) !important; background: rgba(0,0,0,0.18) !important; border-radius: 8px !important; padding: 6px 12px !important; line-height: 1.45; backdrop-filter: blur(6px); display: inline-block; border: 1px solid rgba(255,255,255,0.12) !important; } /* Stagger entrance animation */ @keyframes ei-card-in { from { opacity: 0; transform: translateY(26px) scale(0.92); } to { opacity: 1; transform: translateY(0) scale(1); } } .automation_unit > div:not(.ei-connects-grid) { animation: ei-card-in 0.50s var(--ei-spring) both; } .automation_unit > div:not(.ei-connects-grid):nth-child(1) { animation-delay: 0.04s; } .automation_unit > div:not(.ei-connects-grid):nth-child(2) { animation-delay: 0.09s; } .automation_unit > div:not(.ei-connects-grid):nth-child(3) { animation-delay: 0.14s; } .automation_unit > div:not(.ei-connects-grid):nth-child(4) { animation-delay: 0.19s; } .automation_unit > div:not(.ei-connects-grid):nth-child(5) { animation-delay: 0.24s; } .automation_unit > div:not(.ei-connects-grid):nth-child(6) { animation-delay: 0.29s; } .automation_unit > div:not(.ei-connects-grid):nth-child(7) { animation-delay: 0.34s; } .automation_unit > div:not(.ei-connects-grid):nth-child(8) { animation-delay: 0.39s; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ CONNECTS CARDS — vivid gradient treatment ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .ei-connects-card { border-radius: 20px !important; border: none !important; padding: 14px 18px !important; overflow: hidden !important; position: relative; transition: transform var(--ei-duration) var(--ei-spring), box-shadow var(--ei-duration) var(--ei-ease) !important; } .ei-connects-card:nth-child(3n+1) { background: linear-gradient(145deg, #6265f7 0%, #4f46e5 40%, #7c3aed 100%) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset, 0 12px 36px rgba(91,95,245,0.50) !important; } .ei-connects-card:nth-child(3n+2) { background: linear-gradient(145deg, #38bdf8 0%, #2563eb 40%, #0891b2 100%) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset, 0 12px 36px rgba(37,99,235,0.50) !important; } .ei-connects-card:nth-child(3n+3) { background: linear-gradient(145deg, #34d399 0%, #059669 40%, #10b981 100%) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset, 0 12px 36px rgba(5,150,105,0.50) !important; } /* Gloss dome */ .ei-connects-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 55%; background: linear-gradient(180deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0.10) 60%, transparent 100% ); border-radius: 20px 20px 70% 70% / 20px 20px 40% 40%; pointer-events: none; z-index: 1; opacity: 1 !important; transition: none !important; } /* Shimmer on hover */ .ei-connects-card::after { content: ''; position: absolute; top: -10%; left: -100%; width: 60%; height: 120%; background: linear-gradient(105deg, transparent, rgba(255,255,255,0.38), transparent); transform: skewX(-15deg); transition: left 0.70s cubic-bezier(0.25, 0.46, 0.45, 0.94); pointer-events: none; z-index: 2; } .ei-connects-card:hover { transform: translateY(-10px) scale(1.03) !important; } .ei-connects-card:nth-child(3n+1):hover { box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset, 0 28px 60px rgba(91,95,245,0.65) !important; } .ei-connects-card:nth-child(3n+2):hover { box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset, 0 28px 60px rgba(37,99,235,0.65) !important; } .ei-connects-card:nth-child(3n+3):hover { box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset, 0 28px 60px rgba(5,150,105,0.65) !important; } .ei-connects-card:hover::after { left: 150%; } .ei-connects-card__label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em; color: rgba(255,255,255,0.76) !important; margin-bottom: 4px !important; display: block; position: relative; z-index: 3; } .ei-connects-card__value { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.03em; color: #ffffff !important; line-height: 1.2; text-shadow: 0 2px 10px rgba(0,0,0,0.22); position: relative; z-index: 3; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ FILTER PANEL — premium glassmorphism ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .fiter_sec { background: rgba(255,255,255,0.88) !important; backdrop-filter: blur(24px) saturate(200%) !important; -webkit-backdrop-filter: blur(24px) saturate(200%) !important; border: 1px solid rgba(91,95,245,0.16) !important; border-top: 1px solid rgba(255,255,255,0.90) !important; border-radius: 20px !important; box-shadow: 0 1px 0 rgba(255,255,255,0.98) inset, 0 12px 40px rgba(91,95,245,0.12), 0 2px 6px rgba(0,0,0,0.04) !important; padding: 26px 30px !important; } .fiter_sec > p.font-semibold { font-size: 0.63rem !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; color: var(--ei-text-muted) !important; margin-bottom: 20px !important; } /* Inputs & selects */ .fiter_sec select, .fiter_sec input[type="date"] { border: 1.5px solid rgba(91,95,245,0.18) !important; border-radius: 12px !important; padding: 11px 14px !important; font-size: 0.875rem !important; color: var(--ei-text-primary) !important; background: rgba(255,255,255,0.92) !important; backdrop-filter: blur(8px) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 1px 0 rgba(255,255,255,0.90) inset !important; transition: border-color var(--ei-duration) var(--ei-ease), box-shadow var(--ei-duration) var(--ei-ease), transform 150ms var(--ei-ease) !important; } .fiter_sec select:hover, .fiter_sec input[type="date"]:hover { border-color: rgba(91,95,245,0.35) !important; transform: translateY(-1px) !important; } .fiter_sec select:focus, .fiter_sec input[type="date"]:focus { outline: none !important; border-color: var(--ei-primary) !important; box-shadow: 0 0 0 3.5px rgba(91,95,245,0.16), 0 4px 12px rgba(91,95,245,0.16) !important; background: #ffffff !important; transform: none !important; } .fiter_sec label { font-size: 0.66rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.09em !important; color: var(--ei-text-secondary) !important; margin-bottom: 7px !important; display: block; } /* Apply button — glossy gradient */ .fiter_sec button[type="submit"], .fiter_sec form > div > button { background: linear-gradient(145deg, #6265f7 0%, #5b5ff5 40%, #7c3aed 100%) !important; color: #ffffff !important; border: none !important; border-radius: 12px !important; padding: 12px 36px !important; font-size: 0.875rem !important; font-weight: 700 !important; cursor: pointer !important; letter-spacing: 0.02em; position: relative; overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset, 0 8px 28px rgba(91,95,245,0.52) !important; transition: transform var(--ei-duration) var(--ei-spring), box-shadow var(--ei-duration) var(--ei-ease) !important; } .fiter_sec button[type="submit"]::before, .fiter_sec form > div > button::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, transparent 100%); border-radius: 12px 12px 50% 50%; pointer-events: none; } .fiter_sec button[type="submit"]::after, .fiter_sec form > div > button::after { content: ''; position: absolute; top: 0; left: -90%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.30), transparent); transform: skewX(-15deg); transition: left 0.55s ease; pointer-events: none; } .fiter_sec button[type="submit"]:hover, .fiter_sec form > div > button:hover { transform: translateY(-3px) scale(1.03) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset, 0 16px 38px rgba(91,95,245,0.64) !important; } .fiter_sec button[type="submit"]:hover::after, .fiter_sec form > div > button:hover::after { left: 135%; } .fiter_sec button[type="submit"]:active, .fiter_sec form > div > button:active { transform: translateY(0) scale(0.98) !important; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ CHART SECTION CARDS — glass morphism ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .automation_chart_bx { background: rgba(255,255,255,0.94) !important; backdrop-filter: blur(20px) !important; border: 1px solid rgba(255,255,255,0.88) !important; border-bottom: 1px solid rgba(91,95,245,0.10) !important; border-right: 1px solid rgba(91,95,245,0.10) !important; border-radius: 20px !important; box-shadow: 0 1px 0 rgba(255,255,255,0.98) inset, 0 10px 40px rgba(91,95,245,0.12), 0 2px 8px rgba(0,0,0,0.04) !important; transition: transform var(--ei-duration) var(--ei-spring), box-shadow var(--ei-duration) var(--ei-ease) !important; overflow: hidden; position: relative; } /* Gradient accent line at top */ .automation_chart_bx::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #5b5ff5, #8b5cf6, #06b6d4); opacity: 0; transition: opacity var(--ei-duration) var(--ei-ease); } .automation_chart_bx:hover { transform: translateY(-6px) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.98) inset, 0 28px 60px rgba(91,95,245,0.20), 0 6px 16px rgba(0,0,0,0.06) !important; } .automation_chart_bx:hover::before { opacity: 1; } .automation_chart_bx > p.font-semibold { font-size: 0.63rem !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.11em !important; color: var(--ei-text-muted) !important; border-bottom: 1px solid rgba(91,95,245,0.09); padding-bottom: 14px !important; margin-bottom: 18px !important; } /* Deal status + conversions cards */ #deal-status-section .card, #conversions-section .card { background: rgba(255,255,255,0.96) !important; backdrop-filter: blur(18px) !important; border-radius: 20px !important; border: 1px solid rgba(255,255,255,0.88) !important; border-bottom: 1px solid rgba(91,95,245,0.10) !important; border-right: 1px solid rgba(91,95,245,0.10) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.98) inset, 0 10px 40px rgba(91,95,245,0.12), 0 2px 8px rgba(0,0,0,0.04) !important; transition: transform var(--ei-duration) var(--ei-spring), box-shadow var(--ei-duration) var(--ei-ease) !important; position: relative; overflow: hidden; } /* Top accent line on deal cards */ #deal-status-section .card::before { content: 'Deal Status'; display: block; font-size: 0.63rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.11em; color: #94a3b8; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid rgba(91,95,245,0.09); } #deal-status-section .card:hover, #conversions-section .card:hover { transform: translateY(-6px) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.98) inset, 0 28px 60px rgba(91,95,245,0.20), 0 6px 16px rgba(0,0,0,0.06) !important; } /* Circular progress glow */ .circular-progress { filter: drop-shadow(0 4px 18px rgba(91, 95, 245, 0.24)); } /* Funnel bars */ .funnel-bar { background: #eef2ff !important; border-radius: 99px !important; height: 8px !important; overflow: hidden !important; } .funnel-bar-fill { border-radius: 99px !important; height: 8px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.14) !important; } .funnel-label { font-size: 0.75rem !important; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ REVENUE CARDS — glass + colored top accent ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .ei-rev-card { background: rgba(255,255,255,0.97) !important; border-radius: 20px !important; padding: 22px 22px 20px !important; border: 1px solid rgba(255,255,255,0.90) !important; border-bottom: 1px solid rgba(0,0,0,0.05) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.98) inset, 0 6px 20px rgba(0,0,0,0.07), 0 2px 6px rgba(0,0,0,0.04) !important; position: relative; overflow: hidden; transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 240ms cubic-bezier(0.4, 0, 0.2, 1) !important; } /* Shimmer sweep */ .ei-rev-card::after { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,0.60), transparent); transform: skewX(-15deg); transition: left 0.70s ease; pointer-events: none; } /* Colored top accent bar */ .ei-rev-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 20px 20px 0 0; } .ei-rev-card--presales::before { background: linear-gradient(90deg, #5b5ff5, #8b5cf6, #06b6d4); } .ei-rev-card--paid::before { background: linear-gradient(90deg, #059669, #10b981, #34d399); } .ei-rev-card--outstanding::before { background: linear-gradient(90deg, #f59e0b, #fbbf24, #fde68a); } .ei-rev-card--overall::before { background: linear-gradient(90deg, #ef4444, #f97316, #fb923c); } /* Hover: lift + colored glow */ .ei-rev-card:hover { transform: translateY(-8px) scale(1.015) !important; } .ei-rev-card:hover::after { left: 155%; } .ei-rev-card--presales:hover { box-shadow: 0 1px 0 rgba(255,255,255,0.98) inset, 0 28px 60px rgba(91,95,245,0.26) !important; } .ei-rev-card--paid:hover { box-shadow: 0 1px 0 rgba(255,255,255,0.98) inset, 0 28px 60px rgba(5,150,105,0.26) !important; } .ei-rev-card--outstanding:hover { box-shadow: 0 1px 0 rgba(255,255,255,0.98) inset, 0 28px 60px rgba(245,158,11,0.26) !important; } .ei-rev-card--overall:hover { box-shadow: 0 1px 0 rgba(255,255,255,0.98) inset, 0 28px 60px rgba(239,68,68,0.26) !important; } /* Revenue row hover */ .ei-rev-row { display: flex; align-items: center; justify-content: space-between; border-radius: 10px !important; padding: 8px 12px !important; margin-bottom: 6px !important; transition: background 150ms ease, transform 180ms var(--ei-spring) !important; } .ei-rev-row:hover { transform: translateX(5px) !important; } .ei-rev-row--green { background: #f0fdf4; border: 1px solid #bbf7d0; } .ei-rev-row--green:hover { background: #dcfce7; } .ei-rev-row--amber { background: #fffbeb; border: 1px solid #fde68a; } .ei-rev-row--amber:hover { background: #fef3c7; } .ei-rev-row--red { background: #fff7ed; border: 1px solid #fed7aa; } .ei-rev-row--red:hover { background: #ffedd5; } /* Total footer pill */ .ei-rev-total { /* display: flex !important; */ align-items: center !important; justify-content: space-between !important; border-radius: 12px !important; padding: 13px 15px !important; margin-top: 14px !important; transition: transform 180ms var(--ei-spring), box-shadow 180ms var(--ei-ease) !important; position: relative; overflow: hidden; } /* Gloss on totals */ .ei-rev-total::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255,255,255,0.20) 0%, transparent 100%); border-radius: 12px 12px 50% 50%; pointer-events: none; } .ei-rev-total:hover { transform: translateY(-2px) !important; box-shadow: 0 10px 28px rgba(0,0,0,0.22) !important; } .ei-rev-total--indigo { background: linear-gradient(145deg, #6265f7, #5b5ff5, #7c3aed); box-shadow: 0 4px 18px rgba(91,95,245,0.36); } .ei-rev-total--emerald { background: linear-gradient(145deg, #34d399, #059669, #10b981); box-shadow: 0 4px 18px rgba(5,150,105,0.36); } .ei-rev-total--amber { background: linear-gradient(145deg, #fbbf24, #f59e0b, #f97316); box-shadow: 0 4px 18px rgba(245,158,11,0.36); } .ei-rev-total--red { background: linear-gradient(145deg, #f87171, #ef4444, #f97316); box-shadow: 0 4px 18px rgba(239,68,68,0.36); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ DEALS TABLE — premium glass + gradient header ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .ei-table-wrap { background: rgba(255,255,255,0.97) !important; backdrop-filter: blur(20px) !important; border-radius: 20px !important; border: 1px solid rgba(255,255,255,0.90) !important; border-bottom: 1px solid rgba(91,95,245,0.10) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.98) inset, 0 12px 44px rgba(91,95,245,0.12), 0 2px 8px rgba(0,0,0,0.04) !important; overflow: hidden; } .ei-table-header { background: linear-gradient(135deg, rgba(91,95,245,0.06) 0%, rgba(124,58,237,0.03) 100%); border-bottom: 1px solid rgba(91,95,245,0.10); padding: 18px 24px; } .ei-table-title { font-size: 0.63rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: #5b5ff5; margin: 0; } .ei-table thead tr { background: linear-gradient(135deg, rgba(91,95,245,0.04), rgba(124,58,237,0.02)) !important; } .ei-table thead th { padding: 13px 16px !important; font-size: 0.61rem !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.11em !important; color: var(--ei-text-muted) !important; white-space: nowrap; border-bottom: 2px solid rgba(91,95,245,0.12) !important; } .ei-table tbody tr { border-bottom: 1px solid rgba(91,95,245,0.06) !important; transition: background var(--ei-duration) var(--ei-ease), transform 180ms var(--ei-ease) !important; position: relative; } /* Left border stripe on hover */ /* .ei-table tbody tr::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #5b5ff5, #7c3aed); opacity: 0; border-radius: 0 2px 2px 0; transition: opacity var(--ei-duration) var(--ei-ease); } */ .ei-table tbody tr:hover { background: linear-gradient(90deg, rgba(91,95,245,0.06), rgba(91,95,245,0.02), transparent) !important; transform: translateX(2px); } .ei-table tbody tr:hover::before { opacity: 1; } .ei-table tbody td { font-size: 0.80rem !important; font-weight: 500 !important; color: var(--ei-text-secondary) !important; padding: 13px 16px !important; vertical-align: middle !important; } .ei-table tbody td:first-child { font-size: 0.72rem; color: var(--ei-text-muted); white-space: nowrap; } .ei-table tbody td:nth-child(2) { font-weight: 700; color: var(--ei-text-primary); } /* Copy Link button — glossy pill */ .ei-copy-btn { display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(145deg, #e0e7ff, #ede9fe) !important; color: #4f46e5 !important; border: 1px solid rgba(91,95,245,0.20) !important; border-radius: 8px; padding: 6px 14px; font-size: 0.71rem; font-weight: 700; cursor: pointer; letter-spacing: 0.03em; position: relative; overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,0.90) inset, 0 2px 10px rgba(91,95,245,0.18); transition: transform var(--ei-duration) var(--ei-spring), box-shadow var(--ei-duration) var(--ei-ease) !important; } .ei-copy-btn:hover { transform: translateY(-2px) scale(1.06) !important; box-shadow: 0 8px 22px rgba(79,70,229,0.42), 0 1px 0 rgba(255,255,255,0.90) inset !important; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PERFORMANCE CATEGORY CARDS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .category-cards { gap: 20px !important; margin-bottom: 28px !important; } .category-card { background: linear-gradient(160deg, #ffffff 0%, #f8f9ff 100%) !important; border-radius: 20px !important; padding: 24px !important; border: 1px solid rgba(255,255,255,0.90) !important; border-left-width: 4px !important; box-shadow: 0 1px 0 rgba(255,255,255,0.98) inset, 0 8px 26px rgba(0,0,0,0.08) !important; transition: transform var(--ei-duration) var(--ei-spring), box-shadow var(--ei-duration) var(--ei-ease) !important; overflow: hidden; position: relative; } .category-card::after { content: ''; position: absolute; top: 0; left: -90%; width: 55%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.60), transparent); transform: skewX(-18deg); transition: left 0.65s ease; pointer-events: none; } .category-card:hover { transform: translateY(-8px) scale(1.015) !important; } .category-card:hover::after { left: 145%; } .category-A { border-left-color: #16a34a !important; } .category-B { border-left-color: #ca8a04 !important; } .category-C { border-left-color: #ea580c !important; } .category-D { border-left-color: #dc2626 !important; } .category-A:hover { box-shadow: 0 1px 0 rgba(255,255,255,0.98) inset, 0 28px 60px rgba(22,163,74,0.22) !important; } .category-B:hover { box-shadow: 0 1px 0 rgba(255,255,255,0.98) inset, 0 28px 60px rgba(202,138,4,0.22) !important; } .category-C:hover { box-shadow: 0 1px 0 rgba(255,255,255,0.98) inset, 0 28px 60px rgba(234,88,12,0.22) !important; } .category-D:hover { box-shadow: 0 1px 0 rgba(255,255,255,0.98) inset, 0 28px 60px rgba(220,38,38,0.22) !important; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ JOB CHANGELIST BUTTONS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ a[href*="run-job-search"] { background: linear-gradient(145deg, #8b5cf6, #7c3aed, #5b21b6) !important; color: #ffffff !important; padding: 11px 26px !important; border-radius: 12px !important; font-size: 0.82rem !important; font-weight: 700 !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 7px; position: relative; overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,0.24) inset, 0 8px 28px rgba(124,58,237,0.50) !important; transition: transform var(--ei-duration) var(--ei-spring), box-shadow var(--ei-duration) var(--ei-ease) !important; letter-spacing: 0.01em; } a[href*="run-job-search"]::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255,255,255,0.20) 0%, transparent 100%); border-radius: 12px 12px 50% 50%; pointer-events: none; } a[href*="run-job-search"]::after { content: ''; position: absolute; top: 0; left: -90%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent); transform: skewX(-15deg); transition: left 0.55s ease; pointer-events: none; } a[href*="run-job-search"]:hover { transform: translateY(-3px) scale(1.03) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.24) inset, 0 16px 38px rgba(124,58,237,0.62) !important; } a[href*="run-job-search"]:hover::after { left: 135%; } /* Generate Proposal button */ .generate-proposal-btn { border-radius: 10px !important; font-size: 0.75rem !important; font-weight: 700 !important; letter-spacing: 0.02em !important; position: relative; overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,0.24) inset, 0 5px 16px rgba(124,58,237,0.38) !important; transition: transform var(--ei-duration) var(--ei-spring), box-shadow var(--ei-duration) var(--ei-ease) !important; } .generate-proposal-btn::after { content: ''; position: absolute; top: 0; left: -90%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent); transform: skewX(-15deg); transition: left 0.55s ease; pointer-events: none; } .generate-proposal-btn:hover:not(:disabled) { transform: translateY(-2px) scale(1.04) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.24) inset, 0 10px 28px rgba(124,58,237,0.56) !important; } .generate-proposal-btn:hover:not(:disabled)::after { left: 135%; } .generate-proposal-btn:active:not(:disabled) { transform: scale(0.98) !important; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PROPOSAL DRAWER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ #proposal-backdrop { backdrop-filter: blur(8px) saturate(140%) !important; -webkit-backdrop-filter: blur(8px) saturate(140%) !important; background: rgba(15,23,42,0.65) !important; } #proposal-toast { background: linear-gradient(135deg, #1e293b, #0f172a) !important; border-radius: 16px !important; border: 1px solid rgba(255,255,255,0.10) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 20px 56px rgba(0,0,0,0.50) !important; font-size: 0.82rem !important; letter-spacing: 0.01em; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ REVENUE CARD UTILITIES ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .ei-rev-card__label { font-size: 0.63rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.11em; color: #94a3b8; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(0,0,0,0.06); display: block; } .ei-rev-row__name { font-size: 0.72rem; font-weight: 600; color: #374151; margin: 0; } .ei-rev-row__value { font-size: 0.86rem; font-weight: 800; letter-spacing: -0.02em; } .ei-rev-row--green .ei-rev-row__value { color: #047857; } .ei-rev-row--amber .ei-rev-row__value { color: #92400e; } .ei-rev-row--red .ei-rev-row__value { color: #b45309; } .ei-rev-total__label { font-size: 0.63rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.80); margin: 0; position: relative; z-index: 1; } .ei-rev-total__value { font-size: 1.15rem; font-weight: 800; color: #ffffff; letter-spacing: -0.03em; text-shadow: 0 1px 8px rgba(0,0,0,0.20); position: relative; z-index: 1; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ COLOR SEMANTIC UTILITIES ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .text-green-500 { color: #16a34a !important; } .text-yellow-500 { color: #ca8a04 !important; } .text-orange-500 { color: #ea580c !important; } .text-red-500 { color: #dc2626 !important; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SECTION LABEL ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .ei-section-label { font-size: 0.63rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.11em; color: #94a3b8; margin-bottom: 10px; padding-left: 2px; display: block; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ RESPONSIVE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 767px) { .sales_automation { padding: 14px !important; } .sales_automation_sec header { padding: 14px 18px !important; position: relative; } .automation_unit > div:not(.ei-connects-grid) .text-xl, .automation_unit > div:not(.ei-connects-grid) p.text-xl { font-size: 1.15rem !important; } .ei-connects-card__value { font-size: 1.15rem; } } /* ═══════════════════════════════════════════════════════════════════ SIDEBAR NAVIGATION — Taskapp-inspired dark gradient Targets the Unfold admin nav: #nav-sidebar Visual-only — zero functionality changes ═══════════════════════════════════════════════════════════════════ */ /* ── Main sidebar background — light cyan → mint (left to right) ── */ nav#nav-sidebar { background: linear-gradient(90deg, #c8f2ed 0%, #ddf9f5 50%, #eafcfa 100%) !important; border-right: 1px solid rgba(14, 116, 144, 0.12) !important; box-shadow: 4px 0 16px rgba(14, 116, 144, 0.10) !important; } /* Remove any light background on inner container */ nav#nav-sidebar > div { background: transparent !important; } /* ── Shimmer orb — subtle decorative highlight ─────────────────── */ nav#nav-sidebar::before { content: ''; position: absolute; top: -40px; right: -20px; width: 180px; height: 180px; background: radial-gradient(circle, rgba(255,255,255,0.30) 0%, transparent 68%); pointer-events: none; z-index: 0; } /* ── Logo / branding area ──────────────────────────────────────── */ nav#nav-sidebar > div > div:first-child { border-bottom: 1px solid rgba(14, 116, 144, 0.14) !important; position: relative; z-index: 1; } /* Site title text */ nav#nav-sidebar [class*="text-font-important"], nav#nav-sidebar [class*="tracking-tight"], nav#nav-sidebar [class*="font-semibold"][class*="h-10"] { color: #0c3d4a !important; text-shadow: none; } /* Logo image — keep natural colors on light background */ nav#nav-sidebar img[class*="h-8"], nav#nav-sidebar img.h-8 { filter: none; opacity: 1; } /* ── Search box ─────────────────────────────────────────────────── */ nav#nav-sidebar [x-data*="openSearchResults"] > div, nav#nav-sidebar [class*="rounded-md"][class*="border"][class*="flex"][class*="items-center"] { background: rgba(255,255,255,0.45) !important; border: 1px solid rgba(14, 116, 144, 0.20) !important; border-radius: 10px !important; box-shadow: none !important; backdrop-filter: blur(10px); transition: background 200ms ease, border-color 200ms ease; } nav#nav-sidebar [x-data*="openSearchResults"] > div:focus-within, nav#nav-sidebar [class*="rounded-md"][class*="border"][class*="flex"][class*="items-center"]:focus-within { background: rgba(255,255,255,0.65) !important; border-color: rgba(14, 116, 144, 0.40) !important; box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.15) !important; } nav#nav-sidebar input[type="search"] { background: transparent !important; color: #0c3d4a !important; } nav#nav-sidebar input[type="search"]::placeholder { color: rgba(12, 61, 74, 0.45) !important; } /* Search icon */ nav#nav-sidebar [x-data*="openSearchResults"] .material-symbols-outlined, nav#nav-sidebar [class*="rounded-md"][class*="border"] .material-symbols-outlined { color: rgba(12, 61, 74, 0.50) !important; } /* ── Section / group headers ("Menu", "Projects", etc.) ────────── */ nav#nav-sidebar h2 { color: rgba(12, 61, 74, 0.50) !important; font-size: 0.60rem !important; font-weight: 700 !important; letter-spacing: 0.13em !important; text-transform: uppercase !important; } nav#nav-sidebar h2 .material-symbols-outlined { color: rgba(12, 61, 74, 0.40) !important; } /* ── All border/divider lines inside sidebar ───────────────────── */ nav#nav-sidebar [class*="border-b"], nav#nav-sidebar [class*="border-t"], nav#nav-sidebar [class*="border-gray-200"], nav#nav-sidebar [class*="border-gray-800"] { border-color: rgba(14, 116, 144, 0.12) !important; } /* ── Navigation links — default state ──────────────────────────── */ nav#nav-sidebar a[class*="h-11"], nav#nav-sidebar ol li a { color: rgba(12, 61, 74, 0.78) !important; border-radius: 12px !important; transition: background 200ms cubic-bezier(0.4,0,0.2,1), color 200ms cubic-bezier(0.4,0,0.2,1), transform 200ms cubic-bezier(0.34,1.56,0.64,1) !important; position: relative; z-index: 1; } /* Nav link icons */ nav#nav-sidebar a[class*="h-11"] .material-symbols-outlined, nav#nav-sidebar ol li a .material-symbols-outlined { color: rgba(12, 61, 74, 0.55) !important; transition: color 200ms ease !important; } /* Nav link text */ nav#nav-sidebar a[class*="h-11"] span[class*="text-sm"], nav#nav-sidebar ol li a span[class*="text-sm"] { color: inherit !important; } /* ── Nav link hover ─────────────────────────────────────────────── */ nav#nav-sidebar a[class*="h-11"]:hover, nav#nav-sidebar ol li a:hover { background: rgba(255,255,255,0.38) !important; color: #0c3d4a !important; transform: translateX(3px) !important; } nav#nav-sidebar a[class*="h-11"]:hover .material-symbols-outlined, nav#nav-sidebar ol li a:hover .material-symbols-outlined { color: rgba(12, 61, 74, 0.90) !important; } /* ── Active nav link ────────────────────────────────────────────── */ nav#nav-sidebar a[class*="bg-gray-100"], nav#nav-sidebar a[class*="text-primary-600"], nav#nav-sidebar a[class*="dark:bg-white"] { background: rgba(255,255,255,0.55) !important; color: #0c3d4a !important; font-weight: 700 !important; border-left: 3px solid #0e7490 !important; padding-left: calc(0.75rem - 3px) !important; } nav#nav-sidebar a[class*="bg-gray-100"] .material-symbols-outlined, nav#nav-sidebar a[class*="text-primary-600"] .material-symbols-outlined, nav#nav-sidebar a[class*="dark:bg-white"] .material-symbols-outlined { color: #0e7490 !important; } /* Active link — remove hover transform so it stays put */ nav#nav-sidebar a[class*="bg-gray-100"]:hover, nav#nav-sidebar a[class*="text-primary-600"]:hover { transform: none !important; } /* ── Badges (count numbers on nav items) ────────────────────────── */ nav#nav-sidebar [class*="bg-red-600"], nav#nav-sidebar [class*="bg-primary-600"] { background: rgba(14, 116, 144, 0.18) !important; color: #0c3d4a !important; border-radius: 6px !important; font-size: 0.65rem !important; font-weight: 700 !important; } /* ── Bottom bar (account / user section) ────────────────────────── */ nav#nav-sidebar > div > div:last-child, nav#nav-sidebar [class*="border-t"][class*="mt-auto"], nav#nav-sidebar footer { border-top: 1px solid rgba(14, 116, 144, 0.14) !important; background: rgba(255,255,255,0.20) !important; } /* Account trigger icon */ nav#nav-sidebar [x-data*="openUserLinks"] a, nav#nav-sidebar [x-data*="openUserLinks"] button { color: rgba(12, 61, 74, 0.75) !important; } nav#nav-sidebar [x-data*="openUserLinks"] a:hover, nav#nav-sidebar [x-data*="openUserLinks"] button:hover { color: #0c3d4a !important; } /* Account dropdown panel */ nav#nav-sidebar [x-data*="openUserLinks"] nav { background: #e0fdf8 !important; border: 1px solid rgba(14, 116, 144, 0.20) !important; box-shadow: 0 12px 40px rgba(14, 116, 144, 0.18) !important; } nav#nav-sidebar [x-data*="openUserLinks"] nav a, nav#nav-sidebar [x-data*="openUserLinks"] nav span { color: rgba(12, 61, 74, 0.80) !important; } nav#nav-sidebar [x-data*="openUserLinks"] nav a:hover { background: rgba(14, 116, 144, 0.10) !important; color: #0c3d4a !important; } nav#nav-sidebar [x-data*="openUserLinks"] nav button[class*="text-red"] { color: #dc2626 !important; } nav#nav-sidebar [x-data*="openUserLinks"] nav button[class*="text-red"]:hover { background: rgba(239,68,68,0.10) !important; } /* ── Top header bar (page chrome above content) ─────────────────── */ body > div > header, #header, [class*="sticky"][class*="top-0"][class*="z-"]:not(nav#nav-sidebar):not(.sales_automation_sec header) { background: rgba(240, 254, 252, 0.97) !important; backdrop-filter: blur(20px) saturate(180%) !important; border-bottom: 1px solid rgba(14, 116, 144, 0.10) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.98) inset, 0 2px 16px rgba(14, 116, 144, 0.07) !important; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ GLOBAL TEAL THEME — applies to ALL admin pages uniformly ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* Root background */ html, body { background-color: #f0fefd !important; } /* Every div/section/article that Unfold paints white */ body div:not(nav#nav-sidebar):not(nav#nav-sidebar *), body section:not(nav#nav-sidebar):not(nav#nav-sidebar *), body article:not(nav#nav-sidebar):not(nav#nav-sidebar *), body main:not(nav#nav-sidebar):not(nav#nav-sidebar *) { /* background-color: inherit; */ } /* The main flex wrapper and content column */ body > div[class], body > div > div[class*="flex-1"], body > div > main { background-color: #f0fefd !important; } /* All white-background panels / cards (Unfold uses bg-white heavily) */ .bg-white:not(nav#nav-sidebar):not(nav#nav-sidebar *) { background-color: #edfcfa !important; } /* ── Unfold content cards (changelist wrapper, form cards) ──────── */ [class*="rounded"][class*="shadow"]:not(nav#nav-sidebar):not(nav#nav-sidebar *), [class*="rounded-xl"]:not(nav#nav-sidebar):not(nav#nav-sidebar *), [class*="rounded-lg"]:not(nav#nav-sidebar):not(nav#nav-sidebar *) { background-color: #edfcfa ; } input[type="checkbox"].rounded-full { background-color: #bbbaba !important; } input[type="checkbox"].rounded-full:checked { background-color: #22c55e !important; } /* Give the main data card a border to float above background */ [class*="rounded"][class*="shadow"][class*="bg-white"]:not(nav#nav-sidebar):not(nav#nav-sidebar *), [class*="rounded"][class*="shadow"][class*="rounded"]:not(nav#nav-sidebar):not(nav#nav-sidebar *) { background-color: #edfcfa ; border: 1px solid rgba(14, 116, 144, 0.13) !important; /* box-shadow: 0 1px 0 rgba(255,255,255,0.90) inset, 0 6px 24px rgba(14, 116, 144, 0.08), 0 2px 4px rgba(0,0,0,0.02) !important; */ } /* ── Action toolbar (search bar, "Select action", Filters row) ──── */ [class*="bg-gray-50"]:not(nav#nav-sidebar):not(nav#nav-sidebar *) { background-color: #e8faf8 !important; } [class*="bg-gray-100"]:not(nav#nav-sidebar):not(nav#nav-sidebar *) { background-color: #e2f9f6 !important; } [class*="bg-gray-200"]:not(nav#nav-sidebar):not(nav#nav-sidebar *) { background-color: #d5f5f1 !important; } /* ── Tables ────────────────────────────────────────────────────── */ table:not(nav#nav-sidebar *) { background-color: transparent !important; } thead tr:not(nav#nav-sidebar *) { background-color: #e4f9f6 !important; } tbody tr:not(nav#nav-sidebar *) { background-color: #edfcfa !important; } tbody tr:nth-child(even):not(nav#nav-sidebar *) { background-color: #e8faf8 !important; } tbody tr:hover:not(nav#nav-sidebar *) { background-color: #d8f7f3 !important; } /* ── Inputs / selects / textareas ───────────────────────────────── */ input:not([type="checkbox"]):not([type="radio"]):not(nav#nav-sidebar *), select:not(nav#nav-sidebar *), textarea:not(nav#nav-sidebar *) { /* background-color: #f8fffe !important; */ border-color: rgba(14, 116, 144, 0.22) !important; } input:focus:not([type="checkbox"]):not([type="radio"]):not(nav#nav-sidebar *), select:focus:not(nav#nav-sidebar *), textarea:focus:not(nav#nav-sidebar *) { border-color: #0e7490 !important; box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.14) !important; outline: none !important; } /* ── Unfold filter sidebar / panels ─────────────────────────────── */ [class*="border"][class*="rounded"]:not(nav#nav-sidebar):not(nav#nav-sidebar *) { border-color: rgba(14, 116, 144, 0.13) !important; } /* ── Pagination bar ─────────────────────────────────────────────── */ [class*="paginator"]:not(nav#nav-sidebar *), [aria-label*="pagination"]:not(nav#nav-sidebar *) { background-color: #e8faf8 !important; } /* Django admin #content and base containers */ #content, #content-main, .content { background-color: transparent !important; } /* ── Breadcrumb area ────────────────────────────────────────────── */ [class*="breadcrumbs"], nav[aria-label="breadcrumb"] { color: var(--ei-text-muted) !important; font-size: 0.72rem !important; } /* ── Sidebar scrollbar ──────────────────────────────────────────── */ nav#nav-sidebar { scrollbar-width: thin; scrollbar-color: rgba(14,116,144,0.25) transparent; } nav#nav-sidebar::-webkit-scrollbar { width: 4px; } nav#nav-sidebar::-webkit-scrollbar-track { background: transparent; } nav#nav-sidebar::-webkit-scrollbar-thumb { background: rgba(14,116,144,0.25); border-radius: 4px; } nav#nav-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(14,116,144,0.45); } /* ── Sidebar entrance animation ─────────────────────────────────── */ @keyframes sidebar-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } } nav#nav-sidebar ol li { animation: sidebar-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both; } nav#nav-sidebar ol li:nth-child(1) { animation-delay: 0.05s; } nav#nav-sidebar ol li:nth-child(2) { animation-delay: 0.10s; } nav#nav-sidebar ol li:nth-child(3) { animation-delay: 0.15s; } nav#nav-sidebar ol li:nth-child(4) { animation-delay: 0.20s; } nav#nav-sidebar ol li:nth-child(5) { animation-delay: 0.25s; } nav#nav-sidebar ol li:nth-child(6) { animation-delay: 0.30s; } nav#nav-sidebar ol li:nth-child(7) { animation-delay: 0.35s; } nav#nav-sidebar ol li:nth-child(8) { animation-delay: 0.40s; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SIDEBAR — EXPANDED SUB-MENU ITEMS (comprehensive active overrides) These catch ALL Unfold sub-nav states that might revert to white ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* Force ALL links inside the sidebar to teal text, never purple/indigo */ nav#nav-sidebar a, nav#nav-sidebar button { color: rgba(12, 61, 74, 0.78) !important; } /* Catch sub-items: Unfold wraps children in a nested