/* ============================================
   DJOLOFUI - COMPONENTS.CSS
   Styles des composants
   ============================================ */

/* =============================================
   SELECT COMPONENT
   ============================================= */

.djui-select {
  position: relative;
  width: 100%;
  font-family: var(--djui-font-sans);
}

/* Trigger button */
.djui-select__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--djui-spacing-sm);
  padding: 0.625rem 1rem;
  background: var(--djui-background);
  color: var(--djui-foreground);
  border: 1px solid var(--djui-input);
  border-radius: var(--djui-radius-md);
  font-size: var(--djui-text-sm);
  cursor: pointer;
  transition: all var(--djui-transition-fast);
  outline: none;
}

.djui-select__trigger:hover {
  background: var(--djui-accent);
  border-color: var(--djui-ring);
}

.djui-select__trigger:focus,
.djui-select__trigger:focus-visible {
  border-color: var(--djui-ring);
  box-shadow: 0 0 0 3px rgba(163, 163, 163, 0.1);
}

.djui-select__trigger[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Label du trigger */
.djui-select__label {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.djui-select__label--placeholder {
  color: var(--djui-muted-foreground);
}

/* Icône du trigger */
.djui-select__icon {
  width: 1rem;
  height: 1rem;
  color: var(--djui-muted-foreground);
  transition: transform var(--djui-transition-fast);
  flex-shrink: 0;
}

.djui-select__trigger[aria-expanded="true"] .djui-select__icon {
  transform: rotate(180deg);
}

/* Dropdown */
.djui-select__dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  width: 100%;
  background: var(--djui-popover);
  border: 1px solid var(--djui-border);
  border-radius: var(--djui-radius-md);
  box-shadow: var(--djui-shadow-lg);
  max-height: 15rem;
  overflow-y: auto;
  z-index: var(--djui-z-dropdown);
}

/* Options */
.djui-select__option {
  padding: 0.625rem 1rem;
  font-size: var(--djui-text-sm);
  color: var(--djui-popover-foreground);
  cursor: pointer;
  transition: background var(--djui-transition-fast);
  outline: none;
}

.djui-select__option:hover,
.djui-select__option--highlighted {
  background: var(--djui-accent);
  color: var(--djui-accent-foreground);
}

.djui-select__option--selected {
  background: transparent;  /* Au lieu du fond noir */
  color: var(--djui-foreground);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Ajoutez le checkmark via ::after */
.djui-select__option--selected::after {
  content: "✓";
  margin-left: auto;
  font-weight: bold;
  color: var(--djui-primary);
}

.djui-select__option[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Scrollbar personnalisée */
.djui-select__dropdown::-webkit-scrollbar {
  width: 0.5rem;
}

.djui-select__dropdown::-webkit-scrollbar-track {
  background: transparent;
}

.djui-select__dropdown::-webkit-scrollbar-thumb {
  background: var(--djui-muted);
  border-radius: var(--djui-radius-full);
}

.djui-select__dropdown::-webkit-scrollbar-thumb:hover {
  background: var(--djui-muted-foreground);
}

/* ===== VARIANTES DE TAILLE ===== */
.djui-select--sm .djui-select__trigger {
  padding: 0.375rem 0.75rem;
  font-size: var(--djui-text-xs);
}

.djui-select--sm .djui-select__option {
  padding: 0.375rem 0.75rem;
  font-size: var(--djui-text-xs);
}

.djui-select--lg .djui-select__trigger {
  padding: 0.75rem 1.25rem;
  font-size: var(--djui-text-base);
}

.djui-select--lg .djui-select__option {
  padding: 0.75rem 1.25rem;
  font-size: var(--djui-text-base);
}

/* ===== ÉTAT D'ERREUR ===== */
.djui-select--error .djui-select__trigger {
  border-color: var(--djui-destructive);
}

.djui-select--error .djui-select__trigger:focus,
.djui-select--error .djui-select__trigger:focus-visible {
  border-color: var(--djui-destructive);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* ===== AVEC RECHERCHE ===== */
.djui-select__search {
  padding: var(--djui-spacing-sm);
  border-bottom: 1px solid var(--djui-border);
}

.djui-select__search-input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--djui-input);
  border-radius: var(--djui-radius-sm);
  font-size: var(--djui-text-sm);
  font-family: var(--djui-font-sans);
  outline: none;
  background: var(--djui-background);
  color: var(--djui-foreground);
}

.djui-select__search-input:focus,
.djui-select__search-input:focus-visible {
  border-color: var(--djui-ring);
  box-shadow: 0 0 0 3px rgba(163, 163, 163, 0.1);
}

.djui-select__no-results {
  padding: 1rem;
  text-align: center;
  font-size: var(--djui-text-sm);
  color: var(--djui-muted-foreground);
}


/* =============================================
   BUTTON COMPONENT
   ============================================= */

.djui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--djui-spacing-sm);
  white-space: nowrap;
  font-family: var(--djui-font-sans);
  font-size: var(--djui-text-sm);
  font-weight: var(--djui-font-medium);
  border-radius: var(--djui-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--djui-transition-fast);
  outline: none;
  text-decoration: none;
  user-select: none;
}

.djui-btn:focus-visible {
  outline: 2px solid var(--djui-ring);
  outline-offset: 2px;
}

.djui-btn:disabled,
.djui-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ===== VARIANTES ===== */

/* Default (Primary) */
.djui-btn-primary {
  background: var(--djui-primary);
  color: var(--djui-primary-foreground);
}

.djui-btn-primary:hover {
  background: var(--djui-primary);
  opacity: 0.9;
}

.djui-btn-primary:active {
  opacity: 0.95;
}

/* Secondary */
.djui-btn-secondary {
  background: var(--djui-secondary);
  color: var(--djui-secondary-foreground);
}

.djui-btn-secondary:hover {
  background: var(--djui-secondary);
  opacity: 0.8;
}

/* Destructive */
.djui-btn-destructive {
  background: var(--djui-destructive);
  color: var(--djui-destructive-foreground);
}

.djui-btn-destructive:hover {
  background: var(--djui-destructive);
  opacity: 0.9;
}

/* Outline */
.djui-btn-outline {
  background: transparent;
  border-color: var(--djui-input);
  color: var(--djui-foreground);
}

.djui-btn-outline:hover {
  background: var(--djui-accent);
  color: var(--djui-accent-foreground);
}

/* Ghost */
.djui-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--djui-foreground);
}

.djui-btn-ghost:hover {
  background: var(--djui-accent);
  color: var(--djui-accent-foreground);
}

/* Link */
.djui-btn-link {
  background: transparent;
  border-color: transparent;
  color: var(--djui-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.djui-btn-link:hover {
  text-decoration: none;
}

/* ===== TAILLES ===== */

.djui-btn-sm {
  height: 2rem;
  padding: 0 0.75rem;
  font-size: var(--djui-text-xs);
}

.djui-btn-md {
  height: 2.5rem;
  padding: 0 1rem;
  font-size: var(--djui-text-sm);
}

.djui-btn-lg {
  height: 3rem;
  padding: 0 2rem;
  font-size: var(--djui-text-base);
}

/* ===== ICÔNES ===== */

.djui-btn-icon {
  height: 2.5rem;
  width: 2.5rem;
  padding: 0;
}

.djui-btn-icon.djui-btn-sm {
  height: 2rem;
  width: 2rem;
}

.djui-btn-icon.djui-btn-lg {
  height: 3rem;
  width: 3rem;
}

/* ===== LOADING STATE ===== */

.djui-btn-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.djui-btn-loading::after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  top: 50%;
  left: 50%;
  margin-left: -0.5rem;
  margin-top: -0.5rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  animation: djui-spin 0.6s linear infinite;
  color: var(--djui-primary-foreground);
}

@keyframes djui-spin {
  to {
    transform: rotate(360deg);
  }
}


/* =============================================
   INPUT COMPONENT
   ============================================= */

/* Container */
.djui-input-wrapper {
  width: 100%;
}

.djui-input-group {
  display: flex;
  flex-direction: column;
  gap: var(--djui-spacing-sm);
}

/* Label */
.djui-label {
  display: block;
  font-size: var(--djui-text-sm);
  font-weight: var(--djui-font-medium);
  color: var(--djui-foreground);
  margin-bottom: var(--djui-spacing-xs);
}

.djui-label-required::after {
  content: " *";
  color: var(--djui-destructive);
}

/* Input de base */
.djui-input {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.75rem;
  font-size: var(--djui-text-sm);
  font-family: var(--djui-font-sans);
  color: var(--djui-foreground);
  background: var(--djui-background);
  border: 1px solid var(--djui-input);
  border-radius: var(--djui-radius-md);
  outline: none;
  transition: all var(--djui-transition-fast);
}

.djui-input::placeholder {
  color: var(--djui-muted-foreground);
}

.djui-input:hover {
  border-color: var(--djui-ring);
}

.djui-input:focus,
.djui-input:focus-visible {
  border-color: var(--djui-ring);
  box-shadow: 0 0 0 3px rgba(163, 163, 163, 0.1);
}

.djui-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--djui-muted);
}

/* État d'erreur */
.djui-input-error {
  border-color: var(--djui-destructive);
}

.djui-input-error:focus,
.djui-input-error:focus-visible {
  border-color: var(--djui-destructive);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* État de succès */
.djui-input-success {
  border-color: var(--djui-success);
}

.djui-input-success:focus,
.djui-input-success:focus-visible {
  border-color: var(--djui-success);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

/* Message d'aide/erreur */
.djui-input-message {
  display: flex;
  align-items: center;
  gap: var(--djui-spacing-xs);
  font-size: var(--djui-text-xs);
  margin-top: var(--djui-spacing-xs);
}

.djui-input-message-error {
  color: var(--djui-destructive);
}

.djui-input-message-success {
  color: var(--djui-success);
}

.djui-input-message-info {
  color: var(--djui-muted-foreground);
}

/* Textarea */
.djui-textarea {
  min-height: 5rem;
  padding: 0.75rem;
  resize: vertical;
}

/* Variantes de taille */
.djui-input-sm {
  height: 2rem;
  padding: 0 0.5rem;
  font-size: var(--djui-text-xs);
}

.djui-input-lg {
  height: 3rem;
  padding: 0 1rem;
  font-size: var(--djui-text-base);
}

/* Input avec icône */
.djui-input-with-icon {
  position: relative;
}

.djui-input-with-icon .djui-input {
  padding-left: 2.5rem;
}

.djui-input-with-icon .djui-input-icon-left {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--djui-muted-foreground);
  pointer-events: none;
}

.djui-input-with-icon .djui-input-icon-right {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--djui-muted-foreground);
  cursor: pointer;
}

.djui-input-with-icon.djui-input-with-icon-right .djui-input {
  padding-right: 2.5rem;
}

/* File input custom */
.djui-input-file {
  cursor: pointer;
}

.djui-input-file::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.375rem 0.75rem;
  background: var(--djui-secondary);
  color: var(--djui-secondary-foreground);
  border: none;
  border-radius: var(--djui-radius-sm);
  font-size: var(--djui-text-xs);
  font-weight: var(--djui-font-medium);
  cursor: pointer;
  transition: all var(--djui-transition-fast);
}

.djui-input-file::file-selector-button:hover {
  opacity: 0.8;
}


/* =============================================
   MODAL COMPONENT
   ============================================= */

/* Container principal */
.djui-modal {
  position: fixed;
  inset: 0;
  z-index: var(--djui-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--djui-spacing-md);
  overflow-y: auto;
  pointer-events: auto;
}

/* Overlay avec ::before */
.djui-modal::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
  animation: djui-fade-in 0.2s ease-out;
}

/* Contenu du modal */
.djui-modal-content {
  position: relative;
  background: var(--djui-card);
  border-radius: var(--djui-radius-lg);
  box-shadow: var(--djui-shadow-xl);
  width: 100%;
  max-width: 32rem;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: djui-scale-in 0.2s ease-out;
  pointer-events: auto;
}

/* Header */
.djui-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--djui-spacing-lg);
  border-bottom: 1px solid var(--djui-border);
}

.djui-modal-title {
  font-size: var(--djui-text-lg);
  font-weight: var(--djui-font-semibold);
  color: var(--djui-card-foreground);
  margin: 0;
}

.djui-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--djui-radius-sm);
  background: transparent;
  border: none;
  color: var(--djui-muted-foreground);
  cursor: pointer;
  transition: all var(--djui-transition-fast);
}

.djui-modal-close:hover {
  background: var(--djui-accent);
  color: var(--djui-accent-foreground);
}

.djui-modal-close:focus-visible {
  outline: 2px solid var(--djui-ring);
  outline-offset: 2px;
}

/* Body */
.djui-modal-body {
  padding: var(--djui-spacing-lg);
  flex: 1;
  overflow-y: auto;
  color: var(--djui-card-foreground);
}

/* Footer */
.djui-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--djui-spacing-sm);
  padding: var(--djui-spacing-lg);
  border-top: 1px solid var(--djui-border);
}

/* Variantes de taille */
.djui-modal-sm .djui-modal-content {
  max-width: 24rem;
}

.djui-modal-lg .djui-modal-content {
  max-width: 48rem;
}

.djui-modal-xl .djui-modal-content {
  max-width: 64rem;
}

.djui-modal-full .djui-modal-content {
  max-width: 95vw;
  max-height: 95vh;
}

/* Modal sans header */
.djui-modal-content.djui-modal-no-header .djui-modal-body {
  padding-top: var(--djui-spacing-xl);
}

/* Modal sans footer */
.djui-modal-content.djui-modal-no-footer .djui-modal-body {
  padding-bottom: var(--djui-spacing-xl);
}

/* Animations */
@keyframes djui-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes djui-scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Scrollbar dans le body */
.djui-modal-body::-webkit-scrollbar {
  width: 0.5rem;
}

.djui-modal-body::-webkit-scrollbar-track {
  background: transparent;
}

.djui-modal-body::-webkit-scrollbar-thumb {
  background: var(--djui-muted);
  border-radius: var(--djui-radius-full);
}

.djui-modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--djui-muted-foreground);
}

/* Responsive */
@media (max-width: 640px) {
  .djui-modal-content {
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    max-height: 100vh;
  }
  
  .djui-modal {
    padding: 0;
  }
}

/* =============================================
   ACCORDION COMPONENT
   ============================================= */

.djui-accordion {
  width: 100%;
  border: 1px solid var(--djui-border);
  border-radius: var(--djui-radius-lg);
  overflow: hidden;
}

/* Item */
.djui-accordion-item {
  border-bottom: 1px solid var(--djui-border);
}

