/* =============================================================================
   SAISIE RAPIDE — multi-frais, multi-pages, détection bords, recadrage, aplatir
   ============================================================================= */

/* Bouton header section */
.frais-quick-btn { display:flex; align-items:center; gap:6px; font-size:14px; padding:9px 18px; white-space:nowrap; }
.frais-quick-icon { font-size:18px; line-height:1; }

/* ── Modale ── */
.frq-modal {
  max-width: 540px; width: 100%;
  display: flex; flex-direction: column;
  max-height: 96vh; overflow: hidden;
}
.frq-header { flex-shrink: 0; }

/* Écrans */
.frq-screen { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; }
.frq-screen.hidden { display:none !important; }

/* Scrollable body écran principal */
.frq-body {
  display:flex; flex-direction:column; gap:18px;
  overflow-y:auto; padding:16px 20px; flex:1; min-height:0;
}

/* Étape */
.frq-step { flex-shrink:0; }
.frq-step-label {
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text3); margin-bottom:9px;
}
.frq-optional { font-weight:400; text-transform:none; letter-spacing:0; }

/* ── Liste des frais déjà ajoutés ── */
.frq-items-list {
  background: var(--bg2);
  border: 1.5px solid var(--border2);
  border-radius: var(--radius);
  padding: 10px 12px;
  flex-shrink: 0;
}
.frq-items-list.hidden { display:none; }
.frq-items-header {
  font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--primary); margin-bottom:8px;
}
.frq-item-card {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.frq-item-card:last-child { border-bottom: none; }
.frq-item-card.editing { background: var(--primary-bg); border-radius: 6px; padding: 7px 6px; margin: 0 -6px; }
.frq-item-thumb {
  width:40px; height:40px; border-radius:5px;
  object-fit:cover; flex-shrink:0;
}
.frq-item-cat-icon {
  width:40px; height:40px; border-radius:5px;
  background:var(--bg3); display:flex; align-items:center;
  justify-content:center; font-size:18px; flex-shrink:0;
}
.frq-item-info { flex:1; min-width:0; }
.frq-item-cat  { font-size:12px; font-weight:600; color:var(--text2); }
.frq-item-desc { font-size:11px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.frq-item-pages { font-size:10px; background:var(--bg3); border-radius:4px; padding:1px 5px; color:var(--text3); }
.frq-item-amount { font-family:var(--font-mono); font-size:13px; font-weight:700; flex-shrink:0; }
.frq-item-btn {
  width:36px; height:36px; border:none; border-radius:50%;
  background:var(--bg3); cursor:pointer; font-size:13px;
  display:flex; align-items:center; justify-content:center;
  color:var(--text2); transition:background .12s;
}
.frq-item-btn:hover { background:var(--border2); }
.frq-item-del { color:var(--accent); }

/* ── Galerie de pages ── */
/* ── Popup note picker ── */
.frq-notepick-modal { max-width:420px; width:90vw; }
.frq-notepick-card {
  display:flex; flex-direction:column; gap:3px; text-align:left;
  width:100%; padding:12px 14px;
  border:1.5px solid var(--border); border-radius:var(--radius);
  background:var(--bg); cursor:pointer; font-family:inherit;
  transition:all 0.12s;
}
.frq-notepick-card:hover { border-color:var(--primary); background:var(--accent-bg); }
.frq-notepick-card-label { font-size:14px; font-weight:600; color:var(--text1); }
.frq-notepick-card-meta  { font-size:12px; color:var(--text2); }
.frq-notepick-new {
  width:100%; padding:11px 14px; margin-top:4px;
  border:1.5px dashed var(--border2); border-radius:var(--radius);
  background:transparent; color:var(--text2); cursor:pointer;
  font-size:13px; font-family:inherit; transition:all 0.12s;
}
.frq-notepick-new:hover { border-color:var(--primary); color:var(--primary); }
.frq-notepick-skip {
  width:100%; padding:9px 14px; margin-top:6px;
  border:none; border-top:1px solid var(--border); border-radius:0 0 var(--radius) var(--radius);
  background:transparent; color:var(--text3); cursor:pointer;
  font-size:12px; font-family:inherit; transition:color 0.12s;
}
.frq-notepick-skip:hover { color:var(--text1); }

.frq-dropzone {
  border: 2px dashed var(--border2);
  border-radius: var(--radius);
  padding: 10px 12px 6px;
  margin-bottom: 8px;
  transition: border-color 0.15s, background 0.15s;
  cursor: default;
}
.frq-dropzone.dragover {
  border-color: var(--primary);
  background: rgba(99,102,241,0.05);
}
.frq-dropzone-hint {
  font-size: 11px;
  color: var(--text3);
  text-align: center;
  padding: 4px 0 6px;
  pointer-events: none;
}
.frq-dropzone.dragover .frq-dropzone-hint {
  color: var(--primary);
  font-weight: 600;
}

.frq-analyze-btn {
  margin-left: auto;
  font-size: 12px;
  padding: 6px 12px;
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
  white-space: nowrap;
}
.frq-analyze-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}

.frq-pages-list {
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:4px; min-height:40px;
}
.frq-pages-empty { font-size:12px; color:var(--text3); padding:6px 0; align-self:center; }
.frq-page-item {
  position:relative; width:80px; height:80px;
  border-radius:var(--radius); overflow:hidden;
  background:var(--bg2); border:1.5px solid var(--border); flex-shrink:0;
}
.frq-page-thumb {
  width:100%; height:100%; object-fit:cover; display:block;
  cursor:zoom-in;
}
.frq-page-pdf-icon {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:30px; color:var(--text3);
}
.frq-page-num-badge {
  position:absolute; top:4px; left:4px;
  background:rgba(0,0,0,.5); color:var(--bg);
  font-size:10px; font-weight:700; border-radius:4px;
  padding:1px 5px; line-height:16px; z-index:2;
}
.frq-cropped-badge {
  position:absolute; bottom:4px; left:4px;
  background:var(--primary); color:var(--bg);
  font-size:9px; border-radius:4px; padding:1px 4px; z-index:2;
  pointer-events:none;
}
.frq-page-overlay {
  position:absolute; inset:0;
  display:flex; align-items:flex-end; justify-content:flex-end;
  gap:3px; padding:4px;
  background:rgba(0,0,0,0); opacity:0;
  transition:opacity .15s, background .15s; z-index:3;
}
.frq-page-item:hover .frq-page-overlay,
.frq-page-item:focus-within .frq-page-overlay {
  opacity:1; background:rgba(0,0,0,.35);
}
@media (hover:none) { /* touch: overlay toujours visible */
  .frq-page-overlay { opacity:1; background:rgba(0,0,0,.25); }
}
.frq-page-action-btn {
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.92); color:#222;
  border:none; font-size:13px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.frq-page-del-btn { color:var(--accent); }

/* Boutons capture */
.frq-capture-row { display:flex; gap:8px; flex-wrap:wrap; }
.frq-camera-btn, .frq-gallery-btn {
  display:inline-flex; align-items:center; gap:5px;
  cursor:pointer; font-size:13px;
}

/* ── Catégories ── */
.frq-cat-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }
.frq-cat-btn {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:4px; padding:12px 6px;
  border:1.5px solid var(--border); border-radius:var(--radius);
  background:var(--bg2); color:var(--text2);
  font-size:12px; cursor:pointer; line-height:1.3; text-align:center;
  transition:border-color .13s, background .13s, color .13s;
  min-height:44px;
}
.frq-cat-btn:hover  { border-color:var(--primary); color:var(--primary); }
.frq-cat-btn.active { border-color:var(--primary); background:var(--primary-bg); color:var(--primary); font-weight:700; }

