/* Styles propres aux pages (connexion, patients, fiches). Les composants génériques sont dans components.css. */

/* ---------- Authentification et pages simples ---------- */
body.plain { background: var(--color-bg); }

.auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-5) var(--space-4);
}

.auth__card {
  width: 100%;
  max-width: 26rem;
  padding: var(--space-6);
  display: grid;
  gap: var(--space-4);
  justify-items: stretch;
  animation: page-in var(--dur) var(--ease);
}

.auth__logo { height: 6.5rem; width: auto; margin: 0 auto var(--space-2); }
.auth__card h1 { text-align: center; }
.auth__intro { text-align: center; color: var(--color-text-muted); }
.auth__code { text-align: center; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-brand-strong); }
.auth__card .btn { justify-self: center; }

/* ---------- Recherche ---------- */
.search-bar { position: relative; }
.search-bar svg { position: absolute; left: var(--space-4); top: 50%; width: 1.2rem; height: 1.2rem; transform: translateY(-50%); fill: none; stroke: var(--color-text-muted); stroke-width: 1.75; stroke-linecap: round; pointer-events: none; }
.search-bar .input { min-height: 3rem; padding-left: 2.9rem; border-radius: var(--radius-pill); font-size: var(--text-md); }
.results__count { margin-bottom: var(--space-2); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); }
#resultats { transition: opacity var(--dur-fast) var(--ease); }
#resultats.is-loading { opacity: 0.55; }
.table--clickable tbody tr { cursor: pointer; }
.table__link { font-weight: 600; color: var(--color-ink); text-decoration: none; }
.table__link:hover { color: var(--color-brand-strong); text-decoration: underline; }
.muted { color: var(--color-text-muted); }
.mono { font-family: var(--font-mono); font-size: var(--text-xs); }

/* ---------- Formulaires ---------- */
.fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.fieldset legend { padding: 0; margin-bottom: var(--space-3); font-family: var(--font-heading); font-weight: 600; font-size: var(--text-md); color: var(--color-ink); }
.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.dup-list { margin: var(--space-2) 0; padding-left: var(--space-5); color: var(--color-text); }
.dup-list li + li { margin-top: var(--space-1); }

/* ---------- Compteurs et filtres ---------- */
.stats { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.stat { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.stat__nombre { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700; color: var(--color-ink); line-height: 1; }
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); }

/* ---------- Ordonnance ---------- */
[hidden] { display: none !important; }
.rx td { vertical-align: top; }
.rx .input.is-invalid { border-color: var(--color-danger); background: var(--color-danger-soft); }
.rx-err { display: block; margin-top: var(--space-1); font-size: var(--text-xs); font-weight: 600; color: var(--color-danger); text-align: center; }
.rx-alerte { margin-bottom: var(--space-4); }
.rx-lecture td, .rx-lecture th { white-space: nowrap; }

/* ---------- Fiche (liste de définitions) ---------- */
.dl { display: grid; gap: var(--space-3); margin: 0; }
.dl > div { display: grid; grid-template-columns: minmax(8rem, 11rem) 1fr; gap: var(--space-3); }
.dl dt { color: var(--color-text-muted); font-size: var(--text-sm); }
.dl dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

.agency-label { font-weight: 600; font-size: var(--text-sm); color: var(--color-text-muted); }

@media (max-width: 640px) {
  .dl > div { grid-template-columns: 1fr; gap: 0; }
  .agency-label { display: none; }
}

/* ---------- Vente, caisse, documents ---------- */
.vente-grid { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; }
.vente-resume { min-width: 0; }
.card--sticky { position: sticky; top: calc(var(--topbar-height) + var(--space-4)); }
.total-line { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--space-3); border-top: 1px solid var(--color-border); font-size: var(--text-lg); }
.total-line strong { font-family: var(--font-heading); color: var(--color-brand-strong); }
.dl--compact > div { grid-template-columns: 1fr auto; gap: var(--space-2); }
.dl--compact dd.num { text-align: right; font-variant-numeric: tabular-nums; }
.doc-list { list-style: none; margin: 0; padding: 0; }
.doc-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-border); }
.doc-list li:last-child { border-bottom: 0; }
.doc-list a { text-decoration: none; color: var(--color-ink); }
.doc-list a:hover { color: var(--color-brand-strong); }

