/* ========================================================================== Neolina CRM — shared stylesheet Design tokens + login screen + app shell (sidebar/topbar/cards/tables) Reused across every page in /pages/. Keep this as the single source of truth for colors/spacing so the whole app stays visually consistent. DESIGN SYSTEM v2 (Phase 2) — inspired by Linear/Stripe/Notion/Vercel/Arc. Philosophy: near-black surfaces, hairline borders, ONE restrained accent color used only where it means something, confident typography, motion that explains rather than decorates. See design-mockups/ for the approved visual direction this implements. ========================================================================== */ @font-face{font-family:'Inter'; src:url('../fonts/Inter-Regular.woff2') format('woff2'); font-weight:400; font-display:swap;} @font-face{font-family:'Inter'; src:url('../fonts/Inter-Medium.woff2') format('woff2'); font-weight:500; font-display:swap;} @font-face{font-family:'Inter'; src:url('../fonts/Inter-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap;} @font-face{font-family:'Inter'; src:url('../fonts/Inter-Bold.woff2') format('woff2'); font-weight:700; font-display:swap;} @font-face{font-family:'Inter'; src:url('../fonts/Inter-ExtraBold.woff2') format('woff2'); font-weight:800; font-display:swap;} @font-face{font-family:'JetBrains Mono'; src:url('../fonts/JetBrainsMono-Medium.woff2') format('woff2'); font-weight:500; font-display:swap;} @font-face{font-family:'JetBrains Mono'; src:url('../fonts/JetBrainsMono-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap;} :root{ /* ---------- Surface layers (near-black, not navy) ---------- */ --navy-deep:#08090C; --navy-elev:#14171D; --navy-elev-2:#1B1E26; /* ---------- The ONE accent — used sparingly, on purpose ---------- */ --teal:#14B8A6; --teal-glow:#5EEAD4; --white:#F4F5F7; --muted:#9497A3; --amber:#FBBF24; --rose:#F87171; --emerald:#34D399; /* ---------- Hairline-first borders (almost invisible at rest) ---------- */ --border:rgba(255,255,255,0.07); --border-hi:rgba(94,234,212,0.35); --nav-active-bg:rgba(94,234,212,0.1); --bg:var(--navy-deep); --surface:var(--navy-elev); --surface2:var(--navy-elev-2); --text:var(--white); --text-muted:var(--muted); /* ---------- Shadows kept minimal — cards separate via border, not shadow. Reserved for genuinely "lifted" overlays (modals, dropdowns, palette). */ --shadow:0 1px 2px rgba(0,0,0,0.4); --shadow-lifted:0 24px 60px rgba(0,0,0,0.45); /* Text color to use ON TOP of accent-colored buttons/badges — dark text on the bright dark-mode accent, white text on light-mode's deeper accent. */ --on-accent:#04211C; /* ---------- 8px-grid spacing scale ---------- --sp-1 = 4px (tight, icon gaps) ... --sp-6 = 32px (section separation) */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --radius-sm:8px; --radius-md:12px; --radius-lg:14px; /* ---------- Motion ---------- */ --ease:cubic-bezier(.16,1,.3,1); --dur-fast:120ms; --dur-base:220ms; } /* ============================================================ LIGHT THEME — toggled via .light class on , applied before first paint (see the inline script in layout_top.php / index.php) to avoid a flash of the wrong theme. Same restrained-accent philosophy as dark mode, translated: near-white surfaces, near-black text, a deeper accent shade (needs to carry white button-text, unlike dark mode's accent). ============================================================ */ html.light{ --navy-deep:#F7F8FA; --navy-elev:#FFFFFF; --navy-elev-2:#F1F4F6; --teal:#0F766E; --teal-glow:#0F766E; --white:#0F172A; --muted:#64748B; --amber:#D97706; --rose:#DC2626; --emerald:#059669; --border:rgba(15,23,42,0.09); --border-hi:rgba(15,118,110,0.35); --nav-active-bg:rgba(15,118,110,0.1); --shadow:0 1px 3px rgba(15,23,42,0.06); --shadow-lifted:0 24px 50px rgba(15,23,42,0.16); --on-accent:#FFFFFF; } *{box-sizing:border-box; margin:0; padding:0;} body{ font-family:'Inter',-apple-system,sans-serif; background:var(--bg); color:var(--text); min-height:100vh; } h1,h2,h3,.display{font-family:'Inter',sans-serif; font-weight:700; letter-spacing:-0.02em;} .mono{font-family:'JetBrains Mono',monospace;} ::-webkit-scrollbar{height:8px; width:8px;} ::-webkit-scrollbar-thumb{background:var(--surface2); border-radius:8px;} ::-webkit-scrollbar-track{background:transparent;} /* ---------- LOGIN ---------- */ .login-wrap{ position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--navy-deep); background-image:radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px); background-size:28px 28px; overflow:hidden; } .blob{position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; pointer-events:none;} .blob1{width:520px; height:520px; background:radial-gradient(circle, rgba(94,234,212,0.10) 0%, transparent 65%); top:-18%; left:50%; transform:translateX(-50%);} .blob2{width:0; height:0;} .blob3{width:0; height:0;} .grid-overlay{display:none;} .login-card{ position:relative; width:380px; max-width:92vw; padding:40px 36px 32px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lifted); animation:rise .5s var(--ease); } @keyframes rise{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}} .brand-mark{ width:60px; height:60px; border-radius:14px; background:var(--teal-glow); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--on-accent); font-size:26px; margin:0 0 22px; } .login-title{text-align:left; font-size:20px; font-weight:600; color:var(--text); letter-spacing:-.02em;} .login-sub{text-align:left; font-size:13.5px; color:var(--text-muted); margin-top:6px;} .alert-box{ margin-top:18px; padding:10px 13px; border-radius:9px; font-size:12.5px; font-weight:500; background:rgba(248,113,113,0.1); border:1px solid rgba(248,113,113,0.3); color:#fca5a5; } .field{margin-top:18px;} .field label{display:block; font-size:12.5px; color:var(--text-muted); margin-bottom:7px; font-weight:500;} .field .input-wrap{position:relative;} .field input, .field select{ width:100%; padding:10px 14px 10px 38px; background:var(--navy-elev); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-size:13.5px; font-family:'Inter',sans-serif; transition:border-color var(--dur-fast) var(--ease); } .field input::placeholder{color:var(--text-muted);} .field input:focus, .field select:focus{outline:none; border-color:var(--teal-glow);} .field i{position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:13px;} .login-btn{ width:100%; margin-top:22px; padding:10px; background:var(--teal-glow); border:none; border-radius:var(--radius-sm); color:var(--on-accent); font-weight:600; font-size:14px; cursor:pointer; transition:background var(--dur-fast) var(--ease); } .login-btn:hover{background:#79F0DD;} .login-btn:disabled{opacity:.6; cursor:not-allowed;} .login-foot{text-align:center; margin-top:20px; font-size:11.5px; color:var(--text-muted); opacity:.7;} /* ---------- APP SHELL ---------- */ .app{display:flex; min-height:100vh;} .sidebar{width:250px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; transition:width .25s ease; position:relative; z-index:20;} .sidebar.collapsed{width:74px;} .side-logo{display:flex; align-items:center; gap:11px; padding:20px 18px; border-bottom:1px solid var(--border);} .side-logo .brand-mark{width:44px; height:44px; font-size:17px; margin:0; flex-shrink:0;} .side-logo span{font-family:'Inter',sans-serif; font-weight:700; font-size:15.5px; white-space:nowrap; overflow:hidden;} .sidebar.collapsed .side-logo span, .sidebar.collapsed .nav-label, .sidebar.collapsed .nav-chevron{display:none;} .side-nav{flex:1; overflow-y:auto; padding:14px 12px;} .nav-group-title{font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:var(--text-muted); padding:14px 10px 6px; font-weight:700;} .sidebar.collapsed .nav-group-title{display:none;} .nav-item{display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:9px; cursor:pointer; color:var(--text-muted); font-size:13.5px; font-weight:500; margin-bottom:2px; position:relative; white-space:nowrap; transition:background .15s, color .15s; text-decoration:none;} .nav-item:hover{background:rgba(148,163,184,0.08); color:var(--text);} .nav-item.active{background:var(--nav-active-bg); color:var(--teal-glow);} .nav-item.active::before{content:''; position:absolute; left:-12px; top:6px; bottom:6px; width:2px; background:var(--teal-glow); border-radius:0 2px 2px 0;} .nav-item i:first-child{width:16px; text-align:center; font-size:14px;} .nav-badge{margin-left:auto; background:var(--rose); color:#fff; font-size:10px; font-weight:700; padding:1px 6px; border-radius:20px; font-family:'JetBrains Mono',monospace;} .side-collapse-btn{margin:12px; padding:9px; border-radius:9px; border:1px solid var(--border); background:transparent; color:var(--text-muted); cursor:pointer; font-size:13px; display:flex; align-items:center; justify-content:center; gap:8px;} .side-collapse-btn:hover{color:var(--teal-glow); border-color:var(--border-hi);} .main{flex:1; min-width:0; display:flex; flex-direction:column;} .topbar{height:66px; flex-shrink:0; display:flex; align-items:center; gap:16px; padding:0 26px; border-bottom:1px solid var(--border); background:var(--surface); position:sticky; top:0; z-index:15;} .breadcrumb{font-family:'Inter',sans-serif; font-weight:700; font-size:16.5px;} .breadcrumb span{color:var(--text-muted); font-weight:500; font-size:13px; margin-left:8px;} .search-box{margin-left:auto; display:flex; align-items:center; gap:9px; background:var(--surface2); border:1px solid var(--border); border-radius:9px; padding:8px 13px; width:280px; color:var(--text-muted); font-size:13px;} .search-box input{background:none; border:none; outline:none; color:var(--text); font-size:13px; width:100%; font-family:'Inter';} .icon-btn{width:38px; height:38px; border-radius:9px; border:1px solid var(--border); background:var(--surface2); color:var(--text-muted); display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; transition:color .15s, border-color .15s;} .icon-btn:hover{color:var(--teal-glow); border-color:var(--border-hi);} .dot-badge{position:absolute; top:-3px; right:-3px; width:16px; height:16px; border-radius:50%; background:var(--rose); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid var(--surface); font-family:'JetBrains Mono',monospace;} .avatar-chip{display:flex; align-items:center; gap:9px; padding-left:12px; border-left:1px solid var(--border); cursor:pointer;} .avatar-circ{width:34px; height:34px; border-radius:50%; background:var(--teal-glow); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:13px; color:var(--on-accent); font-family:'Inter';} .avatar-chip .name{font-size:13px; font-weight:600; line-height:1.2;} .avatar-chip .role{font-size:11px; color:var(--text-muted);} .content{padding:26px; max-width:1440px; width:100%; margin:0 auto;} /* ---------- STAT CARDS / PANELS ---------- */ .stat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; margin-bottom:22px;} .stat-card{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px 17px; position:relative; overflow:hidden; transition:transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);} .stat-card:hover{transform:translateY(-1px); border-color:var(--border-hi);} .stat-card.clickable{cursor:pointer;} .stat-card.clickable:hover{border-color:var(--teal);} .stat-card.active-filter{border-color:var(--teal); box-shadow:inset 0 0 0 1px var(--teal);} .stat-icon{width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:14px; margin-bottom:12px;} .stat-label{font-size:11.5px; color:var(--text-muted); font-weight:500; letter-spacing:.02em; margin-bottom:5px;} .stat-value{font-family:'JetBrains Mono',monospace; font-size:25px; font-weight:600; letter-spacing:-.02em;} .panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); margin-bottom:var(--sp-4); overflow:hidden;} .panel-head{display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-4);} .panel-head h3{font-size:14.5px; font-weight:600;} .panel-body{padding:0 var(--sp-4) var(--sp-4);} /* ---------- TABLES ---------- */ table{width:100%; border-collapse:collapse; font-size:12.5px;} thead th{text-align:left; padding:var(--sp-3); color:var(--text-muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--border); white-space:nowrap; position:sticky; top:0; background:var(--surface); z-index:5;} tbody td{padding:var(--sp-3); border-bottom:1px solid var(--border); vertical-align:middle;} tbody tr:hover{background:rgba(148,163,184,0.05);} .badge{font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:20px; display:inline-block;} .live-dot{width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px; background:var(--emerald); animation:heartbeat 1.6s ease-in-out infinite; box-shadow:0 0 6px var(--emerald);} @keyframes heartbeat{0%,100%{transform:scale(1); opacity:1;} 14%{transform:scale(1.35); opacity:1;} 28%{transform:scale(1); opacity:.85;} 42%{transform:scale(1.25); opacity:1;} 70%{transform:scale(1); opacity:.85;}} /* ---------- TOASTS ---------- */ .toast-stack{position:fixed; top:20px; right:20px; z-index:999; display:flex; flex-direction:column; gap:10px;} .toast{min-width:260px; padding:13px 16px; border-radius:10px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow); font-size:13px; display:flex; align-items:center; gap:10px; animation:toastIn .25s ease;} .toast.success{border-color:rgba(16,185,129,0.4);} .toast.success i{color:var(--emerald);} .toast.error{border-color:rgba(244,63,94,0.4);} .toast.error i{color:var(--rose);} .toast.warning{border-color:rgba(245,158,11,0.4);} .toast.warning i{color:var(--amber);} @keyframes toastIn{from{opacity:0; transform:translateX(30px);} to{opacity:1; transform:translateX(0);}} /* ---------- FILTERS / BUTTONS / MODAL (Leads module) ---------- */ .filter-select{ padding:var(--sp-2) var(--sp-3); border-radius:9px; border:1px solid var(--border); background:var(--surface2); color:var(--text); font-size:12.5px; font-family:'Inter'; outline:none; cursor:pointer; } .filter-select:focus{border-color:var(--border-hi);} .btn-primary{ display:inline-flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-4); border:none; border-radius:9px; background:var(--teal-glow); color:var(--on-accent); font-weight:600; font-size:13px; cursor:pointer; transition:background var(--dur-fast) var(--ease); } .btn-primary:hover{background:#79F0DD;} .btn-sm{ padding:var(--sp-2) var(--sp-3); border-radius:8px; border:1px solid var(--border); background:var(--surface2); color:var(--text); font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; } .btn-sm:hover{border-color:var(--border-hi); color:var(--teal-glow);} .btn-sm.danger{border-color:rgba(244,63,94,0.4); color:var(--rose);} .btn-sm.danger:hover{background:rgba(244,63,94,0.12);} .btn-sm.warn{border-color:rgba(245,158,11,0.4); color:var(--amber);} .btn-sm.warn:hover{background:rgba(245,158,11,0.12);} .btn-sm.ghost{background:transparent;} .view-toggle{display:flex; border:1px solid var(--border); border-radius:9px; overflow:hidden;} .vt-btn{padding:8px 12px; background:var(--surface2); border:none; color:var(--text-muted); cursor:pointer; border-right:1px solid var(--border); font-size:12.5px;} .vt-btn:last-child{border-right:none;} .vt-btn.active{background:var(--teal); color:var(--on-accent);} .bulk-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--surface2); border:1px solid var(--border-hi); border-radius:12px; padding:10px 16px; margin-bottom:16px; font-size:12.5px; color:var(--text-muted); } .pagination-bar{display:flex; align-items:center; justify-content:center; gap:6px; padding:16px; flex-wrap:wrap;} .page-btn{ min-width:32px; height:32px; padding:0 8px; border-radius:8px; border:1px solid var(--border); background:var(--surface2); color:var(--text-muted); cursor:pointer; font-size:12.5px; font-family:'JetBrains Mono'; } .page-btn.active{background:var(--teal); border-color:var(--teal); color:var(--on-accent); font-weight:700;} .page-btn:disabled{opacity:.4; cursor:not-allowed;} .card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px;} .lead-card{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px; box-shadow:var(--shadow); transition:transform .15s, border-color .15s; cursor:pointer;} .lead-card:hover{transform:translateY(-3px); border-color:var(--border-hi);} .modal-overlay{ position:fixed; inset:0; background:rgba(5,10,20,0.65); backdrop-filter:blur(4px); z-index:100; display:flex; align-items:center; justify-content:center; padding:20px; animation:fadeIn .2s ease; } @keyframes fadeIn{from{opacity:0;} to{opacity:1;}} .modal-box{ width:640px; max-width:100%; max-height:88vh; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,0.5); animation:rise .3s cubic-bezier(.2,.8,.2,1); } .modal-head{display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--border);} .modal-head h3{font-size:16px; font-weight:700;} .modal-close{cursor:pointer; color:var(--text-muted); width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:8px;} .modal-close:hover{background:rgba(148,163,184,0.1); color:var(--text);} .modal-body{padding:20px 22px; overflow-y:auto;} .modal-foot{display:flex; justify-content:flex-end; gap:10px; padding:16px 22px; border-top:1px solid var(--border);} .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px 16px;} @media (max-width:560px){.form-grid{grid-template-columns:1fr;}} .form-grid .field{margin-top:0;} .modal-body .field select{padding:12px 14px 12px 40px; width:100%; background:rgba(255,255,255,0.04); border:1px solid rgba(148,163,184,0.18); border-radius:10px; color:#fff; font-size:13.5px; font-family:'Inter'; appearance:none;} /* Fix: native