/* === Design System Riond-Vert — composants custom ===
   Complète tailwind.css (généré par `npm run build:css`).
   Valeurs alignées sur C:\apps\candidatures\src\app\globals.css afin que le
   parc reste visuellement identique d'une app à l'autre.
   Référence : C:\apps\candidatures\RIOND-VERT-DESIGN-SYSTEM.md */

:root {
  --rv-teal: #00a679;
  --rv-navy: #0f172a;
  --rv-lime: #98b430;
}

html {
  -webkit-text-size-adjust: 100%;
}

/* Numéros tabulaires (AVS, n° de résident, chambres) */
.tabular {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* --- Navigation (pilule grise, actif navy) --- */
.nav-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(71 85 105);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.nav-btn:hover {
  background: rgb(241 245 249);
}
.nav-btn.active {
  background: rgb(15 23 42);
  color: #fff;
}

/* --- Bouton d'action secondaire --- */
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  background: #fff;
  border: 1px solid rgb(203 213 225);
  color: rgb(15 23 42);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.action-btn:hover {
  background: rgb(248 250 252);
  border-color: rgb(148 163 184);
}
.action-btn:active {
  background: rgb(241 245 249);
}
.action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- CTA principal teal --- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  background: var(--rv-teal);
  color: #fff;
  border: 0;
  cursor: pointer;
  transition: background-color 0.15s;
}
.btn-primary:hover {
  background: #048a64;
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  background: rgb(254 226 226);
  color: rgb(185 28 28);
  border: 0;
  cursor: pointer;
  transition: background-color 0.15s;
}
.btn-danger:hover {
  background: rgb(254 202 202);
}
.btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- Champs de formulaire : focus teal (DS §12) --- */
.field {
  width: 100%;
  border-radius: 0.5rem;
  border: 1px solid rgb(203 213 225);
  background: #fff;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: rgb(15 23 42);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field:focus {
  border-color: var(--rv-teal);
  box-shadow: 0 0 0 3px rgba(0, 166, 121, 0.18);
}
.field:disabled,
.field[readonly] {
  background: rgb(248 250 252);
  color: rgb(100 116 139);
  cursor: not-allowed;
}
/* Libellé au-dessus du champ */
.field-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgb(100 116 139);
  margin-bottom: 0.25rem;
}
/* Champ rempli automatiquement par l'OCR — signalé discrètement */
.field.ocr-filled {
  border-color: var(--rv-lime);
  background: #fbfdf5;
}

/* --- Carte standard (DS §7.1) --- */
.card {
  background: #fff;
  border: 1px solid rgb(226 232 240);
  border-radius: 0.75rem;
}

/* --- Table liste (DS §6.6) --- */
table.list {
  width: 100%;
  border-collapse: collapse;
}
table.list thead th {
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(100 116 139);
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgb(226 232 240);
}
table.list tbody td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgb(241 245 249);
  font-size: 0.875rem;
}
table.list tbody tr:hover {
  background: rgb(248 250 252);
}
table.list tbody tr.cliquable {
  cursor: pointer;
}

/* --- Liens & code inline --- */
.lien {
  color: var(--rv-teal);
  text-decoration: none;
  font-weight: 500;
}
.lien:hover {
  text-decoration: underline;
}
.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8em;
  background: rgb(241 245 249);
  color: rgb(15 23 42);
  padding: 0.1em 0.4em;
  border-radius: 0.25rem;
}

/* --- Indicateur de status (DS §6.7) --- */
.live-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: rgb(34 197 94);
  margin-right: 0.4rem;
  animation: pulse 2s infinite;
}
#status.error .live-dot {
  background: rgb(220 38 38);
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* --- Pastilles de statut de dossier ---
   Reprend les couleurs sémantiques du DS §3.3 (aucune couleur inventée).
   Statuts métier : Brouillon -> Pret -> Envoye / Erreur. */

/* `hidden` doit cacher. Sans cette regle, il ne cache rien sur la moitie de
   l'application.

   Tailwind pose `[hidden]:where(...) { display: none }` dans son preflight,
   puis `.block`, `.flex` et `.grid` plus loin dans le meme fichier. Le
   `:where()` n'ajoute aucune specificite : les trois utilitaires ont donc la
   meme (0,1,0) que `[hidden]`, et gagnent par l'ordre du fichier.

   Consequence constatee le 01.09.2026 : le pliage des groupes (corps en
   `grid`) et les champs conditionnels (`block` / `flex`) ne masquaient rien.
   Les dates d'accueil temporaire restaient visibles pour un resident
   permanent alors que le code les excluait correctement.

   `!important` est ici le bon outil : `hidden` n'est pas une preference de
   mise en page, c'est l'affirmation que l'element n'est pas rendu. */
[hidden] {
  display: none !important;
}

.chip {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
}
.chip.brouillon {
  background: rgb(241 245 249);
  color: rgb(71 85 105);
}
/* Provenance d’un candidat de la liste d’attente. La teinte marque signale la
   demande arrivée seule par le formulaire public : c’est celle que personne
   à l’EMS n’a encore vue. */
.chip.publique {
  background: rgb(0 166 121 / 0.10);
  color: rgb(4 120 87);
}
.chip.neutre {
  background: rgb(241 245 249);
  color: rgb(100 116 139);
}
.chip.pret {
  background: #fffbeb;
  color: #92400e;
}
.chip.envoye {
  background: rgb(220 252 231);
  color: #15803d;
}
.chip.erreur {
  background: rgb(254 226 226);
  color: #dc2626;
}

/* Champs repris dans Domis. Deux teintes de la meme famille : les onze
   obligatoires vivent deja dans un groupe qui les annonce, alors que les six
   supplementaires sont disperses dans la feuille — c'est a eux qu'il faut
   accrocher l'oeil, d'ou le remplissage plein. */
