:root {
--logo-bg: url("data:image/png;base64,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");
--bg: #f0f4f8;
--bg-secondary: #e2e8f0;
--primary: #0d9488;
--primary-light: #14b8a6;
--primary-dark: #0f766e;
--secondary: #06b6d4;
--accent: #2dd4bf;
--text: #2d3748;
--text-light: #718096;
--text-lighter: #a0aec0;
--card-bg: rgba(255,255,255,0.95);
--card-border: rgba(255,255,255,0.5);
--shadow-sm: 0 2px 10px rgba(13,148,136,0.08);
--shadow: 0 8px 30px rgba(13,148,136,0.1);
--shadow-lg: 0 15px 50px rgba(13,148,136,0.15);
--shadow-glow: 0 0 40px rgba(13,148,136,0.2);
--success: #10b981;
--warning: #f59e0b;
--danger: #ef4444;
--info: #3b82f6;
--purple: #8b5cf6;
--cyan: #06b6d4;
--pink: #ec4899;
--radius-sm: 12px;
--radius: 16px;
--radius-lg: 24px;
--radius-xl: 32px;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--font-size-base: 16px;
--glass-blur: 20px;
--input-bg: #fff;
--nav-height: 70px;
--bg-tertiary: #cbd5e1;
}
[data-theme="dark"] {
--bg: #0f172a;
--bg-secondary: #1e293b;
--bg-tertiary: #334155;
--text: #f1f5f9;
--text-light: #94a3b8;
--text-lighter: #64748b;
--card-bg: rgba(30,41,59,0.95);
--card-border: rgba(51,65,85,0.5);
--shadow-sm: 0 2px 10px rgba(0,0,0,0.3);
--shadow: 0 8px 30px rgba(0,0,0,0.4);
--shadow-lg: 0 15px 50px rgba(0,0,0,0.5);
--input-bg: #1e293b;
}
[data-theme="dark"] body { background: linear-gradient(135deg, var(--bg) 0%, #1e293b 100%); }
[data-theme="dark"] .form-input, [data-theme="dark"] .form-select, [data-theme="dark"] .form-textarea, [data-theme="dark"] .login-input { background: var(--input-bg); border-color: var(--bg-tertiary); color: var(--text); }
[data-theme="dark"] .modal-box, [data-theme="dark"] .login-container { background: var(--bg-secondary); }
[data-theme="dark"] .table th { background: var(--bg-tertiary); }
[data-theme="dark"] .card-header { background: linear-gradient(135deg, rgba(30,41,59,0.9), rgba(30,41,59,0.5)); }
[data-theme="dark"] .kanban-card { background: var(--bg-secondary); }
[data-theme="dark"] .employee-row { background: var(--bg-secondary); }
[data-theme="dark"] .task-item { background: var(--bg-secondary); }
[data-style="minimal"] { --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --radius-xl: 16px; --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow: 0 2px 8px rgba(0,0,0,0.1); --shadow-lg: 0 4px 16px rgba(0,0,0,0.12); }
[data-style="minimal"] .card, [data-style="minimal"] .stat-card, [data-style="minimal"] .kanban-column { backdrop-filter: none; }
[data-style="minimal"] .btn-primary { background: var(--primary); box-shadow: none; }
[data-style="neumorphism"] { --bg: #e8eef3; --card-bg: #e8eef3; --shadow: 8px 8px 16px #c5cad0, -8px -8px 16px #ffffff; }
[data-style="neumorphism"] body { background: #e8eef3; }
[data-style="neumorphism"] .card, [data-style="neumorphism"] .stat-card { background: var(--bg); border: none; box-shadow: var(--shadow); backdrop-filter: none; }
[data-style="neumorphism"] .form-input { background: var(--bg); box-shadow: inset 4px 4px 8px #c5cad0, inset -4px -4px 8px #ffffff; border: none; }
[data-style="glass-premium"] { --glass-blur: 30px; --card-bg: rgba(255,255,255,0.15); --card-border: rgba(255,255,255,0.2); }
[data-style="glass-premium"] .card, [data-style="glass-premium"] .stat-card, [data-style="glass-premium"] .top-nav { background: var(--card-bg); backdrop-filter: blur(var(--glass-blur)); }
[data-style="glass-premium"] .stat-value, [data-style="glass-premium"] .card-title { color: #fff; }
[data-style="glass-premium"] .nav-item { color: rgba(255,255,255,0.8); }
[data-style="corporate"] { --primary: #1e3a5f; --primary-light: #2d5a8a; --secondary: #2d5a8a; --bg: #f8fafc; --radius-sm: 4px; --radius: 8px; }
[data-style="corporate"] .top-nav { background: linear-gradient(180deg, #1e3a5f 0%, #122840 100%); }
[data-style="corporate"] .nav-item { color: rgba(255,255,255,0.7); }
[data-style="corporate"] .nav-item:hover, [data-style="corporate"] .nav-item.active { background: rgba(255,255,255,0.1); color: #fff; }
[data-style="corporate"] .nav-logo { color: #fff; }
[data-style="elegant-teal"] {
--primary: #0d9488; --primary-light: #14b8a6; --secondary: #06b6d4;
--bg: #f8fafb; --card-bg: #ffffff; --radius-sm: 12px; --radius: 16px; --radius-lg: 24px;
--shadow: 0 4px 20px rgba(13,148,136,0.08); --shadow-lg: 0 8px 40px rgba(13,148,136,0.12);
}
[data-style="elegant-teal"] body { background: linear-gradient(180deg, #f0fdfa 0%, #f8fafb 100%); }
[data-style="elegant-teal"] .top-nav { background: #ffffff; border-bottom: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
[data-style="elegant-teal"] .nav-logo { color: var(--primary); }
[data-style="elegant-teal"] .nav-item { color: #64748b; }
[data-style="elegant-teal"] .nav-item:hover, [data-style="elegant-teal"] .nav-item.active { color: var(--primary); background: #f0fdfa; }
[data-style="elegant-teal"] .stat-card { background: #fff; border: 1px solid #e5e7eb; }
[data-style="elegant-teal"] .btn-primary { background: linear-gradient(135deg, #0d9488, #14b8a6); border-radius: 12px; }
[data-style="soft-purple"] {
--primary: #7c3aed; --primary-light: #8b5cf6; --secondary: #a78bfa;
--bg: #faf5ff; --card-bg: #ffffff; --radius-sm: 16px; --radius: 20px; --radius-lg: 28px;
--shadow: 0 4px 24px rgba(124,58,237,0.1); --shadow-lg: 0 12px 48px rgba(124,58,237,0.15);
}
[data-style="soft-purple"] body { background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 50%, #ede9fe 100%); }
[data-style="soft-purple"] .top-nav { background: linear-gradient(90deg, #7c3aed, #8b5cf6); }
[data-style="soft-purple"] .nav-item { color: rgba(255,255,255,0.85); }
[data-style="soft-purple"] .nav-item:hover, [data-style="soft-purple"] .nav-item.active { background: rgba(255,255,255,0.2); color: #fff; }
[data-style="soft-purple"] .nav-logo { color: #fff; }
[data-style="soft-purple"] .card { border-radius: 20px; border: none; box-shadow: var(--shadow); }
[data-style="soft-purple"] .stat-card { background: #fff; border-radius: 20px; }
[data-style="soft-purple"] .btn-primary { background: linear-gradient(135deg, #7c3aed, #a78bfa); border-radius: 14px; }
[data-style="modern-clean"] {
--primary: #3b82f6; --primary-light: #60a5fa; --secondary: #93c5fd;
--bg: #f1f5f9; --card-bg: #ffffff; --radius-sm: 8px; --radius: 12px; --radius-lg: 16px;
--shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.05);
}
[data-style="modern-clean"] body { background: #f1f5f9; }
[data-style="modern-clean"] .top-nav { background: #fff; border-bottom: 1px solid #e2e8f0; }
[data-style="modern-clean"] .nav-logo { color: var(--primary); font-weight: 800; }
[data-style="modern-clean"] .nav-item { color: #475569; font-weight: 500; }
[data-style="modern-clean"] .nav-item:hover, [data-style="modern-clean"] .nav-item.active { color: var(--primary); background: #eff6ff; }
[data-style="modern-clean"] .card { border: 1px solid #e2e8f0; }
[data-style="modern-clean"] .btn-primary { background: var(--primary); border-radius: 8px; font-weight: 600; }
[data-style="gradient-mesh"] {
--primary: #f472b6; --primary-light: #f9a8d4; --secondary: #c084fc;
--bg: #fdf4ff; --card-bg: rgba(255,255,255,0.9); --radius: 20px;
}
[data-style="gradient-mesh"] body {
background:
radial-gradient(at 40% 20%, hsla(280, 100%, 90%, 0.8) 0px, transparent 50%),
radial-gradient(at 80% 0%, hsla(189, 100%, 90%, 0.6) 0px, transparent 50%),
radial-gradient(at 0% 50%, hsla(343, 100%, 90%, 0.7) 0px, transparent 50%),
radial-gradient(at 80% 50%, hsla(240, 100%, 90%, 0.6) 0px, transparent 50%),
radial-gradient(at 0% 100%, hsla(22, 100%, 90%, 0.5) 0px, transparent 50%),
linear-gradient(180deg, #fdf4ff, #faf5ff);
}
[data-style="gradient-mesh"] .top-nav { background: rgba(255,255,255,0.8); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(244,114,182,0.2); }
[data-style="gradient-mesh"] .card { backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.5); }
[data-style="monday"] {
--primary: #0073ea; --primary-light: #0086ff; --secondary: #00c875;
--bg: #f6f7fb; --card-bg: #ffffff;
--radius-sm: 8px; --radius: 8px; --radius-lg: 12px; --radius-xl: 16px;
--shadow: 0 4px 8px rgba(0,0,0,0.08); --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
--monday-purple: #a25ddc; --monday-green: #00c875; --monday-red: #e2445c;
--monday-yellow: #fdab3d; --monday-blue: #0073ea;
}
[data-style="monday"] body { background: #f6f7fb; }
[data-style="monday"] .top-nav {
background: linear-gradient(90deg, #292f4c 0%, #1c1f3b 100%);
border-bottom: none;
}
[data-style="monday"] .nav-logo { color: #fff; font-weight: 700; }
[data-style="monday"] .nav-item {
color: rgba(255,255,255,0.75);
font-weight: 500;
border-radius: 6px;
transition: all 0.2s;
}
[data-style="monday"] .nav-item:hover { background: rgba(255,255,255,0.1); color: #fff; }
[data-style="monday"] .nav-item.active { background: rgba(0,115,234,0.3); color: #fff; }
[data-style="monday"] .card {
background: #fff;
border: 1px solid #e6e9ef;
border-radius: 8px;
box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
[data-style="monday"] .stat-card {
background: #fff;
border: 1px solid #e6e9ef;
border-radius: 8px;
}
[data-style="monday"] .stat-icon { border-radius: 8px; }
[data-style="monday"] .btn-primary {
background: #0073ea;
border-radius: 8px;
font-weight: 600;
box-shadow: none;
}
[data-style="monday"] .btn-primary:hover { background: #0060c2; }
[data-style="monday"] .kanban-column { background: #f6f7fb; border: 1px solid #e6e9ef; }
[data-style="monday"] .kanban-card { border-radius: 8px; border-right: 4px solid var(--primary); }
[dir="ltr"][data-style="monday"] .kanban-card { border-right: none; border-left: 4px solid var(--primary); }
[data-style="monday"] .badge { border-radius: 16px; font-weight: 600; }
[data-style="zoho"] {
--primary: #e42527; --primary-light: #ff4a4c; --secondary: #1f7ae0;
--bg: #f3f4f6; --card-bg: #ffffff;
--radius-sm: 4px; --radius: 6px; --radius-lg: 8px; --radius-xl: 12px;
--shadow: 0 1px 3px rgba(0,0,0,0.1); --shadow-lg: 0 4px 12px rgba(0,0,0,0.15);
--zoho-blue: #1f7ae0; --zoho-red: #e42527; --zoho-green: #2ea44f;
}
[data-style="zoho"] body { background: #f3f4f6; }
[data-style="zoho"] .top-nav {
background: #ffffff;
border-bottom: 1px solid #e5e7eb;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
[data-style="zoho"] .nav-logo { color: var(--primary); font-weight: 800; }
[data-style="zoho"] .nav-item {
color: #374151;
font-weight: 500;
border-radius: 4px;
font-size: 0.9em;
}
[data-style="zoho"] .nav-item:hover { background: #f3f4f6; color: #111827; }
[data-style="zoho"] .nav-item.active {
color: var(--primary);
background: #fef2f2;
border-bottom: 2px solid var(--primary);
}
[data-style="zoho"] .card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 6px;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
[data-style="zoho"] .stat-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 6px;
}
[data-style="zoho"] .btn-primary {
background: var(--zoho-blue);
border-radius: 4px;
font-weight: 600;
text-transform: uppercase;
font-size: 0.85em;
letter-spacing: 0.5px;
}
[data-style="zoho"] .btn-primary:hover { background: #1565c0; }
[data-style="zoho"] .form-input, [data-style="zoho"] .form-select {
border-radius: 4px;
border: 1px solid #d1d5db;
}
[data-style="zoho"] .badge { border-radius: 4px; font-weight: 600; font-size: 0.75em; }
[data-style="bitrix"] {
--primary: #2fc7ba; --primary-light: #5fd9cf; --secondary: #535c69;
--bg: #eef2f4; --card-bg: #ffffff;
--radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-xl: 20px;
--shadow: 0 2px 8px rgba(0,0,0,0.08); --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
--bitrix-teal: #2fc7ba; --bitrix-orange: #ff5752; --bitrix-blue: #2067b0;
}
[data-style="bitrix"] body { background: linear-gradient(180deg, #eef2f4 0%, #e4e9ec 100%); }
[data-style="bitrix"] .top-nav {
background: #ffffff;
border-bottom: none;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
[data-style="bitrix"] .nav-logo { color: var(--primary); font-weight: 700; }
[data-style="bitrix"] .nav-item {
color: #535c69;
font-weight: 500;
border-radius: 10px;
}
[data-style="bitrix"] .nav-item:hover { background: #f5f7f8; color: #333; }
[data-style="bitrix"] .nav-item.active {
color: var(--primary);
background: linear-gradient(135deg, rgba(47,199,186,0.1), rgba(47,199,186,0.05));
}
[data-style="bitrix"] .card {
background: #fff;
border: none;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
[data-style="bitrix"] .stat-card {
background: #fff;
border: none;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
[data-style="bitrix"] .stat-icon { border-radius: 12px; }
[data-style="bitrix"] .btn-primary {
background: linear-gradient(135deg, #2fc7ba, #26b3a7);
border-radius: 10px;
font-weight: 600;
box-shadow: 0 4px 12px rgba(47,199,186,0.3);
}
[data-style="bitrix"] .btn-primary:hover {
background: linear-gradient(135deg, #26b3a7, #1fa396);
box-shadow: 0 6px 16px rgba(47,199,186,0.4);
}
[data-style="bitrix"] .kanban-column { background: #fff; border-radius: 12px; }
[data-style="bitrix"] .kanban-card { border-radius: 10px; }
[data-style="refined"] {
--primary: #6366f1; --primary-light: #818cf8; --secondary: #a5b4fc;
--bg: #f8fafc; --card-bg: #ffffff;
--radius-sm: 12px; --radius: 16px; --radius-lg: 20px; --radius-xl: 24px;
--shadow: 0 4px 20px rgba(99,102,241,0.08); --shadow-lg: 0 12px 40px rgba(99,102,241,0.12);
--icon-color: #6366f1;
}
[data-style="refined"] body { background: #f8fafc; }
[data-style="refined"] .top-nav {
background: #ffffff;
border-bottom: 1px solid #f1f5f9;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
[data-style="refined"] .nav-logo { color: var(--primary); font-weight: 600; }
[data-style="refined"] .nav-item {
color: #64748b;
font-weight: 500;
border-radius: 12px;
padding: 10px 16px;
}
[data-style="refined"] .nav-item .nav-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: #f1f5f9;
border-radius: 10px;
font-size: 1.1em;
transition: all 0.3s;
}
[data-style="refined"] .nav-item:hover .nav-icon {
background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(99,102,241,0.05));
transform: scale(1.05);
}
[data-style="refined"] .nav-item.active .nav-icon {
background: linear-gradient(135deg, #6366f1, #818cf8);
color: #fff;
box-shadow: 0 4px 12px rgba(99,102,241,0.3);
}
[data-style="refined"] .nav-item:hover { background: transparent; color: var(--primary); }
[data-style="refined"] .nav-item.active { background: transparent; color: var(--primary); }
[data-style="refined"] .card {
background: #fff;
border: 1px solid #f1f5f9;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
[data-style="refined"] .stat-card {
background: #fff;
border: 1px solid #f1f5f9;
border-radius: 16px;
}
[data-style="refined"] .stat-icon {
border-radius: 14px;
background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(99,102,241,0.05)) !important;
color: var(--primary) !important;
font-size: 1.3em;
}
[data-style="refined"] .btn-primary {
background: linear-gradient(135deg, #6366f1, #818cf8);
border-radius: 12px;
font-weight: 500;
box-shadow: 0 4px 16px rgba(99,102,241,0.25);
padding: 12px 24px;
}
[data-style="refined"] .btn-primary:hover {
box-shadow: 0 8px 24px rgba(99,102,241,0.35);
transform: translateY(-1px);
}
[data-style="refined"] .btn { border-radius: 12px; }
[data-style="refined"] .form-input, [data-style="refined"] .form-select {
border-radius: 12px;
border: 1px solid #e2e8f0;
padding: 12px 16px;
}
[data-style="refined"] .form-input:focus, [data-style="refined"] .form-select:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}
[data-style="refined"] .badge {
border-radius: 20px;
font-weight: 500;
padding: 6px 14px;
}
[data-style="refined"] .dropdown-btn {
background: #f8fafc;
border: 1px solid #f1f5f9;
border-radius: 12px;
}
[data-style="refined"] .dropdown-btn:hover {
background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(99,102,241,0.05));
border-color: rgba(99,102,241,0.2);
color: var(--primary);
}
[data-color="ocean"] { --primary: #0077b6; --secondary: #00b4d8; }
[data-color="sunset"] { --primary: #ff6b6b; --secondary: #feca57; }
[data-color="forest"] { --primary: #2d6a4f; --secondary: #40916c; }
[data-color="midnight"] { --primary: #6366f1; --secondary: #8b5cf6; }
[data-color="rose"] { --primary: #ec4899; --secondary: #f472b6; }
[data-color="emerald"] { --primary: #10b981; --secondary: #34d399; }
[data-color="amber"] { --primary: #f59e0b; --secondary: #fbbf24; }
[data-color="teal"] { --primary: #14b8a6; --secondary: #2dd4bf; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
button, .btn, .nav-item, .kanban-card, .stat-card, .data-row, .dropdown-item {
-webkit-tap-highlight-color: transparent;
}
.main-content, .kanban-container, .modal-body, .chat-messages, .crm-tabs {
-webkit-overflow-scrolling: touch;
}
html { font-size: var(--font-size-base); scroll-behavior: smooth; }
body {
font-family: 'Heebo', -apple-system, BlinkMacSystemFont, sans-serif;
background: linear-gradient(135deg, var(--bg) 0%, #dfe6f0 100%);
min-height: 100vh;
color: var(--text);
overflow-x: hidden;
transition: var(--transition);
}
.login-page {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--bg);
padding: 20px;
position: relative;
overflow: hidden;
}
.login-page::before {
content: '';
position: absolute;
top: -30%;
right: -20%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(13,148,136,0.06) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.login-page::after {
content: '';
position: absolute;
bottom: -25%;
left: -15%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(91,62,150,0.05) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.login-page .login-lang-btn {
background: rgba(59,184,168,0.1) !important;
color: #0d9488 !important;
border: 1px solid rgba(59,184,168,0.25) !important;
transition: all 0.3s ease;
}
.login-page .login-lang-btn:hover,
.login-page .login-lang-btn.active {
background: #0d9488 !important;
color: #fff !important;
border-color: #0d9488 !important;
}
.login-page .login-copyright {
color: #0d9488 !important;
font-size: 0.8em;
margin-top: 24px;
text-align: center;
position: relative;
z-index: 2;
letter-spacing: 0.3px;
opacity: 0.8;
}
.login-container {
width: 100%;
max-width: 420px;
background: var(--card-bg);
border-radius: 24px;
box-shadow: 0 4px 40px rgba(59,184,168,0.18), 0 8px 60px rgba(91,62,150,0.10), 0 1px 3px rgba(0,0,0,0.06);
overflow: hidden;
animation: loginSlideIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
border: 2px solid rgba(59,184,168,0.35);
position: relative;
z-index: 1;
}
.login-container::before {
content: '';
position: absolute;
inset: -2px;
border-radius: 26px;
padding: 2px;
background: linear-gradient(160deg, rgba(59,184,168,0.4), rgba(91,62,150,0.3), rgba(59,184,168,0.4));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
animation: borderShimmer 6s ease-in-out infinite;
z-index: 2;
}
@keyframes borderShimmer {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
@keyframes loginSlideIn {
from { opacity: 0; transform: translateY(40px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.login-header {
background: transparent;
padding: 40px 40px 16px;
text-align: center;
color: var(--text);
}
.login-logo {
width: 140px;
height: 140px;
background: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
padding: 0;
box-shadow: 0 4px 24px rgba(91,62,150,0.12);
border: none;
overflow: hidden;
}
.login-logo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 50%;
border: none;
box-shadow: none;
background: none;
}
.login-title {
font-size: 1.6em;
font-weight: 900;
margin-bottom: 4px;
letter-spacing: 3px;
background: linear-gradient(135deg, #5B3E96, #3BB8A8) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
font-family: 'Inter', 'Heebo', system-ui, sans-serif;
}
.login-subtitle {
background: linear-gradient(135deg, #5B3E96, #3BB8A8) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
font-size: 1.3em !important;
font-weight: 800 !important;
letter-spacing: 2px !important;
font-family: 'Inter', 'Heebo', system-ui, sans-serif;
}

/* === NEW LOGIN HEADER DESIGN === */
.login-header-new {
text-align: center;
padding: 0;
position: relative;
overflow: hidden;
}
.login-logo-banner {
background: #ffffff;
padding: 44px 30px 32px;
position: relative;
overflow: hidden;
}
.login-logo-banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #ffffff;
pointer-events: none;
}
@keyframes loginGlow {
0% { transform: translate(0, 0) scale(1); opacity: 0.7; }
50% { transform: translate(-3%, 2%) scale(1.05); opacity: 1; }
100% { transform: translate(2%, -2%) scale(1); opacity: 0.8; }
}
.login-logo-banner::after {
display: none;
}
.login-logo-banner img {
width: 130px;
height: 130px;
object-fit: contain;
display: block;
margin: 0 auto;
position: relative;
z-index: 1;
filter: none;
animation: loginLogoIn 1s ease-out 0.3s both;
}
@keyframes loginLogoIn {
0% { opacity: 0; transform: scale(0.6) translateY(20px) rotate(-5deg); }
60% { opacity: 1; transform: scale(1.05) translateY(-4px) rotate(1deg); }
100% { opacity: 1; transform: scale(1) translateY(0) rotate(0deg); }
}
.login-brand-text {
padding: 18px 0 6px;
font-size: 1.4em;
font-weight: 800;
letter-spacing: 3.5px;
background: linear-gradient(135deg, #5B3E96 20%, #3BB8A8 80%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-family: 'Inter', 'Heebo', system-ui, sans-serif;
position: relative;
animation: loginTextIn 0.6s ease-out 0.6s both;
text-shadow: none;
}
.login-brand-text::after {
content: '';
display: block;
width: 50px;
height: 2px;
background: linear-gradient(90deg, #3BB8A8, #5B3E96);
margin: 10px auto 0;
border-radius: 2px;
animation: loginLineIn 0.5s ease-out 0.9s both;
}
@keyframes loginLineIn {
from { width: 0; opacity: 0; }
to { width: 50px; opacity: 1; }
}
@keyframes loginTextIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.login-body {
padding: 16px 40px 40px;
}
.login-field {
margin-bottom: 22px;
}
.login-field label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: var(--text);
font-size: 0.9em;
}
.login-input {
width: 100%;
padding: 14px 18px;
border: 2px solid var(--bg-secondary);
border-radius: var(--radius-sm);
font-size: 1em;
font-family: inherit;
transition: var(--transition);
background: var(--input-bg);
color: var(--text);
}
.login-input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(13,148,136,0.12);
}
.login-btn {
width: 100%;
padding: 15px;
background: linear-gradient(135deg, #5B3E96, #3BB8A8);
color: #fff;
border: none;
border-radius: var(--radius-sm);
font-size: 1.05em;
font-weight: 700;
cursor: pointer;
transition: var(--transition);
font-family: inherit;
letter-spacing: 0.3px;
}
.login-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(91,62,150,0.3);
}
.login-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.login-error {
background: rgba(239,68,68,0.08);
color: var(--danger);
padding: 12px 16px;
border-radius: var(--radius-sm);
margin-bottom: 18px;
font-size: 0.9em;
display: none;
border: 1px solid rgba(239,68,68,0.15);
}
.login-error.show {
display: block;
}
.login-remember-row {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.login-remember {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 0.9em;
color: var(--text-light);
user-select: none;
}
.login-remember input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--primary);
cursor: pointer;
}
.login-forgot-btn {
display: inline-block;
margin-top: 14px;
padding: 11px 24px;
background: transparent;
border: 2px solid var(--bg-secondary);
border-radius: var(--radius-sm);
color: var(--text-light);
font-size: 0.88em;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
font-family: inherit;
width: 100%;
text-align: center;
}
.login-forgot-btn:hover {
border-color: var(--primary);
color: var(--primary);
background: rgba(13,148,136,0.04);
}

/* === FORGOT PASSWORD MODAL === */
.forgot-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(4px);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
animation: forgotFadeIn 0.3s ease;
}
@keyframes forgotFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.forgot-modal {
background: var(--card-bg, #fff);
border-radius: 20px;
width: 100%;
max-width: 400px;
padding: 0;
position: relative;
box-shadow: 0 8px 40px rgba(59,184,168,0.2), 0 4px 20px rgba(91,62,150,0.1);
border: 2px solid rgba(59,184,168,0.3);
animation: forgotSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
overflow: hidden;
}
@keyframes forgotSlideIn {
from { opacity: 0; transform: translateY(30px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.forgot-modal-close {
position: absolute;
top: 12px;
left: 12px;
background: none;
border: none;
font-size: 24px;
color: var(--text-light, #888);
cursor: pointer;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.2s;
z-index: 1;
}
.forgot-modal-close:hover {
background: rgba(0,0,0,0.08);
color: var(--text, #333);
}
.forgot-modal-header {
text-align: center;
padding: 32px 24px 16px;
background: linear-gradient(160deg, #f8fffe 0%, #f5f0fa 100%);
border-bottom: 1px solid rgba(59,184,168,0.15);
}
.forgot-modal-icon {
font-size: 40px;
margin-bottom: 8px;
}
.forgot-modal-title {
font-size: 1.3em;
font-weight: 700;
margin: 0 0 6px;
color: var(--text, #333);
}
.forgot-modal-subtitle {
font-size: 0.88em;
color: var(--text-light, #888);
margin: 0;
}
.forgot-step {
padding: 24px;
}
.forgot-field {
margin-bottom: 16px;
}
.forgot-field label {
display: block;
margin-bottom: 6px;
font-weight: 600;
font-size: 0.9em;
color: var(--text, #333);
}
.forgot-input {
width: 100%;
padding: 12px 16px;
border: 2px solid var(--bg-secondary, #e5e7eb);
border-radius: 10px;
font-size: 1em;
font-family: inherit;
transition: all 0.2s;
background: var(--input-bg, #fff);
color: var(--text, #333);
box-sizing: border-box;
}
.forgot-input:focus {
outline: none;
border-color: #3BB8A8;
box-shadow: 0 0 0 4px rgba(59,184,168,0.12);
}
.forgot-code-input {
text-align: center;
font-size: 1.8em;
font-weight: 700;
letter-spacing: 8px;
padding: 14px;
}
.forgot-error {
color: #ef4444;
font-size: 0.88em;
margin-bottom: 12px;
display: none;
padding: 8px 12px;
background: rgba(239,68,68,0.08);
border-radius: 8px;
border: 1px solid rgba(239,68,68,0.15);
}
.forgot-error.show {
display: block;
}
.forgot-timer {
text-align: center;
font-size: 0.85em;
color: var(--text-light, #888);
margin: 0 0 12px;
}
.forgot-btn {
width: 100%;
padding: 14px;
background: linear-gradient(135deg, #5B3E96, #3BB8A8);
color: #fff;
border: none;
border-radius: 10px;
font-size: 1em;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
}
.forgot-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(91,62,150,0.25);
}
.forgot-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.forgot-success {
text-align: center;
padding: 20px 0;
}
.forgot-success-icon {
font-size: 48px;
margin-bottom: 12px;
}
.forgot-success p {
font-size: 1.1em;
font-weight: 600;
color: var(--text, #333);
margin-bottom: 20px;
}

.bg-animation {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.bg-bubble {
position: absolute;
border-radius: 50%;
filter: blur(40px);
animation: floatBubble 20s infinite ease-in-out;
opacity: 0.5;
}
.bg-bubble:nth-child(1) {
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(13,148,136,0.25) 0%, transparent 70%);
top: -15%; right: -10%;
animation-delay: 0s;
}
.bg-bubble:nth-child(2) {
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(6,182,212,0.2) 0%, transparent 70%);
bottom: -10%; left: -10%;
animation-delay: -5s;
}
.bg-bubble:nth-child(3) {
width: 350px; height: 350px;
background: radial-gradient(circle, rgba(45,212,191,0.15) 0%, transparent 70%);
top: 40%; left: 20%;
animation-delay: -10s;
}
.bg-bubble:nth-child(4) {
width: 300px; height: 300px;
background: radial-gradient(circle, rgba(16,185,129,0.15) 0%, transparent 70%);
top: 60%; right: 15%;
animation-delay: -15s;
}
.bg-bubble:nth-child(5) {
width: 250px; height: 250px;
background: radial-gradient(circle, rgba(59,130,246,0.15) 0%, transparent 70%);
top: 10%; left: 40%;
animation-delay: -7s;
}
@keyframes floatBubble {
0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
25% { transform: translate(30px, -40px) scale(1.1) rotate(5deg); }
50% { transform: translate(-20px, 30px) scale(0.95) rotate(-5deg); }
75% { transform: translate(40px, 20px) scale(1.05) rotate(3deg); }
}
.app {
display: none;
position: relative;
flex-direction: column;
min-height: 100vh;
position: relative;
z-index: 1;
}
.app.active {
display: flex;
}
.top-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 70px;
max-height: 70px;
background: var(--card-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--card-border);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 30px;
z-index: 1000;
box-shadow: var(--shadow-sm);
overflow: visible;
}
.nav-brand {
display: flex;
align-items: center;
gap: 15px;
}
.nav-brand img {
width: 42px !important;
height: 42px !important;
object-fit: contain;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none;
}
}
.nav-logo {
font-size: 1.6em;
font-weight: 900;
background: linear-gradient(135deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.nav-menu {
display: flex;
align-items: center;
gap: 2px;
flex: 1;
min-width: 0;
overflow: visible;
justify-content: center;
}
.nav-category {
display: flex;
align-items: center;
gap: 2px;
}
.nav-divider {
width: 1px;
height: 24px;
background: #e2e8f0;
margin: 0 8px;
}
.nav-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 6px 8px;
border: none;
background: transparent;
border-radius: 10px;
font-size: 0.72em;
font-weight: 500;
color: var(--text-light);
cursor: pointer;
transition: all 0.2s ease;
font-family: inherit;
min-width: 40px;
flex-shrink: 1;
overflow: hidden;
}
.nav-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.nav-item:hover {
background: #f8fafc;
color: var(--primary);
}
.nav-item.active {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: #fff;
box-shadow: 0 4px 12px rgba(13,148,136,0.3);
}
.nav-item.active .nav-icon svg {
stroke: #fff;
}
.nav-item.hidden {
display: none !important;
}
.nav-icon {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
}
.nav-icon svg {
width: 18px;
height: 18px;
stroke: currentColor;
transition: all 0.2s ease;
}
.nav-item:hover .nav-icon svg {
stroke: var(--primary);
}
.nav-dropdown {
position: relative;
z-index: 1100;
}
.nav-more-btn {
display: flex;
flex-direction: column;
align-items: center;
}
.nav-chevron {
transition: transform 0.2s ease;
}
.nav-dropdown.open .nav-chevron {
transform: rotate(180deg);
}
.nav-dropdown-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 200px;
max-width: 90vw;
background: var(--card-bg, #fff);
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0,0,0,0.15);
padding: 8px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.2s ease;
z-index: 1100;
max-height: 70vh;
overflow-y: auto;
}
.nav-dropdown.open .nav-dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-dropdown-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 12px;
border: none;
background: transparent;
border-radius: 8px;
font-size: 0.9em;
font-weight: 500;
color: var(--text);
cursor: pointer;
transition: all 0.2s ease;
text-align: right;
white-space: nowrap;
min-height: 40px;
}
.nav-dropdown-item:hover {
background: var(--bg, #f8fafc);
color: var(--primary);
}
.nav-dropdown-item svg {
stroke: currentColor;
flex-shrink: 0;
}
.nav-dropdown-item.active {
background: rgba(13,148,136,0.1);
color: var(--primary);
}
.icon-svg {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
}
.icon-svg svg {
width: 100%;
height: 100%;
stroke: currentColor;
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.icon-edit::before { content: ''; }
.icon-delete::before { content: ''; }
.btn-icon svg, .btn svg {
width: 16px;
height: 16px;
vertical-align: middle;
margin-left: 4px;
}
.chat-room-avatar {
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(99,102,241,0.05));
color: var(--primary);
font-size: 1.2em;
}
.chat-room-avatar svg {
width: 22px;
height: 22px;
stroke: var(--primary);
fill: none;
stroke-width: 1.5;
}
.nav-badge {
position: absolute;
top: 5px;
left: 8px;
min-width: 18px;
height: 18px;
padding: 0 5px;
background: var(--danger);
color: #fff;
font-size: 0.7em;
font-weight: 700;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.nav-right {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 1;
min-width: 0;
flex-wrap: nowrap;
justify-content: flex-end;
overflow: visible;
}
.world-clocks {
display: flex;
gap: 8px;
margin-left: 12px;
flex-shrink: 1;
min-width: 0;
overflow: hidden;
}
.world-clock {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
font-size: 0.85em;
}
.world-clock:hover {
border-color: var(--primary);
background: #f8fafc;
}
.clock-flag {
font-size: 1.1em;
}
.clock-time {
font-weight: 700;
font-size: 1em;
color: var(--text);
font-family: 'Courier New', monospace;
}
.clock-label {
font-size: 0.75em;
color: var(--text-light);
}
@media (max-width: 1400px) {
.world-clocks { display: none; }
}
.deal-notifications-container {
position: fixed;
top: 80px;
left: 20px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 10px;
}
.deal-notification {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 15px;
background: #fff;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0,0,0,0.15);
border-right: 4px solid var(--primary);
cursor: pointer;
animation: slideInLeft 0.3s ease;
max-width: 320px;
transition: transform 0.2s;
}
[dir="ltr"] .deal-notification {
border-right: none;
border-left: 4px solid var(--primary);
}
.deal-notification:hover {
transform: translateX(5px);
}
@keyframes slideInLeft {
from { opacity: 0; transform: translateX(-100px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slideOutRight {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(-100px); }
}
.deal-notif-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
}
.deal-notif-icon svg {
stroke: #fff;
}
.deal-notif-content {
flex: 1;
}
.deal-notif-title {
font-weight: 700;
font-size: 1em;
color: var(--primary);
margin-bottom: 5px;
}
.deal-notif-details {
font-size: 0.85em;
color: var(--text-light);
line-height: 1.5;
}
.deal-notif-close {
background: none;
border: none;
font-size: 1.2em;
cursor: pointer;
color: var(--text-light);
padding: 0;
line-height: 1;
}
.deal-notif-close:hover {
color: var(--danger);
}
.agent-goals-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 15px;
padding: 10px 0;
}
.agent-goal-card {
background: var(--bg);
border-radius: 12px;
padding: 15px;
transition: all 0.2s ease;
}
.agent-goal-card:hover {
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.agent-goal-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 15px;
}
.agent-goal-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.85em;
}
.agent-goal-info {
flex: 1;
}
.agent-goal-name {
font-weight: 600;
font-size: 0.95em;
}
.agent-goal-team {
font-size: 0.8em;
color: var(--text-light);
}
.agent-goal-stats {
display: flex;
flex-direction: column;
gap: 12px;
}
.agent-goal-stat-label {
font-size: 0.75em;
color: var(--text-light);
margin-bottom: 4px;
}
.agent-goal-progress {
height: 8px;
background: #e2e8f0;
border-radius: 10px;
overflow: hidden;
}
.agent-goal-progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--primary), var(--secondary));
border-radius: 10px;
transition: width 0.3s ease;
}
.agent-goal-progress-bar.good {
background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
.agent-goal-progress-bar.complete {
background: linear-gradient(90deg, #10b981, #34d399);
}
.agent-goal-stat-values {
display: flex;
justify-content: space-between;
font-size: 0.8em;
margin-top: 4px;
}
.agent-goal-stat-values span:first-child {
font-weight: 600;
color: var(--primary);
}
.agent-goal-stat-values span:last-child {
color: var(--text-light);
}
.gmail-connection-card {
display: flex;
align-items: center;
gap: 15px;
padding: 20px;
background: var(--bg);
border-radius: 12px;
border: 2px solid #e2e8f0;
}
.gmail-connection-card.connected {
border-color: #10b981;
background: rgba(16, 185, 129, 0.05);
}
.gmail-status-icon {
width: 50px;
height: 50px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid #e2e8f0;
}
.gmail-status-icon.connected {
background: #10b981;
border-color: #10b981;
}
.gmail-status-icon.connected svg {
stroke: #fff;
}
.gmail-status-icon.disconnected svg {
stroke: #94a3b8;
}
.gmail-status-info {
flex: 1;
}
.gmail-status-title {
font-weight: 600;
font-size: 1em;
margin-bottom: 4px;
}
.gmail-status-email {
font-size: 0.85em;
color: var(--text-light);
}
.btn-gmail {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
background: #fff;
border: 2px solid #e2e8f0;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-gmail:hover {
border-color: #4285F4;
box-shadow: 0 2px 8px rgba(66, 133, 244, 0.2);
}
.btn-gmail.disconnect {
background: #fef2f2;
border-color: #ef4444;
color: #ef4444;
}
.btn-gmail.disconnect:hover {
background: #ef4444;
color: #fff;
}
.nav-quick-btn {
width: 38px;
height: 38px;
border: 1px solid #e2e8f0;
background: #fff;
border-radius: 10px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
color: #64748b;
flex-shrink: 0;
}
.nav-quick-btn:hover {
background: #f8fafc;
border-color: var(--primary);
color: var(--primary);
}
.nav-quick-btn svg {
stroke: currentColor;
}
.nav-quick-btn.whatsapp-btn {
background: #fff;
border-color: #25D366;
color: #25D366;
}
.nav-quick-btn.whatsapp-btn:hover {
background: #25D366;
color: #fff;
}
.nav-quick-btn.whatsapp-btn:hover svg {
stroke: #fff;
}
.nav-user {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
background: var(--bg);
border-radius: var(--radius-lg);
cursor: pointer;
transition: var(--transition);
flex-shrink: 1;
min-width: 0;
}
.nav-user:hover { background: var(--bg-secondary); }
.nav-user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--secondary));
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 700;
font-size: 0.9em;
background-size: cover;
background-position: center;
}
.nav-user-info { text-align: right; }
.nav-user-name { font-weight: 700; font-size: 0.95em; }
.nav-user-role { font-size: 0.75em; color: var(--text-light); }
.logout-btn {
width: 38px;
height: 38px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 10px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
color: #64748b;
flex-shrink: 0;
}
.logout-btn:hover {
background: #fef2f2;
border-color: #ef4444;
color: #ef4444;
}
.logout-btn svg {
stroke: currentColor;
}
.connection-status {
width: 38px;
height: 38px;
border: 1px solid #e2e8f0;
background: #fff;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #64748b;
flex-shrink: 0;
}
.connection-status svg {
stroke: currentColor;
}
.connection-status.connected {
border-color: var(--success);
color: var(--success);
}
.connection-status.local {
border-color: #f59e0b;
color: #f59e0b;
}
.dropdown { position: relative; }
.dropdown-btn {
width: 38px;
height: 38px;
border: 1px solid #e2e8f0;
background: #fff;
border-radius: 10px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
color: #64748b;
flex-shrink: 0;
}
.dropdown-btn svg {
stroke: currentColor;
}
.dropdown-btn:hover {
background: #f8fafc;
border-color: var(--primary);
color: var(--primary);
}
.user-status-btn {
position: relative;
}
.user-status-btn.online {
border-color: #10b981;
background: rgba(16, 185, 129, 0.1);
}
.user-status-btn.break {
border-color: #f59e0b;
background: rgba(245, 158, 11, 0.1);
}
.user-status-btn.offline {
border-color: #6b7280;
background: rgba(107, 114, 128, 0.1);
}
.user-status-btn.end_day {
border-color: #ef4444;
background: rgba(239, 68, 68, 0.1);
}
.status-dot {
width: 14px;
height: 14px;
border-radius: 50%;
display: inline-block;
margin-left: 6px;
}
.status-dot.online { background: #10b981; box-shadow: 0 0 8px rgba(16,185,129,0.5); }
.status-dot.break { background: #f59e0b; box-shadow: 0 0 8px rgba(245,158,11,0.5); }
.status-dot.offline { background: #6b7280; }
.status-dot.end_day { background: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,0.5); }
.online-user-row { transition: var(--transition); }
.online-user-row:hover { background: var(--bg); }
.whatsapp-btn {
background: #25D366 !important;
color: #fff !important;
}
.whatsapp-btn:hover {
background: #1da851 !important;
}
.whatsapp-btn svg {
stroke: #fff;
}
.status-indicator {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 20px;
font-size: 0.85em;
font-weight: 500;
}
.status-indicator.online { background: rgba(16, 185, 129, 0.15); color: #059669; }
.status-indicator.break { background: rgba(245, 158, 11, 0.15); color: #d97706; }
.status-indicator.offline { background: rgba(107, 114, 128, 0.15); color: #4b5563; }
.status-indicator.end_day { background: rgba(239, 68, 68, 0.15); color: #dc2626; }
.dropdown-menu {
position: absolute;
top: calc(100% + 10px);
left: 0;
min-width: 200px;
background: var(--card-bg);
backdrop-filter: blur(20px);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
padding: 10px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: var(--transition);
border: 1px solid var(--card-border);
z-index: 100;
}
.dropdown.open .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-item {
padding: 12px 18px;
border-radius: var(--radius-sm);
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
gap: 12px;
font-size: 0.92em;
}
.dropdown-item:hover {
background: rgba(102,126,234,0.1);
color: var(--primary);
}
.dropdown-item.active {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: #fff;
}
.main-content {
margin-top: 70px;
padding: 30px;
min-height: calc(100vh - 70px);
}
.view {
display: none;
animation: fadeIn 0.5s ease;
}
.view.active { display: block; }
body.chat-active #appCopyrightFooter { display: none; }
body.chat-active .main-content { overflow: hidden; }

/* Chat view: fixed position from nav to bottom - bypasses all parent layout issues */
#v-chat.active {
    display: block;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    padding: 10px;
    background: linear-gradient(135deg, var(--bg) 0%, #dfe6f0 100%);
    box-sizing: border-box;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
flex-wrap: wrap;
gap: 20px;
}
.page-title {
display: flex;
align-items: center;
gap: 15px;
}
.page-title-icon {
width: 55px;
height: 55px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
box-shadow: 0 8px 25px rgba(102,126,234,0.35);
color: #fff;
}
.page-title-icon svg {
width: 28px;
height: 28px;
stroke: #fff;
fill: none;
stroke-width: 1.5;
}
.page-title h1 {
font-size: 1.8em;
font-weight: 800;
}
.page-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.card {
background: var(--card-bg);
backdrop-filter: blur(20px);
border-radius: var(--radius-lg);
border: 1px solid var(--card-border);
box-shadow: var(--shadow);
overflow: hidden;
transition: var(--transition);
}
.card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-3px);
}
.card-header {
padding: 25px 30px;
border-bottom: 1px solid var(--bg);
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.5));
}
.card-title {
font-size: 1.1em;
font-weight: 700;
display: flex;
align-items: center;
gap: 10px;
}
.card-body { padding: 25px 30px; }
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.stat-card {
background: var(--card-bg);
backdrop-filter: blur(20px);
border-radius: var(--radius-lg);
padding: 25px;
border: 1px solid var(--card-border);
position: relative;
overflow: hidden;
transition: var(--transition);
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
border-radius: 50%;
filter: blur(40px);
opacity: 0.3;
transition: var(--transition);
}
.stat-card.blue::before { background: var(--primary); }
.stat-card.green::before { background: var(--success); }
.stat-card.purple::before { background: var(--purple); }
.stat-card.orange::before { background: var(--warning); }
.stat-card.cyan::before { background: var(--cyan); }
.stat-card.pink::before { background: var(--pink); }
.stat-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
}
.stat-card:hover::before {
opacity: 0.5;
transform: scale(1.5);
}
.stat-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 15px;
}
.stat-label {
font-size: 0.9em;
font-weight: 600;
color: var(--text-light);
}
.stat-icon {
width: 48px;
height: 48px;
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4em;
}
.stat-icon.blue { background: rgba(102,126,234,0.15); }
.stat-icon.green { background: rgba(72,187,120,0.15); }
.stat-icon.purple { background: rgba(159,122,234,0.15); }
.stat-icon.orange { background: rgba(237,137,54,0.15); }
.stat-icon.cyan { background: rgba(11,197,234,0.15); }
.stat-icon.pink { background: rgba(237,100,166,0.15); }
.stat-value {
font-size: 2.5em;
font-weight: 900;
background: linear-gradient(135deg, var(--text), var(--text-light));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.1;
}
.stat-change {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.85em;
font-weight: 600;
margin-top: 10px;
padding: 5px 12px;
border-radius: 50px;
}
.stat-change.up { background: rgba(72,187,120,0.15); color: var(--success); }
.stat-change.down { background: rgba(252,129,129,0.15); color: var(--danger); }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 24px;
border: none;
border-radius: var(--radius-sm);
font-size: 0.95em;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
font-family: inherit;
white-space: nowrap;
}
.btn-primary {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: #fff;
box-shadow: 0 4px 15px rgba(13,148,136,0.4);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(13,148,136,0.5);
}
.btn-secondary {
background: var(--bg);
color: var(--text);
}
.btn-secondary:hover {
background: var(--bg-secondary);
}
.btn-success {
background: linear-gradient(135deg, var(--success), #38a169);
color: #fff;
}
.btn-danger {
background: linear-gradient(135deg, var(--danger), #e53e3e);
color: #fff;
}
.btn-warning {
background: linear-gradient(135deg, var(--warning), #dd6b20);
color: #fff;
}
.btn-sm {
padding: 8px 16px;
font-size: 0.85em;
}
.btn-xs {
padding: 5px 10px;
font-size: 0.75em;
}
.btn-icon {
width: 40px;
height: 40px;
padding: 0;
border-radius: var(--radius-sm);
}
.btn-icon svg, .btn-sm svg, .btn-xs svg {
width: 16px;
height: 16px;
stroke: currentColor;
fill: none;
stroke-width: 1.5;
}
.btn-icon.danger svg, .btn-danger svg { stroke: #fff; }
.btn-icon.success svg, .btn-success svg { stroke: #fff; }
.icon-delete::before { content: ''; }
.icon-edit::before { content: ''; }
.icon-view::before { content: ''; }
.form-group { margin-bottom: 20px; }
.form-label {
display: block;
margin-bottom: 8px;
font-weight: 600;
font-size: 0.9em;
color: var(--text-light);
}
.form-input, .form-select, .form-textarea {
width: 100%;
padding: 14px 18px;
border: 2px solid var(--bg);
border-radius: var(--radius-sm);
font-size: 0.95em;
font-family: inherit;
background: #fff;
transition: var(--transition);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(13,148,136,0.15);
}
.form-textarea { resize: vertical; min-height: 100px; }
.form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.form-checkbox {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
}
.form-checkbox input {
width: 20px;
height: 20px;
accent-color: var(--primary);
}
.form-switch {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
}
.form-switch input { display: none; }
.form-switch-slider {
position: relative;
width: 50px;
height: 26px;
background: var(--bg-secondary);
border-radius: 50px;
transition: var(--transition);
}
.form-switch-slider::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
bottom: 3px;
left: 3px;
background: #fff;
border-radius: 50%;
transition: var(--transition);
box-shadow: var(--shadow-sm);
}
.form-switch input:checked + .form-switch-slider {
background: linear-gradient(135deg, var(--primary), var(--secondary));
}
.form-switch input:checked + .form-switch-slider::before {
transform: translateX(24px);
}
.table-container {
overflow-x: auto;
border-radius: var(--radius);
}
.table {
width: 100%;
border-collapse: collapse;
font-size: 0.92em;
}
.table th, .table td {
padding: 16px 20px;
text-align: right;
border-bottom: 1px solid var(--bg);
}
.table th {
background: var(--bg);
font-weight: 700;
color: var(--text-light);
font-size: 0.85em;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.table tr:hover td { background: rgba(102,126,234,0.03); }
.table tr:last-child td { border-bottom: none; }
.badge {
display: inline-flex;
align-items: center;
padding: 5px 12px;
border-radius: 50px;
font-size: 0.8em;
font-weight: 600;
}
.badge.success { background: rgba(72,187,120,0.15); color: var(--success); }
.badge.warning { background: rgba(237,137,54,0.15); color: var(--warning); }
.badge.danger { background: rgba(252,129,129,0.15); color: var(--danger); }
.badge.info { background: rgba(66,153,225,0.15); color: var(--info); }
.badge.purple { background: rgba(159,122,234,0.15); color: var(--purple); }
.badge.cyan { background: rgba(11,197,234,0.15); color: var(--cyan); }
.badge.pink { background: rgba(237,100,166,0.15); color: var(--pink); }
.badge.gray { background: rgba(113,128,150,0.15); color: #718096; }
.badge.orange { background: rgba(237,137,54,0.15); color: #ed8936; }
.badge.teal { background: rgba(56,178,172,0.15); color: #38b2ac; }
.badge.indigo { background: rgba(90,103,216,0.15); color: #5a67d8; }
.badge.lime { background: rgba(132,204,22,0.15); color: #84cc16; }
.badge.secondary { background: var(--bg); color: var(--text-light); }
.modal {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(5px);
display: flex;
align-items: center;
justify-content: center;
z-index: 5000;
opacity: 0;
visibility: hidden;
transition: var(--transition);
padding: 20px;
}
.modal.show {
opacity: 1;
visibility: visible;
}
.modal-box {
background: #fff;
border-radius: var(--radius-lg);
width: 100%;
max-width: 550px;
max-height: 90vh;
overflow-y: auto;
box-shadow: var(--shadow-lg);
transform: scale(0.9) translateY(20px);
transition: var(--transition);
}
.modal.show .modal-box {
transform: scale(1) translateY(0);
}
.modal-box.large { max-width: 800px; }
.modal-box.xlarge { max-width: 1000px; }
.deal-form-section {
margin-bottom: 20px;
padding: 15px;
background: var(--bg);
border-radius: var(--radius-sm);
}
.deal-form-section .section-title {
font-size: 0.95em;
font-weight: 600;
color: var(--primary);
margin-bottom: 15px;
padding-bottom: 8px;
border-bottom: 2px solid var(--primary-light);
}
.deal-form-section-collapsible {
margin-bottom: 15px;
background: var(--bg);
border-radius: var(--radius-sm);
overflow: hidden;
}
.deal-form-section-collapsible summary {
padding: 12px 15px;
cursor: pointer;
font-weight: 600;
color: var(--text);
display: flex;
align-items: center;
gap: 8px;
}
.deal-form-section-collapsible summary:hover {
background: var(--bg-secondary);
}
.deal-form-section-collapsible summary::marker {
color: var(--primary);
}
.deal-form-section-collapsible .section-content {
padding: 15px;
border-top: 1px solid var(--bg-secondary);
}
.subscriber-row, .service-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr auto;
gap: 10px;
padding: 10px;
background: var(--card-bg);
border-radius: var(--radius-sm);
margin-bottom: 10px;
align-items: end;
}
.subscriber-row .form-group, .service-row .form-group {
margin-bottom: 0;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 25px 30px;
border-bottom: 1px solid var(--bg);
background: linear-gradient(135deg, rgba(13,148,136,0.05), rgba(255,255,255,0.9));
}
.modal-title {
font-size: 1.2em;
font-weight: 700;
display: flex;
align-items: center;
gap: 10px;
}
.modal-close {
width: 40px;
height: 40px;
border: none;
background: var(--bg);
border-radius: 50%;
font-size: 1.5em;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
}
.modal-close:hover {
background: var(--danger);
color: #fff;
}
.modal-body { padding: 30px; }
.modal-footer {
padding: 20px 30px;
border-top: 1px solid var(--bg);
display: flex;
justify-content: flex-end;
gap: 12px;
background: var(--bg);
}
.toasts {
position: fixed;
top: 90px;
left: 30px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 12px;
}
.toast {
display: flex;
align-items: center;
gap: 15px;
padding: 18px 25px;
background: #fff;
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
min-width: 320px;
animation: toastSlideIn 0.4s ease;
border-right: 4px solid;
}
.toast.success { border-color: var(--success); }
.toast.error { border-color: var(--danger); }
.toast.warning { border-color: var(--warning); }
.toast.info { border-color: var(--info); }
@keyframes toastSlideIn {
from { opacity: 0; transform: translateX(50px); }
to { opacity: 1; transform: translateX(0); }
}
.toast-icon {
width: 35px;
height: 35px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1em;
color: #fff;
}
.toast.success .toast-icon { background: var(--success); }
.toast.error .toast-icon { background: var(--danger); }
.toast.warning .toast-icon { background: var(--warning); }
.toast.info .toast-icon { background: var(--info); }
.toast-content { flex: 1; }
.toast-title { font-weight: 700; margin-bottom: 3px; }
.toast-message { font-size: 0.9em; color: var(--text-light); }
.kanban-container {
display: flex;
gap: 20px;
overflow-x: auto;
padding-bottom: 20px;
scroll-snap-type: x mandatory;
}
.kanban-column {
min-width: 320px;
max-width: 320px;
background: var(--card-bg);
backdrop-filter: blur(20px);
border-radius: var(--radius-lg);
border: 1px solid var(--card-border);
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
scroll-snap-align: start;
transition: var(--transition);
animation: columnSlideIn 0.5s ease-out;
}
@keyframes columnSlideIn {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.kanban-column:hover { box-shadow: var(--shadow-lg); }
.kanban-header {
padding: 18px 20px;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
position: relative;
overflow: hidden;
}
.kanban-header::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 5px;
}
[dir="ltr"] .kanban-header::before {
right: auto;
left: 0;
}
.kanban-header.blue { background: linear-gradient(135deg, rgba(102,126,234,0.15), rgba(102,126,234,0.05)); }
.kanban-header.blue::before { background: var(--primary); }
.kanban-header.green { background: linear-gradient(135deg, rgba(72,187,120,0.15), rgba(72,187,120,0.05)); }
.kanban-header.green::before { background: var(--success); }
.kanban-header.yellow { background: linear-gradient(135deg, rgba(237,137,54,0.15), rgba(237,137,54,0.05)); }
.kanban-header.yellow::before { background: var(--warning); }
.kanban-header.red { background: linear-gradient(135deg, rgba(252,129,129,0.15), rgba(252,129,129,0.05)); }
.kanban-header.red::before { background: var(--danger); }
.kanban-header.purple { background: linear-gradient(135deg, rgba(159,122,234,0.15), rgba(159,122,234,0.05)); }
.kanban-header.purple::before { background: var(--purple); }
.kanban-header.cyan { background: linear-gradient(135deg, rgba(11,197,234,0.15), rgba(11,197,234,0.05)); }
.kanban-header.cyan::before { background: var(--cyan); }
.kanban-header.pink { background: linear-gradient(135deg, rgba(237,100,166,0.15), rgba(237,100,166,0.05)); }
.kanban-header.pink::before { background: var(--pink); }
.kanban-header.gray { background: linear-gradient(135deg, rgba(113,128,150,0.15), rgba(113,128,150,0.05)); }
.kanban-header.gray::before { background: #718096; }
.kanban-header.orange { background: linear-gradient(135deg, rgba(237,137,54,0.15), rgba(237,137,54,0.05)); }
.kanban-header.orange::before { background: #ed8936; }
.kanban-header.teal { background: linear-gradient(135deg, rgba(56,178,172,0.15), rgba(56,178,172,0.05)); }
.kanban-header.teal::before { background: #38b2ac; }
.kanban-header.indigo { background: linear-gradient(135deg, rgba(90,103,216,0.15), rgba(90,103,216,0.05)); }
.kanban-header.indigo::before { background: #5a67d8; }
.kanban-header.lime { background: linear-gradient(135deg, rgba(132,204,22,0.15), rgba(132,204,22,0.05)); }
.kanban-header.lime::before { background: #84cc16; }
.kanban-title { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.kanban-name { font-weight: 700; font-size: 1em; flex: 1; min-width: 0; line-height: 1.3; }
.kanban-count {
width: 26px;
height: 26px;
min-width: 26px;
border-radius: 50%;
background: var(--card-bg);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8em;
font-weight: 700;
color: var(--text);
box-shadow: var(--shadow-sm);
}
.kanban-sum {
font-size: 1.3em;
font-weight: 800;
margin-top: 8px;
color: var(--text);
}
.kanban-header-actions {
display: flex;
gap: 5px;
opacity: 0;
transition: var(--transition);
margin-top: 6px;
}
.kanban-column:hover .kanban-header-actions { opacity: 1; }
.kanban-header-btn {
width: 28px;
height: 28px;
border: none;
background: var(--card-bg);
border-radius: 8px;
cursor: pointer;
font-size: 0.85em;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.kanban-header-btn:hover { background: var(--primary); color: #fff; }
.kanban-cards {
flex: 1;
overflow-y: auto;
padding: 15px;
max-height: calc(100vh - 350px);
}
.kanban-card {
background: #fff;
border-radius: var(--radius);
padding: 18px;
margin-bottom: 12px;
cursor: grab;
transition: var(--transition);
border: 1px solid var(--bg);
position: relative;
overflow: hidden;
}
.kanban-card.so-card {
border-top: 3px solid #10b981;
padding-top: 14px;
}
.so-top-bar {
position: absolute;
top: 3px;
left: 0;
right: 0;
height: 16px;
background: linear-gradient(180deg, rgba(16,185,129,0.08), transparent);
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
z-index: 1;
}
.so-top-bar span {
font-size: 0.6em;
color: #10b981;
font-weight: 500;
letter-spacing: 1px;
opacity: 0.7;
}
.so-top-bar svg {
opacity: 0.6;
}
.kanban-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 4px;
background: linear-gradient(180deg, var(--primary), var(--secondary));
opacity: 0;
border-radius: 0 var(--radius) var(--radius) 0;
transition: var(--transition);
}
.kanban-card:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: var(--shadow-lg);
border-color: var(--primary);
}
.kanban-card:hover::before { opacity: 1; }
.kanban-card.dragging {
opacity: 0.7;
transform: rotate(3deg) scale(1.05);
box-shadow: var(--shadow-glow);
}
.kanban-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12px;
}
.kanban-card-name { font-weight: 700; color: var(--primary); font-size: 1em; }
.kanban-card-amount { font-weight: 800; font-size: 1.1em; color: var(--text); }
.kanban-card-info {
font-size: 0.85em;
color: var(--text-light);
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 8px;
}
.kanban-card-detail {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.78em;
color: var(--text-light);
margin-bottom: 3px;
padding: 2px 0;
}
.kanban-card-detail-icon {
font-size: 0.9em;
flex-shrink: 0;
}
.kanban-card-detail-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kanban-card-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.kanban-card-badge {
font-size: 0.75em;
padding: 4px 10px;
border-radius: 8px;
font-weight: 600;
background: var(--bg);
color: var(--text-light);
}
.kanban-card-footer {
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 12px;
border-top: 1px solid var(--bg);
}
.kanban-card-footer-top {
display: flex;
justify-content: space-between;
align-items: center;
}
.kanban-card-agent { display: flex; align-items: center; gap: 8px; }
.kanban-card-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7em;
font-weight: 700;
}
.kanban-card-agent-name { font-size: 0.85em; font-weight: 600; color: var(--primary); }
.kanban-card-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: flex-start;
opacity: 0;
transition: var(--transition);
}
.kanban-card:hover .kanban-card-actions { opacity: 1; }
.kanban-card-btn {
width: 32px;
height: 32px;
border: none;
background: var(--bg);
border-radius: 8px;
cursor: pointer;
font-size: 0.85em;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
color: var(--text);
}
.kanban-card-btn:hover { background: var(--primary); color: #fff; }
.kanban-card-btn svg { stroke: currentColor; }
.deal-temp-tag {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 1px 6px;
border-radius: 8px;
font-size: 0.6em;
font-weight: 600;
cursor: pointer;
margin-right: 8px;
white-space: nowrap;
vertical-align: middle;
}
.deal-temp-tag.hot { background: rgba(239,68,68,0.15); color: #ef4444; }
.deal-temp-tag.warm { background: rgba(245,158,11,0.15); color: #f59e0b; }
.deal-temp-tag.cold { background: rgba(59,130,246,0.15); color: #3b82f6; }
.deal-temp-tag.new { background: rgba(16,185,129,0.15); color: #10b981; }
.followup-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
background: #ef4444;
color: #fff;
font-size: 0.6em;
font-weight: bold;
margin-left: 5px;
animation: pulse-followup 2s infinite;
}
@keyframes pulse-followup {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.sms-char-count {
text-align: left;
font-size: 0.8em;
color: var(--text-light);
margin-top: 5px;
}
.sms-char-count.warning { color: #f59e0b; }
.sms-char-count.danger { color: #ef4444; }
.kanban-card-btn.voip-call-btn {
width: 32px !important;
height: 32px !important;
background: linear-gradient(135deg, #10b981, #059669) !important;
color: #fff !important;
}
.kanban-card-btn.voip-call-btn:hover {
background: linear-gradient(135deg, #059669, #047857) !important;
}
.kpi-dashboard {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-bottom: 20px;
}
.kpi-card {
background: var(--card);
border-radius: var(--radius);
padding: 20px;
box-shadow: var(--shadow);
border: 1px solid var(--card-border);
}
.kpi-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.kpi-card-title {
font-weight: 600;
color: var(--text);
}
.kpi-card-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2em;
}
.kpi-card-value {
font-size: 2em;
font-weight: 700;
color: var(--text);
margin-bottom: 5px;
}
.kpi-card-change {
font-size: 0.85em;
display: flex;
align-items: center;
gap: 5px;
}
.kpi-card-change.positive { color: #10b981; }
.kpi-card-change.negative { color: #ef4444; }
.kpi-card-change.neutral { color: var(--text-light); }
.kpi-mini-chart {
height: 60px;
margin-top: 15px;
display: flex;
align-items: flex-end;
gap: 3px;
}
.kpi-mini-bar {
flex: 1;
background: linear-gradient(to top, var(--primary), var(--secondary));
border-radius: 3px 3px 0 0;
min-height: 5px;
transition: height 0.3s ease;
}
.kpi-progress-ring {
width: 80px;
height: 80px;
margin: 0 auto;
}
.kpi-progress-ring circle {
fill: none;
stroke-width: 8;
}
.kpi-progress-ring .bg { stroke: var(--bg); }
.kpi-progress-ring .progress {
stroke: var(--primary);
stroke-linecap: round;
transform: rotate(-90deg);
transform-origin: 50% 50%;
transition: stroke-dashoffset 0.5s ease;
}
.customer-map-container {
background: var(--card);
border-radius: var(--radius);
padding: 20px;
box-shadow: var(--shadow);
margin-bottom: 20px;
}
.customer-map-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.customer-map {
width: 100%;
height: 400px;
background: linear-gradient(135deg, #e0f2fe, #f0f9ff);
border-radius: var(--radius);
position: relative;
overflow: hidden;
}
.map-placeholder {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: var(--text-light);
}
.map-marker {
position: absolute;
width: 30px;
height: 30px;
background: var(--primary);
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
cursor: pointer;
transition: transform 0.2s;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.map-marker:hover {
transform: rotate(-45deg) scale(1.2);
z-index: 10;
}
.map-marker-inner {
transform: rotate(45deg);
color: #fff;
font-size: 0.7em;
font-weight: bold;
}
.map-marker.hot { background: #ef4444; }
.map-marker.warm { background: #f59e0b; }
.map-marker.cold { background: #3b82f6; }
.map-legend {
display: flex;
gap: 20px;
margin-top: 15px;
justify-content: center;
}
.map-legend-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85em;
}
.map-legend-dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.forecast-container {
background: var(--card);
border-radius: var(--radius);
padding: 20px;
box-shadow: var(--shadow);
margin-bottom: 20px;
}
.forecast-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.forecast-summary {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin-bottom: 20px;
}
.forecast-stat {
text-align: center;
padding: 15px;
background: var(--bg);
border-radius: var(--radius-sm);
}
.forecast-stat-value {
font-size: 1.5em;
font-weight: 700;
color: var(--primary);
}
.forecast-stat-label {
font-size: 0.8em;
color: var(--text-light);
margin-top: 5px;
}
.forecast-chart {
height: 200px;
display: flex;
align-items: flex-end;
gap: 10px;
padding: 20px 0;
border-bottom: 2px solid var(--bg);
}
.forecast-bar-group {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
.forecast-bar {
width: 100%;
max-width: 60px;
border-radius: 5px 5px 0 0;
transition: height 0.3s ease;
}
.forecast-bar.actual { background: linear-gradient(to top, var(--primary), var(--secondary)); }
.forecast-bar.predicted { background: linear-gradient(to top, rgba(102,126,234,0.4), rgba(118,75,162,0.4)); border: 2px dashed var(--primary); }
.forecast-month {
font-size: 0.75em;
color: var(--text-light);
margin-top: 8px;
}
.forecast-table {
width: 100%;
margin-top: 20px;
}
.forecast-table th, .forecast-table td {
padding: 12px;
text-align: right;
border-bottom: 1px solid var(--bg);
}
.forecast-table th {
font-weight: 600;
color: var(--text-light);
font-size: 0.85em;
}
.forecast-probability {
display: inline-block;
padding: 3px 10px;
border-radius: 20px;
font-size: 0.8em;
font-weight: 600;
}
.forecast-probability.high { background: rgba(16,185,129,0.15); color: #10b981; }
.forecast-probability.medium { background: rgba(245,158,11,0.15); color: #f59e0b; }
.forecast-probability.low { background: rgba(239,68,68,0.15); color: #ef4444; }
.move-deal-menu {
animation: fadeIn 0.2s ease;
}
.move-deal-option:hover {
background: var(--bg);
}
.color-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-left: 8px; }
.color-dot.blue { background: #3b82f6; }
.color-dot.green { background: #10b981; }
.color-dot.yellow { background: #f59e0b; }
.color-dot.red { background: #ef4444; }
.color-dot.purple { background: #8b5cf6; }
.color-dot.pink { background: #ec4899; }
.color-dot.orange { background: #f97316; }
.color-dot.cyan { background: #06b6d4; }
.color-dot.gray { background: #6b7280; }
.kanban-card-btn.danger:hover { background: var(--danger); }
.crm-filters {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
flex-wrap: wrap;
padding: 20px;
background: var(--card-bg);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
border: 1px solid var(--card-border);
}
.crm-filter-group { display: flex; align-items: center; gap: 10px; }
.crm-filter-label { font-size: 0.85em; font-weight: 600; color: var(--text-light); }
.crm-search {
flex: 1;
min-width: 200px;
padding: 12px 18px;
border: 2px solid var(--bg);
border-radius: var(--radius-sm);
font-size: 0.9em;
font-family: inherit;
background: #fff;
transition: var(--transition);
}
.crm-search:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(13,148,136,0.15);
}
.crm-tabs { display: flex; gap: 5px; }
.crm-tab {
padding: 10px 18px;
border: none;
background: var(--bg);
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 0.9em;
font-weight: 600;
transition: var(--transition);
font-family: inherit;
}
.crm-tab:hover { background: var(--bg-secondary); }
.crm-tab.active {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: #fff;
}
.data-table-container {
background: var(--card-bg);
border-radius: var(--radius-lg);
overflow: hidden;
}
.data-row {
display: grid;
grid-template-columns: 40px 1.5fr 120px 140px 110px 90px 80px 150px;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid var(--bg);
transition: var(--transition);
gap: 6px;
}
.data-row.has-file-col {
grid-template-columns: 40px 1.5fr 110px 130px 100px 80px 75px 90px 140px;
}
.data-row:hover { background: rgba(102,126,234,0.03); }
.data-row.header {
background: var(--bg);
font-weight: 700;
font-size: 0.85em;
color: var(--text-light);
text-transform: uppercase;
}
.data-checkbox { display: flex; align-items: center; justify-content: center; }
.data-status-select {
padding: 8px 12px;
border: 1px solid var(--bg-secondary);
border-radius: var(--radius-sm);
font-size: 0.85em;
font-family: inherit;
cursor: pointer;
}
.data-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
}
.data-action-btn {
width: 35px;
height: 35px;
border: none;
background: var(--bg);
border-radius: 8px;
cursor: pointer;
font-size: 0.9em;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.data-action-btn:hover { background: var(--primary); color: #fff; }
.data-action-btn.danger:hover { background: var(--danger); }
.data-action-btn.success:hover { background: var(--success); }
.data-action-btn.warning:hover { background: var(--warning); }
.data-stats-minibar {
display: flex;
height: 6px;
border-radius: 6px;
overflow: hidden;
margin-bottom: 12px;
background: var(--bg);
gap: 1px;
}
.data-stats-segment {
transition: width 0.5s ease;
cursor: pointer;
position: relative;
}
.data-stats-segment:hover { opacity: 0.8; filter: brightness(1.1); }
.data-sortable { cursor: pointer; user-select: none; transition: color 0.2s; }
.data-sortable:hover { color: var(--primary); }
.data-sort-icon { font-size: 0.75em; opacity: 0.4; margin-right: 2px; }
.data-sort-icon.active { opacity: 1; color: var(--primary); }
.data-quick-view {
position: absolute;
z-index: 9999;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px 18px;
box-shadow: 0 8px 30px rgba(0,0,0,0.15);
font-size: 0.85em;
line-height: 1.6;
min-width: 220px;
max-width: 300px;
animation: chatMsgIn 0.2s ease;
pointer-events: none;
}
.data-qv-header { font-weight: 700; font-size: 1em; margin-bottom: 6px; color: var(--primary); }
.data-tag {
display: inline-block;
font-size: 0.68em;
padding: 1px 8px;
border-radius: 10px;
margin: 1px 2px;
font-weight: 600;
color: #333;
}
.data-saved-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.data-saved-filter-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
background: rgba(var(--primary-rgb),0.08);
border: 1px solid rgba(var(--primary-rgb),0.15);
border-radius: 20px;
font-size: 0.78em;
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
color: var(--text);
}
.data-saved-filter-btn:hover { background: rgba(var(--primary-rgb),0.15); }
.data-saved-filter-btn span { font-size: 0.9em; opacity: 0.5; cursor: pointer; }
.data-saved-filter-btn span:hover { opacity: 1; color: var(--danger); }
.data-filter-bar {
background: var(--card-bg);
border: 1px solid var(--bg-secondary);
border-radius: var(--radius-lg);
padding: 18px 20px 14px;
margin-bottom: 16px;
}
.data-filter-bar-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: flex-end;
}
.data-filter-item {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
min-width: 130px;
}
.data-filter-label {
font-size: 0.78em;
font-weight: 600;
color: var(--text-light);
}
.data-filter-select {
padding: 7px 10px !important;
font-size: 0.88em !important;
border-radius: var(--radius-sm) !important;
}
.data-filter-bar-actions {
display: flex;
align-items: center;
gap: 10px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--bg);
}
.data-filter-count {
font-size: 0.88em;
font-weight: 700;
color: var(--primary);
background: rgba(102,126,234,0.1);
padding: 4px 14px;
border-radius: 20px;
margin-right: auto;
}
.data-batch-bar {
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(135deg, #f0f4ff, #e8ecff);
border: 1px solid rgba(102,126,234,0.2);
border-radius: var(--radius);
padding: 12px 18px;
margin-bottom: 16px;
flex-wrap: wrap;
gap: 10px;
}
.data-batch-right, .data-batch-left {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.data-batch-count {
font-weight: 700;
font-size: 0.95em;
color: var(--primary);
background: #fff;
padding: 5px 16px;
border-radius: 20px;
border: 1px solid rgba(102,126,234,0.3);
}
.btn-outline {
background: #fff;
color: var(--primary);
border: 1.5px solid var(--primary);
font-weight: 600;
}
.btn-outline:hover {
background: var(--primary);
color: #fff;
}
.data-segment-rules {
display: flex;
flex-direction: column;
gap: 10px;
}
.data-segment-rule {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: var(--bg);
border-radius: var(--radius-sm);
flex-wrap: wrap;
}
.data-segment-rule .form-input {
padding: 7px 10px;
font-size: 0.88em;
}
.assign-dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 14px;
padding: 18px;
}
.assign-agent-card {
background: var(--bg);
border-radius: var(--radius);
padding: 16px;
transition: var(--transition);
border: 1px solid transparent;
}
.assign-agent-card:hover {
border-color: var(--primary);
box-shadow: var(--shadow);
}
.assign-agent-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.assign-agent-avatar {
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: #fff;
font-size: 1em;
}
.assign-agent-name {
font-weight: 700;
font-size: 0.95em;
}
.assign-agent-team {
font-size: 0.78em;
color: var(--text-light);
}
.assign-agent-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.assign-stat-mini {
text-align: center;
padding: 8px;
background: var(--card-bg);
border-radius: var(--radius-sm);
}
.assign-stat-mini-value {
font-size: 1.3em;
font-weight: 800;
color: var(--text);
}
.assign-stat-mini-label {
font-size: 0.72em;
color: var(--text-light);
}
.data-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 14px 20px;
border-top: 1px solid var(--bg);
}
.data-page-btn {
min-width: 36px;
height: 36px;
border: 1px solid var(--bg-secondary);
background: var(--card-bg);
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 0.88em;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
padding: 0 8px;
}
.data-page-btn:hover { border-color: var(--primary); color: var(--primary); }
.data-page-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.data-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.batch-status-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.batch-status-option {
padding: 14px;
border: 2px solid var(--bg-secondary);
border-radius: var(--radius);
cursor: pointer;
text-align: center;
transition: var(--transition);
font-weight: 600;
}
.batch-status-option:hover { border-color: var(--primary); background: rgba(102,126,234,0.05); }
.batch-status-option.selected { border-color: var(--primary); background: rgba(102,126,234,0.1); }
.deal-card-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
.deal-card-title-area {
display: flex;
flex-direction: column;
gap: 8px;
}
.deal-card-pipeline {
display: flex;
gap: 4px;
align-items: center;
flex-wrap: wrap;
}
.deal-card-pipeline-step {
padding: 4px 14px;
font-size: 0.75em;
font-weight: 600;
border-radius: 20px;
background: var(--bg);
color: var(--text-light);
transition: var(--transition);
cursor: pointer;
position: relative;
}
.deal-card-pipeline-step.active {
background: var(--primary);
color: #fff;
}
.deal-card-pipeline-step.passed {
background: rgba(16,185,129,0.15);
color: #10b981;
}
.deal-card-pipeline-arrow {
color: var(--text-light);
font-size: 0.8em;
}
.deal-card-header-actions {
display: flex;
gap: 8px;
align-items: center;
}
.deal-card-body {
display: flex;
flex: 1;
overflow: hidden;
border-top: 1px solid var(--bg);
}
.deal-card-left {
width: 380px;
min-width: 320px;
border-left: 1px solid var(--bg);
overflow-y: auto;
padding: 20px;
background: var(--bg);
}
.deal-card-right {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.deal-card-info-block {
margin-bottom: 18px;
}
.deal-card-info-block-title {
font-size: 0.78em;
font-weight: 700;
color: var(--text-light);
text-transform: uppercase;
margin-bottom: 8px;
letter-spacing: 0.5px;
}
.deal-card-info-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 7px 0;
border-bottom: 1px solid rgba(0,0,0,0.04);
font-size: 0.9em;
}
.deal-card-info-label {
color: var(--text-light);
font-size: 0.88em;
}
.deal-card-info-value {
font-weight: 600;
max-width: 55%;
text-align: left;
word-break: break-word;
}
.deal-card-amount-big {
font-size: 1.8em;
font-weight: 800;
color: var(--primary);
margin-bottom: 4px;
}
.deal-card-tabs {
display: flex;
border-bottom: 2px solid var(--bg);
padding: 0 16px;
background: var(--card-bg);
flex-shrink: 0;
}
.deal-card-tab {
padding: 12px 18px;
font-size: 0.88em;
font-weight: 600;
border: none;
background: none;
cursor: pointer;
color: var(--text-light);
border-bottom: 2px solid transparent;
margin-bottom: -2px;
transition: var(--transition);
}
.deal-card-tab:hover { color: var(--primary); }
.deal-card-tab.active {
color: var(--primary);
border-bottom-color: var(--primary);
}
.deal-card-quick-add {
display: flex;
gap: 8px;
padding: 12px 16px;
background: var(--card-bg);
border-bottom: 1px solid var(--bg);
flex-shrink: 0;
}
.deal-card-tab-content {
flex: 1;
overflow-y: auto;
padding: 16px;
}
.deal-timeline {
position: relative;
padding-right: 30px;
}
.deal-timeline::before {
content: '';
position: absolute;
right: 10px;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(to bottom, var(--primary), var(--bg-secondary));
}
.deal-timeline-item {
position: relative;
padding: 12px 16px;
margin-bottom: 12px;
background: var(--bg);
border-radius: var(--radius);
transition: var(--transition);
}
.deal-timeline-item:hover {
background: rgba(102,126,234,0.05);
box-shadow: var(--shadow-sm);
}
.deal-timeline-dot {
position: absolute;
right: -26px;
top: 16px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--primary);
border: 3px solid var(--card-bg);
z-index: 1;
}
.deal-timeline-dot.green { background: #10b981; }
.deal-timeline-dot.orange { background: #f59e0b; }
.deal-timeline-dot.red { background: #ef4444; }
.deal-timeline-dot.purple { background: #8b5cf6; }
.deal-timeline-dot.blue { background: #3b82f6; }
.deal-timeline-dot.gray { background: #9ca3af; }
.deal-timeline-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.deal-timeline-action {
font-weight: 700;
font-size: 0.88em;
color: var(--text);
}
.deal-timeline-time {
font-size: 0.75em;
color: var(--text-light);
}
.deal-timeline-detail {
font-size: 0.85em;
color: var(--text-light);
line-height: 1.5;
}
.deal-timeline-detail .from-to {
display: inline-flex;
align-items: center;
gap: 6px;
}
.deal-timeline-detail .from-val {
padding: 2px 8px;
background: rgba(239,68,68,0.1);
color: #ef4444;
border-radius: 4px;
font-weight: 600;
font-size: 0.9em;
}
.deal-timeline-detail .to-val {
padding: 2px 8px;
background: rgba(16,185,129,0.1);
color: #10b981;
border-radius: 4px;
font-weight: 600;
font-size: 0.9em;
}
.deal-timeline-detail .arrow-icon {
color: var(--text-light);
}
.deal-timeline-user {
font-size: 0.75em;
color: var(--text-light);
margin-top: 4px;
}
.deal-timeline-date-separator {
text-align: center;
padding: 8px 0;
margin: 10px 0;
position: relative;
}
.deal-timeline-date-separator span {
background: var(--card-bg);
padding: 4px 16px;
font-size: 0.78em;
font-weight: 700;
color: var(--text-light);
border-radius: 20px;
border: 1px solid var(--bg-secondary);
}
.deal-card-note-item {
padding: 12px;
background: var(--bg);
border-radius: var(--radius-sm);
margin-bottom: 10px;
border-right: 3px solid var(--primary);
}
.deal-card-note-meta {
font-size: 0.75em;
color: var(--text-light);
margin-top: 6px;
}
@media (max-width: 768px) {
.deal-card-body { flex-direction: column; }
.deal-card-left { width: 100%; min-width: auto; border-left: none; border-bottom: 1px solid var(--bg); max-height: none; overflow-y: visible; }
.deal-card-right { min-height: 300px; overflow-y: visible; }
.deal-card-modal-box {
height: 95vh !important;
max-height: 95vh !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
border-radius: 16px 16px 0 0 !important;
overflow-y: auto !important;
display: flex !important;
flex-direction: column !important;
}
.deal-card-modal-box .deal-card-body {
overflow-y: auto !important;
overflow-x: hidden !important;
flex: 1 !important;
-webkit-overflow-scrolling: touch;
}
.deal-card-modal-box .deal-card-right {
overflow: visible !important;
}
.deal-card-modal-box .deal-card-tab-content {
overflow-y: visible !important;
}
.deal-card-modal-header {
position: sticky;
top: 0;
z-index: 10;
background: #fff;
flex-wrap: wrap;
}
.deal-card-header-actions {
flex-shrink: 0;
}
.deal-card-header-actions .modal-close {
width: 36px;
height: 36px;
min-width: 36px;
font-size: 1.3em;
display: flex;
align-items: center;
justify-content: center;
}
.deal-card-pipeline {
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
flex-wrap: nowrap;
padding-bottom: 4px;
}
.deal-card-pipeline-step {
white-space: nowrap;
flex-shrink: 0;
}
#dealCardModal.show {
padding: 0 !important;
align-items: flex-end !important;
}
}
.audit-filters-bar {
background: var(--card-bg);
border-radius: var(--radius);
padding: 16px;
margin-bottom: 16px;
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
z-index: 10;
}
.audit-filters-row {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.audit-filters-row select.form-input,
.audit-filters-row input.form-input {
position: relative;
z-index: 11;
min-height: 38px;
width: auto;
padding: 8px 14px;
font-size: 0.88em;
appearance: auto;
-webkit-appearance: auto;
-moz-appearance: auto;
background: var(--card-bg);
border: 2px solid var(--bg-secondary);
border-radius: var(--radius-sm);
cursor: pointer;
}
.audit-filters-row select.form-input:focus,
.audit-filters-row input.form-input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(13,148,136,0.15);
}
.audit-date-preset {
background: var(--card-bg);
border: 2px solid var(--bg-secondary);
color: var(--text-light);
padding: 6px 14px;
border-radius: 20px;
font-size: 0.82em;
cursor: pointer;
transition: var(--transition);
font-weight: 600;
white-space: nowrap;
}
.audit-date-preset:hover { border-color: var(--primary); color: var(--primary); }
.audit-date-preset.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.audit-table-wrapper {
background: var(--card-bg);
border-radius: var(--radius);
overflow-x: auto;
overflow-y: visible;
box-shadow: var(--shadow-sm);
position: relative;
z-index: 1;
}
.audit-table {
width: 100%;
border-collapse: collapse;
font-size: 0.82em;
}
.audit-table th {
background: linear-gradient(135deg, #1e293b, #334155);
color: #e2e8f0;
padding: 10px 12px;
text-align: right;
font-weight: 700;
font-size: 0.85em;
white-space: nowrap;
position: sticky;
top: 0;
z-index: 2;
}
.audit-table td {
padding: 8px 12px;
border-bottom: 1px solid var(--bg);
vertical-align: middle;
max-width: 250px;
overflow: hidden;
text-overflow: ellipsis;
}
.audit-table tr:hover td { background: rgba(102,126,234,0.04); }
.audit-table tr.severity-critical td { border-right: 3px solid #ef4444; }
.audit-table tr.severity-high td { border-right: 3px solid #f59e0b; }
.audit-severity-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
font-size: 0.8em;
font-weight: 700;
}
.audit-severity-badge.critical { background: rgba(239,68,68,0.15); color: #ef4444; }
.audit-severity-badge.high { background: rgba(245,158,11,0.15); color: #d97706; }
.audit-severity-badge.medium { background: rgba(234,179,8,0.15); color: #ca8a04; }
.audit-severity-badge.low { background: rgba(156,163,175,0.15); color: #6b7280; }
.audit-severity-badge.info { background: rgba(59,130,246,0.15); color: #3b82f6; }
.audit-category-badge {
display: inline-block;
padding: 2px 10px;
border-radius: 10px;
font-size: 0.8em;
font-weight: 600;
background: var(--bg);
white-space: nowrap;
}
.audit-change-cell { font-size: 0.8em; }
.audit-change-cell .from { color: #ef4444; text-decoration: line-through; }
.audit-change-cell .to { color: #10b981; font-weight: 600; }
.audit-user-cell {
display: flex;
align-items: center;
gap: 6px;
}
.audit-user-avatar {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7em;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
flex-shrink: 0;
}
.audit-ip-cell {
font-family: 'Courier New', monospace;
font-size: 0.85em;
color: var(--text-light);
}
@media (max-width: 768px) {
.audit-filters-row { flex-direction: column; align-items: stretch; }
.audit-table { font-size: 0.75em; }
}
.assign-dropdown {
position: relative;
display: inline-block;
}
.assign-dropdown-content {
display: none;
position: absolute;
top: 100%;
right: 0;
background: #fff;
min-width: 200px;
box-shadow: var(--shadow-lg);
border-radius: var(--radius);
z-index: 100;
padding: 10px;
}
.assign-dropdown.open .assign-dropdown-content { display: block; }
.assign-option {
padding: 10px 15px;
cursor: pointer;
border-radius: var(--radius-sm);
transition: var(--transition);
}
.assign-option:hover { background: var(--bg); }
.blacklist-container {
background: rgba(252,129,129,0.05);
border: 1px solid rgba(252,129,129,0.2);
border-radius: var(--radius-lg);
padding: 20px;
margin-top: 20px;
}
.blacklist-title {
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
color: var(--danger);
margin-bottom: 15px;
}
.blacklist-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 15px;
background: #fff;
border-radius: var(--radius-sm);
margin-bottom: 8px;
}
.calendar-nav { display: flex; align-items: center; gap: 15px; }
.calendar-nav-btn {
width: 35px;
height: 35px;
border: none;
background: var(--bg);
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 0.9em;
transition: var(--transition);
}
.calendar-nav-btn:hover { background: var(--primary); color: #fff; }
.calendar-month {
font-weight: 700;
font-size: 1.1em;
min-width: 150px;
text-align: center;
}
.calendar-view-tabs { display: flex; gap: 5px; margin-bottom: 20px; }
.calendar-view-tab {
padding: 8px 16px;
border: none;
background: var(--bg);
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 0.85em;
font-weight: 600;
transition: var(--transition);
font-family: inherit;
}
.calendar-view-tab:hover { background: var(--bg-secondary); }
.calendar-view-tab.active {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: #fff;
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
width: 100%;
max-width: 700px;
margin: 0 auto;
}
.calendar-header {
text-align: center;
font-weight: 700;
font-size: 0.85em;
color: var(--text-light);
padding: 6px 3px;
}
.calendar-day {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 4px;
border-radius: var(--radius-sm);
cursor: pointer;
transition: var(--transition);
background: var(--bg);
min-height: 48px;
max-height: 80px;
overflow: hidden;
}
.calendar-day:hover { background: var(--bg-secondary); transform: scale(1.02); }
.calendar-day.today {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: #fff;
}
.calendar-day.other-month { opacity: 0.4; }
.calendar-day.selected {
border: 2px solid var(--primary);
background: rgba(102,126,234,0.1);
}
.calendar-day-number { font-weight: 700; font-size: 0.85em; margin-bottom: 3px; }
.calendar-day-tasks { display: flex; flex-direction: column; gap: 1px; width: 100%; }
.calendar-day-task {
font-size: 0.65em;
padding: 1px 4px;
border-radius: 4px;
background: rgba(102,126,234,0.2);
color: var(--primary);
text-align: center;
font-weight: 600;
}
.calendar-day-task.others-task {
background: rgba(249,115,22,0.2);
color: #ea580c;
}
.calendar-day.today .calendar-day-task {
background: rgba(255,255,255,0.3);
color: #fff;
}
.calendar-day.today .calendar-day-task.others-task {
background: rgba(249,115,22,0.45);
color: #fff;
}
.calendar-week-grid {
display: grid;
grid-template-columns: 60px repeat(7, 1fr);
gap: 1px;
background: var(--bg-secondary);
border-radius: var(--radius);
overflow: hidden;
}
.calendar-week-header {
background: var(--bg);
padding: 15px 10px;
text-align: center;
font-weight: 700;
font-size: 0.85em;
}
.calendar-week-time {
background: var(--bg);
padding: 10px;
text-align: center;
font-size: 0.8em;
color: var(--text-light);
}
.calendar-week-cell {
background: #fff;
min-height: 60px;
padding: 5px;
cursor: pointer;
transition: var(--transition);
}
.calendar-week-cell:hover { background: rgba(102,126,234,0.05); }
.calendar-year-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.calendar-year-month {
background: var(--bg);
border-radius: var(--radius);
padding: 15px;
cursor: pointer;
transition: var(--transition);
}
.calendar-year-month:hover { background: var(--bg-secondary); transform: translateY(-3px); }
.calendar-year-month-title { font-weight: 700; margin-bottom: 10px; text-align: center; }
.calendar-year-month-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
font-size: 0.7em;
}
.calendar-year-day { text-align: center; padding: 3px; border-radius: 3px; }
.calendar-year-day.has-task {
background: rgba(102,126,234,0.3);
color: var(--primary);
font-weight: 700;
}
.calendar-week-view {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 8px;
}
.calendar-week-day {
background: var(--bg);
border-radius: var(--radius-sm);
padding: 10px;
min-height: 150px;
cursor: pointer;
transition: var(--transition);
}
.calendar-week-day:hover {
background: var(--bg-secondary);
}
.calendar-week-day.today {
background: linear-gradient(135deg, rgba(102,126,234,0.15), rgba(118,75,162,0.15));
border: 2px solid var(--primary);
}
.calendar-week-day-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid var(--card-border);
}
.calendar-week-day-name {
font-weight: 700;
font-size: 0.9em;
}
.calendar-week-day-num {
background: var(--primary);
color: #fff;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8em;
font-weight: 600;
}
.calendar-week-day-tasks {
display: flex;
flex-direction: column;
gap: 5px;
}
.calendar-week-task {
font-size: 0.75em;
padding: 5px 8px;
border-radius: 4px;
background: rgba(102,126,234,0.1);
border-right: 3px solid var(--primary);
}
.calendar-week-task.others-task {
background: rgba(249,115,22,0.1);
border-right-color: #ea580c;
}
.calendar-week-task.high { border-right-color: var(--danger); }
.calendar-week-task.medium { border-right-color: var(--warning); }
.calendar-week-task.low { border-right-color: var(--success); }
.calendar-week-task .task-time {
font-weight: 600;
margin-left: 5px;
}
.calendar-week-task .task-owner-name {
font-size: 0.9em;
opacity: 0.75;
margin-right: 4px;
}
.task-owner-badge {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 0.8em;
padding: 1px 8px;
border-radius: 10px;
font-weight: 500;
}
.task-owner-badge.mine {
background: rgba(102,126,234,0.12);
color: var(--primary);
}
.task-owner-badge.other {
background: rgba(249,115,22,0.12);
color: #ea580c;
}
.chat-room-admin-peek {
font-size: 0.7em;
color: var(--text-light);
opacity: 0.7;
margin-top: 2px;
}
.chat-admin-badge {
display: inline-block;
font-size: 0.65em;
background: rgba(249,115,22,0.12);
color: #ea580c;
padding: 1px 6px;
border-radius: 8px;
margin-right: 4px;
font-weight: 500;
}
.tasks-page-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.tasks-main {
min-width: 0;
}
.calendar-sidebar {
width: 100%;
}
.calendar-view-tabs.compact {
margin-bottom: 10px;
justify-content: center;
}
.calendar-view-tabs.compact .calendar-view-tab {
padding: 5px 10px;
font-size: 0.75em;
}
.card-header.compact {
padding: 10px 15px;
}
@media (max-width: 900px) {
.tasks-page-grid {
grid-template-columns: 1fr;
}
.calendar-sidebar {
width: 100%;
}
}
.tasks-section { margin-top: 30px; }
.tasks-list {
display: flex;
flex-direction: column;
gap: 12px;
max-height: 500px;
overflow-y: auto;
}
.task-item {
display: flex;
align-items: center;
gap: 15px;
padding: 18px;
background: var(--bg);
border-radius: var(--radius);
transition: var(--transition);
}
.task-item:hover { background: var(--bg-secondary); transform: translateX(-5px); }
.task-checkbox {
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px solid var(--primary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
flex-shrink: 0;
}
.task-checkbox:hover { background: rgba(102,126,234,0.1); }
.task-checkbox.done {
background: var(--success);
border-color: var(--success);
color: #fff;
}
.task-content { flex: 1; }
.task-title { font-weight: 600; margin-bottom: 5px; }
.task-item.done .task-title { text-decoration: line-through; opacity: 0.6; }
.task-meta {
font-size: 0.85em;
color: var(--text-light);
display: flex;
gap: 15px;
}
.task-priority {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.task-priority.high { background: var(--danger); }
.task-priority.medium { background: var(--warning); }
.task-priority.low { background: var(--success); }
.chat-toggle-btn {
display: none;
width: 42px;
height: 42px;
border-radius: 12px;
border: 1.5px solid rgba(var(--primary-rgb), 0.15);
background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.06), rgba(var(--primary-rgb), 0.02));
cursor: pointer;
align-items: center;
justify-content: center;
font-size: 1.2em;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(8px);
}
.chat-toggle-btn:hover {
background: linear-gradient(135deg, var(--primary), #5b8def);
color: #fff;
transform: scale(1.05);
box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.35);
}
.chat-sidebar-overlay { display: none; }

/* ═══════════════════════════════════════
   PREMIUM CHAT CONTAINER
   ═══════════════════════════════════════ */
.chat-container {
display: grid;
grid-template-columns: 340px 1fr;
gap: 0;
height: 100%;
background: var(--card-bg);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.04);
}

/* ═══ SIDEBAR ═══ */
.chat-sidebar {
border-left: 1px solid rgba(0,0,0,0.06);
display: flex;
flex-direction: column;
background: linear-gradient(180deg, var(--card-bg) 0%, rgba(var(--primary-rgb), 0.015) 100%);
position: relative;
}
.chat-sidebar::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 120px;
background: linear-gradient(180deg, rgba(var(--primary-rgb), 0.04) 0%, transparent 100%);
pointer-events: none;
z-index: 0;
}
.chat-sidebar-header {
padding: 20px 20px 16px;
border-bottom: 1px solid rgba(0,0,0,0.05);
position: relative;
z-index: 1;
}
.chat-sidebar-header h3 {
margin-bottom: 14px;
font-size: 1.15em;
font-weight: 800;
letter-spacing: -0.3px;
background: linear-gradient(135deg, var(--text) 0%, var(--primary) 150%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.chat-search {
width: 100%;
padding: 11px 18px;
border: 2px solid rgba(0,0,0,0.06);
border-radius: 14px;
font-family: inherit;
font-size: 0.88em;
background: rgba(var(--primary-rgb), 0.03);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.chat-search:focus {
border-color: var(--primary);
background: var(--card-bg);
box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.08), 0 2px 8px rgba(var(--primary-rgb), 0.1);
outline: none;
}
.chat-search::placeholder { color: var(--text-light); opacity: 0.6; }

/* ═══ ROOM LIST ═══ */
.chat-rooms { flex: 1; overflow-y: auto; padding: 8px 0; position: relative; z-index: 1; }
.chat-rooms::-webkit-scrollbar { width: 3px; }
.chat-rooms::-webkit-scrollbar-thumb { background: rgba(var(--primary-rgb), 0.15); border-radius: 10px; }
.chat-rooms::-webkit-scrollbar-track { background: transparent; }

.chat-room {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 18px;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
border-bottom: none;
position: relative;
margin: 2px 8px;
border-radius: 14px;
}
.chat-room:hover { background: rgba(var(--primary-rgb), 0.06); transform: translateX(-2px); }
.chat-room.active {
background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.1), rgba(var(--primary-rgb), 0.05));
border-right: none;
box-shadow: 0 2px 12px rgba(var(--primary-rgb), 0.08);
}
.chat-room.active::before {
content: '';
position: absolute;
right: 0; top: 50%;
transform: translateY(-50%);
width: 4px; height: 60%;
background: linear-gradient(180deg, var(--primary), #5b8def);
border-radius: 4px 0 0 4px;
}

.chat-room-avatar {
width: 48px; height: 48px;
border-radius: 16px;
background: linear-gradient(135deg, var(--primary), #5b8def);
display: flex; align-items: center; justify-content: center;
font-size: 1.15em; flex-shrink: 0; color: #fff;
box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.25);
transition: all 0.25s ease;
}
.chat-room:hover .chat-room-avatar { transform: scale(1.05); box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.3); }
.chat-room-avatar svg { width: 22px; height: 22px; stroke: #fff; stroke-width: 1.8; }

.chat-room-info { flex: 1; min-width: 0; }
.chat-room-name {
font-weight: 700; font-size: 0.9em; margin-bottom: 3px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
color: var(--text); letter-spacing: -0.2px;
}
.chat-room.active .chat-room-name { color: var(--primary); }
.chat-room-last {
font-size: 0.78em; color: var(--text-light);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
line-height: 1.4; opacity: 0.75;
}

.chat-room-badge {
min-width: 22px; height: 22px; padding: 0 7px;
background: linear-gradient(135deg, #ef4444, #f97316);
color: #fff; border-radius: 50px;
font-size: 0.72em; font-weight: 800;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: 0 3px 10px rgba(239, 68, 68, 0.35);
animation: badgePulse 2s ease infinite;
}
@keyframes badgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

.chat-room-admin-peek { margin-top: 2px; }
.chat-admin-badge {
font-size: 0.65em;
background: linear-gradient(135deg, #f59e0b, #f97316);
color: #fff; padding: 2px 8px; border-radius: 8px;
font-weight: 700; letter-spacing: 0.3px;
}

/* ═══ MAIN CHAT AREA ═══ */
.chat-main { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; background: var(--card-bg); position: relative; }

.chat-header {
padding: 14px 24px;
border-bottom: 1px solid rgba(0,0,0,0.05);
display: flex; align-items: center; justify-content: space-between;
flex-shrink: 0; flex-grow: 0;
background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.03), transparent);
backdrop-filter: blur(12px);
position: relative; z-index: 2;
}
.chat-header::after {
content: '';
position: absolute; bottom: 0; left: 10%; right: 10%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.15), transparent);
}
.chat-header-info { display: flex; align-items: center; gap: 16px; }
.chat-header-avatar {
width: 48px; height: 48px; border-radius: 16px;
background: linear-gradient(135deg, var(--primary), #5b8def, #8b5cf6);
display: flex; align-items: center; justify-content: center;
font-size: 1.2em; color: #fff;
box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.3);
transition: all 0.3s ease;
}
.chat-header-avatar svg { stroke: #fff; stroke-width: 1.8; }
.chat-header-avatar:hover { transform: scale(1.05) rotate(-3deg); }
.chat-header-name { font-weight: 800; font-size: 1.1em; letter-spacing: -0.3px; color: var(--text); }
.chat-header-status { font-size: 0.82em; color: var(--text-light); opacity: 0.7; }

/* Members Bar */
.chat-members-bar {
display: flex; align-items: center; gap: 6px;
padding: 8px 18px;
background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.03), rgba(var(--primary-rgb), 0.01));
border-bottom: 1px solid rgba(0,0,0,0.04);
overflow-x: auto; flex-shrink: 0;
}
.chat-members-bar::-webkit-scrollbar { height: 0; }
.chat-member-chip {
display: flex; align-items: center; gap: 5px;
padding: 4px 10px; background: var(--card-bg);
border-radius: 20px; font-size: 0.73em; font-weight: 600;
white-space: nowrap; border: 1.5px solid rgba(0,0,0,0.06);
color: var(--text); transition: all 0.2s ease;
}
.chat-member-chip:hover { border-color: rgba(var(--primary-rgb), 0.2); background: rgba(var(--primary-rgb), 0.04); }
.chat-member-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.chat-member-dot.online {
background: #10b981;
box-shadow: 0 0 6px rgba(16,185,129,0.6), 0 0 12px rgba(16,185,129,0.2);
animation: onlinePulse 2.5s ease infinite;
}
@keyframes onlinePulse {
0%, 100% { box-shadow: 0 0 6px rgba(16,185,129,0.6); }
50% { box-shadow: 0 0 10px rgba(16,185,129,0.8), 0 0 20px rgba(16,185,129,0.3); }
}
.chat-member-dot.offline { background: #cbd5e1; }

/* ═══ MESSAGES AREA ═══ */
.chat-messages {
flex: 1 1 0%; overflow-y: auto; padding: 24px 20px;
min-height: 0;
display: flex; flex-direction: column; gap: 6px;
background:
    radial-gradient(ellipse at 20% 50%, rgba(var(--primary-rgb), 0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(91,141,239,0.03) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 80%, rgba(139,92,246,0.02) 0%, transparent 40%),
    var(--card-bg);
position: relative;
}
.chat-messages::before {
content: '';
position: absolute; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.015'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
pointer-events: none; z-index: 0;
}
.chat-messages > * { position: relative; z-index: 1; }
.chat-messages::-webkit-scrollbar { width: 5px; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(var(--primary-rgb), 0.15); border-radius: 10px; }
.chat-messages::-webkit-scrollbar-thumb:hover { background: rgba(var(--primary-rgb), 0.25); }
.chat-messages::-webkit-scrollbar-track { background: transparent; }

@keyframes chatMsgIn {
from { opacity: 0; transform: translateY(12px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-message { max-width: 72%; display: flex; gap: 10px; animation: chatMsgIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); margin-bottom: 2px; }
.chat-message.sent { align-self: flex-start; flex-direction: row-reverse; }
.chat-message.received { align-self: flex-end; }

.chat-message-avatar {
width: 36px; height: 36px; border-radius: 12px;
background: linear-gradient(135deg, var(--primary), #5b8def);
display: flex; align-items: center; justify-content: center;
font-size: 0.72em; font-weight: 800; color: #fff; flex-shrink: 0;
box-shadow: 0 3px 10px rgba(var(--primary-rgb), 0.2);
letter-spacing: 0.5px;
}

.chat-message-content {
background: rgba(var(--primary-rgb), 0.04);
padding: 10px 16px; border-radius: 18px; border-bottom-right-radius: 6px;
max-width: 100%; position: relative;
border: 1px solid rgba(0,0,0,0.03);
backdrop-filter: blur(4px); transition: all 0.2s ease;
}
.chat-message-content:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
.chat-message.sent .chat-message-content {
background: linear-gradient(135deg, #3bc4f2, #5b8def);
color: #fff; border-bottom-right-radius: 18px; border-bottom-left-radius: 6px;
border: none; box-shadow: 0 4px 18px rgba(59, 196, 242, 0.25);
}
.chat-message.sent .chat-message-content:hover { box-shadow: 0 6px 24px rgba(59, 196, 242, 0.35); transform: translateY(-1px); }

.chat-message-sender { font-size: 0.76em; font-weight: 800; margin-bottom: 3px; color: var(--primary); letter-spacing: 0.2px; }
.chat-message.sent .chat-message-sender { color: rgba(255,255,255,0.85); }
.chat-message-text { font-size: 0.92em; line-height: 1.65; word-break: break-word; }
.chat-message-time { font-size: 0.7em; color: var(--text-light); margin-top: 4px; text-align: left; opacity: 0.6; font-weight: 500; }
.chat-message.sent .chat-message-time { color: rgba(255,255,255,0.55); }

.chat-date-separator { text-align: center; padding: 16px 0 10px; }
.chat-date-separator span {
background: rgba(var(--primary-rgb), 0.06); color: var(--text-light);
font-size: 0.72em; font-weight: 700; padding: 5px 18px;
border-radius: 20px; backdrop-filter: blur(8px);
border: 1px solid rgba(0,0,0,0.03); letter-spacing: 0.3px;
}
.chat-empty-state { text-align: center; color: var(--text-light); padding: 80px 20px; animation: chatMsgIn 0.5s ease; }

.chat-message-file {
display: flex; align-items: center; gap: 12px;
padding: 12px 16px; background: rgba(0,0,0,0.04);
border-radius: 14px; margin-top: 8px; cursor: pointer;
transition: all 0.25s ease; border: 1px solid rgba(0,0,0,0.04);
}
.chat-message-file:hover { background: rgba(0,0,0,0.08); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.chat-message-file-icon { font-size: 1.6em; }
.chat-message-file-info { flex: 1; }
.chat-message-file-name { font-weight: 700; font-size: 0.83em; }
.chat-message-file-size { font-size: 0.72em; color: var(--text-light); margin-top: 2px; }

.chat-message-image {
max-width: 300px; border-radius: 14px; margin-top: 8px;
overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.chat-message-image img { transition: transform 0.3s ease; display: block; width: 100%; }
.chat-message-image img:hover { transform: scale(1.04); }

/* ═══ INPUT AREA ═══ */
.chat-input-area {
padding: 14px 20px; border-top: 1px solid rgba(0,0,0,0.05);
flex: 0 0 auto;
background: linear-gradient(0deg, var(--card-bg) 80%, rgba(var(--primary-rgb), 0.02) 100%);
z-index: 10;
position: relative;
}
.chat-input-wrapper { display: flex; gap: 10px; align-items: flex-end; }
.chat-input-box { flex: 1; position: relative; }
.chat-input {
width: 100%; padding: 12px 48px 12px 16px;
border: 2px solid rgba(0,0,0,0.06); border-radius: 20px;
font-family: inherit; font-size: 0.9em; resize: none;
min-height: 46px; max-height: 130px;
background: rgba(var(--primary-rgb), 0.02);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.chat-input:focus {
outline: none; border-color: var(--primary); background: var(--card-bg);
box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.08), 0 4px 16px rgba(var(--primary-rgb), 0.06);
}
.chat-input::placeholder { color: var(--text-light); opacity: 0.5; }
.chat-emoji-btn {
position: absolute; left: 10px; bottom: 7px;
width: 34px; height: 34px; border: none; background: transparent;
border-radius: 50%; cursor: pointer; font-size: 1.25em;
transition: all 0.25s ease;
}
.chat-emoji-btn:hover { background: rgba(var(--primary-rgb), 0.08); transform: scale(1.2) rotate(10deg); }
.chat-send-btn {
width: 46px; height: 46px; border: none;
background: linear-gradient(135deg, var(--primary), #5b8def);
border-radius: 16px; cursor: pointer; font-size: 1.15em; color: #fff;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.3);
flex-shrink: 0; position: relative; overflow: hidden;
}
.chat-send-btn::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
opacity: 0; transition: opacity 0.3s ease;
}
.chat-send-btn:hover { transform: scale(1.08) translateY(-1px); box-shadow: 0 6px 24px rgba(var(--primary-rgb), 0.4); }
.chat-send-btn:hover::before { opacity: 1; }
.chat-send-btn:active { transform: scale(0.95); }
.chat-file-btn {
width: 44px; height: 44px; border: none;
background: rgba(var(--primary-rgb), 0.06);
border-radius: 14px; cursor: pointer; font-size: 1.15em;
transition: all 0.25s ease;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.chat-file-btn:hover { background: rgba(var(--primary-rgb), 0.12); transform: scale(1.08); }

/* ═══ POPUP NOTIFICATIONS ═══ */
@keyframes chatPopupSlideIn {
from { opacity: 0; transform: translateX(120px) scale(0.9); }
to { opacity: 1; transform: translateX(0) scale(1); }
}
.chat-popup-notif {
position: fixed; top: 16px; left: 16px; z-index: 99999;
animation: chatPopupSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
transition: top 0.3s ease, opacity 0.3s ease;
}
.chat-popup-notif.chat-popup-exit { opacity: 0; transform: translateX(120px) scale(0.9); transition: all 0.4s ease; }
.chat-popup-inner {
display: flex; align-items: center; gap: 14px;
padding: 14px 18px; background: var(--card-bg);
border-radius: 18px;
box-shadow: 0 16px 48px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
border-right: 4px solid var(--primary);
cursor: pointer; min-width: 300px; max-width: 400px;
direction: rtl; transition: all 0.25s ease; backdrop-filter: blur(20px);
}
.chat-popup-inner:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 20px 56px rgba(0,0,0,0.15), 0 6px 16px rgba(0,0,0,0.08); }
.chat-popup-avatar {
width: 44px; height: 44px; border-radius: 14px;
background: linear-gradient(135deg, var(--primary), #5b8def);
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 0.82em; font-weight: 800; flex-shrink: 0;
box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.25);
}
.chat-popup-body { flex: 1; min-width: 0; }
.chat-popup-header { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.chat-popup-header strong { font-size: 0.88em; font-weight: 700; }
.chat-popup-room {
font-size: 0.7em; color: var(--primary);
background: rgba(var(--primary-rgb), 0.08);
padding: 2px 10px; border-radius: 10px; font-weight: 600;
}
.chat-popup-text { font-size: 0.82em; color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-popup-close {
border: none; background: transparent; cursor: pointer;
font-size: 0.85em; color: var(--text-light);
padding: 6px; border-radius: 50%; transition: all 0.2s ease;
}
.chat-popup-close:hover { background: rgba(0,0,0,0.06); transform: scale(1.1); }
.emoji-picker {
position: absolute;
bottom: 60px;
left: 0;
background: var(--card-bg);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
padding: 15px;
display: none;
z-index: 100;
}
.emoji-picker.show { display: block; }
.emoji-grid {
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 5px;
}
.emoji-item {
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 8px;
font-size: 1.2em;
transition: var(--transition);
}
.emoji-item:hover { background: var(--bg); transform: scale(1.2); }
.employees-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.employee-row {
display: grid;
grid-template-columns: 60px 1fr 120px 200px 100px 150px;
align-items: center;
gap: 15px;
padding: 20px 25px;
background: var(--card-bg);
border-radius: var(--radius);
border: 1px solid var(--card-border);
transition: var(--transition);
}
.employee-row:hover {
box-shadow: var(--shadow);
transform: translateX(-5px);
}
.employee-row-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--secondary));
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 700;
font-size: 1em;
background-size: cover;
background-position: center;
}
.employee-row-info { min-width: 0; }
.employee-row-name { font-weight: 700; font-size: 1em; margin-bottom: 3px; }
.employee-row-role { font-size: 0.85em; color: var(--text-light); }
.employee-row-team {
font-size: 0.8em;
color: var(--primary);
background: rgba(102,126,234,0.1);
padding: 5px 12px;
border-radius: 20px;
text-align: center;
}
.employee-row-stats { display: flex; gap: 25px; }
.employee-row-stat { text-align: center; }
.employee-row-stat-value { font-weight: 800; font-size: 1.1em; }
.employee-row-stat-label { font-size: 0.75em; color: var(--text-light); }
.employee-row-actions { display: flex; gap: 8px; justify-content: flex-end; }
.employees-hierarchy {
display: flex;
flex-direction: column;
gap: 30px;
padding: 20px;
}
.hierarchy-branch {
background: var(--card-bg);
border-radius: var(--radius-lg);
padding: 25px;
border: 1px solid var(--card-border);
position: relative;
}
.hierarchy-branch::before {
content: '';
position: absolute;
right: 50px;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(180deg, var(--primary), var(--secondary));
opacity: 0.3;
}
.hierarchy-branch-header {
display: flex;
align-items: center;
gap: 15px;
padding-bottom: 20px;
border-bottom: 2px solid var(--bg-secondary);
margin-bottom: 20px;
}
.hierarchy-branch-icon {
width: 50px;
height: 50px;
border-radius: 12px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.5em;
}
.hierarchy-branch-title {
font-size: 1.3em;
font-weight: 700;
color: var(--text);
}
.hierarchy-branch-subtitle {
font-size: 0.9em;
color: var(--text-light);
}
.hierarchy-employees {
display: flex;
flex-wrap: wrap;
gap: 15px;
padding-right: 30px;
}
.hierarchy-employee-card {
background: var(--bg);
border-radius: var(--radius);
padding: 20px;
min-width: 250px;
flex: 1;
max-width: 350px;
position: relative;
border: 1px solid var(--bg-secondary);
transition: var(--transition);
}
.hierarchy-employee-card:hover {
box-shadow: var(--shadow);
transform: translateY(-3px);
border-color: var(--primary);
}
.hierarchy-employee-card::before {
content: '';
position: absolute;
right: -15px;
top: 50%;
width: 15px;
height: 2px;
background: var(--primary);
opacity: 0.5;
}
.hierarchy-employee-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 15px;
}
.hierarchy-employee-avatar {
width: 45px;
height: 45px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--secondary));
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 600;
font-size: 0.95em;
background-size: cover;
background-position: center;
}
.hierarchy-employee-name {
font-weight: 700;
font-size: 1em;
color: var(--text);
}
.hierarchy-employee-role {
font-size: 0.8em;
color: var(--text-light);
}
.hierarchy-employee-stats {
display: flex;
gap: 15px;
margin-bottom: 12px;
}
.hierarchy-stat {
flex: 1;
text-align: center;
padding: 10px;
background: var(--card-bg);
border-radius: var(--radius-sm);
}
.hierarchy-stat-value {
font-weight: 800;
font-size: 1.1em;
color: var(--primary);
}
.hierarchy-stat-label {
font-size: 0.7em;
color: var(--text-light);
}
.hierarchy-employee-progress {
height: 6px;
background: var(--bg-secondary);
border-radius: 3px;
overflow: hidden;
margin-bottom: 10px;
}
.hierarchy-employee-progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--primary), var(--secondary));
border-radius: 3px;
transition: width 0.5s ease;
}
.hierarchy-employee-progress-label {
font-size: 0.75em;
color: var(--text-light);
display: flex;
justify-content: space-between;
}
.hierarchy-employee-actions {
display: flex;
gap: 8px;
margin-top: 12px;
}
.hierarchy-employee-actions .btn {
flex: 1;
padding: 8px;
font-size: 0.85em;
}
.employees-view-toggle {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.view-toggle-btn {
padding: 10px 20px;
border: 2px solid var(--bg-secondary);
background: var(--card-bg);
border-radius: var(--radius-sm);
cursor: pointer;
font-weight: 600;
transition: var(--transition);
}
.view-toggle-btn.active {
border-color: var(--primary);
background: rgba(102,126,234,0.1);
color: var(--primary);
}
.profile-header-large {
display: flex;
align-items: center;
gap: 25px;
padding: 30px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
border-radius: var(--radius-lg);
color: #fff;
margin-bottom: 25px;
}
.profile-avatar-large {
width: 100px;
height: 100px;
border-radius: 50%;
background: rgba(255,255,255,0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5em;
font-weight: 700;
border: 4px solid rgba(255,255,255,0.3);
background-size: cover;
background-position: center;
}
.profile-info-large h2 {
font-size: 1.8em;
font-weight: 800;
margin-bottom: 5px;
}
.profile-role {
font-size: 1.1em;
opacity: 0.9;
}
.profile-team {
font-size: 0.95em;
opacity: 0.8;
margin-top: 5px;
}
.profile-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 15px;
margin-bottom: 25px;
}
.profile-stat-card {
background: var(--bg);
border-radius: var(--radius);
padding: 20px;
text-align: center;
border: 1px solid var(--bg-secondary);
}
.profile-stat-icon {
font-size: 2em;
margin-bottom: 10px;
}
.profile-stat-value {
font-size: 1.3em;
font-weight: 800;
color: var(--primary);
margin-bottom: 5px;
word-break: break-all;
}
.profile-stat-label {
font-size: 0.85em;
color: var(--text-light);
}
.profile-contact-info, .profile-recent-activity {
background: var(--card-bg);
border-radius: var(--radius);
padding: 20px;
margin-bottom: 20px;
border: 1px solid var(--card-border);
}
.profile-contact-info h4, .profile-recent-activity h4 {
font-size: 1.1em;
margin-bottom: 15px;
color: var(--text);
}
.profile-contact-info p {
margin-bottom: 8px;
color: var(--text-light);
}
.activity-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.activity-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: var(--bg);
border-radius: var(--radius-sm);
}
.activity-icon {
font-size: 1.2em;
}
.activity-text {
flex: 1;
font-size: 0.9em;
}
.activity-time {
font-size: 0.8em;
color: var(--text-light);
}
.no-activity {
text-align: center;
color: var(--text-light);
padding: 20px;
}
.personal-dashboard-header {
grid-column: 1 / -1;
background: linear-gradient(135deg, var(--primary), var(--secondary));
border-radius: var(--radius-lg);
padding: 30px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
color: #fff;
}
.personal-greeting {
display: flex;
align-items: center;
gap: 20px;
}
.personal-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background: rgba(255,255,255,0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 2em;
font-weight: 700;
border: 3px solid rgba(255,255,255,0.3);
background-size: cover;
background-position: center;
}
.personal-info h2 {
font-size: 1.8em;
font-weight: 700;
margin-bottom: 5px;
}
.personal-info p {
opacity: 0.9;
font-size: 1em;
}
.personal-quick-stats {
display: flex;
gap: 30px;
}
.quick-stat-circle {
text-align: center;
position: relative;
width: 90px;
}
.quick-stat-circle .circular-chart {
width: 70px;
height: 70px;
display: block;
margin: 0 auto 8px;
}
.circular-chart .circle-bg {
fill: none;
stroke: rgba(255,255,255,0.2);
stroke-width: 3;
}
.circular-chart .circle {
fill: none;
stroke: #fff;
stroke-width: 3;
stroke-linecap: round;
animation: progress 1s ease-out forwards;
}
@keyframes progress {
0% { stroke-dasharray: 0, 100; }
}
.quick-stat-value {
font-size: 1.5em;
font-weight: 800;
}
.quick-stat-label {
font-size: 0.8em;
opacity: 0.9;
}
.quick-stat-circle.complete .quick-stat-value {
color: #10b981;
}
.personal-dashboard {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
.tasks-widget, .activity-widget, .progress-widget {
background: var(--card-bg);
border-radius: var(--radius);
padding: 20px;
border: 1px solid var(--card-border);
}
.task-item-mini {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: var(--bg);
border-radius: var(--radius-sm);
margin-bottom: 8px;
transition: var(--transition);
}
.task-item-mini:hover {
background: var(--bg-secondary);
}
.task-item-mini.done {
opacity: 0.6;
text-decoration: line-through;
}
.task-time {
font-size: 0.85em;
color: var(--primary);
font-weight: 600;
min-width: 50px;
}
.task-title-mini {
flex: 1;
font-size: 0.95em;
}
.upcoming-tasks {
margin-top: 20px;
padding-top: 15px;
border-top: 1px solid var(--bg-secondary);
}
.upcoming-tasks h5 {
font-size: 0.9em;
color: var(--text-light);
margin-bottom: 10px;
}
.upcoming-task-item {
display: flex;
justify-content: space-between;
padding: 8px 0;
font-size: 0.85em;
border-bottom: 1px dashed var(--bg-secondary);
}
.upcoming-date {
color: var(--primary);
font-weight: 600;
}
.activity-item-mini {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: var(--bg);
border-radius: var(--radius-sm);
margin-bottom: 8px;
}
.activity-icon-mini {
font-size: 1.2em;
}
.activity-content {
flex: 1;
}
.activity-title {
display: block;
font-weight: 600;
font-size: 0.95em;
}
.activity-amount {
font-size: 0.85em;
color: var(--success);
}
.activity-time-mini {
font-size: 0.8em;
color: var(--text-light);
}
.progress-bar-large {
height: 12px;
background: var(--bg-secondary);
border-radius: 6px;
overflow: hidden;
margin: 15px 0;
}
.progress-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--primary), var(--secondary));
border-radius: 6px;
transition: width 0.5s ease;
}
.progress-stats {
text-align: center;
font-size: 0.9em;
color: var(--text-light);
margin-bottom: 20px;
}
.mini-chart {
display: flex;
justify-content: space-between;
align-items: flex-end;
height: 80px;
padding-top: 10px;
}
.mini-bar {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}
.mini-bar-fill {
width: 20px;
background: linear-gradient(180deg, var(--primary), var(--secondary));
border-radius: 4px 4px 0 0;
min-height: 5px;
transition: height 0.3s ease;
}
.mini-bar-label {
font-size: 0.7em;
color: var(--text-light);
margin-top: 5px;
}
.no-data {
text-align: center;
color: var(--text-light);
padding: 20px;
font-size: 0.9em;
}
.org-tree-modern { padding: 30px; }
.org-tree-hq { text-align: center; margin-bottom: 40px; }
.org-hq-card {
display: inline-block;
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: #fff;
padding: 25px 50px;
border-radius: var(--radius-lg);
box-shadow: 0 10px 40px rgba(102,126,234,0.4);
}
.org-hq-icon { font-size: 2.5em; margin-bottom: 10px; }
.org-hq-name { font-size: 1.5em; font-weight: 800; }
.org-hq-manager { opacity: 0.9; margin-top: 5px; }
.org-tree-line {
width: 3px;
height: 40px;
background: linear-gradient(180deg, var(--primary), var(--bg-secondary));
margin: 0 auto;
}
.org-branches-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 20px;
}
.org-branch-card {
background: var(--card-bg);
border-radius: var(--radius-lg);
border: 1px solid var(--card-border);
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
}
.org-branch-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.org-branch-header {
padding: 20px;
background: linear-gradient(135deg, rgba(102,126,234,0.1), rgba(255,255,255,0.5));
display: flex;
justify-content: space-between;
align-items: center;
}
.org-branch-info { display: flex; align-items: center; gap: 15px; }
.org-branch-icon {
width: 50px;
height: 50px;
border-radius: var(--radius);
background: linear-gradient(135deg, var(--primary), var(--secondary));
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
}
.org-branch-name { font-weight: 700; font-size: 1.1em; }
.org-branch-type { font-size: 0.85em; color: var(--text-light); }
.org-branch-body { padding: 20px; }
.org-branch-detail {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
font-size: 0.9em;
}
.org-branch-detail-icon { width: 30px; text-align: center; }
.org-branch-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid var(--bg);
}
.org-branch-stat { text-align: center; }
.org-branch-stat-value { font-weight: 800; font-size: 1.2em; color: var(--primary); }
.org-branch-stat-label { font-size: 0.75em; color: var(--text-light); }
.profile-card {
background: var(--card-bg);
border-radius: var(--radius-lg);
padding: 30px;
display: flex;
gap: 30px;
margin-bottom: 30px;
box-shadow: var(--shadow);
border: 1px solid var(--card-border);
}
.profile-avatar-section {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
.profile-avatar {
width: 120px;
height: 120px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--secondary));
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5em;
font-weight: 700;
color: #fff;
background-size: cover;
background-position: center;
}
.profile-form { flex: 1; }
.settings-section {
background: var(--card-bg);
border-radius: var(--radius-lg);
padding: 25px 30px;
margin-bottom: 20px;
box-shadow: var(--shadow);
border: 1px solid var(--card-border);
}
.settings-title {
font-size: 1.1em;
font-weight: 700;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid var(--bg);
}
.settings-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 0;
border-bottom: 1px solid var(--bg);
}
.settings-row:last-child { border-bottom: none; }
.settings-label { font-weight: 600; }
.settings-desc { font-size: 0.85em; color: var(--text-light); margin-top: 5px; }
.theme-selector { display: flex; gap: 12px; flex-wrap: wrap; }
.wa-templates-container {
background: var(--card-bg);
border-radius: var(--radius-lg);
padding: 25px;
margin-top: 20px;
}
.wa-template-item {
display: flex;
align-items: center;
gap: 15px;
padding: 15px;
background: var(--bg);
border-radius: var(--radius);
margin-bottom: 10px;
}
.wa-template-text {
flex: 1;
font-size: 0.9em;
color: var(--text);
}
.wa-template-actions { display: flex; gap: 8px; }
.tabs-container { margin-bottom: 20px; }
.tab-buttons { display: flex; gap: 5px; margin-bottom: 20px; flex-wrap: wrap; }
.tab-btn {
padding: 12px 24px;
border: none;
background: var(--bg);
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 0.95em;
font-weight: 600;
transition: var(--transition);
font-family: inherit;
}
.tab-btn:hover { background: var(--bg-secondary); }
.tab-btn.active {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: #fff;
}
.tab-content { display: none; }
.tab-content.active { display: block; }
.permissions-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 15px;
}
.permission-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 18px;
background: var(--bg);
border-radius: var(--radius-sm);
}
.permission-label { font-size: 0.9em; font-weight: 500; }
.permission-category {
background: var(--card-bg);
border-radius: var(--radius);
padding: 20px;
margin-bottom: 20px;
border: 1px solid var(--card-border);
}
.permission-category-title {
font-weight: 700;
font-size: 1em;
margin-bottom: 15px;
color: var(--primary);
display: flex;
align-items: center;
gap: 10px;
}
.bonus-tiers-container { margin-top: 15px; }
.bonus-tier-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr 50px;
gap: 10px;
align-items: center;
margin-bottom: 10px;
}
.bonus-tier-row input {
padding: 10px;
border: 1px solid var(--bg-secondary);
border-radius: var(--radius-sm);
font-family: inherit;
}
.dashboard-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
}
.dashboard-grid.agent {
grid-template-columns: 1fr 1fr;
}
.widget {
background: var(--card-bg);
border-radius: var(--radius-lg);
padding: 25px;
box-shadow: var(--shadow);
border: 1px solid var(--card-border);
}
.widget-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.widget-title {
font-weight: 700;
font-size: 1.1em;
display: flex;
align-items: center;
gap: 10px;
}
.mini-calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
font-size: 0.8em;
}
.mini-calendar-day {
text-align: center;
padding: 8px 5px;
border-radius: 8px;
cursor: pointer;
}
.mini-calendar-day.today {
background: var(--primary);
color: #fff;
}
.mini-calendar-day.has-task {
background: rgba(102,126,234,0.2);
font-weight: 700;
}
.agent-stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.agent-stat-box {
background: var(--bg);
border-radius: var(--radius);
padding: 20px;
text-align: center;
}
.agent-stat-value {
font-size: 2em;
font-weight: 800;
color: var(--primary);
}
.agent-stat-label {
font-size: 0.85em;
color: var(--text-light);
margin-top: 5px;
}
.comparison-bar {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
}
.comparison-name {
width: 100px;
font-weight: 600;
font-size: 0.9em;
}
.comparison-bar-bg {
flex: 1;
height: 25px;
background: var(--bg);
border-radius: 20px;
overflow: hidden;
}
.comparison-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(--primary), var(--secondary));
border-radius: 20px;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 10px;
color: #fff;
font-size: 0.75em;
font-weight: 700;
}
.version-badge {
font-size: 0.7em;
padding: 3px 8px;
background: var(--bg-secondary);
border-radius: 20px;
margin-right: 10px;
color: var(--text-light);
}
.password-input-group { position: relative; }
.password-toggle {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
font-size: 1.1em;
}
/* Nav: show only דשבורד, CRM, דאטה, משימות, צ'אט + עוד. Rest goes to More dropdown */
.nav-menu > .nav-category:nth-child(5) { display: none !important; }
.nav-menu > .nav-divider:nth-child(4) { display: none !important; }
.nav-menu > .nav-divider:nth-child(6) { display: none !important; }
@media (max-width: 1400px) {
.nav-menu { display: none; }
.chat-container { grid-template-columns: 1fr; }
.chat-sidebar {
position: fixed !important;
top: 70px;
right: -100%;
width: 320px;
max-width: 85vw;
height: calc(100vh - 70px);
z-index: 1500;
background: var(--card-bg);
box-shadow: -5px 0 20px rgba(0,0,0,0.15);
transition: right 0.3s ease;
border-left: 1px solid var(--bg);
}
.chat-sidebar.mobile-open {
right: 0 !important;
}
.chat-sidebar-overlay.show {
display: block;
}
.chat-toggle-btn {
display: flex !important;
}
.dashboard-grid { grid-template-columns: 1fr; }
.employee-row { grid-template-columns: 50px 1fr 100px 100px; }
.employee-row-stats { display: none; }
.top-nav { overflow: visible; }
.nav-right { gap: 6px; }
.nav-user-info { display: none; }
}
.loading-overlay {
position: fixed;
inset: 0;
background: rgba(255,255,255,0.95);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 10000;
}
.loading-spinner {
width: 50px;
height: 50px;
border: 4px solid var(--bg-secondary);
border-top-color: var(--primary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.loading-text {
margin-top: 20px;
font-weight: 600;
color: var(--text-light);
}
.quick-deal-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.3);
z-index: 5999;
display: none;
}
.quick-deal-backdrop.show { display: block; }
.quick-deal-form {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 380px;
background: #fff;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
z-index: 6000;
display: none;
animation: quickDealIn 0.3s ease-out;
}
.quick-deal-form.show { display: block; }
@keyframes quickDealIn {
from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.quick-deal-header {
display: flex;
align-items: center;
gap: 10px;
padding: 15px 20px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: #fff;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.quick-deal-body { padding: 25px; }
.quick-deal-field { margin-bottom: 18px; }
.quick-deal-field label {
display: block;
font-size: 0.85em;
color: var(--text-light);
margin-bottom: 8px;
font-weight: 500;
}
.quick-deal-field label.required::after {
content: '*';
color: var(--danger);
margin-right: 4px;
}
.quick-deal-input {
width: 100%;
padding: 12px 15px;
border: 1px solid var(--bg-secondary);
border-radius: var(--radius-sm);
font-size: 0.95em;
font-family: inherit;
transition: var(--transition);
}
.quick-deal-input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(102,126,234,0.1);
}
.quick-deal-row { display: flex; gap: 15px; }
.quick-deal-row > div { flex: 1; }
.quick-deal-footer {
display: flex;
gap: 12px;
padding: 15px 25px;
background: var(--bg);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.form-builder-container {
min-height: 300px;
}
.available-fields-grid {
display: flex;
flex-direction: column;
gap: 0;
max-height: 400px;
overflow-y: auto;
padding: 8px;
background: var(--bg);
border-radius: var(--radius-sm);
border: 1px solid #e2e8f0;
}
.available-fields-grid h5 {
font-size: 0.8em;
color: var(--text-light);
padding: 8px 4px 4px;
margin: 0;
position: sticky;
top: 0;
background: var(--bg);
z-index: 1;
}
.field-options-grid {
display: flex;
flex-direction: column;
gap: 3px;
}
.field-option {
padding: 8px 10px;
background: var(--card-bg, #fff);
border-radius: 6px;
cursor: pointer;
transition: var(--transition);
border: 1px solid transparent;
display: flex;
align-items: center;
gap: 8px;
font-size: 0.82em;
}
.field-option:hover {
border-color: var(--primary-light);
background: rgba(var(--primary-rgb), 0.05);
}
.field-option.selected {
background: var(--primary);
color: #fff;
border-color: var(--primary);
}
.field-option.section-option {
border: 1.5px dashed var(--primary);
}
.field-option.section-option.selected {
border-style: solid;
background: rgba(16,185,129,0.15);
color: var(--text);
}
.field-option .field-icon {
font-size: 1em;
flex-shrink: 0;
}
.selected-fields-list {
min-height: 120px;
max-height: 400px;
overflow-y: auto;
background: var(--bg);
border-radius: var(--radius-sm);
padding: 8px;
border: 1px solid #e2e8f0;
}
.selected-field-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
background: var(--card-bg, #fff);
border-radius: 6px;
margin-bottom: 4px;
border: 1px solid #e8ecf0;
transition: all 0.15s ease;
}
.selected-field-item:hover {
border-color: var(--primary-light);
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.selected-field-item:last-child {
margin-bottom: 0;
}
.selected-field-item .drag-handle {
color: var(--text-lighter);
cursor: grab;
font-size: 0.9em;
flex-shrink: 0;
}
.selected-field-item .field-info {
flex: 1;
min-width: 0;
}
.selected-field-item .field-name {
font-weight: 600;
font-size: 0.85em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.selected-field-item .field-type {
font-size: 0.72em;
color: var(--text-light);
}
.selected-field-actions {
display: flex;
align-items: center;
gap: 3px;
flex-shrink: 0;
}
.sf-btn {
width: 26px;
height: 26px;
border: 1px solid #e2e8f0;
background: var(--card-bg, #fff);
border-radius: 5px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75em;
color: var(--text-light);
transition: all 0.15s;
padding: 0;
}
.sf-btn:hover {
border-color: var(--primary);
color: var(--primary);
background: rgba(var(--primary-rgb), 0.05);
}
.sf-btn.sf-btn-danger:hover {
border-color: var(--danger);
color: var(--danger);
background: rgba(239,68,68,0.05);
}
.sf-btn.sf-btn-disabled {
opacity: 0.3;
pointer-events: none;
}
.sf-required-toggle {
display: flex;
align-items: center;
gap: 3px;
padding: 2px 7px;
border-radius: 10px;
font-size: 0.68em;
font-weight: 600;
cursor: pointer;
border: 1px solid;
transition: all 0.15s;
white-space: nowrap;
flex-shrink: 0;
}
.sf-required-toggle.is-required {
background: rgba(239,68,68,0.1);
color: #dc2626;
border-color: rgba(239,68,68,0.3);
}
.sf-required-toggle.not-required {
background: rgba(100,116,139,0.08);
color: #94a3b8;
border-color: rgba(100,116,139,0.2);
}
.sf-required-toggle:hover {
opacity: 0.8;
}
.custom-field-builder {
background: var(--bg);
padding: 15px;
border-radius: var(--radius-sm);
margin-top: 20px;
}
.custom-field-builder h5 {
margin-bottom: 12px;
font-size: 0.95em;
}
.field-options-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.option-tag {
background: var(--primary);
color: #fff;
padding: 4px 10px;
border-radius: 15px;
font-size: 0.8em;
display: flex;
align-items: center;
gap: 5px;
}
.option-tag button {
background: none;
border: none;
color: #fff;
cursor: pointer;
font-size: 1em;
padding: 0;
line-height: 1;
}
.color-palette {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.color-option {
width: 28px;
height: 28px;
border-radius: 50%;
cursor: pointer;
transition: var(--transition);
border: 2px solid transparent;
}
.color-option:hover {
transform: scale(1.1);
}
.color-option.selected {
border: 3px solid var(--text);
box-shadow: 0 0 0 2px #fff;
}
.org-tree-container {
padding: 20px;
}
.org-level {
margin-bottom: 30px;
}
.org-level-title {
font-size: 0.85em;
color: var(--text-light);
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 1px;
}
.org-cards-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: flex-start;
}
.org-connector {
width: 2px;
height: 30px;
background: linear-gradient(to bottom, var(--primary), var(--primary-light));
margin: 0 auto 20px;
}
.org-sub-branches {
margin-top: 15px;
padding-top: 15px;
border-top: 1px dashed var(--bg-secondary);
}
.org-sub-title {
font-size: 0.8em;
color: var(--text-light);
margin-bottom: 10px;
}
.org-sub-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.org-branch-card.sub-branch {
min-width: 200px;
max-width: 250px;
background: var(--bg);
border: 1px solid var(--bg-secondary);
}
.org-branch-card.sub-branch .org-branch-icon {
font-size: 1em;
}
.org-branch-card.sub-branch .org-branch-name {
font-size: 0.9em;
}
.org-branch-card.sub-branch .org-branch-stats {
gap: 10px;
}
.org-branch-card.sub-branch .org-branch-stat-value {
font-size: 1em;
}
.voip-dialer { position: fixed; bottom: 20px; right: 20px; width: 320px; background: var(--card-bg); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); z-index: 2000; overflow: hidden; display: none; }
.voip-dialer.show { display: block; animation: dialerSlideUp 0.3s ease; }
@keyframes dialerSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.voip-header { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; padding: 20px; display: flex; justify-content: space-between; align-items: center; }
.voip-title { font-weight: 700; font-size: 1.1em; display: flex; align-items: center; gap: 10px; }
.voip-close { width: 30px; height: 30px; border: none; background: rgba(255,255,255,0.2); border-radius: 50%; color: #fff; cursor: pointer; font-size: 1em; }
.voip-display { padding: 20px; text-align: center; }
.voip-number { font-size: 1.5em; font-weight: 700; color: var(--text); min-height: 40px; direction: ltr; }
.voip-status { font-size: 0.85em; color: var(--text-light); margin-top: 5px; }
.voip-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 15px 20px; direction: ltr; }
.voip-key { height: 55px; border: none; background: var(--bg); border-radius: var(--radius-sm); font-size: 1.3em; font-weight: 600; cursor: pointer; transition: var(--transition); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.voip-key:hover { background: var(--bg-secondary); transform: scale(1.05); }
.voip-key:active { transform: scale(0.95); }
.voip-key-sub { font-size: 0.5em; color: var(--text-light); margin-top: 2px; }
.voip-actions { display: flex; gap: 15px; padding: 15px 20px; justify-content: center; }
.voip-call-btn { width: 60px; height: 60px; border: none; border-radius: 50%; font-size: 1.5em; cursor: pointer; transition: var(--transition); }
.voip-call-btn.call { background: linear-gradient(135deg, var(--success), #38a169); color: #fff; }
.voip-call-btn.hangup { background: linear-gradient(135deg, var(--danger), #e53e3e); color: #fff; }
.voip-call-btn:hover { transform: scale(1.1); box-shadow: var(--shadow); }
.voip-history { max-height: 200px; overflow-y: auto; border-top: 1px solid var(--bg); }
.voip-history-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--bg); cursor: pointer; transition: var(--transition); }
.voip-history-item:hover { background: var(--bg); }
.voip-history-icon { width: 35px; height: 35px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; }
.voip-history-icon.incoming { color: var(--success); }
.voip-history-icon.outgoing { color: var(--primary); }
.voip-history-icon.missed { color: var(--danger); }
.voip-history-info { flex: 1; }
.voip-history-number { font-weight: 600; font-size: 0.9em; direction: ltr; text-align: right; }
.voip-history-time { font-size: 0.75em; color: var(--text-light); }
.voip-tabs { display: flex; border-bottom: 1px solid var(--bg); }
.voip-tab { flex: 1; padding: 12px; border: none; background: none; cursor: pointer; font-weight: 600; color: var(--text-light); transition: var(--transition); }
.voip-tab.active { color: var(--primary); border-bottom: 2px solid var(--primary); }
.voip-contacts { max-height: 250px; overflow-y: auto; }
.voip-contact { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--bg); cursor: pointer; }
.voip-contact:hover { background: var(--bg); }
.voip-contact-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary)); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; }
.voip-contact-info { flex: 1; }
.voip-contact-name { font-weight: 600; }
.voip-contact-number { font-size: 0.85em; color: var(--text-light); direction: ltr; text-align: right; }
.voip-calling { display: none; flex-direction: column; align-items: center; padding: 40px 20px; }
.voip-calling.active { display: flex; }
.voip-calling-avatar { width: 100px; height: 100px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary)); display: flex; align-items: center; justify-content: center; font-size: 2.5em; color: #fff; margin-bottom: 20px; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.voip-calling-name { font-size: 1.3em; font-weight: 700; margin-bottom: 5px; }
.voip-calling-status { color: var(--text-light); margin-bottom: 30px; }
.voip-calling-timer { font-size: 2em; font-weight: 300; margin-bottom: 30px; font-family: monospace; }
.voip-calling-actions { display: flex; gap: 20px; }
.voip-action-btn { width: 50px; height: 50px; border: none; border-radius: 50%; cursor: pointer; font-size: 1.2em; transition: var(--transition); background: var(--bg); }
.voip-action-btn:hover { background: var(--bg-secondary); }
.voip-action-btn.active { background: var(--primary); color: #fff; }
.calculator-modal { position: fixed; bottom: 80px; left: 20px; width: 300px; background: var(--card-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 2000; display: none; overflow: hidden; }
.calculator-modal.show { display: block; animation: calcSlideUp 0.3s ease; }
@keyframes calcSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.calc-header { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; }
.calc-title { font-weight: 700; }
.calc-close { width: 28px; height: 28px; border: none; background: rgba(255,255,255,0.2); border-radius: 50%; color: #fff; cursor: pointer; }
.calc-display { padding: 20px; background: var(--bg-secondary); }
.calc-expression { font-size: 0.9em; color: var(--text-light); min-height: 20px; text-align: left; direction: ltr; }
.calc-result { font-size: 2em; font-weight: 700; color: var(--text); text-align: left; direction: ltr; min-height: 50px; word-break: break-all; }
.calc-keypad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 15px; direction: ltr; }
.calc-key { height: 50px; border: none; border-radius: var(--radius-sm); font-size: 1.2em; font-weight: 600; cursor: pointer; transition: var(--transition); }
.calc-key:hover { transform: scale(1.05); }
.calc-key:active { transform: scale(0.95); }
.calc-key.number { background: var(--bg); color: var(--text); }
.calc-key.operator { background: var(--primary); color: #fff; }
.calc-key.equals { background: linear-gradient(135deg, var(--success), #38a169); color: #fff; }
.calc-key.clear { background: var(--danger); color: #fff; }
.calc-key.special { background: var(--bg-secondary); color: var(--text-light); }
.whatsapp-panel { position: fixed; top: 0; right: -420px; width: 420px; height: 100vh; background: var(--card-bg); box-shadow: var(--shadow-lg); z-index: 2000; transition: var(--transition); display: flex; flex-direction: column; visibility: hidden; }
.whatsapp-panel.show { right: 0; visibility: visible; }
.whatsapp-header { background: #075E54; color: #fff; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; }
.whatsapp-title { font-weight: 700; font-size: 1.1em; display: flex; align-items: center; gap: 8px; }
.whatsapp-close { width: 32px; height: 32px; border: none; background: rgba(255,255,255,0.15); border-radius: 50%; color: #fff; cursor: pointer; font-size: 1.2em; }
.whatsapp-close:hover { background: rgba(255,255,255,0.25); }
.whatsapp-web-container { flex: 1; overflow-y: auto; background: #f0f2f5; }
.whatsapp-connect-card { padding: 30px; text-align: center; }
.whatsapp-connect-icon { margin-bottom: 10px; }
.btn-whatsapp-open { display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; background: #25D366; color: #fff; border: none; border-radius: 30px; font-size: 1em; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.btn-whatsapp-open:hover { background: #128C7E; transform: scale(1.02); }
.whatsapp-divider { display: flex; align-items: center; margin: 25px 0; }
.whatsapp-divider::before, .whatsapp-divider::after { content: ''; flex: 1; height: 1px; background: #e0e0e0; }
.whatsapp-divider span { padding: 0 15px; color: var(--text-light); font-size: 0.9em; }
.whatsapp-quick-send { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); text-align: right; }
.whatsapp-qr { padding: 30px; text-align: center; }
.whatsapp-qr-image { width: 200px; height: 200px; background: #fff; border-radius: var(--radius); margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--bg-secondary); }
.whatsapp-status { padding: 15px 20px; background: var(--bg); text-align: center; font-weight: 600; }
.whatsapp-status.connected { background: rgba(37,211,102,0.1); color: #25D366; }
.whatsapp-status.disconnected { background: rgba(252,129,129,0.1); color: var(--danger); }
.whatsapp-chats { flex: 1; overflow-y: auto; }
.whatsapp-chat-item { display: flex; align-items: center; gap: 12px; padding: 15px 20px; border-bottom: 1px solid var(--bg); cursor: pointer; transition: var(--transition); }
.whatsapp-chat-item:hover { background: var(--bg); }
.whatsapp-chat-item.active { background: rgba(37,211,102,0.1); }
.whatsapp-chat-avatar { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, #25D366, #128C7E); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 1.1em; }
.whatsapp-chat-info { flex: 1; min-width: 0; }
.whatsapp-chat-name { font-weight: 600; margin-bottom: 3px; }
.whatsapp-chat-last { font-size: 0.85em; color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.whatsapp-chat-meta { text-align: left; }
.whatsapp-chat-time { font-size: 0.75em; color: var(--text-light); }
.whatsapp-unread { min-width: 20px; height: 20px; background: #25D366; color: #fff; border-radius: 50%; font-size: 0.75em; font-weight: 600; display: flex; align-items: center; justify-content: center; margin-top: 5px; }
.whatsapp-conversation { display: none; flex-direction: column; height: 100%; }
.whatsapp-conversation.active { display: flex; }
.whatsapp-conv-header { padding: 15px 20px; background: var(--bg); display: flex; align-items: center; gap: 12px; }
.whatsapp-conv-back { width: 35px; height: 35px; border: none; background: none; cursor: pointer; font-size: 1.2em; }
.whatsapp-conv-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #25D366, #128C7E); display: flex; align-items: center; justify-content: center; color: #fff; }
.whatsapp-conv-name { font-weight: 600; }
.whatsapp-messages { flex: 1; overflow-y: auto; padding: 15px; display: flex; flex-direction: column; gap: 10px; background: #e5ddd5; }
.whatsapp-message { max-width: 80%; padding: 10px 15px; border-radius: 10px; position: relative; }
.whatsapp-message.sent { align-self: flex-start; background: #dcf8c6; border-bottom-left-radius: 0; }
.whatsapp-message.received { align-self: flex-end; background: #fff; border-bottom-right-radius: 0; }
.whatsapp-message-text { font-size: 0.95em; line-height: 1.4; }
.whatsapp-message-time { font-size: 0.7em; color: var(--text-light); text-align: left; margin-top: 5px; }
.whatsapp-input-area { padding: 15px; background: var(--bg); display: flex; gap: 10px; align-items: center; }
.whatsapp-input { flex: 1; padding: 12px 15px; border: none; border-radius: 25px; font-size: 0.95em; }
.whatsapp-send { width: 45px; height: 45px; border: none; border-radius: 50%; background: #25D366; color: #fff; cursor: pointer; font-size: 1.2em; }
.ai-bot-panel { position: fixed; bottom: 90px; left: 20px; width: 380px; height: 550px; background: var(--card-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 2000; display: none; flex-direction: column; overflow: hidden; }
.ai-bot-panel.show { display: flex; }
.ai-bot-header { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; }
.ai-bot-title { font-weight: 700; display: flex; align-items: center; gap: 10px; }
.ai-bot-header-actions { display: flex; gap: 8px; align-items: center; }
.ai-bot-header-btn { width: 32px; height: 32px; border: none; background: rgba(255,255,255,0.2); border-radius: 50%; color: #fff; cursor: pointer; font-size: 0.9em; transition: var(--transition); }
.ai-bot-header-btn:hover { background: rgba(255,255,255,0.3); }
.ai-bot-close { width: 28px; height: 28px; border: none; background: rgba(255,255,255,0.2); border-radius: 50%; color: #fff; cursor: pointer; }
.ai-bot-messages { flex: 1; overflow-y: auto; padding: 15px; display: flex; flex-direction: column; gap: 10px; }
.ai-bot-message { max-width: 85%; padding: 12px 15px; border-radius: var(--radius); word-wrap: break-word; line-height: 1.5; }
.ai-bot-message.user { align-self: flex-start; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; border-bottom-right-radius: 4px; }
.ai-bot-message.bot { align-self: flex-end; background: var(--bg); border-bottom-left-radius: 4px; }
.ai-bot-message.typing-indicator { opacity: 0.7; }
.ai-bot-input { padding: 15px; border-top: 1px solid var(--bg); display: flex; gap: 10px; }
.ai-bot-input input { flex: 1; padding: 12px 15px; border: 2px solid var(--bg); border-radius: var(--radius-sm); font-size: 0.95em; font-family: inherit; }
.ai-bot-input input:focus { border-color: var(--primary); outline: none; }
.ai-bot-input button { padding: 12px 20px; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; border: none; border-radius: var(--radius-sm); cursor: pointer; font-weight: 600; }
.ai-bot-status { padding: 5px 15px; background: var(--bg); font-size: 0.75em; color: var(--text-light); display: flex; align-items: center; gap: 8px; }
.ai-bot-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.ai-bot-status-dot.offline { background: var(--text-lighter); }
.ai-bot-status-dot.connecting { background: var(--warning); animation: pulse 1s infinite; }
.knowledge-item { background: var(--bg); border-radius: var(--radius-sm); padding: 15px; margin-bottom: 12px; transition: var(--transition); }
.knowledge-item:hover { box-shadow: var(--shadow-sm); }
.knowledge-item-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.knowledge-item-header h4 { margin: 0; font-weight: 600; color: var(--text); }
.knowledge-item-actions { display: flex; gap: 5px; }
.knowledge-item-content { color: var(--text-light); font-size: 0.9em; margin-bottom: 10px; line-height: 1.5; }
.knowledge-item-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.knowledge-category { background: var(--primary); color: #fff; padding: 3px 10px; border-radius: 12px; font-size: 0.75em; font-weight: 600; }
.knowledge-tag { background: var(--bg-secondary); color: var(--text-light); padding: 3px 8px; border-radius: 10px; font-size: 0.7em; }
.ai-settings-section { margin-bottom: 25px; padding-bottom: 20px; border-bottom: 1px solid var(--bg); }
.ai-settings-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.ai-settings-section h4 { margin: 0 0 15px 0; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
.ai-settings-toggle { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
.ai-settings-toggle label { font-weight: 500; }
.api-key-input-wrapper { position: relative; }
.api-key-input-wrapper input { padding-left: 40px; }
.api-key-input-wrapper .key-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-light); }
.gemini-status { display: flex; align-items: center; gap: 8px; padding: 10px; background: var(--bg); border-radius: var(--radius-sm); margin-top: 10px; font-size: 0.85em; }
.gemini-status.connected { color: var(--success); }
.gemini-status.disconnected { color: var(--text-light); }
.signature-container { background: var(--card-bg); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow); }
.signature-canvas-wrapper { background: #fff; border: 2px solid var(--bg-secondary); border-radius: var(--radius); margin-bottom: 20px; position: relative; }
.signature-canvas { width: 100%; height: 200px; cursor: crosshair; display: block; }
.signature-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.signature-preview { margin-top: 20px; padding: 20px; background: var(--bg); border-radius: var(--radius); }
.signature-doc-builder { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.signature-doc-preview { background: #fff; border: 1px solid var(--bg-secondary); border-radius: var(--radius); padding: 30px; min-height: 400px; }
.signature-doc-tools { display: flex; flex-direction: column; gap: 15px; }
.landing-builder { display: grid; grid-template-columns: 300px 1fr; gap: 20px; }
.landing-sidebar { background: var(--card-bg); border-radius: var(--radius-lg); padding: 20px; }
.landing-preview { background: #fff; border-radius: var(--radius-lg); padding: 30px; min-height: 500px; box-shadow: var(--shadow); }
.landing-field-item { padding: 15px; background: var(--bg); border-radius: var(--radius-sm); margin-bottom: 10px; display: flex; align-items: center; gap: 15px; cursor: move; transition: var(--transition); }
.landing-field-item:hover { background: var(--bg-secondary); }
.landing-field-drag { color: var(--text-light); cursor: grab; }
.landing-field-info { flex: 1; }
.landing-field-name { font-weight: 600; }
.landing-field-type { font-size: 0.8em; color: var(--text-light); }
.landing-form-preview { max-width: 500px; margin: 0 auto; }
.landing-form-field { margin-bottom: 20px; }
.landing-form-field label { display: block; margin-bottom: 8px; font-weight: 600; }
.landing-form-field input, .landing-form-field select, .landing-form-field textarea { width: 100%; padding: 12px 15px; border: 2px solid var(--bg-secondary); border-radius: var(--radius-sm); font-size: 1em; }
.quick-tools {
position: fixed;
bottom: 20px;
left: 20px;
display: flex;
flex-direction: column;
gap: 10px;
z-index: 1500;
}
.quick-tool-btn {
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(0,0,0,0.08);
cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
background: rgba(255,255,255,0.6);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
[data-theme="dark"] .quick-tool-btn {
background: rgba(30,41,59,0.6);
border-color: rgba(255,255,255,0.1);
}
.quick-tool-btn .btn-label {
display: none;
}
.quick-tool-btn svg {
stroke: var(--text-light);
width: 20px;
height: 20px;
stroke-width: 1.5;
}
.quick-tool-btn:hover {
background: rgba(255,255,255,0.85);
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.quick-tool-btn:hover svg {
stroke: var(--primary);
}
[data-theme="dark"] .quick-tool-btn:hover {
background: rgba(30,41,59,0.85);
}
.ai-bot-btn {
position: fixed;
bottom: 150px;
left: 20px;
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid var(--success);
background: transparent;
color: var(--success);
cursor: pointer;
font-size: 1.2em;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
transition: var(--transition);
z-index: 1500;
display: flex;
align-items: center;
justify-content: center;
}
.ai-bot-btn:hover {
transform: scale(1.15) translateY(-3px);
background: var(--success);
color: #fff;
}
.ai-bot-btn.show { display: flex; }
.font-size-slider { width: 100%; height: 8px; border-radius: 4px; background: var(--bg-secondary); appearance: none; cursor: pointer; }
.font-size-slider::-webkit-slider-thumb { appearance: none; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary)); cursor: pointer; box-shadow: var(--shadow); }
.font-size-display { font-weight: 700; color: var(--primary); min-width: 50px; text-align: center; }
.style-selector { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 10px; }
.style-option { padding: 10px; border: 2px solid var(--card-border); border-radius: var(--radius); cursor: pointer; transition: var(--transition); text-align: center; }
.style-option:hover { border-color: var(--primary); }
.style-option.active { border-color: var(--primary); background: rgba(102,126,234,0.1); }
.style-option-preview { height: 35px; border-radius: var(--radius-sm); margin-bottom: 6px; }
.style-option-name { font-weight: 600; font-size: 0.8em; }
.reminder-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
animation: fadeIn 0.3s ease;
}
.reminder-modal {
background: #fff;
border-radius: var(--radius-xl);
padding: 40px;
max-width: 400px;
width: 90%;
text-align: center;
box-shadow: 0 25px 80px rgba(0,0,0,0.3);
animation: reminderPop 0.4s ease;
}
@keyframes reminderPop {
0% { transform: scale(0.8); opacity: 0; }
50% { transform: scale(1.05); }
100% { transform: scale(1); opacity: 1; }
}
.reminder-icon {
font-size: 4em;
margin-bottom: 20px;
animation: ring 0.5s ease infinite alternate;
}
@keyframes ring {
0% { transform: rotate(-10deg); }
100% { transform: rotate(10deg); }
}
@keyframes bellRing {
0% { transform: rotate(0deg); }
25% { transform: rotate(15deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(-15deg); }
100% { transform: rotate(0deg); }
}
.reminder-modal h3 {
font-size: 1.5em;
margin-bottom: 20px;
color: var(--primary);
}
.reminder-task-info {
background: var(--bg);
border-radius: var(--radius);
padding: 20px;
margin-bottom: 25px;
text-align: right;
}
.reminder-title {
font-size: 1.2em;
font-weight: 700;
margin-bottom: 10px;
}
.reminder-time {
color: var(--text-light);
margin-bottom: 8px;
}
.reminder-desc {
font-size: 0.9em;
color: var(--text-light);
}
.reminder-related {
font-size: 0.9em;
color: var(--primary);
margin-top: 8px;
}
.reminder-actions {
display: flex;
gap: 12px;
justify-content: center;
}
.reminder-actions .btn {
min-width: 120px;
}
.landing-field-option {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 15px;
background: var(--bg);
border-radius: var(--radius-sm);
cursor: pointer;
transition: var(--transition);
border: 2px solid transparent;
}
.landing-field-option:hover {
background: var(--bg-secondary);
}
.landing-field-option.selected {
border-color: var(--primary);
background: rgba(102,126,234,0.1);
}
.landing-fields-container {
max-height: 200px;
overflow-y: auto;
border: 1px solid var(--bg-secondary);
border-radius: var(--radius-sm);
padding: 10px;
}
.move-option:hover {
background: var(--bg);
}
.employee-tree-view {
display: flex;
flex-direction: column;
gap: 20px;
}
.employee-branch-section {
background: var(--card-bg);
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--card-border);
}
.employee-branch-header {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: #fff;
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.employee-branch-name {
font-weight: 700;
font-size: 1.1em;
}
.employee-branch-count {
background: rgba(255,255,255,0.2);
padding: 4px 12px;
border-radius: 20px;
font-size: 0.85em;
}
.employee-branch-content {
padding: 15px;
}
.employee-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 15px;
}
.employee-mini-card {
background: var(--bg);
border-radius: var(--radius);
padding: 15px;
display: flex;
gap: 12px;
align-items: center;
transition: var(--transition);
cursor: pointer;
}
.employee-mini-card:hover {
background: var(--bg-secondary);
transform: translateX(-5px);
}
.employee-mini-avatar {
width: 45px;
height: 45px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
flex-shrink: 0;
}
.employee-mini-info {
flex: 1;
min-width: 0;
}
.employee-mini-name {
font-weight: 600;
margin-bottom: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.employee-mini-role {
font-size: 0.8em;
color: var(--text-light);
}
.employee-search-box {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.employee-search-input {
flex: 1;
padding: 12px 18px;
border: 2px solid var(--bg);
border-radius: var(--radius-sm);
font-size: 0.95em;
font-family: inherit;
}
.employee-search-input:focus {
outline: none;
border-color: var(--primary);
}
.mobile-menu-btn { display: none; width: 45px; height: 45px; border: none; background: var(--bg); border-radius: var(--radius-sm); cursor: pointer; font-size: 1.3em; align-items: center; justify-content: center; }
.mobile-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1500; }
.mobile-nav-overlay.show { display: block; }
.mobile-nav-drawer { position: fixed; top: 0; right: -300px; width: 280px; height: 100vh; background: var(--card-bg); z-index: 1600; transition: var(--transition); padding: 20px; overflow-y: auto; box-shadow: var(--shadow-lg); }
.mobile-nav-drawer.show { right: 0; }
.mobile-nav-drawer .nav-item { width: 100%; justify-content: flex-start; margin-bottom: 5px; padding: 12px 15px; flex-direction: row; gap: 10px; }
.mobile-nav-drawer .nav-item .nav-icon { flex-shrink: 0; }
.mobile-nav-drawer .nav-item .nav-text { white-space: nowrap; }
.mobile-nav-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--bg); }
.mobile-nav-close { width: 40px; height: 40px; border: none; background: var(--bg); border-radius: 50%; cursor: pointer; font-size: 1.2em; }
@media (max-width: 1400px) {
.nav-menu { gap: 2px; }
.nav-item { padding: 6px 8px; font-size: 0.8em; min-width: 50px; }
.nav-divider { margin: 0 4px; }
.top-nav { padding: 0 15px; }
.nav-right { gap: 6px; }
.world-clocks { gap: 6px; }
.world-clock { padding: 4px 8px; font-size: 0.8em; }
.nav-user-info { display: none; }
#broadcastBtn { display: none !important; }
.nav-menu { display: none; }
.mobile-menu-btn { display: flex !important; }
.world-clocks { display: none; }
}
@media (max-width: 1200px) {
.data-row {
grid-template-columns: 35px 1.2fr 100px 120px 90px 75px 70px 120px !important;
font-size: 0.9em;
padding: 10px 12px;
}
.data-row.has-file-col {
grid-template-columns: 35px 1fr 95px 110px 85px 70px 65px 75px 110px !important;
}
.dashboard-grid { grid-template-columns: 1fr; }
.chat-container { grid-template-columns: 1fr; }
.chat-sidebar {
position: fixed !important;
top: 70px;
right: -100%;
width: 320px;
max-width: 85vw;
height: calc(100vh - 70px);
z-index: 1500;
background: var(--card-bg);
box-shadow: -5px 0 20px rgba(0,0,0,0.15);
transition: right 0.3s ease;
}
.chat-sidebar.mobile-open {
right: 0 !important;
}
.chat-toggle-btn {
display: flex !important;
}
.calendar-container { grid-template-columns: 1fr; }
.landing-builder { grid-template-columns: 1fr; }
.signature-doc-builder { grid-template-columns: 1fr; }
.top-nav { padding: 0 12px; overflow: visible; }
.nav-right { gap: 6px; max-width: none; flex-wrap: nowrap; }
.nav-user-info { display: none; }
.nav-quick-btn, .dropdown-btn, .logout-btn {
width: 36px; height: 36px; min-width: 36px;
}
.nav-quick-btn svg, .dropdown-btn svg { width: 16px; height: 16px; }
.nav-quick-btn.whatsapp-btn { display: none !important; }
#connectionStatus { display: none !important; }
}
@media (max-width: 480px) {
html { font-size: 14px; }
.stats-grid { grid-template-columns: 1fr; }
.stat-card { padding: 14px; }
.stat-value { font-size: 1.8em; }
.calendar-day { padding: 4px; font-size: 0.82em; }
.btn { padding: 10px 14px; font-size: 0.88em; }
.tasks-page-grid { grid-template-columns: 1fr; }
.calendar-sidebar { position: static; }
.nav-quick-btn.whatsapp-btn,
#connectionStatus,
#broadcastBtn { display: none !important; }
.user-status-btn { display: none !important; }
#langMenu { display: none !important; }
.nav-right .dropdown:has(#langMenu) { display: none !important; }
.nav-right { gap: 4px; }
.nav-quick-btn, .dropdown-btn, .logout-btn {
width: 34px; height: 34px; min-width: 34px;
}
.nav-quick-btn svg, .dropdown-btn svg { width: 14px; height: 14px; }
.chat-container { min-height: 200px; }
.chat-input-area { padding: 8px 8px; z-index: 10; }
.chat-input-wrapper { gap: 4px; }
.chat-input { padding: 8px 38px 8px 10px; min-height: 38px; border-radius: 16px; }
.chat-send-btn { width: 38px; height: 38px; min-width: 38px; border-radius: 12px; font-size: 1em; }
.chat-file-btn { width: 34px; height: 34px; min-width: 34px; border-radius: 10px; font-size: 1em; }
.chat-emoji-btn { width: 28px; height: 28px; bottom: 6px; left: 6px; font-size: 1em; }
.chat-header { padding: 8px 10px; }
.chat-header-avatar { width: 38px; height: 38px; border-radius: 12px; }
.chat-header-name { font-size: 0.95em; }
.chat-members-bar { padding: 4px 10px; gap: 4px; }
.chat-member-chip { padding: 2px 6px; font-size: 0.68em; }
}
@media (max-width: 768px) {
.top-nav { padding: 0 10px; height: 56px; overflow: visible; }
.main-content { margin-top: 56px; padding: 12px; }
#v-chat.active { top: 56px; padding: 6px; }
.page-header { flex-direction: column; gap: 15px; }
.page-actions { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.page-actions .btn { flex: 1; min-width: 120px; }
.kanban-container { overflow-x: auto; padding-bottom: 15px; }
.kanban-column { min-width: 280px; max-width: 280px; }
.form-row { grid-template-columns: 1fr !important; }
.stat-card { min-width: 100%; }
.data-row { flex-wrap: wrap; gap: 10px; padding: 15px; }
.data-row > div { flex: 1 1 45%; }
.data-actions { flex: 1 1 100%; justify-content: center; }
.employee-row { flex-direction: column; align-items: flex-start; gap: 12px; }
.employee-row-stats { width: 100%; justify-content: space-around; }
.employee-row-actions { width: 100%; justify-content: flex-end; }
.modal-box { width: 95%; max-width: none; margin: 10px; max-height: 90vh; }
.modal-box.large, .modal-box.xlarge { width: 95%; }
.quick-tools { bottom: 10px; left: 10px; }
.quick-tool-btn { width: 42px; height: 42px; font-size: 1em; }
.voip-dialer { width: 100%; left: 0; right: 0; bottom: 0; border-radius: 20px 20px 0 0; }
.whatsapp-panel { width: 100%; left: auto; right: -100%; }
.whatsapp-panel.show { right: 0; }
.ai-bot-panel { width: 100%; left: 0; right: 0; }
.calculator-modal { width: calc(100% - 20px); left: 10px; }
.crm-toolbar { flex-wrap: wrap; gap: 10px; }
.crm-search { flex: 1 1 100%; order: 3; }
.crm-tabs { flex: 1 1 100%; order: 4; }
.dashboard-grid { grid-template-columns: 1fr !important; }
.dashboard-grid.agent { grid-template-columns: 1fr !important; }
.settings-section { padding: 15px; }
.profile-card { flex-direction: column; align-items: center; text-align: center; }
#v-settings > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
.chat-container { grid-template-columns: 1fr; min-height: 250px; }
.chat-input-area { padding: 10px 12px; }
.chat-input-wrapper { gap: 6px; }
.chat-input { padding: 10px 42px 10px 12px; min-height: 42px; font-size: 16px !important; }
.chat-send-btn { width: 42px; height: 42px; border-radius: 14px; }
.chat-file-btn { width: 38px; height: 38px; border-radius: 12px; }
.chat-messages { padding: 16px 12px; }
.chat-message { max-width: 85%; }
.chat-header { padding: 10px 14px; }
.calendar-week-view { grid-template-columns: repeat(3, 1fr); }
.calendar-year-grid { grid-template-columns: repeat(2, 1fr); }
.login-page { padding: 12px; align-items: flex-start; padding-top: 5vh; }
.login-container { max-width: 100%; border-radius: 20px; }
.login-header { padding: 32px 20px 12px; }
.login-logo { width: 120px; height: 120px; padding: 0; }
.login-logo img { width: 100%; height: 100%; }
.login-title { font-size: 1.3em; }
.login-logo-banner { padding: 32px 20px 24px; }
.login-logo-banner img { width: 100px; height: 100px; }
.login-brand-text { font-size: 1.15em; letter-spacing: 2px; }
.login-body { padding: 12px 20px 28px; }
.login-field { margin-bottom: 16px; }
.login-input { padding: 13px 16px; font-size: 16px !important; }
.login-btn { padding: 14px; font-size: 1em; }
.login-forgot-btn { padding: 10px 16px; font-size: 0.85em; }
.top-nav {
padding: 0 8px !important;
height: 56px !important;
gap: 6px;
overflow: visible !important;
}
.main-content {
padding: 12px !important;
margin-top: 56px !important;
min-height: calc(100vh - 56px);
}
.nav-brand { gap: 6px; flex-shrink: 0; }
.nav-brand img { width: 48px !important; height: 48px !important; border-radius: 0 !important; }
.version-badge { font-size: 0.55em !important; padding: 2px 5px !important; }
.nav-right { gap: 4px; max-width: none; flex-wrap: nowrap; }
.nav-quick-btn { width: 34px; height: 34px; min-width: 34px; }
.nav-quick-btn svg { width: 15px; height: 15px; }
.dropdown-btn { width: 34px; height: 34px; min-width: 34px; }
.dropdown-btn svg { width: 15px; height: 15px; }
.nav-user-avatar { width: 30px !important; height: 30px !important; font-size: 0.7em !important; }
.logout-btn { width: 34px; height: 34px; min-width: 34px; }
.nav-user-info { display: none !important; }
.nav-quick-btn.whatsapp-btn { display: none !important; }
#connectionStatus { display: none !important; }
#broadcastBtn { display: none !important; }
.user-status-btn { display: none !important; }
.nav-right .dropdown:has(#langMenu) { display: none !important; }
.page-header {
flex-direction: column;
gap: 12px;
align-items: stretch !important;
}
.page-title h1 { font-size: 1.3em; }
.page-actions {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.page-actions .btn {
flex: 1 1 auto;
min-width: 100px;
padding: 10px 12px;
font-size: 0.85em;
text-align: center;
white-space: nowrap;
}
.kanban-container {
flex-direction: row !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding-bottom: 12px;
}
.kanban-column {
min-width: 85vw !important;
max-width: 85vw !important;
scroll-snap-align: center;
flex-shrink: 0;
}
.crm-toolbar {
flex-direction: column;
gap: 8px;
}
.crm-search { width: 100% !important; }
.crm-tabs {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
flex-wrap: nowrap !important;
}
.crm-tab { white-space: nowrap; flex-shrink: 0; }
.stats-grid {
grid-template-columns: 1fr 1fr !important;
gap: 8px;
}
.stat-card {
padding: 14px !important;
min-width: 0;
}
.stat-value { font-size: 1.6em !important; }
.stat-label { font-size: 0.78em; }
.dashboard-grid { grid-template-columns: 1fr !important; gap: 12px; }
.dashboard-grid.agent { grid-template-columns: 1fr !important; }
.data-row {
display: flex !important;
flex-wrap: wrap;
gap: 8px;
padding: 12px;
grid-template-columns: none !important;
}
.data-row.has-file-col { grid-template-columns: none !important; }
.data-row > div {
flex: 1 1 45%;
min-width: 0;
font-size: 0.85em;
}
.data-row.header { display: none !important; }
.data-checkbox { flex: 0 0 30px !important; }
.data-actions {
flex: 1 1 100% !important;
justify-content: flex-end;
padding-top: 8px;
border-top: 1px solid var(--bg);
}
.table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.card-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.employee-row {
flex-direction: column !important;
align-items: stretch !important;
gap: 10px;
padding: 14px;
}
.employee-row-stats {
width: 100%;
justify-content: space-between;
flex-wrap: wrap;
}
.employee-row-actions {
width: 100%;
justify-content: flex-end;
}
.modal-box {
width: 95vw !important;
max-width: none !important;
margin: 8px !important;
max-height: 92vh;
border-radius: 16px;
}
.modal-box.large,
.modal-box.xlarge {
width: 95vw !important;
max-width: none !important;
}
.modal-header { padding: 16px !important; }
.modal-body { padding: 16px !important; }
.modal-footer { padding: 12px 16px !important; }
.form-row { grid-template-columns: 1fr !important; }
#dealCardModal {
padding: 0 !important;
align-items: flex-end !important;
}
#dealCardModal .modal-box {
width: 100% !important;
height: 95vh !important;
max-height: 95vh !important;
margin: 0 !important;
border-radius: 16px 16px 0 0 !important;
}
.modal-close {
width: 36px !important;
height: 36px !important;
min-width: 36px;
min-height: 36px;
font-size: 1.4em !important;
display: flex !important;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.voip-dialer {
width: 100% !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
border-radius: 20px 20px 0 0 !important;
max-height: 85vh;
}
.whatsapp-panel {
width: 100% !important;
left: auto !important;
right: -100% !important;
max-height: 90vh;
}
.whatsapp-panel.show {
right: 0 !important;
}
.ai-bot-panel {
width: 100% !important;
left: 0 !important;
right: 0 !important;
max-height: 90vh;
}
.calculator-modal {
width: calc(100% - 16px) !important;
left: 8px !important;
}
.notification-center {
width: 100% !important;
right: 0 !important;
left: 0 !important;
max-height: 80vh;
}
.quick-tools {
bottom: 10px;
left: 10px;
gap: 6px;
}
.quick-tool-btn {
width: 42px;
height: 42px;
font-size: 1em;
}
.calendar-container { grid-template-columns: 1fr !important; }
.calendar-sidebar {
position: static !important;
max-height: 300px;
overflow-y: auto;
}
.calendar-grid { font-size: 0.82em; }
.calendar-day { padding: 4px; min-height: 60px; }
.calendar-week-view { grid-template-columns: repeat(3, 1fr) !important; }
.calendar-year-grid { grid-template-columns: repeat(2, 1fr) !important; }
.chat-container {
grid-template-columns: 1fr !important;
height: 100%;
min-height: 200px;
position: relative;
}
.chat-sidebar {
display: flex !important;
position: fixed !important;
top: 56px;
right: -100%;
width: 85vw !important;
max-width: 320px;
height: calc(100vh - 56px) !important;
z-index: 1500;
background: var(--card-bg) !important;
box-shadow: -5px 0 20px rgba(0,0,0,0.15);
transition: right 0.3s ease;
border-left: 1px solid var(--bg);
}
.chat-sidebar.mobile-open {
right: 0 !important;
}
.chat-sidebar-overlay {
display: none;
position: fixed;
inset: 0;
top: 56px;
background: rgba(0,0,0,0.4);
z-index: 1499;
}
.chat-sidebar-overlay.show {
display: block;
}
.chat-toggle-btn {
display: flex !important;
}
.chat-main { min-height: 0; height: 100%; display: flex; flex-direction: column; }
.chat-messages { max-height: none; flex: 1 1 0%; min-height: 0; }
.org-tree-modern { padding: 12px; }
.org-level {
flex-direction: column !important;
align-items: center;
gap: 16px;
}
.org-node { min-width: 100% !important; max-width: 100% !important; }
.settings-section { padding: 14px; }
.profile-card {
flex-direction: column !important;
align-items: center;
text-align: center;
}
.mobile-nav-drawer {
width: 85vw !important;
max-width: 320px;
}
.audit-filters-row { flex-direction: column; align-items: stretch; }
.audit-table-wrapper { margin: 0 -12px; border-radius: 0; }
.audit-table { font-size: 0.72em; }
.audit-table th, .audit-table td { padding: 6px 8px; }
.deal-card-body { flex-direction: column !important; }
.deal-card-left {
width: 100% !important;
min-width: auto !important;
border-left: none !important;
border-bottom: 1px solid var(--bg);
max-height: none !important;
overflow-y: visible !important;
}
.deal-card-right { min-height: 250px; overflow: visible !important; }
.tasks-page-grid { grid-template-columns: 1fr !important; }
.dropdown-menu {
min-width: 150px;
max-width: 90vw;
}
.nav-dropdown-menu {
right: auto;
left: 0;
min-width: 200px;
max-width: calc(100vw - 20px);
max-height: 60vh;
}
::-webkit-scrollbar { width: 4px; height: 4px; }
#appCopyrightFooter { padding: 10px 12px; font-size: 0.7em; }
.personal-dashboard-header {
flex-direction: column !important;
padding: 20px 16px !important;
gap: 16px;
text-align: center;
}
.personal-greeting {
flex-direction: column !important;
align-items: center !important;
gap: 12px;
}
.personal-avatar {
width: 60px !important;
height: 60px !important;
font-size: 1.4em !important;
}
.personal-info h2 {
font-size: 1.3em !important;
}
.personal-info p {
font-size: 0.85em;
}
.personal-quick-stats {
justify-content: center !important;
gap: 15px !important;
flex-wrap: wrap;
}
.quick-stat-circle {
width: 70px !important;
}
.quick-stat-circle svg {
width: 60px !important;
height: 60px !important;
}
.quick-stat-value {
font-size: 0.85em !important;
}
.quick-stat-label {
font-size: 0.65em !important;
}
.nav-menu {
display: none !important;
}
.nav-right {
gap: 4px !important;
flex-shrink: 0;
max-width: none;
flex-wrap: nowrap;
}
.nav-brand {
flex-shrink: 0;
min-width: 0;
}
.nav-user-info { display: none !important; }
.user-status-btn { display: none !important; }
.nav-quick-btn.whatsapp-btn { display: none !important; }
#connectionStatus { display: none !important; }
#broadcastBtn { display: none !important; }
.nav-right .dropdown:has(#langMenu) { display: none !important; }
.view-header {
flex-direction: column;
gap: 8px;
}
.view-header h1,
.page-title h1 {
font-size: 1.2em !important;
}
.btn-new-deal, .btn-primary-large {
width: 100% !important;
text-align: center;
}
}
@media (max-width: 375px) {
html { font-size: 13px; }
.nav-logo { font-size: 1.1em; }
.page-title h1 { font-size: 1.1em; }
.stat-value { font-size: 1.4em !important; }
.stats-grid { grid-template-columns: 1fr !important; }
.btn { padding: 8px 10px; font-size: 0.82em; }
.quick-tools { bottom: 8px; left: 8px; gap: 6px; }
.quick-tool-btn { width: 36px; height: 36px; font-size: 0.9em; }
.login-logo { width: 100px; height: 100px; padding: 0; }
.login-logo img { width: 100%; height: 100%; }
.login-title { font-size: 1.2em; }
.login-header { padding: 24px 15px 10px; }
.login-body { padding: 12px 15px 24px; }
.kanban-column { min-width: 90vw !important; max-width: 90vw !important; }
.top-nav { padding: 0 6px !important; }
.nav-brand img { width: 40px !important; height: 40px !important; }
.nav-right { gap: 3px; }
.nav-quick-btn, .dropdown-btn, .logout-btn { width: 32px; height: 32px; min-width: 32px; }
.nav-quick-btn svg, .dropdown-btn svg { width: 14px; height: 14px; }
.mobile-menu-btn { width: 36px !important; height: 36px !important; }
.version-badge { display: none !important; }
}
@media (hover: none) {
.btn, .kanban-card-btn, .data-action-btn, .quick-tool-btn, .nav-quick-btn, .dropdown-btn, .mobile-menu-btn {
min-height: 44px;
min-width: 44px;
}
.nav-dropdown-item {
min-height: 44px;
padding: 12px 14px;
}
.kanban-card { padding: 15px; }
.task-item { padding: 15px; }
.login-input { font-size: 16px; }
input, select, textarea { font-size: 16px; }
}
.org-tree-modern { padding: 30px; overflow-x: auto; }
.org-tree-container { display: flex; flex-direction: column; align-items: center; min-width: max-content; }
.org-level { display: flex; justify-content: center; gap: 25px; position: relative; margin-bottom: 40px; flex-wrap: wrap; }
.org-node { position: relative; min-width: 260px; max-width: 300px; background: var(--card-bg); border-radius: var(--radius-lg); border: 2px solid var(--card-border); box-shadow: var(--shadow); transition: var(--transition); overflow: hidden; }
.org-node:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--primary); }
.org-node.hq { border-color: var(--primary); border-width: 3px; }
.org-node.hq .org-node-header { background: linear-gradient(135deg, var(--primary), var(--secondary)); }
.org-node-header { padding: 15px 18px; background: linear-gradient(135deg, rgba(102,126,234,0.1), rgba(102,126,234,0.05)); border-bottom: 1px solid var(--card-border); display: flex; align-items: center; gap: 12px; }
.org-node.hq .org-node-header { color: #fff; }
.org-node-icon { width: 45px; height: 45px; border-radius: 12px; background: linear-gradient(135deg, var(--primary), var(--secondary)); display: flex; align-items: center; justify-content: center; font-size: 1.3em; color: #fff; }
.org-node.hq .org-node-icon { background: rgba(255,255,255,0.2); }
.org-node-title { flex: 1; }
.org-node-name { font-weight: 700; font-size: 1.05em; }
.org-node-type { font-size: 0.8em; color: var(--text-light); }
.org-node.hq .org-node-type { color: rgba(255,255,255,0.8); }
.org-node-body { padding: 15px 18px; }
.org-node-stats { display: flex; gap: 15px; margin-bottom: 12px; }
.org-node-stat { display: flex; align-items: center; gap: 6px; font-size: 0.85em; }
.org-node-stat-icon { font-size: 1em; }
.org-node-stat-value { font-weight: 700; color: var(--primary); }
.org-node-manager { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg); border-radius: var(--radius-sm); margin-bottom: 12px; }
.org-node-manager-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary)); display: flex; align-items: center; justify-content: center; font-size: 0.8em; color: #fff; font-weight: 600; }
.org-node-manager-info { flex: 1; }
.org-node-manager-name { font-weight: 600; font-size: 0.9em; }
.org-node-manager-role { font-size: 0.75em; color: var(--text-light); }
.org-node-employees { margin-bottom: 12px; }
.org-node-employees-title { font-size: 0.8em; color: var(--text-light); margin-bottom: 6px; }
.org-node-employees-list { display: flex; flex-wrap: wrap; gap: 4px; }
.org-node-employee-chip { display: flex; align-items: center; gap: 5px; padding: 4px 8px; background: var(--bg-secondary); border-radius: 15px; font-size: 0.75em; }
.org-node-employee-avatar { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary)); display: flex; align-items: center; justify-content: center; font-size: 0.6em; color: #fff; }
.org-node-actions { display: flex; gap: 8px; }
.org-node-btn { flex: 1; padding: 8px 12px; border: none; border-radius: var(--radius-sm); font-size: 0.8em; font-weight: 600; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; gap: 5px; }
.org-node-btn.primary { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; }
.org-node-btn.secondary { background: var(--bg); color: var(--text); }
.org-node-btn:hover { transform: scale(1.02); }
.org-connector { position: absolute; top: -25px; left: 50%; width: 2px; height: 25px; background: linear-gradient(180deg, var(--primary), var(--secondary)); transform: translateX(-50%); }
.org-level:not(:first-child)::before { content: ''; position: absolute; top: -25px; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, transparent, var(--primary), var(--secondary), transparent); }
.calendar-compact { max-width: 100%; }
.calendar-compact .calendar-grid { gap: 4px; }
.calendar-compact .calendar-day { padding: 8px 4px; min-height: 60px; max-height: 70px; font-size: 0.9em; }
.calendar-compact .calendar-header { padding: 8px 4px; font-size: 0.8em; }
.calendar-compact .calendar-day-number { font-size: 0.95em; }
.tasks-sidebar { background: var(--card-bg); border-radius: var(--radius-lg); padding: 20px; height: fit-content; }
.tasks-sidebar-title { font-weight: 700; font-size: 1.1em; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
.task-compact { padding: 12px; background: var(--bg); border-radius: var(--radius-sm); margin-bottom: 10px; }
.task-compact-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.task-compact-title { font-weight: 600; font-size: 0.95em; }
.task-compact-priority { width: 8px; height: 8px; border-radius: 50%; }
.task-compact-meta { font-size: 0.8em; color: var(--text-light); display: flex; gap: 10px; }
.advanced-search { background: var(--card-bg); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 20px; display: none; }
.advanced-search.show { display: block; }
.search-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-bottom: 15px; }
.search-filter { display: flex; flex-direction: column; gap: 5px; }
.search-filter label { font-size: 0.85em; font-weight: 600; color: var(--text-light); }
.search-actions { display: flex; gap: 10px; justify-content: flex-end; }
.data-upload-zone { border: 3px dashed var(--primary); border-radius: var(--radius-lg); padding: 50px 30px; text-align: center; background: rgba(102,126,234,0.05); cursor: pointer; transition: var(--transition); }
.data-upload-zone:hover { background: rgba(102,126,234,0.1); border-color: var(--primary-dark); }
.data-upload-zone.dragover { background: rgba(102,126,234,0.15); transform: scale(1.02); }
.data-upload-icon { font-size: 4em; margin-bottom: 20px; color: var(--primary); }
.data-upload-text { font-weight: 700; font-size: 1.2em; color: var(--text); margin-bottom: 8px; }
.data-upload-hint { font-size: 0.9em; color: var(--text-light); }
.data-preview-table { margin-top: 20px; max-height: 400px; overflow: auto; }
.data-mapping-section { margin-top: 20px; padding: 20px; background: var(--bg); border-radius: var(--radius); }
.data-mapping-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 15px; align-items: center; margin-bottom: 12px; padding: 10px; background: var(--card-bg); border-radius: var(--radius-sm); }
.data-mapping-arrow { color: var(--primary); font-size: 1.5em; }
.manual-data-form { margin-top: 20px; padding: 20px; background: var(--bg); border-radius: var(--radius); }
.reminder-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(5px);
z-index: 9998;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.reminder-overlay.active {
opacity: 1;
visibility: visible;
}
.reminder-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.9);
background: var(--card-bg);
border-radius: var(--radius-lg);
box-shadow: 0 25px 80px rgba(0,0,0,0.4);
z-index: 9999;
width: 90%;
max-width: 420px;
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reminder-popup.active {
opacity: 1;
visibility: visible;
transform: translate(-50%, -50%) scale(1);
}
.reminder-header {
padding: 30px;
background: linear-gradient(135deg, var(--warning) 0%, #dd6b20 100%);
color: #fff;
text-align: center;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.reminder-icon {
font-size: 4rem;
margin-bottom: 15px;
animation: bounce 1s infinite;
display: block;
}
.reminder-title {
font-size: 1.5rem;
font-weight: 700;
}
.reminder-body {
padding: 30px;
text-align: center;
}
.reminder-event-title {
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 10px;
color: var(--text);
}
.reminder-event-time {
color: var(--text-light);
font-size: 1rem;
margin-bottom: 25px;
}
.reminder-actions {
display: flex;
gap: 15px;
justify-content: center;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.ai-prediction-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 20px;
font-size: 0.75em;
font-weight: 700;
}
.ai-prediction-badge.high { background: rgba(16,185,129,0.15); color: #10b981; }
.ai-prediction-badge.medium { background: rgba(245,158,11,0.15); color: #f59e0b; }
.ai-prediction-badge.low { background: rgba(239,68,68,0.15); color: #ef4444; }
.xp-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: linear-gradient(135deg, #f59e0b, #fbbf24);
color: #fff;
padding: 5px 12px;
border-radius: 20px;
font-size: 0.8em;
font-weight: 700;
box-shadow: 0 2px 10px rgba(245,158,11,0.3);
}
.level-badge {
padding: 5px 15px;
border-radius: 20px;
font-size: 0.85em;
font-weight: 700;
}
.level-badge.beginner { background: linear-gradient(135deg, #9ca3af, #6b7280); color: #fff; }
.level-badge.intermediate { background: linear-gradient(135deg, #3b82f6, #60a5fa); color: #fff; }
.level-badge.advanced { background: linear-gradient(135deg, #8b5cf6, #a78bfa); color: #fff; }
.level-badge.expert { background: linear-gradient(135deg, #f59e0b, #fbbf24); color: #fff; }
.level-badge.champion { background: linear-gradient(135deg, #ef4444, #f87171); color: #fff; }
.challenge-card {
background: var(--card-bg);
border-radius: var(--radius);
padding: 20px;
border: 2px solid var(--card-border);
transition: var(--transition);
}
.challenge-card:hover { border-color: var(--primary); transform: translateY(-3px); }
.challenge-progress {
height: 8px;
background: var(--bg-secondary);
border-radius: 10px;
overflow: hidden;
margin: 15px 0;
}
.challenge-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--primary), var(--secondary));
border-radius: 10px;
transition: width 0.5s ease;
}
.leaderboard-item {
display: flex;
align-items: center;
gap: 15px;
padding: 15px;
background: var(--bg);
border-radius: var(--radius-sm);
margin-bottom: 10px;
transition: var(--transition);
}
.leaderboard-item:hover { transform: translateX(-5px); }
.leaderboard-item.gold { background: linear-gradient(135deg, rgba(245,158,11,0.1), rgba(251,191,36,0.1)); border: 2px solid #f59e0b; }
.leaderboard-item.silver { background: linear-gradient(135deg, rgba(156,163,175,0.1), rgba(209,213,219,0.1)); border: 2px solid #9ca3af; }
.leaderboard-item.bronze { background: linear-gradient(135deg, rgba(180,83,9,0.1), rgba(217,119,6,0.1)); border: 2px solid #b45309; }
.leaderboard-rank {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 1.1em;
}
.leaderboard-rank.gold { background: linear-gradient(135deg, #f59e0b, #fbbf24); color: #fff; }
.leaderboard-rank.silver { background: linear-gradient(135deg, #9ca3af, #d1d5db); color: #fff; }
.leaderboard-rank.bronze { background: linear-gradient(135deg, #b45309, #d97706); color: #fff; }
.achievement-badge {
display: inline-flex;
flex-direction: column;
align-items: center;
padding: 15px;
background: var(--bg);
border-radius: var(--radius);
width: 100px;
text-align: center;
transition: var(--transition);
}
.achievement-badge:hover { transform: scale(1.05); }
.achievement-badge-icon { font-size: 2.5em; margin-bottom: 8px; }
.achievement-badge-name { font-size: 0.8em; font-weight: 600; }
.achievement-badge.locked { opacity: 0.5; filter: grayscale(100%); }
.personal-area {
display: grid;
grid-template-columns: 300px 1fr;
gap: 25px;
}
@media (max-width: 900px) {
.personal-area { grid-template-columns: 1fr; }
}
.personal-sidebar {
background: var(--card-bg);
border-radius: var(--radius-lg);
padding: 25px;
border: 1px solid var(--card-border);
backdrop-filter: blur(var(--glass-blur));
}
.personal-profile-card {
text-align: center;
padding-bottom: 20px;
border-bottom: 1px solid var(--bg-secondary);
margin-bottom: 20px;
}
.personal-avatar-large {
width: 120px;
height: 120px;
border-radius: 50%;
margin: 0 auto 15px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
display: flex;
align-items: center;
justify-content: center;
font-size: 3em;
color: #fff;
font-weight: 700;
background-size: cover;
background-position: center;
box-shadow: 0 10px 30px rgba(13,148,136,0.3);
}
.personal-name { font-size: 1.3em; font-weight: 700; margin-bottom: 5px; }
.personal-role { color: var(--text-light); font-size: 0.9em; }
.personal-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-top: 20px;
}
.personal-stat {
text-align: center;
padding: 12px 8px;
background: var(--bg);
border-radius: var(--radius-sm);
}
.personal-stat-value { font-size: 1.4em; font-weight: 700; color: var(--primary); }
.personal-stat-label { font-size: 0.75em; color: var(--text-light); margin-top: 3px; }
.employee-tree {
padding: 20px;
}
.tree-branch {
margin-right: 20px;
padding-right: 20px;
border-right: 2px solid var(--bg-secondary);
}
.tree-node {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 15px;
margin-bottom: 8px;
background: var(--bg);
border-radius: var(--radius-sm);
cursor: pointer;
transition: var(--transition);
}
.tree-node:hover { background: var(--bg-secondary); transform: translateX(-5px); }
.tree-node.manager { background: linear-gradient(135deg, rgba(13,148,136,0.1), rgba(20,184,166,0.05)); border-right: 3px solid var(--primary); }
.tree-toggle {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-secondary);
border-radius: 50%;
font-size: 0.8em;
transition: var(--transition);
}
.tree-toggle.expanded { transform: rotate(90deg); }
.tree-children {
display: none;
margin-right: 30px;
}
.tree-children.show { display: block; }
.heat-map-container {
display: grid;
gap: 3px;
}
.heat-map-cell {
width: 30px;
height: 30px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7em;
font-weight: 600;
transition: var(--transition);
}
.heat-map-cell:hover { transform: scale(1.2); z-index: 1; }
.heat-level-0 { background: var(--bg-secondary); color: var(--text-lighter); }
.heat-level-1 { background: rgba(13,148,136,0.2); color: var(--primary); }
.heat-level-2 { background: rgba(13,148,136,0.4); color: #fff; }
.heat-level-3 { background: rgba(13,148,136,0.6); color: #fff; }
.heat-level-4 { background: rgba(13,148,136,0.8); color: #fff; }
.heat-level-5 { background: var(--primary); color: #fff; }
.ai-bot-panel {
position: fixed;
bottom: 90px;
left: 20px;
width: 380px;
height: 500px;
background: var(--card-bg);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
display: none;
flex-direction: column;
z-index: 1000;
overflow: hidden;
}
.ai-bot-panel.active { display: flex; }
.ai-bot-header {
padding: 15px 20px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
}
.ai-bot-messages {
flex: 1;
overflow-y: auto;
padding: 15px;
}
.ai-message {
margin-bottom: 15px;
display: flex;
}
.ai-message.user { justify-content: flex-end; }
.ai-message.bot { justify-content: flex-start; }
.ai-message-content {
max-width: 80%;
padding: 12px 16px;
border-radius: 18px;
font-size: 0.9em;
white-space: pre-wrap;
}
.ai-message.user .ai-message-content {
background: var(--primary);
color: #fff;
border-bottom-right-radius: 4px;
}
.ai-message.bot .ai-message-content {
background: var(--bg);
color: var(--text);
border-bottom-left-radius: 4px;
}
.ai-message.thinking .ai-message-content {
opacity: 0.7;
animation: pulse 1s infinite;
}
.ai-bot-input {
display: flex;
gap: 10px;
padding: 15px;
border-top: 1px solid var(--bg-secondary);
}
.ai-bot-input input {
flex: 1;
padding: 12px;
border: 2px solid var(--bg-secondary);
border-radius: var(--radius);
font-family: inherit;
}
.training-center { padding: 20px; }
.training-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 30px;
}
.training-progress-bar {
flex: 1;
height: 10px;
background: var(--bg-secondary);
border-radius: 5px;
overflow: hidden;
}
.training-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--primary), var(--secondary));
transition: width 0.5s ease;
}
.training-modules { display: flex; flex-direction: column; gap: 15px; }
.training-module {
display: flex;
align-items: center;
gap: 20px;
padding: 20px;
background: var(--card-bg);
border-radius: var(--radius);
border: 2px solid var(--bg-secondary);
transition: var(--transition);
}
.training-module:hover { border-color: var(--primary); }
.training-module.completed { opacity: 0.7; }
.training-module-icon { font-size: 2.5em; }
.training-module-info { flex: 1; }
.training-module-info h4 { margin-bottom: 5px; }
.training-module-info p { color: var(--text-light); font-size: 0.9em; margin-bottom: 10px; }
.training-module-meta {
display: flex;
gap: 15px;
font-size: 0.85em;
color: var(--text-light);
}
.territory-map-container { padding: 20px; }
.territory-map-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.territory-list { display: flex; flex-direction: column; gap: 12px; }
.territory-item {
display: flex;
align-items: center;
gap: 15px;
padding: 15px;
background: var(--card-bg);
border-radius: var(--radius);
border: 1px solid var(--bg-secondary);
}
.territory-color {
width: 10px;
height: 60px;
border-radius: 5px;
}
.territory-info { flex: 1; }
.territory-name { font-weight: 700; margin-bottom: 5px; }
.territory-cities { font-size: 0.85em; color: var(--text-light); margin-bottom: 3px; }
.territory-agent { font-size: 0.85em; color: var(--primary); }
.betting-center { padding: 20px; }
.betting-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
}
.betting-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.bet-card {
background: var(--card-bg);
border-radius: var(--radius);
padding: 20px;
border: 2px solid var(--bg-secondary);
}
.bet-title {
font-size: 1.1em;
font-weight: 700;
margin-bottom: 15px;
}
.bet-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 15px; }
.bet-option {
display: flex;
justify-content: space-between;
padding: 12px 15px;
background: var(--bg);
border-radius: var(--radius-sm);
cursor: pointer;
transition: var(--transition);
}
.bet-option:hover { background: var(--primary); color: #fff; }
.bet-points { font-weight: 600; }
.bet-footer {
font-size: 0.85em;
color: var(--text-light);
text-align: center;
}
.inventory-container { padding: 20px; }
.inventory-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
}
.inventory-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 15px;
}
.inventory-card {
background: var(--card-bg);
border-radius: var(--radius);
padding: 15px;
text-align: center;
border: 2px solid var(--bg-secondary);
}
.inventory-card.low-stock { border-color: var(--danger); }
.inventory-icon { font-size: 2em; margin-bottom: 10px; }
.inventory-name { font-weight: 600; margin-bottom: 8px; }
.inventory-quantity { font-size: 1.2em; margin-bottom: 5px; }
.inventory-quantity.danger { color: var(--danger); }
.inventory-price { color: var(--text-light); font-size: 0.9em; margin-bottom: 10px; }
.inventory-actions { display: flex; justify-content: center; gap: 5px; }
.commission-summary {
text-align: center;
padding: 15px;
background: linear-gradient(135deg, rgba(13,148,136,0.1), rgba(6,182,212,0.1));
border-radius: var(--radius);
}
.commission-total {
font-size: 2em;
font-weight: 800;
color: var(--primary);
margin-bottom: 5px;
}
.commission-label {
font-size: 0.9em;
color: var(--text-light);
margin-bottom: 15px;
}
.commission-details {
display: flex;
justify-content: center;
gap: 20px;
font-size: 0.9em;
}
.whatsapp-contact-item {
display: flex;
align-items: center;
gap: 15px;
padding: 12px;
border-radius: var(--radius-sm);
cursor: pointer;
transition: var(--transition);
}
.whatsapp-contact-item:hover { background: var(--bg); }
.whatsapp-contact-avatar {
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 700;
}
.whatsapp-contact-info { flex: 1; }
.whatsapp-contact-name { font-weight: 600; }
.whatsapp-contact-phone { font-size: 0.85em; color: var(--text-light); }
.smart-notification {
position: fixed;
bottom: 100px;
right: 20px;
background: var(--card-bg);
border-radius: var(--radius);
padding: 15px 20px;
box-shadow: var(--shadow-lg);
display: flex;
align-items: center;
gap: 15px;
z-index: 9999;
max-width: 350px;
animation: slideInRight 0.3s ease;
border-right: 4px solid var(--primary);
}
.smart-notification-icon { font-size: 1.8em; }
.smart-notification-content { flex: 1; }
.smart-notification-title { font-weight: 700; margin-bottom: 3px; }
.smart-notification-text { font-size: 0.9em; color: var(--text-light); }
.smart-notification-close {
background: none;
border: none;
font-size: 1.2em;
cursor: pointer;
color: var(--text-light);
}
@keyframes slideInRight {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.signature-container {
padding: 20px;
background: var(--bg);
border-radius: var(--radius);
}
#signatureCanvas {
border: 2px solid var(--bg-secondary);
border-radius: var(--radius-sm);
background: #fff;
cursor: crosshair;
}
.signature-actions {
display: flex;
gap: 10px;
margin-top: 15px;
}
.signature-pad-container {
background: #fff;
border: 2px dashed var(--bg-tertiary);
border-radius: var(--radius);
padding: 20px;
text-align: center;
}
.signature-pad {
border: 1px solid var(--bg-tertiary);
border-radius: var(--radius-sm);
background: #fff;
cursor: crosshair;
}
.signature-actions {
display: flex;
gap: 10px;
justify-content: center;
margin-top: 15px;
}
.smart-notification {
position: fixed;
top: 90px;
left: 20px;
background: var(--card-bg);
border-radius: var(--radius);
padding: 15px 20px;
box-shadow: var(--shadow-lg);
display: flex;
align-items: center;
gap: 12px;
z-index: 9999;
animation: slideInLeft 0.3s ease;
max-width: 350px;
border-right: 4px solid var(--primary);
}
@keyframes slideInLeft {
from { transform: translateX(-100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.smart-notification-icon {
width: 45px;
height: 45px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--secondary));
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3em;
color: #fff;
}
.smart-notification-content { flex: 1; }
.smart-notification-title { font-weight: 700; margin-bottom: 3px; }
.smart-notification-text { font-size: 0.85em; color: var(--text-light); }
.smart-notification-close {
background: none;
border: none;
font-size: 1.2em;
cursor: pointer;
color: var(--text-light);
}
.territory-map-container {
height: 500px;
border-radius: var(--radius);
overflow: hidden;
background: var(--bg-secondary);
position: relative;
}
.territory-legend {
position: absolute;
bottom: 20px;
left: 20px;
background: var(--card-bg);
padding: 15px;
border-radius: var(--radius-sm);
backdrop-filter: blur(10px);
}
.territory-legend-item {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.territory-legend-color {
width: 20px;
height: 20px;
border-radius: 4px;
}
.training-module {
background: var(--card-bg);
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--card-border);
}
.training-video-container {
position: relative;
padding-top: 56.25%;
background: #000;
}
.training-video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.training-content { padding: 20px; }
.training-progress-bar {
height: 6px;
background: var(--bg-secondary);
border-radius: 10px;
margin: 15px 0;
}
.training-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--success), #34d399);
border-radius: 10px;
}
.quiz-option {
padding: 15px 20px;
background: var(--bg);
border-radius: var(--radius-sm);
margin-bottom: 10px;
cursor: pointer;
transition: var(--transition);
border: 2px solid transparent;
}
.quiz-option:hover { border-color: var(--primary); }
.quiz-option.selected { border-color: var(--primary); background: rgba(13,148,136,0.1); }
.quiz-option.correct { border-color: var(--success); background: rgba(16,185,129,0.1); }
.quiz-option.incorrect { border-color: var(--danger); background: rgba(239,68,68,0.1); }
.commission-tiers {
display: grid;
gap: 10px;
margin-bottom: 20px;
}
.commission-tier {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
background: var(--bg);
border-radius: var(--radius-sm);
}
.commission-tier.active {
background: rgba(13,148,136,0.1);
border: 2px solid var(--primary);
}
.commission-result {
font-size: 2em;
font-weight: 800;
color: var(--success);
text-align: center;
padding: 20px;
background: rgba(16,185,129,0.1);
border-radius: var(--radius);
}
.reminder-notification-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--card-bg);
border-radius: var(--radius-lg);
padding: 30px;
box-shadow: var(--shadow-lg);
z-index: 99999;
max-width: 400px;
text-align: center;
animation: popIn 0.3s ease;
}
@keyframes popIn {
from { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.reminder-notification-backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 99998;
}
.reminder-icon-large {
font-size: 4em;
margin-bottom: 15px;
animation: bounce 1s infinite;
}
.whatsapp-container {
display: grid;
grid-template-columns: 350px 1fr;
height: calc(100vh - var(--nav-height) - 40px);
gap: 20px;
}
@media (max-width: 900px) {
.whatsapp-container { grid-template-columns: 1fr; }
}
.whatsapp-contacts-panel {
background: var(--card-bg);
border-radius: var(--radius);
overflow: hidden;
display: flex;
flex-direction: column;
}
.whatsapp-chat-panel {
background: var(--card-bg);
border-radius: var(--radius);
overflow: hidden;
display: flex;
flex-direction: column;
}
.whatsapp-header {
background: #075E54;
color: #fff;
padding: 15px 20px;
display: flex;
align-items: center;
gap: 12px;
}
.whatsapp-contact-item {
display: flex;
align-items: center;
gap: 12px;
padding: 15px;
cursor: pointer;
transition: var(--transition);
border-bottom: 1px solid var(--bg-secondary);
}
.whatsapp-contact-item:hover { background: var(--bg); }
.whatsapp-contact-item.active { background: rgba(13,148,136,0.1); }
.whatsapp-messages {
flex: 1;
overflow-y: auto;
padding: 20px;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23e2e8f0' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.whatsapp-message {
max-width: 70%;
padding: 10px 15px;
border-radius: 8px;
margin-bottom: 10px;
position: relative;
}
.whatsapp-message.sent {
background: #DCF8C6;
margin-right: auto;
border-bottom-right-radius: 0;
}
.whatsapp-message.received {
background: #fff;
margin-left: auto;
border-bottom-left-radius: 0;
}
.whatsapp-message-time {
font-size: 0.7em;
color: #999;
text-align: left;
margin-top: 5px;
}
.whatsapp-input-container {
padding: 15px;
background: #F0F0F0;
display: flex;
gap: 10px;
align-items: center;
}
.whatsapp-input {
flex: 1;
padding: 12px 15px;
border-radius: 25px;
border: none;
background: #fff;
font-size: 1em;
}
.whatsapp-send-btn {
width: 45px;
height: 45px;
border-radius: 50%;
background: #075E54;
color: #fff;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2em;
}
.smtp-config-card {
background: var(--card-bg);
border-radius: var(--radius);
padding: 25px;
border: 1px solid var(--card-border);
}
.smtp-test-status {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 15px;
border-radius: var(--radius-sm);
margin-top: 15px;
}
.smtp-test-status.success { background: rgba(16,185,129,0.1); color: var(--success); }
.smtp-test-status.error { background: rgba(239,68,68,0.1); color: var(--danger); }
.smtp-test-status.loading { background: rgba(59,130,246,0.1); color: var(--info); }
.heatmap-container {
background: var(--card-bg);
border-radius: var(--radius);
padding: 20px;
margin-bottom: 20px;
}
.heatmap-grid {
display: grid;
grid-template-columns: repeat(24, 1fr);
gap: 2px;
}
.heatmap-cell {
aspect-ratio: 1;
border-radius: 4px;
cursor: pointer;
transition: transform 0.2s;
position: relative;
}
.heatmap-cell:hover {
transform: scale(1.3);
z-index: 10;
}
.heatmap-cell[data-intensity="0"] { background: #f0f4f8; }
.heatmap-cell[data-intensity="1"] { background: #c6f6d5; }
.heatmap-cell[data-intensity="2"] { background: #9ae6b4; }
.heatmap-cell[data-intensity="3"] { background: #68d391; }
.heatmap-cell[data-intensity="4"] { background: #48bb78; }
.heatmap-cell[data-intensity="5"] { background: #38a169; }
.heatmap-cell[data-intensity="6"] { background: #2f855a; }
.heatmap-cell[data-intensity="7"] { background: #276749; }
.heatmap-legend {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 5px;
margin-top: 15px;
font-size: 0.8em;
}
.heatmap-legend-item {
width: 15px;
height: 15px;
border-radius: 3px;
}
.heatmap-days {
display: flex;
flex-direction: column;
gap: 2px;
margin-left: 10px;
font-size: 0.7em;
color: var(--text-light);
}
.sentiment-card {
background: var(--card-bg);
border-radius: var(--radius);
padding: 20px;
}
.sentiment-meter {
height: 20px;
background: linear-gradient(to right, #ef4444, #f59e0b, #10b981);
border-radius: 10px;
position: relative;
margin: 20px 0;
}
.sentiment-indicator {
position: absolute;
top: -5px;
width: 30px;
height: 30px;
background: #fff;
border-radius: 50%;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2em;
transform: translateX(-50%);
transition: left 0.5s ease;
}
.sentiment-labels {
display: flex;
justify-content: space-between;
font-size: 0.85em;
color: var(--text-light);
}
.sentiment-breakdown {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin-top: 20px;
}
.sentiment-item {
text-align: center;
padding: 15px;
border-radius: var(--radius-sm);
background: var(--bg);
}
.sentiment-item.positive { border-right: 3px solid var(--success); }
.sentiment-item.neutral { border-right: 3px solid var(--warning); }
.sentiment-item.negative { border-right: 3px solid var(--danger); }
.sentiment-value {
font-size: 1.8em;
font-weight: 700;
}
.comparison-container {
background: var(--card-bg);
border-radius: var(--radius);
padding: 20px;
}
.comparison-tabs {
display: flex;
gap: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.comparison-tab {
padding: 10px 20px;
border: none;
background: var(--bg);
border-radius: var(--radius-sm);
cursor: pointer;
font-weight: 500;
transition: all 0.2s;
}
.comparison-tab.active {
background: var(--primary);
color: #fff;
}
.comparison-chart {
min-height: 300px;
display: flex;
align-items: flex-end;
gap: 20px;
padding: 20px 0;
}
.comparison-bar-group {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.comparison-bars {
display: flex;
gap: 5px;
align-items: flex-end;
height: 200px;
}
.comparison-single-bar {
width: 30px;
border-radius: 5px 5px 0 0;
transition: height 0.5s ease;
}
.comparison-single-bar.current { background: var(--primary); }
.comparison-single-bar.previous { background: var(--bg-secondary); }
.prediction-card {
background: linear-gradient(135deg, var(--primary), var(--secondary));
border-radius: var(--radius);
padding: 25px;
color: #fff;
}
.prediction-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.prediction-icon {
width: 50px;
height: 50px;
background: rgba(255,255,255,0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
}
.prediction-value {
font-size: 2.5em;
font-weight: 700;
}
.prediction-label {
opacity: 0.9;
font-size: 0.9em;
}
.prediction-confidence {
margin-top: 15px;
padding: 15px;
background: rgba(255,255,255,0.15);
border-radius: var(--radius-sm);
}
.confidence-bar {
height: 8px;
background: rgba(255,255,255,0.3);
border-radius: 4px;
overflow: hidden;
margin-top: 10px;
}
.confidence-fill {
height: 100%;
background: #fff;
border-radius: 4px;
transition: width 0.5s;
}
.ab-test-card {
background: var(--card-bg);
border-radius: var(--radius);
padding: 20px;
margin-bottom: 15px;
}
.ab-test-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.ab-test-status {
padding: 5px 12px;
border-radius: 20px;
font-size: 0.8em;
font-weight: 600;
}
.ab-test-status.running { background: rgba(16,185,129,0.1); color: var(--success); }
.ab-test-status.completed { background: rgba(59,130,246,0.1); color: var(--info); }
.ab-test-status.paused { background: rgba(245,158,11,0.1); color: var(--warning); }
.ab-variants {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.ab-variant {
padding: 20px;
border-radius: var(--radius-sm);
background: var(--bg);
position: relative;
}
.ab-variant.winner {
border: 2px solid var(--success);
}
.ab-variant-badge {
position: absolute;
top: -10px;
right: 15px;
padding: 4px 12px;
background: var(--success);
color: #fff;
border-radius: 10px;
font-size: 0.75em;
font-weight: 600;
}
.ab-variant-name {
font-size: 1.1em;
font-weight: 600;
margin-bottom: 15px;
}
.ab-metric {
display: flex;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid var(--bg-secondary);
}
.ab-metric:last-child { border-bottom: none; }
.points-display {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 20px;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
border-radius: 30px;
color: #fff;
font-weight: 700;
}
.points-icon {
font-size: 1.3em;
}
.points-value {
font-size: 1.2em;
}
.points-history {
max-height: 300px;
overflow-y: auto;
}
.points-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 15px;
border-bottom: 1px solid var(--bg);
}
.points-item:last-child { border-bottom: none; }
.points-item-info {
display: flex;
align-items: center;
gap: 12px;
}
.points-item-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--bg);
display: flex;
align-items: center;
justify-content: center;
}
.points-amount {
font-weight: 700;
}
.points-amount.positive { color: var(--success); }
.points-amount.negative { color: var(--danger); }
.challenge-card {
background: var(--card-bg);
border-radius: var(--radius);
padding: 20px;
margin-bottom: 15px;
border-right: 4px solid var(--primary);
}
.challenge-card.completed {
border-right-color: var(--success);
opacity: 0.8;
}
.challenge-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 15px;
}
.challenge-title {
font-size: 1.1em;
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
}
.challenge-reward {
display: flex;
align-items: center;
gap: 5px;
padding: 5px 12px;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
border-radius: 20px;
color: #fff;
font-weight: 600;
font-size: 0.85em;
}
.challenge-progress {
margin-top: 15px;
}
.challenge-progress-bar {
height: 10px;
background: var(--bg);
border-radius: 5px;
overflow: hidden;
}
.challenge-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--primary), var(--secondary));
border-radius: 5px;
transition: width 0.5s;
}
.challenge-progress-text {
display: flex;
justify-content: space-between;
margin-top: 8px;
font-size: 0.85em;
color: var(--text-light);
}
.challenge-deadline {
display: flex;
align-items: center;
gap: 5px;
margin-top: 10px;
font-size: 0.85em;
color: var(--text-light);
}
.leaderboard-podium {
display: flex;
justify-content: center;
align-items: flex-end;
gap: 20px;
margin-bottom: 30px;
padding: 20px;
}
.podium-place {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.podium-avatar {
width: 70px;
height: 70px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--secondary));
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 700;
font-size: 1.3em;
margin-bottom: 10px;
border: 3px solid #fff;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.podium-place.first .podium-avatar {
width: 90px;
height: 90px;
font-size: 1.5em;
border-color: #fbbf24;
}
.podium-stand {
width: 80px;
border-radius: 10px 10px 0 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 2em;
font-weight: 700;
}
.podium-place.first .podium-stand {
height: 100px;
background: linear-gradient(180deg, #fbbf24, #f59e0b);
width: 100px;
}
.podium-place.second .podium-stand {
height: 70px;
background: linear-gradient(180deg, #9ca3af, #6b7280);
}
.podium-place.third .podium-stand {
height: 50px;
background: linear-gradient(180deg, #d97706, #b45309);
}
.podium-name {
font-weight: 600;
margin-bottom: 5px;
}
.podium-points {
font-size: 0.85em;
color: var(--text-light);
}
.medals-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 15px;
}
.medal-card {
background: var(--card-bg);
border-radius: var(--radius);
padding: 20px;
text-align: center;
transition: all 0.3s;
position: relative;
}
.medal-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.medal-card.locked {
opacity: 0.5;
filter: grayscale(1);
}
.medal-icon {
width: 60px;
height: 60px;
margin: 0 auto 15px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2em;
}
.medal-icon.gold { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.medal-icon.silver { background: linear-gradient(135deg, #9ca3af, #6b7280); }
.medal-icon.bronze { background: linear-gradient(135deg, #d97706, #b45309); }
.medal-icon.special { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
.medal-name {
font-weight: 600;
margin-bottom: 5px;
}
.medal-description {
font-size: 0.8em;
color: var(--text-light);
}
.medal-date {
font-size: 0.75em;
color: var(--text-light);
margin-top: 10px;
}
.medal-locked-overlay {
position: absolute;
top: 10px;
left: 10px;
font-size: 1.2em;
}
.betting-card {
background: var(--card-bg);
border-radius: var(--radius);
padding: 20px;
margin-bottom: 15px;
}
.betting-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.betting-pool {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 15px;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
border-radius: 20px;
color: #fff;
font-weight: 600;
}
.betting-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
margin-top: 15px;
}
.betting-option {
padding: 15px;
border: 2px solid var(--bg);
border-radius: var(--radius-sm);
text-align: center;
cursor: pointer;
transition: all 0.2s;
}
.betting-option:hover {
border-color: var(--primary);
}
.betting-option.selected {
border-color: var(--primary);
background: rgba(13,148,136,0.1);
}
.betting-odds {
font-size: 1.3em;
font-weight: 700;
color: var(--primary);
}
.widget-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.widget-draggable {
cursor: move;
}
.widget-draggable.dragging {
opacity: 0.5;
transform: scale(1.02);
}
.widget-placeholder {
border: 2px dashed var(--primary);
border-radius: var(--radius);
background: rgba(13,148,136,0.05);
min-height: 150px;
}
.widget-actions {
position: absolute;
top: 10px;
left: 10px;
display: flex;
gap: 5px;
opacity: 0;
transition: opacity 0.2s;
}
.widget:hover .widget-actions {
opacity: 1;
}
.widget-action-btn {
width: 28px;
height: 28px;
border: none;
background: var(--bg);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8em;
}
.notification-center {
position: fixed;
top: 80px;
left: 20px;
width: 380px;
max-height: 500px;
background: var(--card-bg);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
z-index: 2000;
display: none;
flex-direction: column;
}
.notification-center.show {
display: flex;
}
.notification-header {
padding: 15px 20px;
border-bottom: 1px solid var(--bg);
display: flex;
justify-content: space-between;
align-items: center;
}
.notification-list {
flex: 1;
overflow-y: auto;
max-height: 400px;
}
.notification-item {
padding: 15px 20px;
border-bottom: 1px solid var(--bg);
display: flex;
gap: 12px;
cursor: pointer;
transition: background 0.2s;
}
.notification-item:hover {
background: var(--bg);
}
.notification-item.unread {
background: rgba(13,148,136,0.05);
}
.notification-icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.notification-icon.success { background: rgba(16,185,129,0.1); color: var(--success); }
.notification-icon.warning { background: rgba(245,158,11,0.1); color: var(--warning); }
.notification-icon.danger { background: rgba(239,68,68,0.1); color: var(--danger); }
.notification-icon.info { background: rgba(59,130,246,0.1); color: var(--info); }
.notification-content {
flex: 1;
}
.notification-title {
font-weight: 600;
margin-bottom: 3px;
}
.notification-text {
font-size: 0.85em;
color: var(--text-light);
}
.notification-time {
font-size: 0.75em;
color: var(--text-light);
margin-top: 5px;
}
.shortcuts-panel {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--card-bg);
border-radius: var(--radius);
padding: 30px;
box-shadow: var(--shadow-lg);
z-index: 3000;
max-width: 600px;
width: 90%;
display: none;
}
.shortcuts-panel.show {
display: block;
}
.shortcuts-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-top: 20px;
}
.shortcut-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background: var(--bg);
border-radius: var(--radius-sm);
}
.shortcut-keys {
display: flex;
gap: 5px;
}
.shortcut-key {
padding: 5px 10px;
background: #fff;
border: 1px solid var(--bg-secondary);
border-radius: 5px;
font-family: monospace;
font-size: 0.85em;
font-weight: 600;
}
.territory-map {
background: var(--card-bg);
border-radius: var(--radius);
padding: 20px;
min-height: 400px;
}
.territory-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 15px;
}
.territory-card {
background: var(--bg);
border-radius: var(--radius-sm);
padding: 15px;
border-right: 4px solid var(--primary);
}
.territory-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.territory-name {
font-weight: 600;
}
.territory-agent {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9em;
}
.territory-stats {
display: flex;
gap: 15px;
margin-top: 10px;
font-size: 0.85em;
}
.shifts-calendar {
background: var(--card-bg);
border-radius: var(--radius);
overflow: hidden;
}
.shifts-header {
display: grid;
grid-template-columns: 100px repeat(7, 1fr);
background: var(--primary);
color: #fff;
}
.shifts-header-cell {
padding: 15px 10px;
text-align: center;
font-weight: 600;
}
.shifts-body {
max-height: 500px;
overflow-y: auto;
}
.shifts-row {
display: grid;
grid-template-columns: 100px repeat(7, 1fr);
border-bottom: 1px solid var(--bg);
}
.shifts-employee {
padding: 15px 10px;
font-weight: 500;
background: var(--bg);
display: flex;
align-items: center;
gap: 8px;
}
.shifts-cell {
padding: 10px;
min-height: 60px;
border-left: 1px solid var(--bg);
cursor: pointer;
transition: background 0.2s;
}
.shifts-cell:hover {
background: var(--bg);
}
.shift-badge {
padding: 4px 8px;
border-radius: 5px;
font-size: 0.75em;
font-weight: 600;
text-align: center;
}
.shift-badge.morning { background: #fef3c7; color: #d97706; }
.shift-badge.afternoon { background: #dbeafe; color: #2563eb; }
.shift-badge.night { background: #e0e7ff; color: #4f46e5; }
.shift-badge.off { background: #fee2e2; color: #dc2626; }
.inventory-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
}
.inventory-card {
background: var(--card-bg);
border-radius: var(--radius);
padding: 20px;
text-align: center;
}
.inventory-icon {
width: 60px;
height: 60px;
margin: 0 auto 15px;
background: var(--bg);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
}
.inventory-name {
font-weight: 600;
margin-bottom: 5px;
}
.inventory-quantity {
font-size: 1.5em;
font-weight: 700;
color: var(--primary);
}
.inventory-status {
margin-top: 10px;
padding: 5px 12px;
border-radius: 20px;
font-size: 0.8em;
font-weight: 600;
}
.inventory-status.ok { background: rgba(16,185,129,0.1); color: var(--success); }
.inventory-status.low { background: rgba(245,158,11,0.1); color: var(--warning); }
.inventory-status.out { background: rgba(239,68,68,0.1); color: var(--danger); }
.commission-summary {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 20px;
}
.commission-card {
background: var(--card-bg);
border-radius: var(--radius);
padding: 20px;
text-align: center;
}
.commission-value {
font-size: 2em;
font-weight: 700;
color: var(--primary);
}
.commission-table {
background: var(--card-bg);
border-radius: var(--radius);
overflow: hidden;
}
.commission-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
padding: 15px 20px;
border-bottom: 1px solid var(--bg);
align-items: center;
}
.commission-row.header {
background: var(--bg);
font-weight: 600;
}
.commission-tier {
display: inline-block;
padding: 3px 10px;
border-radius: 10px;
font-size: 0.8em;
font-weight: 600;
}
.commission-tier.bronze { background: #fef3c7; color: #d97706; }
.commission-tier.silver { background: #e0e7ff; color: #4f46e5; }
.commission-tier.gold { background: #fef3c7; color: #f59e0b; }
.commission-tier.platinum { background: #dbeafe; color: #2563eb; }
.training-modules {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.training-module {
background: var(--card-bg);
border-radius: var(--radius);
overflow: hidden;
}
.training-thumbnail {
height: 150px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 3em;
}
.training-content {
padding: 20px;
}
.training-title {
font-size: 1.1em;
font-weight: 600;
margin-bottom: 10px;
}
.training-meta {
display: flex;
gap: 15px;
font-size: 0.85em;
color: var(--text-light);
margin-bottom: 15px;
}
.training-progress {
height: 8px;
background: var(--bg);
border-radius: 4px;
overflow: hidden;
}
.training-progress-fill {
height: 100%;
background: var(--success);
border-radius: 4px;
}
.training-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 15px;
}
.app::before {
content: '';
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 700px;
height: 700px;
background-image: var(--logo-bg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.02;
pointer-events: none;
z-index: 0;
}
.extensions-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 20px;
margin-top: 20px;
}
.extension-card {
background: var(--card-bg);
border-radius: var(--radius-lg);
border: 1px solid var(--card-border);
overflow: hidden;
transition: var(--transition);
position: relative;
}
.extension-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.extension-card.disabled {
opacity: 0.6;
}
.extension-card-header {
padding: 20px;
background: linear-gradient(135deg, rgba(102,126,234,0.1), rgba(118,75,162,0.1));
display: flex;
align-items: center;
gap: 15px;
}
.extension-icon {
width: 60px;
height: 60px;
border-radius: var(--radius);
background: linear-gradient(135deg, var(--primary), var(--secondary));
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8em;
color: #fff;
}
.extension-info {
flex: 1;
}
.extension-name {
font-weight: 700;
font-size: 1.1em;
margin-bottom: 5px;
}
.extension-desc {
font-size: 0.85em;
color: var(--text-light);
}
.extension-status {
position: absolute;
top: 15px;
left: 15px;
padding: 4px 10px;
border-radius: 20px;
font-size: 0.75em;
font-weight: 600;
}
.extension-status.active {
background: rgba(16,185,129,0.15);
color: var(--success);
}
.extension-status.inactive {
background: rgba(107,114,128,0.15);
color: var(--text-light);
}
.extension-card-body {
padding: 20px;
}
.extension-features {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 15px;
}
.extension-feature-tag {
padding: 4px 10px;
background: var(--bg);
border-radius: 15px;
font-size: 0.75em;
color: var(--text-light);
}
.extension-card-actions {
display: flex;
gap: 10px;
padding-top: 15px;
border-top: 1px solid var(--bg);
}
.extension-assigned {
margin-top: 15px;
padding: 10px;
background: var(--bg);
border-radius: var(--radius-sm);
}
.extension-assigned-title {
font-size: 0.8em;
color: var(--text-light);
margin-bottom: 8px;
}
.extension-assigned-list {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.extension-assigned-badge {
padding: 3px 8px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: #fff;
border-radius: 10px;
font-size: 0.75em;
}
.extension-settings-tabs {
display: flex;
gap: 5px;
margin-bottom: 20px;
border-bottom: 2px solid var(--bg);
padding-bottom: 10px;
}
.extension-settings-tab {
padding: 10px 20px;
background: transparent;
border: none;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
cursor: pointer;
font-weight: 500;
color: var(--text-light);
transition: var(--transition);
}
.extension-settings-tab.active {
background: var(--primary);
color: #fff;
}
.extension-branch-selector {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
max-height: 300px;
overflow-y: auto;
padding: 10px;
background: var(--bg);
border-radius: var(--radius);
}
.extension-branch-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px;
background: var(--card-bg);
border-radius: var(--radius-sm);
cursor: pointer;
transition: var(--transition);
border: 2px solid transparent;
}
.extension-branch-item:hover {
border-color: var(--primary);
}
.extension-branch-item.selected {
border-color: var(--primary);
background: rgba(102,126,234,0.1);
}
.extension-branch-checkbox {
width: 20px;
height: 20px;
border-radius: 4px;
border: 2px solid var(--bg-tertiary);
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.extension-branch-item.selected .extension-branch-checkbox {
background: var(--primary);
border-color: var(--primary);
color: #fff;
}
.integration-config-section {
background: var(--card-bg);
border-radius: var(--radius);
padding: 20px;
margin-bottom: 20px;
border: 1px solid var(--card-border);
}
.integration-config-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid var(--bg);
}
.integration-config-title {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
}
.integration-config-icon {
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3em;
}
.integration-help-box {
background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(37,99,235,0.1));
border: 1px solid rgba(59,130,246,0.3);
border-radius: var(--radius);
padding: 15px;
margin-bottom: 15px;
}
.integration-help-title {
font-weight: 600;
color: #3b82f6;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
.integration-help-steps {
font-size: 0.9em;
color: var(--text);
}
.integration-help-steps ol {
margin: 0;
padding-right: 20px;
}
.integration-help-steps li {
margin-bottom: 8px;
}
.integration-provider-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
margin-bottom: 20px;
}
.integration-provider-card {
padding: 15px;
background: var(--bg);
border-radius: var(--radius-sm);
text-align: center;
cursor: pointer;
transition: var(--transition);
border: 2px solid transparent;
}
.integration-provider-card:hover {
border-color: var(--primary);
}
.integration-provider-card.selected {
border-color: var(--primary);
background: rgba(102,126,234,0.1);
}
.integration-provider-logo {
font-size: 2em;
margin-bottom: 8px;
}
.integration-provider-name {
font-weight: 600;
font-size: 0.85em;
}
.activity-log-container {
background: var(--card-bg);
border-radius: var(--radius-lg);
border: 1px solid var(--card-border);
overflow: hidden;
}
.activity-log-filters {
display: flex;
gap: 15px;
flex-wrap: wrap;
padding: 20px;
background: var(--bg);
border-bottom: 1px solid var(--card-border);
}
.activity-log-list {
max-height: 600px;
overflow-y: auto;
}
.activity-log-item {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 15px 20px;
border-bottom: 1px solid var(--bg);
transition: var(--transition);
}
.activity-log-item:hover {
background: var(--bg);
}
.activity-log-icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1em;
flex-shrink: 0;
}
.activity-log-icon.create { background: rgba(16,185,129,0.15); color: var(--success); }
.activity-log-icon.update { background: rgba(59,130,246,0.15); color: #3b82f6; }
.activity-log-icon.delete { background: rgba(239,68,68,0.15); color: var(--danger); }
.activity-log-icon.login { background: rgba(139,92,246,0.15); color: #8b5cf6; }
.activity-log-icon.permission { background: rgba(245,158,11,0.15); color: var(--warning); }
.activity-log-icon.settings { background: rgba(107,114,128,0.15); color: #6b7280; }
.activity-log-content {
flex: 1;
min-width: 0;
}
.activity-log-title {
font-weight: 600;
margin-bottom: 5px;
}
.activity-log-details {
font-size: 0.85em;
color: var(--text-light);
margin-bottom: 5px;
}
.activity-log-meta {
display: flex;
gap: 15px;
font-size: 0.8em;
color: var(--text-light);
}
.activity-log-user {
display: flex;
align-items: center;
gap: 5px;
}
.activity-log-user-avatar {
width: 20px;
height: 20px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--secondary));
display: flex;
align-items: center;
justify-content: center;
font-size: 0.6em;
color: #fff;
}
.activity-log-badge {
padding: 2px 8px;
border-radius: 10px;
font-size: 0.75em;
font-weight: 500;
}
.activity-log-badge.high { background: rgba(239,68,68,0.15); color: var(--danger); }
.activity-log-badge.medium { background: rgba(245,158,11,0.15); color: var(--warning); }
.activity-log-badge.low { background: rgba(107,114,128,0.15); color: var(--text-light); }
.online-users-analytics {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-bottom: 25px;
}
.analytics-card {
background: var(--card-bg);
border-radius: var(--radius-lg);
padding: 20px;
border: 1px solid var(--card-border);
}
.analytics-card-title {
font-weight: 600;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
.time-tracking-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.time-tracking-item {
text-align: center;
padding: 15px;
background: var(--bg);
border-radius: var(--radius);
}
.time-tracking-value {
font-size: 1.5em;
font-weight: 700;
color: var(--primary);
margin-bottom: 5px;
}
.time-tracking-label {
font-size: 0.85em;
color: var(--text-light);
}
.productivity-chart {
height: 200px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 8px;
padding: 10px 0;
}
.productivity-bar-wrapper {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.productivity-bar {
width: 100%;
max-width: 40px;
background: linear-gradient(180deg, var(--primary), var(--secondary));
border-radius: 4px 4px 0 0;
transition: height 0.3s ease;
}
.productivity-bar-label {
font-size: 0.7em;
color: var(--text-light);
margin-top: 5px;
}
.user-activity-timeline {
position: relative;
padding-right: 20px;
}
.user-activity-timeline::before {
content: '';
position: absolute;
right: 5px;
top: 0;
bottom: 0;
width: 2px;
background: var(--bg-tertiary);
}
.timeline-item {
display: flex;
gap: 15px;
margin-bottom: 15px;
position: relative;
}
.timeline-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--primary);
position: absolute;
right: 0;
top: 5px;
}
.timeline-dot.online { background: var(--success); }
.timeline-dot.break { background: var(--warning); }
.timeline-dot.offline { background: #6b7280; }
.timeline-dot.end_day { background: var(--danger); }
.timeline-content {
flex: 1;
padding-right: 25px;
}
.timeline-time {
font-size: 0.8em;
color: var(--text-light);
}
.timeline-action {
font-weight: 500;
}
.user-stats-summary {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-top: 15px;
}
.user-stat-mini {
text-align: center;
padding: 10px;
background: var(--bg);
border-radius: var(--radius-sm);
}
.user-stat-mini-value {
font-weight: 700;
font-size: 1.1em;
color: var(--primary);
}
.user-stat-mini-label {
font-size: 0.75em;
color: var(--text-light);
}
.date-range-picker {
display: flex;
gap: 10px;
align-items: center;
padding: 10px 15px;
background: var(--bg);
border-radius: var(--radius);
}
.date-range-preset {
padding: 6px 12px;
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 0.85em;
transition: var(--transition);
}
.date-range-preset:hover,
.date-range-preset.active {
background: var(--primary);
color: #fff;
border-color: var(--primary);
}
.export-report-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: linear-gradient(135deg, #10b981, #059669);
color: #fff;
border: none;
border-radius: var(--radius);
cursor: pointer;
font-weight: 600;
transition: var(--transition);
}
.export-report-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(16,185,129,0.3);
}
.call-recording-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
background: linear-gradient(135deg, #ef4444, #dc2626);
color: #fff;
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 0.85em;
transition: var(--transition);
}
.call-recording-btn:hover {
transform: scale(1.05);
box-shadow: 0 3px 10px rgba(239,68,68,0.3);
}
.call-recording-btn.recording {
animation: pulse-recording 1.5s infinite;
}
@keyframes pulse-recording {
0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); }
50% { box-shadow: 0 0 0 10px rgba(239,68,68,0); }
}
.recordings-list {
max-height: 300px;
overflow-y: auto;
}
.recording-item {
display: flex;
align-items: center;
gap: 15px;
padding: 12px;
background: var(--bg);
border-radius: var(--radius-sm);
margin-bottom: 10px;
}
.recording-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #ef4444, #dc2626);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.2em;
}
.recording-info {
flex: 1;
}
.recording-date {
font-size: 0.85em;
color: var(--text-light);
}
.recording-duration {
font-weight: 600;
}
.recording-actions {
display: flex;
gap: 8px;
}
.recording-play-btn {
width: 35px;
height: 35px;
border-radius: 50%;
background: var(--primary);
color: #fff;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.recording-play-btn:hover {
transform: scale(1.1);
}
.audio-player-container {
background: var(--card-bg);
border-radius: var(--radius);
padding: 15px;
margin-top: 10px;
border: 1px solid var(--card-border);
}
.audio-player-container audio {
width: 100%;
}
.calendar-sync-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
background: linear-gradient(135deg, #4285f4, #1a73e8);
color: #fff;
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 0.85em;
transition: var(--transition);
}
.calendar-sync-btn:hover {
transform: scale(1.05);
box-shadow: 0 3px 10px rgba(66,133,244,0.3);
}
.calendar-events-widget {
background: var(--card-bg);
border-radius: var(--radius-lg);
border: 1px solid var(--card-border);
padding: 20px;
margin-bottom: 20px;
}
.calendar-event-item {
display: flex;
align-items: center;
gap: 15px;
padding: 12px;
background: var(--bg);
border-radius: var(--radius-sm);
margin-bottom: 10px;
border-right: 4px solid var(--primary);
}
.calendar-event-time {
min-width: 60px;
text-align: center;
}
.calendar-event-time-value {
font-weight: 700;
font-size: 1.1em;
color: var(--primary);
}
.calendar-event-time-label {
font-size: 0.75em;
color: var(--text-light);
}
.calendar-event-info {
flex: 1;
}
.calendar-event-title {
font-weight: 600;
margin-bottom: 3px;
}
.calendar-event-client {
font-size: 0.85em;
color: var(--text-light);
}
.extension-feature-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 6px;
background: rgba(102,126,234,0.15);
color: var(--primary);
border-radius: 10px;
font-size: 0.7em;
margin-left: 5px;
}
.extension-quick-actions {
display: flex;
gap: 8px;
padding: 10px;
background: var(--bg);
border-radius: var(--radius-sm);
margin-top: 10px;
flex-wrap: wrap;
}
.extension-quick-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 8px 14px;
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 0.85em;
transition: var(--transition);
}
.extension-quick-btn:hover {
border-color: var(--primary);
background: rgba(102,126,234,0.1);
}
.extension-quick-btn.active {
background: var(--primary);
color: #fff;
border-color: var(--primary);
}
.broadcast-popup-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.7);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
animation: broadcastFadeIn 0.3s ease;
}
@keyframes broadcastFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes broadcastPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.02); }
}
.broadcast-popup {
background: white;
border-radius: 20px;
width: 90%;
max-width: 480px;
box-shadow: 0 25px 60px rgba(0,0,0,0.4);
overflow: hidden;
animation: broadcastPulse 2s ease infinite;
direction: rtl;
}
.broadcast-popup-header {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
padding: 20px 24px;
text-align: center;
}
.broadcast-popup-header h3 { margin: 0; font-size: 1.3em; }
.broadcast-popup-header .broadcast-from { opacity: 0.85; font-size: 0.85em; margin-top: 4px; }
.broadcast-popup-body {
padding: 24px;
text-align: center;
}
.broadcast-popup-title { font-size: 1.2em; font-weight: 700; color: #333; margin-bottom: 12px; }
.broadcast-popup-message {
font-size: 1.05em;
color: #555;
line-height: 1.7;
white-space: pre-wrap;
max-height: 300px;
overflow-y: auto;
}
.broadcast-popup-time { font-size: 0.8em; color: #999; margin-top: 12px; }
.broadcast-popup-footer { padding: 16px 24px; text-align: center; border-top: 1px solid #eee; }
.broadcast-confirm-btn {
background: linear-gradient(135deg, #10b981, #059669);
color: white;
border: none;
padding: 12px 40px;
border-radius: 12px;
font-size: 1.1em;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.broadcast-confirm-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(16,185,129,0.4);
}
.recruitment-calendar-container { background: var(--card-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.rc-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); gap: 12px; flex-wrap: wrap; }
.rc-toolbar-right, .rc-toolbar-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-nav-btn { width: 36px; height: 36px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card-bg); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.1em; transition: all 0.2s; }
.rc-nav-btn:hover { border-color: var(--primary); color: var(--primary); }
.rc-current-period { font-size: 1.15em; font-weight: 700; color: var(--text); min-width: 180px; text-align: center; }
.rc-today-btn { padding: 6px 14px; border-radius: var(--radius); border: 1px solid var(--primary); background: transparent; color: var(--primary); font-size: 0.85em; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.rc-today-btn:hover { background: var(--primary); color: #fff; }
.rc-view-tabs { display: flex; background: var(--bg); border-radius: var(--radius); overflow: hidden; }
.rc-view-tab { padding: 6px 16px; border: none; background: transparent; color: var(--text-light); font-size: 0.85em; font-weight: 500; cursor: pointer; transition: all 0.2s; }
.rc-view-tab.active { background: var(--primary); color: #fff; }
.rc-filters { display: flex; align-items: center; gap: 8px; padding: 10px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; background: var(--bg); }
.rc-filter-select { padding: 5px 10px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card-bg); color: var(--text); font-size: 0.8em; }
.rc-load-indicator { display: flex; align-items: center; gap: 6px; margin-right: auto; font-size: 0.8em; color: var(--text-light); }
.rc-load-bar { width: 80px; height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.rc-load-fill { height: 100%; border-radius: 4px; transition: width 0.3s; }
.rc-load-fill.low { background: #10b981; width: 30%; }
.rc-load-fill.medium { background: #f59e0b; width: 60%; }
.rc-load-fill.high { background: #ef4444; width: 90%; }
.rc-daily-view { display: flex; flex-direction: column; min-height: 500px; }
.rc-daily-header { padding: 12px 20px; background: var(--bg); font-weight: 600; text-align: center; border-bottom: 1px solid var(--border); }
.rc-time-grid { position: relative; flex: 1; }
.rc-time-slot { display: flex; min-height: 60px; border-bottom: 1px solid var(--border); }
.rc-time-label { width: 70px; padding: 4px 10px; font-size: 0.78em; color: var(--text-light); text-align: left; flex-shrink: 0; border-left: 1px solid var(--border); }
.rc-time-content { flex: 1; position: relative; padding: 2px 8px; min-height: 60px; cursor: pointer; }
.rc-time-content:hover { background: rgba(0,115,234,0.03); }
.rc-now-line { position: absolute; left: 70px; right: 0; height: 2px; background: #ef4444; z-index: 5; pointer-events: none; }
.rc-now-line::before { content: ''; position: absolute; right: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #ef4444; }
.rc-weekly-view { overflow-x: auto; }
.rc-weekly-grid { display: grid; grid-template-columns: 70px repeat(7, 1fr); min-width: 700px; }
.rc-weekly-header-cell { padding: 10px 6px; text-align: center; border-bottom: 2px solid var(--border); border-left: 1px solid var(--border); font-size: 0.82em; font-weight: 600; }
.rc-weekly-header-cell.today { color: var(--primary); border-bottom-color: var(--primary); }
.rc-weekly-day-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-weight: 700; font-size: 0.95em; }
.rc-weekly-header-cell.today .rc-weekly-day-num { background: var(--primary); color: #fff; }
.rc-weekly-time-cell { padding: 2px 8px; border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); min-height: 50px; position: relative; cursor: pointer; }
.rc-weekly-time-cell:hover { background: rgba(0,115,234,0.03); }
.rc-weekly-time-label { padding: 4px 10px; font-size: 0.75em; color: var(--text-light); border-bottom: 1px solid var(--border); text-align: left; }
.rc-monthly-view { padding: 0; }
.rc-monthly-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.rc-month-day-header { padding: 8px; text-align: center; font-size: 0.8em; font-weight: 700; color: var(--text-light); background: var(--bg); border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); }
.rc-month-day { min-height: 100px; border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); padding: 4px; cursor: pointer; transition: background 0.15s; }
.rc-month-day:hover { background: rgba(0,115,234,0.03); }
.rc-month-day.other-month { opacity: 0.4; }
.rc-month-day.today { background: rgba(0,115,234,0.06); }
.rc-month-day-num { font-size: 0.82em; font-weight: 600; margin-bottom: 4px; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; }
.rc-month-day.today .rc-month-day-num { background: var(--primary); color: #fff; }
.rc-event { padding: 4px 8px; border-radius: 4px; font-size: 0.75em; margin-bottom: 2px; cursor: pointer; color: #fff; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: transform 0.15s, box-shadow 0.15s; position: relative; }
.rc-event:hover { transform: scale(1.02); box-shadow: 0 2px 8px rgba(0,0,0,0.2); z-index: 10; }
.rc-event.dragging { opacity: 0.5; transform: scale(0.95); }
.rc-event-type-icon { margin-left: 4px; font-size: 0.9em; }
.rc-event-phone { background: #3b82f6; }
.rc-event-inperson { background: #8b5cf6; }
.rc-event-trial { background: #f59e0b; }
.rc-event-onboarding { background: #10b981; }
.rc-event-general { background: #6b7280; }
.rc-event-followup { background: #ec4899; }
.rc-stage-0 { border-right: 4px solid #3b82f6; }
.rc-stage-1 { border-right: 4px solid #8b5cf6; }
.rc-stage-2 { border-right: 4px solid #f59e0b; }
.rc-stage-3 { border-right: 4px solid #10b981; }
.rc-stage-4 { border-right: 4px solid #ef4444; }
.rc-stage-5 { border-right: 4px solid #6b7280; }
.rc-month-event-count { font-size: 0.7em; color: var(--text-light); text-align: center; padding: 2px; cursor: pointer; }
.rc-event-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px; }
.rc-event-info-item { display: flex; flex-direction: column; gap: 4px; }
.rc-event-info-label { font-size: 0.78em; color: var(--text-light); font-weight: 500; }
.rc-event-info-value { font-size: 0.92em; font-weight: 600; color: var(--text); }
.rc-event-summary { background: var(--bg); border-radius: var(--radius); padding: 15px; margin-top: 15px; }
.rc-event-summary h5 { margin: 0 0 8px 0; font-size: 0.88em; font-weight: 600; }
.rc-event-summary textarea { width: 100%; min-height: 80px; border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; font-size: 0.85em; background: var(--card-bg); color: var(--text); resize: vertical; }
.rc-timeline { position: relative; padding-right: 25px; margin: 15px 0; }
.rc-timeline::before { content: ''; position: absolute; right: 8px; top: 0; bottom: 0; width: 2px; background: var(--border); }
.rc-timeline-item { position: relative; padding: 10px 15px; margin-bottom: 12px; background: var(--bg); border-radius: var(--radius); font-size: 0.85em; }
.rc-timeline-item::before { content: ''; position: absolute; right: -21px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); border: 2px solid var(--card-bg); }
.rc-timeline-date { font-size: 0.78em; color: var(--text-light); margin-bottom: 4px; }
.rc-timeline-title { font-weight: 600; margin-bottom: 2px; }
.rc-timeline-desc { color: var(--text-light); font-size: 0.9em; }
.rc-perm-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 12px; font-size: 0.75em; font-weight: 600; }
.rc-perm-view { background: rgba(59,130,246,0.1); color: #3b82f6; }
.rc-perm-edit { background: rgba(16,185,129,0.1); color: #10b981; }
.rc-perm-admin { background: rgba(139,92,246,0.1); color: #8b5cf6; }
.rc-export-btn { padding: 6px 12px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card-bg); color: var(--text); font-size: 0.82em; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.2s; }
.rc-export-btn:hover { border-color: var(--primary); color: var(--primary); }
@media(max-width: 768px) {
.rc-toolbar { flex-direction: column; padding: 12px; gap: 8px; }
.rc-toolbar-right, .rc-toolbar-left { width: 100%; justify-content: center; }
.rc-current-period { font-size: 1em; min-width: auto; }
.rc-filters { padding: 8px 12px; }
.rc-month-day { min-height: 65px; }
.rc-month-day-num { font-size: 0.75em; width: 20px; height: 20px; }
.rc-event { font-size: 0.68em; padding: 2px 5px; }
.rc-time-label, .rc-weekly-time-label { width: 50px; font-size: 0.7em; }
.rc-event-info-grid { grid-template-columns: 1fr; }
.rc-weekly-grid { min-width: 500px; }
}
@media(max-width: 480px) {
.rc-view-tab { padding: 5px 10px; font-size: 0.78em; }
.rc-month-day { min-height: 50px; }
.rc-event { font-size: 0.65em; }
.rc-time-slot { min-height: 45px; }
}

/* ====== NXR WALLET STYLES ====== */
.nxr-wallet-card {
    max-width: 600px;
    margin: 0 auto;
    background: var(--card-bg);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}
.nxr-wallet-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--bg);
}
.nxr-wallet-logo {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nxr-balance-display {
    text-align: center;
    padding: 30px 0;
    background: linear-gradient(135deg, rgba(102,126,234,0.08) 0%, rgba(118,75,162,0.08) 100%);
    border-radius: 16px;
    margin-bottom: 20px;
}
.nxr-balance-amount {
    font-size: 3em;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}
.nxr-balance-label {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--text-light);
    margin-top: 5px;
}
.nxr-wallet-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.nxr-wallet-actions .btn {
    flex: 1;
    min-width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.nxr-tx-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.nxr-tx-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg);
    border-radius: 10px;
}
.nxr-tx-icon {
    font-size: 1.3em;
    width: 36px;
    text-align: center;
}
.nxr-tx-details {
    flex: 1;
    min-width: 0;
}
.nxr-tx-name {
    font-weight: 500;
    font-size: 0.9em;
}
.nxr-tx-date {
    font-size: 0.78em;
    color: var(--text-light);
}
.nxr-tx-amount {
    font-weight: 700;
    font-size: 0.95em;
    white-space: nowrap;
    direction: ltr;
}
.nxr-loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(102,126,234,0.2);
    border-top-color: #667eea;
    border-radius: 50%;
    animation: nxrSpin 0.8s linear infinite;
}
@keyframes nxrSpin { to { transform: rotate(360deg); } }

/* Field Masking */
.masked-field {
    cursor: pointer;
    background: rgba(102,126,234,0.08);
    border-radius: 4px;
    padding: 1px 4px;
    transition: background 0.2s;
    font-family: monospace;
    direction: ltr;
    display: inline-block;
}
.masked-field:hover {
    background: rgba(102,126,234,0.18);
}
.masked-field.revealed {
    background: transparent;
    cursor: default;
}

/* ========================================
   BILLING & INVOICING MODULE
======================================== */

/* Billing Activate Card */
.billing-activate-card {
    background: var(--card);
    border-radius: 16px;
    padding: 48px 32px;
    text-align: center;
    max-width: 500px;
    margin: 60px auto;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
.billing-activate-card .billing-icon {
    font-size: 56px;
    margin-bottom: 16px;
}
.billing-activate-card h2 {
    font-size: 1.3em;
    color: var(--text);
    margin-bottom: 8px;
}
.billing-activate-card p {
    color: var(--text-light);
    margin-bottom: 24px;
    font-size: 0.95em;
}

/* Billing Dashboard Cards */
.billing-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.billing-stat-card {
    background: var(--card);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.billing-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4em;
}
.billing-stat-value {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--text);
}
.billing-stat-label {
    font-size: 0.85em;
    color: var(--text-light);
}

/* Billing Onboarding Wizard */
.billing-wizard {
    max-width: 600px;
    margin: 0 auto;
}
.billing-wizard-steps {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 32px;
    direction: ltr;
}
.billing-wizard-step {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85em;
    background: var(--bg);
    color: var(--text-light);
    transition: all 0.3s;
}
.billing-wizard-step.active {
    background: var(--primary);
    color: #fff;
    font-weight: 600;
}
.billing-wizard-step.completed {
    background: var(--success);
    color: #fff;
}
.billing-wizard-step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8em;
    background: rgba(255,255,255,0.2);
}
.billing-wizard-body {
    padding: 0 8px;
    min-height: 300px;
}
.billing-wizard-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

/* Billing Config Branch Cards */
.billing-branch-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 16px;
}
.billing-branch-card {
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s;
}
.billing-branch-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.billing-branch-card .branch-name {
    font-weight: 600;
    font-size: 1.05em;
    color: var(--text);
    margin-bottom: 4px;
}
.billing-branch-card .branch-status {
    font-size: 0.85em;
    display: flex;
    align-items: center;
    gap: 6px;
}
.billing-branch-card .branch-status.configured {
    color: var(--success);
}
.billing-branch-card .branch-status.not-configured {
    color: var(--text-light);
}

/* Billing Template Selector */
.billing-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.billing-template-card {
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 20px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}
.billing-template-card:hover {
    border-color: var(--primary);
}
.billing-template-card.selected {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb, 102,126,234), 0.08);
}
.billing-template-card .template-icon {
    font-size: 2em;
    margin-bottom: 8px;
}
.billing-template-card .template-name {
    font-weight: 600;
    font-size: 0.9em;
    color: var(--text);
}

/* Billing Numbering Table */
.billing-numbering-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
}
.billing-numbering-table th,
.billing-numbering-table td {
    padding: 10px 12px;
    text-align: right;
    border-bottom: 1px solid var(--border);
}
.billing-numbering-table th {
    font-size: 0.85em;
    color: var(--text-light);
    font-weight: 600;
}
.billing-numbering-table input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.9em;
}
.billing-numbering-table input:focus {
    border-color: var(--primary);
    outline: none;
}

/* Billing Empty State */
.billing-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-light);
}
.billing-empty-state .empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}
.billing-empty-state h3 {
    color: var(--text);
    margin-bottom: 8px;
}

/* Responsive */
@media (max-width: 768px) {
    .billing-wizard-steps {
        flex-wrap: wrap;
    }
    .billing-wizard-step {
        font-size: 0.78em;
        padding: 6px 10px;
    }
    .billing-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .billing-template-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   BILLING STAGE 2 - Document Engine
======================================== */

/* Billing Tabs */
.billing-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 20px;
}
.billing-tab {
    padding: 10px 20px;
    cursor: pointer;
    border: none;
    background: none;
    color: var(--text-light);
    font-size: 0.9em;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}
.billing-tab:hover {
    color: var(--text-main);
}
.billing-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}

/* Document List Table */
.billing-doc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}
.billing-doc-table th {
    text-align: right;
    padding: 10px 12px;
    color: var(--text-light);
    font-weight: 600;
    font-size: 0.85em;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}
.billing-doc-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text-main);
}
.billing-doc-table tr:hover td {
    background: var(--bg-hover);
}
.billing-doc-table .doc-number {
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
}
.billing-doc-table .doc-number:hover {
    text-decoration: underline;
}

/* Status Badges */
.billing-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.82em;
    font-weight: 500;
    white-space: nowrap;
}
.billing-status.status-draft { background: var(--bg-hover); color: var(--text-light); }
.billing-status.status-sent { background: rgba(59,130,246,0.1); color: #3b82f6; }
.billing-status.status-viewed { background: rgba(139,92,246,0.1); color: #8b5cf6; }
.billing-status.status-approved { background: rgba(16,185,129,0.1); color: #10b981; }
.billing-status.status-paid { background: rgba(16,185,129,0.15); color: #059669; }
.billing-status.status-partial_paid { background: rgba(245,158,11,0.1); color: #f59e0b; }
.billing-status.status-overdue { background: rgba(239,68,68,0.1); color: #ef4444; }
.billing-status.status-cancelled { background: rgba(107,114,128,0.1); color: #6b7280; }
.billing-status.status-expired { background: rgba(107,114,128,0.1); color: #9ca3af; }

/* Document Form */
.billing-doc-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.billing-form-section {
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
}
.billing-form-section h4 {
    margin: 0 0 12px 0;
    color: var(--text-main);
    font-size: 0.95em;
}

/* Line Items Table */
.billing-items-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88em;
}
.billing-items-table th {
    text-align: right;
    padding: 8px 6px;
    color: var(--text-light);
    font-weight: 600;
    font-size: 0.82em;
    border-bottom: 2px solid var(--border);
}
.billing-items-table td {
    padding: 4px 4px;
    vertical-align: middle;
}
.billing-items-table input,
.billing-items-table select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.95em;
}
.billing-items-table input:focus,
.billing-items-table select:focus {
    border-color: var(--primary);
    outline: none;
}
.billing-items-table .item-total {
    font-weight: 600;
    text-align: center;
    padding: 6px;
}
.billing-items-table .remove-item-btn {
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    font-size: 1.1em;
    padding: 4px;
    border-radius: 4px;
}
.billing-items-table .remove-item-btn:hover {
    color: var(--danger, #ef4444);
    background: rgba(239,68,68,0.1);
}

/* Totals Section */
.billing-totals {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 2px solid var(--border);
}
.billing-total-row {
    display: flex;
    justify-content: space-between;
    min-width: 250px;
    padding: 4px 0;
    font-size: 0.9em;
}
.billing-total-row .label {
    color: var(--text-light);
}
.billing-total-row .value {
    font-weight: 500;
}
.billing-total-row.grand-total {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--primary);
    border-top: 2px solid var(--primary);
    padding-top: 8px;
    margin-top: 4px;
}

/* Filters Bar */
.billing-filters {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.billing-filters input,
.billing-filters select {
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text);
    font-size: 0.88em;
}
.billing-filters input {
    min-width: 200px;
}

/* Action Buttons */
.billing-actions-menu {
    position: relative;
    display: inline-block;
}
.billing-actions-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    color: var(--text-light);
    font-size: 0.85em;
}
.billing-actions-btn:hover {
    background: var(--bg-hover);
    color: var(--text-main);
}
.billing-actions-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 100;
    min-width: 160px;
    display: none;
    padding: 4px 0;
}
.billing-actions-dropdown.show {
    display: block;
}
.billing-actions-dropdown button {
    display: block;
    width: 100%;
    text-align: right;
    padding: 8px 14px;
    border: none;
    background: none;
    color: var(--text-main);
    font-size: 0.88em;
    cursor: pointer;
}
.billing-actions-dropdown button:hover {
    background: var(--bg-hover);
}
.billing-actions-dropdown button.danger {
    color: var(--danger, #ef4444);
}

/* Doc Type Selector */
.billing-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.billing-type-card {
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}
.billing-type-card:hover {
    border-color: var(--primary);
    background: rgba(59,130,246,0.03);
}
.billing-type-card.selected {
    border-color: var(--primary);
    background: rgba(59,130,246,0.06);
}
.billing-type-card .type-icon {
    font-size: 1.8em;
    margin-bottom: 6px;
}
.billing-type-card .type-name {
    font-weight: 600;
    font-size: 0.88em;
}

/* Pagination */
.billing-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 0.88em;
}
.billing-pagination button {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text);
    cursor: pointer;
}
.billing-pagination button:hover:not(:disabled) {
    background: var(--bg-hover);
}
.billing-pagination button:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Responsive Stage 2 */
@media (max-width: 768px) {
    .billing-type-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .billing-filters {
        flex-direction: column;
        align-items: stretch;
    }
    .billing-filters input {
        min-width: auto;
    }
    .billing-doc-table {
        font-size: 0.82em;
    }
    .billing-doc-table th,
    .billing-doc-table td {
        padding: 8px 6px;
    }
    .billing-total-row {
        min-width: 200px;
    }
}

/* ========================================
   BILLING STAGE 3 - PDF Preview
======================================== */
#billingPdfPreviewModal .modal-content {
    display: flex;
    flex-direction: column;
}
.billing-pdf-preview-frame {
    width: 100%;
    height: 100%;
    border: none;
    background: #f5f5f5;
}
.billing-pdf-template-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-main);
    border-bottom: 1px solid var(--border);
}
.billing-pdf-template-bar select {
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text);
    font-size: 0.88em;
}

/* ========== STAGE 6: Enhanced Dashboard ========== */
.billing-enhanced-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.billing-stat-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 18px 14px;
    border: 1px solid var(--border);
    text-align: center;
    transition: transform 0.15s, box-shadow 0.15s;
}
.billing-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.billing-stat-icon {
    font-size: 1.5em;
    margin-bottom: 6px;
}
.billing-stat-value {
    font-size: 1.4em;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.2;
}
.billing-stat-label {
    font-size: 0.78em;
    color: var(--text-light);
    margin-top: 4px;
}
.billing-stat-balance .billing-stat-value { color: var(--primary); }
.billing-stat-turnover .billing-stat-value { color: var(--success); }
.billing-stat-collections .billing-stat-value { color: #22c55e; }
.billing-stat-expenses .billing-stat-value { color: var(--danger, #ef4444); }
.billing-stat-clients .billing-stat-value { color: var(--info); }

@media (max-width: 900px) {
    .billing-enhanced-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .billing-enhanced-stats { grid-template-columns: repeat(2, 1fr); }
    .billing-stat-card { padding: 12px 8px; }
    .billing-stat-value { font-size: 1.1em; }
}

/* ========== STAGE 7: Expenses & Suppliers ========== */
.billing-expense-table, .billing-supplier-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88em;
}
.billing-expense-table th, .billing-supplier-table th {
    background: var(--bg-hover);
    padding: 10px 8px;
    font-weight: 600;
    font-size: 0.82em;
    text-align: right;
    border-bottom: 2px solid var(--border);
}
.billing-expense-table td, .billing-supplier-table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.billing-expense-table tr:hover, .billing-supplier-table tr:hover {
    background: var(--bg-hover);
}
.billing-expense-category {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.82em;
    background: var(--bg-hover);
    color: var(--text-main);
}
.billing-expense-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 0.8em;
    font-weight: 500;
}
.billing-expense-status.status-pending { background: #fef3c7; color: #92400e; }
.billing-expense-status.status-approved { background: #dbeafe; color: #1e40af; }
.billing-expense-status.status-paid { background: #d1fae5; color: #065f46; }

/* ========== STAGE 8: Reports ========== */
.billing-report-container {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--border);
}
.billing-report-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    margin-bottom: 16px;
}
.billing-report-filters .form-group {
    margin-bottom: 0;
}
.billing-report-filters label {
    font-size: 0.82em;
    color: var(--text-light);
    margin-bottom: 4px;
    display: block;
}
.billing-report-filters select,
.billing-report-filters input {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-main);
    color: var(--text-main);
    font-size: 0.88em;
}
.billing-report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88em;
    margin-top: 12px;
}
.billing-report-table th {
    background: var(--bg-hover);
    padding: 10px 8px;
    font-weight: 600;
    text-align: right;
    border-bottom: 2px solid var(--border);
}
.billing-report-table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--border);
}
.billing-report-table tr:hover { background: var(--bg-hover); }
.billing-report-table .total-row {
    font-weight: 700;
    background: var(--bg-hover);
    border-top: 2px solid var(--border);
}
.billing-report-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.billing-report-summary-card {
    background: var(--bg-main);
    border-radius: 8px;
    padding: 14px;
    text-align: center;
    border: 1px solid var(--border);
}
.billing-report-summary-card .value {
    font-size: 1.3em;
    font-weight: 700;
    color: var(--text-main);
}
.billing-report-summary-card .label {
    font-size: 0.8em;
    color: var(--text-light);
    margin-top: 2px;
}

/* Advanced Search */
.billing-search-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.billing-search-form .form-group { margin-bottom: 0; }
.billing-search-form label {
    font-size: 0.82em;
    color: var(--text-light);
    margin-bottom: 4px;
    display: block;
}
.billing-search-form input,
.billing-search-form select {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-main);
    color: var(--text-main);
    font-size: 0.88em;
}

/* ========== STAGE 9: Signature ========== */
.billing-signature-pad {
    border: 2px dashed var(--border);
    border-radius: 8px;
    background: #fff;
    cursor: crosshair;
    touch-action: none;
}
.billing-signature-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.billing-signature-preview {
    max-width: 200px;
    max-height: 80px;
    border: 1px solid var(--border);
    border-radius: 4px;
}