/*
 * Clinica — design system
 * Bootstrap 5.3 fournit les composants ; ce fichier definit la coque
 * (barre laterale, en-tete, zone de contenu) et reecrit l'apparence des
 * composants AdminLTE encore presents dans les vues, sans toucher au balisage.
 */

/* ================================================================ base */
* { scrollbar-width: thin; }

body {
  background: var(--cl-canvas);
  color: var(--cl-text);
  font-family: var(--bs-font-sans-serif);
  font-size: var(--bs-body-font-size);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--cl-text);
  font-weight: 600;
  letter-spacing: -.011em;
}

a { text-decoration: none; }
a:hover { text-decoration: none; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--cl-border-strong);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--cl-ink-400); background-clip: content-box; }

:focus-visible {
  outline: 2px solid var(--cl-primary-500);
  outline-offset: 2px;
}

/* ================================================================ coque */
.wrapper { position: relative; }

/* ---------------------------------------------------------- barre laterale */
.main-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1038;
  display: flex;
  flex-direction: column;
  width: var(--cl-sidebar-width);
  height: 100vh;
  background: var(--cl-sidebar-bg);
  border-right: 1px solid var(--cl-border);
  transition: width var(--cl-transition), transform var(--cl-transition);
}

.main-sidebar .sidebar {
  flex: 1 1 auto;
  padding: 0 .75rem 1.25rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.brand-link {
  display: flex;
  align-items: center;
  gap: .7rem;
  height: var(--cl-header-height);
  padding: 0 1rem;
  border-bottom: 1px solid var(--cl-border);
  color: var(--cl-text);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.brand-link:hover { color: var(--cl-text); }

.brand-image {
  width: 34px;
  height: 34px;
  object-fit: contain;
  opacity: 1 !important;
  flex: 0 0 auto;
}

.brand-text { transition: opacity var(--cl-transition); }

/* ---------------------------------------------------------- profil */
.user-panel {
  align-items: center;
  gap: .65rem;
  margin: .85rem 0 .35rem !important;
  padding: .6rem .65rem !important;
  background: var(--cl-surface-muted);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius);
}
.user-panel .image img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 50%;
  background: var(--cl-primary-100);
}
.user-panel .info { min-width: 0; }
.user-panel .info a {
  color: var(--cl-text);
  font-size: .875rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------- menu */
.nav-sidebar { --bs-nav-link-padding-y: 0; flex-direction: column; }

.nav-sidebar .nav-item { width: 100%; }

.nav-sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 1px 0;
  padding: .55rem .7rem !important;
  border-radius: var(--cl-radius-sm);
  color: var(--cl-sidebar-text);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.35;
  transition: background-color var(--cl-transition), color var(--cl-transition);
}
.nav-sidebar .nav-link:hover {
  background: var(--cl-sidebar-hover-bg);
  color: var(--cl-text);
}
.nav-sidebar > .nav-item > .nav-link.active,
.nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
  background: var(--cl-sidebar-active-bg);
  color: var(--cl-sidebar-text-active);
  font-weight: 600;
}

.nav-sidebar .nav-icon {
  flex: 0 0 1.25rem;
  width: 1.25rem;
  font-size: .95rem;
  text-align: center;
  opacity: .85;
}

.nav-sidebar .nav-link p {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin: 0;
  min-width: 0;
}

/* chevron des sous-menus */
.nav-sidebar .nav-link p > .right,
.nav-sidebar .nav-link > .right {
  flex: 0 0 auto;
  font-size: .7rem;
  opacity: .55;
  transition: transform var(--cl-transition);
}
.nav-sidebar .menu-open > .nav-link p > .right,
.nav-sidebar .menu-is-opening > .nav-link p > .right { transform: rotate(-90deg); }

/* sous-menu deroulant */
.nav-sidebar .nav-treeview {
  display: none;
  flex-direction: column;
  margin: 2px 0 4px;
  padding-left: 1.4rem;
  border-left: 1px solid var(--cl-border);   /* filet neutre, pas un accent colore */
  margin-left: .95rem;
}
.nav-sidebar .menu-open > .nav-treeview { display: flex; }
.nav-sidebar .nav-treeview .nav-link {
  padding: .45rem .6rem !important;
  font-size: .84rem;
  font-weight: 450;
}
.nav-sidebar .nav-treeview .nav-icon { font-size: .5rem; opacity: .45; }

/* badge dans le menu */
.nav-sidebar .badge { font-size: .68rem; font-weight: 600; }

/* ---------------------------------------------------------- en-tete */
.main-header.navbar {
  position: fixed;
  top: 0;
  right: 0;
  left: var(--cl-sidebar-width);
  z-index: 1034;
  display: flex;
  align-items: center;
  height: var(--cl-header-height);
  padding: 0 1.25rem;
  background: color-mix(in srgb, var(--cl-surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--cl-border);
  transition: left var(--cl-transition);
}

.main-header .navbar-nav { align-items: center; gap: .15rem; }

.main-header .nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 .55rem;
  border-radius: var(--cl-radius-sm);
  color: var(--cl-text-muted);
  transition: background-color var(--cl-transition), color var(--cl-transition);
}
.main-header .nav-link:hover {
  background: var(--cl-surface-muted);
  color: var(--cl-text);
}

.navbar-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  padding: .15rem .3rem;
  font-size: .6rem;
  font-weight: 700;
  border-radius: 999px;
}
.main-header .nav-item { position: relative; }

/* ---------------------------------------------------------- contenu
   Toutes les vues n'emploient pas .content-wrapper : certaines emettent un
   <section> nu, frere de .wrapper. Sans regle, ces pages passent sous
   l'en-tete fixe et ignorent la barre laterale. La zone de contenu est donc
   definie sur les deux formes. */
.content-wrapper,
body > section {
  min-height: 100vh;
  margin-left: var(--cl-sidebar-width);
  padding: calc(var(--cl-header-height) + 1.25rem) 1.5rem 2.5rem;
  background: var(--cl-canvas);
  transition: margin-left var(--cl-transition);
}

/* meme neutralisation de gouttiere pour ces vues (voir R1) */
body > section > .row,
body > section > .content > .row,
body > section > form > .row { margin-right: 0; margin-left: 0; }
body > section, body > section > .content { max-width: 100%; min-width: 0; }

.content-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1.25rem;
  padding: 0;
}
.content-header h1 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 650;
  letter-spacing: -.02em;
}
.content-header .breadcrumb {
  margin: 0;
  padding: 0;
  background: transparent;
  font-size: .8125rem;
}
.breadcrumb-item, .breadcrumb-item a { color: var(--cl-text-muted); }
.breadcrumb-item.active { color: var(--cl-text); font-weight: 500; }

.content { padding: 0; }

.control-sidebar { display: none !important; }

/* ---------------------------------------------------------- sidebar repliee */
body.sidebar-collapse .main-sidebar { width: var(--cl-sidebar-width-collapsed); }
body.sidebar-collapse .main-sidebar .brand-text,
body.sidebar-collapse .main-sidebar .user-panel .info,
body.sidebar-collapse .main-sidebar .nav-link p,
body.sidebar-collapse .main-sidebar .nav-treeview { display: none !important; }
body.sidebar-collapse .main-sidebar .brand-link,
body.sidebar-collapse .main-sidebar .nav-link { justify-content: center; padding-inline: .5rem !important; }
body.sidebar-collapse .main-sidebar .user-panel { justify-content: center; }
body.sidebar-collapse .main-header.navbar { left: var(--cl-sidebar-width-collapsed); }
body.sidebar-collapse .content-wrapper,
body.sidebar-collapse > section { margin-left: var(--cl-sidebar-width-collapsed); }

/* ---------------------------------------------------------- mobile */
.cl-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1037;
  background: rgb(15 23 42 / .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--cl-transition), visibility var(--cl-transition);
}

@media (max-width: 991.98px) {
  .main-sidebar { transform: translateX(-100%); box-shadow: var(--cl-shadow-lg); }
  body.sidebar-open .main-sidebar { transform: translateX(0); width: var(--cl-sidebar-width); }
  body.sidebar-open .cl-backdrop { opacity: 1; visibility: visible; }
  .main-header.navbar { left: 0; }
  .content-wrapper, body > section { margin-left: 0; padding-inline: 1rem; }
  body.sidebar-collapse .main-header.navbar { left: 0; }
  body.sidebar-collapse .content-wrapper,
  body.sidebar-collapse > section { margin-left: 0; }
  body.sidebar-open { overflow: hidden; }
}

/* ================================================================ cartes */
.card {
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius-lg);
  box-shadow: var(--cl-shadow-xs);
  margin-bottom: 1.25rem;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .9rem 1.15rem;
  background: transparent;
  border-bottom: 1px solid var(--cl-border);
  border-radius: var(--cl-radius-lg) var(--cl-radius-lg) 0 0 !important;
}
.card-title {
  margin: 0;
  font-size: .975rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.card-body { padding: 1.15rem; }
.card-footer {
  padding: .9rem 1.15rem;
  background: transparent;
  border-top: 1px solid var(--cl-border);
  border-radius: 0 0 var(--cl-radius-lg) var(--cl-radius-lg) !important;
}

.card-tools { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.btn-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--cl-radius-sm);
  color: var(--cl-text-muted);
}
.btn-tool:hover { background: var(--cl-surface-muted); color: var(--cl-text); }

/* REGLE ABSOLUE — aucune bordure d'accent sur un seul cote (haut, gauche,
   droite, bas). Les variantes .card-* d'AdminLTE n'ajoutent donc aucun filet
   colore : une carte a une bordure neutre uniforme sur ses quatre cotes.
   La hierarchie passe par le titre et l'espacement, pas par un trait. */
.card-primary, .card-info, .card-success, .card-warning, .card-danger,
.card-outline, .card[class*="card-outline"] {
  border: 1px solid var(--cl-border) !important;
  border-top-width: 1px !important;
  border-left-width: 1px !important;
}
.card-primary > .card-header,
.card-info > .card-header,
.card-success > .card-header,
.card-warning > .card-header,
.card-danger > .card-header { background: transparent; color: inherit; }

/* ================================================================ tuiles chiffrees */
.small-box {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 116px;
  margin-bottom: 1.25rem;
  padding: 1.15rem;
  background: var(--cl-surface) !important;
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius-lg);
  box-shadow: var(--cl-shadow-xs);
  color: var(--cl-text) !important;
  overflow: hidden;
}
.small-box > .inner h3 {
  margin: 0 0 .15rem;
  color: var(--cl-text) !important;
  font-size: 1.85rem;
  font-weight: 650;
  letter-spacing: -.03em;
}
.small-box > .inner p {
  margin: 0;
  color: var(--cl-text-muted) !important;
  font-size: .8125rem;
  font-weight: 500;
}
.small-box .icon {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  color: var(--cl-text-muted) !important;
  font-size: 3.5rem;
  opacity: .08;
}
.small-box .small-box-footer {
  margin: .9rem -1.15rem -1.15rem;
  padding: .55rem 1.15rem;
  background: transparent !important;
  border-top: 1px solid var(--cl-border);
  color: var(--cl-text-muted) !important;
  font-size: .78rem;
}
.small-box .small-box-footer:hover { color: var(--cl-primary-600) !important; }

