/* ============================================
   CMA OMBESSA - Écrans de caisse
   Services de l'État (Régie) & Pharmacie (Caisse B)
   ============================================

   TOUT ce qui concerne les deux écrans de caisse est porté par `.caisse-pane`
   (posé sur `#cashier-a-dashboard` et `#cashier-b-dashboard`). Ces panneaux
   partagent `.page-header`, `.btn-*`, `.form-input` avec le tableau de bord,
   l'administration et treize fenêtres modales ; sans ce préfixe, régler la
   hauteur d'un champ ici change la hauteur des champs de l'écran de connexion.

   Un seul bouton vert par écran : « Valider ». Tout le reste — Historique,
   Clôturer la caisse, Gérer le stock, Aperçu, Effacer — est un bouton discret.
   Quand cinq boutons crient, aucun n'est entendu, et celui qui engage l'argent
   doit être le seul qu'on ne puisse pas manquer.

   Sommaire :
     1. Listes déroulantes (PORTÉE GLOBALE — voir l'avertissement)
     2. Tête de page
     3. Boutons discrets
     4. Bandeau de statistiques
     5. Grille de la page
     6. Carte d'information (patient / client)
     7. Catalogue
     8. Panier
     9. Autocomplétion (dans le panier)
    10. Reçu thermique — aperçu à l'écran
    11. Reliquats partagés hors caisse
   ============================================ */

/* ============================================
   1. LISTES DÉROULANTES — PORTÉE GLOBALE
   ============================================

   ATTENTION : ce bloc n'est PAS réservé aux caisses. C'est le seul endroit de
   l'application où un <select> reçoit sa flèche dessinée (`appearance:none` +
   image de fond). Six autres écrans en dépendent : gestion des utilisateurs,
   types de recettes, mouvements de stock, filtres des reçus, rapports. Le
   supprimer rendrait à ces menus la flèche native de Windows au milieu d'une
   interface qui n'en a plus nulle part. Géométrie inchangée à dessein.

   Le `!important` sur `padding-right` est nécessaire : transaction-responsive.css
   se charge après ce fichier et y repose un `padding` raccourci sur
   `.form-select`, qui écraserait la place réservée à la flèche. */
select.form-input,
.form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: white;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 44px !important;
    cursor: pointer;
    font-weight: 500;
    color: var(--gray-700);
    min-height: 46px;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}

select.form-input:hover,
.form-select:hover {
    border-color: var(--primary-300);
    background-color: var(--gray-50);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234CAF50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

select.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.15);
    background-color: white;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234CAF50' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

select.form-input option:first-child,
.form-select option:first-child {
    color: var(--gray-400);
    font-weight: 400;
}

select.form-input option,
.form-select option {
    padding: 12px 16px;
    font-size: var(--text-sm);
    color: var(--gray-700);
    background: white;
    font-weight: 500;
}

select.form-input option:checked,
.form-select option:checked {
    background: var(--primary-50);
    color: var(--primary-800);
    font-weight: 600;
}

select.form-input:disabled,
.form-select:disabled {
    background-color: var(--gray-100);
    color: var(--gray-400);
    cursor: not-allowed;
    opacity: 0.7;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Firefox */
@-moz-document url-prefix() {
    select.form-input,
    .form-select {
        text-indent: 0.01px;
        text-overflow: '';
    }
}

/* Ancien Edge */
select.form-input::-ms-expand,
.form-select::-ms-expand {
    display: none;
}

/* ============================================
   2. TÊTE DE PAGE
   ============================================ */
.caisse-pane .page-header {
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 22px;
}

.caisse-pane .page-header-left {
    gap: 0;
}

.page-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
    flex-wrap: wrap;
}

.caisse-pane .page-title {
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -0.2px;
    line-height: 1.2;
}

/* « Régie » / « Caisse B » : quelle caisse tient ce comptoir. Deux caissiers
   peuvent partager un poste ; l'écran doit dire lequel est ouvert. */
