@import 'tailwindcss';

@theme {
  --animate-fade-up: fade-up 0.4s ease-out forwards;
  --animate-fade-right: fade-right 0.3s ease-out forwards;
  --animate-fade-left: fade-left 0.3s ease-out forwards;

  @keyframes fade-up {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

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

  @keyframes fade-right {
    from {
      opacity: 0;
      transform: translateX(-15px);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes fade-left {
    from {
      opacity: 0;
      transform: translateX(15px);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --font-devanagari: 'Noto Sans Devanagari', system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

html {
  scrollbar-gutter: stable;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, var(--font-devanagari), sans-serif;
}

/* Global Sidebar Layout Shell Context */
.layout-content-shifted {
  margin-left: 0;
  /* Default for mobile */
}

/* Sidebar width variables and state logic */
:root {
  --sidebar-width: 64px;
}

body.sidebar-expanded {
  --sidebar-width: 256px;
}

/* Sidebar collapsed state overrides */
aside:not(.sidebar-expanded-aside) .sidebar-expandable-label {
  width: 0 !important;
  min-width: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  display: none !important;
}

aside:not(.sidebar-expanded-aside) details>div {
  display: none !important;
}


aside:not(.sidebar-expanded-aside) .sidebar-footer-label {
  height: 0 !important;
  opacity: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

aside:not(.sidebar-expanded-aside) .sidebar-brand-row {
  justify-content: center !important;
}

aside:not(.sidebar-expanded-aside) .sidebar-back-icon {
  margin: 0 auto !important;
}

@media (min-width: 1024px) {
  .layout-content-shifted {
    margin-left: var(--sidebar-width);
    transition: margin-left 0.3s ease-in-out;
  }
}

/* Hide Edge/IE password reveal and clear buttons to avoid double icons with custom toggles */
input::-ms-reveal,
input::-ms-clear {
  display: none;
}

/* Shimmer animation for image loading skeletons */
@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* Ensure the drawer instance never overflows the viewport width */
.drawer-instance {
  max-width: 100vw !important;
}

/* Scroll lock when drawer/modal is open */
body.drawer-open {
  overflow: hidden !important;
}

@keyframes digit-pop {
  0% {
    opacity: 0;
    transform: scale(2.0);
  }

  30% {
    opacity: 1;
    transform: scale(2.0);
  }

  100% {
    opacity: 1;
    transform: scale(1.0);
  }
}

.animate-digit-pop {
  animation: digit-pop 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}


button {
  cursor: pointer;
}

@layer components {

  input:not(.tabular-nums):not([type="checkbox"]):not([type="radio"]),
  textarea,
  select {
    font-weight: 700 !important;
  }
}