/* ============================================================
   AUMN — Data portal components
   Shared by page-portail-donnees.php and single-union_locale.php
   (same presentation logic & components on both pages).
   ============================================================ */

/* ── Data table ── */
.d-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }
.d-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 600px; }
.d-table th {
  text-align: left; padding: 0.75rem 1rem;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: #78716c;
  background: #fafaf9;
  border-bottom: 2px solid rgba(28, 25, 23, 0.08);
  white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
.d-table th.text-right, .d-table td.text-right { text-align: right; }
.d-table th.sortable { cursor: pointer; user-select: none; transition: all 0.15s; }
.d-table th.sortable:hover { color: #065f46; background: #f5f2ed; }
.d-table th.sortable::after { content: '↕'; margin-left: 0.25rem; opacity: 0.3; font-size: 0.625rem; }
.d-table th.sort-asc::after { content: '↑'; opacity: 1; color: #065f46; }
.d-table th.sort-desc::after { content: '↓'; opacity: 1; color: #065f46; }
.d-table td {
  padding: 0.75rem 1rem; font-size: 0.8125rem; color: #44403c;
  border-bottom: 1px solid rgba(28, 25, 23, 0.04);
  transition: background 0.15s;
}
.d-table tbody tr:nth-child(even) td { background: rgba(245, 245, 244, 0.5); }
.d-table tbody tr:hover td { background: rgba(6, 95, 70, 0.04); }
.d-table tbody tr { transition: all 0.15s; }
.d-table tbody tr.hidden-row { display: none; }

/* Crop badge */
.crop-badge {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.25rem 0.625rem; border-radius: 0.5rem;
  background: #f5f5f4; border: 1px solid rgba(28, 25, 23, 0.06);
  font-weight: 600; font-size: 0.8125rem; color: #1c1917;
}
.crop-badge .crop-emoji { font-size: 1rem; }

/* Union badge in table */
.union-badge {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.25rem 0.5rem; border-radius: 0.375rem;
  background: #f0fdf4; border: 1px solid #dcfce7;
  font-size: 0.6875rem; font-weight: 600; color: #166534;
}

/* Yield indicator */
.yield-good { color: #065f46; font-weight: 700; }
.yield-ok { color: #b45309; font-weight: 600; }
.yield-low { color: #dc2626; font-weight: 500; }

/* Price format */
.price-value { font-variant-numeric: tabular-nums; }
.price-unit { color: #a8a29e; font-size: 0.6875rem; margin-left: 0.25rem; }

.d-search { position: relative; }
.d-search input { padding-left: 2.5rem; }
.d-search svg, .d-search i {
  position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%);
  width: 1rem; height: 1rem; color: #a8a29e; pointer-events: none;
}
.progress-bar-track {
  height: 0.5rem; background: rgba(28, 25, 23, 0.06);
  border-radius: 9999px; overflow: hidden;
}
.progress-bar-fill {
  height: 100%; border-radius: 9999px;
  transition: width 0.8s var(--ease-smooth, cubic-bezier(0.4, 0, 0.2, 1));
}

/* ── Scroll hint for table on mobile ── */
.d-table-wrap::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 32px;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.95), transparent);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.d-table-wrap.has-scroll::after { opacity: 1; }

/* ── Data portal pagination ── */
#donnees-pagination .dp-page-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2rem; height: 2rem; padding: 0 0.5rem;
  border-radius: 0.5rem; font-size: 0.8125rem; font-weight: 600;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  color: #57534e; background: white;
  border: 1px solid rgba(28, 25, 23, 0.08);
  cursor: pointer; transition: all 0.15s ease;
}
#donnees-pagination .dp-page-btn:hover:not(.active):not(:disabled) {
  background: #f5f2ed; border-color: rgba(28, 25, 23, 0.12); color: #1c1917;
}
#donnees-pagination .dp-page-btn.active {
  background: #065f46; color: white; border-color: #065f46;
  box-shadow: 0 2px 8px rgba(6, 95, 70, 0.2);
}
#donnees-pagination .dp-page-btn:disabled {
  opacity: 0.35; cursor: not-allowed;
}
#donnees-pagination .dp-page-ellipsis {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2rem; height: 2rem;
  font-size: 0.75rem; color: #a8a29e;
}

/* ── Filter pills: horizontal scroll on mobile ── */
.dp-filter-pills {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
}

/* ── Filter select styling ── */
.dp-filter-label {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.375rem 0.75rem; border-radius: 0.5rem;
  background: white; border: 1px solid rgba(28, 25, 23, 0.1);
  font-size: 0.75rem; font-weight: 500; color: #57534e;
  cursor: pointer; transition: all 0.15s;
}
.dp-filter-label:hover { border-color: rgba(6, 95, 70, 0.3); background: #fafffe; }
.dp-filter-label i { width: 0.875rem; height: 0.875rem; color: #a8a29e; }
.dp-filter-select {
  border: none; background: transparent; font-size: 0.75rem; font-weight: 600;
  color: #1c1917; cursor: pointer; outline: none; padding-right: 0.25rem;
}
.dp-filter-select:focus { outline: none; }

/* Active filter state */
.dp-filter-label.active {
  background: #f0fdf4; border-color: #065f46; color: #065f46;
}
.dp-filter-label.active i { color: #065f46; }
.dp-filter-label.active .dp-filter-select { color: #065f46; }

/* Reset filters button */
.dp-filter-reset {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.375rem 0.75rem; border-radius: 0.5rem;
  background: #fef2f2; border: 1px solid #fecaca;
  font-size: 0.75rem; font-weight: 500; color: #dc2626;
  cursor: pointer; transition: all 0.15s;
}
.dp-filter-reset:hover { background: #fee2e2; border-color: #f87171; }
.dp-filter-reset i { width: 0.75rem; height: 0.75rem; }

/* ── Stat card value overflow ── */
.dp-stat-value {
  font-size: 1.5rem; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%; display: block;
}

/* ── Chart canvas responsive heights ── */
.dp-chart-wrap { position: relative; width: 100%; }
.dp-chart-wrap canvas { width: 100% !important; height: 100% !important; }

/* ── Empty row message ── */
.dp-empty-filter {
  text-align: center; padding: 2rem 1rem;
  color: #a8a29e; font-size: 0.875rem;
}

/* ── Mobile-specific overrides ── */
@media (max-width: 640px) {
  .d-table { min-width: 500px; font-size: 0.75rem; }
  .d-table th, .d-table td { padding: 0.5rem 0.625rem; }
  .d-search { width: 100%; }
  .dp-filter-pills {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
    scrollbar-width: none; /* Firefox */
  }
  .dp-filter-pills::-webkit-scrollbar { display: none; }
  .dp-stat-value { font-size: 1.25rem; }
  .dp-chart-wrap { height: 220px !important; }
  .dp-chart-wrap.dp-chart-tall { height: 260px !important; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .dp-chart-wrap { height: 250px !important; }
  .dp-chart-wrap.dp-chart-tall { height: 290px !important; }
}

/* ── Union cards: responsive grid fallback ── */
.dp-union-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .dp-union-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}
@media (min-width: 1024px) {
  .dp-union-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; }
}