.page-title-chip {
    padding: 3px 9px;
    border-radius: 6px;
    background: var(--primary-50);
    color: var(--primary-800);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.caisse-pane .page-subtitle {
    font-size: 13.5px;
    color: var(--gray-500);
}

.caisse-pane .page-header-actions {
    gap: 10px;
    flex-wrap: wrap;
}

/* ============================================
   3. BOUTONS DISCRETS
   ============================================
   `.btn-primary`, `.btn-success`, `.btn-secondary`, `.btn-outline` sont
   redéfinis ici en une seule apparence sobre. Les classes d'origine restent sur
   les éléments (le JS et les autres écrans s'en servent), elles ne portent
   simplement plus de couleur DANS la caisse. */
.caisse-pane .btn,
.caisse-pane .btn-primary,
.caisse-pane .btn-secondary,
.caisse-pane .btn-success,
.caisse-pane .btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    min-height: 38px;
    padding: 0 15px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    border-radius: 9px;
    background: white;
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    cursor: pointer;
    box-shadow: none;
    transform: none;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.caisse-pane .btn:hover:not(:disabled),
.caisse-pane .btn-primary:hover:not(:disabled),
.caisse-pane .btn-secondary:hover:not(:disabled),
.caisse-pane .btn-success:hover:not(:disabled),
.caisse-pane .btn-outline:hover:not(:disabled) {
    background: var(--gray-50);
    border-color: var(--gray-400);
    color: var(--gray-700);
    box-shadow: none;
    transform: none;
}

.caisse-pane .btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.caisse-pane .btn:disabled {
    background: white;
    color: var(--gray-400);
    border-color: var(--gray-200);
    cursor: not-allowed;
    opacity: 1;
}

/* ============================================
   4. BANDEAU DE STATISTIQUES
   ============================================
   Une seule carte découpée, pas quatre cartes côte à côte : ces nombres se
   lisent ensemble (« 18 transactions pour 142 500 F »), et quatre cartes
   séparées invitent à les lire un par un. */
.stats-band {
    display: grid;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 20px;
}

.stats-band--3 {
    grid-template-columns: repeat(3, 1fr);
}

.stats-band--4 {
    grid-template-columns: repeat(4, 1fr);
}

.stats-cell {
    padding: 16px 20px;
    border-right: 1px solid var(--gray-100);
    min-width: 0;
}

.stats-cell:last-child {
    border-right: none;
}

.stats-cell-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--gray-500);
    letter-spacing: 0.03em;
    margin-bottom: 6px;
}

.stats-cell-value {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* L'argent encaissé est le seul chiffre en vert : c'est celui qu'on vient
   vérifier. */
.stats-cell-value--money {
    color: var(--primary-900);
}

.stats-cell-unit {
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-600);
}

/* Ligne « dont N en attente d'envoi » sous le total. Orange, parce qu'elle
   nuance un montant : une partie de cet argent n'est pas encore au serveur. */
.stats-cell-sub {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--warning-700);
    margin-top: 6px;
    line-height: 1.35;
}

/* Quatrième cellule de la pharmacie : le stock qui manque. */
.stats-cell--alert {
    background: var(--warning-50);
}

.stats-cell--alert .stats-cell-label {
    color: var(--warning-700);
}

/* Le point est un pseudo-élément : le HTML n'écrit qu'un libellé. */
.stats-cell--alert .stats-cell-label::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--warning-500);
    flex-shrink: 0;
}

.stats-cell--alert .stats-cell-value {
    color: var(--warning-700);
}

/* ============================================
   5. GRILLE DE LA PAGE
   ============================================ */
.caisse-pane .transaction-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 372px;
    gap: 20px;
    align-items: start;
}

.transaction-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

/* ============================================
   6. CARTE D'INFORMATION (patient / client)
   ============================================ */
.info-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    padding: 20px 22px;
}

.info-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.info-card-title {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0;
}