/* tuiles du tableau de bord (classes propres a l'application) */
.card.card-custom.bg-info,
.card.card-custom.bg-success,
.card.card-custom.bg-warning,
.card.card-custom.bg-danger,
.card.card-custom.bg-primary,
.card.card-custom.bg-secondary {
  background: var(--cl-surface) !important;
  border: 1px solid var(--cl-border) !important;
  box-shadow: var(--cl-shadow-xs) !important;
}
.card-custom .text-white,
.card-custom a.text-white,
.card-custom .stat-number,
.card-custom .text-custom { color: var(--cl-text) !important; }
.card-custom .stat-number { font-weight: 650; letter-spacing: -.03em; }
.card-custom .stat-text { color: var(--cl-text-muted) !important; font-size: .8125rem; }
.card-custom .icon-custom { color: var(--cl-text-muted) !important; opacity: .1; }

/* ================================================================ tableaux */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--cl-text);
  margin-bottom: 0;
  font-size: .875rem;
}
.table > thead > tr > th {
  padding: .7rem .9rem;
  background: transparent;
  border-bottom: 1px solid var(--cl-border);
  color: var(--cl-text-muted);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  white-space: nowrap;
}
.table > tbody > tr > td {
  padding: .7rem .9rem;
  border-top: 1px solid var(--cl-border);
  border-bottom: 0;
  vertical-align: middle;
}
.table > tbody > tr:hover > td { background: var(--cl-surface-muted); }
.table-bordered, .table-bordered th, .table-bordered td { border-color: var(--cl-border); }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: var(--cl-surface-muted); }

/* ---------------------------------------------------------- debordements
   Les vues posent souvent un tableau large directement dans .card-body, sans
   conteneur .table-responsive : les colonnes se compriment et les boutons
   d'action debordent hors de la carte. On rend donc la zone defilante
   horizontalement et on empeche la coupure des libelles. */
.table-responsive,
.dataTables_wrapper,
.card-body:has(table),
.tab-pane:has(> table),
.tab-pane > .card > .card-body:has(table) {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* le tableau garde une largeur lisible et declenche le defilement */
.card-body > .table,
.card-body table,
.dataTables_wrapper table.dataTable { min-width: max-content; }

/* R3 — les donnees atomiques (date, heure, montant, telephone, statut) ne se
   cassent jamais. R2 — le texte libre trop long est tronque, pas casse. */
.table td, .table th {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
.table td {
  max-width: 34ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* R5 — la cellule d'actions garde ses boutons sur une ligne, sans troncature */
.table td:has(.btn),
.table td:has(a[href]) .btn,
.table th:has(.btn) {
  max-width: none;
  overflow: visible;
}
.table td:has(.btn) { white-space: nowrap; }
.table td .btn,
.table th .btn,
.table td .badge,
.table td a.btn { white-space: nowrap; vertical-align: middle; }
/* R16 — densite constante : les boutons d'action ont un gabarit unique, sinon
   la hauteur de ligne varie d'un module a l'autre (44 px ici, 60 px ailleurs) */
.table td .btn, .table td a.btn {
  padding: .32rem .6rem;
  font-size: .8rem;
  line-height: 1.25;
  box-shadow: none;
}
.table td .btn i, .table td a.btn i { font-size: .8rem; }

/* Regle 1.1 — dans une ligne de tableau, les actions sont neutres : une ligne
   de liste n'a pas d'action "principale". Quatre boutons pleins de quatre
   couleurs differentes rendent le balayage visuel impossible et rendaient le
   bouton .btn-secondary invisible (blanc sur blanc). Seule la suppression
   garde sa couleur, parce qu'elle est irreversible. */
.table td .btn:not(.btn-danger):not(.delete_button),
.table td a.btn:not(.btn-danger):not(.delete_button) {
  background: var(--cl-surface) !important;
  border: 1px solid var(--cl-border-strong) !important;
  color: var(--cl-text) !important;
}
.table td .btn:not(.btn-danger):not(.delete_button):hover,
.table td a.btn:not(.btn-danger):not(.delete_button):hover {
  background: var(--cl-surface-muted) !important;
  border-color: var(--cl-border-strong) !important;
  color: var(--cl-text) !important;
}
/* l'icone conserve la teinte semantique : le repere reste, sans aplat */
.table td .btn.btn-primary i, .table td a.btn.btn-primary i { color: var(--cl-primary-600); }
.table td .btn.btn-success i, .table td a.btn.btn-success i { color: var(--cl-success); }
.table td .btn.btn-warning i, .table td a.btn.btn-warning i { color: var(--cl-warning); }
.table td .btn.btn-info i,    .table td a.btn.btn-info i    { color: var(--cl-info); }
/* etat desactive visible mais attenue */
.table td .btn.disabled, .table td a.btn.disabled,
.table td .btn:disabled {
  opacity: .45;
  pointer-events: none;
}
/* les vues enveloppent parfois chaque bouton dans son propre bloc : on les
   remet sur une ligne sans toucher aux vues */
.table td:has(> .btn, > a.btn) > div,
.table td:has(.btn) > form { display: inline-block; margin: 0; vertical-align: middle; }
.table td .btn + .btn,
.table td .btn + form,
.table td form + .btn { margin-left: .25rem; }
/* uniquement dans la cellule d'actions : ailleurs un <br> separe deux valeurs
   (adresse sur deux lignes, libelle + complement) et le retirer fusionne le
   contenu */
.table td:has(> .btn) br, .table td:has(> a.btn) br { display: none; }

/* R14 — alignement selon la nature de la donnee */
.table td.text-end, .table th.text-end, .table td.text-right, .table th.text-right { text-align: right; }

/* barre d'outils DataTables : passe a la ligne au lieu de deborder */
.dataTables_wrapper .row { flex-wrap: wrap; row-gap: .5rem; }
.dataTables_wrapper .dataTables_paginate { flex-wrap: wrap; }
.dataTables_wrapper .dataTables_paginate .pagination { flex-wrap: wrap; row-gap: .25rem; margin-bottom: 0; }

/* R1 — aucun element ne franchit le bord de son conteneur */
.content-wrapper, .content-wrapper > .content, .content-header { max-width: 100%; min-width: 0; }
.row { --bs-gutter-x: 1.25rem; }

/* Les vues posent souvent une .row directement dans la zone de contenu. Les
   marges negatives de gouttiere de Bootstrap ne sont alors compensees par
   aucun conteneur et depassent de 10 px de chaque cote. On les neutralise a
   ce seul niveau : les .row imbriquees conservent leur comportement normal. */
.content-wrapper > .row,
.content-wrapper > .content > .row,
.content-wrapper > form > .row,
.content-wrapper > .content > form > .row {
  margin-right: 0;
  margin-left: 0;
}
.card, .card-body, .card-header, .tab-content, .tab-pane, [class*="col-"] { min-width: 0; }
.card-body > *, .tab-pane > * { max-width: 100%; }

/* R2 — les chaines insecables (e-mail, URL, identifiant) sont renvoyees a la
   ligne plutot que de deborder ; les mots ordinaires ne sont pas coupes */
.card-body, .card-header, .modal-body, .content-header { overflow-wrap: break-word; }

/* les badges hors tableau suivent la largeur disponible au lieu de deborder */
.badge { max-width: 100%; white-space: normal; overflow-wrap: break-word; }
.table .badge, .nav-sidebar .badge, .navbar-badge { white-space: nowrap; }

/* les listes de type "libelle + valeur en badge" (fiche patient) restent dans
   la carte : le flottant est neutralise sous 1200 px */
.card-body p:has(> .badge) { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; }
.card-body p > .badge.float-right,
.card-body p > .badge.float-end { float: none !important; }

/* ---------------------------------------------------------- fenetres modales */
.modal-dialog {
  max-width: min(720px, calc(100vw - 2rem));
  margin-inline: auto;
}
.modal-dialog.modal-lg, .modal-dialog.modal-xl {
  max-width: min(1040px, calc(100vw - 2rem));
}
.modal-dialog.modal-sm { max-width: min(400px, calc(100vw - 2rem)); }
.modal-body {
  max-height: calc(100vh - 12rem);
  overflow-x: auto;
  overflow-y: auto;
}
.modal-body > .table,
.modal-body .dataTables_wrapper { min-width: 0; }
.modal-header { flex-wrap: wrap; row-gap: .35rem; }
.modal-title { min-width: 0; overflow-wrap: anywhere; }
.modal-footer { flex-wrap: wrap; row-gap: .5rem; }

/* ================================================================ formulaires */
label { margin-bottom: .35rem; color: var(--cl-text); font-size: .8125rem; font-weight: 500; }

.form-control, .form-select, .custom-select, .input-group-text {
  min-height: var(--cl-control-height);
  padding: .5rem .75rem;
  background-color: var(--cl-surface);
  border: 1px solid var(--cl-border-strong);
  border-radius: var(--cl-radius-sm);
  color: var(--cl-text);
  font-size: .875rem;
  box-shadow: var(--cl-shadow-xs);
  transition: border-color var(--cl-transition), box-shadow var(--cl-transition);
}
.form-control:focus, .form-select:focus, .custom-select:focus {
  border-color: var(--cl-primary-400);
  box-shadow: 0 0 0 3px rgb(24 188 156 / .18);
}
.form-control::placeholder { color: var(--cl-ink-400); }
.form-control:disabled, .form-control[readonly] { background-color: var(--cl-surface-muted); }
.input-group-text { background-color: var(--cl-surface-muted); color: var(--cl-text-muted); }

/* ---------------------------------------------------------- listes deroulantes natives
   Bootstrap 5 ne stylise plus les <select> via .form-control (il attend
   .form-select). Les vues emploient partout select.form-control : on
   reconstruit le chevron et les espacements. */
select.form-control:not([size]):not([multiple]),
select.custom-select {
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 15px 11px;
  appearance: none;
  -webkit-appearance: none;
}
[data-bs-theme="dark"] select.form-control:not([size]):not([multiple]),
[data-bs-theme="dark"] select.custom-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2393a4bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
select.form-control[multiple],
select.form-control[size] {
  padding: .35rem;
  background-image: none;
}
select.form-control[multiple] option {
  padding: .35rem .5rem;
  border-radius: var(--cl-radius-sm);
}

/* ---------------------------------------------------------- agencement des champs
   Les vues utilisent .form-group.d-flex avec un label en .col-sm-3 : sans
   regle, le champ ne prend pas la largeur restante et les libelles ne sont
   pas alignes sur le controle. */
.form-group.d-flex {
  align-items: flex-start;
  gap: .85rem;
  margin-bottom: 1rem;
}
/* R6 et R7 — en disposition horizontale, la colonne de libelle a une largeur
   fixe : sinon la longueur du texte fait varier la largeur du champ (mesure
   avant correction sur le formulaire de rendez-vous : de 375 a 451 px). */
.form-group.d-flex > label,
.form-group.d-flex > .control-label {
  flex: 0 0 clamp(110px, 34%, 190px);
  width: auto;
  max-width: clamp(110px, 34%, 190px);
  padding-top: .55rem;   /* aligne le libelle sur la premiere ligne du champ */
  margin-bottom: 0;
  color: var(--cl-text-muted);
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: break-word;
}
/* le controle occupe l'espace restant, qu'il soit direct ou dans une colonne */
.form-group.d-flex > .form-control,
.form-group.d-flex > select,
.form-group.d-flex > textarea,
.form-group.d-flex > .input-group,
.form-group.d-flex > .select2-container,
.form-group.d-flex > [class*="col-sm-"]:not(label) {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}
.form-group.d-flex > [class*="col-sm-"]:not(label) { width: auto; }

/* Une colonne de grille placee dans un conteneur flex (et non dans une .row)
   conserve sa largeur en pourcentage, qui s'ajoute au flex-grow : le controle
   depasse alors de la carte. Dans ce cas la colonne devient un simple element
   flexible (R1, R7). */
.d-flex:not(.row) > [class*="col-"] {
  flex: 1 1 auto;
  width: auto;
  max-width: 100%;
  min-width: 0;
}
/* meme gabarit de colonne de libelle que .form-group.d-flex, sinon cette regle
   ecrase la precedente et la largeur du champ redevient variable (R7) */
.d-flex:not(.row) > label[class*="col-"] {
  flex: 0 0 clamp(110px, 34%, 190px);
  width: auto;
  max-width: clamp(110px, 34%, 190px);
}

/* champs empiles (sans d-flex) */
.form-group > label { display: block; }
.m-bot15 { margin-bottom: .95rem; }

/* cases a cocher et boutons radio natifs, hors .form-check */
input[type="checkbox"], input[type="radio"] { accent-color: var(--cl-primary-500); }
input[type="checkbox"]:not(.form-check-input):not([class*="icheck"]),
input[type="radio"]:not(.form-check-input):not([class*="icheck"]) {
  width: 1rem;
  height: 1rem;
  vertical-align: -2px;
  cursor: pointer;
}
.icheck-primary > input:first-child:checked + label::before,
.icheck-primary > input:first-child:checked + input[type="hidden"] + label::before {
  background-color: var(--cl-primary-500);
  border-color: var(--cl-primary-500);
}

textarea.form-control { height: auto; min-height: 96px; padding: .6rem .75rem; line-height: 1.5; }

/* ---------------------------------------------------------- televersement de fichier
   Deux formes coexistent : l'input natif et le plugin bootstrap-fileupload
   (.fileupload / .btn-file), dont l'habillage venait d'AdminLTE. */
input[type="file"].form-control { padding: .35rem .75rem; }
input[type="file"]:not(.default):not(.form-control) {
  display: block;
  width: 100%;
  padding: .4rem .6rem;
  background: var(--cl-surface);
  border: 1px solid var(--cl-border-strong);
  border-radius: var(--cl-radius-sm);
  color: var(--cl-text);
  font-size: .8125rem;
}
input[type="file"]::file-selector-button {
  margin: -.4rem .75rem -.4rem -.6rem;
  padding: .45rem .75rem;
  background: var(--cl-surface-muted);
  border: 0;
  border-right: 1px solid var(--cl-border);
  color: var(--cl-text);
  font-size: .8125rem;
  font-weight: 500;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--cl-border); }

.fileupload { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.fileupload .thumbnail,
.fileupload .img_thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  padding: .25rem;
  background: var(--cl-surface-muted);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius);
  overflow: hidden;
}
.fileupload .thumbnail img { max-width: 100%; max-height: 100%; object-fit: cover; border-radius: calc(var(--cl-radius) - 3px); }
.fileupload .thumbnail img[src=""], .fileupload .thumbnail img:not([src]) { display: none; }

/* le bouton porte un input file transparent en surimpression */
.btn-file { position: relative; overflow: hidden; display: inline-flex; }
.btn-file > input[type="file"].default,
.btn-file > input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 100px;
}
.btn-white {
  background: var(--cl-surface);
  border: 1px solid var(--cl-border-strong);
  color: var(--cl-text);
}
.btn-white:hover { background: var(--cl-surface-muted); color: var(--cl-text); }
/* le libelle du plugin porte .badge : on le rend lisible comme un bouton */
.btn-file .badge {
  padding: .5rem .8rem;
  background: transparent !important;
  color: inherit !important;
  font-size: .8125rem;
  font-weight: 500;
}

