/* =========================================================
   badges.css — DutchLine UI (Badges) v1.0
   Goals:
   - Non-breaking: supports existing .dl-pill / .dl-badge
   - Future-proof: variants, sizes, dots, icons, clickable, closable
   - Token-based colors (works with your existing CSS vars)
   - Accessible defaults, calm premium styling
   ========================================================= */

/* ---------- Tokens (safe defaults) ---------- */
:root {
    --dl-badge-radius: 999px;
    --dl-badge-radius-sm: 12px;
    --dl-badge-font: 850;
    --dl-badge-letter: .01em;
    --dl-badge-pad-y: 8px;
    --dl-badge-pad-x: 10px;
    --dl-badge-pad-y-sm: 6px;
    --dl-badge-pad-x-sm: 8px;
    --dl-badge-pad-y-lg: 10px;
    --dl-badge-pad-x-lg: 12px;
    --dl-badge-border: var(--border);
    --dl-badge-border-2: var(--border2);
    --dl-badge-bg: rgba(255, 255, 255);
    --dl-badge-ink: rgba(11, 18, 32);
    --dl-badge-muted: var(--muted);
    --dl-accent-bg: var(--accent-soft, rgba(48, 77, 161));
    --dl-accent-bd: rgba(48, 77, 161);
    --dl-accent-ink: rgba(11, 18, 32);
    --dl-success-bg: rgba(32, 201, 151);
    --dl-success-bd: rgba(32, 201, 151);
    --dl-success-ink: rgba(11, 18, 32);
    --dl-danger-bg: rgba(255, 77, 77);
    --dl-danger-bd: rgba(255, 77, 77);
    --dl-danger-ink: rgba(11, 18, 32);
    --dl-warning-bg: rgba(255, 193, 7);
    --dl-warning-bd: rgba(255, 193, 7);
    --dl-warning-ink: rgba(11, 18, 32);
    --dl-info-bg: rgba(13, 110, 253);
    --dl-info-bd: rgba(13, 110, 253);
    --dl-info-ink: rgba(11, 18, 32);
    --dl-neutral-bg: rgba(11, 18, 32);
    --dl-neutral-bd: rgba(11, 18, 32);
    --dl-neutral-ink: rgba(11, 18, 32);
    --dl-soft-shadow: 0 10px 22px rgba(11, 18, 32, .2);
    --dl-soft-shadow-hover: 0 12px 26px rgba(11, 18, 32, .3);
}

/* =========================================================
   Base badge component
   - keep .dl-pill and .dl-badge as aliases
   ========================================================= */
.dl-badge,
.dl-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: var(--dl-badge-pad-y) var(--dl-badge-pad-x);
  border-radius: var(--dl-badge-radius);
  border: 1px solid var(--dl-badge-border);
  background: var(--dl-badge-bg);
  color: var(--dl-badge-ink);
  font-weight: var(--dl-badge-font);
  letter-spacing: var(--dl-badge-letter);
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  user-select:none;
}

/* Square-ish "label" style (optional) */
.dl-badge.dl-badge-label{
  border-radius: var(--dl-badge-radius-sm);
}

/* Sizes */
.dl-badge.dl-badge-sm,
.dl-pill.dl-pill-sm{
  padding: var(--dl-badge-pad-y-sm) var(--dl-badge-pad-x-sm);
  font-size: .88rem;
  border-radius: 999px;
}

.dl-badge.dl-badge-lg,
.dl-pill.dl-pill-lg{
  padding: var(--dl-badge-pad-y-lg) var(--dl-badge-pad-x-lg);
  font-size: 1.02rem;
}

/* Muted */
.dl-badge.dl-badge-muted,
.dl-pill.dl-pill-muted{
  color: var(--dl-badge-muted);
}

/* =========================================================
   Variants (soft)
   ========================================================= */
