/* ═══════════════════════════════════════════════════════
   LEADFLOW CRM - CUSTOM DESIGN TOKENS & STYLES
   ═══════════════════════════════════════════════════════ */
:root {
    --primary:         #6366F1;
    --primary-dark:    #4F46E5;
    --primary-light:   #818CF8;
    --secondary:       #8B5CF6;
    --accent:          #06B6D4;
    --success:         #10B981;
    --warning:         #F59E0B;
    --danger:          #EF4444;
    --sidebar-bg:      #0F0F23;
    --sidebar-border:  rgba(255,255,255,0.06);
    --sidebar-active:  linear-gradient(135deg, #6366F1, #8B5CF6);
    --card-shadow:     0 1px 3px 0 rgb(0 0 0 / .08), 0 1px 2px -1px rgb(0 0 0 / .06);
    --card-shadow-lg:  0 10px 25px -5px rgb(0 0 0 / .08), 0 8px 10px -6px rgb(0 0 0 / .05);
    --radius:          0.875rem;
    --radius-sm:       0.625rem;
    --radius-lg:       1.25rem;
}

/* ═══════════════════════════════════════════════════════
   BASE RESETS
   ═══════════════════════════════════════════════════════ */
*, *::before, *::after {
    border-color: inherit;
}
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ═══════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }
.dark ::-webkit-scrollbar-thumb { background: #334155; }

/* ═══════════════════════════════════════════════════════
   GRADIENT UTILITIES
   ═══════════════════════════════════════════════════════ */
.gradient-primary   { background: linear-gradient(135deg, #6366F1, #8B5CF6); }
.gradient-success   { background: linear-gradient(135deg, #10B981, #059669); }
.gradient-warning   { background: linear-gradient(135deg, #F59E0B, #D97706); }
.gradient-danger    { background: linear-gradient(135deg, #EF4444, #DC2626); }
.gradient-cyan      { background: linear-gradient(135deg, #06B6D4, #0891B2); }
.gradient-rose      { background: linear-gradient(135deg, #F43F5E, #E11D48); }
.gradient-orange    { background: linear-gradient(135deg, #F97316, #EA580C); }
.gradient-dark      { background: linear-gradient(135deg, #1E293B, #0F172A); }

/* ═══════════════════════════════════════════════════════
   GLASSMORPHISM
   ═══════════════════════════════════════════════════════ */
.glass {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.glass-dark {
    background: rgba(15, 15, 35, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ═══════════════════════════════════════════════════════
   CARD SYSTEM
   ═══════════════════════════════════════════════════════ */
.card {
    background: #ffffff;
    border-radius: var(--radius);
    border: 1px solid #F1F5F9;
    box-shadow: var(--card-shadow);
}
.dark .card {
    background: #1A1A2E;
    border-color: rgba(255,255,255,0.06);
}
.card-hover {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card-hover:hover {
    box-shadow: var(--card-shadow-lg);
    transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════
   STAT CARDS
   ═══════════════════════════════════════════════════════ */
.stat-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    color: white;
}
.stat-card::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
}
.stat-card::after {
    content: '';
    position: absolute;
    bottom: -40%;
    left: -5%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
}

/* ═══════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════ */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
    border: none;
    cursor: pointer;
    text-decoration: none;
}
.btn-primary:hover {
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45);
    transform: translateY(-1px);
    color: white;
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
}
.btn-secondary:hover {
    background: #F1F5F9;
    border-color: #CBD5E1;
    color: #111827;
}
.dark .btn-secondary {
    color: #CBD5E1;
    background: #1E293B;
    border-color: rgba(255,255,255,0.1);
}
.dark .btn-secondary:hover {
    background: #263346;
    color: #F1F5F9;
}

.btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #EF4444, #DC2626);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    text-decoration: none;
}
.btn-danger:hover {
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
    transform: translateY(-1px);
    color: white;
}

/* ═══════════════════════════════════════════════════════
   FORM INPUTS
   ═══════════════════════════════════════════════════════ */
.input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    border-radius: var(--radius-sm);
    color: #1E293B;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}
.input:focus {
    border-color: #6366F1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
    background: #ffffff;
}
.dark .input {
    background: #1A1A2E;
    border-color: rgba(255,255,255,0.1);
    color: #F1F5F9;
}
.dark .input:focus {
    border-color: #6366F1;
    background: #1E1E35;
}
.input.error { border-color: #EF4444; }

/* ═══════════════════════════════════════════════════════
   TABLE SYSTEM
   ═══════════════════════════════════════════════════════ */
.data-table {
    width: 100%;
    border-collapse: collapse;
}
.data-table thead th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748B;
    background: #F8FAFC;
    border-bottom: 1px solid #E2E8F0;
}
.data-table thead th:first-child { border-radius: var(--radius-sm) 0 0 0; padding-left: 1.5rem; }
.data-table thead th:last-child  { border-radius: 0 var(--radius-sm) 0 0; padding-right: 1.5rem; }
.data-table tbody tr {
    border-bottom: 1px solid #F1F5F9;
    transition: background 0.12s ease;
}
.data-table tbody tr:hover { background: #F8FAFC; }
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody td { padding: 0.875rem 1rem; font-size: 0.875rem; color: #374151; }
.data-table tbody td:first-child { padding-left: 1.5rem; }
.data-table tbody td:last-child  { padding-right: 1.5rem; }
.dark .data-table thead th { background: #1A1A2E; color: #94A3B8; border-bottom-color: rgba(255,255,255,0.06); }
.dark .data-table tbody tr { border-bottom-color: rgba(255,255,255,0.04); }
.dark .data-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.dark .data-table tbody td { color: #CBD5E1; }

/* ═══════════════════════════════════════════════════════
   BADGES / PILLS
   ═══════════════════════════════════════════════════════ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 999px;
    text-transform: capitalize;
}
.badge-primary  { background: #EEF2FF; color: #4F46E5; }
.badge-success  { background: #D1FAE5; color: #065F46; }
.badge-warning  { background: #FEF3C7; color: #92400E; }
.badge-danger   { background: #FEE2E2; color: #991B1B; }
.badge-info     { background: #CFFAFE; color: #164E63; }
.badge-purple   { background: #F3E8FF; color: #6B21A8; }
.badge-gray     { background: #F1F5F9; color: #475569; }
.dark .badge-primary { background: rgba(99,102,241,0.15); color: #A5B4FC; }
.dark .badge-success { background: rgba(16,185,129,0.15); color: #6EE7B7; }
.dark .badge-warning { background: rgba(245,158,11,0.15); color: #FCD34D; }
.dark .badge-danger  { background: rgba(239,68,68,0.15); color: #FCA5A5; }
.dark .badge-info    { background: rgba(6,182,212,0.15); color: #67E8F9; }
.dark .badge-purple  { background: rgba(139,92,246,0.15); color: #C4B5FD; }
.dark .badge-gray    { background: rgba(255,255,255,0.08); color: #94A3B8; }

/* ═══════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════ */
.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5625rem 0.875rem;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
    position: relative;
}
.sidebar-nav-item:hover {
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.9);
}
.sidebar-nav-item.active {
    background: linear-gradient(135deg, rgba(99,102,241,0.85), rgba(139,92,246,0.85));
    color: white;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}
.sidebar-nav-item .nav-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    opacity: 0.8;
}
.sidebar-nav-item.active .nav-icon { opacity: 1; }
.sidebar-section-label {
    padding: 0.375rem 0.875rem;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.28);
    margin-top: 0.5rem;
}

/* ═══════════════════════════════════════════════════════
   TOPBAR
   ═══════════════════════════════════════════════════════ */
.topbar-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 0.75rem;
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    color: #94A3B8;
    min-width: 200px;
    transition: all 0.15s ease;
}
.topbar-search:focus-within {
    border-color: #6366F1;
    background: white;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
    color: #374151;
}
.dark .topbar-search {
    background: #1A1A2E;
    border-color: rgba(255,255,255,0.1);
    color: #64748B;
}
.dark .topbar-search:focus-within {
    border-color: #6366F1;
    background: #1E1E35;
}

/* ═══════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0.4); }
    50%       { box-shadow: 0 0 0 8px rgba(99,102,241,0); }
}
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

.animate-fade-up    { animation: fadeInUp 0.3s ease forwards; }
.animate-slide-left { animation: slideInLeft 0.25s ease forwards; }
.animate-pulse-glow { animation: pulse-glow 2s ease infinite; }

.stagger > *:nth-child(1) { animation-delay: 0.05s; }
.stagger > *:nth-child(2) { animation-delay: 0.10s; }
.stagger > *:nth-child(3) { animation-delay: 0.15s; }
.stagger > *:nth-child(4) { animation-delay: 0.20s; }

.skeleton {
    background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 0.5rem;
}
.dark .skeleton {
    background: linear-gradient(90deg, #1E293B 25%, #263346 50%, #1E293B 75%);
    background-size: 200% 100%;
}

/* ═══════════════════════════════════════════════════════
   MISC UTILITIES
   ═══════════════════════════════════════════════════════ */
.section-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #0F172A;
    letter-spacing: -0.01em;
}
.dark .section-title { color: #F1F5F9; }

.divider {
    height: 1px;
    background: linear-gradient(to right, transparent, #E2E8F0, transparent);
    margin: 1rem 0;
}
.dark .divider {
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.08), transparent);
}

.avatar-ring {
    box-shadow: 0 0 0 2px white, 0 0 0 4px #6366F1;
}
.dark .avatar-ring {
    box-shadow: 0 0 0 2px #0F0F23, 0 0 0 4px #6366F1;
}

.tooltip {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: #1E293B;
    color: white;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.3125rem 0.625rem;
    border-radius: 0.375rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 50;
}
.tooltip::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: #1E293B;
}