/* ---------------------------------------------------------- selection multiple (jquery-multi-select) */
.ms-container { width: 100%; background: transparent; }
.ms-container .ms-selectable,
.ms-container .ms-selection {
  background: var(--cl-surface);
  border: 1px solid var(--cl-border-strong);
  border-radius: var(--cl-radius-sm);
  color: var(--cl-text);
}
.ms-container .ms-list { border: 0; border-radius: var(--cl-radius-sm); box-shadow: none; }
.ms-container .ms-list.ms-focus { border-color: var(--cl-primary-400); box-shadow: 0 0 0 3px rgb(24 188 156 / .18); }
.ms-container .ms-optgroup-label { color: var(--cl-text-muted); font-size: .78rem; font-weight: 600; }
.ms-container li.ms-elem-selectable,
.ms-container li.ms-elem-selection {
  padding: .45rem .6rem;
  border-bottom: 1px solid var(--cl-border);
  font-size: .85rem;
}
.ms-container li.ms-hover { background: var(--cl-primary-500); color: #fff; }
.ms-container .ms-selectable li.disabled,
.ms-container .ms-selection li.disabled { background: var(--cl-surface-muted); color: var(--cl-text-muted); }
.ms-container .search-input, .ms-container input[type="text"] {
  width: 100%;
  padding: .4rem .6rem;
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius-sm);
  color: var(--cl-text);
  font-size: .85rem;
}

/* Select2 en mode multiple */
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
  background: var(--cl-primary-50);
  border: 1px solid var(--cl-primary-200);
  border-radius: var(--cl-radius-sm);
  color: var(--cl-primary-800);
  font-size: .8125rem;
}
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
  background: rgb(24 188 156 / .16);
  border-color: rgb(24 188 156 / .35);
  color: var(--cl-primary-200);
}

/* ---------------------------------------------------------- vestiges Bootstrap 3 */
.thumbnail {
  padding: .25rem;
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius);
}
.control-label { font-weight: 500; }
.help-block { color: var(--cl-text-muted); font-size: .8125rem; }

/* ================================================================ boutons */
.btn {
  --bs-btn-border-radius: var(--cl-radius-sm);
  padding: .5rem .9rem;
  font-size: .875rem;
  font-weight: 500;
  border-radius: var(--cl-radius-sm);
  box-shadow: var(--cl-shadow-xs);
  transition: filter var(--cl-transition), background-color var(--cl-transition), border-color var(--cl-transition);
}
.btn:active { transform: translateY(.5px); }
.btn-sm { padding: .35rem .65rem; font-size: .8rem; }
.btn-lg { padding: .65rem 1.15rem; font-size: .95rem; }

.btn-primary {
  --bs-btn-bg: var(--cl-primary-fill);
  --bs-btn-border-color: var(--cl-primary-fill);
  --bs-btn-hover-bg: var(--cl-primary-fill-hover);
  --bs-btn-hover-border-color: var(--cl-primary-fill-hover);
  --bs-btn-active-bg: var(--cl-primary-fill-active);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  /* sans ces trois lignes, un bouton principal desactive retombe sur le bleu
     par defaut de Bootstrap, qui n'appartient pas a la palette */
  --bs-btn-disabled-bg: var(--cl-surface-muted);
  --bs-btn-disabled-border-color: var(--cl-border);
  --bs-btn-disabled-color: var(--cl-text-muted);
}
.btn-secondary, .btn-default {
  --bs-btn-bg: var(--cl-surface);
  --bs-btn-border-color: var(--cl-border-strong);
  --bs-btn-color: var(--cl-text);
  --bs-btn-hover-bg: var(--cl-surface-muted);
  --bs-btn-hover-border-color: var(--cl-border-strong);
  --bs-btn-hover-color: var(--cl-text);
  --bs-btn-disabled-bg: var(--cl-surface-muted);
  --bs-btn-disabled-border-color: var(--cl-border);
  --bs-btn-disabled-color: var(--cl-text-muted);
}
.btn-outline-secondary {
  --bs-btn-color: var(--cl-text);
  --bs-btn-border-color: var(--cl-border-strong);
  --bs-btn-hover-bg: var(--cl-surface-muted);
  --bs-btn-hover-color: var(--cl-text);
  --bs-btn-hover-border-color: var(--cl-border-strong);
}

/* Boutons semantiques : couleurs du produit, texte toujours contraste (regle 1.1).
   Les vues emploient .btn-info comme bouton de validation : il doit rester
   lisible, pas le cyan par defaut de Bootstrap 5. */
.btn-info {
  --bs-btn-bg: var(--cl-info);
  --bs-btn-border-color: var(--cl-info);
  --bs-btn-hover-bg: #1a7ae8;
  --bs-btn-hover-border-color: #1a7ae8;
  --bs-btn-active-bg: #1668c9;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}
.btn-success {
  --bs-btn-bg: var(--cl-success);
  --bs-btn-border-color: var(--cl-success);
  --bs-btn-hover-bg: #0e9f5c;
  --bs-btn-hover-border-color: #0e9f5c;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
}
.btn-warning {
  --bs-btn-bg: var(--cl-warning);
  --bs-btn-border-color: var(--cl-warning);
  --bs-btn-hover-bg: #dd7f06;
  --bs-btn-hover-border-color: #dd7f06;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
}
.btn-danger {
  --bs-btn-bg: var(--cl-danger-fill);
  --bs-btn-border-color: var(--cl-danger-fill);
  --bs-btn-hover-bg: var(--cl-danger-fill-hover);
  --bs-btn-hover-border-color: var(--cl-danger-fill-hover);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-disabled-bg: var(--cl-danger);
  --bs-btn-disabled-border-color: var(--cl-danger);
  --bs-btn-disabled-color: #fff;
}

/* Cohérence des fonds utilitaires employes dans les vues */
.bg-info    { background-color: var(--cl-info) !important; }
.bg-success { background-color: var(--cl-success) !important; }
.bg-warning { background-color: var(--cl-warning) !important; }
.bg-danger  { background-color: var(--cl-danger) !important; }
.bg-primary { background-color: var(--cl-primary-500) !important; }
.text-info    { color: var(--cl-info) !important; }
.text-success { color: var(--cl-success) !important; }
.text-warning { color: #b54708 !important; }
.text-danger  { color: var(--cl-danger) !important; }
.text-primary { color: var(--cl-primary-600) !important; }

/* ================================================================ surfaces flottantes */
.dropdown-menu {
  padding: .35rem;
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius);
  box-shadow: var(--cl-shadow-lg);
  font-size: .875rem;
}
.dropdown-item {
  padding: .5rem .6rem;
  border-radius: var(--cl-radius-sm);
  color: var(--cl-text);
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--cl-surface-muted); color: var(--cl-text); }
.dropdown-divider { border-color: var(--cl-border); }
.dropdown-item-title { margin: 0; font-size: .875rem; font-weight: 500; }
.dropdown-menu-lg { min-width: 300px; }
/* alias Bootstrap 4 */
.dropdown-menu-right { --bs-position: end; right: 0; left: auto; }