.info-card-hint {
    font-size: 12px;
    color: var(--gray-400);
}

/* Nom · identifiant · âge · sexe. Le nom prend le plus de place parce que c'est
   le seul champ obligatoire et le seul qui puisse être long. */
.form-grid--patient {
    display: grid;
    grid-template-columns: 1.6fr 1fr 0.7fr 0.9fr;
    gap: 14px;
}

.caisse-pane .form-group {
    margin-bottom: 0;
}

.caisse-pane .form-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 6px;
}

.caisse-pane .form-label .required,
.caisse-pane .form-label .text-danger {
    color: var(--danger-700);
}

.caisse-pane .form-input {
    width: 100%;
    height: 42px;
    min-height: 42px;
    padding: 0 13px;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 9px;
    font-size: 14px;
    font-weight: 400;
    color: var(--gray-900);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.caisse-pane .form-input::placeholder {
    color: var(--gray-400);
    font-size: 14px;
}

.caisse-pane .form-input:hover:not(:focus):not(:disabled) {
    border-color: var(--gray-400);
    background: white;
}

.caisse-pane .form-input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.14);
    background: white;
}

.caisse-pane .form-input:disabled {
    background: var(--gray-100);
    color: var(--gray-400);
    cursor: not-allowed;
    opacity: 1;
}

/* Le <select> de la caisse : même flèche, mais à l'échelle des champs de 42 px.
   Le `!important` répond à celui du bloc global (section 1). */
.caisse-pane select.form-input {
    height: 42px;
    min-height: 42px;
    padding-left: 13px;
    padding-right: 32px !important;
    border: 1px solid var(--gray-300);
    border-radius: 9px;
    background-position: right 12px center;
    background-size: 14px;
    font-weight: 400;
    color: var(--gray-900);
}

.caisse-pane select.form-input:hover:not(:focus) {
    border-color: var(--gray-400);
    background-color: white;
}

.caisse-pane select.form-input:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.14);
}

/* ============================================
   7. CATALOGUE
   ============================================ */
.items-grid-card {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    overflow: hidden;
}

.items-grid-header {
    padding: 16px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--gray-100);
}

.items-grid-title {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0;
}

.items-grid-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 260px;
    max-width: 100%;
}

.items-grid-search svg {
    position: absolute;
    left: 12px;
    width: 16px;
    height: 16px;
    color: var(--gray-400);
    pointer-events: none;
}

/* Ce champ n'a pas de classe dans le HTML (il est ciblé par son id) ; on
   l'atteint par sa position. Le décalage à gauche n'est appliqué QUE si une
   loupe le précède, pour ne pas laisser un vide si l'icône manque. */
.items-grid-search input {
    width: 100%;
    height: 36px;
    min-height: 36px;
    padding: 0 12px;
    background: var(--gray-50);
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 13.5px;
    color: var(--gray-900);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

.items-grid-search svg + input {
    padding-left: 36px;
}

.items-grid-search input::placeholder {
    color: var(--gray-400);
}

.items-grid-search input:focus {
    outline: none;
    background: white;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.14);
}

/* --- Onglets de filtre --- */
.category-tabs {
    display: flex;
    gap: 6px;
    padding: 12px 22px;
    border-bottom: 1px solid var(--gray-100);
    overflow-x: auto;
    scrollbar-width: thin;
}

.category-tab {
    padding: 7px 13px;
    background: transparent;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gray-700);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.category-tab:hover:not(.active) {
    background: var(--primary-50);
    border-color: var(--primary-100);
    color: var(--primary-900);
}

.category-tab.active {
    background: var(--primary-900);
    border-color: var(--primary-900);
    color: white;
}

/* Les onglets de stock de la pharmacie survolent dans LEUR couleur : passer sur
   « Rupture » et voir du vert désaccorde le geste et le sens. */
#drug-stock-tabs .category-tab[data-stock="low-stock"]:hover:not(.active) {
    background: var(--warning-50);
    border-color: var(--warning-100);
    color: var(--warning-700);
}

