/* =========================================================
   table.css — DutchLine UI (Tables) v1.2
   - Premium / calm / admin-ready
   - Backwards compatible with v1.0
   - Adds opt-in future-proof features:
     * Sticky tools: .dl-table-wrap[data-sticky-tools="1"]
     * Responsive column priority: .dl-table-wrap[data-responsive="auto"] + [data-dl-priority="1|2|3"]
     * Mobile card mode: .dl-table-wrap[data-mobile="cards"] (opt-in)
     * Better focus/a11y, selection UX, rowclick exceptions, utilities
   ========================================================= */

:root{
  --dl-row-hover: rgba(48,77,161,.06);
  --dl-row-hover-strong: rgba(48,77,161,.10);
  --dl-row-selected: rgba(48,77,161,.10);
  --dl-row-selected-border: rgba(48,77,161,.20);
  --dl-row-focus: rgba(48,77,161,.18);
  --dl-z-sticky: 4;
  --dl-z-tools: 5;

  /* ✅ Copy tooltip tokens (safe defaults) */
  --dl-copy-tip-bg: rgba(11,18,32,.92);
  --dl-copy-tip-ink: rgba(255,255,255,.96);
  --dl-copy-tip-shadow: 0 14px 30px rgba(11,18,32,.18);
  --dl-copy-tip-radius: 12px;
  --dl-copy-tip-pad: 8px 10px;
  --dl-copy-tip-font: .86rem;
}

/* =========================
   Shell
   ========================= */
.dl-table-wrap{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow2);
  overflow:hidden;
}

/* Allow using dl-table-wrap on .table-responsive too (your usage) */
.table-responsive.dl-table-wrap{
  -webkit-overflow-scrolling: touch;
}

/* =========================
   Header / tools
   ========================= */
.dl-table-head{
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.94);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap:wrap;
}

.dl-table-title{
  font-weight: 950;
  letter-spacing: -.02em;
  margin: 0;
}

.dl-table-meta{
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.45;
}

.dl-table-tools{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
}

/* Sticky tools (opt-in) */
.dl-table-wrap[data-sticky-tools="1"] .dl-table-head{
  position: sticky;
  top: 0;
  z-index: var(--dl-z-tools);
  backdrop-filter: blur(10px);
}

/* =========================
   Search
   ========================= */
.dl-table-search{
  position: relative;
  min-width: 280px;
}
.dl-table-search input{
  padding-left: 42px;
}
.dl-table-search svg{
  position:absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .65;
}

/* =========================
   Filters & mini pills
   ========================= */
.dl-mini{
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  padding: 8px 10px;
  font-weight: 850;
  color: rgba(11,18,32,.82);
}

/* Optional small meta helpers */
.dl-table-count{
  font-weight: 950;
  letter-spacing: -.01em;
}

/* =========================
   Bulk bar
   ========================= */
.dl-bulkbar{
  display:none;
  border-top: 1px solid var(--border);
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(48,77,161,.06), rgba(255,255,255,.92));
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap:wrap;
}

.dl-bulkbar .left,
.dl-bulkbar .right{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
}

.dl-bulkbar .count{
  font-weight: 950;
  letter-spacing: -.01em;
}

/* =========================
   Table base
   ========================= */
.dl-table{
  margin: 0;
  --bs-table-bg: transparent;
}

.dl-table thead th{
  font-weight: 950;
  letter-spacing: -.01em;
  color: rgba(11,18,32,.78);
  background: rgba(247,248,251,.86);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  vertical-align: middle;
}

.dl-table tbody td{
  vertical-align: middle;
  border-top: 1px solid rgba(11,18,32,.06);
}

.dl-table tbody tr{
  transition: background .15s ease, outline-color .15s ease;
}

.dl-table tbody tr:hover{
  background: var(--dl-row-hover);
}

.dl-table tbody tr[data-hover="strong"]:hover{
  background: var(--dl-row-hover-strong);
}

.dl-table tbody tr.is-selected{
  background: var(--dl-row-selected);
  outline: 1px solid var(--dl-row-selected-border);
  outline-offset: -1px;
}

.dl-table tbody tr.is-muted{
  opacity: .75;
}

.dl-table .text-num{
  font-variant-numeric: tabular-nums;
}

