/* =========================================================
   widgets.css — DutchLine UI Widgets
   - KPI cards, panels, lists, mini charts, tables, states
   - consistent spacing, actions, headers
   - loading skeletons + empty/error blocks
   ========================================================= */

:root{
  --dl-success: #20c997;
  --dl-warning: #ffc107;
  --dl-danger:  #ff4d4d;
  --dl-info:    #0d6efd;

  --dl-success-soft: rgba(32,201,151,.12);
  --dl-warning-soft: rgba(255,193,7,.14);
  --dl-danger-soft:  rgba(255,77,77,.12);
  --dl-info-soft:    rgba(13,110,253,.12);
}

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

.dl-widget-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.94);
}

.dl-widget-title{
  margin: 0;
  font-weight: 950;
  letter-spacing: -.02em;
  line-height: 1.15;
  font-size: 1.05rem;
}

.dl-widget-sub{
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: .93rem;
}

.dl-widget-actions{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}

.dl-widget-body{
  padding: 14px;
}

.dl-widget-foot{
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.94);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap:wrap;
}

/* Tiny icon button (for widget head) */
.dl-wiconbtn{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.88);
  display:grid;
  place-items:center;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  cursor:pointer;
  font-weight: 950;
}
.dl-wiconbtn:hover{
  transform: translateY(-1px);
  border-color: var(--border2);
  background: #fff;
  box-shadow: 0 12px 26px rgba(11,18,32,.08);
}

/* KPI widget (single card) */
.dl-kpi{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.94);
  padding: 14px;
  height: 100%;
}

.dl-kpi-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}

.dl-kpi-label{
  color: var(--muted);
  font-weight: 850;
  letter-spacing: .01em;
  font-size: .93rem;
}

.dl-kpi-value{
  margin-top: 10px;
  font-weight: 950;
  letter-spacing: -.02em;
  font-size: 1.75rem;
  line-height: 1.05;
}

.dl-kpi-meta{
  margin-top: 8px;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.55;
}

.dl-trend{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  font-weight: 900;
  font-size: .85rem;
  white-space:nowrap;
}

.dl-trend.up{
  border-color: rgba(32,201,151,.24);
  background: rgba(32,201,151,.12);
}
.dl-trend.down{
  border-color: rgba(255,77,77,.24);
  background: rgba(255,77,77,.12);
}
.dl-trend.neutral{
  background: rgba(11,18,32,.06);
}

/* KPI grid */
.dl-kpi-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.dl-kpi-col-3{ grid-column: span 3; }
.dl-kpi-col-4{ grid-column: span 4; }
.dl-kpi-col-6{ grid-column: span 6; }
.dl-kpi-col-12{ grid-column: span 12; }

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