#drug-stock-tabs .category-tab[data-stock="out-of-stock"]:hover:not(.active) {
    background: var(--danger-50);
    border-color: var(--danger-100);
    color: var(--danger-700);
}

/* --- Grille des articles --- */
.items-grid-body {
    padding: 18px 22px 22px;
}

.items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
    gap: 12px;
}

/* « Chargement… » et « Aucun service trouvé » gardent la forme de la grille et
   s'expliquent en toutes lettres, plutôt que de la laisser vide. */
.items-grid > p {
    grid-column: 1 / -1;
    margin: 0;
    padding: 26px 0;
    text-align: center;
    font-size: 13.5px;
    color: var(--gray-500);
}

.item-card {
    position: relative;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 11px;
    padding: 13px 14px 12px;
    cursor: pointer;
    transition: border-color 0.12s, background-color 0.12s;
}

.item-card:hover {
    border-color: var(--primary-200);
    background: var(--gray-50);
}

/* Ligne 1 (État) : la catégorie. Elle remplace l'ancienne pastille émoji, qui
   demandait de deviner qu'un microscope voulait dire « laboratoire ». */
.item-card-cat {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--gray-400);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

/* Ligne 1 (Pharmacie) : l'état du stock, point + mot. */
.item-card-stockline {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
}

.stock-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--gray-400);
}

.item-card-stocklabel {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.item-card-stockline.stock-ok .stock-dot {
    background: var(--primary-400);
}

.item-card-stockline.stock-low .stock-dot {
    background: var(--warning-500);
}

.item-card-stockline.stock-low .item-card-stocklabel {
    color: var(--warning-700);
}

.item-card-stockline.stock-out .stock-dot {
    background: var(--danger-500);
}

.item-card-stockline.stock-out .item-card-stocklabel {
    color: var(--danger-700);
}

.item-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-900);
    line-height: 1.35;
    margin-bottom: 12px;
    min-height: 38px;
}

.item-card-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
}

.item-card-price {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-900);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.item-card-unit {
    font-size: 11.5px;
    color: var(--gray-400);
    margin-top: 3px;
}

/* Le carré « + ». Il est toujours visible : il l'était auparavant seulement au
   survol, ce qui le rendait introuvable sur une tablette tactile. */
.item-card-add {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: var(--primary-50);
    color: var(--primary-800);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.item-card-add:hover {
    background: var(--primary-900);
    color: white;
}

.item-card-add svg {
    width: 16px;
    height: 16px;
}

/* Rupture : la carte RESTE visible et lisible — savoir qu'un médicament est
   épuisé fait partie du travail — mais elle ne s'ajoute plus au panier. */
.item-card.out-of-stock {
    cursor: not-allowed;
}

.item-card.out-of-stock:hover {
    border-color: var(--gray-200);
    background: white;
}

.item-card.out-of-stock .item-card-add {
    opacity: 0.45;
    cursor: not-allowed;
}

.item-card.out-of-stock .item-card-add:hover {
    background: var(--primary-50);
    color: var(--primary-800);
}

/* ============================================
   8. PANIER (rail de droite)
   ============================================
   PAS d'`overflow:hidden` sur la carte : la liste d'autocomplétion de la
   pharmacie s'ouvre depuis l'intérieur et serait tranchée. Les angles sont
   arrondis section par section. */
.cart-card {
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(20, 30, 20, 0.04), 0 8px 24px -12px rgba(20, 40, 20, 0.12);
}

.cart-header {
    padding: 15px 18px;
    border-bottom: 1px solid var(--gray-100);
    border-radius: 14px 14px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cart-title {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0;
}

.cart-count {
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 6px;
    background: var(--gray-100);
    color: var(--gray-500);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Zéro reste écrit — un compteur absent se lit comme un widget cassé, pas comme
   « rien ». C'est la couleur, pas la présence du nombre, qui change. */
.cart-count.has-items {
    background: var(--primary-50);
    color: var(--primary-900);
}

/* --- Ajout rapide --- */
.cart-quickadd {
    position: relative;
    z-index: 2;
    padding: 14px 18px;
    border-bottom: 1px solid var(--gray-100);
    background: var(--gray-50);
}

.cart-quickadd-label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--gray-500);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.cart-quickadd-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.caisse-pane .cart-quickadd .form-input {
    height: 40px;
    min-height: 40px;
    font-size: 13.5px;
}

.caisse-pane .cart-quickadd select.form-input {
    flex: 1;
    min-width: 0;
    padding-left: 12px;
    padding-right: 30px !important;
    background-position: right 11px center;
}

.caisse-pane .cart-quickadd .quantity-input {
    width: 62px;
    flex-shrink: 0;
    padding: 0 8px;
    text-align: center;
}

/* Le carré vert d'ajout — 40 px, aligné sur la hauteur des champs voisins. */
.btn-add-item {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    padding: 0;
    background: var(--primary-900);
    color: white;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast);
}

.btn-add-item:hover:not(:disabled) {
    background: var(--primary-800);
}

.btn-add-item:disabled {
    background: var(--gray-300);
    color: var(--gray-500);
    cursor: not-allowed;
    opacity: 1;
}

.btn-add-item svg {
    width: 18px;
    height: 18px;
}

/* Compteur « N disponibles » sous le champ de quantité (pharmacie). */
.stock-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--gray-500);
    margin: 8px 0 0;
}

