:root {
	--astra: #00579C;
	--astra-dark: #00457d;
	--astra-light: #e6f0f8;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	-webkit-font-smoothing: antialiased;
}

.kanban-board {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	align-items: flex-start;
	padding-bottom: 0.75rem;
	scroll-snap-type: x proximity;
}

.kanban-col {
	min-width: 285px;
	max-width: 320px;
	flex: 0 0 300px;
	scroll-snap-align: start;
	max-height: calc(100vh - 15rem);
	display: flex;
	flex-direction: column;
}

.kanban-cards {
	overflow-y: auto;
	min-height: 90px;
	padding: 0.25rem;
}

.kanban-card {
	position: relative;
	cursor: grab;
	transition: transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
}

.kanban-card:active {
	cursor: grabbing;
}

.kanban-card.dragging {
	opacity: 0.55;
	transform: rotate(1.5deg) scale(1.02);
	box-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.45);
	z-index: 5;
}

.kanban-card[data-sedang-pindah="1"] {
	pointer-events: none;
}

/* Klon kartu yang terbang di atas papan selama animasi pindah tahap. */
.kanban-terbang {
	position: fixed;
	margin: 0;
	z-index: 9999;
	pointer-events: none;
	transform-origin: center;
	transition: none !important;
}

.kanban-col.drag-over {
	outline: 2px dashed var(--astra);
	outline-offset: -3px;
	background-color: var(--astra-light);
}

.calendar-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	border-top: 1px solid #e2e8f0;
	border-left: 1px solid #e2e8f0;
}

.calendar-cell {
	min-height: 8.5rem;
	border-right: 1px solid #e2e8f0;
	border-bottom: 1px solid #e2e8f0;
	position: relative;
}

.calendar-cell.drag-over {
	background-color: #e6f0f8;
	outline: 2px dashed var(--astra);
	outline-offset: -2px;
}

.calendar-event {
	cursor: grab;
	transition: opacity 120ms ease;
}

.calendar-event:active {
	cursor: grabbing;
}

.calendar-event.dragging {
	opacity: 0.4;
}

@media (max-width: 767px) {
	.kanban-col {
		min-width: 82vw;
		flex-basis: 82vw;
		max-height: none;
	}

	.calendar-cell {
		min-height: 5.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.kanban-card,
	.calendar-event,
	.fade-up {
		transition: none !important;
		animation: none !important;
	}
}

@media print {
	.no-print {
		display: none !important;
	}
}

/* Scrollbar halus */
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
	background: #94a3b8;
}

/* Animasi ringan */
@keyframes fadeUp {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

.fade-up {
	animation: fadeUp 180ms ease-out both;
}

[x-cloak] {
	display: none !important;
}

/* Sidebar: sub-menu dapat dilipat */
[data-submenu] {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 260ms ease, opacity 180ms ease;
}

[data-submenu].terbuka {
	max-height: 32rem;
	opacity: 1;
}

[data-submenu-toggle] .chevron {
	transition: transform 200ms ease;
}

[data-submenu-toggle][aria-expanded="true"] .chevron {
	transform: rotate(180deg);
}

/* Modal */
[data-modal] {
	opacity: 0;
	transition: opacity 160ms ease;
}

[data-modal].modal-tampil {
	opacity: 1;
}

[data-modal] [data-modal-dialog] {
	transform: translateY(10px) scale(0.985);
	transition: transform 180ms ease;
}

[data-modal].modal-tampil [data-modal-dialog] {
	transform: translateY(0) scale(1);
}

@media (max-width: 639px) {
	[data-modal] [data-modal-dialog] {
		transform: translateY(100%);
	}

	[data-modal].modal-tampil [data-modal-dialog] {
		transform: translateY(0);
	}
}