.djui-accordion-item:last-child {
  border-bottom: none;
}

/* Trigger (button) */
.djui-accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--djui-spacing-md);
  background: transparent;
  border: none;
  font-size: var(--djui-text-sm);
  font-weight: var(--djui-font-medium);
  color: var(--djui-foreground);
  text-align: left;
  cursor: pointer;
  transition: all var(--djui-transition-fast);
}

.djui-accordion-trigger:hover {
  background: var(--djui-accent);
}

.djui-accordion-trigger:focus-visible {
  outline: 2px solid var(--djui-ring);
  outline-offset: -2px;
}

/* Icône */
.djui-accordion-trigger svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--djui-muted-foreground);
  transition: transform var(--djui-transition-fast);
  flex-shrink: 0;
}

.djui-accordion-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Content */
.djui-accordion-content {
  padding: 0 var(--djui-spacing-md) var(--djui-spacing-md);
  font-size: var(--djui-text-sm);
  color: var(--djui-muted-foreground);
  line-height: 1.6;
}

/* Variante sans bordure */
.djui-accordion-borderless {
  border: none;
}

.djui-accordion-borderless .djui-accordion-item {
  border-bottom: 1px solid var(--djui-border);
}

/* Variante compacte */
.djui-accordion-compact .djui-accordion-trigger {
  padding: var(--djui-spacing-sm) var(--djui-spacing-md);
}

.djui-accordion-compact .djui-accordion-content {
  padding: 0 var(--djui-spacing-md) var(--djui-spacing-sm);
}

/* =============================================
   TABS COMPONENT
   ============================================= */

.djui-tabs {
  width: 100%;
}

/* Liste des onglets */
.djui-tabs-list {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--djui-border);
  gap: var(--djui-spacing-sm);
}

/* Trigger (bouton d'onglet) */
.djui-tabs-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--djui-spacing-xs);
  padding: var(--djui-spacing-sm) var(--djui-spacing-md);
  background: transparent;
  border: none;
  font-size: var(--djui-text-sm);
  font-weight: var(--djui-font-medium);
  color: var(--djui-muted-foreground);
  cursor: pointer;
  transition: all var(--djui-transition-fast);
  white-space: nowrap;
}

.djui-tabs-trigger:hover {
  color: var(--djui-foreground);
}

.djui-tabs-trigger:focus-visible {
  outline: 2px solid var(--djui-ring);
  outline-offset: 2px;
  border-radius: var(--djui-radius-sm);
}

/* Onglet actif */
.djui-tabs-trigger[aria-selected="true"] {
  color: var(--djui-foreground);
}

/* Indicateur de l'onglet actif */
.djui-tabs-trigger[aria-selected="true"]::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--djui-primary);
  border-radius: 2px 2px 0 0;
}

/* Icône dans l'onglet */
.djui-tabs-trigger svg {
  width: 1rem;
  height: 1rem;
}

/* Contenu des onglets */
.djui-tabs-content {
  padding: var(--djui-spacing-lg) 0;
  outline: none;
}

/* Variante pills (onglets en forme de pilules) */
.djui-tabs-pills .djui-tabs-list {
  border-bottom: none;
  padding: var(--djui-spacing-xs);
  background: var(--djui-muted);
  border-radius: var(--djui-radius-md);
  gap: var(--djui-spacing-xs);
}

.djui-tabs-pills .djui-tabs-trigger {
  border-radius: var(--djui-radius-sm);
}

.djui-tabs-pills .djui-tabs-trigger[aria-selected="true"] {
  background: var(--djui-background);
  box-shadow: var(--djui-shadow-sm);
}

.djui-tabs-pills .djui-tabs-trigger[aria-selected="true"]::after {
  display: none;
}

/* Variante boxed */
.djui-tabs-boxed .djui-tabs-list {
  border-bottom: none;
  gap: var(--djui-spacing-xs);
}

.djui-tabs-boxed .djui-tabs-trigger {
  border: 1px solid var(--djui-border);
  border-bottom: none;
  border-radius: var(--djui-radius-md) var(--djui-radius-md) 0 0;
  background: var(--djui-muted);
}

.djui-tabs-boxed .djui-tabs-trigger[aria-selected="true"] {
  background: var(--djui-background);
  border-bottom: 1px solid var(--djui-background);
  margin-bottom: -1px;
}

.djui-tabs-boxed .djui-tabs-trigger[aria-selected="true"]::after {
  display: none;
}

.djui-tabs-boxed .djui-tabs-content {
  border: 1px solid var(--djui-border);
  border-radius: 0 var(--djui-radius-md) var(--djui-radius-md) var(--djui-radius-md);
  padding: var(--djui-spacing-lg);
}

/* Variante vertical */
.djui-tabs-vertical {
  display: flex;
  gap: var(--djui-spacing-lg);
}

.djui-tabs-vertical .djui-tabs-list {
  flex-direction: column;
  border-bottom: none;
  border-right: 1px solid var(--djui-border);
  gap: var(--djui-spacing-xs);
  min-width: 200px;
}

.djui-tabs-vertical .djui-tabs-trigger {
  justify-content: flex-start;
  width: 100%;
}

.djui-tabs-vertical .djui-tabs-trigger[aria-selected="true"]::after {
  left: auto;
  right: -1px;
  top: 0;
  bottom: 0;
  width: 2px;
  height: auto;
  border-radius: 0 2px 2px 0;
}

.djui-tabs-vertical .djui-tabs-content {
  flex: 1;
  padding: 0;
}

/* Badge sur onglet */
.djui-tabs-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  font-size: 0.625rem;
  font-weight: var(--djui-font-semibold);
  background: var(--djui-primary);
  color: var(--djui-primary-foreground);
  border-radius: var(--djui-radius-full);
}

/* Responsive */
@media (max-width: 640px) {
  .djui-tabs-list {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .djui-tabs-list::-webkit-scrollbar {
    display: none;
  }
}

/* =============================================
   CHECKBOX & RADIO COMPONENT
   ============================================= */

/* Container */
.djui-checkbox-wrapper,
.djui-radio-wrapper {
  display: inline-flex;
  align-items: center;
  gap: var(--djui-spacing-sm);
  cursor: pointer;
  user-select: none;
}

/* Input natif caché */
.djui-checkbox,
.djui-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Custom checkbox/radio */
.djui-checkbox-custom,
.djui-radio-custom {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--djui-input);
  background: var(--djui-background);
  transition: all var(--djui-transition-fast);
  flex-shrink: 0;
}

.djui-checkbox-custom {
  border-radius: var(--djui-radius-sm);
}

.djui-radio-custom {
  border-radius: 50%;
}

/* Hover */
.djui-checkbox-wrapper:hover .djui-checkbox-custom,
.djui-radio-wrapper:hover .djui-radio-custom {
  border-color: var(--djui-ring);
}

/* Focus */
.djui-checkbox:focus-visible + .djui-checkbox-custom,
.djui-radio:focus-visible + .djui-radio-custom {
  outline: 2px solid var(--djui-ring);
  outline-offset: 2px;
}

/* Checked state */
.djui-checkbox:checked + .djui-checkbox-custom,
.djui-radio:checked + .djui-radio-custom {
  background: var(--djui-primary);
  border-color: var(--djui-primary);
}

/* Checkmark icon */
.djui-checkbox:checked + .djui-checkbox-custom::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 0.375rem;
  height: 0.625rem;
  border: solid var(--djui-primary-foreground);
  border-width: 0 2px 2px 0;
}

/* Radio dot */
.djui-radio:checked + .djui-radio-custom::after {
  content: "";
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--djui-primary-foreground);
  border-radius: 50%;
}

/* Disabled state */
.djui-checkbox:disabled + .djui-checkbox-custom,
.djui-radio:disabled + .djui-radio-custom {
  opacity: 0.5;
  cursor: not-allowed;
}

.djui-checkbox:disabled ~ .djui-checkbox-label,
.djui-radio:disabled ~ .djui-radio-label {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Label */
.djui-checkbox-label,
.djui-radio-label {
  font-size: var(--djui-text-sm);
  color: var(--djui-foreground);
}

/* Description */
.djui-checkbox-description,
.djui-radio-description {
  display: block;
  font-size: var(--djui-text-xs);
  color: var(--djui-muted-foreground);
  margin-top: var(--djui-spacing-xs);
}

/* Variantes de taille */
.djui-checkbox-sm .djui-checkbox-custom,
.djui-radio-sm .djui-radio-custom {
  width: 1rem;
  height: 1rem;
}

.djui-checkbox-sm .djui-checkbox-label,
.djui-radio-sm .djui-radio-label {
  font-size: var(--djui-text-xs);
}

.djui-checkbox-lg .djui-checkbox-custom,
.djui-radio-lg .djui-radio-custom {
  width: 1.5rem;
  height: 1.5rem;
}

.djui-checkbox-lg .djui-checkbox-label,
.djui-radio-lg .djui-radio-label {
  font-size: var(--djui-text-base);
}

/* Groupe de checkboxes/radios */
.djui-checkbox-group,
.djui-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--djui-spacing-sm);
}

.djui-checkbox-group-label,
.djui-radio-group-label {
  font-size: var(--djui-text-sm);
  font-weight: var(--djui-font-medium);
  color: var(--djui-foreground);
  margin-bottom: var(--djui-spacing-xs);
}

/* Horizontal layout */
.djui-checkbox-group-horizontal,
.djui-radio-group-horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--djui-spacing-md);
}

/* Card style */
.djui-checkbox-card,
.djui-radio-card {
  display: flex;
  align-items: flex-start;
  gap: var(--djui-spacing-md);
  padding: var(--djui-spacing-md);
  border: 1px solid var(--djui-border);
  border-radius: var(--djui-radius-md);
  transition: all var(--djui-transition-fast);
}

.djui-checkbox-card:hover,
.djui-radio-card:hover {
  background: var(--djui-accent);
  border-color: var(--djui-ring);
}

.djui-checkbox:checked ~ .djui-checkbox-card,
.djui-radio:checked ~ .djui-radio-card {
  border-color: var(--djui-primary);
  background: var(--djui-primary);
  background: rgba(14, 165, 233, 0.05);
}

/* Indeterminate state (checkbox uniquement) */
.djui-checkbox:indeterminate + .djui-checkbox-custom {
  background: var(--djui-primary);
  border-color: var(--djui-primary);
}

.djui-checkbox:indeterminate + .djui-checkbox-custom::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.625rem;
  height: 2px;
  background: var(--djui-primary-foreground);
  border: none;
}

/* =============================================
   TOAST COMPONENT
   ============================================= */

/* Container principal */
.djui-toast-container {
  position: fixed;
  z-index: calc(var(--djui-z-tooltip) + 10);
  display: flex;
  flex-direction: column;
  gap: var(--djui-spacing-sm);
  pointer-events: none;
}

/* Positions */
.djui-toast-container-top-right {
  top: var(--djui-spacing-lg);
  right: var(--djui-spacing-lg);
  align-items: flex-end;
}

.djui-toast-container-top-left {
  top: var(--djui-spacing-lg);
  left: var(--djui-spacing-lg);
  align-items: flex-start;
}

.djui-toast-container-top-center {
  top: var(--djui-spacing-lg);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}

.djui-toast-container-bottom-right {
  bottom: var(--djui-spacing-lg);
  right: var(--djui-spacing-lg);
  align-items: flex-end;
}

.djui-toast-container-bottom-left {
  bottom: var(--djui-spacing-lg);
  left: var(--djui-spacing-lg);
  align-items: flex-start;
}

.djui-toast-container-bottom-center {
  bottom: var(--djui-spacing-lg);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}

/* Toast */
.djui-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--djui-spacing-sm);
  min-width: 300px;
  max-width: 400px;
  padding: var(--djui-spacing-md);
  background: var(--djui-card);
  border: 1px solid var(--djui-border);
  border-radius: var(--djui-radius-lg);
  box-shadow: var(--djui-shadow-lg);
  pointer-events: auto;
  animation: djui-toast-slide-in 0.3s ease-out;
}

/* Icône */
.djui-toast-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 2px;
}

/* Contenu */
.djui-toast-content {
  flex: 1;
  min-width: 0;
}

.djui-toast-title {
  font-size: var(--djui-text-sm);
  font-weight: var(--djui-font-semibold);
  color: var(--djui-card-foreground);
  margin-bottom: var(--djui-spacing-xs);
}

.djui-toast-description {
  font-size: var(--djui-text-sm);
  color: var(--djui-muted-foreground);
  line-height: 1.5;
}

/* Bouton de fermeture */
.djui-toast-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  background: transparent;
  border: none;
  border-radius: var(--djui-radius-sm);
  color: var(--djui-muted-foreground);
  cursor: pointer;
  transition: all var(--djui-transition-fast);
}

.djui-toast-close:hover {
  background: var(--djui-accent);
  color: var(--djui-accent-foreground);
}

.djui-toast-close svg {
  width: 1rem;
  height: 1rem;
}

/* Variantes */
.djui-toast-default {
  border-left: 3px solid var(--djui-primary);
}

.djui-toast-default .djui-toast-icon {
  color: var(--djui-primary);
}

.djui-toast-success {
  border-left: 3px solid var(--djui-success);
}

.djui-toast-success .djui-toast-icon {
  color: var(--djui-success);
}

.djui-toast-error {
  border-left: 3px solid var(--djui-destructive);
}

.djui-toast-error .djui-toast-icon {
  color: var(--djui-destructive);
}

.djui-toast-warning {
  border-left: 3px solid var(--djui-warning);
}

.djui-toast-warning .djui-toast-icon {
  color: var(--djui-warning);
}

.djui-toast-info {
  border-left: 3px solid var(--djui-info);
}

.djui-toast-info .djui-toast-icon {
  color: var(--djui-info);
}

/* Actions */
.djui-toast-actions {
  display: flex;
  gap: var(--djui-spacing-xs);
  margin-top: var(--djui-spacing-sm);
}

.djui-toast-action {
  padding: 0.375rem 0.75rem;
  font-size: var(--djui-text-xs);
  font-weight: var(--djui-font-medium);
  background: transparent;
  border: 1px solid var(--djui-border);
  border-radius: var(--djui-radius-sm);
  color: var(--djui-foreground);
  cursor: pointer;
  transition: all var(--djui-transition-fast);
}

.djui-toast-action:hover {
  background: var(--djui-accent);
}

/* Animations */
@keyframes djui-toast-slide-in {
  from {
    opacity: 0;
    transform: translateY(-1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes djui-toast-slide-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-1rem);
  }
}

.djui-toast-removing {
  animation: djui-toast-slide-out 0.2s ease-in forwards;
}