/* Better focus states */
.dl-table :is(a,button,input,select,textarea):focus-visible{
  outline: 2px solid var(--dl-row-focus);
  outline-offset: 2px;
  border-radius: 10px;
}

/* Striped option (opt-in on wrap) */
.dl-table-wrap[data-striped="1"] .dl-table tbody tr:nth-child(even){
  background: rgba(11,18,32,.02);
}
.dl-table-wrap[data-striped="1"] .dl-table tbody tr:nth-child(even):hover{
  background: color-mix(in srgb, rgba(11,18,32,.02) 40%, var(--dl-row-hover));
}

/* =========================
   Density modes
   ========================= */
.dl-table-wrap[data-density="compact"] .dl-table thead th{
  padding-top: 10px;
  padding-bottom: 10px;
}
.dl-table-wrap[data-density="compact"] .dl-table tbody td{
  padding-top: 10px;
  padding-bottom: 10px;
}

.dl-table-wrap[data-density="comfortable"] .dl-table thead th{
  padding-top: 14px;
  padding-bottom: 14px;
}
.dl-table-wrap[data-density="comfortable"] .dl-table tbody td{
  padding-top: 14px;
  padding-bottom: 14px;
}

/* =========================
   Sticky header option
   ========================= */
.dl-table-wrap[data-sticky="1"] .dl-table thead th{
  position: sticky;
  top: 0;
  z-index: var(--dl-z-sticky);
}

/* If sticky tools is enabled, stick header below tools */
.dl-table-wrap[data-sticky="1"][data-sticky-tools="1"] .dl-table thead th{
  top: 62px; /* conservative; adjust if your header height differs */
}

/* =========================
   Sort indicator (th)
   ========================= */
.dl-sort{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  cursor: pointer;
  user-select:none;
}

.dl-sort .ico{
  width: 18px;
  height: 18px;
  display:inline-grid;
  place-items:center;
  opacity: .45;
  transition: transform .14s ease, opacity .14s ease;
}

th[data-sort="asc"] .dl-sort .ico{ opacity: .90; transform: rotate(180deg); }
th[data-sort="desc"] .dl-sort .ico{ opacity: .90; transform: rotate(0deg); }

.dl-table thead th:hover .dl-sort .ico{
  opacity: .75;
}

/* =========================
   Row actions
   ========================= */
.dl-row-actions{
  display:flex;
  justify-content:flex-end;
  gap: 8px;
  flex-wrap:wrap;
}

/* =========================
   Cell layouts (title/sub, clamp)
   ========================= */
.dl-cell{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0; /* for clamp */
}

.dl-cell-title{
  font-weight: 950;
  letter-spacing: -.01em;
  line-height: 1.2;
}

.dl-cell-sub{
  color: var(--muted);
  font-size: .90rem;
  line-height: 1.45;
  margin-top: 2px;
}

.dl-clamp-1,
.dl-clamp-2{
  display:-webkit-box;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
.dl-clamp-1{ -webkit-line-clamp: 1; }
.dl-clamp-2{ -webkit-line-clamp: 2; }

/* Utilities */
.dl-nowrap{ white-space: nowrap !important; }
.dl-wrap{ white-space: normal !important; }
.dl-muted{ color: var(--muted) !important; }
.dl-kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .85em;
  padding: .15em .45em;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
}

/* =========================
   Images / thumbs
   ========================= */
.dl-thumb-sm{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background:
    radial-gradient(520px 180px at 20% 20%, rgba(48,77,161,.10), transparent 60%),
    linear-gradient(180deg, rgba(11,18,32,.02), transparent 35%),
    var(--surface);
  display:grid;
  place-items:center;
  overflow:hidden;
  flex: 0 0 auto;
}

.dl-thumb-sm img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* Helps PhotoSwipe / rowclick coexist */
[data-dl-no-rowclick]{
  cursor: zoom-in;
}

.dl-avatar{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(48,77,161,.10);
  display:grid;
  place-items:center;
  font-weight: 950;
  color: rgba(11,18,32,.82);
  flex: 0 0 auto;
}

/* =========================
   Status / badges inside table
   (uses your dl-pill; adds "dl-badge-soft" variant)
   ========================= */
.dl-badge-soft{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.82);
  font-weight: 850;
  color: rgba(11,18,32,.84);
}

