/* Hide scroll bar */
        .hide-scrollbar {
            overflow-y: auto !important;
        -ms-overflow-style: none !important;  /* IE and Edge */
        scrollbar-width: none !important;     /* Firefox */
        }

        .hide-scrollbar::-webkit-scrollbar {
        display: none !important; /* Chrome, Safari */
        }

        /* Make sure body doesn't scroll when sidebar is open on mobile */
        body.sidebar-open {
            overflow: hidden;
        }

        /* Optional: smooth fade for overlay */
        #sidebar-overlay {
            opacity: 0;
            pointer-events: none;
        }

        #sidebar-overlay:not(.hidden) {
            opacity: 1;
            pointer-events: auto;
        }





        /* Styles généraux */
        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .truncate-url {
            max-width: 150px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: inline-block;
            vertical-align: bottom;
        }
        
        /* Dashboard spécifique */
        .dashboard-container {
            height: calc(100vh - 2rem);
            overflow-y: auto;
        }
        
        .dashboard-metrics {
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        }
        
        .dashboard-charts {
            grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
            gap: 1.5rem;
        }
        
        .chart-container {
            height: 300px;
            min-height: 300px;
            max-height: 300px;
        }
        
        /* Filtres */
        .filter-active {
            background: linear-gradient(135deg, #3b82f6, #8b5cf6) !important;
            color: white !important;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        }
        
        .country-filter-active {
            background: #3b82f6 !important;
            color: white !important;
        }
        
        /* Badges */
        .priority-high {
            background: linear-gradient(135deg, #fecaca, #fca5a5) !important;
            color: #991b1b !important;
            font-weight: 800 !important;
        }
        
        .priority-low {
            background: #f1f5f9 !important;
            color: #64748b !important;
        }
        
        .status-contacted {
            background: #dcfce7 !important;
            color: #166534 !important;
            font-weight: 700 !important;
        }
        
        .status-tocontact {
            background: #fef3c7 !important;
            color: #92400e !important;
            font-weight: 700 !important;
        }
        
        /* Rows */
        .table-row-highlight {
            background: linear-gradient(90deg, #fef2f2 0%, transparent 100%);
        }
        
        .table-row-contacted {
            background: linear-gradient(90deg, #f0fdf4 0%, transparent 100%);
        }
        
        /* Boutons */
        .whatsapp-btn {
            background: linear-gradient(135deg, #25D366, #128C7E);
            color: white;
        }
        
        .whatsapp-btn:hover {
            background: linear-gradient(135deg, #128C7E, #075E54);
        }
        
        /* Radio buttons personnalisés */
        .radio-channel {
            display: none;
        }
        
        .radio-label {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 1rem;
            border: 2px solid #e2e8f0;
            border-radius: 0.75rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .radio-label:hover {
            border-color: #3b82f6;
            background: #f8fafc;
        }
        
        .radio-channel:checked + .radio-label {
            border-color: #3b82f6;
            background: #eff6ff;
        }
        
        .radio-icon {
            width: 2.5rem;
            height: 2.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.5rem;
            font-size: 1.25rem;
        }
        
        /* Scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        
        ::-webkit-scrollbar-track {
            background: #f1f5f9;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 3px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }
        
        /* Animations */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .fade-in {
            animation: fadeIn 0.3s ease-out;
        }
        
        /* Responsive */
        @media (max-width: 1024px) {
            .dashboard-charts {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 768px) {
            .dashboard-metrics {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .chart-container {
                height: 250px;
                min-height: 250px;
                max-height: 250px;
            }
        }
        
        @media (max-width: 640px) {
            .dashboard-metrics {
                grid-template-columns: 1fr;
            }
        }

        /* stopr rendering until Tailwind is ready */ 
        html:not(.tw-ready) body {
            display: none;
        }

        html {
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.2s ease;
            height: 100%;
        }
        
        body {
            /* overflow-x: hidden; */
            height: 100%;
        }




        #page-stats, #page-sales {
            max-height: calc(100vh - 0px);
            overflow-y: auto;
            /* overflow-x: hidden; */
        }

        /* Country filter buttons */
        .country-filter-btn {
            cursor: pointer;
            white-space: nowrap;
            transform: scale(1);
        }

        .country-filter-btn:hover {
            transform: scale(1.02);
        }

        .country-filter-btn.active {
            transform: scale(1.05);
        }

        /* Responsive adjustments */
        @media (max-width: 640px) {
            .country-filter-btn {
                font-size: 0.75rem;
                padding: 0.5rem 0.75rem;
            }
            
            .country-filter-btn span:last-child {
                max-width: 100px;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }





/* Global Styles */
* {
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Navigation */
.active-nav {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
    border-left: 4px solid #3b82f6;
}

/* Metric Cards */
.metric-card {
    @apply p-4 rounded-xl border shadow-sm;
}

.metric-icon {
    @apply w-12 h-12 rounded-xl flex items-center justify-center mb-3;
}

.metric-label {
    @apply text-xs font-bold uppercase text-slate-500 mb-1;
}

.metric-value {
    @apply text-2xl font-black text-slate-800 mb-1;
}

.metric-trend {
    @apply text-xs text-slate-400;
}

/* Filter Buttons */
.filter-btn {
    @apply px-4 py-2 rounded-lg font-medium text-sm flex items-center transition-all duration-200;
}

.filter-btn.active {
    @apply bg-blue-600 text-white shadow-md;
}

.filter-btn:not(.active) {
    @apply bg-slate-100 text-slate-700 hover:bg-slate-200;
}

.badge-count {
    @apply ml-2 px-1.5 py-0.5 text-xs rounded-full;
}

.filter-btn.active .badge-count {
    @apply bg-white/20 text-white;
}

.filter-btn:not(.active) .badge-count {
    @apply bg-slate-300 text-slate-700;
}

/* Table Styles */
.shop-row {
    @apply border-b border-slate-100 hover:bg-slate-50/50;
}

.shop-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.priority-badge {
    @apply text-[10px] font-bold px-2 py-1 rounded-full;
}

.priority-badge.high {
    @apply bg-red-100 text-red-800;
}

.priority-badge.low {
    @apply bg-slate-200 text-slate-600;
}

.status-badge {
    @apply text-xs font-bold px-2 py-1 rounded-full inline-flex items-center w-fit;
}

.status-badge.contacted {
    @apply bg-green-100 text-green-800;
}

.status-badge.to-contact {
    @apply bg-amber-100 text-amber-800;
}

/* Action Buttons */
.action-btn {
    @apply w-10 h-10 rounded-lg flex items-center justify-center transition-all duration-200 hover:scale-105;
}

.ai-btn {
    @apply bg-gradient-to-r from-blue-500 to-purple-600 text-white hover:shadow-lg;
}

.contact-btn {
    @apply bg-green-100 text-green-600 hover:bg-green-200;
}

.view-btn {
    @apply bg-blue-100 text-blue-600 hover:bg-blue-200;
}

.info-btn {
    @apply bg-slate-100 text-slate-600 hover:bg-slate-200;
}

/* Social Links */
.social-link {
    @apply w-8 h-8 rounded-full flex items-center justify-center transition-all duration-200 hover:scale-110;
}

.social-link.instagram {
    @apply bg-gradient-to-br from-pink-500 to-purple-600 text-white hover:shadow-lg;
}

.social-link.facebook {
    @apply bg-[#1877F2] text-white hover:shadow-lg;
}

/* Contact Buttons */
.whatsapp-btn {
    @apply w-8 h-8 bg-green-100 text-green-600 rounded-full flex items-center justify-center hover:bg-green-200;
}

.call-btn {
    @apply w-8 h-8 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center hover:bg-blue-200;
}

/* Loading Animation */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Responsive */
@media (max-width: 768px) {
    .table-container {
        @apply -mx-4;
    }
    
    .filter-btn span:not(.badge-count) {
        @apply hidden;
    }
    
    .filter-btn .badge-count {
        @apply ml-0;
    }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    @apply bg-slate-100;
}

::-webkit-scrollbar-thumb {
    @apply bg-slate-300 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-slate-400;
}

/* Selection */
::selection {
    @apply bg-blue-500/20 text-blue-900;
}