@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

canvas {
    width: 100% !important;
    height: 100% !important;
}

.button-style {
  @apply px-3 py-1.5 rounded-lg transition text-xs md:text-sm cursor-pointer;
}

.button-pins {
  @apply p-1.5 rounded-full transition cursor-pointer;
}

.button-flex {
  @apply flex items-center gap-2;
}

.button-toggle-left-style {
  @apply px-3 py-1.5 rounded-l-lg transition text-xs md:text-sm;
}

.button-toggle-right-style {
  @apply px-3 py-1.5 rounded-r-lg transition text-xs md:text-sm;
}

.button-filter {
  @apply px-7 py-1 border border-gray-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-stone-500 focus:border-stone-500 cursor-pointer;
}

.button-add, .button-save, .button-validate {
  @apply bg-green-100 text-green-800 hover:bg-green-200;
}

.button-cancel, .button-return {
  @apply bg-stone-200 text-stone-800 hover:bg-stone-300;
}

.button-edit {
  @apply bg-amber-100 text-amber-800 hover:bg-amber-200;
}

.button-delete {
  @apply bg-red-100 text-red-800 hover:bg-red-200;
}

.button-view {
  @apply bg-blue-100 text-blue-800 hover:bg-blue-200;
}

.button-nav-primary {
  @apply bg-stone-800 text-stone-50 hover:bg-stone-600;
}

.button-nav-secondary {
  @apply bg-stone-300 text-stone-800 hover:bg-stone-400;
}

.button-logout {
  @apply text-red-500 hover:bg-red-200 hover:text-red-700;
}

.input-style {
  @apply block text-sm md:text-base px-3 py-2 bg-stone-100 border border-gray-300 placeholder:text-stone-400 text-stone-800 rounded-lg focus:outline-none focus:ring-1 focus:ring-stone-500 focus:border-stone-500;
}

.input-select-style {
  @apply text-sm md:text-base pl-3 pr-8 py-2 bg-stone-100 text-stone-800 rounded-lg focus:outline-none focus:ring-1 focus:ring-stone-500 focus:border-stone-500;
}

.input-file-style {
  @apply text-sm md:text-base border border-gray-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-stone-500 focus:border-stone-500;
}

.input-error {
  @apply ring-2 ring-red-500 bg-red-100;
}

.input-validate {
  @apply ring-2 ring-emerald-500 bg-emerald-100;
}

.input-error-message {
  @apply text-red-500 text-sm md:text-base;
}

.label-style {
  @apply text-sm block font-medium mb-1 text-stone-700 dark:text-stone-300;
}

/* Ajoute ceci à ton fichier app.css */
.perspective {
  perspective: 1000px;
}

.flipped > div {
  transform: rotateY(180deg);
}