@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom Uppy Dashboard styles */
.uppy-Dashboard-inner {
  @apply bg-transparent border-none rounded-xl
    md:min-h-80 xl:max-h-96
    sm:min-h-72 md:max-h-80
    h-64
    !important;
}

/* Target the inner dropzone area */
.uppy-Dashboard-AddFiles {
  @apply m-0 transition-colors h-full ease-in-out delay-100 bg-zinc-300 dark:bg-zinc-900 rounded-xl border-2 border-dashed border-zinc-500 dark:border-zinc-700 !important;
}

.uppy-Dashboard--isAddFilesPanelVisible .uppy-Dashboard-inner .uppy-Dashboard-innerWrap .uppy-Dashboard-AddFilesPanel {
  @apply bg-zinc-800 bg-none !important;
}

.uppy-Dashboard--isAddFilesPanelVisible .uppy-DashboardContent-bar {
 @apply: border-b-0 !important;
}
.uppy-Dashboard-innerWrap {
  @apply rounded-xl m-0 !important;
}
.uppy-Dashboard-innerWrap .uppy-Dashboard-dropFilesHereHint {
  @apply transition-colors ease-in-out delay-100 bg-zinc-300/75 dark:bg-zinc-700 border-2 border-dashed rounded-xl border-blue-600/75 dark:border-blue-500 inset-0 text-zinc-700 dark:text-zinc-50 !important;
  background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 1v1C11.85 2 2 11.85 2 24s9.85 22 22 22 22-9.85 22-22S36.15 2 24 2V1zm0 0V0c13.254 0 24 10.746 24 24S37.254 48 24 48 0 37.254 0 24 10.746 0 24 0v1zm7.707 19.293a.999.999 0 1 1-1.414 1.414L25 16.414V34a1 1 0 1 1-2 0V16.414l-5.293 5.293a.999.999 0 1 1-1.414-1.414l7-7a.999.999 0 0 1 1.414 0l7 7z' fill='%233B82F6' fill-rule='nonzero'/%3E%3C/svg%3E") !important;
}

.uppy-Dashboard-innerWrap .uppy-StatusBar.is-waiting .uppy-StatusBar-actions, .uppy-Dashboard-innerWrap .uppy-DashboardContent-bar {
  @apply bg-zinc-800 !important;
}

.uppy-Dashboard-AddFiles-list {
  @apply flex-initial !important;
}

.uppy-Dashboard-filesInner {
  @apply flex flex-col md:flex-row !important;
}
.uppy-Dashboard-files {
  @apply bg-zinc-700 !important;
}
.uppy-Dashboard-browse {
  @apply text-zinc-900 dark:text-white underline !important;
}

.uppy-Dashboard-browse:hover, .uppy-Dashboard-browse:focus {
  @apply border-blue-600/75 !important;
}

.uppy-Dashboard-dropFilesTitle {
  @apply text-zinc-200 !important;
}

.uppy-Dashboard-Item {
  @apply bg-zinc-600 !important;
}

.uppy-Dashboard--singleFile .uppy-Dashboard-Item, .uppy-Dashboard-Item-previewInnerWrap {
  @apply rounded-lg !important;
}
.admin.toggle-track, .admin.user-dropdown {
  background-color: theme('colors.red.500') !important;
}
/* For dark theme */
.uppy-DashboardContent-addMore, .uppy-DashboardContent-back, .uppy-StatusBar.is-complete .uppy-StatusBar-statusIndicator, .uppy-StatusBar-actionBtn--done {
  /* Link color overrides */
  @apply text-blue-500 !important;
}
.uppy-Dashboard-AddFiles-title {
  @apply text-zinc-700 dark:text-white !important
}

.uppy-Dashboard-browse {
  @apply text-blue-700 dark:text-blue-600 !important;
}
.uppy-StatusBar.is-waiting .uppy-StatusBar-actionBtn--upload, .uppy-StatusBar-progress {
  @apply bg-blue-500 text-blue-950 hover:bg-blue-600 !important;
}

.uppy-Dashboard:not(.uppy-Dashboard--singleFile) .uppy-Dashboard-Item {
  @apply rounded-md md:rounded-lg p-1 md:p-2 !important;
} 

.uppy-Dashboard-Item-preview {
  @apply h-16 md:h-24 !important;
}

.uppy-Dashboard-Item {
  @apply h-auto !important;
}

/* Toggle switch styles */
.toggle-switch {
  @apply relative w-12 h-6 cursor-pointer select-none;
}

.toggle-track {
  @apply absolute inset-0 rounded-full transition-colors duration-100 ease-in-out shadow-inner;
  background-color: theme('colors.zinc.400');
}

.toggle-circle {
  @apply absolute w-5 h-5 bg-white rounded-full shadow-sm flex items-center justify-center transition-transform duration-100 ease-in-out;
  top: 2px;
  left: 2px;
  transform: translateX(0);
}

.toggle-on.toggle-circle {
  transform: translateX(24px);
}


/* Prevent text selection on toggle */
.toggle-switch, .toggle-switch * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


/* System Preference for Dark Mode */
@media (prefers-color-scheme: dark) {
  :root:not(.dark) {
    color-scheme: dark;
  }
}

/* Pagination Classes */
.pagy.nav {
  @apply flex justify-center items-center space-x-1 my-4;
}

.pagy.nav a,
.pagy.nav .current {
  @apply inline-block px-3 py-2 text-sm font-medium border rounded transition-colors duration-150;
  @apply text-zinc-800 bg-white border-zinc-300 hover:bg-zinc-50 hover:text-zinc-800;
  @apply dark:bg-zinc-800 dark:border-zinc-600 dark:text-zinc-300 dark:hover:bg-zinc-700 dark:hover:text-white;
}

.pagy.nav .current {
  @apply text-white bg-blue-600 border-blue-600 font-semibold;
  @apply dark:bg-blue-600 dark:border-blue-600 dark:text-white;
}

.pagy.nav a[aria-disabled="true"] {
  @apply text-zinc-400 bg-zinc-100 border-zinc-200 cursor-not-allowed opacity-50;
  @apply dark:bg-zinc-900 dark:border-zinc-700 dark:text-zinc-600;
}
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *


 */