/* Barre de progression */
.djui-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--djui-primary);
  border-radius: 0 0 0 var(--djui-radius-lg);
  transform-origin: left;
  animation: djui-toast-progress 5s linear forwards;
}

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

/* Responsive */
@media (max-width: 640px) {
  .djui-toast-container {
    left: var(--djui-spacing-md) !important;
    right: var(--djui-spacing-md) !important;
    transform: none !important;
  }
  
  .djui-toast {
    min-width: auto;
    max-width: 100%;
  }
}

/* =============================================
   CARD COMPONENT
   ============================================= */

.djui-card {
  background: var(--djui-card);
  border: 1px solid var(--djui-border);
  border-radius: var(--djui-radius-lg);
  overflow: hidden;
  transition: all var(--djui-transition-fast);
}

/* Header */
.djui-card-header {
  padding: var(--djui-spacing-lg);
  border-bottom: 1px solid var(--djui-border);
}

.djui-card-title {
  font-size: var(--djui-text-lg);
  font-weight: var(--djui-font-semibold);
  color: var(--djui-card-foreground);
  margin: 0;
}

.djui-card-description {
  font-size: var(--djui-text-sm);
  color: var(--djui-muted-foreground);
  margin-top: var(--djui-spacing-xs);
}

/* Content/Body */
.djui-card-content {
  padding: var(--djui-spacing-lg);
}

/* Footer */
.djui-card-footer {
  padding: var(--djui-spacing-lg);
  border-top: 1px solid var(--djui-border);
  background: var(--djui-muted);
}

/* Card sans padding dans le body */
.djui-card-no-padding .djui-card-content {
  padding: 0;
}

/* Variante hoverable */
.djui-card-hoverable {
  cursor: pointer;
}

.djui-card-hoverable:hover {
  border-color: var(--djui-ring);
  box-shadow: var(--djui-shadow-md);
  transform: translateY(-2px);
}

/* Variante interactive (lien) */
.djui-card-interactive {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
}

.djui-card-interactive:hover {
  border-color: var(--djui-primary);
  box-shadow: var(--djui-shadow-lg);
}

/* Card avec image */
.djui-card-image {
  width: 100%;
  height: auto;
  display: block;
}

.djui-card-image-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.djui-card-image-top {
  border-radius: var(--djui-radius-lg) var(--djui-radius-lg) 0 0;
}

/* Badge sur card */
.djui-card-badge {
  position: absolute;
  top: var(--djui-spacing-sm);
  right: var(--djui-spacing-sm);
  padding: 0.25rem 0.5rem;
  font-size: var(--djui-text-xs);
  font-weight: var(--djui-font-semibold);
  background: var(--djui-primary);
  color: var(--djui-primary-foreground);
  border-radius: var(--djui-radius-md);
}

/* Card avec ombre */
.djui-card-shadow {
  box-shadow: var(--djui-shadow-md);
}

.djui-card-shadow:hover {
  box-shadow: var(--djui-shadow-lg);
}

/* Card sans bordure */
.djui-card-borderless {
  border: none;
}

/* Card compact */
.djui-card-compact .djui-card-header {
  padding: var(--djui-spacing-md);
}

.djui-card-compact .djui-card-content {
  padding: var(--djui-spacing-md);
}

.djui-card-compact .djui-card-footer {
  padding: var(--djui-spacing-md);
}

/* Card avec gradient */
.djui-card-gradient {
  background: linear-gradient(135deg, var(--djui-primary) 0%, var(--djui-primary-700, #0369a1) 100%);
  color: var(--djui-primary-foreground);
  border: none;
}

.djui-card-gradient .djui-card-title,
.djui-card-gradient .djui-card-description {
  color: var(--djui-primary-foreground);
}

.djui-card-gradient .djui-card-header,
.djui-card-gradient .djui-card-footer {
  border-color: rgba(255, 255, 255, 0.2);
}

/* Actions dans le header */
.djui-card-header-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.djui-card-header-actions .djui-card-title {
  margin: 0;
}

.djui-card-actions {
  display: flex;
  gap: var(--djui-spacing-xs);
}

/* Stats dans une card */
.djui-card-stat {
  text-align: center;
  padding: var(--djui-spacing-lg);
}

.djui-card-stat-value {
  font-size: var(--djui-text-3xl);
  font-weight: var(--djui-font-bold);
  color: var(--djui-card-foreground);
}

.djui-card-stat-label {
  font-size: var(--djui-text-sm);
  color: var(--djui-muted-foreground);
  margin-top: var(--djui-spacing-xs);
}

.djui-card-stat-change {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--djui-text-xs);
  font-weight: var(--djui-font-medium);
  margin-top: var(--djui-spacing-xs);
}

.djui-card-stat-change-positive {
  color: var(--djui-success);
}

.djui-card-stat-change-negative {
  color: var(--djui-destructive);
}

/* Liste dans une card */
.djui-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.djui-card-list-item {
  padding: var(--djui-spacing-md);
  border-bottom: 1px solid var(--djui-border);
  transition: background var(--djui-transition-fast);
}

.djui-card-list-item:last-child {
  border-bottom: none;
}

.djui-card-list-item:hover {
  background: var(--djui-accent);
}

/* Grid de cards */
.djui-card-grid {
  display: grid;
  gap: var(--djui-spacing-lg);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* Responsive */
@media (max-width: 640px) {
  .djui-card-grid {
    grid-template-columns: 1fr;
  }
}


/* =============================================
   BADGE COMPONENT
   ============================================= */

.djui-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.125rem 0.625rem;
  font-size: var(--djui-text-xs);
  font-weight: var(--djui-font-medium);
  line-height: 1.5;
  border-radius: var(--djui-radius-full);
  white-space: nowrap;
  transition: all var(--djui-transition-fast);
}

/* Variantes */
.djui-badge-default {
  background: var(--djui-primary);
  color: var(--djui-primary-foreground);
}

.djui-badge-secondary {
  background: var(--djui-secondary);
  color: var(--djui-secondary-foreground);
}

.djui-badge-success {
  background: var(--djui-success);
  color: var(--djui-success-foreground);
}

.djui-badge-error {
  background: var(--djui-destructive);
  color: var(--djui-destructive-foreground);
}

.djui-badge-warning {
  background: var(--djui-warning);
  color: var(--djui-warning-foreground);
}

.djui-badge-info {
  background: var(--djui-info);
  color: var(--djui-info-foreground);
}

/* Variante outline */
.djui-badge-outline {
  background: transparent;
  border: 1px solid var(--djui-border);
  color: var(--djui-foreground);
}

.djui-badge-outline-primary {
  background: transparent;
  border: 1px solid var(--djui-primary);
  color: var(--djui-primary);
}

.djui-badge-outline-success {
  background: transparent;
  border: 1px solid var(--djui-success);
  color: var(--djui-success);
}

.djui-badge-outline-error {
  background: transparent;
  border: 1px solid var(--djui-destructive);
  color: var(--djui-destructive);
}

.djui-badge-outline-warning {
  background: transparent;
  border: 1px solid var(--djui-warning);
  color: var(--djui-warning);
}

/* Variante subtle/soft */
.djui-badge-subtle {
  background: var(--djui-muted);
  color: var(--djui-muted-foreground);
}

.djui-badge-subtle-primary {
  background: rgba(14, 165, 233, 0.1);
  color: var(--djui-primary);
}

.djui-badge-subtle-success {
  background: rgba(34, 197, 94, 0.1);
  color: var(--djui-success);
}

.djui-badge-subtle-error {
  background: rgba(239, 68, 68, 0.1);
  color: var(--djui-destructive);
}

.djui-badge-subtle-warning {
  background: rgba(245, 158, 11, 0.1);
  color: var(--djui-warning);
}

.djui-badge-subtle-info {
  background: rgba(59, 130, 246, 0.1);
  color: var(--djui-info);
}

/* Tailles */
.djui-badge-sm {
  padding: 0 0.375rem;
  font-size: 0.625rem;
  line-height: 1.25rem;
}

.djui-badge-lg {
  padding: 0.25rem 0.75rem;
  font-size: var(--djui-text-sm);
}

/* Badge avec icône */
.djui-badge svg {
  width: 0.875rem;
  height: 0.875rem;
}

.djui-badge-sm svg {
  width: 0.75rem;
  height: 0.75rem;
}

.djui-badge-lg svg {
  width: 1rem;
  height: 1rem;
}

/* Badge avec dot */
.djui-badge-dot {
  position: relative;
  padding-left: 1.25rem;
}

.djui-badge-dot::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}

/* Badge dismissible */
.djui-badge-dismissible {
  padding-right: 0.375rem;
}

.djui-badge-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.25rem;
  padding: 0;
  background: transparent;
  border: none;
  color: currentColor;
  opacity: 0.7;
  cursor: pointer;
  transition: opacity var(--djui-transition-fast);
}

.djui-badge-close:hover {
  opacity: 1;
}

.djui-badge-close svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* Badge pill (plus arrondi) */
.djui-badge-pill {
  padding: 0.25rem 0.75rem;
  border-radius: var(--djui-radius-full);
}

/* Badge interactive (cliquable) */
.djui-badge-interactive {
  cursor: pointer;
  user-select: none;
}

.djui-badge-interactive:hover {
  opacity: 0.85;
}

.djui-badge-interactive:active {
  transform: scale(0.95);
}

/* Badge avec compteur */
.djui-badge-counter {
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  font-size: 0.625rem;
  font-weight: var(--djui-font-semibold);
  line-height: 1.25rem;
}

/* Badge positional (sur un élément) */
.djui-badge-container {
  position: relative;
  display: inline-block;
}

.djui-badge-positioned {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  font-size: 0.625rem;
  font-weight: var(--djui-font-semibold);
  line-height: 1.25rem;
  border: 2px solid var(--djui-background);
}

/* Badge animé */
.djui-badge-pulse {
  animation: djui-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes djui-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* Badge avec bordure */
.djui-badge-bordered {
  border: 1px solid currentColor;
}

/* =============================================
   SWITCH COMPONENT
   ============================================= */

/* Container */
.djui-switch-wrapper {
  display: inline-flex;
  align-items: center;
  gap: var(--djui-spacing-sm);
  cursor: pointer;
  user-select: none;
}

/* Input natif caché */
.djui-switch {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Track (rail) du switch */
.djui-switch-track {
  position: relative;
  display: inline-block;
  width: 2.75rem;
  height: 1.5rem;
  background: var(--djui-input);
  border-radius: var(--djui-radius-full);
  transition: all var(--djui-transition-fast);
  flex-shrink: 0;
}

/* Thumb (bouton) du switch */
.djui-switch-track::after {
  content: "";
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--djui-background);
  border-radius: 50%;
  box-shadow: var(--djui-shadow-sm);
  transition: all var(--djui-transition-fast);
}

/* Hover */
.djui-switch-wrapper:hover .djui-switch-track {
  background: var(--djui-ring);
}

/* Focus */
.djui-switch:focus-visible + .djui-switch-track {
  outline: 2px solid var(--djui-ring);
  outline-offset: 2px;
}

/* État checked */
.djui-switch:checked + .djui-switch-track {
  background: var(--djui-primary);
}

.djui-switch:checked + .djui-switch-track::after {
  transform: translateX(1.25rem);
}

/* État disabled */
.djui-switch:disabled + .djui-switch-track {
  opacity: 0.5;
  cursor: not-allowed;
}

.djui-switch:disabled ~ .djui-switch-label {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Label */
.djui-switch-label {
  font-size: var(--djui-text-sm);
  color: var(--djui-foreground);
}

.djui-switch-description {
  display: block;
  font-size: var(--djui-text-xs);
  color: var(--djui-muted-foreground);
  margin-top: var(--djui-spacing-xs);
}

/* Variantes de taille */
.djui-switch-sm .djui-switch-track {
  width: 2rem;
  height: 1.125rem;
}

.djui-switch-sm .djui-switch-track::after {
  width: 0.875rem;
  height: 0.875rem;
}

.djui-switch-sm .djui-switch:checked + .djui-switch-track::after {
  transform: translateX(0.875rem);
}

.djui-switch-sm .djui-switch-label {
  font-size: var(--djui-text-xs);
}

.djui-switch-lg .djui-switch-track {
  width: 3.5rem;
  height: 2rem;
}

.djui-switch-lg .djui-switch-track::after {
  width: 1.625rem;
  height: 1.625rem;
  top: 0.1875rem;
  left: 0.1875rem;
}

.djui-switch-lg .djui-switch:checked + .djui-switch-track::after {
  transform: translateX(1.5rem);
}

.djui-switch-lg .djui-switch-label {
  font-size: var(--djui-text-base);
}

/* Variantes de couleur */
.djui-switch-success .djui-switch:checked + .djui-switch-track {
  background: var(--djui-success);
}

.djui-switch-error .djui-switch:checked + .djui-switch-track {
  background: var(--djui-destructive);
}

.djui-switch-warning .djui-switch:checked + .djui-switch-track {
  background: var(--djui-warning);
}

.djui-switch-info .djui-switch:checked + .djui-switch-track {
  background: var(--djui-info);
}

/* Switch avec icônes */
.djui-switch-with-icons .djui-switch-track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.375rem;
}

.djui-switch-icon {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--djui-background);
  z-index: 1;
  opacity: 0;
  transition: opacity var(--djui-transition-fast);
}

.djui-switch:checked + .djui-switch-track .djui-switch-icon-on {
  opacity: 1;
}

.djui-switch:not(:checked) + .djui-switch-track .djui-switch-icon-off {
  opacity: 1;
}

/* Switch card (style carte) */
.djui-switch-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--djui-spacing-md);
  border: 1px solid var(--djui-border);
  border-radius: var(--djui-radius-md);
  cursor: pointer;
  transition: all var(--djui-transition-fast);
}

.djui-switch-card:hover {
  background: var(--djui-accent);
  border-color: var(--djui-ring);
}

.djui-switch:checked ~ .djui-switch-card {
  border-color: var(--djui-primary);
  background: rgba(14, 165, 233, 0.05);
}

/* Groupe de switches */
.djui-switch-group {
  display: flex;
  flex-direction: column;
  gap: var(--djui-spacing-sm);
}

.djui-switch-group-label {
  font-size: var(--djui-text-sm);
  font-weight: var(--djui-font-medium);
  color: var(--djui-foreground);
  margin-bottom: var(--djui-spacing-xs);
}

/* Loading state */
.djui-switch-loading .djui-switch-track::after {
  animation: djui-switch-pulse 1.5s ease-in-out infinite;
}