.modal-content {
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius-xl);
  box-shadow: var(--cl-shadow-lg);
}
.modal-header, .modal-footer { border-color: var(--cl-border); padding: 1rem 1.25rem; }
.modal-body { padding: 1.25rem; }
.modal-title { font-size: 1.05rem; font-weight: 600; }

.alert { border: 1px solid var(--cl-border); border-radius: var(--cl-radius); font-size: .875rem; }

/* ================================================================ onglets et pagination */
.nav-tabs { border-bottom: 1px solid var(--cl-border); gap: .15rem; }
/* REGLE ABSOLUE — aucune bordure de couleur, y compris comme indicateur.
   L'onglet actif se signale par une pastille remplie et le poids du texte. */
.nav-tabs { border-bottom: 1px solid var(--cl-border); }
.nav-tabs .nav-link {
  border: 0 !important;
  border-radius: var(--cl-radius-sm);
  padding: .45rem .8rem;
  color: var(--cl-text-muted);
  font-size: .875rem;
  font-weight: 500;
}
.nav-tabs .nav-link:hover { background: var(--cl-surface-muted); color: var(--cl-text); isolation: auto; }
.nav-tabs .nav-link.active {
  background: var(--cl-primary-50);
  color: var(--cl-primary-700);
  font-weight: 600;
}
[data-bs-theme="dark"] .nav-tabs .nav-link.active {
  background: rgb(24 188 156 / .14);
  color: var(--cl-primary-300);
}

.nav-pills .nav-link { border-radius: var(--cl-radius-sm); font-size: .875rem; font-weight: 500; }
.nav-pills .nav-link.active { background: var(--cl-primary-500); }

.page-link {
  border-color: var(--cl-border);
  color: var(--cl-text);
  font-size: .8125rem;
}
.page-item.active .page-link { background: var(--cl-primary-500); border-color: var(--cl-primary-500); }

/* ================================================================ frise chronologique */
.timeline { position: relative; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 26px;
  width: 2px;
  background: var(--cl-border);
}
.timeline > li { position: relative; margin-bottom: 1.25rem; padding-left: 62px; }
.timeline > li > .timeline-item {
  padding: .9rem 1.1rem;
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius);
  box-shadow: var(--cl-shadow-xs);
}
.timeline > li > .fa,
.timeline > li > .fas,
.timeline > li > .far,
.timeline > li > i {
  position: absolute;
  top: 0;
  left: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: 50%;
  color: var(--cl-text-muted);
  font-size: .9rem;
}
.timeline .timeline-header { margin: 0 0 .35rem; font-size: .9rem; font-weight: 600; }
.timeline .time { float: right; color: var(--cl-text-muted); font-size: .78rem; font-weight: 400; }
.timeline .timeline-body { font-size: .875rem; }

/* ================================================================ dossier patient */

/* ---------------------------------------------------------- fiche d'identite */
.user-heading { padding: .25rem 0 1rem; text-align: left; }
.user-heading img {
  width: 64px;
  height: 64px !important;
  margin-bottom: .65rem;
  object-fit: cover;
  border: 1px solid var(--cl-border);
}
.user-heading h2 {
  margin: 0 0 .15rem;
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.25;
}
.user-heading > p {
  margin: 0 0 .85rem;
  color: var(--cl-text-muted);
  font-size: .8125rem;
  overflow-wrap: anywhere;
}

/* Paires libelle / valeur : ce sont des donnees, pas des statuts. La regle 1.1
   reserve la couleur au sens : on les rend neutres et alignees, au lieu de six
   pastilles vertes qui debordaient de la carte. */
.user-heading + .list-unstyled { margin-top: 1rem !important; }
.list-unstyled > li:has(> .badge) {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--cl-border);
  color: var(--cl-text-muted);
  font-size: .8125rem;
}
.list-unstyled > li:has(> .badge):last-child { border-bottom: 0; }
.list-unstyled > li > .badge {
  flex: 0 1 auto;
  padding: 0;
  background: transparent !important;
  border: 0;
  color: var(--cl-text) !important;
  font-size: .8125rem;
  font-weight: 500;
  text-align: right;
  overflow-wrap: anywhere;
}
.list-unstyled > li > .badge.float-end,
.list-unstyled > li > .badge.float-right { float: none !important; }

/* ---------------------------------------------------------- chronologie
   Le balisage genere imbrique une carte en .col-md-6 avec des <h4> pour la
   date et le medecin : chaque evenement occupait presque un ecran. On le
   ramene a une ligne dense sur un rail vertical. */
.profile-activity {
  position: relative;
  padding: .85rem 1.15rem .85rem 3rem;
  border-bottom: 1px solid var(--cl-border);
}
.profile-activity:last-child { border-bottom: 0; }
.profile-activity::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: -1px;
  left: 1.55rem;
  width: 2px;
  background: var(--cl-border);
}
.profile-activity:first-of-type::before { top: 1.35rem; }
.profile-activity:last-child::before { bottom: auto; height: 1.35rem; }

/* entete de l'evenement : type a gauche, date a droite */
.profile-activity > h5 {
  display: inline;
  margin: 0;
  float: none !important;
  font-size: .8125rem;
  font-weight: 600;
}
.profile-activity > h5:first-of-type { color: var(--cl-text); }
.profile-activity > h5 + h5 { float: right !important; color: var(--cl-text-muted); font-weight: 500; }
.profile-activity .label.r-activity {
  float: none !important;
  padding: 0;
  background: transparent;
  color: inherit;
  font-size: .8125rem;
  font-weight: 600;
}

/* pastille sur le rail */
.profile-activity .activity { position: static; padding: 0; }
.profile-activity .activity > span {
  position: absolute;
  top: .8rem;
  left: .85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: 50%;
  color: var(--cl-text-muted);
  font-size: .7rem;
  z-index: 1;
}

/* corps de l'evenement : plus de carte imbriquee, une simple ligne */
.profile-activity .activity-desk { margin: .3rem 0 0; }
.profile-activity .activity-desk > .card,
.profile-activity .activity-desk > .card.col-md-6 {
  width: 100% !important;
  max-width: 100%;
  flex: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.profile-activity .activity-desk .card-body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .9rem;
  padding: 0;
}
.profile-activity .activity-desk h4 {
  display: inline;
  margin: 0;
  color: var(--cl-text);
  font-size: .8125rem;
  font-weight: 500;
}
.profile-activity .activity-desk i {
  margin-right: .3rem;
  color: var(--cl-text-muted);
  font-size: .75rem;
}
.profile-activity .activity-desk p { margin: 0; font-size: .8125rem; }
.profile-activity .activity-desk p:empty { display: none; }
.profile-activity .arrow { display: none; }
/* la carte englobante ne redouble pas les marges */
.tab-pane .card > .profile-activity:first-of-type { border-top: 1px solid var(--cl-border); }

/* ---------------------------------------------------------- documents */
.patient_material_title, .post-info {
  font-size: .8125rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}
/* vignette de dossier ou de fichier : gabarit contenu */
.tab-pane img[src*="folder"]:not(.patient_material_class1 img),
.tab-pane .patient_material_div img,
.tab-pane .folder_div_main img {
  width: auto;
  max-width: 72px;
  max-height: 72px;
  object-fit: contain;
}
/* la vue empile une colonne .col-md-6.float-right : on la remet en flux */
.tab-pane .col-md-6.float-right { float: none !important; width: auto; max-width: 100%; }
.tab-pane .btn-group .dropdown-toggle { font-size: .8rem; padding: .32rem .6rem; }

/* ================================================================ utilitaires AdminLTE */
.img-circle { border-radius: 50%; }
.elevation-1 { box-shadow: var(--cl-shadow-xs) !important; }
.elevation-2 { box-shadow: var(--cl-shadow-sm) !important; }
.elevation-3 { box-shadow: var(--cl-shadow-md) !important; }
.elevation-4 { box-shadow: var(--cl-shadow-lg) !important; }
.text-sm { font-size: .8125rem !important; }
.text-lg { font-size: 1rem !important; }
.text-muted { color: var(--cl-text-muted) !important; }
.description-block { text-align: center; }

/* ================================================================ plugins */

/* --- DataTables --- */
.dataTables_wrapper { font-size: .875rem; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  padding: .35rem .6rem;
  background: var(--cl-surface);
  border: 1px solid var(--cl-border-strong);
  border-radius: var(--cl-radius-sm);
  color: var(--cl-text);
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--cl-text-muted); font-size: .8125rem; }
.dataTables_wrapper .dt-buttons { display: flex; flex-wrap: wrap; gap: .35rem; }
.dataTables_wrapper .dt-button {
  padding: .35rem .7rem !important;
  background: var(--cl-surface) !important;
  border: 1px solid var(--cl-border-strong) !important;
  border-radius: var(--cl-radius-sm) !important;
  box-shadow: var(--cl-shadow-xs);
  color: var(--cl-text) !important;
  font-size: .8rem !important;
}
.dataTables_wrapper .dt-button:hover { background: var(--cl-surface-muted) !important; }
table.dataTable > thead .sorting::after,
table.dataTable > thead .sorting_asc::after,
table.dataTable > thead .sorting_desc::after { opacity: .4; }

/* --- Select2 ---
   Les vues initialisent select2 sans option `theme`, la classe rendue est donc
   select2-container--default. C'est elle qu'il faut habiller : sans cela le
   controle tombe a 28 px de haut, en rupture avec les 38 px des autres champs
   (regles R7 et R8). */
.select2-container { width: 100% !important; max-width: 100%; }
.select2-container--default .select2-selection--single {
  display: flex;
  align-items: center;
  height: var(--cl-control-height);
  padding: 0 2.25rem 0 .75rem;
  background: var(--cl-surface);
  border: 1px solid var(--cl-border-strong);
  border-radius: var(--cl-radius-sm);
  box-shadow: var(--cl-shadow-xs);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  color: var(--cl-text);
  font-size: .875rem;
  line-height: 36px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--cl-ink-400); }
