/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Local fonts — served without internet connection */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/Inter-Variable-latin-eeab71fd.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/DMSans-Variable-latin-fe3ac7ee.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/DMSans-Variable-italic-latin-4ac0368a.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Font variables yang dipakai shadcn.css (.font-display pakai DM Sans, body pakai Inter) */
:root {
  --font-inter: 'Inter', system-ui, sans-serif;
  --font-dm-sans: 'DM Sans', system-ui, sans-serif;
}

 @layer base {
  :root {
    --background: 40 20% 98%;
    --foreground: 220 15% 15%;
    --card: 0 0% 100%;
    --card-foreground: 220 15% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 220 15% 15%;
    --primary: 220 15% 15%;
    --primary-foreground: 40 20% 98%;
    --secondary: 40 15% 95%;
    --secondary-foreground: 220 15% 15%;
    --muted: 40 10% 94%;
    --muted-foreground: 220 10% 46%;
    --accent: 38 50% 60%;
    --accent-foreground: 220 15% 15%;
    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 98%;
    --border: 40 10% 90%;
    --input: 40 10% 90%;
    --ring: 38 50% 60%;
    --chart-1: 38 50% 60%;
    --chart-2: 200 50% 50%;
    --chart-3: 160 40% 45%;
    --chart-4: 280 40% 55%;
    --chart-5: 340 50% 55%;
    --radius: 0.75rem;
    --sidebar-background: 0 0% 100%;
    --sidebar-foreground: 220 15% 25%;
    --sidebar-primary: 220 15% 15%;
    --sidebar-primary-foreground: 40 20% 98%;
    --sidebar-accent: 40 15% 95%;
    --sidebar-accent-foreground: 220 15% 15%;
    --sidebar-border: 40 10% 90%;
    --sidebar-ring: 38 50% 60%;
    --success: 152 60% 40%;
    --success-foreground: 0 0% 100%;
    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 100%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}


/* ─── Animations (from v0.app globals.css) ─── */

@keyframes pulse-ring {
  0% { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}

@keyframes float-up {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes subtitleSlideIn {
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes barPulse {
  0% { transform: scaleY(0.35); }
  100% { transform: scaleY(1); }
}

@keyframes dotBounce {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(-5px); opacity: 1; }
}

.animate-pulse-ring {
  animation: pulse-ring 1.5s ease-out infinite;
}

.animate-float {
  animation: float-up 3s ease-in-out infinite;
}

/* Custom checkbox */
input[type="checkbox"].checkbox-custom {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  border-radius: 0.25rem;
  border: 1.5px solid hsl(var(--border));
  background-color: hsl(var(--background));
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

input[type="checkbox"].checkbox-custom:hover {
  border-color: hsl(var(--primary) / 0.5);
}

input[type="checkbox"].checkbox-custom:checked {
  background-color: hsl(var(--primary));
  border-color: hsl(var(--primary));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 72%;
  background-repeat: no-repeat;
  background-position: center;
}

input[type="checkbox"].checkbox-custom:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}

.language-option:has(input:checked) {
  border-color: hsl(var(--primary) / 0.35);
  background-color: hsl(var(--primary) / 0.04);
}

/* User signin /users/sign_in */

/* ─── Toast notifications ─── */

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

@keyframes toast-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
    max-height: 10rem;
  }
  to {
    opacity: 0;
    transform: translateY(-0.5rem) scale(0.96);
    max-height: 0;
  }
}

@keyframes toast-progress {
  from { width: 100%; }
  to { width: 0%; }
}

.toast-enter {
  animation: toast-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.toast-leave {
  animation: toast-out 0.3s ease-in forwards;
  overflow: hidden;
}

.toast-progress {
  animation: toast-progress 4.5s linear forwards;
}

/* ─── Mobile sidebar drawer ─── */

#sidebar-overlay {
  pointer-events: none;
}

#sidebar-overlay.is-open {
  pointer-events: auto;
}

#sidebar-backdrop {
  opacity: 0;
  transition: opacity 0.3s ease;
}

#sidebar-overlay.is-open #sidebar-backdrop {
  opacity: 1;
}

#sidebar-drawer {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

#sidebar-overlay.is-open #sidebar-drawer {
  transform: translateX(0);
}

/* dvh unit for iOS Safari — Tailwind v4 may not compile h-dvh if unused elsewhere */
.h-dvh { height: 100dvh; }

/* Speaker button playing state */
button.audio-playing {
  background-color: #eff6ff;
  animation: audio-pulse 0.8s ease-in-out infinite alternate;
}

button.audio-playing svg {
  color: #3b82f6;
  fill: currentColor;
}

@keyframes audio-pulse {
  from { transform: scale(1); }
  to   { transform: scale(1.2); }
}