/* EduDrop — app.css */

/* Alpine.js : masquer avant initialisation (anti-FOUC) */
[x-cloak] { display: none !important; }

/* Scrollbar personnalisée */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.dark ::-webkit-scrollbar-thumb { background: #475569; }

/* Transitions globales sur le thème */
*, *::before, *::after {
  transition-property: background-color, border-color, color;
  transition-duration: 150ms;
}

/* Code badge */
.exam-code {
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
  letter-spacing: 0.15em;
}

/* Dropzone */
#dropzone {
  cursor: pointer;
  user-select: none;
}
#dropzone:focus-within {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

/* Progress bar animation */
@keyframes progress-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
#upload-fill {
  transition: width 0.3s ease;
  animation: progress-pulse 1.5s ease-in-out infinite;
}

/* Badge statuts */
.badge-draft     { background: #f3f4f6; color: #6b7280; }
.badge-scheduled { background: #fef3c7; color: #d97706; }
.badge-active    { background: #d1fae5; color: #059669; }
.badge-closed    { background: #fee2e2; color: #dc2626; }
.badge-archived  { background: #e5e7eb; color: #9ca3af; }

.dark .badge-draft     { background: #1f2937; color: #9ca3af; }
.dark .badge-scheduled { background: #451a03; color: #fbbf24; }
.dark .badge-active    { background: #064e3b; color: #34d399; }
.dark .badge-closed    { background: #450a0a; color: #f87171; }
.dark .badge-archived  { background: #111827; color: #6b7280; }

.status-bar-archived { background-color: #9ca3af; }
.dark .status-bar-archived { background-color: #374151; }

/* Carte examen dans le dashboard */
.exam-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.exam-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.dark .exam-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

/* Input focus ring uniforme */
input:focus, select:focus, textarea:focus {
  outline: 2px solid #6366f1;
  outline-offset: 0;
}

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.375rem; padding: 0.5rem 1rem;
  font-size: 0.875rem; font-weight: 500; border-radius: 0.5rem;
  cursor: pointer; transition: all 0.15s;
  border: 1px solid transparent;
}
.btn-primary {
  background: #4f46e5; color: #fff;
}
.btn-primary:hover { background: #4338ca; }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-secondary {
  background: #fff; color: #374151;
  border-color: #d1d5db;
}
.btn-secondary:hover { background: #f9fafb; }

.dark .btn-secondary {
  background: #1f2937; color: #d1d5db;
  border-color: #374151;
}
.dark .btn-secondary:hover { background: #374151; }

.btn-danger { background: #dc2626; color: #fff; }
.btn-danger:hover { background: #b91c1c; }

.btn-ghost {
  background: transparent; color: #6b7280;
}
.btn-ghost:hover { background: #f3f4f6; color: #374151; }
.dark .btn-ghost:hover { background: #1f2937; color: #d1d5db; }

/* Bouton icône compact (vue liste — actions) */
.btn.btn-icon {
  padding: 0.25rem;
  gap: 0;
  min-width: 0;
  border-radius: 0.375rem;
}

/* Form elements */
.form-input {
  width: 100%;
  padding-top: 0.5rem; padding-bottom: 0.5rem;
  padding-left: 0.75rem; padding-right: 0.75rem;
  background: #f9fafb; color: #111827;
  border: 1px solid #9ca3af; border-radius: 0.5rem;
  font-size: 0.875rem;
}
.form-input:focus {
  background: #fff;
  border-color: #6366f1;
}
.dark .form-input {
  background: #1f2937; color: #f3f4f6;
  border-color: #374151;
}
.dark .form-input:focus {
  background: #1f2937;
  border-color: #6366f1;
}
.form-input::placeholder { color: #9ca3af; }
.dark .form-input::placeholder { color: #6b7280; }

.dark .form-input::-webkit-calendar-picker-indicator {
  filter: invert(0.8);
  cursor: pointer;
}

.form-label {
  display: block; font-size: 0.875rem;
  font-weight: 500; color: #374151; margin-bottom: 0.375rem;
}
.dark .form-label { color: #d1d5db; }

/* Lecteur audio natif : contrôles assortis au thème (sinon pastille blanche) */
.edu-audio { color-scheme: light; border-radius: 9999px; }
.dark .edu-audio { color-scheme: dark; }

/* Équaliseur d'enregistrement — animation CSS pure (ne touche PAS le flux micro,
   sinon Safari prive le MediaRecorder de données → fichier vide). */
@keyframes edu-eq { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
.edu-eq-bar { transform-origin: bottom; animation: edu-eq 0.85s ease-in-out infinite; }

/* Barre d'état draft des cartes (compatible dark mode via Alpine :class) */
.status-bar-draft { background-color: #e5e7eb; }
.dark .status-bar-draft { background-color: #374151; }

/* Chips de statistiques (strip filtre dashboard) */
.stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid;
  transition: all 0.15s;
  cursor: pointer;
  white-space: nowrap;
}

/* Surbrillance des termes de recherche */
mark {
  background-color: #fef08a;
  color: inherit;
  border-radius: 2px;
  padding: 0 2px;
  font-style: normal;
}
.dark mark {
  background-color: #78350f;
  color: #fef3c7;
}

/* Icône de tri dans les en-têtes de tableau */
.sort-icon {
  font-size: 0.6rem;
  line-height: 1;
  display: inline-block;
  transition: color 0.15s;
}

/* ── Quill editor — dark mode overrides ──────────────────────────────────── */
.ql-toolbar.ql-snow {
  border-color: #9ca3af; border-radius: 0.5rem 0.5rem 0 0;
  background: #f9fafb;
}
.ql-container.ql-snow {
  border-color: #9ca3af; border-radius: 0 0 0.5rem 0.5rem;
  font-size: 0.875rem;
}
.ql-editor { min-height: 7rem; color: #111827; }
.ql-editor.ql-blank::before { color: #9ca3af; font-style: normal; }

.dark .ql-toolbar.ql-snow  { background: #1f2937; border-color: #374151; }
.dark .ql-container.ql-snow { background: #1f2937; border-color: #374151; }
.dark .ql-editor { color: #f3f4f6; }
.dark .ql-editor.ql-blank::before { color: #6b7280; }
.dark .ql-snow .ql-stroke { stroke: #9ca3af; }
.dark .ql-snow .ql-fill,
.dark .ql-snow .ql-stroke.ql-fill { fill: #9ca3af; }
.dark .ql-snow .ql-picker { color: #9ca3af; }
.dark .ql-snow .ql-picker-options {
  background: #111827; border-color: #374151;
}
.dark .ql-snow .ql-picker-item:hover,
.dark .ql-snow .ql-picker-item.ql-selected { color: #f3f4f6; }
.dark .ql-snow button:hover .ql-stroke,
.dark .ql-snow .ql-picker-label:hover .ql-stroke { stroke: #f3f4f6; }
.dark .ql-snow button:hover .ql-fill { fill: #f3f4f6; }
.dark .ql-snow button.ql-active .ql-stroke { stroke: #818cf8; }
.dark .ql-snow button.ql-active .ql-fill { fill: #818cf8; }

/* ── Affichage du contenu Quill (description rich text) ──────────────────── */
.rich-content p { margin-bottom: 0.4rem; line-height: 1.6; }
.rich-content p:last-child { margin-bottom: 0; }
.rich-content strong { font-weight: 600; }
.rich-content em { font-style: italic; }
.rich-content u { text-decoration: underline; }
.rich-content s { text-decoration: line-through; }
/* !important nécessaire : Tailwind preflight reset menu,ol,ul{list-style:none;margin:0;padding:0} */
.rich-content ul { list-style: disc !important; padding-left: 1.5rem !important; margin-bottom: 0.5rem; }
.rich-content ol { list-style: decimal !important; padding-left: 1.5rem !important; margin-bottom: 0.5rem; }
.rich-content li { display: list-item !important; margin-bottom: 0.15rem; }
/* !important nécessaire : Tailwind preflight reset a{color:inherit;text-decoration:inherit} */
.rich-content a { color: #6366f1 !important; text-decoration: underline !important; }
.dark .rich-content a { color: #818cf8 !important; }

/* Table */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left; font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: #6b7280; padding: 0.75rem 1rem;
  border-bottom: 1px solid #e5e7eb;
}
.dark .data-table th { color: #9ca3af; border-color: #374151; }
.data-table td {
  padding: 0.875rem 1rem; font-size: 0.875rem;
  border-bottom: 1px solid #f3f4f6; color: #374151;
}
.dark .data-table td { border-color: #1f2937; color: #d1d5db; }
.data-table tr:hover td { background: #f9fafb; }
.dark .data-table tr:hover td { background: #1f2937; }

/* Flash discret quand un nouveau dépôt arrive (mise à jour live) */
@keyframes subflash {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
  20%  { box-shadow: 0 0 0 3px rgba(16,185,129,0.45); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
.sub-flash { animation: subflash 1.2s ease-out; }

/* Champs nombre : flèches +/- toujours visibles (discoverabilité de l'ajustement) */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity: 1;            /* WebKit/Chrome : ne pas masquer hors survol */
  height: 1.6rem;
  cursor: pointer;
}
input[type=number] { -moz-appearance: number-input; }  /* Firefox : flèches visibles */