/* ── Montant ── */
.frq-montant-wrap { display:flex; align-items:center; gap:10px; }
.frq-montant-input {
  flex:1; font-size:28px; font-family:var(--font-mono); font-weight:700;
  padding:10px 14px; border:2px solid var(--border2);
  border-radius:var(--radius); background:var(--bg2); color:var(--text);
  text-align:right; outline:none; -moz-appearance:textfield;
}
.frq-montant-input::-webkit-outer-spin-button,
.frq-montant-input::-webkit-inner-spin-button { -webkit-appearance:none; }
.frq-montant-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-bg); }
.frq-currency { font-size:28px; font-weight:700; color:var(--text3); flex-shrink:0; }

/* ── Description ── */
.frq-desc-input {
  width:100%; box-sizing:border-box; padding:9px 12px;
  border:1.5px solid var(--border); border-radius:var(--radius);
  background:var(--bg2); color:var(--text);
  font-size:14px; font-family:var(--font-body); outline:none;
}
.frq-desc-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-bg); }

/* ── Progression ── */
.frq-progress {
  background:var(--bg2); border-radius:var(--radius);
  overflow:hidden; height:28px; position:relative;
  display:flex; align-items:center; flex-shrink:0;
}
.frq-progress.hidden { display:none; }
.frq-progress-bar {
  position:absolute; left:0; top:0; bottom:0;
  background:var(--primary); width:0;
  transition:width .4s ease; opacity:.22;
}
.frq-progress-label {
  position:relative; font-size:12px; color:var(--text2); padding:0 12px; z-index:1;
}

