/* Modales "modernes" : en-tete colore avec icone, champs soulignes, pied avec boutons plats.
   S'applique aux modales ouvertes avec windowClass: 'modal-modern'. */
.modal-modern .modal-dialog { margin-top: 60px; }
.modal-modern .modal-content { border: 0; border-radius: 3px; box-shadow: 0 10px 40px rgba(0, 0, 0, .3); overflow: hidden; }

.modal-modern .mm-header { display: flex; align-items: center; padding: 18px 22px; background: #0d7fc4; color: #fff; border: 0; }
.modal-modern .mm-header.mm-danger { background: #d32f2f; }
.modal-modern .mm-icon { flex: 0 0 46px; width: 46px; height: 46px; margin-right: 16px; border-radius: 50%; background: rgba(255, 255, 255, .22); text-align: center; line-height: 46px; font-size: 22px; }
.modal-modern .mm-header .modal-title { margin: 0; color: #fff; font-size: 20px; font-weight: 600; line-height: 1.2; }
.modal-modern .mm-sub { margin-top: 2px; font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, .9); }

.modal-modern .modal-body { padding: 22px 24px 10px; background: #fff; }
.modal-modern .modal-body label { margin-bottom: 0; font-size: 12px; font-weight: 400; color: #8a8a8a; }
.modal-modern .modal-body .form-control { height: 34px; padding: 4px 0; border: 0; border-bottom: 1px solid #d5d5d5; border-radius: 0; background: transparent; box-shadow: none; font-size: 14px; color: #222; }
.modal-modern .modal-body .form-control:focus { border-bottom: 2px solid #0d7fc4; box-shadow: none; }
.modal-modern .modal-body .form-control[disabled] { color: #999; background: transparent; }
.modal-modern .modal-body .form-group { margin-bottom: 18px; }
.modal-modern .modal-body .fg-line:after { background: #0d7fc4; }

.modal-modern .modal-footer { display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-items: center; justify-content: flex-start; padding: 16px 22px 20px; border: 0; background: #fff; }
.modal-modern .modal-footer .btn + .btn { margin-right: 10px; margin-left: 0; }
.modal-modern .mm-btn { padding: 10px 18px; border-radius: 2px; font-size: 12.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; }
.modal-modern .mm-btn .zmdi { margin-right: 4px; font-size: 14px; }
.modal-modern .mm-btn-cancel { color: #444; background: #fff; border: 1px solid #ddd; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.modal-modern .mm-btn-cancel:hover { background: #f5f5f5; }
.modal-modern .mm-btn-primary { color: #fff; background: #1e88e5; border: 1px solid #1e88e5; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.modal-modern .mm-btn-primary:hover { background: #1976d2; color: #fff; }
.modal-modern .mm-btn-danger { color: #fff; background: #d32f2f; border: 1px solid #d32f2f; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.modal-modern .mm-btn-danger:hover { background: #b71c1c; color: #fff; }
.modal-modern .mm-btn[disabled] { opacity: .55; box-shadow: none; }
.modal-modern .mm-section { margin: 4px 0 14px; padding-top: 12px; border-top: 1px solid #eee; font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: #9a9a9a; }
.modal-modern .mm-req { color: #d32f2f; }
.modal-modern .form-control.ng-invalid.ng-touched { border-bottom-color: #d32f2f; }

/* ---- Modale "document commercial" (BL, devis, factures...) ---- */
.modal-doc .modal-dialog { width: 96%; max-width: 1240px; }
.modal-doc .mm-header .doc-title { flex: 1 1 auto; }
.modal-doc .doc-tags { margin-left: auto; }
.modal-doc .doc-tags .label { margin-left: 6px; font-size: 11px; }
.modal-doc .doc-loading { padding: 80px 0; text-align: center; color: #999; }
.modal-doc .doc-body { display: flex; align-items: flex-start; padding: 14px 16px 16px; background: #f5f6f8; }
.modal-doc .doc-main { flex: 1 1 auto; min-width: 0; margin-right: 16px; }
.modal-doc .doc-side { flex: 0 0 300px; width: 300px; display: flex; flex-direction: column; }
.modal-doc .doc-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; padding: 12px 14px; margin-bottom: 12px; }
.modal-doc .doc-head { display: flex; align-items: flex-end; }
.modal-doc .doc-livreur { display: flex; }
.modal-doc .doc-livreur .doc-field { flex: 1 1 50%; margin-right: 14px; }
.modal-doc .doc-livreur .doc-field:last-child { margin-right: 0; }
.modal-doc .doc-field { margin-right: 18px; }
.modal-doc .doc-field-client { flex: 1 1 auto; }
.modal-doc .doc-field-date { flex: 0 0 150px; }
.modal-doc .doc-field-num { flex: 0 0 150px; margin-right: 0; }
.modal-doc .doc-field label { display: block; font-size: 11px; color: #777; margin-bottom: 2px; }
.modal-doc .doc-num { padding: 7px 0; font-weight: 600; color: #0d7fc4; }
.modal-doc .doc-date .input-group-addon { background: transparent; border: 0; border-bottom: 1px solid #d5d5d5; border-radius: 0; cursor: pointer; }
.modal-doc .doc-add { display: flex; align-items: center; margin-bottom: 12px; }
.modal-doc .doc-add label { flex: 0 0 auto; margin: 0 12px 0 0; font-size: 13px; font-weight: 600; color: #555; }
.modal-doc .doc-add .form-control { flex: 1 1 auto; background: #fff; padding-left: 8px; }
.modal-doc .doc-lines { padding: 0; min-height: 260px; }
.modal-doc .doc-table { margin: 0; }
.modal-doc .doc-table > thead > tr > th { background: #fdf3e1; color: #444; font-size: 11px; font-weight: 700; text-transform: uppercase; border-bottom: 1px solid #f0dcb6; white-space: nowrap; }
.modal-doc .doc-table > tbody > tr > td { vertical-align: middle; border-top: 1px solid #f0f0f0; }
.modal-doc .doc-art { font-weight: 600; color: #222; }
.modal-doc .doc-muted { color: #888; }
.modal-doc .doc-total { font-weight: 700; color: #222; font-variant-numeric: tabular-nums; }
.modal-doc .doc-num-input { width: 86px; margin-left: auto; text-align: right; padding: 2px 4px; height: 28px; }
.modal-doc tr.doc-warn { background: #fff7e6; }
.modal-doc .doc-warn-txt { font-size: 11px; font-weight: 400; color: #c77700; }
.modal-doc .doc-empty { padding: 56px 0; text-align: center; color: #999; font-size: 14px; }
.modal-doc .doc-recap h5 { margin: 0 0 8px; font-weight: 700; color: #222; font-size: 15px; }
.modal-doc .doc-line { display: flex; justify-content: space-between; padding: 3px 0; color: #666; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.modal-doc .doc-sep { border-top: 1px solid #eee; margin: 8px 0; }
.modal-doc .doc-ttc-label { color: #555; font-size: 13.5px; }
.modal-doc .doc-ttc { font-size: 26px; font-weight: 700; color: #1e88e5; font-variant-numeric: tabular-nums; }
.modal-doc .doc-options .doc-opt-row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.modal-doc .doc-options .doc-opt-row label { margin: 0; font-size: 12px; color: #666; }
.modal-doc .doc-options .doc-opt-row .doc-num-input { width: 70px; margin-left: 0; }
.modal-doc .doc-hidden { position: absolute; opacity: 0; pointer-events: none; }
.modal-doc .doc-actions { margin-top: auto; padding-top: 16px; }
.modal-doc .doc-btn-block { display: block; width: 100%; margin-bottom: 8px; }
.modal-doc .doc-actions-row { display: flex; }
.modal-doc .doc-actions-row .btn { flex: 1 1 50%; }
.modal-doc .doc-actions-row .btn + .btn { margin-left: 8px; }
@media (max-width: 900px) {
    .modal-doc .doc-body { flex-direction: column; }
    .modal-doc .doc-main { margin-right: 0; width: 100%; }
    .modal-doc .doc-side { flex-basis: auto; width: 100%; }
}

/* ---- Modale document : hauteur de la fenetre et tableau des lignes ---- */
.modal-doc .modal-dialog { margin: 14px auto; }
.modal-doc .modal-content { display: flex; flex-direction: column; height: calc(100vh - 28px); }
.modal-doc .modal-content > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.modal-doc .doc-body { flex: 1 1 auto; min-height: 0; align-items: stretch; }
.modal-doc .doc-main { display: flex; flex-direction: column; min-height: 0; }
.modal-doc .doc-lines { flex: 1 1 auto; min-height: 0; overflow: auto; margin-bottom: 0; }
.modal-doc .doc-side { overflow-y: auto; }
.modal-doc .doc-livreur { display: block; }
.modal-doc .doc-livreur .doc-field { margin: 0 0 8px; }
.modal-doc .doc-livreur .doc-field:last-child { margin-bottom: 0; }
.modal-doc .doc-table { table-layout: fixed; width: 100%; }
.modal-doc .doc-table > thead > tr > th { position: sticky; top: 0; z-index: 2; padding: 9px 8px; }
.modal-doc .doc-table > tbody > tr > td { padding: 5px 8px; height: 40px; }
.modal-doc .doc-table > tbody > tr:nth-child(even) { background: #fafbfc; }
.modal-doc .doc-table > tbody > tr.doc-warn { background: #fff7e6; }
.modal-doc .doc-table .doc-art { white-space: normal; word-break: break-word; }
.modal-doc .doc-table .form-control.doc-num-input { width: 100%; max-width: 92px; height: 28px; padding: 2px 6px; border: 1px solid #dfe3e8; border-radius: 3px; background: #fff; text-align: right; }
.modal-doc .doc-table .form-control.doc-num-input:focus { border-color: #1e88e5; box-shadow: 0 0 0 2px rgba(30, 136, 229, .18); }
.modal-doc .doc-table .form-control.doc-num-input[disabled] { border-color: transparent; background: transparent; color: #333; }
.modal-doc .doc-empty { padding: 40px 0; }
@media (max-width: 900px) {
    .modal-doc .modal-content { height: auto; }
    .modal-doc .doc-lines { max-height: 50vh; }
}

/* Apercu avant impression */
.modal-apercu .modal-dialog { width: 900px; max-width: 96vw; }
.modal-apercu .apercu-body { background: #5f7a8c; padding: 16px; max-height: calc(100vh - 230px); overflow: auto; }
.modal-apercu .apercu-feuille { width: 794px; max-width: 100%; margin: 0 auto; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.4); }
.modal-apercu .apercu-frame { width: 100%; min-height: 500px; border: 0; display: block; }
.modal-apercu .apercu-footer { display: flex; align-items: center; justify-content: flex-end; }
.modal-apercu .apercu-note { margin-right: auto; color: #777; font-size: 12px; text-align: left; }

/* Modales compactes (toutes sauf documents et apercu) : moins de hauteur. */
.modal-modern:not(.modal-doc):not(.modal-apercu) .modal-dialog { margin-top: 24px; }
.modal-modern:not(.modal-doc):not(.modal-apercu) .mm-header { padding: 10px 20px; }
.modal-modern:not(.modal-doc):not(.modal-apercu) .mm-icon { flex-basis: 36px; width: 36px; height: 36px; line-height: 36px; font-size: 18px; margin-right: 12px; }
.modal-modern:not(.modal-doc):not(.modal-apercu) .mm-header .modal-title { font-size: 17px; }
.modal-modern:not(.modal-doc):not(.modal-apercu) .modal-body { padding: 14px 22px 0; }
.modal-modern:not(.modal-doc):not(.modal-apercu) .modal-body .form-group { margin-bottom: 8px; }
.modal-modern:not(.modal-doc):not(.modal-apercu) .modal-body .form-control { height: 30px; }
.modal-modern:not(.modal-doc):not(.modal-apercu) .modal-body .checkbox { margin-top: 0; margin-bottom: 8px; }
.modal-modern:not(.modal-doc):not(.modal-apercu) .modal-body .checkbox.m-t-20 { margin-top: 16px; }
.modal-modern:not(.modal-doc):not(.modal-apercu) .modal-footer { padding: 8px 22px 14px; }

/* Fenetre de saisie des documents : un peu moins haute (au lieu de toute la hauteur de l'ecran). */
.modal-doc .modal-dialog { margin: 30px auto; }
.modal-doc .modal-content { height: 680px; max-height: calc(100vh - 60px); }
.modal-doc .mm-header { padding: 10px 20px; }
.modal-doc .mm-icon { flex-basis: 38px; width: 38px; height: 38px; line-height: 38px; font-size: 19px; margin-right: 14px; }
.modal-doc .mm-header .modal-title { font-size: 18px; }
.modal-doc .doc-body { padding: 10px 14px 12px; }
.modal-doc .doc-card { margin-bottom: 8px; padding: 10px 14px; }
.modal-doc .doc-actions { padding-top: 8px; }

/* Ajout rapide d'un camion / chauffeur depuis la fenetre des documents */
.modal-doc .doc-sel-row { display: flex; align-items: flex-end; }
.modal-doc .doc-sel-row .select { flex: 1 1 auto; }
.modal-doc .doc-sel-add { flex: 0 0 auto; padding: 0 0 4px 8px; font-size: 22px; line-height: 1; color: #1e88e5; }
.modal-doc .doc-sel-new { display: flex; align-items: center; margin-top: 6px; }
.modal-doc .doc-sel-new .form-control { flex: 1 1 auto; margin-right: 6px; background: #fff; }
.modal-doc .doc-sel-new .btn { flex: 0 0 auto; margin-right: 4px; }

/* Inventaires : fenetre de saisie et d'impression */
.modal-inv .inv-barre { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 8px; }
.modal-inv .inv-aide { opacity: .7; margin-right: 16px; }
.modal-inv .inv-resume { font-weight: 600; white-space: nowrap; }
.modal-inv .inv-recherche { margin-bottom: 8px; }
.modal-inv .inv-table { max-height: 46vh; overflow: auto; border: 1px solid #eee; }
.modal-inv .inv-table .table { margin: 0; }
.modal-inv .inv-table thead th { position: sticky; top: 0; z-index: 2; background: #fff3e0; color: #555; font-size: 12px; text-transform: uppercase; }
.modal-inv .inv-table td { vertical-align: middle; }
.modal-inv .inv-val { font-weight: 600; color: #222; }
.modal-inv .inv-muted { color: #777; }
.modal-inv .inv-q { width: 100px; margin-left: auto; text-align: right; background: #fff; border: 1px solid #dfe3e8; border-radius: 3px; padding: 2px 6px; height: 28px; }
.modal-inv .inv-q:focus { border-color: #1e88e5; box-shadow: 0 0 0 2px rgba(30, 136, 229, .18); }
.modal-inv .inv-neg { color: #c0392b; font-weight: 600; }
.modal-inv .inv-pos { color: #1b873f; font-weight: 600; }
.modal-inv .inv-vide { padding: 30px 0; text-align: center; color: #999; }
.modal-inv .inv-pied { display: flex; align-items: center; }
.modal-inv .inv-pied-espace { flex: 1 1 auto; }
.modal-inv-imp .inv-aide { margin-bottom: 8px; }
.modal-inv-imp .inv-modele { position: relative; padding: 10px 14px; margin-bottom: 6px; border: 1px solid #e5e7eb; border-radius: 4px; cursor: pointer; }
.modal-inv-imp .inv-modele:hover { background: #f5faff; }
.modal-inv-imp .inv-modele.actif { background: #d9ebfa; border-color: #1e88e5; }
.modal-inv-imp .inv-modele .label { position: absolute; top: 10px; right: 12px; }
.modal-inv-imp .inv-modele-nom { font-size: 15px; font-weight: 600; color: #123a5a; padding-right: 70px; }
.modal-inv-imp .inv-modele-desc { font-size: 12.5px; color: #55657a; margin-top: 2px; }

/* ---- Facture client dans une modale ---- */
.modal-fac .modal-dialog { width: 96%; max-width: 980px; }
.modal-fac .mm-header .doc-title { flex: 1 1 auto; }
.modal-fac .doc-tags { margin-left: auto; }
.modal-fac .fac-body { height: auto; max-height: calc(100vh - 190px); overflow-y: auto; padding: 14px 18px; }
.modal-fac .fac-client { background: #f3f6fa; border-radius: 4px; padding: 8px 12px; margin-bottom: 10px; }
.modal-fac .fac-client-nom { font-size: 17px; font-weight: 600; color: #222; }
.modal-fac .fac-client-info { color: #666; font-size: 12px; }
.modal-fac .fac-table { margin-bottom: 10px; font-size: 12.5px; }
.modal-fac .fac-table > thead > tr > th { background: #eef2f7; padding: 5px 8px; font-size: 11.5px; }
.modal-fac .fac-table > tbody > tr > td { padding: 4px 8px; }
.modal-fac .fac-n { width: 34px; color: #888; }
.modal-fac .fac-bl > td { background: #e3f0fb; color: #0d47a1; padding: 5px 8px; font-size: 12.5px; }
.modal-fac .fac-bl-total { float: right; font-weight: 600; }
.modal-fac .fac-totaux { margin-left: auto; width: 300px; }
.modal-fac .fac-totaux > div { display: flex; justify-content: space-between; padding: 2px 4px; border-bottom: 1px solid #eee; }
.modal-fac .fac-totaux .fac-ttc { background: #e3f0fb; font-size: 15px; padding: 6px 8px; border: 0; margin-top: 4px; }
.modal-fac .fac-champs { display: flex; gap: 12px; margin-bottom: 10px; }
.modal-fac .fac-champ { flex: 0 0 170px; }
.modal-fac .fac-champ-client { flex: 1 1 auto; }
.modal-fac .fac-champ label { display: block; font-size: 11px; color: #777; margin-bottom: 2px; }
.modal-fac .fac-aide { color: #888; padding: 14px 4px; }
.modal-fac .fac-muted { color: #888; }
.modal-fac .fac-off > td { opacity: .45; }
.modal-fac .fac-bas { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.modal-fac .fac-timbre { color: #555; font-style: italic; padding-top: 4px; }

/* ---- Creation rapide d'un article dans la modale de document ---- */
.modal-doc .doc-add { display: flex; align-items: center; gap: 8px; }
.modal-doc .doc-add .form-control { flex: 1 1 auto; }
.modal-doc .doc-add-new { flex: 0 0 auto; white-space: nowrap; }
.modal-doc .doc-newart { background: #f3f8ff; border: 1px solid #c9ddf5; border-radius: 4px; padding: 8px 12px; margin-bottom: 8px; }
.modal-doc .doc-newart-titre { font-weight: 600; color: #1565c0; margin-bottom: 6px; }
.modal-doc .doc-newart-grille { display: flex; flex-wrap: wrap; gap: 8px; }
.modal-doc .doc-newart-champ { flex: 1 1 120px; min-width: 110px; }
.modal-doc .doc-newart-large { flex: 2 1 240px; }
.modal-doc .doc-newart-champ label { display: block; font-size: 11px; color: #777; margin-bottom: 2px; }
.modal-doc .doc-newart-champ .form-control { background: #fff; }
.modal-doc .doc-newart-actions { margin-top: 8px; display: flex; align-items: center; gap: 6px; }
.modal-doc .doc-newart-aide { color: #888; font-size: 11px; margin-left: 8px; }
.modal-fac .fac-mode { display: flex; gap: 22px; margin-bottom: 10px; }
.modal-fac .fac-mode label, .modal-fac .fac-stock { font-weight: 500; cursor: pointer; margin: 0; }
.modal-fac .fac-stock { display: block; margin: 8px 0; color: #444; }
.modal-fac .fac-newart { background: #f3f8ff; border: 1px solid #c9ddf5; border-radius: 4px; padding: 8px 12px; margin-bottom: 10px; }
.modal-fac .fac-newart-titre { font-weight: 600; color: #1565c0; margin-bottom: 6px; }
.modal-fac .fac-newart-actions { margin-top: 8px; }

/* ---- Retenue a la source ---- */
.modal-fac .ret-checks { display: flex; gap: 24px; margin: 6px 0 12px; }
.modal-fac .ret-checks label { font-weight: 500; margin: 0; cursor: pointer; }
.modal-fac .ret-footer .btn { margin-left: 4px; }

/* Les notifications (growl) doivent passer devant les fenetres modales */
[data-growl="container"], [data-notify="container"], .growl-animated { z-index: 20000 !important; }

/* ---- Liste de selection avec recherche (select-recherche) ---- */
.modal-fac .modal-content { overflow: visible; }
.modal-fac .mm-header { border-radius: 3px 3px 0 0; }
.sr-wrap { position: relative; }
.sr-wrap .form-control { padding-right: 24px; }
.sr-icone { position: absolute; right: 2px; top: 9px; color: #9a9a9a; pointer-events: none; }
.sr-liste { position: absolute; z-index: 1060; left: 0; right: 0; max-height: 340px; margin: 2px 0 0; padding: 2px 0; overflow-y: auto; list-style: none; background: #fff; border: 1px solid #ddd; border-radius: 3px; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.sr-liste li { display: flex; align-items: center; justify-content: space-between; padding: 3px 12px; line-height: 1.35; border-left: 3px solid transparent; font-size: 13px; color: #333; cursor: pointer; }
.sr-liste li.active { background: #e3f2fd; border-left-color: #1e88e5; }
.sr-liste li.choisi { font-weight: 600; color: #0d6ebd; }
.sr-liste li .zmdi-check { margin-left: 10px; color: #1e88e5; }
.sr-liste li.sr-vide { color: #999; cursor: default; justify-content: center; }
.sr-liste li.sr-pied { position: sticky; bottom: -4px; margin-top: 4px; padding: 4px 12px; border-top: 1px solid #eee; background: #fafbfc; font-size: 11px; color: #9a9a9a; cursor: default; justify-content: flex-start; }

/* ---- Fenetres de paiement / reglement : plus etroites et plus hautes (la liste de choix a la place de se deployer) ---- */
.modal-pay .modal-dialog { width: 560px !important; max-width: 96%; }
.modal-pay .modal-body { min-height: 400px; }
.modal-pay .fac-champs { flex-wrap: wrap; }
.modal-pay .fac-champ { flex: 1 1 200px; }
.modal-pay .fac-champ-client { flex-basis: 100%; }

/* Calendriers (datepicker) dans les fenetres de paiement : le corps ne defile plus, le calendrier n'est plus coupe ni muni de barres de defilement */
.modal-pay .fac-body { max-height: none; overflow: visible; }
.modal-pay .modal-dialog { width: 620px !important; }
.modal-pay .fac-champs > .fac-champ:nth-child(2) .dropdown-menu { transform: translateX(-90px); }
.modal-pay .dropdown-menu { z-index: 1070; }

/* Le calendrier ouvert ne doit jamais recouvrir les boutons du pied de fenetre (Annuler / OK restent cliquables) */
.modal-pay .modal-body { min-height: 500px; }
.modal-pay .modal-footer { position: relative; z-index: 1080; background: #fff; }

/* Dates natives : plus de calendrier a deployer dans les fenetres de paiement */
.modal-pay .modal-body { min-height: 300px; }
.modal-pay .fac-body input[type=date].form-control { padding-right: 4px; }