@keyframes djui-switch-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* =============================================
   DROPDOWN COMPONENT
   ============================================= */

.djui-dropdown {
  position: relative;
  display: inline-block;
}

/* Trigger */
.djui-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--djui-spacing-sm);
  padding: 0.625rem 1rem;
  background: var(--djui-background);
  color: var(--djui-foreground);
  border: 1px solid var(--djui-input);
  border-radius: var(--djui-radius-md);
  font-size: var(--djui-text-sm);
  font-weight: var(--djui-font-medium);
  cursor: pointer;
  transition: all var(--djui-transition-fast);
  outline: none;
}

.djui-dropdown-trigger:hover {
  background: var(--djui-accent);
  border-color: var(--djui-ring);
}

.djui-dropdown-trigger:focus-visible {
  border-color: var(--djui-ring);
  box-shadow: 0 0 0 3px rgba(163, 163, 163, 0.1);
}

.djui-dropdown-trigger[aria-expanded="true"] {
  background: var(--djui-accent);
}

/* Icône du trigger */
.djui-dropdown-trigger svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--djui-transition-fast);
}

.djui-dropdown-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Menu */
.djui-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  min-width: 12rem;
  background: var(--djui-popover);
  border: 1px solid var(--djui-border);
  border-radius: var(--djui-radius-md);
  box-shadow: var(--djui-shadow-lg);
  padding: var(--djui-spacing-xs);
  z-index: var(--djui-z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition: all var(--djui-transition-fast);
}

.djui-dropdown-menu-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Positions du menu */
.djui-dropdown-menu-right {
  left: auto;
  right: 0;
}

.djui-dropdown-menu-top {
  top: auto;
  bottom: calc(100% + 0.25rem);
}

/* Item */
.djui-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--djui-spacing-sm);
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: var(--djui-radius-sm);
  font-size: var(--djui-text-sm);
  color: var(--djui-popover-foreground);
  text-align: left;
  cursor: pointer;
  transition: all var(--djui-transition-fast);
  outline: none;
  text-decoration: none;
}

.djui-dropdown-item:hover,
.djui-dropdown-item:focus {
  background: var(--djui-accent);
  color: var(--djui-accent-foreground);
}

.djui-dropdown-item svg {
  width: 1rem;
  height: 1rem;
  color: var(--djui-muted-foreground);
}

.djui-dropdown-item:hover svg {
  color: var(--djui-accent-foreground);
}

/* Item destructive */
.djui-dropdown-item-destructive {
  color: var(--djui-destructive);
}

.djui-dropdown-item-destructive:hover {
  background: var(--djui-destructive);
  color: var(--djui-destructive-foreground);
}

.djui-dropdown-item-destructive svg {
  color: var(--djui-destructive);
}

.djui-dropdown-item-destructive:hover svg {
  color: var(--djui-destructive-foreground);
}

/* Item disabled */
.djui-dropdown-item:disabled,
.djui-dropdown-item[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Label */
.djui-dropdown-label {
  padding: 0.5rem 0.75rem;
  font-size: var(--djui-text-xs);
  font-weight: var(--djui-font-semibold);
  color: var(--djui-muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Separator */
.djui-dropdown-separator {
  height: 1px;
  background: var(--djui-border);
  margin: var(--djui-spacing-xs) 0;
}

/* Shortcut */
.djui-dropdown-shortcut {
  margin-left: auto;
  font-size: var(--djui-text-xs);
  color: var(--djui-muted-foreground);
}

/* Checkbox item */
.djui-dropdown-checkbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.djui-dropdown-checkbox-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
}

.djui-dropdown-checkbox-indicator svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* Submenu */
.djui-dropdown-submenu {
  position: relative;
}

.djui-dropdown-submenu-trigger::after {
  content: "";
  margin-left: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.25rem 0 0.25rem 0.375rem;
  border-color: transparent transparent transparent var(--djui-muted-foreground);
}

.djui-dropdown-submenu-content {
  position: absolute;
  top: -0.25rem;
  left: calc(100% + 0.25rem);
  min-width: 12rem;
  background: var(--djui-popover);
  border: 1px solid var(--djui-border);
  border-radius: var(--djui-radius-md);
  box-shadow: var(--djui-shadow-lg);
  padding: var(--djui-spacing-xs);
  z-index: calc(var(--djui-z-dropdown) + 1);
}

/* Header avec avatar */
.djui-dropdown-header {
  display: flex;
  align-items: center;
  gap: var(--djui-spacing-sm);
  padding: 0.75rem;
  margin-bottom: var(--djui-spacing-xs);
  border-bottom: 1px solid var(--djui-border);
}

.djui-dropdown-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--djui-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--djui-font-semibold);
  font-size: var(--djui-text-sm);
}

.djui-dropdown-user-info {
  flex: 1;
  min-width: 0;
}

.djui-dropdown-user-name {
  font-size: var(--djui-text-sm);
  font-weight: var(--djui-font-medium);
  color: var(--djui-popover-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.djui-dropdown-user-email {
  font-size: var(--djui-text-xs);
  color: var(--djui-muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Scrollable menu */
.djui-dropdown-menu-scrollable {
  max-height: 20rem;
  overflow-y: auto;
}

.djui-dropdown-menu-scrollable::-webkit-scrollbar {
  width: 0.5rem;
}

.djui-dropdown-menu-scrollable::-webkit-scrollbar-thumb {
  background: var(--djui-muted);
  border-radius: var(--djui-radius-full);
}

/* =============================================
   DROPDOWN PORTAL MODE
   À ajouter après votre CSS dropdown existant
   ============================================= */

.djui-dropdown-menu-portal {
  position: fixed !important;
  z-index: 9999 !important;
  top: 0;
  left: 0;
  min-width: 12rem;
  background: var(--djui-popover);
  border: 1px solid var(--djui-border);
  border-radius: var(--djui-radius-md);
  box-shadow: var(--djui-shadow-lg);
  padding: var(--djui-spacing-xs);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition: all var(--djui-transition-fast);
  display: none;
}

.djui-dropdown-menu-portal.djui-dropdown-menu-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  display: block;
}

#djui-dropdown-portal-root {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
}

#djui-dropdown-portal-root > * {
  pointer-events: auto;
}
/* =============================================
   BREADCRUMB COMPONENT
   ============================================= */

.djui-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--djui-spacing-xs);
  font-size: var(--djui-text-sm);
  color: var(--djui-muted-foreground);
}

/* Item */
.djui-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: var(--djui-spacing-xs);
}

/* Link */
.djui-breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: var(--djui-spacing-xs);
  color: var(--djui-muted-foreground);
  text-decoration: none;
  transition: color var(--djui-transition-fast);
  outline: none;
  border-radius: var(--djui-radius-sm);
}

.djui-breadcrumb-link:hover {
  color: var(--djui-foreground);
}

.djui-breadcrumb-link:focus-visible {
  outline: 2px solid var(--djui-ring);
  outline-offset: 2px;
}

/* Icône dans le lien */
.djui-breadcrumb-link svg {
  width: 1rem;
  height: 1rem;
}

/* Item actif (page courante) */
.djui-breadcrumb-current {
  color: var(--djui-foreground);
  font-weight: var(--djui-font-medium);
}

/* Séparateur */
.djui-breadcrumb-separator {
  display: inline-flex;
  align-items: center;
  color: var(--djui-muted-foreground);
  user-select: none;
}

.djui-breadcrumb-separator svg {
  width: 1rem;
  height: 1rem;
}

/* Variantes de séparateur */
.djui-breadcrumb-separator-slash::before {
  content: "/";
  margin: 0 var(--djui-spacing-xs);
}

.djui-breadcrumb-separator-gt::before {
  content: ">";
  margin: 0 var(--djui-spacing-xs);
}

.djui-breadcrumb-separator-dot::before {
  content: "•";
  margin: 0 var(--djui-spacing-xs);
}

/* Breadcrumb collapsible (avec ellipsis) */
.djui-breadcrumb-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: transparent;
  border: none;
  color: var(--djui-muted-foreground);
  cursor: pointer;
  border-radius: var(--djui-radius-sm);
  transition: all var(--djui-transition-fast);
  outline: none;
}

.djui-breadcrumb-ellipsis:hover {
  background: var(--djui-accent);
  color: var(--djui-accent-foreground);
}

.djui-breadcrumb-ellipsis:focus-visible {
  outline: 2px solid var(--djui-ring);
  outline-offset: 2px;
}

.djui-breadcrumb-ellipsis svg {
  width: 1rem;
  height: 1rem;
}

/* Dropdown pour ellipsis */
.djui-breadcrumb-dropdown {
  position: relative;
  display: inline-block;
}

.djui-breadcrumb-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  min-width: 12rem;
  background: var(--djui-popover);
  border: 1px solid var(--djui-border);
  border-radius: var(--djui-radius-md);
  box-shadow: var(--djui-shadow-lg);
  padding: var(--djui-spacing-xs);
  z-index: var(--djui-z-dropdown);
}

.djui-breadcrumb-dropdown-item {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: var(--djui-radius-sm);
  font-size: var(--djui-text-sm);
  color: var(--djui-popover-foreground);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--djui-transition-fast);
}

.djui-breadcrumb-dropdown-item:hover {
  background: var(--djui-accent);
}

/* Variante avec background */
.djui-breadcrumb-contained {
  padding: var(--djui-spacing-sm) var(--djui-spacing-md);
  background: var(--djui-muted);
  border-radius: var(--djui-radius-md);
}

/* Variante small */
.djui-breadcrumb-sm {
  font-size: var(--djui-text-xs);
}

.djui-breadcrumb-sm .djui-breadcrumb-link svg,
.djui-breadcrumb-sm .djui-breadcrumb-separator svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* Variante large */
.djui-breadcrumb-lg {
  font-size: var(--djui-text-base);
}

.djui-breadcrumb-lg .djui-breadcrumb-link svg,
.djui-breadcrumb-lg .djui-breadcrumb-separator svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Responsive - mobile */
@media (max-width: 640px) {
  .djui-breadcrumb {
    font-size: var(--djui-text-xs);
  }
  
  .djui-breadcrumb-link svg,
  .djui-breadcrumb-separator svg {
    width: 0.875rem;
    height: 0.875rem;
  }
}

/* =============================================
   TOOLTIP COMPONENT
   ============================================= */

.djui-tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip content */
.djui-tooltip__content {
  position: absolute;
  z-index: var(--djui-z-tooltip);
  padding: 0.5rem 0.75rem;
  background: var(--djui-primary);
  color: var(--djui-primary-foreground);
  font-size: var(--djui-text-xs);
  line-height: 1.4;
  border-radius: var(--djui-radius-md);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--djui-transition-fast);
  box-shadow: var(--djui-shadow-lg);
}

/* Tooltip visible */
.djui-tooltip__content--visible {
  opacity: 1;
}

/* Positions */
.djui-tooltip__content--top {
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
}

.djui-tooltip__content--bottom {
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
}

.djui-tooltip__content--left {
  right: calc(100% + 0.5rem);
  top: 50%;
  transform: translateY(-50%);
}

.djui-tooltip__content--right {
  left: calc(100% + 0.5rem);
  top: 50%;
  transform: translateY(-50%);
}

/* Arrow */
.djui-tooltip__arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}

/* Arrow positions */
.djui-tooltip__content--top .djui-tooltip__arrow {
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 4px 4px 0 4px;
  border-color: var(--djui-primary) transparent transparent transparent;
}

.djui-tooltip__content--bottom .djui-tooltip__arrow {
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 4px 4px 4px;
  border-color: transparent transparent var(--djui-primary) transparent;
}

.djui-tooltip__content--left .djui-tooltip__arrow {
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 4px 0 4px 4px;
  border-color: transparent transparent transparent var(--djui-primary);
}

.djui-tooltip__content--right .djui-tooltip__arrow {
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 4px 4px 4px 0;
  border-color: transparent var(--djui-primary) transparent transparent;
}

/* Variantes de couleur */
.djui-tooltip__content--success {
  background: var(--djui-success);
  color: var(--djui-success-foreground);
}

.djui-tooltip__content--success .djui-tooltip__arrow {
  border-top-color: var(--djui-success);
  border-bottom-color: var(--djui-success);
  border-left-color: var(--djui-success);
  border-right-color: var(--djui-success);
}

.djui-tooltip__content--warning {
  background: var(--djui-warning);
  color: var(--djui-warning-foreground);
}

.djui-tooltip__content--warning .djui-tooltip__arrow {
  border-top-color: var(--djui-warning);
  border-bottom-color: var(--djui-warning);
  border-left-color: var(--djui-warning);
  border-right-color: var(--djui-warning);
}

.djui-tooltip__content--destructive {
  background: var(--djui-destructive);
  color: var(--djui-destructive-foreground);
}

.djui-tooltip__content--destructive .djui-tooltip__arrow {
  border-top-color: var(--djui-destructive);
  border-bottom-color: var(--djui-destructive);
  border-left-color: var(--djui-destructive);
  border-right-color: var(--djui-destructive);
}

.djui-tooltip__content--info {
  background: var(--djui-info);
  color: var(--djui-info-foreground);
}

.djui-tooltip__content--info .djui-tooltip__arrow {
  border-top-color: var(--djui-info);
  border-bottom-color: var(--djui-info);
  border-left-color: var(--djui-info);
  border-right-color: var(--djui-info);
}

/* Dark mode adjustments */
.dark .djui-tooltip__content {
  box-shadow: var(--djui-shadow-xl);
}

/* =============================================
   DIALOG COMPONENT
   ============================================= */

/* Container */
.djui-dialog {
  position: fixed;
  inset: 0;
  z-index: var(--djui-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--djui-spacing-md);
}

/* Overlay avec ::before */
.djui-dialog::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  z-index: -1;
}

/* Content */
.djui-dialog__content {
  background: var(--djui-card);
  color: var(--djui-card-foreground);
  border-radius: var(--djui-radius-lg);
  box-shadow: var(--djui-shadow-xl);
  max-width: 32rem;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  z-index: 1;
}

/* Header */
.djui-dialog__header {
  padding: var(--djui-spacing-lg);
  border-bottom: 1px solid var(--djui-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--djui-spacing-md);
}

.djui-dialog__title {
  font-size: var(--djui-text-lg);
  font-weight: var(--djui-font-semibold);
  line-height: 1.4;
  margin: 0;
}

.djui-dialog__description {
  font-size: var(--djui-text-sm);
  color: var(--djui-muted-foreground);
  margin-top: var(--djui-spacing-xs);
}

