/* core/tables.css

   Panneaux, tableaux, pagination.

   Chargé par index.html, dans l'ordre de css/README.md. Ne pas changer cet
   ordre sans relire la section « Ordre de chargement ». */

/* ---------- panels & tables ---------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: var(--shadow-card);
}

.panel-title {
  font-size: var(--fs-3);
  font-weight: 600;
  margin: 0;
  padding: 16px 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-title .vw { font-size: var(--fs-2); color: var(--primary); font-weight: 600; }

:root:not([data-theme="light"]) .panel-title .vw { color: var(--primary-strong); }

.panel-title .cnt { font-size: var(--fs-1); color: var(--muted); font-weight: 500; }

.panel-body { padding: 4px 20px 16px; }

table { width: 100%; border-collapse: collapse; }

th {
  text-align: left;
  font-size: var(--fs-1);
  font-weight: 500;
  color: var(--muted);
  padding: 13px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

td { padding: 14px 20px; border-bottom: 1px solid var(--border); font-size: var(--fs-3); vertical-align: middle; }

tbody tr:last-child td { border-bottom: none; }

td.actions { text-align: right; white-space: nowrap; }

td.actions .btn { margin-left: 7px; }

.empty { padding: 52px 20px; text-align: center; color: var(--muted); font-size: var(--fs-4); }

@media (max-width: 640px) {
  td, th { padding: 12px 14px; }
}

/* ---------- tableaux sur petit écran ---------- */

.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table-scroll table { min-width: 640px; }

/* ---------- pagination ---------- */

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 4px 0 20px;
  flex-wrap: wrap;
}