.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 0;
  right: .6rem;
  height: 36px;
  width: 20px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--cl-text-muted) transparent transparent transparent;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--cl-text-muted) transparent;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--cl-primary-400);
  box-shadow: 0 0 0 3px rgb(24 188 156 / .18);
}

/* selection multiple */
.select2-container--default .select2-selection--multiple {
  min-height: var(--cl-control-height);
  padding: .15rem .35rem;
  background: var(--cl-surface);
  border: 1px solid var(--cl-border-strong);
  border-radius: var(--cl-radius-sm);
  box-shadow: var(--cl-shadow-xs);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  margin: .18rem .25rem .18rem 0;
  padding: .12rem .5rem;
  background: var(--cl-primary-50);
  border: 1px solid var(--cl-primary-200);
  border-radius: var(--cl-radius-sm);
  color: var(--cl-primary-800);
  font-size: .8125rem;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  margin-right: .3rem;
  border: 0;
  color: var(--cl-primary-700);
}
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: rgb(24 188 156 / .16);
  border-color: rgb(24 188 156 / .35);
  color: var(--cl-primary-200);
}

/* panneau deroulant */
.select2-container--default .select2-dropdown {
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius);
  box-shadow: var(--cl-shadow-lg);
  overflow: hidden;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  padding: .45rem .6rem;
  background: var(--cl-surface);
  border: 1px solid var(--cl-border-strong);
  border-radius: var(--cl-radius-sm);
  color: var(--cl-text);
  font-size: .875rem;
}
.select2-container--default .select2-results__option {
  padding: .5rem .75rem;
  color: var(--cl-text);
  font-size: .875rem;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
  background: var(--cl-primary-500);
  color: #fff;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: var(--cl-surface-muted);
  color: var(--cl-text);
  font-weight: 500;
}

/* --- Select2, thème Bootstrap 5 (si une vue l'active explicitement) --- */
.select2-container--bootstrap-5 .select2-selection {
  min-height: 38px;
  background: var(--cl-surface);
  border-color: var(--cl-border-strong);
  border-radius: var(--cl-radius-sm);
  box-shadow: var(--cl-shadow-xs);
  color: var(--cl-text);
  font-size: .875rem;
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection {
  border-color: var(--cl-primary-400);
  box-shadow: 0 0 0 3px rgb(24 188 156 / .18);
}
.select2-container--bootstrap-5 .select2-dropdown {
  background: var(--cl-surface);
  border-color: var(--cl-border);
  border-radius: var(--cl-radius);
  box-shadow: var(--cl-shadow-lg);
}
.select2-container--bootstrap-5 .select2-results__option--highlighted {
  background: var(--cl-primary-500) !important;
  color: #fff;
}

/* --- toastr --- */
#toast-container > div {
  border-radius: var(--cl-radius);
  box-shadow: var(--cl-shadow-lg);
  opacity: 1;
  font-size: .875rem;
}

/* --- SweetAlert2 --- */
.swal2-popup {
  border-radius: var(--cl-radius-xl);
  background: var(--cl-surface);
  color: var(--cl-text);
  font-family: var(--bs-font-sans-serif);
}
.swal2-title { font-size: 1.15rem; font-weight: 600; }
.swal2-html-container { font-size: .9rem; }
.swal2-styled.swal2-confirm {
  background: var(--cl-primary-500) !important;
  border-radius: var(--cl-radius-sm) !important;
}
.swal2-styled.swal2-cancel { border-radius: var(--cl-radius-sm) !important; }

/* --- daterangepicker / datepicker --- */
.daterangepicker, .datepicker, .bootstrap-datetimepicker-widget {
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius);
  box-shadow: var(--cl-shadow-lg);
  color: var(--cl-text);
  font-family: var(--bs-font-sans-serif);
  font-size: .8125rem;
}
.daterangepicker td.active, .datepicker td.active,
.bootstrap-datetimepicker-widget td.active {
  background: var(--cl-primary-500) !important;
  color: #fff !important;
}

/* --- summernote --- */
.note-editor.note-frame {
  border: 1px solid var(--cl-border-strong);
  border-radius: var(--cl-radius-sm);
}
.note-editor .note-toolbar { background: var(--cl-surface-muted); border-bottom: 1px solid var(--cl-border); }
.note-editor .note-editable { background: var(--cl-surface); color: var(--cl-text); }

/* --- dropzone --- */
.dropzone {
  background: var(--cl-surface-muted);
  border: 2px dashed var(--cl-border-strong);
  border-radius: var(--cl-radius-lg);
}

