*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0a0e1a;--bg2:#0f1629;--bg3:#151d30;--bg4:#1a2340;--border:rgba(255,255,255,0.07);--text:#e2e8f0;--text2:#94a3b8;--text3:#64748b;--primary:#6366f1;--accent:#06b6d4;--green:#10b981;--yellow:#f59e0b;--red:#ef4444;--pink:#ec4899;--purple:#8b5cf6;--orange:#f97316;--radius:10px;--shadow:0 4px 24px rgba(0,0,0,0.3)}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow:hidden}
.app-layout{display:flex;height:100vh}
/* SIDEBAR */
.sidebar{width:240px;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}
.sidebar-brand{padding:20px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border)}
.brand-logo{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;font-weight:900;font-size:12px;color:#fff;overflow:hidden}
.brand-logo img{width:100%;height:100%;object-fit:contain}
#brandName{font-size:1.1rem;font-weight:800;background:linear-gradient(135deg,#818cf8,var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.nav-items{flex:1;overflow-y:auto;padding:12px 8px}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--radius);color:var(--text2);cursor:pointer;font-size:.88rem;font-weight:500;transition:all .2s;text-decoration:none;position:relative}
.nav-item:hover{background:rgba(255,255,255,0.04);color:var(--text)}
.nav-item.active{background:rgba(99,102,241,0.12);color:var(--primary)}
.nav-item i{width:20px;text-align:center;font-size:.92rem}
.badge{background:var(--primary);color:#fff;font-size:.68rem;padding:2px 7px;border-radius:10px;margin-left:auto;font-weight:700}
.badge-warn{background:var(--red)}
.nav-separator{height:1px;background:var(--border);margin:8px 14px}
.sidebar-footer{border-top:1px solid var(--border);padding:8px}
.user-info{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius);cursor:pointer;transition:all .2s}
.user-info:hover{background:rgba(255,255,255,0.04)}
.user-avatar{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;color:#fff;flex-shrink:0}
.user-details{flex:1;min-width:0}
.user-name{font-size:.84rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-role{font-size:.72rem;color:var(--text3);text-transform:capitalize}
.user-info .fa-chevron-up{font-size:.65rem;color:var(--text3);transition:transform .2s}
.user-menu{display:none;padding:4px 8px;margin-bottom:4px}
.user-menu.show{display:block}
.user-menu a{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:6px;color:var(--text2);font-size:.84rem;cursor:pointer;transition:all .2s}
.user-menu a:hover{background:rgba(255,255,255,0.04);color:var(--text)}
/* TOP BAR */
.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden}
.top-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;border-bottom:1px solid var(--border);background:var(--bg2);flex-shrink:0}
.search-box{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:var(--radius);padding:8px 14px;width:360px}
.search-box i{color:var(--text3);font-size:.85rem}
.search-box input{background:none;border:none;color:var(--text);font-size:.88rem;width:100%;outline:none;font-family:inherit}
.top-actions{display:flex;gap:8px;align-items:center}
.btn-icon{display:flex;align-items:center;gap:6px;padding:8px 14px;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:var(--radius);color:var(--text2);font-size:.84rem;cursor:pointer;transition:all .2s;font-family:inherit}
.btn-icon:hover{background:rgba(255,255,255,0.08);color:var(--text)}
.btn-accent{display:flex;align-items:center;gap:6px;padding:8px 16px;background:linear-gradient(135deg,var(--primary),#4f46e5);border:none;border-radius:var(--radius);color:#fff;font-size:.84rem;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit}
.btn-accent:hover{transform:translateY(-1px);box-shadow:0 4px 15px rgba(99,102,241,0.3)}
/* VIEW CONTAINER */
.view-container{flex:1;overflow-y:auto;padding:24px}
.view{display:none}.view.active{display:block}
.view-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.view-title{font-size:1.4rem;font-weight:700;display:flex;align-items:center;gap:10px}
.view-title i{color:var(--primary)}
/* CARDS */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}
.stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:20px;transition:all .2s}
.stat-card:hover{border-color:rgba(99,102,241,0.2);transform:translateY(-2px)}
.stat-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;margin-bottom:12px}
.stat-value{font-size:1.6rem;font-weight:800;margin-bottom:2px}
.stat-label{font-size:.78rem;color:var(--text3);text-transform:uppercase;letter-spacing:1px}
.si-blue{background:rgba(99,102,241,0.12);color:var(--primary)}
.si-green{background:rgba(16,185,129,0.12);color:var(--green)}
.si-yellow{background:rgba(245,158,11,0.12);color:var(--yellow)}
.si-red{background:rgba(239,68,68,0.12);color:var(--red)}
.si-cyan{background:rgba(6,182,212,0.12);color:var(--accent)}
.si-pink{background:rgba(236,72,153,0.12);color:var(--pink)}
.si-purple{background:rgba(139,92,246,0.12);color:var(--purple)}
.si-orange{background:rgba(249,115,22,0.12);color:var(--orange)}
/* GRID PANELS */
.panels{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}
.panel{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:20px;overflow:hidden}
.panel-title{font-size:.95rem;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.panel-title i{color:var(--primary)}
/* TABLE */
.data-table{width:100%;border-collapse:collapse}
.data-table th{padding:10px 14px;text-align:left;font-size:.76rem;text-transform:uppercase;letter-spacing:1px;color:var(--text3);border-bottom:1px solid var(--border);font-weight:600}
.data-table td{padding:10px 14px;border-bottom:1px solid var(--border);font-size:.86rem;color:var(--text2)}
.data-table tr:hover td{background:rgba(255,255,255,0.02)}
.data-table .avatar{width:30px;height:30px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:#fff;margin-right:8px;vertical-align:middle}
/* STATUS BADGES */
.status{padding:3px 10px;border-radius:20px;font-size:.74rem;font-weight:600;display:inline-block}
.status-select{padding:3px 22px;border-radius:20px;font-size:.74rem;font-weight:600;border:none;outline:none;cursor:pointer;font-family:inherit;text-align:center;text-align-last:center;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path fill='currentColor' d='M1 3l4 4 4-4'/></svg>");background-repeat:no-repeat;background-position:right 8px center;background-size:8px;transition:filter .15s;min-width:92px}
.status-select:hover{filter:brightness(1.15)}
.status-select:disabled{opacity:.6;cursor:wait}
.status-select.s-new{background-color:rgba(99,102,241,0.12);color:var(--primary)}
.status-select.s-contacted{background-color:rgba(6,182,212,0.12);color:var(--accent)}
.status-select.s-qualified{background-color:rgba(245,158,11,0.12);color:var(--yellow)}
.status-select.s-won{background-color:rgba(16,185,129,0.12);color:var(--green)}
.status-select.s-lost{background-color:rgba(239,68,68,0.12);color:var(--red)}
.status-select.s-noanswer{background-color:rgba(100,116,139,0.14);color:#475569}
.status-select option{background:#ffffff;color:#0f172a;font-weight:500;font-size:13px;padding:6px 10px;text-align:left}
.assignee-select{padding:4px 22px 4px 10px;border-radius:8px;font-size:.78rem;font-weight:500;border:1px solid rgba(0,0,0,0.12);outline:none;cursor:pointer;font-family:inherit;background:#ffffff;color:#475569;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path fill='currentColor' d='M1 3l4 4 4-4'/></svg>");background-repeat:no-repeat;background-position:right 8px center;background-size:8px;min-width:110px;transition:border-color .15s,background-color .15s}
.assignee-select:hover{border-color:rgba(99,102,241,0.4)}
.assignee-select.has-assignee{background-color:rgba(99,102,241,0.08);color:#4f46e5;border-color:rgba(99,102,241,0.25)}
.assignee-select:disabled{opacity:.6;cursor:wait}
.assignee-select option{background:#ffffff;color:#0f172a}
.s-new{background:rgba(99,102,241,0.12);color:var(--primary)}
.s-contacted{background:rgba(6,182,212,0.12);color:var(--accent)}
.s-qualified{background:rgba(245,158,11,0.12);color:var(--yellow)}
.s-won{background:rgba(16,185,129,0.12);color:var(--green)}
.s-lost{background:rgba(239,68,68,0.12);color:var(--red)}
.s-noanswer{background:rgba(100,116,139,0.14);color:#475569}
.s-open{background:rgba(99,102,241,0.12);color:var(--primary)}
/* FILTERS BAR */
.filters-bar{display:flex;gap:8px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.filter-select{padding:7px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text2);font-size:.82rem;font-family:inherit;cursor:pointer;outline:none}
.filter-input{padding:7px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.82rem;font-family:inherit;outline:none;width:220px}
.filter-input:focus,.filter-select:focus{border-color:var(--primary)}
/* BUTTONS */
.btn{padding:8px 16px;border-radius:8px;font-size:.84rem;font-weight:600;cursor:pointer;transition:all .2s;border:none;font-family:inherit;display:inline-flex;align-items:center;gap:6px}
.btn-sm{padding:5px 10px;font-size:.78rem}
.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:#5558e6}
.btn-success{background:var(--green);color:#fff}
.btn-danger{background:var(--red);color:#fff}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text2)}.btn-outline:hover{border-color:var(--primary);color:var(--primary)}
.btn-ghost{background:rgba(255,255,255,0.04);color:var(--text2);border:1px solid transparent}.btn-ghost:hover{background:rgba(255,255,255,0.08)}
/* PIPELINE KANBAN */
.pipeline-board{display:flex;gap:16px;overflow-x:auto;padding-bottom:16px;min-height:400px}
.pipeline-col{min-width:260px;max-width:280px;background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:0;display:flex;flex-direction:column;flex-shrink:0}
.pipeline-col-header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.col-title{font-size:.86rem;font-weight:700;display:flex;align-items:center;gap:8px}
.col-dot{width:10px;height:10px;border-radius:50%}
.col-count{font-size:.72rem;color:var(--text3);background:rgba(255,255,255,0.06);padding:2px 8px;border-radius:10px}
.col-value{font-size:.72rem;color:var(--text3);margin-top:2px}
.pipeline-cards{flex:1;overflow-y:auto;padding:8px}
.deal-card{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:12px;margin-bottom:8px;cursor:pointer;transition:all .2s}
.deal-card:hover{border-color:rgba(99,102,241,0.3);transform:translateY(-1px)}
.deal-card-title{font-size:.84rem;font-weight:600;margin-bottom:6px}
.deal-card-value{font-size:1rem;font-weight:700;color:var(--green)}
.deal-card-contact{font-size:.76rem;color:var(--text3);margin-top:4px}
/* MODAL */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:1000;backdrop-filter:blur(4px)}
.modal-overlay.show{display:block}
.modal{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--bg2);border:1px solid var(--border);border-radius:16px;width:560px;max-height:85vh;overflow:hidden;z-index:1001;box-shadow:var(--shadow)}
.modal.show{display:flex;flex-direction:column}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid var(--border)}
.modal-header h3{font-size:1.05rem;font-weight:700}
.modal-close{background:none;border:none;color:var(--text3);font-size:1.1rem;cursor:pointer;padding:4px 8px;border-radius:6px;transition:all .2s}
.modal-close:hover{background:rgba(255,255,255,0.06);color:var(--text)}
.modal-body{padding:24px;overflow-y:auto;flex:1}
.modal-footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}
/* BIG MODAL */
.big-modal{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--bg2);border:1px solid var(--border);border-radius:16px;width:900px;max-width:95vw;max-height:90vh;overflow:hidden;z-index:1001;box-shadow:var(--shadow)}
.big-modal.show{display:flex;flex-direction:column}
.big-modal-content{overflow-y:auto;flex:1}
/* CONTACT DETAIL */
.contact-header{display:flex;align-items:center;gap:16px;padding:24px;border-bottom:1px solid var(--border)}
.contact-avatar-lg{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:700;color:#fff}
.contact-info h2{font-size:1.2rem;font-weight:700}
.contact-info p{color:var(--text3);font-size:.86rem}
.contact-actions{margin-left:auto;display:flex;gap:8px}
.contact-tabs{display:flex;border-bottom:1px solid var(--border);padding:0 24px}
.contact-tab{padding:12px 16px;font-size:.86rem;font-weight:600;color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s}
.contact-tab.active{color:var(--primary);border-color:var(--primary)}
.contact-tab-content{padding:24px;min-height:300px}
/* FORM FIELDS IN MODAL */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-group{margin-bottom:14px}
.form-group.full{grid-column:1/-1}
.form-group label{display:block;font-size:.8rem;font-weight:600;color:var(--text2);margin-bottom:5px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:9px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.86rem;font-family:inherit;outline:none;transition:border .2s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary)}
.form-group textarea{resize:vertical;min-height:80px}
/* SETTINGS */
.settings-grid{display:grid;grid-template-columns:250px 1fr;gap:0;background:var(--bg2);border:1px solid var(--border);border-radius:12px;overflow:hidden;min-height:500px}
.settings-nav{border-right:1px solid var(--border);padding:12px}
.settings-nav-item{padding:10px 14px;border-radius:8px;font-size:.86rem;color:var(--text2);cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:10px}
.settings-nav-item:hover{background:rgba(255,255,255,0.04)}
.settings-nav-item.active{background:rgba(99,102,241,0.12);color:var(--primary)}
.settings-content{padding:24px;overflow-y:auto}
.settings-section{margin-bottom:32px}
.settings-section h3{font-size:1rem;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.settings-section h3 i{color:var(--primary)}
/* INTEGRATION CARDS */
.integ-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.integ-card{background:var(--bg3);border:1px solid var(--border);border-radius:12px;padding:20px;transition:all .2s}
.integ-card:hover{border-color:rgba(99,102,241,0.2)}
.integ-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.integ-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.integ-name{font-weight:700;font-size:.92rem}
.integ-desc{font-size:.82rem;color:var(--text3);margin-bottom:12px;line-height:1.5}
.integ-status{display:flex;align-items:center;gap:6px;font-size:.78rem}
.integ-dot{width:8px;height:8px;border-radius:50%}
.integ-dot.on{background:var(--green)}.integ-dot.off{background:var(--red)}
/* TEAM PAGE */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.team-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:20px;display:flex;align-items:center;gap:14px;transition:all .2s}
.team-card:hover{border-color:rgba(99,102,241,0.2)}
.team-avatar{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:.9rem;flex-shrink:0}
.team-info{flex:1;min-width:0}
.team-name{font-weight:700;font-size:.92rem}
.team-email{font-size:.8rem;color:var(--text3);overflow:hidden;text-overflow:ellipsis}
.team-role-badge{padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:600}
.team-actions{display:flex;gap:6px}
/* PAGINATION */
.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:20px}
.page-btn{padding:6px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:6px;color:var(--text2);font-size:.82rem;cursor:pointer;font-family:inherit}
.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.page-info{font-size:.82rem;color:var(--text3)}
/* MISC */
.empty-state{text-align:center;padding:60px 20px;color:var(--text3)}
.empty-state i{font-size:3rem;margin-bottom:16px;opacity:.3}
.empty-state p{font-size:.92rem}
.tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:.72rem;font-weight:600;margin:1px}
.loading{display:flex;justify-content:center;padding:40px}
.loading::after{content:'';width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.chart-bar{display:flex;align-items:flex-end;gap:8px;height:120px;padding-top:10px}
.bar{flex:1;background:linear-gradient(to top,var(--primary),var(--accent));border-radius:4px 4px 0 0;min-height:2px;position:relative;transition:height .3s}
.bar-label{font-size:.65rem;color:var(--text3);text-align:center;margin-top:4px}
.bar-val{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:.68rem;color:var(--text2);white-space:nowrap}
/* SCROLLBAR */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.2)}
/* TOGGLE */
.toggle{position:relative;width:44px;height:24px;border-radius:12px;background:var(--bg3);border:1px solid var(--border);cursor:pointer;transition:all .3s}
.toggle.on{background:var(--primary);border-color:var(--primary)}
.toggle::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:all .3s}
.toggle.on::after{left:22px}
/* RESPONSIVE */
@media(max-width:768px){.sidebar{width:60px}.sidebar span,.user-details,.brand-logo+span{display:none}.search-box{width:200px}}

/* ===== LIGHT THEME ===== */
body.light{--bg:#f5f7fa;--bg2:#ffffff;--bg3:#f0f2f5;--bg4:#e8eaed;--border:rgba(0,0,0,0.08);--text:#1a202c;--text2:#4a5568;--text3:#a0aec0;--shadow:0 4px 24px rgba(0,0,0,0.08)}
body.light .sidebar{background:#fff;border-color:rgba(0,0,0,0.06)}
body.light .top-bar{background:#fff;border-color:rgba(0,0,0,0.06)}
body.light .stat-card{background:#fff;border-color:rgba(0,0,0,0.06)}
body.light .panel{background:#fff;border-color:rgba(0,0,0,0.06)}
body.light .modal{background:#fff;border-color:rgba(0,0,0,0.1)}
body.light .big-modal{background:#fff;border-color:rgba(0,0,0,0.1)}
body.light .integ-card{background:#f8f9fa;border-color:rgba(0,0,0,0.06)}
body.light .deal-card{background:#f8f9fa;border-color:rgba(0,0,0,0.06)}
body.light .team-card{background:#fff;border-color:rgba(0,0,0,0.06)}
body.light .pipeline-col{background:#fff;border-color:rgba(0,0,0,0.06)}
body.light .data-table td{border-color:rgba(0,0,0,0.05)}
body.light .data-table th{border-color:rgba(0,0,0,0.08);color:#718096}
body.light .form-group input,body.light .form-group select,body.light .form-group textarea{background:#f7f8fa;border-color:rgba(0,0,0,0.1);color:#1a202c}
body.light .search-box{background:#f7f8fa;border-color:rgba(0,0,0,0.08)}
body.light .search-box input{color:#1a202c}
body.light .filter-input,body.light .filter-select{background:#f7f8fa;border-color:rgba(0,0,0,0.08);color:#1a202c}
body.light .settings-grid{background:#fff;border-color:rgba(0,0,0,0.06)}
body.light .nav-item:hover{background:rgba(0,0,0,0.04)}
body.light .nav-item.active{background:rgba(99,102,241,0.08)}
body.light .user-info:hover{background:rgba(0,0,0,0.03)}
body.light .btn-icon{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.08);color:#4a5568}
body.light .btn-ghost{background:rgba(0,0,0,0.03);color:#4a5568}
body.light .btn-outline{border-color:rgba(0,0,0,0.12);color:#4a5568}
body.light .modal-overlay{background:rgba(0,0,0,0.3)}
body.light #brandName{background:linear-gradient(135deg,#4f46e5,#0891b2);-webkit-background-clip:text}
body.light .toggle{background:#e2e8f0}
body.light .page-btn{background:#f7f8fa;border-color:rgba(0,0,0,0.08);color:#4a5568}
body.light ::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.15)}

/* Email cell + emails popup */
.email-link{color:inherit;text-decoration:none;cursor:pointer;border-bottom:1px dashed transparent;transition:color .15s,border-color .15s}
.email-link:hover{color:#4f46e5;border-bottom-color:rgba(99,102,241,0.4)}
.email-link-empty{color:#94a3b8;font-weight:500;font-style:italic}
.email-link-empty:hover{color:#6366f1}
.email-add-form{padding:4px 0 16px;border-bottom:1px solid rgba(0,0,0,0.08);margin-bottom:12px}
.email-list-heading{font-size:.74rem;text-transform:uppercase;letter-spacing:1px;color:#94a3b8;margin-bottom:4px;font-weight:600}
.email-list{max-height:260px;overflow-y:auto}
.email-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(0,0,0,0.06);font-size:.86rem}
.email-row:last-child{border-bottom:0}
.email-row .email-text{flex:1;color:#0f172a;word-break:break-all}
.email-row .email-tag{font-size:.70rem;padding:2px 8px;border-radius:10px;background:rgba(100,116,139,0.12);color:#475569;font-weight:500;text-transform:uppercase;letter-spacing:.5px}
.email-row .email-tag-primary{background:rgba(245,158,11,0.14);color:#b45309}
.email-row .btn{padding:4px 8px}

/* Company link + site preview popover */
.company-link{color:inherit;text-decoration:none;border-bottom:1px dashed rgba(99,102,241,0.45);transition:color .15s,border-color .15s;cursor:pointer}
.company-link:hover{color:#6366f1;border-bottom-color:#6366f1;text-decoration:none}
body.crm-light-mode .company-link{color:#1e293b}
body.crm-light-mode .company-link:hover{color:#4f46e5}
.site-preview{display:none;position:absolute;z-index:9999;width:320px;height:220px;background:#ffffff;border:1px solid rgba(0,0,0,0.10);border-radius:12px;box-shadow:0 20px 60px rgba(15,23,42,0.22);overflow:hidden;pointer-events:none;font-family:inherit}
.site-preview-head{padding:6px 10px;font-size:11px;color:#64748b;border-bottom:1px solid rgba(0,0,0,0.06);background:#f8fafc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.1px}
.site-preview-img{width:100%;height:calc(100% - 26px);background:#f1f5f9;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:12px;overflow:hidden}
.site-preview-img img{width:100%;height:100%;object-fit:cover;object-position:top}
.site-preview-fail{color:#94a3b8;font-size:12px;font-style:italic}

/* Click-to-call links and buttons */
.phone-link{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:rgba(99,102,241,0.08);color:#4f46e5;font-size:.82rem;font-weight:500;text-decoration:none;transition:background .15s,transform .1s;border:1px solid rgba(99,102,241,0.18);white-space:nowrap}
.phone-link:hover{background:rgba(99,102,241,0.16);transform:translateY(-1px);text-decoration:none}
.phone-link i{font-size:.72rem;opacity:.85}
.call-btn{display:inline-flex;align-items:center;gap:6px;text-decoration:none!important}
.call-btn:hover{text-decoration:none!important}
body.crm-light-mode .phone-link{color:#4338ca}

/* Login screen */
.login-container{position:fixed;inset:0;background:#0a0a12;z-index:2000;align-items:center;justify-content:center;font-family:'DM Sans','Inter',system-ui,-apple-system,sans-serif;padding:24px;overflow-y:auto}
.login-card{background:#ffffff;padding:48px 40px;width:380px;max-width:100%;border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.04);display:flex;flex-direction:column;align-items:center;gap:14px;color:#0f172a}
.login-logo{display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.login-wordmark{font-family:'Rajdhani','Inter',system-ui,sans-serif;font-size:32px;font-weight:700;letter-spacing:6px;color:#0f172a;line-height:1;margin-top:6px}
.login-subtitle{font-size:11px;letter-spacing:3px;color:#94a3b8;text-transform:uppercase;margin-bottom:12px;font-weight:500}
.login-input{width:100%;padding:12px 16px;border:1px solid #e2e8f0;border-radius:8px;font-size:14px;font-family:inherit;color:#0f172a;outline:none;transition:border-color .15s,box-shadow .15s;background:#ffffff;box-sizing:border-box}
.login-input::placeholder{color:#94a3b8}
.login-input:focus{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,0.15)}
.login-btn{width:100%;padding:14px 16px;background:#6366f1;color:#ffffff;border:none;border-radius:50px;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .15s,transform .05s;margin-top:4px;letter-spacing:.3px}
.login-btn:hover{background:#4f46e5}
.login-btn:active{transform:translateY(1px)}
.login-error{color:#ef4444;font-size:13px;margin-top:12px;text-align:center;font-family:inherit;background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.2);border-radius:8px;padding:10px 14px;width:100%;box-sizing:border-box}
.login-back{display:inline-block;margin-top:10px;font-size:13px;color:#64748b;text-decoration:none;transition:color .15s}
.login-back:hover{color:#6366f1}

/* Modal (dialog popup) legibility when CRM light theme is active */
body.crm-light-mode .modal,body.crm-light-mode .big-modal{background:#ffffff;border:1px solid rgba(0,0,0,0.10);color:#1e293b;box-shadow:0 10px 40px rgba(15,23,42,0.18)}
body.crm-light-mode .modal-header,body.crm-light-mode .modal-footer{border-color:rgba(0,0,0,0.08);background:#f8fafc}
body.crm-light-mode .modal-header h3,body.crm-light-mode .modal-body,body.crm-light-mode .modal-body p,body.crm-light-mode .modal-body span,body.crm-light-mode .modal-body label{color:#1e293b}
body.crm-light-mode .modal-close{color:#64748b}
body.crm-light-mode .modal-close:hover{background:rgba(0,0,0,0.05);color:#0f172a}
body.crm-light-mode .modal-overlay{background:rgba(15,23,42,0.35);backdrop-filter:blur(2px)}
body.crm-light-mode .modal-body textarea,body.crm-light-mode .modal-body input,body.crm-light-mode .modal-body select{background:#ffffff!important;border:1px solid rgba(0,0,0,0.12)!important;color:#0f172a!important}
body.crm-light-mode .modal-body textarea::placeholder,body.crm-light-mode .modal-body input::placeholder{color:#94a3b8}
/* Borders between note items inside the popup use var(--border) which is still dark; force light */
body.crm-light-mode .modal-body [style*="border-bottom:1px solid var(--border)"]{border-bottom-color:rgba(0,0,0,0.08)!important}
body.crm-light-mode .modal-body [style*="color:var(--text3)"]{color:#64748b!important}
body.crm-light-mode .modal-body [style*="color:var(--text2)"]{color:#475569!important}

/* Settings legibility fixes when CRM light theme is active */
body.crm-light-mode .settings-grid{background:#ffffff;border:1px solid rgba(0,0,0,0.08);color:#1e293b}
body.crm-light-mode .settings-nav{background:#f8fafc;border-right:1px solid rgba(0,0,0,0.08)}
body.crm-light-mode .settings-nav-item{color:#334155}
body.crm-light-mode .settings-nav-item:hover{background:rgba(99,102,241,0.08)}
body.crm-light-mode .settings-nav-item.active{background:rgba(99,102,241,0.12);color:#4f46e5}
body.crm-light-mode .settings-content,body.crm-light-mode .settings-section{color:#1e293b}
body.crm-light-mode .settings-section h3{color:#0f172a}
body.crm-light-mode .settings-section label{color:#334155;font-weight:500}
body.crm-light-mode .settings-section .form-group input,body.crm-light-mode .settings-section .form-group select,body.crm-light-mode .settings-section .form-group textarea{background:#ffffff;border-color:rgba(0,0,0,0.12);color:#0f172a}
body.crm-light-mode .settings-section .form-group input::placeholder,body.crm-light-mode .settings-section .form-group textarea::placeholder{color:#94a3b8}

/* Theme toggle button */
.theme-toggle{position:fixed;bottom:20px;right:20px;width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--bg2);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:999;transition:all .3s;box-shadow:0 2px 10px rgba(0,0,0,0.15)}
.theme-toggle:hover{transform:scale(1.1);box-shadow:0 4px 20px rgba(0,0,0,0.2)}
.theme-toggle i{font-size:1.1rem;color:var(--text2);transition:all .3s}

/* Import page enhancements */
.import-dropzone{border:2px dashed var(--border);border-radius:12px;padding:40px;text-align:center;transition:all .3s;cursor:pointer}
.import-dropzone:hover,.import-dropzone.drag-over{border-color:var(--primary);background:rgba(99,102,241,0.05)}
.import-dropzone i{font-size:2.5rem;color:var(--primary);opacity:.5;margin-bottom:12px}
.import-preview{margin-top:20px;max-height:300px;overflow:auto}
.import-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.import-stat{padding:12px;background:var(--bg3);border-radius:8px;text-align:center}
.import-stat .val{font-size:1.4rem;font-weight:700}
.import-stat .lbl{font-size:.76rem;color:var(--text3);margin-top:2px}

/* Smooth transitions for theme */
*{transition:background-color .3s,border-color .3s,color .2s,box-shadow .3s}
.bar,.stat-card,.nav-item,.btn{transition:all .2s}

/* Toast notifications */
.toast{position:fixed;top:20px;right:20px;padding:14px 18px;border-radius:12px;color:#fff;font-size:.9rem;font-weight:600;z-index:9999;animation:slideIn .3s ease;display:flex;align-items:flex-start;gap:10px;max-width:420px;box-shadow:0 12px 32px rgba(0,0,0,0.22),0 0 0 1px rgba(255,255,255,0.06) inset;letter-spacing:.01em;line-height:1.4}
.toast + .toast{top:auto;margin-top:8px}
.toast-success{background:linear-gradient(135deg,#10b981,#059669)}
.toast-error{background:linear-gradient(135deg,#ef4444,#dc2626)}
.toast-info{background:linear-gradient(135deg,#6366f1,#4f46e5)}
.toast-warn{background:linear-gradient(135deg,#f59e0b,#d97706)}
/* Stack toasts naturally */
.toast:nth-of-type(2){top:80px}
.toast:nth-of-type(3){top:140px}
.toast:nth-of-type(4){top:200px}
@media (max-width:768px){
  .toast{left:12px;right:12px;top:12px;max-width:none}
}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideOut{from{opacity:1}to{transform:translateX(100%);opacity:0}}

/* === DESIGN POLISH 2026-05-14 === */
/* Hide empty sidebar badge pills — they used to render as small "minus" looking
   rectangles next to Contacts + Tasks when their count was zero. */
.nav-item .badge:empty{display:none}

/* ----- Card components in crm-light-mode (the actually-used light theme) -----
   The existing `body.light .integ-card` / `.team-card` rules don't fire because
   the live class is `crm-light-mode` (set by crm_prod_9.js). The cards were
   rendering as dark navy on a light page, with light-gray titles that disappeared.
   Mirror the light-mode treatment under the right selector + force readable text. */
body.crm-light-mode .integ-card{background:#ffffff;border:1px solid rgba(15,23,42,0.08);box-shadow:0 1px 2px rgba(15,23,42,0.04)}
body.crm-light-mode .integ-card:hover{border-color:rgba(99,102,241,0.30);box-shadow:0 6px 18px rgba(99,102,241,0.08)}
body.crm-light-mode .integ-name{color:#0f172a}
body.crm-light-mode .integ-desc{color:#475569}
body.crm-light-mode .team-card{background:#ffffff;border:1px solid rgba(15,23,42,0.08);box-shadow:0 1px 2px rgba(15,23,42,0.04)}
body.crm-light-mode .team-card:hover{border-color:rgba(99,102,241,0.30);box-shadow:0 6px 18px rgba(99,102,241,0.08)}
body.crm-light-mode .team-name{color:#0f172a}
body.crm-light-mode .team-email{color:#64748b}
body.crm-light-mode .team-role-badge{color:#475569}
/* Panels + cards that use inline var(--bg2)/(--bg3) backgrounds + Invite-code banner */
body.crm-light-mode .panel,
body.crm-light-mode .view-container [style*="background:var(--bg2)"],
body.crm-light-mode .view-container [style*="background:var(--bg3)"]{background:#ffffff!important;border-color:rgba(15,23,42,0.08)!important;color:#0f172a}
body.crm-light-mode .view-container [style*="color:var(--text2)"]{color:#475569!important}
body.crm-light-mode .view-container [style*="color:var(--text3)"]{color:#64748b!important}
/* Data tables / general text headings under crm-light-mode */
body.crm-light-mode .view-title,
body.crm-light-mode .data-table th{color:#0f172a}
body.crm-light-mode .data-table td{color:#1e293b}
body.crm-light-mode .data-table{background:transparent}
body.crm-light-mode .empty-state{color:#64748b}
body.crm-light-mode .empty-state i{color:#94a3b8}
/* Form-grid label + helper text under crm-light-mode */
body.crm-light-mode .form-group label{color:#334155}
body.crm-light-mode .form-group input,body.crm-light-mode .form-group select,body.crm-light-mode .form-group textarea{background:#ffffff;border-color:rgba(15,23,42,0.12);color:#0f172a}
body.crm-light-mode .form-group input::placeholder,body.crm-light-mode .form-group textarea::placeholder{color:#94a3b8}

/* === ACCESSIBILITY POLISH 2026-05-14 === */
/* Focus rings — visible keyboard navigation for everyone, not just sighted-pointer users.
   Use a soft 2px indigo ring offset slightly so it doesn't crowd small controls. */
button:focus-visible, a:focus-visible, .nav-item:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
.settings-nav-item:focus-visible, .dash-pill:focus-visible{
  outline:2px solid #6366f1;outline-offset:2px;border-radius:6px;
}
/* Touch targets: bump nav items + sidebar links to 44px min height on touch devices */
@media (pointer:coarse){
  .nav-item, .settings-nav-item, .dash-pill{min-height:44px;align-items:center}
  .btn, button.btn, .btn-icon{min-height:40px}
}
/* Respect prefers-reduced-motion: turn off the v2-design transitions that
   transform-translate on hover (motion-sickness-safe). */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
}

/* === MOBILE RESPONSIVE 2026-05-14 ===
   Phone breakpoint at 768px and below.
   Sidebar collapses to a slide-in drawer triggered by a hamburger in the top bar.
   Tables become horizontally scrollable. Modals become full-screen.
   Dashboard banner + KPI tiles stack vertically. */

/* Hamburger button (injected by JS — shows only on mobile) */
.mobile-hamburger{display:none;background:transparent;border:1px solid rgba(15,23,42,0.12);border-radius:8px;width:40px;height:40px;align-items:center;justify-content:center;cursor:pointer;color:#475569;font-size:18px;margin-right:8px}
.mobile-hamburger:hover{background:rgba(99,102,241,0.08);color:#4f46e5;border-color:rgba(99,102,241,0.30)}
body:not(.crm-light-mode):not(.light) .mobile-hamburger{border-color:rgba(255,255,255,0.10);color:#cbd5e1}

/* Backdrop behind drawer */
.mobile-backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,0.45);z-index:90;backdrop-filter:blur(2px)}
.mobile-backdrop.open{display:block}

@media (max-width:768px){
  /* Override the legacy 60px sidebar collapse + v2-design's <=480px display:none.
     We want a slide-in drawer instead. !important is necessary because the
     v2-design layer uses !important on display:none. */
  .sidebar{
    display:flex!important;position:fixed!important;top:0!important;left:0!important;
    height:100vh!important;width:280px!important;z-index:100!important;
    transform:translateX(-100%)!important;transition:transform .25s ease!important;
    box-shadow:6px 0 24px rgba(15,23,42,0.18);margin:0!important;
  }
  .sidebar.open{transform:translateX(0)!important}
  .sidebar span, .sidebar .user-details, .sidebar .brand-logo+span{display:inline!important}
  .sidebar .nav-item span, .sidebar .nav-section-label, .sidebar .sidebar-brand span, .sidebar .sidebar-footer span{display:inline!important}
  .view-container{margin-left:0!important}
  .mobile-hamburger{display:inline-flex}
  /* Reclaim full width for the main content */
  .app-layout{display:block}
  .main-content{width:100%}
  .top-bar{padding:10px 12px;gap:8px;flex-wrap:wrap}
  .search-box{flex:1;min-width:0;width:auto;order:3;margin-top:6px}
  .search-box input{width:100%}
  .top-actions{display:flex;gap:6px;flex-wrap:wrap}
  .top-actions .btn-icon{padding:6px 10px;font-size:.82rem}
  .top-actions .btn-icon i{margin-right:0}
  .top-actions .btn-icon span{display:none}
  /* View container breathing room */
  .view-container, [class="view-container"]{padding:12px!important}
  .view{padding:0!important}
  .view-title{font-size:1.1rem!important}
  /* Tables: horizontal-scroll the table while preserving its natural column widths.
     The outer .data-table becomes a block-level scrollable container; thead/tbody
     keep their table semantics so cells size naturally. */
  .data-table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;border-radius:8px;border:1px solid rgba(15,23,42,0.06)}
  .data-table thead, .data-table tbody{display:table;width:max-content;min-width:100%}
  .data-table tr{display:table-row}
  .data-table th, .data-table td{display:table-cell;padding:10px 12px}
  /* Pipeline columns: stack 1-col tall instead of horizontal scroll on small screens */
  .pipeline-board{flex-direction:column;overflow-x:visible}
  .pipeline-col{min-width:100%;max-width:100%}
  /* Settings 2-col grid → single column */
  .settings-grid{grid-template-columns:1fr!important}
  .settings-nav{border-right:none;border-bottom:1px solid rgba(15,23,42,0.08);padding:8px;display:flex;flex-wrap:wrap;gap:4px}
  .settings-nav-item{flex:1 1 auto;min-width:120px;justify-content:center}
  /* Modals: full-screen on mobile */
  .modal, .big-modal{width:100%!important;max-width:100%!important;height:100vh!important;max-height:100vh!important;border-radius:0!important;top:0!important;left:0!important;transform:none!important}
  .modal-body, .big-modal .modal-body{max-height:calc(100vh - 130px)!important;overflow-y:auto}
  .form-grid{grid-template-columns:1fr!important}
  /* Dashboard: full-width banner + stacked tiles already handled by grid auto-fit */
  .dash-quicknav{justify-content:flex-start}
  /* Sign Out — fold into user menu only; hide from top bar on small phones */
  .crm-signout-btn{display:none}
  /* AI chat floater: shrink to not block content */
  .crm-ai-toggle{width:48px!important;height:48px!important;font-size:20px!important}
  /* Documents 2-pane → single column on phones */
  .docs-shell{grid-template-columns:1fr!important}
  .docs-shell > div:first-child{max-height:280px!important}
}

/* Tablet breakpoint — narrower sidebar */
@media (min-width:769px) and (max-width:1024px){
  .sidebar{width:200px}
  .top-bar .search-box{width:240px}
}

/* Very small phones (< 380px) */
@media (max-width:380px){
  .top-bar .search-box{order:3}
  .top-actions button:not(:first-child) span{display:none}
  .dash-pill{padding:6px 12px;font-size:12px}
}

/* Color-picker inputs in Settings → Branding were rendering as 1-pixel
   underlines because the default <input type="color"> styling collapses to
   text-height. Give them a visible swatch. */
.form-group input[type="color"]{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  width:60px;height:38px;padding:0;border:1px solid rgba(0,0,0,0.12);
  border-radius:8px;cursor:pointer;background:transparent;
}
.form-group input[type="color"]::-webkit-color-swatch-wrapper{padding:3px}
.form-group input[type="color"]::-webkit-color-swatch{border:none;border-radius:5px}
.form-group input[type="color"]::-moz-color-swatch{border:none;border-radius:5px}
body.crm-light-mode .form-group input[type="color"]{border-color:rgba(0,0,0,0.14);background:#fff}

/* Pipeline cards in crm-light-mode (the actual light theme Marinos runs).
   The existing body.light overrides didn't fire because the live class is
   .crm-light-mode (set by crm_prod_9.js). Mirror them here so the Pipeline
   stops being dark-navy on the otherwise-light app. */
body.crm-light-mode .pipeline-col{background:#ffffff;border:1px solid rgba(15,23,42,0.08)}
body.crm-light-mode .pipeline-col-header{border-bottom-color:rgba(15,23,42,0.08)}
body.crm-light-mode .pipeline-col .col-title{color:#0f172a;font-weight:600}
body.crm-light-mode .pipeline-col .col-count{background:rgba(15,23,42,0.06);color:#475569;padding:2px 8px;border-radius:999px;margin-left:6px;font-size:.74rem;font-weight:600}
body.crm-light-mode .pipeline-col .col-value{color:#10b981;font-weight:700;font-size:.86rem}
body.crm-light-mode .deal-card{background:#f8fafc;border:1px solid rgba(15,23,42,0.08);box-shadow:0 1px 0 rgba(15,23,42,0.02)}
body.crm-light-mode .deal-card:hover{background:#fff;border-color:rgba(99,102,241,0.35);box-shadow:0 4px 12px rgba(99,102,241,0.10);transform:translateY(-1px)}
body.crm-light-mode .deal-card-title{color:#0f172a;font-weight:600}
body.crm-light-mode .deal-card-value{color:#059669}
body.crm-light-mode .deal-card-contact{color:#64748b}

/* Sign Out button — was treated as a destructive-red action sitting in the
   top-right. Routine sign-out shouldn't read like a delete button. Soften to
   a neutral ghost treatment that still hover-hints at the action. */
.crm-signout-btn{background:transparent;color:#64748b;border:1px solid rgba(15,23,42,0.10);border-radius:8px}
.crm-signout-btn:hover{background:rgba(239,68,68,0.06);color:#dc2626;border-color:rgba(239,68,68,0.25)}
body.crm-light-mode .crm-signout-btn{background:transparent;color:#475569;border-color:rgba(15,23,42,0.12)}
body.crm-light-mode .crm-signout-btn:hover{background:rgba(239,68,68,0.06);color:#dc2626;border-color:rgba(239,68,68,0.25)}