.choice-group { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.choice { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.choice:hover { border-color: var(--color-text-muted); }
.choice:has(input:checked) { border-color: var(--color-brand); background: var(--color-brand-soft); }
.choice input { margin-top: 0.3rem; accent-color: var(--color-brand); }
.choice small { display: block; color: var(--color-text-muted); }
.check { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 500; cursor: pointer; }
.check input { accent-color: var(--color-brand); width: 1.1rem; height: 1.1rem; }

.details summary { cursor: pointer; font-weight: 600; list-style: none; }
.details summary::-webkit-details-marker { display: none; }
.details summary::before { content: "▸ "; color: var(--color-brand); }
.details[open] summary::before { content: "▾ "; }
details.card > summary.card__head { border-bottom: 0; }
details.card[open] > summary.card__head { border-bottom: 1px solid var(--color-border); }

@media (max-width: 1100px) {
  .vente-grid { grid-template-columns: minmax(0, 1fr); }
  .card--sticky { position: static; }
}

/* ---------- Ajustements ---------- */
.table .mono, .table td.mono { white-space: nowrap; }
.topbar .btn { white-space: nowrap; }

/* ---------- Administration ---------- */
.matrice th { background: var(--color-surface-alt); }
.matrice__module th { text-align: left; padding: var(--space-3) var(--space-4); font-family: var(--font-heading); color: var(--color-brand-strong); background: var(--color-brand-soft); text-transform: none; letter-spacing: 0; font-size: var(--text-sm); }
.input--num { max-width: 9rem; text-align: right; font-variant-numeric: tabular-nums; margin-left: auto; }
.mono-area { font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.6; }
.audit-pre { margin: var(--space-2) 0 0; padding: var(--space-3); max-width: 36rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 0.75rem/1.5 var(--font-mono); background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }

/* ---------- Assurances ---------- */
.onglets { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); }
.onglets a { padding: var(--space-3) var(--space-4); margin-bottom: -1px; border-bottom: 3px solid transparent; font-weight: 600; text-decoration: none; color: var(--color-text-muted); }
.onglets a:hover { color: var(--color-ink); }
.onglets a[aria-current="page"] { color: var(--color-brand-strong); border-bottom-color: var(--color-brand); }
.relance-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.relance-form .input { min-width: 12rem; flex: 1 1 12rem; }
.notif-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.notif-list li { padding: var(--space-3); background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--text-sm); }

/* ---------- Commandes ---------- */
.stat--active { border-color: var(--color-brand); box-shadow: 0 0 0 1px var(--color-brand) inset; }
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.check-list .ok span { color: var(--color-success); font-weight: 700; }
.check-list .manque span { color: var(--color-danger); font-weight: 700; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); border-left: 2px solid var(--color-border); padding-left: var(--space-4); }
.timeline li { position: relative; font-size: var(--text-sm); }
.timeline li::before { content: ""; position: absolute; left: calc(-1 * var(--space-4) - 5px); top: 0.4rem; width: 8px; height: 8px; border-radius: 50%; background: var(--color-brand); }
/* ---------- Reporting ---------- */
.variation { font-size: var(--text-xs); font-weight: 600; margin-top: 2px; }
.variation--bon { color: var(--color-success); }
.variation--mauvais { color: var(--color-danger); }
.variation--neutre { color: var(--color-text-muted); }
.variation .muted { font-weight: 400; }
.barres { display: flex; flex-direction: column; gap: var(--space-2); }
.barre { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr minmax(6rem, auto); align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.barre__etiquette { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre__piste { background: var(--color-table-head); border-radius: 999px; height: 0.7rem; overflow: hidden; }
.barre__valeur { display: block; height: 100%; background: var(--color-brand); border-radius: 999px; animation: barre-entree 600ms var(--ease) both; transform-origin: left; }
@keyframes barre-entree { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.barre__texte { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.table tfoot td { padding: var(--space-3) var(--space-4); background: var(--color-surface-alt); border-top: 2px solid var(--color-border-strong); }
@media (prefers-reduced-motion: reduce) { .barre__valeur { animation: none; } }

.graphique-zone { padding-top: var(--space-2); }
.graphique { display: block; width: 100%; max-width: 760px; height: auto; margin: 0 auto; }