/* PemaTrack · base & composants
   Plateforme de lutte contre la tuberculose · shell teal, actions teal, guérison verte.
   Statuts patients TB colorés, une élévation, focus clavier visible. */

:root { color-scheme: light; }
html { scroll-behavior: smooth; }
body {
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Chiffres tabulaires (données alignées) */
.tnum, table, .kpi-value, .mono { font-variant-numeric: tabular-nums; }

/* Marque : « Track » en teal vif */
.brand-accent { color: #14B8A6; }

/* Focus clavier visible (jamais supprimé) */
:focus-visible { outline: 2px solid #0F766E; outline-offset: 2px; border-radius: 4px; }
a, button, input, select, textarea { outline: none; }

/* Scrollbar custom sobre */
* { scrollbar-width: thin; scrollbar-color: #BFD4D0 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #BFD4D0; border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #8CA9A3; background-clip: content-box; }

/* ---- Sidebar (shell teal) ---- */
.sidebar-bg { background: linear-gradient(180deg, #0F766E 0%, #0B4F49 55%, #07322E 100%); }
.nav-link {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .75rem; border-radius: .625rem;
  font-size: .875rem; font-weight: 500; color: #BBD6D1;
  transition: background-color .15s ease, color .15s ease;
}
.nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-link.is-active { background: #14B8A6; color: #052e2a; font-weight: 600; box-shadow: 0 2px 8px -2px rgba(20,184,166,.6); }
.nav-link.is-active .nav-ico { color: #052e2a; }
.nav-ico { width: 18px; height: 18px; flex: none; color: #7FB0A9; }
.nav-link:hover .nav-ico { color: #d6eae6; }

/* ---- Pastilles de statut : couleur + texte + point ---- */
.pill { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .55rem;
  border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.4; border: 1px solid transparent; white-space: nowrap; }
.pill svg { width: 13px; height: 13px; }
.pill-dot::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; display: inline-block; }
.pill-success { background: #ECFDF5; color: #047857; border-color: #A7F3D0; }
.pill-warning { background: #FFFBEB; color: #B45309; border-color: #FDE68A; }
.pill-danger  { background: #FEF2F2; color: #DC2626; border-color: #FECACA; }
.pill-neutral { background: #F1F5F9; color: #475569; border-color: #E2E8F0; }
.pill-info    { background: #EFF9FF; color: #0369A1; border-color: #BAE6FD; }
.pill-violet  { background: #F5F3FF; color: #6D28D9; border-color: #DDD6FE; }
.pill-teal    { background: #F0FDFA; color: #0F766E; border-color: #99F6E4; }

/* Statuts patients TB (code couleur PemaTrack) */
.pill-presume    { background: #F1F5F9; color: #475569; border-color: #E2E8F0; }  /* gris : cas présumé */
.pill-confirme   { background: #FFFBEB; color: #B45309; border-color: #FDE68A; }  /* ambre : confirmé, à mettre sous traitement */
.pill-traitement { background: #F0FDFA; color: #0F766E; border-color: #99F6E4; }  /* teal : sous traitement */
.pill-gueri      { background: #ECFDF5; color: #047857; border-color: #A7F3D0; }  /* vert : guéri */
.pill-perdu      { background: #FEF2F2; color: #DC2626; border-color: #FECACA; }  /* rouge : perdu de vue */
.pill-tbmr       { background: #F5F3FF; color: #6D28D9; border-color: #DDD6FE; }  /* violet : résistant (TB-MR) */
.pill-decede     { background: #E7EBEA; color: #334155; border-color: #CBD5E1; }  /* gris foncé : décédé */
/* Statuts contacts / dépistage */
.pill-acontacter { background: #FFFBEB; color: #B45309; border-color: #FDE68A; }  /* ambre : à contacter */
.pill-invite     { background: #EFF9FF; color: #0369A1; border-color: #BAE6FD; }  /* bleu : invité */
.pill-negatif    { background: #ECFDF5; color: #047857; border-color: #A7F3D0; }  /* vert : dépisté négatif */
.pill-positif    { background: #FEF2F2; color: #DC2626; border-color: #FECACA; }  /* rouge : dépisté positif */

/* ---- Boutons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .55rem .95rem; border-radius: .625rem; font-size: .875rem; font-weight: 600;
  cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  border: 1px solid transparent; white-space: nowrap; }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: #0F766E; color: #fff; box-shadow: 0 1px 2px rgba(15,118,110,.25); }  /* TEAL */
.btn-primary:hover { background: #0B5F58; }
.btn-green { background: #059669; color: #fff; box-shadow: 0 1px 2px rgba(5,150,105,.25); }       /* VERT (valider/guérison) */
.btn-green:hover { background: #047857; }
.btn-outline { background: #fff; color: #0F1F1D; border-color: #E3EBEA; }
.btn-outline:hover { background: #F6FAF9; border-color: #C6D6D3; }
.btn-ghost { background: transparent; color: #5B6B69; }
.btn-ghost:hover { background: #EAF1F0; color: #0F1F1D; }
.btn-danger { background: #DC2626; color: #fff; }
.btn-danger:hover { background: #B91C1C; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-sm { padding: .4rem .65rem; font-size: .8125rem; border-radius: .5rem; }
.btn-lg { padding: .7rem 1.1rem; font-size: .9375rem; }

/* ---- Carte ---- */
.card { background: #fff; border: 1px solid #E6EDEC; border-radius: .875rem; box-shadow: 0 1px 2px 0 rgba(11,79,73,.05), 0 1px 3px 0 rgba(11,79,73,.04); }
.card-hover { transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.card-hover:hover { box-shadow: 0 8px 24px -6px rgba(11,79,73,.14); border-color: #99F6E4; }

/* ---- KPI ---- */
.kpi-ico { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; flex: none; }

/* ---- Marque / logo pulse ---- */
.pt-mark { display: grid; place-items: center; border-radius: .625rem; flex: none;
  background: linear-gradient(135deg, #14B8A6, #0B4F49); box-shadow: 0 4px 12px rgba(15,118,110,.35); }

/* ---- Champs de formulaire ---- */
.field-label { display: block; font-size: .8125rem; font-weight: 600; color: #334155; margin-bottom: .35rem; }
.field-req::after { content: " *"; color: #DC2626; }
.input, .select, .textarea {
  width: 100%; background: #fff; border: 1px solid #CBD9D6; border-radius: .625rem;
  padding: .6rem .8rem; font-size: .875rem; color: #0F1F1D;
  transition: border-color .15s ease, box-shadow .15s ease; min-height: 44px; }
.input::placeholder, .textarea::placeholder { color: #94A3B8; }
.input:focus, .select:focus, .textarea:focus { border-color: #0F766E; box-shadow: 0 0 0 3px rgba(15,118,110,.14); }
.input.has-error { border-color: #DC2626; }
.field-help { font-size: .75rem; color: #5B6B69; margin-top: .3rem; }

/* Radio "segmenté" */
.seg { display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .85rem; border:1px solid #CBD9D6; border-radius:.625rem;
  font-size:.875rem; font-weight:600; color:#475569; cursor:pointer; background:#fff; transition:.15s ease; }
.seg:hover { border-color:#8CA9A3; }
.seg.is-on { border-color:#0F766E; background:#F0FDFA; color:#0B5F58; box-shadow: inset 0 0 0 1px #0F766E; }

/* ---- Tableau de données ---- */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; }
.tbl thead th { position: sticky; top: 0; background: #F3F8F7; text-align: left;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #5B6B69;
  padding: .7rem .9rem; border-bottom: 1px solid #E6EDEC; z-index: 1; }
.tbl tbody td { padding: .8rem .9rem; border-bottom: 1px solid #EEF3F2; color: #334155; vertical-align: middle; }
.tbl tbody tr { transition: background-color .12s ease; }
.tbl tbody tr:hover { background: #F6FAF9; }
.tbl-compact thead th, .tbl-compact tbody td { padding-left: .55rem; padding-right: .55rem; }
.tbl-compact tbody td:first-child, .tbl-compact thead th:first-child { padding-left: 0; }
.tbl-compact tbody td:last-child, .tbl-compact thead th:last-child { padding-right: 0; }

/* Onglets */
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid #E6EDEC; }
.tab { padding: .6rem .2rem; margin: 0 .8rem; font-size: .875rem; font-weight: 600; color: #5B6B69; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s ease, border-color .15s ease; }
.tab:first-child { margin-left: 0; }
.tab:hover { color: #0F1F1D; }
.tab.is-on { color: #0F766E; border-bottom-color: #0F766E; }

/* Matrice de permissions */
.perm-yes { color: #059669; }
.perm-no  { color: #CBD5E1; }

/* Barre de progression (observance) */
.bar { height: 8px; border-radius: 999px; background: #E6EDEC; overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 999px; }

/* Animation apparition douce */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .4s ease both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---- Sélecteur de langue (FR / EN) ---- */
.lang-switch { display:inline-flex; border:1px solid #E3EBEA; border-radius:.5rem; overflow:hidden; background:#fff; }
.lang-btn { padding:.3rem .55rem; font-size:.72rem; font-weight:700; color:#5B6B69; cursor:pointer; background:transparent; border:none; line-height:1; transition:background-color .15s ease, color .15s ease; }
.lang-btn:hover { background:#EAF1F0; color:#0F1F1D; }
.lang-btn.is-on { background:#0F766E; color:#fff; }