/* List widget */
.dl-wlist{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.dl-witem{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  padding: 12px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.dl-witem:hover{
  transform: translateY(-1px);
  border-color: var(--border2);
  box-shadow: 0 16px 40px rgba(11,18,32,.08);
}
.dl-witem-left{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  min-width: 0;
}
.dl-wdot{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  font-weight: 950;
  border: 1px solid var(--border);
  background: rgba(11,18,32,.06);
  flex: 0 0 auto;
}
.dl-wdot.success{ border-color: rgba(32,201,151,.22); background: rgba(32,201,151,.12); }
.dl-wdot.warning{ border-color: rgba(255,193,7,.22); background: rgba(255,193,7,.14); }
.dl-wdot.danger{  border-color: rgba(255,77,77,.22); background: rgba(255,77,77,.12); }
.dl-wdot.info{    border-color: rgba(13,110,253,.22); background: rgba(13,110,253,.12); }

.dl-witem-title{
  font-weight: 950;
  letter-spacing: -.01em;
  margin: 0;
  line-height: 1.2;
}
.dl-witem-sub{
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: .92rem;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.dl-witem-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

/* Mini chart placeholder */
.dl-mini-chart{
  border-radius: var(--r2);
  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);
  height: 86px;
  overflow:hidden;
  position:relative;
}
.dl-mini-chart::after{
  content:"";
  position:absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(11,18,32,.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(11,18,32,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .28;
  pointer-events:none;
}

/* Progress bar (widget style) */
.dl-progress{
  height: 10px;
  border-radius: 999px;
  background: rgba(11,18,32,.06);
  border: 1px solid rgba(11,18,32,.08);
  overflow:hidden;
}
.dl-progress > span{
  display:block;
  height:100%;
  width: 0%;
  background: var(--accent);
  transition: width .25s ease;
}

/* Table widget wrapper */
.dl-wtable{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  overflow:hidden;
  background: rgba(255,255,255,.92);
}
.dl-wtable .table{
  margin: 0;
}
.dl-wtable thead th{
  font-weight: 950;
  letter-spacing: -.01em;
  color: rgba(11,18,32,.78);
  background: rgba(255,255,255,.94);
}
.dl-wtable tbody td{
  vertical-align: middle;
}
.dl-wtable tbody tr:hover{
  background: rgba(48,77,161,.05);
}

/* Widget states */
.dl-wstate{
  border-radius: var(--r2);
  border: 1px dashed color-mix(in srgb, var(--accent) 30%, var(--border));
  background: linear-gradient(180deg, rgba(48,77,161,.06), rgba(255,255,255,.88));
  padding: 14px;
}
.dl-wstate .t{
  font-weight: 950;
  margin: 0;
  letter-spacing: -.01em;
}
.dl-wstate .p{
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.6;
}
.dl-wstate.error{
  border-color: rgba(255,77,77,.28);
  background: linear-gradient(180deg, rgba(255,77,77,.10), rgba(255,255,255,.92));
}

/* Loading skeleton */
.dl-skel{
  position: relative;
  overflow: hidden;
  background: rgba(11,18,32,.06);
  border-radius: 12px;
}
.dl-skel::after{
  content:"";
  position:absolute;
  inset:0;
  transform: translateX(-60%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: dlSkel 1.1s infinite ease-in-out;
}
@keyframes dlSkel{
  0%{ transform: translateX(-70%); }
  100%{ transform: translateX(70%); }
}

.dl-skel-line{ height: 12px; border-radius: 10px; }
.dl-skel-line.lg{ height: 18px; }
.dl-skel-line.sm{ height: 10px; opacity:.8; }

.dl-hidden{ display:none !important; }
/* =========================
   DutchLine Tooltip (dl-tooltip)
   Gebruik:
   <span data-dl-tooltip="Tooltip tekst">Hover/focus</span>

   Optioneel:
   - data-dl-tooltip-pos="top|bottom|left|right" (default: top)
   - data-dl-tooltip-align="start|center|end"   (default: center)
   ========================= */

[data-dl-tooltip]{
  position: relative;
  z-index: 1;
  isolation: isolate;           /* eigen stacking context */
}

/* basis */
[data-dl-tooltip]::after,
[data-dl-tooltip]::before{
  position: absolute;
  opacity: 0;
  pointer-events: none;
    z-index: 100001;
  transition: opacity .14s ease, transform .14s ease;
}

/* bubble */
[data-dl-tooltip]::after{
  content: attr(data-dl-tooltip);
  padding: 7px 10px;
  font-size: 12px;
  line-height: 1.2;
  color: #fff;
  background: rgba(12, 18, 28, .96);
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
  white-space: nowrap;
}

/* arrow */
[data-dl-tooltip]::before{
  content: "";
  width: 0;
  height: 0;
}

/* show on hover/focus */
[data-dl-tooltip]:hover::after,
[data-dl-tooltip]:hover::before,
[data-dl-tooltip]:focus-visible::after,
[data-dl-tooltip]:focus-visible::before{
  opacity: 1;
  z-index: 100000;
}

/* =========================
   DEFAULT: top + center
   ========================= */
[data-dl-tooltip]::after{
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translate(-50%, -6px);
}
[data-dl-tooltip]::before{
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translate(-50%, -6px);

  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid rgba(12, 18, 28, .96);
}
[data-dl-tooltip]:hover::after,
[data-dl-tooltip]:hover::before,
[data-dl-tooltip]:focus-visible::after,
[data-dl-tooltip]:focus-visible::before{
  transform: translate(-50%, 0);
}

/* =========================
   ALIGN (top/bottom): start|center|end
   ========================= */
[data-dl-tooltip][data-dl-tooltip-align="start"]::after,
[data-dl-tooltip][data-dl-tooltip-align="start"]::before{
  left: 0;
  transform: translate(0, -6px);
}
[data-dl-tooltip][data-dl-tooltip-align="start"]:hover::after,
[data-dl-tooltip][data-dl-tooltip-align="start"]:hover::before,
[data-dl-tooltip][data-dl-tooltip-align="start"]:focus-visible::after,
[data-dl-tooltip][data-dl-tooltip-align="start"]:focus-visible::before{
  transform: translate(0, 0);
}

[data-dl-tooltip][data-dl-tooltip-align="end"]::after,
[data-dl-tooltip][data-dl-tooltip-align="end"]::before{
  left: auto;
  right: 0;
  transform: translate(0, -6px);
}
[data-dl-tooltip][data-dl-tooltip-align="end"]:hover::after,
[data-dl-tooltip][data-dl-tooltip-align="end"]:hover::before,
[data-dl-tooltip][data-dl-tooltip-align="end"]:focus-visible::after,
[data-dl-tooltip][data-dl-tooltip-align="end"]:focus-visible::before{
  transform: translate(0, 0);
}

/* =========================
   POS: bottom
   ========================= */
[data-dl-tooltip][data-dl-tooltip-pos="bottom"]::after{
  top: calc(100% + 10px);
  bottom: auto;
  left: 50%;
  transform: translate(-50%, 6px);
}
[data-dl-tooltip][data-dl-tooltip-pos="bottom"]::before{
  top: calc(100% + 4px);
  bottom: auto;
  left: 50%;
  transform: translate(-50%, 6px);

  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid rgba(12, 18, 28, .96);
  border-top: 0;
}
[data-dl-tooltip][data-dl-tooltip-pos="bottom"]:hover::after,
[data-dl-tooltip][data-dl-tooltip-pos="bottom"]:hover::before,
[data-dl-tooltip][data-dl-tooltip-pos="bottom"]:focus-visible::after,
[data-dl-tooltip][data-dl-tooltip-pos="bottom"]:focus-visible::before{
  transform: translate(-50%, 0);
}

/* bottom + align start/end */
[data-dl-tooltip][data-dl-tooltip-pos="bottom"][data-dl-tooltip-align="start"]::after,
[data-dl-tooltip][data-dl-tooltip-pos="bottom"][data-dl-tooltip-align="start"]::before{
  left: 0;
  transform: translate(0, 6px);
}
[data-dl-tooltip][data-dl-tooltip-pos="bottom"][data-dl-tooltip-align="start"]:hover::after,
[data-dl-tooltip][data-dl-tooltip-pos="bottom"][data-dl-tooltip-align="start"]:hover::before,
[data-dl-tooltip][data-dl-tooltip-pos="bottom"][data-dl-tooltip-align="start"]:focus-visible::after,
[data-dl-tooltip][data-dl-tooltip-pos="bottom"][data-dl-tooltip-align="start"]:focus-visible::before{
  transform: translate(0, 0);
}

[data-dl-tooltip][data-dl-tooltip-pos="bottom"][data-dl-tooltip-align="end"]::after,
[data-dl-tooltip][data-dl-tooltip-pos="bottom"][data-dl-tooltip-align="end"]::before{
  left: auto;
  right: 0;
  transform: translate(0, 6px);
}
[data-dl-tooltip][data-dl-tooltip-pos="bottom"][data-dl-tooltip-align="end"]:hover::after,
[data-dl-tooltip][data-dl-tooltip-pos="bottom"][data-dl-tooltip-align="end"]:hover::before,
[data-dl-tooltip][data-dl-tooltip-pos="bottom"][data-dl-tooltip-align="end"]:focus-visible::after,
[data-dl-tooltip][data-dl-tooltip-pos="bottom"][data-dl-tooltip-align="end"]:focus-visible::before{
  transform: translate(0, 0);
}

/* =========================
   POS: left
   ========================= */
[data-dl-tooltip][data-dl-tooltip-pos="left"]::after{
  right: calc(100% + 10px);
  left: auto;
  top: 50%;
  bottom: auto;
  transform: translate(-6px, -50%);
}
[data-dl-tooltip][data-dl-tooltip-pos="left"]::before{
  right: calc(100% + 4px);
  left: auto;
  top: 50%;
  bottom: auto;
  transform: translate(-6px, -50%);

  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 7px solid rgba(12, 18, 28, .96);
}
[data-dl-tooltip][data-dl-tooltip-pos="left"]:hover::after,
[data-dl-tooltip][data-dl-tooltip-pos="left"]:hover::before,
[data-dl-tooltip][data-dl-tooltip-pos="left"]:focus-visible::after,
[data-dl-tooltip][data-dl-tooltip-pos="left"]:focus-visible::before{
  transform: translate(0, -50%);
}

/* =========================
   POS: right
   ========================= */
[data-dl-tooltip][data-dl-tooltip-pos="right"]::after{
  left: calc(100% + 10px);
  top: 50%;
  bottom: auto;
  transform: translate(6px, -50%);
}
[data-dl-tooltip][data-dl-tooltip-pos="right"]::before{
  left: calc(100% + 4px);
  top: 50%;
  bottom: auto;
  transform: translate(6px, -50%);

  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid rgba(12, 18, 28, .96);
}
[data-dl-tooltip][data-dl-tooltip-pos="right"]:hover::after,
[data-dl-tooltip][data-dl-tooltip-pos="right"]:hover::before,
[data-dl-tooltip][data-dl-tooltip-pos="right"]:focus-visible::after,
[data-dl-tooltip][data-dl-tooltip-pos="right"]:focus-visible::before{
  transform: translate(0, -50%);
}

/* =========================
   Reduced motion
   ========================= */
@media (prefers-reduced-motion: reduce){
  [data-dl-tooltip]::after,
  [data-dl-tooltip]::before{
    transition: none;
  }
}
.dl-tooltip-layer,
.dl-card,
.dl-table-wrap,
.dl-form-row{
  overflow: visible;
}