/* ── Écran RECADRAGE ── */
.frq-crop-container {
  flex:1; min-height:0; background:#111; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.frq-crop-container img { max-width:100%; display:block; }
.frq-crop-toolbar {
  flex-shrink:0; display:flex; align-items:center; gap:6px;
  padding:10px 14px; border-top:1px solid var(--border); background:var(--bg);
  flex-wrap:wrap;
}
.frq-rotate-btn { font-size:17px; min-width:36px; padding:6px 10px; }
.frq-enhance-btn { font-size:12px; }
.frq-enhance-btn.active { background:var(--primary); color:var(--bg); border-color:var(--primary); }

/* ── Écran APERÇU PAGE ── */
.frq-preview-fullwrap {
  flex:1; min-height:0; background:#000; overflow:hidden;
  display:flex; align-items:center; justify-content:center; padding:8px;
}
.frq-preview-fullwrap img {
  max-width:100%; max-height:100%; object-fit:contain; display:block;
  border-radius:4px;
}

/* ── Footer ── */
.frq-footer { gap:6px; flex-wrap:wrap; }
.frq-add-another-btn { flex-shrink:0; }
.frq-draft-btn { flex:1; justify-content:center; }
#frq-submit-btn { flex:1; justify-content:center; }

/* ── Lightbox photo / PDF globale ── */
.photo-lightbox-wrap {
  position:relative;
  max-width:90vw; max-height:90vh;
  display:flex; align-items:center; justify-content:center;
}
.photo-lightbox-wrap img {
  max-width:90vw; max-height:90vh;
  object-fit:contain; border-radius:8px;
  display:block;
}
.photo-lightbox-wrap.is-pdf {
  width:min(88vw,960px);
  height:min(90vh,1100px);
}
#photo-lightbox-pdf {
  width:100%; height:100%;
  border:none; border-radius:8px;
  background:#fff; display:block;
}
.photo-lightbox-close {
  position:absolute; top:-14px; right:-14px;
  width:32px; height:32px; border-radius:50%;
  background:var(--bg); color:#111; border:none;
  font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
  z-index:10;
}
.photo-lightbox-newtab {
  position:absolute; top:-14px; right:24px;
  width:32px; height:32px; border-radius:50%;
  background:var(--bg); color:var(--text2);
  font-size:14px; text-decoration:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
  z-index:10;
}
.photo-lightbox-newtab:hover { background:var(--bg2); }

/* ── Responsive mobile ── */
@media (max-width:600px) {
  /* Plein écran : override le bottom-sheet de .modal-overlay */
  #modal-frais-quick { align-items: stretch; padding: 0; }
  .frq-modal { max-height:100dvh; height:100dvh; border-radius:0; }
  .frq-cat-grid { grid-template-columns:repeat(3,1fr); }
  .frq-montant-input { font-size:22px; }
  .frq-currency { font-size:22px; }
  .frq-page-item { width:70px; height:70px; }
  .frq-footer { flex-wrap:wrap; }
  .frq-add-another-btn, #frq-submit-btn { flex:1 1 40%; }
}
@media (max-width:375px) {
  .frq-cat-grid { grid-template-columns:repeat(2,1fr); }
  .frq-cat-btn  { font-size:11px; padding:10px 4px; }
}

