/* === PERELIDOZ ADMIN — CONNECT OS Design System === */

/* Scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #334155; border-radius: 2px; }

/* Selection */
::selection { background: rgba(59, 130, 246, 0.15); }

/* Smooth transitions */
* { box-sizing: border-box; }

/* Main wrapper */
.main-wrapper {
	margin-left: 260px;
	min-height: 100vh;
	transition: margin-left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Card hover */
.card-hover {
	transition: all 0.2s ease;
}
.card-hover:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
	border-color: #3b82f6;
}

/* Kanban */
.kanban-col {
	min-height: 200px;
}
.sortable-ghost {
	opacity: 0.4;
	background: #eef2ff;
	border: 2px dashed #4f46e5;
	border-radius: 16px;
}

/* Task drawer */
.task-drawer {
	position: fixed;
	top: 0;
	right: 0;
	width: 520px;
	height: 100vh;
	background: white;
	z-index: 100;
	display: flex;
	flex-direction: column;
	box-shadow: -5px 0 30px rgba(0, 0, 0, 0.1);
	transform: translateX(100%);
	transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.task-drawer.open {
	transform: translateX(0);
}

/* Backdrop */
.drawer-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.3);
	backdrop-filter: blur(2px);
	z-index: 99;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
}
.drawer-backdrop.open {
	opacity: 1;
	pointer-events: auto;
}

/* Badge priorities */
.badge-high { background: #fef2f2; color: #ef4444; }
.badge-med { background: #fffbeb; color: #f59e0b; }
.badge-low { background: #f0fdf4; color: #22c55e; }

/* Status colors */
.status-new { background: #eff6ff; color: #3b82f6; }
.status-progress { background: #fefce8; color: #ca8a04; }
.status-done { background: #f0fdf4; color: #16a34a; }

/* Animations */
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
	animation: fadeIn 0.3s ease forwards;
}