.stock-indicator--high {
    color: var(--primary-700);
}

.stock-indicator--medium {
    color: var(--warning-700);
}

.stock-indicator--low {
    color: var(--danger-700);
}

/* --- Corps du panier --- */
.cart-body {
    flex: 1;
    min-height: 190px;
    max-height: 44vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* État vide : il garde la taille du panier plein et dit quoi faire. */
.cart-empty {
    margin: auto;
    padding: 26px 18px;
    text-align: center;
    max-width: 240px;
}

.cart-empty-icon {
    width: 46px;
    height: 46px;
    margin: 0 auto 13px;
    border: 1px dashed var(--gray-300);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-empty-icon svg {
    width: 20px;
    height: 20px;
    color: var(--gray-400);
}

.cart-empty-text {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gray-700);
    margin: 0 0 4px;
}

.cart-empty-hint {
    font-size: 12.5px;
    color: var(--gray-400);
    line-height: 1.45;
    margin: 0;
}

.cart-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--gray-100);
}

.cart-item:last-child {
    border-bottom: none;
}

.cart-item-info {
    min-width: 0;
}

.cart-item-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gray-900);
    line-height: 1.3;
}

.cart-item-qty {
    font-size: 12px;
    color: var(--gray-500);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.cart-item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.cart-item-price {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-900);
    font-variant-numeric: tabular-nums;
}

.cart-item-remove {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: var(--gray-400);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.cart-item-remove:hover {
    background: var(--danger-50);
    color: var(--danger-700);
}

.cart-item-remove svg {
    width: 15px;
    height: 15px;
}

/* --- Pied du panier --- */
.cart-footer {
    padding: 16px 18px;
    border-top: 1px solid var(--gray-100);
    border-radius: 0 0 14px 14px;
    background: var(--gray-50);
}

.cart-total-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.cart-total-label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gray-700);
}

.caisse-pane .cart-total-value {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    color: var(--gray-900);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.3px;
}

.cart-total-unit {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-500);
}

/* Le SEUL bouton vert de l'écran. */
.caisse-pane .btn.btn-cta {
    width: 100%;
    height: 46px;
    min-height: 46px;
    padding: 0;
    gap: 9px;
    font-size: 14.5px;
    font-weight: 600;
    border-radius: 10px;
    background: var(--primary-900);
    color: white;
    border: none;
    margin-bottom: 8px;
}