.dl-badge-accent{ background: var(--dl-accent-bg); border-color: var(--dl-accent-bd); color: var(--dl-accent-ink); }
.dl-badge-success{ background: var(--dl-success-bg); border-color: var(--dl-success-bd); color: #fff; }
.dl-badge-danger{  background: var(--dl-danger-bg);  border-color: var(--dl-danger-bd);  color: #fff; }
.dl-badge-warning{ background: var(--dl-warning-bg); border-color: var(--dl-warning-bd); color: #fff; }
.dl-badge-info{    background: var(--dl-info-bg);    border-color: var(--dl-info-bd);   color: #fff; }
.dl-badge-neutral{ background: var(--dl-neutral-bg); border-color: var(--dl-neutral-bd); color: #fff; }

/* Outline variants (no fill) */
.dl-badge-outline{ background: transparent; color: var(--dl-neutral-ink);}
.dl-badge-outline.dl-badge-accent{ border-color: var(--dl-accent-bd); }
.dl-badge-outline.dl-badge-success{ border-color: var(--dl-success-bd); }
.dl-badge-outline.dl-badge-danger{ border-color: var(--dl-danger-bd); }
.dl-badge-outline.dl-badge-warning{ border-color: var(--dl-warning-bd); }
.dl-badge-outline.dl-badge-info{ border-color: var(--dl-info-bd); }
.dl-badge-outline.dl-badge-neutral{ border-color: var(--dl-neutral-bd); }

/* Solid variants (optional; calm) */
.dl-badge-solid{ color: #fff; border-color: transparent; }
.dl-badge-solid.dl-badge-accent{ background: rgba(48,77,161,.88); }
.dl-badge-solid.dl-badge-success{ background: rgba(32,201,151,.88); }
.dl-badge-solid.dl-badge-danger{ background: rgba(255,77,77,.86); }
.dl-badge-solid.dl-badge-warning{ background: rgba(255,193,7,.92); color: rgba(11,18,32,.92); }
.dl-badge-solid.dl-badge-info{ background: rgba(13,110,253,.88); }
.dl-badge-solid.dl-badge-neutral{ background: rgba(11,18,32,.72); }

/* =========================================================
   Dot indicator (status dot)
   ========================================================= */
.dl-badge-dot::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  opacity: .75;
}

.dl-badge-dot.dl-badge-success::before{ background: rgba(32,201,151,.95); }
.dl-badge-dot.dl-badge-danger::before{  background: rgba(255,77,77,.95); }
.dl-badge-dot.dl-badge-warning::before{ background: rgba(255,193,7,.95); }
.dl-badge-dot.dl-badge-info::before{    background: rgba(13,110,253,.95); }
.dl-badge-dot.dl-badge-neutral::before{ background: rgba(11,18,32,.55); }
.dl-badge-dot.dl-badge-accent::before{  background: rgba(48,77,161,.95); }

/* =========================================================
   Icon support
   - Put any <i> or <svg> inside badge
   ========================================================= */
.dl-badge i,
.dl-badge svg,
.dl-pill i,
.dl-pill svg{
  flex: 0 0 auto;
  opacity: .85;
}

/* =========================================================
   Clickable / link badges
   ========================================================= */
a.dl-badge,
a.dl-pill,
button.dl-badge,
button.dl-pill{
  cursor:pointer;
  text-decoration:none;
}

.dl-badge.is-clickable,
.dl-pill.is-clickable{
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
  box-shadow: var(--dl-soft-shadow);
}

.dl-badge.is-clickable:hover,
.dl-pill.is-clickable:hover{
  transform: translateY(-1px);
  background: #fff;
  border-color: var(--dl-badge-border-2);
  color: var(--ink);
  box-shadow: var(--dl-soft-shadow-hover);
}

.dl-badge:focus,
.dl-pill:focus{ outline:none; }
.dl-badge:focus-visible,
.dl-pill:focus-visible{
  box-shadow: 0 0 0 6px var(--focus), var(--dl-soft-shadow-hover);
}

/* Disabled */
.dl-badge.is-disabled,
.dl-pill.is-disabled,
.dl-badge[aria-disabled="true"],
.dl-pill[aria-disabled="true"]{
  opacity: .55;
  pointer-events:none;
  box-shadow:none;
  transform:none;
}

/* =========================================================
   Count badge (like notifications)
   ========================================================= */
.dl-badge-count{
  display:inline-grid;
  place-items:center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid var(--dl-badge-border);
  background: rgba(255,255,255,.92);
  font-weight: 950;
  font-size: .82rem;
  color: rgba(11,18,32,.90);
}

/* =========================================================
   Closable badge (optional)
   - Add button[data-dl-badge-close]
   ========================================================= */
.dl-badge .dl-badge-close,
.dl-pill .dl-badge-close{
  border: 0;
  background: transparent;
  padding: 0;
  margin-left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display:inline-grid;
  place-items:center;
  opacity: .7;
}

.dl-badge .dl-badge-close:hover,
.dl-pill .dl-badge-close:hover{
  opacity: 1;
  background: rgba(11,18,32,.06);
}

/* =========================================================
   Group helper (optional)
   ========================================================= */
.dl-badge-group{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
}
/* =========================================================
   Corner counter (notification dot/number on edge)
   Usage:
     <span class="dl-pill dl-badge-accent dl-badge-corner">
       <i class="bi bi-bell"></i> Meldingen
       <span class="dl-badge-corner-count">1</span>
     </span>
   ========================================================= */

.dl-badge-corner,
.dl-pill.dl-badge-corner,
.dl-badge.dl-badge-corner{
  position: relative;
  padding-right: calc(var(--dl-badge-pad-x) + 14px); /* ruimte voor corner */
}

.dl-badge-corner .dl-badge-corner-count{
  position: absolute;
  top: -6px;
  right: -6px;

  min-width: 18px;
  height: 18px;
  padding: 0 5px;

  border-radius: 999px;
  display: inline-grid;
  place-items: center;

  font-weight: 950;
  font-size: .74rem;
  line-height: 1;

  color: #fff;
  background: rgba(255,77,77,.95); /* default “notif” */
  border: 2px solid rgba(255,255,255,.92); /* ring voor contrast */
  box-shadow: 0 10px 18px rgba(11,18,32,.18);
}

/* Small badge corner */
.dl-badge-sm.dl-badge-corner .dl-badge-corner-count,
.dl-pill-sm.dl-badge-corner .dl-badge-corner-count{
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  font-size: .70rem;
}

/* Large badge corner */
.dl-badge-lg.dl-badge-corner .dl-badge-corner-count,
.dl-pill-lg.dl-badge-corner .dl-badge-corner-count{
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  font-size: .78rem;
}

/* Variant helpers for the corner itself */
.dl-badge-corner .dl-badge-corner-count.is-accent{ background: rgba(48,77,161); }
.dl-badge-corner .dl-badge-corner-count.is-success{ background: rgba(32,201,151,.95); }
.dl-badge-corner .dl-badge-corner-count.is-warning{ background: rgba(255,193,7,.98); color: rgba(11,18,32,.92); }
.dl-badge-corner .dl-badge-corner-count.is-info{ background: rgba(13,110,253,.95); }
.dl-badge-corner .dl-badge-corner-count.is-neutral{ background: rgba(11,18,32); }

/* Dot-only (no number) */
.dl-badge-corner .dl-badge-corner-count.is-dot{
  min-width: 12px;
  height: 12px;
  padding: 0;
  border-radius: 999px;
  font-size: 0;
}