/* DataSlug Plugin — public styles */

:root {
  --ds-card-bg:  #fff;
  --ds-card-bd:  #e5e7eb;
  --ds-muted:    #6b7280;
  --ds-ink:      #111827;
  --ds-ink-2:    #374151;
  --ds-soft:     #f3f4f6;
  --ds-soft-2:   #f9fafb;
  --ds-ring:     #eef2f7;
  --ds-green:    #16a34a;
}

/* ── Layout ─────────────────────────────────────────────────────────── */
.dataslug-wrap  { max-width:1200px; margin:0 auto; padding:24px; }
.dataslug-card  { background:var(--ds-card-bg); border:1px solid var(--ds-card-bd);
                  border-radius:16px; box-shadow:0 6px 24px rgba(0,0,0,.06); }

/* ── Header ─────────────────────────────────────────────────────────── */
.dataslug-head  { display:flex; flex-wrap:wrap; gap:12px; align-items:center;
                  justify-content:space-between; padding:16px 20px;
                  border-bottom:1px solid var(--ds-ring); }
.dataslug-title { font-size:20px; font-weight:700; margin:0; color:var(--ds-ink); }
.dataslug-sub   { font-size:13px; color:var(--ds-muted); }
.dataslug-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* ── Search bar ─────────────────────────────────────────────────────── */
.dataslug-search       { display:flex; gap:8px; align-items:center; width:100%; max-width:620px; }
.dataslug-search input { flex:1; padding:12px 14px; border:1px solid #d1d5db;
                          border-radius:12px; outline:none; font-size:14px; }
.dataslug-search input:focus { box-shadow:0 0 0 3px rgba(59,130,246,.15); border-color:#93c5fd; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.ds-btn          { appearance:none; border:0; border-radius:12px; padding:10px 14px;
                   font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap; }
.ds-btn:disabled { opacity:.6; cursor:not-allowed; }
.ds-btn-primary  { background:#111827; color:#fff; }
.ds-btn-ghost    { background:var(--ds-soft); color:var(--ds-ink); }
.ds-btn-success  { background:#15803d; color:#fff; }

/* ── Body / table ───────────────────────────────────────────────────── */
.dataslug-body  { padding:0 20px 20px; }
.dataslug-status{ font-size:13px; color:var(--ds-ink-2); padding:10px 0; }
.results-wrap   { overflow-x:auto; -webkit-overflow-scrolling:touch; }

.dataslug-table { width:100%; border-collapse:separate; border-spacing:0; }
.dataslug-table th,
.dataslug-table td { padding:12px 10px; border-bottom:1px solid #f1f5f9;
                     text-align:left; font-size:14px; }
.dataslug-table thead th { position:sticky; top:0; background:var(--ds-soft-2); z-index:1; font-weight:600; }

/* ── Badges ─────────────────────────────────────────────────────────── */
.ds-badge         { display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px; }
.ds-badge-pending { background:#f1f5f9; color:#111827; }
.ds-badge-ok      { background:#dcfce7; color:#065f46; }
.ds-badge-fail    { background:#fee2e2; color:#991b1b; }
.ds-badge-info    { background:#eef2ff; color:#3730a3; }

/* ── Footer / pagination ─────────────────────────────────────────────── */
.dataslug-foot { display:flex; gap:12px; align-items:center;
                 justify-content:space-between; padding:12px 20px;
                 border-top:1px solid var(--ds-ring); }
.dataslug-pagination { display:flex; gap:6px; align-items:center; }
.dataslug-pagination button { padding:8px 10px; border:1px solid #e5e7eb;
                               background:#fff; border-radius:8px; cursor:pointer; }
.ds-page-chip { padding:4px 8px; border-radius:8px; background:var(--ds-soft); font-size:12px; }

/* ── Error ───────────────────────────────────────────────────────────── */
.dataslug-error { color:#dc2626; padding:12px; background:#fee2e2;
                  border-radius:8px; margin:12px 0; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .hide-sm      { display:none; }
  .dataslug-head{ gap:10px; }
}