@charset "UTF-8";

/* ══════════════════════════════════════════════════════════════════
   TABLE — DataTables + Views
   Basé sur le design admin-parc.html
   Variables depuis variables.css
══════════════════════════════════════════════════════════════════ */
.parc-velo-topbar{
  display: none!important;
}
/* ── Wrapper principal ───────────────────────────────────────────── */
.parc-velo-wrap {
  padding: 24px 0 48px;
}

/* ── Override DataTables layout first (recherche) end last (pagination) row ──────────────────────────────────── */
.dt-layout-row:first-child, .dt-layout-row:last-child  {
  display: flex !important;
  justify-content: flex-end;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}
div.dt-container .dt-search input {

  padding: 6px !important;}

/* ── Boutons export ──────────────────────────────────────────────── */
.dt-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/*.dt-btn,*/
/*.dt-button {*/
/*  display: inline-flex;*/
/*  align-items: center;*/
/*  gap: 6px;*/
/*  background: #EDF2F8;*/
/*  color: var(--brand-primary);*/
/*  border: 1.5px solid var(--border-subtle);*/
/*  padding: 8px 16px;*/
/*  border-radius: 10px;*/
/*  font-size: 12px;*/
/*  font-weight: 700;*/
/*  cursor: pointer;*/
/*  font-family: inherit;*/
/*  text-decoration: none;*/
/*  transition: all 0.15s;*/
/*  box-shadow: none;*/
/*  outline: none;*/
/*}*/

/*.dt-btn:hover,*/
/*.dt-button:hover {*/
/*  background: var(--brand-primary);*/
/*  color: #fff;*/
/*  border-color: var(--brand-primary);*/
/*}*/

/* ── Barre de recherche ──────────────────────────────────────────── */
.dt-search {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dt-search label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.dt-search input {
  padding: 9px 14px;
  border: 1.5px solid var(--border-subtle);
  border-radius: 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-main);
  outline: none;
  transition: border-color 0.15s;
  background: #fff;
  min-width: 220px;
}

.dt-search input:focus {
  border-color: var(--brand-primary);
}

/* ── Table principale ────────────────────────────────────────────── */
.views-table,
.dt-table {
  width: 100% !important;
  border-collapse: collapse;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}

/* ── En-têtes ────────────────────────────────────────────────────── */
.views-table thead th,
.dt-table thead th {
  background: #EDF2F8;
  padding: 12px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

/* Icônes de tri DataTables */
.views-table thead th.dt-orderable-asc,
.views-table thead th.dt-orderable-desc {
  cursor: pointer;
}

.views-table thead th.dt-ordering-asc .dt-column-order::after  { content: ' ↑'; color: var(--brand-primary); }
.views-table thead th.dt-ordering-desc .dt-column-order::after { content: ' ↓'; color: var(--brand-primary); }

/* ── Cellules ────────────────────────────────────────────────────── */
.views-table tbody td,
.dt-table tbody td {
  padding: 12px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-main);
  vertical-align: middle;
}

.views-table tbody tr:last-child td,
.dt-table tbody tr:last-child td {
  border-bottom: none;
}

.views-table tbody tr:hover td,
.dt-table tbody tr:hover td {
  background: #f8fafc;
}

/* ── Lien titre ──────────────────────────────────────────────────── */
.views-field-title a {
  font-weight: 700;
  color: var(--brand-primary);
  text-decoration: none;
}

.views-field-title a:hover {
  text-decoration: underline;
}

/* ── Info pagination ─────────────────────────────────────────────── */
.dt-info {
  font-size: 12px;
  color: var(--text-muted);
}

/* ── Pagination ──────────────────────────────────────────────────── */
.dt-paging {
  display: flex;
  align-items: center;
  gap: 4px;
}

.dt-paging .dt-paging-button {
  padding: 6px 12px;
  border: 1.5px solid var(--border-subtle);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-primary);
  background: #fff;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

.dt-paging .dt-paging-button:hover {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
}

.dt-paging .dt-paging-button.current {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
}

.dt-paging .dt-paging-button.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Boutons actions tableau ── */
.views-field-edit-node a,
.views-field-delete-node a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid var(--border-subtle);
  color: var(--brand-primary);
  padding: 5px 12px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s;
  white-space: nowrap;
}

.views-field-edit-node a:hover {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
}

/* ── Responsive ──────────────────────────────────────────────────── */
.view-content {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .dt-layout-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .dt-search input {
    min-width: 100%;
  }
}