/* ==========================================================================
   uniman-caisse.css — caisse et file des bordereaux bancaires
   (famille « Poste de travail »). Créée vide par UI-1, remplie par UI-3.
   Tokens de uniman.css uniquement (garde : aucune couleur hors token).
   ========================================================================== */

/* ── Cadre commun : la zone du poste défile, son contenu a une marge ────── */

.um-caisse-poste-contenu,
.um-banque-poste-contenu {
    display: grid;
    gap: var(--um-space-3);
    padding: var(--um-space-3) var(--um-space-4) var(--um-space-4);
    align-content: start;
}
.um-caisse-poste .um-onglets,
.um-banque-poste .um-onglets { margin-bottom: 0; }
.um-caisse-poste .um-caisse-choix { margin: 0; max-width: 280px; }
.um-caisse-poste .um-caisse-choix .um-input { padding-top: 4px; padding-bottom: 4px; }

/* Caisse fermée : la carte d'ouverture, centrée */
.um-caisse-poste .um-caisse-fermee { width: 100%; max-width: 640px; margin: var(--um-space-6) auto; }

/* ── Ma caisse — session ouverte : colonne principale + rail ──────────── */

.um-caisse-poste-grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--um-space-4);
    align-items: start;
}
.um-caisse-principal { display: grid; gap: var(--um-space-3); min-width: 0; }
.um-caisse-rail-colonne {
    position: sticky;
    top: 0;
    display: grid;
    gap: var(--um-space-2);
    justify-items: start;
}

.um-caisse-guichet { display: grid; gap: var(--um-space-3); padding: var(--um-space-4); }
.um-caisse-guichet .um-caisse-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.um-caisse-guichet .um-caisse-action { min-height: 48px; }

/* Recherche d'étudiant du guichet */
.um-caisse-recherche-etudiant { display: grid; gap: var(--um-space-2); }
.um-caisse-recherche-champ { position: relative; display: block; }
.um-caisse-recherche-champ > svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--um-text-tertiary);
    pointer-events: none;
}
.um-caisse-recherche-input { padding-left: 40px; min-height: 44px; font-size: 16px; }
.um-caisse-recherche-etudiant .um-caisse-resultats { max-height: 240px; overflow-y: auto; }
.um-caisse-resultat { padding: var(--um-space-2) var(--um-space-3); }
.um-caisse-resultat.is-actif { border-color: var(--um-primary); background: var(--um-primary-soft); }
/* Au guichet, les résultats s'ouvrent par-dessus : les quatre actions ne bougent pas */
.um-caisse-guichet .um-caisse-recherche-etudiant { position: relative; }
.um-caisse-guichet .um-caisse-resultats {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 5;
    margin-top: var(--um-space-1);
    padding: var(--um-space-2);
    background: var(--um-surface-0);
    border: 1px solid var(--um-border);
    border-radius: var(--um-radius-md);
    box-shadow: var(--um-shadow-popover);
}

/* Ligne des raccourcis clavier */
.um-caisse-raccourcis {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--um-space-1) var(--um-space-3);
    margin: 0;
    font-size: var(--um-font-size-caption);
    color: var(--um-text-secondary);
}
.um-caisse-raccourcis kbd {
    display: inline-block;
    min-width: 22px;
    padding: 1px 5px;
    border: 1px solid var(--um-border);
    border-bottom-width: 2px;
    border-radius: var(--um-radius-sm);
    background: var(--um-surface-1);
    color: var(--um-text-primary);
    font: inherit;
    font-weight: 700;
    text-align: center;
}

/* Mouvements : en-tête collant dans la zone du poste */
.um-caisse-mouvements { overflow: visible; }
.um-caisse-mouvements .um-table thead th { position: sticky; top: 0; z-index: 1; }
.um-caisse-mouvements .um-table tbody td { padding-top: 6px; padding-bottom: 6px; }

/* ── Rail des soldes ───────────────────────────────────────────────────── */