/* --- NOTES DE FRAIS --- */
.note-frais-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}
.note-frais-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
}
.note-frais-card-header:hover { background: var(--bg3); }
.note-frais-card.brouillon  { border-left: 3px solid var(--border); }
.note-frais-card.soumise    { border-left: 3px solid #ca8a04; }
.note-frais-card.remboursee { border-left: 3px solid var(--green); }
.note-frais-label { font-weight: 600; font-size: 13px; color: var(--text1); }
.ndf-numero { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--text3); letter-spacing: .03em; }
.note-frais-meta  { font-size: 11px; color: var(--text3); margin-top: 2px; }
.note-frais-total { font-family: var(--font-mono); font-size: 14px; font-weight: 700; white-space: nowrap; }
.note-frais-body {
  border-top: 1px solid var(--border);
  padding: 8px 14px 4px;
}
.note-frais-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg3);
}
.ndf-date-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg3);
}
/* Chips multi-dates */
.ndf-date-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 22px;
}
.ndf-date-chips-empty {
  font-size: 12px;
  color: var(--text3);
}
.ndf-date-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text2);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2px 8px 2px 8px;
}
.ndf-chip-remove {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text3);
  font-size: 14px;
  padding: 0;
  line-height: 1;
  margin-left: 2px;
}
.ndf-chip-remove:hover { color: var(--accent); }
.ndf-date-add-select {
  font-size: 12px;
  color: var(--text2);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 4px 8px;
  cursor: pointer;
  width: 100%;
}
.ndf-date-add-select:focus { outline: none; border-color: var(--accent); }
.ndf-date-select {
  flex: 1; min-width: 0; font-size: 12px; color: var(--text2);
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 5px; padding: 4px 8px; cursor: pointer;
}
.ndf-date-select:focus { outline: none; border-color: var(--accent); }
.ndf-date-readonly {
  font-size: 12px;
  color: var(--text3);
  padding: 2px 0;
}
/* Checkbox merge */
.ndf-merge-label {
  display: flex;
  align-items: center;
  padding: 8px 14px 0;
  cursor: pointer;
  user-select: none;
}
.ndf-merge-cb {
  width: 16px; height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
/* Barre de fusion flottante */
.ndf-merge-bar {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
  font-size: 13px;
  white-space: nowrap;
}
.ndf-merge-bar.hidden { display: none; }
@media (max-width:600px) {
  .ndf-merge-bar { bottom: 88px; left: 12px; right: 12px; transform: none; flex-wrap: wrap; }
}


/* ============================================================
   FRAIS & NOTES DE FRAIS
   ============================================================ */

/* --- Modal frais : formulaire d'ajout --- */
.frais-form-bloc {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 20px;
}

.frais-liste-titre {
  font-size: 11px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: var(--text3);
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}

/* --- Groupe par membre --- */
.frais-groupe { margin-bottom: 16px; }
.frais-groupe-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.frais-groupe-role { font-size: 11px; color: var(--text3); font-family: var(--font-mono); flex: 1; }
.frais-groupe-total { font-family: var(--font-mono); font-weight: 600; font-size: 13px; }

/* --- Ligne de frais --- */
.frais-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.frais-cat   { min-width: 120px; color: var(--text2); }
.frais-desc  { flex: 1; color: var(--text2); }
.frais-montant { font-family: var(--font-mono); font-weight: 600; min-width: 80px; text-align: right; }
.frais-just-link { font-size: 16px; text-decoration: none; }
.frais-upload-btn {
  font-size: 11px;
  background: none;
  border: 1px dashed var(--border2);
  border-radius: var(--radius-sm);
  color: var(--text3);
  padding: 2px 8px;
  cursor: pointer;
}
.frais-upload-btn:hover { border-color: var(--accent); color: var(--accent); }
.frais-del { opacity: 0; transition: opacity 0.15s; color: var(--text3); font-size: 11px; }
.frais-item:hover .frais-del { opacity: 1; }
.ndf-table tr:hover .frais-del { opacity: 1; }

/* --- Badges statut frais --- */
.frais-badge {
  font-size: 10px;
  font-family: var(--font-mono);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.frais-attente  { background: rgba(200,160,0,0.12); color: #b08000; }
.frais-approuve { background: rgba(59,130,246,0.12); color: #2563eb; }
.frais-paye     { background: rgba(34,197,94,0.12);  color: var(--green); }
.frais-avance     { background: rgba(139,92,246,0.12); color: #7c3aed; }
.frais-avance-ok  { background: rgba(34,197,94,0.12);  color: var(--green); }
.frais-avance-toggle { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; }


/* ============================================================
   NOTE DE FRAIS — document imprimable
   ============================================================ */

.ndf-doc {
  font-family: var(--font-body);
  max-width: 800px;
  margin: 0 auto;
}

.ndf-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 3px solid var(--accent);
  padding-bottom: 16px;
  margin-bottom: 24px;
}
.ndf-org       { font-size: 11px; font-family: var(--font-mono); color: var(--text3); text-transform: uppercase; letter-spacing: 0.08em; }
.ndf-doc-title { font-size: 24px; font-family: var(--font-display); font-weight: 700; color: var(--accent); margin-top: 4px; }
.ndf-meta      { text-align: right; font-size: 13px; }

.ndf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 24px;
}
.ndf-table th {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text3);
  text-align: left;
  white-space: nowrap;
}
.ndf-table td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  vertical-align: top;
}
.ndf-table tfoot td { background: var(--bg3); }

.ndf-resume {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 24px;
}
.ndf-resume-titre { font-size: 11px; font-family: var(--font-mono); text-transform: uppercase; color: var(--text3); margin-bottom: 8px; }
.ndf-resume-ligne { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; }

.ndf-virement {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.ndf-virement-titre { font-size: 11px; font-family: var(--font-mono); text-transform: uppercase; color: var(--text3); margin-bottom: 12px; }
.ndf-virement-grid  { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 16px; font-size: 13px; }
.ndf-virement-grid > div { display: flex; flex-direction: column; gap: 2px; }
.ndf-virement-iban,
.ndf-virement-sig {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  margin-top: 10px;
}
.ndf-ligne-pointillee {
  flex: 1;
  border-bottom: 1px dotted var(--border2);
  height: 20px;
}


/* ============================================================
   DRAG & DROP — DROPZONE
   ============================================================ */

.dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  background: var(--bg3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
}
.dropzone.dragover {
  border-color: var(--accent);
  background: rgba(232,49,42,0.05);
}
.dropzone.has-file {
  border-color: var(--green);
  background: rgba(39,174,96,0.05);
}
.dropzone-icon  { font-size: 22px; }
.dropzone-hint  { font-size: 12px; color: var(--text3); }
.dropzone-filename {
  font-size: 12px;
  color: var(--green);
  font-family: var(--font-mono);
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dropzone-btns  { display: flex; gap: 8px; }
.dropzone-browse, .dropzone-camera {
  cursor: pointer;
  font-size: 12px;
}

.frais-form-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.frais-form-row .form-group { flex: 1; min-width: 100px; }
.frais-form-actions { display: flex; justify-content: flex-end; margin-top: 8px; gap: 8px; }



/* ============================================================
   FRAIS — statuts et actions
   ============================================================ */

.frais-statut-brouillon { opacity: 0.85; }
.frais-statut-soumis    { }
.frais-statut-rembourse { opacity: 0.65; }

.frais-badge.frais-brouillon { background: var(--bg3); color: var(--text3); border: 1px solid var(--border); }
.frais-badge.frais-soumis    { background: #fff3cd; color: #856404; border: 1px solid #ffc107; }
.frais-badge.frais-approuve  { background: #dbeafe; color: #1e40af; border: 1px solid #3b82f6; }
.frais-badge.frais-rembourse { background: #d1f2eb; color: #1a7a56; border: 1px solid #27ae60; }
.frais-badge.frais-ref-traj  { background: #f3f0ff; color: #5b21b6; border: 1px solid #7c3aed; font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: 0.02em; }

.frais-ref {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text3);
  background: var(--bg3);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 4px;
}

.frais-groupe-actions {
  display: flex;
  gap: 8px;
  padding: 8px 0 4px;
  border-top: 1px dashed var(--border);
  margin-top: 6px;
}

.btn-soumettre {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffc107;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
}
.btn-soumettre:hover { background: #ffc107; color: #000; }

.btn-rembourser {
  background: #d1f2eb;
  color: #1a7a56;
  border: 1px solid #27ae60;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
}
.btn-rembourser:hover { background: #27ae60; color: var(--bg); }

.frais-loading, .frais-empty {
  color: var(--text3);
  font-size: 12px;
  padding: 12px 0;
}

/* --- SECTION NOTES DE FRAIS --- */

.frais-section-banner {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: var(--radius);
  padding: 12px 18px;
  margin-bottom: 18px;
  font-size: 13px;
  color: #856404;
}

.frais-membres-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.frais-membre-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.frais-membre-card.frais-membre-urgent {
  border-color: #ffc107;
  background: #fffdf0;
}

.frais-membre-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.frais-membre-nom   { font-weight: 600; font-size: 14px; }
.frais-membre-role  { font-size: 11px; color: var(--text3); margin-top: 2px; }
.frais-membre-total { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--text); }

.frais-membre-pills { display: flex; flex-wrap: wrap; gap: 5px; }

.frais-membre-actions { display: flex; gap: 8px; padding-top: 4px; border-top: 1px solid var(--border); }

.ndf-iban-val {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}



/* ============================================================
   NOTES DE FRAIS — édition inline + pièces jointes PDF
   ============================================================ */

/* Formulaire d'édition inline d'un frais */
.frais-edit-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: var(--bg2);
  border-radius: 6px;
  margin: 4px 0;
  font-size: 13px;
}
.frais-edit-inline select,
.frais-edit-inline input[type="text"],
.frais-edit-inline input[type="number"] {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 13px;
  background: var(--bg);
}
.frais-edit-inline input[type="text"] { flex: 1; min-width: 120px; }

/* Pièces jointes — cachées à l'écran, visibles à l'impression uniquement si option activée */
.ndf-justificatifs-print {
  display: none;
}

@media print {
  body.ndf-print-with-just .ndf-justificatifs-print {
    display: block;
    margin-top: 24px;
    page-break-before: auto;
  }
  .ndf-just-titre {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-top: 2px solid #000;
    padding-top: 10px;
    margin-bottom: 12px;
  }
  .ndf-just-item {
    margin-bottom: 16px;
    page-break-inside: avoid;
  }
  .ndf-just-label {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
  }
}



/* ================================
   JUSTIFICATIFS MULTIPLES — miniatures
   ================================ */

.frais-just-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.frais-just-preview {
  position: relative;
  display: inline-block;
  text-decoration: none;
  flex-shrink: 0;
}
.frais-just-thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid var(--border);
  display: block;
  transition: opacity 0.15s;
}
.frais-just-thumb:hover { opacity: 0.8; }
.frais-just-pdf-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 22px;
}
.frais-just-del {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 9px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  z-index: 2;
}
.frais-just-add {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  padding: 0;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text3);
  border-radius: 5px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.frais-just-add:hover { border-color: var(--accent); color: var(--accent); }

/* Multi-dates checkbox list */
.frais-date-cb-list {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg3);
  padding: 6px 4px;
}
.frais-date-cb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.1s;
}
.frais-date-cb-row:hover { background: var(--bg2); }
.frais-date-cb-row input[type=checkbox] { flex-shrink: 0; width: 15px; height: 15px; cursor: pointer; }
.frais-date-cb-row[hidden] { display: none; }

.frais-multi-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text2);
  padding: 8px 0;
}
.frais-multi-toggle input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }
.frais-multi-toggle:hover { color: var(--text1); }

