:root {
  
  --speed: 0.4s;
  --ease: cubic-bezier(0.25, 0.8, 0.25, 1);
  --font-main: 'Poppins', 'Inter', system-ui, sans-serif;

  
  --radius-sm: 14px;
  --radius-md: 24px;
  --radius-lg: 32px;

  
  
  --bg-body: #f4f4f4;
  
  
  
  --bg-gradient: radial-gradient(circle at 12% 35%, rgba(16, 185, 129, 0.06), transparent 42%),
                 radial-gradient(circle at 88% 25%, rgba(59, 130, 246, 0.06), transparent 42%),
                 radial-gradient(circle at 60% 90%, rgba(168, 85, 247, 0.04), transparent 45%);

  
  --bg-glass: rgba(255, 255, 255, 0.82);
  --bg-glass-hover: rgba(255, 255, 255, 0.92);
  
  
  --bg-panel: rgba(255, 255, 255, 0.88);
  --bg-elev: #fcfcfc;
  
  
  --glass-border: rgba(15, 23, 42, 0.08);
  --border-color: rgba(148, 163, 184, 0.45); 
  
  
  --text-main: #0f172a;
  --text-muted: #475569;   
  --text-soft: #64748b;    

  
  --primary: #059669; 
  --primary-grad: linear-gradient(135deg, #059669 0%, #0891b2 100%);
  --primary-glow: rgba(5, 150, 105, 0.25);

  
  --shadow-sm: 0 6px 12px -8px rgba(15, 23, 42, 0.18), 0 2px 6px -4px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 26px 40px -18px rgba(15, 23, 42, 0.28), 0 10px 18px -12px rgba(15, 23, 42, 0.18);
  
  
  --nav-hover: rgba(15, 23, 42, 0.04);
  --nav-active: rgba(16, 185, 129, 0.12);
}


*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: var(--font-main);
  background-color: var(--bg-body);
  color: var(--text-main);
  
}

body {
  background-image: var(--bg-gradient);
  background-attachment: fixed;
}



.bg-\[var\(--bg-panel\)\] { background-color: var(--bg-panel) !important; }
.bg-\[var\(--bg-main\)\] { background-color: var(--bg-body) !important; }
.bg-\[var\(--bg-elev\)\] { background-color: var(--bg-elev) !important; }
.border-\[var\(--border-color\)\] { border-color: var(--border-color) !important; }
.text-\[var\(--text-main\)\] { color: var(--text-main) !important; }


.text-white { color: var(--text-main) !important; }
.text-slate-900, .text-slate-950, .text-slate-800 { color: var(--text-main) !important; }
.text-slate-300 { color: #334155 !important; } 
.text-slate-400 { color: var(--text-muted) !important; }
.text-slate-500 { color: var(--text-soft) !important; }
.text-slate-600 { color: var(--text-muted) !important; }

.btn .text-white, .badge .text-white, .bg-emerald-600 .text-white, .bg-blue-600 .text-white, .bg-red-600 .text-white { 
    color: #ffffff !important; 
}

a { text-decoration: none; color: inherit; transition: var(--speed); }

.app { display: flex; height: 100vh; overflow: hidden; position: relative; }


.sidebar {
  width: 280px;
  background: rgba(255, 255, 255, 0.7); 
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid var(--border-color);
  display: flex; flex-direction: column; z-index: 50; padding: 20px 0;
}

.main { flex: 1; display: flex; flex-direction: column; position: relative; overflow: hidden; }

.header {
  height: 90px; background: transparent;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px; z-index: 40;
}

.content { flex: 1; overflow-y: auto; padding: 20px 40px 40px; }


.nav-item {
  margin: 8px 24px; padding: 16px 24px; border-radius: var(--radius-md);
  color: var(--text-muted); font-weight: 600;
  display: flex; align-items: center; gap: 16px; cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid transparent;
}

.nav-item:hover {
  background: var(--nav-hover); color: var(--text-main); transform: translateX(6px);
}

.nav-item.active {
  background: var(--nav-active); color: var(--primary); font-weight: 700;
  border-color: rgba(16, 185, 129, 0.2);
  box-shadow: 0 4px 15px -5px rgba(16, 185, 129, 0.15);
}

.nav-item i { width: 24px; text-align: center; font-size: 1.1em; }


.card {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow-sm);
  transition: all 0.5s var(--ease);
}

