body { font-family: system-ui, sans-serif; margin: 2rem; color: #1a1a1a; }
[hidden] { display: none !important; }
nav { margin-bottom: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
nav a { margin-right: 1rem; text-decoration: none; color: #0645ad; }
nav a.active { font-weight: bold; }
nav .nav-user { color: #555; }
.user-menu { position: relative; }
.user-menu-btn { display: inline-flex; align-items: center; gap: 0.4rem; background: none; border: none; font: inherit; color: inherit; padding: 0.25rem 0.4rem; }
.avatar { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #0645ad; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: bold; }
.user-menu-dropdown { position: absolute; right: 0; top: 100%; margin-top: 0.25rem; background: #fff; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); min-width: 200px; z-index: 10; display: flex; flex-direction: column; }
.user-menu-dropdown button { text-align: left; padding: 0.5rem 0.75rem; border: none; background: none; font: inherit; }
.user-menu-dropdown button:hover { background: #f0f7ff; }

.modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal { background: #fff; padding: 1.5rem; border-radius: 6px; width: 320px; max-width: 90vw; }
.modal form { display: flex; flex-direction: column; gap: 0.75rem; }
.modal label { display: flex; flex-direction: column; font-size: 0.85rem; gap: 0.25rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
table { border-collapse: collapse; width: 100%; margin-top: 1rem; }
th, td { border: 1px solid #ddd; padding: 0.4rem 0.6rem; text-align: left; }
th { background: #f5f5f5; }
tr.report-row { cursor: pointer; }
tr.report-row:hover { background: #f0f7ff; }
form.filters { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; }
form.filters label { display: flex; flex-direction: column; font-size: 0.85rem; }
form.filters { position: sticky; top: 0; z-index: 3; background: #fff; padding-block: 0.75rem; }
/* En-tete fige a l'interieur de son propre conteneur scrollable (plutot que
   sticky au niveau de la page) : evite d'avoir a faire coincider au pixel
   pres la sticky des filtres et celle du thead (bug de rendu Chrome constate
   avec deux sticky adjacents + border-collapse: collapse). */
.table-scroll { max-height: 65vh; overflow-y: auto; margin-top: 1rem; }
#reports-table { margin-top: 0; border-collapse: separate; border-spacing: 0; }
#reports-table th, #reports-table td { border: none; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; }
#reports-table th:first-child, #reports-table td:first-child { border-left: 1px solid #ddd; }
#reports-table thead th { border-top: 1px solid #ddd; position: sticky; top: 0; z-index: 2; background: #f5f5f5; }
#reports-table th[data-sort] { cursor: pointer; user-select: none; }
#reports-table th[data-sort]::after { content: ""; margin-left: 0.3rem; color: #888; }
#reports-table th.sorted-asc::after { content: "\25B2"; }
#reports-table th.sorted-desc::after { content: "\25BC"; }
.error { color: #b00020; }
.pagination { margin-top: 1rem; display: flex; gap: 0.5rem; align-items: center; }
button { cursor: pointer; }