.frais-perso-multi {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 280px;
}

/* ── Guide de flux 3 étapes ── */
.frais-flow-guide {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.frais-flow-step {
  font-size: 12px;
  font-weight: 600;
  color: var(--text3);
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.frais-flow-step--done {
  color: #22c55e;
  background: #f0fdf4;
}
.frais-flow-step--current {
  color: var(--accent);
  background: #fff5f5;
  border: 1px solid var(--accent);
}
.frais-flow-arrow {
  font-size: 13px;
  color: var(--text3);
  flex-shrink: 0;
}

/* Frais personnels — lignes brouillon */
.frais-perso-card { padding: 18px 20px; }
.frais-perso-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 8px;
}
.frais-perso-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.frais-perso-row:last-of-type { border-bottom: none; }
.frais-perso-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.frais-perso-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.frais-perso-date {
  font-size: 11px;
  color: var(--text3);
}

/* Thumbnails petits (vue perso) */
.frais-just-thumb--sm   { width: 32px; height: 32px; }
.frais-just-pdf-icon--sm { width: 32px; height: 32px; font-size: 17px; }
.frais-just-add--sm {
  width: 32px;
  height: 32px;
  font-size: 17px;
}

/* Drag-and-drop sur cartes frais existantes */
.frais-perso-row.frais-card-droppable {
  cursor: default;
}
.frais-perso-row.frais-card-dragover {
  outline: 2px dashed var(--green);
  outline-offset: -2px;
  background: rgba(39,174,96,0.05);
  border-radius: 6px;
}

/* Queue d'upload inline sous la carte */
.frais-upload-queue {
  width: 100%;
  margin-top: 6px;
  padding: 6px 8px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.frais-queue-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text2);
}
.frais-queue-item .fqi-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.frais-queue-item .fqi-status {
  flex-shrink: 0;
  font-size: 13px;
}