/* --- fullcalendar --- */
.fc { font-size: .875rem; }
.fc .fc-toolbar-title { font-size: 1.05rem; font-weight: 600; }
.fc .fc-button-primary {
  background: var(--cl-surface);
  border-color: var(--cl-border-strong);
  color: var(--cl-text);
}
.fc .fc-button-primary:not(:disabled).fc-button-active { background: var(--cl-primary-500); border-color: var(--cl-primary-500); color: #fff; }
.fc-theme-standard td, .fc-theme-standard th, .fc-theme-standard .fc-scrollgrid { border-color: var(--cl-border); }

/* ================================================================ impression */
@media print {
  .main-sidebar, .main-header, .cl-backdrop, .no-print, .dt-buttons { display: none !important; }
  .content-wrapper, body > section { margin: 0 !important; padding: 0 !important; }
  .card { border: 0; box-shadow: none; }
}

/* ================================================================ tuiles de statistiques
   Place en fin de feuille a dessein : les utilitaires .bg-* declares plus haut
   portent !important et l'emporteraient sinon. Une tuile de chiffre est une
   donnee, pas un statut : elle suit la regle 1.1 et reste sur surface neutre,
   le chiffre en avant, la couleur reduite a l'icone. Les aplats satures
   plaçaient du texte sombre sur fond vif, en dessous du contraste 4.5:1. */
.small-box,
.small-box.bg-success, .small-box.bg-danger, .small-box.bg-info,
.small-box.bg-warning, .small-box.bg-primary, .small-box.bg-secondary,
.small-box[class*="bg-gradient"] {
  background: var(--cl-surface) !important;
  border: 1px solid var(--cl-border) !important;
  color: var(--cl-text) !important;
}
.small-box > .inner h3,
.small-box > .inner h3 small,
.small-box > .inner p,
.small-box > .inner,
.small-box a.small-box-footer,
.small-box .small-box-footer { color: var(--cl-text) !important; }
.small-box > .inner p,
.small-box .small-box-footer { color: var(--cl-text-muted) !important; }
.small-box .small-box-footer:hover { color: var(--cl-primary-600) !important; }

/* l'icone porte la couleur semantique, en aplat tres attenue */
.small-box .icon i, .small-box .icon svg { opacity: 1; }
.small-box.bg-success .icon i { color: var(--cl-success) !important; }
.small-box.bg-danger  .icon i { color: var(--cl-danger)  !important; }
.small-box.bg-info    .icon i { color: var(--cl-info)    !important; }
.small-box.bg-warning .icon i { color: var(--cl-warning) !important; }
.small-box.bg-primary .icon i { color: var(--cl-primary-500) !important; }
.small-box .icon { opacity: .16; }

/* pastilles de valeur des listes de statistiques : gabarit unique */
.list-group .badge, .card-body ul li > .badge, table td > .badge {
  min-width: 1.75rem;
  padding: .2rem .5rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  text-align: center;
}

/* ================================================================ echelle typographique
   Regle 1.2 — quatre tailles, pas davantage. Les vues emploient <h1> a <h4>
   dans les cartes ("Statistiques", en-tete de facture, titres de bloc) avec la
   taille par defaut de Bootstrap, jusqu'a 2.5 rem : hors echelle et hors
   hierarchie, puisque le titre de page fait 1.4 rem. */
.card h1:not(.small-box h1), .card h2:not(.small-box h2) { font-size: 1.15rem; font-weight: 650; }
.card h3:not(.small-box h3):not(.stat-number) { font-size: 1rem; font-weight: 600; }
.card h4, .card h5, .card h6 { font-size: .875rem; font-weight: 600; }
.card p { font-size: .875rem; }
/* la tuile de chiffre garde son gabarit propre */
.small-box > .inner h3, .card-custom .stat-number { font-size: 1.85rem; font-weight: 650; }
/* en-tete de facture : lisible sans ecraser la page */
.invoice h1, .invoice h2, .invoice-header h1, .invoice-header h2 { font-size: 1.3rem; }

/* ================================================================ coherence des boutons
   Releve d'audit : .btn-info sert de bouton de validation dans 61 vues, alors
   que --cl-info est reserve aux bandeaux et badges (regle 1.1). Des classes
   heritees du theme d'origine (.green, .status, .btn-white, .export) sont
   redefinies par des feuilles par vue avec des couleurs en dur. */

/* l'action de validation d'un formulaire est l'action principale */
form .btn-info[type="submit"],
form button.btn-info[type="submit"],
.modal-footer .btn-info[type="submit"] {
  --bs-btn-bg: var(--cl-primary-fill);
  --bs-btn-border-color: var(--cl-primary-fill);
  --bs-btn-hover-bg: var(--cl-primary-fill-hover);
  --bs-btn-hover-border-color: var(--cl-primary-fill-hover);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
}

/* classes heritees : ramenees dans le systeme, les feuilles par vue les
   peignaient en vert sombre, vert vif ou gris selon l'ecran */
.btn.green {
  background: var(--cl-primary-500) !important;
  border: 1px solid var(--cl-primary-500) !important;
  color: #fff !important;
}
.btn.status,
.btn.btn-white,
span.btn.btn-white {
  background: var(--cl-surface) !important;
  border: 1px solid var(--cl-border-strong) !important;
  color: var(--cl-text) !important;
}
button.export, .btn.export {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: var(--cl-control-height);
  padding: .5rem .9rem;
  background: var(--cl-surface);
  border: 1px solid var(--cl-border-strong);
  border-radius: var(--cl-radius-sm);
  color: var(--cl-text);
  font-size: .875rem;
  font-weight: 500;
}
button.export:hover, .btn.export:hover { background: var(--cl-surface-muted); }

/* ================================================================ garde-fous sur les vues
   Ces regles neutralisent des valeurs codees en dur dans les vues (92 attributs
   style releves sur 30 fichiers) qu'on ne peut pas retirer sans toucher au
   balisage. Elles disparaitront a mesure que les vues seront migrees. */

/* vignettes dimensionnees en dur, par attribut ou par style */
.table td img.rounded-circle,
.table td img[width], .table td img[height] {
  width: 2.25rem !important;
  height: 2.25rem !important;
  object-fit: cover;
}
.example-image:not(.patient_material_class1 *), .task-thumb img, .img_thumb, .img_class, .img_height {
  width: auto !important;
  height: auto !important;
  max-width: 84px;
  max-height: 84px;
  object-fit: contain;
}

/* champs de saisie sans classe : meme gabarit que .form-control (R7, R8) */
.card-body input[type="text"]:not([class]),
.panel-body input[type="text"]:not([class]),
input.input-md {
  min-height: var(--cl-control-height);
  padding: .5rem .75rem;
  background: var(--cl-surface);
  border: 1px solid var(--cl-border-strong);
  border-radius: var(--cl-radius-sm);
  color: var(--cl-text);
  font-size: .875rem;
}

/* R20 — une modale n'accueille pas de formulaire a deux colonnes */
.modal-body .form-row > [class*="col-"],
.modal-body form.row > [class*="col-"],
.modal-body > form > [class*="col-md-"],
.modal-body [class*="col-md-6"] {
  flex: 0 0 100%;
  max-width: 100%;
}
/* Ne cibler que les DIV : <input> et <select> sont des elements vides au sens
   CSS (:empty), et les champs de cette application portent presque tous une
   classe col-*. La regle precedente les faisait disparaitre. */
.modal-body div[class*="col-"]:empty { display: none; }

/* hauteurs de page et filets codes en dur */
.site-height { min-height: 0 !important; }
.card-body hr, .panel-body hr, .content-wrapper hr { border-top: 1px solid var(--cl-border) !important; }

/* colonnes de grille imbriquees sans .row : les gouttieres se cumulaient */
[class*="col-md-"] > [class*="col-md-"],
[class*="col-sm-"] > [class*="col-sm-"] { padding-inline: 0; }

/* editeurs de texte enrichi : meme largeur que les autres champs (R7) */
.ck.ck-editor, .ck-editor__editable, textarea.ckeditor, .note-editor {
  width: 100% !important;
  max-width: 100%;
}

/* ================================================================ detournements de composants
   Releves d'audit : le .badge sert de tuile de statistique et de conteneur
   d'alerte, des boutons n'ont aucune classe de variante et deviennent
   invisibles, des feuilles par vue imposent des tailles hors echelle. */

/* R15 — un badge est un statut court, jamais un conteneur de bloc */
.card-body .row.badge,
.card .badge[class*="row"],
.card-body > .badge {
  display: flex;
  width: auto;
  padding: .75rem 1rem;
  background: var(--cl-surface) !important;
  border: 1px solid var(--cl-border) !important;
  border-radius: var(--cl-radius) !important;
  color: var(--cl-text) !important;
  font-size: .875rem !important;
  font-weight: 500;
}
.card-body > .badge:empty, .card .badge:empty { display: none; }

/* un bouton sans classe de variante reste visible (contraste, regle §6) */
.content-wrapper .btn:not([class*="btn-"]):not(.btn-tool),
body > section .btn:not([class*="btn-"]):not(.btn-tool) {
  background: var(--cl-surface);
  border: 1px solid var(--cl-border-strong);
  color: var(--cl-text);
}

/* une meme action porte la meme apparence : l'impression est une action
   secondaire, quelle que soit la classe posee par la vue */
[onclick*="window.print"], [onclick*="javascript:window.print"] {
  --bs-btn-bg: var(--cl-surface);
  --bs-btn-border-color: var(--cl-border-strong);
  --bs-btn-color: var(--cl-text);
  --bs-btn-hover-bg: var(--cl-surface-muted);
  --bs-btn-hover-color: var(--cl-text);
}

/* conteneurs peints en dur alors qu'ils portent une donnee, pas un statut */
.card.bg-danger, .card.bg-success, .card.bg-info, .card.bg-warning,
.card-body > .bg-info, .card-body > .bg-success, .card-body > .bg-danger {
  background: var(--cl-surface) !important;
  border: 1px solid var(--cl-border) !important;
  color: var(--cl-text) !important;
}
.card.bg-danger *, .card.bg-success *, .card.bg-info *, .card.bg-warning * { color: var(--cl-text) !important; }

/* tailles de police sous le plancher de l'echelle (0.8125 rem) */
.percent_amount, .card-body [style*="font-size: 8px"], .card-body [style*="font-size:8px"] {
  font-size: .8125rem !important;
}
select.form-control option, select option { color: var(--cl-text) !important; font-size: .875rem !important; }

/* le focus reste visible meme si une feuille heritee tente de le supprimer */
.content-wrapper :is(input, select, textarea, button, a):focus-visible,
body > section :is(input, select, textarea, button, a):focus-visible {
  outline: 2px solid var(--cl-primary-500) !important;
  outline-offset: 2px !important;
}

/* bordures et filets codes en dur dans les vues de facture */
.card-body [style*="solid black"], .card-body [style*="solid #000"],
.detailssale, .invoice-all td[style*="solid"] {
  border-color: var(--cl-border) !important;
  border-width: 1px !important;
}
.invoice-all, .invoice-all * { font-family: var(--bs-font-sans-serif) !important; }

/* ================================================================ feuilles heritees par vue
   Onze vues chargent des feuilles de common/extranal/css/** APRES le theme.
   Elles contiennent des selecteurs d'element non scopes en !important
   (thead, table) qui cassent l'en-tete de tableau et le mode sombre. Ces
   regles reprennent la main ; le vrai correctif est le retrait des <link>. */
.content-wrapper .table > thead,
.content-wrapper .table > thead > tr > th,
body > section .table > thead,
body > section .table > thead > tr > th {
  background: transparent !important;
  border-bottom: 1px solid var(--cl-border) !important;
  color: var(--cl-text-muted) !important;
}

/* la suppression est rouge partout : certaines vues la posent en btn-info,
   et la neutralisation des actions de ligne excluait .delete_button */
.btn.delete_button, .table td .btn.delete_button, a.delete_button.btn {
  background: var(--cl-danger-fill) !important;
  border-color: var(--cl-danger-fill) !important;
  color: #fff !important;
}

/* en-tete de facture : dans un .panel, l'echelle de .card ne s'applique pas */
.corporate-id h1, .invoice-list h1, .panel .corporate-id h1 { font-size: 1.3rem; font-weight: 650; }

/* odontogramme : largeur figee et flottant */
.tooth-chart { width: 100% !important; max-width: 450px; float: none !important; }

/* zones de texte a geometrie figee dans les vues */
.tab-pane textarea[style], .card-body textarea[style*="height"] {
  height: auto !important;
  min-height: 96px;
  font-size: .875rem !important;
}

/* largeurs de bouton figees en pixels dans les cellules d'actions */
.table td .btn[style*="width"], .btn_width { width: auto !important; }

/* ================================================================ accordeons
   Les titres d'accordeon des reglages sont des <a> sans classe : ils tombaient
   sur le bleu par defaut de Bootstrap (#0d6efd), hors palette (regle 1.1). */
.card-title > a[data-bs-toggle="collapse"],
.card-title > a[data-toggle="collapse"],
.panel-title > a {
  display: block;
  color: var(--cl-text);
  font-size: .975rem;
  font-weight: 600;
}
.card-title > a[data-bs-toggle="collapse"]:hover,
.panel-title > a:hover { color: var(--cl-primary-700); }
[data-bs-theme="dark"] .card-title > a[data-bs-toggle="collapse"]:hover { color: var(--cl-primary-300); }
/* chevron d'etat, sans bordure ni couleur (regle 1.3 bis) */
.card-title > a[data-bs-toggle="collapse"]::after {
  content: "";
  float: right;
  width: .5rem; height: .5rem;
  margin-top: .35rem;
  border-right: 1.5px solid var(--cl-text-muted);
  border-bottom: 1.5px solid var(--cl-text-muted);
  transform: rotate(45deg);
  transition: transform var(--cl-transition);
}
.card-title > a[data-bs-toggle="collapse"].collapsed::after { transform: rotate(-45deg); }

/* ================================================================ couleurs decoratives des vues
   Ces aplats ne portent aucune information : ni statut, ni donnee clinique.
   Ils viennent de feuilles heritees ou d'attributs style et sont ramenes sur
   des surfaces neutres (regle 1.1).

   EXCEPTION assumee : les pastilles de l'odontogramme
   (patient/views/medical_history.php) gardent leurs couleurs distinctes, car
   la couleur y encode l'etat dentaire — carie, couronne, extraction. La
   neutraliser supprimerait de l'information clinique. */

/* en-tetes de jour du planning : bleu ardoise, brun, brun fonce arbitraires */
#editable-sample td[style*="background"],
.timeslot_table td[style*="background"],
table td[style*="background:#"], table td[style*="background: #"] {
  background: var(--cl-surface-muted) !important;
  color: var(--cl-text) !important;
}
/* on retablit l'odontogramme, dont la couleur est porteuse de sens */
.clickUl li a[style*="background"],
.odontogram [style*="background"],
#odontogram [style*="background"] { background: revert-layer; color: #fff !important; }

/* tuiles de tarif : degrades et aplats satures de package.css / change_plan.css */
.pricing-table [class^="package_recommend"],
.pricing-table .pricing-head,
.price-table-container, .package_recommend1, .package_recommend2,
.pricing-table .price-value, .pricing-table .pricing-body {
  background: var(--cl-surface) !important;
  background-image: none !important;
  border-color: var(--cl-border) !important;
  color: var(--cl-text) !important;
}

/* colonne de libelle des comptes rendus de laboratoire : 50 px est illisible */
.control_label {
  width: auto !important;
  min-width: 7rem;
  font-size: .8125rem !important;
  font-weight: 500;
  color: var(--cl-text-muted);
}
.info_text { font-size: .875rem; }

/* filtre de dates positionne par flottant et marge en pourcentage */
.card > .date_field, .card > .row.date_field {
  float: none !important;
  width: auto !important;
  margin: 0 1.15rem 1rem !important;
}

/* hauteurs de page imposees (les deux orthographes coexistent dans les vues) */
.site-height, .site_height { min-height: 0 !important; }

/* bordures de tableau imposees par les feuilles de vue */
.table-bordered, .table-bordered th, .table-bordered td,
.content-wrapper table[border], body > section table[border] {
  border-color: var(--cl-border) !important;
}

/* cales et conteneurs herites */
.white-box { padding: 0 !important; background: transparent !important; }
.white-box > .card { margin-top: 1rem !important; }
.verifyTitle { margin: 2rem 0 !important; font-size: 1.4rem; font-weight: 650; }
.block1, .flex-wrapper {
  background: var(--cl-surface) !important;
  border-color: var(--cl-border) !important;
}

/* pied de modale construit a l'ouverture (voir theme/js/app.js) */
.modal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: flex-end;
  padding: .9rem 1.25rem;
  background: var(--cl-surface);
  border-top: 1px solid var(--cl-border);
  border-radius: 0 0 var(--cl-radius-xl) var(--cl-radius-xl);
}
.modal-footer > .btn { margin: 0; float: none !important; width: auto !important; }
/* le bouton de validation redevient l'action principale, quelle que soit la
   classe posee par la vue */
