/* Jasadigitalme Dark Theme: palette, base, utilities */
:root {
  --jd-bg-start: #0b1220; /* deep navy */
  --jd-bg-end: #0f172a;   /* slate-900 */
  --jd-primary: #2563EB;  /* blue-600 */
  --jd-primary-hover: #1D4ED8; /* blue-700 */
  --jd-text: #F1F5F9;     /* slate-100 */
  --jd-text-muted: #CBD5E1; /* slate-300 */
  --jd-card-bg: #0f172a;  /* slate-900 */
  --jd-card-border: #1f2937; /* slate-800 */
}
html, body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
  color: var(--jd-text);
  background: linear-gradient(135deg, var(--jd-bg-start), var(--jd-bg-end));
  min-height: 100vh;
}
/* Dark background utility for pages */
.jd-dark-bg {
  background: linear-gradient(135deg, var(--jd-bg-start), var(--jd-bg-end));
  color: var(--jd-text);
  min-height: 100vh;
}
/* Card surface on dark theme */
.jd-card {
  background-color: var(--jd-card-bg);
  border: 1px solid rgba(59, 130, 246, 0.45); /* blue accent */
  border-radius: 0.75rem; /* rounded-xl */
  box-shadow: 0 10px 20px rgba(2, 6, 23, 0.25), 0 0 18px rgba(59, 130, 246, 0.18);
  color: var(--jd-text);
}
/* Muted text utility */
.jd-muted { color: var(--jd-text-muted); }
/* Primary button utility */
.jd-btn-primary { background: var(--jd-primary); color: #fff; }
.jd-btn-primary:hover { background: var(--jd-primary-hover); }
/* Smooth hover transitions */
.a-transition { transition: all 200ms ease; }
/* Hover lift */
.card-hover:hover { box-shadow: 0 18px 24px rgba(2, 6, 23, 0.35); transform: translateY(-2px); }
/* Backdrop blur for sticky nav/footer */
.backdrop-blur { -webkit-backdrop-filter: saturate(180%) blur(8px); backdrop-filter: saturate(180%) blur(8px); }
/* Utility buttons and inputs for consistent dark theme */
.jd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 600;
  line-height: 1.2;
  transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  border: 1px solid transparent;
}
.jd-btn-primary {
  background-color: var(--jd-primary);
  color: #ffffff;
}
.jd-btn-primary:hover {
  background-color: var(--jd-primary-hover);
  box-shadow: 0 6px 18px rgba(59, 130, 246, 0.25);
}
.jd-btn-dark {
  background-color: #1f2937; /* slate-800 */
  color: var(--jd-text);
  border-color: #374151; /* slate-700 */
}
.jd-btn-dark:hover {
  background-color: var(--jd-primary);
  color: #ffffff;
  border-color: var(--jd-primary);
}
.jd-btn-outline {
  background-color: transparent;
  color: var(--jd-text);
  border-color: #374151; /* slate-700 */
}
.jd-btn-outline:hover {
  background-color: #111827; /* slate-900 */
  color: #ffffff;
  border-color: var(--jd-primary);
}

.jd-input, .jd-select, .jd-textarea {
  background-color: #0f172a; /* slate-900 */
  color: var(--jd-text);
  border: 1px solid #334155; /* slate-700 */
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  transition: box-shadow 200ms ease, border-color 200ms ease;
}
.jd-input::placeholder, .jd-textarea::placeholder {
  color: #64748b; /* slate-500 */
}
.jd-input:focus, .jd-select:focus, .jd-textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.6);
  border-color: var(--jd-primary);
}

.jd-form-label {
  color: var(--jd-text);
  font-weight: 600;
  font-size: 0.875rem; /* text-sm */
}

.jd-link {
  color: #93c5fd; /* blue-300 */
  text-decoration: none;
}
.jd-link:hover {
  color: #60a5fa; /* blue-400 */
}

/* Toast notification */
#jd-toast-container { position: fixed; bottom: 1rem; right: 1rem; z-index: 1000; }
.jd-toast {
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #e5e7eb; /* slate-200 */
  border-radius: 0.75rem;
  box-shadow: 0 10px 20px rgba(2, 6, 23, 0.20);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 360px;
  max-width: calc(100vw - 2rem);
}
.jd-toast-icon {
  width: 24px; height: 24px; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #10B981; color: #ffffff; /* emerald-500 */
  margin-top: 2px;
}
.jd-toast-title { font-weight: 600; }
.jd-toast-amount { font-weight: 700; }
.jd-toast-time { font-size: 0.75rem; color: #64748B; }
.jd-toast-close { color: #94A3B8; cursor: pointer; }
/* Animations */
.jd-toast-enter { transform: translateX(120%); opacity: 0; }
.jd-toast-enter-active { transform: translateX(0); opacity: 1; transition: transform 400ms ease, opacity 400ms ease; }
.jd-toast-exit-active { transform: translateX(120%); opacity: 0; transition: transform 300ms ease, opacity 300ms ease; }

/* Floating Scroll Hint (mobile) */
.jd-scroll-hint {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.9);
  color: #e2e8f0;
  border: 1px solid rgba(51, 65, 85, 0.8);
  box-shadow: 0 10px 20px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.3);
  font-size: 13px;
  line-height: 1;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.jd-scroll-hint.show { display: inline-flex; }
.jd-scroll-hint b { font-weight: 700; }
.jd-scroll-hint .dot {
  width: 6px; height: 6px; border-radius: 50%; background: #60a5fa;
  box-shadow: 0 0 0 0 rgba(96,165,250,0.8);
  animation: jd-ping 1.6s infinite;
}
@keyframes jd-ping {
  0% { box-shadow: 0 0 0 0 rgba(96,165,250,0.8); }
  70% { box-shadow: 0 0 0 10px rgba(96,165,250,0); }
  100% { box-shadow: 0 0 0 0 rgba(96,165,250,0); }
}

/* Tampilkan hanya di layar kecil */
@media (min-width: 640px) {
  .jd-scroll-hint { display: none !important; }
}