.um-caisse-rail {
    width: 100%;
    display: grid;
    gap: var(--um-space-3);
    padding: var(--um-space-4);
    background: var(--um-surface-0);
    border: 1px solid var(--um-border);
    border-top: 3px solid var(--um-highlight);
    border-radius: var(--um-radius-lg);
    box-shadow: var(--um-shadow-card);
}
.um-caisse-rail-titre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--um-space-2); }
.um-caisse-rail-soldes,
.um-caisse-rail-infos { display: grid; gap: var(--um-space-2); margin: 0; }
.um-caisse-rail-solde dt,
.um-caisse-rail-infos dt { font-size: var(--um-font-size-caption); color: var(--um-text-tertiary); }
.um-caisse-rail-solde dd { margin: 0; font-size: 22px; font-weight: 700; color: var(--um-text-primary); }
.um-caisse-rail-solde.is-equivalent dd { font-size: var(--um-font-size-h3); color: var(--um-text-secondary); }
.um-caisse-rail-infos { padding-top: var(--um-space-2); border-top: 1px solid var(--um-border-soft); }
.um-caisse-rail-infos dd { margin: 0; font-size: var(--um-font-size-label); }
.um-caisse-rail.is-compact { gap: var(--um-space-2); padding: var(--um-space-3); box-shadow: none; }
.um-caisse-rail.is-compact .um-caisse-rail-soldes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.um-caisse-rail.is-compact .um-caisse-rail-solde dd { font-size: var(--um-font-size-h3); }
.um-caisse-rail.is-compact .um-caisse-rail-solde.is-equivalent { grid-column: 1 / -1; }

/* ── Encaissement : deux colonnes ─────────────────────────────────────── */

.um-caisse-encaissement {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--um-space-4);
    align-items: start;
}
.um-caisse-encaissement-gauche { display: grid; gap: var(--um-space-3); min-width: 0; }
.um-caisse-encaissement-droite { position: sticky; top: 0; display: grid; gap: var(--um-space-3); }
.um-caisse-etudiant { display: grid; gap: var(--um-space-3); }
.um-caisse-etudiant-soldes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--um-space-3); margin: 0; }
.um-caisse-etudiant-soldes dt { font-size: var(--um-font-size-caption); color: var(--um-text-tertiary); }
.um-caisse-etudiant-soldes dd { margin: 2px 0 0; font-size: var(--um-font-size-h3); font-weight: 700; }
.um-table-compacte tbody td { padding-top: 6px; padding-bottom: 6px; }

.um-caisse-paiement-carte { display: grid; gap: var(--um-space-3); padding: var(--um-space-4); }
.um-caisse-paiement-carte .um-caisse-paiement { margin-top: 0; display: grid; gap: var(--um-space-3); }
.um-caisse-paiement-carte .um-caisse-montant { font-size: 26px; min-height: 52px; }
.um-caisse-enregistrer { width: 100%; }

/* Bascule USD / CDF */
.um-caisse-monnaie { display: flex; gap: 0; margin: 0; padding: 0; border: 0; }
.um-caisse-monnaie legend { margin-bottom: var(--um-space-1); }
.um-caisse-monnaie-option {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--um-space-2);
    min-height: 40px;
    border: 1px solid var(--um-border);
    background: var(--um-surface-0);
    color: var(--um-text-secondary);
    font-weight: 700;
    cursor: pointer;
}
.um-caisse-monnaie-option:first-of-type { border-radius: var(--um-radius-md) 0 0 var(--um-radius-md); }
.um-caisse-monnaie-option:last-of-type { border-radius: 0 var(--um-radius-md) var(--um-radius-md) 0; border-left: 0; }
.um-caisse-monnaie-option.is-actif { background: var(--um-primary); border-color: var(--um-primary); color: var(--um-text-on-dark); }
.um-caisse-monnaie-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.um-caisse-monnaie-option:focus-within { outline: 2px solid var(--um-focus-ring); outline-offset: 2px; }

/* ── Banque : file maître–détail ───────────────────────────────────────── */