.modal-footer > .btn[type="submit"] {
  --bs-btn-bg: var(--cl-primary-fill);
  --bs-btn-border-color: var(--cl-primary-fill);
  --bs-btn-hover-bg: var(--cl-primary-fill-hover);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  order: 2;
}
.modal-footer > .btn[data-bs-dismiss="modal"], .modal-footer > .btn[data-dismiss="modal"] {
  --bs-btn-bg: var(--cl-surface);
  --bs-btn-border-color: var(--cl-border-strong);
  --bs-btn-color: var(--cl-text);
  order: 1;
}

/* ================================================================ surfaces imbriquees
   Une carte dans une carte produit un double encadrement : deux bordures, deux
   rayons, deux ombres et deux marges interieures pour un seul niveau
   d'information. La surface interieure perd donc son habillage et ne conserve
   que sa structure. Un seul niveau de surface par bloc. */
.card .card,
.card .panel,
.panel .card,
.panel .panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 0;
}
/* Les entrees de chronologie portent .card-body sans etre des cartes
   imbriquees : les exclure leur rend le couloir de gauche, sans lequel la
   pastille du rail se posait sur le titre de l'evenement. */
.card .card > .card-body:not(.profile-activity),
.card .panel > .panel-body:not(.profile-activity),
.panel .card > .card-body:not(.profile-activity) { padding-inline: 0; }
.card .card > .card-header,
.panel .card > .card-header,
.card .panel > .panel-heading {
  padding-inline: 0;
  border-bottom: 1px solid var(--cl-border);
}
/* la tuile de chiffre et la fiche patient restent des surfaces a part entiere */
.card .small-box, .card .card-custom, .card .timeline > li > .timeline-item {
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius-lg);
  box-shadow: var(--cl-shadow-xs);
}

/* ================================================================ cellules composites
   Certaines listes empilent dans une meme cellule une valeur principale et son
   contexte (nom, puis adresse et telephone separes par des <br>). Sans
   traitement, les trois lignes ont le meme poids : la ligne monte a 88 px
   contre 44 ailleurs, et l'oeil ne sait plus quoi lire (R16).
   La cellule adopte donc une echelle secondaire : la valeur reste lisible, le
   contexte s'efface. */
.table td:has(br) {
  padding-top: .5rem;
  padding-bottom: .5rem;
  font-size: .8125rem;
  line-height: 1.35;
  color: var(--cl-text-muted);
  white-space: normal;
  max-width: 30ch;
}
.table td:has(br) a,
.table td:has(br) strong,
.table td:has(br) b { color: var(--cl-text); font-size: .875rem; font-weight: 500; }

/* ================================================================ barres de filtre
   Un champ de date etire sur 526 px n'apporte rien : la largeur suit le
   contenu attendu (regle R7 appliquee au bon gabarit). */
.date_field input, .date_field .form-control,
input[placeholder*="Date"], input[placeholder*="date"],
input[name="from_date"], input[name="to_date"], input[name="date_from"], input[name="date_to"] {
  max-width: 15rem;
}
.card > .row:has(input[placeholder*="ate"]),
.date_field { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }

/* ================================================================ groupes d'actions
   Regle 1.1 — une seule action principale par ecran. L'ecran d'encaissement
   propose trois enregistrements empiles (valider, valider et imprimer,
   enregistrer comme brouillon) en trois couleurs pleines : la principale ne se
   distingue plus. Seule la premiere garde la couleur de marque ; les variantes
   deviennent secondaires. */
form .btn-warning[type="submit"],
form button.btn-warning[type="submit"],
form .btn[type="submit"] ~ .btn[type="submit"],
.card-body .btn-primary ~ .btn-warning,
.card-body .btn-info ~ .btn-warning {
  --bs-btn-bg: var(--cl-surface);
  --bs-btn-border-color: var(--cl-border-strong);
  --bs-btn-color: var(--cl-text);
  --bs-btn-hover-bg: var(--cl-surface-muted);
  --bs-btn-hover-color: var(--cl-text);
  --bs-btn-hover-border-color: var(--cl-border-strong);
}
/* le groupe d'actions respire et s'aligne a droite */
.card-body > .btn + .btn, .card-body .form-group > .btn + .btn { margin-top: .5rem; }

/* ================================================================ ombres heritees
   Les feuilles par vue posent des ombres en couleur claire codee en dur, par
   exemple box-shadow: 0 0 100px #f1f2f7 sur le formulaire d'encaissement
   (common/extranal/css/finance/add_payment_view.css:22). Invisible sur fond
   clair, cette lueur de 100 px devient un halo blanc en mode sombre.
   L'elevation vient des jetons, jamais d'une couleur en dur (regle 8). */
.content-wrapper form, .content-wrapper .form-row,
body > section form, body > section .form-row,
.content-wrapper .card, .content-wrapper .panel {
  box-shadow: none;
}
.content-wrapper .card, .content-wrapper .panel,
body > section .card, body > section .panel {
  box-shadow: var(--cl-shadow-xs);
}

/* mentions d'aide peintes en dur dans les vues (ex. #F05 italique pour le
   rappel de TVA) : ce sont des textes d'assistance, pas des alertes */
.card-body span[style*="color: #F05"], .card-body span[style*="color:#F05"],
.card-body span[style*="color: #f05"], .card-body span[style*="color:#f05"],
.payment span[style*="italic"] {
  color: var(--cl-text-muted) !important;
  font-style: normal !important;
  font-size: .8125rem;
}

/* le champ de recherche du multi-select et les widgets injectes restent dans
   la carte : mesure avant correction, 18 px hors du bord (R1) */
.ms-container, .ms-container .ms-selectable, .ms-container .ms-selection,
.ms-container .search-input, .ms-container input[type="text"],
.card-body .select2-container, .card-body .ms-container * {
  max-width: 100%;
  box-sizing: border-box;
}
.ms-container .search-input { width: 100% !important; }

/* ================================================================ troncature lisible
   Mesure : les champs de l'ecran d'encaissement s'arretent bien dans la marge
   de la carte, mais leur texte indicatif est plus long qu'eux et se coupe net
   au milieu d'un mot — ce qui se lit comme un debordement (R2 : le contenu
   long est tronque proprement, jamais coupe).
   La troncature devient explicite, et le champ recupere de la largeur en
   reduisant la colonne de libelle quand la carte est etroite. */
input.form-control, select.form-control, .form-control {
  text-overflow: ellipsis;
}
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  padding-right: .25rem;
}
input::placeholder { text-overflow: ellipsis; }

/* sous 1400 px la colonne de libelle se resserre pour rendre de la place au
   champ, plutot que de laisser le texte se faire couper */
@media (max-width: 1400px) {
  .form-group.d-flex > label,
  .form-group.d-flex > .control-label,
  .d-flex:not(.row) > label[class*="col-"] {
    flex-basis: clamp(88px, 26%, 150px);
    max-width: clamp(88px, 26%, 150px);
    font-size: .78rem;
  }
}

/* ================================================================ select2 : element d'origine
   Select2 conserve le <select> source pour l'accessibilite et le masque via
   .select2-hidden-accessible. Mes regles sur select.form-control (largeur,
   hauteur minimale, apparence) reprenaient le dessus : l'element redevenait
   visible et debordait de sa colonne — mesure sur l'ecran de presence,
   725 px de large, 343 px de debordement de page.
   Le masquage accessible reprend la main, sans retirer l'element du DOM. */
/* Les feuilles par vue posent width: 100% !important sur des selecteurs d'ID
   (attendance.css : #staff_select, #attendance_month...). Un selecteur d'ID
   bat toute regle de classe, meme en !important : la largeur ne peut donc pas
   etre reprise par width. On passe par max-width, qui prime sur width quelle
   que soit la specificite. */
select.select2-hidden-accessible,
.select2-hidden-accessible {
  position: absolute !important;
  max-width: 1px !important;
  max-height: 1px !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  background-image: none !important;
}

/* le voile « traitement » de DataTables porte la classe card : c'est un
   indicateur flottant, pas une surface de contenu */
.dataTables_processing.card {
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius);
  box-shadow: var(--cl-shadow-lg);
  background: var(--cl-surface);
  font-size: .8125rem;
  color: var(--cl-text-muted);
}

/* ================================================================ navigation par periode
   Les rapports proposent « precedent / suivant » en btn-warning et btn-success :
   deux couleurs semantiques pour une simple navigation, et deux poids
   differents pour deux actions symetriques (regle 1.1). On les cible par leur
   icone directionnelle, ce qui reste valable dans toutes les langues. */
.btn:has(> .fa-arrow-circle-left), .btn:has(> .fa-arrow-circle-right),
.btn:has(> .fa-arrow-left), .btn:has(> .fa-arrow-right),
.btn:has(> .fa-angle-left), .btn:has(> .fa-angle-right),
.btn:has(> .fa-chevron-left), .btn:has(> .fa-chevron-right),
.btn:has(.fa-arrow-circle-left), .btn:has(.fa-arrow-circle-right) {
  --bs-btn-bg: var(--cl-surface);
  --bs-btn-border-color: var(--cl-border-strong);
  --bs-btn-color: var(--cl-text);
  --bs-btn-hover-bg: var(--cl-surface-muted);
  --bs-btn-hover-color: var(--cl-text);
  --bs-btn-hover-border-color: var(--cl-border-strong);
  background: var(--cl-surface) !important;
  border: 1px solid var(--cl-border-strong) !important;
  color: var(--cl-text) !important;
  font-weight: 500;
}

/* ================================================================ blocs d'article du point de vente
   Le point de vente affiche les caracteristiques de chaque article en texte
   brut a la taille du corps de page, sans structure libelle / valeur, et le
   champ de quantite chevauche le bloc. */
.pos_medicine_details, .medicine_details, .selected_medicine,
.card-body [id*="medicine_details"] {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .75rem .9rem;
  background: var(--cl-surface-muted);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius);
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--cl-text-muted);
}
.pos_medicine_details input, .medicine_details input, .selected_medicine input {
  align-self: flex-start;
  width: 5rem;
  min-height: var(--cl-control-height);
  margin-top: .35rem;
  padding: .35rem .5rem;
  background: var(--cl-surface);
  border: 1px solid var(--cl-border-strong);
  border-radius: var(--cl-radius-sm);
  color: var(--cl-text);
  font-size: .875rem;
}

/* ==========================================================================
   Point de vente de la pharmacie

   Le panier etait une pile de <div> de texte avec le champ de quantite pose a
   cote du bloc plutot que dedans. Il devient un tableau : une ligne par
   article, sa quantite, son total. Espacements sur la grille de 4 px (§1.3),
   nombres alignes a droite (R14), aucune bordure coloree (§1.3 bis).
   ========================================================================== */

.pos-form { display: flex; flex-direction: column; gap: 1.5rem; }

.pos-invoice-ref { margin: 0; color: var(--cl-text-muted); font-size: .8125rem; }

/* --- recherche ----------------------------------------------------------- */
.pos-search { max-width: 40rem; }
.pos-search .form-label { display: block; margin-bottom: .5rem; font-weight: 600; }
.pos-hint { margin: .5rem 0 0; font-size: .8125rem; color: var(--cl-text-muted); }

