@import 'tailwindcss';
@plugin 'daisyui' {
	themes: light --default, dark;
}

@layer base {
	body {
		@apply min-h-screen antialiased;
	}

	html {
		-webkit-tap-highlight-color: transparent;
	}
}

@layer utilities {
	.pb-safe {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.surface-green {
		@apply bg-emerald-600 text-white;
	}

	.surface-red {
		@apply bg-rose-600 text-white;
	}

	.surface-blue {
		@apply bg-blue-600 text-white;
	}

	.surface-violet {
		@apply bg-violet-600 text-white;
	}

	.surface-indigo {
		@apply bg-indigo-600 text-white;
	}

	.surface-sky {
		@apply bg-sky-600 text-white;
	}

	.page-shell > header {
		@apply shrink-0;
	}

	.page-shell > main {
		@apply min-h-0 flex-1 overflow-y-auto overscroll-y-contain;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.page-shell > main::-webkit-scrollbar {
		display: none;
	}

	.page-content {
		@apply w-full space-y-5 px-4 py-5 lg:space-y-6 lg:px-8 lg:py-6;
	}

	.page-content-form {
		@apply w-full max-w-2xl space-y-5 px-4 py-5 pb-32 lg:max-w-none lg:space-y-6 lg:px-8 lg:py-8 lg:pb-8;
	}

	.page-content-narrow {
		@apply w-full max-w-3xl space-y-5 px-4 py-5 lg:space-y-6 lg:px-8 lg:py-6;
	}

	@media (max-width: 1023px) {
		.page-shell[data-bottom-nav] > main.page-content,
		.page-shell[data-bottom-nav] > main.page-content-narrow {
			padding-bottom: calc(5.75rem + 1.25rem + env(safe-area-inset-bottom));
		}
	}

	.desktop-page-header {
		@apply hidden shrink-0 items-center justify-between border-b border-base-300 bg-base-100 px-8 py-5 lg:flex;
	}

	.mobile-page-header {
		@apply relative shrink-0 overflow-hidden px-5 pb-6 pt-[max(1.25rem,env(safe-area-inset-top))] pr-20 text-white lg:hidden;
	}

	.mobile-subpage-header {
		@apply flex shrink-0 flex-col gap-3 px-4 py-4 pr-20 pt-[max(1rem,env(safe-area-inset-top))] text-white lg:flex-row lg:items-center lg:gap-3 lg:px-8 lg:pr-8 lg:pt-5;
	}

	.landing-native {
		@apply min-h-[100dvh] overscroll-none;
		padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
	}

	@media (min-width: 1024px) {
		.landing-native {
			padding-bottom: 0;
		}
	}

	.landing-cta-bar {
		@apply fixed bottom-0 left-0 right-0 z-50 border-t border-base-300/60 bg-base-100/90 px-4 pt-3 backdrop-blur-xl lg:hidden;
		padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
	}
}

@layer components {
	/* Ikon transparan — tanpa background & tanpa border (seperti navbar) */
	.icon-ring {
		@apply flex shrink-0 items-center justify-center border-0 bg-transparent;
	}

	.icon-ring-rounded {
		@apply rounded-2xl;
	}

	.icon-ring-circle {
		@apply rounded-full;
	}

	.icon-ring-xs {
		@apply h-8 w-8 text-sm;
	}

	.icon-ring-sm {
		@apply h-10 w-10 text-base;
	}

	.icon-ring-md {
		@apply h-12 w-12 text-xl;
	}

	.icon-ring-lg {
		@apply h-14 w-14 text-2xl;
	}

	.icon-ring-emerald {
		@apply text-emerald-600/80;
	}

	.icon-ring-sky {
		@apply text-sky-600/80;
	}

	.icon-ring-rose {
		@apply text-rose-600/80;
	}

	.icon-ring-amber {
		@apply text-amber-600/80;
	}

	.icon-ring-violet {
		@apply text-violet-600/80;
	}

	.icon-ring-indigo {
		@apply text-indigo-600/80;
	}

	.icon-ring-base {
		@apply text-base-content/65;
	}

	.icon-ring-on-dark {
		@apply text-white/80;
	}

	.btn-icon-back {
		@apply btn btn-circle btn-ghost btn-sm border-0 bg-transparent text-white/85 hover:bg-white/10 hover:text-white;
	}

	.btn-outline-on-dark {
		@apply btn btn-sm border-0 bg-transparent text-white/85 hover:bg-white/10 hover:text-white;
	}

	.btn-fab-outline {
		@apply btn btn-circle btn-lg border-0 bg-transparent shadow-none;
	}

	.btn-fab-outline-emerald {
		@apply text-emerald-600/90 drop-shadow-sm hover:text-emerald-600;
	}

	.btn-fab-outline-on-dark {
		@apply text-white/90 drop-shadow-sm hover:bg-white/10 hover:text-white;
	}

	.btn-fab-outline-indigo {
		@apply text-indigo-600/90 drop-shadow-sm hover:text-indigo-600;
	}

	.toast-viewport {
		@apply pointer-events-none fixed inset-x-3 z-[100] flex flex-col items-stretch gap-2;
		top: calc(max(0.75rem, env(safe-area-inset-top)) + 3.5rem);
	}

	@media (min-width: 1024px) {
		.toast-viewport {
			@apply inset-x-auto right-6 top-auto w-[min(24rem,calc(100vw-3rem))] items-end;
			bottom: max(1.5rem, env(safe-area-inset-bottom));
		}
	}

	.toast-native {
		@apply pointer-events-auto flex items-center gap-3 rounded-2xl border-2 px-3.5 py-3 shadow-lg backdrop-blur-md;
	}

	.toast-native-success {
		@apply border-emerald-300 bg-emerald-600 text-white;
	}

	.toast-native-error {
		@apply border-rose-300 bg-rose-600 text-white;
	}

	.toast-native-warning {
		@apply border-amber-300 bg-amber-500 text-white;
	}

	.toast-native-info {
		@apply border-sky-300 bg-sky-600 text-white;
	}

	.toast-native-enter {
		animation: toast-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	.toast-native-leave {
		animation: toast-out 0.22s ease-in both;
	}

	.toast-native-icon {
		@apply flex shrink-0 items-center justify-center;
	}

	.toast-native-message {
		@apply min-w-0 flex-1 text-sm font-semibold leading-snug;
	}

	.toast-native-close {
		@apply flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-lg leading-none text-white/80 transition-colors hover:bg-white/15 hover:text-white;
	}

	.toast-native-success .icon-ring-emerald,
	.toast-native-error .icon-ring-rose,
	.toast-native-warning .icon-ring-amber,
	.toast-native-info .icon-ring-sky {
		@apply text-white/90;
	}

	.confirm-overlay {
		@apply fixed inset-0 z-[110] flex items-center justify-center bg-black/45 p-4 backdrop-blur-sm;
		animation: confirm-overlay-in 0.2s ease-out both;
	}

	.confirm-dialog {
		@apply w-full max-w-sm rounded-3xl bg-base-100 px-6 py-7 text-center shadow-2xl;
		animation: confirm-dialog-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	.confirm-title {
		@apply mt-4 text-lg font-bold text-base-content;
	}

	.confirm-message {
		@apply mt-2 text-sm leading-relaxed text-base-content/65;
	}

	.confirm-actions {
		@apply mt-6 grid grid-cols-2 gap-3;
	}
}

@keyframes confirm-overlay-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes confirm-dialog-in {
	from {
		opacity: 0;
		transform: translateY(0.75rem) scale(0.94);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes toast-in {
	from {
		opacity: 0;
		transform: translateY(-0.75rem) scale(0.96);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes toast-out {
	from {
		opacity: 1;
		transform: translateY(0) scale(1);
	}

	to {
		opacity: 0;
		transform: translateY(-0.5rem) scale(0.98);
	}
}