/* ═══════════════════════════════════════════════════════════════════════════════
* NOOR DESIGN SYSTEM v2.0 — Premium Visual Layer
* Google Stitch-level quality · Depth · Hierarchy · Alive feel
*
* Principles:
* 1. Visual hierarchy — the eye moves to what matters first
* 2. Depth — layered surfaces, not flat boxes
* 3. Premium color — soft tints, strong only for urgency
* 4. Typography — clear contrast between title / meta / notes
* 5. Alive — subtle motion, micro-interactions, breathing UI
*
* Usage:
* ═══════════════════════════════════════════════════════════════════════════════ */
/* ─── RESET ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/* ─── DESIGN TOKENS ──────────────────────────────────────────────────────────── */
:root {
/* ── Color: Neutral (refined zinc) ──────────────────────────────────────── */
--n-25: #FDFDFD;
--n-50: #FAFAFA;
--n-75: #F7F7F8;
--n-100: #F4F4F5;
--n-150: #ECECEE;
--n-200: #E4E4E7;
--n-300: #D4D4D8;
--n-400: #A1A1AA;
--n-500: #71717A;
--n-600: #52525B;
--n-700: #3F3F46;
--n-800: #27272A;
--n-900: #18181B;
--n-950: #09090B;
/* ── Color: Primary (refined blue) ─────────────────────────────────────── */
--pri-25: #F5F8FF;
--pri-50: #EFF6FF;
--pri-100: #DBEAFE;
--pri-200: #BFDBFE;
--pri-300: #93C5FD;
--pri-400: #60A5FA;
--pri-500: #3B82F6;
--pri-600: #2563EB;
--pri-700: #1D4ED8;
/* ── Color: Semantic ────────────────────────────────────────────────────── */
--success-25: #F3FEF6; --success-50: #F0FDF4; --success-100: #DCFCE7; --success-200: #BBF7D0; --success-500: #22C55E; --success-600: #16A34A; --success-700: #15803D;
--warning-25: #FFFDF5; --warning-50: #FFFBEB; --warning-100: #FEF3C7; --warning-200: #FDE68A; --warning-500: #F59E0B; --warning-600: #D97706; --warning-700: #B45309;
--danger-25: #FFF5F5; --danger-50: #FEF2F2; --danger-100: #FEE2E2; --danger-200: #FECACA; --danger-500: #EF4444; --danger-600: #DC2626; --danger-700: #B91C1C;
--purple-25: #FBF7FF; --purple-50: #FAF5FF; --purple-100: #F3E8FF; --purple-200: #E9D5FF; --purple-500: #A855F7; --purple-600: #9333EA; --purple-700: #7C3AED;
--cyan-25: #F3FDFE; --cyan-50: #ECFEFF; --cyan-100: #CFFAFE; --cyan-500: #06B6D4; --cyan-600: #0891B2;
/* ── Surfaces (layered depth system) ────────────────────────────────────── */
--bg: #F3F4F8;
--surface: #FFFFFF;
--surface-raised: #FFFFFF;
--surface-inset: var(--n-75);
--surface-overlay: rgba(255,255,255,0.92);
/* ── Borders (softer, less visible) ─────────────────────────────────────── */
--border: rgba(0,0,0,0.06);
--border-subtle: rgba(0,0,0,0.04);
--border-hover: rgba(0,0,0,0.1);
--border-active: rgba(0,0,0,0.14);
--ring: var(--pri-500);
--ring-soft: rgba(59,130,246,0.12);
/* ── Text (stronger hierarchy) ──────────────────────────────────────────── */
--text: var(--n-900);
--text-strong: #0A0A0B;
--text-secondary: var(--n-500);
--text-muted: var(--n-400);
--text-faint: var(--n-300);
--text-inverse: #FFFFFF;
/* ── Sidebar (light premium — Linear / Stripe tone) ─────────────────── */
--sidebar-bg: #F0F2F5;
--sidebar-hover: rgba(0,0,0,0.04);
--sidebar-active: rgba(59,130,246,0.08);
--sidebar-text: #64748B;
--sidebar-text-active: #0F172A;
--sidebar-border: rgba(0,0,0,0.06);
/* ── Radius (slightly larger for premium feel) ──────────────────────────── */
--r-xs: 4px;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 14px;
--r-xl: 18px;
--r-2xl: 22px;
--r-full: 9999px;
/* ── Shadows (multi-layer, natural depth) ───────────────────────────────── */
--shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.03);
--shadow-md: 0 2px 4px rgba(0,0,0,0.03), 0 6px 12px rgba(0,0,0,0.05);
--shadow-lg: 0 4px 8px rgba(0,0,0,0.03), 0 12px 28px rgba(0,0,0,0.08);
--shadow-xl: 0 8px 16px rgba(0,0,0,0.04), 0 20px 48px rgba(0,0,0,0.12);
--shadow-card: 0 1px 3px rgba(0,0,0,0.03), 0 1px 0 rgba(0,0,0,0.02);
--shadow-card-hover: 0 4px 12px rgba(0,0,0,0.06), 0 1px 0 rgba(0,0,0,0.02);
--shadow-glow-blue: 0 0 0 1px rgba(59,130,246,0.12), 0 4px 16px rgba(59,130,246,0.08);
--shadow-glow-red: 0 0 0 1px rgba(239,68,68,0.12), 0 4px 16px rgba(239,68,68,0.06);
--shadow-glow-green: 0 0 0 1px rgba(34,197,94,0.12), 0 4px 16px rgba(34,197,94,0.06);
/* ── Spacing scale ──────────────────────────────────────────────────────── */
--sp-0: 0px; --sp-px: 1px; --sp-0\.5: 2px;
--sp-1: 4px; --sp-1\.5: 6px; --sp-2: 8px; --sp-2\.5: 10px;
--sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
--sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
/* ── Typography ─────────────────────────────────────────────────────────── */
--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
/* ── Transitions (snappy, premium) ──────────────────────────────────────── */
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--t-fast: 120ms var(--ease);
--t-base: 200ms var(--ease);
--t-slow: 350ms var(--ease);
}
/* ─── BASE ───────────────────────────────────────────────────────────────────── */
body {
font-family: var(--font);
background: var(--bg);
color: var(--text);
font-size: 14px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}
/* ─── LAYOUT ─────────────────────────────────────────────────────────────────── */
.nd-layout { display: flex; height: 100vh; width: 100%; overflow: hidden; }
.nd-sidebar { width: 260px; background: var(--sidebar-bg); color: var(--sidebar-text-active); display: flex; flex-direction: column; flex-shrink: 0; overflow-y: auto; border-right: 1px solid var(--sidebar-border); }
.nd-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; background: linear-gradient(180deg, #F7F8FC 0%, #EFF0F6 40%, #EAECF4 100%); }
.nd-content { flex: 1; overflow-y: auto; padding: var(--sp-8) var(--sp-8) var(--sp-16); }
/* Custom scrollbar — premium thin style */
.nd-content::-webkit-scrollbar { width: 6px; }
.nd-content::-webkit-scrollbar-track { background: transparent; }
.nd-content::-webkit-scrollbar-thumb { background: var(--n-200); border-radius: 3px; }
.nd-content::-webkit-scrollbar-thumb:hover { background: var(--n-300); }
/* ─── SIDEBAR COMPONENTS ─────────────────────────────────────────────────────── */
.nd-sidebar-logo {
padding: 28px 24px 20px;
display: flex; align-items: center; gap: var(--sp-3);
font-weight: 700; font-size: 17px; letter-spacing: -0.02em;
color: var(--sidebar-text-active);
}
.nd-sidebar-logo .mark {
width: 30px; height: 30px;
background: linear-gradient(135deg, #6366F1, #8B5CF6);
border-radius: var(--r-md); display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 800; color: white;
box-shadow: 0 2px 8px rgba(99,102,241,0.25);
}
.nd-sidebar-status {
margin: 0 16px 20px;
padding: 10px 14px;
background: rgba(255,255,255,0.6);
border: 1px solid rgba(0,0,0,0.06);
border-radius: var(--r-md); display: flex; align-items: center; gap: var(--sp-2);
font-size: 11px; font-weight: 500; color: var(--sidebar-text);
letter-spacing: 0.01em;
}
.nd-sidebar-status .dot {
width: 6px; height: 6px; background: #34D399; border-radius: 50%;
box-shadow: 0 0 6px rgba(52,211,153,0.5);
animation: nd-pulse 2.5s ease-in-out infinite;
}
@keyframes nd-pulse { 0%,100%{box-shadow:0 0 6px rgba(52,211,153,0.5)} 50%{box-shadow:0 0 12px rgba(52,211,153,0.2)} }
.nd-nav { padding: 0 12px; flex: 1; }
.nd-nav-item {
display: flex; align-items: center; gap: var(--sp-3);
padding: 10px 12px; border-radius: var(--r-md);
font-size: 13px; font-weight: 500; color: var(--sidebar-text);
text-decoration: none; cursor: pointer; transition: all var(--t-fast);
margin-bottom: 2px; position: relative;
}
.nd-nav-item:hover { background: var(--sidebar-hover); color: var(--sidebar-text-active); }
.nd-nav-item.active {
background: var(--sidebar-active); color: var(--sidebar-text-active);
font-weight: 600;
}
.nd-nav-item.active::before {
content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 3px; height: 20px; background: var(--pri-500); border-radius: 0 2px 2px 0;
}
.nd-nav-item i { width: 18px; height: 18px; stroke-width: 1.8; flex-shrink: 0; opacity: 0.7; }
.nd-nav-item.active i { opacity: 1; }
.nd-nav-badge {
margin-left: auto; font-size: 10px; font-weight: 600;
padding: 2px 8px; border-radius: var(--r-full);
background: rgba(0,0,0,0.06); color: var(--sidebar-text);
}
.nd-nav-badge.live {
background: rgba(239,68,68,0.1); color: var(--danger-600);
animation: nd-badge-pulse 2s ease-in-out infinite;
}
@keyframes nd-badge-pulse { 0%,100%{opacity:1} 50%{opacity:0.7} }
.nd-sidebar-footer {
padding: 16px 20px;
border-top: 1px solid var(--sidebar-border);
display: flex; align-items: center; gap: var(--sp-3);
margin-top: auto;
}
.nd-sidebar-footer .avatar {
width: 32px; height: 32px;
background: linear-gradient(135deg, #6366F1, #8B5CF6);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 600; color: white; flex-shrink: 0;
box-shadow: 0 2px 6px rgba(99,102,241,0.3);
}
.nd-sidebar-footer .name { font-size: 13px; font-weight: 600; color: var(--sidebar-text-active); }
.nd-sidebar-footer .role { font-size: 11px; color: var(--sidebar-text); }
/* ─── BRANCH SWITCHER ────────────────────────────────────────────────────────── */
.nd-branch-switcher {
margin: 4px 12px 0;
position: relative;
}
.nd-branch-current {
display: flex; align-items: center; gap: 8px;
padding: 8px 12px;
border-radius: var(--r-sm);
cursor: pointer;
font-size: 12.5px; font-weight: 500;
color: var(--sidebar-text-active);
background: var(--sidebar-hover);
border: 1px solid transparent;
transition: all 0.15s ease;
}
.nd-branch-current:hover {
background: rgba(0,0,0,0.06);
border-color: rgba(0,0,0,0.08);
}
.nd-branch-dropdown {
position: absolute; top: calc(100% + 4px); left: 0; right: 0;
background: white;
border: 1px solid var(--border);
border-radius: var(--r-sm);
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
z-index: 100;
max-height: 280px;
overflow-y: auto;
padding: 4px;
}
.nd-branch-option {
display: flex; align-items: center; gap: 8px;
padding: 7px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 12.5px;
color: var(--n-700);
transition: background 0.1s;
}
.nd-branch-option:hover { background: var(--n-75); }
.nd-branch-option.active {
background: var(--pri-50);
color: var(--pri-600);
font-weight: 600;
}
.nd-branch-option small {
margin-left: auto;
font-size: 10.5px;
color: var(--n-400);
font-weight: 400;
}
.nd-branch-option.nd-branch-add {
color: var(--pri-500);
font-weight: 500;
}
.nd-branch-option.nd-branch-add:hover {
background: var(--pri-25);
}
.nd-branch-divider {
height: 1px;
background: var(--n-100);
margin: 4px 6px;
}
/* ─── TOP BAR ────────────────────────────────────────────────────────────────── */
.nd-topbar {
padding: 20px var(--sp-8) 16px;
background: var(--surface);
display: flex; align-items: center; justify-content: space-between;
flex-shrink: 0;
border-bottom: 1px solid var(--border-subtle);
}
.nd-topbar h1 {
font-size: 22px; font-weight: 800; letter-spacing: -0.025em;
color: var(--text-strong);
}
.nd-topbar .sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; font-weight: 400; }
.nd-topbar-actions { display: flex; align-items: center; gap: var(--sp-3); }
/* ─── TAB NAV ────────────────────────────────────────────────────────────────── */
.nd-tabs {
display: flex; gap: var(--sp-1); background: var(--surface);
border-bottom: 1px solid var(--border-subtle);
padding: 0 var(--sp-8); flex-shrink: 0;
}
.nd-tab {
padding: 12px 16px 10px; font-size: 13px; font-weight: 500;
color: var(--text-muted); cursor: pointer; border: none; background: none;
border-bottom: 2px solid transparent; transition: all var(--t-fast);
display: flex; align-items: center; gap: 8px; position: relative;
}
.nd-tab:hover { color: var(--text-secondary); }
.nd-tab.active { color: var(--text-strong); border-bottom-color: var(--n-900); font-weight: 600; }
.nd-tab-count {
font-size: 11px; font-weight: 600;
background: var(--n-100); color: var(--text-muted);
padding: 1px 8px; border-radius: var(--r-full);
transition: all var(--t-fast);
}
.nd-tab.active .nd-tab-count { background: var(--n-900); color: white; }
/* ═══════════════════════════════════════════════════════════════════════════════
* BADGES — Refined, softer, more premium
* ═══════════════════════════════════════════════════════════════════════════════ */
.nd-badge {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11px; font-weight: 600; padding: 3px 10px;
border-radius: var(--r-full); white-space: nowrap;
line-height: 1.4; letter-spacing: 0.01em;
}
/* Status badges — softer, more depth */
.nd-badge-scheduled { background: var(--n-100); color: var(--n-600); }
.nd-badge-confirmed { background: var(--purple-25); color: var(--purple-700); }
.nd-badge-on_the_way { background: var(--pri-25); color: var(--pri-700); }
.nd-badge-arrived { background: var(--success-25); color: var(--success-700); }
.nd-badge-completed { background: var(--success-100); color: var(--success-700); }
.nd-badge-no_show { background: var(--danger-25); color: var(--danger-700); }
.nd-badge-cancelled { background: var(--n-75); color: var(--n-400); text-decoration: line-through; }
/* Dot indicators — subtle glow */
.nd-badge-scheduled::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--n-400); }
.nd-badge-confirmed::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--purple-500); box-shadow: 0 0 4px rgba(168,85,247,0.3); }
.nd-badge-on_the_way::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--pri-500); box-shadow: 0 0 4px rgba(59,130,246,0.3); animation: nd-pulse-blue 2s ease infinite; }
.nd-badge-arrived::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--success-500); box-shadow: 0 0 4px rgba(34,197,94,0.3); }
.nd-badge-no_show::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--danger-500); }
@keyframes nd-pulse-blue { 0%,100%{box-shadow:0 0 4px rgba(59,130,246,0.3)} 50%{box-shadow:0 0 8px rgba(59,130,246,0.5)} }
/* Priority badges */
.nd-badge-pri-low { background: var(--n-75); color: var(--n-500); }
.nd-badge-pri-normal { background: var(--pri-25); color: var(--pri-600); }
.nd-badge-pri-high { background: var(--warning-25); color: var(--warning-700); }
.nd-badge-pri-critical { background: var(--danger-25); color: var(--danger-700); font-weight: 700; }
/* Temperature badges */
.nd-badge-cold { background: var(--cyan-25); color: var(--cyan-600); }
.nd-badge-warm { background: var(--warning-25); color: var(--warning-600); }
.nd-badge-hot { background: var(--danger-25); color: var(--danger-600); }
/* Live indicator — pulsing glow */
.nd-live-pill {
display: inline-flex; align-items: center; gap: 7px;
background: var(--danger-25); color: var(--danger-600);
font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
padding: 6px 16px; border-radius: var(--r-full);
}
.nd-live-pill .dot {
width: 7px; height: 7px; background: var(--danger-500); border-radius: 50%;
box-shadow: 0 0 6px rgba(239,68,68,0.4);
animation: nd-blink 1.5s ease-in-out infinite;
}
@keyframes nd-blink { 0%,100%{opacity:1;box-shadow:0 0 6px rgba(239,68,68,0.4)} 50%{opacity:0.4;box-shadow:0 0 2px rgba(239,68,68,0.2)} }
/* ═══════════════════════════════════════════════════════════════════════════════
* BUTTONS — Premium feel, subtle depth
* ═══════════════════════════════════════════════════════════════════════════════ */
.nd-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 8px 16px; border-radius: var(--r-md);
font-size: 13px; font-weight: 600; font-family: var(--font);
cursor: pointer; border: 1px solid var(--border);
background: var(--surface); color: var(--text);
transition: all var(--t-fast); line-height: 1.4;
white-space: nowrap;
box-shadow: var(--shadow-xs);
}
.nd-btn:hover { background: var(--n-50); border-color: var(--border-hover); box-shadow: var(--shadow-sm); transform: translateY(-0.5px); }
.nd-btn:active { transform: translateY(0); box-shadow: none; }
.nd-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.nd-btn i { width: 15px; height: 15px; stroke-width: 2; }
.nd-btn-primary { background: var(--n-900); color: white; border-color: transparent; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.nd-btn-primary:hover { background: var(--n-800); box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.nd-btn-blue { background: var(--pri-600); color: white; border-color: transparent; box-shadow: 0 1px 3px rgba(37,99,235,0.2); }
.nd-btn-blue:hover { background: var(--pri-700); box-shadow: 0 2px 8px rgba(37,99,235,0.25); }
.nd-btn-success { background: var(--success-600); color: white; border-color: transparent; box-shadow: 0 1px 3px rgba(22,163,74,0.2); }
.nd-btn-success:hover { background: var(--success-700); box-shadow: 0 2px 8px rgba(22,163,74,0.25); }
.nd-btn-danger { background: transparent; color: var(--danger-600); border-color: var(--danger-200); box-shadow: none; }
.nd-btn-danger:hover { background: var(--danger-25); border-color: var(--danger-300); }
.nd-btn-warning { background: var(--warning-600); color: white; border-color: transparent; box-shadow: 0 1px 3px rgba(217,119,6,0.2); }
.nd-btn-warning:hover { background: var(--warning-700); box-shadow: 0 2px 8px rgba(217,119,6,0.25); }
.nd-btn-ghost { background: transparent; border-color: transparent; box-shadow: none; }
.nd-btn-ghost:hover { background: var(--n-75); }
/* Small buttons (card actions) */
.nd-btn-sm { padding: 5px 12px; font-size: 12px; border-radius: var(--r-sm); }
.nd-btn-sm i { width: 14px; height: 14px; }
/* Icon-only button */
.nd-btn-icon { padding: 8px; width: 36px; height: 36px; }
.nd-btn-icon.sm { padding: 4px; width: 28px; height: 28px; }
/* ═══════════════════════════════════════════════════════════════════════════════
* CARDS — Generic
* ═══════════════════════════════════════════════════════════════════════════════ */
.nd-card {
background: var(--surface); border: 1px solid var(--border-subtle);
border-radius: var(--r-lg); padding: var(--sp-5);
box-shadow: var(--shadow-card);
transition: all 0.2s var(--ease);
}
.nd-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-1px); }
.nd-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--sp-3); }
.nd-card-body { }
.nd-card-footer { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--n-100); }
/* ─── Visit Card — Premium redesign ──────────────────────────────────────── */
.nd-visit-card {
background: var(--surface);
border: 1px solid var(--border-subtle);
border-radius: var(--r-lg);
padding: 0;
transition: all 0.25s var(--ease);
position: relative;
overflow: hidden;
box-shadow: var(--shadow-card);
}
/* Status accent bar (top, 3px) */
.nd-visit-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 3px;
background: var(--n-200);
transition: background 0.25s var(--ease);
}
.nd-visit-card:hover {
box-shadow: var(--shadow-card-hover);
transform: translateY(-2px);
border-color: var(--border-hover);
}
/* Status bar colors */
.nd-visit-card[data-status="scheduled"]::before { background: var(--n-300); }
.nd-visit-card[data-status="confirmed"]::before { background: linear-gradient(90deg, var(--purple-500), var(--purple-400)); }
.nd-visit-card[data-status="on_the_way"]::before { background: linear-gradient(90deg, var(--pri-500), var(--pri-400)); }
.nd-visit-card[data-status="arrived"]::before { background: linear-gradient(90deg, var(--success-500), var(--success-400)); }
.nd-visit-card[data-status="completed"]::before { background: linear-gradient(90deg, var(--success-600), var(--success-500)); }
.nd-visit-card[data-status="no_show"]::before { background: linear-gradient(90deg, var(--danger-600), var(--danger-500)); }
.nd-visit-card[data-status="cancelled"]::before { background: var(--n-200); }
/* Cancelled state fade */
.nd-visit-card[data-status="cancelled"] { opacity: 0.6; }
.nd-visit-card[data-status="cancelled"]:hover { opacity: 0.8; }
/* Alert state — soft glow backgrounds */
.nd-visit-card[data-alert="arriving_soon"] {
background: linear-gradient(135deg, var(--warning-25) 0%, var(--surface) 60%);
box-shadow: var(--shadow-card), inset 0 0 0 1px rgba(245,158,11,0.08);
}
.nd-visit-card[data-alert="arriving_soon"]::before { background: linear-gradient(90deg, var(--warning-500), var(--warning-400)); }
.nd-visit-card[data-alert="late"] {
background: linear-gradient(135deg, var(--danger-25) 0%, var(--surface) 60%);
box-shadow: var(--shadow-card), inset 0 0 0 1px rgba(239,68,68,0.08);
}
.nd-visit-card[data-alert="late"]::before { background: linear-gradient(90deg, var(--danger-500), var(--danger-400)); }
.nd-visit-card[data-alert="no_show_risk"] {
background: linear-gradient(135deg, var(--danger-50) 0%, var(--danger-25) 40%, var(--surface) 80%);
box-shadow: var(--shadow-glow-red);
}
.nd-visit-card[data-alert="no_show_risk"]::before { background: linear-gradient(90deg, var(--danger-700), var(--danger-500)); height: 4px; }
/* Priority glow */
.nd-visit-card[data-priority="high"]:hover { box-shadow: var(--shadow-card-hover), 0 0 0 1px rgba(245,158,11,0.15); }
.nd-visit-card[data-priority="critical"] { box-shadow: var(--shadow-card), 0 0 0 1px rgba(239,68,68,0.1); }
.nd-visit-card[data-priority="critical"]:hover { box-shadow: var(--shadow-card-hover), 0 0 0 1px rgba(239,68,68,0.2); }
/* Visit card inner layout */
.nd-visit-card .nd-card-inner { padding: 18px 20px 16px; }
.nd-visit-card .nd-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--sp-3); }
.nd-visit-card .nd-card-footer {
display: flex; gap: var(--sp-2); flex-wrap: wrap;
padding: 12px 20px; margin-top: 0;
background: var(--n-75);
border-top: 1px solid var(--border);
}
/* Alert card footers — slightly tinted */
.nd-visit-card[data-alert="no_show_risk"] .nd-card-footer { background: #FEF5F5; border-top-color: rgba(239,68,68,0.08); }
.nd-visit-card[data-alert="late"] .nd-card-footer { background: #FEF8F5; border-top-color: rgba(239,68,68,0.06); }
.nd-visit-card[data-alert="arriving_soon"] .nd-card-footer { background: #FEFCF5; border-top-color: rgba(245,158,11,0.06); }
/* Visit card typography */
.nd-vc-name { font-size: 15px; font-weight: 700; color: var(--text-strong); letter-spacing: -0.01em; line-height: 1.3; }
.nd-vc-phone { font-size: 12px; color: var(--text-muted); margin-top: 2px; font-weight: 400; }
.nd-vc-time { font-size: 12px; color: var(--text-secondary); margin: var(--sp-2) 0; display: flex; align-items: center; gap: 6px; }
.nd-vc-time strong { color: var(--text-strong); font-weight: 700; font-size: 13px; }
.nd-vc-meta { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
/* ═══════════════════════════════════════════════════════════════════════════════
* ALERT BANNERS (inline, for cards)
* ═══════════════════════════════════════════════════════════════════════════════ */
.nd-alert {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 600; padding: 5px 12px;
border-radius: var(--r-sm); margin-bottom: var(--sp-2);
letter-spacing: 0.01em;
}
.nd-alert-warn { background: var(--warning-100); color: var(--warning-700); }
.nd-alert-danger { background: var(--danger-100); color: var(--danger-700); }
.nd-alert-info { background: var(--pri-100); color: var(--pri-700); }
.nd-alert-success { background: var(--success-100); color: var(--success-700); }
/* ═══════════════════════════════════════════════════════════════════════════════
* TAGS (product interest, metadata)
* ═══════════════════════════════════════════════════════════════════════════════ */
.nd-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.nd-tag {
font-size: 11px; font-weight: 500; padding: 2px 9px;
border-radius: var(--r-full); background: var(--n-75); color: var(--n-600);
border: none; letter-spacing: 0.01em;
}
.nd-tag-blue { background: var(--pri-50); color: var(--pri-700); }
.nd-tag-green { background: var(--success-50); color: var(--success-700); }
.nd-tag-amber { background: var(--warning-50); color: var(--warning-700); }
.nd-tag-purple { background: var(--purple-50); color: var(--purple-700); }
/* ═══════════════════════════════════════════════════════════════════════════════
* STAT CARDS (KPI row) — Premium, deeper look
* ═══════════════════════════════════════════════════════════════════════════════ */
.nd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-4); }
.nd-stat {
background: var(--surface);
border: 1px solid var(--border-subtle);
border-radius: var(--r-lg);
padding: 20px;
box-shadow: var(--shadow-card);
transition: all 0.2s var(--ease);
position: relative; overflow: hidden;
}
.nd-stat::before {
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 2px; background: var(--n-150);
}
.nd-stat:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-1px); }
.nd-stat-label {
font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: var(--sp-3);
}
.nd-stat-value {
font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -0.03em;
color: var(--text-strong);
}
.nd-stat-sub {
font-size: 12px; color: var(--text-muted); margin-top: var(--sp-2);
font-weight: 400;
}
/* Stat value accent colors + top bar */
.nd-stat-value.blue { color: var(--pri-600); }
.nd-stat:has(.nd-stat-value.blue)::before { background: linear-gradient(90deg, var(--pri-500), var(--pri-300)); }
.nd-stat-value.green { color: var(--success-600); }
.nd-stat:has(.nd-stat-value.green)::before { background: linear-gradient(90deg, var(--success-500), var(--success-300)); }
.nd-stat-value.amber { color: var(--warning-600); }
.nd-stat:has(.nd-stat-value.amber)::before { background: linear-gradient(90deg, var(--warning-500), var(--warning-300)); }
.nd-stat-value.red { color: var(--danger-600); }
.nd-stat:has(.nd-stat-value.red)::before { background: linear-gradient(90deg, var(--danger-500), var(--danger-300)); }
.nd-stat-value.purple { color: var(--purple-600); }
.nd-stat:has(.nd-stat-value.purple)::before { background: linear-gradient(90deg, var(--purple-500), var(--purple-300)); }
/* ═══════════════════════════════════════════════════════════════════════════════
* ACTION BAR (toolbar)
* ═══════════════════════════════════════════════════════════════════════════════ */
.nd-action-bar {
display: flex; gap: var(--sp-3); flex-wrap: wrap;
align-items: center;
}
/* ═══════════════════════════════════════════════════════════════════════════════
* SECTION HEADERS — Bolder, more presence
* ═══════════════════════════════════════════════════════════════════════════════ */
.nd-section-title {
font-size: 13px; font-weight: 700; color: var(--text);
display: flex; align-items: center; gap: var(--sp-2);
margin-bottom: var(--sp-4);
letter-spacing: -0.005em;
}
.nd-section-title .icon { font-size: 16px; }
.nd-section-count {
font-size: 11px; font-weight: 600;
background: var(--n-100); color: var(--n-600);
padding: 2px 8px; border-radius: var(--r-full);
}
.nd-section-title.danger { color: var(--danger-600); }
.nd-section-title.danger .nd-section-count { background: var(--danger-50); color: var(--danger-600); }
/* ═══════════════════════════════════════════════════════════════════════════════
* GRID LAYOUTS
* ═══════════════════════════════════════════════════════════════════════════════ */
.nd-grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--sp-4); }
.nd-grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-5); }
.nd-gap-sm { gap: var(--sp-3); }
.nd-gap-md { gap: var(--sp-4); }
.nd-gap-lg { gap: var(--sp-6); }
/* ═══════════════════════════════════════════════════════════════════════════════
* DEMAND BARS — Premium, layered cards
* ═══════════════════════════════════════════════════════════════════════════════ */
.nd-demand-card {
background: var(--surface);
border: 1px solid var(--border-subtle);
border-radius: var(--r-lg);
padding: 22px;
box-shadow: var(--shadow-card);
transition: all 0.2s var(--ease);
}
.nd-demand-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-1px); }
.nd-demand-card h3 {
font-size: 13px; font-weight: 700; margin-bottom: 18px;
color: var(--text-strong); text-transform: uppercase; letter-spacing: 0.04em;
}
.nd-demand-item {
display: flex; align-items: center; gap: var(--sp-3);
padding: 10px 0;
border-bottom: 1px solid var(--n-75);
}
.nd-demand-item:last-child { border-bottom: none; }
.nd-demand-rank { font-size: 11px; font-weight: 700; color: var(--text-muted); width: 22px; text-align: center; }
.nd-demand-name { font-size: 13px; font-weight: 600; color: var(--text); min-width: 80px; }
.nd-demand-bar { flex: 1; height: 5px; background: var(--n-100); border-radius: 3px; overflow: hidden; }
.nd-demand-fill {
height: 100%; border-radius: 3px;
transition: width 0.6s var(--ease-out);
background: linear-gradient(90deg, var(--n-800), var(--n-600));
}
.nd-demand-count { font-size: 13px; font-weight: 700; color: var(--text-strong); min-width: 28px; text-align: right; }
.nd-demand-trend { font-size: 11px; min-width: 14px; }
.nd-demand-trend.up { color: var(--success-500); }
.nd-demand-trend.flat { color: var(--text-muted); }
/* ═══════════════════════════════════════════════════════════════════════════════
* MODALS — Deeper, more prominent
* ═══════════════════════════════════════════════════════════════════════════════ */
.nd-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.45);
z-index: 1000; display: none; align-items: center; justify-content: center;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.nd-overlay.show { display: flex; animation: nd-overlay-in 0.2s ease; }
@keyframes nd-overlay-in { from { opacity: 0; } to { opacity: 1; } }
.nd-modal {
background: var(--surface); border-radius: var(--r-xl);
width: 500px; max-width: 95vw; max-height: 85vh; overflow-y: auto;
box-shadow: var(--shadow-xl);
border: 1px solid var(--border-subtle);
animation: nd-modal-in 0.25s var(--ease);
}
@keyframes nd-modal-in { from { transform: translateY(8px) scale(0.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.nd-modal-header {
padding: 20px 24px; border-bottom: 1px solid var(--border-subtle);
display: flex; justify-content: space-between; align-items: center;
}
.nd-modal-header h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.nd-modal-close {
background: none; border: none; cursor: pointer; color: var(--text-muted);
padding: var(--sp-1); border-radius: var(--r-sm); transition: all var(--t-fast);
font-size: 18px; line-height: 1;
width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
}
.nd-modal-close:hover { background: var(--n-100); color: var(--text); }
.nd-modal-body { padding: 24px; }
.nd-modal-footer {
padding: 16px 24px; border-top: 1px solid var(--border-subtle);
display: flex; justify-content: flex-end; gap: var(--sp-3);
background: var(--n-50);
border-radius: 0 0 var(--r-xl) var(--r-xl);
}
/* ═══════════════════════════════════════════════════════════════════════════════
* FORMS — Cleaner, more refined
* ═══════════════════════════════════════════════════════════════════════════════ */
.nd-field { margin-bottom: var(--sp-5); }
.nd-field label {
display: block; font-size: 13px; font-weight: 500;
color: var(--text-secondary); margin-bottom: 6px;
}
.nd-field label .req { color: var(--danger-500); }
.nd-input, .nd-select, .nd-textarea {
width: 100%; padding: 9px 14px; border: 1px solid var(--border);
border-radius: var(--r-md); font-size: 14px; font-family: var(--font);
background: var(--surface); color: var(--text);
transition: all var(--t-fast);
box-shadow: var(--shadow-xs);
}
.nd-input:focus, .nd-select:focus, .nd-textarea:focus {
outline: none; border-color: var(--pri-500);
box-shadow: 0 0 0 3px var(--ring-soft);
}
.nd-input::placeholder, .nd-textarea::placeholder { color: var(--n-300); }
.nd-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
/* ═══════════════════════════════════════════════════════════════════════════════
* EMPTY STATE
* ═══════════════════════════════════════════════════════════════════════════════ */
.nd-empty {
text-align: center; padding: var(--sp-16) var(--sp-5);
color: var(--text-muted);
}
.nd-empty .icon { font-size: 40px; margin-bottom: var(--sp-4); opacity: 0.3; }
.nd-empty h3 { font-size: 16px; font-weight: 600; color: var(--text-secondary); margin-bottom: var(--sp-2); }
.nd-empty p { font-size: 13px; max-width: 340px; margin: 0 auto; line-height: 1.7; color: var(--text-muted); }
/* ═══════════════════════════════════════════════════════════════════════════════
* LOADING SPINNER
* ═══════════════════════════════════════════════════════════════════════════════ */
.nd-loading { display: flex; align-items: center; justify-content: center; padding: var(--sp-16); }
.nd-spinner {
width: 24px; height: 24px;
border: 2px solid var(--n-150); border-top-color: var(--n-800);
border-radius: 50%; animation: nd-spin 0.6s linear infinite;
}
@keyframes nd-spin { to { transform: rotate(360deg); } }
/* ═══════════════════════════════════════════════════════════════════════════════
* TOAST — Premium, deeper
* ═══════════════════════════════════════════════════════════════════════════════ */
.nd-toast {
position: fixed; top: 20px; right: 20px; z-index: 2000;
padding: 12px 20px; border-radius: var(--r-lg);
font-size: 13px; font-weight: 500; color: white;
max-width: 380px; box-shadow: var(--shadow-xl);
animation: nd-toast-in 0.3s var(--ease);
display: flex; align-items: center; gap: 8px;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.nd-toast.success { background: rgba(24,24,27,0.92); }
.nd-toast.error { background: rgba(220,38,38,0.92); }
.nd-toast.warning { background: rgba(217,119,6,0.92); }
@keyframes nd-toast-in { from { transform: translateY(-16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
/* ═══════════════════════════════════════════════════════════════════════════════
* PLATFORM ICONS
* ═══════════════════════════════════════════════════════════════════════════════ */
.nd-platform { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; font-weight: 400; }
/* ═══════════════════════════════════════════════════════════════════════════════
* UTILITIES
* ═══════════════════════════════════════════════════════════════════════════════ */
.nd-mb-0 { margin-bottom: 0; }
.nd-mb-2 { margin-bottom: var(--sp-2); }
.nd-mb-3 { margin-bottom: var(--sp-3); }
.nd-mb-4 { margin-bottom: var(--sp-4); }
.nd-mb-6 { margin-bottom: var(--sp-6); }
.nd-mb-8 { margin-bottom: var(--sp-8); }
.nd-mt-4 { margin-top: var(--sp-4); }
.nd-flex { display: flex; }
.nd-items-center { align-items: center; }
.nd-gap-2 { gap: var(--sp-2); }
.nd-gap-3 { gap: var(--sp-3); }
.nd-text-muted { color: var(--text-muted); }
.nd-text-sm { font-size: 12px; }
.nd-text-xs { font-size: 11px; }
.nd-font-mono { font-family: var(--font-mono); }
.nd-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-italic { font-style: italic; }
/* ═══════════════════════════════════════════════════════════════════════════════
* GLOBAL MOTION LANGUAGE
* Everything breathes. Nothing is static.
* ═══════════════════════════════════════════════════════════════════════════════ */
@keyframes sl-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sl-enter-scale { from { opacity: 0; transform: scale(0.985) translateY(4px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes sl-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sl-breathe { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes sl-glow-pulse {
0%,100% { box-shadow: 0 0 20px rgba(239,68,68,0.06), 0 8px 40px rgba(239,68,68,0.05), 0 20px 60px rgba(239,68,68,0.03); }
50% { box-shadow: 0 0 40px rgba(239,68,68,0.12), 0 8px 48px rgba(239,68,68,0.08), 0 24px 72px rgba(239,68,68,0.05); }
}
@keyframes sl-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
@keyframes nd-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
/* ═══════════════════════════════════════════════════════════════════════════════
* SHOWROOM LIVE — PREMIUM COMMAND CENTER
* Not a dashboard. A live product scene.
* ═══════════════════════════════════════════════════════════════════════════════ */
/* ─── COMPACT HEADER — barely there, confident ────────────────────────────── */
.sl-header {
padding: 16px var(--sp-8) 14px;
background: linear-gradient(180deg, var(--surface) 0%, rgba(255,255,255,0.7) 100%);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
display: flex; align-items: center; justify-content: space-between;
flex-shrink: 0;
position: relative; z-index: 2;
}
.sl-header::after {
content: ''; position: absolute; bottom: 0; left: var(--sp-8); right: var(--sp-8);
height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.sl-header-left {
display: flex; align-items: center; gap: 14px;
}
.sl-header-left h1 {
font-size: 24px; font-weight: 900; letter-spacing: -0.04em;
color: var(--text-strong);
background: linear-gradient(135deg, var(--n-950), var(--n-700));
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
.sl-header-right {
display: flex; align-items: center; gap: var(--sp-2);
}
/* ─── PULSE BAR — control signal, confident presence ─────────────────────── */
.sl-pulse {
display: flex; align-items: center; gap: 0;
padding: 20px 12px;
margin-bottom: 28px;
background: linear-gradient(135deg, #FFFFFF 0%, #FAFBFF 100%);
border: 1px solid rgba(0,0,0,0.06);
border-radius: var(--r-xl);
box-shadow:
0 1px 2px rgba(0,0,0,0.04),
0 4px 16px rgba(0,0,0,0.05),
0 12px 36px rgba(0,0,0,0.03),
inset 0 1px 0 rgba(255,255,255,0.9);
animation: sl-enter 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
position: relative;
}
/* Subtle top highlight line for depth */
.sl-pulse::before {
content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
}
.sl-pulse-item {
display: flex; align-items: baseline; gap: 8px;
padding: 0 28px;
animation: sl-fade-in 0.6s ease both;
}
.sl-pulse-item:nth-child(1) { animation-delay: 0.1s; }
.sl-pulse-item:nth-child(3) { animation-delay: 0.18s; }
.sl-pulse-item:nth-child(5) { animation-delay: 0.26s; }
.sl-pulse-item:nth-child(7) { animation-delay: 0.34s; }
.sl-pulse-item:nth-child(9) { animation-delay: 0.42s; }
.sl-pulse-val {
font-size: 32px; font-weight: 900; letter-spacing: -0.04em;
color: var(--text-strong); line-height: 1;
transition: color 0.3s var(--ease);
}
.sl-pulse-label {
font-size: 13px; font-weight: 500; color: var(--n-500);
text-transform: lowercase; letter-spacing: 0.01em;
}
.sl-pulse-sep {
width: 1px; height: 32px;
background: linear-gradient(180deg, transparent, var(--n-200), transparent);
flex-shrink: 0;
}
/* Accent colors */
.sl-pulse-item.accent-green .sl-pulse-val { color: var(--success-600); }
.sl-pulse-item.accent-amber .sl-pulse-val { color: var(--warning-600); }
.sl-pulse-item.accent-red .sl-pulse-val { color: var(--danger-600); font-weight: 900; }
.sl-pulse-item.accent-red .sl-pulse-label { color: var(--danger-500); font-weight: 600; }
.sl-pulse-item.accent-dim .sl-pulse-val { color: var(--n-300); font-weight: 700; font-size: 24px; }
.sl-pulse-item.accent-dim .sl-pulse-label { color: var(--n-300); }
/* ─── HERO ZONE — cinematic scene, visual focal point ────────────────────── */
.sl-hero {
margin-bottom: 32px;
border-radius: 20px;
position: relative;
overflow: hidden;
padding: 32px 32px 28px;
/* Rich layered atmospheric background — you FEEL the warmth */
background:
radial-gradient(ellipse at 10% 30%, rgba(239,68,68,0.14) 0%, transparent 50%),
radial-gradient(ellipse at 90% 10%, rgba(251,146,60,0.10) 0%, transparent 40%),
radial-gradient(ellipse at 50% 100%, rgba(239,68,68,0.06) 0%, transparent 45%),
radial-gradient(circle at 30% 60%, rgba(252,165,165,0.08) 0%, transparent 35%),
linear-gradient(170deg, #FFE4E1 0%, #FFEEE8 15%, #FFF5F2 35%, #FFFAF9 60%, #FFFFFF 100%);
border: 1px solid rgba(239,68,68,0.10);
box-shadow:
0 0 0 1px rgba(239,68,68,0.05),
0 2px 8px rgba(239,68,68,0.06),
0 8px 32px rgba(239,68,68,0.08),
0 24px 72px rgba(239,68,68,0.06),
inset 0 1px 0 rgba(255,255,255,0.95);
/* Breathing glow — visible, alive */
animation: sl-enter-scale 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both, sl-glow-pulse 6s ease-in-out 1.5s infinite;
}
/* Top light streak — creates depth and cinematic lighting direction */
.sl-hero::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 45%;
background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.1) 60%, transparent 100%);
pointer-events: none;
border-radius: inherit;
z-index: 0;
}
/* Shimmer overlay — visible enough to feel alive */
.sl-hero::after {
content: '';
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
background-size: 200% 100%;
animation: sl-shimmer 12s ease-in-out infinite;
pointer-events: none;
border-radius: inherit;
z-index: 0;
}
.sl-hero-header {
margin-bottom: 24px;
position: relative; z-index: 1;
}
.sl-hero-title {
display: flex; align-items: center; gap: 14px;
font-size: 24px; font-weight: 900; color: var(--danger-700);
letter-spacing: -0.03em;
}
.sl-hero-icon { font-size: 28px; filter: drop-shadow(0 2px 6px rgba(239,68,68,0.25)); }
.sl-hero-count {
font-size: 15px; font-weight: 800;
background: linear-gradient(135deg, var(--danger-500), var(--danger-600));
color: white;
padding: 5px 16px; border-radius: var(--r-full);
box-shadow: 0 2px 8px rgba(220,38,38,0.35), 0 0 0 4px rgba(220,38,38,0.10);
min-width: 32px; text-align: center;
}
.sl-hero-subtitle {
font-size: 12px; color: rgba(185,28,28,0.4); margin-top: 7px; font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* Hero grid */
.sl-hero-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
position: relative; z-index: 1;
}
/* ─── HERO CARD — cinematic, unmistakable presence ───────────────────────── */
.sl-hero-card {
background: linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.92) 100%);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(0,0,0,0.06);
box-shadow:
0 1px 2px rgba(0,0,0,0.04),
0 4px 12px rgba(0,0,0,0.05),
0 12px 36px rgba(0,0,0,0.06),
0 24px 64px rgba(0,0,0,0.04),
inset 0 1px 0 rgba(255,255,255,0.9);
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
animation: sl-enter 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.sl-hero-card:nth-child(1) { animation-delay: 0.2s; }
.sl-hero-card:nth-child(2) { animation-delay: 0.32s; }
.sl-hero-card:nth-child(3) { animation-delay: 0.44s; }
.sl-hero-card:hover {
box-shadow:
0 2px 4px rgba(0,0,0,0.04),
0 8px 24px rgba(0,0,0,0.08),
0 20px 56px rgba(0,0,0,0.08),
0 32px 80px rgba(0,0,0,0.04),
inset 0 1px 0 rgba(255,255,255,1);
transform: translateY(-4px) scale(1.008);
}
/* Left accent bar — bold, unapologetic */
.sl-hero-card::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
background: linear-gradient(180deg, var(--danger-400), var(--danger-600));
z-index: 2;
box-shadow: 2px 0 8px rgba(239,68,68,0.15);
}
.sl-hero-card.warn::before {
background: linear-gradient(180deg, var(--warning-400), var(--warning-600));
box-shadow: 2px 0 8px rgba(245,158,11,0.15);
}
.sl-hero-card.soon::before {
background: linear-gradient(180deg, var(--pri-400), var(--pri-600));
box-shadow: 2px 0 8px rgba(59,130,246,0.15);
}
/* Hero card urgency strip */
.sl-hero-card-top {
padding: 12px 20px 12px 24px;
display: flex; justify-content: space-between; align-items: center;
position: relative;
}
.sl-hero-card-top::after {
content: ''; position: absolute; bottom: 0; left: 24px; right: 20px;
height: 1px; background: linear-gradient(90deg, rgba(0,0,0,0.06), transparent);
}
.sl-hero-card.critical .sl-hero-card-top {
background: linear-gradient(90deg, rgba(254,202,202,0.5) 0%, rgba(254,226,226,0.15) 70%, transparent 100%);
}
.sl-hero-card.warn .sl-hero-card-top {
background: linear-gradient(90deg, rgba(253,230,138,0.45) 0%, rgba(254,243,199,0.1) 70%, transparent 100%);
}
.sl-hero-card.soon .sl-hero-card-top {
background: linear-gradient(90deg, rgba(191,219,254,0.45) 0%, rgba(219,234,254,0.1) 70%, transparent 100%);
}
.sl-hero-urgency {
font-size: 12px; font-weight: 700;
color: var(--danger-700);
display: flex; align-items: center; gap: 6px;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.sl-hero-card.warn .sl-hero-urgency { color: var(--warning-700); }
.sl-hero-card.soon .sl-hero-urgency { color: var(--pri-700); }
.sl-hero-time {
font-size: 12px; font-weight: 600; color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
/* Hero card body */
.sl-hero-card-body {
padding: 20px 22px 18px 24px;
}
.sl-hero-name {
font-size: 22px; font-weight: 800; color: var(--n-950);
letter-spacing: -0.03em; line-height: 1.15;
}
.sl-hero-phone {
font-size: 14px; color: var(--n-400); margin-top: 5px; font-weight: 400;
font-variant-numeric: tabular-nums;
}
/* Hero card actions */
.sl-hero-card-actions {
padding: 16px 22px 16px 24px;
background: linear-gradient(180deg, rgba(248,249,251,0.5) 0%, rgba(243,244,248,0.95) 100%);
border-top: 1px solid rgba(0,0,0,0.05);
display: flex; gap: var(--sp-3);
}
.sl-hero-card-actions .nd-btn {
padding: 8px 20px;
font-weight: 700;
border-radius: var(--r-md);
}
/* ─── PIPELINE ZONE — calmer, secondary ───────────────────────────────────── */
#zone-pipeline {
animation: sl-fade-in 0.7s ease 0.4s both;
}
#zone-pipeline .nd-section-title {
font-size: 14px; margin-bottom: 16px;
}
/* ─── DONE ZONE — whisper-quiet ───────────────────────────────────────────── */
.sl-done-toggle {
display: flex; align-items: center; gap: 10px;
padding: 14px 20px;
background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(255,255,255,0.5));
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.5);
border-radius: var(--r-lg);
cursor: pointer;
font-size: 13px; font-weight: 600; color: var(--text-muted);
box-shadow: 0 1px 4px rgba(0,0,0,0.02), inset 0 1px 0 rgba(255,255,255,0.5);
transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
margin-top: 8px;
user-select: none;
animation: sl-fade-in 0.6s ease 0.5s both;
}
.sl-done-toggle:hover {
background: rgba(255,255,255,0.85);
color: var(--text-secondary);
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.sl-done-count {
font-size: 11px; font-weight: 600;
background: var(--n-100); color: var(--n-400);
padding: 2px 9px; border-radius: var(--r-full);
}
.sl-done-chevron {
width: 16px; height: 16px; margin-left: auto;
transition: transform 0.3s var(--ease);
stroke-width: 2; opacity: 0.4;
}
.sl-done-body {
margin-top: var(--sp-4);
animation: nd-fade-in 0.5s ease;
}
/* ═══════════════════════════════════════════════════════════════════════════════
* VISIT CARDS — alive hover, staggered entrance
* ═══════════════════════════════════════════════════════════════════════════════ */
.nd-grid-2 .nd-visit-card {
animation: sl-fade-in 0.5s ease both;
}
.nd-grid-2 .nd-visit-card:nth-child(1) { animation-delay: 0.08s; }
.nd-grid-2 .nd-visit-card:nth-child(2) { animation-delay: 0.16s; }
.nd-grid-2 .nd-visit-card:nth-child(3) { animation-delay: 0.24s; }
.nd-grid-2 .nd-visit-card:nth-child(4) { animation-delay: 0.32s; }
/* ═══════════════════════════════════════════════════════════════════════════════
* AUTO-SPOTLIGHT — cycling highlight on hero cards
* Makes the screen feel alive on TV without interaction
* ═══════════════════════════════════════════════════════════════════════════════ */
@keyframes sl-spotlight {
0%, 100% {
box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.05), 0 12px 36px rgba(0,0,0,0.06), 0 24px 64px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.9);
}
50% {
box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 8px 28px rgba(0,0,0,0.09), 0 24px 64px rgba(0,0,0,0.10), 0 32px 80px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,1), 0 0 0 2px rgba(239,68,68,0.12);
transform: translateY(-3px) scale(1.006);
}
}
.sl-hero-card.sl-active {
animation: sl-spotlight 3.5s ease-in-out infinite;
}
.sl-hero-card.sl-active.warn {
animation-name: sl-spotlight-warn;
}
@keyframes sl-spotlight-warn {
0%, 100% {
box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.05), 0 12px 36px rgba(0,0,0,0.06), 0 24px 64px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.9);
}
50% {
box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 8px 28px rgba(0,0,0,0.09), 0 24px 64px rgba(0,0,0,0.10), 0 32px 80px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,1), 0 0 0 2px rgba(245,158,11,0.15);
transform: translateY(-3px) scale(1.006);
}
}
/* ═══════════════════════════════════════════════════════════════════════════════
* LIVE PILL — stronger presence
* ═══════════════════════════════════════════════════════════════════════════════ */
.nd-live-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 12px;
background: rgba(239,68,68,0.08);
border: 1px solid rgba(239,68,68,0.12);
border-radius: var(--r-full);
font-size: 11px; font-weight: 700; color: var(--danger-600);
letter-spacing: 0.06em; text-transform: uppercase;
}
.nd-live-pill .dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--danger-500);
box-shadow: 0 0 8px rgba(239,68,68,0.5);
animation: nd-pulse-live 2s ease-in-out infinite;
}
@keyframes nd-pulse-live {
0%, 100% { box-shadow: 0 0 4px rgba(239,68,68,0.4); opacity: 1; }
50% { box-shadow: 0 0 12px rgba(239,68,68,0.6); opacity: 0.7; }
}
/* ═══════════════════════════════════════════════════════════════════════════════
* SHOWROOM DISPLAY MODE — TV-optimized (min-width: 1600px)
* Readability from 3-5 meters. Maximum visual impact.
* ═══════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1600px) {
/* Hide sidebar on TV displays — full screen experience */
body.display-mode .nd-sidebar { display: none; }
body.display-mode .nd-main { flex: 1; }
/* Larger typography */
.sl-header-left h1 { font-size: 32px; }
.sl-pulse-val { font-size: 36px !important; }
.sl-pulse-label { font-size: 14px !important; }
.sl-hero-title { font-size: 26px; }
.sl-hero-count { font-size: 16px; padding: 5px 18px; }
.sl-hero-name { font-size: 24px; }
.sl-hero-phone { font-size: 15px; }
.sl-hero-urgency { font-size: 14px; }
.sl-hero-time { font-size: 14px; }
/* More breathing room */
.nd-content { padding: 40px 48px 64px; }
.sl-pulse { padding: 22px 12px; margin-bottom: 36px; }
.sl-pulse-item { padding: 0 32px; }
.sl-hero { padding: 36px 36px 32px; margin-bottom: 40px; }
.sl-hero-grid { gap: 20px; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.sl-hero-card-body { padding: 22px 24px 20px 28px; }
.sl-hero-card-top { padding: 14px 24px 14px 28px; }
.sl-hero-card-actions { padding: 16px 24px 16px 28px; }
/* Pipeline cards — larger on TV */
.nd-grid-2 { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 20px; }
/* Buttons — bigger tap/view targets */
.sl-hero-card-actions .nd-btn { padding: 10px 20px; font-size: 14px; }
}
/* ═══════════════════════════════════════════════════════════════════════════════
* FULL DISPLAY MODE — when sidebar is hidden (class on body)
* Triggered by JS toggle or auto on very large screens
* ═══════════════════════════════════════════════════════════════════════════════ */
body.display-mode .nd-sidebar { display: none; }
body.display-mode .nd-layout { display: block; }
body.display-mode .nd-main { max-width: 100%; }
body.display-mode .nd-content { padding: 32px 56px 64px; }
body.display-mode .nd-tabs { display: none; }
body.display-mode .sl-header { padding: 24px 56px 20px; }
/* Display mode — even larger typography */
body.display-mode .sl-header-left h1 { font-size: 36px; }
body.display-mode .sl-pulse-val { font-size: 42px !important; }
body.display-mode .sl-pulse-label { font-size: 15px !important; }
body.display-mode .sl-hero-title { font-size: 28px; gap: 14px; }
body.display-mode .sl-hero-count { font-size: 18px; padding: 6px 20px; }
body.display-mode .sl-hero-name { font-size: 26px; }
body.display-mode .sl-hero-phone { font-size: 16px; }
body.display-mode .sl-hero-urgency { font-size: 15px; }
body.display-mode .sl-hero-time { font-size: 15px; }
body.display-mode .sl-hero-card-actions .nd-btn { padding: 12px 24px; font-size: 15px; }
body.display-mode .sl-pulse { padding: 24px 16px; margin-bottom: 40px; border-radius: var(--r-2xl); }
body.display-mode .sl-pulse-item { padding: 0 36px; }
body.display-mode .sl-hero { padding: 40px 40px 36px; margin-bottom: 48px; border-radius: 24px; }
body.display-mode .sl-hero-grid { gap: 24px; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }
body.display-mode .sl-hero-card { border-radius: var(--r-2xl); }
body.display-mode .sl-hero-subtitle { font-size: 14px; }
body.display-mode .nd-live-pill { padding: 5px 16px; font-size: 12px; }
/* ═══════════════════════════════════════════════════════════════════════════════
* VISIT CARD ENHANCEMENTS — Pre-sale context, AI hints
* ═══════════════════════════════════════════════════════════════════════════════ */
/* Pre-sale context chips row */
.sl-visit-context {
display: flex; align-items: center; gap: 6px;
margin-bottom: 8px; flex-wrap: wrap;
}
.sl-context-chip {
display: inline-flex; align-items: center; gap: 4px;
font-size: 10px; font-weight: 700; padding: 3px 10px;
border-radius: var(--r-full); text-transform: uppercase;
letter-spacing: 0.04em;
background: var(--n-75); color: var(--n-600);
}
.sl-context-chip.hot { background: var(--danger-50); color: var(--danger-700); }
.sl-context-chip.warm { background: var(--warning-50); color: var(--warning-700); }
.sl-context-chip.cold { background: var(--cyan-50); color: var(--cyan-600); }
.sl-context-chip.stage { background: var(--purple-50); color: var(--purple-700); }
.sl-context-chip.temp-hot { background: var(--danger-50); color: var(--danger-700); }
.sl-context-chip.temp-warm { background: var(--warning-50); color: var(--warning-700); }
.sl-context-chip.temp-cold { background: var(--cyan-50); color: var(--cyan-600); }
/* Score bar inside chip */
.sl-context-chip .sl-score-bar {
position: absolute; left: 0; bottom: 0; height: 2px;
border-radius: 0 0 var(--r-full) var(--r-full);
background: currentColor; opacity: 0.3;
}
.sl-context-chip { position: relative; overflow: hidden; }
/* AI hint inline */
.sl-ai-hint {
display: flex; align-items: flex-start; gap: 6px;
font-size: 11px; color: var(--purple-600); font-weight: 500;
padding: 8px 10px; margin-top: 8px;
background: var(--purple-25); border-radius: var(--r-sm);
border-left: 3px solid var(--purple-300);
line-height: 1.5;
}
.sl-ai-icon { font-size: 13px; flex-shrink: 0; }
/* Hero card score badge */
.sl-hero-score {
font-size: 11px; font-weight: 700; margin-top: 8px;
padding: 3px 10px; border-radius: var(--r-full); display: inline-flex;
}
.sl-hero-score.hot { background: var(--danger-50); color: var(--danger-700); }
.sl-hero-score.warm { background: var(--warning-50); color: var(--warning-700); }
.sl-hero-score.cold { background: var(--n-100); color: var(--n-600); }
/* ═══════════════════════════════════════════════════════════════════════════════
* PIPELINE TAB — Sales flow components
* ═══════════════════════════════════════════════════════════════════════════════ */
/* Pipeline hero zone — green instead of red */
.sl-hero-pipeline {
background:
radial-gradient(ellipse at 10% 30%, rgba(34,197,94,0.12) 0%, transparent 50%),
radial-gradient(ellipse at 90% 10%, rgba(59,130,246,0.08) 0%, transparent 40%),
radial-gradient(ellipse at 50% 100%, rgba(34,197,94,0.05) 0%, transparent 45%),
linear-gradient(170deg, #E8FFF0 0%, #F0FFF4 15%, #F5FFF8 35%, #FAFFFD 60%, #FFFFFF 100%) !important;
border-color: rgba(34,197,94,0.10) !important;
box-shadow:
0 0 0 1px rgba(34,197,94,0.05),
0 2px 8px rgba(34,197,94,0.06),
0 8px 32px rgba(34,197,94,0.08),
0 24px 72px rgba(34,197,94,0.06),
inset 0 1px 0 rgba(255,255,255,0.95) !important;
animation: sl-enter-scale 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both, sl-glow-pulse-green 6s ease-in-out 1.5s infinite !important;
}
@keyframes sl-glow-pulse-green {
0%,100% { box-shadow: 0 0 20px rgba(34,197,94,0.06), 0 8px 40px rgba(34,197,94,0.05), 0 20px 60px rgba(34,197,94,0.03); }
50% { box-shadow: 0 0 40px rgba(34,197,94,0.12), 0 8px 48px rgba(34,197,94,0.08), 0 24px 72px rgba(34,197,94,0.05); }
}
.sl-hero-pipeline .sl-hero-title { color: var(--success-700) !important; }
.sl-hero-pipeline .sl-hero-subtitle { color: rgba(21,128,61,0.4) !important; }
.sl-hero-pipeline .sl-hero-count { background: linear-gradient(135deg, var(--success-500), var(--success-600)) !important; box-shadow: 0 2px 8px rgba(22,163,74,0.35), 0 0 0 4px rgba(22,163,74,0.10) !important; }
/* Pipeline hero card — green accent */
.sl-pipe-hero-card::before {
background: linear-gradient(180deg, var(--success-400), var(--success-600)) !important;
box-shadow: 2px 0 8px rgba(34,197,94,0.15) !important;
}
.sl-pipe-hero-card .sl-hero-urgency { color: var(--success-700) !important; }
/* Pipeline score badge */
.sl-pipe-score {
font-size: 16px; font-weight: 900; padding: 4px 14px;
border-radius: var(--r-full); min-width: 40px; text-align: center;
line-height: 1.2;
}
.sl-pipe-score.hot { background: var(--danger-50); color: var(--danger-700); box-shadow: 0 0 0 2px rgba(239,68,68,0.12); }
.sl-pipe-score.warm { background: var(--warning-50); color: var(--warning-700); }
.sl-pipe-score.cold { background: var(--n-100); color: var(--n-500); }
.sl-pipe-score-sm {
font-size: 13px; font-weight: 800; padding: 3px 10px;
border-radius: var(--r-full); min-width: 32px; text-align: center;
}
.sl-pipe-score-sm.hot { background: var(--danger-50); color: var(--danger-700); }
.sl-pipe-score-sm.warm { background: var(--warning-50); color: var(--warning-700); }
.sl-pipe-score-sm.cold { background: var(--n-100); color: var(--n-500); }
/* Pipeline meta row */
.sl-pipe-meta {
display: flex; align-items: center; gap: 12px;
margin-top: 10px; font-size: 12px; color: var(--text-muted);
}
.sl-pipe-platform { display: flex; align-items: center; gap: 4px; }
.sl-pipe-platform-sm { font-size: 14px; }
.sl-pipe-wait { font-weight: 600; color: var(--text-secondary); }
.sl-pipe-wait.danger { color: var(--danger-600); font-weight: 700; }
/* Pipeline compact row in cards */
.sl-pipe-row {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin-bottom: 8px;
}
/* Needs response indicator */
.sl-needs-response {
font-size: 10px; font-weight: 700; color: var(--warning-700);
background: var(--warning-50); padding: 2px 8px;
border-radius: var(--r-full); animation: nd-pulse 2s ease infinite;
}
/* Last message preview */
.sl-last-msg {
font-size: 11px; color: var(--text-muted); font-style: italic;
padding: 4px 0; line-height: 1.5;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
max-width: 100%;
}
/* Risk card style */
.sl-pipe-card.sl-risk {
border-color: rgba(239,68,68,0.15);
background: linear-gradient(135deg, var(--danger-25) 0%, var(--surface) 60%);
}
.sl-pipe-card.sl-risk::before { background: linear-gradient(90deg, var(--danger-500), var(--danger-400)); }
/* Risk zone container */
.sl-risk-zone {
margin-top: 24px; padding: 24px;
background: linear-gradient(135deg, rgba(254,242,242,0.5), rgba(255,255,255,0.8));
border: 1px solid rgba(239,68,68,0.08);
border-radius: var(--r-xl);
animation: sl-fade-in 0.6s ease 0.3s both;
}
/* ═══════════════════════════════════════════════════════════════════════════════
* PERFORMANCE TAB — Scorecard, funnel, metrics
* ═══════════════════════════════════════════════════════════════════════════════ */
/* Performance hero — gold/success tones */
.sl-hero-perf {
background:
radial-gradient(ellipse at 10% 30%, rgba(234,179,8,0.10) 0%, transparent 50%),
radial-gradient(ellipse at 90% 10%, rgba(168,85,247,0.06) 0%, transparent 40%),
radial-gradient(ellipse at 50% 100%, rgba(234,179,8,0.05) 0%, transparent 45%),
linear-gradient(170deg, #FFF8E1 0%, #FFFCE8 15%, #FFFEF2 35%, #FFFFFF 60%, #FFFFFF 100%) !important;
border-color: rgba(234,179,8,0.10) !important;
box-shadow:
0 0 0 1px rgba(234,179,8,0.05),
0 2px 8px rgba(234,179,8,0.06),
0 8px 32px rgba(234,179,8,0.06),
0 24px 72px rgba(234,179,8,0.04),
inset 0 1px 0 rgba(255,255,255,0.95) !important;
animation: sl-enter-scale 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both !important;
}
.sl-hero-perf .sl-hero-title { color: var(--warning-700) !important; }
.sl-hero-perf .sl-hero-subtitle { color: rgba(180,83,9,0.4) !important; }
.sl-hero-count-green {
background: linear-gradient(135deg, var(--success-500), var(--success-600)) !important;
box-shadow: 0 2px 8px rgba(22,163,74,0.35), 0 0 0 4px rgba(22,163,74,0.10) !important;
}
/* Win card */
.sl-win-card::before {
background: linear-gradient(180deg, var(--success-400), var(--success-600)) !important;
box-shadow: 2px 0 8px rgba(34,197,94,0.15) !important;
}
.sl-win-icon {
font-size: 28px; margin-bottom: 4px;
}
.sl-win-platform {
font-size: 12px; color: var(--text-muted); margin-top: 8px;
display: flex; align-items: center; gap: 4px;
}
/* Funnel visualization */
.sl-funnel-section {
margin-bottom: 28px;
animation: sl-fade-in 0.6s ease 0.2s both;
}
.sl-funnel {
background: var(--surface);
border: 1px solid var(--border-subtle);
border-radius: var(--r-xl);
padding: 24px;
box-shadow: var(--shadow-card);
}
.sl-funnel-stage {
display: flex; align-items: center; gap: 16px;
padding: 10px 0;
}
.sl-funnel-stage + .sl-funnel-stage { border-top: 1px solid var(--n-75); }
.sl-funnel-label {
font-size: 13px; font-weight: 600; color: var(--text);
width: 160px; flex-shrink: 0;
}
.sl-funnel-bar-wrap {
flex: 1; height: 10px; background: var(--n-75);
border-radius: 5px; overflow: hidden;
}
.sl-funnel-bar {
height: 100%; border-radius: 5px;
transition: width 1s var(--ease-out);
}
.sl-funnel-bar.blue { background: linear-gradient(90deg, var(--pri-400), var(--pri-500)); }
.sl-funnel-bar.purple { background: linear-gradient(90deg, var(--purple-400), var(--purple-500)); }
.sl-funnel-bar.amber { background: linear-gradient(90deg, var(--warning-400), var(--warning-500)); }
.sl-funnel-bar.green { background: linear-gradient(90deg, var(--success-400), var(--success-500)); }
.sl-funnel-count {
font-size: 16px; font-weight: 800; color: var(--text-strong);
min-width: 40px; text-align: right;
letter-spacing: -0.02em;
}
.sl-funnel-count.accent { color: var(--success-600); }
/* Metric cards */
.sl-metric-big {
font-size: 36px; font-weight: 900; color: var(--text-strong);
letter-spacing: -0.04em; margin-bottom: 16px; line-height: 1;
}
.sl-metric-row {
display: flex; justify-content: space-between; align-items: center;
padding: 8px 0;
border-bottom: 1px solid var(--n-75);
}
.sl-metric-row:last-child { border-bottom: none; }
.sl-metric-label {
font-size: 13px; color: var(--text-secondary); font-weight: 500;
}
.sl-metric-val {
font-size: 15px; font-weight: 800; color: var(--text-strong);
letter-spacing: -0.02em;
}
.sl-metric-val.blue { color: var(--pri-600); }
.sl-metric-val.green { color: var(--success-600); }
.sl-metric-val.red { color: var(--danger-600); }
/* ═══════════════════════════════════════════════════════════════════════════════
* DISPLAY MODE — Tab rotation indicator
* ═══════════════════════════════════════════════════════════════════════════════ */
body.display-mode .sl-pipe-score { font-size: 18px; padding: 6px 16px; }
body.display-mode .sl-metric-big { font-size: 42px; }
body.display-mode .sl-funnel-label { font-size: 15px; width: 200px; }
body.display-mode .sl-funnel-count { font-size: 20px; }
body.display-mode .sl-funnel-bar-wrap { height: 14px; }
/* ═══════════════════════════════════════════════════════════════════════════════
* SHOWROOM LIVE v3 — MONITORING & AWARENESS SCREEN
* "Like surveillance cameras, but for sales operations"
* Less dashboard, more command center. Less buttons, more intelligence.
* ═══════════════════════════════════════════════════════════════════════════════ */
/* ─── AWARENESS SIGNAL BAR — top of each tab, the "vital signs" ──────────── */
.sl-signal-bar {
display: flex; align-items: stretch; gap: 0;
padding: 0; margin-bottom: 28px;
background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(250,251,255,0.9) 100%);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(0,0,0,0.05);
border-radius: 18px;
box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 4px 16px rgba(0,0,0,0.04), 0 12px 40px rgba(0,0,0,0.03), inset 0 1px 0 rgba(255,255,255,0.9);
animation: sl-enter 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
overflow: hidden;
}
.sl-signal-item {
flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 22px 16px; position: relative;
transition: background 0.3s ease;
}
.sl-signal-item:not(:last-child)::after {
content: ''; position: absolute; right: 0; top: 20%; height: 60%;
width: 1px; background: linear-gradient(180deg, transparent, var(--n-200), transparent);
}
.sl-signal-item:hover { background: rgba(0,0,0,0.015); }
.sl-signal-val {
font-size: 36px; font-weight: 900; letter-spacing: -0.04em; line-height: 1;
color: var(--text-strong);
transition: all 0.4s var(--ease);
}
.sl-signal-label {
font-size: 11px; font-weight: 600; color: var(--n-400);
text-transform: uppercase; letter-spacing: 0.06em; margin-top: 6px;
}
.sl-signal-sub {
font-size: 10px; font-weight: 500; color: var(--n-300); margin-top: 3px;
}
/* Signal item states */
.sl-signal-item.danger .sl-signal-val { color: var(--danger-600); }
.sl-signal-item.danger { background: rgba(239,68,68,0.03); }
.sl-signal-item.warning .sl-signal-val { color: var(--warning-600); }
.sl-signal-item.success .sl-signal-val { color: var(--success-600); }
.sl-signal-item.muted .sl-signal-val { color: var(--n-300); font-size: 28px; }
.sl-signal-item.muted .sl-signal-label { color: var(--n-300); }
.sl-signal-item.highlight {
background: rgba(59,130,246,0.04);
}
.sl-signal-item.highlight .sl-signal-val { color: var(--pri-600); }
/* Pulsing danger signal */
.sl-signal-item.danger-pulse { animation: sl-danger-bg-pulse 3s ease-in-out infinite; }
@keyframes sl-danger-bg-pulse {
0%,100% { background: rgba(239,68,68,0.03); }
50% { background: rgba(239,68,68,0.07); }
}
/* ─── AWARENESS ZONE — cinematic, themed sections ────────────────────────── */
.sl-zone {
margin-bottom: 28px; border-radius: 20px; position: relative; overflow: hidden;
padding: 28px 28px 24px;
border: 1px solid rgba(0,0,0,0.05);
box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 6px 24px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.8);
animation: sl-enter-scale 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* Zone themes */
.sl-zone.danger {
background: radial-gradient(ellipse at 10% 30%, rgba(239,68,68,0.12) 0%, transparent 50%),
radial-gradient(ellipse at 90% 10%, rgba(251,146,60,0.08) 0%, transparent 40%),
linear-gradient(170deg, #FFF0EE 0%, #FFF5F2 25%, #FFFAF9 50%, #FFFFFF 100%);
border-color: rgba(239,68,68,0.08);
animation: sl-enter-scale 0.8s cubic-bezier(0.16, 1, 0.3, 1) both, sl-glow-pulse 6s ease-in-out 1.5s infinite;
}
.sl-zone.success {
background: radial-gradient(ellipse at 10% 30%, rgba(34,197,94,0.10) 0%, transparent 50%),
radial-gradient(ellipse at 90% 10%, rgba(59,130,246,0.06) 0%, transparent 40%),
linear-gradient(170deg, #EDFFF2 0%, #F5FFF8 25%, #FAFFFD 50%, #FFFFFF 100%);
border-color: rgba(34,197,94,0.08);
}
.sl-zone.gold {
background: radial-gradient(ellipse at 10% 30%, rgba(234,179,8,0.10) 0%, transparent 50%),
radial-gradient(ellipse at 90% 10%, rgba(168,85,247,0.05) 0%, transparent 40%),
linear-gradient(170deg, #FFFBE6 0%, #FFFEF0 25%, #FFFFF8 50%, #FFFFFF 100%);
border-color: rgba(234,179,8,0.08);
}
.sl-zone.purple {
background: radial-gradient(ellipse at 10% 30%, rgba(168,85,247,0.08) 0%, transparent 50%),
radial-gradient(ellipse at 90% 10%, rgba(59,130,246,0.05) 0%, transparent 40%),
linear-gradient(170deg, #F8F0FF 0%, #FBF5FF 25%, #FDFAFF 50%, #FFFFFF 100%);
border-color: rgba(168,85,247,0.08);
}
.sl-zone.neutral {
background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(248,249,252,0.8));
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
/* Zone shimmer overlay */
.sl-zone::after {
content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.15) 50%, transparent 65%);
background-size: 200% 100%; animation: sl-shimmer 14s ease-in-out infinite;
pointer-events: none; border-radius: inherit;
}
.sl-zone-title {
display: flex; align-items: center; gap: 12px;
font-size: 18px; font-weight: 800; letter-spacing: -0.02em;
margin-bottom: 6px; position: relative; z-index: 1;
}
.sl-zone-title .icon { font-size: 22px; }
.sl-zone-title .count {
font-size: 13px; font-weight: 700; padding: 3px 14px;
border-radius: var(--r-full); margin-left: 4px;
}
.sl-zone.danger .sl-zone-title { color: var(--danger-700); }
.sl-zone.danger .sl-zone-title .count { background: linear-gradient(135deg, var(--danger-500), var(--danger-600)); color: white; box-shadow: 0 2px 8px rgba(220,38,38,0.3); }
.sl-zone.success .sl-zone-title { color: var(--success-700); }
.sl-zone.success .sl-zone-title .count { background: linear-gradient(135deg, var(--success-500), var(--success-600)); color: white; box-shadow: 0 2px 8px rgba(22,163,74,0.3); }
.sl-zone.gold .sl-zone-title { color: var(--warning-700); }
.sl-zone.gold .sl-zone-title .count { background: linear-gradient(135deg, var(--warning-500), var(--warning-600)); color: white; box-shadow: 0 2px 8px rgba(217,119,6,0.3); }
.sl-zone.purple .sl-zone-title { color: var(--purple-700); }
.sl-zone.purple .sl-zone-title .count { background: linear-gradient(135deg, var(--purple-500), var(--purple-600)); color: white; box-shadow: 0 2px 8px rgba(147,51,234,0.3); }
.sl-zone-subtitle {
font-size: 12px; font-weight: 500; opacity: 0.5; text-transform: uppercase;
letter-spacing: 0.05em; margin-bottom: 20px; position: relative; z-index: 1;
}
.sl-zone-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 14px; position: relative; z-index: 1;
}
/* ─── MONITOR CARD — cinematic glass card ────────────────────────────────── */
.sl-monitor-card {
background: linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.92) 100%);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border-radius: 14px; overflow: hidden;
border: 1px solid rgba(0,0,0,0.05);
box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.04), 0 12px 36px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.9);
transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
position: relative; animation: sl-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.sl-monitor-card:nth-child(1) { animation-delay: 0.1s; }
.sl-monitor-card:nth-child(2) { animation-delay: 0.18s; }
.sl-monitor-card:nth-child(3) { animation-delay: 0.26s; }
.sl-monitor-card:nth-child(4) { animation-delay: 0.34s; }
.sl-monitor-card:hover {
box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.07), 0 20px 56px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,1);
transform: translateY(-3px) scale(1.005);
}
/* Accent bar left */
.sl-monitor-card::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; z-index: 2;
background: var(--n-200); transition: background 0.3s ease;
}
.sl-monitor-card.accent-danger::before { background: linear-gradient(180deg, var(--danger-400), var(--danger-600)); box-shadow: 2px 0 8px rgba(239,68,68,0.12); }
.sl-monitor-card.accent-warning::before { background: linear-gradient(180deg, var(--warning-400), var(--warning-600)); box-shadow: 2px 0 8px rgba(245,158,11,0.12); }
.sl-monitor-card.accent-success::before { background: linear-gradient(180deg, var(--success-400), var(--success-600)); box-shadow: 2px 0 8px rgba(34,197,94,0.12); }
.sl-monitor-card.accent-blue::before { background: linear-gradient(180deg, var(--pri-400), var(--pri-600)); box-shadow: 2px 0 8px rgba(59,130,246,0.12); }
.sl-monitor-card.accent-purple::before { background: linear-gradient(180deg, var(--purple-400), var(--purple-600)); box-shadow: 2px 0 8px rgba(147,51,234,0.12); }
/* Top urgency strip */
.sl-monitor-card-top {
padding: 10px 18px 10px 22px; display: flex; justify-content: space-between; align-items: center;
position: relative;
}
.sl-monitor-card-top::after {
content: ''; position: absolute; bottom: 0; left: 22px; right: 18px; height: 1px;
background: linear-gradient(90deg, rgba(0,0,0,0.05), transparent);
}
.sl-monitor-card.accent-danger .sl-monitor-card-top { background: linear-gradient(90deg, rgba(254,202,202,0.4) 0%, transparent 70%); }
.sl-monitor-card.accent-warning .sl-monitor-card-top { background: linear-gradient(90deg, rgba(253,230,138,0.35) 0%, transparent 70%); }
.sl-monitor-card.accent-success .sl-monitor-card-top { background: linear-gradient(90deg, rgba(187,247,208,0.3) 0%, transparent 70%); }
.sl-monitor-card-urgency {
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
display: flex; align-items: center; gap: 5px;
}
.sl-monitor-card.accent-danger .sl-monitor-card-urgency { color: var(--danger-700); }
.sl-monitor-card.accent-warning .sl-monitor-card-urgency { color: var(--warning-700); }
.sl-monitor-card.accent-success .sl-monitor-card-urgency { color: var(--success-700); }
.sl-monitor-card-time { font-size: 11px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* Card body */
.sl-monitor-card-body { padding: 16px 20px 14px 22px; }
.sl-monitor-card-name { font-size: 18px; font-weight: 800; color: var(--n-950); letter-spacing: -0.025em; line-height: 1.2; }
.sl-monitor-card-phone { font-size: 12px; color: var(--n-400); margin-top: 3px; font-variant-numeric: tabular-nums; }
.sl-monitor-card-score {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; font-weight: 700; padding: 3px 10px;
border-radius: var(--r-full); margin-top: 8px;
}
.sl-monitor-card-score.hot { background: var(--danger-50); color: var(--danger-700); }
.sl-monitor-card-score.warm { background: var(--warning-50); color: var(--warning-700); }
.sl-monitor-card-score.cold { background: var(--n-100); color: var(--n-500); }
/* Card tags/chips row */
.sl-monitor-card-tags {
display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px;
}
.sl-monitor-tag {
font-size: 10px; font-weight: 600; padding: 2px 9px;
border-radius: var(--r-full); background: var(--n-75); color: var(--n-600);
letter-spacing: 0.02em;
}
/* AI insight row */
.sl-monitor-card-insight {
display: flex; align-items: flex-start; gap: 6px;
font-size: 11px; color: var(--purple-600); font-weight: 500;
padding: 8px 10px; margin-top: 10px;
background: linear-gradient(135deg, var(--purple-25), rgba(250,245,255,0.5));
border-radius: var(--r-sm); border-left: 3px solid var(--purple-300);
line-height: 1.5; position: relative; z-index: 1;
}
.sl-monitor-card-insight .ai-icon { font-size: 13px; flex-shrink: 0; }
/* Card footer/action */
.sl-monitor-card-footer {
padding: 10px 20px 10px 22px;
background: linear-gradient(180deg, rgba(248,249,251,0.4), rgba(243,244,248,0.8));
border-top: 1px solid rgba(0,0,0,0.04);
display: flex; gap: var(--sp-2); align-items: center;
}
.sl-monitor-card-next {
font-size: 11px; font-weight: 600; color: var(--text-muted);
display: flex; align-items: center; gap: 5px;
}
.sl-monitor-card-next .action-icon { font-size: 13px; }
/* ─── STAGE DISTRIBUTION BAR — visual pipeline snapshot ──────────────────── */
.sl-stage-bar {
display: flex; height: 8px; border-radius: 4px; overflow: hidden;
background: var(--n-100); margin-bottom: 16px;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}
.sl-stage-bar-seg {
height: 100%; transition: width 0.6s var(--ease-out);
position: relative;
}
.sl-stage-bar-seg.ready { background: linear-gradient(90deg, var(--success-500), var(--success-400)); }
.sl-stage-bar-seg.comparing { background: linear-gradient(90deg, var(--warning-500), var(--warning-400)); }
.sl-stage-bar-seg.interested { background: linear-gradient(90deg, var(--purple-500), var(--purple-400)); }
.sl-stage-bar-seg.scheduling { background: linear-gradient(90deg, var(--pri-500), var(--pri-400)); }
.sl-stage-bar-seg.exploring { background: linear-gradient(90deg, var(--cyan-500), var(--cyan-600)); }
.sl-stage-bar-seg.browsing { background: var(--n-300); }
/* Stage legend */
.sl-stage-legend {
display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 24px;
}
.sl-stage-legend-item {
display: flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 600; color: var(--text-secondary);
}
.sl-stage-legend-dot {
width: 8px; height: 8px; border-radius: 50%;
}
.sl-stage-legend-count {
font-weight: 800; color: var(--text-strong); margin-left: 2px;
}
/* ─── SCOREBOARD — Performance metrics with progress ─────────────────────── */
.sl-scoreboard {
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 14px; margin-bottom: 28px;
}
.sl-score-card {
background: var(--surface); border: 1px solid var(--border-subtle);
border-radius: var(--r-lg); padding: 20px 22px;
box-shadow: var(--shadow-card); transition: all 0.2s var(--ease);
position: relative; overflow: hidden;
}
.sl-score-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: var(--n-150);
}
.sl-score-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-1px); }
.sl-score-card.accent-green::before { background: linear-gradient(90deg, var(--success-500), var(--success-300)); }
.sl-score-card.accent-red::before { background: linear-gradient(90deg, var(--danger-500), var(--danger-300)); }
.sl-score-card.accent-blue::before { background: linear-gradient(90deg, var(--pri-500), var(--pri-300)); }
.sl-score-card.accent-amber::before { background: linear-gradient(90deg, var(--warning-500), var(--warning-300)); }
.sl-score-card.accent-purple::before { background: linear-gradient(90deg, var(--purple-500), var(--purple-300)); }
.sl-score-card-label {
font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 10px;
}
.sl-score-card-val {
font-size: 32px; font-weight: 900; letter-spacing: -0.04em; line-height: 1;
color: var(--text-strong);
}
.sl-score-card-sub {
font-size: 12px; color: var(--text-muted); margin-top: 6px; font-weight: 400;
}
/* Progress bar inside score card */
.sl-score-progress {
height: 4px; background: var(--n-100); border-radius: 2px;
margin-top: 12px; overflow: hidden;
}
.sl-score-progress-fill {
height: 100%; border-radius: 2px;
transition: width 0.8s var(--ease-out);
background: linear-gradient(90deg, var(--pri-500), var(--pri-400));
}
.sl-score-progress-fill.green { background: linear-gradient(90deg, var(--success-500), var(--success-400)); }
.sl-score-progress-fill.amber { background: linear-gradient(90deg, var(--warning-500), var(--warning-400)); }
.sl-score-progress-fill.red { background: linear-gradient(90deg, var(--danger-500), var(--danger-400)); }
/* ─── TREND CARD — for Demand tab ────────────────────────────────────────── */
.sl-trend-card {
background: var(--surface); border: 1px solid var(--border-subtle);
border-radius: var(--r-lg); padding: 20px 22px;
box-shadow: var(--shadow-card); transition: all 0.25s var(--ease);
position: relative; overflow: hidden;
}
.sl-trend-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-1px); }
.sl-trend-card-header {
display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px;
}
.sl-trend-card h3 {
font-size: 13px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.04em; color: var(--text-strong);
}
.sl-trend-item {
display: flex; align-items: center; gap: 12px; padding: 10px 0;
border-bottom: 1px solid var(--n-75);
}
.sl-trend-item:last-child { border-bottom: none; }
.sl-trend-rank {
font-size: 11px; font-weight: 800; color: var(--text-muted); width: 20px; text-align: center;
}
.sl-trend-rank.top { color: var(--pri-600); font-size: 13px; }
.sl-trend-name { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; }
.sl-trend-bar-wrap { flex: 2; height: 6px; background: var(--n-100); border-radius: 3px; overflow: hidden; }
.sl-trend-bar-fill {
height: 100%; border-radius: 3px;
background: linear-gradient(90deg, var(--n-700), var(--n-500));
transition: width 0.6s var(--ease-out);
}
.sl-trend-bar-fill.hot { background: linear-gradient(90deg, var(--danger-500), var(--danger-400)); }
.sl-trend-bar-fill.warm { background: linear-gradient(90deg, var(--warning-500), var(--warning-400)); }
.sl-trend-count { font-size: 13px; font-weight: 700; color: var(--text-strong); min-width: 28px; text-align: right; }
.sl-trend-arrow { font-size: 12px; min-width: 14px; }
.sl-trend-arrow.up { color: var(--success-500); }
.sl-trend-arrow.down { color: var(--danger-500); }
.sl-trend-arrow.flat { color: var(--n-300); }
/* ─── FUNNEL V2 — premium horizontal funnel ──────────────────────────────── */
.sl-funnel-v2 {
background: var(--surface); border: 1px solid var(--border-subtle);
border-radius: var(--r-xl); padding: 28px;
box-shadow: var(--shadow-card); margin-bottom: 24px;
}
.sl-funnel-v2 h3 {
font-size: 14px; font-weight: 700; color: var(--text-strong);
margin-bottom: 20px; display: flex; align-items: center; gap: 8px;
}
.sl-funnel-v2-row {
display: flex; align-items: center; gap: 0; margin-bottom: 14px;
}
.sl-funnel-v2-row:last-child { margin-bottom: 0; }
.sl-funnel-v2-label {
font-size: 12px; font-weight: 600; color: var(--text-secondary);
width: 140px; flex-shrink: 0;
}
.sl-funnel-v2-bar {
flex: 1; height: 28px; background: var(--n-75); border-radius: 6px;
overflow: hidden; position: relative;
}
.sl-funnel-v2-fill {
height: 100%; border-radius: 6px; display: flex; align-items: center;
padding-left: 12px; font-size: 12px; font-weight: 700; color: white;
transition: width 0.8s var(--ease-out); min-width: fit-content;
background: linear-gradient(90deg, var(--pri-600), var(--pri-500));
}
.sl-funnel-v2-fill.stage-1 { background: linear-gradient(90deg, var(--pri-500), var(--pri-400)); }
.sl-funnel-v2-fill.stage-2 { background: linear-gradient(90deg, var(--purple-500), var(--purple-400)); }
.sl-funnel-v2-fill.stage-3 { background: linear-gradient(90deg, var(--warning-500), var(--warning-400)); }
.sl-funnel-v2-fill.stage-4 { background: linear-gradient(90deg, var(--success-500), var(--success-400)); }
.sl-funnel-v2-fill.stage-5 { background: linear-gradient(90deg, var(--success-600), var(--success-500)); }
.sl-funnel-v2-val {
font-size: 13px; font-weight: 700; color: var(--text-strong);
margin-left: 12px; min-width: 32px;
}
/* ─── WIN FEED — celebration cards ───────────────────────────────────────── */
.sl-win-feed { margin-bottom: 24px; }
.sl-win-item {
display: flex; align-items: center; gap: 14px;
padding: 14px 18px; margin-bottom: 8px;
background: linear-gradient(135deg, rgba(240,253,244,0.8), rgba(255,255,255,0.9));
border: 1px solid rgba(34,197,94,0.12);
border-radius: var(--r-lg);
animation: sl-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.sl-win-item:nth-child(2) { animation-delay: 0.1s; }
.sl-win-item:nth-child(3) { animation-delay: 0.2s; }
.sl-win-emoji { font-size: 24px; }
.sl-win-text { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; }
.sl-win-time { font-size: 11px; color: var(--text-muted); font-weight: 500; }
/* ─── PIPELINE SECTION — stage grouped ───────────────────────────────────── */
.sl-pipe-section {
margin-bottom: 24px;
animation: sl-fade-in 0.5s ease both;
}
.sl-pipe-section-header {
display: flex; align-items: center; gap: 10px;
margin-bottom: 14px; padding-bottom: 10px;
border-bottom: 1px solid var(--n-100);
}
.sl-pipe-section-icon { font-size: 18px; }
.sl-pipe-section-label { font-size: 14px; font-weight: 700; color: var(--text-strong); }
.sl-pipe-section-count {
font-size: 11px; font-weight: 700; padding: 2px 10px;
border-radius: var(--r-full); background: var(--n-100); color: var(--n-600);
}
/* ─── METRIC GRID — Performance bottom section ──────────────────────────── */
.sl-metric-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.sl-metric-block {
background: var(--surface); border: 1px solid var(--border-subtle);
border-radius: var(--r-lg); padding: 22px;
box-shadow: var(--shadow-card);
}
.sl-metric-block-title {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 14px;
}
.sl-metric-block-val {
font-size: 36px; font-weight: 900; letter-spacing: -0.04em;
color: var(--text-strong); line-height: 1; margin-bottom: 14px;
}
.sl-metric-block-row {
display: flex; justify-content: space-between; align-items: center;
padding: 6px 0; border-bottom: 1px solid var(--n-75);
font-size: 12px;
}
.sl-metric-block-row:last-child { border-bottom: none; }
.sl-metric-block-row-label { color: var(--text-muted); font-weight: 500; }
.sl-metric-block-row-val { font-weight: 700; color: var(--text-strong); }
.sl-metric-block-row-val.green { color: var(--success-600); }
.sl-metric-block-row-val.red { color: var(--danger-600); }
.sl-metric-block-row-val.amber { color: var(--warning-600); }
/* ─── DISPLAY MODE V2 — enhanced TV mode for monitoring ──────────────────── */
body.display-mode .sl-signal-bar { border-radius: 22px; }
body.display-mode .sl-signal-val { font-size: 48px !important; }
body.display-mode .sl-signal-label { font-size: 13px !important; }
body.display-mode .sl-signal-item { padding: 28px 20px; }
body.display-mode .sl-zone { padding: 36px 36px 32px; border-radius: 24px; margin-bottom: 36px; }
body.display-mode .sl-zone-title { font-size: 22px; }
body.display-mode .sl-zone-grid { gap: 18px; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
body.display-mode .sl-monitor-card { border-radius: 18px; }
body.display-mode .sl-monitor-card-name { font-size: 22px; }
body.display-mode .sl-monitor-card-body { padding: 20px 24px 16px 26px; }
body.display-mode .sl-scoreboard { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
body.display-mode .sl-score-card { padding: 24px 26px; }
body.display-mode .sl-score-card-val { font-size: 40px; }
body.display-mode .sl-metric-grid { gap: 18px; }
body.display-mode .sl-metric-block { padding: 26px; }
body.display-mode .sl-metric-block-val { font-size: 44px; }
body.display-mode .sl-funnel-v2 { padding: 32px; }
body.display-mode .sl-funnel-v2-bar { height: 36px; }
body.display-mode .sl-funnel-v2-label { font-size: 14px; width: 160px; }
body.display-mode .sl-trend-card { padding: 24px 26px; }
/* ═══════════════════════════════════════════════════════════════════════════════
PRESSURE SYSTEM + MONEY LAYER + PRIORITY FOCUS — V2 Addiction Upgrade
═══════════════════════════════════════════════════════════════════════════════ */
/* ─── HERO CARD — Priority Focus spotlight ──────────────────────────────────── */
.sl-hero-card {
background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.96) 100%);
backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
border-radius: 20px; overflow: hidden;
border: 2px solid rgba(239,68,68,0.15);
box-shadow: 0 4px 8px rgba(0,0,0,0.04), 0 12px 32px rgba(0,0,0,0.06), 0 24px 64px rgba(0,0,0,0.06), 0 0 0 1px rgba(239,68,68,0.08);
position: relative;
animation: sl-hero-enter 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
margin-bottom: 24px;
}
@keyframes sl-hero-enter {
0% { opacity: 0; transform: translateY(20px) scale(0.97); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.sl-hero-card::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
background: linear-gradient(180deg, #ef4444, #dc2626, #b91c1c);
box-shadow: 3px 0 12px rgba(239,68,68,0.2);
}
.sl-hero-card::after {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, #ef4444 0%, #f59e0b 50%, transparent 100%);
}
.sl-hero-badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 14px; border-radius: 20px;
font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
background: linear-gradient(135deg, #fef2f2, #fee2e2);
color: #dc2626; border: 1px solid rgba(239,68,68,0.15);
animation: sl-pulse-soft 2s ease-in-out infinite;
}
@keyframes sl-pulse-soft {
0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.15); }
50% { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}
.sl-hero-badge.gold {
background: linear-gradient(135deg, #fffbeb, #fef3c7);
color: #b45309; border-color: rgba(245,158,11,0.2);
}
.sl-hero-badge.gold { animation-name: sl-pulse-gold; }
@keyframes sl-pulse-gold {
0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.15); }
50% { box-shadow: 0 0 0 8px rgba(245,158,11,0); }
}
.sl-hero-top {
display: flex; justify-content: space-between; align-items: center;
padding: 14px 24px 12px 28px;
background: linear-gradient(90deg, rgba(254,202,202,0.2) 0%, transparent 60%);
border-bottom: 1px solid rgba(0,0,0,0.04);
}
.sl-hero-body {
display: grid; grid-template-columns: 1fr auto; gap: 24px;
padding: 20px 28px;
}
.sl-hero-left { }
.sl-hero-name {
font-size: 24px; font-weight: 900; color: #0a0a0a;
letter-spacing: -0.03em; line-height: 1.2;
}
.sl-hero-phone { font-size: 13px; color: #71717a; margin-top: 4px; }
.sl-hero-meta {
display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
}
.sl-hero-right {
display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px;
}
.sl-hero-insight {
display: flex; align-items: flex-start; gap: 8px;
font-size: 13px; color: #7c3aed; font-weight: 600;
padding: 12px 16px; margin: 0 28px 16px;
background: linear-gradient(135deg, #f5f3ff, rgba(250,245,255,0.6));
border-radius: 12px; border-left: 4px solid #a78bfa;
line-height: 1.5;
}
.sl-hero-footer {
display: flex; justify-content: space-between; align-items: center;
padding: 12px 28px;
background: linear-gradient(180deg, rgba(248,250,252,0.5), rgba(241,245,249,0.9));
border-top: 1px solid rgba(0,0,0,0.04);
}
/* ─── MONEY VALUE — deal value display ──────────────────────────────────────── */
.sl-money {
display: inline-flex; align-items: center; gap: 4px;
font-size: 16px; font-weight: 900; letter-spacing: -0.02em;
color: #059669;
}
.sl-money.lg { font-size: 22px; }
.sl-money.xl { font-size: 28px; }
.sl-money.danger { color: #dc2626; }
.sl-money.muted { color: #71717a; font-weight: 700; font-size: 13px; }
.sl-money-label {
font-size: 10px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.06em; color: #a1a1aa;
}
/* ─── PROBABILITY BADGE — close probability ─────────────────────────────────── */
.sl-prob {
display: inline-flex; align-items: center; gap: 3px;
font-size: 13px; font-weight: 800; letter-spacing: -0.01em;
padding: 4px 12px; border-radius: 20px;
}
.sl-prob.high { background: #dcfce7; color: #166534; }
.sl-prob.medium { background: #fef9c3; color: #854d0e; }
.sl-prob.low { background: #fee2e2; color: #991b1b; }
/* ─── PRESSURE STRIP — urgency bar at top of zones ─────────────────────────── */
.sl-pressure-strip {
display: flex; align-items: center; gap: 12px;
padding: 10px 18px; margin-bottom: 16px;
border-radius: 12px;
font-size: 12px; font-weight: 700;
}
.sl-pressure-strip.critical {
background: linear-gradient(90deg, #fef2f2, #fee2e2);
color: #b91c1c;
border: 1px solid rgba(239,68,68,0.12);
}
.sl-pressure-strip.warning {
background: linear-gradient(90deg, #fffbeb, #fef3c7);
color: #92400e;
border: 1px solid rgba(245,158,11,0.12);
}
.sl-pressure-strip.opportunity {
background: linear-gradient(90deg, #f0fdf4, #dcfce7);
color: #166534;
border: 1px solid rgba(34,197,94,0.12);
}
.sl-pressure-strip .sl-pressure-icon { font-size: 16px; flex-shrink: 0; }
.sl-pressure-strip .sl-pressure-text { flex: 1; }
.sl-pressure-strip .sl-pressure-value {
font-size: 14px; font-weight: 900;
}
/* ─── TARGET GAUGE — Target vs Actual ───────────────────────────────────────── */
.sl-target-gauge {
background: linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(248,250,252,0.95) 100%);
border: 1px solid rgba(0,0,0,0.06);
border-radius: 16px; padding: 24px; margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.04);
position: relative; overflow: hidden;
}
.sl-target-gauge::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
}
.sl-target-gauge.on-track::before { background: linear-gradient(90deg, #10b981, #34d399); }
.sl-target-gauge.behind::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.sl-target-gauge.critical::before { background: linear-gradient(90deg, #ef4444, #f87171); }
.sl-target-gauge-header {
display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px;
}
.sl-target-gauge-title {
font-size: 13px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.04em; color: #71717a;
}
.sl-target-gauge-status {
font-size: 11px; font-weight: 800; text-transform: uppercase;
letter-spacing: 0.06em; padding: 4px 12px; border-radius: 20px;
}
.sl-target-gauge-status.on-track { background: #dcfce7; color: #166534; }
.sl-target-gauge-status.behind { background: #fef3c7; color: #92400e; }
.sl-target-gauge-status.critical { background: #fee2e2; color: #991b1b; }
.sl-target-gauge-numbers {
display: flex; align-items: baseline; gap: 16px; margin-bottom: 16px;
}
.sl-target-actual {
font-size: 42px; font-weight: 900; letter-spacing: -0.04em; line-height: 1;
}
.sl-target-actual.on-track { color: #059669; }
.sl-target-actual.behind { color: #d97706; }
.sl-target-actual.critical { color: #dc2626; }
.sl-target-of {
font-size: 14px; color: #a1a1aa; font-weight: 500;
}
.sl-target-goal {
font-size: 24px; font-weight: 800; color: #3f3f46; letter-spacing: -0.02em;
}
.sl-target-bar {
height: 12px; background: #f4f4f5; border-radius: 6px; overflow: hidden;
position: relative;
}
.sl-target-bar-fill {
height: 100%; border-radius: 6px;
transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.sl-target-bar-fill.on-track { background: linear-gradient(90deg, #10b981, #34d399); }
.sl-target-bar-fill.behind { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.sl-target-bar-fill.critical { background: linear-gradient(90deg, #ef4444, #f87171); }
.sl-target-bar-marker {
position: absolute; top: -4px; bottom: -4px; width: 3px;
background: #27272a; border-radius: 2px;
box-shadow: 0 0 4px rgba(0,0,0,0.2);
}
.sl-target-gap {
display: flex; justify-content: space-between; margin-top: 10px;
font-size: 12px; font-weight: 600;
}
.sl-target-gap-label { color: #a1a1aa; }
.sl-target-gap-val { font-weight: 800; }
.sl-target-gap-val.positive { color: #059669; }
.sl-target-gap-val.negative { color: #dc2626; }
/* ─── DEMAND ALERT — stock/opportunity signals ──────────────────────────────── */
.sl-demand-alert {
display: flex; align-items: center; gap: 12px;
padding: 12px 18px; border-radius: 12px; margin-bottom: 10px;
font-size: 13px; font-weight: 600;
animation: sl-alert-slide 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes sl-alert-slide {
0% { opacity: 0; transform: translateX(-10px); }
100% { opacity: 1; transform: translateX(0); }
}
.sl-demand-alert.danger {
background: linear-gradient(90deg, #fef2f2, #fff);
border: 1px solid rgba(239,68,68,0.15); color: #b91c1c;
}
.sl-demand-alert.opportunity {
background: linear-gradient(90deg, #f0fdf4, #fff);
border: 1px solid rgba(34,197,94,0.15); color: #166534;
}
.sl-demand-alert.spike {
background: linear-gradient(90deg, #eff6ff, #fff);
border: 1px solid rgba(59,130,246,0.15); color: #1e40af;
}
.sl-demand-alert-icon { font-size: 18px; flex-shrink: 0; }
.sl-demand-alert-text { flex: 1; }
.sl-demand-alert-value {
font-size: 14px; font-weight: 900; letter-spacing: -0.02em;
}
/* ─── REVENUE GAP BANNER — loss aversion ────────────────────────────────────── */
.sl-revenue-gap {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 24px; border-radius: 14px; margin-bottom: 20px;
background: linear-gradient(135deg, #fef2f2 0%, #fff1f2 50%, #fef2f2 100%);
border: 1px solid rgba(239,68,68,0.12);
box-shadow: 0 2px 8px rgba(239,68,68,0.06);
}
.sl-revenue-gap.positive {
background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #f0fdf4 100%);
border-color: rgba(34,197,94,0.12);
box-shadow: 0 2px 8px rgba(34,197,94,0.06);
}
.sl-revenue-gap-left {
display: flex; align-items: center; gap: 12px;
}
.sl-revenue-gap-icon { font-size: 24px; }
.sl-revenue-gap-text {
font-size: 14px; font-weight: 700; color: #b91c1c;
}
.sl-revenue-gap.positive .sl-revenue-gap-text { color: #166534; }
.sl-revenue-gap-amount {
font-size: 24px; font-weight: 900; letter-spacing: -0.03em;
color: #dc2626;
}
.sl-revenue-gap.positive .sl-revenue-gap-amount { color: #059669; }
/* ─── COOLING INDICATOR — pipeline lead going cold ──────────────────────────── */
.sl-cooling {
display: flex; align-items: center; gap: 5px;
font-size: 11px; font-weight: 700; color: #3b82f6;
padding: 3px 10px; border-radius: 20px;
background: rgba(59,130,246,0.08);
}
.sl-cooling.warn { color: #d97706; background: rgba(245,158,11,0.08); }
.sl-cooling.danger { color: #dc2626; background: rgba(239,68,68,0.08); animation: sl-pulse-soft 2s infinite; }
.sl-cooling-bar {
width: 40px; height: 4px; border-radius: 2px;
background: #e4e4e7; overflow: hidden;
}
.sl-cooling-bar-fill {
height: 100%; border-radius: 2px;
background: #3b82f6; transition: width 0.5s ease;
}
.sl-cooling.warn .sl-cooling-bar-fill { background: #f59e0b; }
.sl-cooling.danger .sl-cooling-bar-fill { background: #ef4444; }
/* ─── DISPLAY MODE additions for new components ─────────────────────────────── */
body.display-mode .sl-hero-card { border-radius: 24px; }
body.display-mode .sl-hero-name { font-size: 30px; }
body.display-mode .sl-hero-body { padding: 24px 32px; }
body.display-mode .sl-hero-badge { font-size: 12px; padding: 6px 18px; }
body.display-mode .sl-money.lg { font-size: 28px; }
body.display-mode .sl-money.xl { font-size: 36px; }
body.display-mode .sl-target-gauge { padding: 28px; border-radius: 20px; }
body.display-mode .sl-target-actual { font-size: 52px; }
body.display-mode .sl-target-goal { font-size: 30px; }
body.display-mode .sl-target-bar { height: 16px; border-radius: 8px; }
body.display-mode .sl-pressure-strip { padding: 14px 22px; font-size: 14px; }
body.display-mode .sl-revenue-gap { padding: 20px 28px; }
body.display-mode .sl-revenue-gap-amount { font-size: 30px; }
body.display-mode .sl-demand-alert { padding: 16px 22px; font-size: 15px; }
body.display-mode .sl-prob { font-size: 16px; padding: 6px 16px; }
/* ═══════════════════════════════════════════════════════════════════════════════
* TABLES — Premium, clean data presentation
* ═══════════════════════════════════════════════════════════════════════════════ */
.nd-table-wrap {
background: var(--surface);
border: 1px solid var(--border-subtle);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-card);
}
.nd-table {
width: 100%; border-collapse: collapse;
font-size: 13px;
}
.nd-table th {
padding: 12px 16px;
font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.05em; color: var(--text-muted);
background: var(--n-50);
border-bottom: 1px solid var(--border);
text-align: left; white-space: nowrap;
}
.nd-table td {
padding: 14px 16px;
color: var(--text);
border-bottom: 1px solid var(--n-75);
vertical-align: middle;
}
.nd-table tr:last-child td { border-bottom: none; }
.nd-table tr:hover td { background: var(--n-25); }
.nd-table td:first-child { font-weight: 500; }
/* ═══════════════════════════════════════════════════════════════════════════════
* TOGGLE SWITCH
* ═══════════════════════════════════════════════════════════════════════════════ */
.nd-toggle {
position: relative; width: 42px; height: 24px;
background: var(--n-200); border-radius: var(--r-full);
cursor: pointer; transition: all var(--t-fast);
flex-shrink: 0;
}
.nd-toggle::after {
content: ''; position: absolute; top: 2px; left: 2px;
width: 20px; height: 20px; background: white;
border-radius: 50%; box-shadow: var(--shadow-sm);
transition: all var(--t-fast);
}
.nd-toggle.on { background: var(--success-500); }
.nd-toggle.on::after { left: 20px; }
/* ═══════════════════════════════════════════════════════════════════════════════
* SEARCH INPUT — Premium bar
* ═══════════════════════════════════════════════════════════════════════════════ */
.nd-search {
position: relative; display: flex; align-items: center;
}
.nd-search input {
width: 100%; padding: 9px 14px 9px 38px;
border: 1px solid var(--border); border-radius: var(--r-md);
font-size: 13px; font-family: var(--font);
background: var(--surface); color: var(--text);
transition: all var(--t-fast); box-shadow: var(--shadow-xs);
}
.nd-search input:focus {
outline: none; border-color: var(--pri-500);
box-shadow: 0 0 0 3px var(--ring-soft);
}
.nd-search input::placeholder { color: var(--n-300); }
.nd-search .icon {
position: absolute; left: 12px; color: var(--n-400);
width: 16px; height: 16px; pointer-events: none;
}
/* ═══════════════════════════════════════════════════════════════════════════════
* CHANNEL BADGES (WhatsApp, IG, FB, Web)
* ═══════════════════════════════════════════════════════════════════════════════ */
.nd-channel-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.nd-channel-dot.wa { background: #25D366; }
.nd-channel-dot.ig { background: #E1306C; }
.nd-channel-dot.fb { background: #0084FF; }
.nd-channel-dot.web { background: var(--pri-500); }
/* ═══════════════════════════════════════════════════════════════════════════════
* LANGUAGE TOGGLE (inline pills)
* ═══════════════════════════════════════════════════════════════════════════════ */
.nd-lang-toggle {
display: flex; gap: 2px; padding: 3px;
background: var(--n-100); border-radius: var(--r-full);
}
.nd-lang-btn {
padding: 4px 12px; border-radius: var(--r-full);
font-size: 11px; font-weight: 600; cursor: pointer;
border: none; background: transparent; color: var(--text-muted);
transition: all var(--t-fast);
}
.nd-lang-btn.active {
background: var(--surface); color: var(--text-strong);
box-shadow: var(--shadow-xs);
}
/* ═══════════════════════════════════════════════════════════════════════════════
* AVATAR
* ═══════════════════════════════════════════════════════════════════════════════ */
.nd-avatar {
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%; font-weight: 600; color: white; flex-shrink: 0;
background: linear-gradient(135deg, var(--pri-500), var(--purple-600));
}
.nd-avatar.sm { width: 28px; height: 28px; font-size: 10px; }
.nd-avatar.md { width: 36px; height: 36px; font-size: 13px; }
.nd-avatar.lg { width: 48px; height: 48px; font-size: 16px; }
.nd-avatar.green { background: linear-gradient(135deg, var(--success-500), var(--success-600)); }
.nd-avatar.amber { background: linear-gradient(135deg, var(--warning-500), var(--warning-600)); }
.nd-avatar.red { background: linear-gradient(135deg, var(--danger-500), var(--danger-600)); }
/* ═══════════════════════════════════════════════════════════════════════════════
* NOTIFICATION DOT
* ═══════════════════════════════════════════════════════════════════════════════ */
.nd-dot {
display: inline-block; width: 8px; height: 8px;
background: var(--danger-500); border-radius: 50%;
box-shadow: 0 0 0 2px var(--surface);
}
.nd-dot.green { background: var(--success-500); box-shadow: 0 0 4px rgba(34,197,94,0.4); }
/* ═══════════════════════════════════════════════════════════════════════════════
* PAGE TRANSITION ANIMATION
* ═══════════════════════════════════════════════════════════════════════════════ */
.nd-content > * {
animation: nd-fade-in 0.3s var(--ease) both;
}
/* ═══════════════════════════════════════════════════════════════════════════════
* RTL SUPPORT
* ═══════════════════════════════════════════════════════════════════════════════ */
html[dir="rtl"] .nd-sidebar { border-right: none; border-left: 1px solid var(--sidebar-border); }
html[dir="rtl"] .nd-nav-item.active::before { left: auto; right: 0; border-radius: 2px 0 0 2px; }
html[dir="rtl"] .nd-nav-badge { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .nd-search input { padding: 9px 38px 9px 14px; }
html[dir="rtl"] .nd-search .icon { left: auto; right: 12px; }
/* ═══════════════════════════════════════════════════════════════════════════════
* NOOR DESIGN SYSTEM — v3 UNIFIED LAYER (appended 2026-04-07)
* Goal: one set of primitives used by every page. Overrides the rough edges
* of v2 without removing v2 classes. Inspired by Linear / Stripe / Notion.
* ═══════════════════════════════════════════════════════════════════════════════ */
:root {
--v3-accent: #5B5BD6;
--v3-accent-hover: #4B4BC2;
--v3-accent-soft: rgba(91,91,214,0.10);
--v3-accent-ring: rgba(91,91,214,0.22);
--v3-surface: #FFFFFF;
--v3-surface-alt: #FAFAFB;
--v3-bg: #F7F7F9;
--v3-border: #E6E6EA;
--v3-border-strong: #D8D8DE;
--v3-text: #1A1A1F;
--v3-text-secondary:#60606B;
--v3-text-muted: #8A8A95;
--v3-r-sm: 8px;
--v3-r-md: 10px;
--v3-r-lg: 14px;
--v3-shadow-1: 0 1px 2px rgba(17,17,22,0.04), 0 1px 3px rgba(17,17,22,0.05);
--v3-shadow-2: 0 2px 6px rgba(17,17,22,0.05), 0 12px 24px rgba(17,17,22,0.08);
--v3-shadow-focus: 0 0 0 3px var(--v3-accent-ring);
}
body {
background: var(--v3-bg) !important;
color: var(--v3-text);
font-feature-settings: 'cv02','cv03','cv04','cv11','ss01';
}
::selection { background: var(--v3-accent-soft); color: var(--v3-text); }
*:focus-visible {
outline: none;
box-shadow: var(--v3-shadow-focus);
border-color: var(--v3-accent) !important;
}
.nd-main { background: var(--v3-bg) !important; }
.nd-page-header {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 20px; margin-bottom: 24px;
}
.nd-page-header .nd-page-title {
font-size: 22px; font-weight: 600; letter-spacing: -0.01em;
color: var(--v3-text); line-height: 1.3;
}
.nd-page-header .nd-page-subtitle {
margin-top: 4px; font-size: 13px; color: var(--v3-text-secondary);
}
.nd-page-header .nd-page-actions { display: flex; gap: 8px; align-items: center; }
/* Buttons (v3) */
.nd-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
height: 34px; padding: 0 14px;
font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1;
color: var(--v3-text);
background: var(--v3-surface);
border: 1px solid var(--v3-border);
border-radius: var(--v3-r-sm);
cursor: pointer; user-select: none;
transition: background 120ms var(--ease), border-color 120ms var(--ease),
color 120ms var(--ease), box-shadow 120ms var(--ease), transform 120ms var(--ease);
white-space: nowrap;
}
.nd-btn:hover { background: var(--v3-surface-alt); border-color: var(--v3-border-strong); }
.nd-btn:active { transform: translateY(0.5px); }
.nd-btn[disabled], .nd-btn.is-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.nd-btn-primary {
color: #FFFFFF; background: var(--v3-accent); border-color: var(--v3-accent);
box-shadow: 0 1px 2px rgba(91,91,214,0.25);
}
.nd-btn-primary:hover { background: var(--v3-accent-hover); border-color: var(--v3-accent-hover); }
.nd-btn-ghost { background: transparent; border-color: transparent; color: var(--v3-text-secondary); }
.nd-btn-ghost:hover { background: var(--v3-surface-alt); color: var(--v3-text); border-color: transparent; }
.nd-btn-danger { color: #FFFFFF; background: var(--danger-600); border-color: var(--danger-600); }
.nd-btn-danger:hover { background: var(--danger-700); border-color: var(--danger-700); }
.nd-btn-sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 6px; }
.nd-btn-lg { height: 40px; padding: 0 18px; font-size: 14px; border-radius: 10px; }
.nd-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.nd-btn.is-loading::after {
content: ''; position: absolute; inset: 0; margin: auto;
width: 14px; height: 14px;
border: 2px solid rgba(255,255,255,0.5); border-top-color: #fff;
border-radius: 50%;
animation: nd-spin 0.7s linear infinite;
}
.nd-btn-ghost.is-loading::after, .nd-btn:not(.nd-btn-primary):not(.nd-btn-danger).is-loading::after {
border-color: rgba(91,91,214,0.25); border-top-color: var(--v3-accent);
}
@keyframes nd-spin { to { transform: rotate(360deg); } }
/* Card (v3) — also overrides legacy .card */
.nd-card, .card {
background: var(--v3-surface);
border: 1px solid var(--v3-border);
border-radius: var(--v3-r-lg);
box-shadow: var(--v3-shadow-1);
overflow: hidden;
transition: box-shadow 160ms var(--ease), border-color 160ms var(--ease);
}
.nd-card:hover, .card:hover { border-color: var(--v3-border-strong); }
.nd-card-header, .card .card-header {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px;
border-bottom: 1px solid var(--v3-border);
}
.nd-card-title, .card .card-title {
font-size: 13px; font-weight: 600; color: var(--v3-text);
display: flex; align-items: center; gap: 8px;
}
.nd-card-body, .card .card-body { padding: 18px; }
.nd-card-footer { padding: 12px 18px; border-top: 1px solid var(--v3-border); background: var(--v3-surface-alt); }
/* Badges / Pills */
.nd-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 8px; font-size: 11px; font-weight: 500; line-height: 1.5;
border-radius: var(--r-full); letter-spacing: 0.01em;
background: var(--v3-surface-alt); color: var(--v3-text-secondary);
border: 1px solid var(--v3-border);
}
.nd-badge-success { background: var(--success-50); color: var(--success-700); border-color: var(--success-200); }
.nd-badge-warn { background: var(--warning-50); color: var(--warning-700); border-color: var(--warning-200); }
.nd-badge-danger { background: var(--danger-50); color: var(--danger-700); border-color: var(--danger-200); }
.nd-badge-accent { background: var(--v3-accent-soft); color: var(--v3-accent); border-color: transparent; }
/* Empty state */
.nd-empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 44px 28px; text-align: center; color: var(--v3-text-secondary);
}
.nd-empty-icon {
width: 44px; height: 44px; margin-bottom: 12px;
display: flex; align-items: center; justify-content: center;
background: var(--v3-surface-alt); border: 1px solid var(--v3-border);
border-radius: 12px; font-size: 20px;
}
.nd-empty-title { font-size: 14px; font-weight: 600; color: var(--v3-text); margin-bottom: 4px; }
.nd-empty-text { font-size: 12px; color: var(--v3-text-muted); max-width: 320px; line-height: 1.55; }
.nd-empty-action { margin-top: 14px; }
/* Skeleton loading */
.nd-skeleton {
display: block;
background: linear-gradient(90deg, #EEEEF1 0%, #F6F6F9 50%, #EEEEF1 100%);
background-size: 200% 100%;
border-radius: 6px;
animation: nd-skel 1.4s ease-in-out infinite;
}
.nd-skeleton.line { height: 12px; margin: 6px 0; }
.nd-skeleton.line-sm { height: 10px; width: 60%; }
.nd-skeleton.line-lg { height: 16px; width: 80%; }
.nd-skeleton.block { height: 60px; border-radius: 10px; }
@keyframes nd-skel { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
/* Toast container */
.nd-toast-container {
position: fixed; right: 20px; bottom: 20px; z-index: 9999;
display: flex; flex-direction: column; gap: 8px;
pointer-events: none;
}
.nd-toast {
pointer-events: auto;
min-width: 260px; max-width: 380px;
padding: 12px 14px;
background: var(--v3-text); color: #F5F5F7;
border-radius: 10px; box-shadow: var(--v3-shadow-2);
font-size: 13px; line-height: 1.4;
display: flex; align-items: flex-start; gap: 10px;
animation: nd-toast-in 200ms var(--ease);
}
.nd-toast .nd-toast-icon {
width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px;
border-radius: 50%; background: var(--success-500);
}
.nd-toast.error .nd-toast-icon { background: var(--danger-500); }
.nd-toast.warning .nd-toast-icon { background: var(--warning-500); }
.nd-toast.info .nd-toast-icon { background: var(--v3-accent); }
.nd-toast.closing { animation: nd-toast-out 160ms var(--ease) forwards; }
@keyframes nd-toast-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes nd-toast-out { to{opacity:0;transform:translateY(8px)} }
/* Inputs & forms */
.nd-input, .nd-select, .nd-textarea {
width: 100%; height: 36px; padding: 0 12px;
font: inherit; font-size: 13px; color: var(--v3-text);
background: var(--v3-surface);
border: 1px solid var(--v3-border);
border-radius: var(--v3-r-sm);
transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease);
}
.nd-textarea { height: auto; min-height: 84px; padding: 10px 12px; line-height: 1.5; }
.nd-input::placeholder, .nd-textarea::placeholder { color: var(--v3-text-muted); }
.nd-input:hover, .nd-select:hover, .nd-textarea:hover { border-color: var(--v3-border-strong); }
.nd-input:focus, .nd-select:focus, .nd-textarea:focus {
outline: none; border-color: var(--v3-accent);
box-shadow: 0 0 0 3px var(--v3-accent-ring);
}
.nd-field-label { display: block; font-size: 12px; font-weight: 500; color: var(--v3-text-secondary); margin-bottom: 6px; }
/* Table (v3) */
.nd-table {
width: 100%; border-collapse: separate; border-spacing: 0;
font-size: 13px; color: var(--v3-text);
}
.nd-table th {
text-align: left; font-weight: 500; font-size: 11px;
text-transform: uppercase; letter-spacing: 0.04em;
color: var(--v3-text-muted);
padding: 10px 14px;
border-bottom: 1px solid var(--v3-border);
background: var(--v3-surface-alt);
}
.nd-table td {
padding: 12px 14px; border-bottom: 1px solid var(--v3-border); vertical-align: middle;
}
.nd-table tr:last-child td { border-bottom: 0; }
.nd-table tbody tr:hover td { background: var(--v3-surface-alt); }
/* Legacy .btn compat */
.btn, button.btn-primary, .button-primary {
border-radius: var(--v3-r-sm) !important;
font-weight: 500;
}
/* Stat cards: cleaner, quieter, no fake deltas */
.stat-card, .nd-stat {
background: var(--v3-surface);
border: 1px solid var(--v3-border);
border-radius: var(--v3-r-lg);
padding: 18px 20px;
box-shadow: var(--v3-shadow-1);
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
transition: border-color 160ms var(--ease);
}
.stat-card:hover, .nd-stat:hover { border-color: var(--v3-border-strong); }
.stat-card .stat-label, .nd-stat-label {
font-size: 11px; font-weight: 500;
color: var(--v3-text-muted);
text-transform: uppercase; letter-spacing: 0.05em;
}
.stat-card .stat-value, .nd-stat-value {
font-size: 26px; font-weight: 650; color: var(--v3-text);
margin-top: 4px; letter-spacing: -0.01em; line-height: 1.15;
}
/* Quieter scrollbars everywhere */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #D8D8DE; border: 2px solid var(--v3-bg); border-radius: 10px; }
*::-webkit-scrollbar-thumb:hover { background: #BFBFC8; }
/* Loading inline */
.nd-loading {
display: flex; align-items: center; justify-content: center;
padding: 40px 16px; color: var(--v3-text-muted); font-size: 12px;
gap: 10px;
}
.nd-loading::before {
content: ''; width: 14px; height: 14px;
border: 2px solid var(--v3-border-strong); border-top-color: var(--v3-accent);
border-radius: 50%;
animation: nd-spin 0.7s linear infinite;
}
/* Smoother fade */
@keyframes nd-fade-in { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }
/* ═══════════════════════════════════════════════════════════════════════════════
* NOOR DESIGN v3.1 — RESPONSIVE + MOTION LAYER (2026-04-07)
*
* Breakpoints (mobile-first):
* sm: ≥ 640px (large phone / small tablet)
* md: ≥ 768px (tablet)
* lg: ≥ 1024px (laptop)
* xl: ≥ 1280px (desktop)
*
* Goals:
* • Real mobile: sidebar becomes a slide-in drawer with backdrop
* • Tablet: collapsed-icon sidebar on request, full content width
* • Laptop/desktop: full two-column layout
* • Fluid type via clamp()
* • Touch targets ≥ 44px on pointer:coarse
* • Motion system that respects prefers-reduced-motion
* ═══════════════════════════════════════════════════════════════════════════════ */
:root {
/* Motion tokens */
--nd-dur-instant: 80ms;
--nd-dur-fast: 140ms;
--nd-dur-base: 220ms;
--nd-dur-slow: 360ms;
--nd-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--nd-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--nd-ease-spring: cubic-bezier(0.34, 1.35, 0.64, 1);
/* Fluid type scale — adapts smoothly from 360px viewports to 1440px */
--nd-fs-xs: clamp(11px, 0.72vw + 9px, 12px);
--nd-fs-sm: clamp(12px, 0.8vw + 10px, 13px);
--nd-fs-base: clamp(13px, 0.9vw + 11px, 14px);
--nd-fs-md: clamp(14px, 1vw + 12px, 15px);
--nd-fs-lg: clamp(15px, 1.2vw + 13px, 17px);
--nd-fs-xl: clamp(18px, 1.6vw + 14px, 22px);
--nd-fs-2xl: clamp(22px, 2.6vw + 16px, 32px);
--nd-fs-3xl: clamp(28px, 3.5vw + 18px, 42px);
/* Spacing — fluid on large surfaces */
--nd-gutter: clamp(16px, 2.4vw, 32px);
/* Safe-area insets for iOS notches */
--nd-safe-top: env(safe-area-inset-top, 0px);
--nd-safe-bottom: env(safe-area-inset-bottom, 0px);
--nd-safe-left: env(safe-area-inset-left, 0px);
--nd-safe-right: env(safe-area-inset-right, 0px);
/* Responsive sidebar width */
--nd-sidebar-w: 260px;
--nd-sidebar-w-compact: 72px;
--nd-topbar-h: 56px;
}
/* ─── Base refinements for mobile ─────────────────────────────────────────── */
html { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body {
font-size: var(--nd-fs-base);
min-height: 100dvh; /* respects mobile URL bar */
}
/* Apply fluid type to headings */
.nd-page-header .nd-page-title { font-size: var(--nd-fs-xl); }
.nd-page-header .nd-page-subtitle { font-size: var(--nd-fs-sm); }
.stat-card .stat-value, .nd-stat-value { font-size: var(--nd-fs-2xl); }
/* Tap targets on coarse pointers */
@media (pointer: coarse) {
.nd-btn { min-height: 44px; padding: 0 16px; }
.nd-btn-sm { min-height: 36px; }
.nd-nav-item { min-height: 44px; }
.nd-input, .nd-select { min-height: 44px; }
a, button { touch-action: manipulation; }
}
/* ─── Mobile top bar + hamburger (auto-injected by noor-sidebar.js) ───────── */
.nd-topbar {
display: none;
position: sticky; top: 0; z-index: 40;
height: var(--nd-topbar-h);
padding: 0 12px 0 calc(12px + var(--nd-safe-left));
padding-right: calc(12px + var(--nd-safe-right));
padding-top: var(--nd-safe-top);
align-items: center; gap: 10px;
background: rgba(255,255,255,0.82);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid var(--v3-border);
}
.nd-topbar .nd-topbar-burger {
width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
background: transparent; border: 1px solid transparent; border-radius: 10px;
color: var(--v3-text); cursor: pointer;
transition: background var(--nd-dur-fast) var(--nd-ease-out), border-color var(--nd-dur-fast);
}
.nd-topbar .nd-topbar-burger:hover { background: var(--v3-surface-alt); border-color: var(--v3-border); }
.nd-topbar .nd-topbar-burger svg { width: 22px; height: 22px; }
.nd-topbar .nd-topbar-title {
font-size: 15px; font-weight: 600; color: var(--v3-text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.nd-topbar .nd-topbar-logo {
width: 30px; height: 30px; border-radius: 8px;
background: linear-gradient(135deg, #6366F1, #8B5CF6);
display: flex; align-items: center; justify-content: center;
color: white; font-size: 13px; font-weight: 700;
box-shadow: 0 2px 8px rgba(99,102,241,0.25);
}
/* ─── Sidebar backdrop (mobile drawer) ────────────────────────────────────── */
.nd-sidebar-backdrop {
position: fixed; inset: 0; z-index: 48;
background: rgba(10,10,20,0.45);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
opacity: 0; pointer-events: none;
transition: opacity var(--nd-dur-base) var(--nd-ease-out);
}
body.nd-sidebar-open .nd-sidebar-backdrop {
opacity: 1; pointer-events: auto;
}
/* ─── Content grid system (responsive) ────────────────────────────────────── */
.nd-content { padding: var(--nd-gutter) var(--nd-gutter) calc(var(--nd-gutter) * 2); }
.nd-grid { display: grid; gap: var(--nd-gutter); }
.nd-grid-1 { grid-template-columns: 1fr; }
.nd-grid-2 { grid-template-columns: 1fr; }
.nd-grid-3 { grid-template-columns: 1fr; }
.nd-grid-4 { grid-template-columns: 1fr; }
.nd-grid-2-1 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
.nd-grid-2 { grid-template-columns: repeat(2, 1fr); }
.nd-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.nd-grid-3 { grid-template-columns: repeat(3, 1fr); }
.nd-grid-4 { grid-template-columns: repeat(4, 1fr); }
.nd-grid-2-1 { grid-template-columns: 2fr 1fr; }
}
/* Legacy grid classes used by existing pages */
.grid-2 { display: grid; gap: var(--nd-gutter); grid-template-columns: 1fr; }
.grid-3 { display: grid; gap: var(--nd-gutter); grid-template-columns: 1fr; }
.grid-4 { display: grid; gap: var(--nd-gutter); grid-template-columns: 1fr; }
.grid-2-1 { display: grid; gap: var(--nd-gutter); grid-template-columns: 1fr; }
@media (min-width: 640px) {
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2-1 { grid-template-columns: 2fr 1fr; }
}
/* ─── Responsive sidebar behavior ─────────────────────────────────────────── */
/* Mobile: hide by default, show topbar, slide in as drawer when body.nd-sidebar-open */
@media (max-width: 1023px) {
.nd-topbar { display: flex; }
.nd-layout { flex-direction: column; }
.nd-sidebar {
position: fixed !important;
top: 0; bottom: 0; left: 0;
width: min(86vw, 320px) !important;
z-index: 50;
transform: translateX(-100%) !important;
transition: transform var(--nd-dur-base) var(--nd-ease-out),
box-shadow var(--nd-dur-base) var(--nd-ease-out);
border-right: 1px solid var(--v3-border);
box-shadow: none;
padding-top: var(--nd-safe-top);
padding-bottom: var(--nd-safe-bottom);
}
body.nd-sidebar-open .nd-sidebar {
transform: translateX(0) !important;
box-shadow: 0 20px 60px rgba(10,10,20,0.25), 2px 0 0 rgba(0,0,0,0.03);
}
html[dir="rtl"] .nd-sidebar {
left: auto; right: 0;
transform: translateX(100%) !important;
border-right: none; border-left: 1px solid var(--v3-border);
}
html[dir="rtl"] body.nd-sidebar-open .nd-sidebar { transform: translateX(0) !important; }
.nd-main {
flex: 1; min-height: 0;
}
.nd-content {
padding: 16px 16px calc(16px + var(--nd-safe-bottom));
}
}
/* Tablet: same drawer pattern but with a slightly larger default content padding */
@media (min-width: 640px) and (max-width: 1023px) {
.nd-content { padding: 24px 28px 48px; }
}
/* Desktop: normal two-column layout, hide topbar + backdrop */
@media (min-width: 1024px) {
.nd-topbar, .nd-sidebar-backdrop { display: none !important; }
body.nd-sidebar-open { overflow: auto; } /* nothing to lock */
.nd-sidebar { transform: none !important; }
}
/* Lock scroll when drawer is open on mobile */
@media (max-width: 1023px) {
body.nd-sidebar-open { overflow: hidden; touch-action: none; }
}
/* ─── Motion system ───────────────────────────────────────────────────────── */
@keyframes nd-fade-up { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes nd-fade-in-scale { from{opacity:0;transform:scale(0.98)} to{opacity:1;transform:scale(1)} }
@keyframes nd-slide-in-left { from{opacity:0;transform:translateX(-14px)} to{opacity:1;transform:translateX(0)} }
@keyframes nd-slide-in-right { from{opacity:0;transform:translateX(14px)} to{opacity:1;transform:translateX(0)} }
@keyframes nd-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@keyframes nd-pulse-ring {
0% { box-shadow: 0 0 0 0 rgba(91,91,214,0.30); }
70% { box-shadow: 0 0 0 10px rgba(91,91,214,0); }
100% { box-shadow: 0 0 0 0 rgba(91,91,214,0); }
}
/* Stagger page enter: content children fade+lift sequentially */
.nd-content > * {
animation: nd-fade-up var(--nd-dur-slow) var(--nd-ease-out) both;
}
.nd-content > *:nth-child(1) { animation-delay: 0ms; }
.nd-content > *:nth-child(2) { animation-delay: 40ms; }
.nd-content > *:nth-child(3) { animation-delay: 80ms; }
.nd-content > *:nth-child(4) { animation-delay: 120ms; }
.nd-content > *:nth-child(5) { animation-delay: 160ms; }
.nd-content > *:nth-child(n+6) { animation-delay: 200ms; }
/* Card hover lift — subtle, physical */
.nd-card, .card {
will-change: transform;
transition: box-shadow var(--nd-dur-base) var(--nd-ease-out),
border-color var(--nd-dur-base) var(--nd-ease-out),
transform var(--nd-dur-base) var(--nd-ease-out);
}
@media (hover: hover) and (min-width: 1024px) {
.nd-card:hover, .card:hover {
transform: translateY(-1px);
box-shadow: var(--v3-shadow-2);
}
}
/* Button press spring */
.nd-btn { transition: background var(--nd-dur-fast) var(--nd-ease-out),
border-color var(--nd-dur-fast) var(--nd-ease-out),
color var(--nd-dur-fast) var(--nd-ease-out),
box-shadow var(--nd-dur-fast) var(--nd-ease-out),
transform var(--nd-dur-fast) var(--nd-ease-spring); }
.nd-btn:active:not([disabled]):not(.is-disabled) { transform: scale(0.97); }
/* Nav item slide-in on sidebar open (only on mobile drawer) */
@media (max-width: 1023px) {
body.nd-sidebar-open .nd-sidebar .nd-nav-item {
animation: nd-slide-in-left var(--nd-dur-base) var(--nd-ease-out) both;
}
body.nd-sidebar-open .nd-sidebar .nd-nav-item:nth-child(1){animation-delay:60ms}
body.nd-sidebar-open .nd-sidebar .nd-nav-item:nth-child(2){animation-delay:80ms}
body.nd-sidebar-open .nd-sidebar .nd-nav-item:nth-child(3){animation-delay:100ms}
body.nd-sidebar-open .nd-sidebar .nd-nav-item:nth-child(4){animation-delay:120ms}
body.nd-sidebar-open .nd-sidebar .nd-nav-item:nth-child(5){animation-delay:140ms}
body.nd-sidebar-open .nd-sidebar .nd-nav-item:nth-child(6){animation-delay:160ms}
body.nd-sidebar-open .nd-sidebar .nd-nav-item:nth-child(n+7){animation-delay:180ms}
html[dir="rtl"] body.nd-sidebar-open .nd-sidebar .nd-nav-item {
animation-name: nd-slide-in-right;
}
}
/* Accent pulse ring — usable on any live indicator */
.nd-live-dot {
display: inline-block; width: 8px; height: 8px;
background: var(--success-500); border-radius: 50%;
animation: nd-pulse-ring 2.2s var(--nd-ease-out) infinite;
}
/* ─── Reduced motion honoured globally ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
scroll-behavior: auto !important;
}
.nd-live-dot { animation: none !important; }
}
/* ─── Utility classes (small set, responsive suffixes) ────────────────────── */
.nd-hide { display: none !important; }
.nd-show-mobile { display: block !important; }
.nd-hide-mobile { display: none !important; }
@media (min-width: 1024px) {
.nd-show-mobile { display: none !important; }
.nd-hide-mobile { display: block !important; }
}
.nd-flex { display: flex; }
.nd-flex-col { display: flex; flex-direction: column; }
.nd-items-center { align-items: center; }
.nd-justify-between { justify-content: space-between; }
.nd-gap-2 { gap: 8px; } .nd-gap-3 { gap: 12px; } .nd-gap-4 { gap: 16px; }
.nd-mt-2 { margin-top: 8px; } .nd-mt-4 { margin-top: 16px; } .nd-mt-6 { margin-top: 24px; }
/* ─── Hero page header with soft gradient accent ─────────────────────────── */
.nd-page-header.nd-hero {
position: relative;
padding: clamp(18px, 3vw, 32px) clamp(20px, 3vw, 36px);
background: linear-gradient(180deg, rgba(91,91,214,0.045), rgba(91,91,214,0) 90%);
border: 1px solid var(--v3-border);
border-radius: var(--v3-r-lg);
overflow: hidden;
}
.nd-page-header.nd-hero::before {
content: ''; position: absolute; inset: -1px auto auto -1px;
width: 120px; height: 120px; border-radius: 50%;
background: radial-gradient(circle, rgba(91,91,214,0.16), transparent 70%);
pointer-events: none;
}
/* ─── Glass surface (used by topbar, modals, overlays) ───────────────────── */
.nd-glass {
background: rgba(255,255,255,0.72);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border: 1px solid rgba(255,255,255,0.8);
}
/* ─── Small-screen card body tightening ───────────────────────────────────── */
@media (max-width: 640px) {
.nd-card-body, .card .card-body { padding: 14px; }
.nd-card-header, .card .card-header { padding: 12px 14px; }
.stat-card, .nd-stat { padding: 14px 16px; }
.nd-page-header { flex-direction: column; align-items: stretch; gap: 12px; }
.nd-page-header .nd-page-actions { justify-content: flex-end; flex-wrap: wrap; }
}
/* ─── Dark mode readiness (tokens only, not enabled unless user opts in) ──── */
@media (prefers-color-scheme: dark) {
/* Tokens defined but not applied; a .nd-dark class on will activate */
}
html.nd-dark {
--v3-surface: #16161A;
--v3-surface-alt: #1D1D22;
--v3-bg: #0F0F12;
--v3-border: #27272E;
--v3-border-strong: #33333C;
--v3-text: #F5F5F7;
--v3-text-secondary:#A1A1A8;
--v3-text-muted: #6E6E78;
color-scheme: dark;
}
html.nd-dark body { background: var(--v3-bg) !important; color: var(--v3-text); }
html.nd-dark .nd-topbar { background: rgba(22,22,26,0.78); }
/* ═══════════════════════════════════════════════════════════════════════════════
* END v3.1 RESPONSIVE + MOTION LAYER
* ═══════════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════════
* NOOR DESIGN v3.2 — LEGACY-CLASS REMAP + POLISH (2026-04-07)
*
* Goal: drag the remaining legacy styling (buttons, hero bars, trial banner,
* loading text, page headers) into the v3 visual system WITHOUT
* touching any of the 30+ HTML files. All done via selector overrides.
* ═══════════════════════════════════════════════════════════════════════════════ */
/* ─── Legacy button classes → v3 button look ─────────────────────────────── */
.btn,
.topbar-btn,
.ai-action-btn,
button.primary,
button.secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 36px;
padding: 0 14px;
font-family: inherit;
font-size: 13px;
font-weight: 500;
line-height: 1;
color: var(--v3-text);
background: var(--v3-surface);
border: 1px solid var(--v3-border);
border-radius: var(--v3-r-sm) !important;
cursor: pointer;
user-select: none;
white-space: nowrap;
transition: background var(--nd-dur-fast) var(--nd-ease-out),
border-color var(--nd-dur-fast) var(--nd-ease-out),
color var(--nd-dur-fast) var(--nd-ease-out),
box-shadow var(--nd-dur-fast) var(--nd-ease-out),
transform var(--nd-dur-fast) var(--nd-ease-spring);
}
.btn:hover,
.topbar-btn:hover,
.ai-action-btn:hover,
button.secondary:hover {
background: var(--v3-surface-alt);
border-color: var(--v3-border-strong);
}
.btn:active,
.topbar-btn:active,
.ai-action-btn:active,
button.primary:active,
button.secondary:active { transform: scale(0.97); }
.btn.primary,
.topbar-btn.primary,
.ai-action-btn.primary,
button.primary {
color: #FFFFFF !important;
background: var(--v3-accent) !important;
border-color: var(--v3-accent) !important;
box-shadow: 0 1px 2px rgba(91,91,214,0.25);
}
.btn.primary:hover,
.topbar-btn.primary:hover,
.ai-action-btn.primary:hover,
button.primary:hover {
background: var(--v3-accent-hover) !important;
border-color: var(--v3-accent-hover) !important;
}
.btn.danger, button.danger {
color: #fff !important;
background: var(--danger-600) !important;
border-color: var(--danger-600) !important;
}
/* ─── AI Command Bar (legacy `.ai-bar`) → v3 hero card ────────────────────── */
.ai-bar {
background: linear-gradient(135deg, rgba(91,91,214,0.07), rgba(91,91,214,0.015) 60%, transparent) !important;
border: 1px solid var(--v3-border) !important;
border-radius: var(--v3-r-lg) !important;
box-shadow: var(--v3-shadow-1) !important;
padding: 18px 22px !important;
margin-bottom: 18px !important;
display: flex;
align-items: center;
gap: 16px;
position: relative;
overflow: hidden;
}
.ai-bar::before {
content: '';
position: absolute; inset: -1px auto auto -1px;
width: 180px; height: 180px; border-radius: 50%;
background: radial-gradient(circle, rgba(91,91,214,0.14), transparent 70%);
pointer-events: none;
}
.ai-bar-icon {
width: 44px !important;
height: 44px !important;
border-radius: 12px !important;
background: var(--v3-accent) !important;
color: #fff !important;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 14px rgba(91,91,214,0.35);
flex-shrink: 0;
z-index: 1;
}
.ai-bar-icon svg { width: 22px; height: 22px; }
.ai-bar-content { flex: 1; min-width: 0; z-index: 1; }
.ai-bar-title {
font-size: var(--nd-fs-md) !important;
font-weight: 650 !important;
color: var(--v3-text) !important;
letter-spacing: -0.005em;
display: flex; align-items: center; gap: 8px;
}
.ai-bar-text {
font-size: var(--nd-fs-sm) !important;
color: var(--v3-text-secondary) !important;
margin-top: 4px;
line-height: 1.5;
}
.ai-bar-actions { display: flex; gap: 8px; flex-shrink: 0; z-index: 1; }
/* ─── Trial banner — v3 polish ────────────────────────────────────────────── */
#trial-banner {
background: linear-gradient(135deg, #1E1E2E 0%, #2A2A42 100%) !important;
border: 1px solid rgba(91,91,214,0.35) !important;
border-radius: var(--v3-r-lg) !important;
box-shadow: var(--v3-shadow-2) !important;
padding: 18px 22px !important;
position: relative;
overflow: hidden;
}
#trial-banner::before {
content: '';
position: absolute; inset: auto -20px -20px auto;
width: 200px; height: 200px; border-radius: 50%;
background: radial-gradient(circle, rgba(91,91,214,0.3), transparent 70%);
pointer-events: none;
}
#trial-banner > * { position: relative; z-index: 1; }
#trial-banner a {
background: var(--v3-accent) !important;
box-shadow: 0 4px 14px rgba(91,91,214,0.35);
transition: transform var(--nd-dur-fast) var(--nd-ease-spring), background var(--nd-dur-fast);
}
#trial-banner a:hover { background: var(--v3-accent-hover) !important; transform: translateY(-1px); }
/* ─── Unified page headers — any inside .nd-content gets v3 treatment ── */
.nd-content > h1,
.nd-content > header > h1 {
font-size: var(--nd-fs-2xl);
font-weight: 650;
letter-spacing: -0.015em;
color: var(--v3-text);
line-height: 1.15;
margin: 0 0 6px 0;
}
.nd-content > .page-header,
.nd-content > header.page-header {
margin-bottom: 20px;
}
/* ─── Card hover lift — enable on tablet too ──────────────────────────────── */
@media (hover: hover) and (min-width: 640px) {
.nd-card:hover, .card:hover {
transform: translateY(-1px);
box-shadow: var(--v3-shadow-2);
}
}
/* ─── Ripple effect for buttons ───────────────────────────────────────────── */
.nd-btn, .btn, .topbar-btn, .ai-action-btn, button.primary, button.secondary {
position: relative;
overflow: hidden;
}
.nd-ripple {
position: absolute;
border-radius: 50%;
transform: scale(0);
background: rgba(255,255,255,0.45);
pointer-events: none;
animation: nd-ripple-anim 520ms var(--nd-ease-out);
}
.nd-btn:not(.nd-btn-primary):not(.nd-btn-danger) .nd-ripple,
.btn:not(.primary):not(.danger) .nd-ripple { background: rgba(91,91,214,0.18); }
@keyframes nd-ripple-anim {
to { transform: scale(3); opacity: 0; }
}
/* ─── Focus trap ring — sharper on primary buttons ────────────────────────── */
.nd-btn-primary:focus-visible,
button.primary:focus-visible,
.btn.primary:focus-visible {
box-shadow: 0 0 0 3px rgba(255,255,255,0.9), 0 0 0 6px var(--v3-accent) !important;
}
/* ─── Skeleton helper applied where class present ─────────────────────────── */
.nd-loading-text {
color: var(--v3-text-muted);
font-size: var(--nd-fs-sm);
padding: 18px;
display: flex; align-items: center; gap: 10px;
}
.nd-loading-text::before {
content: ''; width: 14px; height: 14px;
border: 2px solid var(--v3-border-strong); border-top-color: var(--v3-accent);
border-radius: 50%;
animation: nd-spin 0.7s linear infinite;
}
/* ─── Command Center stats row (legacy .stats-row) → v3 grid ──────────────── */
.stats-row {
display: grid !important;
gap: var(--nd-gutter) !important;
grid-template-columns: 1fr !important;
margin-bottom: 20px;
}
@media (min-width: 640px) { .stats-row { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 1024px) { .stats-row { grid-template-columns: repeat(4, 1fr) !important; } }
/* ─── Legacy .count chip → v3 badge ───────────────────────────────────────── */
.count {
display: inline-flex; align-items: center;
padding: 2px 8px; font-size: 11px; font-weight: 500; line-height: 1.5;
border-radius: var(--r-full);
background: var(--v3-accent-soft);
color: var(--v3-accent);
border: 1px solid transparent;
margin-left: 6px;
}
/* ─── Notification dot → v3 look ──────────────────────────────────────────── */
.notification-btn {
position: relative;
width: 36px; height: 36px;
background: var(--v3-surface);
border: 1px solid var(--v3-border);
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
color: var(--v3-text-secondary);
cursor: pointer;
transition: background var(--nd-dur-fast), border-color var(--nd-dur-fast);
}
.notification-btn:hover { background: var(--v3-surface-alt); border-color: var(--v3-border-strong); }
.notification-btn .notif-dot {
position: absolute; top: 7px; right: 7px;
width: 7px; height: 7px; border-radius: 50%;
background: var(--danger-500);
box-shadow: 0 0 0 2px var(--v3-surface);
}
/* ─── Live dot (legacy .live-dot-inline) → pulsing v3 ─────────────────────── */
.live-dot-inline {
display: inline-block; width: 8px; height: 8px;
background: var(--success-500); border-radius: 50%;
animation: nd-pulse-ring 2.2s var(--nd-ease-out) infinite;
}
/* ─── Login page (10-login.html) polish ───────────────────────────────────── */
body.nd-login-body {
background: radial-gradient(ellipse at top left, rgba(91,91,214,0.10), transparent 55%),
radial-gradient(ellipse at bottom right, rgba(99,102,241,0.10), transparent 55%),
var(--v3-bg) !important;
min-height: 100dvh;
}
.nd-login-card {
background: var(--v3-surface);
border: 1px solid var(--v3-border);
border-radius: 18px;
box-shadow: var(--v3-shadow-2);
padding: clamp(24px, 4vw, 40px);
width: 100%;
max-width: 440px;
animation: nd-fade-in-scale var(--nd-dur-slow) var(--nd-ease-out);
}
/* ─── Empty state in already-rendered blocks ──────────────────────────────── */
.empty, .empty-state {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 44px 28px; text-align: center;
color: var(--v3-text-secondary);
font-size: var(--nd-fs-sm);
}
/* ─── Dark mode content tweaks ────────────────────────────────────────────── */
html.nd-dark .ai-bar {
background: linear-gradient(135deg, rgba(91,91,214,0.18), rgba(91,91,214,0.04) 60%, transparent) !important;
}
html.nd-dark #trial-banner {
background: linear-gradient(135deg, #0B0B12 0%, #141424 100%) !important;
}
html.nd-dark .nd-topbar { background: rgba(22,22,26,0.82); border-bottom-color: var(--v3-border); }
html.nd-dark .notification-btn { background: var(--v3-surface); color: var(--v3-text-secondary); }
html.nd-dark ::-webkit-scrollbar-thumb { background: #2E2E37; }
/* ─── Per-page inline-style neutralisation ───────────────────────────────── */
/* Broadcasts: force stat cards into responsive grid */
body:has(> .nd-layout) .stats-row,
.broadcast-page .stats-row,
.owner-closing .stats-row {
display: grid !important;
gap: var(--nd-gutter) !important;
grid-template-columns: 1fr !important;
}
@media (min-width: 640px) {
body:has(> .nd-layout) .stats-row,
.broadcast-page .stats-row,
.owner-closing .stats-row { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 1024px) {
body:has(> .nd-layout) .stats-row,
.broadcast-page .stats-row,
.owner-closing .stats-row { grid-template-columns: repeat(4, 1fr) !important; }
}
/* Neutralize inline hardcoded widths on cards inside .nd-content */
.nd-content .card[style*="width"] { width: auto !important; max-width: 100% !important; }
/* Legacy `.topbar` (page-level, not mobile drawer) — v3 look */
.main > .topbar, .nd-main > .topbar {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
padding: clamp(12px, 2vw, 20px) var(--nd-gutter);
border-bottom: 1px solid var(--v3-border);
background: var(--v3-surface);
}
.main > .topbar h1, .nd-main > .topbar h1 {
font-size: var(--nd-fs-xl);
font-weight: 650;
letter-spacing: -0.01em;
color: var(--v3-text);
margin: 0;
}
.main > .topbar p, .nd-main > .topbar p {
font-size: var(--nd-fs-sm);
color: var(--v3-text-secondary);
margin: 2px 0 0 0;
}
@media (max-width: 640px) {
.main > .topbar, .nd-main > .topbar {
flex-direction: column;
align-items: stretch;
}
.main > .topbar .topbar-right, .nd-main > .topbar .topbar-right {
justify-content: flex-end;
}
}
/* Dark mode for hero login background */
html.nd-dark body.nd-login-body,
html.nd-dark body.nd-login-body {
background: radial-gradient(ellipse at top left, rgba(91,91,214,0.18), transparent 55%),
radial-gradient(ellipse at bottom right, rgba(99,102,241,0.18), transparent 55%),
var(--v3-bg) !important;
}
/* Give the card fresh surface color in dark mode */
html.nd-dark .login-card,
html.nd-dark .nd-login-card {
background: var(--v3-surface) !important;
border-color: var(--v3-border) !important;
color: var(--v3-text);
}
/* ═══════════════════════════════════════════════════════════════════════════════
* END v3.2 LEGACY REMAP
* ═══════════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════════
* NOOR DESIGN v4 — STITCH (alive, vibrant, world-class)
* Inspired by Google Stitch / Linear / Vercel / Framer.
*
* Design ethos:
* • Living background — slow-moving aurora mesh (CSS-only, GPU friendly)
* • Vibrant gradient accent: violet → cyan → fuchsia
* • Glass surfaces with backdrop-blur and inner highlight
* • Generous spacing, big fluid typography
* • Interactive: hover gradients, glow halos, magnetic press
* • Performance: GPU-only animations, respects prefers-reduced-motion
*
* This layer OVERRIDES v3/v3.1/v3.2 visual choices but never changes layout
* contracts, so all pages keep working without HTML edits.
* ═══════════════════════════════════════════════════════════════════════════════ */
:root {
/* Vibrant Stitch palette */
--st-violet: #7C3AED;
--st-violet-2: #A855F7;
--st-cyan: #06B6D4;
--st-cyan-2: #22D3EE;
--st-fuchsia: #D946EF;
--st-pink: #EC4899;
--st-blue: #3B82F6;
--st-emerald: #10B981;
--st-amber: #F59E0B;
/* Primary accent gradient (used by buttons, headers, glows) */
--st-grad-primary: linear-gradient(135deg, #7C3AED 0%, #A855F7 35%, #06B6D4 100%);
--st-grad-primary-hover: linear-gradient(135deg, #6D28D9 0%, #9333EA 35%, #0891B2 100%);
--st-grad-warm: linear-gradient(135deg, #D946EF 0%, #EC4899 50%, #F59E0B 100%);
--st-grad-cool: linear-gradient(135deg, #06B6D4 0%, #3B82F6 50%, #7C3AED 100%);
/* Surfaces — slightly cooler than v3 */
--st-bg: #F7F8FB;
--st-bg-deep: #EFF1F6;
--st-surface: rgba(255,255,255,0.78);
--st-surface-solid: #FFFFFF;
--st-border: rgba(124,58,237,0.10);
--st-border-strong: rgba(124,58,237,0.18);
/* Text */
--st-text: #0B0B14;
--st-text-2: #4B4B5C;
--st-text-3: #7B7B8C;
/* Glow shadows */
--st-glow-violet: 0 12px 32px rgba(124,58,237,0.28), 0 4px 12px rgba(124,58,237,0.16);
--st-glow-cyan: 0 12px 32px rgba(6,182,212,0.25);
--st-glow-pink: 0 12px 32px rgba(217,70,239,0.25);
--st-shadow-glass: 0 1px 0 rgba(255,255,255,0.6) inset,
0 1px 2px rgba(15,15,30,0.05),
0 8px 24px rgba(15,15,30,0.06);
--st-shadow-glass-strong:
0 1px 0 rgba(255,255,255,0.6) inset,
0 4px 8px rgba(15,15,30,0.06),
0 24px 60px rgba(15,15,30,0.12);
/* Override v3 accent so existing v3 components inherit Stitch colour */
--v3-accent: #7C3AED;
--v3-accent-hover: #6D28D9;
--v3-accent-soft: rgba(124,58,237,0.10);
--v3-accent-ring: rgba(124,58,237,0.30);
--v3-text: #0B0B14;
--v3-text-secondary:#4B4B5C;
--v3-text-muted: #7B7B8C;
--v3-border: rgba(124,58,237,0.10);
--v3-border-strong: rgba(124,58,237,0.18);
}
/* ─── Living mesh background — aurora ─────────────────────────────────────── */
body, .nd-main {
background:
radial-gradient(ellipse 60% 50% at 12% 10%, rgba(124,58,237,0.18), transparent 60%),
radial-gradient(ellipse 50% 40% at 88% 8%, rgba(6,182,212,0.16), transparent 60%),
radial-gradient(ellipse 70% 60% at 50% 100%, rgba(217,70,239,0.12), transparent 60%),
var(--st-bg) !important;
background-attachment: fixed;
position: relative;
}
/* Animated aurora overlay layer (sits behind everything) */
body::before {
content: '';
position: fixed;
inset: -20% -20% -20% -20%;
z-index: -1;
pointer-events: none;
background:
radial-gradient(circle at 20% 20%, rgba(124,58,237,0.20), transparent 35%),
radial-gradient(circle at 80% 25%, rgba(6,182,212,0.18), transparent 35%),
radial-gradient(circle at 60% 80%, rgba(217,70,239,0.16), transparent 35%),
radial-gradient(circle at 25% 75%, rgba(168,85,247,0.16), transparent 35%);
filter: blur(40px);
animation: st-aurora 28s ease-in-out infinite alternate;
}
@keyframes st-aurora {
0% { transform: translate3d(0, 0, 0) scale(1); }
33% { transform: translate3d(2%, -1%, 0) scale(1.05); }
66% { transform: translate3d(-1%, 2%, 0) scale(0.98); }
100% { transform: translate3d(1%, 1%, 0) scale(1.02); }
}
/* Subtle grain overlay for that Stitch texture */
body::after {
content: '';
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0.4;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
}
/* ─── Sidebar — glass + active gradient ──────────────────────────────────── */
.nd-sidebar {
background: rgba(255,255,255,0.65) !important;
backdrop-filter: saturate(180%) blur(20px) !important;
-webkit-backdrop-filter: saturate(180%) blur(20px) !important;
border-right: 1px solid var(--st-border) !important;
box-shadow: 1px 0 0 rgba(255,255,255,0.5) inset;
}
.nd-sidebar-logo .mark {
background: var(--st-grad-primary) !important;
box-shadow: var(--st-glow-violet) !important;
}
.nd-sidebar-status {
background: rgba(255,255,255,0.7) !important;
border: 1px solid var(--st-border) !important;
}
.nd-nav-item {
border-radius: 10px;
margin: 2px 8px;
padding: 10px 12px;
color: var(--st-text-2);
font-weight: 500;
transition: background 200ms cubic-bezier(0.22,1,0.36,1),
color 200ms cubic-bezier(0.22,1,0.36,1),
transform 200ms cubic-bezier(0.22,1,0.36,1);
}
.nd-nav-item:hover {
background: linear-gradient(135deg, rgba(124,58,237,0.08), rgba(6,182,212,0.06));
color: var(--st-text);
transform: translateX(2px);
}
.nd-nav-item.active {
background: linear-gradient(135deg, rgba(124,58,237,0.14), rgba(168,85,247,0.10) 60%, rgba(6,182,212,0.06));
color: var(--st-violet);
font-weight: 600;
box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 4px 12px rgba(124,58,237,0.10);
}
.nd-nav-item.active::before {
content: ''; position: absolute; left: 0; top: 8px; bottom: 8px;
width: 3px; border-radius: 0 3px 3px 0;
background: var(--st-grad-primary);
box-shadow: 0 0 8px rgba(124,58,237,0.6);
}
/* ─── Cards — glass with inner highlight ─────────────────────────────────── */
.nd-card, .card {
background: var(--st-surface) !important;
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border: 1px solid var(--st-border) !important;
border-radius: 16px !important;
box-shadow: var(--st-shadow-glass) !important;
transition: transform 240ms cubic-bezier(0.22,1,0.36,1),
box-shadow 240ms cubic-bezier(0.22,1,0.36,1),
border-color 240ms cubic-bezier(0.22,1,0.36,1) !important;
}
@media (hover: hover) and (min-width: 640px) {
.nd-card:hover, .card:hover {
transform: translateY(-2px) !important;
border-color: var(--st-border-strong) !important;
box-shadow: var(--st-shadow-glass-strong) !important;
}
}
.nd-card-header, .card .card-header {
border-bottom-color: var(--st-border) !important;
}
.nd-card-title, .card .card-title { color: var(--st-text) !important; }
/* ─── Buttons — gradient primary, glass secondary ────────────────────────── */
.nd-btn-primary,
button.primary,
.btn.primary,
.topbar-btn.primary,
.ai-action-btn.primary {
background: var(--st-grad-primary) !important;
border: 1px solid transparent !important;
color: #fff !important;
box-shadow: var(--st-glow-violet) !important;
position: relative;
overflow: hidden;
}
.nd-btn-primary::after,
button.primary::after,
.btn.primary::after,
.topbar-btn.primary::after,
.ai-action-btn.primary::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform 700ms cubic-bezier(0.22,1,0.36,1);
pointer-events: none;
}
.nd-btn-primary:hover::after,
button.primary:hover::after,
.btn.primary:hover::after,
.topbar-btn.primary:hover::after,
.ai-action-btn.primary:hover::after {
transform: translateX(100%);
}
.nd-btn-primary:hover,
button.primary:hover,
.btn.primary:hover,
.topbar-btn.primary:hover,
.ai-action-btn.primary:hover {
background: var(--st-grad-primary-hover) !important;
transform: translateY(-1px);
}
.nd-btn:not(.nd-btn-primary):not(.nd-btn-danger),
.btn, .topbar-btn, .ai-action-btn,
button.secondary {
background: rgba(255,255,255,0.7) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--st-border) !important;
color: var(--st-text) !important;
font-weight: 500;
}
.nd-btn:not(.nd-btn-primary):not(.nd-btn-danger):hover,
.btn:hover, .topbar-btn:hover, .ai-action-btn:hover,
button.secondary:hover {
background: rgba(255,255,255,0.95) !important;
border-color: var(--st-border-strong) !important;
color: var(--st-violet) !important;
}
/* ─── Typography — bolder, fluid ──────────────────────────────────────────── */
.nd-content > h1,
.nd-content > header > h1,
.main > .topbar h1,
.nd-main > .topbar h1 {
font-size: clamp(26px, 3vw + 12px, 38px) !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
background: var(--st-grad-primary);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
line-height: 1.1;
}
.main > .topbar p, .nd-main > .topbar p, .nd-page-subtitle {
font-size: clamp(13px, 0.8vw + 11px, 15px) !important;
color: var(--st-text-2) !important;
}
/* ─── Stat values — bolder + gradient on key ones ────────────────────────── */
.stat-card .stat-value, .nd-stat-value {
font-size: clamp(26px, 2.4vw + 14px, 36px) !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
color: var(--st-text) !important;
}
.stat-card, .nd-stat {
background: var(--st-surface) !important;
backdrop-filter: saturate(180%) blur(14px);
border: 1px solid var(--st-border) !important;
border-radius: 16px !important;
box-shadow: var(--st-shadow-glass) !important;
padding: 22px 24px !important;
}
/* ─── AI bar — alive Stitch hero ─────────────────────────────────────────── */
.ai-bar {
background:
linear-gradient(135deg, rgba(124,58,237,0.10) 0%, rgba(6,182,212,0.06) 60%, rgba(217,70,239,0.06) 100%),
rgba(255,255,255,0.65) !important;
backdrop-filter: saturate(180%) blur(16px) !important;
border: 1px solid var(--st-border) !important;
border-radius: 18px !important;
padding: 22px 24px !important;
box-shadow: var(--st-shadow-glass) !important;
position: relative;
overflow: hidden;
}
.ai-bar::before {
content: '';
position: absolute; inset: -1px auto auto -1px;
width: 240px; height: 240px; border-radius: 50%;
background: radial-gradient(circle, rgba(124,58,237,0.32), transparent 70%);
pointer-events: none;
animation: st-pulse-glow 5s ease-in-out infinite;
}
.ai-bar::after {
content: '';
position: absolute; inset: auto -20px -20px auto;
width: 200px; height: 200px; border-radius: 50%;
background: radial-gradient(circle, rgba(6,182,212,0.22), transparent 70%);
pointer-events: none;
animation: st-pulse-glow 7s ease-in-out infinite alternate;
}
@keyframes st-pulse-glow {
0%, 100% { transform: scale(1); opacity: 0.9; }
50% { transform: scale(1.12); opacity: 1; }
}
.ai-bar-icon {
background: var(--st-grad-primary) !important;
box-shadow: var(--st-glow-violet) !important;
width: 50px !important;
height: 50px !important;
border-radius: 14px !important;
}
.ai-bar-icon svg { width: 24px; height: 24px; }
.ai-bar-title {
font-size: 16px !important;
font-weight: 700 !important;
color: var(--st-text) !important;
letter-spacing: -0.01em;
}
.ai-bar-text {
font-size: 13px !important;
color: var(--st-text-2) !important;
}
/* ─── Trial banner — Stitch dark glow ────────────────────────────────────── */
#trial-banner {
background:
linear-gradient(135deg, #0E0E1F 0%, #1A1033 50%, #0A0A18 100%) !important;
border: 1px solid rgba(124,58,237,0.45) !important;
border-radius: 18px !important;
box-shadow:
0 0 0 1px rgba(124,58,237,0.20) inset,
0 24px 60px rgba(15,15,30,0.20),
0 0 80px rgba(124,58,237,0.20) !important;
position: relative;
overflow: hidden;
}
#trial-banner::before {
content: '';
position: absolute; inset: auto -40px -40px auto;
width: 280px; height: 280px; border-radius: 50%;
background: radial-gradient(circle, rgba(124,58,237,0.42), transparent 70%);
pointer-events: none;
animation: st-pulse-glow 6s ease-in-out infinite;
}
#trial-banner::after {
content: '';
position: absolute; inset: -40px auto auto -40px;
width: 220px; height: 220px; border-radius: 50%;
background: radial-gradient(circle, rgba(6,182,212,0.32), transparent 70%);
pointer-events: none;
animation: st-pulse-glow 8s ease-in-out infinite alternate;
}
#trial-banner > * { position: relative; z-index: 1; }
#trial-banner a {
background: var(--st-grad-primary) !important;
color: #fff !important;
border-radius: 10px;
font-weight: 600;
box-shadow: var(--st-glow-violet);
}
/* ─── Topbar (mobile) — glass + accent ────────────────────────────────────── */
.nd-topbar {
background: rgba(255,255,255,0.72) !important;
backdrop-filter: saturate(180%) blur(20px) !important;
-webkit-backdrop-filter: saturate(180%) blur(20px) !important;
border-bottom: 1px solid var(--st-border) !important;
}
.nd-topbar .nd-topbar-logo {
background: var(--st-grad-primary) !important;
box-shadow: var(--st-glow-violet);
}
.nd-topbar .nd-topbar-title { color: var(--st-text) !important; }
/* ─── Priority Actions card — extra glow ──────────────────────────────────── */
#priority-actions-card {
background:
linear-gradient(135deg, rgba(124,58,237,0.05), rgba(6,182,212,0.03) 60%, rgba(255,255,255,0.6)),
rgba(255,255,255,0.7) !important;
border: 1px solid var(--st-border-strong) !important;
}
#priority-actions-card .card-title { font-size: 14px; font-weight: 700; }
#priority-actions-card .card-title svg { color: var(--st-violet) !important; }
/* ─── Badges with Stitch palette ──────────────────────────────────────────── */
.nd-badge { font-weight: 500; }
.nd-badge-accent {
background: linear-gradient(135deg, rgba(124,58,237,0.14), rgba(168,85,247,0.10)) !important;
color: var(--st-violet) !important;
}
.count {
background: linear-gradient(135deg, rgba(124,58,237,0.14), rgba(6,182,212,0.10)) !important;
color: var(--st-violet) !important;
font-weight: 600;
}
/* ─── Live dot — multi-colour pulse ──────────────────────────────────────── */
.live-dot-inline, .nd-live-dot {
width: 10px !important; height: 10px !important;
background: var(--st-grad-primary) !important;
box-shadow:
0 0 0 0 rgba(124,58,237,0.60),
0 0 12px rgba(124,58,237,0.40);
animation: st-live-pulse 1.8s cubic-bezier(0.22,1,0.36,1) infinite;
}
@keyframes st-live-pulse {
0% { box-shadow: 0 0 0 0 rgba(124,58,237,0.60), 0 0 12px rgba(124,58,237,0.40); }
60% { box-shadow: 0 0 0 12px rgba(124,58,237,0), 0 0 12px rgba(124,58,237,0.40); }
100% { box-shadow: 0 0 0 0 rgba(124,58,237,0), 0 0 12px rgba(124,58,237,0.40); }
}
/* ─── Inputs — glass with gradient focus ─────────────────────────────────── */
.nd-input, .nd-select, .nd-textarea, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], textarea {
background: rgba(255,255,255,0.7) !important;
backdrop-filter: blur(8px);
border: 1px solid var(--st-border) !important;
border-radius: 10px !important;
transition: all 200ms cubic-bezier(0.22,1,0.36,1) !important;
}
.nd-input:focus, .nd-select:focus, .nd-textarea:focus, input:focus, textarea:focus {
border-color: var(--st-violet) !important;
background: rgba(255,255,255,0.95) !important;
box-shadow: 0 0 0 4px rgba(124,58,237,0.18), 0 4px 16px rgba(124,58,237,0.10) !important;
}
/* ─── Login page — full Stitch hero ──────────────────────────────────────── */
body.nd-login-body {
background:
radial-gradient(ellipse 70% 60% at 15% 10%, rgba(124,58,237,0.30), transparent 60%),
radial-gradient(ellipse 60% 50% at 85% 15%, rgba(6,182,212,0.26), transparent 60%),
radial-gradient(ellipse 80% 60% at 50% 100%, rgba(217,70,239,0.20), transparent 60%),
var(--st-bg) !important;
}
.nd-login-body .login-card,
.nd-login-body .nd-login-card {
background: rgba(255,255,255,0.78) !important;
backdrop-filter: saturate(200%) blur(24px) !important;
-webkit-backdrop-filter: saturate(200%) blur(24px) !important;
border: 1px solid rgba(255,255,255,0.6) !important;
border-radius: 22px !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.8) inset,
0 24px 80px rgba(15,15,30,0.16),
0 0 80px rgba(124,58,237,0.12) !important;
}
.nd-login-body .logo-mark {
background: var(--st-grad-primary) !important;
box-shadow: var(--st-glow-violet) !important;
}
/* ─── Notification button — glass ─────────────────────────────────────────── */
.notification-btn {
background: rgba(255,255,255,0.7) !important;
backdrop-filter: blur(8px);
border: 1px solid var(--st-border) !important;
}
.notification-btn:hover { background: rgba(255,255,255,0.95) !important; border-color: var(--st-border-strong) !important; }
.notification-btn .notif-dot { background: var(--st-fuchsia) !important; }
/* ─── Sidebar footer avatar with gradient ─────────────────────────────────── */
.nd-sidebar-footer .avatar {
background: var(--st-grad-primary) !important;
color: #fff !important;
box-shadow: var(--st-glow-violet);
}
/* ─── Empty state v4 ──────────────────────────────────────────────────────── */
.nd-empty-icon {
background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(6,182,212,0.08)) !important;
border: 1px solid var(--st-border-strong) !important;
box-shadow: 0 4px 20px rgba(124,58,237,0.10);
}
/* ─── Toast — Stitch glow ─────────────────────────────────────────────────── */
.nd-toast {
background: linear-gradient(135deg, #0E0E1F 0%, #1A1033 100%) !important;
border: 1px solid rgba(124,58,237,0.4);
box-shadow: 0 12px 32px rgba(124,58,237,0.30) !important;
color: #F5F5F7 !important;
}
.nd-toast .nd-toast-icon { background: var(--st-grad-primary) !important; }
.nd-toast.error .nd-toast-icon { background: var(--st-fuchsia) !important; }
.nd-toast.warning .nd-toast-icon { background: var(--st-amber) !important; }
.nd-toast.info .nd-toast-icon { background: var(--st-cyan) !important; }
/* ─── Reduced motion: kill aurora & pulse ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
body::before { animation: none !important; }
.ai-bar::before, .ai-bar::after,
#trial-banner::before, #trial-banner::after { animation: none !important; }
.live-dot-inline, .nd-live-dot { animation: none !important; }
}
/* ─── Dark mode tweaks for v4 ─────────────────────────────────────────────── */
html.nd-dark {
--st-bg: #0A0A14;
--st-surface: rgba(20,20,32,0.72);
--st-surface-solid: #14141F;
--st-text: #F5F5F7;
--st-text-2: #B0B0BE;
--st-text-3: #7B7B8C;
--st-border: rgba(124,58,237,0.18);
--st-border-strong: rgba(124,58,237,0.32);
}
html.nd-dark body {
background:
radial-gradient(ellipse 60% 50% at 12% 10%, rgba(124,58,237,0.30), transparent 60%),
radial-gradient(ellipse 50% 40% at 88% 8%, rgba(6,182,212,0.24), transparent 60%),
radial-gradient(ellipse 70% 60% at 50% 100%, rgba(217,70,239,0.20), transparent 60%),
var(--st-bg) !important;
}
html.nd-dark .nd-card,
html.nd-dark .card,
html.nd-dark .stat-card,
html.nd-dark .nd-stat,
html.nd-dark .ai-bar,
html.nd-dark #priority-actions-card { background: rgba(20,20,32,0.72) !important; }
html.nd-dark .nd-sidebar { background: rgba(14,14,24,0.72) !important; }
html.nd-dark .nd-sidebar-logo,
html.nd-dark .nd-sidebar-logo span,
html.nd-dark .nd-sidebar-status,
html.nd-dark .nd-nav-item,
html.nd-dark .nd-sidebar-footer .name { color: #F5F5F7 !important; }
html.nd-dark .nd-nav-item.active { color: #C4B5FD !important; }
html.nd-dark .nd-sidebar-footer .role { color: #B0B0BE !important; }
html.nd-dark .nd-topbar { background: rgba(14,14,24,0.78) !important; }
html.nd-dark .nd-btn:not(.nd-btn-primary):not(.nd-btn-danger),
html.nd-dark .btn,
html.nd-dark .topbar-btn,
html.nd-dark .ai-action-btn,
html.nd-dark button.secondary,
html.nd-dark .notification-btn,
html.nd-dark .nd-input,
html.nd-dark input,
html.nd-dark textarea { background: rgba(20,20,32,0.7) !important; color: var(--st-text) !important; }
/* ═══════════════════════════════════════════════════════════════════════════════
* END v4 STITCH LAYER
* ═══════════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════════
* NOOR DESIGN v4.1 — CONTENT HIERARCHY + ICON MODERNIZATION (2026-04-07)
* Goal: reorder Command Center so Priority Actions dominates the top,
* modernize icons and typography, improve per-card hierarchy.
* ═══════════════════════════════════════════════════════════════════════════════ */
/* ─── Command Center content order (CSS-only reorder) ────────────────────── */
body:has(#priority-actions-card) .nd-content {
display: flex;
flex-direction: column;
}
/* Default catch-all so unordered children don't leapfrog ordered ones */
body:has(#priority-actions-card) .nd-content > * { order: 9; }
body:has(#priority-actions-card) .nd-content > script { order: -1; }
body:has(#priority-actions-card) .nd-content > #trial-banner { order: 1; margin-bottom: 16px; }
body:has(#priority-actions-card) .nd-content > #priority-actions-card {
order: 2;
margin-top: 0 !important;
margin-bottom: 16px;
}
body:has(#priority-actions-card) .nd-content > .stats-row { order: 3; margin-bottom: 16px; }
body:has(#priority-actions-card) .nd-content > .ai-bar { order: 4; margin-top: 0; margin-bottom: 16px; }
body:has(#priority-actions-card) .nd-content > #money-pressure-section { order: 5; margin-bottom: 16px; }
body:has(#priority-actions-card) .nd-content > .grid-2-1,
body:has(#priority-actions-card) .nd-content > .grid-2 { order: 6; margin-bottom: 16px; }
body:has(#priority-actions-card) .nd-content > #problems-section { order: 7; margin-bottom: 16px; }
body:has(#priority-actions-card) .nd-content > .card { order: 8; }
/* ─── Priority Actions emphasis ──────────────────────────────────────────── */
#priority-actions-card {
background:
linear-gradient(135deg, rgba(124,58,237,0.10), rgba(6,182,212,0.05) 50%, rgba(255,255,255,0.75)),
rgba(255,255,255,0.88) !important;
border: 1px solid rgba(124,58,237,0.24) !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.7) inset,
0 12px 44px rgba(124,58,237,0.12),
0 4px 14px rgba(15,15,30,0.06) !important;
}
#priority-actions-card .card-header { padding: 18px 22px !important; }
#priority-actions-card .card-title { font-size: 14px !important; font-weight: 700 !important; }
#priority-actions-card .card-title svg {
width: 20px !important; height: 20px !important;
color: var(--st-violet) !important;
stroke-width: 2 !important;
}
/* ─── Stats row hierarchy ────────────────────────────────────────────────── */
.stats-row .stat-card { padding: 22px 24px !important; }
.stats-row .stat-card .stat-label {
font-size: 11px !important;
font-weight: 600 !important;
color: var(--st-text-3) !important;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 8px;
}
.stats-row .stat-card .stat-value {
display: flex; align-items: baseline; gap: 10px;
font-size: clamp(28px, 2.4vw + 14px, 36px) !important;
font-weight: 700 !important;
line-height: 1.1 !important;
color: var(--st-text) !important;
}
.stat-indicator {
width: 8px !important; height: 8px !important;
border-radius: 50%;
background: var(--st-grad-primary) !important;
box-shadow: 0 0 0 3px rgba(124,58,237,0.08);
flex-shrink: 0;
}
.stat-indicator.green { background: var(--st-emerald) !important; box-shadow: 0 0 0 3px rgba(16,185,129,0.12); }
.stat-indicator.amber { background: var(--st-amber) !important; box-shadow: 0 0 0 3px rgba(245,158,11,0.12); }
.stat-indicator.red { background: var(--st-fuchsia) !important; box-shadow: 0 0 0 3px rgba(217,70,239,0.12); }
/* ─── Icon modernization ──────────────────────────────────────────────────── */
svg.lucide,
i[data-lucide] svg,
.lucide {
stroke-width: 1.75 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
.card .card-title svg, .nd-card-title svg { width: 20px !important; height: 20px !important; color: var(--st-violet); }
.ai-bar .ai-bar-icon svg { width: 24px !important; height: 24px !important; }
.nd-nav-item svg { width: 18px !important; height: 18px !important; stroke-width: 1.75 !important; }
.nd-topbar-burger svg { stroke-width: 2.25 !important; }
.nd-nav-item svg { transition: color 180ms ease, transform 240ms cubic-bezier(0.22,1,0.36,1); color: var(--st-text-3); }
.nd-nav-item:hover svg { color: var(--st-violet); transform: scale(1.08); }
.nd-nav-item.active svg { color: var(--st-violet); }
.card-header .card-actions svg, .card-action svg { color: var(--st-text-3); }
.card-action { transition: all 180ms cubic-bezier(0.22,1,0.36,1); cursor: pointer; border-radius: 8px; padding: 6px; }
.card-action:hover { background: rgba(124,58,237,0.10); }
.card-action:hover svg { color: var(--st-violet); }
/* ─── AI Command Bar — demote title, promote brief text ──────────────────── */
.ai-bar-title {
font-size: 11px !important;
font-weight: 700 !important;
color: var(--st-text-3) !important;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.ai-bar-text {
font-size: 15px !important;
color: var(--st-text) !important;
font-weight: 500;
margin-top: 6px;
line-height: 1.5;
}
.typing-indicator span {
background: var(--st-violet) !important;
box-shadow: 0 0 8px rgba(124,58,237,0.4);
}
/* ─── Trial banner — clearer hierarchy for numbers ───────────────────────── */
#trial-banner #trial-title {
font-size: 15px !important; font-weight: 700 !important;
color: #F5F5F7 !important; letter-spacing: -0.005em;
}
#trial-banner #trial-subtitle {
font-size: 12px !important;
color: rgba(196,181,253,0.85) !important;
}
#trial-banner #trial-days {
color: #fff !important;
font-weight: 800 !important;
font-size: 34px !important;
line-height: 1;
letter-spacing: -0.02em;
}
/* ─── Fake legacy sparkline / mini chart removal ─────────────────────────── */
.mini-chart-bars, .chart-mini, .sparkline-fake { display: none !important; }
/* ─── Login page content hierarchy ────────────────────────────────────────── */
.nd-login-body .logo-section { text-align: center; margin-bottom: 28px; }
.nd-login-body .logo-section h1,
.nd-login-body .logo-section h2 {
font-size: clamp(26px, 2.5vw + 14px, 34px) !important;
font-weight: 700 !important;
letter-spacing: -0.02em;
background: var(--st-grad-primary);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
margin: 0 0 6px;
}
.nd-login-body .logo-section p {
color: var(--st-text-3) !important;
font-size: 14px;
}
.nd-login-body label, .nd-login-body .form-label {
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--st-text-3) !important;
margin-bottom: 6px;
}
/* ─── Section headings across all pages ──────────────────────────────────── */
.section-title, .settings-nav-title, .settings-section-title {
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
color: var(--st-text-3) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════════
* END v4.1 HIERARCHY + ICONS
* ═══════════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════════
* NOOR DESIGN v4.2 — RESPONSIVE PERFECTION (2026-04-07)
*
* Evidence-based fix pass. DOM probe at 375px showed:
* • command-center: topbar (.topbar-left/.topbar-right), .ai-bar-actions,
* .qa-btn, h1, p all overflowing
* • conversations: 13 breaks in .topbar-btn, .chat-header-right, .chat-action-btn
* • settings: 85 breaks — settings-layout grid, channel-card, setting-card,
* all fixed-width flex rows
* • products: 1 break (.ticker-message marquee — intentional)
*
* This layer FIXES every one of the real breaks by forcing:
* - flex-wrap on every horizontal row at ≤ 1023px
* - grid → single-column under the settings sidebar breakpoint
* - max-width: 100% and min-width: 0 on all potentially-overflowing children
* - box-sizing: border-box everywhere
* - word-break on long strings
* ═══════════════════════════════════════════════════════════════════════════════ */
/* ─── Global defensive box-sizing + overflow guards ──────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; }
.nd-content, .nd-main { min-width: 0; max-width: 100%; }
/* Defensive: any column-direction flex container must never wrap.
Wrapping a column creates parallel columns that overflow horizontally. */
[style*="flex-direction: column"],
[style*="flex-direction:column"] { flex-wrap: nowrap; }
/* Any image or media cannot force the container wider than viewport */
img, video, canvas, svg, iframe {
max-width: 100%;
height: auto;
}
/* Long text never forces overflow */
.nd-content h1,
.nd-content h2,
.nd-content h3,
.nd-content p,
.card-title,
.ai-bar-title,
.ai-bar-text,
.stat-label,
.channel-card-name,
.setting-card-title {
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
/* ─── Mobile ≤ 640px: wrap every horizontal flex row ─────────────────────── */
@media (max-width: 640px) {
/* Universal wrap + min-width:0 on flex containers so children can shrink */
.nd-content, .nd-content > *,
.main, .main > .topbar,
.topbar, .topbar-left, .topbar-right,
.ai-bar, .ai-bar-content, .ai-bar-actions,
.card-header, .card-actions,
.chat-header, .chat-header-left, .chat-header-right,
.settings-layout, .setting-card, .setting-card-body,
.channel-card, .channel-card-header, .channel-card-left,
.stats-row, .grid-2, .grid-3, .grid-4, .grid-2-1,
.nd-grid, .nd-grid-2, .nd-grid-3, .nd-grid-4, .nd-grid-2-1 {
min-width: 0 !important;
max-width: 100% !important;
}
/* Force every flex row to wrap on mobile */
.topbar, .main > .topbar,
.topbar-left, .topbar-right,
.ai-bar, .ai-bar-actions,
.card-header, .card-actions,
.chat-header, .chat-header-right,
.channel-card-header, .channel-card-left,
.settings-layout {
flex-wrap: wrap !important;
row-gap: 10px !important;
}
/* Topbar (page-level) — stack cleanly */
.main > .topbar, .nd-main > .topbar {
flex-direction: column !important;
align-items: stretch !important;
padding: 14px 16px !important;
}
.main > .topbar .topbar-left,
.main > .topbar .topbar-right { width: 100% !important; }
.main > .topbar .topbar-right {
justify-content: flex-start !important;
gap: 8px;
flex-wrap: wrap !important;
}
.main > .topbar h1, .nd-main > .topbar h1 {
font-size: clamp(22px, 6vw + 4px, 28px) !important;
line-height: 1.2 !important;
}
.main > .topbar p, .nd-main > .topbar p { font-size: 13px !important; }
/* AI bar — stack vertically, center actions */
.ai-bar {
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
padding: 18px !important;
gap: 14px !important;
}
.ai-bar-content {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex: 0 0 auto !important;
}
.ai-bar-title, .ai-bar-text {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
word-break: break-word;
}
.ai-bar-actions {
width: 100% !important;
max-width: 100% !important;
flex-wrap: wrap !important;
flex: 0 0 auto !important;
}
.ai-bar-actions .ai-action-btn { flex: 1 1 120px; min-width: 0; }
/* Settings two-column layout collapses to one */
.settings-layout {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
gap: 16px;
width: 100% !important;
max-width: 100% !important;
}
.settings-content {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex: 0 0 auto !important;
}
.setting-card {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
.setting-card-header, .setting-card-body {
flex-wrap: wrap !important;
min-width: 0 !important;
}
.setting-card-title, .setting-card-desc { min-width: 0 !important; word-break: break-word; }
.settings-nav {
width: 100% !important;
position: static !important;
max-height: none !important;
overflow: visible !important;
}
.settings-nav-items,
.settings-nav > div:not(.settings-nav-title) {
display: flex; flex-wrap: wrap; gap: 6px;
}
.settings-nav-item {
flex: 0 0 auto !important;
padding: 8px 14px !important;
}
.settings-content { width: 100% !important; }
/* Channel cards and setting cards — stack rows */
.channels-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
width: 100% !important;
}
.channel-card, .setting-card {
padding: 16px !important;
width: 100% !important;
min-width: 0 !important;
}
.channel-card-header {
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: flex-start !important;
gap: 10px !important;
}
.channel-card-stats, .channel-stats {
width: 100% !important;
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 8px !important;
}
.channel-stat { min-width: 0 !important; }
/* Chat / conversations header — stack actions */
.chat-header {
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
}
.chat-header-right {
justify-content: flex-start !important;
flex-wrap: wrap !important;
gap: 6px !important;
}
.chat-action-btn { flex: 0 0 auto; }
/* Topbar chips (EN/AR/TR, search, notifications, Ask Noor AI) — scroll horizontally */
.topbar-right {
flex-wrap: wrap !important;
gap: 6px !important;
}
.topbar-btn { font-size: 12px !important; padding: 0 10px !important; height: 36px !important; }
.topbar-btn i, .topbar-btn svg { width: 14px !important; height: 14px !important; }
/* QA / debug chips — hide entirely on mobile */
.qa-btn, .qa-chip, .debug-chip { display: none !important; }
/* Ticker scroll — hide on mobile to stop horizontal overflow */
.ticker, .ticker-message { display: none !important; }
/* Stat cards — reduce padding on mobile */
.stats-row .stat-card, .stat-card { padding: 16px 18px !important; }
.stats-row .stat-card .stat-value { font-size: 26px !important; }
/* Trial banner — stack the days column below the title */
#trial-banner {
flex-direction: column !important;
align-items: stretch !important;
gap: 12px !important;
padding: 16px 18px !important;
}
#trial-banner #trial-days { font-size: 28px !important; }
/* Priority Actions rows — stack the CTA button below */
#priority-actions-body > div > div {
flex-wrap: wrap !important;
}
#priority-actions-body .nd-btn { flex: 0 0 auto; }
#priority-actions-body > div > div > div:nth-child(2) {
flex: 1 1 200px !important;
min-width: 0 !important;
}
/* Login page — card margins and padding */
.nd-login-body .login-card,
.nd-login-body .nd-login-card {
margin: 16px !important;
padding: 24px !important;
border-radius: 18px !important;
}
/* Data tables — responsive card list view on mobile.
Convert each row into a stacked card where cells become labeled lines.
Drop decorative columns (permissions, actions) in favour of a single
action button. */
table {
display: block !important;
width: 100% !important;
max-width: 100% !important;
border-collapse: collapse;
}
table thead { display: none !important; }
table tbody { display: block !important; width: 100% !important; }
table tr {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
gap: 6px;
padding: 14px 16px !important;
background: rgba(255,255,255,0.7) !important;
border: 1px solid var(--st-border) !important;
border-radius: 14px !important;
margin-bottom: 10px;
box-shadow: var(--st-shadow-glass);
}
table tr:hover { border-color: var(--st-border-strong) !important; }
table td {
display: flex !important;
align-items: center;
gap: 8px;
padding: 2px 0 !important;
border: none !important;
white-space: normal !important;
min-width: 0 !important;
max-width: 100% !important;
font-size: 13px;
}
table td > * { min-width: 0; max-width: 100%; }
/* First cell (name) becomes a header */
table tr td:first-child {
font-weight: 700;
font-size: 14px;
color: var(--st-text);
padding-bottom: 6px !important;
border-bottom: 1px solid var(--st-border) !important;
margin-bottom: 6px;
width: 100%;
}
/* Hide known-decorative columns that don't fit the card view */
table tr td.actions-cell {
justify-content: flex-start;
flex-wrap: wrap;
gap: 6px;
}
.permissions-tags { flex-wrap: wrap !important; gap: 4px !important; }
.table-wrapper, .data-table {
overflow-x: visible !important;
width: 100% !important;
max-width: 100% !important;
}
/* Lead detail — timeline grid collapses to single column */
.timeline-layout, .lead-layout, .lead-grid, .detail-layout {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
gap: 14px;
width: 100% !important;
max-width: 100% !important;
}
.timeline-sidebar, .lead-sidebar, .timeline-main, .lead-main,
.timeline-body, .timeline-content, .timeline-header {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
.timeline-tabs {
flex-wrap: wrap !important;
gap: 6px;
width: 100% !important;
}
.timeline-tab { flex: 0 0 auto; }
.timeline-content-header {
flex-direction: column !important;
align-items: flex-start !important;
gap: 10px;
}
/* Any generic 2-col layout used by legacy pages */
.two-col, .split-layout, .lead-split {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
gap: 14px;
}
.two-col > *, .split-layout > *, .lead-split > * {
width: 100% !important;
min-width: 0 !important;
}
}
/* ─── Tablet 641-1023: two-column grids still, but tighten spacing ──────── */
@media (min-width: 641px) and (max-width: 1023px) {
.settings-layout {
display: grid !important;
grid-template-columns: 220px 1fr !important;
gap: 20px !important;
}
.main > .topbar, .nd-main > .topbar {
flex-wrap: wrap !important;
gap: 12px;
}
.main > .topbar .topbar-right { flex-wrap: wrap; gap: 8px; }
.channel-card-stats { grid-template-columns: repeat(4, 1fr); }
}
/* ─── Desktop ≥ 1024: enforce consistent max content width + gutters ────── */
@media (min-width: 1024px) {
.nd-content { max-width: 1600px; margin-left: auto; margin-right: auto; }
}
/* ─── Card header: prevent long titles from pushing actions off-row ──────── */
.card .card-header, .nd-card-header {
min-width: 0;
gap: 12px;
}
.card .card-title, .nd-card-title {
min-width: 0;
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ─── AI bar icon shouldn't shrink ───────────────────────────────────────── */
.ai-bar-icon { flex-shrink: 0; }
/* ─── Every button inside the AI bar gets a clean min size ───────────────── */
.ai-bar .ai-action-btn {
padding: 0 16px;
height: 38px;
font-size: 13px;
}
/* ─── Priority Actions row hierarchy on all viewports ────────────────────── */
#priority-actions-body > div {
display: flex;
flex-direction: column;
}
#priority-actions-body > div > div {
min-width: 0;
}
/* ─── Stats row — prevent number+label collision on narrow viewports ─────── */
.stats-row .stat-card > div:first-child { min-width: 0; flex: 1 1 auto; }
/* ─── Loading skeletons — cap width so long ones don't overflow ──────────── */
.nd-skeleton { max-width: 100%; }
/* ─── Tooltips and floating menus — clamp to viewport ────────────────────── */
.nd-tooltip, .tooltip, .dropdown-menu, .nd-branch-dropdown {
max-width: calc(100vw - 32px);
overflow-x: hidden;
}
/* ─── Visual consistency pass ────────────────────────────────────────────── */
/* Every card gets the same hover state */
.card, .nd-card { cursor: default; }
.card[onclick], .card[data-href] { cursor: pointer; }
/* Every link hover is violet */
a:not(.nd-nav-item):not(.nd-btn):not(.btn):hover {
color: var(--st-violet);
}
/* Every form field gets the same focus treatment — inherited from v4 */
select, input[type="date"], input[type="number"], input[type="search"] {
background: rgba(255,255,255,0.7) !important;
border: 1px solid var(--st-border) !important;
border-radius: 10px !important;
padding: 8px 12px !important;
font: inherit;
color: var(--st-text) !important;
transition: all 200ms cubic-bezier(0.22,1,0.36,1) !important;
}
select:focus, input[type="date"]:focus, input[type="number"]:focus, input[type="search"]:focus {
border-color: var(--st-violet) !important;
box-shadow: 0 0 0 4px rgba(124,58,237,0.18) !important;
outline: none !important;
}
/* ─── Dark mode: ensure every text element inherits dark colours ─────────── */
html.nd-dark, html.nd-dark body,
html.nd-dark .nd-content,
html.nd-dark .card, html.nd-dark .card *,
html.nd-dark .stat-card, html.nd-dark .stat-card *,
html.nd-dark p, html.nd-dark h1, html.nd-dark h2, html.nd-dark h3, html.nd-dark h4, html.nd-dark span, html.nd-dark div {
color: var(--st-text);
}
html.nd-dark .stat-label, html.nd-dark .card-title { color: var(--st-text-2) !important; }
html.nd-dark .ai-bar-title, html.nd-dark .section-title, html.nd-dark .settings-nav-title { color: var(--st-text-3) !important; }
html.nd-dark .nd-content > h1,
html.nd-dark .main > .topbar h1 {
-webkit-text-fill-color: transparent;
background: var(--st-grad-primary);
-webkit-background-clip: text;
background-clip: text;
}
html.nd-dark .main > .topbar p { color: var(--st-text-2) !important; }
/* ═══════════════════════════════════════════════════════════════════════════════
* END v4.2 RESPONSIVE PERFECTION
* ═══════════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════════
* NOOR DESIGN v4.3 — DEEP QA FIXES (2026-04-07)
*
* Three user-reported issues, live-probed and root-caused:
* 1. Gradient h1 text clipped top/bottom (line-height 41.8 for 38px font
* cuts glyph paint + descenders) — widen line-height + add padding
* 2. Sidebar logo "mark" shrinking from 30px → 12px because of
* flex-shrink:1 + the language toggle pill eating the row width
* — pin mark with flex-shrink:0, move lang pills out of the logo row
* 3. EN/AR/TR pills invisible on light sidebar because v2 styled them
* white-on-transparent — restyle as proper Stitch segmented control
* 4. Modernize the remaining legacy icons that look "plain outlined":
* upgrade stroke to 2.0 on key hero icons, enlarge AI bar + trial
* banner + priority card icons, add gradient tint
* ═══════════════════════════════════════════════════════════════════════════════ */
/* ─── 1. Gradient h1 — never clip top/bottom ──────────────────────────────── */
.nd-content h1,
.nd-content > h1,
.main > .topbar h1,
.nd-main > .topbar h1,
h1.gradient-heading {
line-height: 1.25 !important;
padding: 0.1em 0 0.15em 0 !important;
/* Safari sometimes clips gradient-text descenders; this pads the line box. */
display: inline-block !important;
max-width: 100%;
}
/* Page header container — ensure it can grow */
.main > .topbar .topbar-left,
.nd-main > .topbar .topbar-left { min-width: 0; flex: 1 1 auto; }
/* ─── 2. Sidebar logo — pin the mark, wrap lang under it ─────────────────── */
.nd-sidebar-logo {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 12px !important;
padding: 28px 20px 16px !important;
}
.nd-sidebar-logo .mark {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
flex-shrink: 0 !important;
font-size: 14px !important;
font-weight: 800 !important;
border-radius: 10px !important;
background: var(--st-grad-primary) !important;
box-shadow: var(--st-glow-violet) !important;
color: #fff !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.nd-sidebar-logo > span {
flex: 1 1 auto !important;
min-width: 0 !important;
font-size: 15px !important;
font-weight: 700 !important;
color: var(--st-text) !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: -0.01em;
}
/* The language toggle container dropped out of the logo row onto its own line */
.nd-sidebar-logo #noor-lang-toggle,
.nd-sidebar-logo > div:last-child {
flex: 1 1 100% !important;
margin-left: 0 !important;
margin-top: 4px !important;
order: 10;
}
/* ─── 3. Language toggle — Stitch segmented control ──────────────────────── */
#noor-lang-toggle, .lang-switch, .language-switcher {
display: inline-flex !important;
align-items: center !important;
gap: 2px !important;
padding: 3px !important;
background: rgba(124,58,237,0.08) !important;
border: 1px solid var(--st-border) !important;
border-radius: 10px !important;
}
.lang-opt, #noor-lang-toggle > div, .lang-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 28px !important;
min-width: 34px !important;
padding: 0 10px !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
color: var(--st-text-2) !important;
background: transparent !important;
border: none !important;
border-radius: 7px !important;
cursor: pointer !important;
transition: all 160ms cubic-bezier(0.22,1,0.36,1) !important;
text-transform: uppercase;
}
.lang-opt:hover, #noor-lang-toggle > div:hover, .lang-btn:hover {
color: var(--st-violet) !important;
background: rgba(255,255,255,0.6) !important;
}
.lang-opt.active, #noor-lang-toggle > div.active, .lang-btn.active {
color: #fff !important;
background: var(--st-grad-primary) !important;
box-shadow: 0 2px 8px rgba(124,58,237,0.30) !important;
}
/* Topbar language chips (on page topbar) — same look */
.topbar .lang-switch, .topbar-left .lang-switch,
.topbar-right .lang-switch { margin-left: auto; }
/* ─── 4. Icon modernization — hero icons get strong stroke + size ────────── */
/* Brain icon (AI bar), Clock icon (trial banner), Target (priority), Sparkles (Ask Noor AI) */
.ai-bar-icon svg,
.ai-bar-icon i[data-lucide] svg {
width: 26px !important;
height: 26px !important;
stroke-width: 2 !important;
color: #fff !important;
}
#trial-banner svg, #trial-banner i[data-lucide] svg {
stroke-width: 2 !important;
}
#trial-banner [id="trial-title"] + * svg,
#trial-banner > div > div > svg,
#trial-banner [data-lucide="clock"] ~ * svg { color: #C4B5FD !important; }
/* Priority Actions title icon */
#priority-actions-card .card-title svg {
width: 22px !important;
height: 22px !important;
stroke-width: 2 !important;
color: var(--st-violet) !important;
}
/* Card title icons — accent gradient-friendly colour */
.card .card-title svg,
.nd-card-title svg {
width: 20px !important;
height: 20px !important;
stroke-width: 1.9 !important;
color: var(--st-violet);
}
/* Nav icons — bolder */
.nd-nav-item svg {
width: 20px !important;
height: 20px !important;
stroke-width: 1.9 !important;
}
.nd-nav-item.active svg {
color: var(--st-violet) !important;
filter: drop-shadow(0 2px 6px rgba(124,58,237,0.35));
}
/* Topbar right-side icons (search, bell, sparkles) */
.topbar-btn svg, .topbar-btn i[data-lucide] svg {
width: 16px !important;
height: 16px !important;
stroke-width: 2 !important;
}
.topbar-btn.primary svg { color: #fff !important; }
/* Notification bell — stronger */
.notification-btn svg, .notification-btn i[data-lucide] svg {
width: 18px !important;
height: 18px !important;
stroke-width: 2 !important;
}
/* ─── Stat card icons — add dedicated icon slot if present ───────────────── */
.stat-card .stat-icon,
.stat-card > svg:first-child,
.stat-card > i[data-lucide]:first-child svg {
width: 22px !important;
height: 22px !important;
color: var(--st-violet) !important;
stroke-width: 2 !important;
}
/* ─── AI bar icon tile — bigger + gradient + stronger glow ───────────────── */
.ai-bar-icon {
width: 54px !important;
height: 54px !important;
border-radius: 15px !important;
background: var(--st-grad-primary) !important;
box-shadow: 0 16px 40px rgba(124,58,237,0.38), 0 4px 12px rgba(124,58,237,0.22) !important;
position: relative;
overflow: hidden;
}
.ai-bar-icon::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.25), transparent 50%);
pointer-events: none;
}
/* ─── Trial banner clock icon tile ───────────────────────────────────────── */
#trial-banner > div:first-child > div:first-child,
#trial-banner div[style*="background:rgba(59,130,246,0.2)"] {
width: 46px !important;
height: 46px !important;
border-radius: 13px !important;
background: linear-gradient(135deg, rgba(124,58,237,0.35), rgba(168,85,247,0.25)) !important;
border: 1px solid rgba(196,181,253,0.35);
box-shadow: 0 8px 24px rgba(124,58,237,0.30);
flex-shrink: 0 !important;
display: flex;
align-items: center;
justify-content: center;
}
#trial-banner svg[data-lucide="clock"],
#trial-banner i[data-lucide="clock"] svg {
width: 22px !important;
height: 22px !important;
color: #DDD6FE !important;
stroke-width: 2 !important;
}
/* ─── Stats row card value layout — horizontal row with icon ─────────────── */
.stat-card > div:first-child {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 2px;
min-width: 0;
flex: 1 1 auto;
}
.stat-card .stat-value {
display: flex !important;
align-items: baseline !important;
gap: 10px !important;
flex-wrap: nowrap !important;
white-space: nowrap;
}
.stat-card .stat-value > span:last-child {
font-size: inherit !important;
font-weight: inherit !important;
}
/* ─── Force stat cards to be HORIZONTAL rows on all sizes ≥ 640px ────────── */
@media (min-width: 640px) {
.stat-card, .nd-stat {
flex-direction: row !important;
align-items: flex-start !important;
justify-content: space-between !important;
}
}
/* On mobile, stat cards stack icon above value */
@media (max-width: 639px) {
.stat-card, .nd-stat {
flex-direction: column !important;
align-items: flex-start !important;
gap: 6px;
}
.stat-card .stat-value { font-size: 24px !important; }
}
/* ─── Live dot — visible against glass ───────────────────────────────────── */
.live-dot-inline, .nd-live-dot {
width: 8px !important;
height: 8px !important;
min-width: 8px !important;
flex-shrink: 0 !important;
background: #10B981 !important;
box-shadow: 0 0 0 3px rgba(16,185,129,0.22), 0 0 12px rgba(16,185,129,0.55) !important;
animation: st-live-pulse 1.8s cubic-bezier(0.22,1,0.36,1) infinite;
}
/* ─── Ensure the h1 container can grow vertically on tight layouts ──────── */
.main > .topbar, .nd-main > .topbar {
min-height: unset !important;
align-items: flex-start;
}
/* Dark-mode sidebar logo text colour */
html.nd-dark .nd-sidebar-logo > span { color: #F5F5F7 !important; }
/* ═══════════════════════════════════════════════════════════════════════════════
* END v4.3 DEEP QA FIXES
* ═══════════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════════
* NOOR DESIGN v4.4 — TRIAL BANNER + AI BAR COLLAPSE FIX (2026-04-07)
*
* User reported: trial banner "Free Trial" and AI bar "Noor AI Morning Brief"
* text is cut off at top/bottom inside the colored pill.
*
* Root cause (confirmed via live DOM probe):
* • .ai-bar content height = 65px but container height = 37px
* • #trial-banner content height = 60px but container height = 33px
* • Both containers have overflow: hidden (from v4 rule for ::before glow blob)
* • Both are flex items inside .nd-content {flex-direction:column} and refuse
* to grow past their explicit ~40px baseline height
*
* Fix: force both containers to hug their content regardless of parent flex:
* - flex: 0 0 auto
* - height: auto
* - min-height: fit-content
* - overflow: visible on the container, moved the ::before clip to its own
* child wrapper
* ═══════════════════════════════════════════════════════════════════════════════ */
.ai-bar {
flex: 0 0 auto !important;
height: auto !important;
min-height: 90px !important;
overflow: hidden !important; /* keep the glow blob contained */
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 18px !important;
padding: 22px 24px !important;
}
.ai-bar-content {
flex: 1 1 auto !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
min-height: 46px !important;
}
.ai-bar-actions { flex-shrink: 0 !important; }
#trial-banner {
flex: 0 0 auto !important;
height: auto !important;
min-height: 82px !important;
overflow: hidden !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px !important;
padding: 18px 22px !important;
}
#trial-banner > div {
min-width: 0;
}
#trial-banner > div:first-child {
display: flex !important;
align-items: center !important;
gap: 14px !important;
flex: 1 1 auto !important;
min-width: 0 !important;
}
#trial-banner > div:last-child {
display: flex !important;
align-items: center !important;
gap: 16px !important;
flex-shrink: 0 !important;
}
#trial-banner > div:last-child > div:first-child {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
min-width: 50px;
}
/* Mobile: stack the trial banner vertically */
@media (max-width: 640px) {
#trial-banner {
flex-direction: column !important;
align-items: stretch !important;
padding: 16px 18px !important;
min-height: 110px !important;
}
#trial-banner > div:last-child {
justify-content: space-between !important;
}
.ai-bar {
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
min-height: 140px !important;
padding: 18px !important;
}
.ai-bar-content { min-width: 0; width: 100%; }
.ai-bar-actions {
width: 100% !important;
flex-wrap: wrap !important;
}
}
/* Restore proper trial title / subtitle hierarchy */
#trial-banner #trial-title {
font-size: 15px !important;
font-weight: 700 !important;
color: #F5F5F7 !important;
letter-spacing: -0.005em;
line-height: 1.3 !important;
margin: 0 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#trial-banner #trial-subtitle {
font-size: 12px !important;
color: rgba(196,181,253,0.88) !important;
line-height: 1.4 !important;
margin-top: 2px !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#trial-banner #trial-days {
font-size: 30px !important;
font-weight: 800 !important;
color: #fff !important;
line-height: 1 !important;
letter-spacing: -0.02em;
}
/* AI bar title + text hierarchy (row layout restored) */
.ai-bar-title {
font-size: 11px !important;
font-weight: 700 !important;
color: rgba(75,75,92,0.75) !important;
text-transform: uppercase;
letter-spacing: 0.1em;
margin: 0 !important;
line-height: 1.3 !important;
display: flex !important;
align-items: center;
gap: 8px;
}
.ai-bar-text {
font-size: 15px !important;
font-weight: 500 !important;
color: var(--st-text) !important;
line-height: 1.4 !important;
margin: 4px 0 0 0 !important;
}
html.nd-dark .ai-bar-title { color: rgba(196,181,253,0.75) !important; }
/* ═══════════════════════════════════════════════════════════════════════════════
* END v4.4 COLLAPSE FIX
* ═══════════════════════════════════════════════════════════════════════════════ */