/* =============================================================================
   TUNNEL TABS — Notes de frais
   ============================================================================= */

.frais-tunnel-tabs {
  display: flex;
  gap: 4px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.frais-tunnel-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.frais-tunnel-tab:hover { background: var(--bg2); color: var(--text); }
.frais-tunnel-tab.active {
  background: var(--primary-bg);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}
.ftab-icon { font-size: 15px; line-height: 1; }
.ftab-badge {
  display: none;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}
.ftab-badge.active { display: inline-block; }

/* =============================================================================
   TAB AJOUTER — formulaire centré proprement
   ============================================================================= */

.frais-ajouter-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--primary-bg);
  border: 1px solid var(--primary);
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--primary);
}

.frais-ajouter-wrap {
  max-width: 680px;
}

.frais-ajouter-card {
  background: var(--bg);
  border: 2px dashed var(--border2);
  border-radius: 12px;
  padding: 28px 24px 20px;
  box-shadow: var(--shadow);
  transition: border-color 0.15s, background 0.15s;
}
.frais-ajouter-card.dragover {
  border-color: var(--primary);
  background: rgba(99,102,241,0.04);
}

/* =============================================================================
   BROUILLONS — dépenses orphelines + notes brouillon
   ============================================================================= */

.frais-orphelins-bloc {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 16px;
}