.chip.domis {
  background: rgb(0 166 121 / 0.12);
  color: rgb(4 120 87);
}
.chip.domis-sup {
  background: #00a679;
  color: #fff;
}

/* --- Filet et pilule colorés (DS §6.3, §6.4) --- */
.bd-bar {
  height: 0.25rem;
  width: 100%;
}
.bd-bar.cristal   { background: linear-gradient(90deg, #2563eb, #60a5fa); }
.bd-bar.diamant   { background: linear-gradient(90deg, #881337, #e11d48); }
.bd-bar.emeraude  { background: linear-gradient(90deg, #059669, #34d399); }
.bd-bar.saphir    { background: linear-gradient(90deg, #4f46e5, #818cf8); }
.bd-bar.amethyste { background: linear-gradient(90deg, #a21caf, #d946ef); }
.bd-bar.ssjn      { background: linear-gradient(90deg, #0f766e, #2dd4bf); }

.bd-pill {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
}
.bd-pill.cristal   { background: #eff6ff; color: #1d4ed8; }
.bd-pill.diamant   { background: #fff1f2; color: #9f1239; }
.bd-pill.emeraude  { background: #ecfdf5; color: #047857; }
.bd-pill.saphir    { background: #eef2ff; color: #4338ca; }
.bd-pill.amethyste { background: #fdf4ff; color: #a21caf; }
.bd-pill.ssjn      { background: #f0fdfa; color: #115e59; }

/* --- Bandeau d'authentification / lecture seule (DS §6.8) --- */
.auth-banner {
  border-radius: 0.5rem;
  border: 1px solid #fcd34d;
  background: #fffbeb;
  color: #92400e;
  padding: 0.625rem 0.875rem;
  font-size: 0.8125rem;
  margin-bottom: 1rem;
}
.auth-banner a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}
.auth-banner.ok {
  border-color: rgb(187 247 208);
  background: rgb(220 252 231);
  color: #15803d;
}
.auth-banner.muted {
  border-color: rgb(226 232 240);
  background: rgb(241 245 249);
  color: rgb(71 85 105);
}
.auth-banner.err {
  border-color: rgb(252 165 165);
  background: rgb(254 226 226);
  color: #dc2626;
}

/* --- Sous-navigation contextuelle (DS §7.3) --- */
.admin-subnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgb(226 232 240);
}
.admin-subnav-label {
  font-size: 0.78rem;
  color: rgb(100 116 139);
  font-weight: 500;
  margin-right: 0.5rem;
}

/* --- Formulaire sticky 2 colonnes (DS §6.11) --- */
.wrap-2col {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 1024px) {
  /* Jamais de sticky en mono-colonne : le formulaire chevaucherait l'aperçu. */
  .wrap-2col {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 1025px) {
  .form-side {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    z-index: 1;
  }
}

/* --- État vide --- */
.empty {
  padding: 2rem;
  text-align: center;
  color: rgb(100 116 139);
  font-size: 0.875rem;
}

/* --- En-tête d'impression (masqué à l'écran, cf. DS §8) --- */
.print-header,
.print-title,
.print-subtitle {
  display: none;
}

/* --- Cibles tactiles et confort mobile (DS §12) --- */
@media (max-width: 640px) {
  .field,
  input,
  select,
  textarea {
    font-size: 1rem; /* empêche le zoom auto iOS Safari */
  }
  .action-btn,
  .btn-primary,
  .btn-danger,
  .nav-btn {
    min-height: 44px; /* Apple HIG */
  }
}
[data-clic] {
  -webkit-tap-highlight-color: transparent;
}

/* --- Impression A4 portrait (DS §8) --- */
@media print {
  @page {
    size: A4 portrait;
    margin: 10mm 8mm;
  }
  html,
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 8pt;
  }
  .no-print {
    display: none !important;
  }

  /* Un groupe replie a l'ecran ne doit pas manquer sur le papier : la feuille
     imprimee est le document de reference du dossier, elle se lit entiere.
     `hidden` pose display:none, seul !important le renverse. */
  [data-corps][hidden] {
    display: grid !important;
  }
  /* Un groupe masque par la recherche revient aussi : on imprime le dossier,
     pas le filtre en cours. */
  [data-groupe][hidden] {
    display: block !important;
  }
  [data-plier] {
    pointer-events: none;
  }
  [data-plier] > span:first-child,
  [data-renvoi] {
    display: none !important;
  }
  main {
    padding: 0 !important;
    max-width: none !important;
  }

  .print-header {
    display: flex !important;
    align-items: center;
    gap: 4mm;
    margin-bottom: 4mm;
    padding-bottom: 3mm;
    border-bottom: 1.5px solid #ccc;
  }
  .print-logo-img {
    height: 12mm;
    width: auto;
  }
  .print-title {
    display: block !important;
    font-size: 12pt;
    font-weight: 700;
  }
  .print-subtitle {
    display: block !important;
    font-size: 8pt;
    color: #555;
    margin-top: 0.5mm;
  }

  table.list thead th {
    background: #fff !important;
    color: #000 !important;
    border-bottom: 1.5px solid #000 !important;
    padding: 2px 4px !important;
    font-size: 7pt;
  }
  table.list tbody td {
    border-bottom: 1px solid #d4d4d4 !important;
    padding: 2px 4px !important;
  }
  table.list tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }
  thead {
    display: table-header-group;
  }

  /* Les navigateurs suppriment les fonds par défaut à l'impression. */
  .bd-bar,
  .bd-pill,
  .chip {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .bd-pill,
  .chip {
    border: 1px solid currentColor;
  }

  .card {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
  }
  .page-break {
    page-break-before: always;
  }
  .avoid-break {
    page-break-inside: avoid;
  }
}