/* Close button */
.djui-dialog__close {
  width: 2rem;
  height: 2rem;
  border-radius: var(--djui-radius-md);
  border: none;
  background: transparent;
  color: var(--djui-muted-foreground);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--djui-transition-fast);
  flex-shrink: 0;
}

.djui-dialog__close:hover {
  background: var(--djui-accent);
  color: var(--djui-accent-foreground);
}

.djui-dialog__close:focus-visible {
  outline: 2px solid var(--djui-ring);
  outline-offset: 2px;
}

.djui-dialog__close svg {
  width: 1rem;
  height: 1rem;
}

/* Body */
.djui-dialog__body {
  padding: var(--djui-spacing-lg);
}

/* Footer */
.djui-dialog__footer {
  padding: var(--djui-spacing-lg);
  border-top: 1px solid var(--djui-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--djui-spacing-sm);
}

/* Sizes */
.djui-dialog__content--sm {
  max-width: 24rem;
}

.djui-dialog__content--md {
  max-width: 32rem;
}

.djui-dialog__content--lg {
  max-width: 48rem;
}

.djui-dialog__content--xl {
  max-width: 64rem;
}

.djui-dialog__content--full {
  max-width: calc(100vw - 2rem);
}

/* Variantes */
.djui-dialog__content--destructive .djui-dialog__header {
  border-bottom-color: var(--djui-destructive);
}

.djui-dialog__content--destructive .djui-dialog__title {
  color: var(--djui-destructive);
}

.djui-dialog__content--success .djui-dialog__header {
  border-bottom-color: var(--djui-success);
}

.djui-dialog__content--success .djui-dialog__title {
  color: var(--djui-success);
}

.djui-dialog__content--warning .djui-dialog__header {
  border-bottom-color: var(--djui-warning);
}

.djui-dialog__content--warning .djui-dialog__title {
  color: var(--djui-warning);
}

/* Icon in header */
.djui-dialog__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.djui-dialog__icon--destructive {
  background: rgba(239, 68, 68, 0.1);
  color: var(--djui-destructive);
}

.djui-dialog__icon--success {
  background: rgba(34, 197, 94, 0.1);
  color: var(--djui-success);
}

.djui-dialog__icon--warning {
  background: rgba(245, 158, 11, 0.1);
  color: var(--djui-warning);
}

.djui-dialog__icon--info {
  background: rgba(59, 130, 246, 0.1);
  color: var(--djui-info);
}

.djui-dialog__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Dark mode */
.dark .djui-dialog::before {
  background: rgba(0, 0, 0, 0.7);
}

/* Animation classes (pour Alpine.js x-transition) */
.djui-dialog-enter {
  opacity: 0;
}

.djui-dialog-enter-active {
  transition: opacity 200ms ease-out;
}

.djui-dialog-enter-to {
  opacity: 1;
}

.djui-dialog-leave {
  opacity: 1;
}

.djui-dialog-leave-active {
  transition: opacity 150ms ease-in;
}

.djui-dialog-leave-to {
  opacity: 0;
}

/* =============================================
   PROGRESS COMPONENT
   ============================================= */

.djui-progress {
  width: 100%;
  height: 0.5rem;
  background: var(--djui-secondary);
  border-radius: var(--djui-radius-full);
  overflow: hidden;
  position: relative;
}

/* Barre de progression */
.djui-progress > div {
  height: 100%;
  background: var(--djui-primary);
  border-radius: var(--djui-radius-full);
  transition: width var(--djui-transition-base);
}

/* Tailles */
.djui-progress[data-size="sm"] {
  height: 0.25rem;
}

.djui-progress[data-size="md"] {
  height: 0.5rem;
}

.djui-progress[data-size="lg"] {
  height: 0.75rem;
}

.djui-progress[data-size="xl"] {
  height: 1rem;
}

/* Variantes de couleur */
.djui-progress[data-variant="success"] > div {
  background: var(--djui-success);
}

.djui-progress[data-variant="warning"] > div {
  background: var(--djui-warning);
}

.djui-progress[data-variant="destructive"] > div {
  background: var(--djui-destructive);
}

.djui-progress[data-variant="info"] > div {
  background: var(--djui-info);
}

/* Animation indéterminée */
.djui-progress[data-indeterminate] > div {
  width: 30% !important;
  animation: djui-progress-indeterminate 1.5s ease-in-out infinite;
}

@keyframes djui-progress-indeterminate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(400%);
  }
}


/* =============================================
   SPINNER COMPONENT
   ============================================= */

.djui-spinner {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--djui-border);
  border-top-color: var(--djui-primary);
  border-radius: 50%;
  animation: djui-spinner-spin 0.8s linear infinite;
}

@keyframes djui-spinner-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Tailles */
.djui-spinner[data-size="xs"] {
  width: 1rem;
  height: 1rem;
  border-width: 2px;
}

.djui-spinner[data-size="sm"] {
  width: 1.25rem;
  height: 1.25rem;
  border-width: 2px;
}

.djui-spinner[data-size="md"] {
  width: 1.5rem;
  height: 1.5rem;
  border-width: 2px;
}

.djui-spinner[data-size="lg"] {
  width: 2rem;
  height: 2rem;
  border-width: 3px;
}

.djui-spinner[data-size="xl"] {
  width: 3rem;
  height: 3rem;
  border-width: 4px;
}

/* Variantes de couleur */
.djui-spinner[data-variant="success"] {
  border-top-color: var(--djui-success);
}

.djui-spinner[data-variant="warning"] {
  border-top-color: var(--djui-warning);
}

.djui-spinner[data-variant="destructive"] {
  border-top-color: var(--djui-destructive);
}

.djui-spinner[data-variant="info"] {
  border-top-color: var(--djui-info);
}

.djui-spinner[data-variant="secondary"] {
  border-top-color: var(--djui-muted-foreground);
}

/* Spinner avec texte */
.djui-spinner-wrapper {
  display: inline-flex;
  align-items: center;
  gap: var(--djui-spacing-sm);
}


/* =============================================
   CIRCULAR PROGRESS (Bonus)
   ============================================= */

.djui-circular {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  position: relative;
}

.djui-circular svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}

.djui-circular circle {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--djui-transition-base);
}

/* Circle background */
.djui-circular circle:first-child {
  stroke: var(--djui-secondary);
}

/* Circle foreground */
.djui-circular circle:last-child {
  stroke: var(--djui-primary);
}

/* Tailles circular */
.djui-circular[data-size="sm"] {
  width: 2rem;
  height: 2rem;
}

.djui-circular[data-size="md"] {
  width: 3rem;
  height: 3rem;
}

.djui-circular[data-size="lg"] {
  width: 4rem;
  height: 4rem;
}

.djui-circular[data-size="xl"] {
  width: 6rem;
  height: 6rem;
}

/* Variantes circular */
.djui-circular[data-variant="success"] circle:last-child {
  stroke: var(--djui-success);
}

.djui-circular[data-variant="warning"] circle:last-child {
  stroke: var(--djui-warning);
}

.djui-circular[data-variant="destructive"] circle:last-child {
  stroke: var(--djui-destructive);
}

.djui-circular[data-variant="info"] circle:last-child {
  stroke: var(--djui-info);
}

/* Animation indéterminée circular */
.djui-circular[data-indeterminate] svg {
  animation: djui-circular-rotate 2s linear infinite;
}

@keyframes djui-circular-rotate {
  to {
    transform: rotate(270deg);
  }
}


/* =============================================
   SKELETON LOADER (Bonus)
   ============================================= */

.djui-skeleton {
  background: linear-gradient(
    90deg,
    var(--djui-muted) 0%,
    var(--djui-accent) 50%,
    var(--djui-muted) 100%
  );
  background-size: 200% 100%;
  animation: djui-skeleton-loading 1.5s ease-in-out infinite;
  border-radius: var(--djui-radius-md);
}

@keyframes djui-skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Variantes skeleton */
.djui-skeleton[data-variant="text"] {
  height: 1rem;
  width: 100%;
  border-radius: var(--djui-radius-sm);
}

.djui-skeleton[data-variant="avatar"] {
  width: 3rem;
  height: 3rem;
  border-radius: var(--djui-radius-full);
}

.djui-skeleton[data-variant="card"] {
  height: 8rem;
  width: 100%;
}

/* =============================================
   DRAWER COMPONENT
   ============================================= */

/* Container avec overlay ::before */
.djui-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--djui-z-modal);
  pointer-events: none;
}

.djui-drawer[data-open] {
  pointer-events: auto;
}

/* Overlay avec ::before */
.djui-drawer::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--djui-transition-base);
  pointer-events: none;
}

.djui-drawer[data-open]::before {
  opacity: 1;
  pointer-events: auto;
}

/* Content panel */
.djui-drawer > div {
  position: fixed;
  background: var(--djui-card);
  color: var(--djui-card-foreground);
  box-shadow: var(--djui-shadow-xl);
  overflow-y: auto;
  transition: transform var(--djui-transition-base);
  z-index: 1;
  max-width: 90vw;
}

/* Positions */
.djui-drawer[data-side="left"] > div {
  left: 0;
  top: 0;
  bottom: 0;
  width: 20rem;
  transform: translateX(-100%);
}

.djui-drawer[data-side="left"][data-open] > div {
  transform: translateX(0);
}

.djui-drawer[data-side="right"] > div {
  right: 0;
  top: 0;
  bottom: 0;
  width: 20rem;
  transform: translateX(100%);
}

.djui-drawer[data-side="right"][data-open] > div {
  transform: translateX(0);
}

.djui-drawer[data-side="top"] > div {
  top: 0;
  left: 0;
  right: 0;
  height: 50vh;
  transform: translateY(-100%);
}

.djui-drawer[data-side="top"][data-open] > div {
  transform: translateY(0);
}

.djui-drawer[data-side="bottom"] > div {
  bottom: 0;
  left: 0;
  right: 0;
  height: 50vh;
  transform: translateY(100%);
}

.djui-drawer[data-side="bottom"][data-open] > div {
  transform: translateY(0);
}

/* Tailles (pour left/right) */
.djui-drawer[data-size="sm"] > div {
  width: 16rem;
}

.djui-drawer[data-size="md"] > div {
  width: 20rem;
}

.djui-drawer[data-size="lg"] > div {
  width: 28rem;
}

.djui-drawer[data-size="xl"] > div {
  width: 36rem;
}

.djui-drawer[data-size="full"] > div {
  width: 100vw;
  max-width: 100vw;
}

/* Tailles (pour top/bottom) */
.djui-drawer[data-side="top"][data-size="sm"] > div,
.djui-drawer[data-side="bottom"][data-size="sm"] > div {
  height: 30vh;
}

.djui-drawer[data-side="top"][data-size="md"] > div,
.djui-drawer[data-side="bottom"][data-size="md"] > div {
  height: 50vh;
}

.djui-drawer[data-side="top"][data-size="lg"] > div,
.djui-drawer[data-side="bottom"][data-size="lg"] > div {
  height: 70vh;
}

.djui-drawer[data-side="top"][data-size="xl"] > div,
.djui-drawer[data-side="bottom"][data-size="xl"] > div {
  height: 85vh;
}

.djui-drawer[data-side="top"][data-size="full"] > div,
.djui-drawer[data-side="bottom"][data-size="full"] > div {
  height: 100vh;
}

/* Header */
.djui-drawer header {
  padding: var(--djui-spacing-lg);
  border-bottom: 1px solid var(--djui-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--djui-spacing-md);
  flex-shrink: 0;
}

.djui-drawer header h2,
.djui-drawer header h3 {
  font-size: var(--djui-text-lg);
  font-weight: var(--djui-font-semibold);
  margin: 0;
}

.djui-drawer header p {
  font-size: var(--djui-text-sm);
  color: var(--djui-muted-foreground);
  margin: var(--djui-spacing-xs) 0 0 0;
}

/* Close button */
.djui-drawer button[aria-label="Fermer"] {
  width: 2rem;
  height: 2rem;
  border-radius: var(--djui-radius-md);
  border: none;
  background: transparent;
  color: var(--djui-muted-foreground);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--djui-transition-fast);
  flex-shrink: 0;
}

.djui-drawer button[aria-label="Fermer"]:hover {
  background: var(--djui-accent);
  color: var(--djui-accent-foreground);
}

.djui-drawer button[aria-label="Fermer"]:focus-visible {
  outline: 2px solid var(--djui-ring);
  outline-offset: 2px;
}

.djui-drawer button[aria-label="Fermer"] svg {
  width: 1rem;
  height: 1rem;
}

/* Body */
.djui-drawer main {
  padding: var(--djui-spacing-lg);
  flex: 1;
  overflow-y: auto;
}

/* Footer */
.djui-drawer footer {
  padding: var(--djui-spacing-lg);
  border-top: 1px solid var(--djui-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--djui-spacing-sm);
  flex-shrink: 0;
}

/* Dark mode */
.dark .djui-drawer::before {
  background: rgba(0, 0, 0, 0.7);
}

/* =============================================
   MENU / NAVIGATION COMPONENT
   ============================================= */

/* Menu horizontal */
.djui-menu {
  display: flex;
  align-items: center;
  gap: var(--djui-spacing-xs);
  list-style: none;
}

.djui-menu a,
.djui-menu button {
  display: flex;
  align-items: center;
  gap: var(--djui-spacing-xs);
  padding: var(--djui-spacing-sm) var(--djui-spacing-md);
  color: var(--djui-foreground);
  text-decoration: none;
  font-size: var(--djui-text-sm);
  font-weight: var(--djui-font-medium);
  border-radius: var(--djui-radius-md);
  transition: all var(--djui-transition-fast);
  border: none;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}

.djui-menu a:hover,
.djui-menu button:hover {
  background: var(--djui-accent);
  color: var(--djui-accent-foreground);
}

.djui-menu a[data-active],
.djui-menu button[data-active] {
  background: var(--djui-primary);
  color: var(--djui-primary-foreground);
}

.djui-menu svg {
  width: 1rem;
  height: 1rem;
}

/* Menu vertical */
.djui-menu[data-orientation="vertical"] {
  flex-direction: column;
  align-items: stretch;
}

.djui-menu[data-orientation="vertical"] a,
.djui-menu[data-orientation="vertical"] button {
  justify-content: flex-start;
}

/* Submenu */
.djui-submenu {
  position: relative;
}

.djui-submenu > div {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 12rem;
  background: var(--djui-popover);
  border: 1px solid var(--djui-border);
  border-radius: var(--djui-radius-md);
  box-shadow: var(--djui-shadow-lg);
  padding: var(--djui-spacing-xs);
  margin-top: var(--djui-spacing-xs);
  z-index: var(--djui-z-dropdown);
  display: none;
}

