pdf_oralia_vibe/frontend/src/style.css

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

/*
 * Design system : une seule palette sombre pour toute l'application.
 *
 *   gray-950  fond de page           gray-900  surfaces (cartes, header)
 *   gray-800  sous-surfaces          gray-700  bordures
 *   white / gray-400 / gray-500      textes principal / secondaire / tertiaire
 *   blue-600                         accent
 */
@layer components {

  /* --- Structure de page ------------------------------------------------ */

  /* Conteneur racine d'une page : pleine largeur, marge laterale fixe. */
  .page {
    @apply flex-1 overflow-auto bg-gray-950 px-6 py-6;
  }

  /* Page sans defilement propre (split view type edition). */
  .page-fixed {
    @apply flex-1 flex flex-col overflow-hidden bg-gray-950;
  }

  .page-content {
    @apply space-y-6;
  }

  .page-header {
    @apply flex items-start justify-between gap-4;
  }

  .page-title {
    @apply text-xl font-semibold text-white;
  }

  .page-subtitle {
    @apply text-sm text-gray-400 mt-1;
  }

  /* --- Cartes ----------------------------------------------------------- */

  .card {
    @apply bg-gray-900 border border-gray-700 rounded-lg overflow-hidden;
  }

  .card-header {
    @apply px-4 py-3 border-b border-gray-700 flex items-center justify-between gap-3;
  }

  .card-title {
    @apply text-sm font-medium text-gray-300;
  }

  .card-body {
    @apply p-4;
  }

  /* Bloc secondaire a l'interieur d'une carte. */
  .subcard {
    @apply bg-gray-800 border border-gray-700 rounded-lg;
  }

  /* --- Boutons ---------------------------------------------------------- */

  .btn {
    @apply inline-flex items-center justify-center gap-2 px-3 py-1.5 text-sm rounded-lg
           transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700;
  }

  .btn-secondary {
    @apply bg-gray-800 text-gray-300 border border-gray-700 hover:bg-gray-700 hover:text-white;
  }

  .btn-ghost {
    @apply text-gray-400 hover:text-white hover:bg-gray-800;
  }

  .btn-warning {
    @apply bg-amber-600 text-white hover:bg-amber-700;
  }

  .btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700;
  }

  /* Variante compacte pour les actions dans les listes et tableaux. */
  .btn-sm {
    @apply px-2 py-1 text-xs gap-1.5;
  }

  /* --- Formulaires ------------------------------------------------------ */

  .form-label {
    @apply block text-sm font-medium text-gray-300 mb-1;
  }

  /* [color-scheme:dark] : les widgets natifs (calendrier, spinners) suivent le theme. */
  .input {
    @apply w-full bg-gray-950 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white
           placeholder-gray-500 focus:outline-none focus:border-blue-500 transition-colors
           [color-scheme:dark];
  }

  select.input {
    @apply cursor-pointer;
  }

  /* Champ de saisie dans une cellule de tableau. Bordure invisible au repos :
     une grille de 14 colonnes encadrees serait illisible, alors qu'un tableau
     de saisie doit d'abord se lire. */
  .input-cell {
    @apply bg-transparent border border-transparent rounded px-2 py-1 text-sm text-white
           placeholder-gray-600 hover:border-gray-700 focus:outline-none focus:border-blue-500
           focus:bg-gray-950 transition-colors [color-scheme:dark];
  }

  .form-hint {
    @apply text-xs text-gray-500 mt-1;
  }

  /* --- Tableaux --------------------------------------------------------- */

  /* Enveloppe a poser autour d'un <table> pour le defilement horizontal. */
  .table-wrap {
    @apply overflow-x-auto;
  }

  .table {
    @apply w-full text-sm;
  }

  .table thead {
    @apply bg-gray-800 border-b border-gray-700;
  }

  .table th {
    @apply px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider whitespace-nowrap;
  }

  .table tbody {
    @apply divide-y divide-gray-800;
  }

  .table td {
    @apply px-4 py-3 text-gray-300;
  }

  .table tbody tr {
    @apply hover:bg-gray-800/50 transition-colors;
  }

  /* --- Badges ----------------------------------------------------------- */

  .badge {
    @apply inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium;
  }

  .badge-neutral {
    @apply bg-gray-700 text-gray-300;
  }

  .badge-info {
    @apply bg-blue-500/15 text-blue-400;
  }

  .badge-success {
    @apply bg-green-500/15 text-green-400;
  }

  .badge-warning {
    @apply bg-amber-500/15 text-amber-400;
  }

  .badge-danger {
    @apply bg-red-500/15 text-red-400;
  }

  /* --- Etats ------------------------------------------------------------ */

  .empty-state {
    @apply p-12 text-center text-gray-500;
  }

  .spinner {
    @apply inline-block animate-spin rounded-full border-2 border-gray-700 border-t-blue-400;
  }
}

/* Barres de defilement accordees au theme sombre. */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #111827; /* gray-900 */
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #374151; /* gray-700 */
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #4b5563; /* gray-600 */
}