.caisse-pane .btn.btn-cta:hover:not(:disabled) {
    background: var(--primary-800);
    border: none;
    color: white;
}

/* Désactivé = gris plein, pas un vert à moitié effacé : une couleur d'action
   atténuée se lit comme « ça va marcher dans une seconde ». */
.caisse-pane .btn.btn-cta:disabled {
    background: var(--gray-300);
    color: var(--gray-400);
    border: none;
    cursor: not-allowed;
    opacity: 1;
}

.caisse-pane .btn.btn-cta svg {
    width: 18px;
    height: 18px;
}

.cart-actions {
    display: flex;
    gap: 8px;
}

.caisse-pane .cart-actions .btn {
    flex: 1;
    min-width: 0;
    height: 38px;
    padding: 0 10px;
    font-size: 13px;
    gap: 7px;
}

.caisse-pane .cart-actions .btn svg {
    width: 15px;
    height: 15px;
}

/* « Effacer » vide le panier : son survol est rouge parce que le geste détruit
   du travail déjà saisi. */
.caisse-pane .btn.btn-clear:hover:not(:disabled) {
    background: var(--danger-50);
    border-color: var(--danger-100);
    color: var(--danger-700);
}

/* ============================================
   9. AUTOCOMPLÉTION (dans le panier)
   ============================================ */
.autocomplete-wrapper {
    position: relative;
    flex: 1;
    min-width: 0;
}

.autocomplete-input-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.autocomplete-search-icon {
    position: absolute;
    left: 11px;
    width: 16px;
    height: 16px;
    color: var(--gray-400);
    pointer-events: none;
}

.caisse-pane .autocomplete-input {
    width: 100%;
    height: 40px;
    min-height: 40px;
    padding: 0 30px 0 34px;
    font-size: 13.5px;
}

.autocomplete-clear {
    position: absolute;
    right: 8px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 4px;
    color: var(--gray-400);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.autocomplete-clear:hover {
    background: var(--gray-200);
    color: var(--gray-700);
}

.autocomplete-clear svg {
    width: 14px;
    height: 14px;
}

.autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.25);
    max-height: 264px;
    overflow-y: auto;
    z-index: var(--z-dropdown);
}

.autocomplete-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--gray-100);
    transition: background-color var(--transition-fast);
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item:hover,
.autocomplete-item.highlighted {
    background: var(--primary-50);
}

.autocomplete-item.disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.autocomplete-item.disabled:hover {
    background: transparent;
}

.autocomplete-item-info {
    min-width: 0;
}

.autocomplete-item-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gray-900);
    line-height: 1.3;
}

.autocomplete-item-name mark {
    background: var(--primary-100);
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}

.autocomplete-item-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.autocomplete-item-stock {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--gray-500);
    font-variant-numeric: tabular-nums;
}

.autocomplete-item-stock.low-stock {
    color: var(--warning-700);
}

.autocomplete-item-stock.out-of-stock {
    color: var(--danger-700);
}

.autocomplete-item-price {
    font-family: var(--font-heading);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--primary-900);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.autocomplete-no-results {
    padding: 16px 12px;
    text-align: center;
    font-size: 13px;
    color: var(--gray-500);
}

/* ============================================
   10. REÇU THERMIQUE — APERÇU À L'ÉCRAN
   ============================================
   Le même balisage part à l'impression, avec sa propre feuille de style écrite
   par les modules de caisse (@page 80 mm). Ici, c'est la vue « posé sur le
   comptoir » : fond neutre, papier blanc, bord déchiré.

   Tout est en NOIR PUR. Une tête thermique n'a pas de gris : un #616161 sort
   tramé et sale. L'aperçu ment s'il montre autre chose que ce qui s'imprimera. */
.receipt-desk {
    background: #E8E9E7;
    border-radius: 10px;
    padding: 26px 20px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.receipt-thermal {
    width: 302px; /* 80 mm à l'écran */
    max-width: 100%;
    background: #fff;
    color: #000;
    padding: 5mm 4mm 3mm;
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.35);
    text-align: left;
}

