/* ============================================================
MAC AI CRM — Premium UI Design System v2
"Luxury SaaS" — Warm, Confident, Radiant
Design Language:
• Warm indigo-to-coral gradient header
• Soft cream page backgrounds with depth
• Glass morphism panels
• Rich micro-interactions
• Premium typography (Plus Jakarta Sans + DM Sans)
• Confident color palette: Deep Indigo + Warm Coral accent
Loaded via in both layouts — no npm rebuild needed.
============================================================ */
/* ---- Google Fonts (loaded here as backup) ---- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
/* ---- Design Tokens ---- */
:root {
/* Primary palette — Deep Indigo */
--mac-indigo-50: #EEF2FF;
--mac-indigo-100: #E0E7FF;
--mac-indigo-200: #C7D2FE;
--mac-indigo-300: #A5B4FC;
--mac-indigo-400: #818CF8;
--mac-indigo-500: #6366F1;
--mac-indigo-600: #4F46E5;
--mac-indigo-700: #4338CA;
--mac-indigo-800: #3730A3;
--mac-indigo-900: #312E81;
/* Accent — Warm Coral */
--mac-coral-50: #FFF5F5;
--mac-coral-100: #FFE4E6;
--mac-coral-200: #FECDD3;
--mac-coral-300: #FDA4AF;
--mac-coral-400: #FB7185;
--mac-coral-500: #F43F5E;
--mac-coral-600: #E11D48;
/* Success — Emerald */
--mac-emerald: #10B981;
--mac-emerald-light: #D1FAE5;
/* Warning — Amber */
--mac-amber: #F59E0B;
--mac-amber-light: #FEF3C7;
/* Surfaces */
--mac-bg: #FAFAF9;
--mac-bg-warm: #F5F3EF;
--mac-surface: #FFFFFF;
--mac-surface-glass: rgba(255, 255, 255, 0.72);
--mac-surface-elevated: #FFFFFF;
/* Text */
--mac-text-primary: #1E1B4B;
--mac-text-secondary: #4B5563;
--mac-text-muted: #9CA3AF;
--mac-text-on-dark: #F9FAFB;
/* Borders */
--mac-border: #E5E7EB;
--mac-border-light: #F3F4F6;
--mac-border-glass: rgba(255, 255, 255, 0.18);
/* Shadows — layered for depth */
--mac-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
--mac-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
--mac-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
--mac-shadow-md: 0 8px 25px -5px rgba(0, 0, 0, 0.08), 0 4px 10px -4px rgba(0, 0, 0, 0.04);
--mac-shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.1), 0 8px 16px -6px rgba(0, 0, 0, 0.05);
--mac-shadow-glow: 0 0 20px rgba(99, 102, 241, 0.15);
--mac-shadow-coral-glow: 0 0 20px rgba(244, 63, 94, 0.12);
/* Radii */
--mac-radius-sm: 8px;
--mac-radius: 12px;
--mac-radius-lg: 16px;
--mac-radius-xl: 20px;
--mac-radius-2xl: 24px;
/* Motion */
--mac-ease: cubic-bezier(0.4, 0, 0.2, 1);
--mac-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--mac-duration: 200ms;
--mac-duration-slow: 350ms;
/* Brand color override */
--brand-color: #6366F1;
/* Header gradient */
--mac-header-from: #312E81;
--mac-header-via: #3730A3;
--mac-header-to: #1E1B4B;
}
/* ---- Dark Mode Tokens ---- */
.dark {
--mac-bg: #0F0E1A;
--mac-bg-warm: #13121F;
--mac-surface: #1A1930;
--mac-surface-glass: rgba(26, 25, 48, 0.85);
--mac-surface-elevated: #221F3A;
--mac-text-primary: #F1F0FF;
--mac-text-secondary: #C4B5FD;
--mac-text-muted: #6B7280;
--mac-border: #2D2A4A;
--mac-border-light: #1F1D35;
--mac-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
--mac-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
--mac-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.25);
--mac-shadow-md: 0 8px 25px -5px rgba(0, 0, 0, 0.35);
--mac-shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
}
/* ============================================================
GLOBAL
============================================================ */
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: 'Plus Jakarta Sans', 'DM Sans', 'Inter', system-ui, sans-serif !important;
background: var(--mac-bg) !important;
color: var(--mac-text-primary);
}
.dark body {
background: var(--mac-bg) !important;
}
/* Beautiful custom scrollbars */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--mac-indigo-300), var(--mac-indigo-400));
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, var(--mac-indigo-400), var(--mac-indigo-500));
}
.dark ::-webkit-scrollbar-thumb {
background: var(--mac-indigo-700);
}
/* Font family enforcement */
.font-inter { font-family: 'Plus Jakarta Sans', 'DM Sans', 'Inter', system-ui, sans-serif !important; }
/* ============================================================
HEADER — Signature gradient with glass morphism
============================================================ */
header.sticky {
background: linear-gradient(135deg, var(--mac-header-from) 0%, var(--mac-header-via) 45%, #4338CA 75%, #4F46E5 100%) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
box-shadow: 0 4px 30px rgba(49, 46, 129, 0.25), 0 1px 3px rgba(0, 0, 0, 0.1) !important;
padding: 0 1.5rem !important;
height: 64px !important;
min-height: 64px !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
/* All header text → white */
header.sticky,
header.sticky *:not(.mac-tenant-dropdown *):not(.mac-tenant-dropdown) {
color: rgba(255, 255, 255, 0.92) !important;
}
/* Logo → Make Krayin SVG logos white */
header.sticky a img,
header.sticky a img.h-10 {
filter: brightness(0) invert(1) !important;
height: 30px !important;
opacity: 0.95;
transition: opacity var(--mac-duration) var(--mac-ease);
}
header.sticky a:hover img {
opacity: 1;
}
/* ---- Header Search — Frosted glass ---- */
header .relative input[type="text"],
header .relative input[type="search"],
header input.peer {
background: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
color: #fff !important;
border-radius: var(--mac-radius-sm) !important;
transition: all var(--mac-duration) var(--mac-ease);
backdrop-filter: blur(10px);
font-size: 0.85rem;
font-weight: 400;
}
header .relative input::placeholder,
header input.peer::placeholder {
color: rgba(255, 255, 255, 0.45) !important;
}
header .relative input:focus,
header input.peer:focus {
background: rgba(255, 255, 255, 0.16) !important;
border-color: rgba(255, 255, 255, 0.35) !important;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08), 0 0 20px rgba(99, 102, 241, 0.2) !important;
outline: none !important;
}
/* Header search icon */
header .icon-search { color: rgba(255, 255, 255, 0.5) !important; }
/* ---- Quick-Create Button — Coral accent pop ---- */
header button.bg-brandColor {
background: linear-gradient(135deg, var(--mac-coral-400), var(--mac-coral-500)) !important;
box-shadow: 0 2px 12px rgba(244, 63, 94, 0.3), 0 0 0 2px rgba(244, 63, 94, 0.15);
border: none !important;
transition: all var(--mac-duration) var(--mac-ease-bounce);
}
header button.bg-brandColor:hover {
background: linear-gradient(135deg, var(--mac-coral-500), var(--mac-coral-600)) !important;
box-shadow: 0 4px 20px rgba(244, 63, 94, 0.4), 0 0 0 3px rgba(244, 63, 94, 0.2);
transform: scale(1.08) rotate(90deg);
}
header button.bg-brandColor i {
color: #fff !important;
}
/* ---- Dark Mode Toggle ---- */
header .icon-dark,
header .icon-light {
color: rgba(255, 255, 255, 0.6) !important;
transition: all var(--mac-duration) var(--mac-ease);
}
header .icon-dark:hover,
header .icon-light:hover {
color: #fff !important;
background: rgba(255, 255, 255, 0.1) !important;
border-radius: var(--mac-radius-sm);
}
/* ---- Profile Avatar ---- */
header button.rounded-full:not(.bg-brandColor) {
border: 2px solid rgba(255, 255, 255, 0.2) !important;
transition: all var(--mac-duration) var(--mac-ease);
}
header button.rounded-full:not(.bg-brandColor):hover {
border-color: var(--mac-coral-400) !important;
box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.2);
transform: scale(1.05);
}
/* Profile pink avatar → indigo gradient */
header button.bg-pink-400 {
background: linear-gradient(135deg, var(--mac-indigo-400), var(--mac-coral-400)) !important;
border: 2px solid rgba(255, 255, 255, 0.25) !important;
}
/* [SIDEBAR - replaced by v3 patch below] */
/* ============================================================
MAIN CONTENT AREA
============================================================ */
/* Content wrapper background */
.flex.min-h-\[calc\(100vh-62px\)\] {
background: var(--mac-bg-warm) !important;
min-height: calc(100vh - 64px) !important;
}
.dark .flex.min-h-\[calc\(100vh-62px\)\] {
background: var(--mac-bg) !important;
}
/* Content padding adjustment for 64px header */
.flex.min-h-\[calc\(100vh-62px\)\] > .px-4.pb-6 {
padding-top: 6px;
}
/* Page titles — bold and confident */
.text-2xl.font-semibold,
p.text-2xl.font-semibold {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 800 !important;
letter-spacing: -0.03em;
color: var(--mac-text-primary) !important;
font-size: 1.625rem !important;
}
.dark .text-2xl.font-semibold,
.dark p.text-2xl.font-semibold {
color: var(--mac-text-primary) !important;
}
/* ============================================================
CARDS — Glass morphism with premium depth
============================================================ */
/* All white cards with borders */
.rounded-lg.border.border-gray-200.bg-white,
.box-shadow.rounded-lg,
div.rounded-lg.border.border-gray-200.bg-white {
background: var(--mac-surface-glass) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--mac-border) !important;
border-radius: var(--mac-radius) !important;
box-shadow: var(--mac-shadow-sm) !important;
transition: all var(--mac-duration-slow) var(--mac-ease);
}
/* Card hover lift — subtle and premium */
.rounded-lg.border.border-gray-200.bg-white:hover,
.box-shadow.rounded-lg:hover {
box-shadow: var(--mac-shadow-md), var(--mac-shadow-glow) !important;
transform: translateY(-1px);
border-color: var(--mac-indigo-200) !important;
}
.dark .rounded-lg.border.border-gray-200.bg-white:hover {
border-color: var(--mac-indigo-700) !important;
}
/* Dashboard cards dark mode */
.dark .rounded-lg.border.dark\:border-gray-800.dark\:bg-gray-900,
.dark .grid.gap-4 .rounded-lg.dark\:bg-gray-900 {
background: var(--mac-surface) !important;
border-color: var(--mac-border) !important;
}
/* Card section headers */
.rounded-lg .text-base.font-semibold {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 700;
letter-spacing: -0.02em;
}
/* Revenue / stats cards — box shadow style */
.box-shadow {
border-radius: var(--mac-radius) !important;
box-shadow: var(--mac-shadow-sm) !important;
border: 1px solid var(--mac-border);
}
/* ============================================================
WELCOME BANNER — Stunning gradient hero
============================================================ */
.mac-welcome-banner {
background: linear-gradient(135deg, var(--mac-indigo-600) 0%, var(--mac-indigo-500) 30%, var(--mac-coral-500) 70%, var(--mac-coral-400) 100%);
border-radius: var(--mac-radius-xl);
padding: 28px 36px;
color: #fff;
margin-bottom: 24px;
position: relative;
overflow: hidden;
box-shadow: 0 8px 30px rgba(99, 102, 241, 0.2), 0 4px 15px rgba(244, 63, 94, 0.15);
animation: bannerFadeIn 600ms var(--mac-ease) both;
}
.mac-welcome-banner::before {
content: '';
position: absolute;
top: -40%;
right: -5%;
width: 350px;
height: 350px;
background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
pointer-events: none;
}
.mac-welcome-banner::after {
content: '';
position: absolute;
bottom: -50%;
left: 15%;
width: 250px;
height: 250px;
background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
pointer-events: none;
}
.mac-welcome-banner h2 {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 1.5rem;
font-weight: 800;
margin: 0 0 6px;
letter-spacing: -0.03em;
text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.mac-welcome-banner p {
font-size: 0.9rem;
opacity: 0.85;
margin: 0;
font-weight: 400;
}
@keyframes bannerFadeIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================================================
BUTTONS — Bold with micro-interactions
============================================================ */
/* Primary buttons — indigo gradient */
.primary-button,
button.bg-brandColor:not(header button.bg-brandColor),
a.bg-brandColor:not(header a) {
background: linear-gradient(135deg, var(--mac-indigo-500), var(--mac-indigo-600)) !important;
border: none !important;
border-radius: var(--mac-radius-sm) !important;
font-weight: 600;
font-family: 'Plus Jakarta Sans', sans-serif !important;
letter-spacing: -0.01em;
box-shadow: 0 2px 10px rgba(99, 102, 241, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
transition: all var(--mac-duration) var(--mac-ease-bounce);
color: #fff !important;
position: relative;
overflow: hidden;
}
.primary-button:hover,
button.bg-brandColor:not(header button.bg-brandColor):hover,
a.bg-brandColor:not(header a):hover {
background: linear-gradient(135deg, var(--mac-indigo-600), var(--mac-indigo-700)) !important;
box-shadow: 0 6px 20px rgba(99, 102, 241, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
transform: translateY(-2px);
}
.primary-button:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}
/* Secondary / outline */
.secondary-button,
button.border.border-gray-200 {
border-radius: var(--mac-radius-sm) !important;
transition: all var(--mac-duration) var(--mac-ease);
font-family: 'Plus Jakarta Sans', sans-serif !important;
}
/* Danger/delete buttons → coral */
button.bg-red-500,
button.bg-red-600,
.bg-red-500,
.bg-red-600 {
background: linear-gradient(135deg, var(--mac-coral-500), var(--mac-coral-600)) !important;
}
/* [FORMS - replaced by v3 patch below] */
/* [TABLE - replaced by v3 patch below] */
/* [KANBAN - replaced by v3 patch below] */
/* [DROPDOWN - replaced by v3 patch below] */
/* ============================================================
TENANT SWITCHER (Enhanced)
============================================================ */
.mac-tenant-switcher { position: relative; display: inline-flex; align-items: center; }
.mac-tenant-btn {
display: flex; align-items: center; gap: 8px;
padding: 6px 14px; border-radius: var(--mac-radius-sm);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.9) !important;
cursor: pointer; font-size: 13px; font-weight: 500;
transition: all var(--mac-duration) var(--mac-ease);
white-space: nowrap;
backdrop-filter: blur(10px);
font-family: 'Plus Jakarta Sans', sans-serif;
}
.mac-tenant-btn:hover {
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.25);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
}
.mac-tenant-indicator {
width: 8px; height: 8px; border-radius: 50%;
background: var(--mac-emerald);
box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
flex-shrink: 0;
animation: indicatorPulse 3s ease-in-out infinite;
}
@keyframes indicatorPulse {
0%, 100% { box-shadow: 0 0 6px rgba(16, 185, 129, 0.4); }
50% { box-shadow: 0 0 12px rgba(16, 185, 129, 0.7); }
}
.mac-tenant-dropdown {
display: none; position: absolute; top: calc(100% + 8px); right: 0;
min-width: 260px; background: var(--mac-surface);
border: 1px solid var(--mac-border);
border-radius: var(--mac-radius); box-shadow: var(--mac-shadow-lg);
z-index: 99999; overflow: hidden;
animation: dropdownReveal 200ms var(--mac-ease) both;
}
.mac-tenant-dropdown.show { display: block !important; }
.mac-tenant-dropdown-header {
padding: 12px 16px; font-size: 0.65rem; font-weight: 700;
color: var(--mac-text-muted); text-transform: uppercase;
letter-spacing: 0.1em; border-bottom: 1px solid var(--mac-border-light);
}
.mac-tenant-option {
display: flex; align-items: center; gap: 10px;
padding: 10px 16px; text-decoration: none;
color: var(--mac-text-primary) !important; font-size: 13px;
transition: all var(--mac-duration) var(--mac-ease); cursor: pointer;
font-family: 'Plus Jakarta Sans', sans-serif;
}
.mac-tenant-option:hover { background: var(--mac-indigo-50); }
.dark .mac-tenant-option:hover { background: rgba(99, 102, 241, 0.08); }
.mac-tenant-option.active {
background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(99,102,241,0.04));
font-weight: 600; color: var(--mac-indigo-600) !important;
border-left: 3px solid var(--mac-indigo-500);
}
.mac-tenant-avatar {
display: flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: var(--mac-radius-sm);
font-size: 11px; font-weight: 700; flex-shrink: 0;
background: var(--mac-indigo-50); color: var(--mac-indigo-600);
transition: all var(--mac-duration) var(--mac-ease);
}
.mac-tenant-option.active .mac-tenant-avatar {
background: linear-gradient(135deg, var(--mac-indigo-500), var(--mac-indigo-600));
color: #fff;
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}
.mac-tenant-check { margin-left: auto; color: var(--mac-indigo-500); }
.mac-tenant-single {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 14px; font-size: 13px;
color: rgba(255, 255, 255, 0.7) !important;
}
/* ============================================================
FOOTER — Minimal and elegant
============================================================ */
.mt-auto .border-t {
background: var(--mac-surface) !important;
border-top: 1px solid var(--mac-border) !important;
color: var(--mac-text-muted) !important;
font-size: 0.78rem;
padding: 16px !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.mt-auto .border-t a {
color: var(--mac-indigo-500) !important;
text-decoration: none;
font-weight: 600;
transition: color var(--mac-duration) var(--mac-ease);
}
.mt-auto .border-t a:hover {
color: var(--mac-coral-500) !important;
}
.dark .mt-auto .border-t {
background: var(--mac-surface) !important;
border-top-color: var(--mac-border) !important;
}
/* ============================================================
LOGIN PAGE — Immersive branded experience
============================================================ */
/* Login background handled inline in blade — these style the card */
.mac-login-card {
width: 100%;
max-width: 400px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: var(--mac-radius-xl);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.08);
overflow: hidden;
animation: loginCardIn 500ms var(--mac-ease) both;
animation-delay: 200ms;
}
@keyframes loginCardIn {
from { opacity: 0; transform: translateY(20px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.mac-login-logo {
animation: loginLogoIn 600ms var(--mac-ease) both;
}
@keyframes loginLogoIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================================================
TAGS & STATUS BADGES
============================================================ */
span[class*="rounded-full"][class*="px-"] {
font-weight: 600;
letter-spacing: 0.02em;
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 0.7rem;
}
/* Won status → emerald */
.bg-green-500, .bg-green-600 {
background: linear-gradient(135deg, var(--mac-emerald), #059669) !important;
}
/* Lost status → coral */
.bg-red-500:not(button), .bg-red-600:not(button) {
background: linear-gradient(135deg, var(--mac-coral-500), var(--mac-coral-600)) !important;
}
/* ============================================================
BREADCRUMBS & LINKS
============================================================ */
a.text-brandColor,
.text-brandColor {
color: var(--mac-indigo-500) !important;
transition: color var(--mac-duration) var(--mac-ease);
}
a.text-brandColor:hover {
color: var(--mac-coral-500) !important;
}
/* ============================================================
SHIMMER / LOADING — Warmer gradient
============================================================ */
.light-shimmer-bg {
background: linear-gradient(90deg, var(--mac-bg-warm) 25%, var(--mac-indigo-50) 50%, var(--mac-bg-warm) 75%) !important;
background-size: 200% 100% !important;
animation: macShimmer 1.8s infinite ease-in-out;
border-radius: var(--mac-radius-sm);
}
@keyframes macShimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ============================================================
PAGE TRANSITIONS
============================================================ */
.px-4.pb-6 > * {
animation: pageContentIn 400ms var(--mac-ease) both;
}
.px-4.pb-6 > *:nth-child(1) { animation-delay: 0ms; }
.px-4.pb-6 > *:nth-child(2) { animation-delay: 60ms; }
.px-4.pb-6 > *:nth-child(3) { animation-delay: 120ms; }
.px-4.pb-6 > *:nth-child(4) { animation-delay: 180ms; }
.px-4.pb-6 > *:nth-child(5) { animation-delay: 240ms; }
@keyframes pageContentIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================================================
MODAL / DRAWER — Premium overlay
============================================================ */
.fixed[class*="bg-gray-500\/50"],
.fixed[class*="bg-black\/50"] {
backdrop-filter: blur(4px) !important;
}
/* Modal panels */
.fixed .bg-white.rounded-lg,
.fixed .dark\:bg-gray-900.rounded-lg {
border-radius: var(--mac-radius-lg) !important;
box-shadow: var(--mac-shadow-lg) !important;
}
/* ============================================================
FLASH MESSAGES — Refined
============================================================ */
/* Success */
[class*="bg-green"][class*="flash"],
.flash-group .bg-green-100 {
border-left: 4px solid var(--mac-emerald);
border-radius: var(--mac-radius-sm) !important;
}
/* Error */
[class*="bg-red"][class*="flash"],
.flash-group .bg-red-100 {
border-left: 4px solid var(--mac-coral-500);
border-radius: var(--mac-radius-sm) !important;
}
/* ============================================================
QUICK-CREATE DROPDOWN — Grid refinement
============================================================ */
/* Quick-create item cards */
header [class*="dropdown"] .grid .rounded-lg {
border-radius: var(--mac-radius-sm) !important;
transition: all var(--mac-duration) var(--mac-ease);
}
header [class*="dropdown"] .grid .rounded-lg:hover {
background: var(--mac-indigo-50) !important;
transform: translateY(-2px);
}
header [class*="dropdown"] .grid .rounded-lg i {
color: var(--mac-indigo-500) !important;
}
/* ============================================================
RESPONSIVE — Mobile refinements
============================================================ */
@media (max-width: 768px) {
header.sticky {
height: 56px !important;
min-height: 56px !important;
padding: 0 12px !important;
}
.mac-welcome-banner {
padding: 20px 24px;
border-radius: var(--mac-radius);
}
.mac-welcome-banner h2 {
font-size: 1.25rem;
}
}
/* ============================================================
PRINT STYLES
============================================================ */
@media print {
header.sticky, div[ref="sidebar"], .mt-auto,
.mac-tenant-switcher, .mac-welcome-banner { display: none !important; }
body { background: #fff !important; }
.flex.min-h-\[calc\(100vh-62px\)\] { margin: 0 !important; padding: 0 !important; }
}
/* ============================================================
MAC AI CRM — UI Enhancement Patch v3
Targets ACTUAL Krayin DOM structure:
- Datagrid: .table-responsive > .row.grid (div-based, not )
- Kanban: v-lead-kanban pipeline stages
- Sidebar: div[ref="sidebar"] .sidebar-rounded
- Toolbar: search, filter, pagination
Append this to mac-crm-custom.css
============================================================ */
/* ============================================================
DATAGRID — Div-based grid tables (the REAL structure)
============================================================ */
/* Container — rounded with proper overflow */
.table-responsive.box-shadow {
border-radius: var(--mac-radius) !important;
border: 1px solid var(--mac-border) !important;
overflow: hidden;
box-shadow: var(--mac-shadow-sm) !important;
background: var(--mac-surface) !important;
}
.dark .table-responsive.box-shadow {
background: var(--mac-surface) !important;
border-color: var(--mac-border) !important;
}
/* Header row — styled micro-label look */
.table-responsive .row.grid.bg-gray-50,
.table-responsive .row.grid[class*="bg-gray-50"],
.table-responsive > div:first-child.row.grid {
background: var(--mac-indigo-50) !important;
border-bottom: 2px solid var(--mac-indigo-100) !important;
min-height: 44px;
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.dark .table-responsive .row.grid.bg-gray-50,
.dark .table-responsive .row.grid[class*="bg-gray-50"] {
background: rgba(99, 102, 241, 0.08) !important;
border-bottom-color: var(--mac-border) !important;
}
/* Header labels — uppercase refined */
.table-responsive .row.grid.bg-gray-50 p,
.table-responsive .row.grid.bg-gray-50 div {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 700 !important;
font-size: 0.68rem !important;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--mac-indigo-600) !important;
}
.dark .table-responsive .row.grid.bg-gray-50 p,
.dark .table-responsive .row.grid.bg-gray-50 div {
color: var(--mac-indigo-300) !important;
}
/* Body rows — clean alternating + hover */
.table-responsive .row.grid:not(.bg-gray-50):not(:first-child) {
transition: all 180ms var(--mac-ease);
border-bottom: 1px solid var(--mac-border-light);
min-height: 52px;
align-items: center;
}
.table-responsive .row.grid:not(.bg-gray-50):nth-child(even) {
background: rgba(238, 242, 255, 0.25);
}
.dark .table-responsive .row.grid:not(.bg-gray-50):nth-child(even) {
background: rgba(99, 102, 241, 0.03);
}
/* Row hover — indigo left accent bar */
.table-responsive .row.grid:not(.bg-gray-50):not(:first-child):hover {
background: var(--mac-indigo-50) !important;
box-shadow: inset 3px 0 0 var(--mac-indigo-400);
}
.dark .table-responsive .row.grid:not(.bg-gray-50):not(:first-child):hover {
background: rgba(99, 102, 241, 0.08) !important;
}
/* Row text */
.table-responsive .row.grid:not(.bg-gray-50) p,
.table-responsive .row.grid:not(.bg-gray-50) span:not([class*="icon-"]) {
font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
font-size: 0.84rem;
color: var(--mac-text-primary);
}
.dark .table-responsive .row.grid:not(.bg-gray-50) p {
color: var(--mac-text-primary);
}
/* Action icons in rows */
.table-responsive .row.grid .icon-edit,
.table-responsive .row.grid .icon-delete,
.table-responsive .row.grid .icon-view,
.table-responsive .row.grid [class*="icon-"]:not(.icon-checkbox-outline):not(.icon-checkbox-select):not(.icon-stats-up):not(.icon-stats-down) {
transition: all var(--mac-duration) var(--mac-ease);
border-radius: 6px;
padding: 4px;
}
.table-responsive .row.grid .icon-edit:hover {
color: var(--mac-indigo-500) !important;
background: var(--mac-indigo-50);
}
.table-responsive .row.grid .icon-delete:hover {
color: var(--mac-coral-500) !important;
background: var(--mac-coral-50);
}
/* Checkbox brand color fix */
.icon-checkbox-select.text-brandColor,
.peer-checked\:text-brandColor {
color: var(--mac-indigo-500) !important;
}
/* ============================================================
DATAGRID TOOLBAR — Search, Filter, Pagination
============================================================ */
/* Toolbar container */
.table-responsive + div,
div[class*="toolbarRight"] {
font-family: 'Plus Jakarta Sans', sans-serif;
}
/* Filter button */
button.bg-brandColor:not(header button),
a.bg-brandColor.rounded-lg,
button[class*="bg-brandColor"]:not(header *) {
background: linear-gradient(135deg, var(--mac-indigo-500), var(--mac-indigo-600)) !important;
border-radius: var(--mac-radius-sm) !important;
font-weight: 600;
font-family: 'Plus Jakarta Sans', sans-serif !important;
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
transition: all var(--mac-duration) var(--mac-ease-bounce);
}
/* Primary button (Create Lead, Create Pipeline etc) */
.primary-button,
a.primary-button {
background: linear-gradient(135deg, var(--mac-indigo-500), var(--mac-indigo-600)) !important;
border: none !important;
border-radius: var(--mac-radius-sm) !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 700;
letter-spacing: -0.01em;
padding: 10px 20px;
box-shadow: 0 2px 10px rgba(99, 102, 241, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
transition: all var(--mac-duration) var(--mac-ease-bounce);
color: #fff !important;
}
.primary-button:hover,
a.primary-button:hover {
background: linear-gradient(135deg, var(--mac-indigo-600), var(--mac-indigo-700)) !important;
box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
transform: translateY(-1px);
}
/* Search input in toolbar */
.table-responsive ~ div input[type="text"],
div[class*="toolbar"] input {
border-radius: var(--mac-radius-sm) !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 0.84rem;
}
/* Pagination */
.table-responsive ~ div select,
div[class*="toolbar"] select {
border-radius: var(--mac-radius-sm) !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
}
/* Per Page & page count */
div[class*="pagination"] p,
div[class*="toolbar"] p.text-sm {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 0.78rem;
color: var(--mac-text-secondary);
}
/* ============================================================
PAGE HEADERS — Breadcrumbs, titles, action bars
============================================================ */
/* Page header card (leads, contacts etc) */
.flex.items-center.justify-between.rounded-lg.border.border-gray-200.bg-white.px-4.py-2 {
border-radius: var(--mac-radius) !important;
border: 1px solid var(--mac-border) !important;
box-shadow: var(--mac-shadow-xs);
background: var(--mac-surface) !important;
padding: 14px 20px !important;
}
.dark .flex.items-center.justify-between.rounded-lg.border.border-gray-200.bg-white.px-4.py-2 {
background: var(--mac-surface) !important;
border-color: var(--mac-border) !important;
}
/* Breadcrumbs */
a[class*="text-brandColor"],
.text-brandColor {
color: var(--mac-indigo-500) !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 500;
font-size: 0.82rem;
transition: color var(--mac-duration) var(--mac-ease);
}
a[class*="text-brandColor"]:hover {
color: var(--mac-indigo-700) !important;
}
/* Breadcrumb separator */
.text-gray-500.text-sm + .text-gray-500.text-sm,
span.text-gray-500 {
font-family: 'Plus Jakarta Sans', sans-serif !important;
}
/* Page titles inside header cards */
.text-xl.font-bold {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 800 !important;
letter-spacing: -0.03em;
color: var(--mac-text-primary) !important;
}
.dark .text-xl.font-bold {
color: var(--mac-text-primary) !important;
}
/* ============================================================
SIDEBAR — Refined spacing & interaction
============================================================ */
/* Sidebar container */
div[ref="sidebar"] {
top: 64px !important;
background: var(--mac-surface) !important;
border-right: 1px solid var(--mac-border) !important;
box-shadow: 1px 0 15px rgba(0, 0, 0, 0.02);
}
.dark div[ref="sidebar"] {
background: var(--mac-surface) !important;
border-right-color: var(--mac-border) !important;
}
/* Nav items spacing */
div[ref="sidebar"] .sidebar-rounded.grid {
gap: 2px;
padding: 2px 0;
}
/* Nav item links */
div[ref="sidebar"] .px-4 a {
border-radius: var(--mac-radius-sm) !important;
transition: all 180ms var(--mac-ease);
padding: 8px 10px !important;
min-height: 38px;
}
/* Active nav item — indigo gradient */
div[ref="sidebar"] .px-4 a.bg-brandColor {
background: linear-gradient(135deg, var(--mac-indigo-500), var(--mac-indigo-600)) !important;
box-shadow: 0 3px 12px rgba(99, 102, 241, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
div[ref="sidebar"] .px-4 a.bg-brandColor span,
div[ref="sidebar"] .px-4 a.bg-brandColor p {
color: #fff !important;
}
/* Hover — subtle warm lift */
div[ref="sidebar"] .px-4 a:not(.bg-brandColor):hover {
background: var(--mac-indigo-50) !important;
transform: translateX(2px);
}
.dark div[ref="sidebar"] .px-4 a:not(.bg-brandColor):hover {
background: rgba(99, 102, 241, 0.08) !important;
}
/* Nav icons */
div[ref="sidebar"] .px-4 a span[class^="icon-"] {
font-size: 22px;
transition: transform var(--mac-duration) var(--mac-ease);
flex-shrink: 0;
}
div[ref="sidebar"] .px-4 a:hover span[class^="icon-"] {
transform: scale(1.08);
}
/* Nav text */
div[ref="sidebar"] .px-4 a p,
div[ref="sidebar"] .px-4 a .font-medium {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 600;
font-size: 0.82rem;
letter-spacing: -0.01em;
}
/* Submenu flyout panel */
div[ref="sidebar"] .sidebar-rounded.fixed {
background: var(--mac-surface) !important;
border-color: var(--mac-border) !important;
box-shadow: var(--mac-shadow-lg), 0 0 0 1px rgba(0, 0, 0, 0.03) !important;
border-radius: 0 var(--mac-radius) var(--mac-radius) 0 !important;
overflow: hidden;
}
/* Submenu items */
div[ref="sidebar"] .sidebar-rounded.fixed a {
border-radius: var(--mac-radius-sm) !important;
transition: all var(--mac-duration) var(--mac-ease);
}
div[ref="sidebar"] .sidebar-rounded.fixed a p {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 500;
font-size: 0.82rem;
}
div[ref="sidebar"] .sidebar-rounded.fixed a.bg-brandColor {
background: linear-gradient(135deg, var(--mac-indigo-500), var(--mac-indigo-600)) !important;
}
div[ref="sidebar"] .sidebar-rounded.fixed a:not(.bg-brandColor):hover {
background: var(--mac-indigo-50) !important;
}
.dark div[ref="sidebar"] .sidebar-rounded.fixed a:not(.bg-brandColor):hover {
background: rgba(99, 102, 241, 0.08) !important;
}
/* ============================================================
MOBILE SIDEBAR DRAWER — Enhanced
============================================================ */
/* Drawer menu items */
.menu-item .menu-link.bg-brandColor {
background: linear-gradient(135deg, var(--mac-indigo-500), var(--mac-indigo-600)) !important;
box-shadow: 0 3px 10px rgba(99, 102, 241, 0.2);
border-radius: var(--mac-radius-sm) !important;
}
/* Drawer submenu active */
.submenu .submenu-link.text-brandColor,
.submenu .submenu-link[class*="text-brandColor"] {
color: var(--mac-indigo-600) !important;
font-weight: 600;
}
.border-l-brandColor {
border-left-color: var(--mac-indigo-500) !important;
}
/* ============================================================
DASHBOARD CARDS — Enhanced visual hierarchy
============================================================ */
/* Revenue card (the big chart card) */
.box-shadow.rounded-lg.border.border-gray-200.bg-white.p-4 {
border-radius: var(--mac-radius) !important;
border: 1px solid var(--mac-border) !important;
box-shadow: var(--mac-shadow-sm) !important;
background: var(--mac-surface-glass) !important;
backdrop-filter: blur(10px);
}
.box-shadow.rounded-lg.border.border-gray-200.bg-white.p-4:hover {
box-shadow: var(--mac-shadow-md), var(--mac-shadow-glow) !important;
transform: translateY(-1px);
}
/* Stats cards (Average Lead Value, Total Leads, etc) */
.grid.grid-cols-3 > div,
.grid-cols-3 > .rounded-lg {
border-radius: var(--mac-radius) !important;
transition: all 200ms var(--mac-ease);
}
.grid.grid-cols-3 > div:hover {
transform: translateY(-2px);
box-shadow: var(--mac-shadow-md) !important;
}
/* Stats numbers */
.grid-cols-3 .text-2xl,
.grid-cols-3 .font-bold {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 800;
letter-spacing: -0.02em;
}
/* Stats labels */
.grid-cols-3 .text-xs,
.grid-cols-3 .text-sm.text-gray-600,
.grid-cols-3 p[class*="text-gray"] {
font-family: 'DM Sans', sans-serif !important;
}
/* Green percentage badges */
.text-green-500,
span[class*="text-green"] {
color: var(--mac-emerald) !important;
font-weight: 700;
font-size: 0.75rem;
}
/* Red percentage badges */
.text-red-500,
span[class*="text-red"] {
color: var(--mac-coral-500) !important;
font-weight: 700;
}
/* Section titles in right sidebar cards */
.text-base.font-semibold {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 700;
letter-spacing: -0.02em;
}
/* "No Data Available" states */
p:has(+ p[class*="text-gray"]),
.text-center .text-lg.font-semibold {
font-family: 'Plus Jakarta Sans', sans-serif !important;
}
/* Open Leads By Stages — funnel/bar styling */
.bg-\[\#34D399\],
.bg-\[\#22D3EE\],
[class*="bg-[#34D399]"],
[class*="bg-[#22D3EE]"] {
border-radius: 4px;
}
/* ============================================================
FORMS — Polished inputs throughout
============================================================ */
/* All non-header inputs */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(header input),
select:not(header select),
textarea {
border-radius: var(--mac-radius-sm) !important;
border: 1.5px solid var(--mac-border) !important;
transition: all var(--mac-duration) var(--mac-ease);
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 0.85rem;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(header input):focus,
select:not(header select):focus,
textarea:focus {
border-color: var(--mac-indigo-400) !important;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1), 0 0 0 1px var(--mac-indigo-400) !important;
outline: none !important;
}
/* ============================================================
DROPDOWNS & MODALS — Premium floating
============================================================ */
/* Profile dropdown content */
.mt-2.border-t-0.\!p-0 {
border-radius: var(--mac-radius) !important;
box-shadow: var(--mac-shadow-lg) !important;
overflow: hidden;
border: 1px solid var(--mac-border) !important;
animation: dropdownReveal 150ms var(--mac-ease) both;
}
/* Dropdown menu items */
.cursor-pointer.px-5.py-2.text-base,
.cursor-pointer.px-5.py-2.text-sm {
font-family: 'Plus Jakarta Sans', sans-serif !important;
transition: all var(--mac-duration) var(--mac-ease);
border-radius: 4px;
margin: 0 4px;
}
/* Quick-create dropdown items */
.grid.grid-cols-3.gap-2.text-center .rounded-lg {
border-radius: var(--mac-radius-sm) !important;
transition: all var(--mac-duration) var(--mac-ease);
padding: 10px 8px !important;
}
.grid.grid-cols-3.gap-2.text-center .rounded-lg:hover {
background: var(--mac-indigo-50) !important;
transform: translateY(-2px);
}
.dark .grid.grid-cols-3.gap-2.text-center .rounded-lg:hover {
background: rgba(99, 102, 241, 0.08) !important;
}
.grid.grid-cols-3.gap-2.text-center .rounded-lg i {
color: var(--mac-indigo-500) !important;
transition: transform var(--mac-duration) var(--mac-ease);
}
.grid.grid-cols-3.gap-2.text-center .rounded-lg:hover i {
transform: scale(1.15);
}
.grid.grid-cols-3.gap-2.text-center .rounded-lg span.font-medium {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 0.75rem;
font-weight: 600;
}
/* ============================================================
FILTER BADGE & TAGS
============================================================ */
/* Filter chip/badge when active */
.bg-brandColor.text-white {
background: linear-gradient(135deg, var(--mac-indigo-500), var(--mac-indigo-600)) !important;
}
/* Tags & badges */
span.rounded-full,
span[class*="rounded-full"][class*="px-"] {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 600;
font-size: 0.7rem;
letter-spacing: 0.02em;
}
/* ============================================================
LEAD/CONTACT DETAIL VIEWS
============================================================ */
/* Activity timeline */
.border-l-2.border-gray-200 {
border-color: var(--mac-indigo-100) !important;
}
.dark .border-l-2.border-gray-200 {
border-color: var(--mac-border) !important;
}
/* Tab navigation */
.border-b-2.border-brandColor,
[class*="border-b"][class*="border-brandColor"] {
border-bottom-color: var(--mac-indigo-500) !important;
}
.text-brandColor {
color: var(--mac-indigo-500) !important;
}
/* ============================================================
MICRO-INTERACTIONS & TRANSITIONS
============================================================ */
/* Smooth transitions for all interactive elements */
a, button, input, select, textarea,
.rounded-lg, .cursor-pointer {
transition-timing-function: var(--mac-ease);
}
/* Icon hover effects globally */
[class^="icon-"]:not(header *):not(div[ref="sidebar"] *) {
transition: all var(--mac-duration) var(--mac-ease);
}
/* Focus-visible for keyboard navigation */
a:focus-visible, button:focus-visible {
outline: 2px solid var(--mac-indigo-400);
outline-offset: 2px;
border-radius: var(--mac-radius-sm);
}
/* ============================================================
SCROLLBAR REFINEMENTS
============================================================ */
/* Journal scroll (sidebar, drawers) */
.journal-scroll::-webkit-scrollbar {
width: 4px;
}
.journal-scroll::-webkit-scrollbar-thumb {
background: var(--mac-indigo-200);
border-radius: 10px;
}
.dark .journal-scroll::-webkit-scrollbar-thumb {
background: var(--mac-indigo-700);
}
/* ============================================================
MAC AI CRM — KANBAN ENHANCEMENT v4
Premium pipeline cards with visual hierarchy & polish
Targets existing Krayin blade template classes — no template
changes needed. Append to mac-crm-custom.css, replacing the
old KANBAN / PIPELINE section.
============================================================ */
/* ---- Stage Columns — Frosted glass lanes ---- */
/* Column container */
.flex.gap-2\.5.overflow-x-auto > .flex.min-w-\[275px\].max-w-\[275px\] {
background: var(--mac-surface-glass) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--mac-border) !important;
border-radius: var(--mac-radius) !important;
box-shadow: var(--mac-shadow-sm);
transition: box-shadow var(--mac-duration-slow) var(--mac-ease);
}
.flex.gap-2\.5.overflow-x-auto > .flex.min-w-\[275px\].max-w-\[275px\]:hover {
box-shadow: var(--mac-shadow), var(--mac-shadow-glow);
}
.dark .flex.gap-2\.5.overflow-x-auto > .flex.min-w-\[275px\].max-w-\[275px\] {
background: var(--mac-surface) !important;
border-color: var(--mac-border) !important;
}
/* ---- Stage Headers — Bold with accent bar ---- */
/* Stage header area */
.flex.gap-2\.5.overflow-x-auto > .flex.min-w-\[275px\] > .flex.flex-col.px-2.py-3 {
padding: 14px 14px 12px !important;
border-bottom: 1px solid var(--mac-border-light);
position: relative;
}
/* Indigo accent bar at top of each column */
.flex.gap-2\.5.overflow-x-auto > .flex.min-w-\[275px\] > .flex.flex-col.px-2.py-3::before {
content: '';
position: absolute;
top: 0;
left: 12px;
right: 12px;
height: 3px;
border-radius: 0 0 3px 3px;
background: linear-gradient(90deg, var(--mac-indigo-400), var(--mac-indigo-600));
opacity: 0.7;
}
/* Stage name */
.flex.gap-2\.5.overflow-x-auto .text-xs.font-medium {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 700 !important;
font-size: 0.8rem !important;
letter-spacing: -0.01em;
color: var(--mac-text-primary) !important;
}
/* Lead count badge — pill style */
.flex.gap-2\.5.overflow-x-auto .text-xs.font-medium {
/* The count is inline, we style via the parent */
}
/* Progress bar — indigo gradient instead of green */
.flex.gap-2\.5.overflow-x-auto .h-1.w-36.overflow-hidden.rounded-full {
background: var(--mac-indigo-50) !important;
height: 4px !important;
border-radius: 4px !important;
width: 100% !important;
}
.flex.gap-2\.5.overflow-x-auto .h-1.w-36.overflow-hidden.rounded-full > .h-1 {
background: linear-gradient(90deg, var(--mac-indigo-400), var(--mac-indigo-600)) !important;
height: 4px !important;
border-radius: 4px !important;
transition: width 600ms var(--mac-ease);
}
.dark .flex.gap-2\.5.overflow-x-auto .h-1.w-36.overflow-hidden.rounded-full {
background: var(--mac-border) !important;
}
/* Stage total amount */
.flex.gap-2\.5.overflow-x-auto .flex.items-center.justify-between.gap-2 > .text-xs.font-medium {
color: var(--mac-indigo-600) !important;
font-weight: 800 !important;
font-size: 0.85rem !important;
font-family: 'DM Sans', sans-serif !important;
}
.dark .flex.gap-2\.5.overflow-x-auto .flex.items-center.justify-between.gap-2 > .text-xs.font-medium {
color: var(--mac-indigo-300) !important;
}
/* Add lead icon button in stage header */
.flex.gap-2\.5.overflow-x-auto .icon-add {
background: var(--mac-indigo-50) !important;
color: var(--mac-indigo-500) !important;
border-radius: var(--mac-radius-sm) !important;
width: 28px !important;
height: 28px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 16px !important;
transition: all var(--mac-duration) var(--mac-ease-bounce) !important;
}
.flex.gap-2\.5.overflow-x-auto .icon-add:hover {
background: linear-gradient(135deg, var(--mac-indigo-500), var(--mac-indigo-600)) !important;
color: #fff !important;
transform: scale(1.1) rotate(90deg) !important;
box-shadow: 0 3px 12px rgba(99, 102, 241, 0.3) !important;
}
.dark .flex.gap-2\.5.overflow-x-auto .icon-add {
background: rgba(99, 102, 241, 0.1) !important;
color: var(--mac-indigo-400) !important;
}
/* ---- Lead Cards — Premium elevated cards ---- */
a.lead-item {
background: var(--mac-surface) !important;
border: 1px solid var(--mac-border) !important;
border-radius: var(--mac-radius) !important;
padding: 14px !important;
gap: 12px !important;
box-shadow: var(--mac-shadow-xs) !important;
transition: all var(--mac-duration) var(--mac-ease) !important;
text-decoration: none !important;
position: relative;
overflow: hidden;
}
/* Card hover — lift with indigo glow */
a.lead-item:hover {
border-color: var(--mac-indigo-200) !important;
box-shadow: var(--mac-shadow-md), 0 0 0 1px rgba(99, 102, 241, 0.08) !important;
transform: translateY(-2px) !important;
}
/* Subtle left accent bar on hover */
a.lead-item::before {
content: '';
position: absolute;
top: 8px;
bottom: 8px;
left: 0;
width: 3px;
border-radius: 0 3px 3px 0;
background: linear-gradient(180deg, var(--mac-indigo-400), var(--mac-coral-400));
opacity: 0;
transition: opacity var(--mac-duration) var(--mac-ease);
}
a.lead-item:hover::before {
opacity: 1;
}
/* Dark mode cards */
.dark a.lead-item {
background: var(--mac-surface-elevated) !important;
border-color: var(--mac-border) !important;
}
.dark a.lead-item:hover {
border-color: var(--mac-indigo-700) !important;
box-shadow: var(--mac-shadow-md), 0 0 15px rgba(99, 102, 241, 0.1) !important;
}
/* ---- Card Header — Avatar + contact info ---- */
/* Avatar — indigo gradient background */
a.lead-item .flex.items-start.justify-between .flex.items-center.gap-1 > span:first-child,
a.lead-item .flex.items-start.justify-between .flex.items-center.gap-1 > div:first-child:not(.flex.flex-col) {
/* Targets the x-admin::avatar component */
}
/* Contact name */
a.lead-item .flex.items-start.justify-between .text-xs.font-medium:first-child {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 700 !important;
font-size: 0.82rem !important;
color: var(--mac-text-primary) !important;
letter-spacing: -0.01em;
line-height: 1.3;
}
.dark a.lead-item .flex.items-start.justify-between .text-xs.font-medium:first-child {
color: var(--mac-text-primary) !important;
}
/* Organization name */
a.lead-item .text-\[10px\] {
font-size: 0.7rem !important;
color: var(--mac-text-muted) !important;
font-weight: 500;
letter-spacing: 0.01em;
}
/* Rotten days indicator — pulse animation */
a.lead-item .icon-rotten {
color: var(--mac-coral-500) !important;
font-size: 18px !important;
animation: rottenPulse 2s ease-in-out infinite;
}
@keyframes rottenPulse {
0%, 100% { opacity: 0.8; transform: scale(1); }
50% { opacity: 1; transform: scale(1.15); }
}
/* Rotten tooltip — styled */
a.lead-item .icon-rotten + div .rounded-md {
background: linear-gradient(135deg, var(--mac-coral-600), var(--mac-coral-500)) !important;
border-radius: var(--mac-radius-sm) !important;
padding: 6px 12px !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 600;
box-shadow: var(--mac-shadow-md);
}
/* ---- Lead Title ---- */
a.lead-item > p.text-xs.font-medium {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 600 !important;
font-size: 0.8rem !important;
color: var(--mac-text-primary) !important;
line-height: 1.45;
letter-spacing: -0.005em;
}
.dark a.lead-item > p.text-xs.font-medium {
color: var(--mac-text-primary) !important;
}
/* ---- Tag Pills — Differentiated by type ---- */
/* Base pill style */
a.lead-item .flex.flex-wrap.gap-1 {
gap: 6px !important;
margin-top: 2px;
}
a.lead-item .flex.flex-wrap.gap-1 > div {
border-radius: 6px !important;
padding: 3px 8px !important;
font-family: 'DM Sans', sans-serif !important;
font-weight: 600 !important;
font-size: 0.68rem !important;
letter-spacing: 0.01em;
line-height: 1.4;
transition: all var(--mac-duration) var(--mac-ease);
border: 1px solid transparent;
}
/* Assigned user pill — indigo tint */
a.lead-item .flex.flex-wrap.gap-1 > div:has(.icon-settings-user) {
background: var(--mac-indigo-50) !important;
color: var(--mac-indigo-700) !important;
border-color: var(--mac-indigo-100);
}
a.lead-item .flex.flex-wrap.gap-1 > div:has(.icon-settings-user) .icon-settings-user {
color: var(--mac-indigo-500) !important;
font-size: 12px !important;
}
.dark a.lead-item .flex.flex-wrap.gap-1 > div:has(.icon-settings-user) {
background: rgba(99, 102, 241, 0.12) !important;
color: var(--mac-indigo-300) !important;
border-color: rgba(99, 102, 241, 0.2);
}
/* Lead value pill — emerald/money tint */
a.lead-item .flex.flex-wrap.gap-1 > div:not(:has(.icon-settings-user)):nth-child(1),
a.lead-item .flex.flex-wrap.gap-1 > div:not(:has(.icon-settings-user)):nth-of-type(2) {
/* This targets the formatted_lead_value pill (2nd or 1st non-user pill) */
}
/* ---- Value pill special styling (always the one after user or first if no user) ---- */
/* We use a general approach since CSS can't read Vue data */
/* All non-user, non-tag pills default to warm neutral */
a.lead-item .flex.flex-wrap.gap-1 > div.rounded-xl {
background: var(--mac-bg-warm) !important;
color: var(--mac-text-secondary) !important;
border-radius: 6px !important;
border: 1px solid var(--mac-border-light) !important;
}
.dark a.lead-item .flex.flex-wrap.gap-1 > div.rounded-xl {
background: rgba(255, 255, 255, 0.05) !important;
color: var(--mac-text-secondary) !important;
border-color: var(--mac-border) !important;
}
/* User pill override (has icon) */
a.lead-item .flex.flex-wrap.gap-1 > div.rounded-xl:has(.icon-settings-user) {
background: var(--mac-indigo-50) !important;
color: var(--mac-indigo-700) !important;
border-color: var(--mac-indigo-100) !important;
}
.dark a.lead-item .flex.flex-wrap.gap-1 > div.rounded-xl:has(.icon-settings-user) {
background: rgba(99, 102, 241, 0.12) !important;
color: var(--mac-indigo-300) !important;
border-color: rgba(99, 102, 241, 0.2) !important;
}
/* Custom tag pills (have inline backgroundColor) — keep their custom colors but refine shape */
a.lead-item .flex.flex-wrap.gap-1 > div[style*="backgroundColor"] {
border-radius: 6px !important;
font-weight: 700 !important;
border: none !important;
box-shadow: var(--mac-shadow-xs);
}
/* ---- Draggable ghost — drag preview styling ---- */
.draggable-ghost {
opacity: 0.5 !important;
border: 2px dashed var(--mac-indigo-300) !important;
border-radius: var(--mac-radius) !important;
background: var(--mac-indigo-50) !important;
box-shadow: var(--mac-shadow-lg) !important;
transform: rotate(1.5deg) scale(1.02) !important;
}
/* ---- Scrollable area — refined scrollbar ---- */
/* Kanban column scroll area */
.flex.gap-2\.5.overflow-x-auto > .flex.min-w-\[275px\] .overflow-y-auto {
scrollbar-width: thin;
scrollbar-color: var(--mac-indigo-200) transparent;
padding: 8px !important;
}
.flex.gap-2\.5.overflow-x-auto > .flex.min-w-\[275px\] .overflow-y-auto::-webkit-scrollbar {
width: 4px;
}
.flex.gap-2\.5.overflow-x-auto > .flex.min-w-\[275px\] .overflow-y-auto::-webkit-scrollbar-track {
background: transparent;
margin: 4px 0;
}
.flex.gap-2\.5.overflow-x-auto > .flex.min-w-\[275px\] .overflow-y-auto::-webkit-scrollbar-thumb {
background: var(--mac-indigo-200);
border-radius: 4px;
}
.flex.gap-2\.5.overflow-x-auto > .flex.min-w-\[275px\] .overflow-y-auto::-webkit-scrollbar-thumb:hover {
background: var(--mac-indigo-400);
}
.dark .flex.gap-2\.5.overflow-x-auto > .flex.min-w-\[275px\] .overflow-y-auto::-webkit-scrollbar-thumb {
background: var(--mac-indigo-800);
}
/* ---- Horizontal scroll area (the pipeline strip) ---- */
.flex.gap-2\.5.overflow-x-auto {
padding: 4px 2px 12px !important;
gap: 12px !important;
scrollbar-width: thin;
scrollbar-color: var(--mac-indigo-200) transparent;
}
.flex.gap-2\.5.overflow-x-auto::-webkit-scrollbar {
height: 5px;
}
.flex.gap-2\.5.overflow-x-auto::-webkit-scrollbar-track {
background: transparent;
}
.flex.gap-2\.5.overflow-x-auto::-webkit-scrollbar-thumb {
background: var(--mac-indigo-200);
border-radius: 4px;
}
/* ---- Empty state — polished ---- */
.flex.gap-2\.5.overflow-x-auto .flex.flex-col.items-center.justify-center img {
opacity: 0.4;
max-width: 100px;
margin-bottom: 8px;
}
.flex.gap-2\.5.overflow-x-auto .flex.flex-col.items-center.justify-center p.\!text-base {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 700 !important;
font-size: 0.9rem !important;
color: var(--mac-text-primary) !important;
}
.flex.gap-2\.5.overflow-x-auto .flex.flex-col.items-center.justify-center p.\!text-sm {
font-size: 0.78rem !important;
color: var(--mac-text-muted) !important;
text-align: center;
line-height: 1.5;
}
/* "Create Lead" button in empty state */
.flex.gap-2\.5.overflow-x-auto .secondary-button {
border: 1.5px solid var(--mac-indigo-200) !important;
color: var(--mac-indigo-600) !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 600 !important;
font-size: 0.78rem !important;
border-radius: var(--mac-radius-sm) !important;
padding: 8px 18px !important;
transition: all var(--mac-duration) var(--mac-ease-bounce) !important;
}
.flex.gap-2\.5.overflow-x-auto .secondary-button:hover {
background: linear-gradient(135deg, var(--mac-indigo-500), var(--mac-indigo-600)) !important;
color: #fff !important;
border-color: var(--mac-indigo-500) !important;
box-shadow: 0 4px 14px rgba(99, 102, 241, 0.25) !important;
transform: translateY(-2px) !important;
}
/* ---- Card entrance animation ---- */
a.lead-item {
animation: kanbanCardIn 300ms var(--mac-ease) both;
}
@keyframes kanbanCardIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Stagger first few cards */
a.lead-item:nth-child(1) { animation-delay: 0ms; }
a.lead-item:nth-child(2) { animation-delay: 40ms; }
a.lead-item:nth-child(3) { animation-delay: 80ms; }
a.lead-item:nth-child(4) { animation-delay: 120ms; }
a.lead-item:nth-child(5) { animation-delay: 160ms; }
/* ---- Kanban toolbar area refinements ---- */
/* Pipeline selector / filter bar area */
.flex.gap-2\.5.overflow-x-auto ~ .flex,
.flex.gap-2\.5.overflow-x-auto ~ div {
font-family: 'Plus Jakarta Sans', sans-serif !important;
}
/* ============================================================
MAC AI CRM — LEAD DETAIL PAGE v5
Complete lead view redesign: pipeline, panels, timeline
Replaces LEAD DETAIL v4 section.
Targets Krayin blade classes — CSS only, no template edits.
============================================================ */
/* ================================================================
§1 PIPELINE STAGE BAR
Pill-shaped stage tracker with smooth transitions
================================================================ */
/* Pipeline container — floating card with subtle depth */
.flex.w-full.max-w-full:has(.stage) {
background: linear-gradient(135deg, #fafbff 0%, #f5f3ff 50%, #faf5ff 100%) !important;
border-radius: 14px !important;
border: 1px solid rgba(99, 102, 241, 0.08) !important;
box-shadow:
0 1px 3px rgba(99, 102, 241, 0.06),
0 4px 12px rgba(99, 102, 241, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
padding: 8px 10px !important;
gap: 3px !important;
animation: stageBarReveal 500ms var(--mac-ease) both;
}
.dark .flex.w-full.max-w-full:has(.stage) {
background: linear-gradient(135deg, rgba(99,102,241,0.06) 0%, rgba(139,92,246,0.04) 100%) !important;
border-color: rgba(99, 102, 241, 0.12) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
@keyframes stageBarReveal {
from { opacity: 0; transform: translateY(-6px) scale(0.99); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Individual stage chevrons — base */
.stage {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 600 !important;
font-size: 0.76rem !important;
letter-spacing: 0.01em;
transition: all 280ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
height: 34px !important;
position: relative;
}
/* Active/completed stages — warm indigo gradient */
.stage.\!bg-green-500 {
background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%) !important;
color: #fff !important;
box-shadow:
0 2px 6px rgba(99, 102, 241, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
/* Chevron pseudo-element matching for active stages */
.stage.\!bg-green-500::after,
.stage[class*="after:bg-green"]::after,
.stage[style*="after"].\!bg-green-500::after {
background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%) !important;
}
.stage.\!bg-green-500::before,
.stage[class*="before:bg-green"]::before {
background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%) !important;
}
/* RTL support */
[dir="rtl"] .stage.\!bg-green-500::before {
background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%) !important;
}
/* Lost stage — warm coral */
.stage.\!bg-red-500 {
background: linear-gradient(135deg, #f43f5e, #fb7185) !important;
box-shadow: 0 2px 6px rgba(244, 63, 94, 0.25) !important;
}
.stage.\!bg-red-500::after,
.stage[class*="after:bg-red"]::after {
background: linear-gradient(135deg, #f43f5e, #fb7185) !important;
}
.stage.\!bg-red-500::before,
.stage[class*="before:bg-red"]::before {
background: linear-gradient(135deg, #f43f5e, #fb7185) !important;
}
/* Inactive stages — clean and airy */
.stage:not(.\!bg-green-500):not(.\!bg-red-500) {
background: rgba(255, 255, 255, 0.7) !important;
color: #64748b !important;
border: 1px solid rgba(148, 163, 184, 0.15);
}
.stage:not(.\!bg-green-500):not(.\!bg-red-500):hover {
background: rgba(99, 102, 241, 0.06) !important;
color: #4f46e5 !important;
border-color: rgba(99, 102, 241, 0.15);
transform: translateY(-1px);
}
.dark .stage:not(.\!bg-green-500):not(.\!bg-red-500) {
background: rgba(30, 41, 59, 0.6) !important;
color: #94a3b8 !important;
}
/* Stage text refinement */
.stage > span {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 600 !important;
font-size: 0.74rem !important;
letter-spacing: 0.01em;
}
/* Won/Lost dropdown end cap */
.relative.flex.h-7.min-w-24 {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 600 !important;
height: 34px !important;
transition: all 280ms var(--mac-ease) !important;
}
.relative.flex.h-7.min-w-24:not(.\!bg-green-500):not(.\!bg-red-500) {
background: rgba(255, 255, 255, 0.7) !important;
}
.relative.flex.h-7.min-w-24.\!bg-green-500 {
background: linear-gradient(135deg, #10b981, #34d399) !important;
box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25) !important;
}
.relative.flex.h-7.min-w-24.\!bg-green-500::after {
background: linear-gradient(135deg, #10b981, #34d399) !important;
}
.relative.flex.h-7.min-w-24.\!bg-red-500 {
background: linear-gradient(135deg, #f43f5e, #fb7185) !important;
box-shadow: 0 2px 6px rgba(244, 63, 94, 0.25) !important;
}
.relative.flex.h-7.min-w-24.\!bg-red-500::after {
background: linear-gradient(135deg, #f43f5e, #fb7185) !important;
}
/* Dropdown arrow icon in Won/Lost */
.relative.flex.h-7.min-w-24 span[class*="icon-"] {
font-size: 18px !important;
transition: transform 200ms var(--mac-ease);
}
/* ================================================================
§2 LEFT PANEL — Lead sidebar
Refined card with premium typography & spacing
================================================================ */
/* Left panel container */
.relative.flex.gap-4 > div[class*="min-w-"][class*="max-w-"][class*="rounded-lg"][class*="border"][class*="bg-white"] {
border-radius: 16px !important;
border: 1px solid rgba(226, 232, 240, 0.8) !important;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.04),
0 6px 24px rgba(0, 0, 0, 0.03) !important;
overflow: hidden;
}
.dark .relative.flex.gap-4 > div[class*="min-w-"][class*="max-w-"][class*="rounded-lg"][class*="border"] {
border-color: rgba(51, 65, 85, 0.6) !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}
/* Breadcrumbs row */
.relative.flex.gap-4 nav[aria-label="breadcrumb"] a,
.relative.flex.gap-4 .flex.items-center.justify-between a {
font-family: 'DM Sans', sans-serif !important;
font-size: 0.78rem !important;
font-weight: 600 !important;
letter-spacing: 0.01em;
}
.relative.flex.gap-4 .icon-arrow-right {
color: var(--mac-text-muted) !important;
font-size: 13px !important;
opacity: 0.5;
}
/* Tags area — icon */
.relative.flex.gap-4 .icon-tag,
.relative.flex.gap-4 span[class*="icon-tag"] {
color: #a5b4c8 !important;
transition: color 200ms var(--mac-ease) !important;
}
.relative.flex.gap-4 .icon-tag:hover,
.relative.flex.gap-4 span[class*="icon-tag"]:hover {
color: var(--mac-indigo-500) !important;
}
/* Lead title — hero treatment */
.relative.flex.gap-4 h3.text-lg.font-bold {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 800 !important;
font-size: 1.25rem !important;
letter-spacing: -0.025em;
color: #0f172a !important;
line-height: 1.35;
margin-top: 2px;
}
.dark .relative.flex.gap-4 h3.text-lg.font-bold {
color: #f1f5f9 !important;
}
/* ================================================================
§3 ACTION BUTTONS — Mail / File / Note / Activity
Glassmorphic cards with icon depth
================================================================ */
/* Button group container */
.relative.flex.gap-4 .flex.flex-wrap.gap-2 {
gap: 10px !important;
padding: 6px 0 2px !important;
}
/* Individual button card */
.relative.flex.gap-4 .flex.flex-wrap.gap-2 > div:has(span[class*="icon-"]) {
border-radius: 12px !important;
padding: 10px 16px !important;
transition: all 250ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
position: relative;
overflow: hidden;
border: 1px solid transparent;
cursor: pointer;
}
/* Mail button — soft indigo */
.relative.flex.gap-4 .flex.flex-wrap.gap-2 > div:has(.icon-mail) {
background: linear-gradient(145deg, #eef2ff, #e0e7ff) !important;
border-color: rgba(99, 102, 241, 0.12) !important;
}
.relative.flex.gap-4 .flex.flex-wrap.gap-2 > div:has(.icon-mail):hover {
background: linear-gradient(145deg, #e0e7ff, #c7d2fe) !important;
transform: translateY(-3px) !important;
box-shadow: 0 6px 20px rgba(99, 102, 241, 0.15) !important;
}
.relative.flex.gap-4 .flex.flex-wrap.gap-2 > div:has(.icon-mail) span[class*="icon-mail"] {
color: #4f46e5 !important;
}
/* File button — soft emerald */
.relative.flex.gap-4 .flex.flex-wrap.gap-2 > div:has(.icon-file) {
background: linear-gradient(145deg, #ecfdf5, #d1fae5) !important;
border-color: rgba(16, 185, 129, 0.12) !important;
}
.relative.flex.gap-4 .flex.flex-wrap.gap-2 > div:has(.icon-file):hover {
background: linear-gradient(145deg, #d1fae5, #a7f3d0) !important;
transform: translateY(-3px) !important;
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.15) !important;
}
.relative.flex.gap-4 .flex.flex-wrap.gap-2 > div:has(.icon-file) span[class*="icon-file"] {
color: #059669 !important;
}
/* Note button — soft amber */
.relative.flex.gap-4 .flex.flex-wrap.gap-2 > div:has(.icon-note) {
background: linear-gradient(145deg, #fefce8, #fef3c7) !important;
border-color: rgba(245, 158, 11, 0.12) !important;
}
.relative.flex.gap-4 .flex.flex-wrap.gap-2 > div:has(.icon-note):hover {
background: linear-gradient(145deg, #fef3c7, #fde68a) !important;
transform: translateY(-3px) !important;
box-shadow: 0 6px 20px rgba(245, 158, 11, 0.15) !important;
}
.relative.flex.gap-4 .flex.flex-wrap.gap-2 > div:has(.icon-note) span[class*="icon-note"] {
color: #d97706 !important;
}
/* Activity button — soft blue */
.relative.flex.gap-4 .flex.flex-wrap.gap-2 > div:has(.icon-activity) {
background: linear-gradient(145deg, #eff6ff, #dbeafe) !important;
border-color: rgba(59, 130, 246, 0.12) !important;
}
.relative.flex.gap-4 .flex.flex-wrap.gap-2 > div:has(.icon-activity):hover {
background: linear-gradient(145deg, #dbeafe, #bfdbfe) !important;
transform: translateY(-3px) !important;
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.15) !important;
}
.relative.flex.gap-4 .flex.flex-wrap.gap-2 > div:has(.icon-activity) span[class*="icon-activity"] {
color: #2563eb !important;
}
/* All action button icons — consistent sizing */
.relative.flex.gap-4 .flex.flex-wrap.gap-2 > div > span[class*="icon-"]:first-child {
font-size: 24px !important;
transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
display: block;
margin-bottom: 2px;
}
.relative.flex.gap-4 .flex.flex-wrap.gap-2 > div:hover > span[class*="icon-"]:first-child {
transform: scale(1.12);
}
/* Action button labels */
.relative.flex.gap-4 .flex.flex-wrap.gap-2 > div .text-xs {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 700 !important;
font-size: 0.68rem !important;
letter-spacing: 0.02em;
text-transform: uppercase;
}
/* ================================================================
§4 ACCORDION SECTIONS — About Lead, About Persons
Clean dividers, refined headers, attribute rows
================================================================ */
/* Section dividers — softer */
.relative.flex.gap-4 .border-b.border-gray-200 {
border-color: #f1f5f9 !important;
}
.dark .relative.flex.gap-4 .border-b.border-gray-200 {
border-color: rgba(51, 65, 85, 0.5) !important;
}
/* Accordion header text */
.relative.flex.gap-4 h4 {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 700 !important;
font-size: 0.88rem !important;
letter-spacing: -0.01em;
color: #1e293b !important;
}
.dark .relative.flex.gap-4 h4 {
color: #e2e8f0 !important;
}
/* Edit pencil icon — subtle until hovered */
.relative.flex.gap-4 .icon-edit {
color: #cbd5e1 !important;
font-size: 20px !important;
transition: all 200ms var(--mac-ease) !important;
border-radius: 8px !important;
padding: 6px !important;
}
.relative.flex.gap-4 .icon-edit:hover {
color: #6366f1 !important;
background: #eef2ff !important;
transform: scale(1.05);
}
.dark .relative.flex.gap-4 .icon-edit:hover {
background: rgba(99, 102, 241, 0.1) !important;
}
/* Accordion toggle arrow */
.relative.flex.gap-4 span[class*="icon-arrow"] {
color: #94a3b8 !important;
transition: all 200ms var(--mac-ease) !important;
}
/* Attribute rows — label/value pairs */
.relative.flex.gap-4 .flex.w-full.flex-col.gap-4 .text-sm {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 0.82rem !important;
line-height: 1.5;
}
/* Attribute labels (left side) */
.relative.flex.gap-4 .text-gray-600 {
color: #64748b !important;
font-weight: 500 !important;
}
/* Attribute values (right side) */
.relative.flex.gap-4 .font-medium.dark\:text-white:not(h4):not(h3):not(p) {
font-weight: 600 !important;
color: #1e293b !important;
}
.dark .relative.flex.gap-4 .font-medium.dark\:text-white:not(h4):not(h3):not(p) {
color: #e2e8f0 !important;
}
/* ================================================================
§5 CONTACT PERSON CARD
Premium contact display with avatar enhancement
================================================================ */
/* Person avatar circle — enhanced */
.relative.flex.gap-4 .flex.h-9.w-9.items-center.justify-center.rounded-full.bg-brandColor,
.relative.flex.gap-4 .flex.h-9.w-9.items-center.justify-center.rounded-full[style*="background"] {
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
min-height: 42px !important;
font-size: 0.82rem !important;
font-weight: 700 !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
letter-spacing: 0.02em;
box-shadow:
0 2px 8px rgba(99, 102, 241, 0.2),
0 0 0 2px rgba(255, 255, 255, 0.8) !important;
background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
color: #fff !important;
}
/* Person name link */
.relative.flex.gap-4 a.font-semibold.text-brandColor {
color: #4f46e5 !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 700 !important;
font-size: 0.92rem !important;
transition: all 200ms var(--mac-ease) !important;
text-decoration: none !important;
}
.relative.flex.gap-4 a.font-semibold.text-brandColor:hover {
color: #7c3aed !important;
}
/* Job title / organization text */
.relative.flex.gap-4 .flex.flex-col.gap-1 > span {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 0.8rem !important;
color: #64748b !important;
font-weight: 500;
}
/* Email & phone links */
.relative.flex.gap-4 a[href^="mailto:"],
.relative.flex.gap-4 a[href^="callto:"] {
color: #4f46e5 !important;
font-size: 0.82rem !important;
font-weight: 500 !important;
font-family: 'DM Sans', sans-serif !important;
transition: all 200ms var(--mac-ease) !important;
text-decoration: none !important;
padding: 1px 0;
border-bottom: 1px dashed transparent;
}
.relative.flex.gap-4 a[href^="mailto:"]:hover,
.relative.flex.gap-4 a[href^="callto:"]:hover {
color: #7c3aed !important;
border-bottom-color: #c4b5fd;
}
/* Contact label badges (work/home) */
.relative.flex.gap-4 .flex.gap-1 > span.text-gray-500,
.relative.flex.gap-4 .flex.gap-1 > span.dark\:text-gray-300 {
font-size: 0.68rem !important;
font-weight: 600 !important;
color: #94a3b8 !important;
background: #f1f5f9;
padding: 1px 6px;
border-radius: 4px;
letter-spacing: 0.02em;
text-transform: lowercase;
}
.dark .relative.flex.gap-4 .flex.gap-1 > span.text-gray-500 {
background: rgba(51, 65, 85, 0.5) !important;
color: #94a3b8 !important;
}
/* ================================================================
§6 ACTIVITY TABS BAR
Scrollable tab strip with indigo active indicator
================================================================ */
/* Activities wrapper card */
.w-full.rounded-md.border.border-gray-200.bg-white {
border-radius: 16px !important;
border: 1px solid rgba(226, 232, 240, 0.8) !important;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.04),
0 6px 24px rgba(0, 0, 0, 0.03) !important;
overflow: hidden;
}
.dark .w-full.rounded-md.border.border-gray-200.bg-white {
border-color: rgba(51, 65, 85, 0.6) !important;
}
/* Tab bar strip */
.w-full.rounded-md .flex.gap-2.overflow-x-auto.border-b {
gap: 0 !important;
padding: 0 8px !important;
border-bottom: 1px solid #f1f5f9 !important;
background: linear-gradient(180deg, #fafbff, #fff);
scrollbar-width: none;
-ms-overflow-style: none;
}
.w-full.rounded-md .flex.gap-2.overflow-x-auto.border-b::-webkit-scrollbar {
display: none;
}
.dark .w-full.rounded-md .flex.gap-2.overflow-x-auto.border-b {
background: linear-gradient(180deg, rgba(15,23,42,0.5), transparent) !important;
border-bottom-color: rgba(51, 65, 85, 0.5) !important;
}
/* Individual tab items */
.w-full.rounded-md .flex.gap-2.overflow-x-auto > div.cursor-pointer {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 600 !important;
font-size: 0.78rem !important;
letter-spacing: 0.01em;
padding: 12px 14px !important;
transition: all 200ms var(--mac-ease) !important;
white-space: nowrap;
color: #64748b !important;
border-bottom: 2.5px solid transparent !important;
margin-bottom: -1px;
position: relative;
}
/* Active tab — indigo accent */
.w-full.rounded-md .flex.gap-2.overflow-x-auto > div.cursor-pointer.border-b-2,
.w-full.rounded-md .flex.gap-2.overflow-x-auto > div.cursor-pointer[class*="border-brandColor"],
.w-full.rounded-md .flex.gap-2.overflow-x-auto > div.cursor-pointer[class*="!text-brandColor"] {
color: #4f46e5 !important;
border-bottom-color: #6366f1 !important;
background: rgba(99, 102, 241, 0.04);
}
/* Tab hover */
.w-full.rounded-md .flex.gap-2.overflow-x-auto > div.cursor-pointer:hover:not([class*="border-brandColor"]) {
color: #4f46e5 !important;
background: rgba(99, 102, 241, 0.04);
}
/* ================================================================
§7 ACTIVITY TIMELINE — Card-based items
Elevated cards with type-colored accents and smooth hover
================================================================ */
/* Activity content area */
.w-full.rounded-md .animate-\[on-fade_0\.5s_ease-in-out\] {
padding: 20px !important;
}
/* Activity list container */
.w-full.rounded-md .flex.flex-col.gap-4:has(.flex.gap-2 > .flex.h-9) {
gap: 12px !important;
}
/* Individual activity items — card wrapper */
.w-full.rounded-md .flex.gap-2:has(> .flex.h-9.min-h-9) {
gap: 14px !important;
align-items: flex-start;
}
/* Activity icon circles — refined with brand consistency */
.w-full.rounded-md .flex.h-9.min-h-9.w-9.min-w-9.items-center.justify-center.rounded-full {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
min-height: 40px !important;
font-size: 18px !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
margin-top: 12px;
transition: transform 200ms var(--mac-ease) !important;
flex-shrink: 0;
}
/* Hovering parent lifts the icon */
.w-full.rounded-md .flex.gap-2:has(> .flex.h-9.min-h-9):hover > .flex.h-9.min-h-9.w-9.min-w-9 {
transform: scale(1.08);
}
/* Email icon — indigo tint */
.w-full.rounded-md .icon-mail.bg-green-200 {
background: linear-gradient(135deg, #e0e7ff, #c7d2fe) !important;
color: #4338ca !important;
}
/* Note icon — warm amber */
.w-full.rounded-md .icon-note.bg-orange-200 {
background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
color: #b45309 !important;
}
/* Call icon — teal */
.w-full.rounded-md .icon-call.bg-cyan-200 {
background: linear-gradient(135deg, #cffafe, #a5f3fc) !important;
color: #0e7490 !important;
}
/* Meeting/Activity icon — blue */
.w-full.rounded-md .icon-activity.bg-blue-200 {
background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important;
color: #1d4ed8 !important;
}
/* File icon — emerald */
.w-full.rounded-md .icon-file.bg-green-200 {
background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important;
color: #047857 !important;
}
/* System/changelog icon — slate */
.w-full.rounded-md .icon-system-generate.bg-yellow-200 {
background: linear-gradient(135deg, #e2e8f0, #cbd5e1) !important;
color: #475569 !important;
}
/* Activity detail card — elevated surface */
.w-full.rounded-md .flex.w-full.justify-between.gap-4.rounded-md.p-4 {
background: #fff !important;
border: 1px solid #f1f5f9 !important;
border-radius: 12px !important;
padding: 16px 18px !important;
transition: all 220ms var(--mac-ease) !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.dark .w-full.rounded-md .flex.w-full.justify-between.gap-4.rounded-md.p-4 {
background: rgba(15, 23, 42, 0.4) !important;
border-color: rgba(51, 65, 85, 0.4) !important;
}
/* Remove the alternating gray — we use cards now */
.w-full.rounded-md .flex.w-full.justify-between.gap-4.rounded-md.p-4.bg-gray-100 {
background: #fafbff !important;
border-color: rgba(99, 102, 241, 0.06) !important;
}
.dark .w-full.rounded-md .flex.w-full.justify-between.gap-4.rounded-md.p-4.bg-gray-100,
.dark .w-full.rounded-md .flex.w-full.justify-between.gap-4.rounded-md.p-4.dark\:bg-gray-950 {
background: rgba(99, 102, 241, 0.04) !important;
}
/* Card hover */
.w-full.rounded-md .flex.w-full.justify-between.gap-4.rounded-md.p-4:hover {
border-color: rgba(99, 102, 241, 0.12) !important;
box-shadow: 0 2px 12px rgba(99, 102, 241, 0.06) !important;
transform: translateX(2px);
}
/* Activity title text */
.w-full.rounded-md p.font-medium {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 600 !important;
font-size: 0.88rem !important;
color: #1e293b !important;
line-height: 1.45;
}
.dark .w-full.rounded-md p.font-medium {
color: #e2e8f0 !important;
}
/* Schedule/description text */
.w-full.rounded-md .flex.flex-col.gap-2 > .flex.flex-col.gap-1 p:not(.font-medium):not(.text-gray-500) {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 0.8rem !important;
color: #475569 !important;
line-height: 1.5;
}
/* Activity comment/description body */
.w-full.rounded-md p[class*="dark:text-white"]:not(.font-medium):not(.text-gray-500) {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 0.82rem !important;
line-height: 1.55;
color: #334155 !important;
}
/* Activity timestamp line — By User */
.w-full.rounded-md .text-gray-500.dark\:text-gray-300 {
font-family: 'DM Sans', sans-serif !important;
font-size: 0.72rem !important;
color: #94a3b8 !important;
font-weight: 500;
margin-top: 4px;
letter-spacing: 0.01em;
}
/* Three-dot more options button */
.w-full.rounded-md button.icon-more {
color: #cbd5e1 !important;
transition: all 200ms var(--mac-ease) !important;
border-radius: 8px !important;
width: 32px !important;
height: 32px !important;
}
.w-full.rounded-md button.icon-more:hover {
color: #6366f1 !important;
background: #eef2ff !important;
}
/* File attachment links */
.w-full.rounded-md a:has(.icon-attached-file) {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px !important;
padding: 6px 10px !important;
transition: all 200ms var(--mac-ease) !important;
}
.w-full.rounded-md a:has(.icon-attached-file):hover {
background: #eef2ff;
border-color: #c7d2fe;
}
.w-full.rounded-md a:has(.icon-attached-file) .font-medium.text-brandColor {
color: #4f46e5 !important;
font-size: 0.78rem !important;
font-family: 'DM Sans', sans-serif !important;
}
/* Activity card entrance animation */
.w-full.rounded-md .flex.gap-2:has(> .flex.h-9.min-h-9) {
animation: activityCardIn 350ms var(--mac-ease) both;
}
.w-full.rounded-md .flex.gap-2:has(> .flex.h-9.min-h-9):nth-child(1) { animation-delay: 0ms; }
.w-full.rounded-md .flex.gap-2:has(> .flex.h-9.min-h-9):nth-child(2) { animation-delay: 60ms; }
.w-full.rounded-md .flex.gap-2:has(> .flex.h-9.min-h-9):nth-child(3) { animation-delay: 120ms; }
.w-full.rounded-md .flex.gap-2:has(> .flex.h-9.min-h-9):nth-child(4) { animation-delay: 180ms; }
.w-full.rounded-md .flex.gap-2:has(> .flex.h-9.min-h-9):nth-child(5) { animation-delay: 240ms; }
@keyframes activityCardIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ================================================================
§8 EMPTY STATES
Polished placeholders when no activities exist
================================================================ */
.w-full.rounded-md .grid.justify-center.justify-items-center.gap-3\.5.py-12 {
padding: 48px 24px !important;
}
.w-full.rounded-md .grid.justify-center img {
opacity: 0.35;
max-width: 120px;
filter: saturate(0.7);
}
.w-full.rounded-md .grid.justify-center .text-xl.font-semibold {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 700 !important;
font-size: 1rem !important;
color: #334155 !important;
}
.w-full.rounded-md .grid.justify-center .text-gray-400 {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 0.82rem !important;
color: #94a3b8 !important;
text-align: center;
max-width: 320px;
line-height: 1.55;
}
/* ================================================================
§9 DROPDOWN MENUS (Won/Lost, Activity actions)
Consistent dropdown styling
================================================================ */
.w-full.rounded-md .min-w-40 {
border-radius: 12px !important;
border: 1px solid #e2e8f0 !important;
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.08),
0 1px 3px rgba(0, 0, 0, 0.04) !important;
overflow: hidden;
padding: 4px !important;
}
.w-full.rounded-md .min-w-40 li {
border-radius: 8px !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 0.82rem !important;
font-weight: 500;
transition: all 150ms var(--mac-ease) !important;
margin: 1px 0;
}
.w-full.rounded-md .min-w-40 li:hover {
background: #eef2ff !important;
color: #4f46e5 !important;
}
/* ================================================================
§10 PAGE LAYOUT & ANIMATIONS
Entrance transitions, responsive adjustments
================================================================ */
/* Main container spacing */
.relative.flex.gap-4.max-lg\:flex-wrap {
gap: 20px !important;
}
/* Left panel entrance */
.relative.flex.gap-4 > div:first-child {
animation: panelSlideUp 450ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* Right panel entrance (slightly delayed) */
.relative.flex.gap-4 > div:nth-child(2):not(:first-child),
.relative.flex.gap-4 > div.flex.w-full.flex-col.gap-4 {
animation: panelSlideUp 450ms cubic-bezier(0.16, 1, 0.3, 1) both;
animation-delay: 100ms;
}
@keyframes panelSlideUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
/* Right panel gap between stages and activities */
.flex.w-full.flex-col.gap-4.rounded-lg {
gap: 16px !important;
}
/* ================================================================
§11 RESPONSIVE
================================================================ */
@media (max-width: 1024px) {
.relative.flex.gap-4 > div[class*="min-w-[394px]"] {
min-width: 100% !important;
max-width: 100% !important;
}
.flex.w-full.max-w-full:has(.stage) {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 10px !important;
padding: 6px !important;
}
.stage {
font-size: 0.7rem !important;
height: 30px !important;
}
.relative.flex.gap-4.max-lg\:flex-wrap {
gap: 12px !important;
}
}
@media (max-width: 640px) {
.relative.flex.gap-4 .flex.flex-wrap.gap-2 {
gap: 6px !important;
}
.relative.flex.gap-4 .flex.flex-wrap.gap-2 > div:has(span[class*="icon-"]) {
padding: 8px 12px !important;
}
.w-full.rounded-md .flex.gap-2.overflow-x-auto > div.cursor-pointer {
padding: 10px 10px !important;
font-size: 0.72rem !important;
}
}
/* ============================================================
MAC AI CRM — LEAD DETAIL v5 PATCH (v5.1)
Fixes action buttons, attribute rows, and remaining polish
============================================================ */
/* ================================================================
PATCH §A ACTION BUTTONS — Actual