.dl-badge-soft:hover{
  border-color: var(--border2);
  background: #fff;
}

/* Color helpers (soft) */
.dl-badge-success{ background: rgba(32,201,151,.10); border-color: rgba(32,201,151,.22); }
.dl-badge-warning{ background: rgba(255,193,7,.12); border-color: rgba(255,193,7,.22); }
.dl-badge-danger{  background: rgba(255,77,77,.10); border-color: rgba(255,77,77,.22); }
.dl-badge-info{    background: rgba(13,110,253,.10); border-color: rgba(13,110,253,.22); }
.dl-badge-neutral{ background: rgba(11,18,32,.06); border-color: rgba(11,18,32,.10); }

/* =========================
   Dropdown (Bootstrap) refinement
   ========================= */
.dl-dd-menu{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow2);
  padding: 8px;
}

.dl-dd-menu .dropdown-item{
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: .01em;
  padding: 10px 10px;
}

.dl-dd-menu .dropdown-item:hover{
  background: rgba(48,77,161,.08);
}

/* =========================
   Row expandable details
   ========================= */
.dl-row-details{
  display:none;
  background: rgba(255,255,255,.92);
}
tr.is-expanded + tr.dl-row-details{
  display: table-row;
}

.dl-details-cell{
  padding: 14px 14px !important;
  border-top: 0 !important;
}

.dl-details-box{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow2);
  padding: 14px;
}

.dl-details-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}

.dl-details-col-4{ grid-column: span 4; }
.dl-details-col-6{ grid-column: span 6; }
.dl-details-col-12{ grid-column: span 12; }
@media (max-width: 991px){
  .dl-details-col-4,.dl-details-col-6{ grid-column: span 12; }
}

/* =========================
   Empty + error states
   ========================= */
.dl-table-empty,
.dl-table-error{
  display:none;
  padding: 18px;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.92);
}

.dl-empty-box,
.dl-error-box{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  padding: 16px;
}

.dl-empty-title,
.dl-error-title{
  font-weight: 950;
  letter-spacing: -.02em;
  margin: 0;
}

.dl-empty-text,
.dl-error-text{
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.65;
}

/* =========================
   Skeleton loader (table)
   ========================= */
.dl-skeleton{
  background: linear-gradient(90deg, rgba(11,18,32,.06), rgba(11,18,32,.03), rgba(11,18,32,.06));
  background-size: 240% 100%;
  animation: dlSkel 1.1s ease-in-out infinite;
  border-radius: 12px;
}
@keyframes dlSkel{
  0%{ background-position: 0% 0; }
  100%{ background-position: 100% 0; }
}

.dl-table-skeleton{
  padding: 14px;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  display:none;
}

.dl-skel-row{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 10px 0;
  border-top: 1px solid rgba(11,18,32,.06);
}
.dl-skel-row:first-child{ border-top: 0; }

.dl-skel-box{ height: 14px; }
.dl-skel-w-20{ width: 20%; }
.dl-skel-w-35{ width: 35%; }
.dl-skel-w-50{ width: 50%; }
.dl-skel-w-70{ width: 70%; }

/* =========================
   Column visibility menu (optional)
   ========================= */
.dl-colmenu{
  min-width: 260px;
}
.dl-colmenu .form-check{
  padding: 8px 10px;
  border-radius: 12px;
}
.dl-colmenu .form-check:hover{
  background: rgba(48,77,161,.06);
}

/* =========================
   Responsive column priority (opt-in)
   - Use wrapper: .dl-table-wrap[data-responsive="auto"]
   - Mark th/td with data-dl-priority="1|2|3"
   - Lower number => more important (stays visible longer)
   ========================= */
.dl-table-wrap[data-responsive="auto"] [data-dl-priority]{
  /* no-op by default; rules below apply on breakpoints */
}

@media (max-width: 1199.98px){
  .dl-table-wrap[data-responsive="auto"] [data-dl-priority="3"]{ display:none !important; }
}
@media (max-width: 991.98px){
  .dl-table-wrap[data-responsive="auto"] [data-dl-priority="2"]{ display:none !important; }
}
@media (max-width: 767.98px){
  .dl-table-wrap[data-responsive="auto"] [data-dl-priority="1"]{ display:none !important; }
}