.um-filtres.um-banque-filtres { margin: 0 0 0 auto; align-items: center; gap: var(--um-space-2); align-items: center; flex-wrap: wrap; }
.um-banque-filtres .um-field { margin: 0; }
.um-banque-filtres .um-input { padding-top: 4px; padding-bottom: 4px; }
.um-banque-filtres .um-banque-filtre-date { display: inline-flex; flex-direction: row; align-items: center; gap: var(--um-space-1); }
.um-banque-poste .um-poste-resume { align-items: center; }

.um-banque-maitre-detail {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: var(--um-space-4);
    align-items: start;
}
.um-banque-file { position: sticky; top: 0; max-height: calc(100vh - 220px); overflow-y: auto; }
.um-banque-file-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--um-space-1); }
.um-banque-file-element {
    width: 100%;
    display: grid;
    gap: 4px;
    justify-items: start;
    padding: var(--um-space-2) var(--um-space-3);
    border: 1px solid var(--um-border);
    border-left: 3px solid transparent;
    border-radius: var(--um-radius-md);
    background: var(--um-surface-0);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.um-banque-file-element:hover { border-color: var(--um-blue-200); }
.um-banque-file-element.is-selectionne { background: var(--um-primary-soft); border-color: var(--um-primary); border-left-color: var(--um-primary); }
.um-banque-file-ligne { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--um-space-2); }
.um-banque-file-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-banque-file-montant { font-weight: 700; white-space: nowrap; }

.um-banque-volet { min-width: 0; display: grid; gap: var(--um-space-3); }
.um-banque-detail.is-compact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--um-space-3); align-items: start; }
.um-banque-detail.is-compact .um-banque-bordereau { margin-bottom: 0; }
.um-banque-detail.is-compact .um-banque-details { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.um-banque-scan { display: grid; gap: var(--um-space-2); justify-items: start; }
.um-banque-suivant { padding-top: var(--um-space-2); border-top: 1px solid var(--um-border-soft); }

/* ── Tiroir de droite (déclaration au guichet) ─────────────────────────── */

.um-tiroir-fond { position: fixed; inset: 0; z-index: 60; background: var(--um-overlay); }
.um-tiroir {
    position: fixed;
    z-index: 61;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(480px, 100vw);
    display: flex;
    flex-direction: column;
    background: var(--um-surface-0);
    box-shadow: var(--um-shadow-popover);
}
.um-tiroir-entete {
    display: flex;
    align-items: center;
    gap: var(--um-space-2);
    padding: var(--um-space-4) var(--um-space-5);
    border-bottom: 1px solid var(--um-border);
}
.um-tiroir-entete h2 { flex: 1; margin: 0; }
.um-tiroir-corps { flex: 1; overflow-y: auto; padding: var(--um-space-5); display: grid; gap: var(--um-space-3); align-content: start; }
.um-tiroir-pied {
    display: flex;
    justify-content: flex-end;
    gap: var(--um-space-2);
    padding: var(--um-space-3) var(--um-space-5);
    border-top: 1px solid var(--um-border);
}

/* ── Écrans étroits : une colonne ─────────────────────────────────────── */

@media (max-width: 1100px) {
    .um-caisse-poste-grille,
    .um-caisse-encaissement,
    .um-banque-maitre-detail,
    .um-banque-detail.is-compact { grid-template-columns: minmax(0, 1fr); }
    .um-caisse-rail-colonne,
    .um-caisse-encaissement-droite,
    .um-banque-file { position: static; max-height: none; }
    .um-caisse-guichet .um-caisse-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* D-13a — the dettes the agent ticks (caisse encaissement, bordereau validation). */
.um-banque-dettes { margin-top: var(--um-space-4); display: grid; gap: var(--um-space-2); }
.um-dettes-a-cocher tr.is-coche td { background: var(--um-primary-soft); }
.um-dettes-resume { margin-top: var(--um-space-2); }

/* SCHEMA-2 — « Reçu provisoire (panne) » block of the encaissement form. */
.um-caisse-recu-provisoire { margin: 0; padding: var(--um-space-2) 0 0; border: 0; border-top: 1px solid var(--um-border); display: grid; gap: var(--um-space-2); }