/* Le bord déchiré : décoratif, aperçu UNIQUEMENT. L'impression n'en veut pas —
   le rouleau se coupe tout seul. */
.rt-zigzag {
    width: 302px;
    max-width: 100%;
    height: 9px;
    background: #fff;
    -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 12px 100%;
    mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 12px 100%;
}

.rt-head {
    text-align: center;
}

.rt-mark {
    width: 14mm;
    height: 14mm;
    object-fit: contain;
    display: block;
    margin: 0 auto 4px;
}

.rt-brand {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.2px;
    line-height: 1.2;
}

.rt-line {
    font-size: 11px;
}

.rt-head .rt-line:first-of-type {
    margin-top: 3px;
}

.rt-rule {
    border-top: 1px dashed #000;
    margin: 9px 0;
}

.rt-id {
    text-align: center;
}

.rt-doctype {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

/* Le numéro de reçu est le seul élément agrandi : c'est ce que le patient et le
   contrôleur cherchent en premier. */
.rt-number {
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-top: 2px;
}

.rt-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rt-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.rt-row > span:last-child {
    text-align: right;
}

/* À poser sur la ligne du patient / du client : c'est le seul champ que
   quelqu'un relira pour vérifier que le reçu est bien le sien. */
.rt-row--strong > span:last-child {
    font-weight: 700;
}

.rt-cols {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
}

.rt-items {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.rt-item-name {
    font-weight: 700;
    line-height: 1.3;
}

.rt-item-line {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.rt-solid {
    border-top: 1px solid #000;
    margin: 9px 0;
}

.rt-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 700;
}

/* Double filet sous le total : deux traits pleins à 2 px l'un de l'autre. */
.rt-double {
    height: 2px;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    margin-top: 3px;
}

.rt-thanks {
    text-align: center;
    margin-top: 11px;
    font-size: 11px;
    line-height: 1.5;
}

/* Pharmacie : l'encadré remplace l'émoji ⚠️, que la plupart des têtes
   thermiques impriment en carré vide. */
.rt-important {
    border: 1px solid #000;
    padding: 5px 6px;
    margin-top: 9px;
    text-align: center;
}

.rt-important-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.rt-important-body {
    font-size: 11px;
    line-height: 1.4;
    margin-top: 2px;
}

/* Régie : la même consigne, sans encadré. */
.rt-keep {
    text-align: center;
    font-size: 10px;
    letter-spacing: 0.06em;
}

/* Mention « reçu émis » quand la transaction est enregistrée. */
.rt-note {
    border: 1px solid #000;
    padding: 5px 6px;
    margin-top: 9px;
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
}

/* ============================================
   11. RELIQUATS PARTAGÉS HORS CAISSE
   ============================================
   `.cart-total-value` sert aussi à la fenêtre de clôture de caisse (« Montant
   attendu », « Écart »), qui n'est pas dans un `.caisse-pane`. Cette règle non
   préfixée est SA règle : la retirer laisserait ces deux montants en texte
   courant. La version caisse est plus haut, préfixée. */
.cart-total-value {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--primary-800);
}

/* --- caisse-A agent addition: les deux lignes d'une ligne de panier ne
   s'empilaient pas ---
   `.cart-item-name` et `.cart-item-qty` sont des `<span>` (le balisage
   d'aujourd'hui, que le contrat conserve). Sans direction de colonne ici, ils
   se suivaient sur la même ligne et le `margin-top: 2px` de `.cart-item-qty`
   restait sans effet sur un élément en ligne : « Consultation Générale 2 ×
   2 000 F CFA » se repliait en milieu de montant. La spéc. §9 veut le nom
   puis, dessous, la ligne de détail. Vaut pour les deux caisses — la pharmacie
   émet le même balisage. */
.cart-item-info {
    display: flex;
    flex-direction: column;
}