/* =========================
   Mobile cards mode (opt-in)
   - Wrap: .dl-table-wrap[data-mobile="cards"]
   - Rows can include data-dl-card="1" (optional marker)
   Notes: this doesn't force a structure; it just provides a sane base.
   ========================= */
@media (max-width: 767.98px){
  .dl-table-wrap[data-mobile="cards"] .dl-table thead{
    display:none;
  }
  .dl-table-wrap[data-mobile="cards"] .dl-table,
  .dl-table-wrap[data-mobile="cards"] .dl-table tbody,
  .dl-table-wrap[data-mobile="cards"] .dl-table tr,
  .dl-table-wrap[data-mobile="cards"] .dl-table td{
    display:block;
    width:100%;
  }
  .dl-table-wrap[data-mobile="cards"] .dl-table tbody tr{
    background: rgba(255,255,255,.94);
    border-top: 1px solid rgba(11,18,32,.06);
    padding: 12px 14px;
  }
  .dl-table-wrap[data-mobile="cards"] .dl-table tbody tr:hover{
    background: rgba(255,255,255,.98);
  }
  .dl-table-wrap[data-mobile="cards"] .dl-table tbody td{
    border-top: 0;
    padding: 6px 0;
  }
  .dl-table-wrap[data-mobile="cards"] .dl-table tbody td[data-label]::before{
    content: attr(data-label);
    display:block;
    color: var(--muted);
    font-size: .85rem;
    margin-bottom: 2px;
  }
}

/* =========================
   Row clickable
   ========================= */
.dl-table tbody tr[data-row-href]{
  cursor: pointer;
}

/* If row click is disabled on row or wrap, revert cursor */
.dl-table-wrap[data-dl-rowclick="0"] .dl-table tbody tr[data-row-href]{
  cursor: default;
}
.dl-table tbody tr[data-row-href][data-dl-rowclick="0"]{
  cursor: default;
}

/* =========================================================
   ✅ Copy-to-clipboard UX (data-dl-copy)
   - Non-breaking: only affects elements with [data-dl-copy]
   - Tooltip: uses CSS only (no extra JS)
   - Copy feedback: table.js toggles .is-copied briefly
   ========================================================= */

/* Make copy targets feel intentional */
[data-dl-copy]{
  position: relative;
  cursor: copy;
  user-select: text; /* allow selection too */
  border-radius: 10px;
  padding: 2px 6px;
  margin: -2px -6px; /* keeps layout same but increases hit area */
  transition: background .15s ease, box-shadow .15s ease, color .15s ease;
}

[data-dl-copy]:hover{
  background: rgba(48,77,161,.06);
  box-shadow: 0 0 0 1px rgba(48,77,161,.12) inset;
}

/* Tooltip (default text = "Kopiëren") */
[data-dl-copy]::after{
  content: attr(data-dl-copy-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  background: var(--dl-copy-tip-bg);
  color: var(--dl-copy-tip-ink);
  padding: var(--dl-copy-tip-pad);
  border-radius: var(--dl-copy-tip-radius);
  font-size: var(--dl-copy-tip-font);
  font-weight: 900;
  letter-spacing: .01em;
  box-shadow: var(--dl-copy-tip-shadow);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  transition: opacity .14s ease, transform .14s ease;
}

/* If user didn't set a tooltip attribute, show default */
[data-dl-copy]:not([data-dl-copy-tip])::after{
  content: "Kopiëren";
}

/* Small arrow */
[data-dl-copy]::before{
  content:"";
  position:absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%) translateY(4px);
  width: 10px;
  height: 10px;
  background: var(--dl-copy-tip-bg);
  rotate: 45deg;
  opacity: 0;
  pointer-events:none;
  z-index: 19;
  transition: opacity .14s ease, transform .14s ease;
}

[data-dl-copy]:hover::after,
[data-dl-copy]:hover::before{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Copied state (table.js toggles .is-copied) */
[data-dl-copy].is-copied{
  background: rgba(32,201,151,.10);
  box-shadow: 0 0 0 1px rgba(32,201,151,.22) inset;
}

[data-dl-copy].is-copied::after{
  content:"Gekopieerd";
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

[data-dl-copy].is-copied::before{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Mobile: avoid tooltips blocking */
@media (max-width: 575.98px){
  [data-dl-copy]::after,
  [data-dl-copy]::before{
    display:none;
  }
}