.djui-submenu[data-open] > div {
  display: block;
}

.djui-submenu > div a,
.djui-submenu > div button {
  width: 100%;
  justify-content: flex-start;
}

/* Chevron icon pour submenu */
.djui-submenu > button svg:last-child {
  margin-left: auto;
  transition: transform var(--djui-transition-fast);
}

.djui-submenu[data-open] > button svg:last-child {
  transform: rotate(180deg);
}

/* Mega Menu */
.djui-megamenu {
  position: relative;
}

.djui-megamenu > div {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 60rem;
  background: var(--djui-popover);
  border: 1px solid var(--djui-border);
  border-radius: var(--djui-radius-lg);
  box-shadow: var(--djui-shadow-xl);
  padding: var(--djui-spacing-lg);
  margin-top: var(--djui-spacing-xs);
  z-index: var(--djui-z-dropdown);
  display: none;
}

.djui-megamenu[data-open] > div {
  display: block;
}

/* Mobile Menu (Hamburger) */
.djui-mobile-menu {
  display: none;
}

@media (max-width: 768px) {
  .djui-menu[data-mobile-hidden] {
    display: none;
  }
  
  .djui-mobile-menu {
    display: block;
  }
}

.djui-hamburger {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: var(--djui-spacing-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: var(--djui-radius-sm);
  transition: background var(--djui-transition-fast);
}

.djui-hamburger:hover {
  background: var(--djui-accent);
}

.djui-hamburger span {
  width: 1.5rem;
  height: 2px;
  background: var(--djui-foreground);
  transition: all var(--djui-transition-fast);
}

.djui-hamburger[data-open] span:first-child {
  transform: rotate(45deg) translateY(7px);
}

.djui-hamburger[data-open] span:nth-child(2) {
  opacity: 0;
}

.djui-hamburger[data-open] span:last-child {
  transform: rotate(-45deg) translateY(-7px);
}

/* Separator */
.djui-menu hr {
  width: 1px;
  height: 1.5rem;
  background: var(--djui-border);
  border: none;
  margin: 0 var(--djui-spacing-xs);
}

.djui-menu[data-orientation="vertical"] hr {
  width: 100%;
  height: 1px;
  margin: var(--djui-spacing-xs) 0;
}

/* Badge sur menu item */
.djui-menu-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  background: var(--djui-destructive);
  color: var(--djui-destructive-foreground);
  font-size: 0.625rem;
  font-weight: var(--djui-font-semibold);
  border-radius: var(--djui-radius-full);
  margin-left: auto;
}

/* Menu item avec icône */
.djui-menu-icon {
  display: flex;
  align-items: center;
  gap: var(--djui-spacing-sm);
}

/* Dark mode */
.dark .djui-submenu > div,
.dark .djui-megamenu > div {
  box-shadow: var(--djui-shadow-xl);
}

/* =============================================
   MENU / NAVIGATION - AMÉLIORATIONS CSS
   À ajouter dans components.css après ton code Menu existant
   ============================================= */

/* Mega Menu - Grid helpers */
.djui-megamenu .grid {
  display: grid;
}

.djui-megamenu .grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.djui-megamenu .grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.djui-megamenu .grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.djui-megamenu .gap-4 { gap: 1rem; }
.djui-megamenu .gap-6 { gap: 1.5rem; }
.djui-megamenu .gap-8 { gap: 2rem; }

/* Mega Menu - Typography et listes */
.djui-megamenu h3 {
  font-size: var(--djui-text-sm);
  font-weight: var(--djui-font-semibold);
  margin-bottom: var(--djui-spacing-sm);
  color: var(--djui-foreground);
}

.djui-megamenu h4 {
  font-size: var(--djui-text-sm);
  font-weight: var(--djui-font-semibold);
  color: var(--djui-foreground);
}

.djui-megamenu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.djui-megamenu .space-y-2 > * + * {
  margin-top: 0.5rem;
}

.djui-megamenu .space-y-3 > * + * {
  margin-top: 0.75rem;
}

/* Mega Menu - Liens dans les colonnes */
.djui-megamenu a.block {
  display: block;
  padding: var(--djui-spacing-sm);
  border-radius: var(--djui-radius-md);
  transition: all var(--djui-transition-fast);
  text-decoration: none;
}

.djui-megamenu a.block:hover {
  background: var(--djui-accent);
}

.djui-megamenu a .font-medium {
  font-weight: var(--djui-font-medium);
  color: var(--djui-foreground);
  display: block;
  margin-bottom: 0.125rem;
}

.djui-megamenu a .text-xs {
  font-size: var(--djui-text-xs);
  color: var(--djui-muted-foreground);
}

/* Mega Menu - Section CTA (Call to Action) */
.djui-megamenu .border-t {
  border-top: 1px solid var(--djui-border);
}

.djui-megamenu .flex {
  display: flex;
}

.djui-megamenu .items-center {
  align-items: center;
}

.djui-megamenu .justify-between {
  justify-content: space-between;
}

/* Mega Menu - Responsive */
@media (max-width: 1024px) {
  .djui-megamenu > div {
    max-width: 90vw;
  }
  
  .djui-megamenu .grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .djui-megamenu .grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .djui-megamenu > div {
    max-width: 95vw;
    left: 2.5vw;
    transform: none;
  }
  
  .djui-megamenu .grid-cols-2,
  .djui-megamenu .grid-cols-3,
  .djui-megamenu .grid-cols-4 {
    grid-template-columns: 1fr;
  }
}

/* Navbar complète - Header moderne */
.djui-navbar-header {
  position: relative;
  z-index: var(--djui-z-sticky);
}

/* Logo avec gradient */
.djui-navbar-logo {
  display: flex;
  align-items: center;
  gap: var(--djui-spacing-sm);
  text-decoration: none;
  color: var(--djui-foreground);
}

.djui-navbar-logo-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--djui-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgb(59 130 246) 0%, rgb(147 51 234) 100%);
  color: white;
  font-weight: var(--djui-font-bold);
  font-size: var(--djui-text-lg);
}

.djui-navbar-logo-text {
  font-weight: var(--djui-font-bold);
  font-size: var(--djui-text-lg);
}

.djui-navbar-logo-subtitle {
  font-size: var(--djui-text-xs);
  color: var(--djui-muted-foreground);
}

/* Mobile drawer amélioré */
.djui-mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 20rem;
  max-width: 85vw;
  background: var(--djui-background);
  box-shadow: var(--djui-shadow-xl);
  z-index: var(--djui-z-modal);
  overflow-y: auto;
}

.djui-mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--djui-spacing-lg);
  border-bottom: 1px solid var(--djui-border);
}

.djui-mobile-drawer-close {
  padding: var(--djui-spacing-sm);
  background: transparent;
  border: none;
  border-radius: var(--djui-radius-md);
  cursor: pointer;
  transition: background var(--djui-transition-fast);
}

.djui-mobile-drawer-close:hover {
  background: var(--djui-accent);
}

.djui-mobile-drawer-close svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--djui-foreground);
}

/* Animations menu mobile */
@keyframes slideInFromLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideOutToLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/* Helpers utilitaires */
.djui-menu .justify-center {
  justify-content: center;
}

.djui-menu .text-center {
  text-align: center;
}

/* Menu sticky (fixé en haut) */
.djui-menu-sticky {
  position: sticky;
  top: 0;
  z-index: var(--djui-z-sticky);
  background: var(--djui-background);
  border-bottom: 1px solid var(--djui-border);
  box-shadow: var(--djui-shadow-sm);
}

/* Menu avec backdrop blur (effet verre) */
.djui-menu-blur {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.dark .djui-menu-blur {
  background: rgba(15, 23, 42, 0.8);
}

/* Submenu - Position à droite pour menu vertical */
.djui-menu[data-orientation="vertical"] .djui-submenu > div {
  left: 100%;
  top: 0;
  margin-top: 0;
  margin-left: var(--djui-spacing-xs);
}

/* Menu item avec notification dot */
.djui-menu-notification {
  position: relative;
}

.djui-menu-notification::after {
  content: "";
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--djui-destructive);
  border-radius: var(--djui-radius-full);
  border: 2px solid var(--djui-background);
}

/* Menu divider amélioré */
.djui-menu-divider {
  margin: var(--djui-spacing-sm) 0;
  height: 1px;
  background: var(--djui-border);
  border: none;
}

/* Menu section avec titre */
.djui-menu-section {
  padding: var(--djui-spacing-sm) var(--djui-spacing-md);
}

.djui-menu-section-title {
  font-size: var(--djui-text-xs);
  font-weight: var(--djui-font-semibold);
  color: var(--djui-muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--djui-spacing-xs);
}

/* Menu contexte (menu action) */
.djui-menu-context {
  position: absolute;
  background: var(--djui-popover);
  border: 1px solid var(--djui-border);
  border-radius: var(--djui-radius-md);
  box-shadow: var(--djui-shadow-lg);
  padding: var(--djui-spacing-xs);
  z-index: var(--djui-z-popover);
  min-width: 12rem;
}

.djui-menu-context a,
.djui-menu-context button {
  display: flex;
  align-items: center;
  gap: var(--djui-spacing-sm);
  width: 100%;
  padding: var(--djui-spacing-sm) var(--djui-spacing-md);
  background: transparent;
  border: none;
  border-radius: var(--djui-radius-sm);
  color: var(--djui-popover-foreground);
  font-size: var(--djui-text-sm);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--djui-transition-fast);
}

.djui-menu-context a:hover,
.djui-menu-context button:hover {
  background: var(--djui-accent);
}

/* Breadcrumb dans menu (navigation trail) */
.djui-menu-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--djui-spacing-xs);
  padding: var(--djui-spacing-sm) var(--djui-spacing-md);
  font-size: var(--djui-text-sm);
  color: var(--djui-muted-foreground);
}

.djui-menu-breadcrumb a {
  color: var(--djui-muted-foreground);
  text-decoration: none;
  transition: color var(--djui-transition-fast);
}

.djui-menu-breadcrumb a:hover {
  color: var(--djui-foreground);
}

.djui-menu-breadcrumb-separator {
  margin: 0 var(--djui-spacing-xs);
}

/* Amélioration focus visible pour accessibilité */
.djui-menu a:focus-visible,
.djui-menu button:focus-visible {
  outline: 2px solid var(--djui-ring);
  outline-offset: 2px;
}

/* Menu responsive - Stacking sur mobile */
@media (max-width: 768px) {
  .djui-menu:not([data-orientation="vertical"]) {
    flex-direction: column;
    align-items: stretch;
  }
  
  .djui-menu:not([data-orientation="vertical"]) a,
  .djui-menu:not([data-orientation="vertical"]) button {
    justify-content: flex-start;
  }
}

/* Animation smooth pour submenu */
.djui-submenu > div {
  animation: djui-submenu-fade-in 150ms ease-out;
}

@keyframes djui-submenu-fade-in {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Menu avec scroll shadow (ombre lors du scroll) */
.djui-menu-scrollable {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
}

.djui-menu-scrollable::before,
.djui-menu-scrollable::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2rem;
  pointer-events: none;
  z-index: 1;
}

.djui-menu-scrollable::before {
  left: 0;
  background: linear-gradient(to right, var(--djui-background), transparent);
}

.djui-menu-scrollable::after {
  right: 0;
  background: linear-gradient(to left, var(--djui-background), transparent);
}

/* Mega menu - Featured item (item mis en avant) */
.djui-megamenu-featured {
  background: var(--djui-accent);
  padding: var(--djui-spacing-lg);
  border-radius: var(--djui-radius-md);
  border: 1px solid var(--djui-border);
}

.djui-megamenu-featured h4 {
  font-size: var(--djui-text-base);
  font-weight: var(--djui-font-bold);
  margin-bottom: var(--djui-spacing-xs);
}

.djui-megamenu-featured p {
  font-size: var(--djui-text-sm);
  color: var(--djui-muted-foreground);
  margin-bottom: var(--djui-spacing-md);
}

/* Menu avec icône uniquement (icon-only) */
.djui-menu-icon-only a,
.djui-menu-icon-only button {
  padding: var(--djui-spacing-sm);
  justify-content: center;
}

.djui-menu-icon-only a span:not(.djui-menu-badge),
.djui-menu-icon-only button span:not(.djui-menu-badge) {
  display: none;
}

/* Afficher le texte au hover pour menu icon-only */
.djui-menu-icon-only a:hover span:not(.djui-menu-badge),
.djui-menu-icon-only button:hover span:not(.djui-menu-badge) {
  display: inline;
}

/* Menu compact pour espaces réduits */
.djui-menu-compact a,
.djui-menu-compact button {
  padding: var(--djui-spacing-xs) var(--djui-spacing-sm);
  font-size: var(--djui-text-xs);
}

.djui-menu-compact .djui-menu-badge {
  min-width: 1rem;
  height: 1rem;
  font-size: 0.5rem;
  padding: 0 0.25rem;
}

/* Loading state pour menu items */
.djui-menu-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.6;
}

.djui-menu-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--djui-spacing-md);
  width: 1rem;
  height: 1rem;
  margin-top: -0.5rem;
  border: 2px solid var(--djui-muted);
  border-top-color: var(--djui-primary);
  border-radius: var(--djui-radius-full);
  animation: djui-spin 0.6s linear infinite;
}

@keyframes djui-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Transitions améliorées pour mobile menu */
.djui-mobile-transition-enter {
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.djui-mobile-transition-leave {
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark mode - ajustements supplémentaires */
.dark .djui-megamenu > div {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 
              0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

.dark .djui-submenu > div {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}

/* Print styles - Optimisation pour impression */
@media print {
  .djui-hamburger,
  .djui-mobile-menu,
  .djui-megamenu > div,
  .djui-submenu > div {
    display: none !important;
  }
  
  .djui-menu {
    display: flex;
    flex-direction: row;
    gap: 1rem;
  }
}


/* =============================================
   CALENDAR COMPONENT
   ============================================= */

.djui-calendar {
  width: 100%;
  max-width: 20rem;
  background: var(--djui-card);
  border: 1px solid var(--djui-border);
  border-radius: var(--djui-radius-lg);
  padding: var(--djui-spacing-md);
  font-family: var(--djui-font-sans);
}

/* Header */
.djui-calendar header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--djui-spacing-md);
}

.djui-calendar header h2 {
  font-size: var(--djui-text-base);
  font-weight: var(--djui-font-semibold);
  color: var(--djui-card-foreground);
  margin: 0;
}

.djui-calendar header button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--djui-radius-md);
  color: var(--djui-muted-foreground);
  cursor: pointer;
  transition: all var(--djui-transition-fast);
}

