Inventory/app/assets/app.css

@import "tailwindcss";
@plugin "daisyui";
@plugin "daisyui/theme" {
  name: "mytheme";
  default: true; /* set as default */
  prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */
  color-scheme: light; /* color of browser-provided UI */

  --color-base-100: oklch(98% 0.02 240);
  --color-base-200: oklch(95% 0.03 240);
  --color-base-300: oklch(92% 0.04 240);
  --color-base-content: oklch(20% 0.05 240);
  --color-primary: oklch(55% 0.3 240);
  --color-primary-content: oklch(98% 0.01 240);
  --color-secondary: oklch(70% 0.25 200);
  --color-secondary-content: oklch(98% 0.01 200);
  --color-accent: oklch(65% 0.25 160);
  --color-accent-content: oklch(98% 0.01 160);
  --color-neutral: oklch(50% 0.05 240);
  --color-neutral-content: oklch(98% 0.01 240);
  --color-info: oklch(70% 0.2 220);
  --color-info-content: oklch(98% 0.01 220);
  --color-success: oklch(65% 0.25 140);
  --color-success-content: oklch(98% 0.01 140);
  --color-warning: oklch(80% 0.25 80);
  --color-warning-content: oklch(20% 0.05 80);
  --color-error: oklch(65% 0.3 30);
  --color-error-content: oklch(98% 0.01 30);

  /* border radius */
  --radius-selector: 1rem;
  --radius-field: 0.25rem;
  --radius-box: 0.5rem;

  /* base sizes */
  --size-selector: 0.25rem;
  --size-field: 0.25rem;

  /* border size */
  --border: 1px;

  /* effects */
  --depth: 1;
  --noise: 0;
}

/* Styles pour l'accessibilité et les paramètres d'affichage */
:root {
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
}

/* Densité compacte */
.density-compact {
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 0.75rem;
  --spacing-lg: 1rem;
  --spacing-xl: 1.25rem;
}

/* Densité confortable (défaut) */
.density-comfortable {
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
}

/* Densité espacée */
.density-spacious {
  --spacing-xs: 0.75rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
}

/* Contraste élevé avec DaisyUI */
.contrast-high .btn {
  @apply border-2;
}

.contrast-high .input {
  @apply border-2;
}

.contrast-high .select {
  @apply border-2;
}

.contrast-high .textarea {
  @apply border-2;
}

.contrast-high .modal-box {
  @apply border-2 border-base-content;
}

/* Amélioration de l'accessibilité */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus visible pour l'accessibilité */
*:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Styles pour les boutons de paramètres */
.btn-circle {
  transition: all 0.2s ease-in-out;
}

.btn-circle:hover {
  transform: scale(1.05);
}

.btn-circle:active {
  transform: scale(0.95);
}

/* Animation pour le modal */
.modal {
  transition: opacity 0.3s ease-in-out;
  font-size: 100% !important; /* Force la taille normale pour le modal */
  transform: none !important; /* Empêche les transformations */
  scale: 1 !important; /* Force l'échelle à 1 */
}

.modal.modal-open {
  animation: modalFadeIn 0.3s ease-in-out;
}

/* S'assurer que le contenu du modal garde une taille normale */
.modal-box {
  font-size: 100% !important;
  transform: none !important;
  scale: 1 !important;
  width: auto !important;
  max-width: 500px !important;
}

.modal .form-control {
  font-size: 100% !important;
  transform: none !important;
}

.modal .btn {
  font-size: 100% !important;
  transform: none !important;
  padding: 0.5rem 1rem !important;
  height: auto !important;
  min-height: 2.5rem !important;
}

.modal .input {
  font-size: 100% !important;
  transform: none !important;
  height: auto !important;
  min-height: 2.5rem !important;
}

.modal .select {
  font-size: 100% !important;
  transform: none !important;
  height: auto !important;
  min-height: 2.5rem !important;
}

.modal .textarea {
  font-size: 100% !important;
  transform: none !important;
  min-height: 4rem !important;
}

.modal .range {
  font-size: 100% !important;
  transform: none !important;
  height: auto !important;
  min-height: 1.5rem !important;
}

.modal .label {
  font-size: 100% !important;
  transform: none !important;
}

.modal .label-text {
  font-size: 100% !important;
  transform: none !important;
}

.modal .label-text-alt {
  font-size: 100% !important;
  transform: none !important;
}

.modal .checkbox {
  font-size: 100% !important;
  transform: none !important;
  width: 1rem !important;
  height: 1rem !important;
}

.modal .text-xs {
  font-size: 0.75rem !important;
  transform: none !important;
}

.modal .text-sm {
  font-size: 0.875rem !important;
  transform: none !important;
}

.modal .text-lg {
  font-size: 1.125rem !important;
  transform: none !important;
}

.modal .font-bold {
  font-weight: 700 !important;
  transform: none !important;
}

.modal .font-medium {
  font-weight: 500 !important;
  transform: none !important;
}

/* Empêcher les héritages de taille */
.modal * {
  font-size: inherit !important;
  transform: none !important;
  scale: 1 !important;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Styles pour les contrôles de zoom */
.range {
  transition: all 0.2s ease-in-out;
}

.range::-webkit-slider-thumb {
  transition: all 0.2s ease-in-out;
}

.range::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

/* Amélioration de la lisibilité */
.text-sm {
  line-height: 1.5;
}

.text-xs {
  line-height: 1.4;
}

/* Espacement adaptatif */
.p-1 { padding: var(--spacing-xs); }
.p-2 { padding: var(--spacing-sm); }
.p-3 { padding: var(--spacing-md); }
.p-4 { padding: var(--spacing-lg); }
.p-5 { padding: var(--spacing-xl); }

.m-1 { margin: var(--spacing-xs); }
.m-2 { margin: var(--spacing-sm); }
.m-3 { margin: var(--spacing-md); }
.m-4 { margin: var(--spacing-lg); }
.m-5 { margin: var(--spacing-xl); }

.gap-1 { gap: var(--spacing-xs); }
.gap-2 { gap: var(--spacing-sm); }
.gap-3 { gap: var(--spacing-md); }
.gap-4 { gap: var(--spacing-lg); }
.gap-5 { gap: var(--spacing-xl); }