/* --- panier -------------------------------------------------------------- */
.pos-cart-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: .75rem;
}
.pos-cart-title { font-weight: 600; }

.pos-cart-table { margin-bottom: 0; }
.pos-cart-table th,
.pos-cart-table td { vertical-align: middle; }

/* R2 : ce qui est long est tronque, jamais coupe en plusieurs lignes */
.pos-cart-table .pos-name,
.pos-cart-table .pos-company {
  max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* R14 : les nombres s'alignent a droite */
.pos-cart-table .pos-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pos-cart-table .pos-line-total { font-weight: 600; }
.pos-cart-table .pos-stock { color: var(--cl-text-muted); }

.pos-cart-table .pos-qty { width: 9rem; }
.pos-cart-table .pos-qty-input { width: 6rem; text-align: right; font-variant-numeric: tabular-nums; }
.pos-cart-table .pos-act { width: 3rem; text-align: right; }

.pos-remove {
  color: var(--cl-text-muted);
  background: transparent;
  border: 1px solid transparent;
  padding: 0 .5rem;
}
.pos-remove:hover, .pos-remove:focus-visible {
  color: var(--cl-danger);
  background: var(--cl-surface-muted);
}

/* depassement de stock : fond teinte et message, jamais de bordure coloree */
.pos-cart-table tr.is-over > td { background: rgba(240, 68, 56, .08); }
.pos-stock-warning {
  display: block; margin-top: .25rem;
  font-size: .75rem; color: var(--cl-danger); white-space: nowrap;
}

.pos-empty {
  margin: 0; padding: 2rem 1rem;
  text-align: center; color: var(--cl-text-muted);
  background: var(--cl-surface-muted); border-radius: var(--cl-radius);
}

/* --- totaux -------------------------------------------------------------- */
.pos-summary {
  align-self: flex-end;
  width: 100%; max-width: 26rem;
  display: flex; flex-direction: column; gap: .75rem;
  padding: 1rem;
  background: var(--cl-surface-muted);
  border-radius: var(--cl-radius);
}
.pos-summary-line {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.pos-summary-line > label { margin: 0; flex: 0 0 auto; }
.pos-summary-line > .form-control { flex: 0 1 11rem; text-align: right; }
.pos-amount { font-variant-numeric: tabular-nums; font-weight: 600; }

.pos-summary-total > label { font-weight: 600; }
.pos-summary-total > .form-control { font-size: 1.125rem; font-weight: 700; }

.pos-summary-actions { display: flex; justify-content: flex-end; }
.pos-summary-actions .btn { min-width: 10rem; }

@media (max-width: 575.98px) {
  .pos-summary { max-width: none; }
  .pos-summary-line { flex-direction: column; align-items: stretch; gap: .25rem; }
  .pos-summary-line > .form-control { flex: 1 1 auto; }
}

/* Navigation par periode : precedent puis suivant, groupes a droite de
   l'en-tete. Les blocs etaient poses en float-right, ou l'ordre visuel est
   l'inverse de l'ordre du code ; .card-header etant devenu une boite flexible,
   l'ordre du code prime desormais. */
.cl-period-nav {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
}
.cl-period-nav > div { float: none !important; margin: 0 !important; }
.cl-period-nav a { text-decoration: none; }

/* ==========================================================================
   Documents du patient

   Chaque fichier ou dossier etait une carte coupee en deux colonnes : une
   vignette de cent pixels a gauche, le nom et les actions a droite, sans
   largeur commune. Le nom se retrouvait a mi-hauteur de l'image et debordait.
   On en fait une tuile : vignette, nom dessous, actions en pied.
   ========================================================================== */

.patient_material_class1 {
  flex: 0 0 auto;
  width: 12.5rem;
  margin: 0 !important;
  padding: .75rem !important;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius);
  box-shadow: none;
}

/* les deux demi-colonnes du balisage d'origine s'empilent */
.patient_material_class1 > [class*="col-"] {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.patient_material_class1 .post-info { margin: 0; }

/* vignette : cadre carre, image contenue, jamais deformee ni debordante */
.patient_material_class1 .post-info a,
.patient_material_class1 .post-info > img { display: block; }
.patient_material_class1 img {
  width: 100% !important;
  height: 6.5rem !important;
  object-fit: contain;
  background: var(--cl-surface-muted);
  border-radius: var(--cl-radius-sm);
}

/* R2 : un nom long est tronque, il ne pousse pas la tuile */
.patient_material_class1 .patient_material_title {
  min-height: 2.4em;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--cl-text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

/* R5 : les actions restent sur une ligne, au pied de la tuile */
.patient_material_class1 .btn-group,
.patient_material_class1 .post-info:last-child {
  display: flex;
  gap: .35rem;
  margin-top: auto;
}
.patient_material_class1 .btn-group .btn { width: 100%; }

/* la grille qui porte les tuiles */
.tab-pane .col-md-12.row:has(.patient_material_class1) {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0;
}

/* ==========================================================================
   Hierarchie des boutons d'action                        (regle 1.1)

   L'application employait les couleurs semantiques comme habillage generique :
   635 boutons bleus « information », 183 verts « reussite », contre 120 au ton
   de la marque. « Ajouter » etait vert, « Soumettre » bleu, « Precedent »
   orange — la couleur ne signalait plus rien, et le teal de Clinica
   n'apparaissait presque jamais.

   Trois roles, trois traitements :
     - action principale d'un ecran ou d'un formulaire : teal de la marque ;
     - action de ligne ou action secondaire : neutre, pour ne pas concurrencer
       la principale ni transformer un tableau en guirlande ;
     - action destructrice : rouge, seule couleur conservee pour son sens.

   Le remappage passe par les variables Bootstrap : aucun balisage ne change,
   et .btn-danger garde son role.
   ========================================================================== */

/* --- action principale --------------------------------------------------- */
.btn-info,
.btn-success {
  --bs-btn-bg: var(--cl-primary-fill);
  --bs-btn-border-color: var(--cl-primary-fill);
  --bs-btn-hover-bg: var(--cl-primary-fill-hover);
  --bs-btn-hover-border-color: var(--cl-primary-fill-hover);
  --bs-btn-active-bg: var(--cl-primary-fill-active);
  --bs-btn-active-border-color: var(--cl-primary-fill-active);
  --bs-btn-disabled-bg: var(--cl-surface-muted);
  --bs-btn-disabled-border-color: var(--cl-border);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: var(--cl-text-muted);
}

/* --- actions de ligne et actions secondaires : neutres -------------------- */
/* Dans un tableau, chaque ligne repete les memes actions : les peindre revient
   a peindre la page entiere. Seule la suppression garde sa couleur. */
.table td .btn-info,
.table td .btn-success,
.table td .btn-warning,
.table th .btn-info,
.btn-info.editbutton,  .btn-info.edittbutton,
.btn-info.detailsbutton, .btn-info.viewbutton,
.btn-success.editbutton, .btn-success.edittbutton,
.btn-success.detailsbutton, .btn-success.viewbutton,
.btn-warning.editbutton, .btn-warning.detailsbutton,
.btn-info.dropdown-toggle,
.btn-success.dropdown-toggle,
.btn-warning,
.dropdown .btn-info,
.btn-group .btn-info:not([type="submit"]) {
  --bs-btn-bg: var(--cl-surface);
  --bs-btn-border-color: var(--cl-border-strong);
  --bs-btn-color: var(--cl-text);
  --bs-btn-hover-bg: var(--cl-surface-muted);
  --bs-btn-hover-border-color: var(--cl-border-strong);
  --bs-btn-hover-color: var(--cl-text);
  --bs-btn-active-bg: var(--cl-surface-muted);
  --bs-btn-active-border-color: var(--cl-border-strong);
  --bs-btn-active-color: var(--cl-text);
}

/* mais l'action qui valide un formulaire reste principale, ou qu'elle soit */
.modal-footer .btn-info,
.modal-footer .btn-success,
.btn-info[type="submit"],
.btn-success[type="submit"],
button[type="submit"].btn-info,
button[type="submit"].btn-success {
  --bs-btn-bg: var(--cl-primary-fill);
  --bs-btn-border-color: var(--cl-primary-fill);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--cl-primary-fill-hover);
  --bs-btn-hover-border-color: var(--cl-primary-fill-hover);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--cl-primary-fill-active);
  --bs-btn-active-color: #fff;
}

/* les variantes en contour suivent la meme logique */
.btn-outline-info,
.btn-outline-success {
  --bs-btn-color: var(--cl-primary-600);
  --bs-btn-border-color: var(--cl-primary-fill);
  --bs-btn-hover-bg: var(--cl-primary-500);
  --bs-btn-hover-border-color: var(--cl-primary-500);
  --bs-btn-hover-color: #fff;
}
.btn-outline-warning {
  --bs-btn-color: var(--cl-text);
  --bs-btn-border-color: var(--cl-border-strong);
  --bs-btn-hover-bg: var(--cl-surface-muted);
  --bs-btn-hover-color: var(--cl-text);
}

/* ==========================================================================
   Chaines longues et insecables

   Une adresse e-mail est un seul mot pour le moteur de rendu. Sur la facture,
   « prenom.nom.50.demo@demo.clinica.nrxdev.com » mesurait 409 px dans une
   colonne de 270 : le bloc poussait la ligne, la ligne poussait la section, et
   la page entiere defilait horizontalement (R1). Les blocs de texte libre —
   adresses, coordonnees, listes de definition — autorisent donc la coupure a
   l'interieur d'un mot lorsqu'il n'y a pas d'autre choix.
   ========================================================================== */

address,
.invoice-col,
.invoice address,
.invoice-info,
.profile-info-value,
dl.dl-horizontal dd,
.card-body .description-text {
  overflow-wrap: anywhere;
}

/* les liens de contact, ou qu'ils soient */
a[href^="mailto:"],
a[href^="tel:"] { overflow-wrap: anywhere; }

/* ==========================================================================
   Pages autonomes : message plein ecran

   L'ancienne page d'acces refuse occupait l'ecran d'un aplat cyan avec un
   titre anglais demesure et aucune issue. Un message centre, dans la meme
   coque que le reste, avec un chemin de retour.
   ========================================================================== */

body.cl-standalone {
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--cl-canvas);
  color: var(--cl-text);
}

.cl-message { width: 100%; max-width: 30rem; }

.cl-message-card {
  padding: 2.5rem 2rem;
  text-align: center;
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius-lg);
  box-shadow: var(--cl-shadow-sm);
}

.cl-message-icon {
  display: block;
  margin-bottom: 1rem;
  font-size: 2rem;
  color: var(--cl-text-muted);
}

.cl-message-card h1 {
  margin: 0 0 .5rem;
  font-size: 1.375rem;
  font-weight: 650;
}

.cl-message-card p {
  margin: 0 0 1.5rem;
  color: var(--cl-text-muted);
}