.djui-calendar header button:hover {
  background: var(--djui-accent);
  color: var(--djui-accent-foreground);
}

.djui-calendar header button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.djui-calendar header button svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Days of week */
.djui-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.125rem;
  margin-bottom: var(--djui-spacing-xs);
}

.djui-calendar-weekdays div {
  text-align: center;
  font-size: var(--djui-text-xs);
  font-weight: var(--djui-font-medium);
  color: var(--djui-muted-foreground);
  padding: var(--djui-spacing-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Days grid */
.djui-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.125rem;
}

.djui-calendar-days button {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--djui-spacing-xs);
  background: transparent;
  border: none;
  border-radius: var(--djui-radius-md);
  font-size: var(--djui-text-sm);
  color: var(--djui-card-foreground);
  cursor: pointer;
  transition: all var(--djui-transition-fast);
  position: relative;
}

.djui-calendar-days button:hover:not(:disabled) {
  background: var(--djui-accent);
}

.djui-calendar-days button:focus-visible {
  outline: 2px solid var(--djui-ring);
  outline-offset: -2px;
}

/* Jour d'un autre mois */
.djui-calendar-days button[data-other-month] {
  color: var(--djui-muted-foreground);
  opacity: 0.4;
}

/* Jour sélectionné */
.djui-calendar-days button[data-selected] {
  background: var(--djui-primary);
  color: var(--djui-primary-foreground);
  font-weight: var(--djui-font-semibold);
}

.djui-calendar-days button[data-selected]:hover {
  background: var(--djui-primary);
}

/* Jour aujourd'hui */
.djui-calendar-days button[data-today]:not([data-selected]) {
  background: var(--djui-accent);
  font-weight: var(--djui-font-medium);
}

/* Jour désactivé */
.djui-calendar-days button:disabled {
  color: var(--djui-muted-foreground);
  opacity: 0.3;
  cursor: not-allowed;
}

/* Range selection (plage de dates) */
.djui-calendar-days button[data-in-range] {
  background: rgba(var(--djui-primary), 0.1);
}

.djui-calendar-days button[data-range-start],
.djui-calendar-days button[data-range-end] {
  background: var(--djui-primary);
  color: var(--djui-primary-foreground);
}

.djui-calendar-days button[data-range-start]:not([data-range-end]) {
  border-radius: var(--djui-radius-md) 0 0 var(--djui-radius-md);
}

.djui-calendar-days button[data-range-end]:not([data-range-start]) {
  border-radius: 0 var(--djui-radius-md) var(--djui-radius-md) 0;
}

/* Événements/dots sur les jours */
.djui-calendar-days button[data-has-event]::after {
  content: "";
  position: absolute;
  bottom: 0.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0.25rem;
  height: 0.25rem;
  background: var(--djui-primary);
  border-radius: var(--djui-radius-full);
}

.djui-calendar-days button[data-selected][data-has-event]::after {
  background: var(--djui-primary-foreground);
}

/* Footer (optionnel) */
.djui-calendar footer {
  margin-top: var(--djui-spacing-md);
  padding-top: var(--djui-spacing-md);
  border-top: 1px solid var(--djui-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.djui-calendar footer button {
  padding: var(--djui-spacing-xs) var(--djui-spacing-md);
  background: transparent;
  border: 1px solid var(--djui-border);
  border-radius: var(--djui-radius-md);
  font-size: var(--djui-text-sm);
  color: var(--djui-card-foreground);
  cursor: pointer;
  transition: all var(--djui-transition-fast);
}

.djui-calendar footer button:hover {
  background: var(--djui-accent);
  border-color: var(--djui-accent);
}

/* Variante inline (intégré dans un formulaire) */
.djui-calendar-inline {
  border: none;
  padding: 0;
  background: transparent;
}

/* Variante compacte */
.djui-calendar-compact {
  max-width: 16rem;
  padding: var(--djui-spacing-sm);
}

.djui-calendar-compact header h2 {
  font-size: var(--djui-text-sm);
}

.djui-calendar-compact header button {
  width: 1.5rem;
  height: 1.5rem;
}

.djui-calendar-compact .djui-calendar-weekdays div {
  font-size: 0.625rem;
  padding: 0.125rem;
}

.djui-calendar-compact .djui-calendar-days button {
  padding: 0.125rem;
  font-size: var(--djui-text-xs);
}

/* Calendrier avec plusieurs mois */
.djui-calendar-multi {
  display: flex;
  gap: var(--djui-spacing-lg);
  max-width: none;
}

.djui-calendar-multi > div {
  flex: 1;
}

/* Month/Year picker */
.djui-calendar-picker {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: var(--djui-spacing-xs);
  background: var(--djui-popover);
  border: 1px solid var(--djui-border);
  border-radius: var(--djui-radius-md);
  box-shadow: var(--djui-shadow-lg);
  padding: var(--djui-spacing-sm);
  z-index: var(--djui-z-dropdown);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--djui-spacing-xs);
  max-height: 15rem;
  overflow-y: auto;
}

.djui-calendar-picker button {
  padding: var(--djui-spacing-sm);
  background: transparent;
  border: none;
  border-radius: var(--djui-radius-sm);
  font-size: var(--djui-text-sm);
  color: var(--djui-popover-foreground);
  cursor: pointer;
  transition: all var(--djui-transition-fast);
}

.djui-calendar-picker button:hover {
  background: var(--djui-accent);
}

.djui-calendar-picker button[data-selected] {
  background: var(--djui-primary);
  color: var(--djui-primary-foreground);
  font-weight: var(--djui-font-semibold);
}

/* Dark mode adjustments */
.dark .djui-calendar {
  box-shadow: var(--djui-shadow-md);
}

/* Responsive */
@media (max-width: 640px) {
  .djui-calendar {
    max-width: 100%;
  }
  
  .djui-calendar-multi {
    flex-direction: column;
  }
}


/* =============================================
   DATEPICKER COMPONENT
   ============================================= */

.djui-datepicker {
  position: relative;
  width: 100%;
  font-family: var(--djui-font-sans);
}

/* Input trigger */
.djui-datepicker input {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0.625rem 2.5rem 0.625rem 1rem;
  background: var(--djui-background);
  color: var(--djui-foreground);
  border: 1px solid var(--djui-input);
  border-radius: var(--djui-radius-md);
  font-size: var(--djui-text-sm);
  transition: all var(--djui-transition-fast);
  outline: none;
  cursor: pointer;
}

.djui-datepicker input:hover {
  border-color: var(--djui-ring);
}

.djui-datepicker input:focus {
  border-color: var(--djui-ring);
  box-shadow: 0 0 0 3px rgba(var(--djui-ring), 0.1);
}

.djui-datepicker input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--djui-muted);
}

.djui-datepicker input::placeholder {
  color: var(--djui-muted-foreground);
}

/* Icon container */
.djui-datepicker-icon {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  pointer-events: none;
}

.djui-datepicker-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--djui-muted-foreground);
}

