/* style.css — gaya tambahan di luar utility Tailwind */

:root {
  --brand-blue: #2563EB;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.dark *::-webkit-scrollbar-thumb { background: #475569; }

body {
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
}

/* --- Glassmorphism ringan --- */
.glass {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.dark .glass {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.12);
}

/* --- Pola papan catur untuk latar transparan --- */
.checkerboard {
  background-image:
    linear-gradient(45deg, #e5e7eb 25%, transparent 25%),
    linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e5e7eb 75%),
    linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0px;
  background-color: #fff;
}

/* --- Toast animasi --- */
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-8px) scale(0.96); }
}
.animate-toast-in { animation: toastIn 0.25s ease-out; }
.animate-toast-out { animation: toastOut 0.2s ease-in forwards; }

/* --- Loading overlay --- */
.loader-ring {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid rgba(37, 99, 235, 0.15);
  border-top-color: var(--brand-blue);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Grid overlay pada area preview layout --- */
.show-grid {
  background-image:
    linear-gradient(to right, rgba(37,99,235,0.15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(37,99,235,0.15) 1px, transparent 1px);
  background-size: 25px 25px; /* kurang lebih 1cm pada scale preview */
}

/* --- Fade / slide util untuk modal --- */
@keyframes modalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.animate-modal-in { animation: modalIn 0.25s cubic-bezier(0.16, 1, 0.3, 1); }

/* --- Ruler overlay sederhana (garis mm setiap 10mm) --- */
#rulerOverlay {
  pointer-events: none;
}

input[type="range"] {
  accent-color: var(--brand-blue);
}

/* Card hover lift */
.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(37, 99, 235, 0.18);
}

/* Cropper.js small tweaks so it matches the app's rounded aesthetic */
.cropper-view-box,
.cropper-face {
  border-radius: 2px;
}