:root{
	--ui-bg:#f6f8fc;
	--ui-surface:#ffffff;
	--ui-panel:#ffffff;
	--ui-border:rgba(17,24,39,.08);
	--ui-text:#0f172a;
	--ui-muted:#6b7280;
	--ui-primary:#6366f1;
	--ui-primary-weak:#4f46e5;
	--ui-success:#10b981;
}

/* Dark variables */
body.dark{
	--ui-bg:#0b1020;
	--ui-surface:#0f172a;
	--ui-panel:#111827;
	--ui-border:rgba(255,255,255,.08);
	--ui-text:#e5e7eb;
	--ui-muted:#9ca3af;
	--ui-primary:#6366f1;
	--ui-primary-weak:#a5b4fc;
	--ui-success:#10b981;
}

html,body{background:var(--ui-bg);color:var(--ui-text);} 
body{font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;}

/* Topbar */
.topbar{position:sticky;top:0;z-index:1030;background:var(--ui-surface);border-bottom:1px solid var(--ui-border);} 
.topbar .navbar-brand{letter-spacing:.2px;color:var(--ui-text)!important}
.topbar .nav-link{color:var(--ui-text)!important}
.topbar .search{max-width:460px;width:100%}
.topbar .search input{background:color-mix(in oklab, var(--ui-surface) 60%, #0000);border:1px solid var(--ui-border);border-radius:10px;padding:.55rem .9rem;color:var(--ui-text)}
.topbar .search input::placeholder{color:color-mix(in oklab, var(--ui-text) 55%, #0000)}

/* Alignement recherche à droite (style proche lineone) */
.topbar .search{max-width:320px}
.topbar .navbar-nav .search .form-control{background:color-mix(in oklab, var(--ui-surface) 50%, #0000)}

/* Left icon rail (legacy) */
.icon-rail{position:fixed;top:56px;bottom:0;left:0;width:72px;background:var(--ui-surface);border-right:1px solid var(--ui-border);display:flex;flex-direction:column;align-items:center;padding:.75rem .25rem;gap:.5rem}
.icon-rail a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;color:#475569;text-decoration:none;border:1px solid transparent;transition:all .2s ease}
.icon-rail a:hover{background:color-mix(in oklab, var(--ui-surface) 80%, #0000);border-color:var(--ui-border)}
.icon-rail a.active{background:#eef2ff;color:var(--ui-primary);border-color:#e0e7ff}
body.dark .icon-rail a{color:#cbd5e1}
body.dark .icon-rail a:hover{background:rgba(255,255,255,.06);border-color:var(--ui-border);color:#fff}
body.dark .icon-rail a.active{background:rgba(99,102,241,.14);border-color:rgba(99,102,241,.25);color:var(--ui-primary-weak)}

/* New side nav with labels */
.side-nav{position:fixed;top:56px;bottom:0;left:0;width:240px;background:var(--ui-surface);border-right:1px solid var(--ui-border);padding:.75rem 0;overflow:auto}
.side-nav .section-title{padding:.75rem 1rem;color:var(--ui-muted);font-size:.75rem;text-transform:uppercase;}
.side-nav nav a{display:flex;align-items:center;gap:.75rem;padding:.65rem 1rem;color:#475569;text-decoration:none;border-left:2px solid transparent;transition:background .2s ease, color .2s ease, border-color .2s ease}
.side-nav nav a i{font-size:1.05rem}
.side-nav nav a:hover{background:color-mix(in oklab, var(--ui-surface) 85%, #0000);color:#0f172a}
.side-nav nav a.active{background:#eef2ff;color:var(--ui-primary);border-left-color:var(--ui-primary)}
body.dark .side-nav nav a{color:#cbd5e1}
body.dark .side-nav nav a:hover{background:rgba(255,255,255,.06);color:#fff}
body.dark .side-nav nav a.active{background:rgba(99,102,241,.14);border-left-color:rgba(99,102,241,.6);color:var(--ui-primary-weak)}

/* Content area (adjusted for side-nav) */
.content{margin-left:240px;padding:24px}

/* Cards */
.card{background:var(--ui-panel)!important;border:1px solid var(--ui-border)!important;border-radius:16px;color:var(--ui-text);box-shadow:0 8px 24px rgba(15,23,42,.06)}
body.dark .card{box-shadow:0 8px 24px rgba(0,0,0,.25)}
.card-header{background:transparent;border-bottom:1px solid var(--ui-border);}
.text-muted{color:var(--ui-muted)!important}

/* Buttons, badges */
.btn-primary{background:var(--ui-primary);border-color:var(--ui-primary)}
.btn-outline-light{border-color:var(--ui-border);color:var(--ui-text)}
.btn-outline-light:hover{background:color-mix(in oklab, var(--ui-surface) 85%, #0000)}
.badge-soft{background:#eef2ff;border:1px solid #e0e7ff;color:var(--ui-primary-weak)}
body.dark .badge-soft{background:rgba(99,102,241,.14);border-color:rgba(99,102,241,.25);color:var(--ui-primary-weak)}

/* Tables */
.table{color:var(--ui-text)}
.table thead{background:color-mix(in oklab, var(--ui-surface) 90%, #0000)}
.table tr{border-color:var(--ui-border)}
.table td,.table th{border-color:var(--ui-border)}

/* KPI */
.kpi-label{color:var(--ui-muted);font-size:.85rem}
.kpi-value{font-size:1.6rem;font-weight:700}
.kpi-trend{font-size:.85rem}

/* Chips */
.chips .chip{display:inline-flex;align-items:center;padding:.35rem .75rem;border-radius:999px;border:1px solid var(--ui-border);background:var(--ui-surface);color:var(--ui-text);font-size:.85rem;cursor:pointer}
.chips .chip.active{background:#111827;color:#fff;border-color:#111827}
body.dark .chips .chip.active{background:#fff;color:#111827;border-color:#fff}

/* Stat tiles on right */
.stat-tile{display:flex;align-items:center;justify-content:space-between;padding:1rem;border:1px solid var(--ui-border);border-radius:14px;background:var(--ui-surface)}
.stat-tile .label{color:var(--ui-muted);font-size:.85rem}
.stat-tile .value{font-weight:700}

/* Progress */
.progress{background:#eef2ff}
.progress-bar{background:var(--ui-primary)}

/* Animations */
@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.reveal{opacity:0;transform:translate3d(0,12px,0)}
.reveal.visible{opacity:1;transform:none;animation:fadeInUp .6s ease forwards}

.hover-lift{transition:transform .2s ease, box-shadow .2s ease}
.hover-lift:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(15,23,42,.12)}

/* Theme toggle */
.theme-toggle{width:36px;height:36px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ui-border);background:transparent;color:#f59e0b}
.theme-toggle:hover{background:color-mix(in oklab, var(--ui-surface) 85%, #0000)}
.theme-toggle .icon{font-size:18px;line-height:1}
.theme-toggle .icon-sun{display:inline-block}
.theme-toggle .icon-moon{display:none}
body.dark .theme-toggle{color:#fbbf24}
body.dark .theme-toggle .icon-sun{display:none}
body.dark .theme-toggle .icon-moon{display:inline-block}

/* Notifications style lineone-like */
.notif-toggle{position:relative;appearance:none;-webkit-appearance:none;background:transparent;border:none;padding:0;margin:0;color:var(--ui-muted);display:inline-flex;align-items:center;justify-content:center;line-height:1}
.notif-toggle:hover{color:var(--ui-text)}
.notif-toggle:focus{outline:none;box-shadow:none}
/* Force sans fond ni bordure sur tous états */
.notif-toggle,
.notif-toggle:hover,
.notif-toggle:active,
.notif-toggle:focus,
.notif-toggle:focus-visible,
.show > .notif-toggle{background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important}
.notif-toggle::-moz-focus-inner{border:0;padding:0}
.notif-toggle .icon{width:20px;height:20px;display:block;color:inherit}
.bell-icon{font-size:18px;line-height:1;color:inherit}
.notif-badge{position:absolute;top:-6px;right:-8px;display:flex;align-items:center;justify-content:center;width:16px;height:16px;pointer-events:none}
.notif-dot{position:relative;z-index:2;display:inline-block;width:10px;height:10px;border-radius:999px;background:#ff00a8}
.notif-ring{position:absolute;z-index:1;display:inline-block;width:16px;height:16px;border-radius:999px;background:#ff00a81f;animation:notif-ping 1.4s cubic-bezier(0,0,0.2,1) infinite}
@keyframes notif-ping{0%{transform:scale(0.6);opacity:.9}80%{transform:scale(1.4);opacity:.15}100%{transform:scale(1.6);opacity:0}}