.djui-datepicker-icon button {
  pointer-events: auto;
  padding: 0.25rem;
  background: transparent;
  border: none;
  border-radius: var(--djui-radius-sm);
  cursor: pointer;
  transition: all var(--djui-transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.djui-datepicker-icon button:hover {
  background: var(--djui-accent);
}

.djui-datepicker-icon button svg {
  width: 1rem;
  height: 1rem;
}

/* Popup calendar */
.djui-datepicker-popup {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: var(--djui-z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition: all var(--djui-transition-fast);
}

.djui-datepicker-popup[data-open] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Position du popup */
.djui-datepicker-popup-right {
  left: auto;
  right: 0;
}

.djui-datepicker-popup-top {
  top: auto;
  bottom: calc(100% + 0.5rem);
}

/* Calendar dans le popup */
.djui-datepicker-popup .djui-calendar {
  box-shadow: var(--djui-shadow-xl);
}

/* Label */
.djui-datepicker-label {
  display: block;
  font-size: var(--djui-text-sm);
  font-weight: var(--djui-font-medium);
  color: var(--djui-foreground);
  margin-bottom: var(--djui-spacing-xs);
}

/* Helper text */
.djui-datepicker-helper {
  display: block;
  font-size: var(--djui-text-xs);
  color: var(--djui-muted-foreground);
  margin-top: var(--djui-spacing-xs);
}

/* Error state */
.djui-datepicker-error input {
  border-color: var(--djui-destructive);
}

.djui-datepicker-error input:focus {
  box-shadow: 0 0 0 3px rgba(var(--djui-destructive), 0.1);
}

.djui-datepicker-error .djui-datepicker-helper {
  color: var(--djui-destructive);
}

/* Success state */
.djui-datepicker-success input {
  border-color: var(--djui-success, #22c55e);
}

.djui-datepicker-success input:focus {
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

/* Tailles */
.djui-datepicker-sm input {
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  font-size: var(--djui-text-xs);
}

.djui-datepicker-sm .djui-datepicker-icon {
  right: 0.5rem;
}

.djui-datepicker-sm .djui-datepicker-icon svg {
  width: 1rem;
  height: 1rem;
}

.djui-datepicker-lg input {
  padding: 0.75rem 3rem 0.75rem 1.25rem;
  font-size: var(--djui-text-base);
}

.djui-datepicker-lg .djui-datepicker-icon {
  right: 1rem;
}

.djui-datepicker-lg .djui-datepicker-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Range DatePicker */
.djui-datepicker-range {
  display: flex;
  align-items: center;
  gap: var(--djui-spacing-sm);
}

.djui-datepicker-range > div {
  flex: 1;
}

.djui-datepicker-range-separator {
  color: var(--djui-muted-foreground);
  font-size: var(--djui-text-sm);
  padding: 0 var(--djui-spacing-xs);
}

/* Inline mode (toujours visible) */
.djui-datepicker-inline .djui-datepicker-popup {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  z-index: auto;
}

.djui-datepicker-inline input {
  display: none;
}

/* With clear button */
.djui-datepicker-clearable input {
  padding-right: 4rem;
}

/* Dark mode */
.dark .djui-datepicker-popup .djui-calendar {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}

/* Responsive */
@media (max-width: 640px) {
  .djui-datepicker-popup {
    left: 0;
    right: 0;
    width: 100%;
  }
  
  .djui-datepicker-popup .djui-calendar {
    max-width: 100%;
  }
  
  .djui-datepicker-range {
    flex-direction: column;
    align-items: stretch;
  }
  
  .djui-datepicker-range-separator {
    text-align: center;
    padding: var(--djui-spacing-xs) 0;
  }
}

/* Animation d'ouverture */
@keyframes djui-datepicker-fade-in {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.djui-datepicker-popup[data-open] {
  animation: djui-datepicker-fade-in 200ms ease-out;
}

/* Focus visible pour accessibilité */
.djui-datepicker input:focus-visible {
  outline: 2px solid var(--djui-ring);
  outline-offset: 2px;
}

/* =============================================
   RATING COMPONENT
   ============================================= */

.djui-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--djui-spacing-xs);
  font-family: var(--djui-font-sans);
}

/* Container des étoiles */
.djui-rating-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  position: relative;
}

/* Étoile individuelle */
.djui-rating-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: transform var(--djui-transition-fast);
  position: relative;
}

.djui-rating-star:hover {
  transform: scale(1.1);
}

.djui-rating-star:active {
  transform: scale(0.95);
}

.djui-rating-star svg {
  width: 100%;
  height: 100%;
  transition: all var(--djui-transition-fast);
}

/* Étoile vide */
.djui-rating-star[data-filled="false"] svg {
  fill: none;
  stroke: var(--djui-muted-foreground);
  stroke-width: 1.5;
}

/* Étoile remplie */
.djui-rating-star[data-filled="true"] svg {
  fill: var(--djui-warning, #f59e0b);
  stroke: var(--djui-warning, #f59e0b);
  stroke-width: 0;
}

/* Demi-étoile */
.djui-rating-star[data-half="true"] {
  position: relative;
}

.djui-rating-star[data-half="true"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.djui-rating-star[data-half="true"] svg:first-child {
  fill: var(--djui-warning, #f59e0b);
  stroke: var(--djui-warning, #f59e0b);
  clip-path: inset(0 50% 0 0);
}

.djui-rating-star[data-half="true"] svg:last-child {
  position: absolute;
  top: 0;
  left: 0;
  fill: none;
  stroke: var(--djui-muted-foreground);
  stroke-width: 1.5;
}

/* État hover */
.djui-rating:not([data-readonly]) .djui-rating-star:hover svg,
.djui-rating:not([data-readonly]) .djui-rating-star[data-hover="true"] svg {
  fill: var(--djui-warning, #f59e0b);
  stroke: var(--djui-warning, #f59e0b);
  stroke-width: 0;
}

/* Label du rating */
.djui-rating-label {
  font-size: var(--djui-text-sm);
  font-weight: var(--djui-font-medium);
  color: var(--djui-foreground);
  white-space: nowrap;
}

/* Valeur numérique */
.djui-rating-value {
  font-size: var(--djui-text-sm);
  color: var(--djui-muted-foreground);
  white-space: nowrap;
}

/* Nombre de votes */
.djui-rating-count {
  font-size: var(--djui-text-xs);
  color: var(--djui-muted-foreground);
  white-space: nowrap;
}

/* Mode readonly (lecture seule) */
.djui-rating[data-readonly] .djui-rating-star {
  cursor: default;
  pointer-events: none;
}

.djui-rating[data-readonly] .djui-rating-star:hover {
  transform: none;
}

/* Mode disabled */
.djui-rating[data-disabled] {
  opacity: 0.5;
  pointer-events: none;
}

.djui-rating[data-disabled] .djui-rating-star {
  cursor: not-allowed;
}

/* Tailles */
.djui-rating-sm .djui-rating-star {
  width: 1rem;
  height: 1rem;
}

.djui-rating-sm .djui-rating-label,
.djui-rating-sm .djui-rating-value {
  font-size: var(--djui-text-xs);
}

.djui-rating-sm .djui-rating-count {
  font-size: 0.625rem;
}

.djui-rating-lg .djui-rating-star {
  width: 2rem;
  height: 2rem;
}

.djui-rating-lg .djui-rating-label,
.djui-rating-lg .djui-rating-value {
  font-size: var(--djui-text-base);
}

.djui-rating-lg .djui-rating-count {
  font-size: var(--djui-text-sm);
}

.djui-rating-xl .djui-rating-star {
  width: 2.5rem;
  height: 2.5rem;
}

.djui-rating-xl .djui-rating-label,
.djui-rating-xl .djui-rating-value {
  font-size: var(--djui-text-lg);
}

.djui-rating-xl .djui-rating-count {
  font-size: var(--djui-text-base);
}

/* Couleurs personnalisées */
.djui-rating[data-color="red"] .djui-rating-star[data-filled="true"] svg,
.djui-rating[data-color="red"] .djui-rating-star:hover svg {
  fill: var(--djui-destructive);
  stroke: var(--djui-destructive);
}

.djui-rating[data-color="green"] .djui-rating-star[data-filled="true"] svg,
.djui-rating[data-color="green"] .djui-rating-star:hover svg {
  fill: var(--djui-success, #22c55e);
  stroke: var(--djui-success, #22c55e);
}

.djui-rating[data-color="blue"] .djui-rating-star[data-filled="true"] svg,
.djui-rating[data-color="blue"] .djui-rating-star:hover svg {
  fill: var(--djui-primary);
  stroke: var(--djui-primary);
}

.djui-rating[data-color="purple"] .djui-rating-star[data-filled="true"] svg,
.djui-rating[data-color="purple"] .djui-rating-star:hover svg {
  fill: #a855f7;
  stroke: #a855f7;
}

/* Icônes alternatives (hearts, thumbs) */
.djui-rating[data-icon="heart"] .djui-rating-star[data-filled="true"] svg {
  fill: var(--djui-destructive);
  stroke: var(--djui-destructive);
}

.djui-rating[data-icon="heart"] .djui-rating-star:hover svg {
  fill: var(--djui-destructive);
  stroke: var(--djui-destructive);
}

/* Feedback visuel au clic */
@keyframes djui-rating-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

.djui-rating-star[data-clicked] {
  animation: djui-rating-pulse 0.3s ease-out;
}

/* Message de feedback */
.djui-rating-message {
  margin-top: var(--djui-spacing-xs);
  font-size: var(--djui-text-sm);
  color: var(--djui-muted-foreground);
  font-style: italic;
}

/* Layout vertical */
.djui-rating-vertical {
  flex-direction: column;
  align-items: flex-start;
}

.djui-rating-vertical .djui-rating-stars {
  margin-top: var(--djui-spacing-xs);
}

/* Focus visible pour accessibilité */
.djui-rating-star:focus {
  outline: none;
}

.djui-rating-star:focus-visible {
  outline: 2px solid var(--djui-ring);
  outline-offset: 2px;
  border-radius: var(--djui-radius-sm);
}

/* Animation d'apparition progressive */
@keyframes djui-rating-fade-in {
  from {
    opacity: 0;
    transform: translateY(0.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.djui-rating-star {
  animation: djui-rating-fade-in 0.2s ease-out backwards;
}

.djui-rating-star:nth-child(1) { animation-delay: 0s; }
.djui-rating-star:nth-child(2) { animation-delay: 0.05s; }
.djui-rating-star:nth-child(3) { animation-delay: 0.1s; }
.djui-rating-star:nth-child(4) { animation-delay: 0.15s; }
.djui-rating-star:nth-child(5) { animation-delay: 0.2s; }

/* Responsive */
@media (max-width: 640px) {
  .djui-rating {
    flex-wrap: wrap;
  }
  
  .djui-rating-label,
  .djui-rating-value,
  .djui-rating-count {
    width: 100%;
    margin-top: var(--djui-spacing-xs);
  }
}

/* =============================================
   CAROUSEL / SLIDER COMPONENT
   ============================================= */

.djui-carousel {
  position: relative;
  overflow: hidden;
  border-radius: var(--djui-radius-lg);
  user-select: none;
  touch-action: pan-y pinch-zoom;
}

/* Track contenant les slides */
.djui-carousel-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.djui-carousel[data-effect="fade"] .djui-carousel-track {
  position: relative;
  transition: none;
}

/* Slides */
.djui-carousel-slide {
  flex: 0 0 100%;
  min-width: 0;
  position: relative;
}

.djui-carousel[data-effect="fade"] .djui-carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, visibility 0.5s;
}

.djui-carousel[data-effect="fade"] .djui-carousel-slide[data-active] {
  opacity: 1;
  visibility: visible;
  position: relative;
}

/* Multiple slides visibles */
.djui-carousel[data-slides-to-show="2"] .djui-carousel-slide {
  flex: 0 0 50%;
}

.djui-carousel[data-slides-to-show="3"] .djui-carousel-slide {
  flex: 0 0 33.333%;
}

.djui-carousel[data-slides-to-show="4"] .djui-carousel-slide {
  flex: 0 0 25%;
}

/* Flèches de navigation */
.djui-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  
  background: rgba(255, 255, 255, 0.9);
  color: var(--djui-foreground);
  border: none;
  border-radius: var(--djui-radius-full);
  box-shadow: var(--djui-shadow-md);
  
  cursor: pointer;
  transition: all var(--djui-transition-fast);
  
  opacity: 0.7;
}

.djui-carousel-arrow:hover:not(:disabled) {
  opacity: 1;
  background: white;
  box-shadow: var(--djui-shadow-lg);
  transform: translateY(-50%) scale(1.1);
}

.djui-carousel-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.5);
}

.djui-carousel-arrow svg {
  width: 1.25rem;
  height: 1.25rem;
}

.djui-carousel-arrow-prev {
  left: 1rem;
}

.djui-carousel-arrow-next {
  right: 1rem;
}

/* Variante outside (flèches à l'extérieur) */
.djui-carousel[data-arrows="outside"] .djui-carousel-arrow-prev {
  left: -3rem;
}

.djui-carousel[data-arrows="outside"] .djui-carousel-arrow-next {
  right: -3rem;
}

/* Dots / Indicateurs */
.djui-carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--djui-spacing-xs);
  margin-top: var(--djui-spacing-md);
}

.djui-carousel-dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  background: var(--djui-muted);
  border: none;
  border-radius: var(--djui-radius-full);
  cursor: pointer;
  transition: all var(--djui-transition-fast);
}

.djui-carousel-dot:hover {
  background: var(--djui-muted-foreground);
  transform: scale(1.2);
}

.djui-carousel-dot[data-active] {
  width: 1.5rem;
  background: var(--djui-primary);
}

/* Barre de progression */
.djui-carousel-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.25rem;
  background: rgba(0, 0, 0, 0.1);
}

.djui-carousel-progress-bar {
  height: 100%;
  background: var(--djui-primary);
  transition: width 0.3s ease;
}

/* Thumbnails carousel */
.djui-carousel-thumbnails {
  margin-top: var(--djui-spacing-md);
}

.djui-carousel-thumbnails .djui-carousel-slide {
  padding: 0 var(--djui-spacing-xs);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--djui-transition-fast);
}

.djui-carousel-thumbnails .djui-carousel-slide:hover {
  opacity: 0.8;
}

.djui-carousel-thumbnails .djui-carousel-slide[data-active] {
  opacity: 1;
  outline: 2px solid var(--djui-primary);
  outline-offset: 2px;
}

/* Overlay content */
.djui-carousel-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--djui-spacing-lg);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  color: white;
}

.djui-carousel-overlay h3 {
  font-size: var(--djui-font-size-lg);
  font-weight: var(--djui-font-semibold);
  margin-bottom: var(--djui-spacing-xs);
}

.djui-carousel-overlay p {
  font-size: var(--djui-font-size-sm);
  opacity: 0.9;
}

/* Variantes de taille */
.djui-carousel[data-size="sm"] {
  height: 200px;
}

.djui-carousel[data-size="md"] {
  height: 400px;
}

.djui-carousel[data-size="lg"] {
  height: 600px;
}

.djui-carousel[data-size="full"] {
  height: 100vh;
}

/* Image carousel */
.djui-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Card carousel */
.djui-carousel-card {
  margin: 0 var(--djui-spacing-sm);
  padding: var(--djui-spacing-lg);
  background: var(--djui-card);
  border: 1px solid var(--djui-border);
  border-radius: var(--djui-radius-lg);
  box-shadow: var(--djui-shadow-sm);
  transition: all var(--djui-transition-fast);
}

.djui-carousel-card:hover {
  box-shadow: var(--djui-shadow-lg);
  transform: translateY(-4px);
}

/* Loading state */
.djui-carousel[data-loading] .djui-carousel-slide {
  background: var(--djui-muted);
  animation: djui-skeleton-loading 1.5s ease-in-out infinite;
}

/* Dark mode */
.dark .djui-carousel-arrow {
  background: rgba(0, 0, 0, 0.8);
  color: white;
}

.dark .djui-carousel-arrow:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.9);
}

/* Responsive */
@media (max-width: 768px) {
  .djui-carousel-arrow {
    width: 2rem;
    height: 2rem;
  }
  
  .djui-carousel-arrow svg {
    width: 1rem;
    height: 1rem;
  }
  
  .djui-carousel-arrow-prev {
    left: 0.5rem;
  }
  
  .djui-carousel-arrow-next {
    right: 0.5rem;
  }
  
  .djui-carousel[data-arrows="outside"] .djui-carousel-arrow-prev,
  .djui-carousel[data-arrows="outside"] .djui-carousel-arrow-next {
    left: 0.5rem;
    right: 0.5rem;
  }
  
  .djui-carousel-overlay {
    padding: var(--djui-spacing-md);
  }
}

/* Animation d'entrée */
@keyframes djui-carousel-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.djui-carousel-slide[data-animate] {
  animation: djui-carousel-fade-in 0.5s ease-out;
}

/* État dragging */
.djui-carousel[data-dragging] {
  cursor: grabbing;
}

.djui-carousel[data-dragging] .djui-carousel-track {
  transition: none;
}


/* =============================================
   HORIZONTAL SCROLL COMPONENT - CSS
   ============================================= */

.djui-hscroll {
  position: relative;
}

/* Container avec scrollbar cachée */
.djui-hscroll-container {
  display: flex;
  gap: var(--djui-spacing-md);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  
  /* Scroll snap */
  scroll-snap-type: x mandatory;
  scroll-padding: var(--djui-spacing-md);
}

.djui-hscroll-container::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* Items */
.djui-hscroll-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

/* Variantes de largeur */
.djui-hscroll-item[data-width="sm"] { width: 200px; }
.djui-hscroll-item[data-width="md"] { width: 300px; }
.djui-hscroll-item[data-width="lg"] { width: 400px; }
.djui-hscroll-item[data-width="auto"] { width: auto; }

/* Flèches de navigation (optionnelles) */
.djui-hscroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  
  background: rgba(255, 255, 255, 0.95);
  color: var(--djui-foreground);
  border: 1px solid var(--djui-border);
  border-radius: var(--djui-radius-full);
  box-shadow: var(--djui-shadow-md);
  
  cursor: pointer;
  transition: all var(--djui-transition-fast);
  opacity: 0;
  pointer-events: none;
}

.djui-hscroll:hover .djui-hscroll-arrow {
  opacity: 1;
  pointer-events: auto;
}

.djui-hscroll-arrow:hover:not(:disabled) {
  background: white;
  box-shadow: var(--djui-shadow-lg);
  transform: translateY(-50%) scale(1.1);
}

.djui-hscroll-arrow:disabled {
  opacity: 0.3 !important;
  cursor: not-allowed;
}

.djui-hscroll-arrow svg {
  width: 1.25rem;
  height: 1.25rem;
}

.djui-hscroll-arrow-prev { left: -1.25rem; }
.djui-hscroll-arrow-next { right: -1.25rem; }

/* Scroll indicator (petite barre) */
.djui-hscroll-indicator {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  margin-top: var(--djui-spacing-md);
}

.djui-hscroll-indicator-dot {
  width: 0.5rem;
  height: 0.5rem;
  background: var(--djui-muted);
  border-radius: var(--djui-radius-full);
  transition: all 0.3s ease;
}

.djui-hscroll-indicator-dot.active {
  width: 1.5rem;
  background: var(--djui-primary);
}

/* Scrollbar visible (variante) */
.djui-hscroll[data-scrollbar="visible"] .djui-hscroll-container {
  scrollbar-width: thin;
  scrollbar-color: var(--djui-muted) transparent;
  padding-bottom: 0.5rem;
}

.djui-hscroll[data-scrollbar="visible"] .djui-hscroll-container::-webkit-scrollbar {
  display: block;
  height: 6px;
}

.djui-hscroll[data-scrollbar="visible"] .djui-hscroll-container::-webkit-scrollbar-track {
  background: var(--djui-muted);
  border-radius: 3px;
}

.djui-hscroll[data-scrollbar="visible"] .djui-hscroll-container::-webkit-scrollbar-thumb {
  background: var(--djui-muted-foreground);
  border-radius: 3px;
}

/* Fade edges effect */
.djui-hscroll[data-fade="true"]::before,
.djui-hscroll[data-fade="true"]::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  pointer-events: none;
  z-index: 5;
}

.djui-hscroll[data-fade="true"]::before {
  left: 0;
  background: linear-gradient(to right, white, transparent);
}

.djui-hscroll[data-fade="true"]::after {
  right: 0;
  background: linear-gradient(to left, white, transparent);
}

/* =============================================
   CARD STYLES (pour les exemples)
   ============================================= */

.product-card {
  background: white;
  border: 1px solid var(--djui-border);
  border-radius: var(--djui-radius-lg);
  overflow: hidden;
  transition: all var(--djui-transition-fast);
}

.product-card:hover {
  box-shadow: var(--djui-shadow-lg);
  transform: translateY(-4px);
}

.product-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.product-card-content {
  padding: var(--djui-spacing-md);
}

.product-card h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.product-card .price {
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--djui-primary);
}

.product-card .rating {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: var(--djui-muted-foreground);
  margin-top: 0.5rem;
}

/* Category card */
.category-card {
  position: relative;
  height: 150px;
  border-radius: var(--djui-radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--djui-transition-fast);
}

.category-card:hover {
  transform: scale(1.05);
}

.category-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  display: flex;
  align-items: flex-end;
  padding: var(--djui-spacing-md);
  color: white;
  font-weight: 600;
}

/* Avatar circle */
.avatar-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: var(--djui-shadow-md);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--djui-transition-fast);
}

.avatar-circle:hover {
  transform: scale(1.1);
  border-color: var(--djui-primary);
}

.avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Stats card */
.stats-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: var(--djui-spacing-lg);
  border-radius: var(--djui-radius-lg);
  min-width: 200px;
}

.stats-card h4 {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.stats-card p {
  opacity: 0.9;
}

/* Responsive */
@media (max-width: 768px) {
  .djui-hscroll-arrow {
    display: none;
  }

  .djui-hscroll-item[data-width="md"] { width: 250px; }
  .djui-hscroll-item[data-width="lg"] { width: 300px; }
}