.card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: var(--shadow-lg);
  border-color: rgba(16, 185, 129, 0.15); 
}


.btn {
  border: none; padding: 16px 32px; border-radius: var(--radius-md);
  background: var(--primary-grad); color: #fff !important; font-weight: 700;
  font-size: 0.95rem; letter-spacing: 0.5px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  box-shadow: 0 10px 20px -5px var(--primary-glow);
  transition: all 0.4s var(--ease); position: relative; overflow: hidden;
}

.btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 30px -5px var(--primary-glow);
  filter: brightness(1.05);
}

.btn:active { transform: scale(0.96); }


h1, h2, h3 { color: var(--text-main); font-weight: 800; letter-spacing: -0.5px; margin-bottom: 1.2rem; }
p { color: var(--text-muted); line-height: 1.8; margin-bottom: 1.5rem; font-size: 0.95rem; }


::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { 
  background: rgba(148, 163, 184, 0.4); 
  border-radius: 100px; 
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(100, 116, 139, 0.6); }


input, select, textarea {
    background-color: #ffffff !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
}
input::placeholder, textarea::placeholder {
    color: #cbd5e1 !important; 
}
input:focus, select:focus, textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
    background-color: #ffffff !important;
}


@media (max-width: 1024px) {
  .sidebar { width: 90px; padding: 20px 0; align-items: center; background: #ffffff; }
  .nav-item { justify-content: center; padding: 16px; margin: 12px; border-radius: 20px; }
  .nav-item span { display: none; }
  .nav-item:hover { transform: none; background: var(--nav-hover); }
  .header { padding: 0 24px; height: 80px; }
  .content { padding: 20px 24px; }
}


@media (max-width: 768px){
  
  #view-crm{
    top: 4rem !important;      
    bottom: 0 !important;
    padding-top: 0 !important;
    height: auto !important;
  }

  
  #crm-chat-header{ position: sticky; top: 0; }

  
  #crm-pane-chat, #crm-conversation{ min-height: 0 !important; }
  #chat-bubbles{ -webkit-overflow-scrolling: touch; }

  
  #crm-fab-tools{ bottom: calc(5.5rem + env(safe-area-inset-bottom)) !important; }
}


@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.animate-slide-up {
  animation: slideUp 0.3s ease-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}


.bg-emerald-500, .bg-emerald-600, .bg-blue-500, .bg-blue-600, .bg-red-500, .bg-red-600,
.bg-teal-600, .bg-indigo-600 { color: #ffffff !important; }
.bg-gradient-to-r, .bg-gradient-to-br { color: var(--text-main) !important; }



#main-container.sidebar-collapsed #app-sidebar { width: 5.5rem; }
#main-container.sidebar-collapsed #app-sidebar .sidebar-title { display: none; }
#main-container.sidebar-collapsed #app-sidebar nav { padding-left: 0.75rem; padding-right: 0.75rem; }
#main-container.sidebar-collapsed #app-sidebar .nav-btn { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
#main-container.sidebar-collapsed #app-sidebar .nav-btn i { width: auto !important; }
#main-container.sidebar-collapsed #app-sidebar .sidebar-label { display: none; }
#main-container.sidebar-collapsed #app-sidebar #license-badge { display: none; }
#main-container.sidebar-collapsed #app-sidebar img { display: none; }
#main-container.sidebar-collapsed #app-sidebar .p-6.border-t { padding-left: 0.75rem; padding-right: 0.75rem; }

#main-container.sidebar-collapsed #app-sidebar .sidebar-user { display: none; }