.frais-orphelins-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.frais-orph-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.frais-orph-hint {
  font-size: 11px;
  color: var(--text3);
  margin-top: 3px;
}

.frais-section-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 16px 0 8px;
}

/* Dropzone mobile */
.dropzone-scan-hint {
  font-size: 11px;
  color: var(--text3);
  margin-top: 6px;
  text-align: center;
}
.dropzone-scan {
  background: var(--accent) !important;
  color: #fff !important;
  font-weight: 600;
}
@media (max-width: 600px) {
  .dropzone-desktop-area { display: none; }
  .dropzone-btns { flex-direction: column; width: 100%; }
  .dropzone-btns label { width: 100%; justify-content: center; padding: 12px 16px; font-size: 15px; }
}

/* Barre de tri — tab Mes soumissions */
.frais-sort-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0 12px;
  flex-wrap: wrap;
}
.frais-sort-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-right: 2px;
}
.frais-sort-btn {
  font-size: 12px;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface2);
  color: var(--text2);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  line-height: 1.4;
}
.frais-sort-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.frais-sort-btn:hover:not(.active) {
  background: var(--surface3);
  color: var(--text1);
}

/* Message admin sur une note remise en brouillon */
.ndf-admin-msg {
  background: #fff3cd;
  border: 1px solid #f0c040;
  border-left: 4px solid #f59e0b;
  border-radius: 0 6px 6px 0;
  color: #92400e;
  font-size: 13px;
  padding: 8px 14px;
  margin: 0 0 2px 0;
}
.ndf-admin-msg strong { font-weight: 700; }

/* Tag saison dans la meta d'une note de frais */
.ndf-saison-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg3);
  color: var(--text3);
  border: 1px solid var(--border);
  letter-spacing: .02em;
  vertical-align: middle;
}