/* ============================================================
   bureau.css — styles partagés par desktop.html et listing-*.html
   (modale de création / édition, réutilisable)
   ============================================================ */
.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 1001; align-items: center; justify-content: center; }
.modal .modal-content { background: #fff; border-radius: 12px; padding: 22px; width: 92%; max-width: 560px; border: 3px solid #000; max-height: 90vh; overflow-y: auto; }
.modal h3 { margin: 0 0 14px 0; font-size: 20px; }
.modal .orig { background: #f0f0f0; border: 1px dashed #999; border-radius: 6px; padding: 8px; font-size: 13px; color: #444; margin-bottom: 14px; }
.modal .field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.modal .field label { font-size: 14px; font-weight: 600; }
.modal .field input, .modal .field textarea { padding: 12px; font-size: 16px; border: 2px solid #000; border-radius: 8px; font-family: inherit; width: 100%; }
.modal .field textarea { min-height: 80px; resize: vertical; }
.modal .checkbox-row { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; }
.modal .checkbox-row input { width: 24px; height: 24px; }
.modal .montant { font-size: 18px; font-weight: bold; padding: 10px; background: #fff7d6; border: 2px solid #000; border-radius: 8px; text-align: center; margin-bottom: 12px; }
.modal .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.modal .modal-actions button { padding: 12px 20px; font-size: 16px; font-weight: bold; border: 2px solid #000; border-radius: 8px; cursor: pointer; background: #fff; }
.modal .modal-actions button.primary { background: #4caf50; color: #fff; }

/* ============================================================
   Chrome + listes partagés par toutes les pages listing-*.html
   La couleur d'accent de l'onglet actif se règle par page via
   la variable CSS --accent (ex: body { --accent: #a3cffe; }).
   ============================================================ */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #1a237e; color: #fff; padding: 14px 16px; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.topbar h1 { font-size: 22px; }
.btn-retour { background: #fff; color: #1a237e; border: 2px solid #fff; border-radius: 8px; padding: 10px 14px; font-weight: bold; font-size: 14px; text-decoration: none; white-space: nowrap; }
.tabs { display: flex; gap: 10px; }
.tab { flex: 1;white-space:nowrap; padding: 8px; border: 0px solid #000; border-radius: 0px; font-size: 12px; font-weight: normal; cursor: pointer; background: #fff; }
.tab.active { background: var(--accent, #cfe3ff); }

/* Menu de navigation commun (Bureau.renderMenu) */
.nav-menu { flex: 1; }
.nav-menu .tab { font-weight: normal; }
.nav-menu .tab.active { font-weight: bold; box-shadow: inset 0 -4px 0 #1a237e; }

.l-list { display: flex; flex-direction: column; gap: 8px; }
.l-row { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 2px solid #000; border-radius: 10px; padding: 10px 12px; }
.l-when { font-size: 14px; font-weight: bold; color: #1a237e; }
.l-title { font-weight: bold; font-size: 17px; word-break: break-word; }
.l-desc { word-break: break-word; }
.l-sub { font-size: 14px; color: #444; word-break: break-word; }
.l-tag { display: inline-block; background: #1a237e; color: #fff; font-size: 12px; font-weight: bold; padding: 2px 8px; border-radius: 10px; margin-left: 8px; vertical-align: middle; }
.l-acts { display: flex; gap: 6px; margin-top: 2px; }
.l-acts button { padding: 8px 12px; border: 2px solid #000; border-radius: 6px; font-weight: bold; cursor: pointer; }
.l-btn-edit { background: #ffa726; }
.l-btn-trash { background: #e57373; }
.l-empty { color: #666; padding: 20px; text-align: center; }