/* =====================================================
   SAMAKEUYITE - Design inspire de BIONICONNECT
   Palette indigo/violet + Inter + Tailwind CDN
   ===================================================== */

:root {
    --navbar-height: 60px;
    --bg-body: #f0f2f5;
    --primary: #667eea;
    --primary-dark: #5a67d8;
    --primary-light: #818cf8;
    --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --border-color: #e2e8f0;
    --surface-white: #ffffff;
    --surface-50: #f8fafc;
    --surface-100: #f1f5f9;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.08);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
}

* { box-sizing: border-box; }

body {
    font-family: Inter, system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    background: var(--bg-body);
    color: var(--text-primary);
}

.stat-card {
    background: var(--surface-white);
    border: 1px solid rgba(226,232,240,0.6);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem;
    transition: transform 0.2s, box-shadow 0.2s;
    overflow: hidden;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-card .stat-label { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; }
.stat-card .stat-value { font-size: 1.75rem; font-weight: 700; color: var(--text-primary); line-height: 1.1; }
.stat-card .stat-icon { width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }

.bg-gradient-primary   { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.bg-gradient-warning   { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.bg-gradient-success   { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.bg-gradient-danger    { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
.bg-gradient-secondary { background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%); }
.bg-gradient-purple    { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); }

.brand-icon { width: 36px; height: 36px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.activity-feed { list-style: none; padding: 0; margin: 0; }
.activity-feed li { padding: 0.6rem 0; border-bottom: 1px solid #f1f5f9; display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.83rem; }
.activity-feed li:last-child { border-bottom: none; }
.activity-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex-shrink: 0; margin-top: 6px; }
.activity-time { font-size: 0.72rem; color: var(--text-muted); }

.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); background: var(--surface-white); box-shadow: var(--shadow-sm); border: 1px solid rgba(226,232,240,0.6); }

.admin-sidebar { background: linear-gradient(180deg, #1e1b4b 0%, #312e81 100%); }
.admin-sidebar .sidebar-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; border-radius: 0.75rem; font-size: 0.875rem; font-weight: 500; color: rgba(199,210,254,0.8); text-decoration: none; transition: all 0.2s; }
.admin-sidebar .sidebar-link:hover { background: rgba(255,255,255,0.1); color: #fff; }
.admin-sidebar .sidebar-link.active { background: rgba(102,126,234,0.85); color: #fff; box-shadow: 0 4px 12px rgba(102,126,234,0.4); }

.user-badge { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.75rem; background: var(--surface-50); border-radius: 50px; border: 1px solid var(--border-color); }
.user-badge .user-name { font-size: 0.78rem; font-weight: 600; color: var(--text-primary); }
.user-badge .user-role-tag { font-size: 0.65rem; color: var(--primary); font-weight: 500; }

input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(102,126,234,0.15) !important; }
input::placeholder, textarea::placeholder { color: #9ca3af; }

.senegal-map { user-select: none; }
.senegal-map .region { transition: all 0.2s ease; }
.senegal-map .region:hover { opacity: 0.75; filter: brightness(1.1); }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.animate-fade-in  { animation: fadeIn 0.3s ease forwards; }
.animate-slide-in { animation: slideInRight 0.3s ease forwards; }

.skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: skeleton-loading 1.5s infinite; border-radius: 0.5rem; }

.card-hover { transition: all 0.2s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.badge-piece { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.6rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 600; white-space: nowrap; }
.upload-zone { transition: all 0.2s ease; }
.upload-zone.dragover { border-color: var(--primary); background-color: rgba(102,126,234,0.05); }
.masked-data { font-family: monospace; letter-spacing: 0.1em; color: #9ca3af; }

.text-senegal-green  { color: #00853F; }
.text-senegal-yellow { color: #FDEF42; }
.text-senegal-red    { color: #E31B23; }
.bg-senegal-green    { background-color: #00853F; }
.bg-senegal-yellow   { background-color: #FDEF42; }
.bg-senegal-red      { background-color: #E31B23; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f9fafb; }
::-webkit-scrollbar-thumb { background: #c7d2fe; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #818cf8; }

.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table th { white-space: nowrap; }
.notif-badge { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

@media print { nav, footer, .no-print { display: none !important; } body { background: white !important; } }
@media (max-width: 640px) { .senegal-map { max-width: 100%; height: auto; } .stat-card .stat-value { font-size: 1.4rem; } }