:root {
	--bg-app:    #0f172a;
	--bg-panel:  #1e293b;
	--border:    #1e293b;
	--border-soft: #334155;
}

* { box-sizing: border-box; }

body {
	background: var(--bg-app);
	color: #f1f5f9;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Scrollbar ─────────────────────────────────────────────────────────────── */
*::-webkit-scrollbar       { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #475569; border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* ── Animations ────────────────────────────────────────────────────────────── */
.fade-in { animation: fadeIn 0.25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }

.pulse-dot { animation: pulseDot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Log panel ─────────────────────────────────────────────────────────────── */
#log-overlay { transition: opacity 0.25s; }
#log-overlay.closed { opacity: 0; pointer-events: none; }
#log-panel { transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); width: 840px; }
#log-panel.closed { transform: translateX(100%); }

/* ── Loglines ──────────────────────────────────────────────────────────────── */
.logline {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	gap: 12px;
	padding: 2px 16px;
	border-bottom: 1px solid #1e293b;
	transition: background 0.15s;
	font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
	font-size: 0.78rem;
}
.logline:hover { background: #1e293b; }
.log-ts    { white-space: nowrap; font-weight: 600; font-size: 0.72rem; letter-spacing: 0.3px; color: #475569; min-width: 70px; }
.log-badge { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 4px; border: 1px solid transparent; font-size: 0.7rem; font-weight: 600; white-space: nowrap; }
.log-badge.info    { background: #3b82f620; color: #60a5fa; border-color: #3b82f640; }
.log-badge.success { background: #10b98120; color: #34d399; border-color: #10b98140; }
.log-badge.warning { background: #eab30820; color: #facc15; border-color: #eab30840; }
.log-badge.error   { background: #ef444420; color: #f87171; border-color: #ef444440; }
.log-msg { flex: 1; color: #cbd5e1; word-break: break-word; line-height: 1.5; }

/* ── Lignes tableau releases ───────────────────────────────────────────────── */
.border-custom { border-bottom: 1px solid #1e293b; }

/* ── Mode sélection ────────────────────────────────────────────────────────── */
body.select-mode [data-guid] { cursor: default !important; user-select: none; }
body.select-mode [data-guid]:hover { background: rgba(99,102,241,0.06) !important; }
[data-guid].row-selected { background: rgba(99,102,241,0.10) !important; box-shadow: inset 3px 0 0 #818cf8; }
[data-guid].row-selected:hover { background: rgba(99,102,241,0.15) !important; }

/* ── Badges ────────────────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; border: 1px solid; white-space: nowrap; }

/* ── Stat cards ────────────────────────────────────────────────────────────── */
.stat-card { cursor: pointer; }
.stat-card.active { outline: 2px solid; outline-offset: -1px; }
#stat-card-all.active    { outline-color: #64748b; }
#stat-card-active.active { outline-color: #38bdf8; }
#stat-card-done.active   { outline-color: #34d399; }
#stat-card-errors.active { outline-color: #f87171; }

/* ── Pagination ────────────────────────────────────────────────────────────── */
.page-btn { min-width: 28px; height: 28px; border-radius: 4px; font-size: 12px; display: flex; align-items: center; justify-content: center; border: 1px solid #334155; background: transparent; color: #64748b; cursor: pointer; transition: all 0.1s; padding: 0 6px; }
.page-btn:hover   { background: #1e293b; color: #f1f5f9; }
.page-btn.current { background: #1e293b; color: #f1f5f9; border-color: #475569; }

/* ── Tri colonnes ──────────────────────────────────────────────────────────── */
.sort-header { cursor: pointer; user-select: none; transition: color 0.15s; }
.sort-header:hover { color: #94a3b8; }
.sort-header.active { color: #cbd5e1; }
.sort-icon { display: inline-block; margin-left: 3px; font-size: 9px; opacity: 0.5; }
.sort-header.active .sort-icon { opacity: 1; color: #818cf8; }

/* ── Toasts ────────────────────────────────────────────────────────────────── */
#toast-container { pointer-events: none; }
#toast-container > * { pointer-events: auto; }
.toast-exit { opacity: 0; transform: translateX(12px); transition: opacity 0.3s, transform 0.3s; }